/* ============================================================
   Estia Home Art — Design System
   Three-colour editorial system. Everything in the UI resolves
   to one of the three palette anchors below; lighter/darker UI
   states are achieved by alpha-compositing ink on linen.
     1. Linen   — warm cream background
     2. Ink     — deep warm near-black
     3. Bronze  — warm mid-tone accent
   ============================================================ */

:root {
  /* ── The three colours ─────────────────────────────────── */
  --linen:        #ebe9e5;   /* warm stone — primary background */
  --ink:          #1d1d1b;   /* near-black — text & dark UI */
  --bronze:       #9a8c60;   /* muted antique gold — single accent */

  /* Ink-on-linen surface tints (just alpha-composited ink) */
  --paper:        rgba(29, 29, 27, 0.04);  /* faint card */
  --paper-2:      rgba(29, 29, 27, 0.06);
  --ivory:        var(--linen);
  --shell:        rgba(29, 29, 27, 0.07);
  --stone:        rgba(29, 29, 27, 0.18);
  --hair:         rgba(29, 29, 27, 0.16);  /* dividers */
  --hair-soft:    rgba(29, 29, 27, 0.10);

  /* Product card background — a quiet ink wash on linen */
  --product-bg:   rgba(29, 29, 27, 0.06);
  --product-bg-2: rgba(29, 29, 27, 0.10);

  /* Ink shades — pure ink at decreasing opacities (no new hue) */
  --ink-2:        rgba(29, 29, 27, 0.85);
  --ink-3:        rgba(29, 29, 27, 0.60);
  --ink-4:        rgba(29, 29, 27, 0.40);

  /* Bronze derivatives — accent shifted in opacity only */
  --bronze-deep:  var(--bronze);
  --bronze-warm:  var(--bronze);
  --bronze-tint:  rgba(154, 140, 96, 0.20);

  /* Semantic — all collapse to either ink or bronze */
  --green:        var(--bronze);
  --amber:        var(--bronze);
  --red:          var(--ink);

  /* Type */
  --serif: "ivypresto-headline", "Times New Roman", Georgia, serif;
  --sans:  "Google Sans", "Product Sans", system-ui, -apple-system, sans-serif;
  --mono:  "Google Sans", "Product Sans", system-ui, sans-serif;

  /* Layout */
  --max:          none;
  --gutter:       clamp(20px, 3.5vw, 72px);
  --gutter-sm:    clamp(16px, 4vw, 24px);
  --r-sm:         2px;
  --r-md:         4px;
  --r-lg:         8px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--linen);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
input, textarea, select { font-family: inherit; color: inherit; }

::selection { background: var(--bronze-tint); color: var(--ink); }

/* ---------- Type ---------- */

.h-display {
  font-family: var(--serif);
  font-weight: 380;
  letter-spacing: -0.015em;
  line-height: 0.98;
  font-size: clamp(56px, 7vw, 132px);
  color: var(--ink);
  text-wrap: balance;
}
.h-display em { font-style: normal; font-weight: 380; color: var(--bronze-deep); }

.h1 {
  font-family: var(--serif);
  font-weight: 380;
  letter-spacing: -0.012em;
  line-height: 1.02;
  font-size: clamp(40px, 4.6vw, 84px);
  text-wrap: balance;
}
.h1 em { font-style: normal; color: var(--bronze-deep); font-weight: 380; }

.h2 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.008em;
  line-height: 1.05;
  font-size: clamp(28px, 2.6vw, 44px);
  text-wrap: balance;
}
.h2 em { font-style: normal; color: var(--bronze-deep); }

.h3 {
  font-family: var(--serif);
  font-weight: 420;
  line-height: 1.15;
  font-size: clamp(20px, 1.4vw, 26px);
}

.eyebrow {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.eyebrow.bronze { color: var(--bronze-deep); }

.lede {
  font-family: var(--serif);
  font-weight: 380;
  font-size: clamp(17px, 1.25vw, 22px);
  line-height: 1.45;
  color: var(--ink-2);
  text-wrap: pretty;
}

.body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
}

.small { font-size: 13px; color: var(--ink-3); }
.tiny  { font-size: 11px; letter-spacing: 0.04em; color: var(--ink-3); }

.mono { font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 48px;
  padding: 0 24px;
  border-radius: 4px;
  border: 1px solid transparent;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.01em;
  background: var(--ink);
  color: var(--ivory);
  transition: background 220ms ease, color 220ms ease, border-color 220ms ease, transform 200ms ease;
}
.btn:hover { background: var(--bronze-deep); }
.btn.lg { height: 56px; padding: 0 32px; font-size: 15px; }
.btn.sm { height: 40px; padding: 0 18px; font-size: 13px; }
.btn.bronze { background: var(--bronze-deep); }
.btn.bronze:hover { background: var(--ink); }
.btn.ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}
.btn.ghost:hover { background: var(--ink); color: var(--ivory); }
/* Moments section "Read the story" — invert the ghost hover (white bg, black text) */
.btn.ghost.invert-hover:hover { background: #FFFFFF; color: var(--ink); border-color: #FFFFFF; }
/* Solid dark btn — white bg + black text on hover */
.btn.invert-hover:not(.ghost):hover { background: #FFFFFF; color: var(--ink); }
.btn.ghost.light {
  border-color: #FFFFFF;
  color: #FFFFFF;
  background: transparent;
}
.btn.ghost.light:hover { background: #FFFFFF; color: var(--ink); border-color: #FFFFFF; }

/* Solid-light: white background, ink text. Hover → warm ivory background. */
.btn.solid-light {
  background: #FFFFFF;
  color: var(--ink);
  border: 1px solid #FFFFFF;
}
.btn.solid-light:hover {
  background: var(--bronze);
  color: #FFFFFF;
  border-color: var(--bronze);
}
/* Hero slider CTA — frosted glass over the image, crisp white border */
.hero-slide-fade { animation: heroSlideFade 900ms ease both; }
@keyframes heroSlideFade { 0% { opacity: 0; } 32% { opacity: 0.4; } 100% { opacity: 0; } }
.hero-wrap .btn.solid-light {
  background: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.20);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  backdrop-filter: blur(10px) saturate(120%);
  border-radius: 8px;
}
.hero-wrap .btn.solid-light:hover {
  background: rgba(255, 255, 255, 0.85);
  color: var(--ink);
  border-color: #FFFFFF;
}
.btn.full { width: 100%; }
.btn.icon { padding: 0 18px; }
.btn[disabled] { opacity: 0.5; pointer-events: none; }

/* Featured collection — desktop: keep the image band tall enough to contain the overlay copy so CTAs aren't clipped */
@media (min-width: 1101px) { .fc-img { min-height: 540px; object-fit: cover; object-position: left center; } }

.link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.04em;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  color: var(--ink);
  cursor: pointer;
}
.link:hover { color: var(--bronze-deep); }
/* Slider nav arrows (New In etc.) */
.slider-nav { display: flex; gap: 4px; flex: 0 0 auto; }
.slider-nav-btn { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: transparent; color: var(--ink-3); cursor: pointer; transition: background 160ms ease, color 160ms ease; }
.slider-nav-btn:hover { background: rgba(154, 140, 96, 0.10); color: var(--ink); }
/* Secondary (text-link) CTAs — no trailing arrow */
.link > svg,
.coll-card-cta > svg,
.discover-card-cta > svg,
.mobile-nav-card-cta > svg { display: none; }

.u-link { cursor: pointer; }

/* ---------- Layout helpers ---------- */
.wrap { width: 100%; margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: 96px 0; }
.section.tight { padding: 56px 0; }
.bestsellers-section { background: rgba(154, 140, 96, 0.30); }
.divider { height: 1px; background: var(--hair); }

/* ---------- Pills & Badges ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--ivory);
  border: 1px solid var(--hair);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-weight: 500;
}
.pill.dark { background: var(--ink); color: var(--ivory); border-color: var(--ink); }
.pill.bronze { background: var(--bronze-tint); color: var(--bronze-deep); border-color: transparent; }
.pill.red { background: #F1D9D2; color: #7E2B1F; border-color: transparent; }
.pill.green { background: #DCE5CF; color: #34471D; border-color: transparent; }

/* ---------- Inputs ---------- */
.input {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  background: var(--ivory);
  border: 1px solid var(--hair);
  border-radius: var(--r-md);
  font-size: 14px;
  color: var(--ink);
  transition: border-color 180ms ease;
}
.input:focus { outline: none; border-color: var(--ink); }
.field-label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  margin-bottom: 6px;
  font-weight: 500;
}

/* ---------- Product / image placeholder swatches ---------- */
/* Each .swatch-XX is a CSS-painted product (drinkware mostly).
   The card background is intentionally a flat solid colour — no
   gradient and no inner shadow. */
.swatch {
  position: relative;
  width: 100%;
  aspect-ratio: 4/5;
  overflow: hidden;
  background: var(--product-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* (removed grain/highlight overlay so the bg stays flat) */

/* Drinkware bottle shape (uses --bottle, --cap, --pattern) */
.bottle {
  width: 38%;
  height: 78%;
  position: relative;
  z-index: 1;
}
.bottle .body {
  position: absolute;
  inset: 14% 0 0 0;
  background: var(--bottle, #2C3742);
  border-radius: 22px 22px 30px 30px;
  box-shadow:
    inset 8px 0 18px rgba(255,255,255,0.10),
    inset -10px 0 22px rgba(0,0,0,0.18),
    0 18px 30px rgba(0,0,0,0.10);
  overflow: hidden;
}
.bottle .body::before {
  /* pattern overlay */
  content: "";
  position: absolute;
  inset: 0;
  background: var(--pattern, none);
  background-size: cover;
  mix-blend-mode: var(--pattern-blend, overlay);
  opacity: var(--pattern-opacity, 0.85);
}
.bottle .body::after {
  /* highlight */
  content: "";
  position: absolute;
  top: 6%;
  left: 12%;
  width: 14%;
  height: 78%;
  background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0));
  filter: blur(4px);
  border-radius: 50%;
}
.bottle .cap {
  position: absolute;
  top: 0;
  left: 22%;
  width: 56%;
  height: 16%;
  background: var(--cap, #14181E);
  border-radius: 10px 10px 4px 4px;
  box-shadow: inset 0 -3px 6px rgba(0,0,0,0.3), 0 4px 8px rgba(0,0,0,0.12);
}
.bottle .loop {
  position: absolute;
  top: 4%;
  right: 8%;
  width: 14%;
  height: 12%;
  border: 3px solid var(--cap, #14181E);
  border-radius: 50%;
}

/* Plate shape */
.plate {
  width: 72%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--plate-bg, #FAF5EC);
  position: relative;
  z-index: 1;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 -2px 0 rgba(0,0,0,0.04) inset,
    0 18px 30px rgba(0,0,0,0.08);
}
.plate::before {
  content: "";
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  background: var(--plate-rim, #F4ECE0);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.04) inset;
}
.plate::after {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: var(--plate-pattern, none);
  background-size: cover;
  mix-blend-mode: multiply;
  opacity: 0.85;
}

/* Caption (mono) under placeholders */
.placeholder-caption {
  position: absolute;
  left: 12px;
  bottom: 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  color: var(--ink-4);
  z-index: 2;
}

/* ---------- Product card ---------- */
.pcard { display: block; cursor: pointer; }
.pcard .img-wrap {
  position: relative;
  background: var(--product-bg);
  overflow: hidden;
  aspect-ratio: 1 / 1;
}
/* ---------- Product card sizes (ProductTile `size` prop) ----------
   .pcard-small  → Mornings / moment sliders (6-up)
   .pcard-medium → New In slider (fixed 348px)
   .pcard-large  → Best Sellers grid (fills its cell)
   Shared treatment: image fills a 3/4 frame; 15px title. */
.moment-slider-stack { justify-content: center; }
.pcard-small { width: calc((100% - 40px) / 6); }
.pcard-medium { width: 348px; }
.pcard-small .img-wrap, .pcard-medium .img-wrap, .pcard-large .img-wrap { aspect-ratio: 3 / 4; }
.pcard-small .img-wrap img, .pcard-medium .img-wrap img, .pcard-large .img-wrap img { object-fit: cover !important; }
.pcard-small > div:last-child > div:first-child, .pcard-medium > div:last-child > div:first-child, .pcard-large > div:last-child > div:first-child { font-size: 15px; }
/* Drawer product titles stay on one line with an ellipsis */
.shoplook-grid .pcard > div:last-child > div:first-child { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shoplook-explore { grid-column: 1 / -1; width: 100%; margin-top: 14px; justify-content: center; background: #fff; color: var(--ink); border: none; border-radius: 8px; }
.shoplook-explore:hover { background: var(--bronze); color: #fff; }
/* Add-to-cart — white pill floated over the image bottom, revealed on card hover */
.pcard .card-add {
  position: absolute; left: 16px; right: 16px; bottom: 16px;
  height: 46px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  backdrop-filter: blur(10px) saturate(120%);
  border-radius: 3px;
  font-family: var(--sans); font-size: 14px; font-weight: 400; letter-spacing: 0.01em;
  cursor: pointer;
  z-index: 2;
  opacity: 0; transform: translateY(8px);
  transition: opacity 260ms ease, transform 260ms ease, background 200ms ease, color 200ms ease, border-color 200ms ease;
  pointer-events: none;
}
.pcard:hover .card-add { opacity: 1; transform: translateY(0); pointer-events: auto; }
.pcard .card-add:hover { background: #fff; color: var(--ink); border-color: #fff; }
/* Hide scrollbar on the moments product slider */
.moment-slider::-webkit-scrollbar { display: none; }
.moment-slider { -ms-overflow-style: none; }
/* Cooking moment — category banners: 5-up fill on desktop, horizontal slider below 1101px */
.moment-cat-slider .moment-cat-card { transition: transform 300ms ease; }
.moment-cat-slider .moment-cat-card:hover { transform: translateY(-4px); }
@media (min-width: 1101px) {
  .moment-cat-slider { overflow-x: visible !important; justify-content: center !important; }
  .moment-cat-slider .moment-cat-card { width: calc((100% - 32px) / 5) !important; }
}

/* ---- Moments — full-bleed image with centered text overlay, slider below ---- */
.moment-tint { width: 100%; background: rgba(154, 140, 96, 0.30); padding: clamp(28px, 3vw, 44px) 0 calc(clamp(28px, 3vw, 44px) + 30px); }
.moment-band { width: 100%; max-width: 1772px; margin: 0 auto; padding: 0 clamp(20px, 3vw, 40px); }
.moment-imgband { position: relative; width: 100%; aspect-ratio: 1920 / 896; background-size: cover; background-position: center; display: flex; align-items: flex-start; justify-content: flex-start; }
.moment-imgband::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgba(20,16,12,0.44) 0%, rgba(20,16,12,0.16) 34%, rgba(20,16,12,0) 62%); }
.moment-overlay { position: relative; z-index: 1; text-align: left; max-width: 560px; padding: clamp(40px, 5vw, 72px) clamp(20px, 3vw, 40px); color: #fff; display: flex; flex-direction: column; align-items: flex-start; }
.moment-overlay .moment-intro-title { color: #fff; }
.moment-intro-title { font-family: var(--serif); font-weight: 300; line-height: 1.05; letter-spacing: -0.012em; margin: 0; font-size: clamp(40px, 4.5vw, 68px); }
.moment-overlay .moment-intro-copy { margin: 24px 0 0; max-width: 460px; font-family: var(--sans); font-weight: 400; font-size: 18px; line-height: 1.5; color: rgba(255,255,255,0.92); }
.moment-overlay .moment-cta-row { margin-top: 32px; }
.moment-slider-stack { margin-top: 0; }
.moment-shop-row { display: flex; justify-content: center; margin-top: clamp(28px, 3vw, 44px); }
.btn.moment-shop-btn { background: #fff; color: var(--ink); border: none; border-radius: 8px; }
.btn.moment-shop-btn:hover { background: var(--bronze); color: #fff; }
.moment-products-title { text-align: center; font-family: var(--sans); font-weight: 300; font-size: 16px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); margin: 0 0 clamp(20px, 2.4vw, 36px); }
/* Moments overlay CTAs — glass primary + white ghost, legible over the image */
.moment-overlay .btn.solid-light { background: rgba(255,255,255,0.12); color: #fff; border: 1px solid rgba(255,255,255,0.35); -webkit-backdrop-filter: blur(10px) saturate(120%); backdrop-filter: blur(10px) saturate(120%); border-radius: 8px; }
.moment-overlay .btn.solid-light:hover { background: #fff; color: var(--ink); border-color: #fff; }
.moment-overlay .btn.ghost { color: #fff; border-color: rgba(255,255,255,0.55); }
.moment-overlay .btn.ghost.invert-hover:hover { background: #fff; color: var(--ink); border-color: #fff; }
.moment-getlook { position: absolute; z-index: 2; left: clamp(20px, 3vw, 40px); bottom: clamp(20px, 3vw, 40px); display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 13px 22px; border-radius: 999px; border: none; background: #fff; color: var(--ink); font-family: var(--sans); font-weight: 600; font-size: 16px; cursor: pointer; box-shadow: 0 4px 18px rgba(20,16,12,0.18); transition: background .25s ease, color .25s ease; }
.moment-getlook svg { stroke: currentColor; }
.moment-getlook:hover { background: var(--ink); color: #fff; }
/* Shop-the-look hotspot pins (Living moment) */
.mpin-wrap { position: absolute; transform: translate(-50%, -50%); }
.mpin { width: 40px; height: 40px; border-radius: 50%; border: none; padding: 0; cursor: pointer; background: rgba(255,255,255,0.5); display: grid; place-items: center; box-shadow: 0 2px 10px rgba(15,12,8,0.35); transition: transform .2s ease, background .2s ease; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.mpin::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.7); animation: mpin-pulse 2.4s ease-out infinite; }
@keyframes mpin-pulse { 0% { transform: scale(0.7); opacity: 0.8; } 100% { transform: scale(1.5); opacity: 0; } }
.mpin-dot { width: 10px; height: 10px; border-radius: 50%; background: #fff; transition: background .2s ease; position: relative; }
.mpin:hover { transform: scale(1.12); }
.mpin.editing { cursor: grab; }
.mpin.editing:active { cursor: grabbing; }
.mpin-editbar { position: absolute; top: 16px; right: 16px; z-index: 7; display: flex; gap: 8px; }
.mpin-editbtn { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: var(--ink); background: rgba(255,255,255,0.92); border: none; border-radius: 999px; padding: 8px 14px; cursor: pointer; box-shadow: 0 2px 10px rgba(15,12,8,0.25); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.mpin-editbtn:hover { background: #fff; }
.mpin-editbtn.on { background: var(--ink); color: #fff; }
.mpin.active { background: #fff; }
.mpin.active::before { display: none; }
.mpin.active .mpin-dot { width: 10px; height: 10px; background: transparent; }
.mpin.active .mpin-dot::before, .mpin.active .mpin-dot::after { content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 1px; border-radius: 1px; background: var(--ink); }
.mpin.active .mpin-dot::before { transform: translate(-50%, -50%) rotate(45deg); }
.mpin.active .mpin-dot::after { transform: translate(-50%, -50%) rotate(-45deg); }
.mpin-card { position: absolute; bottom: calc(100% + 16px); left: 50%; transform: translateX(-50%); width: 224px; background: #fff; border-radius: 16px; box-shadow: 0 22px 55px -14px rgba(15,12,8,0.45); overflow: visible; padding: 10px 10px 12px; }
.mpin-card::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 9px solid transparent; border-top-color: #fff; }
.mpin-card .pcard { width: 100% !important; }
.mpin-card .pcard .img-wrap { aspect-ratio: 3 / 4; border-radius: 10px; }
.mpin-card .pcard .img-wrap img { object-fit: cover !important; }
.mpin-card .pcard .card-add { left: 10px; right: 10px; bottom: 10px; height: 42px; }
/* Drinkware lookbook — shop-by-category row (replaces the drawer moment) */
.dwl-section { padding: clamp(64px, 8vw, 128px) 0 16px; }
.dwl-wrap { width: 100%; max-width: none; margin: 0 auto; padding: 0 clamp(20px, 3vw, 40px); }
.dwl-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 44px; }
.dwl-eyebrow { font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 16px; }
.dwl-title { font-family: var(--serif); font-weight: 300; font-size: clamp(38px, 5vw, 64px); line-height: 1.02; color: var(--ink); margin: 0; }
.dwl-sub { margin: 18px 0 0; max-width: 56ch; font-family: var(--sans); font-weight: 400; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.dwl-shopall { white-space: nowrap; }
.dwl-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.dwl-card { position: relative; display: block; aspect-ratio: 3 / 4.2; border-radius: 16px; overflow: hidden; cursor: pointer; background: var(--product-bg); }
.dwl-card::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 50%; background: linear-gradient(to top, rgba(18,14,10,0.62), rgba(18,14,10,0.12) 52%, rgba(18,14,10,0)); pointer-events: none; z-index: 1; }
.dwl-card-media { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 0.85s cubic-bezier(0.2, 0.7, 0.2, 1); will-change: transform; }
.dwl-card:hover .dwl-card-media { transform: scale(1.06); }
.dwl-card:hover .dwl-card-title { transform: translateY(-54px); }
.dwl-card-title { position: absolute; bottom: 22px; left: 20px; right: 20px; z-index: 2; text-align: center; font-family: var(--serif); font-weight: 300; font-size: clamp(30px, 3vw, 42px); line-height: 1.12; color: var(--ivory); text-shadow: 0 1px 12px rgba(0,0,0,0.34); transition: transform 0.42s cubic-bezier(0.2, 0.7, 0.2, 1); }
.dwl-card-pill { position: absolute; left: 50%; bottom: 16px; height: 48px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 230px; max-width: calc(100% - 32px); padding: 0 16px; background: rgba(255,255,255,0.12); color: #fff; border: 1px solid rgba(255,255,255,0.35); -webkit-backdrop-filter: blur(10px) saturate(120%); backdrop-filter: blur(10px) saturate(120%); border-radius: 999px; font-family: var(--sans); font-size: 15px; font-weight: 500; letter-spacing: 0.01em; opacity: 0; transform: translate(-50%, 12px); pointer-events: none; transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.2,0.7,0.2,1), background 0.25s ease, color 0.25s ease, border-color 0.25s ease; }
.dwl-card:hover .dwl-card-pill { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.dwl-card-pill:hover { background: #fff; color: var(--ink); border-color: #fff; }
@media (max-width: 1100px) {
  .dwl-row { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .dwl-head { margin-bottom: 28px; }
}
@media (max-width: 768px) {
  .dwl-section { padding: 6px 0 0; }
  .dwl-row {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 14px !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: none;
    scroll-padding-left: var(--gutter);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y;
    margin-left: calc(-1 * var(--gutter));
    margin-right: calc(-1 * var(--gutter));
    padding-left: var(--gutter);
    padding-right: var(--gutter);
    padding-bottom: 4px;
  }
  .dwl-row.dragging { cursor: grabbing; scroll-snap-type: none; }
  .dwl-row img { -webkit-user-drag: none; user-drag: none; }
  .dwl-row::-webkit-scrollbar { display: none; }
  .dwl-card { flex: 0 0 74% !important; scroll-snap-align: start; min-width: 0; }
  .dwl-card-pill { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
  .dwl-card-title { font-size: 30px; transform: translateY(-52px); }
}
.mpin-card-img { aspect-ratio: 1 / 1; border-radius: 16px 16px 0 0; background-size: cover; background-position: center; background-color: #efeae0; }
.mpin-card-info { padding: 16px 16px 18px; }
.mpin-card-title { font-family: var(--sans); font-weight: 600; font-size: 15px; line-height: 1.3; color: var(--ink); }
.mpin-card-sub { margin-top: 3px; font-family: var(--sans); font-size: 13px; color: var(--ink-3); }
.mpin-card-price { margin-top: 12px; font-family: var(--sans); font-weight: 300; font-size: 16px; color: var(--ink); font-variant-numeric: tabular-nums; }
/* Shop-the-look drawer (Living moment) — viewport-fixed; body scroll locked while open */
.shoplook { position: fixed; inset: 0; z-index: 200; visibility: hidden; }
.shoplook.open { visibility: visible; }
.shoplook-scrim { position: absolute; inset: 0; background: rgba(15,12,8,0.62); opacity: 0; transition: opacity .35s ease; }
.shoplook.open .shoplook-scrim { opacity: 1; }
.shoplook-panel { position: absolute; top: 0; right: 0; height: 100%; width: min(560px, 92vw); background: var(--ivory, #fff); box-shadow: -18px 0 50px -20px rgba(15,12,8,0.4); transform: translateX(100%); transition: transform .4s cubic-bezier(0.22,1,0.36,1); display: flex; flex-direction: column; }
.shoplook.open .shoplook-panel { transform: translateX(0); }
.shoplook-head { display: flex; align-items: center; justify-content: space-between; padding: 28px clamp(20px,3vw,32px) 20px; }
.shoplook-title { margin: 0; font-family: var(--serif); font-weight: 300; font-size: 30px; letter-spacing: -0.01em; color: var(--ink); }
.shoplook-close { background: none; border: none; cursor: pointer; color: var(--ink); display: inline-flex; padding: 6px; border-radius: 50%; transition: background .2s ease; }
.shoplook-close:hover { background: rgba(15,12,8,0.06); }
.shoplook-close svg { stroke: currentColor; }
.shoplook-grid { flex: 1; overflow-y: auto; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 22px 8px; padding: 4px clamp(20px,3vw,32px) clamp(24px,3vw,36px); align-content: start; }
.shoplook-item { cursor: pointer; }
.shoplook-img { width: 100%; aspect-ratio: 1/1; background: #efeae0; background-size: cover; background-position: center; }
.shoplook-name { margin-top: 10px; font-family: var(--sans); font-weight: 600; font-size: 13px; line-height: 1.35; color: var(--ink); }
.shoplook-price { margin-top: 4px; font-family: var(--sans); font-weight: 300; font-size: 14px; color: var(--ink-2, var(--ink)); font-variant-numeric: tabular-nums; }


/* New In slider — no edge fade on desktop; mobile & tablet get the same
   right-edge fade as the Moments sliders (applied inline by initProductSliders). */
@media (min-width: 1025px) {
  .newin-slider { -webkit-mask-image: none !important; mask-image: none !important; }
}

/* ---- Category cards ("Elevate everyday living") ---- */
.cat-card {
  position: relative;
  cursor: pointer;
  overflow: hidden;
  display: block;
}
.cat-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1);
  transform-origin: center center;
  backface-visibility: hidden;
  transition: transform 800ms cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: transform;
}
.cat-card:hover .cat-card-img { transform: scale(1.07); }
.cat-card-grad {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15,12,8,0) 35%, rgba(15,12,8,0.45) 72%, rgba(15,12,8,0.82) 100%);
}
.cat-card-body {
  position: absolute;
  bottom: 24px;
  left: 24px;
  right: 24px;
  color: var(--ivory);
}
.cat-card-title {
  color: var(--ivory);
  font-size: 24px;
  transform: translateY(0);
  transition: transform 440ms cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: transform;
}
.cat-card:hover .cat-card-title { transform: translateY(-46px); }

/* ---- Collections staggered grid ("Elevate everyday living") ---- */
.coll-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 64px;
  align-items: start;
  max-width: 1440px;
  margin: 0 auto;
  padding-top: 96px;
}
.coll-col {
  display: flex;
  flex-direction: column;
  gap: 80px;
}
.coll-col--raised { margin-top: -72px; }
.coll-card {
  display: block;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
}
.coll-card.is-placeholder { cursor: default; }
.coll-card-imgwrap {
  aspect-ratio: 3 / 4;
  overflow: hidden;
}
.coll-card-img {
  width: 100%;
  height: 100%;
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.coll-card:not(.is-placeholder):hover .coll-card-img { transform: scale(1.05); }
.coll-card-ph {
  background: var(--linen-3, #b9b6b0);
  display: flex;
  align-items: center;
  justify-content: center;
}
.coll-card-ph .mono { color: rgba(255,255,255,0.85); font-size: 12px; letter-spacing: 0.12em; }
.coll-card-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.1;
  color: var(--ink);
  margin: 26px 0 0;
}
.coll-card-blurb {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-3);
  margin: 14px auto 0;
  max-width: 40ch;
}
.coll-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink);
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
  transition: color 200ms ease;
}
.coll-card:not(.is-placeholder):hover .coll-card-cta { color: var(--bronze-deep); }
.coll-card.is-placeholder .coll-card-title,
.coll-card.is-placeholder .coll-card-cta { color: var(--ink-3); }
@media (max-width: 1100px) {
  .coll-grid { max-width: none; padding-top: 0; align-items: flex-start; }
  .coll-card { transform: none !important; opacity: 1 !important; }
  .coll-card-blurb br { display: none; }
  .coll-card-title { font-size: 22px; }
  .coll-card-blurb { font-size: 13px; }
}
.cat-card-cta {
  position: absolute;
  left: 0;
  top: 100%;
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ivory);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(0);
  transition: opacity 320ms ease, transform 440ms cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: transform, opacity;
  pointer-events: none;
}
.cat-card:hover .cat-card-cta {
  opacity: 1;
  transform: translateY(-46px);
}
@media (prefers-reduced-motion: reduce) {
  .cat-card-img,
  .cat-card-cta,
  .cat-card-title { transition: none; }
}
.pcard .img-wrap .alt {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 400ms ease;
}
.pcard:hover .img-wrap .alt { opacity: 1; }
.pcard:hover .img-wrap .main { transform: scale(1.02); }
.pcard .img-wrap .main { transition: transform 600ms ease; }

/* Photo-based product cards: no hover scale, no alt swap */
.pcard .img-wrap:has(.swatch-photo) .alt { display: none; }
.pcard:hover .img-wrap:has(.swatch-photo) .main { transform: none; }
.swatch.swatch-photo { aspect-ratio: 1/1; }

/* Badges — small rectangular pills, top-left */
.pcard .badges {
  position: absolute; top: 12px; left: 12px;
  display: flex; gap: 6px; z-index: 2;
}
.pcard .badges .badge {
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 9px;
  border-radius: 2px;
  border: 1px solid var(--hair);
}
.pcard .badges .badge.dark {
  background: var(--ink);
  color: var(--ivory);
  border-color: var(--ink);
}
.pcard .badges .badge.sale {
  background: var(--red);
  color: var(--ivory);
  border-color: var(--red);
}

/* Wishlist — outline only, no circle background. Hidden until card hover. */
.pcard .wishlist {
  position: absolute; top: 12px; right: 12px;
  width: 28px; height: 28px;
  background: transparent;
  border: none;
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
  color: var(--ink-2);
  padding: 0;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity 260ms ease, transform 260ms ease, color 200ms ease;
  pointer-events: none;
}
.pcard:hover .wishlist { opacity: 1; transform: translateY(0); pointer-events: auto; }
.pcard .wishlist:hover { color: var(--bronze-deep); }
.pcard .wishlist svg { fill: #fff; stroke: #e1e1e1; }
.pcard .wishlist:hover svg { stroke: var(--bronze-deep); }

/* Label row — top-left, holds Build-your-own / Best-seller / discount */
.pcard .card-labels {
  position: absolute; top: 12px; left: 12px; z-index: 3;
  display: flex; gap: 3px; align-items: center;
}
/* "Build your own" label — minimal variant */
.pcard .byo-label {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--linen);
  padding: 4px 8px;
  border-radius: 2px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
/* "Best seller" label — identical to "Build your own" */
.pcard .bs-label {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--linen);
  padding: 4px 8px;
  border-radius: 2px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
/* Discount badge — sits beside the other labels, ink bg, white text */
.pcard .discount-label {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: var(--ink);
  padding: 4px 8px;
  border-radius: 2px;
}

/* ---------- Journal: full-width story carousel ---------- */
.journal-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.journal-slider { position: relative; --jfade: clamp(40px, 5vw, 90px); --story-w: calc((100vw - var(--gutter) * 2 - 40px) / 2); }
.journal-nav {
  position: absolute;
  top: 0;
  bottom: 0;
  width: calc(var(--jfade) + clamp(10px, 2vw, 30px));
  z-index: 4;
  cursor: pointer;
}
.journal-nav-left { left: 0; }
.journal-nav-right { right: 0; }
.journal-viewport {
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: none;
  mask-image: none;
}
.journal-track {
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-padding-left: var(--gutter);
  padding: 0 var(--gutter) 4px;
  cursor: grab;
  scrollbar-width: none;
  -ms-overflow-style: none;
  touch-action: pan-y;
}
.journal-track::-webkit-scrollbar { display: none; }
.journal-track.dragging { cursor: grabbing; }

.story-slide {
  flex: 0 0 var(--story-w);
  display: flex;
  align-items: center;
  gap: 0;
  user-select: none;
  -webkit-user-select: none;
}
.story-slide-img {
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  cursor: pointer;
}
.story-slide-text {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 30px;
}
.story-slide-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 380px;
  margin: 0 auto;
}
.journal-card-img-inner {
  width: 100%;
  height: 100%;
  transform: scale(1);
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.story-slide-img:hover .journal-card-img-inner { transform: scale(1.03); }

/* Journal pagination bullets (line style, matches hero) */
.journal-bullets {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 40px;
  padding-left: var(--gutter);
}
.journal-bullet {
  display: block;
  width: 8px;
  height: 2px;
  padding: 0;
  border: none;
  background: rgba(0, 0, 0, 0.22);
  cursor: pointer;
  transition: width 320ms ease, background 320ms ease;
}
.journal-bullet.active {
  width: 28px;
  background: var(--ink);
}

/* Discover cards (Wedding Registry / Gift Cards / At Home) — subtle hover */
.discover-card-img {
  transform: scale(1);
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: center;
  will-change: transform;
}
.discover-card:hover .discover-card-img { transform: scale(1.045); }
/* Minimal-variant subtitle line under title */
.pcard .info .subtitle {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.3;
  color: var(--ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
/* Minimal-variant price — full ink, not muted */
.pcard .info .price.plain {
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
}

/* Info block under image */
.pcard .info {
  padding: 16px 2px 0;
  display: flex; flex-direction: column; gap: 2px;
}
.pcard .info .title {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink);
}
.pcard .info .price {
  font-size: 13px;
  color: var(--ink-3);
  font-family: var(--mono);
  letter-spacing: 0.04em;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.pcard .info .price.was {
  text-decoration: line-through;
  margin-right: 8px;
}
.pcard .info .price.sale {
  color: var(--red);
}
.pcard .info .price-row {
  display: flex; align-items: baseline; gap: 4px;
}

/* Add to cart button — full-width outlined, always visible */
.pcard .add-cart {
  width: 100%;
  margin-top: 14px;
  padding: 12px 16px;
  background: transparent;
  border: 1px solid var(--ink);
  border-radius: 0;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink);
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.pcard .add-cart:hover {
  background: var(--ink);
  color: var(--ivory);
}

/* Hero overlays */
.hero-overlay {
  background: linear-gradient(180deg, rgba(15,12,8,0.0) 30%, rgba(15,12,8,0.35) 100%);
}

/* Feature banner hover — slight image zoom */
.feature-banner:hover .feature-banner-img { transform: scale(1.04); }

/* Logo — sits on linen; flips white over dark hero */
.brand img { transition: filter 320ms ease; }

/* Marquee */
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.marquee {
  display: flex;
  gap: 48px;
  animation: marquee 60s linear infinite;
  white-space: nowrap;
}

/* Underline link — hidden by default, slides in on hover */
.u-link {
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
  cursor: pointer;
}
.u-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 1px;
  width: 100%;
  background: currentColor;
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 320ms ease;
}
.u-link:hover::after { transform-origin: left center; transform: scaleX(1); }
.u-link.is-active::after { transform: scaleX(1); }

/* Sheet over content */
.scrim { position: fixed; inset: 0; background: rgba(15,12,8,0.45); z-index: 90; opacity: 0; pointer-events: none; transition: opacity 220ms ease; }
.scrim.show { opacity: 1; pointer-events: auto; }

/* MEGA MENU */
.megamenu {
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  background: var(--linen);
  border-top: 1px solid var(--hair);
  z-index: 80;
  transform: translateY(-6px);
  opacity: 0;
  pointer-events: none;
  transition: transform 240ms ease, opacity 240ms ease;
  box-shadow: 0 24px 40px -16px rgba(31,26,18,0.18);
}
.megamenu.open { transform: translateY(0); opacity: 1; pointer-events: auto; }

/* Category nav — centered row under the logo */
.cat-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 50px;
  padding: 4px 24px 18px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.cat-nav a { white-space: nowrap; }

/* Sticky (scrolled) header — more compact: smaller logo pulls the category row up */
.site-header > .wrap { transition: height 620ms cubic-bezier(0.22, 1, 0.36, 1); }
.site-header .brand img { transition: filter 620ms cubic-bezier(0.22, 1, 0.36, 1), transform 620ms cubic-bezier(0.22, 1, 0.36, 1); transform-origin: center center; will-change: transform; }
.site-header .cat-nav { transition: padding 620ms cubic-bezier(0.22, 1, 0.36, 1); }
.site-header.solid > .wrap { height: 72px !important; }
.site-header.solid .brand img { transform: scale(0.8); }
.site-header.solid .cat-nav { padding-top: 0; padding-bottom: 12px; }

/* Sticky header — search field goes to solid black ink */
.site-header.solid .search-wrap .input {
  border-color: transparent;
  color: var(--ink);
}
.site-header.solid .search-wrap .input::placeholder { color: var(--ink); opacity: 1; }
.site-header.solid .search-wrap .search-icon { color: var(--ink); }

/* HEADER — fixed at top, overlays hero on hero pages */
.site-header-stack {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
}
.site-header {
  background: transparent;
  color: #FFFFFF;
  border-bottom: 1px solid transparent;
  transition: background 620ms cubic-bezier(0.22, 1, 0.36, 1), color 620ms cubic-bezier(0.22, 1, 0.36, 1), border-color 620ms cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
}
/* Top-of-page gradient scrim so light text is readable
   regardless of the hero image behind. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0 0 -32px 0;          /* bleed down a touch to soften the seam */
  background: linear-gradient(180deg, rgba(15,12,8,0.55) 0%, rgba(15,12,8,0.25) 60%, rgba(15,12,8,0) 100%);
  pointer-events: none;
  opacity: 1;
  transition: opacity 320ms ease;
  z-index: -1;
}
.site-header.solid,
.site-header.search-open,
.site-header:hover {
  background: var(--linen);
  color: var(--ink);
  border-bottom-color: var(--hair-soft);
}
.site-header.solid::before,
.site-header.search-open::before,
.site-header:hover::before { opacity: 0; }

/* Non-hero pages need a spacer so content isn't behind the fixed header */
.site-header-spacer {
  height: 140px;  /* 36 announce + 104 header */
}

/* Search field — colours follow the header state; no resting border */
.site-header .input {
  background: transparent;
  border-color: transparent;
  color: #FFFFFF;
  transition: background 220ms ease, border-color 220ms ease, color 220ms ease, padding-left 220ms ease;
}
.site-header .input::placeholder { color: rgba(255,255,255,0.8); }
.site-header.solid .input,
.site-header.search-open .input,
.site-header:hover .input {
  border-color: transparent;
  color: var(--ink);
}
.site-header.solid .input::placeholder,
.site-header.search-open .input::placeholder,
.site-header:hover .input::placeholder { color: var(--ink-3); }

/* Desktop search — resting size; expands toward the logo on focus (24px grid gap + 36px = 60px) */
.site-header .search-wrap {
  flex: 1 1 216px;
  max-width: 288px;
  transition: max-width 380ms cubic-bezier(0.22, 1, 0.36, 1), margin-right 380ms cubic-bezier(0.22, 1, 0.36, 1);
}
.site-header .search-wrap:focus-within {
  max-width: 1000px;
  margin-right: 60px;
}
/* Search close button — gold circle at the end of the open field */
.search-close {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(154, 140, 96, 0.10);
  color: var(--ink);
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}
.search-close:hover { background: #FFFFFF; border-color: var(--hair); color: var(--ink); }

/* Search hover — pure white fill, black text & icon, still no border */
.site-header .input:hover,
.site-header:hover .input:hover,
.site-header.solid .input:hover {
  background: #FFFFFF !important;
  border-color: transparent !important;
  color: var(--ink) !important;
  padding-left: 40px;
}
/* Search focus (click) — white fill + the border returns */
.site-header .input:focus,
.site-header:hover .input:focus,
.site-header.solid .input:focus {
  background: #FFFFFF !important;
  border-color: var(--hair) !important;
  color: var(--ink) !important;
  padding-left: 40px;
  outline: none;
}

/* Popular-searches panel — full-width, opens under the header row (desktop) */
.search-panel {
  position: absolute;
  top: 90px;
  left: 0; right: 0;
  background: var(--linen);
  border-bottom: 1px solid var(--hair-soft);
  padding: 8px 0 44px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 260ms cubic-bezier(0.22,1,0.36,1), transform 260ms cubic-bezier(0.22,1,0.36,1), visibility 0s linear 260ms;
  z-index: 85;
}
.site-header.solid .search-panel { top: 72px; }
.search-panel.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 260ms cubic-bezier(0.22,1,0.36,1), transform 260ms cubic-bezier(0.22,1,0.36,1);
}
.search-panel-inner {
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  max-width: 520px;
}
.search-panel-label {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 24px;
  color: var(--ink);
  margin-bottom: 20px;
}
.search-panel .search-suggest-link {
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink);
  padding: 9px 0;
  border-bottom: 0;
}
.search-panel .search-suggest-link:hover { color: var(--bronze); }
.site-header .input:hover::placeholder,
.site-header .input:focus::placeholder {
  color: var(--ink-3);
}
.site-header .input:hover + .search-icon,
.site-header .input:focus + .search-icon {
  color: var(--ink);
}
.site-header .search-icon {
  transition: color 220ms ease;
}

/* Search icon */
.site-header .search-icon { color: #FFFFFF; }
.site-header.solid .search-icon,
.site-header.search-open .search-icon,
.site-header:hover .search-icon { color: var(--ink-3); }

/* Cart bag count badge — flip ink/white */
.site-header .bag-badge {
  background: #FFFFFF;
  color: var(--ink);
}
.site-header.solid .bag-badge,
.site-header:hover .bag-badge {
  background: var(--ink);
  color: var(--linen);
}

/* Language pill — adapt to header tone */
.site-header .lang-pill {
  border-color: rgba(255,255,255,0.55);
}
.site-header .lang-pill .lang-active {
  background: #FFFFFF; color: var(--ink);
}
.site-header .lang-pill .lang-inactive {
  background: transparent; color: #FFFFFF;
}
.site-header.solid .lang-pill,
.site-header:hover .lang-pill {
  border-color: var(--hair);
}
.site-header.solid .lang-pill .lang-active,
.site-header:hover .lang-pill .lang-active {
  background: var(--ink); color: var(--ivory);
}
.site-header.solid .lang-pill .lang-inactive,
.site-header:hover .lang-pill .lang-inactive {
  background: transparent; color: var(--ink-2);
}

/* Language dropdown — trigger borrows header foreground */
.site-header .lang-dd-trigger {
  border-color: rgba(255,255,255,0.55);
  color: #FFFFFF;
}
.site-header.solid .lang-dd-trigger,
.site-header:hover .lang-dd-trigger {
  border-color: var(--hair);
  color: var(--ink);
}
.site-header .lang-dd-trigger:hover {
  border-color: currentColor;
}

/* Logo — invert the SVG when over a dark hero, restore when solid */
.site-header .brand img {
  filter: brightness(0) invert(1);   /* white logo over hero */
  transition: filter 620ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: center center;
  will-change: transform;
}
.site-header.solid .brand img,
.site-header.search-open .brand img,
.site-header:hover .brand img {
  filter: none;                       /* original logo on linen */
}
.announce {
  background: var(--ink);
  color: var(--linen);
  font-size: 13px;
  letter-spacing: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  font-family: var(--sans);
  overflow: visible;
  position: relative;
  padding: 0 var(--gutter);
}
/* Right-pinned preheader actions: Find a store + language, each with a full-height divider. */
.announce-actions {
  position: absolute;
  right: var(--gutter);
  top: 0;
  height: 100%;
  display: flex;
  align-items: stretch;
}
.announce-store,
.announce-lang {
  display: flex;
  align-items: center;
  height: 100%;
  color: var(--linen);
}
/* Divider only between the two items — Find a store has no left border. */
.announce-lang {
  padding-left: 20px;
  border-left: 1px solid rgba(255,255,255,0.2);
}
.announce-store {
  gap: 8px;
  padding: 0 20px 0 0;
  background: transparent;
  border: 0;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0;
  cursor: pointer;
  text-decoration: none;
}
.announce-store:hover { opacity: 0.75; }
.announce-store svg { flex: 0 0 auto; }
.announce-store + .announce-store { padding-left: 20px; border-left: 1px solid rgba(255,255,255,0.2); }
.announce-lang .lang-dd-trigger {
  height: auto;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  color: var(--linen);
  font-family: var(--sans) !important;
  font-size: 13px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-weight: 300;
}
.announce-lang .lang-dd-trigger:hover { opacity: 0.75; }

@media (max-width: 1100px) {
  .announce-store { display: none !important; }
}

/* Footer */
.site-footer { background: var(--linen); color: var(--ink-2); padding: 0 0 40px; position: relative; }
.site-footer .wrap { color: var(--ink-2); position: relative; z-index: 1; }
.site-footer h4 { font-family: var(--serif); font-weight: 400; font-size: 24px; letter-spacing: 0; text-transform: none; color: var(--ink); margin: 0 0 20px; }
.site-footer a { color: var(--ink-3); font-size: 14px; cursor: pointer; transition: color 180ms ease; }
.site-footer a:hover { color: var(--bronze); }
.site-footer .link { color: var(--ink); border-color: var(--ink); transition: color 180ms ease, border-color 180ms ease; }
.site-footer .link:hover { color: var(--bronze); border-color: var(--bronze); }
.site-footer .input { background: var(--linen); border-color: var(--hair); color: var(--ink); transition: background 200ms ease, border-color 200ms ease; }
.site-footer .input::placeholder { color: var(--ink-4); }
.site-footer .input:hover, .site-footer .input:focus { background: #fff; }
.site-footer .footer-join { background: var(--ink); color: #fff; transition: background 200ms ease, color 200ms ease; }
.site-footer .footer-join:hover { background: var(--bronze); color: #fff; }
.footer-social { display: flex; gap: 14px; margin-top: 48px; }
.social-ic { display: inline-flex; align-items: center; justify-content: center; width: 68px; height: 68px; border-radius: 50%; background: #fff; color: var(--ink) !important; cursor: pointer; transition: background 180ms ease, color 180ms ease; }
.social-ic svg { width: 22px; height: 22px; }
.social-ic:hover { background: var(--ink); color: #fff !important; }

/* Footer accordion column — neutral on desktop (title + list always shown) */
.footer-col-head { display: inline-flex; align-items: baseline; gap: 8px; width: 100%; background: none; border: 0; padding: 0; margin: 0; color: inherit; cursor: default; text-align: left; }
.footer-col-head h4 { margin: 0 0 18px; }
.footer-col-chev { display: none; }
.footer-col-body { display: block; }

/* Footer: centered + accordion categories on mobile & tablet */
@media (max-width: 1100px) {
  .site-footer { text-align: center; }
  .site-footer .wrap > div:first-child > div:first-child { display: flex; flex-direction: column; align-items: center; }
  .site-footer .wrap > div:first-child > div:first-child .body { max-width: 420px; }
  .footer-cols { grid-template-columns: 1fr !important; gap: 0 !important; }
  .footer-col { border-top: 1px solid var(--hair-soft); }
  .footer-col-head { justify-content: center; position: relative; cursor: pointer; padding: 16px 0; }
  .footer-col-head h4 { margin: 0; }
  .footer-col-chev { display: inline-block; position: absolute; right: 2px; top: 50%; transform: translateY(-50%); transition: transform 220ms ease; color: var(--ink-3); }
  .footer-col.is-open .footer-col-chev { transform: translateY(-50%) rotate(180deg); }
  .footer-col-body { max-height: 0; overflow: hidden; transition: max-height 300ms ease; }
  .footer-col.is-open .footer-col-body { max-height: 360px; }
  .footer-col-body ul { align-items: center !important; padding-bottom: 18px !important; }
  /* Non-accordion columns (Visit us, newsletter) — centered, with dividers */
  .footer-cols > div:not(.footer-col) { border-top: 1px solid var(--hair-soft); padding-top: 24px; padding-bottom: 24px; }
  .footer-cols > div:not(.footer-col) ul { align-items: center !important; }
  .footer-cols > div:not(.footer-col) > div[style*="flex"] { max-width: 420px; margin-left: auto; margin-right: auto; }
  .footer-visit, .footer-news { grid-column: auto !important; }
  .footer-visit ul { grid-template-columns: 1fr !important; row-gap: 24px !important; }
  .footer-legal { justify-content: center !important; text-align: center; margin-top: 28px !important; }
  .footer-social { justify-content: center; gap: 6px !important; margin-top: 72px !important; margin-bottom: 12px !important; }
  .site-footer .wrap > div:first-child { margin-bottom: 36px !important; }
}

/* ===== Tablet ===== */
@media (max-width: 1100px) {
  :root { --gutter: 28px; }
  /* Desktop nav → drawer; search becomes an icon next to the menu */
  .nav-mobile-left { display: flex !important; }
  .left-nav { display: none !important; }
  .nav-left-spacer { display: none !important; }
  .cat-nav { display: none !important; }
  .search-wrap { display: none !important; }
  .search-panel { display: none !important; }
  /* Preheader: left-align the rotating message to the device margin; language pinned right */
  .announce { justify-content: flex-start !important; padding-left: var(--gutter) !important; padding-right: var(--gutter) !important; }
  .announce-msg { text-align: left; padding: 0 84px 0 0 !important; }
  .announce-lang { right: var(--gutter) !important; }
  .site-header .right-nav { gap: 18px !important; }
  .site-header .right-nav a[title="My Estia"] span { display: none !important; }
  /* More breathing room between the account/fav/cart group and language */
  .nav-lang { display: inline-flex !important; align-items: center !important; margin-left: 14px !important; padding-left: 18px !important; border-left: 1px solid rgba(255,255,255,0.2) !important; }
  .site-header.solid .nav-lang,
  .site-header:hover .nav-lang { border-left-color: var(--hair) !important; }
  /* Hero title slightly bigger on tablet */
  .hero-title { font-size: 58px !important; }
  /* Section spacing — slightly tighter on tablet */
  .section { padding: 72px 0 !important; }
  .moment-section { padding-top: 0 !important; padding-bottom: 0 !important; }
  .cat-section { padding-top: 96px !important; padding-bottom: 32px !important; }
  .bestsellers-section { padding-top: 72px !important; }
  .drink-wrap { padding-top: 96px !important; }
  .prog-pinned { padding-top: 48px !important; }
  .loyalty-section { padding: 96px 0 72px !important; }
  .journal-section { padding-top: 72px !important; }
  .site-footer { padding-top: 64px !important; }
}

/* ===== Section pass: sliders + reflow (mobile + tablet) ===== */
@media (max-width: 1100px) {
  /* Horizontal drag/scroll slider for product & category rows */
  .m-slider {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 14px !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: none;
    scroll-padding-left: var(--gutter);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y;
    margin-left: calc(-1 * var(--gutter));
    margin-right: calc(-1 * var(--gutter));
    padding-left: var(--gutter);
    padding-right: var(--gutter);
    padding-bottom: 4px;
  }
  .m-slider.dragging { cursor: grabbing; scroll-snap-type: none; }
  .m-slider img { -webkit-user-drag: none; user-drag: none; }
  .m-slider::-webkit-scrollbar { display: none; }
  .m-slider > * {
    flex: 0 0 42% !important;
    scroll-snap-align: start;
    min-width: 0;
  }

  /* Feature banners row: stack the intro text above the scrolling banners on mobile */
  .feature-banners-row { display: block !important; }
  .feature-intro { display: block !important; padding: 0 var(--gutter) calc(var(--gutter) * 1.6) !important; }
  /* Feature banners: first card rests at the page margin, the rest bleed to the edge */
  .feature-banners {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 4px !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: none;
    scroll-padding-left: var(--gutter);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y;
    margin-left: calc(-1 * var(--gutter));
    margin-right: calc(-1 * var(--gutter));
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 4px;
  }
  .feature-banners.dragging { cursor: grabbing; scroll-snap-type: none; }
  .feature-banners::-webkit-scrollbar { display: none; }
  .feature-banners img { -webkit-user-drag: none; user-drag: none; }
  .feature-banners > * {
    flex: 0 0 64% !important;
    scroll-snap-align: start;
    min-width: 0;
  }
  .feature-banners > *:first-child { margin-left: var(--gutter); }
  .feature-banners > *:last-child { margin-right: var(--gutter); }
  .cat-grid { grid-template-rows: none !important; gap: 4px !important; -webkit-mask-image: none !important; mask-image: none !important; scroll-snap-type: none !important; scroll-padding-left: var(--gutter) !important; }
  .cat-grid > .cat-card { aspect-ratio: 3 / 4; flex: 0 0 46% !important; scroll-snap-align: start; }
  /* Category section title must wrap (not nowrap) so it centers on small screens */
  .cat-section h2 { white-space: normal !important; }
  /* fix the stray fixed-width gradient overlay on feature banners */
  .feature-banner [style*="460px"] { width: 100% !important; }

  /* Section header rows (title + “shop all”) stack */
  .mrow-head { flex-direction: column !important; align-items: flex-start !important; gap: 18px !important; }
  .mrow-head h2, .mrow-head h3 { font-size: clamp(30px, 5vw, 44px) !important; }

  /* Editorial Moments: full-bleed image with centered overlay, slider below */
  .moment-imgband { aspect-ratio: 3 / 4; }
  .moment-overlay .moment-intro-copy { font-size: 16px; }
  .moment-intro-title { font-size: clamp(34px, 6vw, 52px) !important; max-width: none !important; }

  /* Featured collection: title → image (swatches on its bottom edge) → text → CTAs */
  .fc-section { display: flex !important; flex-direction: column !important; }
  .fc-overlay { display: contents !important; }
  .fc-grid { display: contents !important; }
  .fc-content { display: contents !important; }
  .fc-grid > div:first-child { display: none !important; }
  .fc-content > h2 { order: 1; padding: 0 var(--gutter); position: relative; z-index: 2; }
  .fc-img {
    order: 2;
    position: relative;
    z-index: 1;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    object-fit: cover;
  }
  .fc-content > .fc-config-title {
    order: 3;
    margin: 20px 0 0 !important;
    position: relative;
    z-index: 2;
    padding: 0 var(--gutter);
  }
  .fc-content > p {
    order: 4;
    width: auto !important;
    max-width: none !important;
    margin: 28px 0 0 !important;
    padding: 0 var(--gutter);
  }
  .fc-content > .moment-cta-row { order: 5; padding: 0 var(--gutter); }
  .fc-content svg { max-width: 100% !important; height: auto !important; }

  /* Programmes: simple stacked cards, no scroll animation */
  .prog-head { flex-direction: column !important; align-items: flex-start !important; gap: 20px !important; margin-bottom: 40px !important; }
  .programmes-grid { grid-template-columns: 1fr !important; gap: 32px !important; margin-left: calc(-1 * var(--gutter)) !important; margin-right: calc(-1 * var(--gutter)) !important; }
  .programmes-grid > .discover-card { transform: none !important; }
  /* Text under the image, centered (Wedding Registry / Gift Cards / At Home) */
  .discover-card { aspect-ratio: auto !important; overflow: visible !important; }
  .discover-card-frame { width: 100% !important; aspect-ratio: 1 / 1; }
  .discover-card > div:last-child {
    position: static !important;
    padding: 18px var(--gutter) 0 !important;
    align-items: center !important;
    text-align: center !important;
  }
  .discover-card > div:last-child h3 { color: var(--ink) !important; }
  .discover-card > div:last-child p { color: var(--ink-2) !important; max-width: none !important; }
  .discover-card .discover-card-cta { color: var(--ink) !important; border-bottom-color: var(--hair) !important; }

  /* Journal / blog: stack image over text (mobile + tablet) */
  .journal-head { flex-direction: column !important; align-items: center !important; text-align: center !important; gap: 24px !important; }
  .journal-track { gap: 4px !important; }
  .story-slide { flex-basis: calc(100vw - var(--gutter) * 2) !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; gap: 20px !important; }
  .story-slide-img { width: 100% !important; flex: 0 0 auto !important; }
  .story-slide-text { align-items: center !important; justify-content: flex-start !important; text-align: center !important; padding: 0 !important; }
  .story-slide-copy { align-items: center !important; text-align: center !important; max-width: 86% !important; margin: 0 auto !important; }
  .story-slide-text .small { margin-left: 0 !important; }
  .story-slide-copy h3 { font-size: clamp(24px, 3.6vw, 32px) !important; }
  .story-slide-copy p { font-size: 15px !important; max-width: none !important; }
  .journal-bullets { justify-content: center !important; padding-left: 0 !important; }
}

/* ===== Hover interactions: disabled on touch (mobile + tablet) ===== */
@media (max-width: 1100px) {
  /* Image zooms */
  .cat-card:hover .cat-card-img,
  .feature-banner:hover .feature-banner-img,
  .discover-card:hover .discover-card-img,
  .story-slide-img:hover .journal-card-img-inner,
  .coll-card:not(.is-placeholder):hover .coll-card-img,
  .pcard:hover .img-wrap .main { transform: none !important; }
  .coll-card:not(.is-placeholder):hover .coll-card-cta { color: inherit !important; }
  /* Category card title slide + CTA reveal */
  .cat-card:hover .cat-card-title { transform: none !important; }
  .cat-card:hover .cat-card-cta { opacity: 0 !important; transform: none !important; }
  /* Product card alt-image swap */
  .pcard:hover .img-wrap .alt { opacity: 0 !important; }
  /* Wishlist shown at rest instead of on hover (touch-accessible) */
  .pcard .wishlist { opacity: 1 !important; transform: none !important; pointer-events: auto !important; }
  /* Add-to-cart shown at rest on touch */
  .pcard .card-add { opacity: 1 !important; transform: none !important; pointer-events: auto !important; }
}

/* Tablet: larger banner titles & text */
@media (min-width: 769px) and (max-width: 1100px) {
  .site-header .wrap > a.brand img { height: 30px !important; }
  .feature-banners-row { display: block !important; }
  .feature-intro { display: block !important; padding: 0 0 calc(var(--gutter) * 1.6) !important; }
  .feature-banner .h3 { font-size: 30px !important; }
  .feature-banner .h3 + div { font-size: 16px !important; margin-top: 10px !important; }
  .fb-moment-spacer { height: 8px !important; }
  /* Featured collection — tablet: title floats in the empty space, smaller */
  .br-tablet { display: inline !important; }
  .fc-section { margin-top: -28px !important; }
  .fc-content > h2 {
    position: absolute !important;
    top: 34% !important;
    right: 1% !important;
    width: 50% !important;
    margin: 0 !important;
    z-index: 2;
  }
  .fc-img { aspect-ratio: 16 / 11; object-position: 30% 72%; }
}

/* Footer: stack brand above the link columns on tablet */
@media (max-width: 1100px) {
  .site-footer .wrap > div:first-child {
    grid-template-columns: 1fr !important;
    gap: 56px !important;
  }
}

/* ===== Mobile ===== */
@media (max-width: 768px) {
  :root { --gutter: 18px; }
  .journal-head { flex-direction: column; align-items: flex-start; gap: 24px; }
  .story-slide { flex-basis: calc(100vw - var(--gutter) - 40px); flex-direction: column; align-items: stretch; gap: 20px; }
  .story-slide-img { width: 100%; flex: 0 0 auto; }
  .story-slide-text { align-items: flex-start; text-align: left; padding: 0; }
  .story-slide-text .small { margin-left: 0; }
  .section { padding: 44px 0; }
  .section.tight { padding: 30px 0; }
  .bestsellers-section { padding-top: 52px !important; padding-bottom: 20px !important; }
  .wrap.myestia-inner { padding-left: var(--gutter) !important; padding-right: var(--gutter) !important; padding-top: 72px !important; padding-bottom: 72px !important; }
  .journal-section { padding-top: 56px !important; }
  .site-footer { padding-top: 48px !important; }
  /* Section spacing — noticeably tighter on mobile */
  .moment-section { padding-top: 0 !important; padding-bottom: 0 !important; }
  .cat-section { padding-top: 56px !important; padding-bottom: 20px !important; }
  .fb-moment-spacer { height: 12px !important; }
  .drink-wrap { padding-top: 56px !important; }
  .prog-pinned { padding-top: 56px !important; padding-bottom: 24px !important; }
  .loyalty-section { padding: 40px 0 32px !important; }
  .loyalty-tiers { margin-top: 28px !important; }
  /* Sliders: ~1.2 cards peeking on mobile */
  .m-slider > * { flex-basis: 78% !important; }
  .feature-banners > * { flex-basis: 86% !important; }
  .cat-grid > .cat-card { flex-basis: 80% !important; }
  .intro-statement { font-size: 16px !important; text-wrap: pretty !important; text-align: center !important; }
  .intro-section { padding-top: 40px !important; }
  .intro-statement { margin-bottom: 0 !important; padding-bottom: 8px !important; }
  /* Featured collection — locked mobile title overlap & crop */
  .fc-content > h2 { margin-bottom: -104px !important; }
  .fc-img { aspect-ratio: 4 / 5; object-position: 10% 70%; }
  .fc-section { padding-bottom: 44px !important; margin-top: 32px !important; }
  .h-display { font-size: clamp(40px, 12vw, 64px) !important; }
  .h1 { font-size: clamp(32px, 9vw, 48px) !important; }
  .h2 { font-size: clamp(24px, 6vw, 32px) !important; }
  .lede { font-size: 16px !important; }

  /* Header */
  .site-header .wrap {
    grid-template-columns: 1fr auto 1fr !important;
    height: 60px !important;
    gap: 12px !important;
  }
  .left-nav { display: none !important; }
  .nav-left-spacer { display: none !important; }
  /* Right cluster: favorites + cart only */
  .nav-account, .nav-lang { display: none !important; }
  .site-header .right-nav { gap: 18px !important; }
  .nav-fav, .nav-cart { display: flex !important; }
  .site-header .wrap > a.brand { justify-content: center !important; }
  .site-header .wrap > a.brand img { height: 26px !important; }
  .megamenu { display: none !important; }
  .announce { font-size: 10px !important; gap: 16px !important; height: 32px !important; padding: 0 var(--gutter) !important; }
  .announce-msg { padding: 0 72px 0 0 !important; }
  .announce-lang { right: var(--gutter) !important; padding: 0 8px 0 8px; }
  .announce-lang .lang-dd-trigger { font-size: 10px !important; }

  /* All multi-col grids collapse */
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: 1.05fr 1fr"],
  [style*="grid-template-columns: 1.4fr 1fr"],
  [style*="grid-template-columns: 1.6fr 1fr"],
  [style*="grid-template-columns: 1.2fr 1fr"],
  [style*="grid-template-columns: 1fr 1.2fr"],
  [style*="grid-template-columns: 260px 1fr"],
  [style*="grid-template-columns: 1.4fr 1fr 1fr"],
  [style*="grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr 1fr"],
  [style*="grid-template-columns: 1.5fr 1fr 1fr 1fr 1.2fr"],
  [style*="grid-template-columns: 1.05fr 0.9fr"],
  [style*="grid-template-columns: 120px 1fr auto"] {
    grid-template-columns: 1fr !important;
  }
  [style*="grid-template-columns: repeat(5, 1fr)"],
  [style*="grid-template-columns: repeat(6, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Footer specifically */
  .site-footer .wrap > div:first-child {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  /* Hero side label hidden */
  [style*="EST. 1986"] { display: none !important; }
  /* Reduce category row tall items */
  [style*="grid-template-rows: 440px"] { grid-template-rows: auto !important; }
  [style*="grid-template-rows: 440px"] > a { aspect-ratio: 4/5 !important; grid-column: span 1 !important; }

  /* PLP sidebar -> on top */
  aside[style*="position: sticky"][style*="top: 120px"] { position: static !important; }

  /* Buttons & nav */
  .btn.lg { height: 50px !important; padding: 0 22px !important; font-size: 14px !important; }
  /* Moment hero CTAs: full width, stacked one below the other */
  .moment-cta-row { flex-direction: column !important; flex-wrap: nowrap !important; align-items: stretch !important; gap: 12px !important; width: 100%; }
  .moment-cta-row .btn.lg {
    width: 100% !important;
    height: 52px !important;
    min-height: 52px !important;
    padding: 0 22px !important;
    font-size: 14px !important;
    justify-content: center !important;
  }
  /* Dot indicator: equal gap above (from CTAs) and below (to hero end) */
  .moment-dots { margin-top: 76px !important; margin-bottom: 0 !important; }
  /* Hero: centered on mobile, symmetric bottom spacing.
     Higher specificity (.wrap.hero-wrap) so it beats the generic .wrap reset below. */
  .wrap.hero-wrap { padding-bottom: 40px !important; align-items: center !important; text-align: center !important; }
  .hero-wrap .moment-cta-row { align-items: center !important; }
  .hero-wrap .moment-dots { justify-content: center !important; margin-top: 60px !important; }
  /* Hero title slightly bigger on mobile */
  .hero-title { font-size: 50px !important; margin-left: auto !important; margin-right: auto !important; }
  .pcard .quick-add { opacity: 1 !important; transform: none !important; }

  /* Article body */
  .wrap { padding: 0 var(--gutter) !important; }
}

@media (max-width: 480px) {
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
}

/* ===== Animations ===== */
@keyframes fade-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fade-in 600ms ease both; }
.br-tablet { display: none; }

/* ---------- Neon title ("Make it yours") ---------- */
.neon-title .neon-core { fill: #fff; }
@media (prefers-reduced-motion: reduce) {
  .neon-trace { animation: none; opacity: 0; }
}

/* ---------- Mobile drawer (stepped nav) ---------- */
/* Mobile/tablet left cluster: hamburger + search icon. Hidden on desktop. */
.nav-mobile-left {
  display: none;
  align-items: center;
  gap: 4px;
  margin-left: -10px;
}
.nav-burger,
.nav-search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
}
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 300;
  visibility: hidden;
}
.mobile-nav.open { visibility: visible; }
.mobile-nav-scrim {
  position: absolute;
  inset: 0;
  background: rgba(29, 29, 27, 0.38);
  opacity: 0;
  transition: opacity 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
.mobile-nav.open .mobile-nav-scrim { opacity: 1; }
.mobile-nav-panel {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: min(88vw, 380px);
  background: var(--linen);
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 0 60px rgba(29, 29, 27, 0.12);
}
.mobile-nav.open .mobile-nav-panel { transform: translateX(0); }
.mobile-nav-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  padding: 0 14px 0 20px;
  border-bottom: 1px solid var(--hair);
  flex: 0 0 auto;
}
.mobile-nav-title {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.mobile-nav-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 6px 0 0;
  background: none;
  border: 0;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
}
.mobile-nav-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: 0;
  color: var(--ink);
}
.mobile-nav-levels {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
}
.mobile-nav-list {
  list-style: none;
  margin: 0;
  padding: 8px 0;
}
.mobile-nav-list.mn-fwd { animation: mn-in-fwd 280ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.mobile-nav-list.mn-back { animation: mn-in-back 280ms cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes mn-in-fwd { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
@keyframes mn-in-back { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }
.mobile-nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 52px;
  padding: 0 20px;
  cursor: pointer;
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 400;
  font-size: 19px;
  transition: background 160ms ease, color 160ms ease;
}
.mobile-nav-link:hover,
.mobile-nav-link:active { background: var(--ivory); color: var(--bronze); }
.mobile-nav-link svg { color: var(--ink-3); }
.mobile-nav-cathead { display: block; padding: 16px 20px 8px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
/* Drawer rich cards (Collections / Services / Stores) */
.mobile-nav-card { display: flex; gap: 14px; align-items: flex-start; padding: 14px 20px; color: var(--ink); }
.mobile-nav-card:active { background: var(--ivory); }
.mobile-nav-card-thumb { flex: 0 0 auto; width: 66px; height: 66px; border-radius: 8px; background-size: cover; background-position: center; }
.mobile-nav-card-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mobile-nav-card-title { font-family: var(--serif); font-weight: 400; font-size: 17px; line-height: 1.15; color: var(--ink); }
.mobile-nav-card-blurb { font-family: var(--sans); font-size: 12.5px; line-height: 1.4; color: var(--ink-3); }
.mobile-nav-card-cta { display: inline-flex; align-items: center; gap: 6px; font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: 0.03em; color: var(--ink); margin-top: 2px; }
.mobile-nav-card-cta svg { color: var(--bronze-deep) !important; }
.mobile-nav-inlinecard { display: block; margin: 10px 20px 6px; padding: 16px; border: 1px solid var(--hair); border-radius: 12px; color: var(--ink); }
.mobile-nav-inlinecard-img { display: block; width: 100%; aspect-ratio: 16 / 10; border-radius: 8px; background-size: cover; background-position: center; margin-bottom: 12px; }
.mobile-nav-inlinecard .mobile-nav-card-title { display: block; font-size: 20px; }
.mobile-nav-inlinecard .mobile-nav-card-blurb { display: block; margin-top: 6px; }
.mobile-nav-inlinecard .mobile-nav-card-cta { margin-top: 10px; }
.mobile-nav-extra { display: block; padding: 12px 20px 4px; }
.mobile-nav-extra-text { font-family: var(--sans); font-size: 13px; line-height: 1.5; color: var(--ink-3); margin: 6px 0 10px; }
.mobile-nav-link.is-sub { font-family: var(--sans); font-size: 16px; font-weight: 400; }
.mobile-nav-link.is-shopall {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--bronze-deep);
  min-height: 48px;
  justify-content: flex-start;
  gap: 8px;
  border-top: 1px solid var(--hair-soft);
  margin-top: 18px;
  padding-top: 36px;
  align-items: flex-start;
}
.mobile-nav-link.is-shopall svg { color: var(--bronze-deep); }
.mobile-nav-account { border-top: 1px solid var(--hair); margin-top: 8px; padding-top: 8px; }
.mobile-nav-link.is-account { justify-content: flex-start; gap: 14px; font-family: var(--sans); font-weight: 400; font-size: 15px; }
.mobile-nav-link.is-account svg { color: var(--ink-2); flex: 0 0 auto; }
.mobile-nav-langrow { display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding: 16px 20px; font-family: var(--sans); color: var(--ink); }
.mobile-nav-langlabel { font-weight: 400; font-size: 15px; }
.mobile-nav-langtoggle { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mobile-nav-langtoggle button { min-height: 46px; padding: 0 12px; background: none; border: 1px solid var(--hair); border-radius: 4px; cursor: pointer; font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--ink-2); transition: background 160ms ease, color 160ms ease, border-color 160ms ease; }
.mobile-nav-langtoggle button.active { background: var(--ink); color: var(--ivory); border-color: var(--ink); }
.mobile-nav-foot {
  flex: 0 0 auto;
  display: flex;
  border-top: 1px solid var(--hair);
}
.mobile-nav-foot a {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 56px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  transition: color 160ms ease;
}
.mobile-nav-foot a:first-child { border-right: 1px solid var(--hair); }
.mobile-nav-foot a:hover { color: var(--bronze); }
@media (prefers-reduced-motion: reduce) {
  .mobile-nav-scrim,
  .mobile-nav-panel { transition: none; }
  .mobile-nav-list.mn-fwd,
  .mobile-nav-list.mn-back { animation: none; }
}

/* ---------- Fullscreen search overlay (mobile / tablet) ---------- */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 320;
  background: var(--linen);
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity 240ms cubic-bezier(0.22, 1, 0.36, 1), transform 240ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 240ms;
}
.search-overlay.open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 240ms cubic-bezier(0.22, 1, 0.36, 1), transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
.search-overlay-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px var(--gutter);
  border-bottom: 1px solid var(--hair);
}
.search-overlay-icon { color: var(--ink-3); flex: 0 0 auto; }
.search-overlay-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;
  border: 0;
  background: none;
  font-family: var(--serif);
  font-size: clamp(22px, 6vw, 30px);
  color: var(--ink);
}
.search-overlay-input::placeholder { color: var(--ink-4); }
.search-overlay-input:focus { outline: none; }
.search-overlay-close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: 0;
  color: var(--ink);
  cursor: pointer;
}
.search-overlay-body { padding: 32px var(--gutter); }
.search-suggest {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.search-suggest-link {
  display: block;
  padding: 14px 0;
  border-bottom: 1px solid var(--hair-soft);
  font-family: var(--serif);
  font-size: 20px;
  color: var(--ink);
  cursor: pointer;
  transition: color 160ms ease;
}
.search-suggest-link:hover,
.search-suggest-link:active { color: var(--bronze); }
@media (prefers-reduced-motion: reduce) {
  .search-overlay { transition: opacity 240ms ease, visibility 0s linear 240ms; transform: none; }
  .search-overlay.open { transition: opacity 240ms ease; }
}

/* Scrollbar hidden in horizontal scrollers */
.h-scroll { overflow-x: auto; scrollbar-width: none; }
.h-scroll::-webkit-scrollbar { display: none; }

/* Grid utility */
.grid { display: grid; }

/* Form / select small */
.select-pill {
  appearance: none;
  -webkit-appearance: none;
  height: 36px;
  padding: 0 32px 0 14px;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' fill='none' stroke='%231d1d1b' stroke-width='1.4'/></svg>") no-repeat right 12px center,
    var(--ivory);
  border: 1px solid var(--hair);
  border-radius: 999px;
  font-size: 13px;
}

/* Range slider */
input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 2px;
  background: var(--hair);
  border-radius: 2px;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px; height: 16px;
  background: var(--bronze-deep);
  border-radius: 50%;
  cursor: pointer;
}

/* checkbox visual */
.check {
  width: 18px; height: 18px; border: 1px solid var(--ink-3); border-radius: 2px;
  display: inline-flex; align-items: center; justify-content: center;
}
.check.on { background: var(--ink); border-color: var(--ink); color: var(--ivory); }

/* Color swatch */
.color-swatch {
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--hair);
  cursor: pointer;
  position: relative;
}
.color-swatch.on::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--ink);
}

/* ---------- Back-to-top button ---------- */
.scroll-top {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 300;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid transparent;
  background: var(--ink);
  color: var(--ivory);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 260ms ease, transform 260ms ease, background 200ms ease;
  box-shadow: 0 12px 30px rgba(29, 29, 27, 0.22);
}
.scroll-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.scroll-top:hover { background: var(--bronze); }
.scroll-top:active { transform: translateY(0) scale(0.96); }
.scroll-top svg { display: block; }
@media (max-width: 1100px) {
  .scroll-top { right: 18px; bottom: 18px; width: 46px; height: 46px; }
}


/* ---------- Footer — reference layout (club band + brand + link columns) ---------- */
.footer-club { padding: clamp(32px, 4vw, 56px) var(--gutter) 0; }
.footer-club-inner { background: rgba(154, 140, 96, 0.30); padding: clamp(32px, 4vw, 52px) clamp(40px, 5vw, 64px); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 26px; }
.footer-club-copy { display: flex; flex-direction: column; align-items: center; }
.footer-club-form { width: 100%; max-width: 560px; }
.footer-club-copy .h2 { font-family: var(--serif); }
.footer-club-copy .h2 em { font-style: italic; color: var(--ink); }
.footer-club-form label { display: block; font-family: var(--sans); font-weight: 500; font-size: 13px; color: var(--ink); margin-bottom: 10px; text-align: center; }
.footer-club-row { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.footer-club-row .input { background: #fff; border: 1px solid var(--hair); }
.site-footer .footer-underline { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-size: inherit; }
.footer-underline:hover { color: var(--bronze); }
.footer-main { padding-top: clamp(56px, 6vw, 88px); }
.footer-main-grid { display: grid; grid-template-columns: 0.8fr 2fr auto; align-items: start; gap: clamp(40px, 4vw, 72px); }
.footer-logo { display: inline-block; border: 1px solid var(--ink); padding: 12px 18px; font-family: var(--serif); font-size: 20px; letter-spacing: 0.14em; color: var(--ink); }
.footer-linkcols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.footer-linkcols .footer-col a { font-size: 14px; }
@media (max-width: 1100px) {
  .site-footer { padding-top: 0 !important; }
  .footer-club-inner { grid-template-columns: 1fr !important; gap: 24px !important; text-align: center; }
  .footer-main-grid { grid-template-columns: 1fr !important; gap: 40px !important; text-align: center; }
  .footer-brand { display: flex; flex-direction: column; align-items: center; }
  .footer-linkcols { grid-template-columns: 1fr !important; border-left: 0 !important; padding-left: 0 !important; gap: 0 !important; }
}
.footer-social-row { display: flex; justify-content: flex-end; margin-top: clamp(32px, 3vw, 56px); }
.footer-social-row .footer-social { margin-top: 0; }
@media (max-width: 1100px) { .footer-social-row { justify-content: center; } }
.footer-main-grid > .footer-social { margin-top: 0; }
.footer-social-title { font-family: var(--sans); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); margin-bottom: 16px; white-space: nowrap; }
.footer-social-col .footer-social { margin-top: 0; }
.footer-main-grid > .footer-social-col { margin-left: -40px; }
@media (max-width: 1100px) { .footer-main-grid > .footer-social-col { margin-left: 0; } }
/* New In — mobile & tablet overrides */
@media (min-width: 769px) and (max-width: 1100px) {
  .newin-section .mrow-head { flex-direction: row !important; justify-content: space-between !important; align-items: flex-end !important; }
  .newin-section .mrow-head p { max-width: 400px; }
}
@media (max-width: 768px) {
  .newin-section { padding-top: 34px !important; padding-bottom: 32px !important; }
  .newin-section .mrow-head { margin-bottom: 24px !important; }
  .newin-section .slider-nav { display: none !important; }
  .newin-slider { -webkit-mask-image: none !important; mask-image: none !important; margin-right: calc(-1 * var(--gutter)) !important; padding-right: var(--gutter) !important; }
  .newin-slider .pcard-medium { width: 75% !important; }
}
@media (max-width: 1100px) { .newin-section .mrow-head p { margin-top: 20px !important; } }
@media (min-width: 769px) and (max-width: 1100px) {
  .newin-slider { -webkit-mask-image: none !important; mask-image: none !important; margin-right: calc(-1 * var(--gutter)) !important; padding-right: var(--gutter) !important; }
}
/* Moments — mobile: title + sentence top (scrim), CTA pinned bottom */
@media (max-width: 768px) {
  .moment-imgband { aspect-ratio: 9 / 10; align-items: stretch; }
  .moment-imgband::before { background: linear-gradient(to bottom, rgba(20,16,12,0.55) 0%, rgba(20,16,12,0.16) 34%, rgba(20,16,12,0) 58%) !important; }
  .moment-overlay { max-width: 100% !important; justify-content: flex-start !important; padding-top: clamp(28px, 6vw, 44px) !important; padding-bottom: clamp(24px, 6vw, 40px) !important; }
  .moment-overlay .moment-cta-row { margin-top: auto !important; }
}
/* Moment product slider — mobile: New In-style cards (slightly smaller), bleed right */
@media (max-width: 768px) {
  .moment-slider-stack { justify-content: flex-start !important; -webkit-mask-image: none !important; mask-image: none !important; margin-right: calc(-1 * clamp(20px, 3vw, 40px)) !important; padding-right: clamp(20px, 3vw, 40px) !important; }
  .moment-slider-stack .pcard { width: 66% !important; }
  .moment-products-title { font-size: 13px !important; }
}
@media (max-width: 768px) { .moment-cat-slider .moment-cat-card { width: 66% !important; } }
/* Living moment — mobile: hide pins/edit bar, show Shop the room */
.moment-shop-room { display: none; }
@media (max-width: 768px) {
  .moment-section .mpin-wrap, .moment-section .mpin-editbar { display: none !important; }
  .moment-shop-room { display: inline-flex !important; }
}
.moment-overlay .moment-shop-room { background: #fff !important; color: var(--ink) !important; border-color: #fff !important; align-self: center !important; }
.moment-overlay .moment-shop-room svg { stroke: currentColor; }
@media (max-width: 768px) {
  .shoplook-grid { grid-template-columns: 1fr !important; }
}
/* Drinkware & Accessories — mobile: centered head, one-line title, free-scroll slider */
@media (max-width: 768px) {
  .dwl-head { flex-direction: column; align-items: center; text-align: center; }
  .dwl-title { font-size: clamp(28px, 8vw, 40px) !important; }
  .dwl-sub { max-width: none; margin-left: auto; margin-right: auto; }
  .dwl-shopall { min-width: 240px !important; }
  .dwl-row { scroll-snap-type: none !important; }
}
.dwl-row { -webkit-mask-image: none !important; mask-image: none !important; }
.dwl-row.dragging { cursor: grabbing; scroll-snap-type: none; }
/* Make it Yours / Configurator — mobile: portrait bg, content in the empty lower space */
@media (max-width: 768px) {
  .fc-section { position: relative; aspect-ratio: 1 / 2; background-image: url(uploads/drinkware-mobile.jpg); background-size: cover; background-position: top center; display: block !important; margin: var(--gutter) 0 0 !important; border-radius: 0 !important; }
  .fc-img { display: none !important; }
  .fc-overlay { display: block !important; position: absolute !important; left: 0; right: 0; top: 46% !important; bottom: auto !important; padding: 0 12px !important; }
  .fc-grid, .fc-content { display: block !important; }
  .fc-content { text-align: center !important; transform: none !important; padding: 0 !important; }
  .fc-content > h2 { position: static !important; display: flex !important; justify-content: center; margin: 0 auto !important; }
  .fc-content .neon-title { max-width: 260px !important; }
  .fc-content > .fc-config-title { margin-top: 8px !important; font-size: 30px !important; white-space: nowrap !important; }
  .fc-content > p { margin: 10px auto 0 !important; font-size: 14px !important; max-width: none !important; }
  .fc-content > .moment-cta-row { margin-top: 28px !important; justify-content: center !important; }
}
/* Force the Drinkware lookbook flush on mobile — beats the tablet `.section { padding:72px!important }` */
@media (max-width: 768px) {
  .dwl-section { padding-top: 28px !important; padding-bottom: 0 !important; }
}
/* Programmes head — tighten title→text gap on mobile */
@media (max-width: 768px) {
  .prog-head .body { margin-top: 20px !important; }
}
/* Best Sellers slider — no right-edge fade */
.bestsellers-section .m-slider { -webkit-mask-image: none !important; mask-image: none !important; }
/* Journal head — mobile: drop the slider arrows, center the CTA */
@media (max-width: 768px) {
  .journal-head .slider-nav { display: none !important; }
  .journal-head > div:last-child { width: 100% !important; justify-content: center !important; }
}
/* Newsletter club — mobile: full-bleed gold band, tighter above, more space before the footer links */
@media (max-width: 768px) {
  .footer-club { padding: 24px 0 32px !important; }
}
/* Journal section — mobile: kill the 72px bottom padding forced by the tablet .section !important rule */
@media (max-width: 768px) {
  .journal-section { padding-bottom: 8px !important; }
}
/* Social title→icons: kill the 72px !important margin-top from the tablet footer rule */
.footer-social-col .footer-social { margin-top: 0 !important; }
/* ===== Playground header/menu port (mobile): floating clip-path drawer + centered preheader box ===== */
.mobile-nav { transition: visibility 0s linear 500ms; }
.mobile-nav.open { transition: visibility 0s; }
.mobile-nav-scrim {
  background: rgba(29, 29, 27, 0.38);
  -webkit-backdrop-filter: blur(0px); backdrop-filter: blur(0px);
  transition: opacity 400ms cubic-bezier(0.22,1,0.36,1), backdrop-filter 400ms cubic-bezier(0.22,1,0.36,1), -webkit-backdrop-filter 400ms cubic-bezier(0.22,1,0.36,1);
}
.mobile-nav.open .mobile-nav-scrim { opacity: 1; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.mobile-nav-panel {
  top: clamp(10px, 2.4vw, 16px) !important;
  left: clamp(10px, 2.4vw, 16px) !important;
  right: clamp(10px, 2.4vw, 16px) !important;
  bottom: auto !important;
  width: auto !important; height: auto !important;
  max-height: calc(100% - 2 * clamp(10px, 2.4vw, 16px));
  background: var(--linen);
  border-radius: 16px; overflow: hidden; padding-bottom: 20px;
  box-shadow: 0 24px 70px rgba(29,29,27,0.22);
  transform: none !important;
  clip-path: inset(0 100% 100% 0 round 16px);
  transition: clip-path 500ms cubic-bezier(0.22,1,0.36,1);
}
.mobile-nav.open .mobile-nav-panel { transform: none !important; clip-path: inset(0 0 0 0 round 16px); }
@media (prefers-reduced-motion: reduce) { .mobile-nav-panel { transition: none; } }
@keyframes mnav-item-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.mobile-nav.open .mobile-nav-list > li { animation: mnav-item-in 420ms cubic-bezier(0.22,1,0.36,1) both; }
.mobile-nav.open .mobile-nav-list > li:nth-child(1){animation-delay:110ms}
.mobile-nav.open .mobile-nav-list > li:nth-child(2){animation-delay:155ms}
.mobile-nav.open .mobile-nav-list > li:nth-child(3){animation-delay:200ms}
.mobile-nav.open .mobile-nav-list > li:nth-child(4){animation-delay:245ms}
.mobile-nav.open .mobile-nav-list > li:nth-child(5){animation-delay:290ms}
.mobile-nav.open .mobile-nav-list > li:nth-child(6){animation-delay:335ms}
.mobile-nav.open .mobile-nav-list > li:nth-child(7){animation-delay:380ms}
.mobile-nav.open .mobile-nav-list > li:nth-child(n+8){animation-delay:420ms}
@media (prefers-reduced-motion: reduce) { .mobile-nav.open .mobile-nav-list > li { animation: none; } }
/* Preheader — centered floating rounded box, no action links (mobile/tablet) */
@media (max-width: 1100px) {
  .announce { justify-content: center !important; padding-left: var(--gutter) !important; padding-right: var(--gutter) !important; margin: 8px 10px 0 !important; border-radius: 12px !important; }
  .announce-msg { text-align: center !important; padding: 0 !important; }
  .announce-actions { display: none !important; }
}
/* ===== Playground port: gradient + solid/hover bg live on the STACK so they run behind the preheader ===== */
.site-header::before { display: none !important; }
.site-header-stack { transition: background 620ms cubic-bezier(0.22, 1, 0.36, 1); }
.site-header-stack::before {
  content: ""; position: absolute; inset: 0 0 -32px 0;
  background: linear-gradient(180deg, rgba(15,12,8,0.55) 0%, rgba(15,12,8,0.25) 60%, rgba(15,12,8,0) 100%);
  pointer-events: none; opacity: 1; transition: opacity 320ms ease; z-index: -1;
}
.site-header-stack:has(.site-header:hover),
.site-header-stack:has(.site-header.solid),
.site-header-stack:has(.site-header.search-open) { background: var(--linen); }
.site-header-stack:has(.site-header.solid)::before,
.site-header-stack:has(.site-header.search-open)::before,
.site-header-stack:has(.site-header:hover)::before { opacity: 0; }
/* Mobile nav — custom scrollbar (from Playground) */
.mobile-nav-levels::-webkit-scrollbar { width: 9px; height: 9px; }
.mobile-nav-levels::-webkit-scrollbar-button { display: none !important; width: 0; height: 0; }
.mobile-nav-levels::-webkit-scrollbar-track { background: transparent; }
.mobile-nav-levels::-webkit-scrollbar-thumb { background: #000; border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
/* Mobile nav — Giftcards / Find a store buttons */
.mobile-nav-actions { display: flex; flex-direction: column; gap: 10px; padding: 14px 20px 4px; }
.mnav-action-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 52px; background: #fff; color: var(--ink); border: none; border-radius: 6px; font-family: var(--sans); font-size: 15px; font-weight: 300; letter-spacing: 0.01em; cursor: pointer; }
.mnav-action-btn svg { color: var(--ink); flex: 0 0 auto; }
.mnav-action-btn:active { background: var(--ivory); }
/* ============================================================
   Make it Yours / Featured Collection — responsive overlay.
   Keep the desktop side-by-side layout (bottles left, content
   right, INSIDE the banner) at every width down to mobile.
   Scale neon title, config heading, copy and spacing fluidly
   so the right column never spills past the image edges.
   ============================================================ */
@media (min-width: 1101px) {
  .fc-section .neon-title { width: clamp(220px, 24vw, 460px) !important; height: auto !important; max-width: 100% !important; }
  .fc-content { padding-left: clamp(0px, 3vw, 60px) !important; }
  .fc-content > .fc-config-title { font-size: clamp(24px, 2.6vw, 42px) !important; margin-top: clamp(10px, 1.4vw, 20px) !important; }
  .fc-content > p { font-size: clamp(13px, 1.1vw, 16px) !important; line-height: 1.45 !important; margin-top: clamp(12px, 1.7vw, 24px) !important; width: clamp(360px, 36vw, 520px) !important; max-width: 100% !important; }
  .fc-content > .moment-cta-row { margin-top: clamp(16px, 2vw, 28px) !important; }
}
@media (min-width: 769px) and (max-width: 1100px) {
  .fc-section { display: block !important; margin-top: 0 !important; padding-bottom: 0 !important; }
  .fc-img { display: block !important; position: static !important; width: 100% !important; height: auto !important; aspect-ratio: auto !important; object-fit: cover !important; border-radius: 0 !important; margin: 0 !important; }
  .fc-overlay { display: flex !important; position: absolute !important; inset: 0 !important; align-items: center !important; padding: 0 clamp(16px, 3vw, 40px) !important; }
  .fc-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: clamp(16px, 3vw, 48px) !important; width: 100% !important; }
  .fc-grid > div:first-child { display: block !important; }
  .fc-content { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; position: static !important; padding: 0 !important; transform: none !important; }
  .fc-content > h2 { order: 0 !important; position: relative !important; top: auto !important; margin: 0 !important; padding: 0 !important; display: flex !important; justify-content: center !important; }
  .fc-section .neon-title { width: clamp(150px, 20vw, 300px) !important; height: auto !important; max-width: 100% !important; }
  .fc-content > .fc-config-title { order: 0 !important; font-size: clamp(17px, 2.4vw, 30px) !important; line-height: 1.1 !important; margin: clamp(3px, 0.8vw, 10px) 0 0 !important; padding: 0 !important; white-space: normal !important; }
  .fc-content > p { order: 0 !important; width: 100% !important; max-width: 430px !important; font-size: clamp(11px, 1.25vw, 14px) !important; line-height: 1.35 !important; margin: clamp(3px, 0.8vw, 10px) auto 0 !important; padding: 0 !important; }
  .fc-content > .moment-cta-row { order: 0 !important; margin: clamp(8px, 1.4vw, 18px) 0 0 !important; padding: 0 !important; justify-content: center !important; }
  .fc-content .btn.lg { min-height: clamp(38px, 4.5vw, 50px) !important; padding: 0 clamp(18px, 2.6vw, 38px) !important; font-size: clamp(12px, 1.3vw, 15px) !important; }
}