/* Clawora storefront — Palo Alto–style clone (Argan Deluxe palette) with custom header, wave menu and search.
   Tokens are overwritten at load from theme.colors / theme.typography (admin customizer). */
:root{
  --bg:#ffffff; --bg2:#f1f0ec; --text:#000000; --muted:#5c5c5c; --accent:#4f6a46; --accent-text:#ffffff;
  --sale-bg:#4f6a46; --sale-text:#ffffff; --badge:#e5f18b; --border:#e3e1da;
  --ann-bg:#ffebd3; --ann-text:#000000; --foot-bg:#fff0dd; --foot-text:#000000;
  --menu-bg:#2f3d2b; --wave1:#fff0dd; --wave2:#4f6a46; --menu-text:#fff7ec;
  --font-head:'Instrument Sans', system-ui, sans-serif; --font-body:'Chivo', system-ui, sans-serif; --font-menu:'Instrument Serif', Georgia, serif;
  --base:15px; --gutter:20px; --gap:12px; --radius:10px; --radius-lg:18px; --hdr-h:64px;
  --ease:cubic-bezier(.46,.01,.32,1); --ease-out:cubic-bezier(.16,1,.3,1); --sbw:0px;
}
@media (min-width:750px){ :root{ --gutter:32px; --gap:18px; --hdr-h:72px; } }
@media (min-width:1100px){ :root{ --gutter:60px; --gap:20px; --hdr-h:80px; } }
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--hdr-h) + 12px); }
html.is-locked{ overflow:hidden; }
html.is-locked body{ padding-right:var(--sbw); }
body{ margin:0; background:var(--foot-bg); color:var(--text); font-family:var(--font-body); font-size:var(--base); line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:clip; }
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; }
h1,h2,h3,h4{ font-family:var(--font-head); font-weight:600; line-height:1.12; letter-spacing:-.02em; margin:0; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
svg{ width:1.25em; height:1.25em; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; flex:none; }
svg.fill{ fill:currentColor; stroke:none; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }
.sr-only{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip{ position:fixed; left:12px; top:-60px; z-index:999; background:var(--text); color:var(--bg); padding:10px 16px; border-radius:999px; text-decoration:none; transition:top .2s; }
.skip:focus{ top:12px; }
.wrap{ width:100%; max-width:1600px; margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter); }
mark{ background:var(--badge); color:inherit; border-radius:3px; padding:0 2px; }
.site{ position:relative; z-index:2; background:var(--bg); min-height:100vh; }
html.has-parallax .site{ border-radius:0 0 28px 28px; box-shadow:0 30px 60px -40px rgba(0,0,0,.25); }
@media (min-width:750px){ html.has-parallax .site{ border-radius:0 0 44px 44px; } }
html.has-parallax .ftr{ position:fixed; left:0; right:0; bottom:0; z-index:1; }
main{ display:block; }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:0 28px; border-radius:999px; border:1px solid var(--text); background:transparent; color:var(--text);
  font-family:var(--font-body); font-size:13px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; text-decoration:none; white-space:nowrap; transition:background .35s var(--ease), color .35s var(--ease), border-color .35s, transform .35s var(--ease-out); }
.btn svg{ width:18px; height:18px; transition:transform .35s var(--ease-out); }
.btn:hover svg{ transform:translateX(3px); }
.btn--dark{ background:var(--text); color:var(--bg); }
.btn--dark:hover{ background:var(--accent); border-color:var(--accent); color:var(--accent-text); }
.btn--line:hover{ background:var(--text); color:var(--bg); }
.btn--light{ background:#fff; color:#000; border-color:#fff; }
.btn--light:hover{ background:transparent; color:#fff; }
.btn--accent{ background:var(--accent); border-color:var(--accent); color:var(--accent-text); }
.btn--accent:hover{ filter:brightness(1.08); }
.btn--sm{ min-height:40px; padding:0 20px; font-size:12px; }
.btn--block{ width:100%; }
.btn[disabled]{ opacity:.45; pointer-events:none; }
.ann{ background:var(--ann-bg); color:var(--ann-text); font-size:12.5px; letter-spacing:.02em; }
.ann__in{ display:flex; align-items:center; justify-content:center; gap:6px; max-width:900px; margin:0 auto; padding:0 6px; height:38px; }
.ann__track{ position:relative; flex:1; height:100%; overflow:hidden; }
.ann__msg{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; opacity:0; transform:translateY(60%); transition:opacity .6s var(--ease), transform .6s var(--ease); padding:0 4px; line-height:1.25; }
.ann__msg a{ text-decoration:none; }
.ann__msg a:hover{ text-decoration:underline; }
.ann__msg.is-on{ opacity:1; transform:none; }
.ann__btn{ width:32px; height:32px; display:grid; place-items:center; border:0; background:none; border-radius:50%; opacity:.6; flex:none; }
.ann__btn:hover{ opacity:1; }
.ann__btn svg{ width:16px; height:16px; }
@media (max-width:420px){ .ann{ font-size:11.5px; } }
.hdr{ position:sticky; top:0; z-index:40; background:var(--bg); transition:background .4s var(--ease), box-shadow .4s var(--ease); }
.hdr--static{ position:relative; }
.hdr__in{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; height:var(--hdr-h); }
.hdr.is-scrolled{ background:color-mix(in srgb, var(--bg) 82%, transparent); -webkit-backdrop-filter:saturate(1.6) blur(14px); backdrop-filter:saturate(1.6) blur(14px); box-shadow:0 1px 0 var(--border); }
.hdr__l{ display:flex; align-items:center; gap:28px; min-width:0; }
.hdr__r{ display:flex; align-items:center; justify-content:flex-end; gap:4px; }
.logo{ text-decoration:none; display:flex; align-items:center; justify-content:center; }
.wordmark{ font-family:var(--font-head); font-weight:600; font-size:20px; letter-spacing:.32em; padding-left:.32em; text-transform:uppercase; white-space:nowrap; }
@media (min-width:1100px){ .wordmark{ font-size:23px; } }
.burger{ display:inline-flex; align-items:center; gap:12px; height:44px; padding:0 6px 0 0; border:0; background:none; font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; }
.burger__box{ position:relative; width:28px; height:16px; }
.burger__box i{ position:absolute; left:0; height:1.6px; background:currentColor; border-radius:2px; transition:transform .5s var(--ease-out), width .5s var(--ease-out), opacity .3s; }
.burger__box i:nth-child(1){ top:0; width:28px; }
.burger__box i:nth-child(2){ top:7px; width:18px; }
.burger__box i:nth-child(3){ top:14px; width:23px; }
.burger:hover .burger__box i{ width:28px; }
.burger[aria-expanded="true"] .burger__box i:nth-child(1){ transform:translateY(7px) rotate(45deg); width:24px; }
.burger[aria-expanded="true"] .burger__box i:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] .burger__box i:nth-child(3){ transform:translateY(-7px) rotate(-45deg); width:24px; }
.burger__lbl{ display:none; }
.hdr__nav{ display:none; gap:26px; }
.hdr__link{ position:relative; font-size:13px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; text-decoration:none; padding:8px 0; white-space:nowrap; }
.hdr__link span{ background:linear-gradient(currentColor,currentColor) 100% 100%/0 1px no-repeat; padding-bottom:3px; transition:background-size .45s var(--ease); }
.hdr__link:hover span{ background-size:100% 1px; background-position:0 100%; }
@media (min-width:750px){ .burger__lbl{ display:inline; } }
@media (min-width:1200px){ .hdr__nav{ display:flex; } .burger__lbl{ display:none; } }
.icon-btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px; min-width:44px; height:44px; padding:0 10px; border:0; background:none; border-radius:999px; text-decoration:none; transition:background .3s; }
.icon-btn:hover{ background:var(--bg2); }
.icon-btn svg{ width:22px; height:22px; }
.icon-btn__lbl{ display:none; font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; }
@media (min-width:1100px){ .icon-btn__lbl{ display:inline; } }
.cart-count{ position:absolute; top:5px; right:3px; min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:var(--accent); color:var(--accent-text); font-size:10.5px; font-weight:700; line-height:18px; text-align:center; transform:scale(0); transition:transform .35s var(--ease-out); }
.cart-count.has{ transform:scale(1); }
.cart-count.bump{ animation:bump .5s var(--ease-out); }
@keyframes bump{ 40%{ transform:scale(1.35); } }

/* ===== MENU (wave overlay) ===== */
.mnu{ position:fixed; inset:0; z-index:90; color:var(--menu-text); }
.mnu[hidden]{ display:none; }
.mnu__waves{ position:absolute; inset:0; width:100%; height:100%; }
.mnu__waves .w1{ fill:var(--wave1); } .mnu__waves .w2{ fill:var(--wave2); } .mnu__waves .w3{ fill:var(--menu-bg); }
.mnu.is-filled{ background:var(--menu-bg); }
.mnu.is-filled .mnu__waves{ visibility:hidden; }
.mnu__ui{ position:relative; height:100%; display:flex; flex-direction:column; overflow:hidden; }
.mnu__top{ display:flex; align-items:center; justify-content:space-between; height:var(--hdr-h); flex:none; }
.mnu__logo{ font-family:var(--font-head); font-weight:600; letter-spacing:.32em; text-transform:uppercase; text-decoration:none; font-size:18px; opacity:0; transition:opacity .5s var(--ease); }
.mnu__close{ display:inline-flex; align-items:center; gap:12px; height:44px; border:0; background:none; color:inherit; font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; padding:0 0 0 8px; opacity:0; transition:opacity .4s var(--ease); }
.mnu__x{ position:relative; width:22px; height:22px; }
.mnu__x i{ position:absolute; left:0; top:10px; width:22px; height:1.6px; background:currentColor; border-radius:2px; transition:transform .6s var(--ease-out) .1s; }
.mnu__x i:nth-child(1){ transform:translateY(-4px); } .mnu__x i:nth-child(2){ transform:translateY(4px); }
.mnu.is-ui .mnu__x i:nth-child(1){ transform:rotate(45deg); } .mnu.is-ui .mnu__x i:nth-child(2){ transform:rotate(-45deg); }
.mnu.is-ui .mnu__logo,.mnu.is-ui .mnu__close{ opacity:1; }
.mnu__body{ flex:1; min-height:0; display:grid; grid-template-columns:minmax(0,1fr); gap:40px; padding-top:4px; }
.mnu__nav{ position:relative; display:flex; flex-direction:column; min-height:0; }
.mnu__head{ display:flex; align-items:center; gap:14px; min-height:42px; margin-bottom:6px; }
.mnu__backbtn{ display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 16px 0 12px; border:1px solid color-mix(in srgb, var(--menu-text) 35%, transparent); border-radius:999px; background:none; color:inherit; font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; transition:background .3s, color .3s; }
.mnu__backbtn:hover{ background:var(--menu-text); color:var(--menu-bg); }
.mnu__backbtn[hidden]{ display:none; }
.mnu__backbtn svg{ width:18px; height:18px; }
.mnu__eyebrow{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; opacity:.7; }
.mnu__levels{ position:relative; flex:1; min-height:0; }
.mnu__level{ position:absolute; inset:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none; visibility:hidden; padding-bottom:24px; }
.mnu__level::-webkit-scrollbar{ display:none; }
.mnu__level.is-current{ visibility:visible; }
.mnu__list{ display:flex; flex-direction:column; }
.mnu__item{ opacity:0; }
.mnu__link{ display:flex; align-items:center; gap:14px; width:100%; padding:2px 0; border:0; background:none; color:inherit; text-align:left; text-decoration:none;
  font-family:var(--font-menu); font-weight:400; font-size:clamp(38px, 11.4vw, 52px); line-height:1.14; letter-spacing:-.01em; }
.mnu__txt{ background:linear-gradient(currentColor,currentColor) 0 92%/0 1.5px no-repeat; transition:background-size .5s var(--ease); }
.mnu__link:hover .mnu__txt,.mnu__link:focus-visible .mnu__txt{ background-size:100% 1.5px; font-style:italic; }
.mnu__more{ display:inline-grid; place-items:center; width:34px; height:34px; border-radius:50%; border:1px solid color-mix(in srgb, var(--menu-text) 30%, transparent); transition:transform .4s var(--ease-out), background .3s, color .3s; }
.mnu__more svg{ width:16px; height:16px; }
.mnu__link:hover .mnu__more{ transform:translateX(6px); background:var(--menu-text); color:var(--menu-bg); }
.mnu__level + .mnu__level .mnu__item:last-child .mnu__link{ font-style:italic; opacity:.75; }
.mnu__feature{ display:none; }
.mnu__foot{ flex:none; display:flex; flex-direction:column; gap:14px; padding-top:16px; padding-bottom:max(20px, env(safe-area-inset-bottom)); border-top:1px solid color-mix(in srgb, var(--menu-text) 16%, transparent); opacity:0; transform:translateY(16px); transition:opacity .6s var(--ease-out) .35s, transform .6s var(--ease-out) .35s; }
.mnu.is-ui .mnu__foot{ opacity:1; transform:none; }
.mnu.is-closing .mnu__foot,.mnu.is-closing .mnu__logo,.mnu.is-closing .mnu__close,.mnu.is-closing .mnu__levels,.mnu.is-closing .mnu__head,.mnu.is-closing .mnu__feature{ opacity:0; transition:opacity .2s; transition-delay:0s; }
.mnu__sec{ display:flex; flex-wrap:wrap; gap:4px 18px; font-size:14px; }
.mnu__sec a{ text-decoration:none; opacity:.8; } .mnu__sec a:hover{ opacity:1; text-decoration:underline; }
.mnu__contact{ display:flex; flex-wrap:wrap; gap:8px; }
.mnu__pill{ display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 14px; border-radius:999px; background:color-mix(in srgb, var(--menu-text) 10%, transparent); text-decoration:none; font-size:13px; transition:background .3s, color .3s; }
.mnu__pill:hover{ background:var(--wave1); color:var(--menu-bg); }
.mnu__pill svg{ width:18px; height:18px; }
@media (max-height:720px){ .mnu__link{ font-size:clamp(32px, 9.6vw, 44px); } }
@media (min-width:900px){
  .mnu__body{ grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:6vw; padding-top:16px; }
  .mnu__link{ font-size:clamp(50px, 5vw, 80px); line-height:1.06; }
  .mnu__feature{ display:block; position:relative; padding-bottom:28px; opacity:0; transform:translateY(30px) scale(.98); transition:opacity .9s var(--ease-out) .25s, transform 1s var(--ease-out) .25s; }
  .mnu.is-ui .mnu__feature{ opacity:1; transform:none; }
  .mnu__foot{ flex-direction:row; justify-content:space-between; align-items:center; }
}
@media (min-width:900px) and (max-height:760px){ .mnu__link{ font-size:clamp(40px, 4vw, 60px); } }
.mnu__card{ position:relative; display:block; height:100%; max-height:640px; border-radius:var(--radius-lg); overflow:hidden; text-decoration:none; color:#fff; }
.mnu__cardimg,.mnu__cardimg img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.mnu__cardimg img{ transition:transform 1.4s var(--ease-out); }
.mnu__card:hover .mnu__cardimg img{ transform:scale(1.05); }
.mnu__card::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 45%, rgba(0,0,0,.55)); }
.mnu__cardtxt{ position:absolute; left:28px; bottom:26px; right:96px; z-index:1; display:flex; flex-direction:column; gap:6px; }
.mnu__cardeye{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; }
.mnu__cardh{ font-family:var(--font-menu); font-size:clamp(28px, 2.6vw, 42px); line-height:1.05; }
.mnu__cardgo{ position:absolute; right:24px; bottom:24px; z-index:1; width:52px; height:52px; border-radius:50%; background:#fff; color:#000; display:grid; place-items:center; transition:transform .4s var(--ease-out); }
.mnu__card:hover .mnu__cardgo{ transform:rotate(-45deg); }

/* ===== SEARCH overlay ===== */
.srch{ position:fixed; inset:0; z-index:85; color:var(--text); }
.srch[hidden]{ display:none; }
.srch__waves{ position:absolute; inset:0; width:100%; height:100%; }
.srch__waves .w1{ fill:var(--wave2); } .srch__waves .w2{ fill:var(--foot-bg); }
.srch.is-filled{ background:var(--foot-bg); } .srch.is-filled .srch__waves{ visibility:hidden; }
.srch__ui{ position:relative; height:100%; display:flex; flex-direction:column; opacity:0; transform:translateY(-14px); transition:opacity .45s var(--ease), transform .6s var(--ease-out); }
.srch.is-ui .srch__ui{ opacity:1; transform:none; }
.srch__top{ display:flex; align-items:center; gap:12px; padding-top:16px; padding-bottom:12px; flex:none; }
.srch__form{ position:relative; flex:1; min-width:0; display:flex; align-items:center; gap:12px; border-bottom:1.5px solid var(--text); padding:6px 0; }
.srch__form > svg{ width:26px; height:26px; }
.srch__form input[type=search]{ flex:1; min-width:0; border:0; background:none; outline:none; font-family:var(--font-head); font-weight:500; font-size:clamp(20px, 5.2vw, 46px); letter-spacing:-.02em; padding:6px 0; -webkit-appearance:none; }
.srch__form input::-webkit-search-cancel-button{ display:none; }
.srch__form input::placeholder{ color:color-mix(in srgb, var(--text) 38%, transparent); }
.srch__clear{ width:36px; height:36px; border-radius:50%; border:0; background:var(--bg); display:grid; place-items:center; flex:none; }
.srch__clear[hidden]{ display:none; }
.srch__close{ display:inline-flex; align-items:center; gap:8px; height:44px; min-width:44px; justify-content:center; padding:0 4px; border:0; background:none; font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; flex:none; }
.srch__close span{ display:none; }
@media (min-width:750px){ .srch__close span{ display:inline; } .srch__top{ padding-top:28px; } }
.srch__body{ flex:1; overflow-y:auto; overscroll-behavior:contain; padding-bottom:40px; }
.srch__label{ font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; margin:18px 0 12px; }
.srch__label span{ opacity:.55; margin-left:6px; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{ display:inline-flex; align-items:center; height:40px; padding:0 18px; border-radius:999px; border:1px solid transparent; background:var(--bg); font-size:14px; text-decoration:none; transition:background .3s, color .3s, transform .3s var(--ease-out); }
.chip:hover{ background:var(--text); color:var(--bg); transform:translateY(-2px); }
.chip--line{ background:transparent; border-color:color-mix(in srgb, var(--text) 25%, transparent); }
.srch__empty{ display:grid; gap:12px; }
.srch__rlist{ display:grid; grid-template-columns:repeat(auto-fill, minmax(120px,1fr)); gap:14px; }
.srch__rlist a{ display:flex; flex-direction:column; gap:6px; text-decoration:none; font-size:13px; }
.srch__thumb{ display:block; aspect-ratio:1; border-radius:var(--radius); overflow:hidden; background:var(--bg); }
.srch__thumb img{ width:100%; height:100%; object-fit:cover; }
.srch__grid{ display:grid; gap:12px 48px; }
@media (min-width:900px){ .srch__grid{ grid-template-columns:minmax(0,3fr) minmax(0,1fr); } }
.srch__plist{ display:grid; gap:6px; }
@media (min-width:750px){ .srch__plist{ grid-template-columns:1fr 1fr; gap:10px 24px; } }
.srch__p{ display:flex; align-items:center; gap:14px; padding:8px; margin:0 -8px; border-radius:var(--radius); text-decoration:none; transition:background .25s; }
.srch__p .srch__thumb{ width:72px; flex:none; }
.srch__p:hover,[data-opt].is-active{ background:color-mix(in srgb, var(--bg) 70%, transparent); }
.srch__pinfo{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.srch__pv{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; opacity:.6; }
.srch__pt{ font-weight:500; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.srch__pp{ font-size:14px; }
.srch__all{ margin-top:20px; }
.srch__all.is-active{ background:var(--accent); border-color:var(--accent); }
.srch__clist a{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:12px 0; border-bottom:1px solid color-mix(in srgb, var(--text) 12%, transparent); text-decoration:none; font-family:var(--font-menu); font-size:26px; line-height:1.1; }
.srch__clist small{ font-family:var(--font-body); font-size:11px; letter-spacing:.12em; text-transform:uppercase; opacity:.6; }
.srch__clist a:hover span,.srch__clist a.is-active span{ font-style:italic; }
.srch__none p:not(.srch__label){ margin-bottom:16px; color:var(--muted); }

/* ===== sections ===== */
.sec{ padding:48px 0; }
@media (min-width:750px){ .sec{ padding:72px 0; } }
.sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:24px; }
@media (min-width:750px){ .sec-head{ margin-bottom:36px; } }
.sec-head--center{ flex-direction:column; align-items:center; text-align:center; }
.eyebrow{ display:block; font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; margin-bottom:12px; }
.h2{ font-size:clamp(28px, 3.3vw, 46px); }
.sub{ margin-top:10px; color:var(--muted); max-width:56ch; }
.sec-head__r{ display:flex; align-items:center; gap:10px; flex:none; }
.arrows{ display:none; gap:8px; }
@media (min-width:1000px){ .arrows{ display:flex; } }
.arrow{ width:46px; height:46px; border-radius:50%; border:1px solid var(--border); background:var(--bg); display:grid; place-items:center; transition:background .3s, color .3s, border-color .3s, opacity .3s; }
.arrow:hover{ background:var(--text); color:var(--bg); border-color:var(--text); }
.arrow:disabled{ opacity:.35; pointer-events:none; }
.view-all-m{ margin-top:28px; display:flex; justify-content:center; }
@media (min-width:750px){ .view-all-m{ display:none; } }
.hide-m{ display:none!important; }
@media (min-width:750px){ .hide-m{ display:inline-flex!important; } }
[data-reveal]{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease-out), transform 1s var(--ease-out); transition-delay:var(--d, 0ms); }
[data-reveal].in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ [data-reveal]{ opacity:1; transform:none; transition:none; } }
.is-highlight{ outline:2px dashed var(--accent); outline-offset:-6px; }

/* hero slideshow */
.hero{ position:relative; overflow:hidden; background:var(--bg2); color:#fff; height:min(78svh, 680px); min-height:480px; }
.hero--full{ height:calc(100svh - var(--hdr-h) - 38px); min-height:520px; max-height:960px; }
.hero--large{ height:min(80svh, 820px); }
.hero--medium{ height:min(60svh, 560px); min-height:420px; }
@media (max-width:749px){ .hero,.hero--full,.hero--large{ height:calc(100svh - var(--hdr-h) - 38px - 56px); min-height:500px; max-height:760px; } .hero--medium{ height:68svh; } }
.slide{ position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity 1.1s var(--ease), visibility 0s 1.1s; }
.slide.is-on{ opacity:1; visibility:visible; transition:opacity 1.1s var(--ease), visibility 0s; z-index:1; }
.slide__media,.slide__media img,.slide__media picture{ position:absolute; inset:0; width:100%; height:100%; }
.slide__media img{ object-fit:cover; transform:scale(1.08); transition:transform 7s cubic-bezier(.2,.6,.3,1); }
.slide.is-on .slide__media img{ transform:scale(1); }
.slide__shade{ position:absolute; inset:0; background:var(--sh-side); }
@media (max-width:749px){ .slide__shade{ background:var(--sh-bot); } }
.slide__content{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding-bottom:84px; }
@media (min-width:750px){ .slide__content{ justify-content:center; padding-bottom:0; } }
.slide__box{ max-width:560px; display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
.slide--center .slide__box{ margin:0 auto; align-items:center; text-align:center; }
.slide--right .slide__box{ margin-left:auto; }
@media (max-width:749px){ .slide__box{ margin:0 auto!important; align-items:center!important; text-align:center; } }
.slide--dark{ color:#000; }
.slide__eyebrow{ font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; }
.slide__h{ font-size:clamp(34px, 4.6vw, 68px); line-height:1.02; letter-spacing:-.03em; }
.slide__t{ font-size:16px; max-width:44ch; opacity:.92; }
.slide__box > *{ opacity:0; transform:translateY(22px); }
.slide.is-on .slide__box > *{ opacity:1; transform:none; transition:opacity .9s var(--ease-out) .25s, transform 1s var(--ease-out) .25s; }
.slide.is-on .slide__box > :nth-child(2){ transition-delay:.37s; } .slide.is-on .slide__box > :nth-child(3){ transition-delay:.47s; } .slide.is-on .slide__box > :nth-child(4){ transition-delay:.57s; }
.slide--dark .btn--light{ background:#000; color:#fff; border-color:#000; }
.slide--dark .btn--light:hover{ background:transparent; color:#000; }
.hero__ctrl{ position:absolute; z-index:3; left:0; right:0; bottom:22px; display:flex; align-items:center; justify-content:center; gap:14px; pointer-events:none; }
.hero__ctrl > *{ pointer-events:auto; }
.hero__dots{ display:flex; gap:4px; padding:4px 10px; border-radius:999px; background:rgba(0,0,0,.22); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.hero__dot{ position:relative; width:30px; height:30px; border:0; background:none; padding:0; }
.hero__dot::before,.hero__dot::after{ content:""; position:absolute; left:3px; right:3px; top:14px; height:2px; border-radius:2px; background:rgba(255,255,255,.45); }
.hero__dot::after{ right:auto; width:0; background:#fff; }
.hero__dot.is-on::after{ animation:dotfill var(--dur, 6s) linear forwards; }
.hero.is-paused .hero__dot.is-on::after{ animation-play-state:paused; }
@keyframes dotfill{ to{ width:calc(100% - 6px); } }
.hero__arrow{ width:44px; height:44px; border-radius:50%; border:0; background:rgba(255,255,255,.9); color:#000; display:none; place-items:center; transition:transform .3s var(--ease-out), background .3s; }
.hero__arrow:hover{ transform:scale(1.08); background:#fff; }
@media (min-width:750px){ .hero__arrow{ display:grid; } }

/* product grid + carousels + cards */
.grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:28px var(--gap); }
@media (min-width:750px){ .grid{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (min-width:1100px){ .grid{ grid-template-columns:repeat(4, minmax(0,1fr)); gap:40px var(--gap); } }
.car{ position:relative; }
.track{ display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - var(--gap)) / 2.15); gap:var(--gap); overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; scroll-padding:0 var(--gutter); padding:0 var(--gutter); margin:0 calc(var(--gutter) * -1); }
.track::-webkit-scrollbar{ display:none; }
.track > *{ scroll-snap-align:start; }
@media (min-width:750px){ .track{ grid-auto-columns:calc((100% - 2 * var(--gap)) / 3.2); } }
@media (min-width:1100px){ .track{ grid-auto-columns:calc((100% - 3 * var(--gap)) / 4); padding:0; margin:0; scroll-padding:0; } }
.card{ position:relative; display:flex; flex-direction:column; min-width:0; }
.card__media{ position:relative; aspect-ratio:1/1.12; border-radius:var(--radius); overflow:hidden; background:var(--bg2); }
.card__img{ position:absolute; inset:0; }
.card__img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; mix-blend-mode:multiply; transition:opacity .6s var(--ease), transform 1.1s var(--ease-out); }
.card__i2{ opacity:0; }
@media (hover:hover){ .card.has-alt:hover .card__i1{ opacity:0; } .card.has-alt:hover .card__i2{ opacity:1; } .card:hover .card__img img{ transform:scale(1.04); } }
.card__badges{ position:absolute; top:10px; left:10px; display:flex; flex-direction:column; align-items:flex-start; gap:6px; pointer-events:none; z-index:2; }
.badge{ display:inline-block; padding:4px 9px; border-radius:6px; font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; line-height:1.4; }
.badge--sale{ background:var(--sale-bg); color:var(--sale-text); }
.badge--sold{ background:var(--text); color:var(--bg); }
.badge--custom{ background:var(--badge); color:#000; }
.card__quick{ position:absolute; right:10px; bottom:10px; z-index:3; display:inline-flex; align-items:center; gap:0; height:44px; min-width:44px; padding:0 11px; border-radius:999px; border:0; background:var(--bg); color:var(--text); box-shadow:0 4px 14px rgba(0,0,0,.08);
  font-size:11.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; overflow:hidden; transition:background .3s, color .3s, gap .4s var(--ease-out); }
.card__quick svg{ width:21px; height:21px; }
.card__quick span{ max-width:0; overflow:hidden; white-space:nowrap; transition:max-width .45s var(--ease-out); }
@media (hover:hover){ .card__quick:hover,.card__quick:focus-visible{ gap:8px; background:var(--text); color:var(--bg); } .card__quick:hover span,.card__quick:focus-visible span{ max-width:160px; } }
.card__quick.is-added{ background:var(--accent); color:var(--accent-text); }
.card__info{ padding-top:14px; display:flex; flex-direction:column; gap:3px; }
.card__vendor{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.card__title{ font-family:var(--font-head); font-size:15.5px; font-weight:600; line-height:1.3; letter-spacing:-.005em; }
.card__title a{ text-decoration:none; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.card__title a:hover{ text-decoration:underline; text-underline-offset:3px; }
.card__sub{ font-size:13px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card__price{ margin-top:4px; }
.price{ display:inline-flex; flex-wrap:wrap; align-items:baseline; gap:2px 8px; font-size:15px; }
.price__from{ font-size:12px; color:var(--muted); }
.price__cmp{ color:var(--muted); font-size:.88em; }
.price--sale .price__now{ color:var(--accent); font-weight:600; }
@media (max-width:749px){ .card__title{ font-size:14px; } .price{ font-size:14px; } .card__quick{ right:8px; bottom:8px; height:40px; min-width:40px; padding:0 9px; } }

/* mosaic */
.mosaic{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); }
.tile{ position:relative; display:block; aspect-ratio:1; border-radius:var(--radius-lg); overflow:hidden; background:var(--bg2); color:#fff; text-decoration:none; isolation:isolate; }
.tile:first-child{ grid-column:span 2; aspect-ratio:16/11; }
.tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease-out); z-index:-1; }
.tile::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.62)); z-index:-1; }
.tile:hover img{ transform:scale(1.06); }
.tile__t{ position:absolute; left:14px; right:12px; bottom:12px; display:flex; align-items:flex-end; justify-content:space-between; gap:8px; font-family:var(--font-head); font-weight:600; font-size:16px; line-height:1.15; }
.tile__go{ flex:none; width:36px; height:36px; border-radius:50%; background:#fff; color:#000; display:grid; place-items:center; transition:transform .45s var(--ease-out); }
.tile__go svg{ width:18px; height:18px; }
.tile:hover .tile__go{ transform:rotate(-45deg); }
@media (min-width:900px){
  .mosaic{ grid-template-columns:repeat(4,1fr); grid-auto-rows:clamp(220px, 19vw, 300px); }
  .tile,.tile:first-child{ aspect-ratio:auto; grid-column:var(--dc, auto); } .tile:nth-child(1){ grid-row:var(--dr, span 2); } /* v5: spans set per tile count in home.js */
  .tile__t{ left:26px; right:22px; bottom:22px; font-size:24px; } .tile:nth-child(1) .tile__t{ font-size:36px; }
  .tile__go{ width:46px; height:46px; }
}

/* collection list */
.clist .track{ grid-auto-columns:calc((100% - var(--gap)) / 2.4); }
@media (min-width:750px){ .clist .track{ grid-auto-columns:calc((100% - 3 * var(--gap)) / 4.3); } }
@media (min-width:1100px){ .clist .track{ grid-auto-columns:calc((100% - 5 * var(--gap)) / 6); } }
.ccard{ display:flex; flex-direction:column; gap:12px; text-decoration:none; }
.ccard__img{ position:relative; display:block; aspect-ratio:1/1.15; border-radius:var(--radius-lg); overflow:hidden; background:var(--bg2); }
.ccard__img img{ width:100%; height:100%; object-fit:cover; mix-blend-mode:multiply; transition:transform 1.1s var(--ease-out); }
.ccard:hover .ccard__img img{ transform:scale(1.06); }
.ccard__t{ display:flex; align-items:center; justify-content:space-between; gap:8px; font-family:var(--font-head); font-weight:600; font-size:16px; line-height:1.2; }
.ccard__t svg{ width:18px; height:18px; transition:transform .35s var(--ease-out); }
.ccard:hover .ccard__t svg{ transform:translateX(4px); }
.ccard__n{ font-size:12.5px; color:var(--muted); margin-top:-8px; }

/* brand banners */
.bb .track{ grid-auto-columns:86%; }
@media (min-width:750px){ .bb .track{ grid-auto-columns:72%; } }
@media (min-width:1100px){ .bb .track{ grid-auto-columns:calc((100% - var(--gap)) / 1.55); padding:0 var(--gutter); margin:0 calc(var(--gutter) * -1); scroll-padding:0 var(--gutter); } }
.bcard{ position:relative; display:block; aspect-ratio:4/5; border-radius:var(--radius-lg); overflow:hidden; background:var(--bg2); text-decoration:none; color:#fff; isolation:isolate; }
@media (min-width:750px){ .bcard{ aspect-ratio:16/9; } }
.bcard picture,.bcard img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform 1.4s var(--ease-out); }
.bcard:hover img{ transform:scale(1.04); }
.bcard::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(0,0,0,0) 38%, rgba(0,0,0,.62)); }
.bcard__in{ position:absolute; left:20px; right:20px; bottom:20px; display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
@media (min-width:750px){ .bcard__in{ left:36px; bottom:34px; right:36px; } }
.bcard__brand{ font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; }
.bcard__h{ font-family:var(--font-menu); font-weight:400; font-size:clamp(30px, 3.6vw, 54px); line-height:1.02; letter-spacing:-.01em; }
.bcard__t{ max-width:46ch; font-size:14.5px; opacity:.92; }
.bcard .btn{ margin-top:6px; }

/* image with text */
.iwt{ display:grid; gap:28px; align-items:center; }
.iwt--bg{ background:var(--bg2); border-radius:var(--radius-lg); padding:20px; }
.iwt__img{ border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:4/3.4; background:var(--bg2); }
.iwt__img img{ width:100%; height:100%; object-fit:cover; }
.iwt__txt{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; padding:8px; }
@media (min-width:900px){ .iwt{ grid-template-columns:1fr 1fr; gap:6vw; } .iwt--right .iwt__img{ order:2; } .iwt--bg{ padding:32px; } }

/* testimonials */
.testi .track{ grid-auto-columns:86%; }
@media (min-width:750px){ .testi .track{ grid-auto-columns:calc((100% - var(--gap)) / 2.2); } }
@media (min-width:1100px){ .testi .track{ grid-auto-columns:calc((100% - 2 * var(--gap)) / 3); } }
.tcard{ display:flex; flex-direction:column; gap:14px; padding:26px; border-radius:var(--radius-lg); background:var(--bg2); height:100%; }
.stars{ display:flex; gap:2px; color:var(--accent); } .stars svg{ width:16px; height:16px; }
.tcard__t{ font-family:var(--font-head); font-weight:600; font-size:19px; }
.tcard__q{ font-size:15px; line-height:1.6; flex:1; }
.tcard__a{ font-size:13px; color:var(--muted); display:flex; align-items:center; gap:6px; }
.tcard__a svg{ width:16px; height:16px; color:var(--accent); }
.tcard__p{ display:flex; align-items:center; gap:12px; padding-top:14px; border-top:1px solid color-mix(in srgb, var(--text) 10%, transparent); text-decoration:none; font-size:13.5px; font-weight:500; line-height:1.3; }
.tcard__p > span:first-child{ width:52px; height:52px; flex:none; border-radius:8px; overflow:hidden; background:var(--bg); }
.tcard__p img{ width:100%; height:100%; object-fit:cover; }
.tcard__p:hover > span:last-child{ text-decoration:underline; }
.divider{ border:0; border-top:1px solid var(--border); margin:0; }

/* product spotlight */
.spot{ display:grid; gap:28px; }
.spot__media{ position:relative; aspect-ratio:1; border-radius:var(--radius-lg); overflow:hidden; background:var(--bg2); }
.spot__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; mix-blend-mode:multiply; opacity:0; transform:scale(1.04); transition:opacity .7s var(--ease), transform 1.2s var(--ease-out); }
.spot__media img.is-on{ opacity:1; transform:none; }
.spot__list{ display:flex; flex-direction:column; margin-top:8px; }
.spot__item{ border-top:1px solid var(--border); }
.spot__item:last-child{ border-bottom:1px solid var(--border); }
.spot__btn{ display:flex; align-items:center; gap:16px; width:100%; padding:20px 0; border:0; background:none; text-align:left; }
.spot__num{ font-size:12px; font-weight:600; letter-spacing:.1em; color:var(--muted); width:24px; flex:none; }
.spot__name{ flex:1; font-family:var(--font-head); font-weight:600; font-size:clamp(19px, 2vw, 26px); line-height:1.2; transition:color .3s; }
.spot__item:not(.is-on) .spot__name{ color:color-mix(in srgb, var(--text) 45%, transparent); }
.spot__btn svg{ transition:transform .4s var(--ease-out); }
.spot__item.is-on .spot__btn svg{ transform:rotate(45deg); }
.spot__panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .55s var(--ease); }
.spot__item.is-on .spot__panel{ grid-template-rows:1fr; }
.spot__panel > div{ overflow:hidden; }
.spot__inner{ padding:0 0 24px 40px; display:flex; flex-direction:column; gap:16px; align-items:flex-start; }
.spot__bul li{ position:relative; padding-left:22px; margin:6px 0; }
.spot__bul li::before{ content:""; position:absolute; left:0; top:.5em; width:10px; height:10px; border-radius:50%; background:var(--badge); box-shadow:inset 0 0 0 2px var(--accent); }
@media (min-width:900px){ .spot{ grid-template-columns:1fr 1fr; gap:6vw; align-items:center; } }

/* rich text, newsletter, social */
.rt{ max-width:760px; margin:0 auto; text-align:center; display:flex; flex-direction:column; align-items:center; gap:16px; }
.rt__t{ color:var(--muted); font-size:16.5px; }
.news{ background:var(--bg2); border-radius:var(--radius-lg); padding:44px 22px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:14px; }
@media (min-width:750px){ .news{ padding:72px 40px; } }
.news form{ display:flex; width:100%; max-width:520px; margin-top:10px; gap:8px; flex-wrap:wrap; }
.field-pill{ flex:1 1 220px; min-width:0; height:52px; padding:0 22px; border-radius:999px; border:1px solid var(--border); background:var(--bg); outline:none; transition:border-color .3s; }
.field-pill:focus{ border-color:var(--text); }
.news .btn{ min-height:52px; flex:1 1 140px; }
.news__msg{ font-size:14px; min-height:1.4em; }
.news__msg.ok{ color:var(--accent); } .news__msg.err{ color:#b3261e; }
.social .track{ grid-auto-columns:calc((100% - var(--gap)) / 2.3); }
@media (min-width:750px){ .social .track{ grid-auto-columns:calc((100% - 3 * var(--gap)) / 4.2); } }
@media (min-width:1100px){ .social .track{ grid-auto-columns:calc((100% - 5 * var(--gap)) / 6); } }
.sg{ position:relative; display:block; aspect-ratio:1; border-radius:var(--radius); overflow:hidden; background:var(--bg2); }
.sg img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease-out); }
.sg::after{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.28); opacity:0; transition:opacity .4s; }
.sg span{ position:absolute; inset:0; display:grid; place-items:center; color:#fff; z-index:1; opacity:0; transform:scale(.8); transition:opacity .4s, transform .5s var(--ease-out); }
.sg span svg{ width:30px; height:30px; }
.sg:hover img{ transform:scale(1.06); } .sg:hover::after,.sg:hover span{ opacity:1; } .sg:hover span{ transform:none; }

/* ===== footer ===== */
.ftr{ background:var(--foot-bg); color:var(--foot-text); padding:44px 0 20px; }
@media (min-width:750px){ .ftr{ padding:64px 0 24px; } }
.ftr a{ text-decoration:none; } .ftr a:hover{ text-decoration:underline; }
.ftr__top{ display:grid; gap:28px; }
@media (min-width:750px){ .ftr__top{ grid-template-columns:minmax(0,1.3fr) minmax(0,2fr); gap:60px; } }
.ftr__logo{ display:inline-block; margin-bottom:16px; } .ftr__logo:hover{ text-decoration:none!important; }
.ftr__about{ max-width:42ch; font-size:14px; opacity:.85; margin-bottom:18px; }
.ftr__contact{ display:grid; gap:8px; font-size:14px; }
.ftr__contact a,.ftr__contact span{ display:inline-flex; align-items:center; gap:10px; }
.ftr__contact svg{ width:18px; height:18px; }
.ftr__social{ display:flex; gap:8px; margin-top:20px; }
.ftr__social a{ width:42px; height:42px; display:grid; place-items:center; border-radius:50%; border:1px solid color-mix(in srgb, var(--foot-text) 22%, transparent); transition:background .3s, color .3s; }
.ftr__social a:hover{ background:var(--foot-text); color:var(--foot-bg); }
.ftr__social svg{ width:18px; height:18px; }
.ftr__cols{ display:grid; }
@media (min-width:750px){ .ftr__cols{ grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); gap:40px; } }
.ftr__col{ border-top:1px solid color-mix(in srgb, var(--foot-text) 14%, transparent); }
.ftr__col:last-child{ border-bottom:1px solid color-mix(in srgb, var(--foot-text) 14%, transparent); }
@media (min-width:750px){ .ftr__col,.ftr__col:last-child{ border:0; } }
.ftr__col summary{ list-style:none; display:flex; justify-content:space-between; align-items:center; min-height:52px; font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; cursor:pointer; }
.ftr__col summary::-webkit-details-marker{ display:none; }
.ftr__pm svg{ width:18px; height:18px; transition:transform .35s var(--ease-out); }
.ftr__col[open] .ftr__pm svg{ transform:rotate(45deg); }
@media (min-width:750px){ .ftr__col summary{ cursor:default; pointer-events:none; min-height:0; padding-bottom:16px; } .ftr__pm{ display:none; } }
.ftr__col ul{ display:grid; gap:9px; padding-bottom:18px; font-size:14px; }
.ftr__bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:14px; margin-top:32px; padding-top:20px; border-top:1px solid color-mix(in srgb, var(--foot-text) 14%, transparent); font-size:13px; }
.pay{ display:flex; flex-wrap:wrap; gap:6px; }
.pay__i{ height:28px; padding:0 10px; display:inline-flex; align-items:center; border-radius:6px; background:#fff; border:1px solid color-mix(in srgb, var(--foot-text) 10%, transparent); font-size:11px; font-weight:700; letter-spacing:.02em; }
.pay--visa{ color:#1a1f71; font-style:italic; } .pay--mastercard{ color:#eb001b; } .pay--jazzcash{ color:#c8102e; } .pay--easypaisa{ color:#1ea54c; } .pay--cod{ color:var(--accent); }

/* ===== drawers / sheets ===== */
.drawer{ position:fixed; inset:0; z-index:95; }
.drawer[hidden]{ display:none; }
.drawer__scrim,.sheet__scrim{ position:absolute; inset:0; background:rgba(0,0,0,.4); opacity:0; transition:opacity .4s var(--ease); }
.drawer.is-open .drawer__scrim,.sheet.is-open .sheet__scrim{ opacity:1; }
.drawer__panel{ position:absolute; top:0; right:0; bottom:0; width:min(440px, 100%); background:var(--bg); display:flex; flex-direction:column; transform:translateX(100%); transition:transform .45s cubic-bezier(.46,.01,.32,1); }
@media (min-width:750px){ .drawer__panel{ top:10px; right:10px; bottom:10px; border-radius:var(--radius-lg); overflow:hidden; } }
.drawer.is-open .drawer__panel{ transform:none; }
.drawer__head{ display:flex; align-items:center; justify-content:space-between; padding:12px 12px 12px 22px; border-bottom:1px solid var(--border); }
.drawer__title{ font-size:20px; } .drawer__n{ font-weight:400; color:var(--muted); font-size:15px; }
.drawer__body{ flex:1; overflow-y:auto; padding:0 22px; }
.drawer__foot{ padding:16px 22px max(18px, env(safe-area-inset-bottom)); border-top:1px solid var(--border); display:grid; gap:10px; background:var(--bg); }
.drawer__foot:empty{ display:none; }
.drawer__sub{ display:flex; justify-content:space-between; font-size:16px; }
.drawer__note{ font-size:12.5px; color:var(--muted); margin-top:-4px; }
.drawer__empty{ display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center; padding:80px 0; }
.drawer__emptyicon{ width:72px; height:72px; display:grid; place-items:center; border-radius:50%; background:var(--bg2); } .drawer__emptyicon svg{ width:30px; height:30px; }
.ship-bar{ padding:16px 0; font-size:13.5px; border-bottom:1px solid var(--border); }
.ship-bar__track{ height:6px; border-radius:6px; background:var(--bg2); margin-top:10px; overflow:hidden; }
.ship-bar__track span{ display:block; height:100%; border-radius:6px; background:var(--accent); transition:width .6s var(--ease-out); }
.line{ display:grid; grid-template-columns:84px minmax(0,1fr) auto; gap:14px; padding:18px 0; border-bottom:1px solid var(--border); }
.lines .line:last-child{ border-bottom:0; }
.line__img{ display:block; aspect-ratio:1; border-radius:8px; overflow:hidden; background:var(--bg2); }
.line__img img{ width:100%; height:100%; object-fit:cover; mix-blend-mode:multiply; }
.line__info{ min-width:0; display:flex; flex-direction:column; gap:3px; }
.line__title{ font-family:var(--font-head); font-weight:600; font-size:14.5px; line-height:1.3; text-decoration:none; }
.line__title:hover{ text-decoration:underline; }
.line__var,.line__price{ font-size:13px; color:var(--muted); }
.line__row{ display:flex; align-items:center; gap:14px; margin-top:8px; }
.line__rm{ border:0; background:none; padding:8px 0; font-size:12.5px; text-decoration:underline; color:var(--muted); }
.line__total{ font-size:14px; font-weight:600; }
.qty{ display:inline-flex; align-items:center; height:40px; border:1px solid var(--border); border-radius:999px; }
.qty button{ width:40px; height:38px; border:0; background:none; display:grid; place-items:center; border-radius:999px; }
.qty button:hover{ background:var(--bg2); } .qty svg{ width:16px; height:16px; }
.qty span,.qty input{ min-width:26px; width:34px; text-align:center; font-size:14px; border:0; background:none; -moz-appearance:textfield; outline:none; }
.qty input::-webkit-inner-spin-button{ -webkit-appearance:none; }
.sheet{ position:fixed; inset:0; z-index:96; display:flex; align-items:flex-end; justify-content:center; }
@media (min-width:750px){ .sheet{ align-items:center; } }
.sheet__panel{ position:relative; width:min(480px, 100%); background:var(--bg); border-radius:22px 22px 0 0; padding:24px 22px max(22px, env(safe-area-inset-bottom)); display:grid; gap:16px; transform:translateY(100%); transition:transform .45s var(--ease-out); }
@media (min-width:750px){ .sheet__panel{ border-radius:var(--radius-lg); transform:translateY(30px) scale(.97); opacity:0; transition:transform .45s var(--ease-out), opacity .3s; } .sheet.is-open .sheet__panel{ opacity:1; } }
.sheet.is-open .sheet__panel{ transform:none; }
.sheet__x{ position:absolute; top:10px; right:10px; width:44px; height:44px; border:0; background:none; border-radius:50%; display:grid; place-items:center; }
.sheet__top{ display:flex; gap:14px; align-items:center; padding-right:36px; }
.sheet__img{ width:84px; flex:none; aspect-ratio:1; border-radius:8px; overflow:hidden; background:var(--bg2); } .sheet__img img{ width:100%; height:100%; object-fit:cover; mix-blend-mode:multiply; }
.sheet__title{ font-family:var(--font-head); font-weight:600; font-size:17px; line-height:1.25; }
.sheet__price s{ color:var(--muted); font-size:.9em; margin-left:6px; }
.sheet__more{ text-align:center; font-size:13px; }
.opts{ border:0; margin:0; padding:0; min-width:0; }
.opts legend{ font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; margin-bottom:10px; padding:0; }
.opts legend b{ font-weight:400; letter-spacing:0; text-transform:none; color:var(--muted); margin-left:6px; font-size:13px; }
.opts__row{ display:flex; flex-wrap:wrap; gap:8px; }
.opt{ min-height:44px; padding:0 18px; border-radius:999px; border:1px solid var(--border); background:var(--bg); font-size:14px; transition:border-color .25s, background .25s, color .25s; }
.opt:hover{ border-color:var(--text); }
.opt.is-on{ background:var(--text); color:var(--bg); border-color:var(--text); }
.opt:disabled,.opt.is-na{ opacity:.45; text-decoration:line-through; }
.opt:disabled{ cursor:not-allowed; }

/* ===== collection / search ===== */
.crumbs{ display:flex; flex-wrap:wrap; gap:6px; font-size:12.5px; color:var(--muted); padding-top:18px; }
.crumbs a{ text-decoration:none; } .crumbs a:hover{ text-decoration:underline; }
.crumbs li + li::before{ content:"/"; margin-right:6px; opacity:.5; }
.chead{ padding:18px 0 26px; }
.chead h1{ font-size:clamp(34px, 5vw, 64px); letter-spacing:-.03em; }
.chead p{ color:var(--muted); margin-top:10px; max-width:60ch; }
.cbanner{ position:relative; margin:16px 0 30px; border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:4/4.2; color:#fff; isolation:isolate; display:flex; align-items:flex-end; }
@media (min-width:750px){ .cbanner{ aspect-ratio:auto; height:clamp(320px, 34vw, 480px); } }
.cbanner img,.cbanner picture{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.cbanner::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, transparent 35%, rgba(0,0,0,.58)); }
.cbanner__in{ padding:24px; } @media (min-width:750px){ .cbanner__in{ padding:40px; } }
.cbanner h1{ font-size:clamp(36px, 5vw, 72px); }
.cbanner p{ opacity:.92; margin-top:8px; max-width:50ch; }
.toolbar{ position:sticky; top:var(--hdr-h); z-index:20; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 0; background:var(--bg); border-bottom:1px solid var(--border); margin-bottom:24px; }
.toolbar__l,.toolbar__r{ display:flex; align-items:center; gap:10px; min-width:0; }
.toolbar__count{ font-size:13.5px; color:var(--muted); white-space:nowrap; }
.fbtn{ display:inline-flex; align-items:center; gap:8px; height:42px; padding:0 16px; border-radius:999px; border:1px solid var(--text); background:var(--bg); font-size:12.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; }
.fbtn b{ display:inline-grid; place-items:center; min-width:20px; height:20px; border-radius:999px; background:var(--text); color:var(--bg); font-size:11px; padding:0 5px; }
@media (min-width:1100px){ .fbtn{ display:none; } }
.select{ position:relative; }
.select select{ height:42px; max-width:52vw; padding:0 36px 0 16px; border-radius:999px; border:1px solid var(--border); background:var(--bg); -webkit-appearance:none; appearance:none; font-size:13.5px; cursor:pointer; text-overflow:ellipsis; }
.select svg{ position:absolute; right:12px; top:50%; width:16px; height:16px; transform:translateY(-50%); pointer-events:none; }
.gtoggle{ display:none; gap:2px; }
@media (min-width:1100px){ .gtoggle{ display:flex; } }
.gtoggle button{ width:42px; height:42px; border-radius:50%; border:1px solid transparent; background:none; display:grid; place-items:center; color:var(--muted); }
.gtoggle button[aria-pressed="true"]{ border-color:var(--text); color:var(--text); }
.gtoggle i{ display:flex; gap:2px; } .gtoggle i b{ display:block; width:4px; height:14px; background:currentColor; border-radius:1px; }
.cwrap{ display:grid; gap:32px; }
@media (min-width:1100px){ .cwrap{ grid-template-columns:250px minmax(0,1fr); gap:44px; } }
.filters{ display:none; }
@media (min-width:1100px){ .filters{ display:block; position:sticky; top:calc(var(--hdr-h) + 60px); align-self:start; max-height:calc(100vh - var(--hdr-h) - 80px); overflow-y:auto; scrollbar-width:thin; padding-right:4px; } }
.fgroup{ border-bottom:1px solid var(--border); }
.fgroup summary{ list-style:none; display:flex; align-items:center; justify-content:space-between; min-height:54px; font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; cursor:pointer; }
.fgroup summary::-webkit-details-marker{ display:none; }
.fgroup summary svg{ width:16px; height:16px; transition:transform .35s var(--ease-out); }
.fgroup[open] summary svg{ transform:rotate(180deg); }
.fgroup__body{ padding-bottom:16px; display:grid; gap:2px; max-height:300px; overflow-y:auto; }
.check{ display:flex; align-items:center; gap:10px; min-height:38px; font-size:14px; cursor:pointer; }
.check input{ appearance:none; -webkit-appearance:none; width:20px; height:20px; border:1.5px solid color-mix(in srgb, var(--text) 35%, transparent); border-radius:5px; display:grid; place-items:center; margin:0; transition:background .2s, border-color .2s; flex:none; cursor:pointer; }
.check input:checked{ background:var(--text); border-color:var(--text); }
.check input:checked::after{ content:""; width:10px; height:6px; border:2px solid var(--bg); border-top:0; border-right:0; transform:rotate(-45deg) translate(1px,-1px); }
.check small{ margin-left:auto; color:var(--muted); font-size:12px; }
.prange{ display:grid; gap:14px; padding-bottom:18px; }
.prange__row{ display:flex; gap:8px; align-items:center; }
.prange__row label{ flex:1; display:flex; align-items:center; gap:6px; height:42px; padding:0 12px; border:1px solid var(--border); border-radius:10px; font-size:13px; color:var(--muted); min-width:0; }
.prange__row input{ width:100%; min-width:0; border:0; outline:none; background:none; font-size:14px; color:var(--text); }
.dual{ position:relative; height:24px; margin:0 4px; }
.dual input{ position:absolute; left:0; right:0; top:0; width:100%; height:24px; margin:0; background:none; pointer-events:none; -webkit-appearance:none; appearance:none; z-index:2; }
.dual input::-webkit-slider-runnable-track{ background:none; height:24px; }
.dual input::-webkit-slider-thumb{ pointer-events:auto; -webkit-appearance:none; width:20px; height:20px; margin-top:2px; border-radius:50%; background:var(--bg); border:2px solid var(--text); cursor:grab; }
.dual input::-moz-range-thumb{ pointer-events:auto; width:16px; height:16px; border-radius:50%; background:var(--bg); border:2px solid var(--text); cursor:grab; }
.dual__bar{ position:absolute; left:0; right:0; top:11px; height:2px; background:var(--border); border-radius:2px; }
.dual__fill{ position:absolute; top:11px; height:2px; background:var(--text); }
.active-f{ display:flex; flex-wrap:wrap; gap:8px; margin:-8px 0 18px; }
.active-f:empty{ display:none; }
.active-f button{ display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 12px; border-radius:999px; border:1px solid var(--border); background:var(--bg2); font-size:13px; }
.active-f button svg{ width:14px; height:14px; }
.active-f .clear{ background:none; border:0; text-decoration:underline; }
.loadmore{ display:flex; flex-direction:column; align-items:center; gap:14px; margin:48px 0 24px; font-size:13.5px; color:var(--muted); }
.loadmore__bar{ width:200px; height:3px; border-radius:3px; background:var(--border); overflow:hidden; } .loadmore__bar span{ display:block; height:100%; background:var(--text); transition:width .5s var(--ease-out); }
.empty-state{ text-align:center; padding:70px 0; display:flex; flex-direction:column; align-items:center; gap:14px; }
.empty-state p{ color:var(--muted); }
.empty-state h1{ font-size:clamp(30px, 4vw, 48px); }
@media (min-width:1100px){ .grid.g-3{ grid-template-columns:repeat(3,minmax(0,1fr)); } .grid.g-2{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:749px){ .grid.g-1m{ grid-template-columns:1fr; } }
.fdrawer .drawer__panel{ left:0; right:auto; transform:translateX(-100%); }
@media (min-width:750px){ .fdrawer .drawer__panel{ left:10px; } }
.fdrawer.is-open .drawer__panel{ transform:none; }
.fdrawer .drawer__foot{ grid-template-columns:1fr 1.5fr; }
.big-search{ display:flex; align-items:center; gap:12px; border-bottom:1.5px solid var(--text); margin-top:14px; max-width:760px; }
.big-search input{ flex:1; min-width:0; height:62px; border:0; outline:none; background:none; font-family:var(--font-head); font-size:clamp(22px, 3.4vw, 36px); font-weight:500; letter-spacing:-.02em; }
.big-search input::-webkit-search-cancel-button{ display:none; }
.big-search button{ border:0; background:none; width:48px; height:48px; display:grid; place-items:center; } .big-search svg{ width:26px; height:26px; }

/* ===== product page ===== */
.pdp{ display:grid; gap:22px; padding-top:12px; padding-bottom:20px; }
@media (min-width:1000px){ .pdp{ grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:56px; padding-top:20px; } }
.gal{ position:relative; min-width:0; }
@media (min-width:1000px){ .gal{ display:grid; grid-template-columns:76px minmax(0,1fr); gap:16px; align-items:start; position:sticky; top:calc(var(--hdr-h) + 8px); align-self:start; } }
.gal__main{ position:relative; margin:0 calc(var(--gutter) * -1); min-width:0; }
@media (min-width:1000px){ .gal__main{ margin:0; order:2; } }
.gal__track{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
.gal__track::-webkit-scrollbar{ display:none; }
@media (min-width:1000px){ .gal__track{ border-radius:var(--radius-lg); } }
.gal__slide{ flex:0 0 100%; scroll-snap-align:center; aspect-ratio:1; background:var(--bg2); position:relative; overflow:hidden; cursor:zoom-in; }
.gal__slide img{ width:100%; height:100%; object-fit:cover; mix-blend-mode:multiply; transition:transform .3s ease-out; transform-origin:var(--zx,50%) var(--zy,50%); }
@media (hover:hover) and (min-width:1000px){ .gal__slide.is-zoom img{ transform:scale(2); } }
.gal__count{ position:absolute; left:50%; bottom:14px; transform:translateX(-50%); display:flex; gap:6px; }
.gal__count i{ width:6px; height:6px; border-radius:6px; background:color-mix(in srgb, var(--text) 25%, transparent); transition:width .35s var(--ease-out), background .3s; }
.gal__count i.is-on{ width:20px; background:var(--text); }
@media (min-width:1000px){ .gal__count{ display:none; } }
.gal__zoom{ position:absolute; right:14px; top:14px; width:44px; height:44px; border-radius:50%; background:var(--bg); border:0; display:grid; place-items:center; box-shadow:0 4px 14px rgba(0,0,0,.08); z-index:2; }
.gal__badge{ position:absolute; left:14px; top:14px; z-index:2; }
@media (min-width:1000px){ .gal__badge{ left:18px; top:18px; } }
.gal__thumbs{ display:none; }
@media (min-width:1000px){ .gal__thumbs{ display:flex; flex-direction:column; gap:10px; order:1; } }
.gal__thumb{ display:block; width:76px; aspect-ratio:1; padding:0; border-radius:10px; overflow:hidden; border:1.5px solid transparent; background:var(--bg2); transition:border-color .3s; }
.gal__thumb img{ width:100%; height:100%; object-fit:cover; mix-blend-mode:multiply; }
.gal__thumb.is-on{ border-color:var(--text); }
.pinfo{ display:flex; flex-direction:column; gap:16px; min-width:0; }
@media (min-width:1000px){ .pinfo{ padding-top:6px; } }
.pinfo__vendor{ align-self:flex-start; font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); text-decoration:none; }
.pinfo__vendor:hover{ text-decoration:underline; }
.pinfo h1{ font-size:clamp(26px, 2.6vw, 38px); letter-spacing:-.025em; margin-top:-6px; }
.pinfo__sub{ color:var(--muted); margin-top:-8px; }
.pinfo__rating{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); }
.pinfo__price{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.pinfo__price .price{ font-size:22px; }
.pinfo__tax{ font-size:12.5px; color:var(--muted); margin-top:-10px; }
.pinfo__stock{ display:flex; align-items:center; gap:8px; font-size:13.5px; }
.pinfo__stock i{ width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
.pinfo__stock.low i{ background:#c77700; box-shadow:0 0 0 4px #c7770022; }
.pinfo__stock.out i{ background:#b3261e; box-shadow:none; }
.pinfo__row{ display:flex; gap:10px; align-items:stretch; }
.pinfo__row .qty{ height:56px; flex:none; } .pinfo__row .qty button{ height:54px; width:44px; }
.atc{ flex:1; min-height:56px; padding:0 18px; }
.atc .dot{ opacity:.5; }
.wa-btn{ min-height:54px; }
.wa-btn svg{ width:20px; height:20px; }
.wa-btn:hover svg{ transform:none; }
.trust{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; }
.trust li{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; padding:14px 6px; border-radius:var(--radius); background:var(--bg2); font-size:12.5px; line-height:1.3; }
.trust svg{ width:22px; height:22px; color:var(--accent); }
.acc{ border-top:1px solid var(--border); margin-top:4px; }
.acc details{ border-bottom:1px solid var(--border); }
.acc summary{ list-style:none; display:flex; justify-content:space-between; align-items:center; min-height:58px; font-size:12.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; }
.acc summary::-webkit-details-marker{ display:none; }
.acc summary svg{ transition:transform .35s var(--ease-out); }
.acc details[open] summary svg{ transform:rotate(45deg); }
.acc__body{ padding:0 0 20px; color:color-mix(in srgb, var(--text) 82%, transparent); font-size:14.5px; }
.acc__body p + p{ margin-top:10px; }
.acc__body ul{ list-style:disc; padding-left:18px; }
.pinfo__sku{ font-size:12.5px; color:var(--muted); }
.sticky-atc{ position:fixed; left:0; right:0; bottom:0; z-index:30; display:flex; align-items:center; gap:12px; padding:10px var(--gutter) max(10px, env(safe-area-inset-bottom)); background:color-mix(in srgb, var(--bg) 92%, transparent); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-top:1px solid var(--border); transform:translateY(110%); transition:transform .45s var(--ease-out); }
.sticky-atc.is-on{ transform:none; }
.sticky-atc__img{ width:46px; height:46px; flex:none; border-radius:8px; overflow:hidden; background:var(--bg2); } .sticky-atc__img img{ width:100%; height:100%; object-fit:cover; mix-blend-mode:multiply; }
.sticky-atc__t{ flex:1; min-width:0; font-size:13px; line-height:1.25; } .sticky-atc__t b{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-family:var(--font-head); }
.sticky-atc .btn{ min-height:46px; padding:0 18px; }
@media (min-width:1000px){ .sticky-atc{ display:none; } }
.lightbox{ position:fixed; inset:0; z-index:99; background:var(--bg); display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .35s; overflow:auto; }
.lightbox.is-open{ opacity:1; }
.lightbox img{ max-width:100%; max-height:100%; object-fit:contain; }
.lightbox button{ position:fixed; top:12px; right:12px; width:48px; height:48px; border-radius:50%; border:0; background:var(--bg2); display:grid; place-items:center; }

/* ===== cart page / checkout ===== */
.pg-title{ font-size:clamp(32px, 4.4vw, 56px); letter-spacing:-.03em; padding:22px 0 24px; }
.cartp{ display:grid; gap:32px; padding-bottom:48px; }
@media (min-width:1000px){ .cartp{ grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:56px; align-items:start; } }
.cartp .lines{ border-top:1px solid var(--border); }
.summary{ background:var(--bg2); border-radius:var(--radius-lg); padding:24px; display:grid; gap:14px; }
@media (min-width:1000px){ .summary{ position:sticky; top:calc(var(--hdr-h) + 16px); } }
.summary__row{ display:flex; justify-content:space-between; gap:12px; font-size:14.5px; }
.summary__row--total{ font-size:19px; font-weight:600; padding-top:14px; border-top:1px solid color-mix(in srgb, var(--text) 12%, transparent); align-items:baseline; }
.summary__row--total small{ font-size:12px; color:var(--muted); font-weight:400; margin-right:6px; }
.summary .ship-bar{ border:0; padding:0 0 4px; }
.summary .ship-bar__track{ background:var(--bg); }
.co{ display:grid; gap:28px; padding-bottom:56px; }
@media (min-width:1000px){ .co{ grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:64px; align-items:start; } }
.co h2{ font-size:21px; }
.co__sec{ display:grid; gap:12px; padding-bottom:26px; margin-bottom:26px; border-bottom:1px solid var(--border); }
.f2{ display:grid; gap:12px; } @media (min-width:600px){ .f2{ grid-template-columns:1fr 1fr; } }
.fld{ position:relative; display:block; }
.fld input,.fld select,.fld textarea{ width:100%; height:58px; padding:24px 16px 8px; border:1px solid var(--border); border-radius:12px; background:var(--bg); outline:none; font-size:16px; transition:border-color .25s, box-shadow .25s; -webkit-appearance:none; appearance:none; }
.fld textarea{ height:100px; resize:vertical; padding-top:28px; }
.fld > span{ position:absolute; left:17px; top:9px; font-size:11.5px; color:var(--muted); pointer-events:none; }
.fld input:focus,.fld select:focus,.fld textarea:focus{ border-color:var(--text); box-shadow:0 0 0 3px color-mix(in srgb, var(--text) 8%, transparent); }
.fld.err input,.fld.err select{ border-color:#b3261e; }
.fld small{ display:block; font-size:12px; color:var(--muted); margin-top:6px; }
.fld.err small{ color:#b3261e; }
.fld .chev{ position:absolute; right:16px; top:21px; width:16px; height:16px; pointer-events:none; }
.rates{ display:grid; border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.rate{ display:flex; align-items:center; gap:12px; padding:16px; cursor:pointer; border-top:1px solid var(--border); font-size:14.5px; line-height:1.35; transition:background .25s; }
.rate:first-child{ border-top:0; }
.rate input{ appearance:none; -webkit-appearance:none; width:20px; height:20px; border-radius:50%; border:1.5px solid color-mix(in srgb, var(--text) 35%, transparent); margin:0; flex:none; display:grid; place-items:center; cursor:pointer; }
.rate input:checked{ border-color:var(--text); } .rate input:checked::after{ content:""; width:10px; height:10px; border-radius:50%; background:var(--text); }
.rate.is-on{ background:var(--bg2); }
.rate small{ display:block; color:var(--accent); font-size:12.5px; }
.rate b{ margin-left:auto; font-weight:600; white-space:nowrap; }
.paybox{ border:1.5px solid var(--text); border-radius:12px; padding:16px; display:flex; gap:12px; align-items:flex-start; background:var(--bg2); }
.paybox svg{ width:26px; height:26px; color:var(--accent); margin-top:1px; }
.paybox b{ display:block; } .paybox p{ font-size:13.5px; color:var(--muted); }
.disc{ display:flex; gap:8px; }
.disc .fld{ flex:1; min-width:0; }
.disc .btn{ min-height:58px; border-radius:12px; padding:0 20px; }
.disc-msg{ font-size:13px; } .disc-msg.ok{ color:var(--accent); } .disc-msg.err{ color:#b3261e; }
.co__sum .line{ grid-template-columns:64px minmax(0,1fr) auto; padding:12px 0; border:0; }
.co__sum .line__img{ position:relative; overflow:visible; background:none; }
.co__sum .line__img img{ border-radius:8px; background:var(--bg); }
.qbadge{ position:absolute; top:-7px; right:-7px; min-width:22px; height:22px; border-radius:999px; background:var(--text); color:var(--bg); font-size:11.5px; font-weight:700; display:grid; place-items:center; padding:0 6px; }
.co__toggle{ display:flex; width:100%; align-items:center; justify-content:space-between; gap:10px; padding:16px; border-radius:12px; border:1px solid var(--border); background:var(--bg2); font-size:14.5px; }
.co__toggle span{ display:inline-flex; align-items:center; gap:8px; } .co__toggle svg{ transition:transform .35s var(--ease-out); }
.co__toggle[aria-expanded="true"] svg{ transform:rotate(180deg); }
.co__toggle b{ font-size:16px; }
.co__sumbody{ display:grid; gap:14px; }
.co__sumbody[hidden]{ display:none; }
@media (min-width:1000px){ .co__toggle{ display:none; } .co__sumbody[hidden]{ display:grid; } .co__side{ position:sticky; top:calc(var(--hdr-h) + 16px); } }
.co__err{ padding:14px 16px; border-radius:12px; background:#fdecea; color:#8a1c14; font-size:14px; }
.co__err:empty{ display:none; }
.place{ min-height:60px; font-size:13.5px; }
.secure{ display:flex; align-items:center; justify-content:center; gap:8px; font-size:12.5px; color:var(--muted); margin-top:12px; text-align:center; } .secure svg{ width:16px; height:16px; }
.spin{ width:18px; height:18px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* order / track / page / brands / 404 */
.thanks{ max-width:720px; margin:0 auto; padding:40px 0 60px; display:grid; gap:22px; }
.thanks__badge{ width:76px; height:76px; border-radius:50%; background:var(--accent); color:var(--accent-text); display:grid; place-items:center; animation:pop .7s var(--ease-out) both; }
.thanks__badge svg{ width:36px; height:36px; stroke-width:2.2; }
@keyframes pop{ from{ transform:scale(.4); opacity:0; } }
.thanks h1{ font-size:clamp(30px, 4vw, 48px); }
.thanks__no{ font-size:15px; color:var(--muted); }
.wa-big{ min-height:64px; font-size:14px; background:#1f7a4d; border-color:#1f7a4d; color:#fff; white-space:normal; text-align:center; line-height:1.2; }
.wa-big:hover{ background:#17603c; border-color:#17603c; }
.wa-big svg{ width:24px; height:24px; }
.wa-big:hover svg{ transform:none; }
.card-box{ border:1px solid var(--border); border-radius:var(--radius-lg); padding:22px; display:grid; gap:12px; }
.card-box h2{ font-size:18px; }
.card-box p{ font-size:14.5px; color:var(--muted); }
.steps{ display:grid; counter-reset:s; margin-top:6px; }
.steps li{ position:relative; padding:0 0 22px 42px; font-size:14px; color:var(--muted); }
.steps li::before{ counter-increment:s; content:counter(s); position:absolute; left:0; top:-2px; width:26px; height:26px; border-radius:50%; border:1.5px solid var(--border); display:grid; place-items:center; font-size:12px; font-weight:700; background:var(--bg); z-index:1; }
.steps li::after{ content:""; position:absolute; left:12px; top:24px; bottom:0; width:1.5px; background:var(--border); }
.steps li:last-child{ padding-bottom:0; } .steps li:last-child::after{ display:none; }
.steps li.done{ color:var(--text); } .steps li.done::before{ content:"✓"; background:var(--accent); border-color:var(--accent); color:var(--accent-text); }
.steps li.done::after{ background:var(--accent); }
.steps b{ display:block; color:var(--text); font-family:var(--font-head); font-size:15px; }
.narrow{ max-width:620px; margin:0 auto; padding:24px 0 64px; }
.narrow form{ display:grid; gap:12px; margin-top:22px; }
.prose{ max-width:760px; padding-bottom:64px; font-size:16px; line-height:1.75; }
.prose h2,.prose h3{ margin:28px 0 10px; font-size:22px; } .prose p{ margin:0 0 14px; } .prose ul,.prose ol{ padding-left:20px; margin:0 0 14px; } .prose ul{ list-style:disc; } .prose a{ color:var(--accent); }
.contact-grid{ display:grid; gap:12px; margin:4px 0 32px; } @media (min-width:750px){ .contact-grid{ grid-template-columns:repeat(3,1fr); } }
.contact-grid a,.contact-grid div{ display:flex; flex-direction:column; gap:6px; padding:20px; border-radius:var(--radius-lg); background:var(--bg2); text-decoration:none; font-size:14px; }
.contact-grid svg{ width:24px; height:24px; color:var(--accent); }
.contact-grid b{ font-family:var(--font-head); font-size:16px; }
.brands-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--gap); padding-bottom:64px; }
@media (min-width:750px){ .brands-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:1100px){ .brands-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.brand-feat{ display:grid; grid-template-columns:1fr; gap:var(--gap); margin-bottom:var(--gap); }
@media (min-width:750px){ .brand-feat{ grid-template-columns:1fr 1fr; } }
.brand-feat .bcard{ aspect-ratio:16/10; }
.btile{ position:relative; display:flex; flex-direction:column; justify-content:flex-end; aspect-ratio:1/1.08; padding:16px; border-radius:var(--radius-lg); overflow:hidden; background:var(--bg2); text-decoration:none; isolation:isolate; }
.btile img{ position:absolute; inset:12% 12% 28%; width:76%; height:60%; object-fit:contain; mix-blend-mode:multiply; z-index:-1; transition:transform 1s var(--ease-out); }
.btile:hover img{ transform:scale(1.06); }
.btile b{ font-family:var(--font-head); font-size:18px; line-height:1.15; display:flex; justify-content:space-between; align-items:center; gap:8px; }
.btile b svg{ width:18px; height:18px; transition:transform .35s var(--ease-out); } .btile:hover b svg{ transform:translateX(4px); }
.btile small{ color:var(--muted); font-size:12.5px; }
.az{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 26px; }
.nf{ text-align:center; padding:80px 0 100px; display:flex; flex-direction:column; align-items:center; gap:18px; }
.nf__big{ font-family:var(--font-menu); font-size:clamp(110px, 22vw, 240px); line-height:.9; color:var(--accent); }
.nf p{ color:var(--muted); max-width:44ch; }
.skel{ background:linear-gradient(90deg, var(--bg2) 25%, color-mix(in srgb, var(--bg2) 60%, #fff) 50%, var(--bg2) 75%) 0 0/200% 100%; animation:sk 1.4s linear infinite; border-radius:var(--radius); }
@keyframes sk{ to{ background-position:-200% 0; } }
.loading-block{ min-height:60vh; }

#cw-header:empty{ display:block; height:var(--hdr-h); }
#cw-announcement:empty{ display:block; height:38px; background:var(--ann-bg); }
#cw-announcement[hidden]{ display:none; }

/* mosaic refinement: packshots sit on the secondary tone, label pill reads on any image */
.tile{ color:var(--text); }
.tile img{ mix-blend-mode:multiply; }
.tile::after{ background:linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,.10)); }
.tile__t{ align-items:center; }
.tile__t > span:first-child{ background:var(--bg); padding:9px 14px; border-radius:999px; font-size:14px; box-shadow:0 6px 20px rgba(0,0,0,.06); }
.tile__go{ background:var(--text); color:var(--bg); }
@media (min-width:900px){ .tile__t > span:first-child{ font-size:17px; padding:12px 20px; } .tile:nth-child(1) .tile__t > span:first-child{ font-size:22px; } }
.slide:not(.slide--dark) .slide__box{ text-shadow:0 1px 28px rgba(0,0,0,.28); }
.slide .btn{ text-shadow:none; }
@media (max-width:749px){ .sec-head{ flex-wrap:wrap; align-items:flex-end; } .social .sec-head__r{ width:100%; } }
.co__side--sum{ order:-1; } @media (min-width:1000px){ .co__side--sum{ order:2; } }
@media (max-width:520px){ .toolbar__count{ display:none; } .select select{ max-width:58vw; } }
.mnu__link{ line-height:1.2; } @media (min-width:900px){ .mnu__link{ line-height:1.08; } }
.mnu__waves,.srch__waves{ stroke:none; } .mnu__waves path,.srch__waves path{ stroke:none; }

/* resting wave texture behind the menu links (matches the reference's final state) */
.mnu__tex{ position:absolute; inset:0; width:100%; height:100%; opacity:0; transition:opacity .9s var(--ease-out); pointer-events:none; }
.mnu__tex path{ fill:var(--wave2); stroke:none; }
.mnu__tex .t1{ opacity:.42; } .mnu__tex .t2{ opacity:.26; }
.mnu.is-filled .mnu__tex{ opacity:1; }


/* =====================================================================
   v2 revision — site-palette menu, logo header, fly-to-bag, premium bag, custom select, polish
   ===================================================================== */
html{ overflow-x:clip; }

/* ---- header: real logo + compact monogram on scroll ---- */
.hdr svg{ stroke-width:1.35; }
.hdr .icon-btn svg{ width:23px; height:23px; }
.logo{ position:relative; min-height:44px; }
.logo__img{ display:block; width:min(calc(var(--logo-w, 170px) * .8), 40vw); height:auto; transition:opacity .45s var(--ease), transform .55s var(--ease-out); transform-origin:50% 50%; }
@media (min-width:1100px){ .logo__img{ width:var(--logo-w, 170px); } }
.logo__mono{ position:absolute; left:50%; top:50%; width:40px; height:40px; margin:-20px 0 0 -20px; opacity:0; transform:scale(.6) rotate(-12deg); transition:opacity .4s var(--ease), transform .6s var(--ease-out); pointer-events:none; }
.hdr.is-scrolled .logo.has-mono .logo__img{ opacity:0; transform:scale(.82); }
.hdr.is-scrolled .logo.has-mono .logo__mono{ opacity:1; transform:none; }
@media (max-width:359px){ .logo.has-mono .logo__img{ opacity:0; } .logo.has-mono .logo__mono{ opacity:1; transform:none; } }
/* v6: the header keeps one height while scrolling (it used to shrink 16px, shifting the whole page under the finger) */
.hdr__in{ height:var(--hdr-h); }
.hdr.is-scrolled{ box-shadow:0 1px 0 var(--border), 0 10px 30px -18px rgba(0,0,0,.18); }
.burger{ border-radius:999px; padding:0 12px 0 8px; margin-left:-8px; transition:background .3s; }
.burger:hover{ background:var(--bg2); }
.burger__box i{ height:1.4px; }
.burger:hover .burger__box i:nth-child(2){ width:28px; transition-delay:.04s; } .burger:hover .burger__box i:nth-child(3){ transition-delay:.08s; }
.hdr__link span{ background-position:100% 100%; }
.hdr__link::after{ content:""; position:absolute; left:50%; bottom:2px; width:4px; height:4px; margin-left:-2px; border-radius:50%; background:currentColor; opacity:0; transform:translateY(4px); transition:opacity .3s, transform .4s var(--ease-out); }
.hdr__link:hover::after{ opacity:0; }
.icon-btn{ transition:background .3s, transform .3s var(--ease-out); }
.icon-btn:active{ transform:scale(.92); }
.cart-btn__ico{ position:relative; display:inline-grid; place-items:center; }
.cart-btn .cart-count{ top:-6px; right:-9px; background:var(--text); color:var(--bg); box-shadow:0 0 0 2px var(--bg); }
.cart-btn.is-bounce .cart-btn__ico{ animation:bagbounce .8s cubic-bezier(.3,1.6,.5,1); }
.cart-btn.is-bounce::after{ content:""; position:absolute; left:50%; top:50%; width:44px; height:44px; margin:-22px 0 0 -22px; border-radius:50%; border:1.5px solid var(--text); animation:bagring .7s var(--ease-out) forwards; pointer-events:none; }
@media (min-width:1100px){ .cart-btn.is-bounce::after{ left:22px; } }
@keyframes bagbounce{ 0%{ transform:none; } 20%{ transform:scale(.82) translateY(2px); } 45%{ transform:scale(1.16) translateY(-3px) rotate(-6deg); } 65%{ transform:scale(.96) rotate(3deg); } 100%{ transform:none; } }
@keyframes bagring{ from{ transform:scale(.6); opacity:.5; } to{ transform:scale(1.5); opacity:0; } }
.cart-count.bump{ animation:countpop .55s cubic-bezier(.3,1.8,.5,1); }
@keyframes countpop{ 0%{ transform:scale(.4); } 55%{ transform:scale(1.35); } 100%{ transform:scale(1); } }

/* announcement: fade on phones, smooth marquee on desktop */
.ann{ letter-spacing:.04em; }
.ann__marq{ display:none; }
@media (min-width:1000px){
  .ann__in{ display:none; }
  .ann__marq{ display:block; overflow:hidden; height:38px; -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
  .ann__belt{ display:flex; width:max-content; height:100%; align-items:center; animation:annmarq 46s linear infinite; }
  .ann__marq:hover .ann__belt{ animation-play-state:paused; }
  .ann__set{ display:flex; align-items:center; }
  .ann__item{ padding:0 28px; white-space:nowrap; }
  .ann__item a{ text-decoration:none; } .ann__item a:hover{ text-decoration:underline; }
  .ann__sep{ font-style:normal; font-size:9px; opacity:.55; }
}
@keyframes annmarq{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .ann__belt{ animation:none; } }

/* ---- MENU: site palette (peach → warm off-white → warm white), black serif links ---- */
.mnu__tex{ transform:scaleX(-1); }
.mnu__tex path{ fill:var(--wave1); }
.mnu__tex .t1{ opacity:.55; } .mnu__tex .t2{ opacity:.4; }
.mnu__top{ display:grid; grid-template-columns:1fr auto 1fr; }
.mnu__close{ justify-self:start; padding:0 14px 0 8px; margin-left:-8px; gap:10px; border-radius:999px; transition:opacity .4s var(--ease), background .3s; }
.mnu__close:hover{ background:color-mix(in srgb, var(--menu-text) 7%, transparent); }
.mnu__logo{ display:flex; align-items:center; justify-content:center; }
.mnu__logo .logo__img{ width:min(calc(var(--logo-w, 170px) * .72), 38vw); }
.mnu__logo .wordmark{ font-size:17px; }
.mnu__topr{ justify-self:end; }
.mnu__backbtn{ background:var(--menu-text); color:var(--menu-bg); border-color:var(--menu-text); }
.mnu__backbtn:hover{ background:transparent; color:var(--menu-text); }
.mnu__more{ border-color:color-mix(in srgb, var(--menu-text) 22%, transparent); background:color-mix(in srgb, var(--menu-bg) 60%, transparent); }
.mnu__link:hover .mnu__more{ background:var(--menu-text); color:var(--menu-bg); }
.mnu__link:hover .mnu__txt{ font-style:italic; }
.mnu__eyebrow{ font-weight:600; opacity:.6; }
.mnu__foot{ border-top-color:color-mix(in srgb, var(--menu-text) 12%, transparent); }
.mnu__pill{ background:var(--wave1); color:var(--menu-text); border:1px solid color-mix(in srgb, var(--menu-text) 8%, transparent); }
.mnu__pill:hover{ background:var(--menu-text); color:var(--menu-bg); }
.mnu__sec a{ opacity:.7; }
.mnu__card{ box-shadow:0 30px 60px -30px rgba(0,0,0,.35); }

/* ---- SEARCH overlay: peach band, then warm off-white ---- */
.srch__waves .w1{ fill:var(--wave1); } .srch__waves .w2{ fill:var(--bg2); }
.srch.is-filled{ background:var(--bg2); }
.srch__clear,.chip{ background:#fff; }
.srch__thumb{ background:#fff; }

/* ---- fly-to-bag + toast ---- */
.fly{ position:fixed; z-index:120; pointer-events:none; border-radius:12%; overflow:hidden; background:var(--bg2); box-shadow:0 18px 40px -12px rgba(0,0,0,.35); will-change:transform, opacity; }
.fly img{ width:100%; height:100%; object-fit:cover; mix-blend-mode:multiply; }
.toast{ position:fixed; z-index:110; left:12px; right:12px; bottom:max(14px, env(safe-area-inset-bottom)); display:flex; align-items:center; gap:12px; padding:10px 10px 10px 10px; border-radius:16px; background:var(--text); color:var(--bg); box-shadow:0 20px 50px -18px rgba(0,0,0,.5); transform:translateY(calc(100% + 30px)); opacity:0; transition:transform .55s var(--ease-out), opacity .35s; }
.toast.is-on{ transform:none; opacity:1; }
.toast__img{ width:46px; height:46px; flex:none; border-radius:10px; overflow:hidden; background:var(--bg2); }
.toast__img img{ width:100%; height:100%; object-fit:cover; mix-blend-mode:multiply; }
.toast__t{ flex:1; min-width:0; display:flex; flex-direction:column; font-size:12.5px; line-height:1.3; }
.toast__t b{ font-size:14px; font-family:var(--font-head); font-weight:600; }
.toast__t span{ opacity:.7; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.toast__go{ flex:none; height:40px; padding:0 16px; border-radius:999px; border:0; background:var(--bg); color:var(--text); font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; transition:transform .3s var(--ease-out); }
.toast__go:hover{ transform:translateX(2px); }
@media (min-width:750px){ .toast{ left:auto; right:24px; top:calc(var(--hdr-h) + 50px); bottom:auto; width:380px; transform:translateY(-14px) scale(.98); } }
.card__quick.is-added,.atc.is-added,.sticky-atc__add.is-added{ animation:presspop .5s var(--ease-out); }
@keyframes presspop{ 30%{ transform:scale(.94); } 100%{ transform:none; } }

/* ---- the BAG drawer ---- */
.bag .drawer__scrim{ background:rgba(20,18,14,.32); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.bag .drawer__panel{ background:var(--bg); box-shadow:-30px 0 80px -40px rgba(0,0,0,.4); transition:transform .55s cubic-bezier(.22,1,.36,1); }
@media (max-width:749px){
  .bag .drawer__panel{ top:max(10px, env(safe-area-inset-top)); left:0; right:0; width:100%; border-radius:22px 22px 0 0; transform:translateY(100%); }
  .bag.is-open .drawer__panel{ transform:none; }
}
@media (min-width:750px){ .bag .drawer__panel{ width:440px; } }
.bag__grab{ display:block; width:40px; height:4px; border-radius:4px; background:var(--border); margin:8px auto 0; flex:none; }
@media (min-width:750px){ .bag__grab{ display:none; } }
.bag__head{ display:flex; align-items:center; justify-content:space-between; padding:10px 14px 12px 22px; flex:none; }
.bag__title{ font-family:var(--font-menu); font-weight:400; font-size:32px; letter-spacing:-.01em; }
.bag__n{ font-family:var(--font-body); font-size:14px; color:var(--muted); vertical-align:middle; }
.bag__close{ display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 12px 0 16px; border:1px solid var(--border); border-radius:999px; background:none; font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; transition:background .3s, color .3s, border-color .3s; }
.bag__close svg{ width:16px; height:16px; transition:transform .4s var(--ease-out); }
.bag__close:hover{ background:var(--text); color:var(--bg); border-color:var(--text); } .bag__close:hover svg{ transform:rotate(90deg); }
.bag__ship{ flex:none; padding:0 22px; }
.shipbar{ padding:12px 14px 14px; border-radius:14px; background:var(--ann-bg); font-size:13px; margin-bottom:6px; }
.shipbar p{ display:flex; align-items:center; gap:8px; }
.shipbar p svg{ width:18px; height:18px; }
.shipbar__track{ position:relative; height:5px; border-radius:6px; background:color-mix(in srgb, var(--text) 10%, transparent); margin-top:10px; overflow:hidden; }
.shipbar__track span{ position:absolute; left:0; top:0; bottom:0; width:var(--w); border-radius:6px; background:var(--text); transition:width .8s var(--ease-out); }
.shipbar.is-done{ background:color-mix(in srgb, var(--accent) 14%, var(--bg)); }
.shipbar.is-done .shipbar__track span{ background:var(--accent); }
.bag__body{ flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:0 22px 18px; }
.bag__lines .bl{ display:grid; grid-template-columns:88px minmax(0,1fr); gap:14px; padding:16px 0; border-bottom:1px solid var(--border); overflow:hidden; transition:height .3s var(--ease), opacity .25s, padding .3s var(--ease); animation:blin .5s var(--ease-out) both; }
@keyframes blin{ from{ opacity:0; transform:translateY(8px); } }
.bl.is-leaving{ opacity:0; padding-top:0; padding-bottom:0; border-bottom-color:transparent; }
.bl__img{ display:block; width:88px; height:100px; border-radius:12px; overflow:hidden; background:var(--bg2); }
.bl__img img{ width:100%; height:100%; object-fit:cover; mix-blend-mode:multiply; transition:transform .6s var(--ease-out); }
.bl__img:hover img{ transform:scale(1.05); }
.bl__info{ min-width:0; display:flex; flex-direction:column; justify-content:space-between; gap:8px; }
.bl__top{ display:flex; gap:8px; align-items:flex-start; justify-content:space-between; }
.bl__vendor{ font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.bl__title{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-family:var(--font-head); font-weight:600; font-size:14px; line-height:1.3; text-decoration:none; }
.bl__title:hover{ text-decoration:underline; }
.bl__var{ font-size:12.5px; color:var(--muted); margin-top:2px; }
.bl__rm{ flex:none; width:34px; height:34px; margin:-6px -8px 0 0; display:grid; place-items:center; border:0; background:none; border-radius:50%; color:var(--muted); transition:background .25s, color .25s; }
.bl__rm:hover{ background:var(--bg2); color:var(--text); } .bl__rm svg{ width:18px; height:18px; }
.bl__row{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.qty--sm{ height:36px; } .qty--sm button{ width:34px; height:34px; } .qty--sm span{ width:26px; min-width:22px; font-size:13.5px; font-weight:600; }
.bl__price{ display:flex; flex-direction:column; align-items:flex-end; font-size:14px; line-height:1.2; }
.bl__price s{ font-size:12px; color:var(--muted); } .bl__price b{ font-weight:600; }
.undo{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; padding:10px 12px 12px 14px; border-radius:12px; background:var(--bg2); font-size:13px; overflow:hidden; animation:blin .35s var(--ease-out); transition:opacity .3s; }
.undo span{ min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.undo button{ flex:none; height:32px; padding:0 14px; border-radius:999px; border:0; background:var(--text); color:var(--bg); font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
.undo__bar{ position:absolute; left:0; bottom:0; height:2px; width:100%; background:var(--text); opacity:.25; transform-origin:left; animation:undobar 6s linear forwards; }
@keyframes undobar{ to{ transform:scaleX(0); } }
.undo.is-out{ opacity:0; }
.bag__emptyin{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; padding:36px 10px 26px; }
.bag__emptyico{ width:88px; height:88px; display:grid; place-items:center; border-radius:50%; background:var(--ann-bg); margin-bottom:6px; animation:floaty 3.6s ease-in-out infinite; }
.bag__emptyico svg{ width:36px; height:36px; stroke-width:1.3; }
@keyframes floaty{ 50%{ transform:translateY(-6px); } }
.bag__emptyin h3{ font-family:var(--font-menu); font-weight:400; font-size:30px; }
.bag__emptyin p{ color:var(--muted); font-size:14px; max-width:30ch; margin-bottom:6px; }
.bag__emptylink{ font-size:13px; color:var(--muted); }
.bag__up{ margin-top:22px; }
.bag__uphead{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.bag__uphead h3{ font-size:15px; }
.bag__uparrows{ display:flex; gap:6px; }
.bag__arr{ width:32px; height:32px; border-radius:50%; border:1px solid var(--border); background:none; display:grid; place-items:center; transition:background .3s, color .3s; }
.bag__arr:hover{ background:var(--text); color:var(--bg); } .bag__arr svg{ width:15px; height:15px; }
.bag__uptrack{ display:grid; grid-auto-flow:column; grid-auto-columns:268px; gap:10px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; scrollbar-width:none; padding-bottom:4px; }
.bag__uptrack::-webkit-scrollbar{ display:none; }
.upc{ position:relative; display:flex; gap:10px; align-items:center; padding:8px; border:1px solid var(--border); border-radius:14px; scroll-snap-align:start; background:var(--bg); transition:border-color .3s; }
.upc:hover{ border-color:color-mix(in srgb, var(--text) 30%, transparent); }
.upc__img{ width:64px; height:72px; flex:none; border-radius:10px; overflow:hidden; background:var(--bg2); }
.upc__img img{ width:100%; height:100%; object-fit:cover; mix-blend-mode:multiply; }
.upc__info{ min-width:0; flex:1; padding-right:34px; }
.upc__v{ font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.upc__t{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:12.5px; font-weight:600; line-height:1.3; text-decoration:none; }
.upc__p .price{ font-size:12.5px; gap:0 6px; }
.upc__add{ position:absolute; right:8px; bottom:8px; width:32px; height:32px; border-radius:50%; border:0; background:var(--text); color:var(--bg); display:grid; place-items:center; transition:transform .35s var(--ease-out); }
.upc__add:hover{ transform:rotate(90deg) scale(1.06); } .upc__add svg{ width:16px; height:16px; }
.bag__note{ margin-top:18px; border:1px solid var(--border); border-radius:14px; overflow:hidden; }
.bag__note summary{ display:flex; align-items:center; gap:10px; padding:12px 14px; font-size:13.5px; cursor:pointer; list-style:none; }
.bag__note summary::-webkit-details-marker{ display:none; }
.bag__note summary span{ flex:1; } .bag__note summary svg{ width:17px; height:17px; transition:transform .35s var(--ease-out); }
.bag__note[open] summary svg:last-child{ transform:rotate(180deg); }
.bag__note textarea{ display:block; width:calc(100% - 20px); margin:0 10px 10px; min-height:76px; padding:10px 12px; border:1px solid var(--border); border-radius:10px; background:var(--bg2); resize:vertical; font-size:14px; outline:none; }
.bag__note textarea:focus{ border-color:var(--text); }
.bag.is-empty .bag__note{ display:none; }
.bag__foot{ flex:none; display:grid; gap:10px; padding:14px 22px max(16px, env(safe-area-inset-bottom)); border-top:1px solid var(--border); background:var(--bg); box-shadow:0 -16px 30px -24px rgba(0,0,0,.25); }
.bag__foot:empty{ display:none; }
.bag__sum{ display:flex; justify-content:space-between; align-items:baseline; font-size:15px; }
.bag__sum strong{ font-family:var(--font-head); font-size:20px; letter-spacing:-.01em; }
.bag__save{ margin-top:-8px; font-size:12.5px; color:var(--accent); }
.bag__trust{ display:flex; flex-wrap:wrap; gap:6px 14px; font-size:11.5px; color:var(--muted); }
.bag__trust span{ display:inline-flex; align-items:center; gap:5px; } .bag__trust svg{ width:15px; height:15px; }
.bag__checkout{ min-height:54px; gap:10px; font-size:13px; }
.bag__checkout svg{ width:18px; height:18px; transition:transform .35s var(--ease-out); }
.bag__checkout:hover svg{ transform:translateX(4px); }
.bag__dot{ opacity:.45; }
.bag__wa{ min-height:48px; gap:10px; } .bag__wa svg{ width:18px; height:18px; }
.bag__viewcart{ justify-self:center; font-size:12.5px; color:var(--muted); padding:2px 6px; }

/* ---- custom select ---- */
.cs-native{ position:absolute!important; width:1px!important; height:1px!important; opacity:0!important; pointer-events:none!important; overflow:hidden; clip:rect(0 0 0 0); border:0!important; padding:0!important; }
.cs-trigger{ display:flex; align-items:center; width:100%; text-align:left; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.cs-trigger:disabled{ opacity:.5; cursor:default; }
.cs-val{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.select .cs-trigger{ height:42px; max-width:58vw; padding:0 38px 0 16px; border-radius:999px; border:1px solid var(--border); background:var(--bg); font-size:13.5px; transition:border-color .25s, background .25s; }
.select .cs-trigger:hover,.select .cs-trigger[aria-expanded="true"]{ border-color:var(--text); }
.fld .cs-trigger{ height:58px; padding:24px 40px 8px 16px; border:1px solid var(--border); border-radius:12px; background:var(--bg); font-size:16px; transition:border-color .25s, box-shadow .25s; }
.fld .cs-trigger[aria-expanded="true"],.fld .cs-trigger:focus-visible{ border-color:var(--text); box-shadow:0 0 0 3px color-mix(in srgb, var(--text) 8%, transparent); outline:none; }
.cs-trigger:not(.select .cs-trigger):not(.fld .cs-trigger){ height:44px; padding:0 40px 0 14px; border:1px solid var(--border); border-radius:12px; background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 12px center/16px no-repeat; }
.select svg,.fld svg.chev{ transition:transform .35s var(--ease-out); }
.select:has(.cs-trigger[aria-expanded="true"]) svg,.fld:has(.cs-trigger[aria-expanded="true"]) svg.chev{ transform:translateY(-50%) rotate(180deg); }
.cs-pop{ position:fixed; inset:0; z-index:130; }
.cs-scrim{ position:absolute; inset:0; }
.cs-pop--sheet .cs-scrim{ background:rgba(20,18,14,.36); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); opacity:0; transition:opacity .3s var(--ease); }
.cs-pop.is-open .cs-scrim{ opacity:1; }
.cs-panel{ position:absolute; display:flex; flex-direction:column; background:var(--bg); color:var(--text); border:1px solid var(--border); border-radius:16px; box-shadow:0 24px 60px -24px rgba(0,0,0,.35); overflow:hidden; opacity:0; transform:translateY(-6px) scale(.98); transform-origin:top center; transition:opacity .22s var(--ease), transform .3s var(--ease-out); }
.cs-pop.is-up .cs-panel{ transform-origin:bottom center; transform:translateY(6px) scale(.98); }
.cs-pop.is-open .cs-panel{ opacity:1; transform:none; }
.cs-pop--sheet .cs-panel{ left:0; right:0; bottom:0; top:auto; max-height:78vh; border:0; border-radius:22px 22px 0 0; opacity:1; transform:translateY(100%); transition:transform .45s cubic-bezier(.22,1,.36,1); padding-bottom:env(safe-area-inset-bottom); }
.cs-pop--sheet.is-open .cs-panel{ transform:none; }
.cs-grab{ display:block; width:40px; height:4px; border-radius:4px; background:var(--border); margin:8px auto 0; }
.cs-head{ display:flex; align-items:center; justify-content:space-between; padding:8px 12px 8px 22px; border-bottom:1px solid var(--border); }
.cs-head p{ font-family:var(--font-menu); font-size:26px; }
.cs-x{ width:40px; height:40px; border-radius:50%; border:0; background:var(--bg2); display:grid; place-items:center; } .cs-x svg{ width:18px; height:18px; }
.cs-list{ overflow-y:auto; overscroll-behavior:contain; padding:6px; outline:none; }
.cs-opt{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:44px; padding:10px 14px; border-radius:10px; font-size:14.5px; cursor:pointer; transition:background .2s; }
.cs-pop--sheet .cs-opt{ min-height:52px; font-size:16px; padding:12px 16px; }
.cs-opt svg{ width:18px; height:18px; opacity:0; transform:scale(.6); transition:opacity .2s, transform .3s var(--ease-out); }
.cs-opt.is-sel{ font-weight:600; } .cs-opt.is-sel svg{ opacity:1; transform:none; }
.cs-opt:hover,.cs-opt.is-act{ background:var(--bg2); }
.cs-opt[aria-disabled="true"]{ opacity:.4; cursor:default; }

/* ---- footer COD badge ---- */
.ftr__pay{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; }
.codbadge{ display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 14px; border-radius:999px; background:var(--text); color:var(--bg); font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
.codbadge svg{ width:18px; height:18px; }
.ftr__free{ display:inline-flex; align-items:center; gap:6px; font-size:13px; } .ftr__free svg{ width:18px; height:18px; }

/* ---- product page: buy it now + sticky bar ---- */
.buy-now{ gap:10px; min-height:52px; }
.buy-now svg{ width:18px; height:18px; }
.btn--accent.buy-now{ background:var(--text); border-color:var(--text); color:var(--bg); }
.btn--accent.buy-now:hover{ filter:none; background:color-mix(in srgb, var(--text) 82%, var(--bg)); }
.pinfo__row + .buy-now{ margin-top:10px; }
.buy-now + .wa-btn{ margin-top:10px; }
.sticky-atc{ gap:10px; }
.sticky-atc .btn{ padding:0 14px; font-size:11.5px; }
.sticky-atc__buy{ display:none; }
@media (min-width:400px){ .sticky-atc__buy{ display:inline-flex; } }
.co__buynote{ margin:-8px 0 18px; color:var(--muted); font-size:14px; }

/* ---- polish: carousels scroll strictly sideways, nothing clipped ---- */
.track{ overflow-y:hidden; overscroll-behavior-x:contain; touch-action:pan-x pan-y; padding-top:6px; padding-bottom:14px; margin-top:-6px; margin-bottom:-14px; -webkit-overflow-scrolling:touch; }
.hero__dots{ background:none; -webkit-backdrop-filter:none; backdrop-filter:none; padding:0; gap:2px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
.hero__dot{ width:26px; }
@media (max-width:749px){
  .slide__content{ padding-top:28px; padding-bottom:64px; }
  .slide__h{ font-size:clamp(30px, 8.4vw, 40px); }
  .slide__t{ font-size:14.5px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
}
/* product cards: softer media, image zoom, quick add slides up */
.card__media{ isolation:isolate; }
.card__img img{ transition:opacity .6s var(--ease), transform 1.1s var(--ease-out); }
@media (hover:hover){ .card:hover .card__i1{ transform:scale(1.04); } .card.has-alt:hover .card__i2{ transform:scale(1.04); } }
.card__title a{ background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat; transition:background-size .45s var(--ease); text-decoration:none; }
.card__title a:hover{ background-size:100% 1px; }
.btn{ transition:background .3s, color .3s, border-color .3s, transform .25s var(--ease-out), box-shadow .3s; }
.btn:active{ transform:scale(.97); }
.btn--dark:hover{ box-shadow:0 12px 24px -14px rgba(0,0,0,.6); }
[data-reveal]{ transition-timing-function:cubic-bezier(.16,1,.3,1); }
img[loading="lazy"]{ transition:opacity .6s var(--ease); }
@media (prefers-reduced-motion:reduce){ .cart-btn.is-bounce .cart-btn__ico,.cart-btn.is-bounce::after,.bag__emptyico,.bl,.undo{ animation:none!important; } }

.hdr.is-scrolled{ background:color-mix(in srgb, var(--bg) 92%, transparent); }
button,a,summary,[role=option]{ -webkit-tap-highlight-color:transparent; }

/* ---- v2: premium type + motion ---- */
body{ -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; }
input,textarea,select,[contenteditable="true"]{ -webkit-touch-callout:default; -webkit-user-select:text; user-select:text; }
img{ -webkit-user-drag:none; user-drag:none; }
.h2{ font-size:clamp(30px, 3.6vw, 52px); font-weight:600; letter-spacing:-.035em; line-height:1.02; }
.eyebrow{ font-size:11px; letter-spacing:.22em; color:var(--muted); }
.sub{ font-size:15px; line-height:1.6; }
.btn{ font-size:12px; letter-spacing:.16em; font-weight:600; }
.card__title{ letter-spacing:-.01em; }
.card__vendor{ letter-spacing:.16em; }
/* word-by-word heading reveal (masks) */
.w{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.08em; margin-bottom:-.08em; }
.w > span{ display:inline-block; transform:translateY(108%); transition:transform 1s cubic-bezier(.16,1,.3,1); transition-delay:calc(var(--i, 0) * 55ms + 80ms); will-change:transform; }
.in .w > span,.w.in > span,.pg-title .w > span,.coll-hero h1 .w > span{ transform:none; }
.slide .slide__h .w > span{ transform:translateY(108%); }
.slide.is-on .slide__h .w > span{ transform:none; transition-delay:calc(var(--i, 0) * 70ms + 300ms); }
.slide__box > .slide__h{ opacity:1!important; transform:none!important; }
.pg-title .w > span,.coll-hero h1 .w > span{ animation:wordup 1s cubic-bezier(.16,1,.3,1) both; animation-delay:calc(var(--i, 0) * 55ms + 120ms); }
@keyframes wordup{ from{ transform:translateY(108%); } }
/* moving text strip */
.mq{ overflow:hidden; background:var(--ann-bg); color:var(--text); border-block:1px solid color-mix(in srgb, var(--text) 8%, transparent); }
.mq--dark{ background:var(--text); color:var(--bg); }
.mq__belt{ display:flex; width:max-content; animation:annmarq var(--mq-dur, 38s) linear infinite; }
.mq:hover .mq__belt{ animation-play-state:paused; }
.mq__set{ display:flex; align-items:center; }
.mq__item{ padding:16px 26px; white-space:nowrap; font-family:var(--font-menu); font-size:clamp(20px, 2.4vw, 30px); line-height:1.1; letter-spacing:-.005em; }
.mq__item:nth-child(4n+1){ font-style:italic; }
.mq__sep{ font-style:normal; font-size:12px; opacity:.5; }
.section--marquee + .section{ margin-top:0; }
@media (prefers-reduced-motion:reduce){ .mq__belt{ animation:none; } .w > span{ transform:none!important; transition:none!important; animation:none!important; } }


/* =====================================================================
   v3 — editorial display font, shoppable videos, promise strip
   ===================================================================== */
:root{ --font-display:'Cormorant Garamond', 'Instrument Serif', Georgia, serif; }
.h2,.slide__h,.pg-title,.chead h1,.cbanner__in h1,.coll-hero h1,.pinfo h1,.empty-state h1,.thanks h1,.news .h2{
  font-family:var(--font-display); font-weight:500; letter-spacing:-.012em; font-variant-numeric:lining-nums; text-wrap:balance;
}
.h2{ font-size:clamp(36px, 4.3vw, 64px); line-height:.98; }
.slide__h{ font-size:clamp(42px, 5.6vw, 84px); line-height:.96; letter-spacing:-.015em; }
.pg-title,.chead h1,.coll-hero h1{ font-size:clamp(38px, 5vw, 66px); line-height:.98; }
.cbanner__in h1{ line-height:.98; }
.pinfo h1{ font-size:clamp(30px, 3vw, 44px); line-height:1.04; letter-spacing:-.01em; }
.empty-state h1,.thanks h1{ line-height:1.02; }
.sec-head .eyebrow{ letter-spacing:.24em; }
.w{ padding-bottom:.14em; margin-bottom:-.14em; }
@media (max-width:749px){
  .h2{ font-size:clamp(34px, 9.6vw, 42px); }
  .slide__h{ font-size:clamp(38px, 10.6vw, 48px); }
  .pg-title,.chead h1,.coll-hero h1{ font-size:clamp(34px, 9.4vw, 44px); }
  .pinfo h1{ font-size:clamp(28px, 7.6vw, 34px); }
}
.h2,.slide__h,.pg-title,.chead h1,.pinfo h1{ overflow-wrap:anywhere; }

/* ---- shoppable videos ---- */
.vids .track{ grid-auto-columns:calc((100% - var(--gap)) / 1.45); scroll-snap-type:x mandatory; }
.vids .track > *{ scroll-snap-align:start; }
@media (min-width:600px){ .vids .track{ grid-auto-columns:calc((100% - 2 * var(--gap)) / 2.5); } }
@media (min-width:1000px){ .vids .track{ grid-auto-columns:calc((100% - 3 * var(--gap)) / 4); } .vcard__media{ aspect-ratio:2/3; } }
.vcard{ display:flex; flex-direction:column; gap:12px; min-width:0; height:100%; }
.vcard__media{ position:relative; display:block; width:100%; aspect-ratio:9/15; padding:0; border:0; border-radius:var(--radius-lg); overflow:hidden; background:var(--bg2); isolation:isolate; cursor:pointer;
  box-shadow:0 1px 0 rgba(0,0,0,.02), 0 24px 50px -34px rgba(30,24,16,.45); transition:transform .7s var(--ease-out), box-shadow .7s var(--ease-out); -webkit-tap-highlight-color:transparent; }
.vcard__media video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.02); transition:transform 1.2s var(--ease-out); pointer-events:none; }
.vcard__shade{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.16) 0%, transparent 26%, transparent 58%, rgba(0,0,0,.5) 100%); z-index:1; pointer-events:none; }
.vcard__play{ position:absolute; left:50%; top:50%; z-index:2; width:58px; height:58px; margin:-29px 0 0 -29px; border-radius:50%; display:grid; place-items:center; color:#111;
  background:rgba(255,255,255,.82); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); transition:opacity .45s var(--ease-out), transform .45s var(--ease-out); }
.vcard__play svg{ width:22px; height:22px; margin-left:3px; }
.vcard.is-playing .vcard__play{ opacity:0; transform:scale(.7); }
.vcard__exp{ position:absolute; right:12px; top:12px; z-index:2; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; color:#fff; background:rgba(0,0,0,.28); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); transition:background .3s; }
.vcard__exp svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.vcard__title{ font-variant-numeric:lining-nums; position:absolute; left:16px; right:16px; bottom:20px; z-index:2; color:#fff; text-align:left; font-family:var(--font-display); font-size:clamp(21px, 1.7vw, 26px); font-weight:500; line-height:1.05; letter-spacing:-.005em; text-shadow:0 1px 18px rgba(0,0,0,.25); }
.vcard__bar{ position:absolute; left:16px; right:16px; bottom:10px; height:2px; border-radius:2px; background:rgba(255,255,255,.3); z-index:2; overflow:hidden; opacity:0; transition:opacity .4s; }
.vcard__bar i{ position:absolute; inset:0; background:#fff; transform-origin:left; transform:scaleX(0); }
.vcard.is-playing .vcard__bar{ opacity:1; }
@media (hover:hover){ .vcard__media:hover{ transform:translateY(-4px); box-shadow:0 1px 0 rgba(0,0,0,.02), 0 34px 60px -34px rgba(30,24,16,.55); } .vcard__media:hover video{ transform:scale(1.06); } .vcard__media:hover .vcard__exp{ background:rgba(0,0,0,.5); } }
.vcard__media:focus-visible{ outline:2px solid var(--text); outline-offset:3px; }
.vcard__foot{ display:flex; flex-direction:column; gap:10px; flex:1; }
.vcard__prod{ flex:1; align-items:flex-start; }
.vcard__shop{ margin-top:auto; }
.vcard__prod{ display:flex; align-items:center; gap:10px; text-decoration:none; min-width:0; }
.vcard__thumb{ width:46px; height:46px; flex:none; border-radius:10px; overflow:hidden; background:var(--bg2); }
.vcard__thumb img{ width:100%; height:100%; object-fit:cover; mix-blend-mode:multiply; }
.vcard__info{ display:flex; flex-direction:column; min-width:0; gap:2px; }
.vcard__name{ font-family:var(--font-head); font-weight:600; font-size:13.5px; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.vcard__price{ font-size:13px; }
.vcard__shop{ width:100%; justify-content:center; gap:8px; }
.vcard__shop svg{ width:16px; height:16px; transition:transform .35s var(--ease-out); }
.vcard__shop:hover svg{ transform:translateX(3px); }
.vids__ph{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; padding:46px 22px; border:1px dashed var(--border); border-radius:var(--radius-lg); background:var(--bg2); color:var(--muted); font-size:14px; }
.vids__ph b{ color:var(--text); font-family:var(--font-display); font-weight:500; font-size:26px; line-height:1.1; }
.vids__phic{ width:52px; height:52px; border-radius:50%; display:grid; place-items:center; background:var(--bg); color:var(--text); margin-bottom:4px; }
.vids__phic svg{ width:20px; height:20px; margin-left:3px; }

/* full-screen viewer */
.vview{ position:fixed; inset:0; z-index:200; opacity:0; transition:opacity .38s var(--ease-out); }
.vview.is-in{ opacity:1; }
.vview__bg{ position:absolute; inset:0; background:rgba(12,10,8,.9); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
.vview__track{ position:absolute; inset:0; display:flex; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; overscroll-behavior:contain; scrollbar-width:none; }
.vview__track::-webkit-scrollbar{ display:none; }
.vview__slide{ flex:0 0 100%; height:100%; display:grid; place-items:center; scroll-snap-align:center; scroll-snap-stop:always; padding:max(14px, env(safe-area-inset-top)) 0 max(14px, env(safe-area-inset-bottom)); }
.vview__frame{ position:relative; height:100%; max-height:860px; aspect-ratio:9/16; max-width:100%; border-radius:20px; overflow:hidden; background:#000; transform:scale(.96); transition:transform .5s var(--ease-out); }
.vview.is-in .vview__frame{ transform:none; }
.vview__frame video{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:749px){ .vview__slide{ padding:0; } .vview__frame{ height:100%; max-height:none; width:100%; aspect-ratio:auto; border-radius:0; } }
.vview__bar{ position:absolute; left:14px; right:14px; top:max(12px, env(safe-area-inset-top)); height:2px; border-radius:2px; background:rgba(255,255,255,.3); overflow:hidden; }
.vview__bar i{ position:absolute; inset:0; background:#fff; transform-origin:left; transform:scaleX(0); }
.vview__info{ position:absolute; left:0; right:0; bottom:0; padding:70px 16px max(16px, env(safe-area-inset-bottom)); background:linear-gradient(0deg, rgba(0,0,0,.62), transparent); color:#fff; display:flex; flex-direction:column; gap:12px; }
.vview__title{ font-variant-numeric:lining-nums; margin:0; font-family:var(--font-display); font-size:28px; font-weight:500; line-height:1.05; }
.vview__prod{ display:flex; align-items:center; gap:10px; text-decoration:none; color:#fff; padding:8px; border-radius:14px; background:rgba(255,255,255,.14); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.vview__thumb{ width:48px; height:48px; border-radius:10px; overflow:hidden; background:#fff; flex:none; }
.vview__thumb img{ width:100%; height:100%; object-fit:cover; }
.vview__pi{ display:flex; flex-direction:column; min-width:0; font-size:13px; gap:2px; }
.vview__pi b{ font-family:var(--font-head); font-weight:600; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vview__pi .price, .vview__pi s, .vview__pi del, .vview__pi *{ color:#fff!important; }
.vview__shop{ width:100%; justify-content:center; gap:8px; }
.vview__shop svg{ width:16px; height:16px; }
.vview__close,.vview__snd,.vview__nav{ position:absolute; z-index:3; width:44px; height:44px; border-radius:50%; border:0; display:grid; place-items:center; color:#fff; background:rgba(255,255,255,.14); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); transition:background .3s, opacity .3s; }
.vview__close:hover,.vview__snd:hover,.vview__nav:hover{ background:rgba(255,255,255,.26); }
.vview__close svg,.vview__snd svg,.vview__nav svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.vview__close{ right:14px; top:calc(max(12px, env(safe-area-inset-top)) + 14px); }
.vview__snd{ right:66px; top:calc(max(12px, env(safe-area-inset-top)) + 14px); }
.vview__nav{ top:50%; margin-top:-22px; display:none; }
.vview__nav--p{ left:24px; } .vview__nav--n{ right:24px; }
.vview__nav:disabled{ opacity:.25; cursor:default; }
@media (min-width:750px){ .vview__nav{ display:grid; } .vview__close{ right:24px; top:24px; } .vview__snd{ right:76px; top:24px; } }
.vview__dots{ position:absolute; left:0; right:0; top:calc(max(12px, env(safe-area-inset-top)) + 28px); display:flex; justify-content:center; gap:5px; pointer-events:none; }
.vview__dots i{ width:6px; height:6px; border-radius:6px; background:rgba(255,255,255,.4); transition:width .35s var(--ease-out), background .35s; }
.vview__dots i.on{ width:18px; background:#fff; }
@media (max-width:749px){ .vview__dots{ top:auto; bottom:calc(max(16px, env(safe-area-inset-bottom)) + 190px); } }

/* ---- promise strip ---- */
.prom__list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; }
@media (min-width:900px){ .prom__list{ grid-template-columns:repeat(4, 1fr); } }
.prom__item{ background:var(--bg); padding:22px 16px; display:flex; flex-direction:column; align-items:flex-start; gap:6px; min-width:0; }
@media (min-width:750px){ .prom__item{ padding:30px 26px; } }
.prom__ic{ width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:var(--bg2); margin-bottom:6px; transition:transform .6s var(--ease-out), background .4s; }
.prom__ic svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.prom__t{ font-variant-numeric:lining-nums; font-family:var(--font-display); font-weight:500; font-size:clamp(19px, 1.6vw, 24px); line-height:1.08; letter-spacing:-.005em; }
.prom__x{ color:var(--muted); font-size:13px; line-height:1.45; }
@media (hover:hover){ .prom__item:hover .prom__ic{ transform:translateY(-3px) rotate(-6deg); background:var(--ann-bg); } }

@media (prefers-reduced-motion: reduce){
  .vcard__media,.vcard__media video,.vview,.vview__frame,.prom__ic{ transition:none!important; }
  .vcard__media:hover{ transform:none; } .vcard__media:hover video{ transform:scale(1.02); }
}

/* integrations v3 — AI shopping assistant widget (assets/js/agent-widget.js). Uses the theme's variables; accent comes from Admin → Agent. */
/* launcher v7 — the big-brand chat button (La Prairie, Bobbi Brown, Rare Beauty, NARS): solid black circle + white chat-bubble icon; "Chat with us" pill on desktop. Still like v6: It never moves, resizes or morphs while scrolling.
   Phone/tablet (<960px): one 52px rounded square, always. Desktop (≥960px): monogram + "Beauty advice" pill, always. Only opacity changes (tuck / drawers). */
.cwa{ --cwa-accent:#111; --cwa-on:#fff; --cwa-h:56px; --cwa-r:50%; --cwa-m:28px; --cwa-smooth:cubic-bezier(.22,1,.36,1);
  position:fixed; z-index:80; bottom:calc(96px + env(safe-area-inset-bottom)); right:calc(16px + env(safe-area-inset-right)); font-family:var(--font-body);
  opacity:0; transition:opacity .6s var(--cwa-smooth); -webkit-tap-highlight-color:transparent; }
.cwa--left{ right:auto; left:calc(16px + env(safe-area-inset-left)); }
.cwa.is-in{ opacity:1; } /* no transform on the container, ever (the chat panel inside is position:fixed) */
@media (min-width:750px){
  .cwa{ bottom:calc(36px + env(safe-area-inset-bottom)); right:calc(36px + env(safe-area-inset-right)); }
  .cwa--left{ right:auto; left:calc(36px + env(safe-area-inset-left)); }
}
@media (min-width:960px){ .cwa{ --cwa-h:56px; --cwa-r:999px; --cwa-m:26px; } }
html.is-locked .cwa:not(.is-open){ opacity:0; pointer-events:none; transition-duration:.25s; }
.cwa.is-in.is-tucked:not(.is-open){ opacity:0; pointer-events:none; transition-duration:.3s; }
.cwa.is-tucked:not(.is-open) .cwa-bubble{ display:none; }
.cwa-orb{ position:relative; display:flex; align-items:center; justify-content:center; width:var(--cwa-h); height:var(--cwa-h); padding:0; margin:0; border:0; border-radius:var(--cwa-r); cursor:pointer; color:var(--cwa-on); font:inherit; isolation:isolate;
  background:var(--cwa-accent);
  box-shadow:0 2px 6px rgba(0,0,0,.14), 0 8px 20px -6px rgba(0,0,0,.30);
  transition:transform .3s var(--cwa-smooth); }
@media (min-width:960px){ .cwa-orb{ width:auto; justify-content:flex-start; padding:0 26px 0 20px; } }
@media (hover:hover) and (min-width:960px){ .cwa-orb:hover{ transform:translate3d(0,-2px,0); } }
.cwa-orb:active{ transform:scale(.97); transition-duration:.12s; }
.cwa-orb:focus-visible{ outline:2px solid var(--text); outline-offset:4px; }
/* a faint gloss passes inside the button now and then (clipped, nothing else moves) */
.cwa-gloss{ display:none; position:absolute; inset:0; border-radius:inherit; overflow:hidden; pointer-events:none; z-index:2; }
.cwa-gloss::before{ content:""; position:absolute; top:-30%; bottom:-30%; left:0; width:46%; transform:translate3d(-130%,0,0) skewX(-18deg);
  background:linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--cwa-on) 4%, transparent) 30%, color-mix(in srgb, var(--cwa-on) 11%, transparent) 50%, color-mix(in srgb, var(--cwa-on) 4%, transparent) 70%, transparent 100%); }
.cwa.is-shine .cwa-gloss::before{ animation:cwaGloss 1.6s cubic-bezier(.45,.05,.25,1) 1; }
@keyframes cwaGloss{ from{ transform:translate3d(-130%,0,0) skewX(-18deg); } to{ transform:translate3d(330%,0,0) skewX(-18deg); } }
/* the mark: the store's CB monogram */
.cwa-mark{ position:relative; flex:none; width:var(--cwa-m); height:var(--cwa-m); display:grid; place-items:center; }
.cwa-mark svg{ position:absolute; left:0; top:0; width:100%; height:100%; display:block; margin:0; }
.cwa-mark .cwa-xi{ top:0; height:100%; margin:0; padding:3px; box-sizing:border-box; }
.cwa-mono,.cwa-mono path,.cwa-xi,.cwa-xi path{ fill:currentColor !important; stroke:none !important; } /* the theme's line-icon rule must not touch the filled glyphs */
.cwa-mono{ transition:opacity .25s; }
.cwa-xi{ opacity:0; transition:opacity .25s; }
.cwa-label{ display:none; }
@media (min-width:960px){ .cwa-label{ display:block; margin-left:10px; } }
.cwa-label__t{ display:block; white-space:nowrap; max-width:180px; overflow:hidden; text-overflow:ellipsis; font-family:var(--font-body); font-style:normal; font-size:15px; font-weight:600; letter-spacing:.01em; line-height:1; padding:0; }
/* add-to-bag: one quick soft pulse (no bounce) + the bubble */
.cwa.is-happy .cwa-orb{ animation:cwaPulse .55s var(--cwa-smooth) 1; }
.cwa.is-happy .cwa-gloss::before{ animation:cwaGloss 1.2s cubic-bezier(.45,.05,.25,1) .05s 1; }
@keyframes cwaPulse{ 0%{ transform:none; } 40%{ transform:scale(1.04); } 100%{ transform:none; } }
/* open: the chat icon gives way to a fine × (no size change) */
.cwa.is-open .cwa-orb .cwa-mono{ opacity:0; }
.cwa.is-open .cwa-orb .cwa-xi{ opacity:1; }
/* speech bubble — opacity only, no spring, no motion */
.cwa-bubble{ position:absolute; bottom:calc(100% + 12px); right:0; width:max-content; max-width:min(250px, calc(100vw - 48px)); padding:11px 16px 12px; border-radius:14px 14px 4px 14px; background:var(--bg); color:var(--text);
  border:1px solid color-mix(in srgb, var(--text) 9%, transparent); box-shadow:0 1px 2px rgba(0,0,0,.05), 0 18px 36px -20px rgba(0,0,0,.36); font-family:var(--font-body); font-style:normal; font-size:14px; font-weight:500; line-height:1.35; letter-spacing:0; cursor:pointer;
  opacity:0; transition:opacity .3s ease; }
.cwa--left .cwa-bubble{ right:auto; left:0; border-radius:14px 14px 14px 4px; }
.cwa-bubble.is-on{ opacity:1; }
.cwa.is-open .cwa-bubble{ display:none; }
/* chat panel */
.cwa-panel{ position:fixed; inset:0; z-index:97; pointer-events:none; }
.cwa-panel[hidden]{ display:none; }
.cwa-scrim{ position:absolute; inset:0; background:rgba(0,0,0,.32); opacity:0; transition:opacity .3s; pointer-events:auto; -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }
.cwa-panel.is-on .cwa-scrim{ opacity:1; }
.cwa-sheet{ position:absolute; left:0; right:0; bottom:0; top:max(10px, env(safe-area-inset-top)); display:flex; flex-direction:column; background:var(--bg); color:var(--text); border-radius:20px 20px 0 0; pointer-events:auto;
  box-shadow:0 -20px 50px -20px rgba(0,0,0,.35); transform:translateY(102%); transition:transform .42s var(--ease-out); overflow:hidden; }
.cwa-panel.is-on .cwa-sheet{ transform:none; }
html.cwa-lock{ overflow:hidden; }
@media (min-width:750px){
  html.cwa-lock{ overflow:visible; }
  .cwa-scrim{ display:none; }
  .cwa-sheet{ left:auto; top:auto; right:calc(36px + env(safe-area-inset-right)); bottom:calc(110px + env(safe-area-inset-bottom)); width:380px; height:min(620px, calc(100vh - 150px)); border-radius:20px; border:1px solid var(--border);
    box-shadow:0 30px 70px -28px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.06); transform:translateY(14px) scale(.98); opacity:0; transform-origin:100% 100%; transition:transform .38s var(--ease-out), opacity .25s; }
  .cwa--left .cwa-sheet{ right:auto; left:calc(36px + env(safe-area-inset-left)); transform-origin:0 100%; }
  .cwa-panel.is-on .cwa-sheet{ opacity:1; }
}
.cwa-head{ display:flex; align-items:center; gap:12px; padding:14px 14px 12px 16px; border-bottom:1px solid var(--border); flex:none; }
.cwa-av{ position:relative; width:38px; height:38px; border-radius:50%; flex:none; display:grid; place-items:center; color:var(--cwa-on); background:var(--cwa-accent); }
.cwa-av .cwa-mono{ width:22px; height:22px; display:block; }
.cwa-head__t{ flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.2; }
.cwa-head__t b{ font-family:var(--font-display, 'Cormorant Garamond', Georgia, serif); font-size:20px; font-weight:600; letter-spacing:-.005em; line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cwa-head__t b em{ font-style:italic; font-weight:500; color:var(--muted); }
.cwa-head__t span{ font-size:12px; color:var(--muted); display:flex; align-items:center; gap:6px; margin-top:2px; }
.cwa-dot{ width:7px; height:7px; border-radius:50%; background:#3c9a5f; box-shadow:0 0 0 3px rgba(60,154,95,.15); }
.cwa-x{ width:40px; height:40px; border-radius:50%; border:0; background:var(--bg2); color:var(--text); display:grid; place-items:center; cursor:pointer; transition:background .2s, transform .3s var(--ease-out); flex:none; }
.cwa-x:hover{ transform:rotate(90deg); }
.cwa-log{ flex:1; overflow-y:auto; overscroll-behavior:contain; padding:16px 14px 6px; display:flex; flex-direction:column; gap:10px; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; }
.cwa-msg{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; max-width:100%; animation:cwaIn .35s var(--ease-out) both; }
.cwa-msg--me{ align-items:flex-end; }
@keyframes cwaIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
.cwa-msg__b{ max-width:86%; padding:10px 13px; border-radius:16px 16px 16px 5px; background:var(--bg2); font-size:14px; line-height:1.45; overflow-wrap:anywhere; -webkit-user-select:text; user-select:text; }
.cwa-msg--me .cwa-msg__b{ background:var(--cwa-accent); color:var(--cwa-on); border-radius:16px 16px 5px 16px; }
.cwa-typing .cwa-msg__b{ display:flex; gap:4px; padding:13px 14px; }
.cwa-typing i{ width:6px; height:6px; border-radius:50%; background:var(--muted); opacity:.5; animation:cwaDot 1s infinite ease-in-out; }
.cwa-typing i:nth-child(2){ animation-delay:.15s; } .cwa-typing i:nth-child(3){ animation-delay:.3s; }
@keyframes cwaDot{ 0%,80%,100%{ transform:none; opacity:.35; } 40%{ transform:translateY(-4px); opacity:.9; } }
.cwa-cards{ display:flex; gap:10px; overflow-x:auto; max-width:calc(100% + 14px); margin-right:-14px; padding:2px 14px 6px 0; scroll-snap-type:x mandatory; scrollbar-width:none; }
.cwa-cards::-webkit-scrollbar{ display:none; }
.cwa-p{ flex:none; width:152px; scroll-snap-align:start; display:flex; flex-direction:column; gap:6px; padding:8px; border:1px solid var(--border); border-radius:14px; background:var(--bg); }
.cwa-p__img{ display:block; aspect-ratio:1; border-radius:10px; overflow:hidden; background:var(--bg2); }
.cwa-p__img img{ width:100%; height:100%; object-fit:cover; mix-blend-mode:multiply; transition:transform .6s var(--ease-out); }
.cwa-p:hover .cwa-p__img img{ transform:scale(1.04); }
.cwa-p__t{ font-size:12.5px; line-height:1.3; color:var(--text); text-decoration:none; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.6em; }
.cwa-p__v{ display:block; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:-3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cwa-p__price{ font-size:13px; font-weight:600; color:var(--text); } .cwa-p__price s{ font-weight:400; color:var(--muted); font-size:11.5px; margin-left:3px; }
.cwa-p__btn{ display:flex; align-items:center; justify-content:center; height:36px; border-radius:999px; border:0; background:var(--text); color:var(--bg); font:600 11px/1 var(--font-body); letter-spacing:.1em; text-transform:uppercase; text-decoration:none; cursor:pointer; transition:background .25s, transform .3s var(--ease-out); }
.cwa-p__btn:hover{ background:var(--accent); color:var(--accent-text); }
.cwa-p__btn.is-done{ background:#3c9a5f; color:#fff; }
.cwa-p__out{ display:flex; align-items:center; justify-content:center; height:36px; font-size:11.5px; color:var(--muted); border:1px dashed var(--border); border-radius:999px; }
.cwa-acts{ display:flex; flex-wrap:wrap; gap:8px; }
.cwa-act{ display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 14px; border-radius:999px; border:1px solid var(--border); background:var(--bg); color:var(--text); font-size:12.5px; font-weight:600; text-decoration:none; transition:border-color .2s, background .2s; }
.cwa-act:hover{ border-color:var(--text); }
.cwa-act--wa{ background:#1f8f4e; border-color:#1f8f4e; color:#fff; } .cwa-act--wa:hover{ background:#197a42; border-color:#197a42; }
.cwa-chips{ display:flex; gap:8px; overflow-x:auto; padding:8px 14px 2px; flex:none; scrollbar-width:none; }
.cwa-chips::-webkit-scrollbar{ display:none; } .cwa-chips[hidden]{ display:none; }
.cwa-chips button{ flex:none; height:34px; padding:0 14px; border-radius:999px; border:1px solid var(--border); background:var(--bg); color:var(--text); font:500 13px/1 var(--font-body); cursor:pointer; transition:border-color .2s, background .2s, transform .3s var(--ease-out); }
.cwa-chips button:hover{ border-color:var(--text); transform:translateY(-1px); }
.cwa-form{ display:flex; gap:8px; align-items:center; margin:10px 12px 0; padding:5px 5px 5px 16px; border:1px solid var(--border); border-radius:999px; background:var(--bg); flex:none; transition:border-color .2s, box-shadow .2s; }
.cwa-form:focus-within{ border-color:var(--text); box-shadow:0 0 0 3px color-mix(in srgb, var(--text) 8%, transparent); }
.cwa-form input{ flex:1; min-width:0; height:40px; border:0; outline:0; background:transparent; color:var(--text); font:400 16px/1.2 var(--font-body); -webkit-user-select:text; user-select:text; }
.cwa-form input::placeholder{ color:var(--muted); }
.cwa-send{ width:40px; height:40px; flex:none; border-radius:50%; border:0; background:var(--cwa-accent); color:var(--cwa-on); display:grid; place-items:center; cursor:pointer; transition:transform .3s var(--ease-out); }
.cwa-send:hover{ transform:translateX(2px); }
.cwa-foot{ margin:0; padding:8px 16px calc(10px + env(safe-area-inset-bottom)); font-size:11px; color:var(--muted); text-align:center; flex:none; }
.cwa-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
@media (min-width:750px){ .cwa-foot{ padding-bottom:12px; } }
@media (prefers-reduced-motion: reduce){ .cwa,.cwa *,.cwa *::before,.cwa *::after{ transition:none !important; animation:none !important; } .cwa-gloss::before{ display:none; } }
/* order tracking: courier timeline (track.html) */
.trk-ship{ margin-top:22px; padding-top:18px; border-top:1px solid var(--border); }
.trk-ship__h{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:6px 12px; margin-bottom:14px; }
.trk-ship__h b{ font-family:var(--font-head); font-size:16px; } .trk-ship__h span{ font-size:13px; color:var(--muted); }
.trk-demo{ display:inline-block; margin-left:6px; padding:2px 8px; border-radius:999px; background:var(--bg2); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.trk-tl{ list-style:none; margin:0; padding:0 0 0 18px; position:relative; }
.trk-tl::before{ content:""; position:absolute; left:4px; top:6px; bottom:6px; width:1.5px; background:var(--border); }
.trk-tl li{ position:relative; padding:0 0 14px; font-size:13.5px; line-height:1.4; }
.trk-tl li::before{ content:""; position:absolute; left:-18px; top:5px; width:9px; height:9px; border-radius:50%; background:var(--bg); border:1.5px solid var(--muted); }
.trk-tl li:first-child::before{ background:var(--text); border-color:var(--text); box-shadow:0 0 0 4px color-mix(in srgb, var(--text) 12%, transparent); }
.trk-tl li b{ display:block; font-weight:600; } .trk-tl li small{ color:var(--muted); font-size:12px; }

/* v5 — "Shop by concern": equal editorial cards with the name set under the picture (never over the product), no holes (columns/spans set in home.js) */
.mosaic--eq{ grid-template-columns:repeat(2,1fr); gap:18px 10px; }
.mosaic--eq .tile,.mosaic--eq .tile:first-child{ grid-column:auto; grid-row:auto; aspect-ratio:auto; display:flex; flex-direction:column; gap:10px; overflow:visible; background:none; border-radius:0; color:var(--text); }
.mosaic--eq .tile.tile--mwide{ grid-column:span 2; }
.mosaic--eq .tile::after{ display:none; }
.mosaic--eq .tile__img{ position:relative; display:block; aspect-ratio:1; border-radius:var(--radius-lg); overflow:hidden; background:var(--bg2); isolation:isolate; }
.mosaic--eq .tile.tile--mwide .tile__img{ aspect-ratio:16/9; }
.mosaic--eq .tile img{ position:absolute; inset:0; z-index:auto; width:100%; height:100%; object-fit:cover; mix-blend-mode:multiply; }
.mosaic--eq .tile:hover img{ transform:scale(1.04); }
.mosaic--eq .tile__t{ position:static; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:0 2px; color:var(--text); }
.mosaic--eq .tile__t > span:first-child,.mosaic--eq .tile:nth-child(1) .tile__t > span:first-child{ background:none; box-shadow:none; padding:0; border-radius:0; min-width:0;
  font-family:var(--font-display, 'Cormorant Garamond', Georgia, serif); font-weight:500; font-size:18px; line-height:1.08; letter-spacing:-.003em; text-wrap:balance; }
.mosaic--eq .tile__go{ width:28px; height:28px; flex:none; background:none; color:var(--text); border:1px solid color-mix(in srgb, var(--text) 22%, transparent); transition:background .3s, color .3s, transform .45s var(--ease-out); }
.mosaic--eq .tile__go svg{ width:14px; height:14px; }
.mosaic--eq .tile:hover .tile__go{ background:var(--text); color:var(--bg); transform:rotate(-45deg); }
@media (min-width:900px){
  .mosaic--eq{ grid-template-columns:repeat(var(--cols, 4), 1fr); grid-auto-rows:auto; gap:30px 18px; }
  .mosaic--eq .tile,.mosaic--eq .tile:first-child,.mosaic--eq .tile.tile--mwide{ grid-column:var(--dc, auto); grid-row:auto; height:auto; gap:14px; }
  .mosaic--eq .tile__img,.mosaic--eq .tile.tile--mwide .tile__img{ aspect-ratio:6/5; }
  .mosaic--eq .tile__t{ font-size:inherit; }
  .mosaic--eq .tile__t > span:first-child,.mosaic--eq .tile:nth-child(1) .tile__t > span:first-child{ font-size:clamp(22px, 1.8vw, 27px); padding:0; }
  .mosaic--eq .tile__go{ width:36px; height:36px; } .mosaic--eq .tile__go svg{ width:16px; height:16px; }
}

/* >>> chatbot drag patch: chat button drag + dock (2026-11, chatbot drag patch) — assets/js/agent-widget.js dragDock(). Normal look unchanged.
   Docked: the button sits mostly off-screen; a 20px tab with an arrow stays visible. Only transform moves while dragging. */
.cwa-orb{ touch-action:none; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
.cwa-orb.is-moving{ transition:none; will-change:transform; animation:none; }
.cwa.is-drag .cwa-bubble{ display:none; }
.cwa.is-drag .cwa-orb{ cursor:grabbing; box-shadow:0 4px 10px rgba(0,0,0,.18), 0 14px 28px -8px rgba(0,0,0,.36); }
.cwa-chev{ position:absolute; z-index:3; top:50%; left:3px; width:14px; height:14px; margin-top:-7px; color:var(--cwa-on); opacity:0; pointer-events:none; transition:opacity .2s; }
.cwa-chev svg{ display:block; width:100%; height:100%; }
.cwa-chev svg,.cwa-chev path{ fill:currentColor !important; stroke:none !important; } /* the theme's line-icon rule must not touch the filled arrow */
.cwa--left .cwa-chev{ left:auto; right:3px; transform:rotate(180deg); }
.cwa-mark,.cwa-label{ transition:opacity .2s; }
.cwa.is-docked .cwa-orb{ border-radius:14px; animation:none; box-shadow:0 2px 8px rgba(0,0,0,.16); }
.cwa.is-docked .cwa-mark,.cwa.is-docked .cwa-label{ opacity:0; }
.cwa.is-docked .cwa-chev{ opacity:1; }
.cwa.is-docked .cwa-bubble{ display:none; }
.cwa.is-docked .cwa-gloss{ display:none; }
/* <<< chatbot drag patch */

/* hdr-acct:start — header "Sign in" (2026-10-31). Phone/tablet: menu + search on the left, sign-in + bag on the right; PC: Search · Sign in · Bag. */
.hdr__srch-m{ display:none; }
.acct-btn{ color:inherit; }
.acct-btn__ico{ display:inline-grid; place-items:center; flex:none; }
.acct-btn__lbl{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (max-width:1099px){
  .hdr__l{ gap:0; }
  .hdr__l .hdr__srch-m{ display:inline-flex; }
  .hdr__r .hdr__srch{ display:none; }
  .acct-btn--a{ flex-direction:column; gap:3px; width:52px; min-width:52px; padding:0; border-radius:12px; }
  .hdr .acct-btn--a svg{ width:21px; height:21px; }
  .acct-btn--a .acct-btn__lbl{ max-width:52px; font-size:10px; line-height:1.1; font-weight:600; letter-spacing:.01em; }
  .acct-btn--b .acct-btn__lbl{ display:none; }
}
@media (max-width:420px){
  .hdr__l .hdr__srch-m{ min-width:38px; padding:0 6px; }
}
@media (max-width:389px){
  .hdr__r{ gap:0; }
  .acct-btn--a{ width:48px; min-width:48px; }
  .acct-btn--a .acct-btn__lbl{ max-width:48px; }
}
@media (max-width:359px){
  .logo.has-mono .logo__img{ width:88px; }
  .burger{ padding:0 4px 0 8px; }
  .hdr__r{ gap:0; }
}
@media (min-width:1100px){
  .acct-btn__lbl{ max-width:180px; font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; }
  .acct-btn--b .acct-btn__ico{ display:none; }
  .acct-btn--b{ padding:0 14px; }
}
.mnu__accw{ flex:none; padding-top:4px; padding-bottom:6px; opacity:0; transform:translateY(8px); transition:opacity .6s var(--ease) .12s, transform .7s var(--ease-out) .12s; }
.mnu.is-ui .mnu__accw{ opacity:1; transform:none; }
.mnu.is-closing .mnu__accw{ opacity:0; transition:opacity .2s; transition-delay:0s; }
.mnu__acc{ display:flex; align-items:center; gap:14px; padding:13px 14px; border:1px solid color-mix(in srgb, var(--menu-text) 22%, transparent); border-radius:12px; color:inherit; text-decoration:none; transition:background .3s; }
@media (hover:hover){ .mnu__acc:hover{ background:color-mix(in srgb, var(--menu-text) 6%, transparent); } }
.mnu__acc-ico{ flex:none; display:grid; place-items:center; width:40px; height:40px; border-radius:50%; border:1px solid color-mix(in srgb, var(--menu-text) 22%, transparent); }
.mnu__acc-ico svg{ width:20px; height:20px; stroke-width:1.5; }
.mnu__acc-t{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.mnu__acc-t b{ font-size:15px; font-weight:600; letter-spacing:.01em; overflow-wrap:anywhere; }
.mnu__acc-t small{ font-size:12.5px; line-height:1.35; opacity:.68; }
@media (max-width:359px){ .mnu__acc{ gap:12px; padding:12px; } .mnu__acc-ico{ width:36px; height:36px; } }
.mnu__acc-go{ flex:none; display:grid; place-items:center; opacity:.8; }
.mnu__acc-go svg{ width:18px; height:18px; }
.mnu--accB .mnu__acct{ display:none; }
@media (min-width:900px){ .mnu__acc{ max-width:460px; } }
/* icon-only (his 10:54 PM): no "Sign in" text, clean user icon same as bag */
.acct-btn .acct-btn__lbl{ display:none !important; }
.acct-btn--a, .acct-btn--b{ flex-direction:row !important; width:44px !important; min-width:44px !important; height:44px; padding:0 !important; justify-content:center; align-items:center; gap:0 !important; border-radius:10px; }
.hdr .acct-btn svg{ width:22px !important; height:22px !important; }
.acct-btn--b .acct-btn__ico{ display:inline-grid !important; }
@media (max-width:389px){ .acct-btn--a, .acct-btn--b{ width:40px !important; min-width:40px !important; } }
/* hdr-acct:end */