/* ==========================================================================
   Shared site chrome: the HEADER and the full-screen MENU, one copy for every page except the home page itself.
   It reproduces the home page (index.html + first.css sections 6 and 7) value for value, so every header and menu of the site looks like the home's:
   - header: the vector logo, hamburger, search, account and bag icons are placed on the home's 1082 px phone composition (1 design px = --u = 100vw / 1082);
     on windows wider than 900 px (and at least 4:5) the home's clamp() desktop header takes over (logo --lw, icons --ig, row --hh, side padding --pad).
   - colours: cream logo and icons on the page's own (black) background, i.e. the home's menu-open header colours. A page can tint the header with --hd-fg
     (the product pages do, per blend) and paint a bar behind it with .ph-bar.
   - menu: see menu.css (the sheet, its rows, preview and bottom bar; the same file serves the home page).
   The markup is generated into every page by scripts/sync-chrome.js (node scripts/sync-chrome.js) from one template; the behaviour is chrome.js
   (blend + product use home.js, which has the same behaviour). Page specific rules (where the header sits, the BLEND | SPECIALTY switch) stay in the page's own css.
   ========================================================================== */
@font-face{font-family:Nian;src:url('assets/fonts/nian-regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Nian;src:url('assets/fonts/meem-regular.woff2') format('woff2');font-weight:400;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200D,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:Nian;src:url('assets/fonts/nian-bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Nian;src:url('assets/fonts/meem-bold.woff2') format('woff2');font-weight:700;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200D,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:Nian;src:url('assets/fonts/nian-black.woff2') format('woff2');font-weight:900;font-display:swap}
@font-face{font-family:Nian;src:url('assets/fonts/meem-black.woff2') format('woff2');font-weight:900;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200D,U+FB50-FDFF,U+FE70-FEFF}
/* Persian pages (html[lang=fa] sets --nf): Nian's Latin letters and digits drawn 122% large (Latin ranges only, no space: the Nian files also hold Arabic glyphs that must keep coming from Meem, and Persian word spacing stays as it was) to match Meem's Persian glyphs; 700 uses the Black cut because Nian is lighter than Meem. Persian glyphs fall through to the Nian faces above. */
@font-face{font-family:NianFa;src:url('assets/fonts/nian-regular.woff2') format('woff2');font-weight:400;font-display:swap;size-adjust:122%;ascent-override:82%;descent-override:49%;line-gap-override:0%;unicode-range:U+0000-001F,U+0021-009F,U+00A1-05FF,U+2000-200B,U+200E-2BFF}
@font-face{font-family:NianFa;src:url('assets/fonts/nian-black.woff2') format('woff2');font-weight:700 900;font-display:swap;size-adjust:122%;ascent-override:82%;descent-override:49%;line-gap-override:0%;unicode-range:U+0000-001F,U+0021-009F,U+00A1-05FF,U+2000-200B,U+200E-2BFF}
html[lang=fa]{--nf:NianFa}
@font-face{font-family:Minercraftory;src:url('assets/fonts/minercraftory.woff2') format('woff2');font-weight:400;font-display:swap}

/* header ------------------------------------------------------------------- */
:root{--hdr:calc(141.6px * 100vw / 1082)} /* the header row height, for pages that reserve room for it */
.fh,.menu-panel{--cream:#fff0e1;--green:#285746;--coral:#e0a39e;--mint:#6cb28d;--mc:Minercraftory,"Arial Narrow",Arial,sans-serif;--nian:var(--nf,Nian),Nian,Tahoma,Arial,sans-serif}
.fh,.fh *,.menu-panel,.menu-panel *{box-sizing:border-box}
.fh{--u:calc(100vw / 1082);--hb:141.6;--fhh:calc(var(--hb) * var(--u));position:sticky;left:0;top:0;width:100%;height:var(--fhh);z-index:30;direction:ltr;pointer-events:none;color:var(--th-hdr);font-size:16px;line-height:1.5}
.fh .hd{position:absolute;display:block;left:calc(var(--x) * var(--u));top:calc(var(--y) * var(--u));width:calc(var(--w) * var(--u));height:calc(var(--h) * var(--u));color:var(--hd-fg,var(--th-hdr));padding:0;margin:0;border:0;background:none;font:inherit;cursor:pointer;text-decoration:none;pointer-events:auto;-webkit-tap-highlight-color:transparent}
.fh .hd>.ic{display:block;width:100%;height:100%;overflow:visible}
.fh .hd:after{content:"";position:absolute;inset:min(-6px,calc((100% - 44px) / 2))}
.fh .hd.brand:after{inset:min(-10px,calc((100% - 44px) / 2)) -6px}
.fh .hd:focus-visible{outline:2px solid var(--th-ring);outline-offset:3px}
.fh .acct-link .in-dot{display:none;fill:var(--mint)} /* signed in: a small flat mint square on the profile icon (account-nav.js / shell.js set .is-in) */
.fh .acct-link.is-in .in-dot{display:inline}
.fh .list-count{position:absolute;right:calc(-7.2 * var(--u));top:calc(-2.4 * var(--u));width:calc(40.4 * var(--u));height:calc(40.4 * var(--u));min-width:19px;min-height:19px;border-radius:50%;background:var(--bd-bg,var(--coral));color:var(--bd-fg,#000);
  font:900 calc(34 * var(--u))/1 var(--nian);display:grid;place-items:center;pointer-events:none}
.fh [hidden]{display:none!important}
.fh .ph-bar{position:absolute;left:0;top:0;width:100%;height:100%;background:var(--hd-bg,transparent);pointer-events:none}
.fh.ph{--hb:230.2} /* a header with a colour bar (product pages): the bar is centred on the icons on phones */
.menu-open .fh{z-index:40}
.menu-open .fh .hd:not(.is-in){color:var(--cream)}
.menu-open .fh .ph-bar{opacity:0}
.menu-open .mode-switch,.menu-open .sp-switch{visibility:hidden}
body.menu-open{overflow:hidden}

/* phone header (everything that is not the desktop header below): three elements, symmetrical: hamburger (left) and bag (right), both 24 px (the hamburger 24 wide, the bag 24 high)
   with 2 px strokes, glyph edges 20 px from the screen edges, 44 px hit boxes; the logo 26 px high, centred on the screen; the content row is centred at y = 32 px. Only the controls
   are placed; the header box (and so every page's content offset) is unchanged. */
@media not all and (min-width:901px) and (min-aspect-ratio:4/5){
  .fh .hd{left:auto;top:10px;width:44px;height:44px;display:flex;align-items:center;justify-content:center}
  .fh.ph .hd{top:calc((var(--fhh) - 44px) / 2)}
  .fh .hd>.ic{flex:none;width:calc(var(--ig) * var(--iw));height:calc(var(--ig) * var(--ih))}
  .fh .hd:after{inset:0}
  .fh .hd .ic path[stroke]{vector-effect:non-scaling-stroke;stroke-width:2px}
  .fh :is(.menu-button,.lang-link,.list-link,.home-link,.acct-link){--ig:20px}
  .fh .menu-button{left:8px}
  .fh .list-link{right:6.97px}
  .fh .acct-link{right:50.97px}
  .fh .home-link{right:94.97px}
  .fh .hd.brand{display:block;left:calc(50% - 45px);top:20.75px;width:90px;height:22.5px}
  .fh.ph .hd.brand{top:calc((var(--fhh) - 22.5px) / 2)}
  .fh .hd.brand>.ic{width:100%;height:100%}
  .fh .hd.brand:after{inset:-11px -6px}
  .fh .list-count{right:-1px;top:1px;width:16px;height:16px;min-width:0;min-height:0;font-size:10.5px}
}
/* narrow phones: three 44 px icons on the right must not touch the centred logo (it is 90 px, 135-225 px on a 360 px screen) */
@media (max-width:379px){
  .fh .list-link{right:1px}
  .fh .acct-link{right:45px}
  .fh .home-link{right:89px}
  .fh .hd.brand:after{inset:-11px 0}
}
@media (max-width:357px){
  .fh .hd.brand{left:calc(50% - 46px);width:68px;height:17px;top:23px}
  .fh.ph .hd.brand{top:calc((var(--fhh) - 17px) / 2)}
  .fh .hd.brand:after{inset:-13px 0}
  .fh .list-link{right:0}
  .fh .acct-link{right:44px}
  .fh .home-link{right:88px}
}
@media (min-width:901px) and (min-aspect-ratio:4/5){
  :root{--hdr:clamp(86.4px,7.2vw,105.6px)}
  .fh{--hh:clamp(86.4px,7.2vw,105.6px);--pad:clamp(33.6px,3.36vw,57.6px);--lw:clamp(156px,12.6vw,192px);--ig:clamp(28.8px,2.28vw,33.6px);--fhh:var(--hh)}
  .fh .hd{left:auto;top:calc((var(--hh) - 44px) / 2);width:44px;height:44px;display:flex;align-items:center;justify-content:center}
  .fh .hd>.ic{flex:none;width:calc(var(--ig) * var(--iw));height:calc(var(--ig) * var(--ih))}
  .fh .hd:after{inset:0}
  .fh .hd .ic path[stroke]{vector-effect:non-scaling-stroke;stroke-width:1.92px}
  .fh .menu-button{left:calc(var(--pad) - (44px - var(--ig)) / 2)}
  .fh .list-link{right:calc(var(--pad) - (44px - .897 * var(--ig)) / 2)}
  .fh .acct-link{right:calc(var(--pad) - (44px - .897 * var(--ig)) / 2 + 48px)}
  .fh .home-link{right:calc(var(--pad) - (44px - .897 * var(--ig)) / 2 + 96px)}
  .fh .hd.brand{display:block;left:calc(50% - var(--lw) / 2);top:calc((var(--hh) - var(--lw) * .24975) / 2);width:var(--lw);height:calc(var(--lw) * .24975)}
  .fh .hd.brand>.ic{width:100%;height:100%}
  .fh .hd.brand:after{inset:-10px -6px}
  .fh .list-count{right:-2px;top:-3px;width:19px;height:19px;font-size:12px}
}

/* the menu sheet itself (rows, preview, bottom bar, close cross) is menu.css */
/* sticky header (every page): the header keeps its place in the flow (so no content moves) and stays at the top of the screen while scrolling; once the page has scrolled (html.is-stuck, boot.js)
   a soft ground-coloured fade sits behind it (no edge, no border, no shadow). Without script the fade is simply always on. --hdh = the controls row height (anchor offsets, sticky bars). */
:root{--hdh:64px;--sat:env(safe-area-inset-top,0px);scroll-padding-top:calc(var(--hdh) + var(--sat) + 8px)}
@media (min-width:901px) and (min-aspect-ratio:4/5){:root{--hdh:clamp(86.4px,7.2vw,105.6px)}}
.fh{--gh:var(--fhh)}
.fh:before{content:"";position:absolute;left:0;right:0;top:0;height:calc(var(--gh) + var(--sat) + 28px);background:color-mix(in srgb,var(--hd-bg,var(--th-bg)) 30%,transparent);-webkit-backdrop-filter:blur(16px) saturate(1.25);backdrop-filter:blur(16px) saturate(1.25);-webkit-mask-image:linear-gradient(#000 calc((var(--gh) + var(--sat)) * .55),transparent);mask-image:linear-gradient(#000 calc((var(--gh) + var(--sat)) * .55),transparent);pointer-events:none;transition:opacity .2s ease}
html.js:not(.is-stuck) .fh:before{opacity:0}
@media (prefers-reduced-motion:reduce){.fh:before{transition:none}}
.fh .hd{margin-top:var(--sat)}
.fh .ph-bar{height:calc(100% + var(--sat))}
.menu-open .fh:before{opacity:0}
@media print{.fh{display:none!important}}

/* footer social links: line icons (Instagram, WhatsApp) instead of text; they follow the footer text colour */
a.soc{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
a.soc svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
a.soc svg circle:last-child{fill:currentColor}
a.soc:hover svg,a.soc:focus-visible svg{translate:0 -2px}
a.soc:hover{text-decoration:none}
/* blend ratio parts (catalog.js setRatio): each part is one unbroken, bidi-isolated unit */
.rt{white-space:nowrap}

/* the credit line at the very bottom of every page */
.legal{margin:0;padding:0 var(--gut,16px) clamp(18px,2.4vw,28px);font:400 13px/1.5 var(--nf,Nian),Nian,Tahoma,Arial,sans-serif;letter-spacing:.02em;color:currentColor;opacity:.7;text-align:start;direction:ltr}
html[dir=rtl] .legal{text-align:right}
.ls-foot .legal{opacity:1}
footer.pxfoot>.legal{position:absolute;left:0;right:0;bottom:0;z-index:2;padding-bottom:10px;color:var(--green,#285746);opacity:.8}
footer.pxfoot>.foot-links{bottom:calc(30 * var(--u) + 30px)}

/* footer: the two icons sit on the logo's row at the right edge, the text links stay below; the credit is centred on two lines */
.legal{text-align:center!important}
.ls-links,.hs-links{position:relative}
.ls-links .soc,.hs-links .soc{position:absolute;top:calc(-10.55cqw - 22px)}
.ls-links .soc:nth-of-type(1),.hs-links .soc:nth-of-type(1){right:var(--gut,16px)}
.ls-links .soc:nth-of-type(2),.hs-links .soc:nth-of-type(2){right:calc(var(--gut,16px) + 52px)}

/* header icons: one stroke weight (1.7px, not scaled with the artboard) and one height for search, profile and bag */
.fh :is(.lang-link,.home-link,.acct-link,.list-link) .ic path[stroke]{vector-effect:non-scaling-stroke;stroke-width:1.7px}
@media not all and (min-width:900px){.fh :is(.lang-link,.home-link,.acct-link)>.ic{width:auto;height:22px}.fh .list-link>.ic{width:auto;height:40px}}
a.soc svg path[stroke],a.soc svg circle,a.soc svg rect{vector-effect:non-scaling-stroke;stroke-width:1.7px}

/* LIGHT THEME (tokens: theme.css): the footer keeps its mint art; the black of the art becomes the cream page (assets/bl-footer-light.svg), the ring and the ink turn dark */
html[data-theme=light] .ls-foot,html[data-theme=light] .ls-foot .legal,html[data-theme=light] footer.pxfoot>.legal{color:#000}
html[data-theme=light] .ls-foot .ring{color:var(--green)}
html[data-theme=light] .ls-foot .pxfoot{--pf-img:url(assets/bl-footer-light.svg)}
html[data-theme=light] .ls-foot .pf-art{visibility:hidden}