/* فاز و نول – lapis · brass · turquoise */
:root{
  /* Native controls follow the theme too. Without this the <option> list of a
     select is drawn by the OS in its own scheme: in dark mode the popup stayed
     light while the text inherited our near-white ink, so «۳۰ وات» was white on
     white and the whole dropdown read as blank. */
  color-scheme:light;
  --ground:#EDF0F7; --plate:#FCFCFE; --plate-2:#E5E9F3; --line:#D5DAE8;
  --ink:#131C43; --ink-2:#4A5380; --ink-3:#8990B0;
  --accent:#D9A54A; --accent-hover:#E8B966; --on-accent:#131C43; --accent-ink:#8F6214;
  --teal:#0E8577; --teal-soft:#D3EFEA; --rose:#E0505B;
  --lapis:#16235A; --lapis-deep:#0B1433; --ivory:#F5EEDF; --brass:#E5B25A;
  --glow:#FFC76B; --glow-soft:rgba(255,199,107,.35); --bulb-off:#C9CEDD;
  --copper:#C07033; --brown:#7A4524; --core-black:#2B2B2B; --core-grey:#8E9195; --core-blue:#2E62B8; --earth-y:#D9CB1F; --earth-g:#2F8A3F;
  --ok:#0E8577; --ok-soft:#D3EFEA; --warn:#A95A14; --warn-soft:#F7E8D3; --danger:#C8323D; --danger-soft:#F8DEE0;
  --shadow:0 1px 2px rgba(19,28,67,.06),0 8px 24px rgba(19,28,67,.06);
  --ease:cubic-bezier(.2,.8,.2,1); --spring:cubic-bezier(.34,1.56,.64,1);
  --body:"Vazirmatn",Tahoma,"Segoe UI",sans-serif;
  --nasta:"Noto Nastaliq Urdu","Vazirmatn",serif;
}
/* Light is the shop's default, whatever the phone's own setting is (owner,
   1405/07/01). Dark comes only from the sun button in the header, which writes
   data-theme="dark" and remembers it. */
:root[data-theme="light"]{ color-scheme:light }
:root[data-theme="dark"]{
  color-scheme:dark;
  --ground:#0C1330; --plate:#141E46; --plate-2:#1B275A; --line:#28366F;
  --ink:#F2ECDF; --ink-2:#B6BCD9; --ink-3:#7A83AC;
  --accent:#E5B25A; --accent-hover:#F0C477; --accent-ink:#F0C477;
  --teal:#52D0C0; --teal-soft:#123A48; --rose:#FF7A83; --bulb-off:#34406E;
  --copper:#E08D52; --brown:#B87848; --core-black:#0E0E0E; --core-blue:#4F82D6;
  --ok:#52D0C0; --ok-soft:#123A48; --warn:#F0A060; --warn-soft:#3A2A1A; --danger:#FF7A83; --danger-soft:#3D1C24;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.25);
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.75;-webkit-font-smoothing:antialiased;transition:background .3s}
img{max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--teal);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--teal);outline-offset:2px;border-radius:6px}
h1,h2,h3,h4{text-wrap:balance;margin:0;line-height:1.4}
p{margin:0 0 .8em}
p:last-child{margin-bottom:0}
.wrap{max-width:1200px;margin-inline:auto;padding-inline:clamp(16px,3vw,32px)}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--ink-2)}
.fine{font-size:12.5px;color:var(--ink-3)}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0;margin:-1px}
.skip-link:focus{position:fixed!important;top:8px;right:8px;width:auto;height:auto;clip:auto;z-index:100;background:var(--plate);color:var(--ink);padding:8px 14px;border-radius:10px}
.site-content.wrap{padding-block:24px 72px;display:grid;gap:56px;min-height:60vh}
.site-content.wrap>*{min-width:0}

/* ---------- buttons ---------- */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 22px;border-radius:12px;border:1.5px solid transparent;font-weight:800;cursor:pointer;text-decoration:none!important;transition:background .2s,border-color .2s,color .2s,transform .15s var(--ease),box-shadow .2s}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--accent);color:var(--on-accent);box-shadow:0 6px 18px -8px rgba(217,165,74,.8)}
.btn-primary:hover{background:var(--accent-hover)}
.btn-primary::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(120%);transition:transform .7s var(--ease)}
.btn-primary:hover::after{transform:translateX(-120%)}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink-3);background:var(--plate-2)}
.btn-lg{min-height:56px;padding:0 30px;font-size:17px;border-radius:14px}
.btn-sm{min-height:36px;padding:0 14px;font-size:14px;border-radius:10px}
.icon-btn{position:relative;display:inline-grid;place-items:center;width:44px;height:44px;border-radius:12px;border:0;background:transparent;cursor:pointer;color:var(--ink);transition:background .2s,transform .15s}
.icon-btn:hover{background:var(--plate-2)}
.icon-btn:active{transform:scale(.92)}
.icon-btn svg{width:23px;height:23px}
.icon-btn.bump{animation:bump .5s var(--spring)}
@keyframes bump{0%{transform:scale(1)}35%{transform:scale(1.22) rotate(-8deg)}100%{transform:scale(1)}}
.theme-ico{transition:transform .5s var(--spring)}
.icon-btn:hover .theme-ico{transform:rotate(40deg)}
.chip{border:1.5px solid var(--line);background:var(--plate);color:var(--ink);border-radius:999px;padding:4px 12px;min-height:34px;font-size:13.5px;cursor:pointer;display:inline-flex;align-items:center;transition:background .2s,border-color .2s,color .2s,transform .15s var(--spring)}
.chip:hover{border-color:var(--ink-3);text-decoration:none}
.chip:active{transform:scale(.94)}
.chip[aria-pressed="true"]{background:var(--lapis);color:var(--brass);border-color:var(--lapis)}
.chips{display:flex;flex-wrap:wrap;gap:6px}

/* ---------- header ---------- */
.demo-bar{background:var(--lapis);color:var(--brass);font-size:13px;text-align:center;padding:6px 16px}
.hdr{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--plate) 86%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .25s,box-shadow .25s}
.admin-bar .hdr{top:32px}
@media (max-width:782px){.admin-bar .hdr{top:0}}
.hdr.scrolled{border-bottom-color:var(--line);box-shadow:var(--shadow)}
.hdr-row{display:flex;align-items:center;gap:14px;padding-block:10px}
.logo{display:flex;align-items:center;gap:8px;color:var(--ink);text-decoration:none!important;flex:none}
.logo b{font-weight:900;font-size:24px;line-height:1}
.logo-mark{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--lapis);transition:box-shadow .3s}
.logo-mark svg{width:20px;height:20px}
.logo-mark .lm-glass{fill:#6F7AA8;transition:fill .3s}
.logo:hover .logo-mark{box-shadow:0 0 0 4px var(--glow-soft)}
.logo:hover .lm-glass{fill:var(--glow)}
.hdr-search{flex:1;display:flex;align-items:center;gap:8px;background:var(--plate-2);border:1.5px solid transparent;border-radius:12px;padding-inline:12px;min-width:0;margin:0;transition:border-color .2s,background .2s,box-shadow .2s}
.hdr-search:focus-within{border-color:var(--teal);background:var(--plate);box-shadow:0 0 0 4px var(--teal-soft)}
.hdr-search svg{width:20px;height:20px;color:var(--ink-3);flex:none}
.hdr-search input[type=search]{flex:1;min-width:0;border:0;background:transparent;height:44px;outline:none;padding:0}
.hdr-search input::placeholder{color:var(--ink-3);transition:opacity .25s}
.hdr-search input.ph-out::placeholder{opacity:0}
.badge{position:absolute;top:2px;left:2px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--rose);color:#fff;font-size:12px;font-weight:800;display:grid;place-items:center;line-height:1}
.badge.pop{animation:pop .45s var(--spring)}
@keyframes pop{0%{transform:scale(.4)}100%{transform:scale(1)}}
.hdr-tools{display:flex;gap:2px}
.cats ul{display:flex;gap:4px;overflow-x:auto;padding:0 0 8px;margin:0;list-style:none;scrollbar-width:none}
.cats ul::-webkit-scrollbar{display:none}
.cats a{position:relative;display:block;flex:none;padding:6px 12px;border-radius:10px;color:var(--ink-2);font-weight:500;font-size:14px;white-space:nowrap;text-decoration:none;transition:color .2s}
.cats a::after{content:"";position:absolute;inset-inline:12px;bottom:2px;height:2px;border-radius:2px;background:var(--accent);transform:scaleX(0);transition:transform .3s var(--ease)}
.cats a:hover{color:var(--ink)}
.cats a:hover::after,.cats a[aria-current="page"]::after,.cats .current-menu-item>a::after{transform:scaleX(1)}
.cats a[aria-current="page"],.cats .current-menu-item>a{color:var(--ink);font-weight:700}
@media (max-width:640px){
  .hdr-row{flex-wrap:wrap;gap:8px;padding-block:8px}
  .hdr-search{order:5;flex-basis:100%}
  .hdr-tools{margin-inline-start:auto}
  /* A blurred, half-transparent bar is what makes the search box look as if it
     had come loose from the header while the page scrolls under it on a phone:
     the blur layer repaints a frame late. Solid colour, no blur. */
  .hdr{background:var(--plate);backdrop-filter:none;-webkit-backdrop-filter:none}
  /* And a shorter bar, so the shop itself gets the screen. */
  .logo b{font-size:20px}
  .logo-mark{width:30px;height:30px;border-radius:9px}
  .hdr-search input[type=search]{height:40px}
  .icon-btn{width:40px;height:40px}
  .cats ul{padding-bottom:6px}
  .cats a{padding:5px 10px;font-size:13px}
}

/* ---------- landing ---------- */
.landing{--lvl:0;--mx:50%;--my:40%;--sway:0deg;position:relative;min-height:100svh;background:var(--lapis-deep);color:var(--ivory);overflow:hidden;display:grid;grid-template-rows:auto 1fr auto;padding-inline:clamp(16px,4vw,48px);padding-block:18px 26px;isolation:isolate}
.landing .girih,.landing .girih-lit{position:absolute;inset:0;z-index:-2;background-image:var(--girih);background-size:96px;background-position:center top;pointer-events:none}
.landing .girih{opacity:.035}
.landing .girih-lit{opacity:calc(.14 + .5*var(--lvl));
  -webkit-mask-image:radial-gradient(circle calc(90px + 250px*var(--lvl)) at 50% 150px,#000 0,rgba(0,0,0,.35) 50%,transparent 100%),radial-gradient(circle 170px at var(--mx) var(--my),#000,transparent 100%);
  mask-image:radial-gradient(circle calc(90px + 250px*var(--lvl)) at 50% 150px,#000 0,rgba(0,0,0,.35) 50%,transparent 100%),radial-gradient(circle 170px at var(--mx) var(--my),#000,transparent 100%)}
.landing .wash{position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(circle at 50% 150px,rgba(255,199,107,calc(.34*var(--lvl))),transparent 58%)}
.l-top{display:flex;align-items:center;justify-content:space-between;gap:12px;position:relative;z-index:2}
.l-top .logo{color:var(--ivory)}
.l-top .logo-mark{background:rgba(255,255,255,.08)}
.l-link{color:var(--ivory);opacity:.8;font-weight:500;padding:8px 12px;border-radius:10px;transition:opacity .2s,background .2s}
.l-link:hover{opacity:1;background:rgba(255,255,255,.08);text-decoration:none}
.l-lamp{position:absolute;top:0;left:50%;width:120px;margin-left:-60px;transform-origin:50% 0;transform:rotate(var(--sway));transition:transform 1.2s var(--spring);z-index:1;display:flex;flex-direction:column;align-items:center;cursor:pointer}
.l-lamp .cord{width:2px;height:88px;background:linear-gradient(#000,#3A4677)}
.l-lamp svg{width:92px;height:auto;overflow:visible}
.bulb-on{opacity:var(--lvl)}
.bulb-halo{opacity:calc(var(--lvl)*.55)}
.l-pull{position:absolute;top:0;left:calc(50% + 46px);z-index:2;display:flex;flex-direction:column;align-items:center;background:none;border:0;padding:0 10px;cursor:pointer;transition:transform .35s var(--spring)}
.l-pull i{display:block;width:1.5px;height:150px;background:rgba(245,238,223,.35)}
.l-pull b{display:block;width:12px;height:18px;border-radius:6px;background:var(--brass);box-shadow:0 0 0 3px rgba(229,178,90,.18)}
.l-pull:hover b{box-shadow:0 0 0 6px rgba(229,178,90,.22)}
.l-pull.pulled{transform:translateY(16px)}
.l-main{display:grid;place-items:center;align-content:center;text-align:center;gap:18px;padding-top:230px;padding-bottom:24px;position:relative;z-index:1}
.l-kicker{font-size:14px;color:var(--brass);font-weight:700;display:flex;gap:8px;align-items:center;margin:0}
.l-kicker::before,.l-kicker::after{content:"";width:28px;height:1px;background:currentColor;opacity:.6}
.l-title{font-family:var(--nasta);font-weight:700;font-size:clamp(34px,6.2vw,78px);line-height:2.05;max-width:16ch;text-shadow:0 0 calc(40px*var(--lvl)) rgba(255,199,107,calc(.35*var(--lvl)))}
.l-sub{max-width:52ch;color:rgba(245,238,223,.78);font-size:17px;margin:0}
.l-cta{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.l-hint{font-size:13px;color:rgba(245,238,223,.5);margin:0}
.l-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;position:relative;z-index:1;border-top:1px solid rgba(245,238,223,.12);padding-top:16px}
.l-cats{display:flex;flex-wrap:wrap;gap:8px}
.l-cats a{color:var(--ivory);border:1px solid rgba(245,238,223,.18);border-radius:999px;padding:6px 14px;font-size:14px;transition:background .2s,border-color .2s,transform .2s var(--ease)}
.l-cats a:hover{background:rgba(229,178,90,.14);border-color:var(--brass);text-decoration:none;transform:translateY(-2px)}
.l-facts{display:flex;gap:18px;flex-wrap:wrap;font-size:13.5px;color:rgba(245,238,223,.65)}
.l-facts b{color:var(--ivory)}

/* ---------- sections ---------- */
.sec-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.sec-head h1,.sec-head h2{font-weight:900;font-size:clamp(24px,3vw,32px)}
.sec-head p{color:var(--ink-2);max-width:60ch;margin:0}
.more{font-weight:700;display:inline-flex;gap:6px;align-items:center}
.more svg{width:18px;height:18px;transition:transform .25s var(--ease)}
.more:hover{text-decoration:none}
.more:hover svg{transform:translateX(-4px)}
.panel{background:var(--plate);border:1px solid var(--line);border-radius:20px;padding:22px}
.table-scroll{overflow-x:auto}
.empty{padding:48px 20px;text-align:center;background:var(--plate);border:1.5px dashed var(--line);border-radius:20px;display:grid;gap:10px;justify-items:center}
.entry-content{max-width:72ch}
.entry-content h2{margin:1.4em 0 .5em;font-size:22px}
.woo-page .entry-content{max-width:none}

/* ---------- store hero ---------- */
.hero{--lvl:.7;--lc:255,199,107;--sway:0deg;position:relative;display:grid;grid-template-columns:1fr 1fr;background:var(--lapis);color:var(--ivory);border-radius:26px;overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 55% 80% at 26% 30%,rgba(var(--lc),calc(.46*var(--lvl))),transparent 72%)}
.hero::after{content:"";position:absolute;inset:0;z-index:-2;background-image:var(--girih);background-size:84px;opacity:calc(.03 + .09*var(--lvl))}
.hero-copy{padding:clamp(28px,5vw,60px);display:flex;flex-direction:column;justify-content:center;gap:18px}
.hero-copy h1{font-family:var(--nasta);font-weight:700;font-size:clamp(30px,4.2vw,52px);line-height:2.1;text-shadow:0 0 calc(34px*var(--lvl)) rgba(var(--lc),calc(.35*var(--lvl)))}
.hero-copy .lead{font-size:16.5px;color:rgba(245,238,223,.8);max-width:44ch;margin:0}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap}
.hero-facts{display:flex;gap:24px;flex-wrap:wrap;padding-top:16px;border-top:1px solid rgba(245,238,223,.14);font-size:13.5px;color:rgba(245,238,223,.68)}
.hero-facts b{display:block;color:var(--ivory);font-size:17px}
.stage{position:relative;min-height:440px;display:flex;flex-direction:column;justify-content:flex-end;padding:18px}
.pendant{position:absolute;top:0;left:50%;width:220px;margin-left:-110px;transform-origin:50% 0;transform:rotate(var(--sway));transition:transform 1.4s var(--spring);cursor:pointer;background:none;border:0;padding:0;color:inherit}
.pendant svg{width:220px;height:auto;display:block;overflow:visible}
.beam{opacity:var(--lvl)}
.pool{position:absolute;left:50%;bottom:120px;width:320px;height:60px;margin-left:-160px;border-radius:50%;background:radial-gradient(closest-side,rgba(var(--lc),calc(.45*var(--lvl))),transparent);pointer-events:none}
.dimmer{position:relative;display:grid;gap:12px;padding:16px;border-radius:18px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.dim-row{display:grid;gap:6px}
.dim-row label{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;color:rgba(245,238,223,.75)}
.dim-row label b{color:var(--ivory);font-weight:700}
.range{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;cursor:pointer;margin:0}
.range::-webkit-slider-runnable-track{height:6px;border-radius:6px;background:var(--track)}
.range::-moz-range-track{height:6px;border-radius:6px;background:var(--track)}
.range::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;margin-top:-9px;border-radius:50%;background:var(--brass);border:3px solid var(--ivory);box-shadow:0 2px 8px rgba(0,0,0,.35);transition:transform .15s var(--spring),box-shadow .2s}
.range::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--brass);border:3px solid var(--ivory)}
.range:hover::-webkit-slider-thumb{box-shadow:0 0 0 8px rgba(229,178,90,.22),0 2px 8px rgba(0,0,0,.35)}
.range:active::-webkit-slider-thumb{transform:scale(1.18)}
.range:focus-visible{outline:none}
.range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px var(--teal)}
#dimLvl{--track:linear-gradient(to left,#2B376E,#E5B25A)}
#dimCct{--track:linear-gradient(to left,#FFB561,#FFE6BF 45%,#DCE8FF)}
.dim-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;font-size:13.5px}
.dim-foot a{color:var(--brass);font-weight:700}
.dim-toggle{background:rgba(255,255,255,.1);color:var(--ivory);border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:4px 12px;font-size:13px;cursor:pointer;margin-inline-start:auto}
.dim-toggle:hover{background:rgba(255,255,255,.18)}
/* products in the slider's light colour */
.stage.has-picks{min-height:600px}
.dim-picks{display:grid;gap:8px;padding-top:12px;border-top:1px solid rgba(255,255,255,.12)}
.dim-picks-head{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:13px;color:rgba(245,238,223,.75)}
.dim-picks-head b{color:var(--ivory)}
.dim-picks-head a{display:inline-flex;align-items:center;gap:2px;color:var(--brass);font-weight:700}
.dim-picks-head a svg{width:16px;height:16px}
.dim-picks-list{display:grid;grid-template-columns:1fr 1fr;gap:8px;transition:opacity .18s}
.dim-picks-list.swap{opacity:0}
.dim-pick{display:grid;grid-template-columns:52px 1fr;gap:10px;align-items:center;padding:6px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:var(--ivory);text-decoration:none!important;transition:background .2s,transform .2s var(--spring)}
.dim-pick:hover{background:rgba(255,255,255,.13);transform:translateY(-2px)}
.dim-pick img{width:52px;height:52px;object-fit:contain;border-radius:8px;background:#fff}
.dim-pick span{display:grid;gap:2px;min-width:0}
.dim-pick b{font-size:12px;font-weight:600;line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dim-pick small{font-size:11.5px;color:var(--brass);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:420px){.dim-picks-list{grid-template-columns:1fr}.stage.has-picks{min-height:720px}}
@media (max-width:880px){.hero{grid-template-columns:1fr}.stage{min-height:420px}.hero::before{background:radial-gradient(ellipse 80% 55% at 50% 62%,rgba(var(--lc),calc(.46*var(--lvl))),transparent 72%)}}

/* ---------- audience split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.path{padding:28px;border-radius:20px;display:grid;gap:12px;align-content:start;transition:transform .3s var(--ease),box-shadow .3s}
.path:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.path h3{font-weight:900;font-size:24px}
.path ul{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.path li{display:flex;gap:10px;align-items:baseline}
.path li::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--accent);transform:translateY(-2px)}
.path p{margin:0}
.path-home{background:var(--plate);border:1px solid var(--line)}
.path-pro{background:var(--lapis);color:var(--ivory)}
.path-pro .muted,.fine-on-dark{color:rgba(245,238,223,.75);font-size:13px}
.carton-mini{display:flex;border:1px solid rgba(245,238,223,.35);border-radius:12px;overflow:hidden;font-size:14px;color:rgba(245,238,223,.8);text-decoration:none!important;transition:border-color .2s}
.carton-mini:hover{border-color:var(--brass)}
.carton-mini span{flex:1;padding:8px 10px;border-inline-start:1px solid rgba(245,238,223,.35)}
.carton-mini span:first-child{border-inline-start:0}
.carton-mini b{display:block;font-size:17px;color:var(--ivory)}
.carton-mini span:last-child b{color:var(--brass)}
@media (max-width:760px){.split{grid-template-columns:1fr}}

/* ---------- category tiles ---------- */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px}
.cat-tile{position:relative;display:grid;gap:4px;justify-items:center;text-align:center;padding:16px 12px 18px;border-radius:20px;background:var(--plate);border:1px solid var(--line);color:var(--ink);text-decoration:none!important;overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.cat-tile::before{content:"";position:absolute;inset:auto 0 0;height:60%;background:radial-gradient(ellipse at 50% 100%,var(--glow-soft),transparent 70%);opacity:0;transition:opacity .35s}
.cat-tile:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--accent)}
.cat-tile:hover::before{opacity:1}
.cat-tile .fn-art,.cat-tile img{position:relative;display:block;width:100%;max-width:118px;aspect-ratio:1;object-fit:contain;transition:transform .45s var(--spring)}
.cat-tile:hover .fn-art,.cat-tile:hover img{transform:scale(1.08) rotate(-3deg)}
.cat-tile b{position:relative;font-size:15.5px}
.cat-tile small{position:relative;color:var(--ink-3);font-size:13px}
.fn-art{display:block}
.fn-art svg{width:100%;height:100%;display:block}
/* ---------- WooCommerce: general ---------- */
.woocommerce-breadcrumb{font-size:13px;color:var(--ink-3);margin:0 0 10px}
.woocommerce-breadcrumb a{color:var(--ink-2)}
.woocommerce-products-header__title,.product_title{font-weight:900;font-size:clamp(24px,3vw,32px);margin:0 0 8px}
.term-description{color:var(--ink-2);max-width:60ch}
.woocommerce .woocommerce-result-count{color:var(--ink-2);font-size:14px;margin:0 0 14px}
.woocommerce .woocommerce-ordering{margin:0 0 14px}
.woocommerce .woocommerce-ordering select,.woocommerce select,.woocommerce form .form-row select{height:44px;border-radius:12px;border:1.5px solid var(--line);background:var(--plate);color:var(--ink);padding-inline:10px}
/* Cable sizes read left to right, as the price lists write them: «۳×۲.۵», not «۲.۵×۳». */
.woocommerce select[name="attribute_pa_cross-section"],.woocommerce-product-attributes-item--attribute_pa_cross-section .woocommerce-product-attributes-item__value{direction:ltr;text-align:left}
/* A chosen option in the cart and order: each value takes its own direction, so a size is LTR and «سفید طبیعی» stays RTL. */
.variation dd,.wc-item-meta li p{unicode-bidi:plaintext}
/* Firefox draws the open list from these rather than from color-scheme. */
select option{background:var(--plate);color:var(--ink)}
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce #respond input#submit,.woocommerce a.button.alt,.woocommerce button.button.alt,.woocommerce input.button.alt,.woocommerce .button.btn-primary{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 22px;border-radius:12px;border:0;background:var(--accent);color:var(--on-accent);font-weight:800;font-size:15px;line-height:1.2;transition:background .2s,transform .15s var(--ease)}
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover,.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover{background:var(--accent-hover);color:var(--on-accent);text-decoration:none}
.woocommerce a.button:active,.woocommerce button.button:active{transform:scale(.97)}
.woocommerce a.button.btn-ghost,.woocommerce button.button[name="update_cart"],.woocommerce button.button[name="apply_coupon"]{background:transparent;border:1.5px solid var(--line);color:var(--ink)}
.woocommerce a.button.btn-sm{min-height:36px;padding:0 14px;font-size:14px}
.woocommerce button.button:disabled,.woocommerce button.button.disabled{opacity:.45;background:var(--accent);color:var(--on-accent)}
.woocommerce .woocommerce-message,.woocommerce .woocommerce-info,.woocommerce .woocommerce-error,.woocommerce-notices-wrapper>*{border:1px solid var(--line);border-radius:14px;background:var(--plate);color:var(--ink);padding:14px 18px;margin:0 0 16px;list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.woocommerce .woocommerce-message::before,.woocommerce .woocommerce-info::before,.woocommerce .woocommerce-error::before{display:none}
.woocommerce .woocommerce-message{background:var(--teal-soft);border-color:transparent}
.woocommerce .woocommerce-error{background:var(--danger-soft);border-color:transparent;display:grid}
.woocommerce .woocommerce-message .button,.woocommerce .woocommerce-info .button{margin-inline-start:auto;min-height:36px;order:2}
.woocommerce .price .fn-unit,.fn-unit{font-weight:500;font-size:12px;color:var(--ink-3)}
.woocommerce span.onsale{display:none}
.woocommerce nav.woocommerce-pagination ul{border:0;display:flex;gap:6px;justify-content:center}
.woocommerce nav.woocommerce-pagination ul li{border:0}
.woocommerce nav.woocommerce-pagination ul li a,.woocommerce nav.woocommerce-pagination ul li span{border-radius:10px;min-width:40px;padding:10px;background:var(--plate);color:var(--ink)}
.woocommerce nav.woocommerce-pagination ul li span.current{background:var(--lapis);color:var(--brass)}

/* ---------- product grid & cards ---------- */
.woocommerce ul.products,.woocommerce-page ul.products{display:grid;grid-template-columns:repeat(auto-fill,minmax(225px,1fr));gap:16px;margin:0 0 24px;padding:0}
.woocommerce ul.products::before,.woocommerce ul.products::after{display:none}
.woocommerce ul.products li.product.card{float:none;width:auto;margin:0;padding:0;display:flex;flex-direction:column;background:var(--plate);border:1px solid var(--line);border-radius:20px;overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.woocommerce ul.products li.product.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:color-mix(in srgb,var(--accent) 55%,var(--line))}
.card-art{display:block;background:var(--plate-2);aspect-ratio:4/3;position:relative;overflow:hidden}
.card-art::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 40%,var(--glow-soft),transparent 60%);opacity:0;transition:opacity .4s;pointer-events:none}
.card:hover .card-art::after{opacity:1}
.woocommerce ul.products li.product.card .card-art img,.card-art .fn-art{position:relative;z-index:1;width:100%;height:100%;margin:0;object-fit:cover;display:block;transition:transform .5s var(--ease)}
.card-art .fn-art{object-fit:contain}
.card:hover .card-art img,.card:hover .card-art .fn-art{transform:scale(1.06)}
.card-flag{position:absolute;z-index:2;top:10px;right:10px;font-size:12px;font-weight:800;padding:3px 9px;border-radius:999px;background:var(--lapis);color:var(--brass)}
.card-flag.sale{right:auto;left:10px;background:var(--rose);color:#fff}
.card-body{padding:12px 16px 16px;display:flex;flex-direction:column;gap:4px;flex:1}
.woocommerce ul.products li.product.card h3{font-size:15px;font-weight:700;line-height:1.6;padding:0;margin:0}
.card-body h3 a{color:var(--ink)}
.spec{font-size:13px;color:var(--ink-2);margin:0}
.card-foot{margin-top:auto;padding-top:10px;display:flex;align-items:end;justify-content:space-between;gap:8px}
.woocommerce ul.products li.product.card .price{color:var(--ink);font-weight:900;font-size:17px;margin:0}
.woocommerce ul.products li.product.card .price del{font-size:13px;color:var(--ink-3);font-weight:500}
.woocommerce ul.products li.product.card .price ins{text-decoration:none}
.stock{font-size:12px;font-weight:500;display:inline-flex;align-items:center;gap:5px;color:var(--ok)}
.stock::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 20%,transparent)}
.stock.low{color:var(--warn)}
/* Out of stock is red, not grey: the shop keeps such items on the page with
   their price, so the word has to carry the warning on its own. */
.stock.out,.woocommerce .stock.out-of-stock{color:var(--danger);font-weight:700}
.woocommerce ul.products li.product.card a.button.add{position:relative;width:46px;height:46px;min-height:0;padding:0;border-radius:14px;background:var(--lapis);color:var(--brass);display:grid;place-items:center;flex:none;margin:0;transition:transform .2s var(--spring),background .2s}
.woocommerce ul.products li.product.card a.button.add:hover{transform:scale(1.08) rotate(-4deg)}
.woocommerce ul.products li.product.card a.button.add:active{transform:scale(.9)}
.woocommerce ul.products li.product.card a.button.add::after{display:none}
.add svg{width:22px;height:22px;grid-area:1/1;transition:transform .35s var(--spring),opacity .2s}
.add .ok{opacity:0;transform:scale(.3)}
.woocommerce ul.products li.product.card a.button.add.loading{opacity:.6}
.woocommerce ul.products li.product.card a.button.add.added{background:var(--teal);color:#fff}
.add.added .plus{opacity:0;transform:scale(.3) rotate(-90deg)}
.add.added .ok{opacity:1;transform:scale(1)}
.woocommerce ul.products li.product.card a.added_to_cart{display:none}
.woocommerce ul.products li.product.card a.button:not(.add){min-height:36px;padding:0 12px;font-size:13px;margin:0}
.fly{position:fixed;z-index:80;width:14px;height:14px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--glow);pointer-events:none}

/* ---------- single product ---------- */
.woocommerce div.product{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start}
.woocommerce div.product>*{grid-column:1/-1;min-width:0}
.woocommerce div.product div.images,.woocommerce div.product div.summary{float:none;width:auto;margin:0}
.woocommerce div.product div.images{grid-column:1;position:relative;background:var(--plate);border:1px solid var(--line);border-radius:26px;overflow:hidden}
.woocommerce div.product div.images::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(circle at var(--px,50%) var(--py,45%),var(--glow-soft),transparent 55%)}
.woocommerce div.product div.images .pd-art{aspect-ratio:1;display:grid;place-items:center}
.woocommerce div.product div.images .pd-art .fn-art{width:100%;height:100%}
.woocommerce-product-gallery:has(.pd-art) .woocommerce-product-gallery__trigger{display:none}
.woocommerce div.product div.summary{grid-column:2;display:grid;gap:14px}
/* Smaller than the running sum under the button: this is the price of one
   metre or one piece, not what the basket will cost. */
.woocommerce div.product p.price,.woocommerce div.product span.price{color:var(--ink-2);font-size:20px;font-weight:800;margin:0}
.woocommerce div.product .woocommerce-product-details__short-description{color:var(--ink-2)}
.woocommerce div.product form.cart{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0}
.woocommerce div.product form.cart .button{min-height:48px}
/* a variable product's button row sits one level deeper; give it the same wrapping row */
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
/* The sum is what the customer actually pays, so it is the big number on the
   page and the per-metre price above it is the small one (owner, 1405/07/01). */
.fn-line-total{flex-basis:100%;margin:6px 0 0;font-weight:900;font-size:26px;line-height:1.3;color:var(--ink);display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.fn-line-total b{font-size:1em}
.fn-line-label{font-size:13px;font-weight:600;color:var(--ink-3)}
.fn-line-cur{font-size:15px;font-weight:700}
.fn-line-split{flex-basis:100%;font-weight:500;color:var(--ok);font-size:13px}
/* carton box: sits in the add-to-cart form, above the quantity */
.fn-carton{flex-basis:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 14px;border:1.5px dashed var(--line);border-radius:14px;background:var(--plate);transition:border-color .25s,background .25s}
.fn-carton.on{border-style:solid;border-color:var(--ok);background:var(--ok-soft)}
.fn-carton-txt{display:grid;gap:2px;font-size:14px;color:var(--ink-2)}
.fn-carton-txt>b{color:var(--ink);font-size:15px}
.fn-carton-txt b.num{color:var(--ink)}
.fn-carton-off{display:inline-block;margin-inline-start:6px;padding:1px 8px;border-radius:999px;background:var(--lapis);color:var(--brass);font-size:12px;font-weight:800}
.fn-carton s{color:var(--ink-3)}
.quantity.qty,.woocommerce .quantity.qty{display:inline-flex;align-items:center;border:1.5px solid var(--line);border-radius:12px;background:var(--plate);overflow:hidden;margin:0}
.woocommerce .quantity .qty,.woocommerce .quantity input.qty{width:64px;height:44px;border:0;background:transparent;text-align:center;font-weight:800;-moz-appearance:textfield;color:var(--ink)}
.woocommerce .quantity input.qty::-webkit-inner-spin-button,.woocommerce .quantity input.qty::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.qty-btn{width:44px;height:44px;border:0;background:transparent;cursor:pointer;font-size:20px;color:var(--ink);transition:background .2s}
.qty-btn:hover{background:var(--plate-2)}
.qty-btn:active{background:var(--line)}
input.qty.tick{animation:tick .3s var(--spring)}
@keyframes tick{0%{transform:translateY(-6px);opacity:.3}100%{transform:none;opacity:1}}
.woocommerce div.product .woocommerce-tabs{margin-top:8px}
.woocommerce div.product .woocommerce-tabs ul.tabs{padding:0;margin:0 0 14px;display:flex;gap:6px;border:0;overflow-x:auto}
.woocommerce div.product .woocommerce-tabs ul.tabs::before,.woocommerce div.product .woocommerce-tabs ul.tabs li::before,.woocommerce div.product .woocommerce-tabs ul.tabs li::after{display:none}
.woocommerce div.product .woocommerce-tabs ul.tabs li{border:1.5px solid var(--line);background:var(--plate);border-radius:999px;margin:0;padding:0}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{padding:6px 16px;color:var(--ink-2);font-weight:700}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{background:var(--lapis);border-color:var(--lapis)}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--brass)}
.woocommerce div.product .woocommerce-tabs .panel{border-radius:20px;margin:0}
.woocommerce table.shop_attributes{border:0;border-collapse:collapse}
.woocommerce table.shop_attributes th,.woocommerce table.shop_attributes td{border:0;border-bottom:1px dashed var(--line);background:none;padding:9px 0;font-style:normal;text-align:right}
.woocommerce table.shop_attributes th{color:var(--ink-2);font-weight:500;width:40%}
.related>h2,.upsells>h2{font-weight:900;font-size:24px;margin-bottom:16px}
@media (max-width:860px){.woocommerce div.product{grid-template-columns:1fr}.woocommerce div.product div.images,.woocommerce div.product div.summary{grid-column:1}}

/* ---------- forms ---------- */
.woocommerce form .form-row{margin:0 0 12px;padding:0}
.woocommerce form .form-row label{font-size:14px;font-weight:500;margin-bottom:4px;display:block}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,.woocommerce-page form .form-row input.input-text,.field input,.field select,.field textarea{height:48px;border-radius:12px;border:1.5px solid var(--line);background:var(--plate);color:var(--ink);padding-inline:14px;width:100%;min-width:0;transition:border-color .2s,box-shadow .2s}
.woocommerce form .form-row textarea{height:auto;min-height:88px;padding-block:10px}
.woocommerce form .form-row input.input-text:focus,.woocommerce form .form-row textarea:focus,.field input:focus{border-color:var(--teal);box-shadow:0 0 0 4px var(--teal-soft);outline:none}
.woocommerce form .form-row.woocommerce-invalid input.input-text,.field.err input{border-color:var(--danger);animation:shake .35s}
@keyframes shake{25%{transform:translateX(4px)}75%{transform:translateX(-4px)}}
.woocommerce form .form-row .required{color:var(--danger)}
.woocommerce form .form-row .description{font-size:13px;color:var(--ink-3)}
.woocommerce form .form-row-first,.woocommerce form .form-row-last{width:calc(50% - 6px)}
@media (max-width:560px){.woocommerce form .form-row-first,.woocommerce form .form-row-last{width:100%;float:none}}
.woocommerce form .form-row .select2-container .select2-selection--single{height:48px;border-radius:12px;border:1.5px solid var(--line);background:var(--plate)}
.woocommerce form .form-row .select2-container .select2-selection--single .select2-selection__rendered{line-height:46px;color:var(--ink);padding-inline:14px}
.woocommerce form .form-row .select2-container .select2-selection--single .select2-selection__arrow{height:46px}
.field{display:grid;gap:6px}
.field label,.field .lbl{font-size:14px;font-weight:500}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:520px){.row2{grid-template-columns:1fr}}
.seg{position:relative;display:flex;border:1.5px solid var(--line);border-radius:12px;padding:3px;gap:3px;background:var(--plate-2)}
.seg label{flex:1;position:relative;cursor:pointer}
.seg input{position:absolute;opacity:0;inset:0}
.seg span{display:grid;place-items:center;min-height:40px;padding:0 10px;border-radius:9px;font-size:14px;font-weight:500;text-align:center;transition:background .25s,color .25s,box-shadow .25s}
.seg input:checked+span{background:var(--plate);color:var(--ink);font-weight:800;box-shadow:var(--shadow)}
.seg input:focus-visible+span{outline:3px solid var(--teal);outline-offset:-3px}

/* ---------- cart & checkout ---------- */
.woocommerce table.shop_table{border:1px solid var(--line);border-radius:20px;background:var(--plate);border-collapse:separate;overflow:hidden;margin:0 0 20px}
.woocommerce table.shop_table th{font-weight:700;color:var(--ink-2);background:var(--plate-2);padding:12px 14px}
.woocommerce table.shop_table td{border-top:1px solid var(--line);padding:14px}
.woocommerce table.shop_table td.product-thumbnail .fn-art,.woocommerce table.shop_table td.product-thumbnail img{width:72px;height:72px;border-radius:12px;background:var(--plate-2);object-fit:cover}
.woocommerce table.shop_table td.product-name a{color:var(--ink);font-weight:700}
.fn-carton-note{color:var(--ok)}
.fn-carton-hint{color:var(--warn)}
.woocommerce a.remove{color:var(--danger)!important;border-radius:50%}
.woocommerce a.remove:hover{background:var(--danger)!important;color:#fff!important}
.woocommerce .cart-collaterals .cart_totals,.woocommerce-page .cart-collaterals .cart_totals{float:none;width:100%;max-width:420px;margin-inline-start:auto}
.woocommerce .cart-collaterals .cart_totals h2{font-size:18px;font-weight:900;margin-bottom:12px}
.woocommerce .coupon .input-text{height:44px!important;border-radius:12px!important;border:1.5px solid var(--line)!important;background:var(--plate);width:160px!important}
.woocommerce form.checkout{display:grid;grid-template-columns:1fr 390px;gap:24px;align-items:start}
.woocommerce form.checkout>*{grid-column:1;min-width:0}
.woocommerce form.checkout #order_review_heading,.woocommerce form.checkout #order_review{grid-column:2}
.woocommerce form.checkout #customer_details{grid-row:1/span 3}
.woocommerce form.checkout #order_review_heading{margin:0;font-size:18px;font-weight:900}
.woocommerce form.checkout #order_review{position:sticky;top:130px}
.woocommerce .col2-set .col-1,.woocommerce .col2-set .col-2{float:none;width:100%}
.woocommerce .col2-set{display:grid;gap:18px}
.woocommerce .col2-set>div{background:var(--plate);border:1px solid var(--line);border-radius:20px;padding:22px}
.woocommerce form.checkout h3{font-size:18px;font-weight:900;margin-bottom:12px}
#add_payment_method #payment,.woocommerce-checkout #payment{background:var(--plate);border:1px solid var(--line);border-radius:20px}
.woocommerce-checkout #payment ul.payment_methods{border-bottom:1px solid var(--line);padding:16px}
.woocommerce-checkout #payment div.payment_box{background:var(--plate-2);color:var(--ink-2);border-radius:12px}
.woocommerce-checkout #payment div.payment_box::before{display:none}
.woocommerce-checkout #payment #place_order{width:100%;min-height:54px;font-size:17px}
.fn-invoice-toggle{padding-top:8px!important;border-top:1px dashed var(--line)}
@media (max-width:900px){.woocommerce form.checkout{grid-template-columns:1fr}.woocommerce form.checkout #order_review_heading,.woocommerce form.checkout #order_review,.woocommerce form.checkout #customer_details{grid-column:1;grid-row:auto}.woocommerce form.checkout #order_review{position:static}}
.woocommerce-order .woocommerce-thankyou-order-received{font-size:20px;font-weight:900;background:var(--teal-soft);border-radius:16px;padding:16px 20px}
.woocommerce ul.order_details{display:flex;flex-wrap:wrap;gap:10px;padding:0}
.woocommerce ul.order_details li{border:1px solid var(--line)!important;border-radius:14px;background:var(--plate);padding:10px 14px;margin:0!important;float:none}

/* ---------- my account ---------- */
.woocommerce-account .woocommerce{display:grid;grid-template-columns:220px 1fr;gap:24px;align-items:start}
.woocommerce-account .woocommerce>*:not(.woocommerce-MyAccount-navigation):not(.woocommerce-MyAccount-content){grid-column:1/-1}
.woocommerce-account .woocommerce-MyAccount-navigation,.woocommerce-account .woocommerce-MyAccount-content{float:none;width:auto}
.woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:8px;background:var(--plate);border:1px solid var(--line);border-radius:20px;display:grid;gap:2px}
.woocommerce-MyAccount-navigation a{display:block;padding:9px 12px;border-radius:12px;color:var(--ink-2);font-weight:500}
.woocommerce-MyAccount-navigation a:hover{background:var(--plate-2);text-decoration:none}
.woocommerce-MyAccount-navigation .is-active a{background:var(--lapis);color:var(--brass)}
/* Signed out, the page is two cards — «ورود» and «عضویت» — side by side on a
   desktop and stacked on a phone. WooCommerce wraps each one in a column and
   then in a form, which used to give a box inside a box; only the form keeps
   its border now, and the heading sits inside it. */
.woocommerce-account:not(.logged-in) .woocommerce{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));max-width:860px;margin-inline:auto;gap:18px}
.woocommerce-account:not(.logged-in) .woocommerce .u-columns{display:contents}
.woocommerce-account:not(.logged-in) .woocommerce .u-column1,.woocommerce-account:not(.logged-in) .woocommerce .u-column2{float:none!important;width:auto!important;margin:0!important;display:flex;flex-direction:column;gap:10px}
.woocommerce-account:not(.logged-in) .woocommerce h2{font-size:20px;font-weight:800;margin:0}
.woocommerce form.login,.woocommerce form.register{border:1px solid var(--line)!important;border-radius:20px!important;background:var(--plate);padding:20px!important;margin:0!important;flex:1}
.woocommerce form.login p,.woocommerce form.register p{margin:0 0 12px}
.woocommerce form.login .form-row,.woocommerce form.register .form-row{padding:0}
/* «مرا به خاطر بسپار» — box first, then its words, and the button on its own line. */
.woocommerce form.login .woocommerce-form-login__rememberme{display:flex;align-items:center;gap:8px;margin:0 0 14px}
.woocommerce form.login .woocommerce-form-login__rememberme input{margin:0}
.woocommerce form.login button,.woocommerce form.register button{width:100%;min-height:46px}
.woocommerce-privacy-policy-text{font-size:12px;color:var(--ink-3);line-height:1.9}
/* why an account is worth it, above the checkout's «ساختن حساب» box */
.fn-account-why{margin:0 0 10px;padding:12px 14px;border-radius:14px;background:var(--plate-2);color:var(--ink-2);font-size:13px;line-height:1.9}
.woocommerce-LostPassword{margin:0}
@media (max-width:760px){.woocommerce-account .woocommerce{grid-template-columns:1fr}}

/* ---------- calculator ---------- */
.calc{display:grid;grid-template-columns:1fr 1fr;background:var(--plate);border:1px solid var(--line);border-radius:24px;overflow:hidden}
.calc form{padding:clamp(20px,3vw,32px);display:grid;gap:14px;align-content:start;margin:0}
.calc-out{background:var(--plate-2);padding:clamp(20px,3vw,32px);display:grid;gap:14px;align-content:start}
.calc-out .big{font-weight:900;font-size:clamp(44px,6vw,60px);line-height:1;color:var(--accent-ink)}
.calc-out .big small{font-size:16px;color:var(--ink-2);font-weight:500;margin-inline-start:6px}
.calc-row{display:flex;gap:18px;align-items:center}
.calc-row svg{width:116px;height:116px;flex:none}
.cs-core{transition:r .45s var(--spring)}
.meter{display:grid;gap:4px;font-size:14px}
.meter-head{display:flex;justify-content:space-between;gap:8px}
.meter-bar{height:8px;border-radius:4px;background:var(--line);overflow:hidden}
.meter-bar i{display:block;height:100%;background:var(--teal);border-radius:4px;transition:width .5s var(--ease)}
.specs{width:100%;border-collapse:collapse;font-size:14px}
.specs th,.specs td{padding:9px 0;border-bottom:1px dashed var(--line);text-align:right;vertical-align:top}
.specs th{font-weight:500;color:var(--ink-2);width:42%}
.calc-groups{display:grid;gap:10px}
.calc-group{display:grid;gap:5px}
.calc-group-t{font-size:12.5px;color:var(--ink-3)}
.calc-group .chip small{margin-inline-start:6px;color:var(--ink-3);font-size:11.5px}
.calc-group .chip[aria-pressed="true"] small{color:rgba(229,178,90,.75)}
.calc-why{margin:0;font-size:14px;color:var(--ink-2);line-height:1.9}
.calc-buy{display:grid;gap:10px;padding:16px;border-radius:16px;background:var(--plate);border:1px solid var(--line)}
.calc-buy-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap}
.calc-buy-head b{font-size:16px}
.calc-lines{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.calc-lines li{display:flex;justify-content:space-between;align-items:start;gap:12px;padding-bottom:8px;border-bottom:1px dashed var(--line);font-size:14px}
.calc-lines li>span{display:grid;gap:2px}
.calc-lines a{font-weight:700;color:var(--ink)}
.calc-lines small{font-size:12.5px;color:var(--ink-3)}
.calc-lines li>b{white-space:nowrap}
.calc-lines li.missing{color:var(--ink-3)}
.calc-total{display:flex;justify-content:space-between;align-items:baseline;font-size:15px}
.calc-total b{font-size:20px;font-weight:900}
#csAdd.done{background:var(--ok);color:#fff;box-shadow:none}
@media (max-width:820px){.calc{grid-template-columns:1fr}}

/* ---------- footer, toast ---------- */
/* ---------- calculator band above the footer ---------- */
.calc-cta{background:var(--lapis);color:var(--ivory)}
.calc-cta-in{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:22px;flex-wrap:wrap}
.calc-cta h3{font-size:20px;font-weight:800;margin:0 0 4px;color:var(--ivory)}
.calc-cta .muted{color:#B6BCD9;margin:0;max-width:62ch;font-size:14px}
.calc-cta .btn{flex:none}
@media (max-width:640px){.calc-cta-in{padding-block:18px}.calc-cta h3{font-size:18px}.calc-cta .btn{width:100%}}

/* ---------- basket and checkout: the sum is the big number ---------- */
.woocommerce table.cart td.product-subtotal,.woocommerce-cart .cart-collaterals .order-total td{font-size:19px;font-weight:900;color:var(--ink)}
.woocommerce table.cart td.product-price{font-size:13px;color:var(--ink-2);font-weight:600}
.woocommerce-checkout .order-total td,.woocommerce-checkout .order-total th{font-size:19px;font-weight:900}

.site-footer{background:var(--plate);border-top:1px solid var(--line);padding-block:36px 20px;font-size:14px}
.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:24px}
.foot h4{margin:0 0 8px;font-size:14px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.foot a{color:var(--ink-2)}
.foot .logo{margin-bottom:10px}
.foot-slogan{font-family:var(--nasta);font-size:20px;line-height:2.2;color:var(--accent-ink);margin:0}
.foot-legal{margin-top:24px;padding-top:14px;border-top:1px solid var(--line);font-size:13px}
.enamad{margin-top:12px}
.enamad img{max-width:110px;height:auto;border-radius:8px;background:#fff;padding:4px}
/* On the landing page the badge sits under the facts line, smaller. */
.l-enamad{margin-top:14px}
.l-enamad img{max-width:88px}
@media (max-width:760px){.foot{grid-template-columns:1fr}}
.toast{position:fixed;bottom:calc(20px + env(safe-area-inset-bottom,0px));left:50%;transform:translate(-50%,30px) scale(.96);background:var(--lapis);color:var(--ivory);padding:12px 18px;border-radius:14px;font-weight:500;opacity:0;pointer-events:none;transition:opacity .25s,transform .35s var(--spring);z-index:60;max-width:calc(100% - 32px);box-shadow:0 12px 30px rgba(11,20,51,.35)}
.toast.show{opacity:1;transform:translate(-50%,0) scale(1);pointer-events:auto}
.toast a{color:var(--brass);font-weight:700;margin-inline-start:6px}
.post-list{display:grid;gap:14px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;transition-delay:0ms!important;animation:none!important}
}

/* ================================================================== *
 * Phone (1405/07/01)
 *
 * Last in the file on purpose: these override the desktop rules above
 * instead of being overridden by them.
 * ================================================================== */
@media (max-width:640px){
  /* Two to a row: one card per screen means scrolling past six products
     to see what a category holds. */
  .woocommerce ul.products,.woocommerce-page ul.products{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .woocommerce ul.products li.product.card{border-radius:16px}
  .woocommerce ul.products li.product.card h3{font-size:13px;line-height:1.55}
  .woocommerce ul.products li.product.card .price{font-size:15px}
  .card-art{aspect-ratio:1/1}
  .woocommerce ul.products li.product.card .button,.woocommerce ul.products li.product.card a.button{min-height:40px;font-size:13px;padding-inline:10px}
  .woocommerce ul.products li.product.card .stock{font-size:11px}

  /* Reading width and rhythm */
  .wrap{padding-inline:16px}
  h1,.woocommerce div.product .product_title{font-size:24px}
  h2{font-size:19px}
  body{font-size:15px}

  /* Product page: picture, then the buying part, without a long scroll */
  .woocommerce div.product{gap:16px}
  .woocommerce div.product form.cart{gap:10px}
  .fn-line-total{font-size:23px}
  .woocommerce div.product p.price,.woocommerce div.product span.price{font-size:18px}

  /* Anything with a table scrolls sideways instead of squeezing the page */
  .woocommerce table.shop_table,.woocommerce table.shop_attributes,.entry-content table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}

  /* Fingers, not mice */
  .icon-btn,.woocommerce .button,.btn{min-height:44px}
  .quantity input.qty{min-height:44px}
}