/* ============================================================
   Harvest Deli, shared layer
   Cart drawer, nav-cart, shop card, grain, page transitions
   ============================================================ */

/* ----------- Nav: cart button (layout-stable, premium) ----------- */
.nav-cart {
  position: relative;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 9.5px;
  letter-spacing: var(--track-label, 0.36em);
  text-transform: uppercase;
  font-weight: 500;
  padding: 6px 0 6px var(--track-label, 0.36em);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  opacity: 0.92;
  flex-shrink: 0;
  transition: opacity 0.5s var(--ease, cubic-bezier(0.22, 1, 0.36, 1));
}
.nav-cart:hover { opacity: 1; }
.nav-cart .cart-glyph {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px; height: 14px;
  flex-shrink: 0;
}
.nav-cart .cart-glyph svg { display: block; }
/* Badge is absolutely positioned over the glyph notch so digit growth never reflows the navbar. */
.nav-cart .cart-count {
  position: absolute;
  top: -3px;
  left: 11px;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--gold, #B8945A);
  color: #FAF6EE;
  font-size: 8.5px;
  letter-spacing: 0.02em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.55) translate3d(0,0,0);
  transform-origin: center center;
  transition: opacity 360ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 460ms cubic-bezier(0.34, 1.46, 0.64, 1);
  box-shadow: 0 0 0 2px var(--ink, #1F1A14), 0 2px 6px rgba(0,0,0,0.18);
  white-space: nowrap;
}
.nav-cart.has-items .cart-count { opacity: 1; transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
  .nav-cart .cart-count { transition: opacity 200ms linear; transform: none; }
}

/* ----------- Cart drawer ----------- */
.cart-drawer {
  position: fixed;
  inset: 0;
  z-index: 180;
  pointer-events: none;
  visibility: hidden;
}
.cart-drawer.open { pointer-events: auto; visibility: visible; }
.cart-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 11, 6, 0.42);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.8s var(--ease, cubic-bezier(0.22, 1, 0.36, 1));
}
.cart-drawer.open .cart-backdrop { opacity: 1; }
.cart-panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(460px, 90vw);
  background: rgba(250, 246, 238, 0.94);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  border-left: 1px solid rgba(26, 22, 18, 0.06);
  box-shadow: -40px 0 100px -20px rgba(40, 24, 8, 0.18);
  transform: translateX(100%);
  transition: transform 0.85s var(--ease, cubic-bezier(0.22, 1, 0.36, 1));
  display: flex;
  flex-direction: column;
}
.cart-drawer.open .cart-panel { transform: translateX(0); }

.cart-head {
  padding: 32px 40px 24px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid rgba(26, 22, 18, 0.06);
}
.cart-head .cart-title {
  font-family: 'Newsreader', 'EB Garamond', Garamond, serif;
  font-weight: 400;
  font-size: 24px;
  letter-spacing: -0.018em;
  color: var(--ink, #1F1A14);
}
.cart-head .cart-title em {
  font-style: italic;
  color: var(--ink-warm, #756859);
  font-weight: 400;
  padding-left: 6px;
  font-size: 14px;
  letter-spacing: 0.04em;
}
.cart-close {
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 9.5px;
  letter-spacing: var(--track-label, 0.36em);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-soft, #5C5247);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
  transition: color 0.4s var(--ease);
  padding-left: var(--track-label, 0.36em);
}
.cart-close:hover { color: var(--ink, #1F1A14); }
.cart-close .x { width: 14px; height: 14px; position: relative; }
.cart-close .x::before, .cart-close .x::after {
  content: ''; position: absolute; top: 50%; left: 0;
  width: 100%; height: 1px; background: currentColor;
}
.cart-close .x::before { transform: rotate(45deg); }
.cart-close .x::after { transform: rotate(-45deg); }

.cart-items {
  flex: 1;
  overflow-y: auto;
  padding: 8px 40px;
}
.cart-empty {
  padding: 12vh 8px;
  text-align: center;
  color: var(--ink-soft);
}
.cart-empty h4 {
  font-family: 'Newsreader', serif;
  font-weight: 400;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 14px;
  max-width: 18ch;
  margin-left: auto;
  margin-right: auto;
}
.cart-empty p {
  font-size: 13px;
  line-height: 1.8;
  max-width: 28ch;
  margin: 0 auto 32px;
}
.cart-empty-cta {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 16px 30px;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  letter-spacing: var(--track-button, 0.42em);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink);
  border: 1px solid rgba(26, 22, 18, 0.36);
  text-decoration: none;
  transition: all 0.6s var(--ease);
  padding-left: calc(30px + var(--track-button, 0.42em));
}
.cart-empty-cta:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }

.cart-line {
  display: grid;
  grid-template-columns: 78px 1fr auto;
  gap: 22px;
  align-items: center;
  padding: 22px 0;
  border-bottom: 1px solid rgba(26, 22, 18, 0.05);
}
.cart-line:last-child { border-bottom: none; }
.cart-line .thumb {
  width: 78px;
  height: 92px;
  background: linear-gradient(180deg, #EDE3D2 0%, #DDCEB5 100%);
  position: relative;
  overflow: hidden;
}
.cart-line .thumb .mini-photo,
.ck-line .thumb-mini .mini-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.mini-photo.amber  { filter: contrast(1.02) saturate(1.05); }
.mini-photo.straw  { filter: brightness(1.08) saturate(0.85) hue-rotate(-6deg); }
.mini-photo.bronze { filter: brightness(0.88) saturate(1.12) hue-rotate(8deg); }
.mini-photo.pale   { filter: brightness(1.14) saturate(0.82) hue-rotate(-12deg); }
.mini-photo.deep   { filter: brightness(0.75) saturate(1.18) contrast(1.04); }

.cart-line .meta { min-width: 0; }
.cart-line .meta .name {
  font-family: 'Newsreader', serif;
  font-weight: 400;
  font-size: 19px;
  letter-spacing: -0.015em;
  margin-bottom: 4px;
  color: var(--ink);
  line-height: 1.18;
}
.cart-line .meta .edition {
  font-family: 'Inter', sans-serif;
  font-size: 9.5px;
  letter-spacing: var(--track-label, 0.36em);
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 500;
  margin-bottom: 12px;
  padding-left: var(--track-label, 0.36em);
}
.qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(26, 22, 18, 0.14);
  height: 28px;
}
.qty button {
  width: 28px;
  height: 28px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-soft);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.4s var(--ease);
}
.qty button:hover { color: var(--ink); }
.qty .val {
  min-width: 28px;
  text-align: center;
  font-family: 'Newsreader', serif;
  font-weight: 400;
  font-size: 16px;
  color: var(--ink);
  letter-spacing: -0.005em;
}

.cart-line .price-col { text-align: right; }
.cart-line .price-col .price {
  font-family: 'Newsreader', serif;
  font-weight: 400;
  font-size: 20px;
  color: var(--ink);
  letter-spacing: -0.012em;
  margin-bottom: 10px;
}
.cart-line .price-col .remove {
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 500;
  opacity: 0.6;
  transition: opacity 0.4s var(--ease), color 0.4s var(--ease);
  padding: 0;
  padding-left: 0.28em;
}
.cart-line .price-col .remove:hover { opacity: 1; color: var(--gold-deep, #8A6228); }

.cart-foot {
  padding: 28px 40px 36px;
  border-top: 1px solid rgba(26, 22, 18, 0.06);
  background: rgba(255, 252, 246, 0.6);
}
.cart-totals {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.cart-totals .label {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  letter-spacing: var(--track-label, 0.36em);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-soft);
  padding-left: var(--track-label, 0.36em);
}
.cart-totals .total {
  font-family: 'Newsreader', serif;
  font-weight: 400;
  font-size: 28px;
  letter-spacing: -0.018em;
  color: var(--ink);
}
.cart-note {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-bottom: 22px;
  opacity: 0.78;
}
.cart-checkout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 20px 26px;
  background: var(--ink);
  color: var(--cream);
  text-decoration: none;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  letter-spacing: var(--track-button, 0.42em);
  text-transform: uppercase;
  font-weight: 500;
  transition: background 0.6s var(--ease);
  padding-left: calc(26px + var(--track-button, 0.42em));
}
.cart-checkout:hover { background: var(--gold-deep, #8A6228); }
.cart-checkout .arrow {
  width: 22px; height: 1px; background: currentColor; position: relative;
}
.cart-checkout .arrow::after {
  content: ''; position: absolute; right: 0; top: -3px;
  width: 7px; height: 7px;
  border-right: 1px solid currentColor;
  border-top: 1px solid currentColor;
  transform: rotate(45deg);
}

/* ----------- Toast / added-to-cart confirmation ----------- */
.cart-toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  padding: 16px 26px;
  background: rgba(15, 11, 6, 0.92);
  backdrop-filter: blur(10px);
  color: var(--cream);
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  letter-spacing: var(--track-label, 0.36em);
  text-transform: uppercase;
  font-weight: 500;
  z-index: 160;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s var(--ease), transform 0.6s var(--ease);
  padding-left: calc(26px + var(--track-label, 0.36em));
}
.cart-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ----------- Mobile responsive ----------- */
@media (max-width: 900px) {
  .cart-panel { width: min(420px, 92vw); }
  .cart-head { padding: 24px 24px 18px; }
  .cart-foot { padding: 22px 24px 28px; }
  .cart-items { padding: 6px 24px; }
  .cart-head .cart-title { font-size: 22px; }
  .cart-line { grid-template-columns: 60px 1fr auto; gap: 16px; padding: 18px 0; }
  .cart-line .thumb { width: 60px; height: 72px; }
  .cart-line .meta .name { font-size: 17px; }
  .cart-line .meta .edition { margin-bottom: 10px; font-size: 9px; letter-spacing: 0.3em; }
  .cart-line .price-col .price { font-size: 18px; }
  .qty { height: 30px; }
  .qty button { width: 30px; height: 30px; font-size: 16px; }
  .cart-checkout { padding: 18px 22px; padding-left: calc(22px + var(--track-button, 0.42em)); gap: 14px; }
}
@media (max-width: 600px) {
  .nav-cart { gap: 8px; padding-left: 0; font-size: 0; letter-spacing: 0; }
  .nav-cart .cart-glyph,
  .nav-cart .cart-count { font-size: 9px; letter-spacing: 0.02em; }
  .nav-cart .cart-glyph svg { width: 16px; height: 16px; }
  .nav-cart .cart-count { min-width: 16px; height: 16px; padding: 0 5px; }
  /* Shop link stays visible on small viewports, just tighter spacing */
  nav.site-nav .nav-acquire { padding-left: 0; gap: 0; font-size: 9px; }
  .cart-panel { width: 100vw; }
  .cart-head, .cart-foot, .cart-items { padding-left: 22px; padding-right: 22px; }
  .cart-head .cart-title { font-size: 20px; }
  .cart-head .cart-title em { font-size: 12px; }
  .cart-line { grid-template-columns: 54px 1fr auto; gap: 14px; }
  .cart-line .thumb { width: 54px; height: 66px; }
  .cart-line .meta .name { font-size: 16px; }
  .cart-line .price-col .price { font-size: 17px; }
  .cart-totals .total { font-size: 26px; }
  .cart-empty { padding: 8vh 4px; }
  .cart-empty h4 { font-size: 24px; }
  .cart-toast { left: 16px; right: 16px; transform: none; bottom: 16px; font-size: 9px; padding: 14px 20px; padding-left: calc(20px + var(--track-label, 0.36em)); }
  .cart-toast.show { transform: none; }
}

/* ----------- Language toggle ----------- */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 9.5px;
  letter-spacing: 0.28em;
  font-weight: 500;
  color: var(--ink-soft);
  padding-left: 0.28em;
}
.lang-toggle button {
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  /* WCAG 2.5.5, minimum 44×44 touch target. Visual label stays small;
     hit area expands. inline-flex centers the glyph inside the box. */
  min-width: 44px;
  min-height: 44px;
  padding: 0 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.5;
  transition: opacity 0.5s var(--ease, cubic-bezier(0.22, 1, 0.36, 1)), color 0.5s var(--ease);
  font-weight: 500;
}
.lang-toggle button:hover { opacity: 0.8; }
.lang-toggle button.active { opacity: 1; color: var(--ink); }
.lang-toggle button:focus-visible {
  outline: 2px solid var(--gold, #B8945A);
  outline-offset: 3px;
  border-radius: 4px;
}
.lang-toggle .sep {
  opacity: 0.3;
  width: 1px;
  height: 11px;
  background: currentColor;
  display: inline-block;
}
/* lang-toggle base color now driven by the matte-black nav rules below */
@media (max-width: 600px) {
  .lang-toggle { font-size: 9px; letter-spacing: 0.18em; gap: 4px; }
  .lang-toggle button { min-width: 44px; min-height: 44px; padding: 0; }
}

/* ============================================================
   Skip to content link, appears for keyboard users only.
   Injected on every page by shared.js.
   ============================================================ */
.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 9999;
  padding: 12px 20px;
  background: var(--ink, #1F1A14);
  color: var(--cream, #FAF6EE);
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 500;
  text-decoration: none;
  border-radius: 2px;
  transform: translateY(-150%);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid var(--gold-light, #D4AC6A);
  outline-offset: 2px;
}

/* Visually-hidden utility, for screen-reader-only labels */
.vh {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ============================================================
   Honey droplet underline beneath the SHOP nav link
   Subtle luxury microinteraction. Cycle ~9s, almost unnoticeable.
   ============================================================ */
.nav-acquire.honey-shop {
  border-bottom: none !important;
  position: relative;
  padding-bottom: 4px;
}
.nav-acquire.honey-shop .honey-underline {
  position: absolute;
  bottom: 0;
  left: 0; right: 0;
  height: 0;
  pointer-events: none;
  display: block;
}
.nav-acquire.honey-shop .honey-underline::before {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  opacity: 0.85;
}
.nav-acquire.honey-shop .honey-svg {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 22px;
  overflow: visible;
  display: block;
}
.nav-acquire.honey-shop .hl-hang {
  transform-origin: 8px 0;
  transform-box: fill-box;
  transform: scaleY(0);
  animation: honey-hang 9s cubic-bezier(0.5, 0, 0.4, 1) infinite;
  filter: drop-shadow(0 0.4px 0.8px rgba(120, 70, 20, 0.32));
}
.nav-acquire.honey-shop .hl-fall {
  opacity: 0;
  transform: translateY(0);
  animation: honey-fall 9s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  filter: drop-shadow(0 0.5px 1px rgba(120, 70, 20, 0.32));
}
@keyframes honey-hang {
  /* idle (line only) */
  0%, 58%        { transform: scaleY(0); }
  /* form gently */
  64%            { transform: scaleY(0.5); }
  /* stretch with viscosity */
  70%            { transform: scaleY(1.0); }
  74%            { transform: scaleY(1.45); }
  /* drop separates, hang snaps back slightly (surface tension) */
  76%            { transform: scaleY(0.45) translateY(-0.5px); }
  /* settle */
  84%, 100%      { transform: scaleY(0); }
}
@keyframes honey-fall {
  /* invisible while hang stretches */
  0%, 73%        { opacity: 0; transform: translateY(0); }
  /* emerge just below the line at separation moment */
  76%            { opacity: 0.95; transform: translateY(3px); }
  /* fall, accelerating subtly */
  84%            { opacity: 0.92; transform: translateY(9px); }
  90%            { opacity: 0.55; transform: translateY(13px); }
  /* fade out before the loop resets */
  95%, 100%      { opacity: 0; transform: translateY(17px); }
}
@media (prefers-reduced-motion: reduce) {
  .nav-acquire.honey-shop .hl-hang,
  .nav-acquire.honey-shop .hl-fall {
    animation: none;
    opacity: 0;
    transform: scaleY(0);
  }
}

/* ----------- Footer logo: deepen so the foil reads on cream ----------- */
.footer-brand .logo-mark,
footer .logo-mark.footer-size {
  filter: brightness(0.62) saturate(1.35) contrast(1.06);
}

/* ----------- Grain overlay utility ----------- */
.grain-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 200;
  opacity: 0.025;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.55'/></svg>");
}

/* ----------- Page transition (subtle on link follow) ----------- */
.page-fade {
  animation: pageFade 1s var(--ease, cubic-bezier(0.22, 1, 0.36, 1)) both;
}
@keyframes pageFade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   LUXURY MATTE-BLACK NAVIGATION
   Rich charcoal surface, warm honey-gold typography & accents.
   Loaded last in shared.css so it wins over per-page nav styles.
   Selectors use `body nav.site-nav` for specificity.
   ============================================================ */
:root {
  --hd-nav-bg: rgba(14, 11, 8, 0.88);
  --hd-nav-bg-scrolled: rgba(14, 11, 8, 0.95);
  --hd-nav-gold: #D4AC6A;
  --hd-nav-gold-bright: #ECCE93;
  --hd-nav-gold-soft: rgba(212, 172, 106, 0.55);
  --hd-nav-gold-line: rgba(184, 148, 90, 0.16);
}

body nav.site-nav,
body nav.site-nav.scrolled {
  background: var(--hd-nav-bg);
  backdrop-filter: blur(26px) saturate(160%);
  -webkit-backdrop-filter: blur(26px) saturate(160%);
  border-bottom: 1px solid var(--hd-nav-gold-line);
  color: var(--hd-nav-gold);
  box-shadow:
    0 1px 0 rgba(212, 172, 106, 0.05),
    0 28px 80px -40px rgba(180, 130, 60, 0.22);
  transition: background 0.7s var(--ease, cubic-bezier(0.22, 1, 0.36, 1)), padding 0.7s var(--ease);
}
body nav.site-nav.scrolled { background: var(--hd-nav-bg-scrolled); }

/* Soft warm gold reflection line along the bottom edge of the bar */
body nav.site-nav::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 6%,
    rgba(220, 178, 110, 0.42) 50%,
    transparent 94%);
  pointer-events: none;
}

/* Brand wordmark, keep its gold gradient untouched */
body nav.site-nav .nav-brand { color: inherit; }

/* Menu button + Cart button */
body nav.site-nav .menu-btn,
body nav.site-nav .nav-cart {
  color: var(--hd-nav-gold);
}
body nav.site-nav .menu-btn:hover,
body nav.site-nav .nav-cart:hover { color: var(--hd-nav-gold-bright); }
body nav.site-nav .menu-btn .lines::before,
body nav.site-nav .menu-btn .lines::after { background: var(--hd-nav-gold); }

/* Shop link, promoted to the primary nav CTA: brighter champagne,
   slightly bigger, bolder, and a confidently visible underline. */
body nav.site-nav .nav-acquire {
  color: var(--hd-nav-gold-bright);
  font-size: 10.5px;
  font-weight: 600;
  opacity: 1;
}
body nav.site-nav .nav-acquire:hover { color: #F4DBA9; }
body nav.site-nav .nav-acquire .shop-label {
  color: inherit;
  display: inline-block;
}
body nav.site-nav .nav-acquire.honey-shop .honey-underline::before {
  background: var(--hd-nav-gold-bright);
  opacity: 1;
  height: 1.2px;
  box-shadow: 0 0 6px rgba(236, 206, 147, 0.45);
}
/* Fallback static underline so the link reads even before honey-shop JS runs */
body nav.site-nav .nav-acquire:not(.honey-shop) {
  border-bottom: 1px solid var(--hd-nav-gold-bright);
  padding-bottom: 4px;
}

/* Cart count chip, gold pill on the matte black bar */
body nav.site-nav .nav-cart .cart-count {
  background: var(--hd-nav-gold);
  color: #100D08;
  font-weight: 600;
  box-shadow: 0 0 10px rgba(212, 172, 106, 0.35);
}

/* Language toggle */
body nav.site-nav .lang-toggle { color: var(--hd-nav-gold-soft); }
body nav.site-nav .lang-toggle button { color: inherit; opacity: 1; }
body nav.site-nav .lang-toggle button:hover { color: rgba(220, 180, 112, 0.9); }
body nav.site-nav .lang-toggle button.active { color: var(--hd-nav-gold-bright); }
body nav.site-nav .lang-toggle .sep { background: rgba(212, 172, 106, 0.32); }

/* Checkout-only nav extras */
body nav.site-nav .checkout-step-indicator .step { color: rgba(212, 172, 106, 0.5); }
body nav.site-nav .checkout-step-indicator .step.active {
  color: var(--hd-nav-gold-bright);
  opacity: 1;
}
body nav.site-nav .checkout-step-indicator .sep { background: rgba(212, 172, 106, 0.3); }
body nav.site-nav .secure-link { color: rgba(212, 172, 106, 0.7); }
body nav.site-nav .secure-link:hover { color: var(--hd-nav-gold-bright); }
body nav.site-nav .secure-link::before { border-color: var(--hd-nav-gold); }

/* Nav logo: 15% larger and a touch deeper so the foil reads as
   warm honey on matte black instead of bright champagne. */
body nav.site-nav .nav-brand { height: 51px; }
body nav.site-nav .logo-mark.nav-size {
  height: 51px;
  filter: brightness(0.84) saturate(1.2) contrast(1.05);
}
@media (max-width: 900px) {
  body nav.site-nav .nav-brand,
  body nav.site-nav .logo-mark.nav-size { height: 44px; }
}

/* Logo SVGs use a 260x100 viewBox symbol but the outer <svg> has no
   viewBox of its own, so without an explicit aspect-ratio some
   browsers fall back to the SVG default 300x150 and the wordmark
   reads tiny on the left of a much wider box. Force the correct
   ratio so width: auto resolves to height * 2.6. */
.logo-svg {
  aspect-ratio: 13 / 5;
}

/* =================================================================
   FAQ block (reusable, light background variant)
   Used on index.html and contact.html
   ================================================================= */
.faq-block {
  padding: 16vh 8% 18vh;
  background: var(--bg-deep, #EDE3D2);
  position: relative;
  border-top: 1px solid rgba(26, 22, 18, 0.06);
}
.faq-block-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 88px;
  align-items: start;
}
.faq-block .faq-intro { position: sticky; top: 110px; }
.faq-block .faq-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 9.5px;
  letter-spacing: 0.46em;
  text-transform: uppercase;
  color: var(--gold-deep, #8A6228);
  font-weight: 500;
  margin-bottom: 28px;
  padding-left: 0.46em;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.faq-block .faq-eyebrow .num {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 13px;
  color: var(--gold-deep, #8A6228);
}
.faq-block h2 {
  font-family: 'Newsreader', 'EB Garamond', Garamond, serif;
  font-weight: 300;
  font-size: clamp(38px, 6vw, 76px);
  line-height: 1.0;
  letter-spacing: -0.028em;
  color: var(--ink, #1F1A14);
  margin-bottom: 28px;
}
.faq-block h2 em { font-style: italic; color: var(--gold-deep, #8A6228); }
.faq-block .faq-desc {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-soft, #5C5247);
  max-width: 380px;
  margin-bottom: 32px;
  font-weight: 400;
}
.faq-block .faq-help {
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--ink-soft, #5C5247);
  max-width: 360px;
  padding-top: 20px;
  border-top: 1px solid rgba(26, 22, 18, 0.1);
  font-weight: 400;
}
.faq-block .faq-help a {
  color: var(--ink, #1F1A14);
  text-decoration: none;
  border-bottom: 1px solid var(--gold, #B8945A);
  padding-bottom: 1px;
  transition: color 0.4s ease, border-color 0.4s ease;
}
.faq-block .faq-help a:hover { color: var(--gold-deep, #8A6228); border-color: var(--gold-deep, #8A6228); }

.faq-block .faq-list { list-style: none; padding: 0; margin: 0; }
.faq-block .faq-row {
  border-bottom: 1px solid rgba(26, 22, 18, 0.1);
}
.faq-block .faq-row:first-child { border-top: 1px solid rgba(26, 22, 18, 0.1); }
.faq-block .faq-q {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 28px;
  cursor: pointer;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  font-family: 'Newsreader', serif;
  font-weight: 500;
  font-size: clamp(19px, 2.4vw, 24px);
  line-height: 1.32;
  color: var(--ink, #1F1A14);
  letter-spacing: -0.008em;
  padding: 26px 0;
  transition: color 0.4s ease;
  min-height: 44px;
}
.faq-block .faq-q:hover { color: var(--gold-deep, #8A6228); }
.faq-block .faq-q:focus-visible { outline: 1px solid var(--gold-deep, #8A6228); outline-offset: 6px; }
.faq-block .faq-q .plus {
  position: relative;
  flex-shrink: 0;
  width: 18px; height: 18px;
  margin-top: 8px;
}
.faq-block .faq-q .plus::before, .faq-block .faq-q .plus::after {
  content: '';
  position: absolute;
  background: var(--gold-deep, #8A6228);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.faq-block .faq-q .plus::before { top: 50%; left: 0; right: 0; height: 1px; transform: translateY(-50%); }
.faq-block .faq-q .plus::after  { left: 50%; top: 0; bottom: 0; width: 1px; transform: translateX(-50%); }
.faq-block .faq-row.open .faq-q .plus::after { transform: translateX(-50%) rotate(90deg); opacity: 0; }
.faq-block .faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.faq-block .faq-row.open .faq-a { max-height: 800px; }
.faq-block .faq-a p {
  font-family: 'Newsreader', serif;
  font-size: 17px;
  line-height: 1.78;
  color: var(--ink-soft, #5C5247);
  padding: 0 0 28px 0;
  margin: 0;
  font-weight: 300;
  max-width: 640px;
}
.faq-block .faq-a a {
  color: var(--ink, #1F1A14);
  text-decoration: none;
  border-bottom: 1px solid var(--gold, #B8945A);
  padding-bottom: 1px;
  transition: color 0.4s ease, border-color 0.4s ease;
}
.faq-block .faq-a a:hover { color: var(--gold-deep, #8A6228); border-color: var(--gold-deep, #8A6228); }

@media (max-width: 900px) {
  .faq-block { padding: 12vh 7% 14vh; }
  .faq-block-inner { grid-template-columns: 1fr; gap: 44px; }
  .faq-block .faq-intro { position: static; }
}
@media (prefers-reduced-motion: reduce) {
  .faq-block .faq-q .plus::before, .faq-block .faq-q .plus::after { transition: none; }
  .faq-block .faq-a { transition: none; }
}

/* Footer button styled as a link (used for "Cookievoorkeuren" trigger) */
.footer-col button.linkish {
  display: block;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: 13.5px;
  line-height: 2.1;
  color: rgba(245, 239, 228, 0.6);
  font-weight: 300;
  padding: 0;
  transition: color 0.5s var(--ease, cubic-bezier(0.22, 1, 0.36, 1));
}
.footer-col button.linkish:hover { color: #FAF6EE; }

/* =================================================================
   COOKIE CONSENT BAR
   Cookiewet (art. 11.7a Tw) + AVG/GDPR compliant
   - 3 tiers: noodzakelijk (altijd aan), analytisch, marketing
   - Equal prominence between accept / reject (NL DPA requirement)
   - Re-openable from footer link [data-open-cookie-prefs]
   ================================================================= */
.cookie-bar {
  position: fixed;
  left: 24px;
  right: 24px;
  bottom: 24px;
  z-index: 200;
  max-width: 460px;
  background: rgba(14, 11, 8, 0.94);
  backdrop-filter: blur(28px) saturate(140%);
  -webkit-backdrop-filter: blur(28px) saturate(140%);
  color: #F5EFE4;
  border: 1px solid rgba(212, 172, 106, 0.18);
  border-radius: 3px;
  padding: 32px 32px 28px;
  box-shadow:
    0 30px 60px rgba(0, 0, 0, 0.45),
    0 10px 30px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 235, 190, 0.08);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.cookie-bar.visible { opacity: 1; transform: none; pointer-events: auto; }
.cookie-bar::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 172, 106, 0.5), transparent);
}
.cookie-bar .cb-eyebrow {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 8.5px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: #D4AC6A;
  font-weight: 500;
  margin-bottom: 14px;
  padding-left: 0.42em;
}
.cookie-bar h3 {
  font-family: 'Newsreader', 'EB Garamond', Garamond, serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.2;
  color: #FAF6EE;
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}
.cookie-bar p {
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  line-height: 1.7;
  color: rgba(245, 239, 228, 0.72);
  margin-bottom: 22px;
  font-weight: 300;
}
.cookie-bar p a {
  color: #D4AC6A;
  text-decoration: none;
  border-bottom: 1px solid rgba(212, 172, 106, 0.4);
  padding-bottom: 1px;
  transition: color 0.4s ease, border-color 0.4s ease;
}
.cookie-bar p a:hover { color: #F5DEA0; border-color: #F5DEA0; }
.cookie-bar .cb-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.cookie-bar .cb-btn {
  flex: 1 1 auto;
  min-height: 44px;
  padding: 12px 18px;
  font-family: 'Inter', sans-serif;
  font-size: 9.5px;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  font-weight: 500;
  border: 1px solid rgba(245, 239, 228, 0.22);
  background: transparent;
  color: #F5EFE4;
  cursor: pointer;
  transition: background 0.5s ease, border-color 0.5s ease, color 0.5s ease;
  padding-left: calc(18px + 0.38em);
  white-space: nowrap;
}
.cookie-bar .cb-btn:hover { border-color: rgba(245, 239, 228, 0.5); }
.cookie-bar .cb-btn:focus-visible { outline: 1px solid #D4AC6A; outline-offset: 2px; }
.cookie-bar .cb-btn.cb-accept {
  background: #D4AC6A;
  color: #0E0B08;
  border-color: #D4AC6A;
}
.cookie-bar .cb-btn.cb-accept:hover { background: #F5DEA0; border-color: #F5DEA0; }
.cookie-bar .cb-btn.cb-reject:hover { background: rgba(245, 239, 228, 0.06); }
.cookie-bar .cb-btn.cb-customize { font-size: 9px; }

.cookie-bar .cb-prefs {
  display: none;
  margin-top: 4px;
  padding-top: 24px;
  border-top: 1px solid rgba(245, 239, 228, 0.1);
}
.cookie-bar.expanded .cb-prefs { display: block; }
.cookie-bar.expanded .cb-actions { margin-top: 22px; }
.cb-prefs .cb-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px 18px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(245, 239, 228, 0.06);
  align-items: center;
}
.cb-prefs .cb-row:last-child { border-bottom: none; }
.cb-prefs .cb-row .cb-row-title {
  font-family: 'Newsreader', serif;
  font-weight: 500;
  font-size: 15px;
  color: #FAF6EE;
  letter-spacing: -0.005em;
}
.cb-prefs .cb-row .cb-row-desc {
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  line-height: 1.55;
  color: rgba(245, 239, 228, 0.6);
  grid-column: 1 / -1;
  font-weight: 300;
  margin-top: -4px;
}

/* Toggle */
.cb-toggle {
  --w: 36px;
  --h: 20px;
  position: relative;
  display: inline-flex;
  align-items: center;
}
.cb-toggle input {
  position: absolute;
  width: 100%; height: 100%;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.cb-toggle input:disabled { cursor: not-allowed; }
.cb-toggle .track {
  width: var(--w);
  height: var(--h);
  border-radius: 999px;
  background: rgba(245, 239, 228, 0.16);
  position: relative;
  transition: background 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.cb-toggle .knob {
  position: absolute;
  top: 2px; left: 2px;
  width: calc(var(--h) - 4px);
  height: calc(var(--h) - 4px);
  border-radius: 50%;
  background: #F5EFE4;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), background 0.35s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.cb-toggle input:checked + .track { background: #B8945A; }
.cb-toggle input:checked + .track .knob { transform: translateX(calc(var(--w) - var(--h))); background: #FAF6EE; }
.cb-toggle input:focus-visible + .track { box-shadow: 0 0 0 2px rgba(212, 172, 106, 0.35); }
.cb-toggle input:disabled + .track {
  background: rgba(212, 172, 106, 0.55);
  opacity: 0.85;
}
.cb-toggle input:disabled + .track .knob { background: rgba(250, 246, 238, 0.85); }
.cb-toggle .req {
  font-family: 'Inter', sans-serif;
  font-size: 8.5px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(245, 239, 228, 0.5);
  margin-left: 12px;
  font-weight: 500;
  padding-left: 0.32em;
}

@media (max-width: 600px) {
  .cookie-bar {
    left: 12px; right: 12px; bottom: 12px;
    max-width: none;
    padding: 24px 22px 22px;
  }
  .cookie-bar h3 { font-size: 20px; }
  .cookie-bar .cb-actions { flex-direction: column; }
  .cookie-bar .cb-btn { flex: 1 1 auto; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .cookie-bar { transition: opacity 0.01ms; transform: none; }
  .cb-toggle .track, .cb-toggle .knob { transition: none; }
}

/* =================================================================
   E-COMMERCE UPGRADES, added in post-launch polish round
   ================================================================= */

/* ============================================================
   HARVEST CONCIERGE, luxury floating support
   Warm gold FAB → cinematic dark glass concierge panel
   Replaces the generic green WhatsApp bubble.
   ============================================================ */

/* ------------ Correspondence button (matte pill, "Write to us") ------------ */
/* Calm Mediterranean-hospitality entry point. No glossy coin, no glow, no pulse,
   a quiet matte pill that reads as an invitation to write, not a chat widget. */
.hd-concierge-fab {
  position: fixed;
  bottom: 26px;
  right: 26px;
  z-index: 130;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 22px;
  border-radius: var(--radius-pill, 999px);
  background: #241C14;                         /* matte deep brown */
  color: #F3EAD9;                              /* soft cream */
  border: 1px solid rgba(212, 172, 106, 0.26); /* subtle gold hairline */
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 14px 34px -18px rgba(20, 14, 6, 0.55);
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  -webkit-tap-highlight-color: transparent;
}
.hd-concierge-fab.ready { opacity: 1; transform: none; pointer-events: auto; }
.hd-concierge-fab:hover {
  background: #30251A;
  border-color: rgba(212, 172, 106, 0.5);
  transform: translateY(-2px);
}
.hd-concierge-fab:active { transform: translateY(0); }
.hd-concierge-fab:focus-visible { outline: 2px solid #B8945A; outline-offset: 3px; }

/* Option 1, no icon: hide the old gold coin glyph, show the label inline */
.hd-concierge-fab .hd-fab-glyph { display: none; }
.hd-concierge-fab .hd-fab-label {
  position: static;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  white-space: nowrap;
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  font-weight: inherit;
}
@media (prefers-reduced-motion: reduce) {
  .hd-concierge-fab { transition: opacity 0.3s linear; }
}
@media (max-width: 600px) {
  .hd-concierge-fab { bottom: 18px; right: 18px; padding: 12px 18px; font-size: 10.5px; letter-spacing: 0.12em; }
}

/* ------------ Concierge panel ------------ */
.hd-concierge {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  visibility: hidden;
}
.hd-concierge.open { visibility: visible; pointer-events: auto; }
.hd-concierge__scrim {
  position: absolute;
  inset: 0;
  background: rgba(14, 11, 8, 0.42);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.hd-concierge.open .hd-concierge__scrim { opacity: 1; }

.hd-concierge__panel {
  position: absolute;
  right: 24px;
  bottom: 100px;
  width: min(380px, calc(100vw - 32px));
  max-height: min(620px, calc(100vh - 140px));
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(28, 22, 14, 0.96) 0%, rgba(20, 16, 10, 0.97) 100%);
  border: 1px solid rgba(232, 200, 152, 0.16);
  box-shadow:
    0 32px 70px rgba(0, 0, 0, 0.55),
    0 12px 30px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 250, 235, 0.06);
  color: #FAF6EE;
  opacity: 0;
  transform: translateY(14px) scale(0.97);
  transform-origin: bottom right;
  transition:
    opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.hd-concierge.open .hd-concierge__panel {
  opacity: 1;
  transform: translateY(0) scale(1);
}
/* Subtle grain overlay for warmth */
.hd-concierge__panel::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.85  0 0 0 0 0.72  0 0 0 0 0.42  0 0 0 0.08 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.55;
  mix-blend-mode: overlay;
  border-radius: inherit;
}
/* Warm ambient corner glow */
.hd-concierge__panel::after {
  content: '';
  position: absolute;
  inset: -1px;
  pointer-events: none;
  background:
    radial-gradient(80% 50% at 20% 0%, rgba(212, 172, 106, 0.18) 0%, transparent 60%),
    radial-gradient(60% 40% at 100% 100%, rgba(212, 172, 106, 0.08) 0%, transparent 60%);
  border-radius: inherit;
}

/* Header */
.hd-concierge__header {
  position: relative;
  padding: 22px 22px 18px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  border-bottom: 1px solid rgba(232, 200, 152, 0.10);
}
.hd-concierge__avatar {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(120% 120% at 30% 25%, rgba(255, 235, 200, 0.55) 0%, rgba(255, 235, 200, 0) 55%),
    linear-gradient(135deg, #D4AC6A 0%, #B8945A 45%, #8A6228 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 250, 235, 0.4),
    inset 0 -6px 14px rgba(80, 50, 14, 0.30),
    0 4px 10px rgba(0,0,0,0.35);
}
.hd-concierge__avatar svg { width: 22px; height: 22px; color: #FAF6EE; }
.hd-concierge__id { flex: 1; min-width: 0; }
.hd-concierge__title {
  font-family: 'Newsreader', serif;
  font-variation-settings: 'opsz' 32, 'wght' 500;
  font-size: 18px;
  line-height: 1.15;
  letter-spacing: 0.005em;
  color: #FAF6EE;
  margin: 0;
}
.hd-concierge__sub {
  margin: 4px 0 0;
  font-family: 'Inter', sans-serif;
  font-size: 9.5px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(232, 200, 152, 0.62);
}
.hd-concierge__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: rgba(250, 246, 238, 0.62);
}
.hd-concierge__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #9ECB8A;
  box-shadow: 0 0 0 3px rgba(158, 203, 138, 0.18);
  animation: hdConciergePulse 2.4s ease-in-out infinite;
}
@keyframes hdConciergePulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(158, 203, 138, 0.18); }
  50%      { box-shadow: 0 0 0 6px rgba(158, 203, 138, 0); }
}
.hd-concierge__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  background: transparent;
  border: 1px solid rgba(232, 200, 152, 0.14);
  border-radius: 50%;
  color: rgba(250, 246, 238, 0.68);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.hd-concierge__close:hover {
  background: rgba(232, 200, 152, 0.10);
  color: #FAF6EE;
  border-color: rgba(232, 200, 152, 0.30);
  transform: rotate(90deg);
}
.hd-concierge__close svg { width: 12px; height: 12px; }

/* Body */
.hd-concierge__body {
  position: relative;
  padding: 20px 22px 8px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.hd-concierge__body::-webkit-scrollbar { width: 6px; }
.hd-concierge__body::-webkit-scrollbar-thumb { background: rgba(232, 200, 152, 0.16); border-radius: 6px; }

.hd-concierge__bubble {
  position: relative;
  padding: 14px 16px;
  border-radius: 14px 14px 14px 4px;
  background: rgba(232, 200, 152, 0.06);
  border: 1px solid rgba(232, 200, 152, 0.10);
  font-family: 'Newsreader', serif;
  font-variation-settings: 'opsz' 24, 'wght' 400;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(250, 246, 238, 0.92);
  white-space: pre-line;
}
.hd-concierge__intro {
  margin: 12px 2px 14px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.04em;
  line-height: 1.55;
  color: rgba(250, 246, 238, 0.52);
}

/* Quick action chips */
.hd-concierge__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 4px 0 6px;
}
.hd-concierge__chip {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 13px 16px;
  border: 1px solid rgba(232, 200, 152, 0.14);
  border-radius: 999px;
  background: rgba(250, 246, 238, 0.025);
  color: #FAF6EE;
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-align: left;
  cursor: pointer;
  transition:
    background 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    color 0.35s ease;
  opacity: 0;
  transform: translateY(8px);
}
.hd-concierge.open .hd-concierge__chip { opacity: 1; transform: none; }
.hd-concierge.open .hd-concierge__chip:nth-child(1) { transition-delay: 120ms; }
.hd-concierge.open .hd-concierge__chip:nth-child(2) { transition-delay: 170ms; }
.hd-concierge.open .hd-concierge__chip:nth-child(3) { transition-delay: 220ms; }
.hd-concierge.open .hd-concierge__chip:nth-child(4) { transition-delay: 270ms; }
.hd-concierge.open .hd-concierge__chip:nth-child(5) { transition-delay: 320ms; }
.hd-concierge__chip:hover {
  background: rgba(232, 200, 152, 0.10);
  border-color: rgba(232, 200, 152, 0.32);
  transform: translateY(-1px);
}
.hd-concierge__chip:active { transform: translateY(0); }
.hd-concierge__chip:focus-visible {
  outline: 2px solid rgba(232, 200, 152, 0.55);
  outline-offset: 2px;
}
.hd-concierge__chip-label {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hd-concierge__chip-arrow {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  color: rgba(232, 200, 152, 0.55);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), color 0.35s ease;
}
.hd-concierge__chip:hover .hd-concierge__chip-arrow {
  transform: translateX(3px);
  color: #E2C898;
}

/* Footer privacy line */
.hd-concierge__footer {
  padding: 10px 22px 18px;
  border-top: 1px solid rgba(232, 200, 152, 0.08);
  font-family: 'Inter', sans-serif;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(250, 246, 238, 0.34);
}
.hd-concierge__footer svg {
  display: inline-block;
  width: 11px;
  height: 11px;
  vertical-align: -2px;
  margin-right: 6px;
  color: rgba(158, 203, 138, 0.7);
}

@media (max-width: 600px) {
  .hd-concierge__panel {
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    max-height: 88vh;
    border-radius: 22px 22px 0 0;
    transform-origin: bottom center;
    transform: translateY(24px);
  }
  .hd-concierge.open .hd-concierge__panel { transform: translateY(0); }
  .hd-concierge__panel::after {
    background: radial-gradient(60% 30% at 50% 0%, rgba(212, 172, 106, 0.18) 0%, transparent 60%);
  }
  /* drag handle */
  .hd-concierge__panel > .hd-concierge__header::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 38px;
    height: 4px;
    border-radius: 999px;
    background: rgba(232, 200, 152, 0.20);
  }
  .hd-concierge__header { padding-top: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .hd-concierge__panel,
  .hd-concierge__scrim,
  .hd-concierge__chip {
    transition-duration: 0.2s;
    transition-timing-function: linear;
    transform: none !important;
  }
  .hd-concierge__dot { animation: none; }
}

/* ------------ Free-shipping progress bar (in cart drawer) ------------ */
.cart-progress {
  padding: 16px 32px 20px;
  border-top: 1px solid rgba(245, 239, 228, 0.08);
  background: rgba(184, 148, 90, 0.04);
}
.cart-progress .label {
  font-size: 9.5px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-left: 0.36em;
  gap: 12px;
}
.cart-progress .label .remaining {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--cream);
  font-weight: 400;
}
.cart-progress .label .remaining.unlocked { color: var(--gold-light); }
.cart-progress .track {
  position: relative;
  height: 3px;
  background: rgba(245, 239, 228, 0.1);
  border-radius: 2px;
  overflow: hidden;
}
.cart-progress .fill {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 0%;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  border-radius: 2px;
  transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ------------ Trust badges (checkout footer + cart) ------------ */
.trust-badges {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
  padding: 24px 0;
  border-top: 1px solid rgba(26, 22, 18, 0.08);
  margin-top: 32px;
  font-family: 'Inter', sans-serif;
}
.trust-badges .badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 9px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 500;
  padding-left: 0.36em;
}
.trust-badges .badge svg { width: 18px; height: 18px; color: var(--gold-deep); flex-shrink: 0; }
.payment-methods {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 20px 0;
  opacity: 0.85;
}
.payment-methods .pm {
  height: 22px;
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border: 1px solid rgba(26, 22, 18, 0.14);
  border-radius: 3px;
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  letter-spacing: 0.18em;
  font-weight: 600;
  color: var(--ink);
  text-transform: uppercase;
  background: var(--cream);
}
.payment-methods .pm.ideal { color: #CC0066; }
.payment-methods .pm.klarna { color: #FFA8CD; background: #FFA8CD; color: #17120A; }
.payment-methods .pm.visa { font-family: serif; font-style: italic; letter-spacing: 0.04em; color: #1A1F71; font-weight: 700; }
.payment-methods .pm.mc { letter-spacing: 0; padding: 0 14px; }
.payment-methods .pm.amex { color: #006FCF; }
.payment-methods .pm.applepay { color: #000; font-weight: 600; }

/* ------------ Wishlist heart button (on shop cards + product page) ------------ */
.wishlist-btn {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 3;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255, 250, 240, 0.78);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(184, 148, 90, 0.22);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ink-soft);
  transition: background 0.4s ease, color 0.4s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.wishlist-btn:hover { transform: scale(1.06); color: var(--gold-deep); }
.wishlist-btn.active { color: #B83A3A; background: rgba(250, 246, 238, 0.96); }
.wishlist-btn svg { width: 18px; height: 18px; transition: fill 0.4s ease, transform 0.4s ease; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.wishlist-btn:hover svg { transform: scale(1.08); }
.wishlist-btn.active svg { fill: currentColor; }
.wishlist-btn:focus-visible { outline: 1px solid var(--gold-deep); outline-offset: 2px; }
.wishlist-count {
  display: none;
  margin-left: 4px;
  font-size: 9px;
  letter-spacing: 0.2em;
  font-weight: 500;
  color: var(--gold-deep);
}
.wishlist-count.visible { display: inline; }

/* Inline product-page wishlist heart (large) */
.product-wishlist-line {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-soft);
  background: none; border: none; cursor: pointer;
  padding: 8px 0;
  padding-left: 0.42em;
  transition: color 0.4s ease;
}
.product-wishlist-line:hover { color: var(--gold-deep); }
.product-wishlist-line.active { color: #B83A3A; }
.product-wishlist-line svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.product-wishlist-line.active svg { fill: currentColor; }

/* ------------ Reviews block (on product page) ------------ */
.reviews-section {
  padding: 14vh 8% 14vh;
  background: var(--bg-deep);
  border-top: 1px solid rgba(26, 22, 18, 0.06);
}
.reviews-inner {
  max-width: 1100px; margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 80px;
  align-items: start;
}
.reviews-summary {
  position: sticky; top: 110px;
}
.reviews-summary .eyebrow {
  font-size: 9.5px; letter-spacing: 0.46em;
  text-transform: uppercase; color: var(--gold-deep);
  font-weight: 500; margin-bottom: 28px;
  padding-left: 0.46em;
}
.reviews-summary h2 {
  font-family: 'Newsreader', serif;
  font-weight: 300;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.0; letter-spacing: -0.022em;
  color: var(--ink); margin-bottom: 28px;
}
.reviews-summary h2 em { font-style: italic; color: var(--gold-deep); }
.rating-display {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 32px;
  padding: 24px 0;
  border-top: 1px solid rgba(26, 22, 18, 0.08);
  border-bottom: 1px solid rgba(26, 22, 18, 0.08);
}
.rating-display .score {
  font-family: 'Newsreader', serif;
  font-weight: 400;
  font-size: 52px;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.rating-display .stars {
  display: flex; gap: 2px;
  color: var(--gold);
}
.rating-display .stars svg { width: 16px; height: 16px; fill: currentColor; }
.rating-display .meta {
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 500;
  padding-left: 0.28em;
}
.reviews-summary .desc {
  font-family: 'Newsreader', serif;
  font-style: italic; font-size: 16px;
  line-height: 1.6; color: var(--ink-soft);
  max-width: 360px;
}

.review-list { list-style: none; }
.review-item {
  padding: 32px 0;
  border-bottom: 1px solid rgba(26, 22, 18, 0.08);
}
.review-item:first-child { padding-top: 0; }
.review-item:last-child { border-bottom: none; }
.review-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.review-head .stars { display: flex; gap: 2px; color: var(--gold); }
.review-head .stars svg { width: 13px; height: 13px; fill: currentColor; }
.review-head .author {
  font-family: 'Newsreader', serif;
  font-weight: 500;
  font-size: 16px;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.review-head .date {
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 500;
  padding-left: 0.32em;
}
.review-head .verified {
  font-size: 9px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 500;
  padding-left: 0.36em;
  display: inline-flex; align-items: center; gap: 6px;
}
.review-head .verified svg { width: 11px; height: 11px; }
.review-title {
  font-family: 'Newsreader', serif;
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.008em;
  color: var(--ink);
  margin-bottom: 10px;
}
.review-body {
  font-family: 'Newsreader', serif;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft);
  font-weight: 300;
  max-width: 580px;
}

/* ------------ "You may also like" + Recently viewed (product page) ------------ */
.also-section, .recent-section {
  padding: 14vh 8%;
  border-top: 1px solid rgba(26, 22, 18, 0.06);
}
.recent-section[hidden] { display: none; }
.also-inner, .recent-inner {
  max-width: 1280px;
  margin: 0 auto;
}
.also-head, .recent-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 7vh;
  gap: 32px;
  flex-wrap: wrap;
}
.also-head .eyebrow, .recent-head .eyebrow {
  font-size: 9.5px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 500;
  padding-left: 0.42em;
}
.also-head h2, .recent-head h2 {
  font-family: 'Newsreader', serif;
  font-weight: 300;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.0;
  letter-spacing: -0.022em;
  margin-top: 14px;
  color: var(--ink);
}
.also-head h2 em, .recent-head h2 em { font-style: italic; color: var(--gold-deep); }
.also-grid, .recent-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.recent-grid { grid-template-columns: repeat(4, 1fr); gap: 28px; }
.also-card, .recent-card {
  text-decoration: none;
  color: inherit;
  display: block;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.also-card:hover, .recent-card:hover { transform: translateY(-4px); }
.also-card .frame, .recent-card .frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(212, 172, 106, 0.36), transparent 60%),
    linear-gradient(160deg, var(--bg-deep), var(--stone));
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.recent-card .frame { aspect-ratio: 1 / 1; }
.also-card .frame img, .recent-card .frame img {
  max-width: 68%;
  max-height: 78%;
  object-fit: contain;
  filter: drop-shadow(0 16px 24px rgba(0,0,0,0.18));
}
.also-card .name, .recent-card .name {
  font-family: 'Newsreader', serif;
  font-weight: 400;
  font-size: 19px;
  color: var(--ink);
  letter-spacing: -0.008em;
  margin-bottom: 4px;
}
.also-card .region, .recent-card .region {
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 500;
  padding-left: 0.28em;
}
.also-card .price {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  float: right;
}
@media (max-width: 900px) {
  .reviews-inner { grid-template-columns: 1fr; gap: 32px; }
  .reviews-summary { position: static; }
  .also-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .recent-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .also-grid, .recent-grid { grid-template-columns: 1fr; }
}

/* ------------ Press strip (homepage) ------------ */
.press-strip {
  padding: 9vh 8%;
  background: var(--bg);
  border-top: 1px solid rgba(26, 22, 18, 0.08);
  border-bottom: 1px solid rgba(26, 22, 18, 0.08);
}
.press-inner {
  max-width: 1280px;
  margin: 0 auto;
  text-align: center;
}
.press-strip .label {
  font-size: 9px;
  letter-spacing: 0.46em;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 500;
  margin-bottom: 36px;
  padding-left: 0.46em;
}
.press-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 32px;
  align-items: center;
}
.press-name {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: clamp(15px, 1.5vw, 22px);
  letter-spacing: -0.005em;
  color: var(--ink-soft);
  opacity: 0.78;
  text-align: center;
  white-space: nowrap;
  transition: opacity 0.5s var(--ease), color 0.5s var(--ease);
}
.press-name.bold { font-style: normal; font-family: 'Newsreader', serif; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; font-size: clamp(11px, 1.05vw, 14px); }
.press-strip:hover .press-name { opacity: 0.5; }
.press-strip:hover .press-name:hover { opacity: 1; color: var(--ink); }
@media (max-width: 900px) {
  .press-row { grid-template-columns: repeat(3, 1fr); gap: 28px 20px; }
}
@media (max-width: 540px) {
  .press-row { grid-template-columns: repeat(2, 1fr); }
}

/* ------------ Instagram grid (homepage) ------------ */
.ig-strip {
  padding: 14vh 8% 16vh;
  background: var(--bg);
}
.ig-inner { max-width: 1280px; margin: 0 auto; }
.ig-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 8vh;
}
.ig-head .eyebrow {
  font-size: 9.5px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 500;
  padding-left: 0.42em;
}
.ig-head h2 {
  font-family: 'Newsreader', serif;
  font-weight: 300;
  font-size: clamp(32px, 4.4vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.022em;
  margin-top: 14px;
  color: var(--ink);
}
.ig-head h2 em { font-style: italic; color: var(--gold-deep); }
.ig-head .follow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 10px;
  letter-spacing: var(--track-button);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 6px;
  padding-left: var(--track-button);
  border-bottom: 1px solid var(--ink);
  transition: color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.ig-head .follow:hover { color: var(--gold-deep); border-color: var(--gold-deep); }
/* Editorial gallery (not a social embed): portrait plates, woven column
   cascade, cinematic hover zoom, ambient gold light behind the grid. */
.ig-strip { position: relative; overflow: hidden; }
.ig-ambient {
  position: absolute; left: 50%; top: 56%; transform: translate(-50%, -50%);
  width: 90vmin; height: 90vmin; pointer-events: none; z-index: 0;
  background: radial-gradient(closest-side, rgba(212, 172, 106, 0.16), transparent 70%);
  filter: blur(10px);
  animation: igAmbient 16s ease-in-out infinite alternate;
}
@keyframes igAmbient {
  0%   { transform: translate(-54%, -52%) scale(1); opacity: 0.8; }
  100% { transform: translate(-46%, -48%) scale(1.12); opacity: 1; }
}
.ig-inner { position: relative; z-index: 1; }
.ig-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 1.6vw, 26px);
}
.ig-tile {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  text-decoration: none;
  border-radius: var(--radius-card, 16px);
  cursor: pointer;
  background: var(--bg-deep, #EDE3D2);
  box-shadow: 0 26px 54px -34px rgba(40, 28, 12, 0.42);
}
/* woven editorial rhythm: nudge the 2nd and 4th columns downward */
.ig-tile:nth-child(4n+2), .ig-tile:nth-child(4n) { transform: translateY(clamp(18px, 3vw, 44px)); }
.ig-tile img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1.3s var(--ease, cubic-bezier(0.22,1,0.36,1)), filter 0.7s var(--ease);
  filter: saturate(1.02);
}
.ig-tile:hover img { transform: scale(1.07); filter: saturate(1.08) brightness(1.02); }
.ig-tile::after {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(130% 90% at 50% 0%, transparent 48%, rgba(14, 11, 8, 0.32) 100%);
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  pointer-events: none;
}
.ig-tile:hover::after { opacity: 1; }
.ig-tile .ig-icon {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.62);
  z-index: 2;
  width: 32px; height: 32px;
  color: rgba(255, 250, 240, 0.96);
  opacity: 0;
  transition: opacity 0.4s var(--ease), transform 0.55s var(--ease);
  filter: drop-shadow(0 2px 12px rgba(0,0,0,0.5));
}
.ig-tile:hover .ig-icon { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.ig-tile .ig-icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.4; }
@media (max-width: 900px) {
  .ig-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .ig-tile:nth-child(4n+2), .ig-tile:nth-child(4n) { transform: none; }
  .ig-tile:nth-child(2n) { transform: translateY(26px); }
  .ig-head { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .ig-ambient { animation: none; }
  .ig-tile img { transition: none; }
}

/* ------------ Search modal ------------ */
.search-btn {
  background: none; border: none; cursor: pointer;
  color: inherit; padding: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px;
  opacity: 0.92;
  transition: opacity 0.4s ease;
}
.search-btn:hover { opacity: 1; }
.search-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.4; }

.search-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(14, 11, 8, 0.75);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  opacity: 0; pointer-events: none;
  transition: opacity 0.5s var(--ease);
  display: flex;
  flex-direction: column;
  padding: 12vh 8% 8vh;
}
.search-overlay.open { opacity: 1; pointer-events: auto; }
.search-overlay .close {
  position: absolute;
  top: 32px; right: 36px;
  background: none; border: none; cursor: pointer;
  color: #FAF6EE;
  font-size: 10px;
  letter-spacing: var(--track-button);
  text-transform: uppercase;
  font-weight: 500;
  padding: 8px 0;
  padding-left: var(--track-button);
  display: inline-flex;
  align-items: center;
  gap: 14px;
  opacity: 0.8;
  transition: opacity 0.4s ease;
}
.search-overlay .close:hover { opacity: 1; }
.search-overlay .close .x { width: 16px; height: 1px; background: currentColor; position: relative; }
.search-overlay .close .x::before, .search-overlay .close .x::after { content: ''; position: absolute; inset: 0; background: currentColor; }
.search-overlay .close .x::before { transform: rotate(45deg); }
.search-overlay .close .x::after { transform: rotate(-45deg); }

.search-input-wrap {
  max-width: 760px; margin: 0 auto;
  width: 100%;
  border-bottom: 1px solid rgba(245, 239, 228, 0.36);
  padding-bottom: 14px;
  display: flex; align-items: center; gap: 18px;
}
.search-input-wrap svg { width: 22px; height: 22px; color: #D4AC6A; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 1.4; }
.search-input-wrap input {
  flex: 1; background: transparent; border: none;
  color: #FAF6EE;
  font-family: 'Newsreader', serif;
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 300;
  outline: none;
  padding: 8px 0;
  font-style: italic;
}
.search-input-wrap input::placeholder { color: rgba(245, 239, 228, 0.38); }
.search-results {
  max-width: 760px;
  margin: 32px auto 0;
  width: 100%;
  max-height: calc(100vh - 24vh);
  overflow-y: auto;
}
.search-result {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  gap: 22px;
  padding: 18px 4px;
  text-decoration: none;
  color: #FAF6EE;
  border-bottom: 1px solid rgba(245, 239, 228, 0.08);
  transition: background 0.3s ease;
  align-items: center;
}
.search-result:hover, .search-result.focused { background: rgba(245, 239, 228, 0.05); }
.search-result .thumb {
  width: 60px; height: 72px;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(212, 172, 106, 0.4), transparent 60%),
    linear-gradient(160deg, #3D2A14, #0F0A05);
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.search-result .thumb img { max-width: 70%; max-height: 80%; object-fit: contain; }
.search-result .name {
  font-family: 'Newsreader', serif;
  font-size: 18px;
  color: #FAF6EE;
}
.search-result .region {
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(245, 239, 228, 0.55);
  font-weight: 500;
  padding-left: 0.32em;
  margin-top: 4px;
}
.search-result .price {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #D4AC6A;
}
.search-empty {
  max-width: 760px; margin: 32px auto 0;
  text-align: center;
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 17px;
  color: rgba(245, 239, 228, 0.55);
  padding: 56px 0;
}
.search-empty a { color: #D4AC6A; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; }

/* ------------ Variant selector (on product page) ------------ */
/* ---- Variant selector, minimal soft rectangles (Apple/Acne restraint) ---- */
.variant-selector { margin: 28px 0 30px; }
.variant-selector .lbl {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 500;
  margin-bottom: 12px;
}
.variant-options {
  display: flex;
  gap: 10px;
  background: none;
  border: none;
}
.variant-options input { position: absolute; opacity: 0; pointer-events: none; }
.variant-options label {
  flex: 0 0 auto;
  min-width: 72px;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink);
  background: transparent;
  border: 1px solid rgba(26, 22, 18, 0.20);
  border-radius: var(--radius-xs, 6px);
  cursor: pointer;
  transition: border-color 0.35s var(--ease), background 0.35s var(--ease), color 0.35s var(--ease);
}
.variant-options label:hover { border-color: rgba(26, 22, 18, 0.46); }
.variant-options input:checked + label {
  background: #241C14;            /* matte deep olive-brown, restrained, no gloss/glow */
  border-color: #241C14;
  color: #F3EAD9;
}
.variant-options input:focus-visible + label { outline: 2px solid var(--gold-deep); outline-offset: 2px; }
.variant-options .price-diff { display: none; }   /* no pricing inside the buttons */

/* secondary edition info, beneath the selector */
.variant-meta { margin-top: 16px; display: flex; flex-direction: column; gap: 3px; }
.variant-meta .vm-edition { font-size: 14px; font-weight: 540; letter-spacing: -0.01em; color: var(--ink); }
.variant-meta .vm-desc { font-size: 13px; line-height: 1.5; color: var(--ink-soft); }

/* Honeypot input, invisible to humans, visible to bots */
.hp-field {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* =================================================================
   WISHLIST NAV LINK (auto-injected by shared.js into nav.nav-right)
   ================================================================= */
/* Fixed-size icon slot. Never resizes, never reflows. Touch target = 44×44. */
nav.site-nav .nav-wishlist {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  padding: 0;
  color: inherit;
  text-decoration: none;
  opacity: 0.92;
  transition: opacity 0.4s var(--ease, cubic-bezier(0.22, 1, 0.36, 1)), color 0.4s var(--ease);
}
nav.site-nav .nav-wishlist:hover { opacity: 1; color: #B83A3A; }
nav.site-nav .nav-wishlist:focus-visible {
  outline: 2px solid var(--gold, #B8945A);
  outline-offset: 2px;
  border-radius: 999px;
}
nav.site-nav .nav-wishlist svg {
  width: 17px; height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linejoin: round;
  transition: fill 0.4s var(--ease), transform 0.4s var(--ease);
}
nav.site-nav .nav-wishlist:hover svg { transform: scale(1.08); }
nav.site-nav .nav-wishlist.has-items svg { fill: #B83A3A; stroke: #B83A3A; }
/* Badge: ALWAYS rendered, absolutely positioned over the heart's top-right notch.
   Show/hide is opacity+transform only, zero impact on surrounding layout. */
nav.site-nav .nav-wishlist .nav-wl-badge {
  position: absolute;
  top: 8px; right: 6px;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #B83A3A;
  color: #FAF6EE;
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-size: 8.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  pointer-events: none;
  white-space: nowrap;
  opacity: 0;
  transform: scale(0.55) translate3d(0,0,0);
  transform-origin: center center;
  transition: opacity 360ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 460ms cubic-bezier(0.34, 1.46, 0.64, 1);
  box-shadow: 0 0 0 2px var(--ink, #1F1A14), 0 2px 6px rgba(0,0,0,0.18);
}
nav.site-nav .nav-wishlist.has-items .nav-wl-badge {
  opacity: 1;
  transform: scale(1);
}
@media (prefers-reduced-motion: reduce) {
  nav.site-nav .nav-wishlist .nav-wl-badge {
    transition: opacity 200ms linear;
    transform: none;
  }
  nav.site-nav .nav-wishlist.has-items .nav-wl-badge { transform: none; }
}
@media (max-width: 540px) {
  nav.site-nav .nav-wishlist { width: 40px; height: 40px; }
}

/* Lock the entire nav-right shelf, children never shrink, internal changes never propagate. */
nav.site-nav .nav-right { contain: layout; }
nav.site-nav .nav-right > * { flex-shrink: 0; }

/* =================================================================
   GLOBAL TYPOGRAPHY, Newsreader + Inter
   Calm, humanist, architectural. No high-contrast fashion drama.
   Inspired by Loro Piana / Aman / Kinfolk / wine-estate editorial.
   ================================================================= */
:root {
  /* ---------- Brand palette (canonical) ---------- */
  /* Page-level <style> blocks may redeclare these; that's intentional for
     paint-budget. Promoted here so every page, including any new page that
     forgets to redeclare, has the palette available. */
  --bg:         #FAF6EE;
  --ink:        #1F1A14;
  --ink-soft:   #5C5247;
  --ink-warm:   #756859;
  --stone:      #C9BBA3;
  --gold:       #B8945A;
  --gold-light: #D4AC6A;
  --gold-deep:  #8A6228;
  --gold-soft:  rgba(184, 148, 90, 0.32);
  --cream:      #FAF6EE;
  --forest:     #15201A;

  /* ---------- Motion / spacing tokens ---------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --track-label:  0.36em;
  --track-button: 0.42em;

  /* ---------- Typography ---------- */
  --font-display: 'Newsreader', 'EB Garamond', 'Source Serif Pro', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
}

html {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Reserve scrollbar gutter so locking body overflow (menu/cart open) doesn't shift fixed nav */
  scrollbar-gutter: stable;
}

body {
  font-family: var(--font-body);
  font-feature-settings: "kern", "liga", "calt";
  letter-spacing: -0.003em;
}

/* All display serif gets Newsreader at a calm, near-text optical size.
   No SOFT axis (Newsreader doesn't carry one); only opsz + wght.
   Low opsz keeps contrast soft and humanist, opposite of fashion display. */
h1, h2, h3, h4,
.display, .huge, .large,
.pd-title, .ck-headline, .featured-title, .article-title, .legal-title,
.section-title, .section-headline, .fp-title, .wl-title, .wl-name,
.benefit-title, .card-title, .review-title, .product-title, .product-name,
.partner-info .label, .hero-headline,
.hero-title, .home-hero h1, .about-headline, .contact-headline,
.shop-headline, .pull-quote blockquote, .quicklinks a, .related-card .name,
.also-card .name, .recent-card .name,
.empty-state .es-title, .empty-state h3,
.faq-block h2, .reviews-summary h2,
.footer-tagline, .brand-strip span:not(.glyph) {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 24, "wght" 400;
  letter-spacing: -0.012em;
  line-height: 1.12;
  font-feature-settings: "kern", "liga", "calt";
}

/* Largest display, quieter still: low opsz, lighter weight, more breathing room */
.hero-headline, .display.huge, .legal-title, .ck-headline,
.featured-title, .article-title, .partners-hero .hero-headline,
.fp-title, .wl-title, .final-title,
.about-headline, .shop-headline, .contact-headline, .journal-headline,
h1[class*="title"], .hero-title {
  font-variation-settings: "opsz" 30, "wght" 360;
  letter-spacing: -0.014em;
  line-height: 1.08;
}

/* Mid-display (section heads) */
.section-title, .related-head h2, .also-head h2,
.recent-head h2, .ig-head h2, .reviews-summary h2,
.faq-block h2, .pd-title, .legal-content h2 {
  font-variation-settings: "opsz" 22, "wght" 400;
  letter-spacing: -0.010em;
  line-height: 1.14;
}

/* Smaller serif (chapter/card titles, menu items, pull quotes) */
.also-card .name, .related-card .name, .recent-card .name,
.review-title, .card-title, .featured-card .featured-title,
.partner-info .label, .fp-name, .wl-name,
.legal-content h3, .ck-step-title, .empty-state .es-title,
.pull-quote blockquote, .menu-items a,
.preview-card .card-name {
  font-variation-settings: "opsz" 18, "wght" 420;
  letter-spacing: -0.006em;
  line-height: 1.24;
}

/* Italics, straightforward italic, no calligraphic exaggeration.
   No weight reduction. Same opsz as parent (text-like, not display). */
em, i, blockquote em, cite {
  font-variation-settings: "opsz" 18, "wght" inherit;
  font-style: italic;
  letter-spacing: 0;
}

/* Body, plain Inter, restrained tracking, calm rhythm */
p, li, .body, .ch-body, .desc, .article-body p, .legal-content p,
.faq-block .faq-a p, .review-body, .form-intro, .product-desc, .pd-desc,
.legal-meta, .article-meta {
  font-feature-settings: "kern", "liga", "calt";
  letter-spacing: -0.003em;
  line-height: 1.7;
}

/* Long-form editorial paragraph (lede on article + legal lead), slightly more rhythmic */
.article-body p.lede, .legal-content p.lede {
  line-height: 1.55;
}

/* Uppercase labels, even tracking, no theatrics */
.eyebrow, [class*="eyebrow"], .nav-acquire, .menu-btn,
nav.site-nav .nav-cart, .nav-wishlist, .cta-ghost, .cta-primary,
.footer-col h4, .menu-items .sub, .menu-bottom, .footer-bottom,
.cookie-bar .cb-btn, .fp-chip span, .ac-chip, .ac-label,
.sort-trigger .sort-label, .sort-menu li, .filter-trigger .ft-label,
.pd-meta .tag, .product-eyebrow, .product-meta, .checkout-step-indicator,
.ck-eyebrow, .form-eyebrow, .form-bullets li,
.fp-eyebrow, .fp-num, .es-reset, .empty-state .es-desc {
  font-feature-settings: "kern", "tnum";
  font-weight: 500;
}

/* Tabular numerals for prices, totals, ratings */
.pd-price, .price, .cart-totals .total, .toolbar-left .t-count strong,
.fp-apply strong, .wl-price,
.review-head .stars, .rating-display .score, #cartTotal,
.wl-meta strong, .featured-meta,
.checkout-row .row-total, .row-amount {
  font-feature-settings: "tnum", "lnum", "kern";
}

::selection { background: rgba(184, 148, 90, 0.32); color: var(--ink, #1F1A14); }

@media (max-width: 600px) {
  /* Even calmer on small screens, give the type air */
  .hero-headline, .display.huge, .legal-title, .featured-title,
  .article-title, .ck-headline, .fp-title, .wl-title, .final-title,
  .section-title, .about-headline, .partners-hero .hero-headline {
    letter-spacing: -0.008em;
    line-height: 1.1;
  }
}

/* =================================================================
   MENU OVERLAY, Modern Mediterranean redesign (light · editorial)
   Was a dark, heavy "cinematic" overlay (whisky/nightclub feel).
   Now: a calm, airy, hospitality-grade fullscreen menu, warm cream
   atmosphere, soft natural light, stone neutrals, restrained gold.
   Recolors all content from cream→ink and softens the composition.
   `body .menu-overlay …` (≥0,1,1) beats the per-page inline 0,1,0 rules.
   Typography (grotesk, no-italic) is handled by the global type system.
   ================================================================= */

/* --- Surface: warm, airy cream gradient (no more deep charcoal) --- */
body .menu-overlay {
  background:
    linear-gradient(168deg, #FBF7EF 0%, #F4ECDD 54%, #ECE2CF 100%);
  color: var(--ink, #1F1A14);
  isolation: isolate;
}

/* Atmospheric natural light: soft Mediterranean sun from the upper-right,
   a faint warm-gold bloom, and a quiet olive shade pooling lower-left.
   Replaces the dark gold-on-black radials of the old design. */
body .menu-overlay::before {
  content: '';
  position: absolute; inset: 0;
  z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 95% at 84% 6%,  rgba(255, 249, 235, 0.95) 0%, rgba(255,249,235,0) 46%),
    radial-gradient(85%  78% at 90% 16%, rgba(212, 172, 106, 0.15) 0%, rgba(212,172,106,0) 52%),
    radial-gradient(125% 115% at 6% 102%, rgba(124, 118, 80, 0.11) 0%, rgba(124,118,80,0) 56%);
}

/* Injected layers (.menu-bg-img / .menu-bg-scrim) repurposed as a soft,
   slow-drifting light haze instead of the old dark honey macro photo. */
body .menu-bg-img {
  position: absolute;
  inset: -6%;
  z-index: 0;
  background-image: none;
  background:
    radial-gradient(58% 54% at 26% 28%, rgba(255, 253, 247, 0.72), transparent 62%),
    radial-gradient(52% 50% at 74% 72%, rgba(234, 223, 202, 0.55), transparent 64%);
  opacity: 0.9;
  filter: none;
  mix-blend-mode: normal;
  transform: scale(1.04);
  pointer-events: none;
  will-change: transform, opacity;
  animation: menuBgDrift 38s cubic-bezier(0.42, 0, 0.58, 1) infinite alternate;
}
body .menu-bg-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(236, 226, 207, 0.20) 100%);
}
/* Pull all content above the layered atmosphere */
body .menu-overlay > *:not(.menu-bg-img):not(.menu-bg-scrim) {
  position: relative;
  z-index: 2;
}
body .menu-overlay.open .menu-bg-img { animation-duration: 42s; }

@keyframes menuBgDrift {
  0%   { transform: translate3d(-1%, -1.2%, 0) scale(1.04); }
  35%  { transform: translate3d(1.2%, 0.6%, 0) scale(1.07); }
  70%  { transform: translate3d(-0.5%, 1.2%, 0) scale(1.05); }
  100% { transform: translate3d(0.7%, -0.4%, 0) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  body .menu-bg-img { animation: none; transform: scale(1.03); }
}

/* ---------- Content recolour + composition (light, editorial) ---------- */

/* Top bar: brand mark + close on warm ink, generous breathing room */
body .menu-overlay .menu-top { padding-bottom: clamp(5vh, 7vh, 9vh); }
body .menu-overlay .nav-brand,
body .menu-overlay .logo-svg { color: var(--ink, #1F1A14); }
body .menu-overlay .menu-close { color: var(--ink, #1F1A14); opacity: 0.62; }
body .menu-overlay .menu-close:hover { opacity: 1; }

/* Layout: a touch more air, calmer column balance */
body .menu-overlay .menu-content { gap: clamp(6%, 7%, 9%); align-items: center; }

/* Index rows, softer hairline separators, more vertical rhythm */
body .menu-overlay .menu-items li {
  border-bottom: 1px solid rgba(42, 35, 27, 0.10);
  padding: clamp(18px, 2.4vh, 30px) 0;
  gap: clamp(20px, 2.4vw, 34px);
}
body .menu-overlay .menu-items li:last-child { border-bottom: none; }

/* Numerals: quiet, modern, gold, not the old italic serif */
body .menu-overlay .menu-items .roman {
  color: var(--gold-deep, #8A6228);
  font-size: 11px;
  letter-spacing: 0.18em;
  opacity: 0.8;
}

/* Links: less oversized, confident, ink with a calm gold hover */
body .menu-overlay .menu-items a {
  color: var(--ink, #1F1A14);
  font-size: clamp(30px, 3.4vw, 54px);
  line-height: 1.06;
  letter-spacing: -0.022em;
}
body .menu-overlay .menu-items a em { color: var(--ink-warm, #756859); }
body .menu-overlay .menu-items a::after { background: var(--gold-deep, #8A6228); bottom: -6px; }
body .menu-overlay .menu-items a:hover { color: var(--gold-deep, #8A6228); }

/* Sub-labels: soft stone, restrained */
body .menu-overlay .menu-items .sub { color: var(--ink-soft, #5C5247); opacity: 0.78; }

/* Active page: warm gold-deep (readable on light) instead of pale gold-light */
body .menu-overlay .menu-items a.current { color: var(--gold-deep, #8A6228); }
body .menu-overlay .menu-items a.current::after { background: var(--gold-deep, #8A6228); }
body .menu-overlay .menu-items li.current-item .roman,
body .menu-overlay .menu-items li.current-item .sub { color: var(--gold-deep, #8A6228); }

/* Right column: a quiet, curated editorial note */
body .menu-overlay .menu-side {
  padding-left: clamp(5%, 6%, 7%);
  border-left: 1px solid rgba(42, 35, 27, 0.10);
}
body .menu-overlay .menu-side h5 {
  color: var(--gold-deep, #8A6228);
  letter-spacing: 0.34em;
  opacity: 0.9;
}
body .menu-overlay .menu-side p {
  color: var(--ink, #1F1A14);
  opacity: 0.82;
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: -0.006em;
}
body .menu-overlay .menu-side .contact { color: var(--ink-soft, #5C5247); }
body .menu-overlay .menu-side .contact a {
  color: var(--ink, #1F1A14);
  border-bottom-color: rgba(42, 35, 27, 0.22);
}
body .menu-overlay .menu-side .contact a:hover { color: var(--gold-deep, #8A6228); }

/* Footer row: quiet ink, softer separators */
body .menu-overlay .menu-bottom {
  color: var(--ink-soft, #5C5247);
  opacity: 0.85;
  border-top: 1px solid rgba(42, 35, 27, 0.08);
  padding-top: clamp(2.4vh, 3vh, 4vh);
  margin-top: clamp(1vh, 2vh, 3vh);
}
body .menu-overlay .menu-bottom .social a { color: var(--ink-soft, #5C5247); }
body .menu-overlay .menu-bottom .social a:hover { color: var(--gold-deep, #8A6228); }

/* Mobile: side panel stacks below, drop the left rule, use a top hairline */
@media (max-width: 900px) {
  body .menu-overlay .menu-side {
    padding-left: 0;
    border-left: none;
    border-top: 1px solid rgba(42, 35, 27, 0.10);
  }
}

/* =================================================================
   POLISH PASS, 17 no-account improvements
   ================================================================= */

/* 1. Smart sticky nav, hide on scroll down, show on scroll up */
nav.site-nav {
  transform: translateY(0);
  transition: transform 0.5s cubic-bezier(0.32, 0.72, 0.24, 1), background 0.6s var(--ease, cubic-bezier(0.22, 1, 0.36, 1)), color 0.6s var(--ease), border-color 0.6s var(--ease);
}
nav.site-nav.nav-hidden { transform: translateY(-110%); }

/* 2. Active page indicator in menu overlay */
.menu-overlay .menu-items a.current { color: var(--gold-light, #D4AC6A); }
.menu-overlay .menu-items a.current::after {
  width: 100% !important;
  background: var(--gold-light, #D4AC6A);
}
.menu-overlay .menu-items li.current-item .roman {
  color: var(--gold-light, #D4AC6A);
  opacity: 1;
}
.menu-overlay .menu-items li.current-item .sub {
  color: var(--gold-light, #D4AC6A);
  opacity: 0.9;
}

/* 3. Scroll progress bar, thin gold line at top */
.hd-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, var(--gold-light, #D4AC6A), var(--gold, #B8945A));
  transform: scaleX(0);
  transform-origin: 0 50%;
  z-index: 140;
  pointer-events: none;
  transition: transform 0.1s linear, opacity 0.4s ease;
  box-shadow: 0 0 8px rgba(212, 172, 106, 0.4);
}

/* 4. Scroll-to-top button (bottom-left, mirrors WhatsApp on right) */
.hd-stt {
  position: fixed;
  bottom: 22px; left: 22px;
  z-index: 130;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(14, 11, 8, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--gold-light, #D4AC6A);
  border: 1px solid rgba(212, 172, 106, 0.32);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: opacity 0.45s cubic-bezier(0.32, 0.72, 0.24, 1),
              transform 0.45s cubic-bezier(0.32, 0.72, 0.24, 1),
              background 0.4s ease, border-color 0.4s ease;
}
.hd-stt.ready { opacity: 1; transform: translateY(0); pointer-events: auto; }
.hd-stt:hover { background: rgba(14, 11, 8, 0.96); border-color: rgba(212, 172, 106, 0.62); transform: translateY(-2px); }
.hd-stt:focus-visible { outline: 2px solid var(--gold-light, #D4AC6A); outline-offset: 3px; }
.hd-stt svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; }
@media (max-width: 600px) {
  .hd-stt { bottom: 18px; left: 18px; width: 40px; height: 40px; }
}

/* 5. Rich add-to-cart toast (own element, sits alongside existing .cart-toast) */
#hdRichToast {
  position: fixed;
  bottom: 28px; left: 50%;
  transform: translateX(-50%) translateY(120%);
  z-index: 170;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px 12px 14px;
  padding-right: 14px;
  background: rgba(14, 11, 8, 0.96);
  color: var(--cream, #FAF6EE);
  border: 1px solid rgba(212, 172, 106, 0.42);
  border-radius: 999px;
  max-width: 460px;
  box-shadow: 0 24px 50px rgba(0,0,0,0.36), 0 2px 10px rgba(212, 172, 106, 0.25);
  opacity: 0;
  transition: transform 0.55s cubic-bezier(0.32, 0.72, 0.24, 1), opacity 0.45s ease;
  pointer-events: none;
}
#hdRichToast.show { transform: translateX(-50%) translateY(0); opacity: 1; pointer-events: auto; }
#hdRichToast .check {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--gold-light, #D4AC6A);
  color: #0E0B08;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
#hdRichToast.show .check {
  animation: hdToastCheckPop 0.55s cubic-bezier(0.32, 0.72, 0.24, 1);
}
@keyframes hdToastCheckPop {
  0% { transform: scale(0.4); }
  60% { transform: scale(1.12); }
  100% { transform: scale(1); }
}
#hdRichToast .toast-text {
  display: flex; flex-direction: column; gap: 1px;
  font-family: 'Inter', sans-serif;
}
#hdRichToast .toast-title {
  font-size: 8.5px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--gold-light, #D4AC6A);
  font-weight: 500;
  padding-left: 0.36em;
}
#hdRichToast .toast-name {
  font-family: 'Newsreader', serif;
  font-size: 15px;
  color: var(--cream, #FAF6EE);
  font-weight: 400;
  font-variation-settings: "opsz" 18;
}
#hdRichToast .toast-cta {
  margin-left: 8px;
  font-size: 9px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--gold-light, #D4AC6A);
  text-decoration: none;
  padding: 8px 14px;
  padding-left: calc(14px + 0.36em);
  border: 1px solid rgba(212, 172, 106, 0.42);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  font-weight: 500;
  font-family: 'Inter', sans-serif;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
#hdRichToast .toast-cta:hover { background: var(--gold-light, #D4AC6A); color: var(--ink, #1F1A14); }
@media (max-width: 540px) {
  #hdRichToast {
    left: 12px; right: 12px;
    transform: translateY(120%);
    max-width: none;
    flex-wrap: wrap;
    padding: 12px 14px;
  }
  #hdRichToast.show { transform: translateY(0); }
}

/* 7. Free-shipping celebration */
@keyframes hdFsFlash {
  0% { background: rgba(184, 148, 90, 0.04); }
  35% { background: rgba(212, 172, 106, 0.28); box-shadow: inset 0 0 0 1px rgba(212, 172, 106, 0.4); }
  100% { background: rgba(184, 148, 90, 0.04); }
}
.cart-progress.fs-celebrate { animation: hdFsFlash 1.2s cubic-bezier(0.32, 0.72, 0.24, 1); }
.cart-progress .label .remaining.unlocked {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cart-progress .label .remaining.unlocked::before {
  content: '';
  display: inline-block;
  width: 14px; height: 14px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M2 7L5 10L12 3' stroke='%23D4AC6A' stroke-width='1.7' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  vertical-align: middle;
}

/* 9. Skeleton loading on shop grid */
@keyframes hdSkeletonShimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.hd-skeleton-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px;
  border: 1px solid rgba(184, 148, 90, 0.12);
  border-radius: 3px;
  background: rgba(255, 252, 246, 0.5);
}
.hd-skeleton-card .sk-image {
  aspect-ratio: 4 / 5;
  background: rgba(184, 148, 90, 0.10);
  border-radius: 3px;
  position: relative;
  overflow: hidden;
}
.hd-skeleton-card .sk-line {
  height: 14px;
  background: rgba(184, 148, 90, 0.10);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}
.hd-skeleton-card .sk-line.short { width: 40%; height: 10px; }
.hd-skeleton-card .sk-line.tall { height: 18px; }
.hd-skeleton-card .sk-image::after,
.hd-skeleton-card .sk-line::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(212, 172, 106, 0.2) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: hdSkeletonShimmer 1.6s infinite;
}

/* 10. Page transition fade-in (loads-first opacity, removed once "loaded") */
body { transition: opacity 280ms ease-out; }
body.hd-loading { opacity: 0; }
body.hd-loaded { opacity: 1; }

/* 11. Print stylesheet */
@media print {
  nav.site-nav, .menu-overlay, .cart-drawer, .hd-concierge-fab, .hd-concierge, .hd-stt, .hd-progress,
  .cookie-bar, .nav-wishlist, .nav-cart, .filter-trigger, .sort-dropdown,
  .menu-btn, .lang-toggle, .nav-acquire, .scroll-hint, .hero, .video-stage,
  .ig-strip, .press-strip, .partners-hero, .partners-section, .also-section,
  .recent-section, .reviews-section, .related-products, .related-articles,
  .filter-panel, .shop-toolbar, .active-chips, .checkout-step-indicator,
  #hdRichToast { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  body * { box-shadow: none !important; text-shadow: none !important; filter: none !important; backdrop-filter: none !important; }
  .legal-body, .article-body, .article-wrap, .article-wide { grid-template-columns: 1fr !important; padding: 0 !important; max-width: none !important; }
  .legal-toc { display: none !important; }
  .legal-content { max-width: none !important; }
  .legal-content a, .article-body a { color: #000 !important; text-decoration: underline; }
  .legal-content h2, .legal-content h3, .article-body h2, .article-body h3 { color: #000 !important; page-break-after: avoid; break-after: avoid; }
  .legal-content p, .article-body p { font-size: 11pt; line-height: 1.55; orphans: 3; widows: 3; color: #000 !important; }
  .template-warn { border: 1px solid #999 !important; background: #f5f5f5 !important; color: #000 !important; page-break-inside: avoid; }
  footer.site-footer { display: none !important; }
  .legal-hero, .article-hero { padding: 0 0 16pt !important; }
  .legal-title, .article-title { font-size: 24pt !important; color: #000 !important; page-break-after: avoid; }
  .legal-eyebrow, .article-eyebrow { font-size: 9pt !important; color: #666 !important; }
  .legal-meta, .article-meta { color: #444 !important; border-color: #ccc !important; }
  .legal-content table { border-collapse: collapse !important; }
  .legal-content table th, .legal-content table td { border: 1px solid #ccc !important; color: #000 !important; padding: 6pt !important; }
  @page { margin: 18mm; }
}

/* 13 & 14. Cart drawer additions: continue shopping + empty suggestions */
.cart-continue-link {
  display: block;
  text-align: center;
  margin-top: 14px;
  padding: 10px 4px;
  font-family: 'Inter', sans-serif;
  font-size: 9.5px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(245, 239, 228, 0.65);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.4s ease, border-color 0.4s ease;
  padding-left: 0.36em;
}
.cart-continue-link:hover {
  color: var(--gold-light, #D4AC6A);
  border-bottom-color: rgba(212, 172, 106, 0.4);
}
.cart-empty-suggestions { display: none; margin-top: 28px; padding-top: 24px; border-top: 1px solid rgba(245, 239, 228, 0.08); }
.cart-empty-suggestions.visible { display: block; }
.cart-empty-suggestions .ces-label {
  font-size: 9px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--gold, #B8945A);
  font-weight: 500;
  margin-bottom: 16px;
  padding-left: 0.36em;
  text-align: center;
}
.cart-empty-suggestions .ces-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.cart-empty-suggestions .ces-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 14px 10px;
  background: rgba(255, 250, 240, 0.05);
  border: 1px solid rgba(245, 239, 228, 0.1);
  border-radius: 3px;
  text-decoration: none;
  color: var(--cream, #FAF6EE);
  transition: border-color 0.3s ease, transform 0.4s ease, background 0.3s ease;
}
.cart-empty-suggestions .ces-card:hover {
  border-color: rgba(212, 172, 106, 0.4);
  background: rgba(212, 172, 106, 0.06);
  transform: translateY(-2px);
}
.cart-empty-suggestions .ces-name {
  font-family: 'Newsreader', serif;
  font-size: 14px;
  margin-bottom: 4px;
  font-variation-settings: "opsz" 18;
  color: var(--cream, #FAF6EE);
}
.cart-empty-suggestions .ces-price {
  font-size: 10px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--gold-light, #D4AC6A);
  font-weight: 500;
  padding-left: 0.36em;
}

/* 15. Variant price diff, retired: pricing no longer shown inside buttons */
.variant-options label .price-diff { display: none !important; }
.variant-options input:checked + label .price-diff { color: var(--gold-light, #D4AC6A); opacity: 0.75; }

/* 16. Sparkle moment */
.hd-sparkle {
  position: fixed;
  pointer-events: none;
  z-index: 250;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle, #F5DEA0 0%, #D4AC6A 50%, transparent 100%);
  box-shadow: 0 0 12px rgba(212, 172, 106, 0.85);
  animation: hdSparkle 900ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes hdSparkle {
  0% { transform: translate(0, 0) scale(0.4); opacity: 0; }
  18% { opacity: 1; }
  100% { transform: translate(var(--dx, 0), var(--dy, -50px)) scale(0.2); opacity: 0; }
}

/* 17. Custom select wrap (added by JS to native <select> elements) */
.hd-select-wrap {
  position: relative;
  display: inline-block;
  width: 100%;
}
.hd-select-wrap select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: none !important;
  padding-right: 32px !important;
  cursor: pointer;
}
.hd-select-wrap::after {
  content: '';
  position: absolute;
  right: 10px;
  top: 50%;
  width: 8px; height: 8px;
  border-right: 1.4px solid var(--gold-deep, #8A6228);
  border-bottom: 1.4px solid var(--gold-deep, #8A6228);
  transform: translateY(-72%) rotate(45deg);
  pointer-events: none;
  transition: transform 0.3s ease;
}
.hd-select-wrap:focus-within::after { transform: translateY(-32%) rotate(-135deg); }

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce) {
  nav.site-nav, .hd-stt, #hdRichToast, .hd-skeleton-card .sk-image::after,
  .hd-skeleton-card .sk-line::after, .hd-sparkle {
    transition: none !important;
    animation: none !important;
  }
  body.hd-loaded { transition: none !important; }
}

/* =================================================================
   6. QUICK-VIEW MODAL, peek-at-product without leaving shop
   ================================================================= */
.qv-trigger {
  position: absolute;
  bottom: 14px; left: 14px; right: 14px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 38px;
  padding: 0 18px;
  padding-left: calc(18px + 0.36em);
  background: rgba(14, 11, 8, 0.86);
  color: var(--cream, #FAF6EE);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(212, 172, 106, 0.32);
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s var(--ease, cubic-bezier(0.22, 1, 0.36, 1)), transform 0.4s var(--ease), background 0.3s ease;
}
.p-card:hover .qv-trigger,
.p-card:focus-within .qv-trigger { opacity: 1; transform: translateY(0); }
.qv-trigger:hover { background: rgba(14, 11, 8, 0.96); border-color: rgba(212, 172, 106, 0.6); }
.qv-trigger svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.6; }
@media (hover: none) {
  /* On touch devices show the trigger always */
  .qv-trigger { opacity: 1; transform: none; }
}

.qv-overlay {
  position: fixed;
  inset: 0;
  z-index: 220;
  background: rgba(14, 11, 8, 0.62);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s var(--ease, cubic-bezier(0.22, 1, 0.36, 1));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.qv-overlay.open { opacity: 1; pointer-events: auto; }

.qv-panel {
  position: relative;
  width: min(880px, 96vw);
  max-height: 92dvh;
  background: var(--bg, #F5EFE4);
  border: 1px solid rgba(184, 148, 90, 0.22);
  border-radius: 3px;
  box-shadow:
    0 60px 120px rgba(0, 0, 0, 0.32),
    0 12px 32px rgba(0, 0, 0, 0.14);
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  overflow: hidden;
  transform: scale(0.96) translateY(12px);
  opacity: 0;
  transition: transform 0.55s cubic-bezier(0.32, 0.72, 0.24, 1), opacity 0.45s ease;
}
.qv-overlay.open .qv-panel { transform: scale(1) translateY(0); opacity: 1; }
.qv-panel::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold, #B8945A), transparent);
  opacity: 0.45;
  z-index: 2;
}

.qv-image {
  position: relative;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(212, 172, 106, 0.42), transparent 60%),
    linear-gradient(160deg, var(--bg-deep, #EDE3D2), var(--stone, #C9BBA3));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6%;
}
.qv-image img {
  max-width: 70%;
  max-height: 80%;
  object-fit: contain;
  filter: drop-shadow(0 30px 40px rgba(0,0,0,0.22)) drop-shadow(0 10px 20px rgba(0,0,0,0.12));
}
.qv-image .qv-edition {
  position: absolute;
  top: 22px; left: 22px;
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--ink-soft, #5C5247);
  font-weight: 500;
  padding-left: 0.42em;
}

.qv-content {
  padding: 56px 48px 48px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  position: relative;
}
.qv-close {
  position: absolute;
  top: 18px; right: 18px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(184, 148, 90, 0.08);
  border: 1px solid rgba(184, 148, 90, 0.22);
  color: var(--ink, #1F1A14);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease, transform 0.4s ease;
}
.qv-close:hover { background: rgba(184, 148, 90, 0.18); transform: rotate(90deg); }
.qv-close::before, .qv-close::after {
  content: '';
  position: absolute;
  width: 13px; height: 1px;
  background: currentColor;
}
.qv-close::before { transform: rotate(45deg); }
.qv-close::after { transform: rotate(-45deg); }

.qv-content .qv-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 9.5px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--gold-deep, #8A6228);
  font-weight: 500;
  margin-bottom: 18px;
  padding-left: 0.42em;
}
.qv-content h2 {
  font-family: 'Newsreader', serif;
  font-weight: 380;
  font-size: clamp(28px, 3.4vw, 38px);
  font-variation-settings: "opsz" 24, "wght" 400;
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: var(--ink, #1F1A14);
  margin-bottom: 6px;
}
.qv-content .qv-region {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 16px;
  color: var(--ink-soft, #5C5247);
  margin-bottom: 28px;
}
.qv-content .qv-notes {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink, #1F1A14);
  margin-bottom: 24px;
  max-width: 36ch;
}
.qv-content .qv-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 28px;
}
.qv-content .qv-badge {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--gold-deep, #8A6228);
  padding: 6px 12px;
  padding-left: calc(12px + 0.36em);
  background: rgba(184, 148, 90, 0.08);
  border: 1px solid rgba(184, 148, 90, 0.22);
  border-radius: 999px;
}
.qv-content .qv-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 18px;
  padding: 20px 0;
  margin-bottom: 28px;
  border-top: 1px solid rgba(26, 22, 18, 0.1);
  border-bottom: 1px solid rgba(26, 22, 18, 0.1);
}
.qv-content .qv-meta .lbl {
  font-family: 'Inter', sans-serif;
  font-size: 8.5px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--ink-soft, #5C5247);
  font-weight: 500;
  padding-left: 0.36em;
  margin-bottom: 2px;
}
.qv-content .qv-meta .val {
  font-family: 'Newsreader', serif;
  font-size: 15px;
  color: var(--ink, #1F1A14);
  font-variation-settings: "opsz" 18;
}
.qv-content .qv-price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 28px;
}
.qv-content .qv-price {
  font-family: 'Newsreader', serif;
  font-size: 30px;
  color: var(--ink, #1F1A14);
  letter-spacing: -0.014em;
  font-variation-settings: "opsz" 30, "wght" 420;
  font-feature-settings: "tnum", "lnum";
}
.qv-content .qv-price-sub {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-soft, #5C5247);
  font-weight: 500;
  padding-left: 0.32em;
}
.qv-content .qv-actions {
  display: flex;
  gap: 10px;
  margin-top: auto;
  align-items: stretch;
}
.qv-content .qv-add { flex: 1; }
.qv-content .qv-view {
  flex: 0 0 auto;
}

@media (max-width: 900px) {
  .qv-overlay { padding: 0; align-items: flex-end; }
  .qv-panel {
    grid-template-columns: 1fr;
    grid-template-rows: 38vh auto;
    width: 100%;
    max-height: 96dvh;
    border-radius: 18px 18px 0 0;
    transform: translateY(100%);
  }
  .qv-overlay.open .qv-panel { transform: translateY(0); }
  .qv-content { padding: 32px 24px 24px; }
  .qv-content h2 { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .qv-overlay, .qv-panel { transition: opacity 0.2s linear; transform: none !important; }
}

/* =================================================================
   MENU OVERLAY, snappier open/close timing
   `body` prefix gives 0,1,1 specificity to beat per-page inline 0,1,0 rules.
   ================================================================= */
body .menu-overlay {
  transition: opacity 0.32s cubic-bezier(0.32, 0.72, 0.24, 1);
}
body .menu-overlay .menu-items li {
  transition: opacity 0.42s cubic-bezier(0.32, 0.72, 0.24, 1),
              transform 0.42s cubic-bezier(0.32, 0.72, 0.24, 1);
}
body .menu-overlay.open .menu-items li:nth-child(1) { transition-delay: 0.04s; }
body .menu-overlay.open .menu-items li:nth-child(2) { transition-delay: 0.08s; }
body .menu-overlay.open .menu-items li:nth-child(3) { transition-delay: 0.12s; }
body .menu-overlay.open .menu-items li:nth-child(4) { transition-delay: 0.16s; }
body .menu-overlay.open .menu-items li:nth-child(5) { transition-delay: 0.20s; }
body .menu-overlay.open .menu-items li:nth-child(6) { transition-delay: 0.24s; }
body .menu-overlay .menu-side {
  transition: opacity 0.45s cubic-bezier(0.32, 0.72, 0.24, 1) 0.18s,
              transform 0.45s cubic-bezier(0.32, 0.72, 0.24, 1) 0.18s;
}
body .menu-overlay .menu-bg-img { transition: opacity 0.5s ease; }

/* =================================================================
   18. Hover-image-swap (activated when card has data-alt-src + .card-photo-alt)
   ================================================================= */
.p-card .jar-wrap { position: relative; }
.p-card .card-photo-alt {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(1.02);
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  filter: drop-shadow(0 30px 40px rgba(0,0,0,0.18));
  z-index: 2;
}
.p-card:hover .card-photo-alt { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.p-card:hover .card-photo { opacity: 0.18; }

/* When card has no alt-src, no opacity dimming on primary */
.p-card:not([data-alt-src]):hover .card-photo { opacity: 1; }

/* =================================================================
   THE CREATIVITY LAB, luxury footer signature
   Newsreader medium, hand-set tracking, polished gold gradient
   that catches the eye without screaming. Underline lights up
   centre-out on hover. No italic, the brand mark stands upright.
   ================================================================= */
.footer-credit {
  margin-top: 18px;
  padding-top: 22px;
  border-top: 1px solid rgba(212, 172, 106, 0.12);
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.footer-credit__by {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(250, 246, 238, 0.42);
}
.footer-credit__by::before,
.footer-credit__by::after {
  content: '';
  display: inline-block;
  width: 28px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 172, 106, 0.45));
  vertical-align: middle;
}
.footer-credit__by::after {
  background: linear-gradient(90deg, rgba(212, 172, 106, 0.45), transparent);
}
.tcl-signature {
  position: relative;
  display: inline-block;
  font-family: 'Newsreader', 'Inter', serif;
  font-variation-settings: 'opsz' 32, 'wght' 500;
  font-weight: 500;
  font-style: normal !important;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-decoration: none !important;
  /* Solid brand gold, no gradient-clip on text. Importance is carried by
     weight, tracking, and the centre-out underline beneath. */
  color: #D4AC6A;
  transition: color 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.tcl-signature::after {
  content: '';
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -3px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #C4A67A 50%, transparent);
  transform: scaleX(0);
  transform-origin: center;
  opacity: 0.85;
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover) {
  .tcl-signature:hover {
    color: #E8C982;
  }
  .tcl-signature:hover::after { transform: scaleX(1); }
}
.tcl-signature:focus-visible {
  outline: none;
}
.tcl-signature:focus-visible::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .tcl-signature,
  .tcl-signature::after { transition: none; }
}

/* Footer-bottom: stack the credit beneath copyright on small screens */
.site-footer .footer-bottom {
  flex-wrap: wrap;
}
.site-footer .footer-bottom .footer-credit {
  flex: 1 0 100%;
}

/* =================================================================
   CINEMATIC INTRO, first-visit overture
   Dark olive-green field with wave-pattern, breathing gold wordmark,
   slow light sweep, soft vignette, film grain. Plays once per session.
   ================================================================= */
:root {
  --hd-intro-green-deep: #0A1F17;
  --hd-intro-green:      #0F2A1F;
  --hd-intro-green-soft: #163828;
  --hd-intro-gold:       #C99948;
  --hd-intro-gold-soft:  #E8C982;
}

/* Pre-paint shield, runs from <head> inline script, before shared.js
   parses. Eliminates any flash of homepage before the intro covers it. */
html.hd-intro-pending { background: var(--hd-intro-green); }
html.hd-intro-pending body { opacity: 0; }
html.hd-intro-pending::before {
  content: '';
  position: fixed;
  inset: 0;
  background: var(--hd-intro-green);
  z-index: 9998;
  pointer-events: none;
}
html.hd-intro-active body { opacity: 0; }
html.hd-intro-done body {
  opacity: 1;
  transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* The pre-paint shield is removed by JS once the real intro is mounted */

.hd-intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background:
    radial-gradient(120% 90% at 50% 45%, var(--hd-intro-green-soft) 0%, var(--hd-intro-green) 55%, var(--hd-intro-green-deep) 100%);
  overflow: hidden;
  isolation: isolate;
  opacity: 1;
  /* Smooth cinematic cross-fade out (more robust across devices than a
     clip-path curtain, and never leaves a hard edge / black jump). The
     hero video is already playing underneath, so the reveal is seamless. */
  transition: opacity 1100ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity;
  pointer-events: auto;
  cursor: pointer;
}
.hd-intro.exiting {
  opacity: 0;
  pointer-events: none;
}

/* ---- Layer 1: wave pattern (scallop arches, brand-derived) ---- */
.hd-intro__pattern {
  position: absolute;
  inset: -8%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='90' viewBox='0 0 220 90'><g fill='none' stroke='%23C99948' stroke-width='1' stroke-linecap='round' opacity='0.45'><path d='M-10 70 Q 27.5 30 65 70 T 140 70 T 215 70'/><path d='M-10 85 Q 27.5 45 65 85 T 140 85 T 215 85' opacity='0.55'/></g></svg>");
  background-size: 220px 90px;
  background-repeat: repeat;
  opacity: 0.16;
  mix-blend-mode: screen;
  animation: hdIntroDrift 22s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes hdIntroDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1.0); }
  100% { transform: translate3d(-3.5%, -1.5%, 0) scale(1.04); }
}

/* ---- Layer 2: warm radial spotlight behind the logo ---- */
.hd-intro__halo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80vmin;
  height: 80vmin;
  transform: translate(-50%, -50%) scale(0.92);
  background: radial-gradient(closest-side,
    rgba(232, 201, 130, 0.42) 0%,
    rgba(201, 153, 72, 0.22) 32%,
    rgba(201, 153, 72, 0.06) 60%,
    rgba(201, 153, 72, 0) 80%);
  filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  will-change: opacity, transform;
  animation:
    hdIntroHaloIn 1400ms cubic-bezier(0.22, 1, 0.36, 1) 200ms forwards,
    hdIntroBreath 5.2s ease-in-out 1600ms infinite;
}
@keyframes hdIntroHaloIn {
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes hdIntroBreath {
  0%, 100% { opacity: 0.85; transform: translate(-50%, -50%) scale(1.00); }
  50%      { opacity: 1.00; transform: translate(-50%, -50%) scale(1.06); }
}

/* ---- Layer 3: slow diagonal light sweep across the scene ---- */
.hd-intro__sweep {
  position: absolute;
  top: -50%;
  left: -60%;
  width: 60%;
  height: 200%;
  transform: rotate(14deg) translateX(0);
  background: linear-gradient(90deg,
    rgba(255, 240, 210, 0) 0%,
    rgba(255, 240, 210, 0.06) 38%,
    rgba(255, 240, 210, 0.14) 50%,
    rgba(255, 240, 210, 0.06) 62%,
    rgba(255, 240, 210, 0) 100%);
  mix-blend-mode: screen;
  pointer-events: none;
  opacity: 0;
  animation: hdIntroSweep 3.4s cubic-bezier(0.4, 0, 0.4, 1) 600ms 1 forwards;
}
@keyframes hdIntroSweep {
  0%   { opacity: 0; transform: rotate(14deg) translateX(0); }
  18%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: rotate(14deg) translateX(260vw); }
}

/* ---- Layer 4: soft vignette ---- */
.hd-intro__vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 50%,
    transparent 35%,
    rgba(10, 31, 23, 0.4) 80%,
    rgba(6, 18, 13, 0.85) 100%);
}

/* ---- Layer 5: film grain ---- */
.hd-intro__grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.22;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.85  0 0 0 0 0.72  0 0 0 0 0.42  0 0 0 0.10 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ---- Stage: contains the wordmark + tagline + monogram ---- */
.hd-intro__stage {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(640px, 78vmin);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  text-align: center;
  pointer-events: none;
  z-index: 2;
}

/* The hairline ornament above the wordmark */
.hd-intro__rule {
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hd-intro-gold-soft), transparent);
  opacity: 0;
  will-change: opacity, width;
  animation: hdIntroRule 1400ms cubic-bezier(0.22, 1, 0.36, 1) 350ms forwards;
}
@keyframes hdIntroRule {
  0%   { width: 0;   opacity: 0; }
  60%  {              opacity: 0.7; }
  100% { width: 38%; opacity: 0.85; }
}
.hd-intro__rule--bot { animation-delay: 1100ms; }

/* The wordmark itself */
.hd-intro__mark {
  width: 100%;
  height: auto;
  aspect-ratio: 260 / 100;
  opacity: 0;
  transform: translate3d(0, 8px, 0) scale(0.94);
  /* Soft ivory wordmark with a quiet glow, high contrast on dark footage */
  filter: brightness(0) invert(0.97)
          drop-shadow(0 0 24px rgba(255, 248, 233, 0.45))
          drop-shadow(0 0 72px rgba(232, 201, 130, 0.26));
  will-change: opacity, transform;
  animation:
    hdIntroMarkIn 1500ms cubic-bezier(0.22, 1, 0.36, 1) 250ms forwards,
    hdIntroFloat 6s ease-in-out 1800ms infinite;
}
@keyframes hdIntroMarkIn {
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes hdIntroFloat {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(0, -3px, 0) scale(1.005); }
}

/* The tagline that fades in last */
.hd-intro__tagline {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  letter-spacing: 0.5em;
  font-weight: 400;
  text-transform: uppercase;
  color: rgba(247, 240, 228, 0.74);
  margin: 4px 0 0 0.5em;
  opacity: 0;
  transform: translate3d(0, 4px, 0);
  will-change: opacity, transform;
  animation: hdIntroTagIn 900ms cubic-bezier(0.22, 1, 0.36, 1) 1300ms forwards;
}
@keyframes hdIntroTagIn {
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Logo exit, scales down + fades before the curtain closes */
.hd-intro.exiting .hd-intro__stage {
  transition: opacity 480ms cubic-bezier(0.4, 0, 0.2, 1), transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.92);
}
.hd-intro.exiting .hd-intro__halo,
.hd-intro.exiting .hd-intro__sweep,
.hd-intro.exiting .hd-intro__grain {
  transition: opacity 380ms ease-out;
  opacity: 0;
}

/* Reduced motion: silent fade only */
@media (prefers-reduced-motion: reduce) {
  .hd-intro__pattern,
  .hd-intro__halo,
  .hd-intro__sweep,
  .hd-intro__mark { animation: none; }
  .hd-intro__halo { opacity: 0.85; }
  .hd-intro__mark { opacity: 1; transform: none; }
  .hd-intro__rule { width: 38%; opacity: 0.7; animation: none; }
  .hd-intro__tagline { opacity: 1; transform: none; animation: none; }
  .hd-intro { transition: opacity 600ms ease-out; }
  .hd-intro.exiting { opacity: 0; clip-path: inset(0); -webkit-clip-path: inset(0); }
}

@media (max-width: 600px) {
  .hd-intro__stage { width: 82vmin; gap: 20px; }
  .hd-intro__halo { width: 100vmin; height: 100vmin; }
  .hd-intro__tagline { font-size: 9px; letter-spacing: 0.42em; }
}

/* ============================================================
   Commerce layer (Phase 1), WhatsApp button + free-ship bar
   ============================================================ */
/* WhatsApp floating button removed by request (concierge pill replaces it) */
.hd-whats { display: none !important; }
.hd-whats {
  position: fixed; left: 22px; bottom: 22px; z-index: 1000;
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  background: #1F1A14; color: #FAF6EE; text-decoration: none;
  box-shadow: 0 10px 30px -8px rgba(0,0,0,0.45);
  transition: transform .3s cubic-bezier(0.22,1,0.36,1), background .3s;
}
.hd-whats:hover { transform: translateY(-2px); background: #8A6228; }
.hd-whats:focus-visible { outline: 2px solid #D4AC6A; outline-offset: 3px; }
@media (max-width: 700px) { .hd-whats { width: 48px; height: 48px; left: 16px; bottom: 16px; } }
@media print { .hd-whats { display: none; } }

.hd-free-bar { margin: 0 0 16px; }
.hd-free-msg {
  font-family: 'Inter', sans-serif; font-size: 11.5px; letter-spacing: 0.02em;
  color: #8A6228; margin-bottom: 7px; text-align: center;
}
.hd-free-msg.done { color: #3f6212; }
.hd-free-track { height: 3px; border-radius: 3px; background: rgba(26,22,18,0.10); overflow: hidden; }
.hd-free-fill { display: block; height: 100%; background: linear-gradient(90deg, #B8945A, #D4AC6A); border-radius: 3px; transition: width .45s cubic-bezier(0.22,1,0.36,1); }
@media (prefers-reduced-motion: reduce) { .hd-free-fill { transition: none; } }

/* ================================================================
   UNIFIED RADIUS SYSTEM, refined Mediterranean luxury (one source)
   Applied globally with !important so it beats per-page declarations
   without editing every page's inline <style>. Calm, not bubbly.
   ================================================================ */
:root {
  --radius-pill: 999px;   /* primary CTAs, small selectors, badges */
  --radius-card: 16px;    /* cards, panels, sheets, modals */
  --radius-soft: 10px;    /* secondary buttons, inputs, large selectors */
  --radius-xs:   6px;     /* tiny chips, thumbnails */
}

/* 1 + 2, buttons: primary = pill, secondary = soft */
.confirm-btn, .pd-cta, .btn-primary, .track-cta, .cart-checkout,
.wz-mobile-btn, .qv-add, .pd-cta .arrow, .cart-empty-cta, .checkout-empty-cta,
.cb-btn, .cta, .add-to-cart, .card-add {
  border-radius: var(--radius-pill) !important;
}
.filter-trigger, .sort-trigger, .wz-discount-apply, .wz-up-add, .btn-ghost,
.search-result, .nav-acquire { border-radius: var(--radius-pill) !important; }

/* 3, option selectors: small = pill, large rows = soft.
   (.variant-options label intentionally excluded, it uses a small radius.) */
.fp-chip, .qty, .wz-qty, .lp-methods span { border-radius: var(--radius-pill) !important; }
.ship-opt { border-radius: var(--radius-soft) !important; }

/* 4, inputs (radius is invisible on underline inputs, refined on boxed ones) */
input[type="text"], input[type="email"], input[type="tel"], input[type="search"],
input[type="password"], input[type="number"], select, textarea, .wz-discount input,
.track-field input { border-radius: var(--radius-soft) !important; }

/* 5, cards & panels */
.p-card, .auth-card, .acct-card, .order-card, .address-card, .acct-tile,
.wz-up-card, .packaging-card, .track-panel, .qv-panel, .cart-panel,
.menu-side, .also-card .mini-photo-frame, .recent-card .frame, .also-card,
.detail-cell, .review-item, .wz-review-cell, .empty-state, .demo-note,
.cookie-bar, .hd-skeleton-card, .search-panel {
  border-radius: var(--radius-card) !important;
}

/* 6, tags / badges / stock capsules */
.badge, .status-pill, .pm, .tag, .qv-badge, .badges .badge, .gold.badge,
.stock-badge, .pill { border-radius: var(--radius-pill) !important; }

/* 7, thumbnails stay gently soft, not circular */
.wz-line-thumb, .wz-line-thumb img, .sb-thumb, .sb-thumb img,
.ces-card, .search-result .thumb, .search-result .thumb img {
  border-radius: var(--radius-xs) !important;
}

/* keep genuine circles circular (avatars, radios, qty steppers, FABs) */
.radio, .wz-qty-btn, .nav-cart, .hd-whats, .hd-fab, .wishlist-btn,
.qv-close, .pw-toggle, .success-check, .cb-toggle .track,
.wz-dot .n { border-radius: 999px !important; }

/* ================================================================
   SEARCH, editorial overlay (cinematic, calm)
   ================================================================ */
.nav-search {
  display: inline-grid; place-items: center; width: 40px; height: 40px;
  background: none; border: none; cursor: pointer; color: inherit; padding: 0;
  border-radius: 999px; transition: opacity .3s var(--ease, ease), color .3s;
  opacity: 0.82;
}
.nav-search:hover { opacity: 1; }
.nav-search svg { width: 18px; height: 18px; }
.nav-search:focus-visible { outline: 2px solid var(--gold-light, #D4AC6A); outline-offset: 3px; }

.hd-search { position: fixed; inset: 0; z-index: 1100; }
.hd-search[hidden] { display: none; }
.hd-search-backdrop {
  position: absolute; inset: 0; background: rgba(26,22,18,0.42);
  backdrop-filter: blur(10px) saturate(120%); -webkit-backdrop-filter: blur(10px) saturate(120%);
  opacity: 0; transition: opacity .36s var(--ease, cubic-bezier(0.22,1,0.36,1));
}
.hd-search.open .hd-search-backdrop { opacity: 1; }
.hd-search-panel {
  position: relative; max-width: 720px; margin: 0 auto; margin-top: 9vh;
  background: var(--cream, #FAF6EE); border-radius: var(--radius-card, 16px);
  box-shadow: 0 40px 120px -40px rgba(26,22,18,0.6);
  overflow: hidden; transform: translateY(-14px) scale(0.985); opacity: 0;
  transition: transform .42s var(--ease, cubic-bezier(0.22,1,0.36,1)), opacity .42s var(--ease, cubic-bezier(0.22,1,0.36,1));
}
.hd-search.open .hd-search-panel { transform: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hd-search-panel, .hd-search-backdrop { transition: opacity .2s linear; transform: none; }
}

.hd-search-bar { display: flex; align-items: center; gap: 14px; padding: 22px 24px; border-bottom: 1px solid rgba(26,22,18,0.08); }
.hd-search-ico { width: 22px; height: 22px; flex: none; color: var(--gold-deep, #8A6228); }
#hdSearchInput {
  flex: 1; min-width: 0; border: none; background: none; outline: none;
  font-family: 'Newsreader', serif; font-size: 26px; font-weight: 300; color: var(--ink, #1F1A14);
  letter-spacing: -0.01em; border-radius: 0 !important;
}
#hdSearchInput::placeholder { color: rgba(26,22,18,0.34); font-style: italic; }
.hd-search-close {
  flex: none; display: inline-flex; align-items: center; gap: 8px; background: none; border: none; cursor: pointer;
  font-family: 'Inter', sans-serif; font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft, #5C5247);
  padding: 8px; min-height: 40px;
}
.hd-search-close:hover { color: var(--gold-deep, #8A6228); }
.hd-search-close .x { position: relative; width: 12px; height: 12px; }
.hd-search-close .x::before, .hd-search-close .x::after { content: ''; position: absolute; top: 5px; left: 0; width: 12px; height: 1.5px; background: currentColor; }
.hd-search-close .x::before { transform: rotate(45deg); } .hd-search-close .x::after { transform: rotate(-45deg); }

.hd-search-results { max-height: 64vh; overflow-y: auto; padding: 8px 12px 16px; -webkit-overflow-scrolling: touch; }
.hd-s-group { padding: 12px 8px 4px; }
.hd-s-grouptitle { font-family: 'Inter', sans-serif; font-size: 9px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold-deep, #8A6228); margin: 0 8px 8px; }
.hd-s-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 4px 6px; }
.hd-s-chip {
  background: none; border: 1px solid rgba(26,22,18,0.16); cursor: pointer;
  font-family: 'Inter', sans-serif; font-size: 12px; color: var(--ink, #1F1A14);
  padding: 9px 15px; min-height: 40px; border-radius: var(--radius-pill, 999px); transition: all .3s var(--ease, ease);
}
.hd-s-chip:hover, .hd-s-chip.is-active { border-color: var(--gold, #B8945A); color: var(--gold-deep, #8A6228); background: rgba(184,148,90,0.08); }
.hd-s-row {
  display: flex; align-items: center; gap: 14px; padding: 10px 10px; text-decoration: none;
  border-radius: var(--radius-soft, 10px); transition: background .25s var(--ease, ease);
}
.hd-s-row:hover, .hd-s-row.is-active { background: rgba(184,148,90,0.10); }
.hd-s-thumb { width: 46px; height: 46px; flex: none; border-radius: var(--radius-xs, 6px); overflow: hidden; background: var(--bg-deep, #EDE3D2); }
.hd-s-thumb img { width: 100%; height: 100%; object-fit: cover; }
.hd-s-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hd-s-title { font-family: 'Newsreader', serif; font-size: 17px; color: var(--ink, #1F1A14); line-height: 1.2; }
.hd-s-sub { font-family: 'Inter', sans-serif; font-size: 12px; color: var(--ink-soft, #5C5247); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hd-s-price { font-family: 'Newsreader', serif; font-size: 16px; color: var(--ink, #1F1A14); flex: none; }
.hd-s-kind { font-family: 'Inter', sans-serif; font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft, #5C5247); flex: none; }
.hd-s-row--text { padding: 13px 10px; }
.hd-s-empty { padding: 22px 12px; }
.hd-s-empty p { font-family: 'Newsreader', serif; font-style: italic; font-size: 17px; color: var(--ink-soft, #5C5247); margin: 0 8px 6px; }

@media (max-width: 700px) {
  .hd-search-panel { margin: 0; margin-top: 0; max-width: none; min-height: 100dvh; border-radius: 0; }
  .hd-search-bar { position: sticky; top: 0; background: var(--cream, #FAF6EE); padding: 16px 18px calc(16px + env(safe-area-inset-top, 0px)); }
  #hdSearchInput { font-size: 22px; }
  .hd-search-results { max-height: none; height: calc(100dvh - 76px); }
}

/* ================================================================
   PRODUCT STORYTELLING (Phase 2), composition, pairs, bundle, FAQ
   ================================================================ */
#pxExtras .px-section { max-width: 1120px; margin: 0 auto; padding: 6vh 8% 0; }
#pxExtras .px-head { margin-bottom: 26px; }
.px-eyebrow { font-family:'Inter',sans-serif; font-size:9.5px; letter-spacing:0.36em; text-transform:uppercase; color:var(--gold-deep,#8A6228); }
.px-title { font-family:'Newsreader',serif; font-weight:300; font-size:clamp(28px,4vw,46px); line-height:1.06; letter-spacing:-0.02em; color:var(--ink,#1F1A14); margin-top:8px; }

.px-compose-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }
@media (max-width:820px){ .px-compose-grid { grid-template-columns:1fr; } }
.px-card { background:var(--cream,#FAF6EE); border:1px solid rgba(26,22,18,0.08); border-radius:var(--radius-card,16px); padding:24px; }
.px-card h4 { font-family:'Inter',sans-serif; font-size:9.5px; letter-spacing:0.2em; text-transform:uppercase; color:var(--gold-deep,#8A6228); margin-bottom:12px; display:flex; justify-content:space-between; gap:8px; }
.px-card h4 span { color:var(--ink-soft,#5C5247); letter-spacing:0.1em; }
.px-card p { font-family:'Inter',sans-serif; font-size:14px; line-height:1.7; color:var(--ink-soft,#5C5247); }
.px-nutri table { width:100%; border-collapse:collapse; }
.px-nutri th, .px-nutri td { font-family:'Inter',sans-serif; font-size:13.5px; text-align:left; padding:9px 0; border-bottom:1px solid rgba(26,22,18,0.08); }
.px-nutri th { font-weight:400; color:var(--ink-soft,#5C5247); }
.px-nutri td { text-align:right; color:var(--ink,#1F1A14); font-variant-numeric:tabular-nums; }
.px-nutri tr:last-child th, .px-nutri tr:last-child td { border-bottom:none; }

.px-pairs { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width:760px){ .px-pairs { grid-template-columns:1fr; } }
.px-pair { display:flex; align-items:center; gap:16px; padding:14px; background:var(--cream,#FAF6EE); border:1px solid rgba(26,22,18,0.08); border-radius:var(--radius-card,16px); text-decoration:none; transition:border-color .3s var(--ease,ease), transform .3s var(--ease,ease); }
.px-pair:hover { border-color:var(--gold,#B8945A); transform:translateY(-2px); }
.px-pair-img { width:64px; height:64px; flex:none; border-radius:var(--radius-xs,6px); overflow:hidden; background:var(--bg-deep,#EDE3D2); }
.px-pair-img img { width:100%; height:100%; object-fit:cover; }
.px-pair-meta { display:flex; flex-direction:column; min-width:0; }
.px-pair-name { font-family:'Newsreader',serif; font-size:18px; color:var(--ink,#1F1A14); }
.px-pair-note { font-family:'Inter',sans-serif; font-size:12px; color:var(--ink-soft,#5C5247); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.px-pair-price { font-family:'Inter',sans-serif; font-size:13px; color:var(--gold-deep,#8A6228); margin-top:4px; }

.px-bundle .px-bundle-inner { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; background:var(--bg-deep,#EDE3D2); border-radius:var(--radius-card,16px); padding:40px; }
@media (max-width:820px){ .px-bundle .px-bundle-inner { grid-template-columns:1fr; gap:26px; padding:28px; } }
.px-bundle-visual { display:flex; align-items:center; justify-content:center; gap:8px; }
.px-bundle-thumb { width:33%; aspect-ratio:3/4; border-radius:var(--radius-soft,10px); overflow:hidden; background:var(--cream,#FAF6EE); box-shadow:0 18px 40px -24px rgba(26,22,18,0.5); }
.px-bundle-thumb img { width:100%; height:100%; object-fit:cover; }
.px-plus { font-family:'Newsreader',serif; font-size:22px; color:var(--gold-deep,#8A6228); }
.px-bundle-sub { font-family:'Inter',sans-serif; font-size:12px; letter-spacing:0.04em; color:var(--ink-soft,#5C5247); margin-top:10px; }
.px-bundle-desc { font-family:'Newsreader',serif; font-style:italic; font-size:17px; line-height:1.6; color:var(--ink-soft,#5C5247); margin:12px 0 20px; }
.px-bundle-buy { display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.px-bundle-price { font-family:'Newsreader',serif; font-size:26px; color:var(--ink,#1F1A14); }
.px-bundle-price s { font-size:17px; color:var(--ink-soft,#5C5247); opacity:0.7; margin-left:6px; }
.px-bundle-add { width:auto !important; }
.px-bundle-save { display:inline-block; margin-top:14px; font-family:'Inter',sans-serif; font-size:10px; letter-spacing:0.16em; text-transform:uppercase; color:var(--gold-deep,#8A6228); background:var(--gold-soft,rgba(184,148,90,0.32)); padding:6px 12px; border-radius:var(--radius-pill,999px); }

.px-faq { max-width:760px; }
.px-faq-item { border-bottom:1px solid rgba(26,22,18,0.1); }
.px-faq-q { width:100%; display:flex; justify-content:space-between; align-items:center; gap:12px; background:none; border:none; cursor:pointer; text-align:left; padding:20px 0; min-height:44px; font-family:'Newsreader',serif; font-size:18px; color:var(--ink,#1F1A14); }
.px-faq-mark { position:relative; width:13px; height:13px; flex:none; }
.px-faq-mark::before, .px-faq-mark::after { content:''; position:absolute; background:var(--gold-deep,#8A6228); transition:transform .3s var(--ease,ease); }
.px-faq-mark::before { top:6px; left:0; width:13px; height:1.5px; }
.px-faq-mark::after { top:0; left:6px; width:1.5px; height:13px; }
.px-faq-item.open .px-faq-mark::after { transform:scaleY(0); }
.px-faq-a { max-height:0; overflow:hidden; transition:max-height .35s var(--ease,ease); }
.px-faq-item.open .px-faq-a { max-height:260px; }
.px-faq-a p { font-family:'Inter',sans-serif; font-size:14.5px; line-height:1.75; color:var(--ink-soft,#5C5247); padding-bottom:20px; }
@media (prefers-reduced-motion: reduce){ .px-faq-a, .px-pair { transition:none; } }

/* ================================================================
   INVENTORY (Phase 3), subtle stock indicators
   ================================================================ */
.stock-flag {
  position: absolute; left: 14px; bottom: 14px; z-index: 3;
  font-family: 'Inter', sans-serif; font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 6px 11px; border-radius: var(--radius-pill, 999px);
  background: rgba(250,246,238,0.92); color: var(--ink, #1F1A14);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(26,22,18,0.08); box-shadow: 0 6px 18px -10px rgba(26,22,18,0.4);
}
.stock-flag.stock-low { color: var(--gold-deep, #8A6228); }
.stock-flag.stock-out { color: #7a2812; }
.stock-flag.stock-backorder { color: var(--ink-soft, #5C5247); }
.p-card.is-soldout .card-photo { filter: grayscale(0.45) brightness(0.98); opacity: 0.86; }

/* product page stock line states */
.pd-stock.is-low .pd-stock-dot { background: var(--gold, #B8945A); }
.pd-stock.is-out { color: #7a2812; }
.pd-stock.is-out .pd-stock-dot { background: #7a2812; }
.pd-stock.is-backorder .pd-stock-dot { background: var(--ink-soft, #5C5247); }

/* ================================================================
   MODERN GROTESK TYPE SYSTEM (site-wide), no serif, no italic.
   General Sans (display) + Inter Tight (body). The SVG logo wordmark
   and icons are excluded so the brand mark + glyphs are untouched.
   Applied globally with !important to override per-page inline serif.
   ================================================================ */
:root {
  --track-label: 0.12em; --track-button: 0.14em;
  --font-display: 'General Sans', 'Inter Tight', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter Tight', system-ui, -apple-system, sans-serif;
}

/* base, everything to the grotesk body face, never SVG (logo/icons) */
body :not(svg):not(svg *) {
  font-family: var(--font-body) !important;
}

/* no italics anywhere (former italic accents become a quiet tonal shift) */
body em, body i { font-style: normal !important; }

/* display / headings → General Sans, the editorial display voice.
   Attribute selectors catch the site's *-headline / *-title classes. */
body h1, body h2, body h3,
body [class*="headline"], body [class*="title"],
body [class*="eyebrow"], body .menu-items a, body .acct-h1, body .pd-price,
body .also-card .name, body .px-title, body .side-title,
body .card-name, body .pm-eyebrow {
  font-family: var(--font-display) !important;
  font-weight: 540 !important;
  letter-spacing: -0.02em !important;
  font-style: normal !important;
}
/* very large display gets a touch tighter leading */
body [class*="headline"], body .pd-title, body .c-headline, body .ck-headline {
  line-height: 1.04 !important;
  letter-spacing: -0.03em !important;
}
/* eyebrows are uppercase tracked labels, not tight display, so reset tracking */
body [class*="eyebrow"] {
  letter-spacing: var(--track-label) !important;
  font-weight: 500 !important;
}

/* =================================================================
   Hide scrollbars site-wide (scrolling stays fully functional).
   Requested: no visible scroll bars anywhere.
   ================================================================= */
html { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar { width: 0; height: 0; display: none; }
*, *::before, *::after { scrollbar-width: none; -ms-overflow-style: none; }
*::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* =================================================================
   QUICK VIEW, cinematic upgrade (floating, atmospheric, glass)
   ================================================================= */
.qv-overlay {
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(245, 236, 222, 0.50), transparent 55%),
    rgba(24, 19, 13, 0.46);
  -webkit-backdrop-filter: blur(16px) saturate(135%);
  backdrop-filter: blur(16px) saturate(135%);
  transition: opacity 0.6s var(--ease, cubic-bezier(0.22, 1, 0.36, 1));
}
.qv-panel {
  width: min(960px, 95vw);
  background: rgba(250, 246, 238, 0.82);
  -webkit-backdrop-filter: blur(30px) saturate(140%);
  backdrop-filter: blur(30px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-card, 16px);
  box-shadow:
    0 60px 140px -50px rgba(24, 19, 13, 0.55),
    0 18px 50px -30px rgba(24, 19, 13, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transform: scale(0.94) translateY(18px);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease;
}
.qv-overlay.open .qv-panel { transform: scale(1) translateY(0); }

/* image side, warm cinematic atmosphere */
.qv-image {
  background:
    radial-gradient(80% 70% at 50% 38%, rgba(255, 240, 208, 0.6), transparent 62%),
    linear-gradient(160deg, #F3E7CC 0%, #E5D2A8 55%, #CBB682 100%);
  overflow: hidden;
}
.qv-image img { position: relative; z-index: 3; transition: transform 0.9s var(--ease, cubic-bezier(0.22,1,0.36,1)); will-change: transform; }
.qv-atmos { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.qv-haze { position: absolute; inset: -12%; background: radial-gradient(45% 40% at 50% 35%, rgba(255, 250, 235, 0.7), transparent 70%); animation: qvHaze 14s ease-in-out infinite alternate; }
.qv-mote { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 238, 200, 0.95), transparent 70%); opacity: 0; }
.qv-mote:nth-child(2) { left: 24%; bottom: 8%; animation: qvMote 12s linear infinite; }
.qv-mote:nth-child(3) { left: 56%; bottom: 2%; width: 4px; height: 4px; animation: qvMote 16s linear 3s infinite; }
.qv-mote:nth-child(4) { left: 78%; bottom: 5%; width: 3px; height: 3px; animation: qvMote 14s linear 6s infinite; }
@keyframes qvHaze { 0% { transform: translate3d(-3%, 0, 0) scale(1); opacity: 0.6; } 100% { transform: translate3d(3%, -3%, 0) scale(1.08); opacity: 1; } }
@keyframes qvMote { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: 0.8; } 80% { opacity: 0.5; } 100% { opacity: 0; transform: translateY(-180px); } }
.qv-image .qv-edition { z-index: 4; color: rgba(31, 26, 20, 0.7); }

/* progressive content reveal (staggered, calm) */
.qv-content > * { opacity: 0; transform: translateY(12px); transition: opacity 0.6s var(--ease, ease), transform 0.6s var(--ease, ease); }
.qv-overlay.is-revealed .qv-content > * { opacity: 1; transform: none; }
.qv-overlay.is-revealed .qv-content > *:nth-child(1) { transition-delay: 0.05s; }
.qv-overlay.is-revealed .qv-content > *:nth-child(2) { transition-delay: 0.11s; }
.qv-overlay.is-revealed .qv-content > *:nth-child(3) { transition-delay: 0.17s; }
.qv-overlay.is-revealed .qv-content > *:nth-child(4) { transition-delay: 0.23s; }
.qv-overlay.is-revealed .qv-content > *:nth-child(5) { transition-delay: 0.29s; }
.qv-overlay.is-revealed .qv-content > *:nth-child(6) { transition-delay: 0.35s; }
.qv-overlay.is-revealed .qv-content > *:nth-child(7) { transition-delay: 0.41s; }
.qv-overlay.is-revealed .qv-content > *:nth-child(8) { transition-delay: 0.47s; }
.qv-content { background: linear-gradient(180deg, rgba(255,253,248,0.4), rgba(250,246,238,0.2)); }
.qv-close { opacity: 1; transform: none; background: rgba(255, 255, 255, 0.55); border-color: rgba(26, 22, 18, 0.12); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); z-index: 5; }

@media (prefers-reduced-motion: reduce) {
  .qv-haze, .qv-mote { animation: none !important; }
  .qv-content > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .qv-image img { transition: none !important; }
}

/* =================================================================
   SEARCH, atmospheric refinement (softer, glass, editorial)
   ================================================================= */
.hd-search-backdrop {
  background:
    radial-gradient(100% 70% at 50% 0%, rgba(245, 236, 222, 0.5), transparent 55%),
    rgba(26, 22, 18, 0.32);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  backdrop-filter: blur(16px) saturate(130%);
}
.hd-search-panel {
  background: rgba(250, 246, 238, 0.82);
  -webkit-backdrop-filter: blur(30px) saturate(140%);
  backdrop-filter: blur(30px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 50px 130px -45px rgba(26, 22, 18, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  margin-top: 11vh;
}
.hd-search-bar { padding: 24px 26px; border-bottom: 1px solid rgba(26, 22, 18, 0.06); }
#hdSearchInput { font-size: 28px; letter-spacing: -0.02em; }
#hdSearchInput::placeholder { font-style: normal; color: rgba(26, 22, 18, 0.3); }
.hd-s-grouptitle { letter-spacing: 0.22em; opacity: 0.85; }
.hd-s-chip { background: rgba(255, 253, 248, 0.5); border-color: rgba(26, 22, 18, 0.1); }
.hd-s-chip:hover, .hd-s-chip.is-active { background: rgba(184, 148, 90, 0.12); border-color: rgba(184, 148, 90, 0.45); }
.hd-s-row { transition: background .3s var(--ease, ease), transform .3s var(--ease, ease); }
.hd-s-row:hover, .hd-s-row.is-active { background: rgba(184, 148, 90, 0.1); transform: translateX(3px); }
.hd-s-thumb { width: 52px; height: 52px; }
.hd-s-thumb img { transition: transform .6s var(--ease, ease); }
.hd-s-row:hover .hd-s-thumb img { transform: scale(1.08); }
.hd-s-empty p { font-style: normal; }
.hd-s-group { animation: hdsFade 0.5s var(--ease, ease) both; }
@keyframes hdsFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hd-s-group { animation: none; } .hd-s-row:hover { transform: none; } }

/* No-italics rule: Quick View region + notes were class-italic (not caught
   by the global em/i reset). */
.qv-content .qv-region, .qv-content .qv-notes { font-style: normal !important; }

/* =================================================================
   CART "CELLAR", cinematic premium refinement
   Warm translucent depth, editorial rows, floating qty, sheen CTA.
   ================================================================= */
/* Softer warm backdrop (less dark dim) */
.cart-drawer .cart-backdrop {
  background:
    radial-gradient(90% 60% at 80% 0%, rgba(245, 236, 222, 0.34), transparent 55%),
    rgba(20, 15, 9, 0.34);
  -webkit-backdrop-filter: blur(10px) saturate(125%);
  backdrop-filter: blur(10px) saturate(125%);
}
/* Panel: warm glass with ambient layered light */
.cart-drawer .cart-panel {
  background: rgba(250, 247, 240, 0.86);
  -webkit-backdrop-filter: blur(34px) saturate(150%);
  backdrop-filter: blur(34px) saturate(150%);
  border-left: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: -50px 0 120px -30px rgba(40, 24, 8, 0.28), inset 1px 0 0 rgba(255,255,255,0.4);
  isolation: isolate;
}
.cart-drawer .cart-panel::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(70% 30% at 78% -2%, rgba(255, 244, 220, 0.6), transparent 60%),
    radial-gradient(60% 26% at 12% 104%, rgba(123, 116, 78, 0.06), transparent 60%);
}
.cart-head .cart-title em { font-style: normal; }

/* Product rows, editorial, soft separators, image presence */
.cart-drawer .cart-line {
  border-bottom: 1px solid rgba(26, 22, 18, 0.06);
  border-radius: var(--radius-soft, 10px);
  padding: 18px 10px;
  margin: 0 -10px;
  transition: background .4s var(--ease, ease), transform .4s var(--ease, ease);
}
.cart-drawer .cart-line:hover { background: rgba(184, 148, 90, 0.06); transform: translateY(-1px); }
.cart-drawer .cart-line .thumb {
  border-radius: var(--radius-soft, 10px); overflow: hidden;
  box-shadow: 0 14px 26px -16px rgba(40, 24, 8, 0.4);
}
.cart-drawer .cart-line .thumb .mini-photo, .cart-drawer .cart-line .thumb img { transition: transform .7s var(--ease, ease); }
.cart-drawer .cart-line:hover .thumb .mini-photo, .cart-drawer .cart-line:hover .thumb img { transform: scale(1.06); }

/* Quantity, floating premium control */
.cart-drawer .qty {
  background: rgba(255, 253, 248, 0.7);
  border: 1px solid rgba(26, 22, 18, 0.1);
  border-radius: var(--radius-pill, 999px);
  box-shadow: 0 6px 16px -10px rgba(40, 24, 8, 0.3), inset 0 1px 0 rgba(255,255,255,0.6);
  padding: 0 4px;
  transition: border-color .4s var(--ease, ease), box-shadow .4s var(--ease, ease);
}
.cart-drawer .qty:hover { border-color: rgba(184, 148, 90, 0.4); box-shadow: 0 10px 22px -10px rgba(40, 24, 8, 0.34); }
.cart-drawer .qty button { transition: color .3s var(--ease, ease), transform .2s var(--ease, ease); }
.cart-drawer .qty button:active { transform: scale(0.86); }
.cart-drawer .qty .val { font-feature-settings: "tnum","lnum"; }

/* Subtotal, tabular + buttery settle on change */
.cart-totals .total { font-feature-settings: "tnum","lnum"; transition: transform .4s var(--ease, ease); display: inline-block; }
.cart-totals .total.is-bumped { animation: cartBump .5s var(--ease, ease); }
@keyframes cartBump { 0%{transform:translateY(0)} 30%{transform:translateY(-3px)} 100%{transform:translateY(0)} }

/* Checkout CTA, cinematic sheen + warm depth */
.cart-checkout {
  position: relative; overflow: hidden;
  box-shadow: 0 16px 34px -18px rgba(40, 24, 8, 0.55);
  transition: background .5s var(--ease, ease), box-shadow .5s var(--ease, ease), transform .5s var(--ease, ease);
}
.cart-checkout::after {
  content: ''; position: absolute; top: 0; left: -40%; width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,245,220,0.22), transparent);
  transform: skewX(-18deg); opacity: 0; pointer-events: none;
}
.cart-checkout:hover { transform: translateY(-1px); box-shadow: 0 22px 44px -18px rgba(138, 98, 40, 0.5); }
.cart-checkout:hover::after { animation: cartSheen 0.9s var(--ease, ease); }
@keyframes cartSheen { 0%{left:-40%;opacity:0} 20%{opacity:1} 100%{left:130%;opacity:0} }

/* Free-shipping, softer, atmospheric, less "progress UI" */
.hd-free-bar { padding: 0 0 14px; }
.hd-free-msg { font-family: 'Inter', sans-serif; font-size: 10.5px; letter-spacing: 0.06em; color: var(--ink-soft, #5C5247); margin-bottom: 9px; }
.hd-free-msg.done { color: var(--gold-deep, #8A6228); }
.hd-free-track { height: 2px; background: rgba(26, 22, 18, 0.1); border-radius: 999px; overflow: hidden; }
.hd-free-fill { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--gold, #B8945A), var(--gold-light, #D4AC6A));
  transition: width 0.9s var(--ease, cubic-bezier(0.22,1,0.36,1)); }

/* Empty state, atmospheric Mediterranean */
.cart-empty { position: relative; }
.cart-empty::before {
  content: ''; position: absolute; left: 50%; top: 4vh; transform: translateX(-50%);
  width: 220px; height: 220px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(212, 172, 106, 0.18), transparent 70%);
  filter: blur(8px);
}
.cart-empty h4, .cart-empty p, .cart-empty .cart-empty-cta { position: relative; }
.cart-empty h4 { font-style: normal; }

@media (prefers-reduced-motion: reduce) {
  .cart-checkout:hover::after { animation: none; }
  .cart-totals .total.is-bumped { animation: none; }
}

/* Remove the duplicate/outdated native free-ship bar (€90); the commerce.js
   .hd-free-bar (€120, matches the brand + cart note) is the single source. */
#cartProgress { display: none !important; }

/* =================================================================
   QUICK VIEW actions, locked-height pill buttons, never wrap/shift
   ================================================================= */
.qv-content .qv-actions { gap: 10px; align-items: stretch; }
.qv-content .qv-actions .cta,
.qv-content .qv-actions .cta-ghost,
.qv-content .qv-add,
.qv-content .qv-view {
  height: 60px !important;
  min-height: 60px !important;
  border-radius: var(--radius-pill, 999px) !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  white-space: nowrap !important;
  line-height: 1 !important;
  padding: 0 26px !important;
  letter-spacing: 0.1em;
  font-weight: 600;
  text-align: center;
  transition: box-shadow .25s var(--ease, ease), transform .25s var(--ease, ease), background .25s var(--ease, ease), border-color .25s var(--ease, ease), filter .25s var(--ease, ease);
}
.qv-content .qv-add { flex: 1 1 auto; min-width: 0; gap: 14px; }
.qv-content .qv-view { flex: 0 0 auto; }
.qv-content .qv-add:hover, .qv-content .qv-actions .cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 32px -16px rgba(40, 24, 8, 0.5);
}
/* Active: NO scaling / NO resizing, subtle lift + brightness + gold edge */
.qv-content .qv-add:active, .qv-content .qv-actions .cta:active {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 0 0 2px rgba(212, 172, 106, 0.4), 0 16px 32px -16px rgba(40, 24, 8, 0.5);
}
.qv-content .qv-add .arrow { transition: transform .3s var(--ease, ease); }
.qv-content .qv-add:hover .arrow { transform: translateX(4px); }
@media (max-width: 480px) {
  .qv-content .qv-actions .cta, .qv-content .qv-actions .cta-ghost,
  .qv-content .qv-add, .qv-content .qv-view { padding: 0 18px !important; letter-spacing: 0.06em; }
}
@media (prefers-reduced-motion: reduce) {
  .qv-content .qv-add:hover, .qv-content .qv-actions .cta:hover,
  .qv-content .qv-add:active, .qv-content .qv-actions .cta:active { transform: none; }
}

/* =================================================================
   EMPTY CART, cinematic "private cellar" (aspirational, not generic)
   ================================================================= */
.cart-empty { position: relative; padding: clamp(40px, 7vh, 78px) 4px 20px; text-align: center; overflow: hidden; }
.cart-empty .ce-glow { position: absolute; top: 1vh; left: 50%; transform: translateX(-50%); width: 320px; height: 320px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(212,172,106,0.22), transparent 68%); filter: blur(8px); }
.cart-empty > *:not(.ce-glow) { position: relative; z-index: 1; }
.cart-empty .ce-eyebrow { font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold-deep, #8A6228); font-weight: 600; margin-bottom: 16px; opacity: 0; animation: ceUp .7s var(--ease, ease) .05s forwards; }
.cart-empty .ce-title { font-size: clamp(30px, 8vw, 40px); line-height: 1.04; letter-spacing: -0.03em; color: var(--ink, #1F1A14); font-weight: 560; font-style: normal; margin: 0 auto 14px; max-width: 13ch; opacity: 0; animation: ceUp .7s var(--ease, ease) .12s forwards; }
.cart-empty .ce-sub { font-size: 14px; line-height: 1.6; color: var(--ink-soft, #5C5247); max-width: 33ch; margin: 0 auto 30px; opacity: 0; animation: ceUp .7s var(--ease, ease) .2s forwards; }
.cart-empty .cart-empty-cta { display: inline-flex; align-items: center; justify-content: center; gap: 14px; height: 56px; padding: 0 32px; border-radius: 999px; background: #241C14; color: var(--cream, #FAF6EE); text-decoration: none; font-family: 'Inter', sans-serif; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; white-space: nowrap; border: 1px solid rgba(212,172,106,0.4); box-shadow: 0 16px 34px -18px rgba(40,24,8,0.6); position: relative; overflow: hidden; opacity: 0; animation: ceUp .7s var(--ease, ease) .28s forwards; transition: transform .4s var(--ease, ease), box-shadow .4s var(--ease, ease), background .4s var(--ease, ease); }
.cart-empty .cart-empty-cta:hover { transform: translateY(-2px); background: #2A211A; border-color: rgba(212,172,106,0.6); box-shadow: 0 22px 44px -18px rgba(40,24,8,0.55); }
.cart-empty .cart-empty-cta .ce-arrow { width: 16px; height: 1px; background: currentColor; position: relative; transition: width .4s var(--ease, ease); }
.cart-empty .cart-empty-cta .ce-arrow::after { content: ''; position: absolute; right: 0; top: -3px; width: 6px; height: 6px; border-right: 1px solid currentColor; border-top: 1px solid currentColor; transform: rotate(45deg); }
.cart-empty .cart-empty-cta:hover .ce-arrow { width: 24px; }
.cart-empty .cart-empty-cta::after { content: ''; position: absolute; top: 0; left: -40%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,245,220,0.25), transparent); transform: skewX(-18deg); opacity: 0; pointer-events: none; }
.cart-empty .cart-empty-cta:hover::after { animation: ceSheen .9s var(--ease, ease); }
@keyframes ceSheen { 0%{left:-40%;opacity:0} 20%{opacity:1} 100%{left:130%;opacity:0} }
.cart-empty .ce-suggest { margin-top: clamp(34px, 6vh, 54px); text-align: left; opacity: 0; animation: ceUp .7s var(--ease, ease) .36s forwards; }
.cart-empty .ce-suggest-h { font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-soft, #5C5247); margin-bottom: 14px; padding-left: 2px; }
.cart-empty .ce-grid { display: grid; gap: 10px; }
.cart-empty .ce-card { display: flex; align-items: center; gap: 14px; padding: 11px; border-radius: var(--radius-soft, 12px); text-decoration: none; background: #FFFDF9; border: 1px solid rgba(184,148,90,0.30); box-shadow: 0 14px 30px -20px rgba(40,24,8,0.5); transition: transform .4s var(--ease, ease), box-shadow .4s var(--ease, ease), border-color .4s var(--ease, ease); }
.cart-empty .ce-card:hover { transform: translateY(-2px); border-color: rgba(184,148,90,0.55); box-shadow: 0 22px 40px -20px rgba(40,24,8,0.55); }

/* Empty Cellar: hide the subtotal/checkout footer (no €0 checkout) */
body #cartDrawer.is-empty .cart-foot { display: none !important; }

/* ================================================================
   FOOTER NEWSLETTER (injected above .footer-bottom, all pages)
   Asymmetric copy/form split, ambient gold divider, espresso CTA.
   ================================================================ */
.footer-news {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(28px, 5vw, 84px);
  align-items: center;
  padding: clamp(40px, 7vh, 72px) 0 clamp(34px, 6vh, 58px);
  margin-bottom: clamp(26px, 5vh, 52px);
  border-top: 1px solid rgba(26,22,18,0.10);
  position: relative;
}
.footer-news::before {
  content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(184,148,90,0.6), transparent);
  background-size: 42% 100%; background-repeat: no-repeat;
  animation: footerGlow 11s var(--ease, ease) infinite; opacity: 0.85; pointer-events: none;
}
@keyframes footerGlow { 0% { background-position: -40% 0; } 100% { background-position: 140% 0; } }
.footer-news__eyebrow {
  font-size: 9.5px; letter-spacing: var(--track-label, 0.36em); text-transform: uppercase;
  color: var(--gold-deep, #8A6228); font-weight: 500; margin-bottom: 16px; padding-left: 2px;
}
.footer-news__lead {
  font-size: clamp(17px, 1.9vw, 23px); line-height: 1.42; color: var(--ink, #1F1A14);
  max-width: 32ch; letter-spacing: -0.012em; font-weight: 400;
}
.footer-news__field { display: flex; gap: 10px; align-items: stretch; max-width: 440px; }
.footer-news__input {
  flex: 1 1 auto; min-width: 0; background: #FFFDF9;
  border: 1px solid rgba(26,22,18,0.18); border-radius: var(--radius-pill, 999px);
  padding: 0 22px; height: 54px; font-size: 14px; color: var(--ink, #1F1A14); outline: none;
  transition: border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.footer-news__input::placeholder { color: var(--ink-soft, #5C5247); opacity: .72; }
.footer-news__input:focus { border-color: rgba(184,148,90,0.62); box-shadow: 0 0 0 3px rgba(184,148,90,0.14); }
.footer-news__btn {
  flex: none; height: 54px; padding: 0 28px; border: none; cursor: pointer;
  border-radius: var(--radius-pill, 999px); background: var(--btn-bg); color: var(--btn-fg);
  box-shadow: var(--btn-edge), var(--btn-shadow);
  font-size: 10px; letter-spacing: var(--track-button, 0.42em); text-transform: uppercase; font-weight: 500;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), background .5s var(--ease);
}
.footer-news__btn span { padding-left: var(--track-button, 0.42em); }
.footer-news__btn:hover { background: var(--btn-bg-hover); box-shadow: var(--btn-edge-hover), var(--btn-shadow-hover); transform: translateY(-2px); }
.footer-news__btn:active { transform: translateY(0); }
.footer-news__btn:focus-visible { outline: 2px solid var(--gold-light, #D4AC6A); outline-offset: 3px; }
.footer-news__ok { font-size: 14.5px; color: var(--gold-deep, #8A6228); letter-spacing: .005em; }
@media (max-width: 760px) {
  .footer-news { grid-template-columns: 1fr; gap: 22px; padding-top: 38px; }
  .footer-news__field { max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .footer-news::before { animation: none; } }
.cart-empty .ce-card-img { width: 50px; height: 58px; flex: none; border-radius: 8px; overflow: hidden; background: var(--bg-deep, #EDE3D2); }
.cart-empty .ce-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease, ease); }
.cart-empty .ce-card:hover .ce-card-img img { transform: scale(1.08); }
.cart-empty .ce-card-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cart-empty .ce-card-name { font-size: 14.5px; color: var(--ink, #1F1A14); font-weight: 540; letter-spacing: -0.01em; }
.cart-empty .ce-card-price { font-size: 12.5px; color: var(--ink-soft, #5C5247); font-feature-settings: "tnum","lnum"; }
@keyframes ceUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .cart-empty .ce-eyebrow, .cart-empty .ce-title, .cart-empty .ce-sub, .cart-empty .cart-empty-cta, .cart-empty .ce-suggest { animation: none; opacity: 1; }
  .cart-empty .cart-empty-cta:hover::after { animation: none; }
  .cart-empty .ce-card:hover .ce-card-img img { transform: none; }
}

/* =================================================================
   INTRO LOGO, soft ivory wordmark + quiet glow (high contrast on the
   dark cinematic backdrop; was a weak gold-on-green before).
   ================================================================= */
.hd-intro__mark {
  filter: brightness(0) invert(0.97)
          drop-shadow(0 0 26px rgba(255, 248, 233, 0.5))
          drop-shadow(0 0 74px rgba(232, 201, 130, 0.28))
          drop-shadow(0 18px 46px rgba(0, 0, 0, 0.5)) !important;
}
.hd-intro__halo {
  background: radial-gradient(closest-side,
    rgba(255, 238, 200, 0.5) 0%,
    rgba(232, 201, 130, 0.26) 34%,
    rgba(201, 153, 72, 0.08) 62%,
    transparent 82%) !important;
}
/* soft dark pool directly behind the wordmark for stronger contrast */
.hd-intro__stage::before {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 150%; height: 170%; transform: translate(-50%, -50%); z-index: -1;
  background: radial-gradient(58% 52% at 50% 50%, rgba(6, 14, 10, 0.55), transparent 72%);
  filter: blur(22px); pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .hd-intro__mark { filter: brightness(0) invert(0.97) drop-shadow(0 0 24px rgba(255,248,233,0.45)) !important; }
}

/* =================================================================
   NAVIGATION, luxury editorial elevation (fashion-house, espresso)
   Builds on the --hd-nav-* system above; wins via body-prefix + later.
   ================================================================= */
body nav.site-nav, body nav.site-nav.scrolled {
  background: linear-gradient(180deg, rgba(20, 14, 9, 0.92) 0%, rgba(11, 8, 5, 0.82) 100%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(150%); backdrop-filter: blur(28px) saturate(150%);
  border-bottom: 1px solid rgba(212, 172, 106, 0.18) !important;
  padding: 22px clamp(26px, 4.5vw, 60px) !important;
  box-shadow: 0 1px 0 rgba(212, 172, 106, 0.06), 0 30px 80px -44px rgba(180, 130, 60, 0.26);
  transition: background 0.7s var(--ease, ease), padding 0.6s var(--ease, ease), opacity .9s var(--ease, ease), transform .9s var(--ease, ease);
}
body nav.site-nav.scrolled { background: linear-gradient(180deg, rgba(16, 11, 7, 0.96), rgba(10, 7, 4, 0.92)) !important; padding: 16px clamp(26px, 4.5vw, 60px) !important; }
body nav.site-nav > * { position: relative; z-index: 2; }

/* Ambient: faint grain + slow warm shimmer + mouse-reactive glow */
body nav.site-nav::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(220px 120px at var(--nav-mx, 28%) -20%, rgba(236, 206, 147, 0.12), transparent 70%),
    linear-gradient(90deg, transparent 0%, rgba(236, 206, 147, 0.05) 50%, transparent 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.85 0 0 0 0 0.72 0 0 0 0 0.42 0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: auto, 220% 100%, 180px 180px;
  animation: navShimmer 16s ease-in-out infinite;
  mix-blend-mode: screen;
  transition: background-position 0.25s linear;
}
@keyframes navShimmer { 0%,100% { background-position: 0 0, 120% 0, 0 0; } 50% { background-position: 0 0, -20% 0, 0 0; } }

/* Logo, larger, warmer, subtle glow (stronger presence) */
body nav.site-nav .nav-brand, body nav.site-nav .logo-mark.nav-size { height: 56px; }
body nav.site-nav .logo-mark.nav-size { filter: brightness(0.96) saturate(1.18) contrast(1.04) drop-shadow(0 0 14px rgba(212, 172, 106, 0.28)); }
@media (max-width: 900px) { body nav.site-nav .nav-brand, body nav.site-nav .logo-mark.nav-size { height: 46px; } }

/* Luxury spacing in the right cluster */
body nav.site-nav .nav-right { gap: clamp(20px, 2.6vw, 42px); }

/* Typography, larger, medium weight, refined kerning */
body nav.site-nav .menu-btn, body nav.site-nav .nav-acquire {
  font-size: 11px !important; font-weight: 500 !important; letter-spacing: 0.2em !important;
  transition: color .4s var(--ease, ease), transform .4s var(--ease, ease), text-shadow .4s var(--ease, ease);
}
body nav.site-nav .menu-btn:hover, body nav.site-nav .nav-acquire:hover { transform: translateY(-1px); text-shadow: 0 0 16px rgba(236, 206, 147, 0.4); }

/* Refined utility icons (search / wishlist / cart) */
body nav.site-nav .nav-search svg, body nav.site-nav .nav-cart svg, body nav.site-nav .nav-wishlist svg { width: 18px; height: 18px; stroke-width: 1.5; }
body nav.site-nav .nav-search, body nav.site-nav .nav-wishlist, body nav.site-nav .nav-cart { transition: transform .4s var(--ease, ease), color .4s var(--ease, ease); }
body nav.site-nav .nav-search:hover, body nav.site-nav .nav-wishlist:hover, body nav.site-nav .nav-cart:hover { transform: translateY(-1px); color: var(--hd-nav-gold-bright, #ECCE93); }

/* Language switcher, dot separators + breathing space */
body nav.site-nav .lang-toggle { gap: 12px; }
body nav.site-nav .lang-toggle button { font-size: 10px !important; letter-spacing: 0.16em; opacity: 0.7; transition: color .35s var(--ease, ease), opacity .35s var(--ease, ease); }
body nav.site-nav .lang-toggle button:hover { opacity: 1; }
body nav.site-nav .lang-toggle button.active { opacity: 1; }
body nav.site-nav .lang-toggle .sep { width: 3px !important; height: 3px !important; border-radius: 50%; background: rgba(212, 172, 106, 0.4) !important; }

/* Elegant glow underline on the text links (Menu / Account etc.) */
body nav.site-nav .nav-acquire:not(.honey-shop) { border-bottom: none !important; padding-bottom: 4px; }
body nav.site-nav .nav-acquire:not(.honey-shop)::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--hd-nav-gold-bright, #ECCE93), transparent);
  transform: scaleX(0.35); opacity: 0.5; transform-origin: center;
  transition: transform .5s var(--ease, ease), opacity .5s var(--ease, ease);
}
body nav.site-nav .nav-acquire:not(.honey-shop):hover::after { transform: scaleX(1); opacity: 1; box-shadow: 0 0 8px rgba(236, 206, 147, 0.5); }

@media (prefers-reduced-motion: reduce) { body nav.site-nav::before { animation: none; } body nav.site-nav .menu-btn:hover, body nav.site-nav .nav-acquire:hover { transform: none; } }

/* =================================================================
   MENU OVERLAY, global structural base (some pages, e.g. legal +
   wishlist, ship the markup without the inline layout CSS, so the
   overlay opened invisible). This guarantees it works everywhere;
   colours/composition come from the redesign block above.
   ================================================================= */
body .menu-overlay {
  position: fixed; inset: 0; z-index: 150;
  display: flex; flex-direction: column;
  padding: 32px 48px; overflow: hidden;
  opacity: 0; pointer-events: none;
}
body .menu-overlay.open { opacity: 1; pointer-events: auto; }
body .menu-overlay .menu-top { display: flex; justify-content: space-between; align-items: center; padding-bottom: clamp(5vh, 7vh, 9vh); position: relative; z-index: 2; }
body .menu-overlay .menu-close { display: inline-flex; align-items: center; gap: 14px; cursor: pointer; background: none; border: none; }
body .menu-overlay .menu-content { display: grid; grid-template-columns: 1.4fr 1fr; gap: 8%; flex: 1; align-items: center; position: relative; z-index: 2; }
body .menu-overlay .menu-items { list-style: none; margin: 0; padding: 0; }
body .menu-overlay .menu-items li { display: grid; grid-template-columns: 60px 1fr auto; align-items: baseline; gap: 32px; opacity: 0; transform: translateY(28px); }
body .menu-overlay.open .menu-items li { opacity: 1; transform: none; }
body .menu-overlay .menu-items a { display: inline-block; text-decoration: none; }
body .menu-overlay .menu-side { opacity: 0; transform: translateX(28px); }
body .menu-overlay.open .menu-side { opacity: 1; transform: none; }
body .menu-overlay .menu-bottom { display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 2; }
@media (max-width: 900px) {
  body .menu-overlay { padding: 22px 24px; }
  body .menu-overlay .menu-content { grid-template-columns: 1fr; gap: 6vh; align-items: start; }
  body .menu-overlay .menu-items li { grid-template-columns: 36px 1fr; gap: 14px; padding: 18px 0; }
  body .menu-overlay .menu-items .sub { grid-column: 1 / -1; text-align: left; padding-left: 50px; margin-top: -6px; }
  body .menu-overlay .menu-side { padding-left: 0; border-left: none; border-top: 1px solid rgba(42, 35, 27, 0.1); padding-top: 5vh; }
  body .menu-overlay .menu-bottom { flex-direction: column; gap: 16px; text-align: center; }
}

/* =================================================================
   NAV, mobile: the right cluster overflowed (lang toggle alone is
   ~190px), pushing the Menu button off-screen. Collapse to the
   essentials: logo + search + Menu + cart. Language/Shop/Wishlist
   live inside the Menu overlay on small screens.
   ================================================================= */
@media (max-width: 700px) {
  body nav.site-nav .nav-right { gap: 16px; }
  body nav.site-nav .lang-toggle,
  body nav.site-nav .nav-acquire,
  body nav.site-nav .nav-wishlist { display: none !important; }
  body nav.site-nav .nav-search svg, body nav.site-nav .nav-cart svg { width: 19px; height: 19px; }
}

/* ================================================================
   PRIMARY BUTTON SYSTEM (site-wide, single language)
   Deep espresso black + subtle warm gradient + gold edge highlight
   + soft cinematic shadow + premium hover lift. Removes all the old
   brown / gold-deep button fills. One look, everywhere.
   Secondary tier = the outline text+arrow links (.cta/.product-cta),
   which fill espresso on hover, so the language stays consistent.
   ================================================================ */
:root {
  --btn-bg:        linear-gradient(162deg, #2B2118 0%, #15100A 100%);
  --btn-bg-hover:  linear-gradient(162deg, #362817 0%, #1B140C 100%);
  --btn-fg:        #FAF6EE;
  --btn-edge:      inset 0 0 0 1px rgba(212,172,106,0.30), inset 0 1px 0 rgba(212,172,106,0.22);
  --btn-edge-hover:inset 0 0 0 1px rgba(212,172,106,0.58), inset 0 1px 0 rgba(212,172,106,0.34);
  --btn-shadow:    0 16px 34px -20px rgba(18,12,6,0.62), 0 2px 6px -3px rgba(18,12,6,0.40);
  --btn-shadow-hover: 0 24px 50px -20px rgba(18,12,6,0.72), 0 4px 12px -4px rgba(18,12,6,0.50);
}

body .confirm-btn, body .cart-checkout, body .qv-add, body .card-add,
body .pd-cta, body .add-to-cart, body .btn-primary, body .track-cta,
body .wz-up-add, body .cart-empty-cta, body .checkout-empty-cta,
body .final-cta, body .cookie-bar .cb-btn.cb-accept, body .ig-follow {
  background: var(--btn-bg) !important;
  color: var(--btn-fg) !important;
  border: none !important;
  box-shadow: var(--btn-edge), var(--btn-shadow) !important;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease),
              background 0.5s var(--ease), color 0.5s var(--ease) !important;
}
body .confirm-btn:hover, body .cart-checkout:hover, body .qv-add:hover,
body .card-add:hover, body .pd-cta:hover, body .add-to-cart:hover,
body .btn-primary:hover, body .track-cta:hover, body .wz-up-add:hover,
body .cart-empty-cta:hover, body .checkout-empty-cta:hover,
body .final-cta:hover, body .cookie-bar .cb-btn.cb-accept:hover,
body .ig-follow:hover {
  background: var(--btn-bg-hover) !important;
  color: var(--btn-fg) !important;
  box-shadow: var(--btn-edge-hover), var(--btn-shadow-hover) !important;
  transform: translateY(-2px) !important;
}
body .confirm-btn:active, body .cart-checkout:active, body .qv-add:active,
body .card-add:active, body .pd-cta:active, body .add-to-cart:active,
body .btn-primary:active, body .track-cta:active, body .wz-up-add:active,
body .cart-empty-cta:active, body .checkout-empty-cta:active,
body .final-cta:active, body .ig-follow:active {
  transform: translateY(0) !important;
  box-shadow: var(--btn-edge), var(--btn-shadow) !important;
}
/* card-add was an outline-fill button; it's now solid espresso, so kill
   its sliding ink ::before and keep icon/label above any pseudo layers */
body .card-add::before { display: none !important; }
body .card-add > *, body .qv-add > *, body .confirm-btn > * { position: relative; z-index: 2; }
/* keep focus rings visible on the dark fill */
body .confirm-btn:focus-visible, body .cart-checkout:focus-visible,
body .qv-add:focus-visible, body .card-add:focus-visible,
body .pd-cta:focus-visible, body .add-to-cart:focus-visible,
body .track-cta:focus-visible, body .final-cta:focus-visible {
  outline: 2px solid var(--gold-light, #D4AC6A) !important;
  outline-offset: 3px !important;
}

/* ================================================================
   REVIEWS, luxury testimonial redesign (product pages)
   Layered cards, reveal-on-scroll, animated star shimmer, big score.
   ================================================================ */
.reviews-section { background: linear-gradient(180deg, var(--bg-deep, #EDE3D2) 0%, var(--bg, #F5EFE4) 100%); }
.reviews-summary .desc { font-style: normal; }
.rating-display .score { font-size: clamp(54px, 6vw, 74px) !important; }
/* animated rating: a quiet gold shimmer sweeps the summary stars */
.rating-display .stars { position: relative; overflow: hidden; }
.rating-display .stars::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 34%, rgba(255, 245, 214, 0.9) 50%, transparent 66%);
  transform: translateX(-130%); mix-blend-mode: screen;
  animation: starSheen 5s var(--ease, ease) 1.2s infinite;
}
@keyframes starSheen { 0%, 62% { transform: translateX(-130%); } 82%, 100% { transform: translateX(130%); } }

/* review items become layered cards with a staggered reveal */
.review-list { display: grid; gap: 16px; }
.review-item {
  padding: 26px 30px !important;
  border: 1px solid rgba(26, 22, 18, 0.08) !important;
  border-radius: var(--radius-card, 16px);
  background: #FFFDF9;
  box-shadow: 0 18px 42px -30px rgba(40, 28, 12, 0.42);
  opacity: 0; transform: translateY(28px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease),
              box-shadow 0.5s var(--ease), border-color 0.5s var(--ease);
}
.review-item:first-child { padding-top: 26px !important; }
.review-item:last-child { border-bottom: 1px solid rgba(26, 22, 18, 0.08) !important; }
.review-item.rv-in { opacity: 1; transform: translateY(0); }
.review-item:nth-child(2).rv-in { transition-delay: .07s; }
.review-item:nth-child(3).rv-in { transition-delay: .14s; }
.review-item:nth-child(4).rv-in { transition-delay: .21s; }
.review-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 28px 54px -28px rgba(40, 28, 12, 0.5);
  border-color: rgba(184, 148, 90, 0.34) !important;
}
@media (max-width: 860px) { .reviews-summary { position: static; } }
@media (prefers-reduced-motion: reduce) {
  .review-item { opacity: 1 !important; transform: none !important; transition: none !important; }
  .rating-display .stars::after { display: none; }
}

/* ================================================================
   TASTING JOURNEY, cinematic redesign (product pages)
   Ambient glow, floating motes, ghost numerals, a journey hairline
   that draws on scroll, drifting quotes. More motion, more air.
   ================================================================ */
.tasting {
  position: relative; overflow: hidden;
  background: radial-gradient(120% 80% at 50% 12%, #FBF6EC 0%, var(--bg, #F5EFE4) 55%, var(--bg-deep, #EDE3D2) 100%);
}
.tasting > * { position: relative; z-index: 1; }
.tasting .section-headline em { font-style: normal !important; }
.tasting::before {
  content: ''; position: absolute; left: 50%; top: 40%; width: 80vmin; height: 80vmin;
  transform: translate(-50%, -50%); pointer-events: none; z-index: 0;
  background: radial-gradient(closest-side, rgba(212,172,106,0.15), transparent 70%); filter: blur(8px);
  animation: tasteGlow 15s ease-in-out infinite alternate;
}
@keyframes tasteGlow { 0% { transform: translate(-54%, -46%) scale(1); } 100% { transform: translate(-46%, -52%) scale(1.14); } }
/* floating gold motes (injected by shared.js) */
.taste-motes { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.taste-motes .tm {
  position: absolute; width: 5px; height: 5px; border-radius: 50%;
  background: radial-gradient(circle, rgba(232,201,130,0.95), rgba(212,172,106,0));
  opacity: 0.4; animation: moteFloat 15s ease-in-out infinite;
}
.taste-motes .tm:nth-child(1) { left: 11%; top: 30%; animation-delay: 0s; animation-duration: 16s; }
.taste-motes .tm:nth-child(2) { left: 26%; top: 64%; animation-delay: -3s; animation-duration: 13s; }
.taste-motes .tm:nth-child(3) { left: 49%; top: 22%; animation-delay: -6s; animation-duration: 18s; }
.taste-motes .tm:nth-child(4) { left: 68%; top: 58%; animation-delay: -2s; animation-duration: 14s; }
.taste-motes .tm:nth-child(5) { left: 83%; top: 34%; animation-delay: -8s; animation-duration: 17s; }
.taste-motes .tm:nth-child(6) { left: 92%; top: 70%; animation-delay: -5s; animation-duration: 12s; }
@keyframes moteFloat { 0%, 100% { transform: translate(0, 0); opacity: 0.18; } 50% { transform: translate(16px, -30px); opacity: 0.6; } }

/* connecting journey hairline behind the three notes */
.tasting-grid { position: relative; }
.tasting-grid::before {
  content: ''; position: absolute; top: 19px; left: 4%; right: 4%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(184,148,90,0.5) 12%, rgba(184,148,90,0.5) 88%, transparent);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 1.6s var(--ease, ease) 0.2s; z-index: 0;
}
.tasting-grid.jr-drawn::before { transform: scaleX(1); }

/* big ghost numeral per note + drifting quote */
.taste-col { padding-top: 56px !important; }
.taste-col::before { top: 18px !important; width: 40px !important; z-index: 1; }
.taste-col::after {
  position: absolute; top: -8px; right: 0; z-index: 0;
  font-family: 'Inter Tight', sans-serif; font-weight: 600; font-size: clamp(64px, 7vw, 104px);
  line-height: 1; letter-spacing: -0.04em; color: rgba(184,148,90,0.10); pointer-events: none;
}
.taste-col:nth-child(1)::after { content: '01'; }
.taste-col:nth-child(2)::after { content: '02'; }
.taste-col:nth-child(3)::after { content: '03'; }
.taste-col h4, .taste-col h5, .taste-col p { position: relative; z-index: 1; }
.taste-col h5 { font-style: normal !important; animation: quoteDrift 7s ease-in-out infinite alternate; }
.taste-col:nth-child(2) h5 { animation-delay: -2.3s; }
.taste-col:nth-child(3) h5 { animation-delay: -4.6s; }
@keyframes quoteDrift { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(0, -5px, 0); } }
@media (prefers-reduced-motion: reduce) {
  .tasting::before, .taste-col h5, .taste-motes .tm { animation: none; }
  .tasting-grid::before { transition: none; transform: scaleX(1); }
}

/* ================================================================
   #13 Origin ("Eén weide, één seizoen") video: scaled down +
   editorial. Smaller contained frame, more whitespace, cleaner crop.
   Overrides the per-product-page inline sizing.
   ================================================================ */
body .product-origin {
  min-height: auto !important;
  padding-top: clamp(84px, 16vh, 200px) !important;
  padding-bottom: clamp(84px, 16vh, 200px) !important;
  grid-template-columns: 0.7fr 1fr !important;
  gap: clamp(40px, 8vw, 120px) !important;
  align-items: center !important;
}
body .product-origin .image-frame {
  width: min(360px, 100%);
  max-width: none;
  justify-self: center;
  aspect-ratio: 4 / 5;
  margin: 0 auto;
  border-radius: var(--radius-card, 16px);
  box-shadow: 0 38px 72px -36px rgba(40, 24, 8, 0.4) !important;
}
@media (max-width: 900px) {
  body .product-origin { grid-template-columns: 1fr !important; gap: clamp(34px, 7vh, 60px) !important; }
  body .product-origin .image-frame { width: min(300px, 80%); }
}

/* ================================================================
   Size variants (quick view), bundle hint, basket-offer cart row
   ================================================================ */
.qv-sizes { display: flex; gap: 10px; margin: 4px 0 10px; flex-wrap: wrap; }
.qv-size {
  -webkit-appearance: none; appearance: none; cursor: pointer;
  border: 1px solid rgba(26,22,18,0.22); background: transparent;
  border-radius: var(--radius-pill, 999px);
  padding: 9px 16px; min-height: 40px;
  font-family: 'Inter Tight','Inter',sans-serif; font-size: 12px; font-weight: 500;
  letter-spacing: 0.02em; color: var(--ink, #1a1612);
  transition: border-color .35s var(--ease), background .35s var(--ease), color .35s var(--ease);
}
.qv-size:hover { border-color: rgba(26,22,18,0.5); }
.qv-size.active { background: var(--ink, #1a1612); color: var(--cream, #faf6ee); border-color: var(--ink, #1a1612); }
.qv-size:focus-visible { outline: 2px solid var(--gold-light, #D4AC6A); outline-offset: 2px; }
.qv-bundle {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Inter Tight','Inter',sans-serif; font-size: 11px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--gold-deep, #8A6228); margin: 0 0 8px;
}
.qv-bundle::before { content: ''; width: 14px; height: 1px; background: currentColor; opacity: 0.6; }

/* Basket-offer discount row in the cart drawer footer */
.cart-foot .cart-offer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 0 10px; margin: 0 0 2px;
  font-family: 'Inter Tight','Inter',sans-serif; font-size: 12.5px;
  letter-spacing: 0.04em; color: var(--gold-deep, #8A6228);
}
.cart-foot .cart-offer[hidden] { display: none; }
.cart-foot .cart-offer .cart-offer-label { text-transform: uppercase; font-weight: 600; letter-spacing: 0.12em; font-size: 10.5px; }
.cart-foot .cart-offer .cart-offer-val { font-weight: 600; }

/* "from €X" price prefix on multi-size product cards */
.from {
  font-family: 'Inter Tight','Inter',sans-serif;
  font-size: 0.62em; font-weight: 500; letter-spacing: 0.06em;
  text-transform: lowercase; opacity: 0.6; margin-right: 1px;
}