/** Shopify CDN: Minification failed

Line 2648:1 Unexpected "`"

**/
/* ════════════════════════
   DESIGN SYSTEM
   Heritage Modernism
════════════════════════ */
:root {
  /* Colour palette — B2B-aligned */
  --navy:      #0C1847;
  --navy-d:    #060e28;
  --navy-m:    #1a2a5c;
  --gold:      #D7B56D;
  --gold-d:    #B8954C;
  --gold-l:    #E8D4A8;
  --gold-f:    #e5c279;
  --cream:     #F0DED9;
  --cream-soft:#F6ECE8;
  --cream-bg:  oklch(97% 0.01 60);
  --warm-white:oklch(99% 0.005 60);
  --warm-off:  oklch(96% 0.012 60);
  --ink:       oklch(15% 0.04 260);
  --ink-70:    oklch(15% 0.04 260 / 0.7);
  --ink-50:    oklch(15% 0.04 260 / 0.5);
  --ink-30:    oklch(15% 0.04 260 / 0.3);
  --line:      rgba(12, 24, 71, .08);
  --line-gold: rgba(215, 181, 109, .35);

  /* Legacy aliases for component compatibility */
  --bg:        var(--cream-bg);
  --surface:   var(--warm-white);
  --surf-low:  var(--warm-off);
  --surf-mid:  oklch(94% 0.014 60);
  --surf-high: oklch(91% 0.016 60);
  --outline:   rgba(12,24,71,.08);
  --gold-bdr:  rgba(215,181,109,.3);
  --text:      #1c1b1a;
  --mute:      #b4b4bc;
  --light:     #a1a1ab;
  --error:     #ba1a1a;
  --wa:        #25D366;
  --text-on-navy: oklch(96.5% 0.012 65); /* warm cream for headings on dark navy */

  /* Font stack — matches B2B */
  --cinzel: 'DM Serif Display', serif;
  --serif:  'Cormorant Garamond', 'Georgia', serif;
  --body:   'Inter', -apple-system, 'Helvetica Neue', sans-serif;
  --F1:     var(--cinzel);
  --F2:     var(--serif);
  --F3:     var(--body);

  /* Border radius scale — B2B */
  --r-sm:   10px;
  --r-md:   16px;
  --r-lg:   22px;
  --r-xl:   32px;
  --r-pill: 100px;

  /* Typography scale (Major Third 1.25) */
  --text-xs:      0.8125rem;
  --text-sm:      0.875rem;
  --text-base:    1rem;
  --text-md:      1.25rem;
  --text-lg:      1.563rem;
  --text-xl:      1.953rem;
  --text-2xl:     2.441rem;
  --text-display: clamp(2.75rem, 6vw, 4rem);

  /* Spacing scale (base 8px) */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;

  /* Shadows */
  --shadow-xs:   0 1px 3px rgba(12,24,71,.04);
  --shadow-sm:   0 2px 8px rgba(12,24,71,.06);
  --shadow-md:   0 8px 24px rgba(12,24,71,.09);
  --shadow-lg:   0 20px 50px rgba(12,24,71,.13);
  --shadow-gold: 0 8px 28px rgba(215,181,109,.24);
  --shadow-hover: 0 10px 28px rgba(12,24,71,.08);

  /* Mosaic theme tokens */
  --tint-navy:     #1e3f74;
  --tint-bronze:   #2e1e06;
  --tint-forest:   #1a2a10;
  --tint-slate:    #1c2036;
  --tint-plum:     #280a1e;
  --tint-sage:     #0e2212;
  --tint-sepia:    #2a1a06;
  --tint-sapphire: #112e5c;
  --base-navy:     #0c2050;
  --base-bronze:   #1c1008;
  --base-forest:   #0e1808;
  --base-slate:    #0e1020;
  --base-plum:     #180610;
  --base-sage:     #081808;
  --base-sepia:    #1e1208;
  --base-sapphire: #0a1e48;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--cream-bg);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 400;
  line-height: 1.6;
  overflow-x: hidden;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}
*:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Shared ── */
.s-img img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    border-radius: 10px;
}
h2.sec-ttl {
  font-family: var(--cinzel);
  font-size: clamp(20px, 2.4vw, 25px);
  font-weight: 400;
  color: var(--navy);
  line-height: 1.15;
  letter-spacing: -.01em;
}
.sec-hd {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 28px;
  gap: 16px;
}
.view-all {
  font-family: var(--body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-d);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: gap .2s;
}
.view-all:hover { gap: 9px; }
.wrap {
  max-width: 1400px;
  margin: 0 auto;
  padding-left: var(--section-padding-x);
  padding-right: var(--section-padding-x);
}
.section { padding: var(--section-padding-y) 0; }
.section-cream { background: var(--warm-off); }
.section-navy  { background: var(--navy); }

/* ── ANNOUNCEMENT BAR — static (ticker removed per audit) ── */
.ann {
  background: var(--navy-d);
  padding: 0 28px;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  overflow: hidden;
}
.ann-track {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.ann-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  font-family: var(--body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(240,222,217,.65);
  border-right: 1px solid rgba(215,181,109,.12);
  white-space: nowrap;
  flex-shrink: 0;
}
.ann-hl { color: var(--gold); font-style: normal; }
.ann-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--gold); opacity: .5; flex-shrink: 0; }
.ann-soc {
  display: flex;
  align-items: center;
  gap: 2px;
  padding-left: 18px;
  border-left: 1px solid rgba(215,181,109,.12);
  flex-shrink: 0;
}
.ann-soc-lnk {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(215,181,109,.5);
  text-decoration: none;
  border-radius: 6px;
  transition: color .18s, background .18s;
}
.ann-soc-lnk:hover { color: var(--gold); background: rgba(215,181,109,.08); }

/* ── TOGGLE — B2B mode-bar style ── */
.toggle-bar {
  background: var(--warm-white);
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: center;
  padding: 10px 0;
}
.tw {
  display: inline-flex;
  background: var(--warm-off);
  border: 1.5px solid var(--line-gold);
  border-radius: var(--r-pill);
  padding: 4px;
  gap: 2px;
}
.tb {
  font-family: var(--body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  min-height: 40px;
  padding: 0 28px;
  border-radius: var(--r-pill);
  border: none;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: background .25s, color .25s, box-shadow .25s;
}
.tb.off { background: transparent; color: var(--ink-50); }
.tb.off:hover { background: rgba(12,24,71,.04); color: var(--ink-70); }
.tb.on  { background: var(--navy); color: var(--gold); box-shadow: var(--shadow-sm); }

/* ── NAV — B2B-aligned ── */
nav {
  background: var(--warm-white);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--section-padding-x);
  height: 66px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.nav-brand {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex-shrink: 0;
  text-decoration: none;
}
.nb-name {
  font-family: var(--cinzel);
  font-size: 15px;
  font-weight: 400;
  color: var(--navy);
  letter-spacing: .01em;
  line-height: 1;
}
.nb-tag {
  font-family: var(--serif);
  font-size: 10px;
  font-style: italic;
  color: var(--gold-d);
  letter-spacing: .08em;
}

.nav-cats {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  flex: 1;
  justify-content: center;
}
.nav-cats > li { position: relative; }
.nav-cats > li > a {
  font-family: var(--body);
  font-size: 10px !important;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--navy);
  opacity: 0.75;
  text-decoration: none;
  padding: 8px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  gap: 4px;
  position: relative;
  transition: opacity .2s;
  white-space: nowrap;
}
.nav-cats > li > a::after {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 13px;
  width: 0;
  height: 1.5px;
  background: var(--gold);
  transition: width .2s;
}
.nav-cats > li > a:hover { opacity: 1; }
.nav-cats > li > a:hover::after { width: calc(100% - 26px); }
.nav-arr { font-size: 8px; opacity: .4; transition: transform .2s; display: inline-block; }
.nav-cats > li:hover .nav-arr { transform: rotate(180deg); }
.nav-sale { color: var(--error) !important; opacity: 1 !important; }

/* Mega menu */
.mega {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  background: var(--warm-white);
  border: 1px solid var(--line);
  border-top: 2px solid var(--gold);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: 18px;
  min-width: 420px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s, visibility .2s, transform .2s;
  z-index: 300;
}
.nav-cats > li:hover .mega {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.mega-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px; }
.mega-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: var(--r-sm);
  text-decoration: none;
  transition: background .15s;
  cursor: pointer;
}
.mega-item:hover { background: var(--warm-off); }
.mega-ico {
  width: 34px;
  height: 34px;
  border-radius: var(--r-sm);
  background: var(--warm-off);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.mega-name {
  font-family: var(--body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--navy);
}
.mega-sub {
  font-family: var(--serif);
  font-size: 11px;
  font-style: italic;
  color: var(--light);
  margin-top: 1px;
}

.nav-acts { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.nib {
  width: 38px;
  height: 38px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--warm-off);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  cursor: pointer;
  position: relative;
  text-decoration: none;
  color: var(--navy);
  transition: background .18s, border-color .18s;
}
.nib:hover { background: var(--cream-soft); border-color: var(--line-gold); }
.nbadge {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 16px;
  height: 16px;
  background: var(--gold);
  color: var(--navy);
  border-radius: var(--r-pill);
  font-size: 9px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── HERO ── */
.hero {
  background: var(--navy);
  overflow: hidden;
  min-height: 680px;
}
.hero-inner {
  max-width: 1400px;
  margin: 0 auto;
  min-height: clamp(580px, calc(100vh - 148px), 900px);
  display: flex;
  align-items: center;
  position: relative;
  z-index: 2;
  padding: 0 clamp(28px, 5vw, 72px);
}

/* FULL-WIDTH TEXT COLUMN */
.hero-l {
  width: 100%;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(56px, 7vh, 80px) 0;
}
.hero-kicker {
  font-family: var(--serif);
  font-size: 13px;
  font-style: italic;
  font-weight: 600;
  letter-spacing: .14em;
  color: rgba(215,181,109,.8);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  opacity: 0;
  animation: up .55s .05s ease forwards;
}
.hero-kicker::before { content: ''; display: block; width: 22px; height: 1px; background: var(--gold); }

.hero-h1 {
  opacity: 0;
  animation: up .65s .15s ease forwards;
}
.h1-main {
  font-family: var(--cinzel);
  font-size: 108px;
  font-weight: 400;
  color: var(--warm-white);
  line-height: 1.02;
  letter-spacing: -0.02em;
  display: block;
}
.h1-italic {
  font-family: var(--serif);
  font-size: 156.8px;
  font-style: italic;
  font-weight: 400;
  color: var(--gold);
  display: block;
  line-height: 1.08;
}
.h1-end {
  font-family: var(--cinzel);
  font-size: clamp(3.2rem, 7vw, 5.5rem);
  font-weight: 400;
  color: var(--warm-white);
  display: block;
  line-height: 1.02;
  letter-spacing: -0.02em;
}

.hero-rule {
  width: 64px;
  height: 1px;
  background: rgba(215,181,109,.45);
  margin: 26px 0;
  opacity: 0;
  animation: up .5s .3s ease forwards;
}
.hero-pp {
  font-family: var(--serif);
  font-size:19.2px;
  font-style: italic;
  font-weight: 400;
  color: rgba(240,222,217,.72);
  line-height: 1.8;
  max-width: 58ch;
  margin-bottom: 36px;

  animation: up .6s .35s ease-out forwards;
}
.hero-pp strong { color: rgba(240,222,217,.95); font-style: normal; font-weight: 600; }
.hero-btns {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  opacity: 0;
  animation: up .55s .45s ease forwards;
}

/* Buttons */
.btn-gold {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--gold);
  color: var(--navy);
  padding: 13px 30px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background .2s, transform .2s, box-shadow .2s;
  box-shadow: 0 4px 18px rgba(215,181,109,.32);
}
.btn-gold:hover { background: var(--gold-l); transform: translateY(-2px); box-shadow: 0 8px 26px rgba(215,181,109,.42); }
.btn-ghost_1 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid rgba(215,181,109,.28);
  color: rgba(253,248,245,.78);
  padding: 12px 26px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  text-decoration: none;
  transition: border-color .2s, background .2s, color .2s;
}
.btn-ghost_1:hover { border-color: var(--gold); background: rgba(215,181,109,.07); color: var(--gold-l); }
.btn-navy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--navy);
  color: var(--surface);
  padding: 12px 26px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background .2s;
}
.btn-navy:hover { background: var(--navy-m); }

/* trust pills */
.trust-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 28px;
  opacity: 0;
  animation: up .55s .55s ease forwards;
}
.tpill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(240,222,217,.48);
  padding: 5px 13px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(215,181,109,.18);
}
.tpill::before {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold);
  opacity: .5;
  flex-shrink: 0;
}

/* RIGHT — product mosaic (hidden, hero is now full-width editorial) */
.hero-r {
  display: none;
}
.hi {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  transition: filter .3s;
  min-height: 240px;
}
.hi:hover { filter: brightness(1.1); }
.hi-tall { grid-row: span 2; }
.hi1 { background: linear-gradient(145deg, var(--tint-navy), var(--base-navy)); }
.hi2 { background: linear-gradient(145deg, var(--tint-bronze), var(--base-bronze)); }
.hi3 { background: linear-gradient(145deg, var(--tint-sapphire), var(--base-sapphire)); }
.hi4 { background: linear-gradient(145deg, var(--tint-slate), var(--base-slate)); }
.hi-bg { display: none; pointer-events: none; }
.hi-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(7,16,46,.7) 0%, transparent 52%); }
.hi-cap {
  position: relative;
  z-index: 2;
  padding: 14px 16px;
  width: 100%;
}
.hi-brand { font-family: var(--serif); font-size: 10px; font-style: italic; color: var(--gold-d); letter-spacing: .1em; margin-bottom: 3px; }
.hi-name { font-family: var(--body); font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: rgba(240,222,217,.9); margin-bottom: 4px; }
.hi-price { font-family: var(--cinzel); font-size: 15px; font-weight: 400; color: var(--gold-l); }
.hi-price del { font-family: var(--body); font-size: 11px; font-weight: 400; opacity: .5; margin-left: 6px; text-decoration: line-through; }
.hi-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: #D7B56D;
  color: var(--navy);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  z-index: 3;
}


/* ── STATS ── */
.stats-bar {
  background: oklch(99% 0.005 60);
  border-bottom: 1px solid var(--line);
  border-top: 3px solid #D7B56D;
  padding: 40px 0;
}
.stats-inner {
  max-width: 1400px;
  margin: 0 auto;
  text-align: center;
  padding: 0 var(--section-padding-x);
}
.stats-editorial { max-width: 65ch; margin-left: auto; margin-right: auto;
  font-family: var(--serif);
  font-size: 24px;
  font-style: italic;
  color: var(--navy);
  line-height: 1.6;
}
.stats-editorial strong {
  font-family: var(--cinzel);
  font-style: normal;
  font-weight: 400;
  color: var(--gold-d);
  font-size: 28px;
  margin: 0 6px;
}

/* ── FREE DELIVERY NUDGE ── */
.nudge-bar {
   background: var(--nudge-bg);
  border-bottom: 1px solid var(--outline);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 10px 40px;
}
.nudge-text { font-size: 12px; font-weight: 600; color: #fff; }
.nudge-text strong{
  color:#D7B56D;
  font-weight:700;
}
.nudge-bar-outer {
  flex: 1;
  max-width: 220px;
  height: 6px;
  background: var(--surf-high);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.nudge-bar-fill {
  height: 100%;
  background: var(--nudge-progress);
  border-radius: var(--r-pill);
  width: 65%;
  animation: fillbar 1.2s .3s ease forwards;
  transform-origin: left;
  transform: scaleX(0);
}
@keyframes fillbar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.nudge-cta { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--gold-d); text-decoration: underline; cursor: pointer; }

/* ── CATEGORY CIRCLES ── */
.cats-sec {
  padding: var(--section-padding-y) var(--section-padding-x) !important;
  margin: 0 auto;
}
/* 
.range-grid-swiper{
    display:flex;
    gap:8px;
    overflow-x:auto;
    overflow-y:hidden;
    flex-wrap:nowrap;
    scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
    cursor:grab;
    scrollbar-width:none;
    -ms-overflow-style:none;
} */

.range-grid-swiper::-webkit-scrollbar{
    display:none;
}

.range-grid-swiper.active{
    cursor:grabbing;
}

.range-item {
  flex:0 0 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  transition: transform .25s;
} 
.range-item:hover { transform: translateY(1px); }
.range-item:hover .range-ring { border-color: var(--gold); box-shadow: 0 6px 18px rgba(215,181,109,.28); }

.range-ring {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--outline);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .25s, box-shadow .25s;
  position: relative;
}
/* Distinct colour per category */
.cr1 { background: linear-gradient(145deg, var(--tint-navy), var(--base-navy)); }
.cr2 { background: linear-gradient(145deg, var(--tint-bronze), var(--base-bronze)); }
.cr3 { background: linear-gradient(145deg, var(--tint-forest), var(--base-forest)); }
.cr4 { background: linear-gradient(145deg, var(--tint-slate), var(--base-slate)); }
.cr5 { background: linear-gradient(145deg, var(--tint-plum), var(--base-plum)); }
.cr6 { background: linear-gradient(145deg, var(--tint-sage), var(--base-sage)); }
.cr7 { background: linear-gradient(145deg, var(--tint-sepia), var(--base-sepia)); }
.cr8 { background: linear-gradient(145deg, var(--tint-sapphire), var(--base-sapphire)); }
.cat-ico { display: none; }
.range-label { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--navy); text-align: center; line-height: 1.3; }

/* ── EDITORIAL NEW ARRIVALS ── */
.arrivals-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 3px;
  border-radius: var(--r-md);
  overflow: hidden;
}
.arr-main {
  position: relative;
  min-height: 420px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  cursor: pointer;
  background: linear-gradient(145deg, #1e3f74, #0c2050, #2e1e06);
}
.arr-main:hover .arr-photo { transform: scale(1.04); }
.arr-photo { display: none; }
.arr-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(7,16,46,.78) 0%, transparent 52%); }
.arr-badge { position: absolute; top: 14px; left: 14px; background: var(--gold); color: var(--navy); font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 5px 12px; border-radius: var(--r-pill); z-index: 3; }
.arr-content { position: relative; z-index: 2; padding: 24px; }
.arr-brand { font-family: var(--serif); font-size: 11px; font-style: italic; color: var(--gold-d); letter-spacing: .12em; margin-bottom: 5px; }
.arr-name { font-family: var(--cinzel); font-size: 19px; font-weight: 400; color: var(--text-on-navy); line-height: 1.2; margin-bottom: 8px; }
.arr-tag { font-family: var(--serif); font-size: 12px; font-style: italic; color: rgba(240,222,217,.6); margin-bottom: 12px; }
.arr-price { font-family: var(--cinzel); font-size: 20px; font-weight: 400; color: var(--gold-l); }
.arr-price del { font-family: var(--body); font-size: 12px; font-weight: 400; opacity: .5; text-decoration: line-through; margin-left: 8px; }

.arr-side { display: flex; flex-direction: column; gap: 3px; }
.arr-card {
  background: var(--warm-white);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  flex: 1;
  text-decoration: none;
  transition: background .2s ease-out;
  cursor: pointer;
}
.arr-card:hover { background: var(--warm-off); }
.arr-card-img {
  width: 68px;
  height: 68px;
  border-radius: var(--r-md);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
}
.ai1 { background: linear-gradient(135deg, var(--tint-bronze), var(--base-bronze)); opacity: .8; }
.ai2 { background: linear-gradient(135deg, var(--tint-sage), var(--base-sage)); opacity: .8; }
.ai3 { background: linear-gradient(135deg, var(--tint-plum), var(--base-plum)); opacity: .8; }
.arr-card-brand { font-family: var(--serif); font-size: 11px; font-style: italic; color: var(--gold-d); letter-spacing: .1em; margin-bottom: 3px; }
.arr-card-name { font-family: var(--body); font-size: 12px; font-weight: 600; color: var(--navy); margin-bottom: 4px; line-height: 1.3; }
.arr-card-desc { font-family: var(--body); font-size: 11px; color: var(--ink-50); margin-bottom: 5px; }
.arr-card-price { font-family: var(--cinzel); font-size: 15px; font-weight: 400; color: var(--navy); font-variant-numeric: tabular-nums; }
.arr-card-price del { font-family: var(--body); font-size: 11px; font-weight: 400; color: var(--ink-30); text-decoration: line-through; margin-left: 5px; }

/* ── OFFER BANNER ── */
.offer-box {
  background: var(--navy);
  border-radius: var(--r-lg);
  padding: 34px 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  position: relative;
  overflow: hidden;
}
.offer-box::after {
  content: '';
  position: absolute;
  right: -60px; top: -60px;
  width: 260px; height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(215,181,109,.09) 0%, transparent 65%);
  pointer-events: none;
}
.offer-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(215,181,109,.12);
  color: var(--gold-l);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(215,181,109,.18);
  margin-bottom: 10px;
}
.offer-ttl { font-family: var(--cinzel); font-size: clamp(18px, 2vw, 26px); font-weight: 400; color: var(--text-on-navy); line-height: 1.2; margin-bottom: 5px; }
.offer-ttl span { color: var(--gold); }
.offer-sub { font-family: var(--serif); font-size: 14px; font-style: italic; color: rgba(240,222,217,.55); }
.offer-box-cream { background: var(--surf-low); border: 1px solid var(--outline); }
.offer-box-cream .offer-ttl { color: var(--navy); }
.offer-box-cream .offer-sub { color: var(--mute); }
.offer-box-cream .offer-tag { background: rgba(12,24,71,.06); color: var(--navy-m); border-color: var(--outline); }

/* ── PRODUCT CARDS ── */
.prod-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.pcard {
  background: transparent;
  display: flex;
  flex-direction: column;
  position: relative;
  cursor: pointer;
  transition: transform .25s;
  text-decoration: none;
  gap: 16px;
}
.pcard:hover .pcard-img { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.pcard-img {
  height: 300px;
  background: var(--warm-off);
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 12px,
    rgba(12,24,71,.03) 12px,
    rgba(12,24,71,.03) 13px
  );
  border-radius: var(--r-md);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: transform .3s ease-out, box-shadow .3s ease-out;
}
.pc-ico { display: none; }
.pc-disc {
  position: absolute;
  top: 12px; left: 12px;
  background: var(--gold);
  color: var(--navy);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  z-index: 4;
}

.pc-quick {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: var(--navy);
  color: var(--gold-l);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 14px;
  text-align: center;
  border: none;
  cursor: pointer;
  transform: translateY(100%);
  transition: transform .25s;
  z-index: 5;
}
.pcard:hover .pc-quick { transform: translateY(0); }

.pcard-body { padding: 0; flex: 1; display: flex; flex-direction: column; justify-content:space-between;}
.pc-brand { font-family: var(--serif); font-size: 14px; font-style: italic; color: var(--gold-d); letter-spacing: .1em; margin-bottom: 4px; }
.pc-name { font-family: var(--body); font-size: 14px; font-weight: 600; color: var(--navy); margin-bottom: 6px; line-height: 1.35; flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pc-stars { display: none; align-items: center; gap: 4px; margin-bottom: 9px; }
.stars { color: var(--gold); font-size: 11px; letter-spacing: -1px; }
.rc { font-size: 10px; color: var(--light); }
.pc-price { display: flex; align-items: baseline; gap: 7px; margin-bottom: 10px; }
.p-now-1 { font-family: var(--cinzel); font-size: 18px; font-weight: 400; color: var(--navy); font-variant-numeric: tabular-nums; }
.p-was-1 { font-size: 11px; color: var(--light); text-decoration: line-through; }
.pc-add {
  width: 100%;
  background: var(--navy);
  color: var(--gold);
  border: none;
  border-radius: var(--r-pill);
  padding: 10px;
  font-family: var(--body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .18s;
}
.pc-add:hover { background: var(--navy-m); }
/* sold out btn css */
.pcard-link{
    display:block;
    color:inherit;
    text-decoration:none;
}

.pc-add.sold-out,
.pc-quick:disabled{
    background:#d8d8d8;
    color:#7a7a7a;
    cursor:not-allowed;
    opacity:.8;
}

/* ── GIFT SETS SECTION (missing from v1) ── */
.gift-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.gift-card {
  background: transparent;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  transition: transform .25s;
  gap: 16px;
}
.gift-card:hover .gift-img { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.gift-img {
  height: 240px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  transition: transform .3s ease-out, box-shadow .3s ease-out;
}
.gi1 { background: linear-gradient(135deg, #1e3f74 0%, #0c2050 100%); }
.gi2 { background: linear-gradient(135deg, #2e1e06 0%, #1c1008 100%); }
.gi3 { background: linear-gradient(135deg, #0e2212 0%, #081808 100%); }
.gift-img span { display: none; }
.gift-tag {
  position: absolute;
  top: 14px; left: 14px;
  background: rgba(215,181,109,.9);
  color: var(--navy);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  z-index: 4;
}
.gift-body { padding: 0; }
.gift-occasion { font-family: var(--serif); font-size: 12px; font-style: italic; color: var(--gold-d); letter-spacing: .1em; margin-bottom: 5px; }
.gift-name { font-family: var(--cinzel); font-size: 16px; font-weight: 400; color: var(--navy); margin-bottom: 8px; line-height: 1.2; }
.gift-desc { font-family: var(--body); font-size: 12px; font-weight: 400; color: var(--ink-50); line-height: 1.6; margin-bottom: 14px; }
.gift-range { font-family: var(--cinzel); font-size: 16px; font-weight: 400; color: var(--navy); }

/* ── SHOP BY BUDGET (missing from v1) ── */
.budget-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.bcard {
  border-radius: var(--r-md);
  padding: 20px;
  aspect-ratio:16/9;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1.5px solid var(--outline);
  transition: transform .25s, box-shadow .25s, border-color .25s;
  position: relative;
  overflow: hidden;
}
.bcard::before {
  content: '';
  position: absolute;
  bottom: -20px; right: -20px;
  width: 120px; height: 120px;
  border-radius: 50%;
  opacity: .5;
  transition: transform .3s;
}
.bcard:hover { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(12,24,71,.1); border-color: var(--gold-bdr); }
.bcard:hover::before { transform: scale(1.3); }
.bc1 { background: var(--surf-low); }
.bc1::before { background: radial-gradient(circle, rgba(215,181,109,.15) 0%, transparent 65%); }
.bc2 { background: linear-gradient(135deg, var(--surf-low) 0%, var(--surf-mid) 100%); }
.bc2::before { background: radial-gradient(circle, rgba(12,24,71,.08) 0%, transparent 65%); }
.bc3 { background: var(--navy); }
.bc3 .b-range { color: var(--gold-l);  font-variant-numeric: tabular-nums; }
.bc3 .b-label { color: rgba(253,248,245,.6); }
.bc3 .b-desc { color: rgba(253,248,245,.4); }
.bc3::before { background: radial-gradient(circle, rgba(215,181,109,.12) 0%, transparent 65%); }
.b-ico { font-size: 28px; margin-bottom: 6px; opacity: .65; }
.b-range { font-family: var(--cinzel); font-size: 22px; font-weight: 700; color:var(--navy); font-variant-numeric: tabular-nums; }
.b-label { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--navy-m); }
.b-desc { font-size: 12px; font-weight: 300; color: var(--mute); line-height: 1.55; margin-top: 4px; }
.b-arrow { font-size: 18px; color: var(--gold-d); margin-top: 8px; }

/* ── QUIZ STRIP (missing from v1) ── */
.quiz-strip {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-m) 100%);
  border-radius: var(--r-md);
  padding: var(--section-padding-y) var(--section-padding-x);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 48px;
  position: relative;
  overflow: hidden;
}
.quiz-strip::before {
  content: '';
  position: absolute;
  left: -60px; top: -60px;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(215,181,109,.07) 0%, transparent 65%);
  pointer-events: none;
}
.quiz-ey { font-family: var(--serif); font-size: 12px; font-style: italic; font-weight: 600; letter-spacing: .14em; color: var(--gold-d); margin-bottom: 10px; }
.quiz-ttl { font-family: var(--cinzel); font-size: clamp(20px, 2.2vw, 28px); font-weight: 400; color: var(--text-on-navy); line-height: 1.15; margin-bottom: 10px; }
.quiz-ttl span { color: var(--gold); }
.quiz-sub { font-size: 13px; font-weight: 300; color: rgba(253,248,245,.55); line-height: 1.7; }
.quiz-opts { display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; min-width: 200px; }
.quiz-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(253,248,245,.06);
  border: 1px solid rgba(215,181,109,.15);
  border-radius: var(--r-md);
  padding: 12px 16px;
  cursor: pointer;
  transition: background .18s, border-color .18s;
  text-decoration: none;
}
.quiz-opt:hover { background: rgba(215,181,109,.1); border-color: rgba(215,181,109,.35); }
.quiz-opt-ico { font-size: 18px; }
.quiz-opt-txt { font-size: 12px; font-weight: 700; letter-spacing: .06em; color: rgba(253,248,245,.8); }

/* ── BRAND TRUST STRIP ── */
.brands-trust {
  border-top: 1px solid var(--outline);
  border-bottom: 1px solid var(--outline);
  overflow: hidden;
  padding: 28px 40px;
}
.brands-scroll {
  display: flex;
  gap: 0;
  justify-content: space-between;
  flex-wrap: wrap;
}
.brand-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 22px;
  border-radius: var(--r-md);
  text-decoration: none;
  cursor: pointer;
  transition: background .18s;
}
.brand-box:hover { background: var(--surf-low); }
.bb-name { font-family: var(--cinzel); font-size: 12px; font-weight: 400; color: var(--navy); letter-spacing: .01em; }
.bb-cat { font-family: var(--serif); font-size: 10px; font-style: italic; color: var(--ink-50); }

/* ── TESTIMONIALS ── */
.tcard {
  background: var(--warm-white);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  padding: 24px 22px;
  box-shadow: var(--shadow-xs);
  transition: box-shadow .25s ease-out,
  border-color .2s ease-out,
  transform .25s ease-out;
      min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.tcard:hover { box-shadow: var(--shadow-md); border-color: var(--line-gold); transform: translateY(-3px); }
.tc-q { font-family: var(--serif); font-size: 34px; color: var(--gold); opacity: .3; line-height: 1; margin-bottom: 8px; }
.tc-stars { color: var(--gold); font-size: 12px; margin-bottom: 10px; }
.tc-txt { font-family: var(--serif); font-size: 14px; font-style: italic; color: var(--ink-90); line-height: 1.75; margin-bottom: 16px; }
.tc-auth { display: flex; align-items: center; gap: 10px; padding-top: 14px; border-top: 1px solid var(--outline); }
.tc-av { width: 34px; height: 34px; border-radius: 50%; background: var(--navy); display: flex; align-items: center; justify-content: center; font-family: var(--cinzel); font-size: 12px; color: var(--gold); flex-shrink: 0; }
.tc-name { font-size: 11px; font-weight: 700; color: var(--navy); }
.tc-loc { font-family: var(--serif); font-size: 12px; font-weight:700; font-style: italic; color: var(--ink-50); margin-top: 1px; }

/* ── UGC / INSTAGRAM STRIP (missing from v1) ── */
.ugc-strip { padding: 60px 40px; max-width: 1400px; margin: 0 auto; }
.ugc-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 28px; }
.ugc-tile {
  aspect-ratio: 1;
  border-radius: var(--r-md);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: transform .25s;
}
.ugc-tile:hover { transform: scale(1.03); }
.ugc-tile:hover .ugc-overlay { opacity: 1; }
.ugc-bg { display: none; }
.ugc-overlay {
  position: absolute;
  inset: 0;
  background: rgba(12,24,71,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .25s ease-out;
}
.ugc-overlay-ico { color: var(--surface); font-size: 22px; }
.ugc-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 22px;
  padding: 16px 22px;
  background: var(--surf-low);
  border-radius: var(--r-md);
}
.ugc-cta-txt { font-size: 13px; font-weight: 300; color: var(--mute); }
.ugc-cta-txt strong { color: var(--navy); font-weight: 700; }

/* UGC tile colours */
.ug1 { background: linear-gradient(145deg, var(--tint-navy), var(--base-navy)); }
.ug2 { background: linear-gradient(145deg, var(--tint-bronze), var(--base-bronze)); }
.ug3 { background: linear-gradient(145deg, var(--tint-forest), var(--base-forest)); }
.ug4 { background: linear-gradient(145deg, var(--tint-plum), var(--base-plum)); }
.ug5 { background: linear-gradient(145deg, var(--tint-sage), var(--base-sage)); }
.ug6 { background: linear-gradient(145deg, var(--tint-sepia), var(--base-sepia)); }

/* ── BRAND STORY ── */
.story-box {
  background: var(--surf-low);
  border-radius: var(--r-md);
  padding: var(--section-padding-y) 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 52px;
  align-items: center;
}
.s-kicker { font-family: var(--serif); font-size: 12px; font-style: italic; color: var(--gold-d); letter-spacing: .14em; margin-bottom: 10px; }
.s-ttl { font-family: var(--cinzel); font-size: clamp(19px, 2.1vw, 24px); font-weight: 400; color: var(--navy); line-height: 1.2; margin-bottom: 24px; }
.s-p { font-size: 13px; font-weight: 300; color: var(--mute); line-height: 1.8; margin-bottom: 24px; }
.s-stats { display: flex; gap: 28px; }
.ss-n { font-family: var(--cinzel); font-size: 22px !important; font-weight: 400; color: var(--navy); }
.s-btn-wrap {
    margin-top: 24px;
}
.ss-l { font-family: var(--body); font-size: 9px; font-weight: 700; letter-spacing: .12em;  color: var(--ink-50); margin-top: 3px; }
.s-imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.s-video,
.story-video {
    width: 100%;
    height: 100%;
}

.story-video {
    
    object-fit: cover;
    border-radius: 20px; /* Optional */
}
.s-img { height: 130px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; font-size: 32px; }
.si1 { background: linear-gradient(135deg, var(--tint-navy), var(--base-navy)); opacity: .5; }
.si2 { background: linear-gradient(135deg, var(--tint-bronze), var(--base-bronze)); opacity: .5; }
.si3 { background: linear-gradient(135deg, var(--tint-sage), var(--base-sage)); opacity: .5; }
.si4 { background: linear-gradient(135deg, var(--tint-plum), var(--base-plum)); opacity: .5; }

/* ── FOOTER ── */
footer { background: var(--navy-d); }
.f-top {
  max-width: 1400px;
  margin: 0 auto;
  padding: 52px var(--section-padding-x) 36px;
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr 1.25fr;
  gap: 32px;
  border-bottom: 1px solid rgba(253,248,245,.07);
}
.f-brand-name { font-family: var(--cinzel); font-size: 14px; font-weight: 400; color: var(--gold); margin-bottom: 3px; }
.f-brand-tag { font-family: var(--serif); font-size: 10px; font-style: italic; color: rgba(215,181,109,.42); margin-bottom: 12px; }
.f-desc { font-size: 11px; font-weight: 300; color: rgba(253,248,245,.35); line-height: 1.7; margin-bottom: 16px; }
.f-soc { display: flex; gap: 7px; }
.fsb {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(253,248,245,.1);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  text-decoration: none;
  color: rgba(253,248,245,.4);
  transition: border-color .2s, color .2s;
}
.fsb:hover { border-color: var(--gold); color: var(--gold); }
.f-col-ttl { font-size: 9px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-d); margin-bottom: 12px; }
.f-lnks { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.f-lnks a { font-size: 12px; color: rgba(253,248,245,.38); text-decoration: none; transition: color .2s; }
.f-lnks a:hover { color: rgba(253,248,245,.82); }
.f-email input {
  width: 100%;
  font-family: var(--body);
  font-size: 12px;
  padding: 11px 14px;
  border-radius: var(--r-md);
  border: 1px solid rgba(253,248,245,.1);
  background: rgba(253,248,245,.05);
  color: rgba(253,248,245,.8);
  outline: none;
  margin-bottom: 7px;
  transition: border-color .2s, box-shadow .2s;
}
.f-email input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(215,181,109,.15);
}
.f-email input::placeholder { color: rgba(253,248,245,.28); }
.f-sub-btn {
  width: 100%;
  font-family: var(--body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--gold);
  color: var(--navy);/* ════════════════════════
   DESIGN SYSTEM
   Heritage Modernism
════════════════════════ */
:root {
  /* Colour palette — B2B-aligned */
  --navy:      #0C1847;
  --navy-d:    #060e28;
  --navy-m:    #1a2a5c;
  --gold:      #D7B56D;
  --gold-d:    #B8954C;
  --gold-l:    #E8D4A8;
  --gold-f:    #e5c279;
  --cream:     #F0DED9;
  --cream-soft:#F6ECE8;
  --cream-bg:  oklch(97% 0.01 60);
  --warm-white:oklch(99% 0.005 60);
  --warm-off:  oklch(96% 0.012 60);
  --ink:       oklch(15% 0.04 260);
  --ink-70:    oklch(15% 0.04 260 / 0.7);
  --ink-50:    oklch(15% 0.04 260 / 0.5);
  --ink-30:    oklch(15% 0.04 260 / 0.3);
  --line:      rgba(12, 24, 71, .08);
  --line-gold: rgba(215, 181, 109, .35);

  /* Legacy aliases for component compatibility */
  --bg:        var(--cream-bg);
  --surface:   var(--warm-white);
  --surf-low:  var(--warm-off);
  --surf-mid:  oklch(94% 0.014 60);
  --surf-high: oklch(91% 0.016 60);
  --outline:   rgba(12,24,71,.08);
  --gold-bdr:  rgba(215,181,109,.3);
  --text:      #1c1b1a;
  --mute:      #b4b4bc;
  --light:     #a1a1ab;
  --error:     #ba1a1a;
  --wa:        #25D366;
  --text-on-navy: oklch(96.5% 0.012 65); /* warm cream for headings on dark navy */

  /* Font stack — matches B2B */
  --cinzel: 'DM Serif Display', serif;
  --serif:  'Cormorant Garamond', 'Georgia', serif;
  --body:   'Inter', -apple-system, 'Helvetica Neue', sans-serif;
  --F1:     var(--cinzel);
  --F2:     var(--serif);
  --F3:     var(--body);

  /* Border radius scale — B2B */
  --r-sm:   10px;
  --r-md:   16px;
  --r-lg:   22px;
  --r-xl:   32px;
  --r-pill: 100px;

  /* Typography scale (Major Third 1.25) */
  --text-xs:      0.8125rem;
  --text-sm:      0.875rem;
  --text-base:    1rem;
  --text-md:      1.25rem;
  --text-lg:      1.563rem;
  --text-xl:      1.953rem;
  --text-2xl:     2.441rem;
  --text-display: clamp(2.75rem, 6vw, 4rem);

  /* Spacing scale (base 8px) */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;

  /* Shadows */
  --shadow-xs:   0 1px 3px rgba(12,24,71,.04);
  --shadow-sm:   0 2px 8px rgba(12,24,71,.06);
  --shadow-md:   0 8px 24px rgba(12,24,71,.09);
  --shadow-lg:   0 20px 50px rgba(12,24,71,.13);
  --shadow-gold: 0 8px 28px rgba(215,181,109,.24);
  --shadow-hover: 0 10px 28px rgba(12,24,71,.08);

  /* Mosaic theme tokens */
  --tint-navy:     #1e3f74;
  --tint-bronze:   #2e1e06;
  --tint-forest:   #1a2a10;
  --tint-slate:    #1c2036;
  --tint-plum:     #280a1e;
  --tint-sage:     #0e2212;
  --tint-sepia:    #2a1a06;
  --tint-sapphire: #112e5c;
  --base-navy:     #0c2050;
  --base-bronze:   #1c1008;
  --base-forest:   #0e1808;
  --base-slate:    #0e1020;
  --base-plum:     #180610;
  --base-sage:     #081808;
  --base-sepia:    #1e1208;
  --base-sapphire: #0a1e48;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--cream-bg);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 400;
  line-height: 1.6;
  overflow-x: hidden;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}
*:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Shared ── */

/* .ey {
  font-family: var(--serif);
  font-size: 13px;
  font-style: italic;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--gold-d);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
} */
/* .ey::before {
  content: '';
  display: block;
  width: 22px;
  height: 1px;
  background: var(--gold);
  flex-shrink: 0;
} */
.s-img img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    border-radius: 10px;
}
h2.sec-ttl {
  font-family: var(--cinzel);
  font-size: clamp(20px, 2.4vw, 25px);
  font-weight: 400;
  color: var(--navy);
  line-height: 1.15;
  letter-spacing: -.01em;
}
.sec-hd {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 28px;
  gap: 16px;
}
.view-all {
  font-family: var(--body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-d);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: gap .2s;
}
.view-all:hover { gap: 9px; }
.wrap {
  max-width: 1400px;
  margin: 0 auto;
  padding-left: var(--section-padding-x);
  padding-right: var(--section-padding-x);
}
.section { padding: var(--section-padding-y) 0; }
.section-cream { background: var(--warm-off); }
.section-navy  { background: var(--navy); }

/* ── ANNOUNCEMENT BAR — static (ticker removed per audit) ── */
.ann {
  background: var(--navy-d);
  padding: 0 28px;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  overflow: hidden;
}
.ann-track {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.ann-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  font-family: var(--body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(240,222,217,.65);
  border-right: 1px solid rgba(215,181,109,.12);
  white-space: nowrap;
  flex-shrink: 0;
}
.ann-hl { color: var(--gold); font-style: normal; }
.ann-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--gold); opacity: .5; flex-shrink: 0; }
.ann-soc {
  display: flex;
  align-items: center;
  gap: 2px;
  padding-left: 18px;
  border-left: 1px solid rgba(215,181,109,.12);
  flex-shrink: 0;
}
.ann-soc-lnk {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(215,181,109,.5);
  text-decoration: none;
  border-radius: 6px;
  transition: color .18s, background .18s;
}
.ann-soc-lnk:hover { color: var(--gold); background: rgba(215,181,109,.08); }

/* ── TOGGLE — B2B mode-bar style ── */
.toggle-bar {
  background: var(--warm-white);
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: center;
  padding: 10px 0;
}
.tw {
  display: inline-flex;
  background: var(--warm-off);
  border: 1.5px solid var(--line-gold);
  border-radius: var(--r-pill);
  padding: 4px;
  gap: 2px;
}
.tb {
  font-family: var(--body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  min-height: 40px;
  padding: 0 28px;
  border-radius: var(--r-pill);
  border: none;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: background .25s, color .25s, box-shadow .25s;
}
.tb.off { background: transparent; color: var(--ink-50); }
.tb.off:hover { background: rgba(12,24,71,.04); color: var(--ink-70); }
.tb.on  { background: var(--navy); color: var(--gold); box-shadow: var(--shadow-sm); }

/* ── NAV — B2B-aligned ── */
nav {
  background: var(--warm-white);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--section-padding-x);
  height: 66px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.nav-brand {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex-shrink: 0;
  text-decoration: none;
}
.nb-name {
  font-family: var(--cinzel);
  font-size: 15px;
  font-weight: 400;
  color: var(--navy);
  letter-spacing: .01em;
  line-height: 1;
}
.nb-tag {
  font-family: var(--serif);
  font-size: 10px;
  font-style: italic;
  color: var(--gold-d);
  letter-spacing: .08em;
}

.nav-cats {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  flex: 1;
  justify-content: center;
}
.nav-cats > li { position: relative; }
.nav-cats > li > a {
  font-family: var(--body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--navy);
  opacity: 0.75;
  text-decoration: none;
  padding: 8px 13px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  gap: 4px;
  position: relative;
  transition: opacity .2s;
  white-space: nowrap;
}
.nav-cats > li > a::after {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 13px;
  width: 0;
  height: 1.5px;
  background: var(--gold);
  transition: width .2s;
}
.nav-cats > li > a:hover { opacity: 1; }
.nav-cats > li > a:hover::after { width: calc(100% - 26px); }
.nav-arr { font-size: 8px; opacity: .4; transition: transform .2s; display: inline-block; }
.nav-cats > li:hover .nav-arr { transform: rotate(180deg); }
.nav-sale { color: var(--error) !important; opacity: 1 !important; }

/* Mega menu */
.mega {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  background: var(--warm-white);
  border: 1px solid var(--line);
  border-top: 2px solid var(--gold);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: 18px;
  min-width: 420px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s, visibility .2s, transform .2s;
  z-index: 300;
}
.nav-cats > li:hover .mega {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.mega-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px; }
.mega-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: var(--r-sm);
  text-decoration: none;
  transition: background .15s;
  cursor: pointer;
}
.mega-item:hover { background: var(--warm-off); }
.mega-ico {
  width: 34px;
  height: 34px;
  border-radius: var(--r-sm);
  background: var(--warm-off);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.mega-name {
  font-family: var(--body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--navy);
}
.mega-sub {
  font-family: var(--serif);
  font-size: 11px;
  font-style: italic;
  color: var(--light);
  margin-top: 1px;
}

.nav-acts { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.nib {
  width: 38px;
  height: 38px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--warm-off);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  cursor: pointer;
  position: relative;
  text-decoration: none;
  color: var(--navy);
  transition: background .18s, border-color .18s;
}
.nib:hover { background: var(--cream-soft); border-color: var(--line-gold); }
.nbadge {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 16px;
  height: 16px;
  background: var(--gold);
  color: var(--navy);
  border-radius: var(--r-pill);
  font-size: 9px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── HERO ── */
.hero {
  background: var(--navy);
  overflow: hidden;
  min-height: 680px;
}
.hero-inner {
  max-width: 1400px;
  margin: 0 auto;
  min-height: clamp(580px, calc(100vh - 148px), 900px);
  display: flex;
  align-items: center;
  position: relative;
  z-index: 2;
  padding: 0 clamp(28px, 5vw, 72px);
}

/* FULL-WIDTH TEXT COLUMN */
.hero-l {
  width: 100%;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(56px, 7vh, 80px) 0;
}
.hero-kicker {
  font-family: var(--serif);
  font-size: 13px;
  font-style: italic;
  font-weight: 600;
  letter-spacing: .14em;
  color: rgba(215,181,109,.8);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  opacity: 0;
  animation: up .55s .05s ease forwards;
}
.hero-kicker::before { content: ''; display: block; width: 22px; height: 1px; background: var(--gold); }

.hero-h1 {
  opacity: 0;
  animation: up .65s .15s ease forwards;
}
.h1-main {
  font-family: var(--cinzel);
  font-size: 108px;
  font-weight: 400;
  color: var(--warm-white);
  line-height: 1.02;
  letter-spacing: -0.02em;
  display: block;
}
.h1-italic {
  font-family: var(--serif);
  font-size: 156.8px;
  font-style: italic;
  font-weight: 400;
  color: var(--gold);
  display: block;
  line-height: 1.08;
}
.h1-end {
  font-family: var(--cinzel);
  font-size: clamp(3.2rem, 7vw, 5.5rem);
  font-weight: 400;
  color: var(--warm-white);
  display: block;
  line-height: 1.02;
  letter-spacing: -0.02em;
}

.hero-rule {
  width: 64px;
  height: 1px;
  background: rgba(215,181,109,.45);
  margin: 26px 0;
  opacity: 0;
  animation: up .5s .3s ease forwards;
}
.hero-pp {
  font-family: var(--serif);
  font-size:19.2px;
  font-style: italic;
  font-weight: 400;
  color: rgba(240,222,217,.72);
  line-height: 1.8;
  max-width: 58ch;
  margin-bottom: 36px;

  animation: up .6s .35s ease-out forwards;
}
.hero-pp strong { color: rgba(240,222,217,.95); font-style: normal; font-weight: 600; }
.hero-btns {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  opacity: 0;
  animation: up .55s .45s ease forwards;
}

/* Buttons */
.btn-gold {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--gold);
  color: var(--navy);
  padding: 13px 30px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background .2s, transform .2s, box-shadow .2s;
  box-shadow: 0 4px 18px rgba(215,181,109,.32);
}
.btn-gold:hover { background: var(--gold-l); transform: translateY(-2px); box-shadow: 0 8px 26px rgba(215,181,109,.42); }
.btn-ghost_1 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid rgba(215,181,109,.28);
  color: rgba(253,248,245,.78);
  padding: 12px 26px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  text-decoration: none;
  transition: border-color .2s, background .2s, color .2s;
}
.btn-ghost_1:hover { border-color: var(--gold); background: rgba(215,181,109,.07); color: var(--gold-l); }
.btn-navy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--navy);
  color: var(--surface);
  padding: 12px 26px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background .2s;
}
.btn-navy:hover { background: var(--navy-m); }

/* trust pills */
.trust-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 28px;
  opacity: 0;
  animation: up .55s .55s ease forwards;
}
.tpill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(240,222,217,.48);
  padding: 5px 13px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(215,181,109,.18);
}
.tpill::before {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold);
  opacity: .5;
  flex-shrink: 0;
}

/* RIGHT — product mosaic (hidden, hero is now full-width editorial) */
.hero-r {
  display: none;
}
.hi {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  transition: filter .3s;
  min-height: 240px;
}
.hi:hover { filter: brightness(1.1); }
.hi-tall { grid-row: span 2; }
.hi1 { background: linear-gradient(145deg, var(--tint-navy), var(--base-navy)); }
.hi2 { background: linear-gradient(145deg, var(--tint-bronze), var(--base-bronze)); }
.hi3 { background: linear-gradient(145deg, var(--tint-sapphire), var(--base-sapphire)); }
.hi4 { background: linear-gradient(145deg, var(--tint-slate), var(--base-slate)); }
.hi-bg { display: none; pointer-events: none; }
.hi-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(7,16,46,.7) 0%, transparent 52%); }
.hi-cap {
  position: relative;
  z-index: 2;
  padding: 14px 16px;
  width: 100%;
}
.hi-brand { font-family: var(--serif); font-size: 10px; font-style: italic; color: var(--gold-d); letter-spacing: .1em; margin-bottom: 3px; }
.hi-name { font-family: var(--body); font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: rgba(240,222,217,.9); margin-bottom: 4px; }
.hi-price { font-family: var(--cinzel); font-size: 15px; font-weight: 400; color: var(--gold-l); }
.hi-price del { font-family: var(--body); font-size: 11px; font-weight: 400; opacity: .5; margin-left: 6px; text-decoration: line-through; }
.hi-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: #D7B56D;
  color: var(--navy);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  z-index: 3;
}


/* ── STATS ── */
.stats-bar {
  background: oklch(99% 0.005 60);
  border-bottom: 1px solid var(--line);
  border-top: 3px solid #D7B56D;
  padding: 40px 0;
}
.stats-inner {
  max-width: 1400px;
  margin: 0 auto;
  text-align: center;
  padding: 0 var(--section-padding-x);
}
.stats-editorial { max-width: 65ch; margin-left: auto; margin-right: auto;
  font-family: var(--serif);
  font-size: 24px;
  font-style: italic;
  color: var(--navy);
  line-height: 1.6;
}
.stats-editorial strong {
  font-family: var(--cinzel);
  font-style: normal;
  font-weight: 400;
  color: var(--gold-d);
  font-size: 28px;
  margin: 0 6px;
}

/* ── FREE DELIVERY NUDGE ── */
.nudge-bar {
  background: linear-gradient(90deg, var(--surf-low), var(--surf-mid));
  border-bottom: 1px solid var(--outline);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 10px 40px;
}
.nudge-text { font-size: 12px; font-weight: 600; color: var(--navy); }
.nudge-bar-outer {
  flex: 1;
  max-width: 220px;
  height: 6px;
  background: var(--surf-high);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.nudge-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold-d), var(--gold));
  border-radius: var(--r-pill);
  width: 65%;
  animation: fillbar 1.2s .3s ease forwards;
  transform-origin: left;
  transform: scaleX(0);
}
@keyframes fillbar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.nudge-cta { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--gold-d); text-decoration: underline; cursor: pointer; }

/* ── CATEGORY CIRCLES ── */
.cats-sec {
  padding: var(--section-padding-y) var(--section-padding-x) !important;
  margin: 0 auto;
}
.cat-grid{
    display:flex;
    gap:8px;
    overflow-x:auto;
    overflow-y:hidden;
    flex-wrap:nowrap;
    scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
    cursor:grab;
    scrollbar-width:none;
    -ms-overflow-style:none;
}

.cat-grid::-webkit-scrollbar{
    display:none;
}

.cat-grid.active{
    cursor:grabbing;
}

.cat-item {
  flex:0 0 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  transition: transform .25s;
} 
.cat-item:hover { transform: translateY(1px); }
.cat-item:hover .cat-ring { border-color: var(--gold); box-shadow: 0 6px 18px rgba(215,181,109,.28); }

.cat-ring {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--outline);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .25s, box-shadow .25s;
  position: relative;
}
/* Distinct colour per category */
.cr1 { background: linear-gradient(145deg, var(--tint-navy), var(--base-navy)); }
.cr2 { background: linear-gradient(145deg, var(--tint-bronze), var(--base-bronze)); }
.cr3 { background: linear-gradient(145deg, var(--tint-forest), var(--base-forest)); }
.cr4 { background: linear-gradient(145deg, var(--tint-slate), var(--base-slate)); }
.cr5 { background: linear-gradient(145deg, var(--tint-plum), var(--base-plum)); }
.cr6 { background: linear-gradient(145deg, var(--tint-sage), var(--base-sage)); }
.cr7 { background: linear-gradient(145deg, var(--tint-sepia), var(--base-sepia)); }
.cr8 { background: linear-gradient(145deg, var(--tint-sapphire), var(--base-sapphire)); }
.cat-ico { display: none; }
.cat-lbl { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--navy); text-align: center; line-height: 1.3; }

/* ── EDITORIAL NEW ARRIVALS ── */
.arrivals-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 3px;
  border-radius: var(--r-md);
  overflow: hidden;
}
.arr-main {
  position: relative;
  min-height: 420px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  cursor: pointer;
  background: linear-gradient(145deg, #1e3f74, #0c2050, #2e1e06);
}
.arr-main:hover .arr-photo { transform: scale(1.04); }
.arr-photo { display: none; }
.arr-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(7,16,46,.78) 0%, transparent 52%); }
.arr-badge { position: absolute; top: 14px; left: 14px; background: var(--gold); color: var(--navy); font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 5px 12px; border-radius: var(--r-pill); z-index: 3; }
.arr-content { position: relative; z-index: 2; padding: 24px; }
.arr-brand { font-family: var(--serif); font-size: 11px; font-style: italic; color: var(--gold-d); letter-spacing: .12em; margin-bottom: 5px; }
.arr-name { font-family: var(--cinzel); font-size: 19px; font-weight: 400; color: var(--text-on-navy); line-height: 1.2; margin-bottom: 8px; }
.arr-tag { font-family: var(--serif); font-size: 12px; font-style: italic; color: rgba(240,222,217,.6); margin-bottom: 12px; }
.arr-price { font-family: var(--cinzel); font-size: 20px; font-weight: 400; color: var(--gold-l); }
.arr-price del { font-family: var(--body); font-size: 12px; font-weight: 400; opacity: .5; text-decoration: line-through; margin-left: 8px; }

.arr-side { display: flex; flex-direction: column; gap: 3px; }
.arr-card {
  background: var(--warm-white);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  flex: 1;
  text-decoration: none;
  transition: background .2s ease-out;
  cursor: pointer;
}
.arr-card:hover { background: var(--warm-off); }
.arr-card-img {
  width: 68px;
  height: 68px;
  border-radius: var(--r-md);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
}
.ai1 { background: linear-gradient(135deg, var(--tint-bronze), var(--base-bronze)); opacity: .8; }
.ai2 { background: linear-gradient(135deg, var(--tint-sage), var(--base-sage)); opacity: .8; }
.ai3 { background: linear-gradient(135deg, var(--tint-plum), var(--base-plum)); opacity: .8; }
.arr-card-brand { font-family: var(--serif); font-size: 11px; font-style: italic; color: var(--gold-d); letter-spacing: .1em; margin-bottom: 3px; }
.arr-card-name { font-family: var(--body); font-size: 12px; font-weight: 600; color: var(--navy); margin-bottom: 4px; line-height: 1.3; }
.arr-card-desc { font-family: var(--body); font-size: 11px; color: var(--ink-50); margin-bottom: 5px; }
.arr-card-price { font-family: var(--cinzel); font-size: 15px; font-weight: 400; color: var(--navy); font-variant-numeric: tabular-nums; }
.arr-card-price del { font-family: var(--body); font-size: 11px; font-weight: 400; color: var(--ink-30); text-decoration: line-through; margin-left: 5px; }

/* ── OFFER BANNER ── */
.offer-box {
  background: var(--navy);
  border-radius: var(--r-lg);
  padding: 34px 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  position: relative;
  overflow: hidden;
}
.offer-box::after {
  content: '';
  position: absolute;
  right: -60px; top: -60px;
  width: 260px; height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(215,181,109,.09) 0%, transparent 65%);
  pointer-events: none;
}
.offer-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(215,181,109,.12);
  color: var(--gold-l);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(215,181,109,.18);
  margin-bottom: 10px;
}
.offer-ttl { font-family: var(--cinzel); font-size: clamp(18px, 2vw, 26px); font-weight: 400; color: var(--text-on-navy); line-height: 1.2; margin-bottom: 5px; }
.offer-ttl span { color: var(--gold); }
.offer-sub { font-family: var(--serif); font-size: 14px; font-style: italic; color: rgba(240,222,217,.55); }
.offer-box-cream { background: var(--surf-low); border: 1px solid var(--outline); }
.offer-box-cream .offer-ttl { color: var(--navy); }
.offer-box-cream .offer-sub { color: var(--mute); }
.offer-box-cream .offer-tag { background: rgba(12,24,71,.06); color: var(--navy-m); border-color: var(--outline); }

/* ── PRODUCT CARDS ── */
.prod-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.pcard {
  background: transparent;
  display: flex;
  flex-direction: column;
  position: relative;
  cursor: pointer;
  transition: transform .25s;
  text-decoration: none;
  gap: 16px;
}
.pcard:hover .pcard-img { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.pcard-img {
  height: 300px;
  background: var(--warm-off);
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 12px,
    rgba(12,24,71,.03) 12px,
    rgba(12,24,71,.03) 13px
  );
  border-radius: var(--r-md);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: transform .3s ease-out, box-shadow .3s ease-out;
}
.pc-ico { display: none; }
.pc-disc {
  position: absolute;
  top: 12px; left: 12px;
  background: var(--gold);
  color: var(--navy);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  z-index: 4;
}
.pc-wish {
  position: absolute;
  top: 10px; right: 10px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(253,248,245,.9);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  transition: background .18s;
  z-index: 5;
}
.pc-wish:hover { background: var(--surface); }
/* Quick add hover */
.pc-quick {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: var(--navy);
  color: var(--gold-l);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 14px;
  text-align: center;
  border: none;
  cursor: pointer;
  transform: translateY(100%);
  transition: transform .25s;
  z-index: 5;
}
.pcard:hover .pc-quick { transform: translateY(0); }

.pcard-body { padding: 0; flex: 1; display: flex; flex-direction: column; }
.pc-brand { font-family: var(--serif); font-size: 14px; font-style: italic; color: var(--gold-d); letter-spacing: .1em; margin-bottom: 4px; }
.pc-name { font-family: var(--body); font-size: 14px; font-weight: 600; color: var(--navy); margin-bottom: 6px; line-height: 1.35; flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pc-stars { display: none; align-items: center; gap: 4px; margin-bottom: 9px; }
.stars { color: var(--gold); font-size: 11px; letter-spacing: -1px; }
.rc { font-size: 10px; color: var(--light); }
.pc-price { display: flex; align-items: baseline; gap: 7px; margin-bottom: 10px; }
.p-now-1 { font-family: var(--cinzel); font-size: 18px; font-weight: 400; color: var(--navy); font-variant-numeric: tabular-nums; }
.p-was-1 { font-size: 11px; color: var(--light); text-decoration: line-through; }
.pc-add {
  width: 100%;
  background: var(--navy);
  color: var(--gold);
  border: none;
  border-radius: var(--r-pill);
  padding: 10px;
  font-family: var(--body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .18s;
}
.pc-add:hover { background: var(--navy-m); }
/* sold out btn css */
.pcard-link{
    display:block;
    color:inherit;
    text-decoration:none;
}

.pc-add.sold-out,
.pc-quick:disabled{
    background:#d8d8d8;
    color:#7a7a7a;
    cursor:not-allowed;
    opacity:.8;
}

/* ── GIFT SETS SECTION (missing from v1) ── */
.gift-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.gift-card {
  background: transparent;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  transition: transform .25s;
  gap: 16px;
}
.gift-card:hover .gift-img { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.gift-img {
  height: 240px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  transition: transform .3s ease-out, box-shadow .3s ease-out;
}
.gi1 { background: linear-gradient(135deg, #1e3f74 0%, #0c2050 100%); }
.gi2 { background: linear-gradient(135deg, #2e1e06 0%, #1c1008 100%); }
.gi3 { background: linear-gradient(135deg, #0e2212 0%, #081808 100%); }
.gift-img span { display: none; }
.gift-tag {
  position: absolute;
  top: 14px; left: 14px;
  background: rgba(215,181,109,.9);
  color: var(--navy);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  z-index: 4;
}
.gift-body { padding: 0; }
.gift-occasion { font-family: var(--serif); font-size: 12px; font-style: italic; color: var(--gold-d); letter-spacing: .1em; margin-bottom: 5px; }
.gift-name { font-family: var(--cinzel); font-size: 16px; font-weight: 400; color: var(--navy); margin-bottom: 8px; line-height: 1.2; }
.gift-desc { font-family: var(--body); font-size: 12px; font-weight: 400; color: var(--ink-50); line-height: 1.6; margin-bottom: 14px; }
.gift-range { font-family: var(--cinzel); font-size: 16px; font-weight: 400; color: var(--navy); }

/* ── SHOP BY BUDGET (missing from v1) ── */
.budget-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.bcard {
  border-radius: var(--r-md);
  padding: 20px;
  aspect-ratio:16/9;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1.5px solid var(--outline);
  transition: transform .25s, box-shadow .25s, border-color .25s;
  position: relative;
  overflow: hidden;
}
.bcard::before {
  content: '';
  position: absolute;
  bottom: -20px; right: -20px;
  width: 120px; height: 120px;
  border-radius: 50%;
  opacity: .5;
  transition: transform .3s;
}
.bcard:hover { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(12,24,71,.1); border-color: var(--gold-bdr); }
.bcard:hover::before { transform: scale(1.3); }
.bc1 { background: var(--surf-low); }
.bc1::before { background: radial-gradient(circle, rgba(215,181,109,.15) 0%, transparent 65%); }
.bc2 { background: linear-gradient(135deg, var(--surf-low) 0%, var(--surf-mid) 100%); }
.bc2::before { background: radial-gradient(circle, rgba(12,24,71,.08) 0%, transparent 65%); }
.bc3 { background: var(--navy); }
.bc3 .b-range { color: var(--gold-l);  font-variant-numeric: tabular-nums; }
.bc3 .b-label { color: rgba(253,248,245,.6); }
.bc3 .b-desc { color: rgba(253,248,245,.4); }
.bc3::before { background: radial-gradient(circle, rgba(215,181,109,.12) 0%, transparent 65%); }
.b-ico { font-size: 28px; margin-bottom: 6px; opacity: .65; }
.b-range { font-family: var(--cinzel); font-size: 22px; font-weight: 700; color:var(--navy); font-variant-numeric: tabular-nums; }
.b-label { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--navy-m); }
.b-desc { font-size: 12px; font-weight: 300; color: var(--mute); line-height: 1.55; margin-top: 4px; }
.b-arrow { font-size: 18px; color: var(--gold-d); margin-top: 8px; }

/* ── QUIZ STRIP (missing from v1) ── */
.quiz-strip {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-m) 100%);
  border-radius: var(--r-md);
  padding: var(--section-padding-y) var(--section-padding-x);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 48px;
  position: relative;
  overflow: hidden;
}
.quiz-strip::before {
  content: '';
  position: absolute;
  left: -60px; top: -60px;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(215,181,109,.07) 0%, transparent 65%);
  pointer-events: none;
}
.quiz-ey { font-family: var(--serif); font-size: 12px; font-style: italic; font-weight: 600; letter-spacing: .14em; color: var(--gold-d); margin-bottom: 10px; }
.quiz-ttl { font-family: var(--cinzel); font-size: clamp(20px, 2.2vw, 28px); font-weight: 400; color: var(--text-on-navy); line-height: 1.15; margin-bottom: 10px; }
.quiz-ttl span { color: var(--gold); }
.quiz-sub { font-size: 13px; font-weight: 300; color: rgba(253,248,245,.55); line-height: 1.7; }
.quiz-opts { display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; min-width: 200px; }
.quiz-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(253,248,245,.06);
  border: 1px solid rgba(215,181,109,.15);
  border-radius: var(--r-md);
  padding: 12px 16px;
  cursor: pointer;
  transition: background .18s, border-color .18s;
  text-decoration: none;
}
.quiz-opt:hover { background: rgba(215,181,109,.1); border-color: rgba(215,181,109,.35); }
.quiz-opt-ico { font-size: 18px; }
.quiz-opt-txt { font-size: 12px; font-weight: 700; letter-spacing: .06em; color: rgba(253,248,245,.8); }

/* ── BRAND TRUST STRIP ── */
.brands-trust {
  border-top: 1px solid var(--outline);
  border-bottom: 1px solid var(--outline);
  overflow: hidden;
  padding: 28px 40px;
}
.brands-scroll {
  display: flex;
  gap: 0;
  justify-content: space-between;
  flex-wrap: wrap;
}
.brand-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 22px;
  border-radius: var(--r-md);
  text-decoration: none;
  cursor: pointer;
  transition: background .18s;
}
.brand-box:hover { background: var(--surf-low); }
.bb-name { font-family: var(--cinzel); font-size: 12px; font-weight: 400; color: var(--navy); letter-spacing: .01em; }
.bb-cat { font-family: var(--serif); font-size: 10px; font-style: italic; color: var(--ink-50); }

/* ── TESTIMONIALS ── */
.tcard {
  background: var(--warm-white);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  padding: 24px 22px;
  box-shadow: var(--shadow-xs);
  transition: box-shadow .25s ease-out,
  border-color .2s ease-out,
  transform .25s ease-out;
      min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.tcard:hover { box-shadow: var(--shadow-md); border-color: var(--line-gold); transform: translateY(-3px); }
.tc-q { font-family: var(--serif); font-size: 34px; color: var(--gold); opacity: .3; line-height: 1; margin-bottom: 8px; }
.tc-stars { color: var(--gold); font-size: 12px; margin-bottom: 10px; }
.tc-txt { font-family: var(--serif); font-size: 14px; font-style: italic; color: var(--ink-90); line-height: 1.75; margin-bottom: 16px; }
.tc-auth { display: flex; align-items: center; gap: 10px; padding-top: 14px; border-top: 1px solid var(--outline); }
.tc-av { width: 34px; height: 34px; border-radius: 50%; background: var(--navy); display: flex; align-items: center; justify-content: center; font-family: var(--cinzel); font-size: 12px; color: var(--gold); flex-shrink: 0; }
.tc-name { font-size: 11px; font-weight: 700; color: var(--navy); }
.tc-loc { font-family: var(--serif); font-size: 12px; font-weight:700; font-style: italic; color: var(--ink-50); margin-top: 1px; }

/* ── UGC / INSTAGRAM STRIP (missing from v1) ── */
.ugc-strip { padding: 60px 40px; max-width: 1400px; margin: 0 auto; }
.ugc-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 28px; }
.ugc-tile {
  aspect-ratio: 1;
  border-radius: var(--r-md);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: transform .25s;
}
.ugc-tile:hover { transform: scale(1.03); }
.ugc-tile:hover .ugc-overlay { opacity: 1; }
.ugc-bg { display: none; }
.ugc-overlay {
  position: absolute;
  inset: 0;
  background: rgba(12,24,71,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .25s ease-out;
}
.ugc-overlay-ico { color: var(--surface); font-size: 22px; }
.ugc-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 22px;
  padding: 16px 22px;
  background: var(--surf-low);
  border-radius: var(--r-md);
}
.ugc-cta-txt { font-size: 13px; font-weight: 300; color: var(--mute); }
.ugc-cta-txt strong { color: var(--navy); font-weight: 700; }

/* UGC tile colours */
.ug1 { background: linear-gradient(145deg, var(--tint-navy), var(--base-navy)); }
.ug2 { background: linear-gradient(145deg, var(--tint-bronze), var(--base-bronze)); }
.ug3 { background: linear-gradient(145deg, var(--tint-forest), var(--base-forest)); }
.ug4 { background: linear-gradient(145deg, var(--tint-plum), var(--base-plum)); }
.ug5 { background: linear-gradient(145deg, var(--tint-sage), var(--base-sage)); }
.ug6 { background: linear-gradient(145deg, var(--tint-sepia), var(--base-sepia)); }

/* ── BRAND STORY ── */
.story-box {
  background: var(--surf-low);
  border-radius: var(--r-md);
  padding: var(--section-padding-y) var(--section-padding-x);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 52px;
  align-items: center;
}
.s-kicker { font-family: var(--serif); font-size: 12px; font-style: italic; color: var(--gold-d); letter-spacing: .14em; margin-bottom: 10px; }
.s-ttl { font-family: var(--cinzel); font-size: clamp(19px, 2.1vw, 24px); font-weight: 400; color: var(--navy); line-height: 1.2; margin-bottom: 14px; }
.s-p { font-size: 13px; font-weight: 300; color: var(--mute); line-height: 1.8; margin-bottom: 22px; }
.s-stats { display: flex; gap: 28px; }.ss-l
.ss-n { font-family: var(--cinzel); font-size: 22px !important; font-weight: 400; color: var(--navy); }
.s-btn-wrap {
    margin-top: 20px;
}`````
.ss-l { font-family: var(--body); font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-50); margin-top: 3px; }
.s-imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.s-video,
.story-video {
    width: 100%;
    height: 100%;
}

.story-video {
    
    object-fit: cover;
    border-radius: 20px; /* Optional */
}
.s-img { height: 130px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; font-size: 32px; }
.si1 { background: linear-gradient(135deg, var(--tint-navy), var(--base-navy)); opacity: .5; }
.si2 { background: linear-gradient(135deg, var(--tint-bronze), var(--base-bronze)); opacity: .5; }
.si3 { background: linear-gradient(135deg, var(--tint-sage), var(--base-sage)); opacity: .5; }
.si4 { background: linear-gradient(135deg, var(--tint-plum), var(--base-plum)); opacity: .5; }

/* ── FOOTER ── */
footer { background: var(--navy-d); }
.f-top {
  max-width: 1400px;
  margin: 0 auto;
  padding: 52px var(--section-padding-x) 36px;
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr 1.25fr;
  gap: 32px;
  border-bottom: 1px solid rgba(253,248,245,.07);
}
.f-brand-name { font-family: var(--cinzel); font-size: 14px; font-weight: 400; color: var(--gold); margin-bottom: 3px; }
.f-brand-tag { font-family: var(--serif); font-size: 10px; font-style: italic; color: rgba(215,181,109,.42); margin-bottom: 12px; }
.f-desc { font-size: 11px; font-weight: 300; color: rgba(253,248,245,.35); line-height: 1.7; margin-bottom: 16px; }
.f-soc { display: flex; gap: 7px; }
.fsb {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(253,248,245,.1);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  text-decoration: none;
  color: rgba(253,248,245,.4);
  transition: border-color .2s, color .2s;
}
.fsb:hover { border-color: var(--gold); color: var(--gold); }
.f-col-ttl { font-size: 9px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-d); margin-bottom: 12px; }
.f-lnks { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.f-lnks a { font-size: 12px; color: rgba(253,248,245,.38); text-decoration: none; transition: color .2s; }
.f-lnks a:hover { color: rgba(253,248,245,.82); }
.f-email input {
  width: 100%;
  font-family: var(--body);
  font-size: 12px;
  padding: 11px 14px;
  border-radius: var(--r-md);
  border: 1px solid rgba(253,248,245,.1);
  background: rgba(253,248,245,.05);
  color: rgba(253,248,245,.8);
  outline: none;
  margin-bottom: 7px;
  transition: border-color .2s, box-shadow .2s;
}
.f-email input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(215,181,109,.15);
}
.f-email input::placeholder { color: rgba(253,248,245,.28); }
.f-sub-btn {
  width: 100%;
  font-family: var(--body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--gold);
  color: var(--navy);
  border: none;
  border-radius: var(--r-pill);
  padding: 11px;
  cursor: pointer;
  transition: background .18s;
}
.f-sub-btn:hover { background: var(--gold-l); }
.f-note { font-family: var(--serif); font-size: 10px; font-style: italic; color: rgba(253,248,245,.22); margin-top: 7px; }

.f-bot {
  max-width: 1400px;
  margin: 0 auto;
  padding: 16px var(--section-padding-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10px;
  color: rgba(253,248,245,.22);
  gap: 16px;
}
.f-bot a { color: rgba(253,248,245,.32); text-decoration: none; }
.f-bot a:hover { color: rgba(253,248,245,.7); }
.f-pay { display: flex; gap: 5px; }
.fpb { background: rgba(253,248,245,.06); border: 1px solid rgba(253,248,245,.07); border-radius: 3px; padding: 3px 7px; font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(253,248,245,.32); }

/* ── BACK TO TOP ── */
.btt {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 300;
  width: 42px;
  height: 42px;
  background: var(--navy);
  color: var(--gold);
  border: 1px solid rgba(215,181,109,.25);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s, transform .2s;
  box-shadow: 0 4px 16px rgba(12,24,71,.2);
}
.btt.show { opacity: 1; pointer-events: all; }
.btt:hover { transform: translateY(-2px); }

/* ── ANIMATIONS ── */
@keyframes up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Scroll-reveal — view() only, no scroll-linked parallax ── */
@supports (animation-timeline: view()) {
  .section, .cats-sec, .brands-trust, .ugc-strip {
    animation: fade-in-up cubic-bezier(0.25, 1, 0.5, 1) both;
    animation-timeline: view();
    animation-range: entry 5% cover 25%;
  }
  @keyframes fade-in-up {
    from { opacity: 0; transform: translateY(28px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

/* Button interactions — ease-out-quart, no bounce */
.btn-gold, .btn-navy, .btn-ghost_1, .pc-add, .search-btn, .f-sub-btn {
  transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1), background 0.2s ease-out, box-shadow 0.25s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.2s ease-out, color 0.2s ease-out !important;
}
.btn-gold:active, .btn-navy:active, .btn-ghost_1:active, .pc-add:active, .search-btn:active, .f-sub-btn:active {
  transform: scale(0.96) !important;
}

/* ── RESPONSIVE ── */
@media (max-width: 1100px) {
  .hero-inner { padding: 0 28px; }
  .hero-l { padding: 88px 0 72px; }
  .prod-grid { grid-template-columns: repeat(4, 1fr); }
  .f-top { grid-template-columns: 1fr 1fr 1fr 1fr; }
  .ugc-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 768px) {

  .wrap {
    padding-left: var(--section-padding-x-mobile);
    padding-right: var(--section-padding-x-mobile);
  }
  .nav-cats { display: none; }
  .nav-inner { padding: 0 var(--section-padding-x-mobile); }
.stats-inner { grid-template-columns: 1fr 1fr; }
  .stat { border-bottom: 1px solid var(--outline); }
  .cats-sec { padding: var(--section-padding-y-mobile) var(--section-padding-x-mobile) !important; }
  .cat-grid { grid-template-columns: repeat(4, 1fr); }
  .cat-ring { width: 170px; height: 170px; }
  .cat-lbl { font-size: 12px; }
  .section { padding: var(--section-padding-y-mobile) 0; }
  .section .wrap {
    padding-left: var(--section-padding-x-mobile);
    padding-right: var(--section-padding-x-mobile);
  }
  .arrivals-grid { grid-template-columns: 1fr; }
  .arr-main { min-height: 280px; }
  .prod-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .gift-grid { grid-template-columns: 1fr 1fr; }
  .budget-grid { grid-template-columns: 1fr; }
  .quiz-strip { grid-template-columns: 1fr; gap: 28px; padding: var(--section-padding-y-mobile) var(--section-padding-x-mobile); }
  .story-box { grid-template-columns: 1fr; gap: 28px; padding: var(--section-padding-y-mobile) var(--section-padding-x-mobile); }
  .s-imgs { display: none; }
  .ugc-grid { grid-template-columns: repeat(3, 1fr); }
  .brands-scroll { justify-content: center; }
  .tcard-grid { grid-template-columns: 1fr !important; }
  .f-top { grid-template-columns: 1fr 1fr; gap: 24px; padding: 36px var(--section-padding-x-mobile) 28px; }
  .f-bot { flex-direction: column; text-align: center; padding: 14px var(--section-padding-x-mobile); gap: 10px; }
  .offer-box { flex-direction: column; align-items: flex-start; padding: 28px; }
  .nudge-bar { flex-wrap: wrap; padding: 10px 20px; gap: 10px; }
  .nudge-bar-outer { min-width: 100%; }
}
@media (max-width: 480px) {
  .cat-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  /* .cat-ring { width: 120px; height: 120px; } */
  .prod-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .gift-grid { grid-template-columns: 1fr; }
  .ugc-grid { grid-template-columns: repeat(3, 1fr); }
  .f-top { grid-template-columns: 1fr; }
}

/* ── TRENDING THIS WEEK ── */
.trending-track-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
  cursor: grab;
}
.trending-track-wrap:active { cursor: grabbing; }
.trending-track-wrap::-webkit-scrollbar { display: none; }
.trending-track {
  display: flex;
  gap: 20px;
  padding: 0 max(40px, calc((100vw - 1400px) / 2 + 40px)) 4px;
  width: max-content;
}
.trending-track .pcard {
  width: 240px;
  flex-shrink: 0;
  scroll-snap-align: start;
}
.trending-track .pcard-img { height: 220px; }
.trend-nav { display: flex; gap: 8px; }
.trend-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: var(--warm-white);
  color: var(--navy);
  font-size: 15px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .2s cubic-bezier(0.25,1,0.5,1), background .2s;
  flex-shrink: 0;
}
.trend-btn:hover { border-color: var(--gold-bdr); background: var(--warm-off); box-shadow: var(--shadow-sm); }
.pcard-img:has(.trend-badge-fire) .pc-disc {
  left: auto;
  right: 10px;
}
.trend-badge-fire {
  position: absolute;
  top: 10px; left: 10px;
  background: var(--error);
  color: var(--warm-white);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  z-index: 4;
}
@media (max-width: 768px) {
  .trending-track { padding: 0 20px 4px; }
  .trending-track .pcard { width: 200px; }
  .trending-track .pcard-img { height: 180px; }
}

/* ── EXPERT HELP STRIP ── */
.expert-strip { background: var(--navy-d); }
.expert-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 360px;
}
.expert-panel {
  padding: var(--section-padding-y) var(--section-padding-x);
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  overflow: hidden;
}
.expert-panel-wa { background: var(--navy); }
.expert-panel-wa::before {
  content: '';
  position: absolute;
  right: -50px; bottom: -50px;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(37,211,102,.06) 0%, transparent 65%);
  pointer-events: none;
}
.expert-panel-store { background: oklch(13% 0.04 260); }
.expert-panel-store::before {
  content: '';
  position: absolute;
  left: -50px; top: -50px;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(215,181,109,.06) 0%, transparent 65%);
  pointer-events: none;
}
.exp-icon {
  width: 50px; height: 50px;
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; flex-shrink: 0;
}
.exp-icon-wa    { background: rgba(37,211,102,.1); }
.exp-icon-store { background: rgba(215,181,109,.1); }
.exp-ey { font-family: var(--serif); font-size: 12px; font-style: italic; color: var(--gold-d); letter-spacing: .14em; }
.exp-ttl { font-family: var(--cinzel); font-size: clamp(17px, 1.8vw, 22px); font-weight: 400; color: oklch(97% 0.012 60); line-height: 1.2; }
.exp-sub { font-size: 13px; font-weight: 300; color: rgba(253,248,245,.45); line-height: 1.75; max-width: 42ch; }
.btn-wa {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--wa);
  color: oklch(99% 0.005 140);
  padding: 12px 26px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-decoration: none;
  transition: background .2s cubic-bezier(0.25,1,0.5,1), transform .2s cubic-bezier(0.25,1,0.5,1);
  align-self: flex-start;
  margin-top: 4px;
}
.btn-wa:hover { background: #1ebc5c; transform: translateY(-2px); }
.exp-store-details { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.exp-store-row {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 12px; color: rgba(253,248,245,.42); line-height: 1.5;
}
.exp-store-row strong { color: rgba(253,248,245,.8); font-weight: 600; display: block; }
.exp-store-ico { font-size: 14px; flex-shrink: 0; margin-top: 1px; }
.exp-store-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid rgba(215,181,109,.22);
  color: var(--gold-l);
  padding: 12px 26px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-decoration: none;
  transition: border-color .2s ease-out, background .2s ease-out, color .2s ease-out;
  align-self: flex-start;
  margin-top: 4px;
}
.exp-store-link:hover { border-color: var(--gold); background: rgba(215,181,109,.08); }
@media (max-width: 768px) {
  .expert-inner { grid-template-columns: 1fr; }
  .expert-panel { padding: var(--section-padding-y-mobile) var(--section-padding-x-mobile); }
}

/* ── HARDEN: Keyboard mega menu ── */
.nav-cats > li:focus-within .mega {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* ── HARDEN: Screen-reader utility ── */
.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;
}

/* ── HARDEN: Skip link ── */
.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  background: var(--navy);
  color: var(--gold);
  padding: 12px 28px;
  font-family: var(--body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-decoration: none;
  z-index: 9999;
  border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { top: 0; outline: 2px solid var(--gold); outline-offset: 2px; }

/* ── HARDEN: Text overflow protection ── */
.pc-name       { overflow-wrap: break-word; word-break: break-word; }
.arr-name      { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gift-desc     { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tc-txt        { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.exp-sub       { overflow-wrap: break-word; }
.arr-card-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nb-name       { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; }

/* ── HARDEN: Form validation ── */
.f-email input:invalid:not(:placeholder-shown) { border-color: var(--error); }
.f-email input:invalid:not(:placeholder-shown):focus { box-shadow: 0 0 0 3px rgba(186,26,26,.12); border-color: var(--error); }

/* ── BOLDER + TYPESET: Hero — full-bleed, white, italic gold line dominates ── */
.h1-main, .h1-end {
  font-size: 108px;
  letter-spacing: -0.03em;
  line-height: 1.04;
}
.h1-italic {
  font-size: 156.8px;;
  letter-spacing: -0.015em;
  line-height: 1.05;
}
.hero-kicker {
  letter-spacing: .22em;
  text-transform: uppercase;
  font-size: 11px;
  font-style: normal;
}

/* ── BOLDER: Stats — numbers command the line, not hide in it ── */
.stats-editorial { font-size: clamp(18px, 2vw, 26px); }
.stats-editorial strong {
  font-size: clamp(28px, 3.2vw, 40px);
  letter-spacing: -0.03em;
  vertical-align: baseline;
}

/* ── BOLDER: Brands strip — confident, not whispered ── */
.bb-name { font-size: 14px; letter-spacing: .04em; color: var(--navy); opacity: 1; }
.bb-cat  { font-size: 11px; }
.brands-trust { padding: 40px; margin-top:30px;}
.brand-box { padding: 18px 28px; }

/* ── BOLDER: Category rings — more presence ── */

.cat-lbl  { font-size: 11px; letter-spacing: .07em; }

/* ── BOLDER: Section headings — tighten eyebrow, expand headline gap ── */
h2.sec-ttl { letter-spacing: -0.025em; line-height: 1.1; }
.ey { font-size: 12px; letter-spacing: .18em; margin-bottom: 8px; }

/* ── BOLDER: Offer banner headline — command the space ── */
.offer-ttl { font-size: clamp(22px, 2.8vw, 34px); }

/* ── BOLDER: Expert strip — headlines feel architectural ── */
.exp-ttl   { letter-spacing: -0.02em; line-height: 1.15; }

/* ── BOLDER: Quiz headline ── */
.quiz-ttl  { letter-spacing: -0.02em; }

/* ── BOLDER: Arrival main — name dominates the card ── */
.arr-name  { font-size: 22px; font-weight: 400; }
.arr-price { font-size: 24px; }

/* ── LAYOUT: Fluid section spacing — break monotonous 72px repeat ── */
.section { padding: var(--section-padding-y) 0; }

/* ── LAYOUT: Asymmetric bestsellers — featured first card ── */
.featured-grid {
  grid-template-columns: 1.45fr 1fr 1fr 1fr !important;
  align-items: start;
}
.featured-grid > .pcard:first-child .pcard-img { height: 310px; }
.featured-grid > .pcard:first-child .pc-name   { font-size: 14px; line-height: 1.4; }
.featured-grid > .pcard:first-child .p-now      { font-size: 21px; }
@media (max-width: 1100px) { .featured-grid { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 768px)  { .featured-grid { grid-template-columns: 1fr 1fr !important; } }
@media (max-width: 768px)  { .featured-grid > .pcard:first-child .pcard-img { height: 200px; } }

/* ── LAYOUT: Testimonial variety — elevated first card ── */
.tcard-grid > .tcard:nth-child(1) {
  border-color: rgba(215,181,109,.28) !important;
  box-shadow: var(--shadow-sm) !important;
}
.tcard-grid > .tcard:nth-child(1) .tc-txt { font-size: 14px; }
.tcard-grid > .tcard:nth-child(1) .tc-q   { font-size: 44px; opacity: .35; }
.tcard-grid > .tcard:nth-child(2) { margin-top: 32px; }

/* ── LAYOUT: Budget grid — weighted center ── */
.budget-grid { grid-template-columns: 1fr 1fr 1fr !important; }
@media (max-width: 768px) { .budget-grid { grid-template-columns: 1fr !important; } }


/* ── ADAPT: Mobile navigation ── */
.nav-mob-btn {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid var(--line);
  background: var(--warm-off);
  border-radius: var(--r-sm);
  align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--navy);
  flex-shrink: 0;
  transition: background .18s, border-color .18s;
}
.nav-mob-btn:hover { background: var(--cream-soft); border-color: var(--line-gold); }
.nav-mob-overlay {
  display: none;
  position: fixed; inset: 0;
  background: oklch(15% 0.04 260 / 0.45);
  z-index: 240;
  backdrop-filter: blur(2px);
}
.nav-mob-overlay.nav-open { display: block; }

@media (max-width: 768px) {
  
  /* Show hamburger */
  .nav-mob-btn { display: flex; }

  /* Convert nav-cats to slide drawer */
  .nav-cats {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    position: fixed;
    top: 0; bottom: 0; left: 0;
    width: min(300px, 88vw);
    background: var(--warm-white);
    z-index: 250;
    padding: 80px 0 40px;
    overflow-y: auto;
    border-right: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    transform: translateX(-110%);
    transition: transform .32s cubic-bezier(0.25, 1, 0.5, 1);
    gap: 0;
  }
  .nav-cats.nav-open { transform: translateX(0); }
  .nav-cats > li { width: 100%; }
  .nav-cats > li > a {
    padding: 16px 24px;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    opacity: 1;
    font-size: 13px;
    width: 100%;
    justify-content: space-between;
  }
  .nav-cats > li > a:hover::after { width: 0; }

  /* Mega menus inline inside drawer */
  .mega {
    position: static;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    box-shadow: none;
    border: none;
    border-top: 1px solid var(--line);
    border-radius: 0;
    min-width: 100%;
    width: 100%;
    padding: 8px 16px 12px;
  }
  .nav-cats > li:not(:hover):not(:focus-within) .mega { display: none; }
  .mega-grid { grid-template-columns: 1fr 1fr; gap: 2px; }

  /* Drawer close button */
  .nav-mob-close {
    display: flex;
    position: absolute;
    top: 16px; right: 16px;
    width: 44px; height: 44px;
    align-items: center; justify-content: center;
    border: 1px solid var(--line);
    background: var(--warm-off);
    border-radius: var(--r-sm);
    font-size: 18px;
    cursor: pointer;
    color: var(--navy);
  }

  /* iOS input zoom prevention — font-size must be >= 16px on mobile */
  .search-box input,
  .f-email input { font-size: 16px; }

  /* Touch targets */
  .nib { width: 44px; height: 44px; }
  .tb  { min-height: 44px; }
}

.nav-mob-close { display: none !important; }
@media (min-width: 1279px) {
}

/* ══════════════════════════════════════
   ANIMATE: New Arrivals Carousel
══════════════════════════════════════ */
@keyframes arr-ticker-run {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Dual image layers for cross-fade */
.arr-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  will-change: opacity;
}
.arr-img-a { opacity: 1; }
.arr-img-b { opacity: 0; }

/* Content text fade during swap */
.arr-content {
  transition: opacity .28s ease-out, transform .28s cubic-bezier(0.25,1,0.5,1);
}
.arr-content.arr-exit {
  opacity: 0;
  transform: translateY(-9px);
}

/* Progress ticker */
.arr-ticker {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: rgba(215,181,109,.15);
  z-index: 6;
}
.arr-ticker-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold-d), var(--gold));
  transform: scaleX(0);
  transform-origin: left;
}

/* Navigation dots */
.arr-dots {
  position: absolute;
  bottom: 18px;
  right: 20px;
  display: flex;
  gap: 7px;
  z-index: 6;
}
.arr-dot {
  width: 6px; height: 6px;
  border-radius: 3px;
  background: rgba(215,181,109,.3);
  cursor: pointer;
  border: none;
  padding: 0;
  flex-shrink: 0;
  transition: background .25s, width .3s cubic-bezier(0.25,1,0.5,1);
}
.arr-dot.active { background: var(--gold); width: 20px; }
.arr-dot:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Side card swap fade */
.arr-card { transition: opacity .24s ease-out, transform .32s cubic-bezier(0.25,1,0.5,1), background .2s ease-out; }
.arr-card.arr-swap { opacity: 0; transform: translateY(5px); }

/* ══════════════════════════════════════
   ANIMATE: Category rings stagger
══════════════════════════════════════ */
.cat-item {
  opacity: 1;
  transform: scale(.82) translateY(12px);
  transition: opacity .42s cubic-bezier(0.25,1,0.5,1), transform .42s cubic-bezier(0.25,1,0.5,1);
}
.cat-item.cat-in { opacity: 1; transform: scale(1) translateY(0); }

/* ══════════════════════════════════════
   ANIMATE: Budget card entrance stagger
══════════════════════════════════════ */
.bcard {
  opacity: 0;
  transform: translateY(18px);
  /* include hover-needed props so the override doesn't break :hover */
  transition: opacity .38s cubic-bezier(0.25,1,0.5,1), transform .38s cubic-bezier(0.25,1,0.5,1), box-shadow .25s ease-out, border-color .25s ease-out;
}
.bcard.b-in { opacity: 1; transform: translateY(0); }

/* ── WHY COOK N SERVE ── */
.why-section { padding: var(--section-padding-y) var(--section-padding-x); background: var(--warm-white); }
.why-inner { max-width: 1140px; margin: 0 auto; }
.why-head { text-align: center; margin-bottom: 56px; }
.why-ey { font-family: var(--serif); font-size: 11px; font-style: italic; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-d); margin-bottom: 8px; }
.why-ttl { font-family: var(--cinzel); font-size: clamp(1.55rem,2.8vw,2.1rem); font-weight: 400; color: var(--navy); }
.why-pillars { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.why-pillar { padding: 40px 32px 36px; position: relative; }
.why-pillar + .why-pillar { border-left: 1px solid var(--line); }
.why-num { font-family: var(--serif); font-size: 51px; font-style: italic; color: var(--gold); opacity: .22; line-height: 1; margin-bottom: 20px; display: block; }
.why-ico { width: 40px; height: 40px; border-radius: 50%; background: var(--navy); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; color: var(--gold); }
.why-h { font-family: var(--cinzel); font-size:13px; font-weight: 400; letter-spacing: .04em; color: var(--navy); margin-bottom: 8px; }
.why-p { font-size: 12px; color: var(--ink-70); line-height: 1.65; }

/* ── FAQ ── */
.faq-section { padding: var(--section-padding-y) var(--section-padding-x); background: var(--cream-bg); }
.faq-inner { max-width: 760px; margin: 0 auto; }
.faq-ey { font-family: var(--serif); font-size: 11px; font-style: italic; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-d); margin-bottom: 8px; text-align: center; }
.faq-ttl { font-family: var(--cinzel); font-size: clamp(1.55rem,2.8vw,32px); font-weight: 400; color: var(--navy); text-align: center; margin-bottom: 44px; }
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 2px; background: none; border: none; text-align: left; font-family: var(--body); font-size: 15px; font-weight: 600; color: var(--navy); cursor: pointer; transition: color .18s; }
.faq-btn:hover { color: var(--gold-d); }
.faq-ico { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--navy); display: flex; align-items: center; justify-content: center; color: var(--gold); font-size: 16px; line-height: 1; transition: background .18s, transform .28s cubic-bezier(0.25,1,0.5,1); }
.faq-item.open .faq-ico { background: var(--gold); color: var(--navy); transform: rotate(45deg); }
.faq-ans { overflow: hidden; max-height: 0; transition: max-height .34s cubic-bezier(0.25,1,0.5,1); }
.faq-item.open .faq-ans { max-height: 220px; }
.faq-ans-inner { padding: 2px 2px 20px; font-size: 14px; color: var(--ink-70); line-height: 1.7; }

/* ── PROFESSIONAL / HORECA SECTION ── */
.pro-section {
  display: grid;
  grid-template-columns: 1fr 42%;
  min-height: 500px;
  background: #060e28;
  overflow: hidden;
}
.pro-text {
  padding: var(--section-padding-y) var(--section-padding-x);
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 600px;
}
.pro-label {
  font-family: var(--body);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
  opacity: .85;
}
.pro-h {
  font-family: var(--cinzel);
  font-size: 31px;
  font-weight: 400;
  color: var(--text-on-navy);
  line-height: 1.28;
  margin-bottom: 16px;
}
.pro-p {
  font-family: var(--body);
  font-size: 14px;
  color: rgba(240,222,217,.6);
  line-height: 1.7;
  margin-bottom: 28px;
}
.pro-points {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 36px;
}
.pro-points li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--body);
  font-size: 12px;
  color: rgba(240,222,217,.72);
  line-height: 1.45;
}
.pro-points li::before {
  content: '';
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 1px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' stroke='%23D7B56D' stroke-width='1.2' fill='none'/%3E%3Cpath d='M4.5 8l2.5 2.5 4.5-5' stroke='%23D7B56D' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") center/contain no-repeat;
}
.pro-points li strong { color: rgba(240,222,217,.92); font-weight: 600; }
.pro-ctas { display: flex; flex-direction: column; gap: 12px; }
.btn-pro-primary {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--body); font-size: 12px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  background: var(--gold); color: var(--navy-d);
  border: none; border-radius: var(--r-pill);
  padding: 14px 30px; text-decoration: none;
  align-self: flex-start;
  transition: background .18s, transform .2s cubic-bezier(0.25,1,0.5,1);
}

.btn-pro-primary:hover { background: var(--gold-l); transform: translateY(-1px); }
.btn-pro-wa {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--body); font-size: 11px; font-weight: 500;
  color: rgba(240,222,217,.48); text-decoration: none;
  align-self: flex-start;
  transition: color .18s;
}
.btn-pro-wa:hover { color: rgba(240,222,217,.82); }
.pro-img {
  position: relative;
  overflow: hidden;
}
.pro-img img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
}

/* Responsive */
@media (max-width: 900px) {
  .pro-section { grid-template-columns: 1fr; }
  .pro-img { height: 300px; order: -1; }
  .pro-text {
    padding: var(--section-padding-y-mobile) var(--section-padding-x-mobile);
    max-width: 100%;
  }
}
@media (max-width: 480px) {
  .pro-text { padding: var(--section-padding-y-mobile) var(--section-padding-x-mobile); }
  .pro-img { height: 240px; }
}

/* ── SHOP THE KITCHEN ── */
.shop-kitchen { position: relative; background: var(--navy-d); overflow:hidden;}
.sk-scene { position: relative; aspect-ratio:16/4;}
.sk-img {
  display: block;
   width: 100%;
  height: 100%;
  object-fit: cover; 
}
.sk-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(100deg,
    rgba(6,14,40,.7) 0%,
    rgba(6,14,40,.25) 38%,
    rgba(6,14,40,.06) 60%,
    rgba(6,14,40,.18) 100%);
  pointer-events: none;
}
.sk-header {
  position: absolute; top: 44px; left: 48px; z-index: 10;
}
.sk-ey {
  font-family: var(--serif); font-size: 11px; font-style: italic;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold); opacity: .8; margin-bottom: 7px;
}
.sk-ttl {
  font-family: var(--cinzel); font-size: clamp(1.6rem,3vw,2.4rem);
  font-weight: 400; color: var(--text-on-navy); line-height: 1.2;
  text-shadow: 0 2px 12px rgba(6,14,40,.4);
}
.sk-legend {
  position: absolute; bottom: 28px; left: 48px; z-index: 10;
  font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(240,222,217,.42); display: flex; align-items: center; gap: 8px;
}
.sk-legend-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--gold); opacity: .8; flex-shrink: 0;
}

/* ── Hotspot pin ── */
.sk-spot {
  position: absolute; z-index: 20;
  transform: translate(-50%, -50%);
}
.sk-pin {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--gold);
  border: 2.5px solid rgba(253,248,245,.9);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; position: relative; z-index: 2;
  transition: transform .22s cubic-bezier(0.25,1,0.5,1), box-shadow .22s;
  color: var(--navy-d);
  z-index:1001;
}
.sk-pin-ico{
  font-size: 14px;
    color: #fff;
}

.sk-spot:hover,
.sk-spot:focus-within,
.sk-spot.sk-active {
    z-index: 999;
}

.sk-spot:hover .sk-pin,
.sk-spot:focus-within .sk-pin,
.sk-spot.sk-active .sk-pin {
  transform: scale(1.18);
  box-shadow: 0 0 0 4px rgba(215,181,109,.3);
}
.sk-pulse {
  position: absolute; top: 50%; left: 50%;
  width: 28px; height: 28px;
  transform: translate(-50%,-50%);
  border-radius: 50%;
  background: rgba(215,181,109,.5);
  animation: sk-pulse 2.4s ease-out infinite;
  pointer-events: none; z-index: 1;
}
.sk-pulse-b { animation-delay: 1.2s; }
@keyframes sk-pulse {
  0%   { transform: translate(-50%,-50%) scale(1); opacity: .65; }
  100% { transform: translate(-50%,-50%) scale(2.8); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sk-pulse { animation: none; }
}

/* ── Tooltip card ── */
.sk-card {
  position: absolute;
  background: rgba(6,14,40,.96);
  border: 1px solid rgba(215,181,109,.28);
  border-radius: var(--r-md);
  padding: 16px 18px 14px;
  min-width: 196px; max-width: 218px;
  box-shadow: 0 20px 50px rgba(6,14,40,.7);
  opacity: 0; pointer-events: none;
  transition: opacity .22s ease-out, transform .22s cubic-bezier(0.25,1,0.5,1);
  z-index: 1000; backdrop-filter: blur(4px);
}
.sk-spot:hover .sk-card,
.sk-spot:focus-within .sk-card,
.sk-spot.sk-active .sk-card { opacity: 1; pointer-events: all; }

/* Direction modifiers — default: card above pin */
.sk-card { bottom: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(6px); }
.sk-spot:hover .sk-card, .sk-spot:focus-within .sk-card, .sk-spot.sk-active .sk-card { transform: translateX(-50%) translateY(0); }

.sk-spot--r  .sk-card { bottom: auto; top: 50%; left: calc(100% + 14px); transform: translateY(calc(-50% + 6px)); }
.sk-spot--r:hover  .sk-card, .sk-spot--r:focus-within  .sk-card, .sk-spot--r.sk-active  .sk-card { transform: translateY(-50%); }

.sk-spot--l  .sk-card { bottom: auto; top: 50%; left: auto; right: calc(100% + 14px); transform: translateY(calc(-50% + 6px)); }
.sk-spot--l:hover  .sk-card, .sk-spot--l:focus-within  .sk-card, .sk-spot--l.sk-active  .sk-card { transform: translateY(-50%); }

.sk-spot--b  .sk-card { bottom: auto; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(-6px); }
.sk-spot--b:hover  .sk-card, .sk-spot--b:focus-within  .sk-card, .sk-spot--b.sk-active  .sk-card { transform: translateX(-50%) translateY(0); }

.sk-spot--bl .sk-card { bottom: auto; top: calc(100% + 14px); left: auto; right: -8px; transform: translateY(-6px); }
.sk-spot--bl:hover .sk-card, .sk-spot--bl:focus-within .sk-card, .sk-spot--bl.sk-active .sk-card { transform: translateY(0); }

.sk-card-ico {
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(215,181,109,.1); border: 1px solid rgba(215,181,109,.22);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 9px; color: var(--gold);
}
.sk-card-ttl {
  font-family: var(--cinzel); font-size: 1.6rem; font-weight: 400;
  letter-spacing: .05em; color: var(--text-on-navy); margin-bottom: 3px;
}
.sk-card-sub {
  font-size: 1rem; color: rgba(240,222,217,.48);
  line-height: 1.55; margin-bottom: 11px;
}
.sk-card-cta {
  font-family: var(--body); font-size: 8.5px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--gold); text-decoration: none;
  display: inline-flex; align-items: center; gap: 5px;
  transition: color .15s;
}
.sk-card-cta:hover { color: var(--gold-l); }
.sk-card-rule { border: none; border-top: 1px solid rgba(215,181,109,.12); margin: 10px 0 10px; }

/* Mobile: tap to toggle */
@media (max-width: 768px) {

  .sk-header { top: 18px; left: 18px; }
  .sk-legend { display: none; }
  .sk-pin { width: 24px; height: 24px; }
  .sk-pulse { width: 24px; height: 24px; }
  .sk-card { min-width: 170px; max-width: 190px; font-size: 0.75rem; }
}


/* ── SOCIAL ICON OVERRIDE ── */
.fsb { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(215,181,109,.32); display: flex; align-items: center; justify-content: center; text-decoration: none; color: rgba(215,181,109,.7); transition: border-color .2s, color .2s, background .2s; }
.fsb:hover { border-color: var(--gold); color: var(--gold); background: rgba(215,181,109,.07); }

/* ── RESPONSIVE: NEW SECTIONS ── */
@media (max-width: 960px) {
  .why-pillars { grid-template-columns: 1fr 1fr; }
  .why-pillar:nth-child(odd) { border-left: none; }
  .why-pillar:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 768px) {
  .why-section { padding: var(--section-padding-y-mobile) var(--section-padding-x-mobile); }
  .faq-section { padding: var(--section-padding-y-mobile) var(--section-padding-x-mobile); }
  .horeca-band { padding: var(--section-padding-y-mobile) var(--section-padding-x-mobile); }
  .f-top { grid-template-columns: 1fr 1fr; }
  .ann { padding: 0 16px; }
  .ann-item:nth-child(n+3) { display: none; }
  .ann-soc { padding-left: 12px; }
}
@media (max-width: 480px) {
  .why-pillars { grid-template-columns: 1fr; }
  .why-pillar + .why-pillar { border-left: none; border-top: 1px solid var(--line); }
  .why-pillar:nth-child(n+3) { border-top: 1px solid var(--line); }
  .horeca-acts { flex-direction: column; align-items: flex-start; }
}
/* ─────────────────────────────────────────────
   Cook N Serve — Shared Design System
   All pages must link this before page-specific styles.
   ───────────────────────────────────────────── */
/* ── TOKENS ── */
:root {
    --navy: oklch(13% 0.085 264);
    --navy-d: oklch(8% 0.056 264);
    --navy-m: oklch(21% 0.098 264);
    --gold: oklch(77% 0.098 79);
    --gold-d: oklch(65% 0.104 73);
    --gold-l: oklch(88% 0.060 79);
    --gold-bg: oklch(77% 0.098 79 / 0.12);
    --cream-bg: oklch(97% 0.01 60);
    --warm-white: oklch(99% 0.005 60);
    --warm-off: oklch(96% 0.012 60);
    --cream-soft: oklch(95% 0.014 60);
    --ink: oklch(15% 0.04 260);
    --ink-70: oklch(15% 0.04 260 / 0.7);
    --ink-50: oklch(15% 0.04 260 / 0.5);
    --ink-30: oklch(15% 0.04 260 / 0.3);
    --line: oklch(13% 0.085 264 / 0.08);
    --line-gold: oklch(77% 0.098 79 / 0.35);
    --error: oklch(41% 0.19 27);
    --suc: oklch(41% 0.12 147);
    --text-on-navy: oklch(96.5% 0.012 65);
    --gold-text: oklch(36% 0.10 72);
    --cinzel: 'DM Serif Display', serif;
    --serif: 'Cormorant Garamond', Georgia, serif;
    --body: 'Inter', -apple-system, 'Helvetica Neue', sans-serif;
    --r-sm: 10px;
    --r-md: 16px;
    --r-lg: 22px;
    --r-pill: 100px;
    --shadow-xs: 0 1px 3px oklch(13% 0.085 264 / 0.04);
    --shadow-sm: 0 2px 8px oklch(13% 0.085 264 / 0.06);
    --shadow-md: 0 8px 24px oklch(13% 0.085 264 / 0.09);
    --shadow-lg: 0 20px 50px oklch(13% 0.085 264 / 0.13);
}

/* ── RESET & BASE ── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--cream-bg);
    color: var(--ink);
    font-family: var(--body);
    font-size: 15px;
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

*:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* ── ANNOUNCE BAR ── */
.ann {
    background: var(--navy-d);
    padding: 0 28px;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    overflow: hidden;
}

.ann-track {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.ann-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: oklch(96.5% 0.012 65 / 0.65);
    border-right: 1px solid oklch(77% 0.098 79 / 0.12);
    white-space: nowrap;
    flex-shrink: 0;
}

.ann-hl {
    color: var(--gold);
}

.ann-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--gold);
    opacity: .5;
    flex-shrink: 0;
}

.ann-soc {
    display: flex;
    align-items: center;
    gap: 2px;
    padding-left: 18px;
    border-left: 1px solid oklch(77% 0.098 79 / 0.12);
    flex-shrink: 0;
}

.ann-soc-lnk {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: oklch(77% 0.098 79 / 0.5);
    text-decoration: none;
    border-radius: 6px;
    transition: color .18s, background .18s;
}

.ann-soc-lnk:hover {
    color: var(--gold);
    background: oklch(77% 0.098 79 / 0.08);
}

/* ── TOGGLE ── */
.toggle-bar {
    background: var(--warm-white);
    border-bottom: 1px solid var(--line);
    display: flex;
    justify-content: center;
    padding: 10px 0;
}

.tw {
    display: inline-flex;
    background: var(--warm-off);
    border: 1.5px solid var(--line-gold);
    border-radius: var(--r-pill);
    padding: 4px;
    gap: 2px;
}

.tb {
    font-family: var(--body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    min-height: 40px;
    padding: 0 28px;
    border-radius: var(--r-pill);
    border: none;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: background .25s, color .25s, box-shadow .25s;
}

.tb.off {
    background: transparent;
    color: var(--ink-50);
}

.tb.off:hover {
    background: oklch(13% 0.085 264 / 0.04);
    color: var(--ink-70);
}

.tb.on {
    background: var(--navy);
    color: var(--gold);
    box-shadow: var(--shadow-sm);
}

/* ── NAV ── */
header {
    position: sticky;
    top: 0;
    z-index: 200;
    background: var(--warm-white);
    box-shadow: var(--shadow-sm);
}

header > nav, .topnav {
    border-bottom: 1px solid var(--line);
}

.nav-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--section-padding-x);
    height: 66px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.nav-brand {
    flex-shrink: 0;
    text-decoration: none;
    display: flex;
    align-items: center;
}

.nav-cats {
    display: flex;
    align-items: center;
    gap: 2px;
    list-style: none;
    flex: 1;
    justify-content: center;
}

.nav-cats > li {
    position: relative;
}

.nav-cats > li > a {
    font-family: var(--body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--navy);
    opacity: .75;
    text-decoration: none;
    padding: 8px 13px;
    border-radius: var(--r-sm);
    display: flex;
    align-items: center;
    gap: 4px;
    position: relative;
    transition: opacity .2s;
    white-space: nowrap;
}

.nav-cats > li > a::after {
    content: "";
    position: absolute;
    bottom: 2px;
    left: 13px;
    width: 0;
    height: 1.5px;
    background: var(--gold);
    transition: width .2s;
}

.nav-cats > li > a:hover {
    opacity: 1;
}

.nav-cats > li > a:hover::after {
    width: calc(100% - 26px);
}

.nav-arr {
    font-size: 8px;
    opacity: .4;
    transition: transform .2s;
    display: inline-block;
}

.nav-cats > li:hover .nav-arr {
    transform: rotate(180deg);
}

.nav-sale {
    color: var(--error) !important;
    opacity: 1 !important;
}

.mega {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    background: var(--warm-white);
    border: 1px solid var(--line);
    border-top: 2px solid var(--gold);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-lg);
    padding: 18px;
    min-width: 420px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s, visibility .2s, transform .2s;
    z-index: 300;
}

.nav-cats > li:hover .mega {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.mega-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 4px;
}

.mega-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: var(--r-sm);
    text-decoration: none;
    transition: background .15s;
}

.mega-item:hover {
    background: var(--warm-off);
}

.mega-ico {
    width: 34px;
    height: 34px;
    border-radius: var(--r-sm);
    background: var(--warm-off);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.mega-name {
    font-family: var(--body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--navy);
}

.nav-acts {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.nib {
    width: 44px;
    height: 44px;
    border-radius: var(--r-sm);
    border: 1px solid var(--line);
    background: var(--warm-off);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    text-decoration: none;
    color: var(--navy);
    transition: background .18s, border-color .18s;
}

.nib:hover {
    background: var(--cream-soft);
    border-color: var(--line-gold);
}

.nbadge {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 16px;
    height: 16px;
    background: var(--gold);
    color: var(--navy);
    border-radius: var(--r-pill);
    font-size: 9px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-mob-btn {
    display: none;
    background: transparent;
    border: none;
}

/* ── SEARCH BAR ── */
.nav-search {
    background: var(--warm-off);
    border-bottom: 2px solid var(--line-gold);
    padding: 9px 0;
}

.nav-search-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--section-padding-x);
}

.nav-search-combo {
    display: flex;
    align-items: center;
    background: var(--warm-white);
    border: 1.5px solid var(--line-gold);
    border-radius: var(--r-pill);
    overflow: hidden;
    transition: border-color .18s, box-shadow .18s;
}

.nav-search-combo:focus-within {
    border-color: var(--navy);
    box-shadow: 0 0 0 3px oklch(13% 0.085 264 / 0.06);
}

.nav-search-cat {
    font-family: var(--body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    color: var(--navy);
    background: transparent;
    border: none;
    border-right: 1.5px solid var(--line-gold);
    padding: 0 32px 0 16px;
    height: 46px;
    cursor: pointer;
    flex-shrink: 0;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23D7B56D' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    min-width: 148px;
}

.nav-search-sep {
    width: 1px;
    height: 22px;
    background: var(--line);
    flex-shrink: 0;
    margin: 0 2px;
}

.nav-search-input {
    flex: 1;
    font-family: var(--body);
    font-size: 14px;
    color: var(--ink);
    background: transparent;
    border: none;
    outline: none;
    padding: 0 16px;
    height: 46px;
    min-width: 0;
}

.nav-search-input::placeholder {
    color: var(--ink-30);
    font-size: 13px;
}

.nav-search-btn {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--navy);
    color: var(--gold);
    font-family: var(--body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    border: none;
    padding: 0 24px;
    height: 46px;
    cursor: pointer;
    border-radius: 0 var(--r-pill) var(--r-pill) 0;
    transition: background .18s;
    white-space: nowrap;
}

.nav-search-btn:hover {
    background: var(--navy-m);
}

.nav-search-btn svg {
    flex-shrink: 0;
}

/* ── BREADCRUMB ── */
.bc {
    background: var(--warm-white);
    border-bottom: 1px solid var(--line);
    padding: 11px 0;
}

.bci {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--section-padding-x);
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    flex-wrap: wrap;
}

.bcl {
    color: var(--ink-50);
    text-decoration: none;
    transition: color .18s;
}

.bcl:hover {
    color: var(--navy);
}

.bcs {
    color: var(--line);
    font-size: 9px;
}

.bcc {
    color: var(--navy);
    font-weight: 700;
}

/* ── FOOTER ── */
.foot {
    background: var(--navy-d);
    border-top: 1px solid oklch(77% 0.098 79 / 0.15);
    padding: 52px 0 28px;
}

.foot-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--section-padding-x);
}

.foot-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 32px;
    margin-bottom: 40px;
}

.foot-brand-name {
    font-family: var(--cinzel);
    font-size: 17px;
    font-weight: 400;
    color: var(--text-on-navy);
    margin-bottom: 4px;
}

.foot-brand-tag {
    font-family: var(--serif);
    font-style: italic;
    font-size: 12px;
    color: oklch(77% 0.098 79 / 0.55);
    margin-bottom: 14px;
}

.foot-desc {
    font-size: 13px;
    color: oklch(96.5% 0.012 65 / 0.38);
    line-height: 1.7;
    max-width: 30ch;
}

.foot-col-ttl {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gold);
    opacity: .7;
    margin-bottom: 14px;
}

.foot-links {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.foot-lnk {
    font-size: 13px;
    color: oklch(96.5% 0.012 65 / 0.42);
    text-decoration: none;
    transition: color .18s;
}

.foot-lnk:hover {
    color: oklch(96.5% 0.012 65 / 0.9);
}

.foot-bottom {
    border-top: 1px solid oklch(77% 0.098 79 / 0.1);
    padding-top: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.foot-copy {
    font-size: 11px;
    color: oklch(96.5% 0.012 65 / 0.28);
}

.foot-soc {
    display: flex;
    gap: 8px;
}

.fsb {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid oklch(77% 0.098 79 / 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: oklch(77% 0.098 79 / 0.5);
    transition: border-color .2s, color .2s, background .2s;
}

.fsb:hover {
    border-color: var(--gold);
    color: var(--gold);
    background: oklch(77% 0.098 79 / 0.07);
}

/* ── SHARED RESPONSIVE ── */
@media (max-width: 768px) {
    .nav-inner {
        padding: 0 var(--section-padding-x-mobile);
    }

    .nav-cats {
        display: none;
    }

    .nav-mob-btn {
        display: flex;
    }

    /* .nav-search {
        display: none;
    } */

    .bci {
        padding: 0 var(--section-padding-x-mobile);
    }

    .foot-grid {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }

    .foot-inner {
        padding: 0 var(--section-padding-x-mobile);
    }
}

@media (max-width: 480px) {
    .ann-item:nth-child(n+3) {
        display: none;
    }

    .foot-grid {
        grid-template-columns: 1fr;
    }
}

/* ── UTILITY ── */
.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;
}

a.nav-brand img {
    max-width: 110px;
}

  border: none;
  border-radius: var(--r-pill);
  padding: 11px;
  cursor: pointer;
  transition: background .18s;
}
.f-sub-btn:hover { background: var(--gold-l); }
.f-note { font-family: var(--serif); font-size: 10px; font-style: italic; color: rgba(253,248,245,.22); margin-top: 7px; }

.f-bot {
  max-width: 1400px;
  margin: 0 auto;
  padding: 16px var(--section-padding-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10px;
  color: rgba(253,248,245,.22);
  gap: 16px;
}
.f-bot a { color: rgba(253,248,245,.32); text-decoration: none; }
.f-bot a:hover { color: rgba(253,248,245,.7); }
.f-pay { display: flex; gap: 5px; }
.fpb { background: rgba(253,248,245,.06); border: 1px solid rgba(253,248,245,.07); border-radius: 3px; padding: 3px 7px; font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(253,248,245,.32); }

/* ── BACK TO TOP ── */
.btt {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 300;
  width: 42px;
  height: 42px;
  background: var(--navy);
  color: var(--gold);
  border: 1px solid rgba(215,181,109,.25);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s, transform .2s;
  box-shadow: 0 4px 16px rgba(12,24,71,.2);
}
.btt.show { opacity: 1; pointer-events: all; }
.btt:hover { transform: translateY(-2px); }

/* ── ANIMATIONS ── */
@keyframes up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Scroll-reveal — view() only, no scroll-linked parallax ── */
@supports (animation-timeline: view()) {
  .section, .cats-sec, .brands-trust, .ugc-strip {
    animation: fade-in-up cubic-bezier(0.25, 1, 0.5, 1) both;
    animation-timeline: view();
    animation-range: entry 5% cover 25%;
  }
  @keyframes fade-in-up {
    from { opacity: 0; transform: translateY(28px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

/* Button interactions — ease-out-quart, no bounce */
.btn-gold, .btn-navy, .btn-ghost_1, .pc-add, .search-btn, .f-sub-btn {
  transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1), background 0.2s ease-out, box-shadow 0.25s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.2s ease-out, color 0.2s ease-out !important;
}
.btn-gold:active, .btn-navy:active, .btn-ghost_1:active, .pc-add:active, .search-btn:active, .f-sub-btn:active {
  transform: scale(0.96) !important;
}

/* ── RESPONSIVE ── */
@media (max-width: 1100px) {
  .hero-inner { padding: 0 28px; }
  .hero-l { padding: 88px 0 72px; }
  .prod-grid { grid-template-columns: repeat(4, 1fr); }
  .f-top { grid-template-columns: 1fr 1fr 1fr 1fr; }
  .ugc-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 768px) {
    .wrap {
    padding-left: var(--section-padding-x-mobile);
    padding-right: var(--section-padding-x-mobile);
  }
  .nav-cats { display: none; }
  .nav-inner { padding: 0 var(--section-padding-x-mobile); }
  .stats-inner { grid-template-columns: 1fr 1fr; }
  .stat { border-bottom: 1px solid var(--outline); }
  .cats-sec { padding: var(--section-padding-y-mobile) var(--section-padding-x-mobile) !important; }
  .range-grid-swiper { grid-template-columns: repeat(4, 1fr); }
  .range-ring { width: 170px; height: 170px; }
  .range-label { font-size: 12px; }
  .section { padding: var(--section-padding-y-mobile) 0; }
  .section .wrap {
    padding-left: var(--section-padding-x-mobile);
    padding-right: var(--section-padding-x-mobile);
  }
  .arrivals-grid { grid-template-columns: 1fr; }
  .arr-main { min-height: 280px; }
  .prod-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .gift-grid { grid-template-columns: 1fr 1fr; }
  .budget-grid { grid-template-columns: 1fr; }
  .quiz-strip { grid-template-columns: 1fr; gap: 28px; padding: var(--section-padding-y-mobile) var(--section-padding-x-mobile); }
  .story-box { grid-template-columns: 1fr; gap: 28px; padding: var(--section-padding-y-mobile) 0; }
  .s-imgs { display: none; }
  .ugc-grid { grid-template-columns: repeat(3, 1fr); }
  .brands-scroll { justify-content: center; }
  .tcard-grid { grid-template-columns: 1fr !important; }
  .f-top { grid-template-columns: 1fr 1fr; gap: 24px; padding: 36px var(--section-padding-x-mobile) 28px; }
  .f-bot { flex-direction: column; text-align: center; padding: 14px 20px; gap: 10px; }
  .offer-box { flex-direction: column; align-items: flex-start; padding: 28px; }
  .nudge-bar { flex-wrap: wrap; padding: 10px 20px; gap: 10px; }
  .nudge-bar-outer { min-width: 100%; }
}
@media (max-width: 480px) {
  .range-grid-swiper { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  /* .range-ring { width: 120px; height: 120px; } */
  .prod-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .gift-grid { grid-template-columns: 1fr; }
  .ugc-grid { grid-template-columns: repeat(3, 1fr); }
  .f-top { grid-template-columns: 1fr; }
}

/* ── TRENDING THIS WEEK ── */
.trending-track-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
  cursor: grab;
}
.trending-track-wrap:active { cursor: grabbing; }
.trending-track-wrap::-webkit-scrollbar { display: none; }
.trending-track {
  display: flex;
  gap: 20px;
  padding: 0 max(40px, calc((100vw - 1400px) / 2 + 40px)) 4px;
  width: max-content;
}
.trending-track .pcard {
  width: 240px;
  flex-shrink: 0;
  scroll-snap-align: start;
}
.trending-track .pcard-img { height: 220px; }
.trend-nav { display: flex; gap: 8px; }
.trend-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: var(--warm-white);
  color: var(--navy);
  font-size: 15px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .2s cubic-bezier(0.25,1,0.5,1), background .2s;
  flex-shrink: 0;
}
.trend-btn:hover { border-color: var(--gold-bdr); background: var(--warm-off); box-shadow: var(--shadow-sm); }
.pcard-img:has(.trend-badge-fire) .pc-disc {
  left: auto;
  right: 10px;
}
.trend-badge-fire {
  position: absolute;
  top: 10px; left: 10px;
  background: var(--error);
  color: var(--warm-white);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  z-index: 4;
}
@media (max-width: 768px) {
  .trending-track { padding: 0 20px 4px; }
  .trending-track .pcard { width: 200px; }
  .trending-track .pcard-img { height: 180px; }
}

/* ── EXPERT HELP STRIP ── */
.expert-strip { background: var(--navy-d); }
.expert-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 360px;
}
.expert-panel {
  padding: 56px 52px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  overflow: hidden;
}
.expert-panel-wa { background: var(--navy); }
.expert-panel-wa::before {
  content: '';
  position: absolute;
  right: -50px; bottom: -50px;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(37,211,102,.06) 0%, transparent 65%);
  pointer-events: none;
}
.expert-panel-store { background: oklch(13% 0.04 260); }
.expert-panel-store::before {
  content: '';
  position: absolute;
  left: -50px; top: -50px;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(215,181,109,.06) 0%, transparent 65%);
  pointer-events: none;
}
.exp-icon {
  width: 50px; height: 50px;
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; flex-shrink: 0;
}
.exp-icon-wa    { background: rgba(37,211,102,.1); }
.exp-icon-store { background: rgba(215,181,109,.1); }
.exp-ey { font-family: var(--serif); font-size: 12px; font-style: italic; color: var(--gold-d); letter-spacing: .14em; }
.exp-ttl { font-family: var(--cinzel); font-size: clamp(17px, 1.8vw, 22px); font-weight: 400; color: oklch(97% 0.012 60); line-height: 1.2; }
.exp-sub { font-size: 13px; font-weight: 300; color: rgba(253,248,245,.45); line-height: 1.75; max-width: 42ch; }
.btn-wa {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--wa);
  color: oklch(99% 0.005 140);
  padding: 12px 26px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-decoration: none;
  transition: background .2s cubic-bezier(0.25,1,0.5,1), transform .2s cubic-bezier(0.25,1,0.5,1);
  align-self: flex-start;
  margin-top: 4px;
}
.btn-wa:hover { background: #1ebc5c; transform: translateY(-2px); }
.exp-store-details { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.exp-store-row {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 12px; color: rgba(253,248,245,.42); line-height: 1.5;
}
.exp-store-row strong { color: rgba(253,248,245,.8); font-weight: 600; display: block; }
.exp-store-ico { font-size: 14px; flex-shrink: 0; margin-top: 1px; }
.exp-store-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid rgba(215,181,109,.22);
  color: var(--gold-l);
  padding: 12px 26px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-decoration: none;
  transition: border-color .2s ease-out, background .2s ease-out, color .2s ease-out;
  align-self: flex-start;
  margin-top: 4px;
}
.exp-store-link:hover { border-color: var(--gold); background: rgba(215,181,109,.08); }
@media (max-width: 768px) {
  .expert-inner { grid-template-columns: 1fr; }
  .expert-panel { padding: 40px 28px; }
}

/* ── HARDEN: Keyboard mega menu ── */
.nav-cats > li:focus-within .mega {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* ── HARDEN: Screen-reader utility ── */
.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;
}

/* ── HARDEN: Skip link ── */
.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  background: var(--navy);
  color: var(--gold);
  padding: 12px 28px;
  font-family: var(--body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-decoration: none;
  z-index: 9999;
  border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { top: 0; outline: 2px solid var(--gold); outline-offset: 2px; }

/* ── HARDEN: Text overflow protection ── */
.pc-name       { overflow-wrap: break-word; word-break: break-word; }
.arr-name      { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gift-desc     { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tc-txt        { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.exp-sub       { overflow-wrap: break-word; }
.arr-card-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nb-name       { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; }

/* ── HARDEN: Form validation ── */
.f-email input:invalid:not(:placeholder-shown) { border-color: var(--error); }
.f-email input:invalid:not(:placeholder-shown):focus { box-shadow: 0 0 0 3px rgba(186,26,26,.12); border-color: var(--error); }

/* ── BOLDER + TYPESET: Hero — full-bleed, white, italic gold line dominates ── */
.h1-main, .h1-end {
  font-size: 108px;
  letter-spacing: -0.03em;
  line-height: 1.04;
}
.h1-italic {
  font-size: 156.8px;;
  letter-spacing: -0.015em;
  line-height: 1.05;
}
.hero-kicker {
  letter-spacing: .22em;
  text-transform: uppercase;
  font-size: 11px;
  font-style: normal;
}

/* ── BOLDER: Stats — numbers command the line, not hide in it ── */
.stats-editorial { font-size: clamp(18px, 2vw, 26px); }
.stats-editorial strong {
  font-size: clamp(28px, 3.2vw, 40px);
  letter-spacing: -0.03em;
  vertical-align: baseline;
}

/* ── BOLDER: Brands strip — confident, not whispered ── */
.bb-name { font-size: 14px; letter-spacing: .04em; color: var(--navy); opacity: 1; }
.bb-cat  { font-size: 11px; }
.brands-trust { padding: 40px; margin-top:30px;}
.brand-box { padding: 18px 28px; }

/* ── BOLDER: Category rings — more presence ── */

.range-label  { font-size: 11px; letter-spacing: .07em; }

/* ── BOLDER: Section headings — tighten eyebrow, expand headline gap ── */
h2.sec-ttl { letter-spacing: -0.025em; line-height: 1.1; }
.ey { font-size: 12px; letter-spacing: .18em; margin-bottom: 8px; }

/* ── BOLDER: Offer banner headline — command the space ── */
.offer-ttl { font-size: clamp(22px, 2.8vw, 34px); }

/* ── BOLDER: Expert strip — headlines feel architectural ── */
.exp-ttl   { letter-spacing: -0.02em; line-height: 1.15; }

/* ── BOLDER: Quiz headline ── */
.quiz-ttl  { letter-spacing: -0.02em; }

/* ── BOLDER: Arrival main — name dominates the card ── */
.arr-name  { font-size: 22px; font-weight: 400; }
.arr-price { font-size: 24px; }

/* ── LAYOUT: Fluid section spacing — break monotonous 72px repeat ── */
.section { padding: var(--section-padding-y) 0; }

/* ── LAYOUT: Asymmetric bestsellers — featured first card ── */
.featured-grid {
  grid-template-columns: 1.45fr 1fr 1fr 1fr !important;
  align-items: start;
}
.featured-grid > .pcard:first-child .pcard-img { height: 310px; }
.featured-grid > .pcard:first-child .pc-name   { font-size: 14px; line-height: 1.4; }
.featured-grid > .pcard:first-child .p-now      { font-size: 21px; }
@media (max-width: 1100px) { .featured-grid { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 768px)  { .featured-grid { grid-template-columns: 1fr 1fr !important; } }
@media (max-width: 768px)  { .featured-grid > .pcard:first-child .pcard-img { height: 200px; } }

/* ── LAYOUT: Testimonial variety — elevated first card ── */
.tcard-grid > .tcard:nth-child(1) {
  border-color: rgba(215,181,109,.28) !important;
  box-shadow: var(--shadow-sm) !important;
}
.tcard-grid > .tcard:nth-child(1) .tc-txt { font-size: 14px; }
.tcard-grid > .tcard:nth-child(1) .tc-q   { font-size: 44px; opacity: .35; }
.tcard-grid > .tcard:nth-child(2) { margin-top: 32px; }

/* ── LAYOUT: Budget grid — weighted center ── */
.budget-grid { grid-template-columns: 1fr 1fr 1fr !important; }
@media (max-width: 768px) { .budget-grid { grid-template-columns: 1fr !important; } }


/* ── ADAPT: Mobile navigation ── */
.nav-mob-btn {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid var(--line);
  background: var(--warm-off);
  border-radius: var(--r-sm);
  align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--navy);
  flex-shrink: 0;
  transition: background .18s, border-color .18s;
}
.nav-mob-btn:hover { background: var(--cream-soft); border-color: var(--line-gold); }
.nav-mob-overlay {
  display: none;
  position: fixed; inset: 0;
  background: oklch(15% 0.04 260 / 0.45);
  z-index: 240;
  backdrop-filter: blur(2px);
}
.nav-mob-overlay.nav-open { display: block; }

@media (max-width: 1279px) {
  /* Show hamburger */
  .nav-mob-btn { display: flex; }

  /* Convert nav-cats to slide drawer */
  .nav-cats {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    position: fixed;
    top: 0; bottom: 0; left: 0;
    width: min(300px, 88vw);
    background: var(--warm-white);
    z-index: 250;
    padding: 80px 0 40px;
    overflow-y: auto;
    border-right: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    transform: translateX(-110%);
    transition: transform .32s cubic-bezier(0.25, 1, 0.5, 1);
    gap: 0;
  }
  .nav-cats.nav-open { transform: translateX(0); }
  .nav-cats > li { width: 100%; }
  .nav-cats > li > a {
    padding: 16px 24px;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    opacity: 1;
    font-size: 13px;
    width: 100%;
    justify-content: space-between;
  }
  .nav-cats > li > a:hover::after { width: 0; }

  /* Mega menus inline inside drawer */
  .mega {
    position: static;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    box-shadow: none;
    border: none;
    border-top: 1px solid var(--line);
    border-radius: 0;
    min-width: 100%;
    width: 100%;
    padding: 8px 16px 12px;
  }
  .nav-cats > li:not(:hover):not(:focus-within) .mega { display: none; }
  .mega-grid { grid-template-columns: 1fr 1fr; gap: 2px; }

  /* Drawer close button */
  .nav-mob-close {
    display: flex;
    position: absolute;
    top: 16px; right: 16px;
    width: 44px; height: 44px;
    align-items: center; justify-content: center;
    border: 1px solid var(--line);
    background: var(--warm-off);
    border-radius: var(--r-sm);
    font-size: 18px;
    cursor: pointer;
    color: var(--navy);
  }

  /* iOS input zoom prevention — font-size must be >= 16px on mobile */
  .search-box input,
  .f-email input { font-size: 16px; }

  /* Touch targets */
  .nib { width: 44px; height: 44px; }
  .tb  { min-height: 44px; }
}


/* ══════════════════════════════════════
   ANIMATE: New Arrivals Carousel
══════════════════════════════════════ */
@keyframes arr-ticker-run {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Dual image layers for cross-fade */
.arr-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  will-change: opacity;
}
.arr-img-a { opacity: 1; }
.arr-img-b { opacity: 0; }

/* Content text fade during swap */
.arr-content {
  transition: opacity .28s ease-out, transform .28s cubic-bezier(0.25,1,0.5,1);
}
.arr-content.arr-exit {
  opacity: 0;
  transform: translateY(-9px);
}

/* Progress ticker */
.arr-ticker {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: rgba(215,181,109,.15);
  z-index: 6;
}
.arr-ticker-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold-d), var(--gold));
  transform: scaleX(0);
  transform-origin: left;
}

/* Navigation dots */
.arr-dots {
  position: absolute;
  bottom: 18px;
  right: 20px;
  display: flex;
  gap: 7px;
  z-index: 6;
}
.arr-dot {
  width: 6px; height: 6px;
  border-radius: 3px;
  background: rgba(215,181,109,.3);
  cursor: pointer;
  border: none;
  padding: 0;
  flex-shrink: 0;
  transition: background .25s, width .3s cubic-bezier(0.25,1,0.5,1);
}
.arr-dot.active { background: var(--gold); width: 20px; }
.arr-dot:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Side card swap fade */
.arr-card { transition: opacity .24s ease-out, transform .32s cubic-bezier(0.25,1,0.5,1), background .2s ease-out; }
.arr-card.arr-swap { opacity: 0; transform: translateY(5px); }

/* ══════════════════════════════════════
   ANIMATE: Category rings stagger
══════════════════════════════════════ */
.range-item {
  opacity: 1;
  transform: scale(.82) translateY(12px);
  transition: opacity .42s cubic-bezier(0.25,1,0.5,1), transform .42s cubic-bezier(0.25,1,0.5,1);
}
.range-item.cat-in { opacity: 1; transform: scale(1) translateY(0); }

/* ══════════════════════════════════════
   ANIMATE: Budget card entrance stagger
══════════════════════════════════════ */
.bcard {
  opacity: 0;
  transform: translateY(18px);
  /* include hover-needed props so the override doesn't break :hover */
  transition: opacity .38s cubic-bezier(0.25,1,0.5,1), transform .38s cubic-bezier(0.25,1,0.5,1), box-shadow .25s ease-out, border-color .25s ease-out;
}
.bcard.b-in { opacity: 1; transform: translateY(0); }

/* ── WHY COOK N SERVE ── */
.why-section { padding: var(--section-padding-y) var(--section-padding-x); background: var(--warm-white); }
.why-inner { max-width: 1140px; margin: 0 auto; }
.why-head { text-align: left; margin-bottom: 56px; }
.why-ey { font-family: var(--serif); font-size: 11px; font-style: italic; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-d); margin-bottom: 8px; }
.why-ttl { font-family: var(--cinzel); font-size: clamp(1.55rem,2.8vw,2.1rem); font-weight: 400; color: var(--navy); }
.why-pillars { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.why-pillar { padding: 40px 32px 36px; position: relative; display: flex; flex-direction: column; align-items: center}
.why-pillar + .why-pillar { border-left: 1px solid var(--line); }
.why-num { font-family: var(--serif); font-size: 51px; font-style: italic; color: var(--gold); opacity: .22; line-height: 1; margin-bottom: 20px; display: block; }
.why-ico { width: 48px; height: 48px; border-radius: 50%; background: var(--navy); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; color: var(--gold); }
.why-h { font-family: var(--cinzel); font-size:13px; font-weight: 400; letter-spacing: .04em; color: var(--navy); margin-bottom: 8px; }
.why-p { font-size: 12px; color: var(--ink-70); line-height: 1.65; }

/* ── FAQ ── */
.faq-section { padding: var(--section-padding-y) var(--section-padding-x); background: var(--cream-bg); }
.faq-inner { max-width: 760px; margin: 0 auto; }
.faq-ey { font-family: var(--serif); font-size: 11px; font-style: italic; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-d); margin-bottom: 8px; text-align: center; }
.faq-ttl { font-family: var(--cinzel); font-size: clamp(1.55rem,2.8vw,32px); font-weight: 400; color: var(--navy); text-align: center; margin-bottom: 44px; }
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 2px; background: none; border: none; text-align: left; font-family: var(--body); font-size: 15px; font-weight: 600; color: var(--navy); cursor: pointer; transition: color .18s; }
.faq-btn:hover { color: var(--gold-d); }
.faq-ico { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--navy); display: flex; align-items: center; justify-content: center; color: var(--gold); font-size: 16px; line-height: 1; transition: background .18s, transform .28s cubic-bezier(0.25,1,0.5,1); }
.faq-item.open .faq-ico { background: var(--gold); color: var(--navy); transform: rotate(45deg); }
.faq-ans { overflow: hidden; max-height: 0; transition: max-height .34s cubic-bezier(0.25,1,0.5,1); }
.faq-item.open .faq-ans { max-height: 220px; }
.faq-ans-inner { padding: 2px 2px 20px; font-size: 14px; color: var(--ink-70); line-height: 1.7; }

/* ── PROFESSIONAL / HORECA SECTION ── */
.pro-section {
  display: grid;
  grid-template-columns: 1fr 42%;
  min-height: 500px;
  background: #060e28;
  overflow: hidden;
}
.pro-text {
  padding: var(--section-padding-y) var(--section-padding-x);
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 600px;
}
.pro-label {
  font-family: var(--body);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
  opacity: .85;
}
.pro-h {
  font-family: var(--cinzel);
  font-size: 31px;
  font-weight: 400;
  color: var(--text-on-navy);
  line-height: 1.28;
  margin-bottom: 16px;
}
.pro-p {
  font-family: var(--body);
  font-size: 14px;
  color: rgba(240,222,217,.6);
  line-height: 1.7;
  margin-bottom: 28px;
}
.pro-points {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 36px;
}
.pro-points li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--body);
  font-size: 12px;
  color: rgba(240,222,217,.72);
  line-height: 1.45;
}
.pro-points li::before {
  content: '';
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 1px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' stroke='%23D7B56D' stroke-width='1.2' fill='none'/%3E%3Cpath d='M4.5 8l2.5 2.5 4.5-5' stroke='%23D7B56D' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") center/contain no-repeat;
}
.pro-points li strong { color: rgba(240,222,217,.92); font-weight: 600; }
.pro-ctas { display: flex; gap: 12px; }
.btn-pro-primary {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--body); font-size: 12px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  background: var(--gold); color: var(--navy-d);
  border: none; border-radius: var(--r-pill);
  padding: 14px 30px; text-decoration: none;
  align-self: flex-start;
  transition: background .18s, transform .2s cubic-bezier(0.25,1,0.5,1);
}
.btn-pro-primary:hover { background: var(--gold-l); transform: translateY(-1px); }
.btn-pro-wa {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--body); font-size: 11px; font-weight: 500;
  color: rgba(240,222,217,.48); text-decoration: none;
  align-self: flex-start;
  transition: color .18s;
}
.btn-pro-wa:hover { color: rgba(240,222,217,.82); }
.pro-img {
  position: relative;
  overflow: hidden;
}
.pro-img img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
}

/* Responsive */
@media (max-width: 900px) {
  .pro-section { grid-template-columns: 1fr; }
  .pro-img { height: 300px; order: -1; }
  .pro-text {
    padding: var(--section-padding-y-mobile) var(--section-padding-x-mobile);
    max-width: 100%;
  }
}
@media (max-width: 480px) {
  .pro-text { padding: var(--section-padding-y-mobile) var(--section-padding-x-mobile); }
  .pro-img { height: 240px; }
}

/* ── SHOP THE KITCHEN ── */
.shop-kitchen { position: relative; background: var(--navy-d); overflow:hidden;}
.sk-scene { position: relative; aspect-ratio:16/8;}
.sk-img {
  display: block;
   width: 100%;
  height: 100%;
  object-fit: cover; 
}
.sk-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(100deg,
    rgba(6,14,40,.7) 0%,
    rgba(6,14,40,.25) 38%,
    rgba(6,14,40,.06) 60%,
    rgba(6,14,40,.18) 100%);
  pointer-events: none;
}
.sk-header {
  position: absolute; top: 44px; left: 48px; z-index: 10;
}
.sk-ey {
  font-family: var(--serif); font-size: 13px; font-style: italic;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 7px; font-weight:800;
}
.sk-ttl {
  font-family: var(--cinzel); font-size: clamp(1.6rem,3vw,2.7rem);
  font-weight: 400; color: var(--text-on-navy); line-height: 1.2;
  text-shadow: 0 2px 12px rgba(6,14,40,.4);
}
.sk-legend {
  position: absolute; bottom: 28px; left: 48px; z-index: 10;
  font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(240,222,217); display: flex; align-items: center; gap: 8px;
}
.sk-legend-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--gold); opacity: .8; flex-shrink: 0;
}

/* ── Hotspot pin ── */
.sk-spot {
  position: absolute; z-index: 20;
  transform: translate(-50%, -50%);
}
.sk-pin {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--gold);
  border: 2.5px solid rgba(253,248,245,.9);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; position: relative; z-index: 2;
  transition: transform .22s cubic-bezier(0.25,1,0.5,1), box-shadow .22s;
  color: var(--navy-d);
  z-index:1001;
}
.sk-pin-ico{
  font-size: 14px;
    color: #fff;
}

.sk-spot:hover,
.sk-spot:focus-within,
.sk-spot.sk-active {
    z-index: 999;
}

.sk-spot:hover .sk-pin,
.sk-spot:focus-within .sk-pin,
.sk-spot.sk-active .sk-pin {
  transform: scale(1.18);
  box-shadow: 0 0 0 4px rgba(215,181,109,.3);
}
.sk-pulse {
  position: absolute; top: 50%; left: 50%;
  width: 28px; height: 28px;
  transform: translate(-50%,-50%);
  border-radius: 50%;
  background: rgba(215,181,109,.5);
  animation: sk-pulse 2.4s ease-out infinite;
  pointer-events: none; z-index: 1;
}
.sk-pulse-b { animation-delay: 1.2s; }
@keyframes sk-pulse {
  0%   { transform: translate(-50%,-50%) scale(1); opacity: .65; }
  100% { transform: translate(-50%,-50%) scale(2.8); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sk-pulse { animation: none; }
}

/* ── Tooltip card ── */
.sk-card {
  position: absolute;
  background: rgba(6,14,40,.96);
  border: 1px solid rgba(215,181,109,.28);
  border-radius: var(--r-md);
  padding: 16px 18px 14px;
  min-width: 196px; max-width: 218px;
  box-shadow: 0 20px 50px rgba(6,14,40,.7);
  opacity: 0; pointer-events: none;
  transition: opacity .22s ease-out, transform .22s cubic-bezier(0.25,1,0.5,1);
  z-index: 1000; backdrop-filter: blur(4px);
}
.sk-spot:hover .sk-card,
.sk-spot:focus-within .sk-card,
.sk-spot.sk-active .sk-card { opacity: 1; pointer-events: all; }

/* Direction modifiers — default: card above pin */
.sk-card { bottom: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(6px); }
.sk-spot:hover .sk-card, .sk-spot:focus-within .sk-card, .sk-spot.sk-active .sk-card { transform: translateX(-50%) translateY(0); }

.sk-spot--r  .sk-card { bottom: auto; top: 50%; left: calc(100% + 14px); transform: translateY(calc(-50% + 6px)); }
.sk-spot--r:hover  .sk-card, .sk-spot--r:focus-within  .sk-card, .sk-spot--r.sk-active  .sk-card { transform: translateY(-50%); }

.sk-spot--l  .sk-card { bottom: auto; top: 50%; left: auto; right: calc(100% + 14px); transform: translateY(calc(-50% + 6px)); }
.sk-spot--l:hover  .sk-card, .sk-spot--l:focus-within  .sk-card, .sk-spot--l.sk-active  .sk-card { transform: translateY(-50%); }

.sk-spot--b  .sk-card { bottom: auto; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(-6px); }
.sk-spot--b:hover  .sk-card, .sk-spot--b:focus-within  .sk-card, .sk-spot--b.sk-active  .sk-card { transform: translateX(-50%) translateY(0); }

.sk-spot--bl .sk-card { bottom: auto; top: calc(100% + 14px); left: auto; right: -8px; transform: translateY(-6px); }
.sk-spot--bl:hover .sk-card, .sk-spot--bl:focus-within .sk-card, .sk-spot--bl.sk-active .sk-card { transform: translateY(0); }

.sk-card-ico {
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(215,181,109,.1); border: 1px solid rgba(215,181,109,.22);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 9px; color: var(--gold);
}
.sk-card-ttl {
  font-family: var(--cinzel); font-size: 1.6rem; font-weight: 400;
  letter-spacing: .05em; color: var(--text-on-navy); margin-bottom: 3px;
  text-transform:uppercase;
}
.sk-card-sub {
  font-size: 1rem; color: rgba(240,222,217,.48);
  line-height: 1.55; margin-bottom: 11px;
}
.sk-card-cta {
  font-family: var(--body); font-size: 8.5px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--gold); text-decoration: none;
  display: inline-flex; align-items: center; gap: 5px;
  transition: color .15s;
}
.sk-card-cta:hover { color: var(--gold-l); }
.sk-card-rule { border: none; border-top: 1px solid rgba(215,181,109,.12); margin: 10px 0 10px; }

/* Mobile: tap to toggle */
@media (max-width: 768px) {

  .sk-header { top: 18px; left: 18px; }
  .sk-legend { display: none; }
  .sk-pin { width: 14px; height: 14px; line-height:1; }
  .sk-pulse { width: 14px; height: 14px; line-height:1; }
  .sk-pin-ico{ font-size: 8px; line-height:1;}
  .sk-card { min-width: 170px; max-width: 190px; font-size: 0.75rem; }
}


/* ── SOCIAL ICON OVERRIDE ── */
.fsb { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(215,181,109,.32); display: flex; align-items: center; justify-content: center; text-decoration: none; color: rgba(215,181,109,.7); transition: border-color .2s, color .2s, background .2s; }
.fsb:hover { border-color: var(--gold); color: var(--gold); background: rgba(215,181,109,.07); }

/* ── RESPONSIVE: NEW SECTIONS ── */
@media (max-width: 960px) {
  .why-pillars { grid-template-columns: 1fr 1fr; }
  .why-pillar:nth-child(odd) { border-left: none; }
  .why-pillar:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 768px) {
  .why-section { padding: var(--section-padding-y-mobile) var(--section-padding-x-mobile); }
  .faq-section { padding: var(--section-padding-y-mobile) var(--section-padding-x-mobile); }
  .horeca-band { padding: 52px 20px; }
  .f-top { grid-template-columns: 1fr 1fr; }
  .ann { padding: 0 16px; }
  .ann-item:nth-child(n+3) { display: none; }
  .ann-soc { padding-left: 12px; }
}
@media (max-width: 480px) {
  .why-pillars { grid-template-columns: 1fr; }
  .why-pillar + .why-pillar { border-left: none; border-top: 1px solid var(--line); }
  .why-pillar:nth-child(n+3) { border-top: 1px solid var(--line); }
  .horeca-acts { flex-direction: column; align-items: flex-start; }
}
/* ─────────────────────────────────────────────
   Cook N Serve — Shared Design System
   All pages must link this before page-specific styles.
   ───────────────────────────────────────────── */
/* ── TOKENS ── */
:root {
    --navy: oklch(13% 0.085 264);
    --navy-d: oklch(8% 0.056 264);
    --navy-m: oklch(21% 0.098 264);
    --gold: oklch(77% 0.098 79);
    --gold-d: oklch(65% 0.104 73);
    --gold-l: oklch(88% 0.060 79);
    --gold-bg: oklch(77% 0.098 79 / 0.12);
    --cream-bg: oklch(97% 0.01 60);
    --warm-white: oklch(99% 0.005 60);
    --warm-off: oklch(96% 0.012 60);
    --cream-soft: oklch(95% 0.014 60);
    --ink: oklch(15% 0.04 260);
    --ink-70: oklch(15% 0.04 260 / 0.7);
    --ink-50: oklch(15% 0.04 260 / 0.5);
    --ink-30: oklch(15% 0.04 260 / 0.3);
    --line: oklch(13% 0.085 264 / 0.08);
    --line-gold: oklch(77% 0.098 79 / 0.35);
    --error: oklch(41% 0.19 27);
    --suc: oklch(41% 0.12 147);
    --text-on-navy: oklch(96.5% 0.012 65);
    --gold-text: oklch(36% 0.10 72);
    --cinzel: 'DM Serif Display', serif;
    --serif: 'Cormorant Garamond', Georgia, serif;
    --body: 'Inter', -apple-system, 'Helvetica Neue', sans-serif;
    --r-sm: 10px;
    --r-md: 16px;
    --r-lg: 22px;
    --r-pill: 100px;
    --shadow-xs: 0 1px 3px oklch(13% 0.085 264 / 0.04);
    --shadow-sm: 0 2px 8px oklch(13% 0.085 264 / 0.06);
    --shadow-md: 0 8px 24px oklch(13% 0.085 264 / 0.09);
    --shadow-lg: 0 20px 50px oklch(13% 0.085 264 / 0.13);
}

/* ── RESET & BASE ── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--cream-bg);
    color: var(--ink);
    font-family: var(--body);
    font-size: 15px;
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

*:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* ── ANNOUNCE BAR ── */
.ann {
    background: var(--navy-d);
    padding: 0 28px;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    overflow: hidden;
}

.ann-track {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.ann-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: oklch(96.5% 0.012 65 / 0.65);
    border-right: 1px solid oklch(77% 0.098 79 / 0.12);
    white-space: nowrap;
    flex-shrink: 0;
}

.ann-hl {
    color: var(--gold);
}

.ann-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--gold);
    opacity: .5;
    flex-shrink: 0;
}

.ann-soc {
    display: flex;
    align-items: center;
    gap: 2px;
    padding-left: 18px;
    border-left: 1px solid oklch(77% 0.098 79 / 0.12);
    flex-shrink: 0;
}

.ann-soc-lnk {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: oklch(77% 0.098 79 / 0.5);
    text-decoration: none;
    border-radius: 6px;
    transition: color .18s, background .18s;
}

.ann-soc-lnk:hover {
    color: var(--gold);
    background: oklch(77% 0.098 79 / 0.08);
}

/* ── TOGGLE ── */
.toggle-bar {
    background: var(--warm-white);
    border-bottom: 1px solid var(--line);
    display: flex;
    justify-content: center;
    padding: 10px 0;
}

.tw {
    display: inline-flex;
    background: var(--warm-off);
    border: 1.5px solid var(--line-gold);
    border-radius: var(--r-pill);
    padding: 4px;
    gap: 2px;
}

.tb {
    font-family: var(--body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    min-height: 40px;
    padding: 0 28px;
    border-radius: var(--r-pill);
    border: none;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: background .25s, color .25s, box-shadow .25s;
}

.tb.off {
    background: transparent;
    color: var(--ink-50);
}

.tb.off:hover {
    background: oklch(13% 0.085 264 / 0.04);
    color: var(--ink-70);
}

.tb.on {
    background: var(--navy);
    color: var(--gold);
    box-shadow: var(--shadow-sm);
}

/* ── NAV ── */
header {
    position: sticky;
    top: 0;
    z-index: 200;
    background: var(--warm-white);
    box-shadow: var(--shadow-sm);
}

header > nav, .topnav {
    border-bottom: 1px solid var(--line);
}

.nav-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--section-padding-x);
    height: 66px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.nav-brand {
    flex-shrink: 0;
    text-decoration: none;
    display: flex;
    align-items: center;
}

.nav-cats {
    display: flex;
    align-items: center;
    gap: 2px;
    list-style: none;
    flex: 1;
    justify-content: start;
}

.nav-cats > li {
    position: relative;
}

.nav-cats > li > a {
    font-family: var(--body);
    font-size: 10px !important;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--navy);
    opacity: .75;
    text-decoration: none;
    padding: 8px;
    border-radius: var(--r-sm);
    display: flex;
    align-items: center;
    gap: 4px;
    position: relative;
    transition: opacity .2s;
    white-space: nowrap;
}

.nav-cats > li > a::after {
    content: "";
    position: absolute;
    bottom: 2px;
    left: 13px;
    width: 0;
    height: 1.5px;
    background: var(--gold);
    transition: width .2s;
}

.nav-cats > li > a:hover {
    opacity: 1;
}

.nav-cats > li > a:hover::after {
    width: calc(100% - 26px);
}

.nav-arr {
    font-size: 8px;
    opacity: .4;
    transition: transform .2s;
    display: inline-block;
}

.nav-cats > li:hover .nav-arr {
    transform: rotate(180deg);
}

.nav-sale {
    color: var(--error) !important;
    opacity: 1 !important;
}

.mega {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    background: var(--warm-white);
    border: 1px solid var(--line);
    border-top: 2px solid var(--gold);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-lg);
    padding: 18px;
    min-width: 420px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s, visibility .2s, transform .2s;
    z-index: 300;
}

.nav-cats > li:hover .mega {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.mega-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 4px;
}

.mega-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: var(--r-sm);
    text-decoration: none;
    transition: background .15s;
}

.mega-item:hover {
    background: var(--warm-off);
}

.mega-ico {
    width: 34px;
    height: 34px;
    border-radius: var(--r-sm);
    background: var(--warm-off);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.mega-name {
    font-family: var(--body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--navy);
}

.nav-acts {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    width:auto;
}

.nib {
    width: 44px;
    height: 44px;
    border-radius: var(--r-sm);
    border: 1px solid var(--line);
    background: var(--warm-off);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    text-decoration: none;
    color: var(--navy);
    transition: background .18s, border-color .18s;
}

.nib:hover {
    background: var(--cream-soft);
    border-color: var(--line-gold);
}

.nbadge {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 16px;
    height: 16px;
    background: var(--gold);
    color: var(--navy);
    border-radius: var(--r-pill);
    font-size: 9px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-mob-btn {
    display: none;
    background: transparent;
    border: none;
}

/* ── SEARCH BAR ── */
.nav-search {
    background: var(--warm-off);
    border-bottom: 2px solid var(--line-gold);
    padding: 9px 0;
}

.nav-search-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--section-padding-x);
}

.nav-search-combo {
    display: flex;
    align-items: center;
    background: var(--warm-white);
    border: 1.5px solid var(--line-gold);
    border-radius: var(--r-pill);
    overflow: hidden;
    transition: border-color .18s, box-shadow .18s;
}

.nav-search-combo:focus-within {
    border-color: var(--navy);
    box-shadow: 0 0 0 3px oklch(13% 0.085 264 / 0.06);
}

.nav-search-cat {
    font-family: var(--body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    color: var(--navy);
    background: transparent;
    border: none;
    border-right: 1.5px solid var(--line-gold);
    padding: 0 32px 0 16px;
    height: 46px;
    cursor: pointer;
    flex-shrink: 0;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23D7B56D' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    min-width: 148px;
}

.nav-search-sep {
    width: 1px;
    height: 22px;
    background: var(--line);
    flex-shrink: 0;
    margin: 0 2px;
}

.nav-search-input {
    flex: 1;
    font-family: var(--body);
    font-size: 14px;
    color: var(--ink);
    background: transparent;
    border: none;
    outline: none;
    padding: 0 16px;
    height: 46px;
    min-width: 0;
}

.nav-search-input::placeholder {
    color: var(--ink-30);
    font-size: 13px;
}

.nav-search-btn {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--navy);
    color: var(--gold);
    font-family: var(--body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    border: none;
    padding: 0 24px;
    height: 46px;
    cursor: pointer;
    border-radius: 0 var(--r-pill) var(--r-pill) 0;
    transition: background .18s;
    white-space: nowrap;
}

.nav-search-btn:hover {
    background: var(--navy-m);
}

.nav-search-btn svg {
    flex-shrink: 0;
}

/* ── BREADCRUMB ── */
.bc {
    background: var(--warm-white);
    border-bottom: 1px solid var(--line);
    padding: 11px 0;
}

.bci {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    flex-wrap: wrap;
}

.bcl {
    color: var(--ink-50);
    text-decoration: none;
    transition: color .18s;
}

.bcl:hover {
    color: var(--navy);
}

.bcs {
    color: var(--line);
    font-size: 9px;
}

.bcc {
    color: var(--navy);
    font-weight: 700;
}

/* ── FOOTER ── */
.foot {
    background: var(--navy-d);
    border-top: 1px solid oklch(77% 0.098 79 / 0.15);
    padding: 52px 0 28px;
}

.foot-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}

.foot-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 32px;
    margin-bottom: 40px;
}

.foot-brand-name {
    font-family: var(--cinzel);
    font-size: 17px;
    font-weight: 400;
    color: var(--text-on-navy);
    margin-bottom: 4px;
}

.foot-brand-tag {
    font-family: var(--serif);
    font-style: italic;
    font-size: 12px;
    color: oklch(77% 0.098 79 / 0.55);
    margin-bottom: 14px;
}

.foot-desc {
    font-size: 13px;
    color: oklch(96.5% 0.012 65 / 0.38);
    line-height: 1.7;
    max-width: 30ch;
}

.foot-col-ttl {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gold);
    opacity: .7;
    margin-bottom: 14px;
}

.foot-links {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.foot-lnk {
    font-size: 13px;
    color: oklch(96.5% 0.012 65 / 0.42);
    text-decoration: none;
    transition: color .18s;
}

.foot-lnk:hover {
    color: oklch(96.5% 0.012 65 / 0.9);
}

.foot-bottom {
    border-top: 1px solid oklch(77% 0.098 79 / 0.1);
    padding-top: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.foot-copy {
    font-size: 11px;
    color: oklch(96.5% 0.012 65 / 0.28);
}

.foot-soc {
    display: flex;
    gap: 8px;
}

.fsb {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid oklch(77% 0.098 79 / 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: oklch(77% 0.098 79 / 0.5);
    transition: border-color .2s, color .2s, background .2s;
}

.fsb:hover {
    border-color: var(--gold);
    color: var(--gold);
    background: oklch(77% 0.098 79 / 0.07);
}

/* ── SHARED RESPONSIVE ── */
@media (max-width: 768px) {

   .shop-kitchen {
    overflow: visible;
  }
  .btn-pro-primary {
    font-size: 10px;
    padding: 14px;
  }
    .nav-inner {
        padding: 0 var(--section-padding-x-mobile);
    }

    .nav-cats {
        display: none;
    }

    .nav-mob-btn {
        display: flex;
    }

    /* .nav-search {
        display: none;
    } */

    .bci {
        padding: 0 20px;
    }

    .foot-grid {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }

    .foot-inner {
        padding: 0 20px;
    }
    .nav-cats > li > a{
      font-size :14px !important;
      padding-left:10px;
    }
}

@media (max-width: 480px) {
    .ann-item:nth-child(n+3) {
        display: none;
    }

    .foot-grid {
        grid-template-columns: 1fr;
    }
}

/* ── UTILITY ── */
.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;
}

a.nav-brand img {
    max-width: 110px;
}

.milestone-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

.milestone-table td {
  border: 1px solid #ddd;
  padding: 16px 20px;
  vertical-align: middle;
}

.milestone-table td:first-child {
  width: 180px;
  font-weight: 700;
  white-space: nowrap;
}

.milestone-table tr:nth-child(even) {
  background: #fafafa;
}

.about-home-btn{
    text-align: right;
    padding-top: 10px;
   
}
.back-home-btn{
  color: var(--navy);
    font-weight: 800;
 
}


.customeSection_content :is(h1, h2, h3, h4, h5, h6, p, a, span) {
  padding-bottom: 20px;
}

.article-template__content :is(h1, h2, h3, h4, h5, h6, p, a, span) {
  padding-bottom: 20px;
}

/* D2C header: switch to drawer before desktop navigation overflows */
@media (min-width: 769px) and (max-width: 1279px) {
  .nav-mob-btn {
    display: flex !important;
  }

  .nav-inner {
    padding-inline: 20px;
    gap: 12px;
  }
}

/* Keep the small-phone header usable */
@media (max-width: 560px) {
  .nav-acts > a[href="/apps/page/wishlist"],
  .nav-acts > a[href="/account"] {
    display: none;
  }
}

/* Close icon: desktop hidden, drawer only */
.nav-mob-close {
  display: none !important;
}

@media (max-width: 1279px) {
  .nav-mob-close {
    display: flex !important;
  }
}


/* D2C mobile/tablet drawer submenus */
@media (max-width: 1279px) {
  body:not(.b2b) .nav-cats > .menu-item.has-submenu > a {
    padding-right: 64px;
  }

  body:not(.b2b) .mobile-submenu-toggle {
    display: flex;
    position: absolute;
    top: 0;
    right: 0;
    width: 56px;
    height: 52px;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--navy);
    font-size: 22px;
    cursor: pointer;
  }

  body:not(.b2b) .mobile-submenu-toggle span {
    transition: transform .2s ease;
  }

  body:not(.b2b) .menu-item.is-submenu-open > .mobile-submenu-toggle span {
    transform: rotate(180deg);
  }

  body:not(.b2b) .nav-cats > .menu-item > .submenu {
    display: none !important;
    position: static;
    min-width: 0;
    margin: 0;
    padding: 0;
    opacity: 1;
    visibility: visible;
    box-shadow: none;
    background: var(--warm-off);
  }

  body:not(.b2b) .nav-cats > .menu-item.is-submenu-open > .submenu {
    display: block !important;
  }

  body:not(.b2b) .nav-cats > .menu-item > .submenu a {
    display: block;
    padding: 12px 32px;
  }
}

@media (min-width: 1280px) {
  body:not(.b2b) .mobile-submenu-toggle {
    display: none;
  }
}