/* The shop's own fonts, kept here (they were Google's: two more connections, and late): Archivo and Inter, Latin and
   extended Latin (Kurmanji's ê î û ç ş), each one variable file; another language's fonts come with its words (PP_LANG) */
@font-face{font-family:'Archivo';font-style:normal;font-weight:600 800;font-display:swap;src:url(../fonts/archivo-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:normal;font-weight:600 800;font-display:swap;src:url(../fonts/archivo-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/inter-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/inter-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* ============================================================
   PIXELPEAK storefront — one page, no framework, no database.
   Everything here is demo content held in the markup and in DATA below.
   ============================================================ */
:root{
  --bg:#F7F6F2; --card:#FFFFFF; --ink:#16181C; --sub:#5C6154; --muted:#8A8F80;
  --line:#E7E5DC; --line-soft:#F0EEE7;
  --brand:#E2622E; --brand-dark:#C44E1F; --brand-soft:#FCEBE0; --brand-ink:#8E3A14;
  --sand:#E9E6DB; --sale:#B23A2B; --gold:#D9A441; --ok:#3F7D4E;
  --shadow-xs:0 1px 2px rgba(22,24,28,.05);
  --shadow-sm:0 8px 24px -12px rgba(22,24,28,.18);
  --shadow-md:0 22px 50px -24px rgba(22,24,28,.35);
  --r-sm:12px; --r:16px; --r-lg:22px; --r-xl:28px;
  --wrap:1680px;
  /* the fonts, a place each: headings, the text, prices and numbers. A language can have its own (Website → Languages
     in the admin; api/shop_i18n.php writes them over these) */
  --f-text:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-head:'Archivo',var(--f-text);
  --f-num:var(--f-text);
  /* the direction factor: 1 left to right, -1 right to left. A sideways movement is written
     translateX(calc(12px * var(--x))), so it goes the other way in a right-to-left language */
  --x:1;
}
html[dir="rtl"]{--x:-1}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 14px/1.5 var(--f-text);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
input{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--f-head);font-weight:800;letter-spacing:-.01em}
/* prices and numbers in their own font (the same as the text unless a language has one for them) */
.price,.price-old,.ci-price,.qv-price,.hm-price,.mega-promo-price,.baro-price{font-family:var(--f-num)}
.cur{font-family:var(--f-text)}
ul{margin:0;padding:0;list-style:none}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(16px,3.2vw,56px)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ico{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* an icon chosen in the admin is a Remix Icon glyph; as .ico it takes every size the page gives its own icons */
i.ico{display:inline-grid;place-items:center;font-style:normal;line-height:1}
i.ico::before{font-size:1em}
/* right to left, the icons that point along the line point the other way: the arrows, back and next, send, sign out and
   return (the icon sheet's and Remix's). The scale property goes on top of any transform an icon has; a flipped icon keeps
   --x at 1, so a nudge written with it is not mirrored twice */
html[dir="rtl"] .ico:has(> use[href="#i-arrow"]),html[dir="rtl"] .ico:has(> use[href="#i-left"]),html[dir="rtl"] .ico:has(> use[href="#i-right"]),
html[dir="rtl"] .ico:has(> use[href="#i-send"]),html[dir="rtl"] .ico:has(> use[href="#i-logout"]),html[dir="rtl"] .ico:has(> use[href="#i-return"]),
html[dir="rtl"] [class*="ri-arrow-left"],html[dir="rtl"] [class*="ri-arrow-right"],html[dir="rtl"] [class*="ri-arrow-go-back"],
html[dir="rtl"] [class*="ri-logout-box-r"],html[dir="rtl"] [class*="ri-logout-circle-r"],html[dir="rtl"] [class*="ri-send-plane"]{scale:-1 1;--x:1}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;height:44px;padding-inline:20px;border-radius:999px;font-size:13.5px;font-weight:600;white-space:nowrap;transition:transform .2s cubic-bezier(.2,.8,.3,1),background .2s,color .2s,box-shadow .2s,border-color .2s}
.btn:active{opacity:.9}
.btn-primary{background:var(--brand);color:#fff;box-shadow:0 10px 24px -14px color-mix(in srgb,var(--brand) 85%,transparent)}
.btn-primary:hover{background:var(--brand-dark);box-shadow:0 14px 30px -14px color-mix(in srgb,var(--brand) 90%,transparent)}
.btn-ghost{background:transparent;border:1px solid var(--line);color:var(--ink)}
.btn-ghost:hover{background:#fff;border-color:#D8D5C9}
.btn-white{background:#fff;color:var(--ink);box-shadow:var(--shadow-sm)}
.btn-white:hover{background:#F2F1EA}
.btn-sm{height:38px;padding-inline:16px;font-size:12.5px}
.btn .ico{font-size:16px}
.chev{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.18)}
.btn-ghost .chev{background:var(--brand-soft);color:var(--brand)}

/* ---------- Header: a utility strip over the main bar ---------- */
.hdr{position:sticky;top:0;z-index:60;transition:transform .38s cubic-bezier(.3,.9,.3,1)}
.hdr.is-away{transform:translateY(-100%)}
.hdr-top{position:relative;background:linear-gradient(90deg,var(--ink),#23262d 50%,var(--ink));color:rgba(255,255,255,.74);font-size:12px;overflow:hidden}
.hdr-top::after{content:"";position:absolute;inset:auto 0 0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent)}
.hdr-top-in{display:flex;align-items:center;justify-content:space-between;gap:20px;height:40px}
.hdr-promises{display:flex;align-items:center;gap:26px;min-width:0}
.hdr-promises li{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.hdr-promises li + li::before{content:"";width:4px;height:4px;margin-inline-end:18px;border-radius:50%;background:rgba(255,255,255,.22)}
.hdr-promises .ico{flex:none;font-size:14px;color:var(--brand)}
.hdr-promises b{font-weight:700;color:#fff;font-variant-numeric:tabular-nums}
.hdr-cur{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;background:rgba(255,255,255,.08);font-weight:600;color:rgba(255,255,255,.86)}
/* a narrow screen: one promise at a time, sliding up */
@media (max-width:1180px){
  .hdr-promises{position:relative;display:block;flex:1;height:40px}
  .hdr-promises li{position:absolute;inset:0 auto 0 0;opacity:0;transform:translateY(100%);transition:transform .5s cubic-bezier(.3,.9,.3,1),opacity .4s ease}
  [dir="rtl"] .hdr-promises li{inset:0 0 0 auto}
  .hdr-promises li + li::before{display:none}
  .hdr-promises li.is-on{opacity:1;transform:none}
  .hdr-promises li.is-out{opacity:0;transform:translateY(-100%)}
}
@media (prefers-reduced-motion:reduce){.hdr-promises li{transition:none}}
.hdr-switches{display:flex;align-items:center;gap:12px}
.hdr-switches button,.hdr-switches a{display:inline-flex;align-items:center;gap:5px;color:rgba(255,255,255,.78);transition:color .2s ease}
.hdr-switches button:hover,.hdr-switches a:hover{color:#fff}
.hdr-switches .ico{font-size:13px}
.hdr-sep{width:1px;height:14px;background:rgba(255,255,255,.18)}
/* the language: the strip's button (its short name is --lang-now, set by store-data.js before the page is drawn), the
   list it opens (.lang-pop, store-data.js: langMenu), the side menu's row, and nothing of it while the shop has one */
.lang-now::before{content:var(--lang-now,'EN')}
.lang-pop{position:fixed;top:0;left:0;z-index:90;display:grid;gap:2px;padding:6px;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:var(--shadow-md);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s ease,transform .24s cubic-bezier(.2,.8,.2,1),visibility 0s linear .24s}
.lang-pop.is-open{opacity:1;visibility:visible;transform:none;transition:opacity .18s ease,transform .24s cubic-bezier(.2,.8,.2,1)}
.lang-pop button{display:flex;align-items:center;gap:10px;min-height:40px;padding-block:6px;padding-inline:6px 12px;border-radius:11px;text-align:start;color:var(--ink);font-size:13px;font-weight:600;transition:background .15s ease,border-color .2s ease,box-shadow .2s ease}
.lang-pop button{width:100%}
.lang-pop button:hover,.lang-pop button:focus-visible{outline:none;background:#F6F5F1}
.lang-pop button[aria-checked="true"]{background:var(--brand-soft)}
.lang-short{display:grid;place-items:center;min-width:34px;height:26px;padding-inline:6px;flex:none;border-radius:8px;background:#F3F2ED;color:var(--sub);font-family:var(--f-text);font-size:10.5px;font-weight:800;letter-spacing:.06em;transition:background .2s ease,color .2s ease}
[aria-checked="true"] > .lang-short{background:var(--brand);color:#fff}
.lang-native{flex:1;min-width:0}
.lang-on{flex:none;font-size:15px;color:var(--brand)}
.one-lang [data-lang-ui]{display:none!important}
html.lang-leaving body{opacity:0;transition:opacity .16s ease}
/* light or dark (store-data.js themeSet): a small switch, the sun or the moon on its knob */
.hdr-theme{gap:8px!important}
.ht-sw{position:relative;display:inline-block;width:30px;height:17px;flex:none;border-radius:999px;background:rgba(255,255,255,.18);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);transition:background .25s ease}
.ht-knob{position:absolute;top:2px;inset-inline-start:2px;display:grid;place-items:center;width:13px;height:13px;border-radius:50%;background:rgb(255 255 255);color:#D99A00;font-size:9px;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .38s cubic-bezier(.3,1.4,.5,1),color .25s ease}
.ht-knob i{position:absolute;line-height:1;transition:opacity .2s ease,transform .38s cubic-bezier(.3,1.4,.5,1)}
.ht-moon{opacity:0;transform:rotate(-60deg) scale(.6)}
[aria-pressed="true"] > .ht-sw,[aria-pressed="true"] .ht-sw{background:var(--brand)}
[aria-pressed="true"] .ht-knob{transform:translateX(calc(13px * var(--x)));color:var(--brand)}
[aria-pressed="true"] .ht-sun{opacity:0;transform:rotate(60deg) scale(.6)}
[aria-pressed="true"] .ht-moon{opacity:1;transform:none}
/* the new theme opens as a circle from the switch (store-data.js); the pages themselves do not cross-fade */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
.hdr-main{background:rgba(247,246,242,.92);backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .25s ease,box-shadow .25s ease}
.hdr.is-stuck .hdr-main{border-color:var(--line);box-shadow:0 10px 30px -22px rgba(22,24,28,.7)}
.hdr-in{display:flex;align-items:center;gap:clamp(12px,1.4vw,18px);height:74px}
.logo{margin-inline-end:auto}
.hdr-search{flex:none;width:clamp(230px,30vw,440px);min-width:0;display:flex;align-items:center;gap:10px;height:46px;padding-block:0;padding-inline:16px 5px;border:1px solid var(--line);border-radius:14px;background:#fff;transition:border-color .2s ease,box-shadow .2s ease}
.hdr-search:focus-within{border-color:var(--brand);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 12%,transparent)}
.hdr-search > .ico{font-size:17px;color:var(--muted);flex:none}
.hdr-search input{flex:1;min-width:0;border:0;background:none;outline:none;font-size:13px}
.hdr-search input::placeholder{color:#A9AD9C}
.hdr-search-go{display:grid;place-items:center;width:36px;height:36px;flex:none;border-radius:10px;background:var(--brand);color:#fff;transition:background .2s ease}
.hdr-search-go:hover{background:var(--brand-dark)}
.hdr-search-go .ico{font-size:16px}
button.hdr-search{cursor:text;text-align:start}
.hdr-search:hover{border-color:#D6D1C3}
.hdr-search:focus-visible{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 12%,transparent)}
.hs-text{flex:1;min-width:0;overflow:hidden;white-space:nowrap;font-size:13px;color:#A2A694}
.hs-q{display:none;color:var(--ink);font-weight:600}
.hdr-search.has-q .hs-q{display:inline}
.hdr-search.has-q .tw{display:none}
.hs-kbd{flex:none;height:22px;padding-inline:7px;display:inline-flex;align-items:center;border-radius:6px;border:1px solid var(--line);background:#F7F6F2;font:600 10.5px var(--f-text);color:var(--muted)}
/* the typewriter: a word types itself, erases, and the next one comes */
.tw-word{color:var(--ink);font-weight:600}
.tw-caret{display:inline-block;width:1.5px;height:1.1em;margin-inline-start:2px;vertical-align:-3px;background:var(--brand);animation:blink 1s steps(2,start) infinite}
@keyframes blink{to{visibility:hidden}}
/* ---------- The category bar: the categories on the left, the rest of the shop on the right ----------
   Every category keeps one colour and one icon everywhere on the page (--c, --c-soft). */
.hdr-cats{border-top:1px solid var(--line-soft)}
.hdr-cats-in{position:relative;display:flex;align-items:center;gap:12px;height:58px}
.cat-all{position:relative;display:inline-flex;align-items:center;gap:9px;height:40px;padding-inline:14px 12px;border-radius:13px;background:linear-gradient(180deg,color-mix(in srgb,var(--brand) 88%,rgb(255 255 255)),var(--brand) 55%,color-mix(in srgb,var(--brand) 92%,rgb(0 0 0)));color:#fff;font-size:13px;font-weight:650;white-space:nowrap;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 10px 22px -14px color-mix(in srgb,var(--brand) 95%,transparent);transition:filter .2s ease,box-shadow .2s ease}
.cat-all:hover,.nav-drop.is-open .cat-all{filter:brightness(1.06) saturate(1.05);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 14px 26px -14px var(--brand)}
.cat-all > .ico{font-size:16px}
.cat-all .chev-ico{font-size:14px;opacity:.7;transition:transform .25s ease}
/* the Brands button: white, so it sits next to the orange Categories button without shouting */
.brand-all{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.brand-all > .ico{color:var(--brand)}
.brand-all:hover,.nav-drop.is-open .brand-all{filter:none;background:var(--brand-soft);color:var(--brand-ink);box-shadow:inset 0 0 0 1.5px var(--brand)}
.nav-drop.is-open .cat-all .chev-ico{transform:rotate(180deg)}
.cat-rule{flex:none;width:1px;height:24px;background:var(--line)}
.cat-scroll{position:relative;flex:0 1 auto;min-width:0}
.cat-links{position:relative;display:flex;align-items:center;gap:4px;padding-block:4px;overflow-x:auto;scrollbar-width:none}
.cat-links::-webkit-scrollbar{display:none}
/* the white pill that slides to the chosen category */
.cat-thumb{position:absolute;top:4px;left:0;width:0;height:40px;border-radius:13px;background:#fff;box-shadow:0 1px 2px rgba(22,24,28,.06),0 8px 20px -12px rgba(22,24,28,.32);pointer-events:none}
.cat-thumb.is-ready{transition:transform .5s cubic-bezier(.3,1.2,.4,1),width .5s cubic-bezier(.3,1.2,.4,1)}
.cat-link{position:relative;z-index:1;display:inline-flex;align-items:center;gap:9px;height:40px;padding-block:0;padding-inline:6px 10px;border-radius:13px;font-size:13px;font-weight:550;color:var(--sub);white-space:nowrap;transition:color .2s ease,background .2s ease}
.cat-link:hover{color:var(--ink);background:rgba(22,24,28,.045)}
.cat-link.is-on{color:var(--ink);font-weight:650;background:transparent}
.cat-ic{display:grid;place-items:center;width:28px;height:28px;flex:none;border-radius:9px;background:var(--c-soft);color:var(--c);transition:background .25s ease,color .25s ease}
.cat-ic .ico{font-size:16px;stroke-width:1.8}
.cat-link.is-on .cat-ic{background:var(--c);color:#fff}
/* a category with a picture of its own shows it instead of its icon, on white in every state; picked, a ring in its colour */
.cat-ic.is-pic{overflow:hidden;background:#fff!important;box-shadow:inset 0 0 0 1px var(--line-soft)}
.cat-ic.is-pic img{width:100%;height:100%;padding:9%;object-fit:contain}
.cat-link.is-on .cat-ic.is-pic,.mega-item.is-on .cat-ic.is-pic,.drawer-cat.is-on .cat-ic.is-pic,.sr-cat.is-active .cat-ic.is-pic,.plc.is-on .cat-ic.is-pic{box-shadow:inset 0 0 0 1.5px var(--c)}
.cat-n{min-width:22px;height:20px;padding-inline:6px;display:inline-grid;place-items:center;border-radius:999px;background:rgba(22,24,28,.06);font-size:10.5px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums;transition:background .25s ease,color .25s ease}
.cat-link.is-on .cat-n{background:var(--c-soft);color:var(--c)}
/* where the bar is tight the counts step aside (the menu and the side menu still show them) */
@media (min-width:1321px) and (max-width:1480px),(max-width:1060px){.cat-link .cat-n{display:none}.cat-link{padding-inline-end:13px}}
/* the row fades at an edge while there is more to scroll to */
.cat-scroll::before,.cat-scroll::after{content:"";position:absolute;top:0;bottom:0;z-index:2;width:40px;pointer-events:none;opacity:0;transition:opacity .2s ease}
.cat-scroll::before{left:0;background:linear-gradient(90deg,var(--bg) 20%,rgba(247,246,242,0))}
.cat-scroll::after{right:0;background:linear-gradient(-90deg,var(--bg) 20%,rgba(247,246,242,0))}
.cat-scroll.more-left::before,.cat-scroll.more-right::after{opacity:1}
.logo{display:flex;align-items:center;gap:11px;flex:none}
.logo-mark{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:var(--brand);color:#fff;box-shadow:0 10px 20px -12px color-mix(in srgb,var(--brand) 90%,transparent)}
.logo-mark .ico{font-size:21px;stroke-width:2}
.logo-text{display:flex;flex-direction:column;line-height:1}
.logo-name{font-family:var(--f-head);font-weight:800;font-size:17.5px;letter-spacing:.15em}
.logo-sub{margin-top:4px;font-size:8.5px;letter-spacing:.34em;color:var(--muted)}
/* the pages of the shop: plain words, so they never look like the categories */
.nav{display:flex;align-items:center;gap:2px;margin-inline-start:auto}
.nav-link{position:relative;display:inline-flex;align-items:center;gap:7px;height:40px;padding-inline:12px;border-radius:12px;font-size:13px;font-weight:550;color:var(--sub);white-space:nowrap;transition:color .2s ease,background .2s ease}
.nav-link:hover{color:var(--ink)}
.nl{position:relative;padding-block:4px}
.nl::before,.nl::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;border-radius:2px}
.nl::before{background:rgba(22,24,28,.13)}
.nl::after{background:linear-gradient(90deg,color-mix(in srgb,var(--brand) 75%,rgb(255 255 255)),var(--brand));transform:scaleX(0);transform-origin:left center;transition:transform .38s cubic-bezier(.3,1,.35,1)}
html[dir="rtl"] .nl::after{background:linear-gradient(-90deg,color-mix(in srgb,var(--brand) 75%,rgb(255 255 255)),var(--brand));transform-origin:right center}
.nav-link:hover .nl::after,.nav-link.is-on .nl::after{transform:scaleX(1)}
.nav-link.is-on{color:var(--ink);font-weight:650}
.nav-hot{height:18px;padding-inline:6px;display:inline-flex;align-items:center;border-radius:6px;background:var(--sale);color:#fff;font-size:10px;font-weight:750;font-variant-numeric:tabular-nums}

/* ---------- The category menu: hover a category to preview it, click to pick it ---------- */
.nav-drop{position:static}
.mega{position:absolute;top:calc(100% - 2px);inset-inline:clamp(16px,3.2vw,56px);z-index:5;display:grid;grid-template-columns:268px minmax(0,1fr) 236px;gap:8px;padding:10px;border:1px solid var(--line);border-radius:22px;background:#fff;box-shadow:0 40px 80px -36px rgba(22,24,28,.55);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s ease,transform .28s cubic-bezier(.3,1,.4,1),visibility 0s linear .28s}
.nav-drop.is-open .mega{opacity:1;visibility:visible;transform:none;transition:opacity .2s ease,transform .28s cubic-bezier(.3,1,.4,1),visibility 0s}
.mega::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.mega-list{display:flex;flex-direction:column;gap:2px;padding:5px;border-radius:16px;background:#F6F5F1}
.mega-item{display:flex;align-items:center;gap:11px;width:100%;padding:9px 10px;border-radius:12px;text-align:start;transition:background .2s ease,box-shadow .2s ease}
.mega-item .cat-ic{width:36px;height:36px;border-radius:11px}
.mega-item .cat-ic .ico{font-size:18px}
.mega-item b{display:block;font-size:13px;font-weight:650}
.mega-item small{display:block;margin-top:1px;font-size:11px;color:var(--muted)}
.mega-thumb{width:54px;height:38px;margin-inline-start:auto;flex:none;object-fit:contain;filter:drop-shadow(0 5px 6px rgba(22,24,28,.18));opacity:.75;transition:opacity .25s ease,transform .35s cubic-bezier(.3,1.3,.4,1)}
.mega-item:hover{background:rgba(255,255,255,.6)}
.mega-item.is-on{background:#fff;box-shadow:0 1px 2px rgba(22,24,28,.06),0 8px 18px -12px rgba(22,24,28,.3)}
.mega-item.is-on .cat-ic{background:var(--c);color:#fff}
.mega-item.is-on .mega-thumb{opacity:1;transform:scale(1.12)}
.mega-item .cat-ic.is-pic ~ .mega-thumb{display:none}   /* the picture is on the left already */
.mega-view{display:flex;flex-direction:column;gap:14px;min-width:0;padding:12px 14px 10px}
.mv-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px}
.mv-head h3{font-size:21px;text-transform:uppercase;letter-spacing:-.005em}
.mv-head p{margin:4px 0 0;font-size:12px;color:var(--muted)}
.mv-head p b{color:var(--ink);font-weight:650}
.mv-all{display:inline-flex;align-items:center;gap:7px;height:38px;padding-inline:15px;border-radius:12px;background:var(--c);color:#fff;font-size:12.5px;font-weight:650;white-space:nowrap;transition:filter .2s ease,gap .2s ease}
.mv-all:hover{filter:brightness(1.08);gap:10px}
.mv-all .ico{font-size:15px}
.mv-items{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.mv-item{display:flex;flex-direction:column;gap:6px;padding:8px 8px 11px;border:1px solid var(--line-soft);border-radius:15px;text-align:start;transition:border-color .2s ease,box-shadow .2s ease}
.mv-item:hover{border-color:var(--c);box-shadow:var(--shadow-sm)}
.mv-shot{display:grid;place-items:center;height:132px;border-radius:11px;background:radial-gradient(circle at 50% 58%,#fff 20%,var(--c-soft) 100%)}
.mv-shot img{max-height:106px;width:auto;object-fit:contain;filter:drop-shadow(0 8px 10px rgba(22,24,28,.16))}
.mv-item b{padding-inline:4px;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;line-height:1.3}
.mv-item .price{padding-inline:4px;font-size:14px}
.mv-picks{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.mv-picks > span{margin-inline-end:4px;font-size:10px;font-weight:700;letter-spacing:.14em;color:var(--muted)}
.mv-pick{display:inline-flex;align-items:center;gap:6px;height:30px;padding-inline:11px;border:1px solid var(--line);border-radius:999px;font-size:12px;font-weight:550;color:var(--sub);transition:border-color .2s ease,color .2s ease,background .2s ease}
.mv-pick i{font-style:normal;font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.mv-pick:hover{border-color:var(--c);color:var(--c);background:var(--c-soft)}
.mv-help{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:10px;border-top:1px solid var(--line-soft);font-size:11.5px;color:var(--muted)}
.mv-help .ico{font-size:15px;color:var(--brand)}
.mv-help a{font-weight:650;color:var(--ink)}
.mv-help a:hover{color:var(--brand)}
/* the brands menu: a wall of logos on the left, the brand's monitors on the right */
.mega-brands{grid-template-columns:minmax(0,430px) minmax(0,1fr)}
.bm-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:6px;border-radius:16px;background:#F6F5F1;align-content:start}
.bm-item{display:flex;flex-direction:column;align-items:center;gap:5px;padding:12px 6px 10px;border-radius:13px;text-align:center;transition:background .2s ease,box-shadow .2s ease}
.bm-logo{display:grid;place-items:center;width:48px;height:48px;flex:none;border-radius:50%;background:#fff;color:var(--bh);box-shadow:0 4px 12px -6px rgba(22,24,28,.3);transition:background .25s ease,color .25s ease}
.bm-logo .blogo{width:26px;height:26px}
.bm-logo .blogo.is-wide{width:38px;height:38px}
.bm-item b{font-size:12.5px;font-weight:650}
.bm-item small{margin-top:-3px;font-size:10.5px;color:var(--muted)}
.bm-item:hover{background:rgba(255,255,255,.7)}
.bm-item.is-on{background:#fff;box-shadow:0 1px 2px rgba(22,24,28,.06),0 8px 18px -12px rgba(22,24,28,.3)}
/* the brand being shown keeps its logo on the plate and gets a ring in its colour (a fill would hide a logo drawn in
   that colour, like Xiaomi's orange square); only a logo of letters turns to white on the colour */
.bm-item.is-on .bm-logo{box-shadow:0 0 0 2px var(--bh),0 8px 16px -8px var(--bh)}
.bm-item.is-dark.is-on .bm-logo{box-shadow:0 0 0 2px var(--brand),0 8px 16px -8px var(--brand)}
.bm-item.is-on .bm-logo:has(> .is-word){background:var(--bh);color:#fff}
.bm-item.is-dark.is-on .bm-logo:has(> .is-word){background:var(--brand)}
.bv-id{display:flex;align-items:center;gap:14px}
.bv-id .bm-logo{width:56px;height:56px}
.bv-id .bm-logo .blogo{width:30px;height:30px}
.bv-id .bm-logo .blogo.is-wide{width:44px;height:44px}
.mv-ask{align-items:center;justify-content:center;gap:8px;text-align:center;border-style:dashed;color:var(--muted);font-size:12px}
.mv-ask .ico{font-size:22px;color:var(--c)}
.mv-ask b{color:var(--ink);text-transform:none;letter-spacing:0}
.mega-promo{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:7px;min-height:212px;padding:16px;border-radius:16px;background:radial-gradient(120% 70% at 70% 18%,#FFB37E 0%,rgba(255,179,126,0) 60%),linear-gradient(165deg,color-mix(in srgb,var(--brand) 75%,rgb(255 255 255)),var(--brand) 48%,color-mix(in srgb,var(--brand) 80%,rgb(0 0 0)));color:#fff;overflow:hidden;isolation:isolate}
.mega-promo img{position:absolute;left:50%;top:22px;z-index:-1;width:90%;max-height:52%;translate:-50% 0;object-fit:contain;filter:drop-shadow(0 16px 20px rgba(80,24,4,.45));transition:transform .5s cubic-bezier(.2,.8,.3,1)}
.mega-promo:hover img{transform:scale(1.05)}
.mega-promo-tag{position:relative;align-self:flex-start;height:20px;padding-inline:8px;display:inline-flex;align-items:center;border-radius:6px;background:#fff;color:var(--brand-dark);font-size:9px;font-weight:800;letter-spacing:.12em}
.mega-promo strong{position:relative;font-size:13.5px;line-height:1.4}
.mega-promo-price{position:relative;font-size:13px;font-weight:700;color:#fff}
.mega-promo-price s{color:rgba(255,255,255,.7);font-size:11px;font-weight:500}

/* ---------- The phone menu: a sheet from the side ---------- */
html.is-locked{overflow:hidden}
.drawer{position:fixed;inset:0;z-index:80;visibility:hidden;transition:visibility 0s linear .42s}
.drawer.is-open{visibility:visible;transition:none}
.drawer-bg{position:absolute;inset:0;background:rgba(16,17,20,.45);backdrop-filter:blur(3px);opacity:0;transition:opacity .3s ease}
.drawer.is-open .drawer-bg{opacity:1}
/* the phone menu fills the screen (the owner's wish, 2026-10-04): first its language and light or dark, then the rest */
.drawer-panel{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--bg);transform:translateX(calc(102% * var(--x)));transition:transform .42s cubic-bezier(.3,1,.35,1)}
.drawer.is-open .drawer-panel{transform:none}
.drawer-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px 6px}
.drawer-top{display:flex;align-items:center;gap:8px;padding:8px 16px 14px;border-bottom:1px solid var(--line)}
.drawer-lang-row{display:grid;flex:1;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px;min-width:0;padding:4px;border-radius:16px;background:#F3F2ED}
.drawer-lang-row button{display:flex;align-items:center;justify-content:center;gap:8px;min-width:0;height:44px;padding-inline:8px;border-radius:12px;font-size:13px;font-weight:700;color:var(--sub);transition:background .25s ease,color .25s ease,box-shadow .25s ease,transform .2s cubic-bezier(.2,.8,.3,1)}
.drawer-lang-row button:hover{color:var(--ink)}
.drawer-lang-row button:active{transform:scale(.96)}
.drawer-lang-row button[aria-checked="true"]{background:var(--card);color:var(--ink);box-shadow:0 1px 2px rgba(22,24,28,.08),0 6px 14px -8px rgba(22,24,28,.3)}
.dl-flag{width:22px;height:16px;flex:none;border-radius:4px;object-fit:cover;box-shadow:0 0 0 1px rgba(22,24,28,.1)}
.dl-short{letter-spacing:.04em}
.drawer-mode{display:flex;align-items:center;justify-content:center;gap:10px;width:52px;height:52px;flex:none;border-radius:16px;background:#F3F2ED;color:var(--ink);font-size:13px;font-weight:700;transition:transform .2s cubic-bezier(.2,.8,.3,1),background .25s ease}
.drawer-mode:active{transform:scale(.94)}
.dm-ic{position:relative;width:22px;height:22px;flex:none}
.dm-ic i{position:absolute;inset:0;display:grid;place-items:center;font-size:20px;transition:transform .45s cubic-bezier(.3,1.4,.4,1),opacity .25s ease}
.dm-moon{color:#5B5FC7}
.dm-sun{color:#E8A317;opacity:0;transform:rotate(-90deg) scale(.4)}
.drawer-mode[aria-pressed="true"] .dm-moon{opacity:0;transform:rotate(90deg) scale(.4)}
.drawer-mode[aria-pressed="true"] .dm-sun{opacity:1;transform:none}
.dm-txt{display:none}
.one-lang .drawer-mode{flex:1;width:auto}
.one-lang .dm-txt{display:inline}
@media (min-width:640px){.drawer-head,.drawer-top,.drawer-body{padding-inline:max(16px,calc(50% - 300px))}}
/* what is in it comes in one after another as it opens */
.drawer.is-open .drawer-top,.drawer.is-open .drawer-body > *{animation:drIn .5s cubic-bezier(.2,.8,.3,1) both}
.drawer.is-open .drawer-body > :nth-child(1){animation-delay:.05s}
.drawer.is-open .drawer-body > :nth-child(2){animation-delay:.08s}
.drawer.is-open .drawer-body > :nth-child(3){animation-delay:.11s}
.drawer.is-open .drawer-body > :nth-child(4){animation-delay:.14s}
.drawer.is-open .drawer-body > :nth-child(5){animation-delay:.17s}
.drawer.is-open .drawer-body > :nth-child(6){animation-delay:.2s}
.drawer.is-open .drawer-body > :nth-child(n+7){animation-delay:.23s}
@keyframes drIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.drawer.is-open .drawer-top,.drawer.is-open .drawer-body > *{animation:none}.dm-ic i{transition:none}}
.drawer-head b{font-family:var(--f-head);font-size:15px;letter-spacing:.12em;text-transform:uppercase}
.drawer-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:6px 16px 24px}
.drawer-label{margin:16px 4px 8px;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.drawer-cats{display:grid;gap:6px}
.drawer-cat{display:flex;align-items:center;gap:12px;width:100%;min-height:58px;padding-block:9px;padding-inline:9px 12px;border:1px solid var(--line-soft);border-radius:15px;background:#fff;text-align:start;transition:border-color .2s ease,box-shadow .2s ease}
.drawer-cat .cat-ic{width:40px;height:40px;border-radius:12px}
.drawer-cat .cat-ic .ico{font-size:19px}
.drawer-cat b{display:block;font-size:13.5px;font-weight:650}
.drawer-cat small{display:block;margin-top:1px;font-size:11px;color:var(--muted)}
.drawer-cat img{width:58px;height:40px;margin-inline-start:auto;flex:none;object-fit:contain;filter:drop-shadow(0 5px 6px rgba(22,24,28,.18))}
.drawer-cat > .ico{font-size:16px;color:var(--muted)}
.drawer-cat.is-on{border-color:var(--c);box-shadow:0 0 0 3px var(--c-soft)}
.drawer-cat.is-on .cat-ic{background:var(--c);color:#fff}
.drawer-cat.is-on > .ico{color:var(--c)}
.drawer-brands{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.db-item{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px;border-radius:14px;background:#fff;border:1px solid var(--line-soft);font-size:11px;font-weight:650}
.db-item .bm-logo{width:40px;height:40px}
.db-item .bm-logo .blogo{width:22px;height:22px}
.db-item .bm-logo .blogo.is-wide{width:32px;height:32px}
.db-item.is-on{border-color:var(--bh);box-shadow:0 0 0 3px var(--bs)}
.db-item.is-on .bm-logo:has(> .is-word){background:var(--bh);color:#fff}
.drawer-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.drawer-link{display:flex;align-items:center;gap:10px;height:48px;padding-inline:12px;border-radius:13px;background:#fff;border:1px solid var(--line-soft);font-size:13px;font-weight:600}
.drawer-link .ico{font-size:17px;color:var(--brand)}
.drawer-link .nav-hot{margin-inline-start:auto}
.drawer-link:last-child:nth-child(odd){grid-column:span 2}
.drawer-me{display:flex;align-items:center;gap:12px;width:100%;margin-top:14px;padding:12px;border-radius:16px;background:linear-gradient(150deg,#fff,var(--brand-soft));border:1px solid #F6D9C7;text-align:start}
.drawer-me b{display:block;font-size:13.5px;font-weight:700}
.drawer-me small{display:block;font-size:11px;color:var(--muted)}
.drawer-me > .ico{margin-inline-start:auto;font-size:16px;color:var(--brand)}
.drawer-me-ic{display:grid;place-items:center;width:42px;height:42px;flex:none;border-radius:13px;background:#fff;color:var(--brand);box-shadow:var(--shadow-xs)}
.drawer-me-ic .ico{font-size:19px}
.drawer-me-ic .me{width:42px;height:42px;border-radius:13px;font-size:14px}
.drawer-note{display:grid;gap:10px;margin-top:18px;padding:14px;border-radius:15px;background:linear-gradient(150deg,#fff,var(--brand-soft));border:1px solid #F6D9C7;color:var(--sub);font-size:12px}
.drawer-note > span,.drawer-note > a{display:flex;align-items:center;gap:9px}
.drawer-note .ico{font-size:15px;color:var(--brand)}
.drawer-note b{color:var(--ink)}
.hdr-acts{display:flex;align-items:center;gap:8px;flex:none}
.icon-btn{position:relative;display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--line);border-radius:14px;background:#fff;color:var(--sub);transition:color .22s ease,border-color .22s ease,background .22s ease}
.icon-btn:hover{color:var(--ink);border-color:#C9C4B4}
.icon-btn .ico{font-size:18px}
.icon-btn:focus-visible{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 25%,transparent)}
.dot-n[hidden]{display:none}
.dot-n{position:absolute;top:-5px;inset-inline-end:-5px;min-width:19px;height:19px;padding-inline:5px;display:grid;place-items:center;border-radius:999px;background:var(--brand);color:#fff;font-size:10px;font-weight:700;border:2px solid var(--bg)}
.cart-btn{display:flex;align-items:center;gap:11px;height:42px;padding-inline:14px 18px;border-radius:14px;background:var(--brand);color:#fff;transition:background .22s ease}
.cart-btn:hover{background:var(--brand-dark)}
.cart-ic{position:relative;display:grid;place-items:center}
.cart-ic .ico{font-size:19px}
.cart-ic .dot-n{background:#fff;color:var(--brand);border-color:var(--brand)}
.cart-txt{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15}
.cart-label{font-size:10px;letter-spacing:.1em;opacity:.75}
.cart-txt b{font-size:13px;font-variant-numeric:tabular-nums}
.burger{display:none}

/* ---------- Brand logos ---------- */
.blogo{width:1em;height:1em;flex:none;fill:currentColor}
/* a brand's logo from the admin is a picture; a brand without one shows its initials */
img.blogo{object-fit:contain}
.blogo.is-word{display:inline-grid;place-items:center;font:800 9px/1 var(--f-text);letter-spacing:.02em}
.bm-logo .blogo.is-word,.bb-logo .blogo.is-word,.plh-logo .blogo.is-word{font-size:12px}
.bb-big .blogo.is-word,.bv-id .blogo.is-word{font-size:17px}
img.bb-mark{object-fit:contain}
/* ---------- Hero: five slides, labelled tabs that fill while a slide is showing ---------- */
.hero{position:relative;margin-top:16px;border-radius:var(--r-xl);background:linear-gradient(120deg,#F3F1EB 0%,#ECEAE2 50%,#E4E3D9 100%);overflow:hidden;isolation:isolate}
/* every slide sits in the same grid cell, so the banner takes the height of the tallest one */
.hero-slides{position:relative;display:grid;min-height:clamp(360px,27vw,410px)}
.hero-slide{position:relative;grid-area:1/1;z-index:0;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:20px;padding:28px 48px 84px;opacity:0;visibility:hidden;overflow:hidden;transition:opacity .6s ease,visibility 0s linear .6s}
.hero-slide.is-on{opacity:1;visibility:visible;transition:opacity .6s ease,visibility 0s}
/* a product slide glows in its own colour behind the screen */
.hero-slide:not(.is-photo){background:radial-gradient(52% 78% at 76% 46%,var(--glow,rgba(255,255,255,.7)) 0%,rgba(255,255,255,0) 72%)}
html[dir="rtl"] .hero-slide:not(.is-photo){background:radial-gradient(52% 78% at 24% 46%,var(--glow,rgba(255,255,255,.7)) 0%,rgba(255,255,255,0) 72%)}
.hero-word{position:absolute;inset-inline-end:2%;top:46%;translate:0 -50%;z-index:-1;font-family:var(--f-head);font-weight:800;font-size:clamp(110px,13vw,200px);line-height:1;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.5px rgba(22,24,28,.075);white-space:nowrap;pointer-events:none;user-select:none}
.hero-copy{align-self:center;max-width:min(600px,48vw);position:relative;z-index:2}
.hero-tag{display:inline-flex;align-items:center;gap:8px;height:28px;padding-inline:12px;border-radius:999px;background:#fff;font-size:10.5px;font-weight:700;letter-spacing:.16em;color:var(--brand-ink);box-shadow:var(--shadow-xs)}
.hero-tag i{width:6px;height:6px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent)}
/* the name and its words never take the slide over (the owner's wish): a long name smaller, three lines at most; the words three lines */
.hero h1{margin:14px 0 0;font-size:clamp(24px,2.4vw,34px);line-height:1.05;letter-spacing:-.02em;text-transform:uppercase;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hero h1 em{font-style:normal;color:var(--brand)}
/* a product slide's title is the product's name: a long one steps down a size */
.hero h1.is-long{font-size:clamp(20px,1.75vw,25px);line-height:1.12}
.hero p{margin:10px 0 0;max-width:440px;font-size:13px;line-height:1.6;color:var(--sub);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* the product on the slide: name, price and rating in one line */
.hero-meta{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:14px;padding-block:7px;padding-inline:7px 14px;border-radius:999px;background:rgba(255,255,255,.86);box-shadow:var(--shadow-xs);font-size:12px;color:var(--sub)}
.hero-meta:empty{display:none}
.hm-name{height:26px;padding-inline:10px;display:inline-flex;align-items:center;border-radius:999px;background:var(--brand-soft);color:var(--brand-ink);font-size:10.5px;font-weight:750;letter-spacing:.06em}
.hm-price{font-size:15px;font-weight:750;color:var(--ink);font-variant-numeric:tabular-nums}
.hm-price .cur{margin-inline-start:3px;font-size:.66em;letter-spacing:.06em;color:var(--muted)}
.hm-rate{display:inline-flex;align-items:center;gap:4px;font-weight:650}
.hm-rate .ico{font-size:13px;color:var(--gold);fill:currentColor;stroke:none}
.hero-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.hero-art{position:relative;align-self:stretch;display:grid;place-items:center}
.hero-art img{max-height:min(300px,23vw);width:auto;object-fit:contain;filter:drop-shadow(0 30px 40px rgba(20,22,18,.3));animation:floaty 7s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.hero-glow{position:absolute;width:min(400px,80%);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.85),rgba(255,255,255,0) 66%);z-index:-1}
.hero-art::after{content:"";position:absolute;left:50%;bottom:9%;translate:-50% 0;width:54%;height:22px;border-radius:50%;background:rgba(22,24,28,.2);filter:blur(14px);z-index:-1}
/* A slide can be a photograph instead of a product render */
.hero-slide.is-photo{grid-template-columns:minmax(0,1fr);padding:28px 52px 84px}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-2}
.hero-slide.is-photo::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(96deg,rgba(7,6,5,.9) 2%,rgba(9,8,6,.66) 38%,rgba(9,8,6,.05) 76%),linear-gradient(0deg,rgba(7,6,5,.55),rgba(7,6,5,0) 34%)}
html[dir="rtl"] .hero-slide.is-photo::after{background:linear-gradient(-96deg,rgba(7,6,5,.9) 2%,rgba(9,8,6,.66) 38%,rgba(9,8,6,.05) 76%),linear-gradient(0deg,rgba(7,6,5,.55),rgba(7,6,5,0) 34%)}
.hero-slide.is-photo .hero-copy{max-width:560px;color:#fff}
.hero-slide.is-photo .hero-tag{background:rgba(255,255,255,.14);color:#fff;box-shadow:none;backdrop-filter:blur(6px)}
.hero-slide.is-photo h1 em{color:color-mix(in srgb,var(--brand) 60%,rgb(255 255 255))}
.hero-slide.is-photo p{color:rgba(255,255,255,.78)}
.hero-slide.is-photo .btn-primary{background:#fff;color:var(--ink);box-shadow:0 14px 30px -16px rgba(0,0,0,.8)}
.hero-slide.is-photo .btn-primary:hover{background:#F2F1EA}
.hero-slide.is-photo .btn-primary .chev{background:var(--brand-soft);color:var(--brand)}
.hero-slide.is-photo .btn-ghost{border-color:rgba(255,255,255,.34);color:#fff}
.hero-slide.is-photo .btn-ghost:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.5)}
/* a slide arriving: the words rise one after another, the screen slides in, a photo settles */
@keyframes heroUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes heroArt{from{opacity:0;transform:translateX(calc(46px * var(--x))) scale(.95)}to{opacity:1;transform:none}}
@keyframes heroWord{from{opacity:0;transform:translateX(calc(70px * var(--x)))}to{opacity:1;transform:none}}
@keyframes heroPhoto{from{transform:scale(1.08)}to{transform:scale(1)}}
.hero-slide.is-on .hero-copy > *{animation:heroUp .7s cubic-bezier(.2,.8,.3,1) both}
.hero-slide.is-on .hero-copy > :nth-child(2){animation-delay:.06s}
.hero-slide.is-on .hero-copy > :nth-child(3){animation-delay:.12s}
.hero-slide.is-on .hero-copy > :nth-child(4){animation-delay:.18s}
.hero-slide.is-on .hero-copy > :nth-child(5){animation-delay:.24s}
.hero-slide.is-on .hero-art{animation:heroArt .9s cubic-bezier(.2,.8,.3,1) both}
.hero-slide.is-on .hero-word{animation:heroWord 1.2s cubic-bezier(.2,.8,.3,1) both}
.hero-slide.is-on .hero-bg{animation:heroPhoto 9s cubic-bezier(.2,.6,.3,1) both}
/* the bar at the foot of the banner: a tab per slide, the counter and the arrows */
.hero-bar{position:absolute;left:48px;right:48px;bottom:20px;z-index:4;display:flex;align-items:flex-end;gap:22px}
.hero-tabs{flex:1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;max-width:680px}
.ht{display:flex;flex-direction:column;gap:9px;padding-top:6px;text-align:start;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(22,24,28,.42);white-space:nowrap;transition:color .3s ease}
.ht:hover,.ht.is-on{color:var(--ink)}
.ht-track{position:relative;height:3px;border-radius:3px;background:rgba(22,24,28,.12);overflow:hidden}
.ht-fill{position:absolute;inset:0;border-radius:inherit;background:var(--brand);transform:scaleX(0);transform-origin:left center}
html[dir="rtl"] .ht-fill{transform-origin:right center}
.ht.is-on .ht-fill{animation:htFill var(--hero-s,7s) linear forwards}
.hero:hover .ht.is-on .ht-fill,.hero:focus-within .ht.is-on .ht-fill{animation-play-state:paused}
@keyframes htFill{to{transform:scaleX(1)}}
.hero-nav{display:flex;align-items:center;gap:8px;margin-inline-start:auto}
.hero-count{margin-inline-end:8px;font-size:13px;font-weight:750;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.hero-count span{color:var(--muted);font-weight:600}
.hero-arrow{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.9);color:var(--ink);box-shadow:var(--shadow-xs);transition:background .2s ease,color .2s ease,transform .2s ease}
.hero-arrow:hover{background:var(--brand);color:#fff}
.hero-arrow:active{transform:scale(.94)}
.hero-arrow .ico{font-size:18px}
.hero.is-dark .ht{color:rgba(255,255,255,.55)}
.hero.is-dark .ht:hover,.hero.is-dark .ht.is-on{color:#fff}
.hero.is-dark .ht-track{background:rgba(255,255,255,.24)}
.hero.is-dark .hero-count{color:#fff}
.hero.is-dark .hero-count span{color:rgba(255,255,255,.6)}
.hero.is-dark .hero-arrow{background:rgba(255,255,255,.14);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);backdrop-filter:blur(8px)}
.hero.is-dark .hero-arrow:hover{background:#fff;color:var(--ink)}
@media (prefers-reduced-motion:reduce){.ht.is-on .ht-fill{transform:scaleX(1)}}

/* ---------- Section furniture ---------- */
section{scroll-margin-top:90px}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:54px 0 18px}
.sec-head h2{font-size:15px;letter-spacing:.12em;text-transform:uppercase}
.sec-head p{margin:6px 0 0;font-size:12.5px;color:var(--muted)}
.see-all{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--sub);transition:gap .2s,color .2s}
.see-all:hover{gap:11px;color:var(--ink)}
.sec-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px}
.fpill{display:inline-flex;align-items:center;gap:7px;height:34px;padding-inline:5px 11px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:12px;font-weight:650;color:var(--ink);transition:border-color .2s ease,box-shadow .2s ease}
.fp-logo{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--bs);color:var(--bh)}
.fp-logo .blogo{width:14px;height:14px}
.fp-logo .blogo.is-wide{width:21px;height:21px}
.fpill.is-q{padding-inline-start:11px}
.fpill.is-q > .ico:first-child{font-size:14px;color:var(--muted)}
.fpill .cat-ic{width:24px;height:24px;border-radius:999px}
.fpill .cat-ic .ico{font-size:13px}
.fpill .x{font-size:13px;color:var(--muted);transition:color .2s ease}
.fpill:hover{border-color:var(--ink);box-shadow:var(--shadow-xs)}
.fpill:hover .x{color:var(--sale)}
.fclear{height:34px;padding-inline:8px;font-size:12px;font-weight:650;color:var(--brand)}
.fclear:hover{color:var(--brand-dark);text-decoration:underline}
#filterPills:empty,.see-all[hidden]{display:none}

/* ---------- Product cards ---------- */
.rail-wrap{position:relative}
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(250px,1fr);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:4px;scrollbar-width:none}
.rail.is-grid{grid-auto-flow:row;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));overflow:visible}
.rail::-webkit-scrollbar{display:none}
.rail-btn{position:absolute;top:50%;translate:0 -50%;z-index:5;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#fff;box-shadow:var(--shadow-sm);transition:transform .2s,opacity .2s}
.rail-btn:hover{background:var(--brand);color:#fff}
.rail-btn.prev{inset-inline-start:-14px}
.rail-btn.next{inset-inline-end:-14px}
.rail-btn[disabled]{opacity:0;pointer-events:none}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.card{position:relative;display:flex;flex-direction:column;border:1px solid var(--line-soft);border-radius:var(--r-lg);background:var(--card);overflow:hidden;scroll-snap-align:start;transition:box-shadow .32s ease,border-color .32s ease}
.card:hover{box-shadow:var(--shadow-md);border-color:#E3DED2}
.card-media{position:relative;height:196px;display:grid;place-items:center;background:radial-gradient(circle at 50% 62%,#FFFFFF,#F1F0EB 76%);overflow:hidden;transition:background .35s ease}
.card-media::after{content:"";position:absolute;left:50%;bottom:16px;translate:-50% 0;width:62%;height:12px;border-radius:50%;background:rgba(22,24,28,.16);filter:blur(9px)}
.card-media img{position:relative;z-index:1;max-height:150px;width:auto;object-fit:contain}
.flag{position:absolute;top:12px;inset-inline-start:12px;z-index:2;height:23px;padding-inline:10px;display:inline-flex;align-items:center;gap:6px;border-radius:999px;font-size:9.5px;font-weight:700;letter-spacing:.11em;background:rgba(255,255,255,.94);color:var(--ink);box-shadow:0 2px 10px rgba(22,24,28,.12)}
.flag i{width:5px;height:5px;border-radius:50%;background:currentColor}
.flag.new{color:#2F7A46}
.flag.hot{color:var(--brand)}
/* Condition: used yellow, open box blue (a new product carries no flag of its own) */
.flag.cond.used{color:#946200}
.flag.cond.used i{background:var(--gold)}
.flag.cond.open_box{color:#2F5BD3}
.flag.sale{background:var(--sale);color:#fff;font-variant-numeric:tabular-nums;letter-spacing:.02em;font-weight:800}
.fav{position:absolute;top:10px;inset-inline-end:10px;z-index:2;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--muted);box-shadow:var(--shadow-xs);transition:color .25s ease,background .25s ease}
.fav:hover{color:var(--sale);background:#fff}
.fav.is-on{color:var(--sale)}
.fav.is-on .ico{fill:currentColor}
.card:hover .card-media{background:radial-gradient(circle at 50% 62%,#FFFFFF,#F8EFE7 78%)}
.card-body{display:flex;flex:1;flex-direction:column;gap:9px;padding:15px 16px 16px}
.card-brand{display:flex;align-items:center;gap:7px;font-size:10px;font-weight:700;letter-spacing:.13em;color:var(--muted)}
.card-brand .dot{width:4px;height:4px;border-radius:50%;background:var(--ok)}
.card-stock{font-weight:500;letter-spacing:.02em;color:var(--ok)}
.card h3{font-family:var(--f-text);font-size:13.5px;font-weight:700;letter-spacing:.01em;text-transform:uppercase;line-height:1.25}
.card h3 a{transition:color .2s ease}
.card h3 a:hover{color:var(--brand-ink)}
.card-media > a{display:contents}
/* the key features stay on one line; one that does not fit fades out at the edge */
.specs{display:flex;flex-wrap:nowrap;gap:5px;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent)}
html[dir="rtl"] .specs{-webkit-mask-image:linear-gradient(-90deg,#000 calc(100% - 22px),transparent);mask-image:linear-gradient(-90deg,#000 calc(100% - 22px),transparent)}
.specs span{flex:none;height:22px;padding-inline:9px;display:inline-flex;align-items:center;border-radius:7px;background:#F4F3EF;font-size:10.5px;font-weight:600;color:var(--sub);white-space:nowrap}
/* a value (27", 165 Hz, 2.4GHz) keeps its own direction on a right-to-left page: its first letter decides */
html[dir="rtl"] .specs span{unicode-bidi:plaintext}
/* the price and the buttons sit at the bottom of every card, whatever is written above them */
.card-foot{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:11px;border-top:1px solid var(--line-soft)}
.prices{display:flex;flex-direction:column;justify-content:center;gap:1px;min-width:0;height:38px}
.price{font-size:17px;font-weight:700;letter-spacing:-.02em;line-height:1.25;white-space:nowrap;font-variant-numeric:tabular-nums}
.price .cur{margin-inline-start:4px;font-size:.6em;font-weight:700;letter-spacing:.06em;color:var(--muted)}
.price-old{font-size:11px;line-height:1.3;color:var(--muted);text-decoration:line-through;white-space:nowrap;font-variant-numeric:tabular-nums}
.rate{display:inline-flex;align-items:center;gap:4px;margin-inline-start:auto;height:24px;padding-inline:9px;border-radius:999px;background:#F3F3EE;font-size:11px;font-weight:600;color:var(--sub)}
.rate .ico{font-size:12px;color:var(--gold);fill:currentColor;stroke:none}
/* Two buttons per product: a soft one and a solid one. Hover lifts them a touch, deepens the colour and moves the icon. */
.buys{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,1fr);gap:8px}
/* A card's two buttons (the owner's wish, 2026-10-04): Add to cart, the main one, solid in the shop's colour across three
   quarters; Buy, the quick way to the product's page, soft in the same colour beside it, solid under the pointer */
.buys:not(.spot-buys) .liquid{height:42px;font-size:12.5px;font-weight:700;letter-spacing:0}
.buys:not(.spot-buys) .b-cart{background:var(--brand);color:rgb(255 255 255);box-shadow:inset 0 1px 0 rgb(255 255 255 / 22%),0 8px 18px -12px color-mix(in srgb,var(--brand) 85%,transparent)}
.buys:not(.spot-buys) .b-cart:hover{background:var(--brand-dark);color:rgb(255 255 255);box-shadow:inset 0 1px 0 rgb(255 255 255 / 22%),0 14px 26px -12px color-mix(in srgb,var(--brand) 95%,transparent)}
.buys:not(.spot-buys) .liquid{padding-inline:8px}
.buys:not(.spot-buys) .b-buy{gap:5px;padding-inline:6px;background:var(--brand-soft);color:var(--brand-ink);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand) 24%,transparent)}
.buys:not(.spot-buys) .b-buy:hover{background:var(--brand);color:rgb(255 255 255);box-shadow:0 12px 22px -12px color-mix(in srgb,var(--brand) 90%,transparent)}
.buys:not(.spot-buys) .b-buy:disabled{opacity:.6;cursor:default;transform:none;background:var(--brand-soft);color:var(--brand-ink)}
.buys .liquid.is-added,.buys .liquid.is-added:hover{background:#E8F3EA;color:#2F6B3D;box-shadow:inset 0 0 0 1.5px #8CC39A;transform:none}
.liquid{position:relative;display:flex;align-items:center;justify-content:center;gap:7px;height:40px;padding-inline:10px;border-radius:12px;font-size:11.5px;font-weight:650;letter-spacing:.01em;white-space:nowrap;transition:background-color .25s ease,color .25s ease,box-shadow .25s ease,transform .25s cubic-bezier(.3,1.4,.5,1)}
.liquid .ico{font-size:15px;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.liquid:hover{transform:translateY(-2px)}
.liquid:active{transform:translateY(0) scale(.97);transition-duration:.08s}
.liquid:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 35%,transparent)}
.b-cart{background:#F3F2ED;color:var(--ink)}
.b-cart:hover{background:#fff;color:var(--brand-ink);box-shadow:inset 0 0 0 1.5px var(--brand),0 10px 20px -12px color-mix(in srgb,var(--brand) 60%,transparent)}
.b-cart:hover .ico{transform:translateX(calc(3px * var(--x))) rotate(calc(-8deg * var(--x)))}
.b-buy{background:var(--brand);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.b-buy:hover{background:var(--brand-dark);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 12px 22px -10px color-mix(in srgb,var(--brand) 85%,transparent)}
.b-buy:hover .ico{transform:scale(1.22) rotate(-12deg)}
.b-ghost{background:rgba(255,255,255,.14);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.b-ghost:hover{background:#fff;color:var(--ink)}
/* "Added" for a moment after a click */
.liquid.is-added,.liquid.is-added:hover{background:#E8F3EA;color:#2F6B3D;box-shadow:inset 0 0 0 1.5px #8CC39A;transform:none}
.liquid.is-added .ico{transform:none;animation:pop .4s cubic-bezier(.3,1.6,.5,1)}
.card.is-flash{animation:flash 1.8s ease}
@keyframes flash{0%,55%{box-shadow:0 0 0 3px var(--brand),var(--shadow-md)}100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--brand) 0%,transparent)}}
@keyframes pop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}
.dot-n.is-bump{animation:bump .45s cubic-bezier(.3,1.6,.5,1)}
.empty{grid-column:1/-1;padding:46px 0;text-align:center;color:var(--muted);font-size:13px}

/* ---------- Category tiles: the same five categories, colours and icons as the bar ---------- */
.cats{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(212px,auto));gap:16px}
.cat{position:relative;display:flex;flex-direction:column;gap:14px;padding:20px 20px 18px;border:1px solid var(--line-soft);border-radius:var(--r-lg);background:linear-gradient(155deg,#fff 18%,var(--c-soft) 100%);overflow:hidden;isolation:isolate;transition:border-color .3s ease,box-shadow .3s ease}
.cat:hover{border-color:var(--c);box-shadow:var(--shadow-md)}
.cat-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cat .cat-ic{width:42px;height:42px;border-radius:13px;background:var(--c);color:#fff;box-shadow:0 10px 20px -12px var(--c)}
.cat .cat-ic .ico{font-size:21px}
.cat .cat-ic.is-pic{display:none}                 /* a category tile shows its big picture already */
.cat-top .cat-models{margin-inline-start:auto}
.cat-models{height:26px;padding-inline:10px;display:inline-flex;align-items:center;border-radius:999px;background:rgba(255,255,255,.85);font-size:11px;font-weight:650;color:var(--sub);box-shadow:var(--shadow-xs)}
.cat img{position:absolute;z-index:-1;inset-inline-end:14px;top:50%;translate:0 -46%;width:46%;max-height:60%;object-fit:contain;object-position:right center;filter:drop-shadow(0 18px 22px rgba(20,22,26,.2));transition:transform .5s cubic-bezier(.2,.8,.3,1)}
html[dir="rtl"] .cat img{object-position:left center}
.cat:hover img{transform:scale(1.05)}
.cat-copy{max-width:56%;margin-top:auto}
.cat h3{font-size:22px;letter-spacing:-.01em;text-transform:uppercase;line-height:1.05}
.cat p{margin:6px 0 0;font-size:12px;line-height:1.5;color:var(--sub)}
.cat-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.cat-from{font-size:11px;color:var(--muted)}
.cat-from b{display:block;font-size:15px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.cat-from .cur{margin-inline-start:4px;font-size:.66em;letter-spacing:.06em;color:var(--muted)}
.cat-go{display:grid;place-items:center;width:42px;height:42px;flex:none;border-radius:50%;background:#fff;color:var(--c);box-shadow:var(--shadow-xs);transition:background .25s ease,color .25s ease,transform .25s ease}
.cat-go .ico{font-size:17px}
.cat:hover .cat-go{background:var(--c);color:#fff;transform:translateX(calc(3px * var(--x)))}
/* the first tile is the tall one: its screen stands in the middle */
.cat.is-lead{grid-row:span 2}
.cat.is-lead img{left:auto;right:50%;top:44%;translate:50% -50%;width:80%;max-height:50%;object-position:center}
html[dir="rtl"] .cat.is-lead img{object-position:center}
.cat.is-lead .cat-copy{max-width:80%}
.cat.is-lead h3{font-size:30px}
.cat.is-lead p{font-size:13px}

/* ---------- Condition: open box, new and used in one slim row under the category bar, each a small tile in its own colour
   (icon, name, how many); a pick opens the categories that have it underneath, as small cards (condBento in index.html) ---------- */
#cond{padding-top:18px}                         /* the first thing on the page: close under the category bar */
#cond > .sec-head{margin-top:6px}               /* its heading too: no section above it to keep apart from */
#cond + .hero{margin-top:18px}
.cond-bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.cond-tile{display:flex;align-items:center;gap:16px;width:100%;min-width:0;padding-block:18px;padding-inline:20px 18px;border:1px solid var(--line-soft);border-radius:var(--r-lg);background:linear-gradient(120deg,#fff 45%,var(--c-soft) 100%);font:inherit;color:inherit;text-align:start;cursor:pointer;transition:border-color .3s ease,box-shadow .3s ease,transform .35s cubic-bezier(.3,1.4,.5,1)}
.cond-tile:hover{border-color:var(--c);box-shadow:0 16px 30px -22px var(--c);transform:translateY(-2px)}
.cond-tile:focus-visible{outline:none;border-color:var(--c);box-shadow:0 0 0 3px var(--c-soft)}
.cond-tile.is-on{border-color:var(--c);box-shadow:0 0 0 3px var(--c-soft),0 16px 30px -22px var(--c)}
.cond-ic{display:grid;place-items:center;width:54px;height:54px;flex:none;border-radius:16px;background:var(--c);color:#fff;box-shadow:0 12px 22px -12px var(--c);transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
.cond-ic .ico{font-size:25px}
.cond-tile:hover .cond-ic{transform:rotate(-6deg) scale(1.04)}
.cond-txt{display:flex;flex-direction:column;gap:6px;min-width:0}
.cond-top{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;min-width:0}
.cond-name{font-family:var(--f-head);font-size:17px;font-weight:800;line-height:1.1;letter-spacing:.01em;text-transform:uppercase;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cond-n{height:22px;padding-inline:9px;display:inline-flex;align-items:center;border-radius:999px;background:rgba(255,255,255,.85);font-size:11px;font-weight:650;color:var(--sub);box-shadow:var(--shadow-xs);font-variant-numeric:tabular-nums;white-space:nowrap}
.cond-desc{min-height:3em;font-size:12.5px;line-height:1.5;color:var(--sub);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cond-go{display:grid;place-items:center;width:34px;height:34px;margin-inline-start:auto;flex:none;border-radius:50%;background:#fff;color:var(--c);box-shadow:var(--shadow-xs);transition:background .25s ease,color .25s ease,transform .35s cubic-bezier(.3,1.4,.5,1)}
.cond-go .ico{font-size:16px}
.cond-tile:hover .cond-go{transform:translateY(2px)}
.cond-tile.is-on .cond-go{background:var(--c);color:#fff;transform:rotate(180deg)}
@media (max-width:1060px){
  .cond-tile{gap:14px;padding-inline:16px}
  .cond-ic{width:48px;height:48px;border-radius:14px}
  .cond-ic .ico{font-size:22px}
  .cond-go{display:none}
}
/* the categories of the picked condition: small cards */
.cond-cats{margin-top:12px;padding:14px;border:1px solid var(--line-soft);border-radius:var(--r-lg);background:linear-gradient(155deg,#fff 30%,var(--c-soft) 100%);animation:heroUp .4s cubic-bezier(.2,.8,.3,1)}
.cc-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.cc-title{display:flex;align-items:center;gap:10px;min-width:0;font-size:13px;color:var(--sub)}
.cc-title b{font-weight:750;color:var(--ink)}
.cc-title .cat-ic{width:30px;height:30px;border-radius:10px;background:var(--c);color:#fff}
.cc-head .see-all{flex:none;white-space:nowrap}
.cc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.cc{display:flex;align-items:center;gap:10px;min-width:0;padding:10px 12px;border:1px solid var(--line-soft);border-radius:14px;background:#fff;transition:border-color .3s ease,box-shadow .3s ease,transform .35s cubic-bezier(.3,1.4,.5,1);animation:heroUp .4s cubic-bezier(.2,.8,.3,1) backwards;animation-delay:calc(var(--i) * 40ms)}
.cc:hover{border-color:var(--c);box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.cc:focus-visible{outline:none;border-color:var(--c);box-shadow:0 0 0 3px var(--c-soft)}
.cc .cat-ic{width:34px;height:34px;border-radius:10px}
.cc-txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.cc-name{font-size:13px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-n{font-size:11.5px;color:var(--sub);white-space:nowrap}
.cc-go{display:grid;place-items:center;width:28px;height:28px;margin-inline-start:auto;flex:none;border-radius:50%;color:var(--c);transition:background .25s ease,color .25s ease,transform .25s ease}
.cc-go .ico{font-size:14px}
.cc:hover .cc-go{background:var(--c);color:#fff;transform:translateX(calc(2px * var(--x)))}

/* ---------- Wide promo ---------- */
.promo{position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:26px;min-height:330px;padding:40px;border-radius:var(--r-xl);overflow:hidden;isolation:isolate}
.promo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:78% 50%;z-index:-2}

.promo::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,rgba(9,8,7,.9) 6%,rgba(12,10,8,.62) 42%,rgba(12,10,8,.15) 72%)}
html[dir="rtl"] .promo::after{background:linear-gradient(-100deg,rgba(9,8,7,.9) 6%,rgba(12,10,8,.62) 42%,rgba(12,10,8,.15) 72%)}
.promo-copy{max-width:470px;color:#fff}
.promo-copy h3{margin-top:16px;font-size:clamp(26px,3.2vw,40px);line-height:1.02;text-transform:uppercase}
.promo-copy p{margin:14px 0 0;font-size:13px;line-height:1.65;color:rgba(255,255,255,.74)}
.promo-copy .btn{margin-top:22px}
.promo-stats{display:flex;flex-direction:column;gap:10px;align-self:flex-end}
.promo-stats div{min-width:150px;padding:12px 16px;border-radius:14px;background:rgba(255,255,255,.1);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.14);color:#fff}
.promo-stats b{display:block;font-family:var(--f-head);font-size:19px;letter-spacing:-.01em}
.promo-stats span{font-size:10.5px;color:rgba(255,255,255,.7)}

/* ---------- Brands: a bento of every brand in the shop. The biggest get a big tile with a product, some a wide or a
   long one, the rest a logo tile; the page picks the sizes so every row ends full (brandBento in index.html).
   Each tile has its brand colour (--bh, --bs) and a big faint logo in the corner. ---------- */
.bento-brands{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:minmax(178px,auto);gap:14px}
@media (min-width:1181px){
  .bento-brands{grid-auto-flow:dense}
  .bb.is-feature{grid-column:span 2;grid-row:span 2}
  .bb.is-wide{grid-column:span 2}
  .bb.is-long{grid-column:span 3}
}
.bb{--cta:var(--bh);position:relative;display:flex;flex-direction:column;gap:12px;min-width:0;padding:18px;border-radius:var(--r-lg);border:1px solid var(--line-soft);background:radial-gradient(120% 90% at 100% 100%,var(--bs) 0%,rgba(255,255,255,0) 70%),#fff;overflow:hidden;isolation:isolate;transition:border-color .3s ease,box-shadow .3s ease,transform .35s cubic-bezier(.3,1.4,.5,1)}
html[dir="rtl"] .bb{background:radial-gradient(120% 90% at 0% 100%,var(--bs) 0%,rgba(255,255,255,0) 70%),#fff}
.bb.is-dark{--cta:var(--brand)}
.bb:hover{border-color:var(--bh);box-shadow:0 24px 46px -28px var(--bh);transform:translateY(-3px)}
.bb.is-dark:hover{border-color:#CFD2D8;box-shadow:var(--shadow-md)}
.bb:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 35%,transparent)}
.bb.is-on{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent)}
/* the big faint logo in the corner */
.bb-mark{position:absolute;inset-inline-end:-10%;bottom:-22%;z-index:-2;width:66%;aspect-ratio:1;height:auto;fill:var(--bh);opacity:.055;transform:rotate(-12deg);transition:transform .7s cubic-bezier(.2,.8,.3,1),opacity .3s ease}
.bb:hover .bb-mark{transform:rotate(-3deg) scale(1.08);opacity:.09}
.bb-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.bb-logo{display:grid;place-items:center;width:52px;height:52px;flex:none;border-radius:16px;background:#fff;color:var(--bh);box-shadow:0 8px 18px -12px rgba(22,24,28,.45)}
.bb-logo .blogo{width:28px;height:28px}
.bb-logo .blogo.is-wide{width:42px;height:42px}
/* a logo that is a word gets a wider badge */
.bb-logo.is-wide{width:96px}
.bb-logo.is-wide .blogo.is-wide{width:74px;height:74px;margin-block:-11px}
.bb-tags{display:flex;align-items:center;gap:6px;margin-inline-start:auto}
/* on a tile with a screen on the right, the count sits by the logo so the screen stays clear */
.bb.is-wide .bb-top,.bb.is-long .bb-top{justify-content:flex-start}
.bb.is-wide .bb-tags,.bb.is-long .bb-tags{margin-inline-start:4px}
.bb-count{display:inline-flex;align-items:center;height:26px;padding-inline:10px;border-radius:999px;background:rgba(255,255,255,.9);font-size:11px;font-weight:650;color:var(--sub);box-shadow:var(--shadow-xs)}
.bb-new{display:inline-flex;align-items:center;height:22px;padding-inline:8px;border-radius:999px;background:var(--brand);color:#fff;font-size:9.5px;font-weight:800;letter-spacing:.1em}
.bb-copy{display:flex;flex-direction:column;gap:5px;margin-top:auto;max-width:58%}
.bb-name{display:block;font-family:var(--f-head);font-size:22px;font-weight:800;line-height:1.02;letter-spacing:.01em;text-transform:uppercase;color:var(--ink)}
.bb-note{font-size:12px;line-height:1.5;color:var(--sub)}
.bb-foot{display:flex;align-items:center;justify-content:space-between;gap:10px}
.bb-from{font-size:11px;color:var(--muted)}
.bb-from b{display:block;font-size:15px;font-weight:750;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.bb-from .cur{margin-inline-start:3px;font-size:.66em;letter-spacing:.06em;color:var(--muted)}
.bb-go{display:inline-flex;align-items:center;gap:7px;height:40px;padding-inline:15px;border-radius:13px;background:var(--cta);color:#fff;font-size:12.5px;font-weight:650;white-space:nowrap;box-shadow:0 10px 20px -12px var(--cta);transition:gap .25s ease,filter .2s ease}
.bb-go .ico{font-size:15px}
.bb:hover .bb-go{gap:11px;filter:brightness(1.06)}
.bb-shot{position:absolute;z-index:-1;object-fit:contain;filter:drop-shadow(0 18px 22px rgba(20,22,26,.22));transition:transform .55s cubic-bezier(.2,.8,.3,1)}
.bb:hover .bb-shot{transform:translateY(-5px) scale(1.05)}
/* big tile: the screen stands in the middle */
.bb.is-feature .bb-shot{left:50%;top:46%;translate:-50% -50%;width:74%;max-height:50%}
.bb.is-feature .bb-copy{max-width:86%}
.bb.is-feature .bb-name{font-size:34px}
.bb.is-feature .bb-note{font-size:13px}
/* wide and long tiles: the screen sits at the end (on the right, on the left right to left) */
.bb.is-wide .bb-shot,.bb.is-long .bb-shot{inset-inline-end:16px;top:50%;translate:0 -50%;width:42%;max-height:82%}
.bb.is-long .bb-shot{width:34%}
.bb.is-wide .bb-foot,.bb.is-long .bb-foot{max-width:58%}
/* logo tile: the logo is the picture */
.bb-big{display:grid;place-items:center;flex:1;min-height:60px;color:var(--bh)}
.bb-big .blogo{width:56px;height:56px;transition:transform .45s cubic-bezier(.3,1.4,.5,1)}
.bb-big .blogo.is-wide{width:100px;height:100px;margin-block:-22px}
.bb:hover .bb-big .blogo{transform:scale(1.1)}
.bb.is-small .bb-row{display:flex;align-items:flex-end;justify-content:space-between;gap:8px}
.bb.is-small .bb-name{font-size:15px}
.bb.is-small .bb-from b{font-size:13px}
.bb-arrow{display:grid;place-items:center;width:36px;height:36px;flex:none;border-radius:50%;background:#fff;color:var(--cta);box-shadow:var(--shadow-xs);transition:background .25s ease,color .25s ease,transform .25s ease}
.bb-arrow .ico{font-size:16px}
.bb:hover .bb-arrow{background:var(--cta);color:#fff;transform:translateX(calc(2px * var(--x)))}
@media (max-width:1180px){
  .bento-brands{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-flow:dense}
  .bb.is-feature{grid-column:span 2;grid-row:span 2}
  .bb.is-wide,.bb.is-long{grid-column:span 2}
  .bb.is-long .bb-shot{width:40%}
  /* the last tile takes the whole last row, so the grid ends without a hole */
  .bb.is-long:last-child{grid-column:1/-1}
}
@media (max-width:680px){
  .bento-brands{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(158px,auto);gap:10px}
  .bb{padding:14px}
  .bb.is-feature{grid-row:span 1;min-height:330px}
  .bb.is-feature .bb-name{font-size:26px}
  .bb-name{font-size:19px}
  .bb.is-wide .bb-note,.bb.is-long .bb-note{display:none}
  .bb-go{height:36px;padding-inline:12px;font-size:11.5px}
  .bb-logo{width:44px;height:44px;border-radius:14px}
  .bb-big .blogo{width:46px;height:46px}
  .bb-big .blogo.is-wide{width:84px;height:84px;margin-block:-18px}
  .bb.is-small .bb-from{display:none}
  .bb-arrow{width:32px;height:32px}
}

/* ---------- Special ---------- */
.special{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:14px}
.spot{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:330px;padding:30px;border-radius:var(--r-xl);overflow:hidden;background:linear-gradient(140deg,#1D1A17,#4A3527)}
.spot img{position:absolute;inset-inline-end:2%;top:46%;translate:0 -50%;height:76%;width:46%;object-fit:contain;object-position:center;filter:drop-shadow(0 26px 34px rgba(0,0,0,.45))}
.spot-copy{position:relative;z-index:2;max-width:56%;color:#fff}
.spot-tag{display:inline-flex;align-items:center;gap:7px;height:26px;padding-inline:12px;border-radius:999px;background:rgba(255,255,255,.16);font-size:10px;font-weight:700;letter-spacing:.16em}
.spot h3{margin-top:14px;font-size:30px;line-height:1.05;text-transform:uppercase}
.spot p{margin:12px 0 0;font-size:12.5px;line-height:1.6;color:rgba(255,255,255,.72)}
.spot .btn{margin-top:20px}
.spot-buys{margin-top:22px;max-width:320px}
.spot-buys .liquid{height:44px;font-size:12.5px}
.spot-side{display:grid;grid-template-rows:repeat(2,minmax(0,1fr));gap:14px}
.mini{position:relative;display:flex;align-items:center;gap:16px;padding:22px;border-radius:var(--r-xl);background:#fff;border:1px solid var(--line-soft);overflow:hidden}
.mini img{width:132px;flex:none;object-fit:contain}
.mini h4{font-size:15px;text-transform:uppercase}
.mini p{margin:7px 0 0;font-size:11.5px;color:var(--muted);line-height:1.55}
.mini .price{display:block;margin-top:10px;font-size:18px}
.mini-note{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-size:10.5px;font-weight:600;color:var(--brand)}

/* ---------- Special products: a bento of four sizes ---------- */
.sp-bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(250px,auto);gap:16px}
/* each tile: white with a faint glow of its brand colour (like the brand bento), its kind, a Special badge and its product */
.sp{position:relative;display:flex;flex-direction:column;gap:10px;min-width:0;padding:18px;border:1px solid var(--line-soft);border-radius:var(--r-lg);background:radial-gradient(110% 80% at 100% 0%,var(--sp-soft,#F3F2ED) 0%,rgba(255,255,255,0) 62%),#fff;overflow:hidden;isolation:isolate;transition:border-color .3s ease,box-shadow .3s ease,transform .35s cubic-bezier(.3,1.4,.5,1)}
.sp:hover{border-color:var(--sp,var(--brand));box-shadow:0 24px 46px -28px var(--sp,var(--brand));transform:translateY(-3px)}
.sp-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.sp-kind{min-width:0;height:24px;padding-inline:10px;display:inline-flex;align-items:center;border-radius:999px;background:rgba(255,255,255,.92);box-shadow:var(--shadow-xs);font-size:9.5px;font-weight:750;letter-spacing:.11em;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-star{flex:none;display:inline-flex;align-items:center;gap:5px;height:24px;padding-inline:9px;border-radius:999px;background:var(--brand);color:#fff;font-size:9.5px;font-weight:800;letter-spacing:.1em;box-shadow:0 8px 16px -10px var(--brand)}
.sp-star .ico{font-size:12px;fill:currentColor}
.sp-shot{position:relative;display:grid;place-items:center;flex:1;min-height:110px}
.sp-shot img{width:auto;max-width:88%;max-height:150px;object-fit:contain;filter:drop-shadow(0 18px 22px rgba(20,22,26,.2));transition:transform .55s cubic-bezier(.2,.8,.3,1)}
.sp:hover .sp-shot img{transform:translateY(-5px) scale(1.04)}
.sp-copy{display:flex;flex-direction:column;min-width:0}
.sp h3{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-family:var(--f-text);font-size:13px;font-weight:750;line-height:1.35;letter-spacing:.02em;text-transform:uppercase;color:var(--ink)}
.sp h3 a:hover{color:var(--brand-ink)}
.sp-list{margin-top:9px;display:flex;flex-direction:column;gap:5px}
.sp-list li{display:flex;align-items:flex-start;gap:6px;font-size:11.5px;color:var(--sub);line-height:1.45}
.sp-list .ico{font-size:12px;margin-top:2px;color:var(--sp,var(--brand));flex:none}
.sp-foot{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 10px;margin-top:10px}
.sp-foot .price{font-size:18px}
.sp-stock{font-size:11px;font-weight:650;color:var(--ok)}
.sp-stock.is-out{color:var(--sale)}
.sp .buys{margin-top:12px}
/* the sizes */
.sp-big{grid-column:span 2;grid-row:span 2;padding:24px}
.sp-big .sp-shot img{max-height:320px}
.sp-big h3{font-family:var(--f-head);font-size:26px;font-weight:800;line-height:1.06;letter-spacing:-.005em}
.sp-big .sp-foot .price{font-size:26px}
.sp-wide,.sp-full{grid-column:span 2;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-rows:auto 1fr;gap:10px 18px}
.sp-full{grid-column:1 / -1;padding:24px}
.sp-wide .sp-top,.sp-full .sp-top{grid-column:1 / -1}
.sp-wide .sp-copy,.sp-full .sp-copy{align-self:center}
.sp-wide .sp-shot img{max-height:190px}
.sp-full .sp-shot img{max-height:240px}
.sp-wide h3{font-size:14px}
.sp-full h3{font-family:var(--f-head);font-size:24px;font-weight:800;line-height:1.08}

/* ---------- Tech ---------- */
.tech{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;padding:22px;border-radius:var(--r-lg);background:#fff;border:1px solid var(--line-soft)}
.tech-item{display:flex;flex-direction:column;align-items:center;gap:10px;padding:14px 8px;border-radius:var(--r);text-align:center;transition:background .25s}
.tech-item:hover{background:#FAFAF6}
.tech-ic{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--brand-soft);color:var(--brand)}
.tech-ic .ico{font-size:22px}
.tech-item b{font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.tech-item span{font-size:10.5px;line-height:1.5;color:var(--muted)}

/* ---------- Club ---------- */
.club{position:relative;display:grid;grid-template-columns:230px minmax(0,1fr) auto;align-items:center;gap:28px;margin-top:22px;padding:30px;border-radius:var(--r-xl);background:linear-gradient(115deg,var(--brand-dark),var(--brand) 52%,color-mix(in srgb,var(--brand) 65%,rgb(255 255 255)));color:#fff;overflow:hidden}
html[dir="rtl"] .club{background:linear-gradient(-115deg,var(--brand-dark),var(--brand) 52%,color-mix(in srgb,var(--brand) 65%,rgb(255 255 255)))}
.club::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 78% 20%,rgba(255,255,255,.18),transparent 55%)}
html[dir="rtl"] .club::after{background:radial-gradient(circle at 22% 20%,rgba(255,255,255,.18),transparent 55%)}
.club>*{position:relative;z-index:2}
.club-card{position:relative;aspect-ratio:1.6;border-radius:18px;background:linear-gradient(135deg,#FBE6D6,#EEB183);box-shadow:0 22px 40px -20px rgba(0,0,0,.6);display:flex;flex-direction:column;justify-content:space-between;padding:18px;color:var(--brand-ink);transform:rotate(calc(-4deg * var(--x)))}
.club-card b{font-family:var(--f-head);font-size:17px;letter-spacing:.14em}
.club-card span{font-size:9px;letter-spacing:.3em;opacity:.7}
.club-card i{align-self:flex-end;width:34px;height:22px;border-radius:5px;background:rgba(255,255,255,.55)}
.club h3{font-size:26px;text-transform:uppercase}
.club p{margin:10px 0 0;max-width:520px;font-size:12.5px;line-height:1.6;color:rgba(255,255,255,.78)}
.club-perks{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.club-perk{display:inline-flex;align-items:center;gap:7px;height:30px;padding-inline:12px;border-radius:999px;background:rgba(255,255,255,.14);font-size:11px}
.club-perk .ico{font-size:14px}
.club-cta{display:flex;flex-direction:column;align-items:center;gap:8px}
.club-cta small{font-size:10.5px;color:rgba(255,255,255,.7)}

/* ---------- Trust ---------- */
.trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin:34px 0 10px;padding:24px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trust-item{display:flex;align-items:center;gap:13px}
.trust-ic{display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:12px;background:#fff;border:1px solid var(--line-soft);color:var(--brand)}
.trust-ic .ico{font-size:19px}
.trust b{display:block;font-size:12.5px}
.trust span{font-size:11px;color:var(--muted)}

/* ---------- Footer ---------- */
.foot{margin-top:36px;padding:44px 0 0}
.foot-grid{display:grid;grid-template-columns:minmax(260px,1.4fr) repeat(4,minmax(150px,1fr));gap:clamp(20px,3vw,48px)}
.foot-about p{margin:16px 0 0;max-width:280px;font-size:12px;line-height:1.7;color:var(--muted)}
.socials{display:flex;gap:9px;margin-top:18px}
.socials a{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;border:1px solid var(--line);background:#fff;color:var(--sub);transition:color .2s,border-color .2s,transform .2s}
.socials a:hover{color:#fff;background:var(--brand);border-color:var(--brand)}
.foot h4{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase}
.foot ul{margin-top:14px;display:flex;flex-direction:column;gap:9px}
.foot li a,.foot-contact li{font-size:12px;color:var(--muted);transition:color .2s}
.foot li a:hover{color:var(--ink)}
.foot-contact li{display:flex;align-items:flex-start;gap:8px}
.foot-contact .ico{font-size:14px;margin-top:1px;color:var(--brand)}
.foot-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:38px;padding:18px 0 26px;border-top:1px solid var(--line);font-size:11.5px;color:var(--muted)}
.foot-bar div{display:flex;gap:20px}
.foot-bar a:hover{color:var(--ink)}

/* ---------- Toast: a light card that can carry one action (Undo, View cart) ---------- */
.toast{position:fixed;left:50%;bottom:26px;z-index:95;display:flex;align-items:center;gap:10px;width:max-content;max-width:calc(100vw - 32px);padding:9px 10px 9px 10px;border-radius:16px;background:#fff;color:var(--ink);font-size:12.5px;font-weight:550;border:1px solid var(--line);box-shadow:0 24px 50px -20px rgba(22,24,28,.4);opacity:0;transform:translate(-50%,14px);pointer-events:none;transition:opacity .25s,transform .35s cubic-bezier(.2,.9,.3,1)}
.toast.is-on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.toast-ic{display:grid;place-items:center;width:28px;height:28px;flex:none;border-radius:50%;background:#E8F3EA;color:var(--ok)}
.toast-ic .ico{font-size:15px;stroke-width:2.2}
#toastMsg{padding-inline-end:4px}
.toast-act{flex:none;height:30px;padding-inline:12px;border-radius:10px;background:var(--brand-soft);color:var(--brand-ink);font-size:12px;font-weight:700;transition:background .2s ease}
.toast-act:hover{background:#F8D9C4}
.toast-act[hidden]{display:none}

/* ---------- Pop-up windows (search, account, contact) and side sheets (cart, wishlist) ---------- */
.modal,.sheet{position:fixed;inset:0;z-index:85;visibility:hidden;transition:visibility 0s linear .38s}
.modal.is-open,.sheet.is-open{visibility:visible;transition:none}
.modal-bg,.sheet-bg{position:absolute;inset:0;background:rgba(24,20,16,.44);backdrop-filter:blur(4px);opacity:0;transition:opacity .3s ease}
.modal.is-open .modal-bg,.sheet.is-open .sheet-bg{opacity:1}
.modal{display:grid;place-items:center;padding:24px}
.modal-box{position:relative;width:min(100%,var(--mw,480px));max-height:calc(100vh - 48px);overflow:auto;overscroll-behavior:contain;border-radius:26px;background:#fff;box-shadow:0 40px 90px -30px rgba(0,0,0,.5);opacity:0;transform:translateY(16px) scale(.97);transition:opacity .25s ease,transform .38s cubic-bezier(.2,.9,.3,1)}
.modal.is-open .modal-box{opacity:1;transform:none}
.modal-x{position:absolute;top:16px;inset-inline-end:16px;z-index:3}
.sheet-panel{position:absolute;top:0;bottom:0;inset-inline-end:0;display:flex;flex-direction:column;width:min(440px,100vw);background:var(--bg);box-shadow:-30px 0 70px -30px rgba(0,0,0,.45);transform:translateX(calc(102% * var(--x)));transition:transform .42s cubic-bezier(.3,1,.35,1)}
html[dir="rtl"] .sheet-panel{box-shadow:30px 0 70px -30px rgba(0,0,0,.45)}
.sheet.is-open .sheet-panel{transform:none}
.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:14px;padding-inline:18px 16px;border-bottom:1px solid var(--line)}
.sheet-title{display:flex;align-items:center;gap:12px}
.sheet-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:13px;background:var(--brand-soft);color:var(--brand)}
.sheet-ic .ico{font-size:19px}
.sheet-head b{display:block;font-family:var(--f-head);font-size:16px;letter-spacing:.08em;text-transform:uppercase}
.sheet-head small{font-size:11.5px;color:var(--muted)}
.sheet-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:14px 16px 20px}
.sheet-foot{padding:16px 18px 18px;border-top:1px solid var(--line);background:#fff}
.sheet-foot:empty{display:none}
.sheet-foot .btn{width:100%;justify-content:center;height:50px;margin-top:14px;font-size:14px;border-radius:14px}
.sheet-note{margin:10px 0 0;text-align:center;font-size:11px;color:var(--muted)}
.sheet-label{margin:24px 4px 10px;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* the free-delivery bar */
.ship{margin:14px 16px 0;padding:12px 14px;border-radius:14px;background:#fff;border:1px solid var(--line-soft);font-size:12px;color:var(--sub)}
.ship:empty{display:none}
.ship b{color:var(--ink);font-weight:700}
.ship-line{display:flex;align-items:center;gap:9px}
.ship-line .ico{font-size:17px;color:var(--brand);flex:none}
.ship-bar{display:block;height:6px;margin-top:10px;border-radius:6px;background:#F0EEE7;overflow:hidden}
.ship-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,color-mix(in srgb,var(--brand) 65%,rgb(255 255 255)),var(--brand));transition:width .5s cubic-bezier(.3,1,.4,1)}
/* right to left the fill starts on the right: turned round, its gradient (in either colour) starts there too */
html[dir="rtl"] .ship-bar i{scale:-1 1}
.ship.is-free .ship-line .ico{color:var(--ok)}
.ship.is-free .ship-bar i{background:linear-gradient(90deg,#8CC39A,var(--ok))}

/* a line in the cart or the wishlist */
.ci{display:grid;grid-template-columns:78px minmax(0,1fr) auto;gap:12px;align-items:start;padding:11px;border-radius:17px;background:#fff;border:1px solid var(--line-soft);transition:opacity .22s ease,transform .3s ease}
.ci + .ci{margin-top:8px}
.ci.is-out{opacity:0;transform:translateX(calc(26px * var(--x)))}
.ci-shot{display:grid;place-items:center;height:64px;border-radius:12px;background:radial-gradient(circle at 50% 60%,#fff 20%,#F1F0EB 85%)}
.ci-shot img{max-height:52px;width:auto;object-fit:contain;filter:drop-shadow(0 5px 6px rgba(22,24,28,.15))}
.ci b{display:block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;line-height:1.3}
.ci small{display:block;margin-top:2px;font-size:11px;color:var(--muted)}
.ci-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 10px;margin-top:10px}
.ci-price{font-size:14px;font-weight:750;font-variant-numeric:tabular-nums;white-space:nowrap}
.ci-price .cur{margin-inline-start:3px;font-size:.66em;letter-spacing:.06em;color:var(--muted)}
.ci-price s{margin-inline-start:6px;font-size:11px;font-weight:500;color:var(--muted)}
.ci-x{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;color:var(--muted);transition:background .2s ease,color .2s ease}
.ci-x:hover{background:#FBEAEA;color:var(--sale)}
.ci-x .ico{font-size:16px}
.ci-x.is-heart{color:var(--sale)}
.ci-x.is-heart .ico{fill:currentColor}
.qty{display:inline-flex;align-items:center;height:32px;border:1px solid var(--line);border-radius:10px;background:#fff}
.qty button{display:grid;place-items:center;width:30px;height:100%;color:var(--sub);transition:color .2s ease}
.qty button:hover{color:var(--brand)}
.qty button:disabled{opacity:.3;cursor:default}
.qty button .ico{font-size:14px;stroke-width:2}
.qty output{min-width:24px;text-align:center;font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums}
.ci-add{display:inline-flex;align-items:center;gap:6px;height:32px;padding-inline:12px;border-radius:10px;background:var(--brand-soft);color:var(--brand-ink);font-size:11.5px;font-weight:700;transition:background .2s ease,color .2s ease}
.ci-add:hover{background:var(--brand);color:#fff}
.ci-add .ico{font-size:14px}
/* in the wishlist the price and the button always sit the same way: price, then the button under it */
#wishBody .ci-row{flex-direction:column;align-items:flex-start;gap:8px}
.ci-rate{display:inline-flex;align-items:center;gap:3px;margin-top:4px;font-size:11px;font-weight:600;color:var(--sub)}
.ci-rate .ico{font-size:12px;color:var(--gold);fill:currentColor;stroke:none}
.sum-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:12.5px;color:var(--sub)}
.sum-row + .sum-row{margin-top:7px}
.sum-row b{color:var(--ink);font-weight:650;font-variant-numeric:tabular-nums}
.sum-row b.is-free{color:var(--ok)}
.sum-row.is-total{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line);font-size:14px;font-weight:650;color:var(--ink)}
.sum-row.is-total b{font-size:20px;font-weight:800}
.sum-row .cur{margin-inline-start:3px;font-size:.62em;letter-spacing:.06em;color:var(--muted)}

/* empty and done states */
.empty-state{display:flex;flex-direction:column;align-items:center;text-align:center;padding:38px 14px 18px}
.empty-ic{display:grid;place-items:center;width:84px;height:84px;border-radius:28px;background:var(--brand-soft);color:var(--brand);transform:rotate(-6deg)}
.empty-ic .ico{font-size:38px}
.empty-state h4{margin-top:20px;font-size:18px;text-transform:uppercase}
.empty-state p{margin:8px 0 0;max-width:290px;font-size:12.5px;line-height:1.6;color:var(--muted)}
.empty-state .btn{margin-top:18px}
.done-ic{display:grid;place-items:center;width:84px;height:84px;border-radius:50%;background:#E8F3EA;color:var(--ok);animation:pop .5s cubic-bezier(.3,1.6,.5,1) both}
.done-ic .ico{font-size:40px;stroke-width:2.2}

/* ---------- Search window ---------- */
.modal.is-search{place-items:start center;padding-top:min(11vh,100px)}
.srch{--mw:700px;display:flex;flex-direction:column;max-height:min(660px,calc(100vh - 130px));overflow:hidden}
.sr-top{display:flex;align-items:center;gap:10px;padding:14px;border-bottom:1px solid var(--line-soft)}
.sr-box{position:relative;flex:1;display:flex;align-items:center;gap:12px;height:54px;padding-block:0;padding-inline:16px 8px;border-radius:16px;background:#F6F5F1;border:1.5px solid transparent;transition:border-color .2s ease,background .2s ease,box-shadow .2s ease}
.sr-box:focus-within{background:#fff;border-color:var(--brand);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 12%,transparent)}
.sr-box > .ico{font-size:20px;color:var(--brand);flex:none}
.sr-box input{flex:1;min-width:0;height:100%;border:0;background:none;outline:none;font-size:16px;font-weight:550}
.sr-box input::-webkit-search-cancel-button{display:none}
.sr-box .tw{position:absolute;left:48px;right:48px;top:50%;translate:0 -50%;font-size:16px;color:#A2A694;white-space:nowrap;overflow:hidden;pointer-events:none}
.sr-box.has-text .tw{display:none}
.sr-clear{display:grid;place-items:center;width:32px;height:32px;flex:none;border-radius:10px;color:var(--muted)}
.sr-clear:hover{background:#EFEDE6;color:var(--ink)}
.sr-clear[hidden]{display:none}
.sr-esc{flex:none;height:34px;padding-inline:11px;border-radius:10px;border:1px solid var(--line);font-size:11.5px;font-weight:700;color:var(--muted)}
.sr-esc:hover{color:var(--ink);border-color:#CFCABB}
.sr-esc .k-ph{display:none}
.sr-body{position:relative;flex:1;overflow-y:auto;overscroll-behavior:contain;padding:4px 14px 16px}
.sr-label{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:16px 6px 8px;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.sr-label button{font-size:11.5px;font-weight:650;letter-spacing:0;text-transform:none;color:var(--brand)}
.sr-chips{display:flex;flex-wrap:wrap;gap:6px;padding-inline:4px}
.sr-chip{display:inline-flex;align-items:center;gap:7px;height:34px;padding-inline:12px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:12.5px;font-weight:550;color:var(--sub);transition:border-color .15s ease,color .15s ease,background .15s ease}
.sr-chip .ico{font-size:14px;color:var(--muted)}
.sr-chip.sr-brand{padding-inline-start:5px}
.sr-chip i{font-style:normal;font-size:10.5px;color:var(--muted)}
.sr-chip.is-active{border-color:var(--brand);color:var(--brand-ink);background:var(--brand-soft)}
.sr-cats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.sr-cat{display:flex;align-items:center;gap:10px;padding:8px;border-radius:14px;border:1px solid var(--line-soft);background:#fff;text-align:start;transition:border-color .15s ease,box-shadow .15s ease}
.sr-cat b{display:block;font-size:12.5px;font-weight:650}
.sr-cat small{font-size:11px;color:var(--muted)}
.sr-cat.is-active{border-color:var(--c);box-shadow:0 0 0 3px var(--c-soft)}
.sr-cat.is-active .cat-ic{background:var(--c);color:#fff}
.sr-prod{display:flex;align-items:center;gap:12px;width:100%;padding:8px 10px;border-radius:14px;text-align:start;transition:background .12s ease}
.sr-prod.is-active{background:#F6F5F1}
.sr-shot{display:grid;place-items:center;width:60px;height:46px;flex:none;border-radius:11px;background:radial-gradient(circle at 50% 60%,#fff 20%,#F1F0EB 85%)}
.sr-shot img{max-height:38px;width:auto}
.sr-prod b{display:block;font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.02em}
.sr-prod small{display:block;margin-top:1px;font-size:11px;color:var(--muted)}
.sr-prod mark{padding:0 1px;border-radius:3px;background:color-mix(in srgb,var(--brand) 20%,transparent);color:inherit}
.sr-prod .price{margin-inline-start:auto;font-size:13.5px}
/* the small IQD next to a price stays on the same line, whatever the row does with its other small text */
.price .cur,.ci-price .cur{display:inline;margin-top:0}
.sr-prod .go{font-size:15px;color:var(--brand);opacity:0;transition:opacity .12s ease}
.sr-prod.is-active .go{opacity:1}
.sr-all{display:flex;align-items:center;gap:10px;width:100%;margin-top:6px;padding:12px 14px;border-radius:14px;background:var(--brand-soft);color:var(--brand-ink);font-size:12.5px;font-weight:650;text-align:start;transition:background .15s ease,color .15s ease}
.sr-all .ico{margin-inline-start:auto;font-size:16px}
.sr-all.is-active{background:var(--brand);color:#fff}
.sr-empty{display:flex;flex-direction:column;align-items:center;padding:30px 10px 10px;text-align:center}
.sr-empty h4{margin-top:18px;font-size:17px;text-transform:uppercase}
.sr-empty p{margin:6px 0 16px;font-size:12.5px;color:var(--muted)}
.sr-empty .sr-chips{justify-content:center}
.sr-foot{display:flex;gap:18px;padding:10px 18px;border-top:1px solid var(--line-soft);background:#FAFAF7;font-size:11px;color:var(--muted)}
kbd{display:inline-grid;place-items:center;min-width:20px;height:20px;padding-inline:5px;margin-inline-end:4px;border-radius:5px;border:1px solid var(--line);border-bottom-width:2px;background:#fff;font:600 10.5px var(--f-text);color:var(--sub)}

/* ---------- Sign in / create account ---------- */
.auth{--mw:900px;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);overflow:hidden}
.auth-art{position:relative;display:flex;flex-direction:column;min-height:600px;padding:32px 30px;background:radial-gradient(90% 60% at 80% 8%,#FFB37E,rgba(255,179,126,0) 60%),linear-gradient(160deg,color-mix(in srgb,var(--brand) 75%,rgb(255 255 255)),var(--brand) 48%,color-mix(in srgb,var(--brand) 80%,rgb(0 0 0)));color:#fff;overflow:hidden;isolation:isolate}
.auth-art .logo-mark{background:rgba(255,255,255,.2);box-shadow:none}
.auth-art h3{margin-top:28px;font-size:30px;line-height:1.04;text-transform:uppercase}
.auth-art ul{display:grid;gap:11px;margin-top:22px}
.auth-art li{display:flex;align-items:center;gap:10px;font-size:13px;color:rgba(255,255,255,.92)}
.tick{display:grid;place-items:center;width:22px;height:22px;flex:none;border-radius:50%;background:rgba(255,255,255,.22)}
.tick .ico{font-size:12px;stroke-width:2.4}
.auth-art img{position:absolute;inset-inline-end:-22%;bottom:-2%;z-index:-1;width:100%;filter:drop-shadow(0 24px 30px rgba(80,24,4,.45))}
.auth-main{position:relative;padding:30px 34px 26px}
.auth-tabs{position:relative;display:grid;grid-template-columns:1fr 1fr;margin-inline-end:52px;padding:4px;border-radius:14px;background:#F3F2ED}
.auth-tabs[hidden]{display:none}
.auth-thumb{position:absolute;top:4px;bottom:4px;inset-inline-start:4px;width:calc(50% - 4px);border-radius:11px;background:#fff;box-shadow:0 1px 2px rgba(22,24,28,.08),0 6px 14px -8px rgba(22,24,28,.3);transition:transform .4s cubic-bezier(.3,1.2,.4,1)}
.auth[data-view="up"] .auth-thumb{transform:translateX(calc(100% * var(--x)))}
.auth-tab{position:relative;z-index:1;height:40px;font-size:13px;font-weight:650;color:var(--muted);transition:color .25s ease}
.auth-tab.is-on{color:var(--ink)}
.auth-main h2{margin-top:24px;font-size:25px;text-transform:uppercase}
.auth[data-view="me"] .auth-main h2{margin-top:6px}
.auth-sub{margin:6px 0 0;font-size:12.5px;line-height:1.55;color:var(--muted)}
.auth-form{display:grid;gap:14px;margin-top:20px}
.auth-form[hidden],.acct[hidden],.sent[hidden]{display:none}
.fld{display:grid;gap:6px;min-width:0}
.fld[hidden]{display:none}
.fld > label,.fld-lbl{font-size:12px;font-weight:650;color:var(--sub)}
.fld-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.fld-box{display:flex;align-items:center;gap:10px;height:48px;padding-inline:14px;border:1.5px solid var(--line);border-radius:13px;background:#fff;transition:border-color .2s ease,box-shadow .2s ease}
.fld-box:focus-within{border-color:var(--brand);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 12%,transparent)}
.fld-box > .ico{font-size:17px;color:var(--muted);flex:none}
.fld-box input,.fld-box textarea{flex:1;min-width:0;height:100%;border:0;background:none;outline:none;font-size:13.5px}
.fld-box.is-area{height:auto;align-items:flex-start;padding-block:12px}
.fld-box textarea{min-height:104px;resize:vertical;font:inherit;font-size:13.5px}
.fld-pre{flex:none;padding-inline-end:10px;border-inline-end:1px solid var(--line);font-size:13px;font-weight:650;color:var(--sub);font-variant-numeric:tabular-nums}
/* right to left, the +964 still reads left to right (a left-to-right mark before it) */
html[dir="rtl"] .fld-pre::before{content:"\200E"}
.fld.is-bad .fld-box,.fld.is-bad .sub-box{border-color:var(--sale);box-shadow:0 0 0 4px rgba(178,58,43,.1)}
.fld-err{font-style:normal;font-size:11.5px;font-weight:550;color:var(--sale)}
.fld-err:empty{display:none}
.fld-foot{display:flex;justify-content:space-between;gap:10px}
.fld-foot small{margin-inline-start:auto;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.eye{display:grid;place-items:center;width:34px;height:34px;margin-inline-end:-6px;border-radius:10px;color:var(--muted)}
.eye:hover{color:var(--ink);background:#F3F2ED}
.eye .ico{font-size:17px}
.meter{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.meter i{height:4px;border-radius:4px;background:#ECEAE3;transition:background .3s ease}
.meter[data-s="1"] i:nth-child(-n+1){background:var(--sale)}
.meter[data-s="2"] i:nth-child(-n+2){background:var(--gold)}
.meter[data-s="3"] i:nth-child(-n+3){background:#7DB88A}
.meter[data-s="4"] i{background:var(--ok)}
.meter-txt{font-size:11px;color:var(--muted)}
.auth-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.check{position:relative;display:inline-flex;align-items:center;gap:9px;font-size:12px;color:var(--sub);cursor:pointer}
.check input{position:absolute;opacity:0;width:1px;height:1px}
.check i{display:grid;place-items:center;width:19px;height:19px;flex:none;border-radius:6px;border:1.5px solid #CFCABB;background:#fff;transition:background .2s ease,border-color .2s ease}
.check input:checked + i{background:var(--brand);border-color:var(--brand)}
.check input:checked + i::after{content:"";width:9px;height:5px;border:2px solid #fff;border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg)}
.check input:focus-visible + i{box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 30%,transparent)}
.check a{font-weight:650;color:var(--brand)}
.fld > label.check{font-weight:500}
.link{font-size:12px;font-weight:650;color:var(--brand)}
.link:hover{text-decoration:underline}
.btn-block{width:100%;justify-content:center;height:50px;font-size:14px;border-radius:14px}
.btn.is-busy{pointer-events:none;opacity:.85}
.btn.is-busy::after{content:"";width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.auth-switch{margin:2px 0 0;text-align:center;font-size:12.5px;color:var(--muted)}
.auth-switch button{font-weight:700;color:var(--brand)}
.auth-demo{margin:16px 0 0;text-align:center;font-size:10.5px;color:#B0B3A5}
/* The shop's own Google button (it opens Google's window), and "or use your email" under it; gone when Google cannot be reached */
.g-wrap{display:grid;gap:16px}
.auth.no-g .g-wrap{display:none}
.g-btn{position:relative;display:flex;align-items:center;justify-content:center;gap:12px;width:100%;height:52px;padding-inline:16px;border:1.5px solid var(--line);border-radius:14px;background:var(--card);font-size:14px;font-weight:650;color:var(--ink);box-shadow:0 1px 2px rgba(22,24,28,.05);transition:border-color .2s ease,box-shadow .25s ease,transform .2s cubic-bezier(.2,.8,.3,1)}
.g-btn:hover{border-color:#CFCDC4;box-shadow:0 12px 26px -16px rgba(22,24,28,.4);transform:translateY(-1px)}
.g-btn:active{transform:scale(.985);box-shadow:0 1px 2px rgba(22,24,28,.05)}
.g-btn:focus-visible{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 14%,transparent)}
.g-logo{position:relative;display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:rgb(255 255 255);box-shadow:0 0 0 1px rgba(22,24,28,.08),0 2px 6px -2px rgba(22,24,28,.18)}
.g-logo svg{width:17px;height:17px;transition:opacity .2s ease}
.g-txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.g-last{position:absolute;inset-inline-end:12px;padding:3px 8px;border-radius:999px;background:color-mix(in srgb,var(--brand) 12%,transparent);font-size:10.5px;font-weight:700;color:var(--brand)}
.g-last[hidden]{display:none}
.g-btn.is-busy{pointer-events:none;color:var(--muted)}
.g-btn.is-busy .g-logo svg{opacity:0}
.g-btn.is-busy .g-logo::after{content:"";position:absolute;inset:6px;border-radius:50%;border:2px solid #E4E2DA;border-top-color:#4285F4;animation:spin .7s linear infinite}
@media (max-width:420px){.g-last{display:none}}
@media (prefers-reduced-motion:reduce){.g-btn,.g-btn:hover{transform:none}}
.auth-or{display:flex;align-items:center;gap:12px;margin:0;font-size:11.5px;font-weight:600;color:var(--muted)}
.auth-or::before,.auth-or::after{content:"";flex:1;height:1px;background:var(--line)}
/* an email code: where it went, the six digits, and asking for another */
.code-to{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:#F3F2ED}
.code-ic{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:11px;background:#fff;color:var(--brand);font-size:18px}
.code-to > span:not(.code-ic){display:grid;flex:1;min-width:0}
.code-to small{font-size:11.5px;color:var(--muted)}
.code-to b{overflow:hidden;font-size:13.5px;text-overflow:ellipsis;white-space:nowrap;text-align:start}
.code-box{height:58px}
.code-box input{padding-inline-start:.5em;font-family:var(--f-num);font-size:24px;font-weight:700;letter-spacing:.5em;text-align:center;font-variant-numeric:tabular-nums}
.code-box input::placeholder{color:#C9C7BE}
.code-again{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 6px}
.code-again [hidden]{display:none}
.code-note{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:11.5px;color:var(--muted)}
.code-note [hidden]{display:none}
.acct{display:grid;gap:14px;margin-top:20px}
.acct-head{display:flex;align-items:center;gap:14px}
.avatar,.me{display:grid;place-items:center;border-radius:18px;background:linear-gradient(160deg,color-mix(in srgb,var(--brand) 75%,rgb(255 255 255)),var(--brand));color:#fff;font-family:var(--f-head);font-weight:800;letter-spacing:.04em}
.avatar{width:56px;height:56px;font-size:19px}
.me{width:30px;height:30px;border-radius:10px;font-size:11px}
.icon-btn.is-me{border-color:#F6D9C7}
/* a customer with a picture shows it instead of their initials */
.avatar.is-pic,.me.is-pic{overflow:hidden;background:#F1F0EB}
.avatar.is-pic img,.me.is-pic img{width:100%;height:100%;object-fit:cover}
.acct-head b{display:block;font-size:16px}
.acct-head small{font-size:12px;color:var(--muted)}
.acct-badge{display:inline-flex;align-items:center;gap:5px;height:22px;margin-top:4px;padding-inline:9px;border-radius:999px;background:var(--brand-soft);color:var(--brand-ink);font-size:10.5px;font-weight:700;letter-spacing:.06em}
.acct-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.acct-stats div{padding:13px 8px;border-radius:15px;background:#F7F6F2;text-align:center}
.acct-stats b{display:block;font-size:17px;font-variant-numeric:tabular-nums;white-space:nowrap}
.acct-stats b .cur{margin-inline-start:2px;font-size:.6em;color:var(--muted)}
.acct-stats span{font-size:11px;color:var(--muted)}
.acct-links{display:grid;gap:6px}
.acct-link{display:flex;align-items:center;gap:12px;height:50px;padding-inline:14px;border-radius:14px;border:1px solid var(--line-soft);background:#fff;font-size:13px;font-weight:600;text-align:start;transition:border-color .2s ease,background .2s ease}
.acct-link:hover{border-color:var(--brand);background:#FFFBF8}
.acct-link .ico{font-size:17px;color:var(--brand)}
.acct-link .go{margin-inline-start:auto;font-size:15px;color:var(--muted)}
.acct-link i{margin-inline-start:auto;font-style:normal;font-size:11.5px;color:var(--muted)}
.acct-link.is-out{color:var(--sale)}
.acct-link.is-out .ico{color:var(--sale)}

/* ---------- Contact window ---------- */
.contact-box{--mw:580px;padding:30px}
.ct-head{display:flex;align-items:center;gap:14px;padding-inline-end:48px}
.ct-head h2{font-size:22px;text-transform:uppercase}
.topics{display:flex;flex-wrap:wrap;gap:6px}
.topic{position:relative}
.topic input{position:absolute;opacity:0;width:1px;height:1px}
.topic span{display:inline-flex;align-items:center;height:38px;padding-inline:14px;border:1.5px solid var(--line);border-radius:999px;font-size:12.5px;font-weight:600;color:var(--sub);cursor:pointer;transition:border-color .2s ease,background .2s ease,color .2s ease}
.topic span:hover{border-color:#CFCABB}
.topic input:checked + span{border-color:var(--brand);background:var(--brand-soft);color:var(--brand-ink)}
.topic input:focus-visible + span{box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 30%,transparent)}
.sent{display:flex;flex-direction:column;align-items:center;text-align:center;padding:26px 6px 6px}
.sent h4{margin-top:18px;font-size:20px;text-transform:uppercase}
.sent p{margin:8px 0 18px;max-width:360px;font-size:12.5px;line-height:1.6;color:var(--muted)}
.open-now{display:inline-flex;align-items:center;gap:8px;height:28px;padding-inline:12px;border-radius:999px;background:#E8F3EA;color:#2F6B3D;font-size:11.5px;font-weight:650}
.open-now::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px rgba(63,125,78,.2);animation:beat 1.6s ease-in-out infinite}
.open-now.is-closed{background:#F7EFE0;color:#8A5A12}
@keyframes beat{50%{box-shadow:0 0 0 6px rgba(63,125,78,0)}}
.ct-head .open-now{margin-top:6px}

/* ---------- Stay in touch: subscribe + talk to us ---------- */
.reach{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:16px}
.sub-card{position:relative;padding:34px;border-radius:var(--r-xl);background:radial-gradient(80% 90% at 100% 0%,#FFD5B8 0%,rgba(255,213,184,0) 62%),linear-gradient(150deg,#FFF7F1,var(--brand-soft));border:1px solid #F6D9C7;overflow:hidden;isolation:isolate}
html[dir="rtl"] .sub-card{background:radial-gradient(80% 90% at 0% 0%,#FFD5B8 0%,rgba(255,213,184,0) 62%),linear-gradient(-150deg,#FFF7F1,var(--brand-soft))}
.sub-art{position:absolute;inset-inline-end:-28px;top:-26px;z-index:-1;font-size:230px;color:color-mix(in srgb,var(--brand) 9%,transparent);transform:rotate(calc(14deg * var(--x)));stroke-width:1.1}
.sub-tag{display:inline-flex;align-items:center;gap:7px;height:28px;padding-inline:12px;border-radius:999px;background:#fff;color:var(--brand-ink);font-size:10.5px;font-weight:700;letter-spacing:.14em;box-shadow:var(--shadow-xs)}
.sub-tag .ico{font-size:14px;color:var(--brand)}
.sub-card h3{margin-top:16px;font-size:30px;line-height:1.02;text-transform:uppercase}
.sub-card p{margin:12px 0 0;max-width:440px;font-size:13px;line-height:1.65;color:var(--sub)}
.sub-form{margin-top:22px;max-width:500px}
.sub-form[hidden],.sub-done[hidden]{display:none}
.sub-box{display:flex;align-items:center;gap:10px;height:58px;padding-block:0;padding-inline:16px 6px;border-radius:17px;background:#fff;border:1.5px solid #F2D4C0;transition:border-color .2s ease,box-shadow .2s ease}
.sub-box:focus-within{border-color:var(--brand);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 14%,transparent)}
.sub-box > .ico{font-size:18px;color:var(--brand);flex:none}
.sub-box input{flex:1;min-width:0;height:100%;border:0;outline:none;background:none;font-size:14px}
.sub-box .btn{height:46px;border-radius:13px}
.sub-done{display:flex;align-items:center;gap:12px;max-width:500px;margin-top:22px;padding:14px 16px;border-radius:17px;background:#fff;border:1px solid #CFE6D4}
.sub-done b{display:block;font-size:13px}
.sub-done small{display:block;font-size:11.5px;color:var(--muted);word-break:break-all}
.sub-done .link{margin-inline-start:auto;flex:none}
.sub-perks{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:16px}
.sub-perks li{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;color:var(--sub)}
.sub-perks .ico{font-size:14px;color:var(--ok);stroke-width:2.2}
.talk-card{display:flex;flex-direction:column;align-items:flex-start;padding:34px;border-radius:var(--r-xl);background:#fff;border:1px solid var(--line-soft)}
.talk-card h3{font-size:24px;text-transform:uppercase}
.talk-card > p{margin:10px 0 14px;max-width:420px;font-size:13px;line-height:1.65;color:var(--sub)}
.talk-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%;margin-top:18px}
.talk{display:flex;align-items:center;gap:12px;min-width:0;padding:12px;border-radius:16px;border:1px solid var(--line-soft);background:#FAFAF7;text-align:start;transition:border-color .2s ease,background .2s ease,transform .25s cubic-bezier(.3,1.4,.5,1)}
.talk[hidden],.foot-contact li[hidden]{display:none}
.talk:hover{border-color:var(--brand);background:#fff;transform:translateY(-2px)}
.talk-ic{display:grid;place-items:center;width:42px;height:42px;flex:none;border-radius:13px;background:var(--brand-soft);color:var(--brand)}
.talk-ic .ico{font-size:19px}
.talk b{display:block;font-size:12.5px}
.talk small{display:block;font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.talk-card > .btn{margin-top:16px}

/* ---------- Reveal ---------- */
.rv{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .7s cubic-bezier(.2,.8,.3,1)}
.rv.in{opacity:1;transform:none}

/* ---------- Responsive ---------- */
@media (max-width:1320px){
  /* the pages move into the side menu */
  .hdr-cats .nav{display:none}
  .burger{display:grid}
}
@media (max-width:1180px){
  .mega{grid-template-columns:248px minmax(0,1fr)}
  .mega-brands{grid-template-columns:minmax(0,360px) minmax(0,1fr)}
  .mega-promo{display:none}
  .cats{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none}
  .cat{min-height:212px}
  .cat.is-lead{grid-row:auto;grid-column:span 2}
  .cat.is-lead img{inset-inline:auto 4%;top:50%;translate:0 -50%;width:44%;max-height:78%;object-position:right center}
  html[dir="rtl"] .cat.is-lead img{object-position:left center}
  .cat.is-lead .cat-copy{max-width:52%}
  .cart-txt{display:none}
  .cart-btn{padding-inline:14px;width:42px;justify-content:center}
  .grid,.tech,.brands{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bento,.sp-bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bt-lead{grid-column:span 2;grid-row:span 1}
  .sp-big{grid-row:span 1}
  .sp-big .sp-shot img{max-height:240px}
  .foot-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .club{grid-template-columns:minmax(0,1fr);gap:18px}
  .club-card{width:190px}
}
@media (max-width:880px){
  .promo{min-height:300px;padding:28px;flex-direction:column;align-items:flex-start;justify-content:flex-end}
  .promo-stats{flex-direction:row;flex-wrap:wrap;align-self:flex-start}
  .promo-stats div{min-width:0}
  /* the header search takes its own line */
  .hdr-in{flex-wrap:wrap;height:auto;padding-block:12px;row-gap:10px}
  .hdr-search{order:3;flex:1 1 100%;max-width:none}
  .hdr-acts{margin-inline-start:auto}
  .hero-slide,.hero-slide.is-photo{grid-template-columns:minmax(0,1fr);align-content:start;gap:6px;padding:18px 22px 76px}
  /* the three stay in one row: each stands up (icon, name, the line about it, how many at the foot) */
  .cond-tile{flex-direction:column;align-items:center;gap:9px;padding:16px 12px 14px;text-align:center}
  .cond-txt{flex:1;align-items:center;gap:5px;max-width:100%}
  .cond-top{display:contents}
  .cond-name{max-width:100%}
  .cond-desc{min-height:0;-webkit-line-clamp:3}
  .cond-n{order:3;margin-top:auto}
  .hero-slide.is-photo{align-content:end}
  .hero-copy,.hero-slide.is-photo .hero-copy{max-width:none;align-self:start}
  .hero-slide.is-photo .hero-copy{align-self:end}
  /* the product picture sits above the words */
  .hero-art{order:-1;height:150px}
  .hero-art img{max-height:138px}
  .hero-word{top:24%;inset-inline-end:-2%;font-size:150px}
  .hero-slide:not(.is-photo){background:radial-gradient(90% 46% at 60% 20%,var(--glow,rgba(255,255,255,.7)) 0%,rgba(255,255,255,0) 72%)}
  html[dir="rtl"] .hero-slide:not(.is-photo){background:radial-gradient(90% 46% at 40% 20%,var(--glow,rgba(255,255,255,.7)) 0%,rgba(255,255,255,0) 72%)}
  .hero{min-height:0}
  .hero-slides{min-height:0}
  .hero-bar{left:22px;right:22px;bottom:18px;gap:14px}
  .hero-tabs{gap:8px}
  .special{grid-template-columns:minmax(0,1fr)}
  .spot-copy{max-width:100%}
  .spot img{opacity:.35}
  /* no room for the menu: the category button opens the side menu instead */
  .mega{display:none}

}
@media (max-width:680px){
  .buys{gap:6px}
  .buys .liquid{font-size:12px}
  .hdr-switches{display:none}
  .hdr-cats-in{height:54px;gap:8px}
  .cat-all{width:40px;padding:0;justify-content:center}
  .cat-all span,.cat-all .chev-ico,.cat-rule{display:none}
  .cats{grid-template-columns:minmax(0,1fr)}
  .cat.is-lead{grid-column:auto}
  .cat,.cat.is-lead{min-height:188px}
  .cat.is-lead h3{font-size:24px}
  .cat.is-lead .cat-copy,.cat-copy{max-width:58%}
  .cond-bento{gap:8px}
  .cond-tile{gap:8px;padding:14px 7px 12px}
  .cond-ic{width:42px;height:42px;border-radius:13px}
  .cond-ic .ico{font-size:20px}
  .cond-txt{gap:4px}
  .cond-name{font-size:13.5px}
  .cond-desc{font-size:10.5px;line-height:1.4;-webkit-line-clamp:4}
  .cond-n{height:20px;padding-inline:7px;font-size:10px}
  .cond-cats{padding:12px}
  .cc-head{flex-wrap:wrap;gap:8px}
  .cc-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .cc{gap:8px;padding:9px 10px}
  .cc .cat-ic{width:30px;height:30px}
  .cc-go{display:none}
  .hdr-in{height:auto;padding-block:10px;row-gap:8px}
  .logo-mark{width:36px;height:36px}
  .hero h1{font-size:22px}
  .hero h1.is-long{font-size:18px}
  .hero p{font-size:12.5px;margin-top:10px;-webkit-line-clamp:2}
  .hero-cta{gap:8px;margin-top:16px}
  .hero-cta .btn{height:40px;padding-inline:16px;font-size:13px}
  .hero-slide,.hero-slide.is-photo{padding-bottom:60px}
  .hero-meta{margin-top:14px}
  /* the tabs become plain bars; a swipe turns the slide */
  .ht{padding-top:0;font-size:0;gap:0}
  .hero-arrow{display:none}
  .hero-count{margin:0;font-size:12px}
  .wrap{padding-inline:16px}
  .grid,.tech,.brands,.trust{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sp-grid{grid-template-columns:minmax(0,1fr)}
  .bento,.sp-bento{grid-template-columns:minmax(0,1fr)}
  .bt-lead{grid-column:span 1}
  .sp-big,.sp-wide,.sp-full{grid-column:auto;grid-row:auto}
  .sp-wide,.sp-full{display:flex;flex-direction:column}
  .sp-big h3,.sp-full h3{font-size:20px}
  .sp-big .sp-foot .price{font-size:21px}
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sec-head{margin-top:40px}
  .mini img{width:96px}
  .foot-bar{flex-direction:column;align-items:flex-start}
}
@media (max-width:560px){
  /* every control still has to fit on one line next to the logo */
  .logo-sub{display:none}
  .logo-name{font-size:15px;letter-spacing:.12em}
  .logo-mark{width:34px;height:34px;border-radius:10px}
  .hdr-acts{gap:6px}
  .icon-btn,.cart-btn{width:38px;height:38px;border-radius:12px}
  .icon-btn .ico{font-size:17px}
  .hdr-search{height:44px}
}
@media (max-width:380px){
  /* the smallest phones: the logo and the four buttons still share one row */
  .logo{gap:8px}
  .logo-mark{width:32px;height:32px}
  .logo-name{font-size:13px;letter-spacing:.08em}
  .hdr-acts{gap:4px}
  .icon-btn,.cart-btn{width:36px;height:36px}
}
@media (max-width:340px){.logo-text{display:none}}
@media (max-width:880px){
  .hs-kbd{display:none}
  .reach{grid-template-columns:minmax(0,1fr)}
  .auth{--mw:520px;grid-template-columns:minmax(0,1fr)}
  .auth-art{display:none}
}
/* ---------- No scrollbars anywhere: the line across the top shows how far down you are ---------- */
html,*{scrollbar-width:none}
html::-webkit-scrollbar,*::-webkit-scrollbar{width:0;height:0;display:none}
.scroll-line{position:fixed;top:0;left:0;right:0;z-index:100;height:3px;pointer-events:none;opacity:0;transition:opacity .3s ease}
.scroll-line.is-on{opacity:1}
.scroll-line i{position:relative;display:block;width:0;height:100%;border-start-end-radius:3px;border-end-end-radius:3px;background:linear-gradient(90deg,color-mix(in srgb,var(--brand) 65%,rgb(255 255 255)),var(--brand) 55%,#D23F48);box-shadow:0 0 12px color-mix(in srgb,var(--brand) 55%,transparent)}
html[dir="rtl"] .scroll-line i{background:linear-gradient(-90deg,color-mix(in srgb,var(--brand) 65%,rgb(255 255 255)),var(--brand) 55%,#D23F48)}
/* the glowing tip */
.scroll-line i::after{content:"";position:absolute;inset-inline-end:-3px;top:50%;width:9px;height:9px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px var(--brand),0 0 14px 4px color-mix(in srgb,var(--brand) 65%,transparent);translate:0 -50%}
/* back to the top: a round button whose ring fills as you scroll */
.to-top{position:fixed;inset-inline-end:24px;bottom:24px;z-index:70;display:grid;place-items:center;width:50px;height:50px;border-radius:50%;background:#fff;color:var(--brand);box-shadow:0 16px 34px -14px rgba(22,24,28,.45);opacity:0;visibility:hidden;transform:translateY(16px) scale(.9);transition:opacity .3s ease,transform .4s cubic-bezier(.3,1.4,.5,1),visibility 0s linear .4s,background .2s ease,color .2s ease}
.to-top.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .3s ease,transform .4s cubic-bezier(.3,1.4,.5,1),visibility 0s,background .2s ease,color .2s ease}
.to-top:hover{background:var(--brand);color:#fff}
.to-top:hover .ring-fg{stroke:#fff}
.to-top:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 35%,transparent),0 16px 34px -14px rgba(22,24,28,.45)}
.to-top > .ico{font-size:19px;stroke-width:2.1;transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.to-top:hover > .ico{transform:translateY(-3px)}
.to-top .ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:2.5}
.ring-bg{stroke:#F1E6DD}
.to-top:hover .ring-bg{stroke:rgba(255,255,255,.3)}
.ring-fg{stroke:var(--brand);stroke-linecap:round;stroke-dasharray:131.95;stroke-dashoffset:131.95;transition:stroke .2s ease}
@media (max-width:640px){
  .to-top{inset-inline-end:16px;bottom:16px;width:46px;height:46px}
}
@media (max-width:640px){
  /* pop-up windows rise from the bottom like a phone sheet; search takes the whole screen */
  .modal{place-items:end stretch;padding:0}
  .modal-box{width:100%;max-height:94vh;border-radius:24px 24px 0 0;transform:translateY(60px)}
  .modal.is-search{place-items:stretch;padding:0}
  .srch{max-height:none;height:100%;border-radius:0}
  .sr-foot{display:none}
  .sr-cats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sr-esc .k-desk{display:none}
  .sr-esc .k-ph{display:inline}
  .auth-main,.contact-box{padding:24px 18px 20px}
  .fld-2{grid-template-columns:minmax(0,1fr)}
  .sub-card,.talk-card{padding:24px 20px}
  .sub-card h3{font-size:24px}
  .sub-box{flex-wrap:wrap;height:auto;padding:6px}
  .sub-box > .ico{margin-inline-start:10px}
  .sub-box input{height:44px}
  .sub-box .btn{width:100%;justify-content:center}
  .talk-list{grid-template-columns:minmax(0,1fr)}
  .toast{bottom:14px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}

/* ---------- Shared with products.html and checkout.html (assets/js/store-kit.js) ---------- */
.ci-row.ci-col{flex-direction:column;align-items:flex-start;gap:8px}
.ci-soldout{display:inline-flex;align-items:center;height:28px;padding-inline:10px;border-radius:9px;background:#FBEAEA;color:var(--sale);font-size:11.5px;font-weight:700}

/* ---------- Spots the catalogue may leave empty (a promo without a second banner, deals without a saving) ---------- */
.mega-promo[hidden],.promo[hidden],.nav-hot[hidden]{display:none}

/* ---------- Baro: the shop's assistant (assets/js/store-baro.js): a round button and a chat window on every page ---------- */
.baro-fab{position:fixed;inset-inline-end:24px;bottom:24px;z-index:72;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:linear-gradient(145deg,color-mix(in srgb,var(--brand) 82%,rgb(255 255 255)),var(--brand) 55%,var(--brand-dark));color:#fff;font-size:26px;box-shadow:0 18px 36px -14px color-mix(in srgb,var(--brand) 90%,transparent),inset 0 1px 0 rgba(255,255,255,.3);transition:transform .35s cubic-bezier(.3,1.4,.5,1),box-shadow .25s ease,bottom .3s ease,opacity .2s ease,visibility 0s;animation:baroIn .6s cubic-bezier(.3,1.4,.5,1) .4s backwards}
.baro-fab:hover{transform:translateY(-2px) scale(1.04);box-shadow:0 22px 40px -14px color-mix(in srgb,var(--brand) 95%,transparent),inset 0 1px 0 rgba(255,255,255,.3)}
.baro-fab:active{transform:scale(.94)}
.baro-fab:focus-visible{outline:none;box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 30%,transparent),0 18px 36px -14px color-mix(in srgb,var(--brand) 90%,transparent)}
.baro-fab > i{transition:transform .4s cubic-bezier(.3,1.4,.5,1)}
.baro-fab.is-open > i{transform:rotate(72deg) scale(.88)}
.baro-fab::after{content:"";position:absolute;inset:0;border-radius:inherit;border:2px solid var(--brand);opacity:0;pointer-events:none;animation:baroRing 2.4s ease-out 1.4s 2}
.baro-fab-tip{position:absolute;inset-inline-end:calc(100% + 12px);top:50%;padding:8px 14px;border-radius:999px;background:var(--ink);color:#fff;font-size:12.5px;font-weight:600;white-space:nowrap;opacity:0;pointer-events:none;transform:translate(calc(8px * var(--x)),-50%);transition:opacity .25s ease,transform .35s cubic-bezier(.2,.9,.3,1)}
.baro-fab:hover .baro-fab-tip,.baro-fab.is-hinting .baro-fab-tip{opacity:1;transform:translate(0,-50%)}
.baro-fab.is-open .baro-fab-tip{opacity:0}
.has-baro .to-top{bottom:94px}
@keyframes baroIn{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
@keyframes baroRing{0%{opacity:.55;transform:scale(1)}100%{opacity:0;transform:scale(1.55)}}
@keyframes baroUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes baroDot{0%,60%,100%{opacity:.35;transform:none}30%{opacity:1;transform:translateY(-4px)}}
.baro-win{position:fixed;inset-inline-end:24px;bottom:96px;z-index:84;display:flex;flex-direction:column;width:400px;height:min(640px,calc(100vh - 128px));border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);box-shadow:0 40px 90px -30px rgba(22,24,28,.45),0 4px 14px -6px rgba(22,24,28,.12);overflow:hidden;opacity:0;visibility:hidden;transform:translateY(16px) scale(.96);transform-origin:bottom right;transition:opacity .22s ease,transform .38s cubic-bezier(.2,.9,.3,1),visibility 0s linear .38s}
html[dir="rtl"] .baro-win{transform-origin:bottom left}
.baro-win.is-open{opacity:1;visibility:visible;transform:none;transition:opacity .22s ease,transform .38s cubic-bezier(.2,.9,.3,1),visibility 0s}
.baro-head{display:flex;align-items:center;gap:12px;padding-block:14px;padding-inline:16px 12px;border-bottom:1px solid var(--line-soft);background:linear-gradient(180deg,var(--brand-soft),#fff)}
.baro-face{display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:13px;background:linear-gradient(145deg,color-mix(in srgb,var(--brand) 82%,rgb(255 255 255)),var(--brand) 55%,var(--brand-dark));color:#fff;font-size:19px;box-shadow:0 10px 20px -12px color-mix(in srgb,var(--brand) 90%,transparent)}
.baro-face.is-big{width:58px;height:58px;border-radius:18px;font-size:27px}
.baro-heading{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}
.baro-heading b{font-family:var(--f-head);font-size:17px;font-weight:800;letter-spacing:-.01em}
.baro-heading small{display:flex;align-items:center;gap:6px;margin-top:3px;font-size:11.5px;color:var(--muted)}
.baro-live{width:7px;height:7px;flex:none;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px rgba(63,125,78,.15)}
.baro-hbtn{width:36px;height:36px;border-radius:12px;background:rgba(255,255,255,.7)}
.baro-hbtn i{font-size:17px}
.baro-body{position:relative;flex:1;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:12px;padding:16px}
.baro-hello{margin:auto 0;display:flex;flex-direction:column;align-items:center;gap:8px;padding:8px 4px;text-align:center}
.baro-hello > b{margin-top:6px;font-family:var(--f-head);font-size:20px;font-weight:800;letter-spacing:-.01em}
.baro-hello > p{max-width:300px;margin:0;font-size:13px;line-height:1.55;color:var(--sub)}
.baro-asks{display:flex;flex-direction:column;gap:8px;width:100%;margin-top:12px}
.baro-ask{padding:11px 14px;border:1px solid var(--line);border-radius:14px;background:#fff;text-align:start;font-size:13px;font-weight:550;color:var(--ink);transition:border-color .2s ease,background .2s ease,color .2s ease;animation:baroUp .4s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(var(--k,0) * 60ms + 100ms)}
.baro-ask:hover{border-color:var(--brand);background:var(--brand-soft);color:var(--brand-ink)}
.baro-ask:focus-visible{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 20%,transparent)}
.baro-msg{max-width:88%;font-size:13.5px;line-height:1.55;animation:baroUp .3s cubic-bezier(.2,.8,.2,1)}
.baro-msg p{margin:0}
.baro-msg p + p,.baro-msg p + ul,.baro-msg ul + p{margin-top:8px}
.baro-msg ul{margin:6px 0 0;padding-inline-start:18px;list-style:disc}
.baro-msg li + li{margin-top:5px}
.baro-msg b{font-weight:700}
.baro-msg.is-me{align-self:flex-end;padding:10px 14px;border-radius:18px;border-end-end-radius:6px;background:var(--brand);color:#fff}
.baro-msg.is-bot{align-self:flex-start;padding:11px 14px;border:1px solid var(--line-soft);border-radius:18px;border-end-start-radius:6px;background:var(--bg);color:var(--ink)}
.baro-msg.is-err{border-color:#F3CFCF;background:#FBEAEA;color:var(--sale)}
.baro-retry{margin-top:8px;height:30px;padding-inline:12px;border:1px solid #F3CFCF;border-radius:10px;background:#fff;font-size:12px;font-weight:700;color:var(--sale)}
.baro-msg.is-typing{display:flex;gap:5px;padding:14px 16px}
.baro-msg.is-typing span{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:baroDot 1.1s ease-in-out infinite}
.baro-msg.is-typing span:nth-child(2){animation-delay:.15s}
.baro-msg.is-typing span:nth-child(3){animation-delay:.3s}
.baro-cards{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.baro-card{display:flex;align-items:center;gap:10px;padding:8px;border:1px solid var(--line);border-radius:14px;background:#fff;color:var(--ink);transition:border-color .2s ease,box-shadow .2s ease,transform .25s cubic-bezier(.2,.8,.3,1)}
.baro-card:hover{border-color:var(--brand);box-shadow:var(--shadow-sm);transform:translateY(-1px)}
.baro-card:focus-visible{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 20%,transparent)}
.baro-card-img{width:56px;height:56px;flex:none;display:grid;place-items:center;border-radius:11px;background:var(--line-soft);overflow:hidden}
.baro-card-img img{width:100%;height:100%;object-fit:contain;padding:4px;mix-blend-mode:multiply}
.baro-card-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.baro-card-main > b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12.5px;font-weight:650;line-height:1.3}
.baro-card-meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.baro-price{font-size:13px;font-weight:800;font-variant-numeric:tabular-nums}
.baro-price .cur{margin-inline-start:3px;font-size:10px;font-weight:700;color:var(--muted)}
.baro-stock{display:inline-flex;align-items:center;height:20px;padding-inline:7px;border-radius:6px;background:#E8F3EA;color:var(--ok);font-size:10.5px;font-weight:700}
.baro-stock.is-low{background:var(--brand-soft);color:var(--brand-ink)}
.baro-stock.is-out{background:#FBEAEA;color:var(--sale)}
.baro-card-go{width:30px;height:30px;flex:none;display:grid;place-items:center;border-radius:10px;background:var(--brand-soft);color:var(--brand);font-size:16px;transition:background .2s ease,color .2s ease}
.baro-card:hover .baro-card-go{background:var(--brand);color:#fff}
.baro-links{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.baro-link{display:inline-flex;align-items:center;gap:6px;height:30px;padding-inline:12px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:12px;font-weight:650;color:var(--ink);transition:border-color .2s ease,color .2s ease}
.baro-link:hover{border-color:var(--brand);color:var(--brand)}
.baro-link i{font-size:14px;color:var(--brand)}
.baro-foot{padding:10px 12px;border-top:1px solid var(--line-soft);background:#fff}
.baro-box{display:flex;align-items:flex-end;gap:8px;padding-block:6px;padding-inline:14px 6px;border:1.5px solid var(--line);border-radius:16px;background:#fff;transition:border-color .2s ease,box-shadow .2s ease}
.baro-box:focus-within{border-color:var(--brand);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 12%,transparent)}
.baro-box textarea{flex:1;min-width:0;max-height:110px;padding:8px 0;border:0;outline:none;resize:none;background:none;font:inherit;font-size:13.5px;line-height:1.45;color:var(--ink)}
.baro-box textarea::placeholder{color:var(--muted)}
.baro-send{width:36px;height:36px;flex:none;display:grid;place-items:center;border-radius:12px;background:var(--brand);color:#fff;font-size:18px;transition:background .2s ease,transform .2s ease,opacity .2s ease}
.baro-send:hover{background:var(--brand-dark)}
.baro-send:active{transform:scale(.92)}
.baro-send:disabled{opacity:.4;cursor:default}
.baro-send:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 30%,transparent)}
.baro-note{margin:7px 0 0;text-align:center;font-size:10.5px;color:var(--muted)}
/* Baro speaks first (store-baro.js: nudge): a bubble over the button, with a few quick answers, and a dot on the
   button while the message waits to be read */
.baro-fab.has-note::after{content:'';position:absolute;top:3px;inset-inline-end:3px;width:13px;height:13px;border-radius:50%;background:var(--sale);box-shadow:0 0 0 2.5px var(--bg);animation:baroIn .35s cubic-bezier(.3,1.6,.5,1)}
.baro-bubble{position:fixed;inset-inline-end:24px;bottom:96px;z-index:83;display:flex;flex-direction:column;gap:10px;width:min(340px,calc(100vw - 32px));padding:14px;border:1px solid var(--line);border-radius:var(--r-lg);border-end-end-radius:8px;background:var(--card);box-shadow:0 30px 70px -28px rgba(22,24,28,.45),0 4px 14px -6px rgba(22,24,28,.12);opacity:0;visibility:hidden;transform:translateY(12px) scale(.96);transform-origin:bottom right;transition:opacity .25s ease,transform .4s cubic-bezier(.3,1.35,.5,1),visibility 0s linear .4s}
html[dir="rtl"] .baro-bubble{transform-origin:bottom left}
.baro-bubble.is-shown{opacity:1;visibility:visible;transform:none;transition:opacity .25s ease,transform .45s cubic-bezier(.3,1.35,.5,1)}
.baro-bubble-x{position:absolute;top:8px;inset-inline-end:8px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;color:var(--muted);font-size:17px;transition:background .15s ease,color .15s ease}
.baro-bubble-x:hover{background:#F3F2ED;color:var(--ink)}
.baro-bubble-x:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 25%,transparent)}
.baro-bubble-main{display:flex;align-items:flex-start;gap:11px;padding-inline-end:26px;text-align:start;color:var(--ink)}
.baro-bubble-main:focus-visible{outline:none;border-radius:12px;box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 25%,transparent)}
.baro-bubble-txt{display:flex;flex-direction:column;gap:3px;min-width:0;font-size:13.5px;line-height:1.55}
.baro-bubble-txt b{font-family:var(--f-head);font-size:14.5px;font-weight:800}
.baro-asks.is-inline{flex-direction:row;flex-wrap:wrap;gap:6px;margin-top:0}
.baro-asks.is-inline .baro-ask{padding:7px 12px;border-radius:999px;font-size:12.5px}
.baro-bubble .baro-asks.is-inline{padding-inline-start:51px}
.baro-msg .baro-asks.is-inline{margin-top:10px}
.baro-full .baro-bubble{display:none}
@media (prefers-reduced-motion:reduce){.baro-bubble,.baro-bubble.is-shown{transition:none}.baro-fab.has-note::after{animation:none}}
@media (max-width:900px){
  .baro-up .baro-fab{bottom:92px}
  .baro-up .to-top{bottom:162px}
  .baro-up .baro-bubble{bottom:164px}
}
@media (max-width:640px){
  .baro-fab{inset-inline-end:16px;bottom:16px;width:52px;height:52px;font-size:23px}
  .has-baro .to-top{bottom:80px}
  .baro-up .to-top{bottom:156px}
  .baro-win{inset:0;width:auto;height:auto;border:0;border-radius:0;transform:translateY(28px)}
  .baro-full body{overflow:hidden}
  .baro-full .baro-fab{opacity:0;visibility:hidden}
  .baro-msg{max-width:92%}
  .baro-bubble{inset-inline-end:16px;bottom:82px}
  .baro-up .baro-bubble{bottom:158px}
  .baro-bubble .baro-asks.is-inline{padding-inline-start:0}
}

/* ---------- A language written right to left (Arabic, Kurdish): its letters join, so no spacing is put between them
   (the shop's name keeps its own) ---------- */
html[dir="rtl"] body :not(.logo-text, .logo-text *, kbd, .code-box input){letter-spacing:normal!important}

/* The language window (store-data.js langAsk, the owner's wishes, 2026-10-04): a band in the shop's colour with welcome in
   every language and the question, then a tile per language: its flag, its own name and its English one, the one in use
   ticked */
.lang-ask{z-index:120}
.lang-ask .la-box{--mw:560px;padding:0;overflow:hidden;text-align:start}
.la-top{position:relative;overflow:hidden;padding:22px 26px 20px;background:linear-gradient(135deg,var(--brand),color-mix(in srgb,var(--brand) 62%,rgb(0 0 0)));color:rgb(255 255 255)}
.la-deco{position:absolute;inset-inline-end:-26px;bottom:-40px;font-size:150px;line-height:1;color:rgb(255 255 255);opacity:.12;pointer-events:none;animation:la-spin 26s linear infinite}
.la-deco svg{display:block;width:1em;height:1em}
.la-x{position:absolute;top:14px;inset-inline-end:14px;width:36px;height:36px;display:grid;place-items:center;border-radius:12px;background:rgb(255 255 255 / 16%);color:rgb(255 255 255);transition:background .2s ease,transform .2s ease}
.la-x:hover{background:rgb(255 255 255 / 28%);transform:rotate(90deg)}
.la-x .ico{font-size:16px}
.la-hello{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;margin:0 46px 0 0;font-size:12.5px;font-weight:600;letter-spacing:.02em;opacity:.85}
html[dir="rtl"] .la-hello{margin:0 0 0 46px;letter-spacing:0}
.la-hello i,.la-also i{font-style:normal;opacity:.55}
.la-title{position:relative;margin:6px 0 0;font-family:var(--f-head);font-size:26px;line-height:1.15;font-weight:800;letter-spacing:-.015em;color:rgb(255 255 255)}
html[dir="rtl"] .la-title{letter-spacing:0}
.la-also{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;margin:6px 0 0;font-size:14px;font-weight:500;opacity:.9}
.la-list{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:12px;padding:20px 22px 6px}
.la-opt{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:6px;min-width:0;min-height:142px;padding:24px 10px 16px;border:1.5px solid var(--line);border-radius:20px;background:var(--card);text-align:center;cursor:pointer;transition:border-color .2s ease,background .2s ease,transform .25s cubic-bezier(.3,1.4,.5,1),box-shadow .25s ease;animation:la-in .45s cubic-bezier(.2,.9,.3,1) calc(.1s + var(--k,0) * 70ms) backwards}
.la-opt:hover{border-color:var(--brand);transform:translateY(-3px);box-shadow:0 18px 32px -20px color-mix(in srgb,var(--brand) 75%,transparent)}
.la-opt:active{transform:scale(.97)}
.la-opt:focus-visible{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 25%,transparent)}
.la-opt.is-on{border-color:var(--brand);background:var(--brand-soft)}
.la-flag{width:58px;height:40px;margin-bottom:4px;border-radius:9px;object-fit:cover;box-shadow:0 0 0 1px rgb(0 0 0 / 8%),0 10px 18px -10px rgb(0 0 0 / 50%);transition:transform .3s cubic-bezier(.3,1.5,.5,1)}
.la-opt:hover .la-flag{transform:scale(1.08) rotate(-3deg)}
.la-flag.is-short{display:grid;place-items:center;background:var(--brand);color:rgb(255 255 255);font-size:14px;font-weight:800}
.la-native{max-width:100%;font-family:var(--f-head);font-size:18px;line-height:1.2;font-weight:700;color:var(--ink);overflow-wrap:anywhere}
.la-name{font-size:12px;line-height:1.3;color:var(--muted)}
.la-tick{position:absolute;top:10px;inset-inline-end:10px;width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:var(--brand);color:rgb(255 255 255);opacity:0;transform:scale(.4);transition:opacity .2s ease,transform .3s cubic-bezier(.3,1.6,.5,1)}
.la-tick .ico{font-size:13px}
.la-opt.is-on .la-tick{opacity:1;transform:none}
.la-note{display:flex;align-items:center;justify-content:center;gap:6px;margin:0;padding:12px 22px 18px;font-size:12.5px;color:var(--muted);text-align:center}
html.la-open{overflow:hidden}
@keyframes la-in{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
@keyframes la-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .la-opt,.la-deco{animation:none} }
@media (max-width:480px){
  .la-top{padding:20px 18px 18px}
  .la-title{font-size:22px}
  .la-list{gap:8px;padding:16px 14px 4px}
  .la-opt{min-height:124px;padding:16px 6px 12px;border-radius:16px}
  .la-flag{width:50px;height:34px}
  .la-native{font-size:16px}
  .la-name{font-size:11px}
}

/* ---------- An email code under a field (the checkout's address, the account's email): the sign-in window's look ---------- */
.code-fld{padding:14px;border-radius:16px;background:color-mix(in srgb,var(--brand) 5%,var(--tint,#fff));box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--brand) 22%,transparent);animation:code-in .35s cubic-bezier(.2,.8,.3,1)}
.code-fld[hidden]{display:none}
.code-fld .code-to{background:var(--card)}
.code-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 10px;margin:0;font-size:12px;color:var(--muted)}
.code-foot button{font-weight:700;color:var(--brand)}
.code-foot button:disabled{font-weight:600;color:var(--muted);cursor:default}
@keyframes code-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.code-fld{animation:none}}