/* ============ FONTS ============ */
@font-face{font-family:'Fraunces Var';font-style:normal;font-weight:300 900;font-display:swap;font-optical-sizing:auto;src:url('/fonts/fraunces-roman.woff2') format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122;}
@font-face{font-family:'Fraunces Var';font-style:italic;font-weight:400 700;font-display:swap;font-optical-sizing:auto;src:url('/fonts/fraunces-italic.woff2') format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122;}
@font-face{font-family:'Work Sans Var';font-style:normal;font-weight:300 800;font-display:swap;src:url('/fonts/worksans.woff2') format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122;}
@font-face{font-family:'Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/plexmono-400.woff2') format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122;}
@font-face{font-family:'Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/plexmono-600.woff2') format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122;}

/* ============ TOKENS ============ */
:root{
  --page-bg:#F2F0E5; --surface:#FFFFFF; --surface-sunken:#E8E6D8;
  --text:#16211E; --text-muted:#5E685F; --line:rgba(22,33,30,.14);
  --brand-ink:#0E2B2C; --brand-ink-soft:#123938; --brand-ink-text:#F2F0E5; --brand-ink-text-muted:#AAB8AE;
  --accent:#E4972F; --accent-strong:#C87F1F; --accent-ink:#241304;
  --sale:#BD4128; --sale-soft:#FBEAE4;
  --stock:#1D6A57; --stock-soft:#E7F1EB;
  --shadow:0 1px 2px rgba(14,43,42,.06), 0 12px 28px -14px rgba(14,43,42,.22);
  --shadow-lg:0 24px 60px -20px rgba(14,43,42,.35);
  --radius-tag:18px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root{
    --page-bg:#0A1D1E; --surface:#123332; --surface-sunken:#0F2928;
    --text:#EDEBDD; --text-muted:#9DA89F; --line:rgba(237,235,221,.14);
    --accent:#EFAD52; --accent-strong:#F4C077; --accent-ink:#241304;
    --sale:#E2765D; --sale-soft:#2B1712;
    --stock:#49B295; --stock-soft:#0F2B24;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 20px 40px -20px rgba(0,0,0,.6);
    --shadow-lg:0 24px 70px -20px rgba(0,0,0,.7);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --page-bg:#0A1D1E; --surface:#123332; --surface-sunken:#0F2928;
  --text:#EDEBDD; --text-muted:#9DA89F; --line:rgba(237,235,221,.14);
  --accent:#EFAD52; --accent-strong:#F4C077; --accent-ink:#241304;
  --sale:#E2765D; --sale-soft:#2B1712;
  --stock:#49B295; --stock-soft:#0F2B24;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 20px 40px -20px rgba(0,0,0,.6);
  --shadow-lg:0 24px 70px -20px rgba(0,0,0,.7);
  color-scheme:dark;
}
:root[data-theme="light"]{
  --page-bg:#F2F0E5; --surface:#FFFFFF; --surface-sunken:#E8E6D8;
  --text:#16211E; --text-muted:#5E685F; --line:rgba(22,33,30,.14);
  --accent:#E4972F; --accent-strong:#C87F1F; --accent-ink:#241304;
  --sale:#BD4128; --sale-soft:#FBEAE4;
  --stock:#1D6A57; --stock-soft:#E7F1EB;
  --shadow:0 1px 2px rgba(14,43,42,.06), 0 12px 28px -14px rgba(14,43,42,.22);
  --shadow-lg:0 24px 60px -20px rgba(14,43,42,.35);
  color-scheme:light;
}

/* ============ RESET / BASE ============ */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--page-bg); color:var(--text);
  font-family:'Work Sans Var', ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-weight:400; line-height:1.5; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{display:block; max-width:100%;}
a{color:inherit; text-decoration:none;}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer; -webkit-tap-highlight-color:transparent;}
input{font:inherit; color:inherit;}
ul{margin:0; padding:0; list-style:none;}
h1,h2,h3,h4,p{margin:0;}
.font-display{font-family:'Fraunces Var', Georgia, serif;}
.font-mono{font-family:'Plex Mono', ui-monospace, 'SF Mono', monospace; font-variant-numeric:tabular-nums;}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px;}
.visually-hidden{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}

.wrap{max-width:1360px; margin:0 auto; padding-inline:24px;}
@media (max-width:640px){ .wrap{padding-inline:16px;} }

.eyebrow{
  font-family:'Plex Mono', monospace; font-size:.72rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent-strong);
}
:root[data-theme="dark"] .eyebrow, .on-dark .eyebrow { color:var(--accent); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .eyebrow{ color:var(--accent);} }

.section-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
  margin-bottom:36px; flex-wrap:wrap;
}
.section-head h2{
  font-size:clamp(1.7rem, 2.6vw, 2.5rem); font-weight:600; letter-spacing:-.01em; text-wrap:balance;
  margin-top:8px;
}
.section-head p{ color:var(--text-muted); max-width:52ch; margin-top:10px; }
section{ padding-block:clamp(48px, 7vw, 92px); }
.on-dark{ background:var(--brand-ink); color:var(--brand-ink-text); }
.on-dark .text-muted{ color:var(--brand-ink-text-muted); }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 26px; border-radius:999px; font-weight:600; font-size:.92rem;
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
  white-space:nowrap;
}
.btn:active{ transform:scale(.97); }
.btn-accent{ background:var(--accent); color:var(--accent-ink); box-shadow:var(--shadow); }
.btn-accent:hover{ background:var(--accent-strong); }
.btn-outline{ border:1.5px solid currentColor; }
.btn-outline:hover{ background:rgba(255,255,255,.08); }
.btn-ghost-dark{ border:1.5px solid rgba(242,240,229,.35); color:var(--brand-ink-text); }
.btn-ghost-dark:hover{ background:rgba(242,240,229,.1); border-color:rgba(242,240,229,.6); }
.btn-sm{ padding:9px 16px; font-size:.82rem; }

.icon{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }

/* ============ REVEAL ANIMATION ============ */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
.reveal.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; }
}

/* ============ PROMO BAR ============ */
.promo-bar{ background:var(--brand-ink); color:var(--brand-ink-text-muted); font-size:.8rem; }
.promo-bar .wrap{ display:flex; align-items:center; justify-content:space-between; gap:16px; height:38px; }
.promo-rotator{ position:relative; height:16px; overflow:hidden; flex:1; max-width:420px; }
.promo-rotator span{
  position:absolute; inset:0; display:flex; align-items:center; gap:8px;
  opacity:0; transform:translateY(8px); transition:opacity .5s ease, transform .5s ease;
}
.promo-rotator span.active{ opacity:1; transform:none; }
.promo-rotator .icon{ width:14px; height:14px; color:var(--accent); }
.promo-extra{ display:flex; align-items:center; gap:18px; }
.promo-social{ display:flex; align-items:center; gap:10px; }
.promo-social a{ width:26px; height:26px; border-radius:50%; display:grid; place-items:center; border:1px solid rgba(242,240,229,.25); transition:background .15s, border-color .15s; }
.promo-social a:hover{ background:rgba(242,240,229,.12); border-color:rgba(242,240,229,.5); }
.promo-social .icon{ width:13px; height:13px; }
.promo-phone{ display:flex; align-items:center; gap:6px; font-family:'Plex Mono',monospace; letter-spacing:.02em; }
@media (max-width:820px){ .promo-extra .promo-social{ display:none; } }
@media (max-width:560px){ .promo-rotator{ max-width:220px; font-size:.75rem;} .promo-phone span{display:none;} }

/* ============ HEADER ============ */
.site-header{ position:sticky; top:0; z-index:60; background:var(--surface); border-bottom:1px solid var(--line); }
.header-row{ display:flex; align-items:center; gap:28px; padding-block:16px; }
.logo{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.logo-mark{ width:34px; height:34px; }
.logo-word{ font-family:'Fraunces Var', serif; font-weight:600; font-style:italic; font-size:1.5rem; letter-spacing:-.01em; }
.logo-sub{ display:block; font-family:'Plex Mono',monospace; font-size:.58rem; letter-spacing:.18em; text-transform:uppercase; color:var(--text-muted); margin-top:-2px; }

.search-form{ flex:1; max-width:640px; display:flex; align-items:stretch; height:46px; border:1.5px solid var(--line); border-radius:999px; background:var(--surface-sunken); transition:border-color .15s, box-shadow .15s; }
.search-form:focus-within{ border-color:var(--accent); box-shadow:0 0 0 4px rgba(228,151,47,.15); }
.search-cat{ border:0; background:transparent; padding-inline:16px; font-size:.8rem; color:var(--text-muted); border-right:1px solid var(--line); max-width:130px; }
.search-input{ flex:1; border:0; background:transparent; padding-inline:14px; font-size:.92rem; min-width:0; }
.search-input:focus{ outline:none; }
.search-submit{ width:46px; display:grid; place-items:center; color:var(--text); flex-shrink:0; }
.search-submit .icon{ width:18px; height:18px; }

.header-actions{ display:flex; align-items:center; gap:6px; flex-shrink:0; }
.action-btn{ position:relative; width:44px; height:44px; display:grid; place-items:center; border-radius:12px; transition:background .15s; }
.action-btn:hover{ background:var(--surface-sunken); }
.action-badge{ position:absolute; top:2px; right:2px; min-width:16px; height:16px; padding:0 3px; border-radius:999px; background:var(--sale); color:#fff; font-family:'Plex Mono',monospace; font-size:.62rem; font-weight:600; display:grid; place-items:center; transition:transform .25s cubic-bezier(.34,1.56,.64,1); }
.action-badge.bump{ animation:bump .35s cubic-bezier(.34,1.56,.64,1); }
.action-dot{ position:absolute; top:9px; right:9px; width:7px; height:7px; border-radius:50%; background:var(--sale); border:1.5px solid var(--surface); }
@keyframes bump{ 0%{transform:scale(1);} 40%{transform:scale(1.4);} 100%{transform:scale(1);} }
.header-account{ display:flex; align-items:center; gap:8px; padding:8px 14px 8px 8px; border-radius:999px; transition:background .15s; }
.header-account:hover{ background:var(--surface-sunken); }
.account-avatar{ width:30px; height:30px; border-radius:50%; background:var(--accent); color:var(--accent-ink); display:grid; place-items:center; font-weight:700; font-size:.8rem; }
.account-text{ text-align:left; line-height:1.2; }
.account-text small{ display:block; font-size:.68rem; color:var(--text-muted); }
.hamburger{ display:none; width:44px; height:44px; place-items:center; border-radius:12px; }
.hamburger .icon{ width:22px; height:22px; }

@media (max-width:960px){
  .search-cat{ display:none; }
  .header-account .account-text{ display:none; }
}
@media (max-width:760px){
  .header-row{ gap:14px; flex-wrap:wrap; padding-block:12px; }
  .search-form{ order:3; max-width:none; width:100%; height:42px; }
  .header-account{ display:none; }
  .hamburger{ display:grid; }
}

/* ============ MAIN NAV / MEGA MENU ============ */
.main-nav{ background:var(--surface); border-bottom:1px solid var(--line); }
.main-nav .wrap{ display:flex; align-items:center; gap:2px; height:52px; }
.nav-link{ position:relative; display:flex; align-items:center; height:100%; padding-inline:16px; font-size:.88rem; font-weight:500; color:var(--text-muted); transition:color .15s; }
.nav-link:hover, .nav-link[aria-expanded="true"]{ color:var(--text); }
.nav-link.has-mega::after{ content:""; width:7px; height:7px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); margin-left:6px; opacity:.6; }
.nav-link::before{ content:""; position:absolute; left:16px; right:16px; bottom:0; height:2px; background:var(--accent); transform:scaleX(0); transition:transform .2s ease; }
.nav-link:hover::before, .nav-link.active::before{ transform:scaleX(1); }

.mega-menu{ position:absolute; left:0; right:0; top:100%; background:var(--surface); border-bottom:1px solid var(--line); box-shadow:var(--shadow-lg); opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .18s ease, transform .18s ease, visibility .18s; z-index:55; }
.nav-item.mega-open .mega-menu{ opacity:1; visibility:visible; transform:none; }
.mega-inner{ display:grid; grid-template-columns:1fr 300px; gap:40px; padding-block:32px; }
.mega-cats{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.mega-cat{ display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:12px; transition:background .15s; }
.mega-cat:hover{ background:var(--surface-sunken); }
.mega-cat .mega-ic{ width:38px; height:38px; border-radius:10px; background:var(--surface-sunken); display:grid; place-items:center; color:var(--accent-strong); flex-shrink:0; }
.mega-cat:hover .mega-ic{ background:var(--accent); color:var(--accent-ink); }
.mega-cat strong{ display:block; font-size:.86rem; font-weight:600; }
.mega-cat span{ font-size:.74rem; color:var(--text-muted); font-family:'Plex Mono',monospace; }
.mega-promo{ border-radius:20px; background:linear-gradient(155deg,#123938,#0E2B2C); color:var(--brand-ink-text); padding:24px; display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden; }
.mega-promo::after{ content:""; position:absolute; width:180px; height:180px; border-radius:50%; background:radial-gradient(circle,rgba(228,151,47,.35),transparent 70%); right:-60px; bottom:-60px; }
.mega-promo b{ font-family:'Fraunces Var',serif; font-size:1.3rem; font-weight:600; font-style:italic; display:block; margin-bottom:6px; }
@media (max-width:960px){ .mega-menu, .nav-link:not(.mobile-visible){ display:none; } .main-nav{ display:none; } }

/* Mobile drawer */
.drawer-backdrop{ position:fixed; inset:0; background:rgba(14,43,42,.5); z-index:80; opacity:0; visibility:hidden; transition:opacity .25s; }
.drawer-backdrop.open{ opacity:1; visibility:visible; }
.drawer{ position:fixed; top:0; bottom:0; left:0; width:min(84vw,340px); background:var(--surface); z-index:90; transform:translateX(-100%); transition:transform .3s cubic-bezier(.22,1,.36,1); display:flex; flex-direction:column; }
.drawer.open{ transform:none; }
.drawer-head{ display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--line); }
.drawer-body{ overflow-y:auto; padding:8px 8px 24px; }
.drawer a, .drawer button.drawer-link{ display:flex; align-items:center; justify-content:space-between; width:100%; text-align:left; padding:14px 16px; border-radius:12px; font-weight:500; font-size:.96rem; }
.drawer a:hover, .drawer button.drawer-link:hover{ background:var(--surface-sunken); }
.drawer-cats{ margin-top:6px; padding-top:6px; border-top:1px solid var(--line); }
.drawer-cats a{ font-size:.88rem; color:var(--text-muted); padding-block:11px; }

/* ============ HERO SLIDER ============ */
.hero{ position:relative; background:var(--brand-ink); color:var(--brand-ink-text); overflow:hidden; }
.hero-track{ position:relative; height:min(74vh, 620px); min-height:440px; }
.hero-slide{ position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .7s ease; display:flex; align-items:center; }
.hero-slide.active{ opacity:1; visibility:visible; }
.hero-slide .wrap{ position:relative; z-index:2; width:100%; }
.hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-bg::before{ content:""; position:absolute; inset:0; background:radial-gradient(1100px 500px at 82% 18%, rgba(228,151,47,.28), transparent 60%); }
.hero-bg svg{ position:absolute; inset:0; width:100%; height:100%; opacity:.5; }
.hero-content{ max-width:640px; }
.hero-content .eyebrow{ color:var(--accent); }
.hero-content h1{ font-family:'Fraunces Var',serif; font-weight:600; font-size:clamp(2.3rem,5.4vw,4.4rem); line-height:1.03; letter-spacing:-.02em; margin-top:14px; text-wrap:balance; }
.hero-content h1 em{ color:var(--accent); font-style:italic; }
.hero-content p{ margin-top:20px; font-size:1.08rem; color:var(--brand-ink-text-muted); max-width:46ch; }
.hero-cta{ display:flex; gap:14px; margin-top:32px; flex-wrap:wrap; }
.hero-nav{ position:absolute; bottom:28px; left:0; right:0; z-index:3; }
.hero-nav .wrap{ display:flex; align-items:center; justify-content:space-between; }
.hero-dots{ display:flex; gap:9px; }
.hero-dots button{ width:28px; height:4px; border-radius:2px; background:rgba(242,240,229,.3); transition:background .2s, width .2s; }
.hero-dots button.active{ background:var(--accent); width:44px; }
.hero-arrows{ display:flex; gap:8px; }
.hero-arrows button{ width:42px; height:42px; border-radius:50%; border:1px solid rgba(242,240,229,.3); display:grid; place-items:center; transition:background .15s; }
.hero-arrows button:hover{ background:rgba(242,240,229,.12); }
@media (max-width:640px){ .hero-track{ height:auto; min-height:0; padding-block:56px 84px;} .hero-nav{ position:static; margin-top:28px;} }

/* ============ SHOP CATEGORIES GRID ============ */
.cat-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:18px; }
.cat-card{ position:relative; background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:22px 16px 18px; text-align:center; box-shadow:var(--shadow); transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s; }
.cat-card:hover{ transform:translateY(-6px) scale(1.02); box-shadow:var(--shadow-lg); }
.cat-ic-wrap{ width:64px; height:64px; margin:0 auto 14px; border-radius:18px; background:var(--surface-sunken); display:grid; place-items:center; color:var(--accent-strong); transition:background .25s, color .25s, transform .25s; }
.cat-card:hover .cat-ic-wrap{ background:var(--accent); color:var(--accent-ink); transform:rotate(-6deg) scale(1.06); }
.cat-ic-wrap .icon{ width:30px; height:30px; }
.cat-card strong{ display:block; font-size:.92rem; font-weight:600; }
.cat-card span{ display:block; margin-top:4px; font-family:'Plex Mono',monospace; font-size:.72rem; color:var(--text-muted); }
.cat-card.view-all{ background:var(--brand-ink); color:var(--brand-ink-text); border-color:transparent; }
.cat-card.view-all .cat-ic-wrap{ background:rgba(242,240,229,.12); color:var(--accent); }
.cat-card.view-all:hover .cat-ic-wrap{ background:var(--accent); color:var(--accent-ink); }
.cat-card.view-all span{ color:var(--brand-ink-text-muted); }
@media (max-width:960px){ .cat-grid{ grid-template-columns:repeat(4,1fr);} }
@media (max-width:560px){ .cat-grid{ grid-template-columns:repeat(2,1fr); gap:12px;} .cat-card{ border-radius:18px; padding:18px 10px 14px;} }

/* ============ FEATURED CATEGORIES (promo cards) ============ */
.feat-cat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.feat-cat-card{ position:relative; border-radius:26px; overflow:hidden; min-height:340px; display:flex; flex-direction:column; justify-content:flex-end; padding:26px; color:#fff; isolation:isolate; }
.feat-cat-card::before{ content:""; position:absolute; inset:0; z-index:-2; }
.feat-cat-card::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.72) 100%); }
.feat-cat-card svg, .feat-cat-card img.fc-zoom{ position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; }
.feat-cat-card h3{ font-family:'Fraunces Var',serif; font-weight:600; font-style:italic; font-size:1.5rem; }
.feat-cat-card p{ margin-top:6px; font-size:.85rem; color:rgba(255,255,255,.82); max-width:26ch; }
.feat-cat-card .btn{ margin-top:16px; align-self:flex-start; }
.feat-cat-card:hover .fc-zoom{ transform:scale(1.08); }
.fc-zoom{ transition:transform .5s cubic-bezier(.22,1,.36,1); }
@media (max-width:960px){ .feat-cat-grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .feat-cat-grid{ grid-template-columns:1fr;} .feat-cat-card{ min-height:260px;} }

/* ============ PRODUCT CARDS ============ */
.prod-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.prod-card{
  position:relative; background:var(--surface); border:1px solid var(--line);
  clip-path:polygon(20px 0,100% 0,100% 100%,0 100%,0 20px);
  padding-top:1px; box-shadow:var(--shadow); transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s;
  display:flex; flex-direction:column;
}
.prod-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); }
.prod-card::before{ content:""; position:absolute; top:5px; left:5px; width:11px; height:11px; border-radius:50%; background:var(--page-bg); border:1px solid var(--line); z-index:3; }
.prod-media{ position:relative; aspect-ratio:1/1; overflow:hidden; }
.prod-media svg, .prod-media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.22,1,.36,1); }
.prod-card:hover .prod-media svg, .prod-card:hover .prod-media img{ transform:scale(1.07); }
.prod-tags{ position:absolute; top:12px; left:16px; display:flex; flex-direction:column; gap:6px; z-index:2; }
.tag{ font-family:'Plex Mono',monospace; font-size:.65rem; font-weight:600; letter-spacing:.03em; padding:4px 9px; border-radius:999px; }
.tag-sale{ background:var(--sale); color:#fff; }
.tag-new{ background:var(--stock); color:#fff; }
.tag-low{ background:var(--accent); color:var(--accent-ink); }
.prod-fav{ position:absolute; top:10px; right:14px; width:34px; height:34px; border-radius:50%; background:var(--surface); display:grid; place-items:center; box-shadow:var(--shadow); z-index:2; transition:transform .2s; }
.prod-fav:hover{ transform:scale(1.1); }
.prod-fav.active .icon{ fill:var(--sale); stroke:var(--sale); }
.prod-fav .icon{ width:16px; height:16px; }
.prod-whatsapp{ position:absolute; top:52px; right:14px; width:34px; height:34px; border-radius:50%; background:#25D366; display:grid; place-items:center; box-shadow:var(--shadow); z-index:2; transition:transform .2s; }
.prod-whatsapp:hover{ transform:scale(1.1); }
.prod-whatsapp .icon{ width:16px; height:16px; color:#fff; }
.prod-quick{ position:absolute; left:12px; right:12px; bottom:12px; z-index:2; opacity:0; transform:translateY(8px); transition:opacity .2s, transform .2s; }
.prod-card:hover .prod-quick{ opacity:1; transform:none; }
.prod-quick button{ width:100%; background:rgba(14,43,42,.88); backdrop-filter:blur(4px); color:#fff; font-size:.78rem; font-weight:600; padding:10px; border-radius:10px; }
.prod-body{ padding:16px 18px 18px; display:flex; flex-direction:column; gap:8px; flex:1; }
.prod-cat{ font-family:'Plex Mono',monospace; font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); }
.prod-name{ font-size:.92rem; font-weight:600; line-height:1.35; min-height:2.5em; }
.prod-rating{ display:flex; align-items:center; gap:5px; font-size:.78rem; color:var(--text-muted); }
.prod-rating .icon{ width:13px; height:13px; fill:var(--accent); stroke:var(--accent); }
.prod-price-row{ display:flex; align-items:baseline; gap:8px; margin-top:2px; flex-wrap:wrap; }
.prod-price{ font-family:'Plex Mono',monospace; font-weight:600; font-size:1.08rem; }
.prod-price-old{ font-family:'Plex Mono',monospace; font-size:.8rem; color:var(--text-muted); text-decoration:line-through; }
.prod-discount{ font-family:'Plex Mono',monospace; font-size:.72rem; font-weight:700; color:var(--sale); }
.prod-stock{ font-size:.74rem; font-weight:600; }
.prod-stock.in{ color:var(--stock); } .prod-stock.low{ color:var(--accent-strong); } .prod-stock.out{ color:var(--sale); }
.prod-add{ margin-top:auto; padding-top:10px; display:flex; align-items:center; gap:8px; width:100%; justify-content:center; background:var(--brand-ink); color:var(--brand-ink-text); border-radius:12px; padding-block:11px; font-size:.84rem; font-weight:600; transition:background .15s; margin-top:10px; }
.prod-add:hover{ background:var(--accent); color:var(--accent-ink); }
.prod-add:disabled{ opacity:.45; cursor:not-allowed; }
.prod-add .icon{ width:16px; height:16px; }
@media (max-width:960px){ .prod-grid{ grid-template-columns:repeat(3,1fr);} }
@media (max-width:640px){ .prod-grid{ grid-template-columns:repeat(2,1fr); gap:12px;} .prod-name{ font-size:.82rem;} .prod-body{ padding:12px 12px 14px;} }

/* Skeletons */
.skeleton-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.sk-card{ border-radius:16px; overflow:hidden; background:var(--surface); border:1px solid var(--line); }
.sk-media{ aspect-ratio:1/1; }
.sk-line{ height:12px; margin:14px 16px; border-radius:6px; }
.sk-media,.sk-line{ background:linear-gradient(100deg, var(--surface-sunken) 30%, var(--line) 50%, var(--surface-sunken) 70%); background-size:220% 100%; animation:shimmer 1.4s ease-in-out infinite; }
@keyframes shimmer{ 0%{background-position:200% 0;} 100%{background-position:-20% 0;} }
[data-loaded="true"] .skeleton-grid{ display:none; }
.skeleton-grid{ display:none; }
[data-loading="true"] .skeleton-grid{ display:grid; }
[data-loading="true"] .real-grid{ display:none; }
@media (max-width:960px){ .skeleton-grid{ grid-template-columns:repeat(3,1fr);} }
@media (max-width:640px){ .skeleton-grid{ grid-template-columns:repeat(2,1fr);} }

/* Horizontal sliders */
.hscroll-wrap{ position:relative; }
.hscroll{ display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; padding-bottom:6px; -ms-overflow-style:none; scrollbar-width:none; }
.hscroll::-webkit-scrollbar{ display:none; }
.hscroll > *{ scroll-snap-align:start; flex:0 0 auto; width:250px; }
.hscroll-btn{ position:absolute; top:38%; width:46px; height:46px; border-radius:50%; background:var(--surface); box-shadow:var(--shadow-lg); display:grid; place-items:center; z-index:4; transition:transform .15s; }
.hscroll-btn:hover{ transform:translateY(-50%) scale(1.06); }
.hscroll-prev{ left:-8px; } .hscroll-next{ right:-8px; }
@media (max-width:760px){ .hscroll-btn{ display:none; } }

/* ============ SPECIAL OFFER BANNER ============ */
.offer-banner{ position:relative; border-radius:28px; overflow:hidden; background:linear-gradient(120deg,#0E2B2C 0%, #123938 55%, #1D6A57 100%); color:#fff; padding:clamp(32px,5vw,56px); display:grid; grid-template-columns:1.2fr auto; gap:32px; align-items:center; }
.offer-banner::after{ content:""; position:absolute; right:-100px; top:-100px; width:340px; height:340px; border-radius:50%; background:radial-gradient(circle, rgba(228,151,47,.35), transparent 70%); }
.offer-copy .eyebrow{ color:var(--accent); }
.offer-copy h3{ font-family:'Fraunces Var',serif; font-weight:600; font-size:clamp(1.8rem,3.4vw,2.7rem); margin-top:10px; text-wrap:balance; }
.offer-copy p{ margin-top:10px; color:rgba(255,255,255,.78); max-width:44ch; }
.offer-copy .btn{ margin-top:22px; }
.countdown{ display:flex; gap:10px; position:relative; z-index:1; }
.cd-unit{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); border-radius:14px; width:74px; padding:12px 0; text-align:center; }
.cd-unit b{ display:block; font-family:'Plex Mono',monospace; font-size:1.7rem; font-weight:600; }
.cd-unit span{ font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.6); }
@media (max-width:820px){ .offer-banner{ grid-template-columns:1fr; } .countdown{ justify-content:flex-start;} }
@media (max-width:480px){ .cd-unit{ width:60px; padding:9px 0;} .cd-unit b{ font-size:1.3rem;} }

/* ============ TABS ============ */
.tabbar{ display:inline-flex; padding:5px; background:var(--surface-sunken); border-radius:999px; gap:4px; }
.tabbar button{ padding:9px 20px; border-radius:999px; font-size:.85rem; font-weight:600; color:var(--text-muted); transition:background .18s,color .18s; }
.tabbar button[aria-selected="true"]{ background:var(--surface); color:var(--text); box-shadow:var(--shadow); }
.tabpanel{ display:none; }
.tabpanel.active{ display:block; }

/* ============ WHY CHOOSE US ============ */
.why-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:rgba(242,240,229,.14); border-radius:24px; overflow:hidden; }
.why-item{ background:var(--brand-ink); padding:30px 22px; text-align:left; }
.why-ic{ width:46px; height:46px; border-radius:12px; background:rgba(228,151,47,.14); color:var(--accent); display:grid; place-items:center; margin-bottom:16px; }
.why-item strong{ display:block; font-size:1rem; font-weight:600; margin-bottom:6px; }
.why-item p{ font-size:.82rem; color:var(--brand-ink-text-muted); line-height:1.5; }
@media (max-width:960px){ .why-grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .why-grid{ grid-template-columns:1fr;} }

/* ============ BRANDS MARQUEE ============ */
.brand-marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.brand-track{ display:flex; gap:0; width:max-content; animation:marquee 32s linear infinite; }
.brand-marquee:hover .brand-track{ animation-play-state:paused; }
.brand-chip{ display:flex; align-items:center; justify-content:center; width:190px; height:88px; font-family:'Fraunces Var',serif; font-weight:600; font-size:1.3rem; color:var(--text-muted); border-right:1px solid var(--line); letter-spacing:-.02em; opacity:.8; transition:opacity .2s,color .2s; }
.brand-chip:hover{ opacity:1; color:var(--text); }
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ============ REVIEWS ============ */
.review-track{ display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
.review-track::-webkit-scrollbar{ display:none; }
.review-card{ scroll-snap-align:start; flex:0 0 auto; width:min(380px,84vw); background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:26px; display:flex; flex-direction:column; gap:14px; box-shadow:var(--shadow); }
.review-stars{ display:flex; gap:3px; color:var(--accent); letter-spacing:2px; font-size:.85rem; }
.review-stars .icon{ width:15px; height:15px; fill:var(--accent); stroke:var(--accent); }
.review-card p{ font-size:.92rem; line-height:1.6; color:var(--text); flex:1; }
.review-who{ display:flex; align-items:center; gap:12px; }
.review-avatar{ width:42px; height:42px; border-radius:50%; display:grid; place-items:center; font-weight:700; font-size:.85rem; color:#fff; flex-shrink:0; }
.review-who strong{ display:block; font-size:.86rem; }
.review-who span{ font-size:.74rem; color:var(--text-muted); }

/* ============ NEWSLETTER ============ */
.newsletter-inner{ text-align:center; max-width:560px; margin:0 auto; }
.newsletter-inner h2{ font-family:'Fraunces Var',serif; font-weight:600; font-style:italic; font-size:clamp(1.8rem,3.4vw,2.6rem); }
.newsletter-inner p{ margin-top:12px; color:var(--brand-ink-text-muted); }
.newsletter-form{ margin-top:26px; display:flex; gap:10px; background:rgba(242,240,229,.08); border:1px solid rgba(242,240,229,.2); padding:6px; border-radius:999px; }
.newsletter-form input{ flex:1; background:transparent; border:0; padding-inline:16px; color:var(--brand-ink-text); }
.newsletter-form input::placeholder{ color:var(--brand-ink-text-muted); }
.newsletter-form input:focus{ outline:none; }
.newsletter-msg{ margin-top:14px; font-size:.85rem; color:var(--accent); min-height:1.2em; }
@media (max-width:560px){ .newsletter-form{ flex-direction:column; border-radius:20px;} .newsletter-form input{ padding:10px 14px;} }

/* ============ GALLERY ============ */
.gallery-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.gallery-tile{ position:relative; aspect-ratio:1/1; border-radius:18px; overflow:hidden; }
.gallery-tile svg, .gallery-tile img{ width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.gallery-tile:hover svg, .gallery-tile:hover img{ transform:scale(1.08); }
.gallery-tag{ position:absolute; left:12px; bottom:12px; font-family:'Plex Mono',monospace; font-size:.68rem; color:#fff; background:rgba(14,43,42,.55); backdrop-filter:blur(3px); padding:5px 10px; border-radius:999px; }
@media (max-width:760px){ .gallery-grid{ grid-template-columns:repeat(3,1fr);} }
@media (max-width:480px){ .gallery-grid{ grid-template-columns:repeat(2,1fr);} }

/* ============ FOOTER ============ */
.site-footer{ background:var(--brand-ink); color:var(--brand-ink-text); }
.footer-top{ padding-block:64px 40px; display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr 1fr; gap:32px; }
.footer-about p{ margin-top:14px; font-size:.86rem; color:var(--brand-ink-text-muted); max-width:34ch; line-height:1.6; }
.footer-social{ display:flex; gap:10px; margin-top:20px; }
.footer-social a{ width:36px; height:36px; border-radius:50%; border:1px solid rgba(242,240,229,.25); display:grid; place-items:center; transition:background .15s; }
.footer-social a:hover{ background:rgba(242,240,229,.12); }
.footer-social .icon{ width:16px; height:16px; }
.footer-col h4{ font-family:'Plex Mono',monospace; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin-bottom:16px; }
.footer-col ul{ display:flex; flex-direction:column; gap:11px; }
.footer-col a{ font-size:.87rem; color:var(--brand-ink-text-muted); transition:color .15s; }
.footer-col a:hover{ color:var(--brand-ink-text); }
.footer-contact li{ display:flex; gap:10px; font-size:.85rem; color:var(--brand-ink-text-muted); align-items:flex-start; }
.footer-contact .icon{ width:16px; height:16px; margin-top:2px; color:var(--accent); flex-shrink:0; }
.app-btn{ display:flex; align-items:center; gap:10px; border:1px solid rgba(242,240,229,.25); border-radius:12px; padding:9px 14px; margin-bottom:10px; transition:background .15s; }
.app-btn:hover{ background:rgba(242,240,229,.1); }
.app-btn .icon{ width:20px; height:20px; }
.app-btn small{ display:block; font-size:.6rem; color:var(--brand-ink-text-muted); }
.app-btn strong{ display:block; font-size:.82rem; }
.footer-bottom{ border-top:1px solid rgba(242,240,229,.14); padding-block:22px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:.78rem; color:var(--brand-ink-text-muted); }
.footer-bottom-links{ display:flex; gap:18px; flex-wrap:wrap; }
.footer-bottom-links a:hover{ color:var(--brand-ink-text); }
.pay-chips{ display:flex; gap:8px; }
.pay-chips span{ font-family:'Plex Mono',monospace; font-size:.66rem; border:1px solid rgba(242,240,229,.25); border-radius:6px; padding:4px 7px; }
@media (max-width:960px){ .footer-top{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-top{ grid-template-columns:1fr; padding-block:44px 24px; } }

/* ============ MOBILE BOTTOM NAV ============ */
.bottom-nav{ display:none; }
@media (max-width:760px){
  .bottom-nav{
    display:flex; position:fixed; bottom:0; left:0; right:0; z-index:70;
    background:var(--surface); border-top:1px solid var(--line);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));
    box-shadow:0 -8px 24px -12px rgba(14,43,42,.25);
  }
  .bottom-nav button{ flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; padding:6px 0; border-radius:12px; color:var(--text-muted); position:relative; }
  .bottom-nav button.active{ color:var(--accent-strong); }
  .bottom-nav button .icon{ width:21px; height:21px; }
  .bottom-nav button span{ font-size:.62rem; font-weight:600; }
  .bottom-nav .bn-badge{ position:absolute; top:0; right:22%; min-width:14px; height:14px; padding:0 3px; border-radius:999px; background:var(--sale); color:#fff; font-size:.55rem; font-family:'Plex Mono',monospace; display:grid; place-items:center; }
  body{ padding-bottom:64px; }
}

/* Back to top */
.back-to-top{ position:fixed; right:20px; bottom:20px; width:46px; height:46px; border-radius:50%; background:var(--brand-ink); color:var(--brand-ink-text); display:grid; place-items:center; box-shadow:var(--shadow-lg); z-index:65; opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .25s, transform .25s, visibility .25s; }
.back-to-top.show{ opacity:1; visibility:visible; transform:none; }
@media (max-width:760px){ .back-to-top{ bottom:76px; } }

/* Quick view dialog */
dialog#quickview{ border:0; border-radius:24px; padding:0; max-width:760px; width:92vw; background:var(--surface); color:var(--text); box-shadow:var(--shadow-lg); }
dialog#quickview::backdrop{ background:rgba(14,43,42,.55); backdrop-filter:blur(2px); }
.qv-body{ display:grid; grid-template-columns:1fr 1fr; }
.qv-media{ aspect-ratio:1/1; }
.qv-media svg{ width:100%; height:100%; }
.qv-info{ padding:28px; display:flex; flex-direction:column; gap:12px; }
.qv-close{ position:absolute; top:14px; right:14px; width:36px; height:36px; border-radius:50%; background:var(--surface); box-shadow:var(--shadow); display:grid; place-items:center; }
@media (max-width:640px){ .qv-body{ grid-template-columns:1fr; } dialog#quickview{ max-height:88vh; overflow-y:auto; } }

/* Catalog filters */
.catalog-toolbar{ display:flex; flex-wrap:wrap; align-items:end; gap:16px; padding:20px; margin-bottom:24px; background:var(--surface); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow); }
.filter-field{ display:flex; flex-direction:column; gap:6px; font-size:.78rem; color:var(--text-muted); }
.filter-field label{ font-weight:600; }
.filter-field input, .filter-field select{ height:42px; border:1.5px solid var(--line); border-radius:12px; background:var(--surface-sunken); padding-inline:12px; font-size:.88rem; color:var(--text); min-width:130px; }
.filter-field input:focus, .filter-field select:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 4px rgba(228,151,47,.15); }
.filter-search{ flex:1 1 240px; min-width:200px; flex-direction:row; align-items:center; gap:10px; border:1.5px solid var(--line); border-radius:12px; background:var(--surface-sunken); padding-inline:12px; }
.filter-search .icon{ width:18px; height:18px; color:var(--text-muted); flex-shrink:0; }
.filter-search input{ border:0; background:transparent; height:42px; padding:0; min-width:0; flex:1; }
.filter-check{ display:flex; align-items:center; gap:8px; font-size:.84rem; color:var(--text-muted); white-space:nowrap; padding-bottom:9px; }
.filter-check input{ width:16px; height:16px; accent-color:var(--accent); }
.filter-actions{ display:flex; gap:10px; margin-left:auto; }
.btn-line{ border:1.5px solid var(--line); color:var(--text); }
.btn-line:hover{ background:var(--surface-sunken); }
.btn-line.is-disabled{ opacity:.4; pointer-events:none; }
.catalog-meta{ color:var(--text-muted); font-size:.88rem; margin-bottom:16px; }
.pagination-bar{ display:flex; align-items:center; justify-content:center; gap:16px; margin-top:36px; }
.pagination-status{ font-size:.84rem; color:var(--text-muted); font-family:'Plex Mono',monospace; }
.catalog-empty{ text-align:center; padding:60px 20px; color:var(--text-muted); }
.catalog-empty .icon{ color:var(--line); margin-bottom:16px; }
.catalog-empty h3{ color:var(--text); font-size:1.2rem; margin-bottom:8px; }
.catalog-empty p{ margin-bottom:20px; }
@media (max-width:760px){
  .catalog-toolbar{ flex-direction:column; align-items:stretch; }
  .filter-actions{ margin-left:0; }
}

/* Toast */
.toast-root{ position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:100; display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none; }
.toast{ background:var(--brand-ink); color:var(--brand-ink-text); padding:12px 20px; border-radius:999px; font-size:.84rem; font-weight:500; box-shadow:var(--shadow-lg); display:flex; align-items:center; gap:8px; opacity:0; transform:translateY(10px); transition:opacity .25s, transform .25s; }
.toast.show{ opacity:1; transform:none; }
.toast .icon{ width:16px; height:16px; color:var(--accent); }
@media (max-width:760px){ .toast-root{ bottom:76px; } }

.container-x{ overflow-x:auto; }