/* =========================================================
   Hubator — Design tokens
   Palette: warm ivory paper, deep teal-ink text, brass/gold
   accent, muted sage secondary, rust for sale/alerts.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,500&family=Work+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --paper:#FAF7F0;
  --paper-dim:#F1ECDF;
  --ink:#16231F;
  --ink-soft:#4A554F;
  --gold:#C99A2E;
  --gold-deep:#9C7620;
  --sage:#7C9473;
  --rust:#B5533C;
  --line:#D8D2C4;
  --white:#FFFFFF;

  --font-display:'Fraunces', serif;
  --font-body:'Work Sans', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;

  --radius:4px;
  --container:1180px;
  --shadow-tag: 2px 3px 0 rgba(22,35,31,0.08);

  /* Shared spacing tokens — edit once, applies everywhere */
  --section-v:72px;
  --section-v-sm:40px;
  --wrap-h:20px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--ink);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
button{font-family:inherit;cursor:pointer;}
.link-button{padding:0;border:0;background:none;color:var(--gold-deep);font:inherit;text-decoration:underline;}
.link-button:disabled{cursor:wait;opacity:.7;}
input,select,textarea{font-family:inherit;}

/* Skip nav — visually hidden until focused */
.skip-nav{
  position:absolute;top:-100px;left:0;z-index:9999;
  background:var(--ink);color:var(--paper);padding:10px 18px;font-size:.88rem;font-weight:600;
  border-radius:0 0 6px 0;
  transition:top .2s;
}
.skip-nav:focus{top:0;}

.wrap{
  max-width:var(--container);
  margin:0 auto;
  padding:0 28px;
}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  margin:0 0 .4em;
  color:var(--ink);
  letter-spacing:-0.01em;
}
h1{font-size:clamp(2rem,5vw,4.2rem);font-weight:700;line-height:1.05;}
h2{font-size:clamp(1.5rem,3vw,2.5rem);}
h3{font-size:clamp(1.1rem,2.5vw,1.5rem);}
p{margin:0 0 1em;color:var(--ink-soft);}
.status-mark{
  display:flex;align-items:center;justify-content:center;width:64px;height:64px;
  margin:0 auto 1rem;border:1px solid var(--line);border-radius:50%;
  color:var(--gold-deep);font-family:var(--font-mono);font-size:1.4rem;font-weight:600;
}
.status-mark-success{color:var(--sage);border-color:var(--sage);}
.status-mark-error{color:var(--rust);border-color:var(--rust);}

.eyebrow{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold-deep);
  display:inline-block;
  margin-bottom:.9em;
}

/* Focus visibility */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--sage);
  outline-offset:2px;
}
@media(prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;}
}

/* ── Header ─────────────────────────────────────────────── */
.site-header{
  /* FIX (header stretch on scroll, home page, mobile Chrome):
     position:sticky must be repositioned on every scroll frame, and the
     hero's infinite GPU animations keep the main thread busy — on mobile
     Chrome the sticky header smears/"stretches" while scrolling.
     position:fixed is positioned by the compositor alone, so it cannot
     smear, tear, or stretch during scroll. The compositor hints below
     keep it on its own layer. */
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:var(--paper);
  border-bottom:1px solid var(--line);
  -webkit-transform:translateZ(0);
  transform:translateZ(0);
  will-change:transform;
  backface-visibility:hidden;
}
/* Offset page content for the fixed header (header is 76px desktop / 68px mobile) */
body{padding-top:77px;}
@media(max-width:680px){body{padding-top:69px;}}
/* Keep anchor jumps (skip link) visible below the fixed header */
#main-content{scroll-margin-top:84px;}
@media(max-width:680px){#main-content{scroll-margin-top:76px;}}
.header-bar{
  display:flex;align-items:center;justify-content:space-between;
  min-height:76px;
  padding:12px 28px;
  gap:20px;
  box-sizing:border-box;
}
.logo{
  font-family:var(--font-display);
  font-weight:600;
  font-size:1.35rem;
  letter-spacing:-0.01em;
  white-space:nowrap;
}
.logo span{color:var(--gold-deep);}
.main-nav ul{display:flex;gap:24px;}
.main-nav a{
  font-size:.9rem;font-weight:500;color:var(--ink);
  position:relative;padding:4px 0;
  white-space:nowrap;
}
.main-nav a.active,.main-nav a:hover{color:var(--gold-deep);}
.main-nav a.active::after{
  content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;background:var(--gold);
}
.header-actions{display:flex;align-items:center;gap:14px;flex-shrink:0;}
.icon-link{position:relative;font-size:1.05rem;white-space:nowrap;}
.cart-count{
  position:absolute;top:-9px;right:-13px;
  background:var(--rust);color:var(--white);
  font-family:var(--font-mono);font-size:.65rem;
  width:18px;height:18px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
.nav-toggle{display:none;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;background:rgba(22,35,31,.06);border:none;color:var(--ink);cursor:pointer;padding:0;transition:background .2s ease,transform .15s ease;}
.nav-toggle:hover{background:rgba(22,35,31,.11);}
.nav-toggle:active{transform:scale(.93);}
.nav-toggle .ui-icon{width:22px;height:22px;}

/* "Categories" mega-dropdown in the main nav (MAN / WOMAN / ACCESSORIES).
 * Selectors are prefixed with .main-nav on purpose: the generic
 * ".main-nav ul{display:flex}" rule would otherwise override the
 * panel's display:none and blow the menu open. */
.main-nav .nav-cats{position:relative;display:flex;}
.main-nav .nav-cat-toggle{
  display:inline-flex;align-items:center;gap:6px;
  background:none;border:none;cursor:pointer;
  font-family:inherit;font-size:.9rem;font-weight:500;color:var(--ink);
  padding:4px 0;white-space:nowrap;
}
.main-nav .nav-cat-toggle .ui-icon{width:18px;height:18px;}
.main-nav .nav-cat-toggle::after{content:"▾";font-size:.7rem;transform:translateY(1px);}
.main-nav .nav-cat-toggle:hover,
.main-nav .nav-cats.open .nav-cat-toggle,
.main-nav .nav-cats:focus-within .nav-cat-toggle{color:var(--gold-deep);}
.main-nav .nav-cats-panel{
  display:none;position:absolute;top:calc(100% + 12px);left:-20px;
  flex-direction:row;align-items:flex-start;gap:34px;
  min-width:540px;padding:22px 26px;
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:0 18px 38px rgba(22,35,31,.16);z-index:80;
}
.main-nav .nav-cats:hover .nav-cats-panel,
.main-nav .nav-cats.open .nav-cats-panel{display:flex;}
.main-nav .nav-cats-column{min-width:130px;}
.main-nav .nav-cats-group{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--font-mono);font-size:.74rem;text-transform:uppercase;
  letter-spacing:.09em;color:var(--gold-deep);text-decoration:none;margin-bottom:10px;
}
.main-nav .nav-cats-group .ui-icon{width:15px;height:15px;}
.main-nav .nav-cats-group:hover{text-decoration:underline;}
.main-nav .nav-cats-list{
  display:flex;flex-direction:column;gap:0;list-style:none;margin:0;padding:0;
}
.main-nav .nav-cats-list a{
  display:block;padding:6px 0;font-size:.88rem;color:var(--ink);text-decoration:none;white-space:nowrap;
}
.main-nav .nav-cats-list a:hover{color:var(--gold-deep);}

/* Mobile nav drawer */
.mobile-nav{
  display:none;
  position:fixed;inset:0;z-index:200;
  background:rgba(22,35,31,0.55);
}
.mobile-nav.open{display:block;}
.mobile-nav-panel{
  position:absolute;top:0;left:0;bottom:0;width:min(300px,84vw);
  background:var(--paper);padding:20px 24px 24px;
  overflow-y:auto;border-radius:0 20px 20px 0;
  box-shadow:0 24px 60px rgba(22,35,31,.25);
}
.mobile-nav-close{
  display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;
  background:rgba(22,35,31,.06);border:none;float:right;margin-bottom:20px;color:var(--ink);cursor:pointer;
}
.mobile-nav-close .ui-icon{width:20px;height:20px;}
.mobile-nav-panel ul{display:flex;flex-direction:column;gap:0;}
.mobile-nav-panel li a{
  display:block;padding:14px 0;font-size:1.05rem;font-weight:500;
  border-bottom:1px solid var(--line);
}

/* ── Buttons ─────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 26px;border-radius:var(--radius);
  font-weight:600;font-size:.92rem;
  border:1px solid transparent;
  transition:transform .15s ease,box-shadow .15s ease;
  cursor:pointer;
  white-space:nowrap;
}
.btn-primary{background:var(--ink);color:var(--paper);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-tag);}
.btn-outline{background:transparent;border-color:var(--ink);color:var(--ink);}
.btn-outline:hover{background:var(--ink);color:var(--paper);}
.btn-gold{background:var(--gold);color:var(--ink);}
.btn-gold:hover{background:var(--gold-deep);color:var(--white);}
.btn-block{width:100%;}
.btn-sm{padding:8px 16px;font-size:.8rem;}

/* ── Ticket tag ──────────────────────────────────────────── */
.ticket{
  position:relative;
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);
  background:var(--paper);
  border:1.5px dashed var(--ink);
  border-radius:3px;
  padding:6px 14px 6px 20px;
  font-size:.85rem;font-weight:600;
  box-shadow:var(--shadow-tag);
}
.ticket::before{
  content:"";position:absolute;left:6px;top:50%;transform:translateY(-50%);
  width:7px;height:7px;border-radius:50%;
  background:var(--paper);border:1.5px solid var(--ink);
}
.ticket.on-sale{border-color:var(--rust);color:var(--rust);}
.ticket.on-sale::before{border-color:var(--rust);}

/* ── Hero ────────────────────────────────────────────────── */
.hero{padding:56px 0 72px;position:relative;overflow:hidden;}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;}
.hero-copy p.lede{font-size:1.05rem;max-width:46ch;}
.hero-actions{display:flex;gap:14px;margin-top:1.6em;flex-wrap:wrap;}
.hero-stats{display:flex;gap:24px;margin-top:2.4em;flex-wrap:wrap;}
.hero-stats div{font-family:var(--font-mono);}
.hero-stats strong{display:block;font-size:1.4rem;color:var(--ink);}
.hero-stats span{font-size:.72rem;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.08em;}

.hero-stack{position:relative;height:400px;}
.stack-card{
  position:absolute;width:220px;background:var(--white);
  border:1px solid var(--line);border-radius:8px;overflow:hidden;
  box-shadow:0 18px 34px rgba(22,35,31,0.14);
  transition:transform .35s ease;
}
.stack-card:hover{transform:translateY(-6px) rotate(0deg) !important;}
.stack-card img{height:140px;object-fit:cover;width:100%;}
.stack-card .sc-body{padding:10px 12px 14px;}
.stack-card .sc-body h4{font-family:var(--font-body);font-size:.88rem;margin:0 0 6px;font-weight:600;}
.stack-card:nth-child(1){top:0;left:8%;transform:rotate(-6deg);z-index:3;}
.stack-card:nth-child(2){top:55px;left:40%;transform:rotate(4deg);z-index:2;}
.stack-card:nth-child(3){top:200px;left:4%;transform:rotate(3deg);z-index:1;}

/* ── Section scaffolding ─────────────────────────────────── */
.section{padding:var(--section-v) 0;}
.section-alt{background:var(--paper-dim);}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:36px;gap:20px;flex-wrap:wrap;}
.section-head p{margin:0;max-width:48ch;}

/* ── Category strip ──────────────────────────────────────── */
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.cat-card{
  border:1px solid var(--line);border-radius:8px;background:var(--white);
  padding:22px 18px;text-align:left;transition:border-color .2s,transform .2s;
}
.cat-card:hover{border-color:var(--gold);transform:translateY(-4px);}
.cat-card .cat-icon{font-size:1.5rem;margin-bottom:10px;display:block;}
.cat-card h4{font-size:.95rem;margin-bottom:2px;}
.cat-card span{font-family:var(--font-mono);font-size:.72rem;color:var(--ink-soft);}

/* ── Product grid & card ─────────────────────────────────── */
.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.product-card{
  background:var(--white);border:1px solid var(--line);border-radius:8px;
  overflow:hidden;display:flex;flex-direction:column;
  transition:box-shadow .2s,transform .2s;
}
.product-card:hover{box-shadow:0 14px 28px rgba(22,35,31,0.1);transform:translateY(-4px);}
.product-media{position:relative;aspect-ratio:1/1;background:var(--paper-dim);overflow:hidden;}
.product-media img{width:100%;height:100%;object-fit:cover;}
.product-badge{position:absolute;top:10px;left:10px;}
.product-body{padding:14px 14px 16px;display:flex;flex-direction:column;gap:8px;flex:1;}
.product-cat{font-family:var(--font-mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--sage);}
.product-body h4{font-size:.95rem;margin:0;}
.product-foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:8px;}
.price-old{font-family:var(--font-mono);font-size:.76rem;color:var(--ink-soft);text-decoration:line-through;margin-right:6px;}
.add-btn{
  background:var(--ink);color:var(--paper);border:none;border-radius:50%;
  width:36px;height:36px;font-size:1.1rem;display:flex;align-items:center;justify-content:center;
  transition:background .2s;flex-shrink:0;
}
.add-btn:hover{background:var(--gold-deep);}

/* Filter bar */
.filter-bar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:32px;}
.filter-chip{
  font-family:var(--font-mono);font-size:.76rem;
  border:1px solid var(--line);border-radius:20px;padding:7px 14px;background:var(--white);
  cursor:pointer;
}
.filter-chip.active{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.filter-chip:hover:not(.active){border-color:var(--gold);}

/* ── Value strip ─────────────────────────────────────────── */
.value-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:32px 0;}
.value-item{display:flex;gap:14px;align-items:flex-start;}
.value-item .vi-icon{font-size:1.3rem;flex-shrink:0;}
.value-item h4{font-size:.92rem;margin-bottom:2px;}
.value-item p{margin:0;font-size:.84rem;}

/* ── Newsletter ──────────────────────────────────────────── */
.newsletter{
  background:var(--ink);color:var(--paper);border-radius:12px;
  padding:44px 36px;
  display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:center;
}
.newsletter h2{color:var(--paper);}
.newsletter p{color:#C9CFC9;}
.newsletter form{display:flex;gap:10px;flex-wrap:wrap;}
.newsletter input{
  flex:1;min-width:180px;
  padding:12px 14px;border-radius:var(--radius);
  border:1px solid #3A463F;background:#1E2B25;color:var(--paper);
}
.newsletter input::placeholder{color:#8A948E;}

/* ── Footer ──────────────────────────────────────────────── */
.site-footer{background:var(--paper-dim);border-top:1px solid var(--line);padding:52px 0 24px;margin-top:0;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:28px;margin-bottom:36px;}
.footer-grid h5{font-family:var(--font-mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px;}
.footer-grid ul li{margin-bottom:8px;}
.footer-grid ul a{font-size:.88rem;color:var(--ink-soft);}
.footer-grid ul a:hover{color:var(--gold-deep);}
.footer-bottom{display:flex;justify-content:space-between;padding-top:20px;border-top:1px solid var(--line);font-size:.78rem;color:var(--ink-soft);flex-wrap:wrap;gap:10px;}

/* ── Breadcrumb ──────────────────────────────────────────── */
.breadcrumb{font-family:var(--font-mono);font-size:.76rem;color:var(--ink-soft);padding:20px 0;}
.breadcrumb a:hover{color:var(--gold-deep);}

/* ── Page hero (inner pages) ─────────────────────────────── */
.page-hero{padding:28px 0 44px;border-bottom:1px solid var(--line);}
.page-hero p{max-width:60ch;}

/* ── Product detail ──────────────────────────────────────── */
.pd-grid{display:grid;grid-template-columns:.9fr 1fr;gap:44px;padding:36px 0 72px;align-items:start;}
.pd-gallery{grid-column:1;min-width:0;}
@media(min-width:981px){
  .pd-gallery{position:sticky;top:84px;}
}
.pd-gallery-thumbs{display:flex;gap:10px;flex-wrap:wrap;}
.pd-gallery-thumb{width:64px;height:64px;border-radius:6px;border:1px solid var(--line);background-size:cover;background-position:center;cursor:pointer;transition:border-color .15s;}
.pd-gallery-thumb:hover{border-color:var(--ink-soft);}
.pd-gallery-thumb.active{border-color:var(--gold);}
.pd-info{min-width:0;}
.pd-gallery-main{border-radius:10px;overflow:hidden;border:1px solid var(--line);aspect-ratio:1/1;background:var(--paper-dim);margin-bottom:12px;}
.pd-gallery-main img{width:100%;height:100%;object-fit:cover;}
.pd-thumbs{display:flex;gap:10px;flex-wrap:wrap;}
.pd-thumbs img{width:64px;height:64px;object-fit:cover;border-radius:6px;border:1px solid var(--line);cursor:pointer;}
.pd-thumbs img.active{border-color:var(--gold);}
.pd-info .product-cat{margin-bottom:10px;display:block;}
.pd-price-row{display:flex;align-items:center;gap:14px;margin:16px 0 20px;flex-wrap:wrap;}
.pd-price{font-family:var(--font-mono);font-size:1.5rem;font-weight:600;}
.pd-desc{border-top:1px solid var(--line);padding-top:18px;margin-top:20px;}
.qty-row{display:flex;align-items:center;gap:16px;margin:20px 0;flex-wrap:wrap;}
.qty-control{display:flex;align-items:center;border:1px solid var(--line);border-radius:var(--radius);}
.qty-control button{background:none;border:none;width:38px;height:40px;font-size:1.1rem;}
.qty-control input{width:44px;text-align:center;border:none;background:none;font-family:var(--font-mono);}
.pd-actions{display:flex;gap:12px;flex-wrap:wrap;}
.pd-meta{margin-top:28px;border-top:1px solid var(--line);padding-top:18px;font-size:.86rem;}
.pd-meta li{margin-bottom:8px;color:var(--ink-soft);}

/* ── Cart page ───────────────────────────────────────────── */
.cart-grid{display:grid;grid-template-columns:1fr .55fr;gap:36px;padding:20px 0 72px;align-items:start;}
.cart-line{
  display:grid;
  grid-template-columns:76px 1fr auto auto;
  gap:14px;align-items:center;
  padding:16px 0;border-bottom:1px solid var(--line);
}
.cart-line img{width:76px;height:76px;object-fit:cover;border-radius:6px;border:1px solid var(--line);flex-shrink:0;}
.cart-line h4{margin:0 0 4px;font-size:.92rem;}
.cart-line .cl-meta{font-family:var(--font-mono);font-size:.72rem;color:var(--ink-soft);}
.remove-btn{
  font-family:var(--font-mono);font-size:.75rem;color:var(--rust);
  background:none;border:none;cursor:pointer;padding:0;
  margin-top:6px;display:inline-block;text-align:left;
}
.remove-btn:hover{text-decoration:underline;}
.summary-box{
  border:1px solid var(--line);border-radius:8px;padding:24px;
  background:var(--white);
  position:sticky;
  top:80px; /* matches sticky header height */
}
.summary-row{display:flex;justify-content:space-between;margin-bottom:12px;font-size:.9rem;}
.summary-row.total{font-weight:700;font-size:1.05rem;border-top:1px solid var(--line);padding-top:12px;margin-top:12px;}
.promo-row{display:flex;gap:8px;margin:16px 0;}
.promo-row input{flex:1;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius);}
.empty-state{text-align:center;padding:60px 20px;}
.empty-state .es-icon{font-size:2.4rem;margin-bottom:14px;}

/* ── Checkout ────────────────────────────────────────────── */
.checkout-grid{display:grid;grid-template-columns:1.1fr .8fr;gap:44px;padding:20px 0 72px;align-items:start;}
.form-field{margin-bottom:14px;}
.form-field label{display:block;font-size:.82rem;font-weight:600;margin-bottom:5px;}
.form-field input,.form-field select,.form-field textarea{
  width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--white);font-size:.9rem;
  transition:border-color .2s;
}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{
  border-color:var(--sage);outline:none;
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.form-section{margin-bottom:30px;}
.form-section h3{font-size:1rem;margin-bottom:14px;}
.checkout-note{background:var(--paper-dim);border:1px dashed var(--line);border-radius:8px;padding:14px 16px;font-size:.82rem;color:var(--ink-soft);margin-top:18px;}

/* ── Auth pages ──────────────────────────────────────────── */
.auth-wrap{max-width:440px;margin:0 auto;padding:48px 20px 80px;}
.auth-card{border:1px solid var(--line);border-radius:10px;padding:32px 28px;background:var(--white);}
.auth-switch{text-align:center;margin-top:20px;font-size:.9rem;color:var(--ink-soft);}
.auth-switch a{color:var(--gold-deep);font-weight:600;}
.divider-or{display:flex;align-items:center;gap:12px;margin:20px 0;color:var(--ink-soft);font-size:.8rem;}
.divider-or::before,.divider-or::after{content:"";flex:1;height:1px;background:var(--line);}
.social-row{display:flex;flex-direction:column;gap:10px;}

/* ── Customer account ───────────────────────────────────── */
.account-layout{display:grid;grid-template-columns:230px 1fr;gap:36px;padding:34px 0 80px;align-items:start;}
.account-sidebar{border:1px solid var(--line);border-radius:8px;background:var(--white);padding:10px;}
.account-sidebar a{display:block;padding:12px 13px;border-radius:var(--radius);font-size:.88rem;font-weight:600;}
.account-sidebar a:hover,.account-sidebar a.active{background:var(--paper-dim);color:var(--gold-deep);}
.account-sidebar button{margin-top:10px;}
.account-content{min-width:0;}
.account-card{border:1px solid var(--line);border-radius:8px;background:var(--white);padding:24px;margin-bottom:20px;}
.account-card h2{font-size:1.35rem;margin-bottom:5px;}
.account-card h3{font-size:1rem;margin:0 0 14px;}
.account-section-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:4px;}
.account-section-heading .eyebrow{margin-bottom:4px;}
.account-section-heading h2{margin-bottom:0;}
.account-status{padding:5px 9px;border:1px solid var(--sage);border-radius:999px;color:#477044;font-family:var(--font-mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;}
.account-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:22px;}
.account-meta div{border-top:1px solid var(--line);padding-top:10px;}
.account-meta dt{font-family:var(--font-mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);}
.account-meta dd{margin:4px 0 0;font-size:.92rem;overflow-wrap:anywhere;}
.address-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
.address-card{border:1px solid var(--line);border-radius:6px;padding:16px;background:var(--paper);}
.address-card p{margin:0;font-size:.88rem;line-height:1.55;}
.account-message{padding:14px 16px;border:1px dashed var(--line);border-radius:6px;background:var(--paper-dim);font-size:.88rem;color:var(--ink-soft);}
.address-grid + .account-message{margin-top:14px;}
.account-next-steps{background:var(--paper-dim);}
.account-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px;}
.account-error{border-color:#d8a49a;background:#fff6f3;color:var(--rust);}
.account-form{margin-top:20px;}
.account-form .form-field{margin-bottom:14px;}
.field-hint{font-weight:400;color:var(--ink-soft);}
.account-readonly{padding:11px 13px;background:var(--paper-dim);border:1px solid var(--line);border-radius:var(--radius);margin:0;}
.form-message{min-height:1.4em;margin:12px 0 0;font-size:.84rem;color:var(--rust);}
.form-message.is-success{color:#477044;}
.orders-list{display:grid;gap:10px;margin-top:18px;}
.order-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 16px;align-items:center;border:1px solid var(--line);border-radius:6px;padding:14px 16px;background:var(--paper);}
.order-row h3{margin:0;font-size:1rem;}
.order-row p{grid-column:1;margin:0;font-size:.82rem;}
.order-row .btn{grid-column:2;grid-row:1 / span 2;}
.account-pagination{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:18px;}
.account-pagination span{font-family:var(--font-mono);font-size:.78rem;color:var(--ink-soft);}
.order-details{margin-top:18px;padding:18px;border:1px solid var(--line);border-radius:6px;background:var(--paper-dim);}
.order-details h3{margin-bottom:6px;}
.order-details p{font-size:.84rem;}
.order-details ul{list-style:disc;margin:0 0 0 18px;color:var(--ink-soft);}
.address-card{position:relative;}
.address-card.is-default{border-color:var(--sage);}
.address-default{display:inline-block;margin-bottom:10px;padding:3px 7px;border:1px solid var(--sage);border-radius:999px;color:#477044;font-family:var(--font-mono);font-size:.65rem;text-transform:uppercase;letter-spacing:.05em;}
.address-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;}

/* ── About / Contact ─────────────────────────────────────── */
.about-hero{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;padding:44px 0 64px;}
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding:36px 0;border-top:1px solid var(--line);}
.stats-row strong{font-family:var(--font-display);font-size:2rem;display:block;}
.stats-row span{font-family:var(--font-mono);font-size:.72rem;text-transform:uppercase;color:var(--ink-soft);}
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.team-card{text-align:center;}
.team-card img{border-radius:8px;margin-bottom:12px;aspect-ratio:1/1;object-fit:cover;}
.team-card h4{font-size:.92rem;margin-bottom:2px;}
.team-card span{font-family:var(--font-mono);font-size:.72rem;color:var(--sage);}

.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;padding:20px 0 72px;}
.contact-info-card{border:1px solid var(--line);border-radius:10px;padding:22px;margin-bottom:14px;background:var(--white);}
.contact-info-card h4{font-size:.92rem;margin-bottom:4px;}
.contact-info-card p{margin:0;font-size:.86rem;}
textarea{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:var(--radius);resize:vertical;min-height:120px;font-family:var(--font-body);}

/* ── Toast ───────────────────────────────────────────────── */
.toast{
  position:fixed;bottom:20px;right:16px;
  background:var(--ink);color:var(--paper);
  padding:12px 18px;border-radius:8px;font-size:.86rem;
  transform:translateY(120%);opacity:0;
  transition:transform .3s ease,opacity .3s ease;
  z-index:200;max-width:calc(100vw - 32px);
}
.toast.show{transform:translateY(0);opacity:1;}

/* ── Responsive: 1024px (tablet landscape) ───────────────── */
@media(max-width:1024px){
  .product-grid{grid-template-columns:repeat(3,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr 1fr;}
}

@media(max-width:1100px){
  .site-header .header-bar{gap:16px;}
}

/* ── Responsive: 980px (tablet portrait) ────────────────── */
@media(max-width:980px){
  :root{ --section-v:52px; }

  .hero .wrap{grid-template-columns:1fr;}
  .hero-stack{
    height:260px;
    margin-top:32px;
    position:relative;
  }
  .stack-card{width:180px;}
  .stack-card img{height:110px;}
  .stack-card:nth-child(1){left:2%;}
  .stack-card:nth-child(2){left:36%;}
  .stack-card:nth-child(3){top:160px;left:2%;}

  .pd-grid{grid-template-columns:1fr;gap:28px;padding:24px 0 52px;}
  .cart-grid{grid-template-columns:1fr;}
  .checkout-grid{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr;}
  .about-hero{grid-template-columns:1fr;}
  .newsletter{grid-template-columns:1fr;}

  .cat-grid{grid-template-columns:repeat(2,1fr);}
  .product-grid{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .value-strip{grid-template-columns:repeat(2,1fr);}
  .stats-row{grid-template-columns:repeat(2,1fr);}
  .team-grid{grid-template-columns:repeat(2,1fr);}

  .summary-box{position:static;}
}

/* ── Responsive: 680px (mobile landscape / large phones) ─── */
@media(max-width:680px){
  :root{ --section-v:40px; }
  .wrap{padding:0 16px;}
  .site-header .header-bar{min-height:68px;gap:12px;padding:10px 16px;}

  .main-nav{display:none;}
  .header-actions .btn-sm{display:none;}
  .nav-toggle{display:inline-flex;}

  .hero{padding:36px 0 48px;}
  .hero-stack{display:none;} /* hidden on small mobile — text-only hero */

  .cat-grid,.product-grid,.value-strip,.stats-row,.team-grid{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;}

  .form-row{grid-template-columns:1fr;}

  .cart-line{
    grid-template-columns:60px 1fr;
    grid-template-rows:auto auto;
    gap:10px;
  }
  .cart-line img{width:60px;height:60px;}
  /* Price and remove move to second row, spanning from col 2 */
  .cart-line > .ticket{grid-column:2;}
  .cart-line > .remove-btn{grid-column:2;}

  .newsletter{padding:28px 20px;}
  .newsletter form{flex-direction:column;}
  .newsletter .btn{width:100%;}

  .checkout-grid{padding:16px 0 48px;}
  .auth-wrap{padding:32px 16px 60px;}

  .pd-grid{padding:16px 0 48px;}
}

/* ── Responsive: 480px (small phones) ───────────────────── */
@media(max-width:480px){
  .cat-grid,.product-grid{grid-template-columns:repeat(2,1fr);gap:12px;}
  .footer-grid{grid-template-columns:1fr;}
  .value-strip{grid-template-columns:1fr;}
  .stats-row{grid-template-columns:repeat(2,1fr);}
  .team-grid{grid-template-columns:repeat(2,1fr);}

  .hero-stats{gap:16px;}
  .hero-actions .btn{padding:11px 18px;font-size:.86rem;}
  .section-head{flex-direction:column;align-items:flex-start;}
  .section-head .btn-sm{align-self:flex-start;}

  .cart-grid{gap:20px;}
  .summary-box{padding:18px;}
  .auth-card{padding:24px 18px;}
}

/* ── Print ───────────────────────────────────────────────── */
@media print{
  .site-header,.nav-toggle,.toast,.btn,.add-btn{display:none !important;}
  .wrap{padding:0;}
}

/* Skeleton loading */
.skeleton{background:linear-gradient(90deg,var(--paper-dim) 25%,var(--line) 50%,var(--paper-dim) 75%);background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:8px;}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.skeleton-card{min-height:280px;border-radius:8px;}
@media(prefers-reduced-motion:reduce){.skeleton{animation:none;background:var(--paper-dim);}}

/* ===== Variant selection (product page) ===== */
.variant-section{margin:0 0 14px;}
.variant-section + .variant-section{margin-top:0;}
.variant-label{
  display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--font-mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--ink-soft);margin-bottom:8px;
}
.variant-label strong{color:var(--ink);font-weight:600;text-transform:none;letter-spacing:0;}
.variant-options{display:flex;flex-wrap:wrap;gap:10px;}
.variant-chip{
  position:relative;appearance:none;border:1px solid var(--line);
  background:var(--swatch, var(--white));
  border-radius:50%;width:38px;height:38px;cursor:pointer;flex-shrink:0;
  transition:transform .15s, box-shadow .15s, border-color .15s;padding:0;
}
/* Chips without a usable colour value keep the visible name and go pill-shaped. */
.variant-chip.has-name{
  border-radius:999px;width:auto;min-width:38px;height:38px;padding:0 14px;
  font-family:var(--font-mono);font-size:.78rem;color:var(--ink);
}
.variant-chip:hover{transform:scale(1.08);}
.variant-chip[aria-pressed="true"]{
  border-color:var(--ink);box-shadow:0 0 0 2px var(--paper), 0 0 0 3.5px var(--ink);
}
.variant-chip.is-unavailable{opacity:.32;cursor:not-allowed;}
.variant-chip.is-unavailable::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:linear-gradient(to top left, transparent calc(50% - 1px), var(--ink-soft) 50%, transparent calc(50% + 1px));
}
.variant-chip.is-unavailable:hover{transform:none;}
.size-chip{
  appearance:none;border:1px solid var(--line);background:var(--white);color:var(--ink);
  font-family:var(--font-mono);font-size:.8rem;border-radius:20px;
  padding:9px 16px;cursor:pointer;transition:border-color .15s, background .15s, color .15s;
}
.size-chip:hover{border-color:var(--ink);}
.size-chip[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.size-chip.is-unavailable{
  color:var(--ink-soft);background:var(--paper-dim);border-style:dashed;
  cursor:not-allowed;text-decoration:line-through;
}
.size-chip.is-unavailable:hover{border-color:var(--line);}
.variant-hint{font-size:.8rem;color:var(--ink-soft);margin:6px 0 0;}
.variant-unavailable{font-size:.85rem;color:#B4232A;margin:8px 0 0;}
.line-variant{display:block;font-size:.78rem;color:var(--ink-soft);margin-top:2px;}

/* ── Homepage product sections (hardcoded — edit HOME_SECTIONS in js/home-products.js) ── */
.hp-section{padding:56px 0 8px;}
.hp-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px;}
.hp-head h2{font-family:var(--font-display);font-size:1.9rem;margin:0;}
.hp-sub{color:var(--ink-soft);margin:6px 0 0;}
.hp-viewall{font-weight:600;color:var(--gold-deep);white-space:nowrap;}
.hp-grid{display:grid;gap:22px;}
.hp-cols-2{grid-template-columns:repeat(2,1fr);}
.hp-cols-3{grid-template-columns:repeat(3,1fr);}
.hp-cols-4{grid-template-columns:repeat(4,1fr);}
.hp-carousel-wrap{position:relative;}
.hp-carousel{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 4px 14px;scrollbar-width:thin;}
.hp-carousel .product-card{flex:0 0 270px;scroll-snap-align:start;}
.hp-arrow{position:absolute;top:36%;z-index:2;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--white);color:var(--ink);font-size:1.4rem;line-height:1;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.12);display:grid;place-items:center;}
.hp-arrow:hover{background:var(--ink);color:var(--white);border-color:var(--ink);}
.hp-prev{left:-14px;}
.hp-next{right:-14px;}
.hp-marquee{overflow:hidden;padding:4px 0 10px;}
.hp-marquee-track{display:flex;gap:22px;width:max-content;animation:hp-scroll 30s linear infinite;}
.hp-marquee-track .product-card{flex:0 0 270px;}
.hp-marquee:hover .hp-marquee-track{animation-play-state:paused;}
@keyframes hp-scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media(max-width:960px){
  .hp-cols-3,.hp-cols-4{grid-template-columns:repeat(2,1fr);}
  .hp-section{padding:40px 0 4px;}
}

/* ── Homepage content blocks (banner / text / image) ───────────── */
.hb-banner{position:relative;min-height:340px;border-radius:18px;overflow:hidden;background-size:cover;background-position:center;display:flex;align-items:center;padding:56px 48px;}
.hb-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,26,24,.72),rgba(20,26,24,.28));}
.hb-content{position:relative;z-index:1;max-width:560px;color:#FFFDF8;}
.hb-center .hb-content{margin:0 auto;text-align:center;}
.hb-left .hb-content{margin:0;text-align:left;}
.hb-banner h2{font-family:var(--font-display);font-size:2.2rem;margin:0 0 10px;color:#FFFDF8;}
.hb-banner p{margin:0 0 20px;font-size:1.02rem;color:rgba(255,253,248,.92);}
.hb-eyebrow{color:var(--gold) !important;}
.hb-text{max-width:760px;margin:0 auto;}
.hb-text.hb-left{margin:0;}
.hb-text h2{font-family:var(--font-display);font-size:1.9rem;margin:0 0 12px;}
.hb-text p{color:var(--ink-soft);line-height:1.7;margin:0 0 12px;}
.hb-image img{display:block;width:100%;height:auto;border-radius:18px;}
.hb-image-link{display:block;transition:transform .25s ease;}
.hb-image-link:hover{transform:scale(1.01);}
.hb-spacer{width:100%;}

@media (max-width:700px){
  .hs-carousel .product-card,.hs-marquee-track .product-card{flex-basis:200px;}
  .hs-prev{left:2px;}
  .hs-next{right:2px;}
  .hs-grid-cols-4{grid-template-columns:repeat(2,1fr);}
  .hs-grid-cols-3{grid-template-columns:repeat(2,1fr);}
  .hb-banner{min-height:260px;padding:36px 24px;}
  .hb-banner h2{font-size:1.6rem;}
}

/* ================================================================
   Homepage v4 — new block styles + responsive overhaul
   (appended; later rules override earlier ones)
   ================================================================ */

/* ---- Banner: background lives in its own layer so blur never
        touches the text. Supports image or video background. ---- */
.hb-banner{background:none;padding:clamp(28px,6vw,56px) clamp(20px,6vw,48px);}
.hb-bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;}
.hb-bg-video{width:100%;height:100%;object-fit:cover;display:block;}
.hb-blur{filter:blur(14px);transform:scale(1.08);}
.hb-overlay{background:#141a18;} /* strength comes from inline opacity */
.hb-content{max-width:620px;}
.hb-banner h2{font-size:clamp(1.6rem,4.6vw,2.3rem);}
.hb-banner p{font-size:clamp(.95rem,2.4vw,1.05rem);}
.hb-right .hb-content{margin:0 0 0 auto;text-align:right;}

/* Banner heights */
.hb-banner.hb-tall{min-height:560px;}
section.section.hb-hero-section{padding-top:0;padding-bottom:0;}
.hb-banner.hb-hero{min-height:calc(100vh - 72px);min-height:calc(100svh - 72px);border-radius:0;}
.hb-hero .hb-content{max-width:720px;}
.hb-hero h2{font-size:clamp(2rem,7vw,3.4rem);}

/* Outline-light button (banner button style option) */
.btn-outline-light{border:1.5px solid rgba(255,253,248,.85);color:#FFFDF8;background:transparent;}
.btn-outline-light:hover{background:rgba(255,253,248,.14);color:#FFFDF8;}

/* ---- Video block ---- */
.hb-video{position:relative;aspect-ratio:16/9;background:#0c0e0d;border-radius:18px;overflow:hidden;}
.hb-video video{width:100%;height:100%;object-fit:cover;display:block;}

/* ---- Text block type scale ---- */
.hb-text h2{font-size:clamp(1.5rem,4vw,1.9rem);}

/* ---- "View all" buttons: proper touch targets on mobile ---- */
@media(max-width:640px){
  .section-head{gap:12px;}
  .section-head .hb-viewall{
    flex:1 1 100%;
    min-height:46px;
    display:inline-flex;align-items:center;justify-content:center;
    font-size:.9rem;
    padding:12px 20px;
  }
}

/* ---- Product cards: comfortable on small phones ---- */
@media(max-width:1024px){
  .hs-grid-cols-4{grid-template-columns:repeat(3,1fr);}
}
@media(max-width:700px){
  /* arrows off on touch — swipe with scroll-snap instead */
  .hs-arrow{display:none;}
  .hs-carousel{scroll-padding:0 16px;}
  .hs-grid-cols-4,.hs-grid-cols-3{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:480px){
  .add-btn{width:40px;height:40px;}
  .product-grid{gap:12px;}
}

/* ---- Banner content stacks cleanly on phones ---- */
@media(max-width:560px){
  .hb-banner.hb-tall{min-height:420px;}
  .hb-banner .hb-content .btn{width:100%;}
  .hb-right .hb-content{text-align:left;margin:0;}
}

/* ═══════════════════════════════════════════════════════════════════
   Permanent site hero — hardcoded in index.html (like header/footer).
   A Hero-height banner block placed FIRST in Dashboard → Homepage
   replaces it (campaign takeover). v5-hero, 2026-09-26.
   ═══════════════════════════════════════════════════════════════════ */
.site-hero{position:relative;overflow:hidden;background:var(--ink);color:var(--paper);min-height:clamp(560px,88vh,820px);min-height:clamp(560px,88svh,820px);display:flex;align-items:center;}
.site-hero-bg{position:absolute;inset:-12%;background:radial-gradient(900px 520px at 78% 16%,rgba(201,154,46,.30),transparent 60%),radial-gradient(720px 520px at 10% 88%,rgba(124,148,115,.22),transparent 60%),linear-gradient(160deg,#1C2C26 0%,#16231F 55%,#0F1815 100%);animation:heroDrift 26s ease-in-out infinite alternate;}
.site-hero-bg::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(250,247,240,.055) 1px,transparent 1.5px);background-size:22px 22px;}
@keyframes heroDrift{from{transform:scale(1) translate(0,0);}to{transform:scale(1.12) translate(-2%,2%);}}
.site-hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;width:100%;padding-top:72px;padding-bottom:96px;}
.site-hero-eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);border:1px solid rgba(201,154,46,.45);border-radius:999px;padding:9px 18px;margin-bottom:24px;background:rgba(201,154,46,.08);}
.pulse-dot{width:8px;height:8px;border-radius:50%;background:var(--gold);animation:pulseDot 2.2s ease-in-out infinite;}
@keyframes pulseDot{0%,100%{box-shadow:0 0 0 0 rgba(201,154,46,.55);}50%{box-shadow:0 0 0 8px rgba(201,154,46,0);}}
.site-hero-copy h1{font-family:var(--font-display);font-weight:600;color:var(--paper);font-size:clamp(2.7rem,5.4vw,4.5rem);line-height:1.03;letter-spacing:-.015em;margin:0 0 20px;}
.site-hero-copy h1 em{font-style:italic;font-weight:500;color:var(--gold);}
.site-hero-lede{color:#CFC8B6;font-size:clamp(1rem,1.5vw,1.16rem);line-height:1.65;max-width:46ch;margin:0 0 32px;}
.site-hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:36px;}
.btn-ghost-light{background:transparent;border:1px solid rgba(250,247,240,.55);color:var(--paper);}
.btn-ghost-light:hover{background:var(--paper);color:var(--ink);transform:translateY(-2px);}
.btn-lg{padding:15px 34px;font-size:1rem;}
.site-hero-trust{list-style:none;margin:0;padding:0;display:flex;gap:12px 26px;flex-wrap:wrap;color:#A39D8D;font-size:.87rem;}
.site-hero-trust li{display:flex;align-items:center;gap:9px;}
.site-hero-trust li::before{content:"\2713";color:var(--gold);font-weight:700;font-size:.95rem;}
.site-hero-copy>*{animation:heroRise .9s cubic-bezier(.2,.7,.2,1) both;}
.site-hero-copy>*:nth-child(2){animation-delay:.08s;}
.site-hero-copy>*:nth-child(3){animation-delay:.16s;}
.site-hero-copy>*:nth-child(4){animation-delay:.24s;}
.site-hero-copy>*:nth-child(5){animation-delay:.32s;}
@keyframes heroRise{from{opacity:0;transform:translateY(28px);}to{opacity:1;transform:none;}}
.site-hero-visual{position:relative;height:540px;}
.sh-card{position:absolute;width:min(250px,60vw);border-radius:14px;overflow:hidden;background:linear-gradient(150deg,#24352D,#131E1A);border:1px solid rgba(250,247,240,.14);box-shadow:0 30px 60px rgba(0,0,0,.45);animation:cardFloat 7s ease-in-out infinite;}
.sh-card-1{top:0;left:6%;transform:rotate(-4deg);z-index:1;}
.sh-card-2{top:120px;right:2%;transform:rotate(3deg);animation-delay:-2.3s;z-index:2;}
.sh-card-3{bottom:0;left:32%;transform:rotate(-2deg);animation-delay:-4.6s;z-index:3;}
@keyframes cardFloat{0%,100%{translate:0 0;}50%{translate:0 -12px;}}
.sh-card img{display:block;width:100%;height:300px;object-fit:cover;}
.sh-ph{display:none;height:300px;align-items:center;justify-content:center;font-family:var(--font-display);font-size:5rem;color:rgba(201,154,46,.55);}
.sh-noimg .sh-ph{display:flex;}
.sh-tag{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;background:rgba(250,247,240,.97);}
.sh-tag strong{font-size:.83rem;font-weight:600;color:var(--ink);}
.sh-tag span{font-family:var(--font-mono);font-size:.7rem;font-weight:600;background:var(--gold);color:var(--ink);padding:5px 11px;border-radius:999px;letter-spacing:.04em;}
.site-hero-wave{position:absolute;left:0;right:0;bottom:-1px;height:72px;z-index:1;pointer-events:none;}
.site-hero-wave svg{display:block;width:100%;height:100%;}
/* Calm the hero when it is scrolled out of view. The infinite background drift
   and floating cards keep the GPU busy on every scroll frame even when the hero
   is off-screen, which can make the sticky header paint stretched on the home
   page. Killing the animations off-screen keeps scrolling smooth everywhere. */
.site-hero.is-offscreen .site-hero-bg,
.site-hero.is-offscreen .sh-card,
.site-hero.is-offscreen .pulse-dot{animation:none;}
@media(max-width:960px){
  /* M3 fix: stable hero height on mobile — svh doesn't move when Chrome's URL bar collapses */
  .site-hero{min-height:clamp(480px,88vh,720px);min-height:clamp(480px,88svh,720px);}
  .site-hero-inner{grid-template-columns:1fr;gap:40px;padding-top:56px;padding-bottom:88px;}
  .site-hero-visual{height:auto;display:grid;grid-auto-flow:column;grid-auto-columns:min(230px,64vw);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 4px 20px;-webkit-overflow-scrolling:touch;}
  .sh-card{position:relative;top:auto;right:auto;bottom:auto;left:auto;transform:none;scroll-snap-align:start;animation:none;width:auto;}
  .sh-card img,.sh-ph{height:230px;}
}
@media(max-width:560px){
  .site-hero-actions .btn{flex:1 1 100%;}
  .site-hero-trust{gap:10px 18px;font-size:.82rem;}
  .site-hero-wave{height:48px;}
}
@media(prefers-reduced-motion:reduce){
  .site-hero-bg,.sh-card,.pulse-dot,.site-hero-copy>*{animation:none !important;}
}

/* ── Homepage: trust badges strip ─────────────────────────────── */
.hp-trust{background:var(--ink);color:var(--paper);padding:14px 0;}
.hp-trust-row{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;}
.hp-trust-item{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;letter-spacing:.02em;}
.hp-trust-icon{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:1.5px solid var(--paper);border-radius:50%;font-size:14px;flex:0 0 auto;}

/* ── Homepage: shop-by-category tiles ─────────────────────────── */
.hp-cats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.hp-cat-tile{position:relative;display:block;border-radius:14px;overflow:hidden;aspect-ratio:4/3;background:var(--line);}
.hp-cat-tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease;}
.hp-cat-tile:hover img{transform:scale(1.06);}
.hp-cat-label{position:absolute;left:14px;bottom:14px;background:rgba(255,255,255,.94);color:var(--ink);font-weight:700;font-size:14px;padding:8px 16px;border-radius:999px;}

/* ── Homepage: image + text brand block ───────────────────────── */
.hp-imagetext{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;}
.hp-imagetext.hp-flip .hp-imagetext-media{order:2;}
.hp-imagetext-media img{width:100%;height:100%;min-height:320px;object-fit:cover;display:block;}
.hp-imagetext-body{padding:44px 44px 44px 0;}
.hp-flip .hp-imagetext-body{padding:44px 0 44px 44px;}
.hp-imagetext-body h2{font-size:clamp(24px,3vw,34px);margin:10px 0 14px;letter-spacing:-.01em;}
.hp-imagetext-body p{color:var(--muted);line-height:1.65;margin:0 0 22px;}

/* ── Homepage: testimonials ───────────────────────────────────── */
.hp-testimonials{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.hp-quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.hp-quote{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:26px;display:flex;flex-direction:column;gap:12px;}
.hp-stars{color:#d99a2b;letter-spacing:3px;font-size:15px;}
.hp-quote p{font-size:15px;line-height:1.65;margin:0;flex:1;}
.hp-quote-who{display:flex;flex-direction:column;gap:2px;}
.hp-quote-who strong{font-size:14px;}
.hp-quote-who span{font-size:12.5px;color:var(--muted);}

@media(max-width:960px){
  .hp-trust-row{justify-content:flex-start;gap:12px 20px;}
  .hp-trust-item{font-size:12px;}
  .hp-cats{grid-template-columns:repeat(2,1fr);gap:12px;}
  .hp-imagetext{grid-template-columns:1fr;gap:0;}
  .hp-imagetext.hp-flip .hp-imagetext-media{order:0;}
  .hp-imagetext-media img{min-height:220px;}
  .hp-imagetext-body,.hp-flip .hp-imagetext-body{padding:28px 22px;}
  .hp-quotes{grid-template-columns:1fr;}
}

/* One storefront design system, shared by every page. */
:root{--paper:#FAF7F0;--paper-dim:#F1ECDF;--ink:#16231F;--ink-soft:#4A554F;--gold:#C99A2E;--gold-deep:#8B681B;--sage:#7C9473;--rust:#B5533C;--line:#D8D2C4;--white:#FFFFFF;--radius:8px}
body{background:var(--paper);color:var(--ink)}
:where(a,button,input,select,textarea):focus-visible{outline:3px solid var(--gold);outline-offset:3px}
:where(button,input,select,textarea){font-family:var(--font-body)}
.site-header{background:var(--paper);border-bottom:1px solid var(--line)}
.main-nav .nav-cats{align-items:center;gap:0}
.main-nav .nav-cat-link{display:inline-flex;align-items:center;gap:6px;padding:4px 0;color:var(--ink);font-size:.9rem;font-weight:500;text-decoration:none;white-space:nowrap}
.main-nav .nav-cat-link .ui-icon{width:18px;height:18px}
.main-nav .nav-cat-toggle{min-width:26px;min-height:36px;justify-content:center;padding:0 4px;font-size:.8rem}
.main-nav .nav-cat-toggle::after{content:none}
.main-nav .nav-cats:hover .nav-cat-link,.main-nav .nav-cats:focus-within .nav-cat-link{color:var(--gold-deep)}
.main-nav .nav-cats-panel{top:100%;left:-20px;margin-top:0;max-width:min(90vw,760px);background:var(--paper);border-radius:10px}
.main-nav .nav-cats-panel::before{content:"";position:absolute;top:-10px;left:0;right:0;height:10px}
.main-nav .nav-cats-list a{border-radius:4px;padding:8px 10px;margin-left:-10px}
.main-nav .nav-cats-list a:hover,.main-nav .nav-cats-list a:focus-visible{background:var(--paper-dim);color:var(--ink)}
.product-card,.cat-card,.cart-line,.checkout-summary,.order-details,.address-card{border-color:var(--line)}
.product-card:hover,.cat-card:hover{box-shadow:0 12px 28px rgba(22,35,31,.1)}
.btn,.home-button{transition:background-color .18s ease,color .18s ease,transform .18s ease}
.btn:active,.home-button:active{transform:translateY(1px)}
@media(max-width:980px){.main-nav .nav-cats-panel{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn,.home-button{transition:none}}