/* ==========================================================================
   Tahoorestan — the shop family
   --------------------------------------------------------------------------
   Loaded by /shop/ and the thirteen /shop/<slug>/ pages, on top of
   assets/css/listing.css (the search field, the category chip, the result
   count, the sort select and the empty state, shared with the blog) and
   assets/css/content-pages.css (the .fld form shell).

   No new vocabulary.  The hero is .phero with a modifier, the closing band is
   .pcta, headings are .sec__h + .swash, the support card is .scall, the card
   is the homepage's own .pcard, and colour/radius/shadow/hover are the tokens
   styles.css defines.  What is genuinely new is only what a catalogue needs
   and no other page family has: the facet column, the product grid, the
   two-density view switch and the not-stocked-yet panel.
   ========================================================================== */

.page--shop{padding-bottom:0}
.phero--shop{padding-block:46px 74px}


/* ══════════════════════════════════════════════════════════════════════════
   1. the category rail
   --------------------------------------------------------------------------
   Every chip is a real <a> to its category page, so this is navigation with
   no script and a filter with one.  It sits outside .swrap and full-bleed
   under the hero, because fourteen chips is more than the sidebar can hold
   and more than a phone can stack.
   ══════════════════════════════════════════════════════════════════════════ */

.scats-rail{
  border-bottom:1px solid var(--line);background:#fff;
  position:sticky;top:var(--hh-c);z-index:14;
}
.scats-rail__in{
  width:min(var(--cw),100% - 48px);margin-inline:auto;
  display:flex;align-items:center;gap:8px;
  padding-block:13px;overflow-x:auto;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.scats-rail__in::-webkit-scrollbar{display:none}
/* .bcat comes from listing.css; the rail's chips are taller and carry a count */
.scats-rail .bcat{
  flex:none;height:38px;padding:0 14px;background:#f6f7f4;color:#5d5d5d;
  border:1px solid transparent;font-size:13px;
}
.scats-rail .bcat b{
  font-weight:800;font-size:11px;min-width:18px;height:18px;padding:0 4px;
  border-radius:999px;background:#e6e8e2;color:#8a8a8a;
  display:grid;place-items:center;transition:background .18s,color .18s;
}
.scats-rail a.bcat:hover{background:var(--pale);color:var(--green-dd);border-color:#d8e6c9}
.scats-rail a.bcat:hover b{background:#fff;color:var(--green-dd)}
.scats-rail .bcat.is-on{background:var(--green);color:#fff;border-color:var(--green)}
.scats-rail .bcat.is-on b{background:rgba(255,255,255,.24);color:#fff}
.scats-rail .bcat.is-on .ic{color:#fff}


/* ══════════════════════════════════════════════════════════════════════════
   2. the two-column body
   --------------------------------------------------------------------------
   The facets lead, unlike the blog's sidebar which follows: on a shop the
   column is a control, not an appendix.  Both columns are `align-items:start`
   so the facet card can stick without stretching to the grid's height.
   ══════════════════════════════════════════════════════════════════════════ */

.swrap{
  width:min(var(--cw),100% - 48px);margin:40px auto 0;
  display:grid;grid-template-columns:282px minmax(0,1fr);gap:34px;align-items:start;
}
.smain{min-width:0}


/* ══════════════════════════════════════════════════════════════════════════
   3. the facet column
   --------------------------------------------------------------------------
   Above 1024 it is a sticky card, exactly as the guide family's .gnav is, and
   it stops under the condensed header at the same offset so two sticky columns
   never disagree.  Below 1024 the whole column becomes a sheet behind
   «فیلترها» — see section 8.  The element IS the sheet panel, so the facets
   exist once in the document rather than twice.
   ══════════════════════════════════════════════════════════════════════════ */

.sside{position:sticky;top:calc(var(--hh-c) + 58px)}
.sside__wrap{display:flex;flex-direction:column;gap:18px}
.sside__panel{
  border:1px solid var(--line);border-radius:var(--r-card);background:#fff;
  box-shadow:0 8px 24px rgba(40,60,20,.05);overflow:hidden;
}
.sside__hd{
  display:flex;align-items:center;gap:10px;
  padding:14px 16px;border-bottom:1px solid var(--line);background:#fbfcfa;
}
.sside__h{
  display:flex;align-items:center;gap:9px;
  font-size:15.4px;font-weight:800;color:var(--ink2);
}
.sside__h .ic{width:18px;height:18px;color:var(--green)}
.sside__h--plain{
  position:relative;padding-inline-start:16px;margin-bottom:10px;font-size:16px;
}
/* the footer column heading's green bar, the same mark every section heading
   on the guide pages carries */
.sside__h--plain::before{
  content:"";position:absolute;inset-inline-start:0;top:4px;width:7px;height:20px;
  border-radius:3px;background:var(--green);
}
.sside__x{
  margin-inline-start:auto;display:grid;place-items:center;
  width:34px;height:34px;border-radius:50%;color:#8e8e8e;
  transition:background .18s,color .18s;
}
.sside__x .ic{width:16px;height:16px;stroke-width:2.2}
.sside__x:hover{background:#f2f2f2;color:var(--ink2)}
.sside__x[hidden]{display:none}

.facets{padding:6px 16px 16px}
.facet{border:0;margin:0;padding:14px 0 0}
.facet+.facet{border-top:1px solid #f2f4f0;margin-top:2px}
.facet__h{
  padding:0;margin-bottom:9px;
  font-size:13.4px;font-weight:800;color:var(--ink2);
}
.facet__b{display:flex;flex-direction:column;gap:2px}
.facet__note{
  margin-top:8px;font-size:11.6px;line-height:1.85;color:var(--muted);
}

/* One facet row.  A real <input type=checkbox> inside a <label>, so grouping,
   the space bar, the label's hit area and focus all come from the platform and
   only the painted face is ours — the same rule the product page's option
   tiles follow. */
.fchk{
  position:relative;display:flex;align-items:center;gap:9px;
  padding:7px 8px;border-radius:10px;cursor:pointer;
  font-size:13.4px;font-weight:600;color:#5a5a5a;
  transition:background .16s,color .16s;
}
.fchk input{position:absolute;opacity:0;width:0;height:0}
.fchk__box{
  flex:none;width:18px;height:18px;border-radius:5px;
  border:1.6px solid #d3d7ce;background:#fff;
  display:grid;place-items:center;transition:.16s;
}
.fchk__box::after{
  content:"";width:9px;height:5px;
  border-inline-start:2px solid #fff;border-bottom:2px solid #fff;
  rotate:-45deg;translate:0 -1px;opacity:0;transition:opacity .14s;
}
.fchk__i{flex:none;width:17px;height:17px;color:#b0b0b0;transition:color .16s}
.fchk__t{flex:1;min-width:0}
.fchk__n{
  flex:none;font-size:11px;font-weight:800;color:#a2a2a2;
  min-width:20px;height:19px;padding:0 5px;border-radius:999px;background:#f4f5f2;
  display:grid;place-items:center;transition:background .16s,color .16s;
}
.fchk:hover{background:#fafcf7;color:var(--ink2)}
.fchk:hover .fchk__i{color:var(--green)}
.fchk input:checked~.fchk__box{background:var(--green);border-color:var(--green)}
.fchk input:checked~.fchk__box::after{opacity:1}
.fchk input:checked~.fchk__t{color:var(--green-dd);font-weight:800}
.fchk input:checked~.fchk__i{color:var(--green)}
.fchk input:checked~.fchk__n{background:var(--pale);color:var(--green-dd)}
.fchk input:focus-visible~.fchk__box{outline:2px solid var(--green);outline-offset:2px}
/* a value the catalogue cannot currently yield is dimmed but still selectable:
   hiding it would make the facet list change shape between pages, which reads
   as a bug rather than as information */
.fchk[data-empty] .fchk__t,.fchk[data-empty] .fchk__n{opacity:.5}

.facets__ft{display:flex;align-items:center;gap:8px;margin-top:16px}
.facets__reset{
  display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 13px;white-space:nowrap;
  border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;
  font-size:12.6px;font-weight:700;color:#6f6f6f;
  transition:background .18s,color .18s,border-color .18s;
}
.facets__reset .ic{width:15px;height:15px}
.facets__reset:hover{background:#f7f7f7;color:var(--ink2);border-color:#dcdcdc}
/* only the sheet needs an explicit "show results"; on desktop the grid updates
   as each box is ticked, so the button is hidden rather than lying about what
   it does */
.facets__apply{display:none}

.sside__cats{
  border:1px solid var(--line);border-radius:var(--r-card);background:#fff;
  padding:15px 16px 12px;box-shadow:0 8px 24px rgba(40,60,20,.05);
}
.scatlist{display:flex;flex-direction:column}
.scatlist__a{
  display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:9px;
  font-size:13.2px;font-weight:600;color:#6b6b6b;
  transition:background .16s,color .16s;
}
.scatlist__a b{
  margin-inline-start:auto;font-size:11px;font-weight:800;color:#a8a8a8;
}
.scatlist__a:hover{background:var(--pale);color:var(--green-dd)}
.scatlist__a:hover b{color:var(--green-dd)}
.scatlist__a.is-on{background:var(--green);color:#fff;font-weight:800}
.scatlist__a.is-on b{color:rgba(255,255,255,.8)}


/* ══════════════════════════════════════════════════════════════════════════
   4. the toolbar
   ══════════════════════════════════════════════════════════════════════════ */

.sbar{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:20px;
}
.sbar__end{display:flex;align-items:center;gap:10px;margin-inline-start:auto}

/* the sheet opener.  Hidden above 1024, where the column is already on screen
   and a button that opens what you can see is noise. */
.sbar__filter{
  display:none;align-items:center;gap:8px;height:40px;padding:0 15px;
  border:1px solid var(--line);border-radius:999px;background:#fff;
  font-size:13.2px;font-weight:700;color:#5d5d5d;
  transition:background .18s,border-color .18s,color .18s;
}
.sbar__filter .ic{width:16px;height:16px;color:#9c9c9c}
.sbar__filter:hover{background:#fafcf7;border-color:#dde9d1;color:var(--ink2)}
.sbar__n{
  min-width:19px;height:19px;padding:0 5px;border-radius:999px;
  background:var(--green);color:#fff;font-size:11px;font-weight:800;
  display:grid;place-items:center;
}
.sbar__n[hidden]{display:none}

.sview{display:flex;gap:4px;padding:3px;border:1px solid var(--line);border-radius:999px;background:#fff}
.sview__b{
  display:grid;place-items:center;width:32px;height:30px;border-radius:999px;
  color:#a4a4a4;transition:background .18s,color .18s;
}
.sview__b .ic{width:17px;height:17px}
.sview__b:hover{background:#f5f5f5;color:var(--ink2)}
.sview__b.is-on{background:var(--pale);color:var(--green-dd)}

/* what the facets currently exclude, as removable pills.  .bchip is the shape;
   this only adds the × and its hit area. */
.schips{display:flex;flex-wrap:wrap;gap:7px;margin:-6px 0 18px}
.schips[hidden]{display:none}
.schip{
  display:inline-flex;align-items:center;gap:8px;height:33px;padding:0 8px 0 13px;
  border:1px solid #dde9d1;border-radius:999px;background:var(--pale);
  font-size:12.6px;font-weight:700;color:var(--green-dd);
}
.schip__x{
  display:grid;place-items:center;width:20px;height:20px;border-radius:50%;
  background:rgba(91,146,45,.14);color:var(--green-dd);transition:background .16s,color .16s;
}
.schip__x .ic{width:11px;height:11px;stroke-width:2.6}
.schip__x:hover{background:var(--green);color:#fff}
.schip--clear{background:#fff;border-color:var(--line);color:#7a7a7a}
.schip--clear:hover{background:#f7f7f7;color:var(--ink2)}


/* ══════════════════════════════════════════════════════════════════════════
   5. the product grid
   --------------------------------------------------------------------------
   The card is the homepage's own .pcard, so it arrives with the site's one
   card hover already on it (rise --card-lift, cast --card-sh, artwork floats,
   cart button turns --green-d).  Three things have to be undone: the card is
   `flex:0 0 338.5px` for the homepage carousel and has to be a grid item
   here; `:nth-child(even)` paints alternate cards grey, which stripes a grid
   by column rather than reading as a row; and .price__lbl is 8px, a size
   measured off the export for a label that only ever said «هر کیلو :» and is
   too small for a list that also says «هر بسته :» and «هر عدد :».
   ══════════════════════════════════════════════════════════════════════════ */

.sgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}

.pcard--shop{
  flex:initial;width:auto;padding:22px 18px 20px;
  border:1px solid var(--line);border-radius:var(--r-card);
  display:flex;flex-direction:column;
}
.pcard--shop:nth-child(even){background:#fff}
.pcard--shop:hover{border-color:#dde9d1}
.pcard--shop[hidden]{display:none}
.pcard--shop .pcard__media{height:168px}
.pcard--shop .pcard__wm{top:80px;width:180px;opacity:.9}
.pcard--shop .pcard__img{max-height:150px}
.pcard__link{display:block}
.pcard--shop .pcard__t{font-size:15.8px;line-height:1.55;min-height:2.6em;
  display:flex;align-items:center;justify-content:center}
.pcard__sub{
  margin-top:4px;font-size:12.2px;font-weight:500;line-height:1.8;color:var(--muted);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:3.6em;
}
.pcard--shop .price{margin-top:14px}
.pcard--shop .price__lbl{font-size:11px;font-weight:600}
.pcard--shop .acts{margin-top:auto;padding-top:14px}
.pcard--shop .atc{font-size:11.6px;flex:1;justify-content:center}

/* out of stock: the card stays readable and the button stops pretending */
.pcard__oos{
  position:absolute;top:10px;inset-inline-end:10px;z-index:3;
  height:26px;padding:0 10px;border-radius:999px;
  background:#4a4a4a;color:#fff;font-size:11px;font-weight:700;
  display:inline-flex;align-items:center;
}
.pcard--shop[data-stock="0"] .pcard__img{filter:grayscale(.75);opacity:.72}
.pcard--shop[data-stock="0"] .atc{
  background:#f1f1f1;color:#a0a0a0;pointer-events:none;
}

/* the list density.  One column, artwork beside the copy — for scanning nine
   packs whose names differ only in their weight, which is exactly when the
   grid's centred cards stop helping. */
.sgrid.is-list{grid-template-columns:minmax(0,1fr);gap:12px}
.sgrid.is-list .pcard--shop{
  display:grid;grid-template-columns:172px minmax(0,1fr) auto;
  align-items:center;gap:20px;text-align:start;padding:16px 18px;
}
.sgrid.is-list .pcard__media{height:124px;grid-row:span 3;align-items:center}
.sgrid.is-list .pcard__wm{top:50%;width:132px}
.sgrid.is-list .pcard__img{max-height:112px}
.sgrid.is-list .pcard__t{
  grid-column:2;min-height:0;display:block;font-size:16.4px;
}
.sgrid.is-list .pcard__sub{grid-column:2;min-height:0;-webkit-line-clamp:2}
.sgrid.is-list .price{
  grid-column:3;grid-row:1;justify-content:flex-end;margin-top:0;
}
.sgrid.is-list .price--old{grid-column:3;grid-row:2;justify-content:flex-end}
.sgrid.is-list .acts{grid-column:3;grid-row:3;padding-top:8px;margin-top:0}


/* ══════════════════════════════════════════════════════════════════════════
   6. the not-stocked-yet panel
   --------------------------------------------------------------------------
   Three categories are linked from the chrome and have no products: the design
   draws five animals in the homepage row and the footer names سوسیس و کالباس,
   so those pages have to exist.  This says so, says why, and takes an address
   — on this device, and it says that too, exactly as the blog's newsletter
   card and the order tracker do.
   ══════════════════════════════════════════════════════════════════════════ */

/* With no products there is nothing to filter, nothing to sort and nothing a
   filter could have excluded — so the toolbar, the grid, the pager and the
   «پیدا نشد» panel all stand down, and the facet card with them.  The category
   list and the support card stay: they are how you leave this page.  One
   attribute from build.py drives all of it, so the markup stays identical
   across all fourteen pages. */
html[data-empty] .sbar,
html[data-empty] .schips,
html[data-empty] .sgrid,
html[data-empty] .bempty,
html[data-empty] .bmore,
html[data-empty] .sside__panel{display:none}

.soon{
  padding:34px 28px;margin-bottom:26px;text-align:center;
  border:1px solid #f0e6c4;border-radius:var(--r-card);
  background:linear-gradient(180deg,#fffdf5 0%,#fffaeb 100%);
}
.soon__b{
  display:grid;place-items:center;width:58px;height:58px;margin-inline:auto;
  border-radius:50%;background:#fff;color:var(--gold-d);
  box-shadow:0 8px 22px rgba(241,183,9,.22);
}
.soon__b .ic{width:28px;height:28px}
.soon__t{margin-top:15px;font-size:19px;font-weight:800;color:var(--ink2);line-height:1.6}
.soon__x{
  margin-top:9px;font-size:13.8px;line-height:2.05;color:var(--body);
  max-width:60ch;margin-inline:auto;
}
.soon__f{
  display:flex;align-items:center;gap:8px;width:min(430px,100%);
  margin:20px auto 0;padding:5px;background:#fff;
  border:1px solid #ecdfb4;border-radius:var(--r-md);
}
.soon__in{
  flex:1;min-width:0;height:44px;border:0;background:none;padding-inline:12px;
  font-size:14px;font-weight:500;color:var(--ink2);
}
.soon__in:focus{outline:0}
.soon__f:focus-within{box-shadow:0 0 0 3px rgba(241,183,9,.28)}
.soon__go{
  flex:none;height:44px;padding:0 20px;white-space:nowrap;border-radius:var(--r-sm);
  background:var(--gold-d);color:#fff;font-size:13.6px;font-weight:700;
  transition:background .2s,transform .2s;
}
.soon__go:hover{background:#c79403;transform:translateY(var(--btn-lift))}
.soon__msg{margin-top:10px;font-size:13px;font-weight:700;min-height:1.4em}
.soon__msg.is-ok{color:var(--green-dd)}
.soon__msg.is-bad{color:#c2410c}
.soon__note{margin-top:4px;font-size:11.6px;color:var(--muted);line-height:1.9}


/* ══════════════════════════════════════════════════════════════════════════
   7. the cross-sell row
   ══════════════════════════════════════════════════════════════════════════ */

.srel{margin-top:54px;padding-top:34px;border-top:1px solid var(--line)}
.srel__hd{margin-bottom:22px}
.srel__x{margin-top:10px;font-size:13.4px;line-height:1.95;color:var(--body)}
.srel__g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.srel__g .pcard--shop .pcard__sub{display:none}
.srel__g .pcard--shop .pcard__t{min-height:2.4em;font-size:14.8px}


/* ══════════════════════════════════════════════════════════════════════════
   8. responsive
   --------------------------------------------------------------------------
   1240  the grid drops to two columns before the sidebar folds, because three
         cards in ~640px is narrower than the artwork
   1024  the facet column becomes a sheet; the same width the rest of the site
         stands its :hover language down at, since :hover latches on touch
    820  one card per row is still worse than two on a phone, so the grid holds
         at two and the card loses its padding instead
    680  the card takes the homepage single card's type and button sizes
    520  one column with the artwork grown to match; the list density
         becomes a compact phone row
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width:1240px){
  .swrap{grid-template-columns:248px minmax(0,1fr);gap:24px}
  .sgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .srel__g{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:1024px){
  .swrap{grid-template-columns:minmax(0,1fr);gap:0;margin-top:28px}
  .sgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sbar__filter{display:inline-flex}

  /* the column becomes a sheet.  Deliberately NOT Sheet() from app.js: that
     controller owns .drawer/.drawer__panel and toggles `hidden` on its root,
     and this element has to stay visible and in flow above 1024 — so it would
     have meant fighting styles.css's .drawer rules in both directions.  What
     it does share is the behaviour: a scrim, Escape, a click outside, focus
     moved in and restored, and touch-action as the scroll lock. */
  .sside{
    position:fixed;inset:0;z-index:111;display:block;gap:0;
    padding:0;overflow:hidden;visibility:hidden;
  }
  .sside::before{
    content:"";position:absolute;inset:0;background:rgba(14,24,8,.5);
    opacity:0;transition:opacity .26s ease;touch-action:none;
    -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  }
  .sside__panel,.sside__cats,.sside .scall{
    position:relative;z-index:1;border-radius:0;box-shadow:none;border:0;
  }
  .sside__panel{border-bottom:1px solid var(--line)}
  .sside__cats{border-bottom:1px solid var(--line)}
  /* one scrolling column inside the sheet, so a long facet list and the
     category list below it share the panel the way the menu drawer does */
  .sside__wrap{
    position:absolute;inset-block:0;inset-inline-start:0;
    width:min(354px,88vw);background:#fff;
    display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;
    box-shadow:0 0 60px rgba(12,26,4,.3);
    transform:translateX(var(--sx,-100%));
    transition:transform .3s cubic-bezier(.32,.86,.3,1);
    will-change:transform;
  }
  html[dir="rtl"] .sside__wrap{--sx:100%}
  .sside.is-open{visibility:visible}
  .sside.is-open::before{opacity:1}
  .sside.is-open .sside__wrap{--sx:0%}
  .sside__hd{position:sticky;top:0;z-index:2}
  .sside__x{display:grid}
  /* the two share a row while both labels fit; on a 320px phone they do not,
     and «نمایش نتیجه‌ها» takes a full row above rather than folding in two */
  .facets__ft{flex-wrap:wrap-reverse}
  .facets__apply{
    display:inline-flex;align-items:center;justify-content:center;
    flex:1 1 auto;height:38px;padding:0 16px;border-radius:var(--r-sm);
    background:var(--green);color:#fff;font-size:13.2px;font-weight:700;
    white-space:nowrap;transition:background .2s;
  }
  .facets__apply:hover{background:var(--green-d)}
  /* :hover latches on touch, so the card's rise is stood down here exactly as
     every other card family's is */
  .pcard--shop:hover{transform:none;box-shadow:none}
  .pcard--shop:hover .pcard__img{transform:none}
  /* the heart takes the artwork's right corner from here down, so the discount
     badge shares the left one with the out-of-stock pill: stack the pill under it */
  .pcard--shop .disc ~ .pcard__oos{top:52px}
}

@media (max-width:820px){
  .sgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .srel{margin-top:40px}
  .scats-rail{top:0}
  .sgrid.is-list .pcard--shop{grid-template-columns:130px minmax(0,1fr);gap:14px}
  .sgrid.is-list .pcard__media{height:104px;grid-row:span 2}
  .sgrid.is-list .pcard__img{max-height:96px}
  .sgrid.is-list .price,.sgrid.is-list .price--old{
    grid-column:2;grid-row:auto;justify-content:flex-start;
  }
  .sgrid.is-list .acts{grid-column:1 / -1;grid-row:auto}
}

@media (max-width:680px){
  .swrap{width:calc(100% - 28px)}
  .scats-rail__in{width:calc(100% - 28px)}
  .sgrid{gap:12px}
  /* styles.css shrinks the card for the homepage's old two-up rows (14px
     price, 10px cart label); a ~260px card can carry the homepage single
     card's own sizes, and below 520 the card is the full column anyway */
  .pcard--shop{padding:16px 14px}
  .pcard--shop .pcard__media{height:176px}
  .pcard--shop .pcard__wm{top:84px;width:190px}
  .pcard--shop .pcard__img{max-height:164px}
  .pcard--shop .pcard__t,.srel__g .pcard--shop .pcard__t{font-size:16.4px;min-height:2.8em}
  .pcard__sub{display:none}
  .pcard--shop .price__v{font-size:18.6px}
  .pcard--shop .price--old .price__v{font-size:14.6px}
  .pcard--shop .toman b{font-size:8.4px}
  .pcard--shop .atc{height:48px;padding:0 12px;gap:8px;font-size:13px;border-radius:12px}
  .pcard--shop .atc .ic{width:19px;height:19px}
  .pcard--shop .fav{width:44px;height:44px;border-radius:12px}
  .pcard--shop .fav .ic{width:20px;height:20px}
  .soon{padding:26px 18px}
  .srel__g{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:520px){
  .sgrid,.sgrid.is-list{grid-template-columns:minmax(0,1fr)}
  /* one card per row, so it gets the artwork of one: and with no neighbour to
     line up with, the reserved heights only leave holes under short copy */
  .pcard--shop .pcard__media{height:220px}
  .pcard--shop .pcard__wm{top:104px;width:236px}
  .pcard--shop .pcard__img{max-height:206px}
  .pcard--shop .pcard__t,.srel__g .pcard--shop .pcard__t{font-size:18px;min-height:0}
  .pcard__sub{display:-webkit-box;min-height:0;font-size:13px}
  .pcard--shop .price{margin-top:12px}
  .pcard--shop .price__v{font-size:20px}
  .pcard--shop .price--old[aria-hidden="true"]{display:none}

  /* the list density on a phone: artwork beside title, blurb and price, the
     actions a full-width row underneath -- under half the height of the grid
     card, for scanning a long category.  The two 1fr rows centre the copy on
     the artwork and close up once the copy is the taller of the two. */
  .sgrid.is-list .pcard--shop{
    grid-template-columns:116px minmax(0,1fr);
    grid-template-rows:1fr auto auto auto auto 1fr auto;
    gap:0 14px;align-items:center;padding:14px;
  }
  .sgrid.is-list .pcard__media{grid-row:1 / 7;height:116px}
  .sgrid.is-list .pcard__wm{width:124px}
  .sgrid.is-list .pcard__img{max-height:108px}
  .sgrid.is-list .pcard__t{grid-row:2;font-size:16px;line-height:1.5}
  .sgrid.is-list .pcard__t a{padding-block:2px}
  .sgrid.is-list .pcard__sub{grid-row:3;margin-top:2px;font-size:12.6px;-webkit-line-clamp:1}
  .sgrid.is-list .price{grid-row:4;margin-top:6px;flex-wrap:wrap;row-gap:2px}
  .sgrid.is-list .price--old{grid-row:5}
  .sgrid.is-list .price__v{font-size:18px}
  .sgrid.is-list .acts{grid-row:7;margin-top:12px;padding-top:0;gap:10px}
  .sgrid.is-list .fav{position:static;flex:none}
  .sbar{gap:9px}
  .sbar__end{width:100%;margin-inline-start:0;justify-content:space-between}
  .srel__g{grid-template-columns:minmax(0,1fr)}
}

/* the motion layer must never leave a card of this family stranded: every
   selector below is one fx.js marks, and each resets only what it set */
@media (prefers-reduced-motion:reduce){
  .pcard--shop,.pcard--shop .pcard__img,.sside__wrap,.scats-rail .bcat{transition:none}
}


/* ══════════════════════════════════════════════════════════════════════════
   9. /faq/
   --------------------------------------------------------------------------
   Rides on this file because it reuses the listing's own chrome — the search
   field, the category rail, the result count and the empty state — and the
   .faq accordion itself is already in styles.css, where the guide pages use
   it.  What is new is only the two-column body and the topic headings.
   ══════════════════════════════════════════════════════════════════════════ */

.page--faq{padding-bottom:0}
.phero--faq{padding-block:46px 74px}

.fqwrap{
  width:min(var(--cw),100% - 48px);margin:38px auto 0;
  display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:34px;align-items:start;
}
.fqmain{min-width:0}
.fqside{position:sticky;top:calc(var(--hh-c) + 14px);
  display:flex;flex-direction:column;gap:16px}

.fqmain .bcount{margin-bottom:18px}

.fqg{scroll-margin-top:calc(var(--hh-c) + 70px)}
.fqg[hidden]{display:none}
.fqg__h{display:flex;align-items:center;gap:10px}
.fqg__h .ic{width:20px;height:20px;color:var(--green)}
.fqg__n{
  min-width:23px;height:22px;padding:0 7px;border-radius:999px;
  background:var(--pale);color:var(--green-dd);font-size:11.5px;font-weight:800;
  display:inline-flex;align-items:center;justify-content:center;
}
.fqi[hidden]{display:none}

@media (max-width:1024px){
  .fqwrap{grid-template-columns:minmax(0,1fr);gap:26px}
  .fqside{position:static;order:2;
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
}
@media (max-width:680px){
  .fqwrap{width:calc(100% - 28px)}
  .fqside{grid-template-columns:minmax(0,1fr)}
}


/* ══════════════════════════════════════════════════════════════════════════
   10. /sitemap/
   --------------------------------------------------------------------------
   Rides on this file for the hero and the closing band.  A plain index, laid
   out as columns that fill rather than a fixed grid, because the groups are
   wildly different lengths — 6 rows for «درباره‌ی ما» and 20 for محصولات.
   ══════════════════════════════════════════════════════════════════════════ */

.page--map{padding-bottom:0}
.phero--map{padding-block:44px 66px}

.map{
  width:min(var(--cw),100% - 48px);margin:40px auto 0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:26px 30px;align-items:start;
}
.mapg{
  border:1px solid var(--line);border-radius:var(--r-card);background:#fff;
  padding:18px 20px 14px;
}
.mapg__h{
  position:relative;padding-inline-start:16px;
  display:flex;align-items:center;gap:9px;
  font-size:16px;font-weight:800;color:var(--ink);
}
.mapg__h::before{
  content:"";position:absolute;inset-inline-start:0;top:3px;width:7px;height:20px;
  border-radius:3px;background:var(--green);
}
.mapg__h b{
  min-width:22px;height:21px;padding:0 7px;border-radius:999px;
  background:var(--pale);color:var(--green-dd);font-size:11px;font-weight:800;
  display:inline-flex;align-items:center;justify-content:center;
}
.mapg__x{margin-top:8px;font-size:12.2px;line-height:1.9;color:var(--muted)}
.mapg__l{margin-top:11px;display:flex;flex-direction:column}
.mapg__l a{
  display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:9px;
  font-size:13.2px;font-weight:600;color:#5f5f5f;
  transition:background .16s,color .16s;
}
.mapg__l a span{flex:1;min-width:0}
.mapg__l a i{
  flex:none;font-style:normal;font-size:11px;font-weight:700;color:#a4a4a4;
}
.mapg__l a::before{
  content:"";flex:none;width:5px;height:5px;border-radius:50%;background:#d3d7ce;
  transition:background .16s;
}
.mapg__l a:hover{background:var(--pale);color:var(--green-dd)}
.mapg__l a:hover::before{background:var(--green)}
.mapg__l a:hover i{color:var(--green-dd)}

@media (max-width:680px){
  .map{width:calc(100% - 28px);grid-template-columns:minmax(0,1fr);gap:16px}
}