/* ==========================================================================
   THEME TOKENS (dark = the site as designed, light = the same brand on a cream page). One stylesheet, linked on every page right after chrome.css / first.css
   (sync-chrome.js adds the link). <html data-theme="dark|light"> is set before first paint by boot.js / specialty-boot.js (the visitor's choice in localStorage
   `dastan-theme`, else light) and changed by the toggle in the menu (theme.js). No attribute = dark.
   Only the surface / ink / line colours of the PAGE are tokens; the brand colours (--cream --green --coral --mint) and the colours of cards, bands and tiles stay as they are.
   Every page's own stylesheet ends with a "light theme" section for the few rules that need more than a token.
   Every public page follows the theme (cart, checkout, order, login, profile, cooperation, wholesale and the 404/500 pages too); only the admin panel has its own look.
   ========================================================================== */
:root{
  --th-bg:#000;                 /* the page ground */
  --th-fg:#fff0e1;              /* text and thin lines on the page ground */
  --th-fg-rgb:255 240 225;      /* the same ink for soft lines and secondary text: rgb(var(--th-fg-rgb) / .28) */
  --th-hl:#e0a39e;              /* accent text and hairlines on the page ground (coral on black, green on cream) */
  --th-hl2:#6cb28d;             /* second accent text (mint on black, green on cream) */
  --th-hdr:#fff0e1;             /* header logo and icons on the page ground */
  --th-ring:#fff0e1;            /* focus rings on the page ground */
  --th-inv-bg:#fff0e1;          /* the filled state of an outlined control (hover) */
  --th-inv-fg:#000;
}
html[data-theme=light]{
  --th-bg:#fff0e1;
  --th-fg:#000;
  --th-fg-rgb:0 0 0;
  --th-hl:#285746;
  --th-hl2:#285746;
  --th-hdr:#000;
  --th-ring:#000;
  --th-inv-bg:#000;
  --th-inv-fg:#fff0e1;
  color-scheme:light;
}

/* LIGHT THEME only: no card is cream (a cream card on the cream page gets lost): coral, or mint on the home origins. The dark theme keeps its cream cards. */
html[data-theme=light] :is(.bc-cream,.sp-cream,.ax-cream,.rc-cream,.hb-cream){--c:var(--coral);--ink:#000;--focus:#000;color:#000;box-shadow:none!important}
html[data-theme=light] .ho-cream{--c:var(--mint);color:#000}
html[data-theme=light] .ho-cream a{box-shadow:none!important}
html[data-theme=light] .sp-g-cream .sp-gh:before{background:var(--coral)}

/* the language button in the header (left, next to the menu button): shows the OTHER language's glyph (FA on an English page, EN on a Persian one); the light / dark switch lives in the menu only */
.fh .lang-link .lg-en{display:none}
:is(html[lang=fa],html[data-lang=fa]) .fh .lang-link .lg-en{display:block}
:is(html[lang=fa],html[data-lang=fa]) .fh .lang-link .lg-fa{display:none}
.fh .lang-link>.ic{fill:currentColor;width:auto;height:15px}
@media not all and (min-width:901px) and (min-aspect-ratio:4/5){.fh .lang-link{left:42px}}
@media (min-width:901px) and (min-aspect-ratio:4/5){.fh .lang-link{left:calc(var(--pad) - (44px - var(--ig)) / 2 + 48px)}.fh .lang-link>.ic{height:calc(var(--ig) * .7)}}

/* phones: the right-hand icons are a little smaller too (the header is lighter); the 44 px touch boxes and their spacing stay */
@media not all and (min-width:901px) and (min-aspect-ratio:4/5){.fh :is(.home-link,.acct-link)>.ic{height:19px}.fh .list-link>.ic{height:38px}}

/* phones: the three right-hand icons sit closer together (40 px touch boxes, 40 px apart) */
@media not all and (min-width:901px) and (min-aspect-ratio:4/5){.fh :is(.list-link,.acct-link,.home-link){width:40px}.fh .list-link{right:8px}.fh .acct-link{right:48px}.fh .home-link{right:88px}}

/* ---------- discounted price (blends): the LIST price struck through (small, 70% opacity), the price the customer pays, and a short outlined label ('12% OFF' / '۱۲٪ تخفیف').
   Built by catalog.js (fillPrice), shop.js, search.js and the order page; takes the colour and font of the line it sits in. A product without a discount has none of these. ---------- */
.pr-was{font-size:.8em;opacity:.7;text-decoration:line-through;text-decoration-thickness:1px;white-space:nowrap}
.pr-now{white-space:nowrap}
.pr-off{display:inline-block;margin-inline-start:.15em;padding:0 .4em;border:1px solid currentColor;font-size:.68em;line-height:1.5;letter-spacing:.04em;white-space:nowrap;vertical-align:.12em}
html[lang=fa] .pr-off{letter-spacing:0}

/* Persian (rtl): the header mirrors: menu and language buttons on the right, house / profile / bag on the left */
@media not all and (min-width:901px) and (min-aspect-ratio:4/5){
  html[dir=rtl] .fh .menu-button{left:auto;right:8px}
  html[dir=rtl] .fh .lang-link{left:auto;right:42px}
  html[dir=rtl] .fh .list-link{right:auto;left:8px}
  html[dir=rtl] .fh .acct-link{right:auto;left:48px}
  html[dir=rtl] .fh .home-link{right:auto;left:88px}
  html[dir=rtl] .fh .list-count{right:auto;left:-1px}
}
@media (min-width:901px) and (min-aspect-ratio:4/5){
  html[dir=rtl] .fh .menu-button{left:auto;right:calc(var(--pad) - (44px - var(--ig)) / 2)}
  html[dir=rtl] .fh .lang-link{left:auto;right:calc(var(--pad) - (44px - var(--ig)) / 2 + 48px)}
  html[dir=rtl] .fh .list-link{right:auto;left:calc(var(--pad) - (44px - .897 * var(--ig)) / 2)}
  html[dir=rtl] .fh .acct-link{right:auto;left:calc(var(--pad) - (44px - .897 * var(--ig)) / 2 + 48px)}
  html[dir=rtl] .fh .home-link{right:auto;left:calc(var(--pad) - (44px - .897 * var(--ig)) / 2 + 96px)}
  html[dir=rtl] .fh .list-count{right:auto;left:-2px}
}

/* Persian pages stay invisible until the scripts have translated them (boot.js / specialty-boot.js add and remove the class): no English flash */
html.fa-wait body{opacity:0}

/* dark theme: the header icons are cream; over a cream section behind the glass they keep a soft dark halo so they stay readable */
html[data-theme=dark] .fh .hd{filter:drop-shadow(0 0 5px rgb(0 0 0 / .4))}

/* ---------- icon scale (one system) ----------------------------------------------------------------------------------------------------------
   XS 10x12 solid arrowheads and triangles (.ls-ar .hs-ar .pp-tri .co-tri), S 16 px label icons (product facts), M header controls (--hi below) and 20 px menu / search / footer line icons,
   L 36 px back-to-top ring. The five header icons (menu, language, home, profile, bag) share ONE visual size (--hi, outer size incl. the stroke) and ONE stroke (1.7 px, not scaled);
   each svg box is derived from how much of its own viewBox the drawing fills. The 44 px hit boxes and their places stay; only the glyphs get lighter. */
.fh{--hi:18px}
@media (min-width:600px){.fh{--hi:20px}}
@media (min-width:901px) and (min-aspect-ratio:4/5){.fh{--hi:21px}}
.fh .hd .ic path[stroke]{vector-effect:non-scaling-stroke;stroke-width:1.7px}
.fh .hd.menu-button>.ic{width:calc(var(--hi) / .529);height:auto}
.fh .hd.home-link>.ic{width:auto;height:calc((var(--hi) - 1.7px) / .905)}
.fh .hd.acct-link>.ic{width:auto;height:calc((var(--hi) - 1.7px) / .953)}
.fh .hd.list-link>.ic{width:auto;height:calc((var(--hi) - 1.7px) / .474)}
.fh .hd.lang-link>.ic{width:auto;height:calc(var(--hi) * .72)}
@media (min-width:901px) and (min-aspect-ratio:4/5){
  .fh .menu-button{left:calc(var(--pad) - (44px - var(--hi)) / 2)}
  .fh .lang-link{left:calc(var(--pad) - (44px - var(--hi)) / 2 + 48px)}
  .fh .list-link{right:calc(var(--pad) - (44px - var(--hi)) / 2)}
  .fh .acct-link{right:calc(var(--pad) - (44px - var(--hi)) / 2 + 48px)}
  .fh .home-link{right:calc(var(--pad) - (44px - var(--hi)) / 2 + 96px)}
  html[dir=rtl] .fh .menu-button{left:auto;right:calc(var(--pad) - (44px - var(--hi)) / 2)}
  html[dir=rtl] .fh .lang-link{left:auto;right:calc(var(--pad) - (44px - var(--hi)) / 2 + 48px)}
  html[dir=rtl] .fh .list-link{right:auto;left:calc(var(--pad) - (44px - var(--hi)) / 2)}
  html[dir=rtl] .fh .acct-link{right:auto;left:calc(var(--pad) - (44px - var(--hi)) / 2 + 48px)}
  html[dir=rtl] .fh .home-link{right:auto;left:calc(var(--pad) - (44px - var(--hi)) / 2 + 96px)}
}
/* the close cross (menu, search) has the hamburger's width and weight */
.fh .hd.menu-button:before,.fh .hd.menu-button:after{width:calc(var(--hi) * 1.1);height:1.7px;margin:-.85px 0 0 calc(var(--hi) * -.55)}