/**
 * Product listings — یک ریشه (v1.12)
 * Category pages (taxonomy-product_cat.php) and search results (search.php).
 *
 * Layout
 *   header   name · count · short description · sibling categories
 *   body     filter rail (right, sticky)  |  toolbar + grid
 *   about    the long guide, folded, above the footer
 *
 * One filter panel: a sticky rail from 961px up; below that the SAME
 * element becomes a drawer. Nothing is cloned.
 */

/* ═══ Header ══════════════════════════════════════════════════════ */
.yr-cat-head{ padding:18px 0 0; }
.yr-cat-head__inner{ display:flex; align-items:flex-start; gap:20px; }
.yr-cat-head__img{
  flex:none; width:104px; height:104px;
  border-radius:var(--radius-md); object-fit:cover;
  background:var(--color-surface-warm);
}
.yr-cat-head__body{ flex:1; min-width:0; }
.yr-cat-head__title-row{ display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 12px; }
.yr-cat-head__title{
  margin:0;
  font-size:clamp(24px, 3vw, 32px); font-weight:800; line-height:1.45;
  color:var(--color-text-primary);
}
.yr-cat-head__count{ font-size:14px; color:var(--color-text-muted); white-space:nowrap; }

.yr-cat-head__desc{ max-width:62em; margin-top:8px; }
.yr-cat-head__desc-text{
  font-size:15px; line-height:2; color:var(--color-text-secondary);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.yr-cat-head__desc-text.is-open{ display:block; overflow:visible; }
.yr-cat-head__desc-text p{ margin:0; font-size:inherit; line-height:inherit; color:inherit; }
.yr-cat-head__desc-text p + p{ margin-top:8px; }
.yr-cat-head__desc-text a{ color:var(--color-brand); text-decoration:underline; text-underline-offset:4px; }

.yr-cat-more{
  display:inline-flex; align-items:center; gap:6px;
  min-height:40px; margin-top:4px; padding:0;
  border:0; background:none;
  font-family:inherit; font-size:14px; font-weight:700; color:var(--color-brand);
  cursor:pointer;
}
.yr-cat-more::after{
  content:""; width:7px; height:7px; margin-top:-3px;
  border:solid currentColor; border-width:0 2px 2px 0; transform:rotate(45deg);
  transition:transform var(--transition);
}
.yr-cat-more[aria-expanded="true"]::after{ margin-top:3px; transform:rotate(-135deg); }
.yr-cat-more:hover{ color:var(--color-brand-deep); }
.yr-cat-more[hidden]{ display:none; }

/* Sibling categories: one row; it scrolls sideways rather than wrapping
   into a block that pushes the products down. */
.yr-cat-sibs{
  display:flex; gap:8px;
  margin-top:16px; padding-bottom:16px;
  border-bottom:1px solid var(--color-border-light);
  overflow-x:auto; scrollbar-width:none;
}
.yr-cat-sibs::-webkit-scrollbar{ display:none; }
.yr-cat-sib{
  flex:none; display:inline-flex; align-items:center;
  min-height:40px; padding:0 16px;
  border:1px solid var(--color-border); border-radius:99px;
  background:var(--color-surface);
  font-size:14px; font-weight:600; color:var(--color-text-secondary);
  text-decoration:none; white-space:nowrap;
  transition:border-color var(--transition), color var(--transition), background var(--transition);
}
.yr-cat-sib:hover{ border-color:var(--color-brand); color:var(--color-brand); }
.yr-cat-sib.is-current{ border-color:var(--color-brand); background:var(--color-brand-soft); color:var(--color-brand-deep); font-weight:800; }

/* ═══ Body: rail + products ═══════════════════════════════════════ */
.yr-cat{
  display:grid; grid-template-columns:264px minmax(0, 1fr); gap:24px;
  align-items:start;
  padding-top:20px;
  /* responsive.css gives every .container overflow-x:hidden, which makes
     it a scroll container and breaks position:sticky inside it. */
  overflow:visible;
}

/* ── Filters ── */
.yr-cat-filters{
  position:sticky; top:calc(var(--header-height, 78px) + var(--nav-height, 46px) + 12px);
  max-height:calc(100vh - var(--header-height, 78px) - var(--nav-height, 46px) - 24px);
  display:flex; flex-direction:column;
  border:1px solid var(--color-border); border-radius:var(--radius-md);
  background:var(--color-surface);
  overflow:hidden;
}
.yr-cat-filters__bar{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px;
  border-bottom:1px solid var(--color-border-light);
}
.yr-cat-filters__title{ margin:0; font-size:16px; font-weight:800; line-height:1.6; color:var(--color-text-primary); }
.yr-cat-filters__close{ display:none; }
.yr-cat-form{ display:flex; flex-direction:column; min-height:0; margin:0; }
.yr-cat-form__scroll{ min-height:0; overflow-y:auto; overscroll-behavior:contain; }
.yr-cat-form__foot{ display:none; }

.yr-cat-fgroup{ margin:0; padding:14px 16px; border:0; border-bottom:1px solid var(--color-border-light); min-width:0; }
.yr-cat-form__scroll > .yr-cat-fgroup:last-child{ border-bottom:0; }
/* A <legend> is drawn ON the fieldset's top edge, outside its padding.
   Floated, it lays out like any block inside the padding. */
.yr-cat-fgroup legend{ float:inline-start; width:100%; }
.yr-cat-fgroup legend + *{ clear:both; }
.yr-cat-fgroup legend,
.yr-cat-fgroup__head h3{
  margin:0 0 10px; padding:0;
  font-size:14.5px; font-weight:800; line-height:1.6; color:var(--color-text-primary);
}
.yr-cat-fgroup legend small{ font-size:12.5px; font-weight:500; color:var(--color-text-muted); }
.yr-cat-fgroup__head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.yr-cat-clear{ font-size:13.5px; font-weight:700; color:var(--color-danger); text-decoration:none; padding:4px 0; }
.yr-cat-clear:hover{ text-decoration:underline; text-underline-offset:4px; }

.yr-cat-active{ display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; list-style:none; }
.yr-cat-active a{
  display:inline-flex; align-items:center; gap:6px;
  min-height:34px; padding:0 10px 0 8px;
  border-radius:99px; background:var(--color-brand-soft);
  font-size:13.5px; font-weight:600; color:var(--color-brand-deep); text-decoration:none;
}
.yr-cat-active a svg{ width:13px; height:13px; }
.yr-cat-active a:hover{ background:var(--color-brand-muted); }

/* Switch */
.yr-cat-switch{ display:flex; align-items:center; gap:10px; min-height:32px; cursor:pointer; }
.yr-cat-switch input{ position:absolute; opacity:0; width:1px; height:1px; }
.yr-cat-switch__track{
  position:relative; flex:none; width:44px; height:24px;
  border-radius:99px; background:var(--color-border-strong);
  transition:background var(--transition);
}
.yr-cat-switch__track::after{
  content:""; position:absolute; top:3px; inset-inline-start:3px;
  width:18px; height:18px; border-radius:50%; background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.25);
  transition:inset-inline-start var(--transition);
}
.yr-cat-switch input:checked + .yr-cat-switch__track{ background:var(--color-brand); }
.yr-cat-switch input:checked + .yr-cat-switch__track::after{ inset-inline-start:23px; }
.yr-cat-switch input:focus-visible + .yr-cat-switch__track{ outline:2px solid var(--color-brand); outline-offset:2px; }
.yr-cat-switch__label{ font-size:14.5px; font-weight:600; color:var(--color-text-primary); }

/* Price */
.yr-cat-price{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
.yr-cat-price__field{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.yr-cat-price__field span{ font-size:13px; font-weight:600; color:var(--color-text-secondary); }
.yr-cat-price__field input{
  width:100%; height:44px; padding:0 10px;
  border:1px solid var(--color-border-strong); border-radius:var(--radius-sm);
  background:var(--color-surface);
  font-family:inherit; font-size:15px; color:var(--color-text-primary);
  direction:ltr; text-align:left;
}
.yr-cat-price__field input::placeholder{ color:var(--color-text-muted); opacity:.75; }
.yr-cat-price__field input:focus{ border-color:var(--color-brand); outline:none; box-shadow:0 0 0 3px var(--color-focus-ring); }
.yr-cat-price__apply{
  width:100%; height:42px; margin-top:10px;
  border:1px solid var(--color-brand); border-radius:var(--radius-sm);
  background:var(--color-surface); color:var(--color-brand);
  font-family:inherit; font-size:14px; font-weight:700; cursor:pointer;
  transition:background var(--transition), color var(--transition);
}
.yr-cat-price__apply:hover{ background:var(--color-brand); color:var(--color-text-inverse); }

/* Chips (radio) */
.yr-cat-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.yr-cat-chip{ position:relative; cursor:pointer; }
.yr-cat-chip input{ position:absolute; opacity:0; width:1px; height:1px; }
.yr-cat-chip span{
  display:inline-flex; align-items:center; min-height:36px; padding:0 13px;
  border:1px solid var(--color-border); border-radius:99px;
  font-size:13.5px; font-weight:600; color:var(--color-text-secondary);
  transition:border-color var(--transition), background var(--transition), color var(--transition);
}
.yr-cat-chip:hover span{ border-color:var(--color-brand); color:var(--color-brand); }
.yr-cat-chip input:checked + span{ border-color:var(--color-brand); background:var(--color-brand-soft); color:var(--color-brand-deep); font-weight:800; }
.yr-cat-chip input:focus-visible + span{ outline:2px solid var(--color-brand); outline-offset:2px; }

/* Checkboxes */
.yr-cat-checks{ display:grid; gap:2px; }
.yr-cat-check{ display:flex; align-items:center; gap:10px; min-height:38px; cursor:pointer; }
.yr-cat-check input{ flex:none; width:20px; height:20px; margin:0; accent-color:var(--color-brand); }
.yr-cat-check__name{ flex:1; min-width:0; font-size:14.5px; color:var(--color-text-primary); }
.yr-cat-check__count{ font-size:13px; color:var(--color-text-muted); }

.yr-cat-scrim{ display:none; }

/* ── Toolbar ── */
.yr-cat-main{ min-width:0; }
.yr-cat-toolbar{ display:flex; align-items:center; gap:12px; margin-bottom:16px; min-width:0; }
.yr-cat-filter-btn{ display:none; }
.yr-cat-sort{
  display:flex; align-items:center; gap:4px;
  flex:1; min-width:0;
  overflow-x:auto; scrollbar-width:none;
}
.yr-cat-sort::-webkit-scrollbar{ display:none; }
.yr-cat-sort__label{ flex:none; margin-inline-end:6px; font-size:14px; font-weight:700; color:var(--color-text-primary); white-space:nowrap; }
.yr-cat-sort__opt{
  flex:none; display:inline-flex; align-items:center;
  min-height:40px; padding:0 12px;
  border-radius:var(--radius-sm);
  font-size:14px; font-weight:600; color:var(--color-text-secondary);
  text-decoration:none; white-space:nowrap;
  transition:background var(--transition), color var(--transition);
}
.yr-cat-sort__opt:hover{ background:var(--color-surface-soft); color:var(--color-text-primary); }
.yr-cat-sort__opt.is-current{ background:var(--color-brand-soft); color:var(--color-brand-deep); font-weight:800; }

/* ── Empty ── */
.yr-cat-empty{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:48px 20px; text-align:center;
  border:1px dashed var(--color-border-strong); border-radius:var(--radius-md);
}
.yr-cat-empty h2{ margin:0; font-size:18px; font-weight:800; line-height:1.7; color:var(--color-text-primary); }
.yr-cat-empty p{ margin:0; max-width:34em; font-size:14.5px; line-height:1.95; color:var(--color-text-secondary); }
.yr-cat-empty__btn{
  display:inline-flex; align-items:center; min-height:46px; margin-top:8px; padding:0 22px;
  border-radius:var(--radius-sm); background:var(--color-action-primary); color:var(--color-text-inverse);
  font-size:15px; font-weight:700; text-decoration:none;
}
.yr-cat-empty__btn:hover{ background:var(--color-action-primary-hover); color:var(--color-text-inverse); }

/* ═══ The long guide, above the footer ════════════════════════════ */
.yr-cat-about{ padding-top:40px; }
.yr-cat-about__box{
  padding:24px 28px;
  border:1px solid var(--color-border); border-radius:var(--radius-lg);
  background:var(--color-surface);
}
.yr-cat-about__title{ margin:0 0 10px; font-size:19px; font-weight:800; line-height:1.6; color:var(--color-text-primary); }
.yr-cat-about__text{
  position:relative; max-width:72ch;
  font-size:15.5px; line-height:2.1; color:var(--color-text-secondary);
}
.yr-cat-about__text.is-folded{ max-height:13.5em; overflow:hidden; }
.yr-cat-about__text.is-folded::after{
  content:""; position:absolute; inset:auto 0 0 0; height:4.5em;
  background:linear-gradient(to bottom, rgba(255,255,255,0), var(--color-surface));
  pointer-events:none;
}
.yr-cat-about__text > :first-child{ margin-top:0; }
.yr-cat-about__text > :last-child{ margin-bottom:0; }
.yr-cat-about__text h2{ margin:1.4em 0 .4em; font-size:19px; font-weight:800; line-height:1.7; color:var(--color-text-primary); }
.yr-cat-about__text h3{ margin:1.2em 0 .3em; font-size:16.5px; font-weight:800; line-height:1.7; color:var(--color-text-primary); }
.yr-cat-about__text p{ margin:0 0 .9em; font-size:inherit; line-height:inherit; color:inherit; }
.yr-cat-about__text ul,.yr-cat-about__text ol{ margin:0 0 .9em; padding-inline-start:1.4em; }
.yr-cat-about__text ul{ list-style:disc; }
.yr-cat-about__text ol{ list-style:decimal; }
.yr-cat-about__text a{ color:var(--color-brand); text-decoration:underline; text-underline-offset:4px; }
.yr-cat-about__text img{ max-width:100%; height:auto; border-radius:var(--radius-sm); }

/* ═══ Tablet and phone: the rail becomes a drawer ═════════════════ */
@media (max-width:960px){
  .yr-cat{ grid-template-columns:minmax(0, 1fr); padding-top:14px; }

  .yr-cat-filters{
    position:fixed; z-index:1200; inset-block:0; inset-inline-start:0;
    top:0; width:min(88vw, 360px); max-height:none;
    border:0; border-radius:0;
    transform:translateX(100%);
    visibility:hidden;
    transition:transform var(--transition-slow), visibility 0s linear .28s;
    box-shadow:none;
  }
  .yr-cat-filters.is-open{
    transform:none; visibility:visible;
    transition:transform var(--transition-slow), visibility 0s;
    box-shadow:-12px 0 40px rgba(20,45,37,.18);
  }
  .yr-cat-filters__close{
    display:grid; place-items:center; width:44px; height:44px; margin-inline-end:-10px; padding:0;
    border:0; border-radius:var(--radius-sm); background:none; color:var(--color-text-primary); cursor:pointer;
  }
  .yr-cat-filters__close svg{ width:20px; height:20px; }
  .yr-cat-form{ flex:1; }
  .yr-cat-form__scroll{ flex:1; }
  .yr-cat-form__foot{
    display:block; padding:12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    border-top:1px solid var(--color-border);
    background:var(--color-surface);
  }
  .yr-cat-form__apply{
    width:100%; height:50px; border:0; border-radius:var(--radius-sm);
    background:var(--color-action-primary); color:var(--color-text-inverse);
    font-family:inherit; font-size:15.5px; font-weight:800; cursor:pointer;
  }
  .yr-cat-price__apply{ display:none; }   /* the drawer has one «دیدن محصولات» for everything */

  .yr-cat-scrim{
    display:block; position:fixed; z-index:1190; inset:0;
    background:rgba(16,28,24,.5);
    opacity:0; transition:opacity var(--transition-slow);
  }
  .yr-cat-scrim[hidden]{ display:none; }
  .yr-cat-scrim.is-open{ opacity:1; }

  .yr-cat-toolbar{ gap:8px; }
  .yr-cat-filter-btn{
    flex:none; display:inline-flex; align-items:center; gap:8px;
    height:44px; padding:0 14px;
    border:1px solid var(--color-border-strong); border-radius:var(--radius-sm);
    background:var(--color-surface); color:var(--color-text-primary);
    font-family:inherit; font-size:14.5px; font-weight:700; cursor:pointer;
  }
  .yr-cat-filter-btn svg{ width:18px; height:18px; }
  .yr-cat-filter-btn__n{
    display:grid; place-items:center; min-width:22px; height:22px; padding:0 6px;
    border-radius:99px; background:var(--color-brand); color:#fff; font-size:12.5px; font-weight:800;
  }
  .yr-cat-sort__label{ display:none; }
}

@media (max-width:640px){
  .yr-cat-head{ padding-top:12px; }
  .yr-cat-head__inner{ gap:14px; }
  .yr-cat-head__img{ width:72px; height:72px; }
  .yr-cat-head__desc-text{ font-size:14.5px; }
  /* Not inside a .container: it IS one. Full-bleed so the row scrolls to the screen edge. */
  .yr-cat-sibs{ width:auto; margin-inline:0; padding-inline:var(--container-gutter, 16px); scroll-padding-inline:var(--container-gutter, 16px); }
  .yr-cat-sort{ margin-inline-end:calc(var(--container-gutter, 16px) * -1); padding-inline-end:var(--container-gutter, 16px); }
  .yr-cat-about{ padding-top:28px; }
  .yr-cat-about__box{ padding:18px 16px; }
  .yr-cat-about__text{ font-size:15px; }
}

@media (prefers-reduced-motion:reduce){
  .yr-cat-filters,.yr-cat-scrim,.yr-cat-more::after,.yr-cat-switch__track,.yr-cat-switch__track::after{ transition:none; }
}