/* ---------- hero ---------- */
.chero{position:relative;margin:14px 0 0;overflow:hidden}
.chero .wrap{position:relative;z-index:2}
.chero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(20px,4vw,56px);align-items:center;
  background:linear-gradient(135deg,var(--ink) 0%,var(--ink-2) 55%,#0D4A68 100%);
  border-radius:var(--r-l);padding:clamp(26px,4.5vw,54px);position:relative;overflow:hidden}
.chero-glow{position:absolute;border-radius:50%;filter:blur(60px);opacity:.5;pointer-events:none}
.chero-glow.g1{width:340px;height:340px;background:radial-gradient(circle,rgba(15,166,142,.55),transparent 70%);top:-120px;inset-inline-start:-60px;animation:cgl 9s ease-in-out infinite alternate}
.chero-glow.g2{width:300px;height:300px;background:radial-gradient(circle,rgba(255,59,78,.35),transparent 70%);bottom:-140px;inset-inline-end:8%;animation:cgl 11s ease-in-out infinite alternate-reverse}
.chero-glow.g3{width:260px;height:260px;background:radial-gradient(circle,rgba(64,180,229,.4),transparent 70%);top:10%;inset-inline-end:-80px}
@keyframes cgl{to{transform:translate(30px,18px) scale(1.12)}}
.chero-glow{z-index:1}
.chero-tx{position:relative;z-index:2}
.ckick{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:#7FD6C6;background:rgba(15,166,142,.14);border:1px solid rgba(15,166,142,.35);padding:6px 14px;border-radius:999px;margin-bottom:16px}
.ckick::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--teal);box-shadow:0 0 10px var(--teal)}
.chero h1{font-family:'Estedad';font-weight:900;color:#fff;font-size:clamp(30px,4.6vw,52px);line-height:1.35}
.chekg{height:44px;margin:4px 0 6px;opacity:.9}
.chekg svg{width:min(420px,100%);height:100%}
.chekg path{fill:none;stroke:var(--pulse);stroke-width:2.4;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(255,59,78,.5))}
.chero p{color:#AFD2E1;font-size:14px;line-height:2.1;max-width:52ch}
.chstats{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.cst{display:flex;align-items:baseline;gap:7px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:10px 16px;color:#CFE4EE;font-size:12px;font-weight:600}
.cst b{font-family:'JBMono';font-size:16px;color:#fff;direction:ltr;unicode-bidi:isolate}
.cst b small{font-size:10px;color:#8FB9CE}
.chero-vis{position:relative;z-index:2;height:clamp(230px,26vw,330px)}
.cpol{position:absolute;background:#fff;border-radius:20px;padding:12px;box-shadow:0 24px 60px rgba(2,16,24,.5);transition:transform .35s ease}
.cpol img{width:100%;height:100%;object-fit:contain;border-radius:10px}
.cpol.p1{width:52%;aspect-ratio:1;top:6%;inset-inline-start:4%;transform:rotate(-4deg);z-index:3;animation:cfloat 7s ease-in-out infinite}
.cpol.p2{width:42%;aspect-ratio:1;top:0;inset-inline-end:2%;transform:rotate(5deg);z-index:2;animation:cfloat 8s .8s ease-in-out infinite}
.cpol.p3{width:38%;aspect-ratio:1;bottom:0;inset-inline-start:34%;transform:rotate(-2deg);z-index:4;animation:cfloat 9s .4s ease-in-out infinite}
@keyframes cfloat{50%{translate:0 -10px}}
.cpol::after{content:'';position:absolute;inset:-7px;border-radius:24px;border:1.5px solid rgba(255,59,78,.35);opacity:0;animation:ping 3.4s ease-out infinite}
.cpol.p2::after{animation-delay:1.2s}
.cpol.p3::after{animation-delay:2.2s}

/* ---------- subcat / sibling rail ---------- */
.csubs{margin-top:22px}
.csubs-rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(168px,196px);gap:14px;overflow-x:auto;padding-block:4px 10px;scroll-snap-type:x proximity;scrollbar-width:none}
.csubs-rail::-webkit-scrollbar{display:none}
.csub{scroll-snap-align:start;display:flex;flex-direction:column;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);padding:14px;transition:border-color .25s,box-shadow .25s,transform .2s}
.csub:hover{border-color:var(--petrol);box-shadow:var(--shadow-m);transform:translateY(-3px)}
.csub .im{height:92px;background:#fff;border-radius:12px;display:grid;place-items:center;padding:8px;overflow:hidden}
.csub .im img{width:100%;height:100%;object-fit:contain}
.csub .tt{font-size:13px;font-weight:800;line-height:1.6}
.csub .ct{font-size:11px;color:var(--txt2);display:flex;align-items:center;gap:5px}
.csub .ct b{font-family:'JBMono';color:var(--petrol)}
.csub.on{border-color:var(--pulse);box-shadow:0 0 0 3px rgba(255,59,78,.12)}
.csub.on .tt{color:var(--pulse-deep)}

/* ---------- monitor bar ---------- */
.cmon{position:sticky;top:var(--hdh,150px);z-index:40;background:rgba(243,247,249,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-block:1px solid var(--line);margin-top:18px}
.cmon-in{display:flex;align-items:center;gap:14px;padding-block:10px;min-height:62px}
.cread{display:flex;align-items:center;gap:10px;background:var(--ink);border-radius:14px;padding:9px 16px;color:#fff;flex-shrink:0}
.cdot{width:9px;height:9px;border-radius:50%;background:var(--pulse);box-shadow:0 0 10px var(--pulse);animation:beat 1.6s ease-in-out infinite}
.cekg{width:64px;height:26px;overflow:visible}
.cekg path{fill:none;stroke:var(--pulse);stroke-width:2;stroke-linecap:round}
.cread b{font-family:'JBMono';font-size:19px;line-height:1;direction:ltr}
.cread b.blip{animation:cblip .45s ease}
@keyframes cblip{30%{transform:scale(1.28);color:#FF8B96}}
.cread .clbl{font-size:11px;color:#9FC6D8;font-weight:600}
.cchips{display:flex;align-items:center;gap:8px;flex:1;overflow-x:auto;scrollbar-width:none;padding-block:2px}
.cchips::-webkit-scrollbar{display:none}
.cchip{display:inline-flex;align-items:center;gap:7px;background:var(--petrol-soft);border:1px solid #CBE2EE;color:var(--petrol);font-size:12px;font-weight:700;border-radius:999px;padding:7px 8px 7px 13px;white-space:nowrap;transition:background .2s}
.cchip .x{width:17px;height:17px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:11px;line-height:1;color:var(--pulse-deep)}
.cchip:hover{background:#DBEDF6}
.cchip.clr{background:#FFF0F1;border-color:#FFD3D8;color:var(--pulse-deep);padding-inline:13px}
.cfbtn{display:none;align-items:center;gap:8px;background:var(--ink);color:#fff;font-size:13px;font-weight:700;border-radius:14px;padding:11px 16px;position:relative;flex-shrink:0}
.cfbtn svg{width:17px;height:17px}
.cfn{position:absolute;top:-7px;inset-inline-start:-7px;min-width:20px;height:20px;border-radius:999px;background:var(--pulse);color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center;padding-inline:5px}
.cfn[hidden]{display:none}

/* custom sort dropdown */
.cdd{position:relative;flex-shrink:0}
.cdd-b{display:flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:11px 16px;font-size:13px;font-weight:700;transition:border-color .2s}
.cdd-b:hover{border-color:var(--petrol)}
.cdd-b svg{width:15px;height:15px;transition:transform .25s;color:var(--txt2)}
.cdd.open .cdd-b svg{transform:rotate(180deg)}
.cdd-p{position:absolute;top:calc(100% + 8px);inset-inline-end:0;min-width:190px;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-m);padding:7px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s,transform .2s,visibility .2s;z-index:50}
.cdd.open .cdd-p{opacity:1;visibility:visible;transform:none}
.cdd-p button{display:flex;align-items:center;justify-content:space-between;width:100%;text-align:start;font-size:13px;font-weight:600;padding:11px 13px;border-radius:11px;transition:background .15s}
.cdd-p button:hover{background:var(--petrol-soft)}
.cdd-p button.on{color:var(--pulse-deep);font-weight:800;background:#FFF0F1}

/* ---------- layout ---------- */
.clay{display:grid;grid-template-columns:278px 1fr;gap:26px;align-items:start;margin-top:22px}
.cbody{min-width:0}

/* ---------- filter rail ---------- */
/* ⚠️ THE RAIL SCROLLS WITH THE PAGE — do not turn it back into its own scroll container.
   It used to be `position:sticky` + `max-height:100vh-…` + `overflow-y:auto`, which caused THREE
   separate client-reported bugs, all measured in a browser at a 1366×755 window:
     1. CUT TEXT — a flex column with a max-height shrinks its children (flex-shrink defaults to 1),
        so every filter box was squeezed below its natural height and options were sliced mid-row
        («نوشته‌ها تو هر ردیف پایین خط قرار گرفته و مشخص نیست»): 4 of 5 boxes clipped —
        نیاز 154/353، نوع 95/196، برند 123/271، قیمت 124/273.
     2. WOULDN'T SCROLL — because the children shrank to fit, scrollHeight == clientHeight, so the
        rail's own scrollbar never appeared.
     3. SCROLL TRAP — `overscroll-behavior:contain` blocks scroll chaining, so with the pointer over
        the sidebar the page refused to move («when my mouse pointer is on the divs i cannot scroll
        down unless i go out of the divs»).
   The rail's content (~1400px) is taller than any viewport, so a sticky inner scroller can never
   show it all anyway — that is why the client had to maximise the window to read the filters.
   Letting it flow with the page fixes all three at once: nothing clipped, nothing trapped. */
.crail{display:flex;flex-direction:column;gap:14px;padding-bottom:8px}
.crail>*{flex:0 0 auto}   /* belt-and-braces: never let a future max-height squeeze the boxes again */
.cgrp{background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);padding:16px}
.cgrp>h4{font-size:12.5px;font-weight:800;color:var(--txt);display:flex;align-items:center;gap:8px;margin-bottom:13px}
.cgrp>h4::before{content:'';width:5px;height:16px;border-radius:3px;background:var(--pulse)}
.cgrp>h4 .hint{font-size:10.5px;color:var(--txt2);font-weight:600;margin-inline-start:auto}
/* presets */
.cpre{display:grid;gap:8px}
.cpre button{display:flex;flex-direction:column;gap:3px;text-align:start;border:1.5px solid var(--line);border-radius:13px;padding:11px 13px;transition:border-color .2s,background .2s}
.cpre button:hover{border-color:var(--petrol);background:var(--petrol-soft)}
.cpre button.on{border-color:var(--pulse);background:#FFF4F5}
.cpre .t{font-size:13px;font-weight:800;display:flex;align-items:center;gap:7px}
.cpre .t .n{margin-inline-start:auto;font-family:'JBMono';font-size:11.5px;color:var(--petrol);direction:ltr}
.cpre button.on .t{color:var(--pulse-deep)}
.cpre .d{font-size:11px;color:var(--txt2)}
/* option chips (type/brand) */
.copt{display:flex;flex-wrap:wrap;gap:8px}
.copt button{display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--line);border-radius:999px;padding:8px 13px;font-size:12.5px;font-weight:700;transition:border-color .2s,background .2s,color .2s}
.copt button:hover{border-color:var(--petrol)}
.copt button.on{border-color:var(--pulse);background:var(--pulse);color:#fff}
.copt button .n{font-family:'JBMono';font-size:10.5px;color:var(--txt2);direction:ltr}
.copt button.on .n{color:#FFD3D8}
.copt button:disabled{opacity:.35;cursor:not-allowed}
/* ⚠️ NO inner scroller on the chip lists either. A `max-height:206px; overflow-y:auto` here capped
   برند at 206px against 457px of content, so the last chip row was always sliced in half — it read
   as a broken box, not as "there is more below" — and its `overscroll-behavior:contain` was a second
   scroll trap on top of the rail's. The chips now show in full and the page scrolls as one surface.
   Chips keep an opaque background so nothing shows through behind the text. */
.copt button{background:#fff}
/* toggles */
.ctgl{display:flex;align-items:center;gap:10px;width:100%;text-align:start;padding:4px 0;font-size:13px;font-weight:700}
.ctgl+.ctgl{margin-top:10px}
.ctgl .sw{width:40px;height:23px;border-radius:999px;background:#D9E4EA;position:relative;transition:background .25s;flex-shrink:0}
.ctgl .sw::after{content:'';position:absolute;top:3px;inset-inline-start:3px;width:17px;height:17px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(7,41,58,.3);transition:translate .25s}
.ctgl[aria-pressed="true"] .sw{background:var(--teal)}
.ctgl[aria-pressed="true"] .sw::after{translate:-17px 0}
.ctgl .n{margin-inline-start:auto;font-family:'JBMono';font-size:11px;color:var(--txt2);direction:ltr}
/* EKG price slider */
.cpr{direction:ltr}
.cpr-track{position:relative;height:46px;margin:2px 8px 6px}
.cpr-base{position:absolute;top:50%;left:0;right:0;height:2px;background:var(--line);border-radius:2px}
.cpr-wave{position:absolute;inset:0;overflow:visible}
.cpr-wave svg{width:100%;height:100%;overflow:visible}
.cpr-wave path{fill:none;stroke:var(--pulse);stroke-width:2.2;stroke-linecap:round;filter:drop-shadow(0 0 4px rgba(255,59,78,.35))}
.cpr input[type=range]{position:absolute;top:0;left:8px;right:8px;width:calc(100% - 16px);height:46px;margin:0;background:none;pointer-events:none;-webkit-appearance:none;appearance:none}
.cpr input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;pointer-events:auto;width:20px;height:20px;border-radius:50%;background:var(--pulse);border:3.5px solid #fff;box-shadow:0 0 0 1.5px var(--pulse),0 2px 8px rgba(255,59,78,.45);cursor:grab}
.cpr input[type=range]::-moz-range-thumb{pointer-events:auto;width:14px;height:14px;border-radius:50%;background:var(--pulse);border:3.5px solid #fff;box-shadow:0 0 0 1.5px var(--pulse);cursor:grab}
.cpr input[type=range]:focus-visible::-webkit-slider-thumb{outline:3px solid var(--petrol);outline-offset:2px}
.cpr-read{display:flex;justify-content:space-between;font-size:11.5px;color:var(--txt2);font-weight:600;direction:rtl}
.cpr-read b{font-family:'Vazirmatn';font-weight:800;color:var(--txt)}

/* ---------- grid + cards v2 ---------- */
.cgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cgrid .pcard{opacity:0;animation:cap .5s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(var(--st)*45ms)}
@keyframes cap{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.cmorewrap{display:flex;justify-content:center;margin-top:26px}
.cmore{display:inline-flex;align-items:center;gap:9px;background:var(--card);border:1.5px solid var(--line);border-radius:999px;padding:13px 26px;font-size:13.5px;font-weight:800;transition:border-color .2s,background .2s}
.cmore:hover{border-color:var(--pulse);color:var(--pulse-deep)}
.cmore .lat{font-size:11.5px;color:var(--txt2)}

/* empty flatline */
.cempty{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:60px 20px;background:var(--card);border:1px dashed var(--line);border-radius:var(--r-l)}
.cempty .flat{width:min(340px,86%);height:60px}
.cempty .flat path{fill:none;stroke:var(--pulse);stroke-width:2.4;stroke-linecap:round;opacity:.85}
.cempty b{font-size:16px;font-weight:800}
.cempty span{font-size:12.5px;color:var(--txt2);line-height:2}
.cempty .btn{margin-top:8px}

/* ---------- SEO layer ---------- */
.cseo{margin-top:54px;padding-bottom:26px;display:grid;gap:22px}
.cintro{background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);padding:clamp(20px,3vw,32px)}
.cintro h2{font-family:'Estedad';font-weight:900;font-size:19px;margin-bottom:12px;display:flex;align-items:center;gap:10px}
.cintro h2::before{content:'';width:6px;height:20px;border-radius:3px;background:var(--pulse)}
.cintro .body{font-size:13.5px;color:var(--txt2);line-height:2.3;max-height:8.5em;overflow:hidden;position:relative;transition:max-height .4s ease}
.cintro .body::after{content:'';position:absolute;bottom:0;inset-inline:0;height:44px;background:linear-gradient(transparent,var(--card))}
.cintro.x .body{max-height:80em}
.cintro.x .body::after{opacity:0}
.cintro .morebtn{margin-top:10px;font-size:12.5px;font-weight:800;color:var(--petrol);display:inline-flex;align-items:center;gap:6px}
.cfaq{background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);padding:clamp(20px,3vw,32px)}
.cfaq h2{font-family:'Estedad';font-weight:900;font-size:19px;margin-bottom:14px;display:flex;align-items:center;gap:10px}
.cfaq h2::before{content:'';width:6px;height:20px;border-radius:3px;background:var(--teal)}
.cfaq details{border-bottom:1px dashed var(--line)}
.cfaq details:last-child{border-bottom:0}
.cfaq summary{list-style:none;display:flex;align-items:center;gap:10px;padding:15px 4px;font-size:13.5px;font-weight:800;cursor:pointer}
.cfaq summary::-webkit-details-marker{display:none}
.cfaq summary::after{content:'+';margin-inline-start:auto;font-family:'JBMono';font-size:16px;color:var(--petrol);transition:transform .25s}
.cfaq details[open] summary::after{transform:rotate(45deg);color:var(--pulse)}
.cfaq .a{padding:0 4px 16px;font-size:13px;color:var(--txt2);line-height:2.2}
.crel{display:flex;flex-wrap:wrap;gap:9px;align-items:center}
.crel .h{font-size:13px;font-weight:800;margin-inline-end:6px}
.crel a{display:inline-flex;align-items:center;gap:7px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:9px 15px;font-size:12.5px;font-weight:700;transition:border-color .2s,color .2s}
.crel a:hover{border-color:var(--petrol);color:var(--petrol)}
.crel a .n{font-family:'JBMono';font-size:10.5px;color:var(--txt2);direction:ltr}

/* ---------- mobile filter sheet ---------- */
.fsheet{position:fixed;inset:0;z-index:85;display:none}
.fsheet.open{display:block}
.fsheet-bg{position:absolute;inset:0;background:rgba(4,22,32,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:fadein .25s}
.fsheet-p{position:absolute;inset-inline:0;bottom:0;max-height:84vh;background:var(--canvas);border-radius:26px 26px 0 0;display:flex;flex-direction:column;animation:sheetup .38s cubic-bezier(.2,.9,.25,1)}
.fsheet-h{position:relative;display:flex;align-items:center;justify-content:center;padding:22px 18px 12px}
.fsheet-h .grab{position:absolute;top:9px;inset-inline-start:50%;translate:50% 0;width:44px;height:5px;border-radius:3px;background:#C9D8E0}
.fsheet-h b{font-size:15px;font-weight:800}
.fsheet-x{position:absolute;inset-inline-end:14px;top:14px;width:38px;height:38px;border-radius:50%;background:#E4EDF2;display:grid;place-items:center}
.fsheet-x svg{width:17px;height:17px}
.fsheet-b{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:6px 16px 16px}
.fsheet-b .crail{position:static;max-height:none;overflow:visible;top:auto}
.fsheet-f{display:flex;gap:10px;padding:12px 16px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--card)}
.fsheet-f .btn{flex:1;padding-block:14px}
.fsheet-clear{font-size:13px;font-weight:700;color:var(--pulse-deep);padding-inline:14px}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .clay{grid-template-columns:1fr}
  .crail{display:none} /* rail lives in the sheet (moved by JS) */
  .fsheet-b .crail{display:flex}
  .cfbtn{display:inline-flex}
  .cgrid{grid-template-columns:repeat(3,1fr);gap:14px}
  .chero-grid{grid-template-columns:1fr;gap:26px}
  .chero-vis{height:230px;max-width:440px}
}
@media (max-width:640px){
  .crumbs{padding-top:10px}
  .chero{margin-top:8px}
  .chero .wrap{padding-inline:10px}
  .chero-grid{border-radius:20px;padding:22px 18px 26px}
  .chero p{font-size:12.5px;line-height:2}
  .chstats{gap:7px}
  .cst{padding:8px 12px;font-size:11px}
  .cst b{font-size:13.5px}
  .chero-vis{height:190px}
  .csubs-rail{grid-auto-columns:minmax(140px,152px);margin-inline:-14px;padding-inline:14px}
  .csub .im{height:74px}
  .cmon{top:0}
  .cmon-in{flex-wrap:wrap;gap:9px;padding-block:9px}
  .cread{order:1;padding:8px 13px}
  .cread b{font-size:16px}
  .cekg{width:44px;height:22px}
  .cfbtn{order:2}
  .cdd{order:3;margin-inline-start:auto}
  .cdd-b{padding:10px 13px;font-size:12px}
  .cchips{order:4;flex-basis:100%;margin:0}
  .cchips:empty{display:none}
  .clay{margin-top:14px;padding-inline:10px}
  .cgrid{grid-template-columns:1fr 1fr;gap:9px}
  .cgrid .pcard{border-radius:15px}
  .pc-imgwrap{padding:10px}
  .pc-body{padding:11px 12px 12px;gap:7px}
  .pc-name{font-size:12.3px;line-height:1.7;min-height:3.3em}
  .pc-foot{flex-direction:column;align-items:stretch;gap:9px}
  .pc-price{display:flex;align-items:baseline;gap:8px}
  .buy{width:100%;height:42px}
  .pc-meta{font-size:10.8px;flex-wrap:wrap}
  .pc-meta .stock{white-space:nowrap}
  .cseo .wrap{padding-inline:10px}
  .cseo{margin-top:36px}
  .cempty{padding:44px 14px}
  .cmon .wrap{padding-inline:10px}
}
@media (max-width:400px){
  .cgrid{gap:7px}
  .pc-name{font-size:11.6px}
}
@media (prefers-reduced-motion:reduce){
  .cgrid .pcard{animation:none;opacity:1}
  .chero-glow,.cpol,.cdot{animation:none!important}
  .cpol::after{display:none}
}

/* بازخورد مشتری: خطِ گرادیانیِ بالای هر جعبهٔ فیلتر (مثل کارتِ پکیج‌ها) */
.cgrp{position:relative;overflow:hidden}
.cgrp::before{content:'';position:absolute;top:0;inset-inline:0;height:4px;background:linear-gradient(90deg,var(--sky),var(--coral) 52%,var(--aqua));z-index:1}