/*
Theme Name: Dirty Cow
Theme URI: https://dirtycow.co.uk
Author: Dirty Cow + Claude
Description: Plant-based chocolate and cream liqueur. Totally Cre*my. Zero cow.
Version: 1.1
License: GNU General Public License v2 or later
Text Domain: dirtycow
*/

/* ==========================================================
   DIRTY COW — 1:1 port of Dirty_Cow_Fixed.html
========================================================== */

:root {
  --paper: #FFFFFF;
  --paper-soft: #faf4dc;    /* secondary cream */
  --bg-card: #f3e8c8;       /* card cream */
  --ink: #0A0A0A;
  --ink-soft: #1F1F1F;
  --ink-mute: #6B6B6B;
  --line: #E4E1DA;

  /* Vertical rhythm tokens · keep all section padding tied to these */
  --space-section: clamp(72px, 10vh, 140px);
  --space-hero:    clamp(96px, 14vh, 180px);
  --space-flow:    clamp(32px, 5vh, 64px);

  /* COCOA BARS · 12 */
  --c01: #fdb738;  /* Honey Come Home */
  --c02: #ef3f51;  /* Hail Mary Berry · price punch */
  --c03: #a2ba3b;  /* Pistachio YO! */
  --c04: #19a6b5;  /* Salty Susan · cow punch */
  --c05: #bd1e24;  /* Netflix and Chill */
  --c06: #0cb8a2;  /* Playne Jayne */
  --c07: #49c9f5;  /* Snap Crackle Shop */
  --c08: #007dc6;  /* Cookies No Cream */
  --c09: #d07e2c;  /* Cinnamon Churros */
  --c10: #a95c43;  /* Chunky Dunky */
  --c11: #ea088c;  /* Cherry Pop */
  --c12: #be5963;  /* Brazillionaire */

  /* CRE*M LIQUEURS · 3 */
  --c13: #85329a;  /* Loaded Chocolate */
  --c14: #36b4e5;  /* Sooo Original */
  --c15: #f87498;  /* Silky Strawberry · liqueur italic accent */
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', sans-serif;
  background: var(--paper); color: var(--ink);
  line-height: 1.55; font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }

/* ============ ASTERISK CENTRING ============ */
.ast { display: inline-block; transform: translateY(0.18em); }

/* ============ SITE HEADER · logo left, nav right-aligned (mail icon + cart inline) ============ */
.site-header {
  position: sticky; top: 0; z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 4vw;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  gap: 24px;
}
.site-header .logo { display: inline-flex; align-items: center; text-decoration: none; }
.site-header .logo img {
  height: clamp(35px, 3.1vw, 48px);
  width: auto; display: block;
}
.site-header .primary-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;                /* right-aligned cluster */
  gap: clamp(14px, 1.7vw, 28px);
}
.site-header nav { display: flex; gap: clamp(14px, 1.7vw, 28px); }
.site-header nav a {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: clamp(11px, 0.95vw, 14.5px); /* -15% nav */
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink);
}
.site-header nav a:hover { color: var(--c02); }
/* Trade link · marked subtle italic so it reads as a different audience */
.site-header nav a.nav-trade {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(13px, 1.05vw, 16px);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-mute);
}
.site-header nav a.nav-trade:hover { color: var(--c04); }
/* The Drop · curated/limited destination · small hot-pink dot prefix */
.site-header nav a.nav-drop {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  letter-spacing: 0.5px;
  position: relative;
  padding-left: 14px;
}
.site-header nav a.nav-drop::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 7px; height: 7px;
  background: var(--c11);
  border-radius: 50%;
  transform: translateY(-50%);
}
.site-header nav a.nav-drop:hover { color: var(--c11); }
.site-header nav .nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  margin-left: 2px;
}
.site-header nav .nav-icon svg { display: block; transition: transform 0.2s; }
.site-header nav .nav-icon:hover svg { transform: translateY(-1px); color: var(--c11); }
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
/* Bag icon + count · sits inside the centred nav alongside the mail icon */
.site-header .nav-cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  background: transparent;
  border: none;
  border-radius: 999px;
  transition: color 0.2s, background 0.2s;
}
.site-header .nav-cart .cart-count {
  position: absolute;
  top: -2px; right: -2px;
  background: var(--ink);
  color: #fff;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.5px;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--paper);
}
.site-header .nav-cart:hover { color: var(--c11); background: rgba(0,0,0,0.04); }
.site-header .nav-cart:hover svg { transform: translateY(-1px); }
/* Hamburger toggle · only visible at mobile breakpoints */
.site-header .nav-toggle {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  width: 44px;
  height: 44px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
.site-header .nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.2s, opacity 0.2s;
}
.site-header.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.site-header.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 800px) {
  .site-header {
    flex-wrap: wrap;
    padding: 12px 4vw;
  }
  .site-header .nav-toggle { display: flex; }
  .site-header .primary-nav {
    display: none;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    width: 100%;
    padding-top: 8px;
    border-top: 1px solid var(--line);
  }
  .site-header.nav-open .primary-nav { display: flex; }
  .site-header .primary-nav a {
    padding: 12px 0;
    font-size: 16px;
    letter-spacing: 1.5px;
    border-bottom: 1px solid var(--line);
  }
  .site-header .primary-nav .nav-icon {
    width: auto; height: auto;
    justify-content: flex-start;
    gap: 10px;
    padding: 12px 0;
  }
  .site-header .nav-cart .cart-count { position: static; margin-left: 8px; border: none; }
}

/* ============ CONTAINED CONTENT · FULL-BLEED COLOUR ============ */
.dc-page section { width: 100vw; margin-left: calc(50% - 50vw); }
.dc-page .section-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 6vw;
}

/* ============ HERO · BLACK · WHITE-OUT CAPS ============ */
.dc-hero {
  position: relative;
  height: calc(100vh - 90px);
  min-height: 640px;
  padding: var(--space-hero) 0;
  background: var(--ink);
  color: #fff;
  display: flex; align-items: center;
}
.dc-hero .section-inner { width: 100%; }
.dc-hero .hero-type { max-width: 700px; }
.dc-hero .eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 600;
  letter-spacing: 4px; text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-bottom: 24px;
  display: block;
}
.dc-hero h1 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(72px, 11vw, 140px);
  letter-spacing: 0.5px;
  line-height: 0.78;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
}
.dc-hero .coda {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(46px, 7vw, 88px);          /* original coda size · ~0.7 of master */
  line-height: 0.92;
  letter-spacing: 0;
  color: #f87498;                             /* Silky Strawberry pink */
  margin-top: 6px;
  margin-bottom: 32px;
}

.dc-hero .strap {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 2.2vw, 28px);
  color: rgba(255,255,255,0.92);
  max-width: 680px;                       /* wider · lets line 2 carry both pop + parenthetical */
  line-height: 1.3;
  margin-bottom: 36px;
}
.dc-hero .strap .pop-strap { color: #fff; }                  /* whole strap stays white */
.dc-hero .strap em.strap-coda {
  color: #fff;
  font-style: italic;
  margin-left: 8px;                        /* inline coda · sits next to pop on line 2 */
}
.dc-hero .ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.dc-hero .cta {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 13px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase;
  padding: 16px 30px;
  border-radius: 999px;
  background: #fff; color: var(--ink);       /* primary · inverted on black hero */
  border: 1.5px solid #fff;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s;
}
.dc-hero .cta:hover {
  background: var(--c11);                    /* Cherry Pop pink on hover */
  color: #fff;
  border-color: var(--c11);
  transform: translateY(-1px);
}
.dc-hero .cta.cta-ghost {
  background: transparent;
  color: #fff;
}
.dc-hero .cta.cta-ghost:hover {
  background: var(--c01);                    /* Honey yellow on hover */
  color: var(--ink);
  border-color: var(--c01);
}

/* Rotating Plant-based badge · bigger + angled · 30% closer to headline */
.dc-hero .seal {
  position: absolute;
  top: 36px;
  right: 15vw;                            /* was 5vw · gap to headline cut ~30% */
  width: 200px; height: 200px;
  display: flex; align-items: center; justify-content: center;
  transform: rotate(-10deg);
}
.dc-hero .seal-svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  animation: seal-spin 22s linear infinite;
}
.dc-hero .seal-text {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  fill: #fff;
}
.dc-hero .seal-mark {
  position: relative;
  z-index: 1;
  width: 75%;
  height: auto;
  max-width: 130px;
  display: block;
}
@keyframes seal-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@media (max-width: 800px) {
  .dc-hero .seal { width: 130px; height: 130px; transform: rotate(-8deg); }
  .dc-hero .seal-text { font-size: 9px; letter-spacing: 3px; }
  .dc-hero .seal-mark { max-width: 80px; }
}

/* ============ MARQUEE ============ */
.dc-marquee {
  background: var(--c14);
  color: #fff;
  padding: 11px 0;                /* -40% padding */
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.dc-marquee .track {
  display: inline-flex;
  gap: 28px;
  align-items: center;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: clamp(13px, 1.3vw, 16px);   /* -40% from previous */
  letter-spacing: 2px;
  text-transform: uppercase;
  padding-left: 28px;
  animation: marquee-roll 56s linear infinite;
}
.dc-marquee .track .dot { opacity: 0.5; }
@keyframes marquee-roll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ============ BLACK BREAK ============ */
.dc-break {
  background: var(--ink);
  color: #fff;
  padding: var(--space-hero) 0;
  text-align: center;
}
.dc-break .eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 600;
  letter-spacing: 4px; text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-bottom: 28px;
  display: block;
}
.dc-break h2 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(56px, 9vw, 130px);
  letter-spacing: 0.5px;
  line-height: 0.85;   /* descender clearance · matches content-page heroes */
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 32px;
}
.dc-break .strap {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(18px, 2vw, 26px);
  color: rgba(255,255,255,0.85);
  max-width: 660px;
  margin: 0 auto;
  line-height: 1.4;
}

/* ============ THREE REASONS · BLACK BG · WHITE TEXT · COLOUR POPS ============ */
.dc-reasons {
  background: var(--paper);                /* white · reads as one continuous block with cow-row above */
  color: var(--ink);
  padding: 0 0 var(--space-section);       /* zero top · circles sit directly under the cow-row eyebrow */
}
/* Pull the discs up into the cow-row's bottom padding so the gap reads tight */
.dc-cow-row + .dc-reasons {
  margin-top: calc(var(--space-section) * -0.7);
  position: relative;
  z-index: 2;
}
.dc-reasons .eyebrow {
  display: block;
  text-align: center;
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(28px, 3.4vw, 48px);   /* 9 · same scale as cow-punch */
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  margin-bottom: 48px;
}
.dc-reasons .reasons-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));   /* minmax(0,1fr) lets columns be truly equal */
  gap: 48px;
  justify-items: center;
}
.dc-reasons .reasons-grid .reason {
  width: 100%;
  min-width: 0;
  text-align: center;
}
.dc-reasons .reasons-grid .reason .r-tag {
  text-align: center;
  width: 100%;
}
.dc-reasons .reasons-grid .reason .r-tag .pop {
  display: block;
  text-align: center;
}
.dc-reasons .reasons-grid .reason p {
  text-align: center;
  margin: 0 auto;
  max-width: 28ch;
}
.dc-reasons .reasons-grid.reasons-grid--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));   /* truly equal 4 columns */
  gap: 64px 40px;
}
.dc-reasons.dc-reasons--padded { padding: 0 0 var(--space-flow); }   /* tighter · no body copy under circles, so less breathing room needed */

/* 4-col variant · both pop word AND tail word live inside one black circle, no keyline · type fills the disc */
.dc-reasons .reasons-grid--four .reason .r-tag {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: clamp(130px, 11vw, 170px);
  aspect-ratio: 1;
  background: var(--ink);
  color: #fff;
  border: 0;
  border-radius: 50%;
  margin: 0 auto 18px;
  padding: 8px;
  font-size: clamp(20px, 2vw, 28px);
  line-height: 0.9;
  letter-spacing: -0.015em;
  word-break: normal;
  hyphens: none;
  text-align: center;
  text-transform: uppercase;
}
.dc-reasons .reasons-grid--four .reason .r-tag .pop {
  display: block;
  font-size: 1em;
  color: #fff;                            /* white on the black circle */
}
.dc-reasons .reasons-grid--four .reason .r-tag .pop.pop-accent {
  color: #fff;                            /* white · matches the other three pop words */
}
/* Flex row · columns sized close to disc width so circles sit near each other */
.dc-reasons .reasons-grid.reasons-grid--four {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 20px 14px;
  grid-template-columns: none;            /* override the earlier grid declaration */
}
.dc-reasons .reasons-grid--four .reason {
  width: clamp(160px, 14vw, 200px);
  flex-shrink: 0;
}
@media (max-width: 1000px) {
  .dc-reasons .reasons-grid.reasons-grid--four { gap: 24px 12px; }
  .dc-reasons .reasons-grid--four .reason { width: clamp(150px, 22vw, 200px); }
}
.dc-reasons .reasons-grid--four .reason p {
  font-size: clamp(15px, 1.3vw, 18px);
  max-width: 28ch;
  line-height: 1.35;
  text-align: center;
  /* 2 lines, level across all 4 */
  min-height: 2.7em;
}

@media (max-width: 1000px) {
  .dc-reasons .reasons-grid.reasons-grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 32px; }
  .dc-reasons .reasons-grid--four .reason .r-tag { font-size: clamp(36px, 4.5vw, 56px); }
}
/* body copy hint at 3 lines but allow natural flow */
.dc-reasons .reason p {
  min-height: 4.2em;
}
.dc-reasons .reason .r-tag {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(40px, 4.5vw, 64px);
  letter-spacing: 0;
  line-height: 0.82;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 20px;
}
.dc-reasons .reason .r-tag .pop { display: block; color: var(--ink); }
.dc-reasons .reason .r-tag .pop.pop-accent { color: var(--c02); }
.dc-reasons .reason p {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(17px, 1.6vw, 22px);
  line-height: 1.4;
  color: var(--ink-soft);
  margin: 0;
}
@media (max-width: 800px) {
  .dc-reasons .reasons-grid { grid-template-columns: 1fr; gap: 36px; }
}

/* ============ MENU ============ */
.dc-sec { padding: var(--space-section) 0; }
.dc-sec h2 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(56px, 9vw, 120px);
  letter-spacing: 0.5px;
  line-height: 0.92;
  text-transform: uppercase;
  margin: 0 0 16px;
  color: var(--ink);
}
.dc-sec .lede {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(20px, 2vw, 28px);
  color: var(--ink);
  margin: 0 0 80px;
  max-width: 620px;
}
.grid-head {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 28px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.dc-menu-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(50px, 4.5vw, 72px) 36px;        /* row gap -50% from previous */
}
/* Cream-liqueur top row · same 4-col grid as bars · 3 items fill cols 1–3, col 4 stays empty so circles render at the bar size */
.dc-menu-grid.dc-menu-grid--three {
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: clamp(56px, 6vh, 88px);     /* breathing room before the bar grid */
}
@media (max-width: 800px) {
  .dc-menu-grid.dc-menu-grid--three { grid-template-columns: repeat(2, 1fr); }
}
.dc-menu-grid .empty-slot {
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(18px, 1.6vw, 22px);
  letter-spacing: 0;
  text-transform: none;
  color: #fff;
  aspect-ratio: 1;
  width: 100%;
  border: none;
  background: var(--ink);                /* black circle */
  border-radius: 50%;
  line-height: 1.3;
  padding: 0 18px;
  margin-bottom: 18px;                   /* match .dot spacing */
}
/* Empty flavour slot · matches the other flavour-card frame size, but black circle with a ? */
.dc-flavour .dot--question {
  width: 100%;
  margin: 0;
  aspect-ratio: 5 / 6;                        /* matches the pack frame so the cell lines up visually */
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.dc-flavour .dot--question::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;                          /* full-width circle · matches the visible circle in the pack composites */
  aspect-ratio: 1;
  background: var(--ink);
  border-radius: 50%;
  z-index: 0;
}
.dc-flavour .dot--question span {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 1;                      /* lock the ? glyph centred inside the circle, not the 5:6 box */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.dc-flavour .dot--question span {
  position: relative;
  z-index: 1;
  font-family: 'Barlow Condensed', sans-serif;       /* match the all-caps flavour-grid lockup */
  font-style: normal;
  font-weight: 900;
  color: #fff;
  font-size: clamp(80px, 10vw, 140px);
  line-height: 1;
  transform: translateY(-4px);
}
.dc-flavour { text-align: center; cursor: pointer; text-decoration: none; color: var(--ink); display: block; position: relative; }
.dc-flavour:hover { text-decoration: none; }

/* Best-seller ribbon · sits above the dot · accent flavour colour */
.dc-flavour .flavour-ribbon {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  background: var(--card-c, var(--c11));
  color: #fff;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 10.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  box-shadow: 2px 2px 0 var(--ink);
  z-index: 2;
  white-space: nowrap;
  pointer-events: none;
}
@media (max-width: 600px) {
  .dc-flavour .flavour-ribbon {
    font-size: 9px;
    letter-spacing: 1px;
    padding: 4px 10px;
    top: -4px;
  }
}
/* Dot is just the frame · composite PNG (circle + pack pre-cropped) is the entire visual */
.dc-flavour .dot {
  width: 100%;
  aspect-ratio: 5 / 6;                     /* matches the 1000×1200 composite ratio */
  margin-bottom: 14px;
  position: relative;
  background: transparent;
}
.dc-flavour .dot .pack {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.45s cubic-bezier(.2,.7,.3,1);
}
/* Hover swap · default fades out, hover image fades in · both lift slightly */
.dc-flavour .dot .pack--hover { opacity: 0; }
.dc-flavour:hover .dot .pack          { opacity: 0; }
.dc-flavour:hover .dot .pack--hover   { opacity: 1; }
.dc-flavour:hover .dot .pack,
.dc-flavour:hover .dot .pack--hover {
  transform: scale(1.03);
}
.dc-flavour .name {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(16px, 1.25vw, 20px);     /* slightly smaller so longer names like "Snap Crackle Shop" stay on one line */
  letter-spacing: 0.2px;
  line-height: 1;
  text-transform: uppercase;
  margin-bottom: 14px;
  color: var(--ink);
  white-space: nowrap;
}
.dc-flavour .name::after {
  content: '\00A0· 80g';                       /* non-breaking space · keeps unit attached to last word */
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;                            /* matches flavour name weight */
  font-size: 1em;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--ink);                           /* full black like flavour name */
  margin-left: 4px;
  display: inline;
  white-space: nowrap;                          /* "70cl" / "80g" never breaks internally */
}
.dc-flavour--bottle .name {
  white-space: nowrap;                          /* whole bottle name + unit stays on one line */
  /* font-size left at default clamp(18,1.4vw,22px) · same as cocoa bars */
}
.dc-flavour--bottle .name::after {
  content: '\00A0· 70cl';                       /* unit attached to last word, never wraps */
}
.dc-flavour .price {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 400;
  font-size: clamp(22px, 2vw, 28px);
  letter-spacing: 0.5px;
  text-transform: none;
  color: var(--ink-mute);              /* light black · sits quietly under the name */
  margin-bottom: 12px;
}
.dc-flavour .resting-price { display: none; }   /* price + Add to bag now lives in the .add-btn line below */
.dc-flavour .dot { position: relative; }
.dc-flavour .add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 12px auto 0;
  padding: 10px 22px;
  background: var(--paper);
  color: var(--ink);
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.dc-flavour:hover .add-btn { opacity: 1; }
.dc-flavour .add-btn .b-price {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 400;                         /* same weight as 80g */
  font-size: 24px;                          /* size preserved */
  letter-spacing: 0;
  line-height: 1;
}
.dc-flavour .add-btn .b-sep {
  font-weight: 400;
  opacity: 0.45;
  font-size: 18px;
  line-height: 1;
}
.dc-flavour .add-btn .b-cta {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 400;
  font-size: 24px;                          /* match price size */
  letter-spacing: 0.5px;
  text-transform: uppercase;                /* ADD TO BAG in caps */
}
.dc-flavour .add-btn:hover {
  background: var(--card-c, var(--c02));    /* hover flashes to flavour colour */
  color: #fff;
  border-color: var(--card-c, var(--c02));
}
.dc-flavour .add-btn:hover .b-sep { opacity: 0.6; }
.dc-flavour .add-btn:active { transform: translateY(0); }
/* Add to bag pill stays visible on touch · no special handling needed */
@media (max-width: 800px) {
  .dc-menu-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 18px; }
}

/* ============ BUNDLES ============ */
.dc-bundles { background: var(--paper-soft); padding: var(--space-section) 0; }
.dc-bundles h2 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(56px, 9vw, 120px);
  letter-spacing: 0.5px;
  line-height: 0.92;
  text-transform: uppercase;
  margin: 0 0 14px;
  color: var(--ink);
}
.dc-bundles .lede {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(20px, 2vw, 28px);
  color: var(--ink);
  margin: 0 0 64px;
  max-width: 620px;
}
.dc-bundle-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));   /* 3 cards per row · bars on top, bottles below */
  gap: 20px;
}
@media (max-width: 900px) { .dc-bundle-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .dc-bundle-cards { grid-template-columns: 1fr; } }

/* 3-column variant · explicit (kept as alias for the bottles row) */
.dc-bundle-cards.dc-bundle-cards--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 900px) { .dc-bundle-cards.dc-bundle-cards--three { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .dc-bundle-cards.dc-bundle-cards--three { grid-template-columns: 1fr; } }

/* Bottles row · keep airy spacing from the bars row above */
.dc-bundle-cards--bottles {
  margin-top: 28px;
}

/* ============ CREAM LIQUEUR BUNDLE STRIP · slim variant, no circles, sits on dark .dc-liqueur ============ */
.liqueur-bundles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 56px;
}
/* Vertical stack · matches the PDP cross-sell treatment · uniform height across 3 cards */
.lb-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 24px 22px;
  min-height: 180px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.lb-card:hover {
  background: rgba(255,255,255,0.09);
  border-color: rgba(255,255,255,0.45);
  transform: translateY(-2px);
}
.lb-card.is-featured {
  background: var(--paper-soft);
  border-color: var(--paper-soft);
  color: var(--ink);
}
.lb-card.is-featured:hover {
  background: #fff;
  border-color: #fff;
}
.lb-card .lb-qty {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: rgba(255,255,255,0.55);
}
.lb-card.is-featured .lb-qty { color: var(--ink-mute); }
.lb-card .lb-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(22px, 2vw, 28px);
  letter-spacing: 0.3px;
  text-transform: uppercase;
  line-height: 0.95;
}
.lb-card .lb-sub {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.45;
  color: rgba(255,255,255,0.78);
  margin-top: 2px;
}
.lb-card.is-featured .lb-sub { color: var(--ink); opacity: 0.7; }
.lb-card .lb-price {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(34px, 3vw, 44px);
  letter-spacing: -0.5px;
  line-height: 1;
  margin-top: auto;          /* pin price to the bottom · equalises card heights */
}
.lb-card .lb-badge {
  position: absolute;
  top: -10px;
  left: 18px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background: var(--c02);
  color: #fff;
  padding: 4px 12px;
}
@media (max-width: 900px) {
  .liqueur-bundles { grid-template-columns: 1fr; }
}
.dc-bundle {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 40px 32px 32px;
  display: flex; flex-direction: column;
  position: relative;
}
.dc-bundle.most-ordered {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.dc-bundle.most-ordered .title { color: #fff; }
.dc-bundle.most-ordered .sub { color: rgba(255,255,255,0.6); }
.dc-bundle.most-ordered .price { color: #fff; }
.dc-bundle.most-ordered .save { color: rgba(255,255,255,0.65); }
.dc-bundle.most-ordered .cta { background: #fff; color: var(--ink); }
.dc-bundle.most-ordered .stack .b { border: 2px solid var(--ink); }
.dc-bundle .badge {
  position: absolute;
  top: -12px; left: 32px;
  background: #ef3f51;
  color: #fff;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
}
.dc-bundle .title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(40px, 4.5vw, 64px);
  letter-spacing: 0;
  line-height: 0.92;             /* clear two-line break · "Try-Me / Trio." reads as two words */
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 8px;
}
.dc-bundle .title .ln {
  display: block;
  white-space: nowrap;                   /* "Try-Me" stays one piece · no break at the hyphen */
}
.dc-bundle .sub {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  font-size: clamp(15px, 1.4vw, 18px);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 18px;
}
.dc-bundle .stack {
  display: flex; gap: 8px;
  margin-bottom: 24px;
  min-height: 70px;
  align-items: center;
  flex-wrap: wrap;
}
.dc-bundle .stack .b {
  width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0;
}
.dc-bundle .price-block {
  margin-top: auto;        /* pushes block to bottom · all 3 cards aligned */
  margin-bottom: 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dc-bundle .price {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(34px, 3.6vw, 44px);
  letter-spacing: 0;
  color: var(--ink);
  line-height: 1;
}
.dc-bundle .save {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 1.9vw, 26px);     /* readable · under price */
  letter-spacing: 0;
  text-transform: none;
  color: var(--c02);                        /* Hail Mary Berry pop */
  line-height: 1.1;
}
.dc-bundle.most-ordered .save { color: var(--c01); }   /* Honey yellow on dark card */
.dc-bundle .cta {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 12px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase;
  padding: 14px 26px;
  background: var(--ink); color: #fff;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  align-self: flex-start;
  text-decoration: none;
  text-align: center;
  min-width: 200px;                     /* every "Pick your X" pill renders identical width */
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s;
}
.dc-bundle .cta:hover {
  background: var(--c02);                    /* Hail Mary Berry red */
  border-color: var(--c02);
  color: #fff;
  transform: translateY(-1px);
}
.dc-bundle.most-ordered .cta:hover {
  background: var(--c01);                    /* Honey on the dark card */
  border-color: var(--c01);
  color: var(--ink);
}
@media (max-width: 900px) { .dc-bundle-cards { grid-template-columns: 1fr; } }

/* ============ LIQUEUR SPOTLIGHT ============ */
.dc-liqueur {
  background: var(--ink); color: #fff;
  padding: var(--space-section) 0;
}
.dc-liqueur .row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6vw;
  align-items: start;                          /* top of master image aligns with top of CRE*M headline */
}
.dc-liqueur h2 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(56px, 9vw, 120px);
  letter-spacing: 0.5px;
  line-height: 0.85;   /* descender clearance · "liqueur" has p · matches content-page heroes */
  text-transform: uppercase;
  margin-bottom: 30px;
  color: #fff;
}
.dc-liqueur h2 em {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 0.7em;
  letter-spacing: 0;
  line-height: 0.92;                   /* nudged back out · serif ascenders clear the caps above */
  margin-top: 0.08em;                  /* fraction of breathing room so it doesn't kiss "liqueur" */
  text-transform: lowercase;
  color: #f87498 !important;
  display: block;
}
.dc-liqueur .lede {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(18px, 1.8vw, 24px);
  color: rgba(255,255,255,0.85);
  margin-bottom: 28px;
  max-width: 500px;
  line-height: 1.45;
}
.dc-liqueur .specs {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 32px;
}
.dc-liqueur .cta {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 13px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase;
  padding: 16px 30px;
  background: #fff; color: var(--ink);
  border: 1.5px solid #fff;
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s;
}
.dc-liqueur .cta:hover {
  background: var(--c13);                    /* Loaded Chocolate purple */
  color: #fff;
  border-color: var(--c13);
  transform: translateY(-1px);
}

/* Three flavour CTAs · single row, equal-width thirds · stays on one line */
.dc-liqueur .liqueur-ctas {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 10px;
  align-items: stretch;
  margin-top: 4px;
  width: 100%;
}
.dc-liqueur .cta.cta--liq {
  flex: 1 1 auto;                            /* size to content · no truncation · longer labels get wider */
  text-align: center;
  background: var(--cta-c, var(--c13));      /* colour-first · the bottle colour shows by default */
  color: #fff;
  border: 1.5px solid var(--cta-c, var(--c13));
  padding: 13px 16px;
  font-size: 10.5px;
  letter-spacing: 1.2px;
  white-space: nowrap;
  line-height: 1.1;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.dc-liqueur .cta.cta--liq:hover {
  background: transparent;                   /* hover · outline reveal */
  border-color: rgba(255,255,255,0.7);
  color: #fff;
}
@media (max-width: 700px) {
  .dc-liqueur .liqueur-ctas { flex-wrap: wrap; }
  .dc-liqueur .cta.cta--liq { flex: 1 1 100%; font-size: 12px; letter-spacing: 1.5px; }
}
.dc-liqueur .row {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);  /* bottle column wider · gives the bigger master-link room to render at full size */
}
.dc-liqueur .stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
/* ---- One master bottle + 3 toggle circles ---- */
.dc-liqueur .bottle-toggle {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 26px;
  padding-right: clamp(0px, 1.2vw, 18px);   /* minimal inset · just enough to keep clear of the section edge */
  max-width: 100%;
  min-width: 0;
}
.dc-liqueur .bottle-toggle .master {
  text-align: left;
  width: auto;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.dc-liqueur .bottle-toggle .master-link {
  display: block;
  /* -25% from clamp(400, 50vw, 640) per design feedback */
  width: clamp(300px, 37.5vw, 480px);
  transition: transform 0.25s ease;
}
.dc-liqueur .bottle-toggle .master-link:hover { transform: translateY(-2px); }
.dc-liqueur .bottle-toggle .master-img {
  width: 100%;
  height: auto;
  display: block;
  transition: opacity 0.25s ease;
}
.dc-liqueur .bottle-toggle .master-img.is-fading { opacity: 0; }
.dc-liqueur .bottle-toggle .master-meta {
  text-align: center;
  max-width: 320px;
}
.dc-liqueur .bottle-toggle .master-meta .name {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(26px, 2.6vw, 34px);
  letter-spacing: 0.3px;
  line-height: 1;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 6px;
}
.dc-liqueur .bottle-toggle .master-meta .note {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(15px, 1.4vw, 18px);
  color: rgba(255,255,255,0.75);
}
.dc-liqueur .bottle-toggle .toggles {
  display: flex;
  gap: 14px;
}
.dc-liqueur .bottle-toggle .toggle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid #fff;
  background: var(--toggle-c);
  cursor: pointer;
  padding: 0;
  position: relative;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.dc-liqueur .bottle-toggle .toggle:hover { transform: scale(1.08); }
.dc-liqueur .bottle-toggle .toggle.is-active {
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--toggle-c);
  transform: scale(1.08);
}
.dc-liqueur .bottle-toggle .toggle .sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.dc-liqueur .bottle {
  display: grid;
  grid-template-columns: minmax(140px, 32%) 1fr;
  align-items: center;
  gap: 22px;
  text-decoration: none;
  color: #fff;
  transition: transform 0.2s, opacity 0.2s;
}
.dc-liqueur .bottle:hover { transform: translateX(4px); opacity: 0.92; }
.dc-liqueur .bottle img {
  width: 100%;
  height: auto;
  display: block;
}
.dc-liqueur .bottle .name {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(22px, 2.2vw, 32px);
  letter-spacing: 0.3px;
  line-height: 0.95;
  text-transform: uppercase;
  margin-bottom: 8px;
  color: #fff;
}
.dc-liqueur .bottle .note {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(15px, 1.4vw, 19px);
  color: rgba(255,255,255,0.78);
  line-height: 1.4;
}
@media (max-width: 900px) {
  .dc-liqueur .row { grid-template-columns: 1fr; gap: 48px; }
  .dc-liqueur .stack { gap: 16px; }
}

/* Bottle bundle ladder · 3 rungs · 1 / Two of Us / All Three */
.dc-liqueur .bottle-ladder {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 6vh;
  padding-top: 4vh;
  border-top: 1px solid rgba(255,255,255,0.18);
}
@media (max-width: 800px) { .dc-liqueur .bottle-ladder { grid-template-columns: 1fr; gap: 12px; } }
.dc-liqueur .bottle-ladder .rung {
  display: block;
  padding: 26px 26px 22px;
  background: var(--rung-c, rgba(255,255,255,0.08));
  border: 1px solid transparent;
  color: #fff;                                /* white on every rung · pink stays pink */
  text-decoration: none;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  border-radius: 2px;
}
.dc-liqueur .bottle-ladder .rung:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 rgba(0,0,0,0.35);
}
.dc-liqueur .bottle-ladder .rung-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(20px, 1.8vw, 26px);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1;
  margin-bottom: 6px;
  color: #fff;
}
.dc-liqueur .bottle-ladder .rung-meta {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(13px, 0.95vw, 15px);
  color: rgba(255,255,255,0.78);
  margin-bottom: 16px;
  line-height: 1.3;
}
.dc-liqueur .bottle-ladder .rung-price {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(30px, 2.8vw, 40px);
  letter-spacing: 0;
  line-height: 1;
  color: #fff;
}
.dc-liqueur .bottle-ladder .rung-save {
  font-family: 'Instrument Serif', serif;       /* italic to match the bundle-card pitch style */
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 1.9vw, 26px);          /* matches Trio bundle .save · readable parity */
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255,255,255,0.85);
  margin-left: 10px;
  display: inline-block;
  white-space: nowrap;
  vertical-align: baseline;
}
.dc-liqueur .bottle-ladder .rung-meta {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(15px, 1.15vw, 18px);          /* nudged up to match bundle .pitch */
  color: rgba(255,255,255,0.85);
  margin-bottom: 16px;
  line-height: 1.4;
}

/* ============ STORY · PRICE ROW ============ */
.dc-story {
  background: var(--c13);                                     /* Loaded Chocolate purple */
  color: #fff;
  padding: 64px 0 64px;
  position: relative;
  overflow: hidden;
}
.dc-story .big-num { color: #fff !important; }                /* YES £25! in white */
.dc-story .big-num .eyebrow { color: var(--c14) !important; }   /* Sooo Original blue eyebrow */
.dc-story .punch.red { color: var(--c14) !important; }        /* Trust us · Sooo Original blue */
.dc-story .editorial { color: #fff !important; }              /* body copy white */
/* Hard-strip every internal element that could carry extra height */
.dc-story .row-price,
.dc-story .frame,
.dc-story .frame-row,
.dc-story .body { margin: 0; padding: 0; min-height: 0; }
.dc-story .editorial { margin: 0 !important; padding: 0; }
.dc-story .editorial:last-child { margin-bottom: 0; }
.dc-story .body > :last-child { margin-bottom: 0; }
.dc-story .frame-row { align-items: start; }                  /* explicit · big-num + body top-align */
.dc-story + .dc-sec { padding-top: var(--space-flow); }
.dc-story .frame { position: relative; z-index: 2; }
.dc-story .frame-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 0;
  border-bottom: none;
  margin-bottom: 40px;
}
.dc-story .frame-top .tag {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink);
}
.dc-story .frame-top .stamp {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 15px;
  color: var(--ink-mute);
}
.dc-story .frame-row {
  position: relative;
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 5vw;
  align-items: start;              /* top-align · £25 lines up with first line of punch */
  margin-bottom: 0;
}
.dc-story .frame-row.flip { grid-template-columns: 7fr 5fr; }
.dc-story .big-num {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(72px, 9vw, 150px);           /* slightly trimmed · still bold, no longer towering over the right column */
  letter-spacing: 0;
  line-height: 0.84;
  text-transform: uppercase !important;
  color: var(--ink);
}
.dc-story .big-num .ln {
  display: block;
  white-space: nowrap;
  text-transform: uppercase !important;
}
.dc-story .big-num .eyebrow {
  display: block;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600;
  font-size: 11px !important;
  letter-spacing: 4px !important;
  line-height: 1.4;
  text-transform: uppercase !important;
  color: var(--c14) !important;       /* Sooo Original blue · was ink-mute on cream */
  margin-bottom: 14px;
  font-style: normal !important;
}
.dc-story .punch {
  display: block;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(40px, 4.5vw, 64px);
  letter-spacing: 0.5px;
  line-height: 0.92;
  text-transform: uppercase;
  margin: 0 0 16px;                /* tightened · less vertical real estate between punch + editorial */
  max-width: 560px;
}
.dc-story .punch .ln {
  display: block;
  white-space: nowrap;             /* never break a punch line mid-phrase */
}
.dc-story .punch.red { color: var(--c01) !important; }   /* Honey yellow · complementary to the purple bg, no clash */
.dc-story .punch.teal { color: var(--c01) !important; }
.dc-story .editorial {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(18px, 1.8vw, 24px);
  line-height: 1.35;
  margin-bottom: 20px;
  max-width: 540px;
  color: var(--ink);
}
.dc-story p:not(.editorial) {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 500px;
  margin: 0;                              /* kill default <p> trailing margin · keeps bottom space equal to top */
}
.dc-story .body > :last-child { margin-bottom: 0; }  /* belt + braces · whatever ends the column, no extra bottom margin */
.dc-story .frame-bottom {
  margin-top: 40px;
  padding-top: 0;
  border-top: none;
  display: flex;
  justify-content: space-between;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-mute);
  position: relative; z-index: 2;
}
.dc-story .row-price { position: relative; }
.dc-story .row-price .story-dots {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;
}
.dc-story .row-price .sd {
  position: absolute;
  width: 180px; height: 180px;
  border-radius: 50%;                          /* full colour · no opacity drop on the purple bg */
}
/* Pack-image circles · cropped off the edge against the white border */
.dc-story .row-price .sd--pack {
  width: 260px; height: 260px;
  background: none !important;          /* override inline background */
  border-radius: 50%;
  overflow: visible;                    /* let the pack composition breathe */
  z-index: 1;
}
.dc-story .row-price .sd--pack img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
@media (max-width: 900px) {
  .dc-story .row-price .sd--pack { width: 200px; height: 200px; }
}
@media (max-width: 700px) {
  .dc-story .row-price .sd { width: 120px; height: 120px; }
  .dc-story .row-price .sd--pack { width: 150px; height: 150px; }
  .dc-story .frame-row, .dc-story .frame-row.flip { grid-template-columns: 1fr; gap: 32px; }
}

/* ============ ALL-COW ROW · DEFAULT = WHITE BG · BLACK TEXT · PURPLE POP ============ */
/* Add `.dc-cow-row--dark` for the inverted version (used on the About page) */
.dc-cow-row {
  background: var(--paper);
  color: var(--ink);
  padding: var(--space-flow) 0 var(--space-section);   /* small top · the reasons-grid below pulls up into the bottom · matches visually */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  text-align: center;
}
.dc-cow-row .cow-statement {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(56px, 9vw, 130px);
  line-height: 0.85;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 24px;
}
.dc-cow-row .cow-statement .ln {
  display: block;
  white-space: nowrap;
}
.dc-cow-row .cow-statement .ln.pop { color: var(--c13); }   /* Loaded Chocolate purple on white */
.dc-cow-row .cow-punch {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 48px);
  color: var(--c13);
  margin-bottom: 21px;
  letter-spacing: 0;
  line-height: 1.1;
}
.dc-cow-row .cow-editorial {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(18px, 2vw, 26px);
  color: var(--ink-soft);
  max-width: 760px;
  margin: 0 auto 18px;
  line-height: 1.4;
}
/* Dark variant · used on the About page · keeps pink pop against ink */
.dc-cow-row--dark { background: var(--ink); color: #fff; }
.dc-cow-row--dark .cow-statement { color: #fff; }
.dc-cow-row--dark .cow-statement .ln.pop { color: var(--c11); }
.dc-cow-row--dark .cow-punch { color: var(--c11); }
.dc-cow-row--dark .cow-editorial { color: rgba(255,255,255,0.78); }
.dc-cow-row--dark .cow-tag { color: rgba(255,255,255,0.5); }
.dc-cow-row .cow-tag {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: clamp(12px, 1.1vw, 15px);
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--ink-mute);
  max-width: 760px;
  margin: 0 auto;
}

/* ============ SUBSCRIBE ============ */
.dc-sub { background: var(--paper); padding: var(--space-section) 0; }

/* ============ Threesome section · DARK VARIANT (per design feedback) ============
   Black background · type inverted · triangle bar stack on the right
   Replaces the broken benefits table with clean inline pills. */
.dc-sub.dc-sub--dark {
  background: var(--ink, #1a1a1a);
  color: #fff;
}
.dc-sub.dc-sub--dark .eyebrow {
  display: inline-block;
  color: rgba(255,255,255,0.6);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 10px;     /* was 18 · pulls h2 up */
}
.dc-sub.dc-sub--dark h2 {
  font-family: 'Barlow Condensed', 'Anton', sans-serif;
  font-weight: 900;
  font-size: clamp(44px, 6vw, 84px);   /* sized so each .ln fits one line in the column */
  line-height: 0.88;
  letter-spacing: 0.5px;
  color: #fff;
  margin: 0 0 14px;
  text-transform: uppercase;
}
.dc-sub.dc-sub--dark h2 .ln {
  display: block;
  white-space: nowrap;                  /* belt-and-braces: never wrap a single .ln */
}
.dc-sub.dc-sub--dark h2 .ln.pop {
  color: var(--c11, #ff5277);   /* cherry pop accent on the punch word */
}
.dc-sub.dc-sub--dark .sub-tag {
  font-family: 'Barlow Condensed', 'Anton', sans-serif;
  font-weight: 900;
  font-size: clamp(26px, 3vw, 40px);    /* clearly smaller than the H2, still punchy */
  line-height: 1;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 18px;
}
.dc-sub.dc-sub--dark .sub-tag .st-pop {
  color: var(--c11, #ff5277);           /* the pink — matches the .pop in the H2 */
}
.dc-sub.dc-sub--dark .lede {
  color: rgba(255,255,255,0.78);
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.45;
  margin: 0 0 16px;        /* was 36 · table sits closer to lede */
  max-width: 540px;
}
/* Numbered benefits table on dark · inherits structure from .dc-sub ul.benefits but inverts colours */
.dc-sub.dc-sub--dark ul.benefits {
  margin: 0 0 18px;        /* was 32 · CTA pulls up tight under the table */
}
.dc-sub.dc-sub--dark ul.benefits li {
  border-color: rgba(255,255,255,0.12);
}
.dc-sub.dc-sub--dark ul.benefits .b-num {
  color: rgba(255,255,255,0.45);
}
/* Arrow variant · replaces numbers with hot-pink → arrows */
.dc-sub ul.benefits.benefits--arrows .b-num {
  color: var(--c11, #ff5277);
  font-family: 'Inter', sans-serif;
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
}
.dc-sub.dc-sub--dark ul.benefits.benefits--arrows .b-num {
  color: var(--c11, #ff5277);   /* stays hot pink on dark bg */
}
.dc-sub.dc-sub--dark ul.benefits .b-copy,
.dc-sub.dc-sub--dark ul.benefits .b-copy strong {
  color: #fff;
}
.dc-sub.dc-sub--dark .sub-cta {
  background: var(--c11, #ff5277);
  color: #fff;
}
.dc-sub.dc-sub--dark .sub-cta:hover {
  background: #fff;
  color: var(--ink);
  border-color: #fff;
}
/* Without these, .sub-cta-meta (rgba white 0.7) and its border-left (rgba white 0.32)
   disappear when the CTA hovers white. Re-colour them dark on hover so they stay readable. */
.dc-sub.dc-sub--dark .sub-cta:hover .sub-cta-meta {
  color: rgba(0,0,0,0.65);
  border-left-color: rgba(0,0,0,0.25);
}
.dc-sub.dc-sub--dark .sub-cta:hover .sub-cta-price,
.dc-sub.dc-sub--dark .sub-cta:hover .sub-cta-arrow {
  color: var(--ink);
}

/* ---- Triangle bar stack · 1 top, 2 below ---- */
.dc-sub--dark .bar-triangle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 1.5vw, 24px);
  padding: clamp(16px, 2vw, 32px) 0;
}
.dc-sub--dark .bar-triangle .bar-row {
  display: flex;
  gap: clamp(12px, 1.5vw, 24px);
  justify-content: center;
}
.dc-sub--dark .bar-triangle .tri-bar {
  width: clamp(140px, 18vw, 240px);
  height: auto;
  display: block;
  /* No rotation per design feedback · straight bars in clean triangle */
}
.dc-sub .grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;        /* copy column slightly wider · visual narrower */
  gap: 5vw;
  align-items: start;                  /* dot-stack visual aligns with the top of the copy */
}
.dc-sub h2 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(44px, 7vw, 96px);
  letter-spacing: 0.5px;
  line-height: 0.85;   /* descender clearance · "tasty" has y · matches content-page heroes */
  text-transform: uppercase;
  margin-bottom: 24px;
  color: var(--ink);
}
.dc-sub .lede {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(18px, 2vw, 26px);
  color: var(--ink);
  margin-bottom: 28px;
  max-width: 460px;
}
/* Benefits list · 3 numbered rows · sales-y framing */
.dc-sub ul.benefits {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  border-top: 2px solid var(--ink);
}
.dc-sub ul.benefits li {
  display: grid;
  grid-template-columns: 52px 1fr;     /* tighter numeral column */
  gap: 16px;
  align-items: center;
  padding: 6px 4px;                    /* -20% from 8px · tighter row gap per design feedback */
  border-bottom: 1px solid var(--line);
}
.dc-sub ul.benefits li:last-child {
  border-bottom: 2px solid var(--ink);
}
.dc-sub ul.benefits .b-num {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(22px, 2.2vw, 30px);   /* reduced from 34-48 → table now compresses noticeably */
  line-height: 0.9;
  color: var(--c11);
  letter-spacing: -0.5px;
}
.dc-sub ul.benefits .b-copy {
  font-family: 'Inter', sans-serif;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.dc-sub ul.benefits .b-copy {
  display: block;
  line-height: 1.4;
}
.dc-sub ul.benefits .b-copy strong {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  color: var(--ink);
  display: block;
  font-size: 16.5px;
  margin-bottom: 4px;
}
.dc-sub ul.benefits .b-sub {
  display: block;
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink-mute);
}
@media (max-width: 600px) {
  .dc-sub ul.benefits .b-copy strong { font-size: 15px; }
  .dc-sub ul.benefits .b-sub { font-size: 14px; }
}
@media (max-width: 600px) {
  .dc-sub ul.benefits li {
    grid-template-columns: 44px 1fr;
    gap: 16px;
    padding: 14px 4px;
  }
  .dc-sub ul.benefits .b-num { font-size: 22px; }
  .dc-sub ul.benefits .b-copy { font-size: 14.5px; }
}

/* £12 sub-cta · sits under the table, acts as the CTA */
.dc-sub .sub-cta {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 28px;
  background: var(--ink);
  color: #fff;
  border: 2px solid var(--ink);
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.2s, color 0.2s, transform 0.15s;
}
.dc-sub .sub-cta:hover {
  background: var(--c11);
  color: #fff;
  border-color: var(--c11);
  transform: translateY(-2px);
}
.dc-sub .sub-cta .sub-cta-price {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(34px, 3.4vw, 46px);
  line-height: 1;
  letter-spacing: 0;
}
.dc-sub .sub-cta .sub-cta-meta {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  border-left: 1px solid rgba(255,255,255,0.32);
  padding-left: 18px;
  line-height: 1.3;
  max-width: 130px;
}
.dc-sub .sub-cta .sub-cta-arrow {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-left: auto;
  white-space: nowrap;
}
@media (max-width: 540px) {
  .dc-sub .sub-cta { flex-wrap: wrap; gap: 12px; }
  .dc-sub .sub-cta .sub-cta-meta { padding-left: 0; border-left: none; max-width: none; }
  .dc-sub .sub-cta .sub-cta-arrow { margin-left: 0; }
}
@media (max-width: 900px) { .dc-sub .grid { grid-template-columns: 1fr; gap: 40px; } }

.dc-sub .sub-visual {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 420px;            /* contains the dot-stack so the right column doesn't dominate */
  margin: 0 auto;
  justify-content: center;
  min-height: 460px;
}
.dc-sub .dot-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
}
.dc-sub .dot-stack .d {
  position: relative;
  width: clamp(110px, 12vw, 170px);       /* scaled down · less vertical real estate */
  aspect-ratio: 5 / 6;
  display: block;
}
/* each .d holds 4 stacked composite images · only one visible at a time */
.dc-sub .dot-stack .d img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  animation: traffic-cycle 8s infinite;
}
.dc-sub .dot-stack .d img:nth-child(1) { animation-delay: 0s; }
.dc-sub .dot-stack .d img:nth-child(2) { animation-delay: -2s; }
.dc-sub .dot-stack .d img:nth-child(3) { animation-delay: -4s; }
.dc-sub .dot-stack .d img:nth-child(4) { animation-delay: -6s; }
/* stagger each dot's cycle so they change like a traffic light, not in sync */
.dc-sub .dot-stack .d:nth-child(2) img { animation-delay: -0.7s; }
.dc-sub .dot-stack .d:nth-child(2) img:nth-child(2) { animation-delay: -2.7s; }
.dc-sub .dot-stack .d:nth-child(2) img:nth-child(3) { animation-delay: -4.7s; }
.dc-sub .dot-stack .d:nth-child(2) img:nth-child(4) { animation-delay: -6.7s; }
.dc-sub .dot-stack .d:nth-child(3) img { animation-delay: -1.4s; }
.dc-sub .dot-stack .d:nth-child(3) img:nth-child(2) { animation-delay: -3.4s; }
.dc-sub .dot-stack .d:nth-child(3) img:nth-child(3) { animation-delay: -5.4s; }
.dc-sub .dot-stack .d:nth-child(3) img:nth-child(4) { animation-delay: -7.4s; }

@keyframes traffic-cycle {
  0%, 22%   { opacity: 1; }              /* visible for ~22% of the 8s cycle */
  25%, 100% { opacity: 0; }              /* hidden for the rest */
}
.dc-sub .sub-stamp {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(-6deg);
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 18px 32px;
  text-align: center;
  box-shadow: 4px 4px 0 var(--ink);
}
.dc-sub .sub-stamp .big {
  display: block;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(32px, 3.6vw, 48px);
  letter-spacing: 0;
  line-height: 0.9;
  color: var(--ink);
}
.dc-sub .sub-stamp .sm {
  display: block;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 4px;
}

/* ============ REVIEWS ============ */
.dc-reviews { padding: var(--space-section) 0; }
.dc-reviews h2 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(48px, 7vw, 84px);
  letter-spacing: 0.5px;
  line-height: 0.85;
  text-transform: uppercase;
  margin: 0 0 14px;
  text-align: center;
  color: var(--ink);
}
.dc-reviews h2 .pop { color: #ef3f51 !important; }
.dc-reviews .meta {
  text-align: center;
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(18px, 1.6vw, 22px);
  color: var(--ink-mute);
  margin-bottom: 64px;
}
.dc-reviews .meta strong {
  font-family: 'Barlow Condensed', sans-serif;
  font-style: normal;
  font-weight: 800;
  font-size: 1.1em;
  letter-spacing: 0;
  color: var(--ink);
}
/* Reviews · revolving right-to-left track */
.dc-reviews-track-wrap {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  padding: 16px 0 24px;
  mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.dc-reviews-track {
  display: flex;
  gap: 36px;
  width: max-content;
  animation: review-roll 80s linear infinite;
}
.dc-reviews-track:hover { animation-play-state: paused; }
.dc-reviews-track .dc-review {
  flex: 0 0 clamp(280px, 30vw, 420px);
  border-top: 3px solid var(--ink);
  padding: 22px 0 24px;
}
@keyframes review-roll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.dc-review-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.dc-review {
  border-top: 3px solid var(--ink);
  padding: 22px 0 24px;
}
.dc-review .stars {
  font-size: 26px;                         /* bigger */
  letter-spacing: 3px;
  margin-bottom: 14px;
  color: var(--review-flash, var(--c02));   /* per-card flash */
  line-height: 1;
}
.dc-review .who .dot {
  background: var(--review-flash, var(--c02)) !important;
}
.dc-review .quote {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.35;
  color: var(--ink);
  margin-bottom: 22px;
  min-height: 4.05em;                       /* lock to 3 lines */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dc-review .who {
  display: flex; align-items: center; gap: 12px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: var(--ink-mute);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.dc-review .who .dot {
  width: 16px; height: 16px; border-radius: 50%;
}
.dc-review .who strong { color: var(--ink); font-weight: 600; }
@media (max-width: 900px) { .dc-review-grid { grid-template-columns: 1fr; } }

/* ============ AS SEEN IN · MOVING MARQUEE ============ */
.dc-press {
  background: var(--paper-soft);
  /* Substantiator band, not a feature · ~half the previous section padding */
  padding: clamp(28px, 4vh, 56px) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.dc-press .eyebrow {
  display: block;
  text-align: center;
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(20px, 2.4vw, 32px);   /* smaller eyebrow · less shout */
  color: var(--ink);
  margin-bottom: 20px;                    /* was 40 */
}
.press-track-wrap {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.press-track {
  display: inline-flex;
  align-items: center;           /* center logos + 2-line cheeky text on the same midline */
  gap: 36px;
  width: max-content;
  white-space: nowrap;
  animation: press-roll 80s linear infinite;
}
.press-track:hover { animation-play-state: paused; }
/* default press-track span (fallback) */
.press-track span {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(22px, 2.4vw, 32px);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1;
}

/* dot separator */
.press-track span.dot {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  color: var(--ink-mute);
  opacity: 0.55;
  letter-spacing: 0;
  font-size: 28px;
  text-transform: none;
}

/* === per-publication masthead styling === */

/* Selfridges · yellow block, condensed sans */
.press-track .logo-selfridges {
  font-family: 'Bebas Neue', sans-serif;
  font-weight: 400;
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: 4px;
  background: #FFE600;
  color: var(--ink);
  padding: 4px 14px 2px;
}

/* The Guardian · sans bold + serif italic */
.press-track .logo-guardian {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.press-track .logo-guardian .pre {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  font-size: clamp(18px, 2vw, 26px);
  letter-spacing: 0;
  color: var(--ink);
}
.press-track .logo-guardian .name {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  text-transform: none;
  font-size: clamp(24px, 2.6vw, 34px);
  letter-spacing: 0;
  color: #052962;
}

/* BBC Good Food · red BBC pill + sans */
.press-track .logo-bbc {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.press-track .logo-bbc .pill {
  background: var(--ink);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: clamp(16px, 1.6vw, 22px);
  letter-spacing: 1.5px;
  padding: 4px 8px 2px;
  text-transform: uppercase;
  line-height: 1;
}
.press-track .logo-bbc .name {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(20px, 2.2vw, 28px);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}

/* Olive Magazine · script-style italic serif */
.press-track .logo-olive {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 800;
  font-size: clamp(26px, 2.8vw, 36px);
  letter-spacing: 0;
  text-transform: none;
  color: #2d5b2e;
}

/* Vogue · widely-spaced display serif, all caps */
.press-track .logo-vogue {
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--ink);
}

/* Time Out · red block tag */
.press-track .logo-timeout {
  font-family: 'Bebas Neue', sans-serif;
  font-weight: 400;
  font-size: clamp(24px, 2.6vw, 34px);
  letter-spacing: 2px;
  background: #ef3f51;
  color: #fff;
  padding: 4px 14px 2px;
  text-transform: uppercase;
}

/* The Telegraph · serif italic, all caps small */
.press-track .logo-telegraph {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-style: italic;
  font-size: clamp(22px, 2.4vw, 30px);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}

/* Stylist · black bold geometric */
.press-track .logo-stylist {
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: clamp(22px, 2.4vw, 30px);
  letter-spacing: -1px;
  text-transform: uppercase;
  color: var(--ink);
}

/* Waitrose Food · italic serif */
.press-track .logo-waitrose {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 30px);
  letter-spacing: 0;
  text-transform: none;
  color: #5d8a48;
}

/* Monocle · small caps sans */
.press-track .logo-monocle {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: clamp(20px, 2vw, 26px);
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--ink);
}

/* the cheeky overheard-in-real-life ones · italic red */
/* Image logos inside the bottom press marquee · use the same per-logo height tuning as the top variant */
.press-track .press-logo {
  display: inline-block;
  width: auto;
  object-fit: contain;
  vertical-align: middle;
  flex-shrink: 0;
  height: clamp(48px, 6vh, 72px);
}
/* Logos +25% to read with more presence in the now-shorter band */
.press-track .press-logo--grocer     { height: clamp(100px, 12.5vh, 138px); }
.press-track .press-logo--awards     { height: clamp(100px, 12.5vh, 135px); }
.press-track .press-logo--guardian   { height: clamp(75px, 9.5vh, 110px); }
.press-track .press-logo--amazon     { height: clamp(58px, 7vh, 80px); }
.press-track .press-logo--bbc        { height: clamp(58px, 7vh, 80px); }
.press-track .press-logo--selfridges { height: clamp(48px, 5.8vh, 65px); }

.press-track span.cheeky {
  display: inline-block;        /* allow <br> to wrap onto 2 lines inside nowrap parent */
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(18px, 1.9vw, 24px);   /* smaller so 2-line block sits in same vertical space */
  line-height: 1.15;
  letter-spacing: 0;
  text-transform: none;
  color: var(--c02);
  text-align: center;
  white-space: normal;
  vertical-align: middle;
  max-width: 220px;
}
@keyframes press-roll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ============ EMAIL ============ */
.dc-email {
  background: var(--ink);
  color: #fff;
  padding: var(--space-section) 0;
  text-align: center;
}
.dc-email h2 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(48px, 7vw, 84px);
  letter-spacing: 0.5px;
  line-height: 0.85;
  text-transform: uppercase;
  margin: 0 0 18px;
  color: #fff;
}
.dc-email h2 .pop { color: var(--c15) !important; }   /* Silky Strawberry pink */
.dc-email .lede {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(18px, 2vw, 24px);
  color: rgba(255,255,255,0.85);
  max-width: 580px;
  margin: 0 auto 40px;
}
.dc-email-form {
  display: flex;
  max-width: 560px;
  margin: 0 auto;
  gap: 0;
  border: 1.5px solid #fff;
  border-radius: 999px;
  overflow: hidden;
  background: transparent;
}
.dc-email-form input {
  flex: 1;
  padding: 18px 26px;
  border: none;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  outline: none;
  background: transparent;
  color: #fff;
}
.dc-email-form input::placeholder { color: rgba(255,255,255,0.5); }
.dc-email-form button {
  padding: 16px 30px;
  border: none;
  background: #fff; color: var(--ink);
  font-family: 'Inter', sans-serif;
  font-size: 13px; font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
}
.dc-email .small {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: rgba(255,255,255,0.6);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: 22px;
}

/* ============ FOOTER ============ */
.dc-footer {
  background: var(--paper);
  border-top: 1px solid var(--line);
  padding: 0 6vw;
}
.dc-footer-main {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(56px, 8vh, 96px) 0 clamp(40px, 6vh, 64px);
}
.dc-footer-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr) 1.4fr;
  gap: clamp(28px, 4vw, 56px);
}
.dc-footer-eyebrow {
  display: block;
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(15px, 1.3vw, 17px);
  color: var(--ink-mute);
  margin-bottom: 18px;
}
.dc-footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.dc-footer-col li {
  margin: 0 0 10px;
}
.dc-footer-col li a {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: clamp(13px, 1.05vw, 15px);
  color: var(--ink);
  text-decoration: none;
  transition: color 0.15s ease;
}
.dc-footer-col li a:hover { color: var(--c02); }

.dc-footer-col--email .dc-footer-blurb {
  font-family: 'Instrument Serif', serif;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.45;
  color: var(--ink);
  margin: 0 0 16px;
  max-width: 30ch;
}
.dc-footer-col--email .dc-footer-blurb em {
  font-style: italic;
  color: var(--c02);
}
.dc-footer-form {
  display: flex;
  gap: 0;
  border: 1px solid var(--ink);
  background: #fff;
  max-width: 340px;
}
.dc-footer-form input[type="email"] {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 10px 14px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--ink);
  min-width: 0;
}
.dc-footer-form input[type="email"]:focus {
  outline: none;
  background: var(--paper-soft);
}
.dc-footer-form button {
  border: 0;
  background: var(--ink);
  color: #fff;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 12px;
  padding: 0 16px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.dc-footer-form button:hover { background: var(--c02); }
.dc-footer-small {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.5px;
  color: var(--ink-mute);
  margin-top: 10px;
  max-width: 32ch;
}

.dc-footer-sig {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 0 28px;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  align-items: center;
}
.dc-footer-sig .left, .dc-footer-sig .right {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 600;
}
.dc-footer-sig .right { text-align: right; }
.dc-footer-sig .center em {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(16px, 1.6vw, 22px);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  font-weight: 400;
}

@media (max-width: 1000px) {
  .dc-footer-cols {
    grid-template-columns: 1fr 1fr;
    gap: 40px 32px;
  }
  .dc-footer-col--email { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .dc-footer-cols { grid-template-columns: 1fr; gap: 32px; }
  .dc-footer-sig { grid-template-columns: 1fr; text-align: center; gap: 12px; }
  .dc-footer-sig .right { text-align: center; }
}

/* ==========================================================
   PRODUCT PAGE · Cherry Pop (tpl-product-cherry-pop.php)
   --product-color is set inline per section to flavour colour
========================================================== */

/* Promo bar · slim marquee · sticky below the header on PDP */
.dc-promo-bar {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  white-space: nowrap;
  padding: 16px 0;                      /* more vertical breathing room so caps + descenders aren't clipped */
  line-height: 1.4;
  color: #fff;
  position: sticky;
  top: 64px;                            /* sits just below the sticky header */
  z-index: 49;                          /* stays under header but above content */
  background: var(--promo-bg, var(--c11));   /* fall back to Cherry Pop pink */
}
@media (max-width: 800px) {
  .dc-promo-bar { top: 56px; padding: 12px 0; }   /* header is slimmer on mobile */
}
.dc-promo-bar--cherry { background: var(--c11); }   /* legacy modifier · still works */
.dc-promo-bar a { color: inherit; text-decoration: none; cursor: pointer; }
.dc-promo-bar a:hover { text-decoration: underline; text-underline-offset: 3px; }
.dc-promo-bar .track {
  display: inline-flex;
  align-items: center;
  gap: 36px;                            /* wider spacing between offers · easier to scan */
  padding-left: 36px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: clamp(13px, 1.2vw, 16px);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  line-height: 1.45;                    /* gives each row room for descenders */
  animation: promo-roll 110s linear infinite;   /* slower · readable */
}
.dc-promo-bar { position: sticky; }      /* belt + braces · keeps sticky behaviour with the close button */
.dc-promo-close {
  position: absolute;
  top: 50%; right: 14px;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: inherit;
  width: 28px; height: 28px;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.6;
  border-radius: 50%;
  transition: opacity 0.2s, background 0.2s;
  padding: 0;
  z-index: 2;
}
.dc-promo-close:hover {
  opacity: 1;
  background: rgba(0,0,0,0.18);
}
.dc-promo-bar { padding-right: 48px; }   /* leave space for the close button */
@media (max-width: 600px) {
  .dc-promo-close {
    width: 36px; height: 36px;    /* easier tap target on mobile */
    right: 8px;
    font-size: 24px;
  }
}
.dc-promo-bar .track:hover { animation-play-state: paused; }
.dc-promo-bar .dot { opacity: 0.55; }
@keyframes promo-roll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Breadcrumb */
.dc-crumb { padding: 18px 0; }
.dc-crumb .section-inner {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.dc-crumb a { color: var(--ink-mute); }
.dc-crumb a:hover { color: var(--ink); }
.dc-crumb .here { color: var(--ink); font-weight: 600; }

/* PDP HERO */
.dc-pdp { padding: var(--space-flow) 0 var(--space-section); }
.dc-pdp .grid {
  display: grid;
  /* minmax(0, Nfr) prevents columns from auto-expanding to fit large content (long product names,
     long blurb lines, wide buttons). Without this, "SILKY STRAWBERRY" would push the info column
     wider than "SOOO ORIGINAL" and shrink the gallery column — making the bottle render at a
     different size on each PDP. Locking ratios to 1.6:1 guarantees every bottle gets identical
     gallery width. */
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 5vw;                              /* slight gap reduction frees more space for pack + info */
  align-items: start;
}
@media (max-width: 900px) {
  .dc-pdp .grid { grid-template-columns: 1fr; gap: 48px; }
}

.dc-pdp .gallery { width: 100%; max-width: 476px; margin: 0 auto; }   /* another -15% from 560 · user feedback round 3 */
.dc-pdp .visual {
  position: relative;
  aspect-ratio: 5 / 6;                 /* matches pack composite · pack now fills the frame */
  width: 100%;
  background: transparent;
  overflow: visible;
}
.dc-pdp .view {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.dc-pdp .view.active { opacity: 1; pointer-events: auto; }

/* View 1 · composite pack PNG with hover swap · fills the full visual frame */
.dc-pdp .pack-stage {
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: 5 / 6;
}
.dc-pdp .pack-stage .pack {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Center vertically + horizontally inside the box so any whitespace variation in source PNGs
     doesn't shift the bottle visually. All three bottle packs ship at 1000x1200 with matching
     padding, but this object-position lock keeps them pinned regardless. */
  object-position: center center;
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(.2,.7,.3,1);
}
/* Size-lock · guarantees every bottle PDP renders the hero pack at identical dimensions.
   The shared pack-stage rules above already enforce this, but these explicit overrides
   defeat any future per-product CSS that might creep in for Loaded · Sooo · Silky. */
.dc-pdp .gallery .pack-stage,
.dc-pdp[data-product="loaded-chocolate"] .pack-stage,
.dc-pdp[data-product="sooo-original"] .pack-stage,
.dc-pdp[data-product="silky-strawberry"] .pack-stage {
  aspect-ratio: 5 / 6 !important;
  max-width: 820px;
  margin-inline: auto;
}
.dc-pdp .gallery .pack-stage .pack,
.dc-pdp[data-product="loaded-chocolate"] .pack-stage .pack,
.dc-pdp[data-product="sooo-original"] .pack-stage .pack,
.dc-pdp[data-product="silky-strawberry"] .pack-stage .pack {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
}
/* Hover-swap removed on PDPs per design feedback — static pack image only.
   Subtle hover scale kept on the pack itself for a touch of life. */
.dc-pdp .pack-stage:hover .pack {
  transform: scale(1.02);
}

/* ---- Pack thumbnail row · full-width row beneath the hero grid ---- */
.dc-pdp .pack-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(6px, 0.7vw, 10px);
  margin-top: clamp(16px, 2vw, 28px);
  width: 100%;
  max-width: 270px;
  margin-left: auto;
  margin-right: auto;
}
.dc-pdp .thumb-circle {
  appearance: none;
  background: var(--paper-soft, #f6f4ee);
  border: 2px solid transparent;
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  width: 100%;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.dc-pdp .thumb-circle img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.dc-pdp .thumb-circle:hover {
  border-color: var(--ink-mute, #c4c0b4);
  transform: translateY(-2px);
}
.dc-pdp .thumb-circle.is-active {
  border-color: var(--product-color, var(--ink));
}
.dc-pdp .thumb-circle.is-placeholder {
  cursor: default;
  background: repeating-linear-gradient(
    45deg,
    var(--paper-soft, #f6f4ee),
    var(--paper-soft, #f6f4ee) 8px,
    rgba(0,0,0,0.04) 8px,
    rgba(0,0,0,0.04) 16px
  );
}
.dc-pdp .thumb-circle.is-placeholder:hover {
  border-color: transparent;
  transform: none;
}

/* Rotating seal · inside gallery · bigger + angled */
.dc-pdp .seal {
  position: absolute;
  top: -22px; right: -22px;
  width: 150px; height: 150px;
  background: rgba(255,255,255,0.92);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  z-index: 3;
  transform: rotate(-10deg);
}
.dc-pdp .seal .seal-svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  animation: seal-spin 22s linear infinite;
}
.dc-pdp .seal .seal-text {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  fill: var(--ink);
}
.dc-pdp .seal .seal-smiley {
  position: relative; z-index: 1;
  width: 44px; height: 44px;
}
@media (max-width: 700px) {
  .dc-pdp .seal { width: 110px; height: 110px; top: -10px; right: -10px; }
  .dc-pdp .seal .seal-smiley { width: 32px; height: 32px; }
  .dc-pdp .seal .seal-text { font-size: 8px; letter-spacing: 2px; }
}

/* View placements */
.dc-pdp .lay-flat,
.dc-pdp .snapped { width: 78%; }

/* Thumbnails */
.dc-pdp .thumbs {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 48px;                       /* more breathing room below the main pack */
}
.dc-pdp .thumb {
  width: 72px; height: 72px;
  background: transparent;
  border: 1.5px solid var(--line);
  border-radius: 50%;                  /* circular thumbs */
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  overflow: hidden;
  transition: border-color 0.2s;
}
.dc-pdp .thumb:hover { border-color: var(--ink-mute); }
.dc-pdp .thumb.active { border-color: var(--ink); }
.dc-pdp .thumb svg { width: 75%; height: 75%; }
.dc-pdp .thumb img { width: 90%; height: 90%; object-fit: contain; display: block; }

/* Info panel */
.dc-pdp .info {
  max-width: 480px;
  position: relative;
}

/* Spinning seal · centered under the reviews heading on the PDP */
.dc-reviews--pdp .head { position: relative; }
.dc-reviews--pdp .info-seal {
  margin: 28px auto 4px;
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-10deg);
  pointer-events: none;
  position: relative;
}
.dc-reviews--pdp .info-seal .seal-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: seal-spin 22s linear infinite;
}
.dc-reviews--pdp .info-seal .seal-text {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  fill: var(--c11);                      /* Cherry Pop pink ring text */
}
.dc-reviews--pdp .info-seal .info-seal-mark {
  position: relative;
  z-index: 1;
  width: 75%;
  height: auto;
  max-width: 130px;
  display: block;
}
@media (max-width: 800px) {
  .dc-reviews--pdp .info-seal { width: 150px; height: 150px; transform: rotate(-8deg); margin-top: 22px; }
  .dc-reviews--pdp .info-seal .seal-text { font-size: 9px; letter-spacing: 3px; }
  .dc-reviews--pdp .info-seal .info-seal-mark { max-width: 96px; }
}
@media (max-width: 500px) {
  .dc-reviews--pdp .info-seal { width: 120px; height: 120px; margin-top: 18px; }
  .dc-reviews--pdp .info-seal .seal-text { font-size: 7.5px; letter-spacing: 2px; }
  .dc-reviews--pdp .info-seal .info-seal-mark { max-width: 76px; }
}
.dc-pdp .info .eyebrow {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 18px;
  display: block;
}
.dc-pdp h1 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(48px, 7vw, 88px);
  letter-spacing: 0.5px;
  line-height: 0.85;   /* descender clearance · product names have y, p · matches content-page heroes */
  text-transform: uppercase;
  margin-bottom: 8px;
}
/* Rating row · sits between H1 and coda · trust signal at the moment of decision */
.dc-pdp .rating-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 14px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink);
}
.dc-pdp .rating-row .stars {
  color: var(--product-color);
  letter-spacing: 1.5px;
  font-size: 16px;
  line-height: 1;
}
.dc-pdp .rating-row .rating {
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.5px;
}
.dc-pdp .rating-row .sep {
  color: var(--ink-mute);
  opacity: 0.6;
}
.dc-pdp .rating-row .count {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--ink-mute);
  transition: color 0.2s, text-decoration-color 0.2s;
}
.dc-pdp .rating-row .count:hover {
  color: var(--product-color);
  text-decoration-color: var(--product-color);
}
@media (max-width: 600px) {
  .dc-pdp .rating-row {
    flex-wrap: wrap;
    gap: 6px;
    font-size: 13px;
  }
  .dc-pdp .rating-row .stars,
  .dc-pdp .rating-row .rating { font-size: 14px; }
}

.dc-pdp .coda {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.25;
  color: var(--product-color);
  margin-bottom: 14px;
}
.dc-pdp .flavour-blurb {
  font-family: 'Inter', sans-serif;
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.6;
  color: var(--ink-soft);
}
/* Bottle PDP spec line (5th blurb entry, wrapped in <strong>) must stay on one line */
.dc-pdp .flavour-blurb strong {
  white-space: nowrap;
  display: inline-block;
  font-size: clamp(13px, 1.0vw, 15px);   /* a touch smaller so the long line fits the info column */
  letter-spacing: 0.2px;
  margin-top: 4px;
  margin-bottom: 26px;
  max-width: 56ch;
}
.dc-pdp .specs-row {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding: 14px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 28px;
}
.dc-pdp .save-note {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(18px, 1.6vw, 22px);
  color: var(--c02);                       /* Hail Mary Berry · matches home bundle save */
  margin-bottom: 24px;
  line-height: 1.2;
}
.dc-pdp .qty-cta {
  display: flex;
  gap: 12px;
  margin-bottom: 18px;
}
/* Quantity stepper · black by default · Cherry Pop pink on hover */
.dc-pdp .qty {
  display: inline-flex;
  align-items: center;
  background: var(--ink);
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  padding: 0 6px;
  height: 54px;
  transition: background 0.2s, border-color 0.2s;
}
.dc-pdp .qty:hover {
  background: var(--product-color);
  border-color: var(--product-color);
}
.dc-pdp .qty button {
  background: none;
  border: none;
  width: 36px;
  height: 100%;
  font-size: 22px;
  cursor: pointer;
  color: #fff;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 400;
  line-height: 1;
}
.dc-pdp .qty .n {
  width: 28px;
  text-align: center;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 18px;
  color: #fff;
}
/* Merged Add-to-bag button · mirrors home structure (b-price · b-cta) · black by default */
.dc-pdp .cta {
  flex: 1;
  height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--ink);
  color: #fff;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  font-family: 'Barlow Condensed', sans-serif;
  padding: 0 24px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s;
}
.dc-pdp .cta .b-price {
  font-weight: 800;
  font-size: 24px;
  line-height: 1;
}
.dc-pdp .cta .b-sep {
  font-weight: 800;
  opacity: 0.45;
  font-size: 18px;
  line-height: 1;
}
.dc-pdp .cta .b-cta {
  font-weight: 800;                   /* matches £3.99 weight */
  font-size: 24px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  line-height: 1;
}
.dc-pdp .cta:hover {
  background: var(--product-color);       /* Cherry Pop pink on hover */
  border-color: var(--product-color);
  transform: translateY(-1px);
}
/* (i) info button next to Add to bag — anchor link to #ingredients */
.dc-pdp .cta-info {
  flex: 0 0 54px;
  width: 54px;
  height: 54px;
  background: #fff;
  color: var(--ink);
  border: 2.5px solid var(--ink);          /* thicker keyline */
  border-radius: 50%;
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-weight: 700;                         /* heavier "i" glyph */
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s;
  position: relative;
}
.dc-pdp .cta-info .cta-info-icon {
  font-size: 32px;                          /* slightly bigger · matches the heavier weight */
  line-height: 1;
  display: block;
  transform: translateY(-1px);
}
.dc-pdp .cta-info:hover,
.dc-pdp .cta-info.is-open {
  background: var(--product-color);
  border-color: var(--ink);
  color: var(--ink);
}

/* Anchor scroll offset · stops the sticky header from clipping the ingredients heading */
#ingredients { scroll-margin-top: 110px; }
/* Inline stock + postage reassurance · sits between blurb and the CTA · was at bottom of column */
.dc-pdp .ship.ship--inline {
  display: block;                        /* single span · let it sit as one line of text · beats the later .ship column rule */
  margin: 0 0 20px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.3px;
  white-space: nowrap;                   /* desktop · single line guaranteed */
  text-transform: uppercase;
  color: var(--ink-mute);
}
.dc-pdp .ship--inline strong { color: var(--ink); font-weight: 800; }
@media (max-width: 480px) {
  .dc-pdp .ship.ship--inline { white-space: normal; font-size: 11px; }   /* tight phones · allow wrap rather than overflow */
}

/* Ingredients quick-jump link · sits under the Add to bag */
.dc-pdp .ingredients-link {
  display: inline-block;
  margin-top: 14px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--c11);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
}
.dc-pdp .ingredients-link:hover {
  color: var(--ink);
  text-decoration-color: var(--ink);
}

/* CROSS-SELL · full-width section under PDP hero · cards run across the page width as a row */
.dc-pdp-bundles {
  background: transparent;
  padding: 8px 0 56px;
}
.dc-pdp-bundles .bundle-strip { margin: 0; padding: 0; }
.dc-pdp-bundles .bundle-head { text-align: center; margin-bottom: 18px; }
.dc-pdp-bundles .bundle-head .eyebrow {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(20px, 1.9vw, 24px);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  font-weight: 400;
}
.dc-pdp-bundles .bundle-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 760px) {
  .dc-pdp-bundles .bundle-list { grid-template-columns: 1fr; }
}

/* Liqueur-section variant · 3 cards each at the same width as a bar card in the 4-across
   menu grid above (section-inner / 4) and CENTERED rather than left-justified.
   Uses flex with calculated widths so we don't depend on a 4-col grid skeleton. */
.dc-pdp-bundles.dc-pdp-bundles--liqueur .bundle-list {
  display: flex;
  justify-content: center;
  gap: 20px;
}
.dc-pdp-bundles.dc-pdp-bundles--liqueur .bundle-card {
  /* match a bar card width in the 4-col menu grid: (100% - 3 * gap) / 4 */
  flex: 0 0 calc((100% - 60px) / 4);
}
@media (max-width: 900px) {
  .dc-pdp-bundles.dc-pdp-bundles--liqueur .bundle-card {
    flex: 0 0 calc((100% - 20px) / 2);   /* 2 per row */
  }
}
@media (max-width: 600px) {
  .dc-pdp-bundles.dc-pdp-bundles--liqueur .bundle-list { flex-direction: column; }
  .dc-pdp-bundles.dc-pdp-bundles--liqueur .bundle-card { flex: 0 0 100%; }
}

.dc-pdp-bundles .bundle-card {
  background: var(--paper);
  border: 1.5px solid var(--ink);
  padding: 16px 20px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 170px;
  position: relative;
  text-decoration: none;
  color: var(--ink);
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s;
}
.dc-pdp-bundles .bundle-card:hover {
  background: var(--product-color, var(--c11));
  color: #fff;
  border-color: var(--ink);
  transform: translateY(-1px);
}
/* Hero card now shares the white-box treatment · differentiates on copy &amp; saving, not colour */
.dc-pdp-bundles .bundle-card.hero {
  background: var(--paper);
  color: var(--ink);
}
.dc-pdp-bundles .bundle-card.hero:hover {
  background: var(--product-color, var(--c11));
  color: #fff;
  border-color: var(--ink);
}

.dc-pdp-bundles .bundle-top { display: flex; flex-direction: column; gap: 4px; }
.dc-pdp-bundles .bundle-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 0.95;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.dc-pdp-bundles .bundle-sub {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  opacity: 0.7;
  line-height: 1.45;
  margin-top: 2px;
}
.dc-pdp-bundles .bundle-card:hover .bundle-sub,
.dc-pdp-bundles .bundle-card.hero:hover .bundle-sub { color: rgba(255,255,255,0.85); opacity: 1; }

.dc-pdp-bundles .bundle-mid {
  margin-top: auto;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 0 2px;
}
.dc-pdp-bundles .bundle-price {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(34px, 3vw, 44px);
  letter-spacing: -0.5px;
  line-height: 1;
  color: inherit;
}
.dc-pdp-bundles .bundle-save {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(24px, 2.6vw, 32px);
  letter-spacing: 0;
  text-transform: none;
  color: var(--product-color, var(--c11));
  line-height: 1;
}
.dc-pdp-bundles .bundle-card:hover .bundle-save,
.dc-pdp-bundles .bundle-card.hero:hover .bundle-save { color: #fff; }

.dc-pdp-bundles .bundle-cta-btn {
  display: block;
  width: 100%;
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  padding: 13px 14px;
  background: var(--ink);
  color: #fff;
  border-radius: 999px;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s;
}
.dc-pdp-bundles .bundle-card:hover .bundle-cta-btn,
.dc-pdp-bundles .bundle-card.hero:hover .bundle-cta-btn { background: var(--ink); color: #fff; }

.dc-pdp .pairing {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(17px, 1.5vw, 20px);
  color: var(--ink-mute);
  line-height: 1.5;
  padding-top: 16px;
}
.dc-pdp .pairing a {
  color: var(--product-color);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.dc-pdp .ship {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.dc-pdp .ship strong { color: var(--ink); font-weight: 600; }

/* RECIPE BAND · full-bleed flavour colour */
.dc-recipe {
  background: var(--product-color);
  color: var(--ink);                      /* big number now black */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: var(--space-section) 0;        /* token rhythm */
}
.dc-recipe .row {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 6vw;
  align-items: start;                  /* "35%" aligns with "Real cherry." top */
}
@media (max-width: 900px) { .dc-recipe .row { grid-template-columns: 1fr; gap: 36px; } }
.dc-recipe .big-num {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(72px, 11vw, 160px);
  line-height: 0.84;
  text-transform: uppercase;
  color: var(--ink);                      /* 35% in black */
}
.dc-recipe .big-num em {
  display: block;
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 0.32em;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);                      /* "cocoa" italic in black too */
  margin-top: 6px;
}
.dc-recipe .punch {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 0.86;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 22px;
  max-width: 560px;
}
.dc-recipe .editorial {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.4;
  color: rgba(255,255,255,0.92);
  max-width: 540px;
}

/* DETAIL · ingredients + nutrition */
.dc-detail { padding: var(--space-section) 0; }
.dc-detail .detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6vw;
  align-items: start;
}
@media (max-width: 900px) { .dc-detail .detail-grid { grid-template-columns: 1fr; gap: 48px; } }
.dc-detail h3 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(24px, 3vw, 32px);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.dc-detail .ingredients-list {
  font-family: 'Inter', sans-serif;
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.7;
  color: var(--ink-soft);
  margin-bottom: 24px;
}
.dc-detail .ingredients-list strong { color: var(--ink); font-weight: 700; }
.dc-detail .allergens {
  padding: 22px 0;
  margin: 18px 0 26px;
  border-top: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
  font-family: 'Inter', sans-serif;
  font-size: clamp(17px, 1.5vw, 20px);        /* bigger · was 15px */
  line-height: 1.6;
  color: var(--ink-soft);
}
.dc-detail .allergens .head {
  display: block;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 15px;                            /* bigger · was 11px */
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--c11);                          /* Cherry Pop pink · matches product accent */
  margin-bottom: 12px;
}
.dc-detail .allergens b {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  color: var(--ink);
}
.dc-detail .badges { display: flex; flex-wrap: wrap; gap: 8px; }
.dc-detail .badge {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 7px 14px;
  border: none;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
}
.dc-detail .nutri-meta {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 14px;
  color: var(--ink-mute);
  margin-bottom: 16px;
}
.dc-detail table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
}
.dc-detail th, .dc-detail td {
  padding: 7px 8px;
  text-align: right;
  border-bottom: 1px solid var(--line);
}
.dc-detail th:first-child, .dc-detail td:first-child { text-align: left; font-weight: 500; }
.dc-detail thead th {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-mute);
  border-bottom: 1.5px solid var(--ink);
}
.dc-detail tr.sub td:first-child { padding-left: 22px; color: var(--ink-mute); }
.dc-detail tr.energy td { font-weight: 600; }
.dc-detail .nutri-footnote {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: var(--ink-mute);
  margin-top: 14px;
}

/* YOU MIGHT ALSO */
.dc-also { padding: var(--space-section) 0; background: var(--paper); }   /* clean white · cream removed */
.dc-also h2 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(40px, 6vw, 80px);
  letter-spacing: 0.5px;
  line-height: 0.92;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.dc-also .strap {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(18px, 1.8vw, 24px);
  color: var(--ink-mute);
  margin-bottom: 48px;
  max-width: 580px;
}
.dc-also .grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 36px 28px;
}
@media (max-width: 700px) { .dc-also .grid { grid-template-columns: repeat(2, 1fr); } }
.dc-also .item { text-align: center; cursor: pointer; text-decoration: none; }
.dc-also .dot {
  position: relative;
  aspect-ratio: 5 / 6;                    /* matches composite ratio */
  margin-bottom: 16px;
}
.dc-also .dot .pack {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 0.35s ease, transform 0.4s cubic-bezier(.2,.7,.3,1);
}
.dc-also .dot .pack--hover { opacity: 0; }
.dc-also .item:hover .dot .pack { opacity: 0; }
.dc-also .item:hover .dot .pack--hover { opacity: 1; }
.dc-also .item:hover .dot .pack,
.dc-also .item:hover .dot .pack--hover {
  transform: scale(1.03);
}
.dc-also .name {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(18px, 1.4vw, 22px);
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 6px;
}
.dc-also .item .name::after {
  content: '\00A0\00B7 80g';                    /* non-breaking space + middot · 80g for bars */
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 1em;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--ink);
  margin-left: 4px;
  white-space: nowrap;
}
.dc-also .item--bottle .name::after {
  content: '\00A0\00B7 70cl';                   /* override for bottles */
}
/* Match the home menu button styling exactly */
.dc-also .item .add-btn {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  color: var(--ink);
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  font-family: 'Barlow Condensed', sans-serif;
  padding: 12px 22px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s;
  line-height: 1;
}
.dc-also .item .add-btn .b-price {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 400;
  font-size: 24px;
  letter-spacing: 0;
  line-height: 1;
}
.dc-also .item .add-btn .b-sep {
  font-weight: 400;
  opacity: 0.45;
  font-size: 18px;
  line-height: 1;
}
.dc-also .item .add-btn .b-cta {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 400;
  font-size: 24px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.dc-also .item:hover .add-btn {
  background: var(--card-c, var(--ink));
  color: #fff;
  border-color: var(--card-c, var(--ink));
  transform: translateY(-1px);
}

/* Cherry-themed marquee variant */
.dc-marquee.dc-marquee--cherry {
  background: var(--c11);
  color: #fff;
}

/* TASTING NOTES · left-to-right flow, compact (~1/3 of cream-block height) */
.dc-tasting {
  padding: var(--space-section) 0;
  background: var(--paper-soft);
}
.dc-tasting .tasting-head {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 0.95;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 4px;
  display: inline-block;
  margin-right: 16px;
  vertical-align: baseline;
}
.dc-tasting .tasting-lede {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(20px, 1.8vw, 24px);
  color: var(--ink-mute);
  margin-bottom: 28px;
  display: inline;
}
.dc-tasting .tasting-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  margin-top: 24px;
}
@media (max-width: 900px) { .dc-tasting .tasting-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (max-width: 540px) { .dc-tasting .tasting-grid { grid-template-columns: 1fr; gap: 18px; } }
.dc-tasting .taste {
  border-top: 1.5px solid var(--ink);
  padding-top: 10px;
}
.dc-tasting .taste .step {
  margin-bottom: 6px;
}
.dc-tasting .taste .label {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 20px;                     /* bigger · was 12px */
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--c11);
}
.dc-tasting .taste p {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(20px, 1.8vw, 24px);  /* bigger · was clamp(16,1.4,19) */
  line-height: 1.5;
  color: var(--ink-soft);
}

/* CARE & KEEPING (inside ingredients column) */
.dc-detail .care {
  margin-top: 24px;
  padding: 16px 20px;
  background: var(--paper);
  border: 1px dashed var(--ink-mute);
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.dc-detail .care strong {
  display: block;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 6px;
}

/* "You might also" — add note row between name + price */
.dc-also .item .note {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.4;
  color: var(--ink-mute);
  margin-top: 8px;
  margin-bottom: 10px;
  max-width: 24ch;
  margin-left: auto;
  margin-right: auto;
}

/* SUBSCRIBE NUDGE */
.dc-sub-promo {
  padding: var(--space-section) 0;
  background: var(--ink);
  color: #fff;
}
.dc-sub-promo .promo-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 5vw;
  align-items: center;
}
@media (max-width: 900px) { .dc-sub-promo .promo-grid { grid-template-columns: 1fr; gap: 36px; } }
.dc-sub-promo .promo-copy .eyebrow {
  display: block;
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(18px, 1.8vw, 22px);
  color: rgba(255,255,255,0.6);
  margin-bottom: 12px;
}
.dc-sub-promo h3 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 0.9;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 18px;
}
.dc-sub-promo p {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(18px, 1.8vw, 22px);
  color: rgba(255,255,255,0.82);
  line-height: 1.45;
  max-width: 520px;
  margin-bottom: 28px;
}
.dc-sub-promo .promo-cta {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  background: #fff;
  color: var(--ink);
  padding: 16px 28px;
  border-radius: 999px;
}
.dc-sub-promo .promo-cta:hover { background: var(--c11); color: #fff; }
.dc-sub-promo .promo-price {
  text-align: center;
  border: 2px solid #fff;
  border-radius: 16px;
  padding: 32px 24px;
  transform: rotate(-3deg);
}
.dc-sub-promo .promo-price .big {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(56px, 7vw, 84px);
  line-height: 0.9;
  color: #fff;
}
.dc-sub-promo .promo-price .sub {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  margin-top: 8px;
}

/* REVIEWS · PDP variant (3 static cards, no marquee) */
.dc-reviews.dc-reviews--pdp { padding: var(--space-section) 0; }
.dc-reviews.dc-reviews--pdp .head { text-align: center; margin-bottom: 56px; }
.dc-reviews.dc-reviews--pdp h2 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(40px, 6vw, 72px);
  letter-spacing: 0.5px;
  line-height: 0.85;
  text-transform: uppercase;
}
.dc-reviews.dc-reviews--pdp h2 .pop { color: var(--c11) !important; }   /* Cherry Pop pink · matches product accent */
.dc-reviews.dc-reviews--pdp .meta {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(16px, 1.6vw, 20px);
  color: var(--ink-mute);
  margin-top: 14px;
}
.dc-reviews.dc-reviews--pdp .meta strong {
  font-family: 'Barlow Condensed', sans-serif;
  font-style: normal;
  font-weight: 800;
  color: var(--ink);
}

/* ==========================================================
   REVIEWS PAGE · tpl-reviews.php · hero flipped black
========================================================== */
.dc-reviews-hero {
  background: var(--ink);
  color: #fff;
  padding: var(--space-hero) 0;
  text-align: center;
}
.dc-reviews-hero .eyebrow {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(20px, 2vw, 26px);
  color: rgba(255,255,255,0.7);
  display: block;
  margin-bottom: 24px;
}
.dc-reviews-hero h1 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(56px, 8vw, 110px);
  line-height: 0.85;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 20px;
  color: #fff;
}
.dc-reviews-hero h1 .pop { color: var(--c13); }   /* Loaded Chocolate purple */
.dc-reviews-hero .meta {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(18px, 1.6vw, 22px);
  color: rgba(255,255,255,0.7);
  margin-bottom: 56px;
}
.dc-reviews-hero .meta strong {
  font-family: 'Barlow Condensed', sans-serif;
  font-style: normal;
  font-weight: 800;
  color: #fff;
}
.dc-reviews-hero .hero-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  max-width: 960px;
  margin: 0 auto;
}
@media (max-width: 800px) { .dc-reviews-hero .hero-stats { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.dc-reviews-hero .stat {
  border-top: 2px solid rgba(255,255,255,0.45);
  padding-top: 16px;
  text-align: left;
}
.dc-reviews-hero .stat .num {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 1;
  color: var(--c14);                          /* Sooo Original cyan */
}
.dc-reviews-hero .stat .lbl {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--c14);                          /* Sooo Original cyan */
  margin-top: 8px;
}

.reviews-band-head {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 0.9;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin: 6vh 0 32px;
}
.reviews-band-head .pop { color: var(--c02); }
.reviews-band-head .pop.pink { color: var(--c11); }
.reviews-band-lede {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(18px, 1.8vw, 22px);
  color: var(--ink-mute);
  max-width: 620px;
  margin: -20px 0 28px;
}

/* "The love letters." section — centred treatment, more breathing room */
.dc-reviews--long .reviews-band-head {
  text-align: center;
  margin-bottom: 24px;
}
.dc-reviews--long .reviews-band-lede {
  text-align: center;
  margin: 0 auto 56px;
}

.dc-reviews--alt { background: var(--paper-soft); }
.dc-reviews-track--reverse { animation-direction: reverse; }

.dc-reviews--long .long-reviews-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 36px 40px;
  margin-top: 24px;
}
@media (max-width: 800px) { .dc-reviews--long .long-reviews-grid { grid-template-columns: 1fr; } }
.long-review {
  border-top: 3px solid var(--ink);
  padding: 20px 0 28px;
}
.long-review .stars {
  font-size: 22px;
  letter-spacing: 3px;
  margin-bottom: 14px;
  color: var(--review-flash, var(--c02));
  line-height: 1;
}
.long-review .quote {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(19px, 1.8vw, 24px);
  line-height: 1.4;
  color: var(--ink);
  margin-bottom: 18px;
}
.long-review .meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.long-review .meta-row .dot {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--review-flash, var(--c02));
}
.long-review .meta-row strong { color: var(--ink); font-weight: 600; }
.long-review .meta-row .bar { color: var(--ink-soft); text-transform: none; font-style: italic; font-family: 'Instrument Serif', serif; font-size: 15px; }

.dc-write-review {
  background: var(--ink);
  color: #fff;
  padding: var(--space-section) 0;
  text-align: center;
}
.dc-write-review h2 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(48px, 7vw, 84px);
  line-height: 0.9;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.dc-write-review p {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(18px, 1.8vw, 22px);
  color: rgba(255,255,255,0.82);
  max-width: 580px;
  margin: 0 auto 32px;
}
.dc-write-review .cta {
  display: inline-block;
  background: #fff;
  color: var(--ink);
  padding: 16px 28px;
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.dc-write-review .cta:hover { background: var(--c02); color: #fff; }

/* ==========================================================
   ABOUT PAGE · tpl-about.php
========================================================== */
.dc-about-hero {
  background: var(--ink);
  color: #fff;
  padding: var(--space-hero) 0;
  text-align: center;
}
.dc-about-hero .eyebrow {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(20px, 2vw, 26px);
  color: rgba(255,255,255,0.7);
  display: block;
  margin-bottom: 26px;
}
.dc-about-hero h1 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(48px, 7vw, 108px);
  line-height: 0.88;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 24px;
  color: #fff;
}
.dc-about-hero h1 .ln {
  display: block;
  white-space: nowrap;                         /* lock each line so the three never wrap */
}
.dc-about-hero h1 .pop { color: var(--c01); }    /* Honey Come Home yellow */
.dc-about-hero .lede {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(20px, 2vw, 26px);
  color: rgba(255,255,255,0.7);
}

.dc-about-chapter { padding: var(--space-section) 0; }
.dc-about-chapter--alt { background: var(--paper-soft); }
.dc-about-chapter .ch-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 6vw;
  align-items: center;
}
.dc-about-chapter .ch-grid--flip { grid-template-columns: 1.3fr 1fr; }
@media (max-width: 900px) {
  .dc-about-chapter .ch-grid,
  .dc-about-chapter .ch-grid--flip { grid-template-columns: 1fr; gap: 36px; }
  .dc-about-chapter .ch-grid--flip .ch-copy { order: 1; }
  .dc-about-chapter .ch-grid--flip .ch-image { order: 2; }
}
.dc-about-chapter .ch-image { display: flex; justify-content: center; }
.dc-about-chapter .circle {
  width: 100%;
  max-width: 420px;
  aspect-ratio: 1;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-align: center;
  padding: 10%;
}
.dc-about-chapter .circle .circle-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(48px, 6vw, 84px);
  line-height: 0.9;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.dc-about-chapter .circle .circle-sub {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(16px, 1.6vw, 20px);
  margin-top: 8px;
  opacity: 0.92;
}
.dc-about-chapter .ch-no {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--c02);
  display: block;
  margin-bottom: 10px;
}
.dc-about-chapter h2 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(40px, 5.5vw, 72px);
  line-height: 0.9;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.dc-about-chapter .ch-lede {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(20px, 2vw, 26px);
  color: var(--ink);
  margin-bottom: 22px;
  max-width: 540px;
}
.dc-about-chapter .ch-copy p {
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.7;
  color: var(--ink-soft);
  margin-bottom: 16px;
  max-width: 580px;
}

.dc-about-values {
  padding: var(--space-section) 0;
  text-align: center;
}
.dc-about-values .eyebrow {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(20px, 2vw, 28px);
  color: var(--ink);
  display: block;
  margin-bottom: 48px;
}
.dc-about-values .values-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 36px;
}
@media (max-width: 900px) { .dc-about-values .values-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.dc-about-values .value { text-align: center; }
.dc-about-values .v-circle {
  width: 100%;
  max-width: 200px;
  margin: 0 auto 18px;
  aspect-ratio: 1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 0.85;                        /* tightened leading so the two-line all-caps labels sit close */
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  padding: 0 12px;
}
.dc-about-values .value p {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 17px;
  line-height: 1.4;
  color: var(--ink-soft);
  max-width: 26ch;
  margin: 0 auto;
}

/* ==========================================================
   STOCKISTS PAGE · tpl-stockists.php
========================================================== */
.dc-stockists-hero {
  background: var(--ink);
  color: #fff;
  padding: var(--space-hero) 0;
  text-align: center;
}
.dc-stockists-hero .eyebrow {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(20px, 2vw, 26px);
  color: rgba(255,255,255,0.7);
  display: block;
  margin-bottom: 24px;
}
.dc-stockists-hero h1 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(56px, 8vw, 110px);
  line-height: 0.85;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 22px;
  color: #fff;
}
.dc-stockists-hero h1 .pop { color: var(--c04); }   /* Salty Susan teal */
.dc-stockists-hero .lede {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(18px, 1.8vw, 22px);
  color: rgba(255,255,255,0.78);
  max-width: 640px;
  margin: 0 auto 36px;
}
.stockist-search {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 8px;
}
.stockist-search input {
  border: 2px solid #fff;
  background: transparent;
  color: #fff;
  padding: 14px 20px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  min-width: 280px;
  border-radius: 999px;
  outline: none;
}
.stockist-search input::placeholder { color: rgba(255,255,255,0.5); }
.stockist-search button {
  background: #fff;
  color: var(--ink);
  border: none;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 14px 24px;
  border-radius: 999px;
  cursor: pointer;
}
.stockist-search button:hover { background: var(--c04); color: #fff; }
.search-note {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 14px;
  color: rgba(255,255,255,0.55);
}

.dc-stockists-list { padding: var(--space-section) 0; }
.dc-stockists-list .region {
  margin-bottom: 56px;
}
.dc-stockists-list .region-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--ink);
  margin-bottom: 20px;
  gap: 16px;
}
.dc-stockists-list .region-head h2 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.dc-stockists-list .region-count {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(16px, 1.4vw, 20px);
  color: var(--c02);
}
.dc-stockists-list ul.stockists {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 32px;
}
@media (max-width: 700px) { .dc-stockists-list ul.stockists { grid-template-columns: 1fr; } }
.dc-stockists-list ul.stockists li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  font-family: 'Inter', sans-serif;
  font-size: 16px;
}
.dc-stockists-list ul.stockists .name { color: var(--ink); font-weight: 500; }
.dc-stockists-list ul.stockists .addr {
  color: var(--ink-mute);
  font-size: 13px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  white-space: nowrap;
}

.dc-wholesale-nudge {
  background: var(--ink);
  color: #fff;
  padding: var(--space-section) 0;
}
.dc-wholesale-nudge .nudge-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 5vw;
  align-items: center;
}
@media (max-width: 900px) { .dc-wholesale-nudge .nudge-grid { grid-template-columns: 1fr; gap: 32px; } }
.dc-wholesale-nudge h2 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(48px, 6vw, 80px);
  line-height: 0.9;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.dc-wholesale-nudge p {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(18px, 1.8vw, 22px);
  color: rgba(255,255,255,0.82);
  margin-bottom: 28px;
  max-width: 520px;
  line-height: 1.45;
}
.dc-wholesale-nudge .cta {
  display: inline-block;
  background: #fff;
  color: var(--ink);
  padding: 16px 28px;
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.dc-wholesale-nudge .cta:hover { background: var(--c11); color: #fff; }
.dc-wholesale-nudge .nudge-side {
  text-align: center;
  border: 2px solid #fff;
  border-radius: 16px;
  padding: 32px 24px;
  transform: rotate(-3deg);
}
.dc-wholesale-nudge .nudge-side .big {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(56px, 7vw, 84px);
  line-height: 0.9;
  color: #fff;
}
.dc-wholesale-nudge .nudge-side .sub {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  margin-top: 8px;
}

/* ==========================================================
   CONTACT PAGE · tpl-contact.php
========================================================== */
.dc-contact-hero {
  padding: var(--space-hero) 0;
  text-align: center;
}
.dc-contact-hero .eyebrow {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(20px, 2vw, 26px);
  color: var(--ink-mute);
  display: block;
  margin-bottom: 26px;
}
.dc-contact-hero h1 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(64px, 9vw, 130px);
  line-height: 0.85;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.dc-contact-hero h1 .pop { color: var(--c02); }
.dc-contact-hero .lede {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(20px, 2vw, 26px);
  color: var(--ink-mute);
  max-width: 640px;
  margin: 0 auto;
}

.dc-contact-cards { padding: var(--space-flow) 0 var(--space-section); }
.dc-contact-cards .cards-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}
@media (max-width: 900px) { .dc-contact-cards .cards-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 600px) { .dc-contact-cards .cards-grid { grid-template-columns: 1fr; } }
.contact-card {
  display: flex;
  flex-direction: column;
  border: 2px solid var(--ink);
  padding: 40px 36px 36px;
  text-decoration: none;
  color: var(--ink);
  transition: background 0.2s, color 0.2s, transform 0.2s;
  position: relative;
  min-height: 320px;
}
.contact-card:hover {
  background: var(--card-flash, var(--c02));
  color: #fff;
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--ink);
}
.contact-card .card-icon {
  font-size: 48px;
  margin-bottom: 20px;
  line-height: 1;
}
.contact-card h3 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(28px, 2.8vw, 38px);
  line-height: 0.95;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.contact-card p {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(19px, 1.8vw, 23px);
  line-height: 1.45;
  margin-bottom: 28px;
  flex: 1;
}
.contact-card .card-cta {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: clamp(9px, 0.9vw, 12px);    /* shrinks to fit longest email on narrow cards */
  letter-spacing: 0.3px;
  text-transform: uppercase;
  margin-top: auto;
  white-space: nowrap;                    /* email + arrow always on one line */
  line-height: 1.45;
}
@media (max-width: 480px) {
  .contact-card { padding: 32px 24px 28px; }       /* tighter padding on tiny screens */
  .contact-card .card-cta { font-size: 10px; }
}

.dc-contact-form {
  background: var(--paper-soft);
  padding: var(--space-section) 0;
}
.dc-contact-form .form-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 6vw;
  align-items: start;
}
@media (max-width: 900px) { .dc-contact-form .form-grid { grid-template-columns: 1fr; gap: 40px; } }
.dc-contact-form .form-copy .eyebrow {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(18px, 1.8vw, 24px);
  color: var(--ink-mute);
  display: block;
  margin-bottom: 16px;
}
.dc-contact-form .form-copy h2 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 0.9;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.dc-contact-form .form-copy p {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(20px, 2vw, 26px);
  color: var(--ink-soft);
  line-height: 1.5;
  max-width: 520px;
}
.contact-form { display: flex; flex-direction: column; gap: 18px; }
.contact-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.contact-form label span {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--ink);
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  border: 1.5px solid var(--ink);
  background: var(--paper);
  padding: 14px 18px;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  outline: none;
  border-radius: 6px;
}
.contact-form input,
.contact-form select { height: 54px; }
.contact-form textarea { resize: vertical; min-height: 140px; font-family: 'Inter', sans-serif; }
.contact-form .cta {
  align-self: flex-start;
  background: var(--ink);
  color: #fff;
  border: none;
  padding: 16px 28px;
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
}
.contact-form .cta:hover { background: var(--c11); }
.form-foot {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 16px;
  color: var(--ink-mute);
  margin-top: 8px;
  line-height: 1.5;
}

.dc-contact-faq { padding: var(--space-section) 0; }
.dc-contact-faq .eyebrow {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(20px, 2vw, 26px);
  color: var(--ink-mute);
  display: block;
  margin-bottom: 14px;
}
.dc-contact-faq h2 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(48px, 6vw, 84px);
  line-height: 0.9;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 36px;
}
.dc-contact-faq .faq-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 36px 56px;
}
@media (max-width: 800px) { .dc-contact-faq .faq-grid { grid-template-columns: 1fr; gap: 28px; } }
.dc-contact-faq .faq {
  border-top: 2px solid var(--ink);
  padding: 24px 0 8px;
}
.dc-contact-faq .faq h3 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.05;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  margin-bottom: 14px;
  color: var(--ink);
}
.dc-contact-faq .faq p {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(19px, 1.8vw, 23px);
  line-height: 1.5;
  color: var(--ink-soft);
}

.dc-contact-where {
  background: var(--ink);
  color: #fff;
  padding: var(--space-section) 0;
}
.dc-contact-where .where-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
}
@media (max-width: 900px) { .dc-contact-where .where-grid { grid-template-columns: 1fr; gap: 32px; } }
.dc-contact-where .where-block .eyebrow {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  display: block;
  margin-bottom: 10px;
}
.dc-contact-where .where-block h3 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(32px, 3.4vw, 46px);
  line-height: 0.95;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.dc-contact-where .where-block p {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(19px, 1.8vw, 22px);
  line-height: 1.55;
  color: rgba(255,255,255,0.85);
}
.dc-contact-where .where-block p a {
  color: var(--c11);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ==========================================================
   RECIPES PAGE · tpl-recipes.php
========================================================== */
.dc-recipes-hero {
  background: var(--ink);
  color: #fff;
  padding: var(--space-hero) 0;
  text-align: center;
}
.dc-recipes-hero .eyebrow {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(20px, 2vw, 26px);
  color: rgba(255,255,255,0.7);
  display: block;
  margin-bottom: 26px;
}
.dc-recipes-hero h1 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(56px, 8vw, 110px);          /* aligned to stockists hero */
  line-height: 0.85;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 22px;
  color: #fff;
}
.dc-recipes-hero h1 .pop { color: var(--c11); }
.dc-recipes-hero .lede {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(18px, 1.8vw, 22px);          /* aligned to stockists hero */
  line-height: 1.4;
  color: rgba(255,255,255,0.85);
  max-width: 640px;
  margin: 0 auto;
}

.dc-recipe-grid { padding: var(--space-flow) 0 var(--space-section); }
.dc-recipe-grid .grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px;
}
@media (max-width: 900px) { .dc-recipe-grid .grid { grid-template-columns: 1fr; gap: 36px; } }

.dc-recipe-grid .recipe {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 24px;
  align-items: start;
}
@media (max-width: 600px) {
  .dc-recipe-grid .recipe { grid-template-columns: 1fr; gap: 16px; }
}

.dc-recipe-grid .recipe-visual {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
}
.dc-recipe-grid .recipe-dot {
  position: absolute;
  inset: 0;
  background: var(--recipe-c);
  border-radius: 50%;
}
.dc-recipe-grid .recipe-tag {
  position: absolute;
  bottom: 8%;
  left: 12%;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #fff;
  background: rgba(0,0,0,0.4);
  padding: 6px 12px;
  border-radius: 2px;
}

.dc-recipe-grid .recipe-meta h3 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(28px, 2.8vw, 38px);
  letter-spacing: 0.3px;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 14px;
  color: var(--ink);
}
.dc-recipe-grid .recipe-line {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.5;
  color: var(--ink-soft);
  margin-bottom: 16px;
}
.dc-recipe-grid .recipe-stats {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 18px;
}
.dc-recipe-grid .recipe-stats strong {
  font-weight: 800;
  color: var(--ink);
}
.dc-recipe-grid .recipe-cta {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--recipe-c);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.dc-recipe-grid .recipe-cta:hover {
  text-underline-offset: 6px;
}

.dc-recipes-coda {
  background: var(--ink);
  color: #fff;
  padding: var(--space-section) 0;
  text-align: center;
}
.dc-recipes-coda .coda {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.4;
  color: rgba(255,255,255,0.85);
  max-width: 640px;
  margin: 0 auto 28px;
}
.dc-recipes-coda .cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  color: var(--ink);
  border: 1.5px solid #fff;
  border-radius: 999px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 14px 28px;
  text-decoration: none;
  transition: background 0.2s, color 0.2s, transform 0.15s;
}
.dc-recipes-coda .cta:hover {
  background: var(--c11);
  color: #fff;
  border-color: var(--c11);
  transform: translateY(-1px);
}

/* ==========================================================
   GIFT CARDS PAGE · tpl-gift-cards.php
========================================================== */
.dc-gift-hero {
  padding: var(--space-hero) 0;
  text-align: center;
}
.dc-gift-hero .eyebrow {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(20px, 2vw, 26px);
  color: var(--ink-mute);
  display: block;
  margin-bottom: 22px;
}
.dc-gift-hero h1 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(56px, 8vw, 120px);
  line-height: 0.86;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.dc-gift-hero h1 .pop { color: var(--c11); }
.dc-gift-hero .lede {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.4;
  color: var(--ink-soft);
  max-width: 640px;
  margin: 0 auto;
}

.dc-gift-cards { padding: var(--space-flow) 0 var(--space-section); }
.dc-gift-cards .grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-bottom: 72px;
}
@media (max-width: 900px) { .dc-gift-cards .grid { grid-template-columns: 1fr; gap: 20px; } }

.dc-gift-cards .gift-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 2px solid var(--ink);
  padding: 36px 28px 28px;
  text-decoration: none;
  color: var(--ink);
  position: relative;
  transition: background 0.25s, color 0.25s, transform 0.18s, box-shadow 0.2s;
}
.dc-gift-cards .gift-card:hover {
  background: var(--card-c, var(--c11));
  color: #fff;
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--ink);
}
.dc-gift-cards .gift-card.most {
  background: var(--ink);
  color: #fff;
}
.dc-gift-cards .gift-card.most:hover {
  background: var(--card-c, var(--c11));
  color: #fff;
}
.dc-gift-cards .gift-card .badge {
  position: absolute;
  top: -12px; left: 28px;
  background: var(--c01);
  color: var(--ink);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  border: 2px solid var(--ink);
}
.dc-gift-cards .gc-tag {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: inherit;
  opacity: 0.65;
  margin-bottom: 8px;
}
.dc-gift-cards .gc-amount {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(56px, 7vw, 96px);
  line-height: 0.9;
  letter-spacing: 0;
  margin-bottom: 18px;
}
.dc-gift-cards .gc-line {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 17px;
  line-height: 1.45;
  margin-bottom: 24px;
  flex: 1;
}
.dc-gift-cards .gc-cta {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding-top: 16px;
  border-top: 1px solid currentColor;
  display: inline-block;
}

.dc-gift-cards .gift-detail {
  background: var(--paper-soft);
  border: 1px solid var(--line);
  padding: 40px 36px;
}
.dc-gift-cards .gift-detail h3 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 22px;
}
.dc-gift-cards .gift-detail ul {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 36px;
}
@media (max-width: 700px) { .dc-gift-cards .gift-detail ul { grid-template-columns: 1fr; } }
.dc-gift-cards .gift-detail ul li {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.dc-gift-cards .gift-detail ul li strong {
  color: var(--ink);
  font-weight: 700;
  display: block;
  margin-bottom: 4px;
}
.dc-gift-cards .gift-foot {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 16px;
  color: var(--ink-mute);
  margin: 0;
}
.dc-gift-cards .gift-foot a { color: var(--c11); text-decoration: underline; text-underline-offset: 3px; }
.dc-gift-cards .gift-foot a:hover { color: var(--ink); }

/* ==========================================================
   AS SEEN IN · static strip above the fold (Tier 2 trust signal)
========================================================== */
.dc-press--top {
  background: var(--c14);                    /* Sooo Original blue · matches the marquee */
  padding: 36px 0 28px;
  border-bottom: 1px solid var(--ink);
}
.dc-press--top .section-inner { text-align: center; }
.dc-press--top .eyebrow {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(14px, 1.1vw, 17px);
  color: rgba(255,255,255,0.85);             /* white on blue */
  text-align: center;
  display: block;
  margin-bottom: 18px;
}
.dc-press--top .press-static {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 4vw, 56px) clamp(28px, 5vw, 72px);
  opacity: 0.78;
}
.dc-press--top .press-static > span {
  filter: grayscale(1) brightness(0.4);
  transition: filter 0.2s, transform 0.2s;
}
.dc-press--top .press-static > span:hover {
  filter: none;
  transform: translateY(-1px);
}
/* Right-to-left logo marquee · cut individual logos, infinite scroll */
.dc-press--top .press-logos-marquee-wrap {
  width: 100%;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
          -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.dc-press--top .press-logos-marquee {
  display: flex;
  align-items: center;
  gap: clamp(48px, 6vw, 96px);
  width: max-content;
  animation: dc-press-marquee 36s linear infinite;
}
.dc-press--top .press-logos-marquee:hover { animation-play-state: paused; }
.dc-press--top .press-logo {
  display: block;
  height: clamp(48px, 6vh, 72px);
  width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);            /* black logos → white · sits cleanly on blue */
  opacity: 0.92;
  transition: opacity 0.2s ease;
}
.dc-press--top .press-logo:hover { opacity: 1; }

/* Per-logo height tuning · balance the visual mass · square logos bigger, wide logos smaller */
.dc-press--top .press-logo--grocer     { height: clamp(80px, 10vh, 110px); }   /* tall + dense star badge */
.dc-press--top .press-logo--awards     { height: clamp(80px, 10vh, 108px); }   /* square winner badge */
.dc-press--top .press-logo--guardian   { height: clamp(60px, 7.5vh, 88px); }   /* "Guardian" + subtitle stack */
.dc-press--top .press-logo--amazon     { height: clamp(46px, 5.6vh, 64px); }   /* wide wordmark + stars */
.dc-press--top .press-logo--bbc        { height: clamp(46px, 5.6vh, 64px); }   /* wide wordmark */
.dc-press--top .press-logo--selfridges { height: clamp(38px, 4.6vh, 52px); }   /* very wide · narrow type */

@keyframes dc-press-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }   /* duplicate set means -50% lands exactly where the start was */
}
@media (prefers-reduced-motion: reduce) {
  .dc-press--top .press-logos-marquee { animation: none; }
}

/* ==========================================================
   PDP FAQ · sits before "You might also" · answers the 4 most asked
========================================================== */
.dc-pdp-faq {
  background: var(--paper-soft);
  padding: var(--space-section) 0;
}
.dc-pdp-faq .section-inner { text-align: center; }
.dc-pdp-faq .eyebrow {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(18px, 1.6vw, 22px);
  color: var(--ink-mute);
  display: block;
  margin-bottom: 18px;
}
.dc-pdp-faq h2 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(40px, 5vw, 64px);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  line-height: 0.95;
  margin-bottom: 36px;
}
.dc-pdp-faq .faq-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 56px;
  max-width: 920px;
  margin: 0 auto;
  text-align: left;
}
@media (max-width: 800px) { .dc-pdp-faq .faq-grid { grid-template-columns: 1fr; gap: 18px; } }
.dc-pdp-faq .faq {
  border-top: 2px solid var(--ink);
  padding: 18px 0 12px;
}
.dc-pdp-faq .faq summary {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(20px, 2.2vw, 26px);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  line-height: 1.05;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.dc-pdp-faq .faq summary::-webkit-details-marker { display: none; }
.dc-pdp-faq .faq summary::after {
  content: '+';
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 400;
  font-size: 32px;
  line-height: 1;
  color: var(--product-color, var(--c11));
  transition: transform 0.25s;
  display: inline-block;
}
.dc-pdp-faq .faq[open] summary::after { transform: rotate(45deg); }
.dc-pdp-faq .faq p {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.5;
  color: var(--ink-soft);
  margin-top: 12px;
}

/* ==========================================================
   CART DRAWER · slides in from the right · localStorage-backed
========================================================== */
.dc-cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 98;
  animation: dcFadeIn 0.2s ease;
}
@keyframes dcFadeIn { from { opacity: 0; } to { opacity: 1; } }

.dc-cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(440px, 100vw);
  background: var(--paper);
  z-index: 99;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(.4,.7,.3,1);
  box-shadow: -8px 0 32px rgba(0,0,0,0.18);
}
.dc-cart-drawer.is-open { transform: translateX(0); }

.dc-cart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 28px;
  border-bottom: 2px solid var(--ink);
}
.dc-cart-eyebrow {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.dc-cart-close {
  background: transparent;
  border: none;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  color: var(--ink);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.dc-cart-close:hover { background: var(--paper-soft); }

.dc-cart-postage {
  padding: 16px 28px;
  background: var(--paper-soft);
  border-bottom: 1px solid var(--line);
}
.dc-cart-postage-msg {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
.dc-cart-postage-msg strong { color: var(--c11); }
.dc-cart-postage-bar {
  height: 6px;
  background: rgba(0,0,0,0.08);
  border-radius: 999px;
  overflow: hidden;
}
.dc-cart-postage-fill {
  height: 100%;
  background: var(--c11);
  width: 0%;
  transition: width 0.35s ease;
}

.dc-cart-items {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}
.dc-cart-empty {
  padding: 60px 28px;
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 18px;
  color: var(--ink-mute);
  text-align: center;
}
.dc-cart-row {
  display: grid;
  grid-template-columns: 60px 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 16px 28px;
  border-bottom: 1px solid var(--line);
}
.dc-cart-thumb {
  width: 60px;
  height: 72px;
  object-fit: contain;
  background: transparent;     /* let the pack composite circle show on its own */
}
.dc-cart-thumb--empty { background: transparent; }
.dc-cart-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  line-height: 1.1;
  margin-bottom: 4px;
}
.dc-cart-unit {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: var(--ink-mute);
}
.dc-cart-qty {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  padding: 2px;
}
.dc-cart-qty button {
  background: transparent;
  border: none;
  cursor: pointer;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-family: 'Barlow Condensed', sans-serif;
  color: var(--ink);
  border-radius: 50%;
}
.dc-cart-qty button:hover { background: var(--ink); color: #fff; }
.dc-cart-qty span {
  min-width: 22px;
  text-align: center;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 14px;
}
.dc-cart-line {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 16px;
}

.dc-cart-foot {
  padding: 20px 28px 24px;
  border-top: 2px solid var(--ink);
  background: var(--paper);
}
.dc-cart-totals {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 4px 0;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
}
.dc-cart-totals strong {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 22px;
}
.dc-cart-totals--ship { color: var(--ink-mute); border-bottom: 1px solid var(--line); padding-bottom: 12px; margin-bottom: 12px; }
.dc-cart-totals--ship strong { font-size: 16px; color: var(--ink); }
.dc-cart-checkout {
  display: block;
  margin-top: 14px;
  background: var(--ink);
  color: #fff;
  text-align: center;
  padding: 16px;
  border-radius: 999px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s, transform 0.15s;
}
.dc-cart-checkout:hover { background: var(--c11); transform: translateY(-1px); }
.dc-cart-checkout.is-disabled { opacity: 0.4; pointer-events: none; }
.dc-cart-foot-note {
  margin-top: 12px;
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 13px;
  color: var(--ink-mute);
  line-height: 1.5;
  text-align: center;
}

/* Legacy header cart-pill rule retired · new cart is .nav-cart (icon style) styled near the top of the header section above. */

@media (max-width: 500px) {
  .dc-cart-drawer { width: 100vw; }
  .dc-cart-row { grid-template-columns: 48px 1fr auto; padding: 14px 18px; }
  .dc-cart-line { display: none; }
}

/* ==========================================================
   UNIVERSAL BAR PICKER · tpl-pick.php · ?qty=3 | 6 | 12
========================================================== */
.dc-page--pick { background: var(--paper); }
.dc-pick-hero {
  background: var(--ink);
  color: #fff;
  padding: var(--space-hero) 0 var(--space-flow);
  text-align: center;
}
.dc-pick-hero .eyebrow {
  display: block;
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(18px, 1.8vw, 24px);
  color: rgba(255,255,255,0.65);
  margin-bottom: 22px;
}
.dc-pick-hero h1 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: clamp(64px, 9vw, 130px);
  line-height: 0.85;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin: 0 0 18px;
  color: #fff;
}
.dc-pick-hero h1 .pop { color: var(--c11); }
.dc-pick-hero .lede {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(18px, 1.8vw, 24px);
  color: rgba(255,255,255,0.85);
  max-width: 540px;
  margin: 0 auto;
}

.dc-pick-stage {
  padding: var(--space-flow) 0 clamp(24px, 3vh, 48px);  /* less bottom space · combos sit just below */
}

/* Bottle picker variant · 3-up grid since there are only 3 bottles · cards centered */
.dc-pick-grid.dc-pick-grid--bottles {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 32px 24px;
  max-width: 85%;
}
.dc-pick-grid.dc-pick-grid--bottles .dc-pick-card {
  flex: 0 0 calc((100% - 48px) / 3);   /* 3 across · same proportional width as a bar card */
}
@media (max-width: 800px) {
  .dc-pick-grid.dc-pick-grid--bottles { max-width: 100%; }
  .dc-pick-grid.dc-pick-grid--bottles .dc-pick-card { flex: 0 0 calc((100% - 24px) / 2); }
}
@media (max-width: 500px) {
  .dc-pick-grid.dc-pick-grid--bottles .dc-pick-card { flex: 0 0 100%; }
}

/* Date Night · two-step layout · each step has a numbered head */
.dc-pick-stage.dc-pick-stage--step {
  padding: clamp(32px, 4vh, 64px) 0 clamp(16px, 2vh, 32px);
}
.dc-pick-stage.dc-pick-stage--step:last-of-type {
  padding-bottom: clamp(48px, 6vh, 96px);
}
/* When a step follows another step, pull it closer · prevents the
   bottle-grid bottom margin + step top padding compounding into a huge gap. */
.dc-pick-stage.dc-pick-stage--step + .dc-pick-stage.dc-pick-stage--step {
  padding-top: clamp(8px, 1.5vh, 24px);
}
/* Bottle / bar grids inside Date Night don't need the default 96px tail
   margin · the step container already controls spacing. */
.dc-page--date-night .dc-pick-grid {
  margin-bottom: 16px;
}
.dc-page--date-night .step-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin: 0 0 28px;
}
.dc-page--date-night .step-num {
  font-family: 'Anton', 'Barlow Condensed', sans-serif;
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1;
  color: var(--c11);
}
.dc-page--date-night .step-head h2 {
  font-family: 'Anton', 'Barlow Condensed', sans-serif;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1;
  letter-spacing: -0.5px;
  text-transform: uppercase;
  margin: 0;
  color: var(--ink);
}

/* Dual-counter tray for Date Night · stacks both counters before the meta */
.dc-pick-tray.dc-pick-tray--dual .dc-pick-tray-left {
  flex-wrap: wrap;
  gap: 14px 18px;
}
.dc-pick-tray.dc-pick-tray--dual .dc-pick-tray-meta {
  /* drop the divider on the dual variant · counters already have their own visual gap */
  padding-left: 18px;
  border-left: 1px solid rgba(255,255,255,0.35);
}
@media (max-width: 720px) {
  .dc-pick-tray.dc-pick-tray--dual {
    flex-direction: column;
    align-items: stretch;
    border-radius: 18px;
  }
  .dc-pick-tray.dc-pick-tray--dual .dc-pick-tray-meta { border-left: none; padding-left: 0; }
}

/* All Three (qty=3) on /pour/ · fixed cards, no picking */
.dc-pick-card.is-fixed {
  cursor: default;
  pointer-events: none;
}
.dc-pick-card.is-fixed:hover { transform: none; }
.dc-pick-tray.dc-pick-tray--static .dc-pick-tray-count .of {
  margin-left: 8px;
  font-weight: 600;
  color: #fff;
  font-size: 18px;
  text-transform: none;
  letter-spacing: 0.5px;
}
/* Combos sit directly under the bar grid (below Chunky Dunky row) · keep them
   visually tight to the picker rather than floating as a separate band. */
.dc-page--pick .dc-pdp-bundles--combos {
  padding-top: 0;
  padding-bottom: clamp(56px, 7vh, 96px);
}
.dc-pick-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px 24px;
  margin: 0 auto 96px;
  /* -15% from full · grid sits narrower than the section-inner so each bar reads slightly smaller */
  max-width: 85%;
}
@media (max-width: 800px) { .dc-pick-grid { grid-template-columns: repeat(3, 1fr); gap: 24px 16px; max-width: 100%; } }
@media (max-width: 500px) { .dc-pick-grid { grid-template-columns: repeat(2, 1fr); } }

.dc-pick-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 0;                                /* matches front-page menu cards · no chrome */
  background: transparent;
  border: none;
  cursor: pointer;
  font: inherit;
  text-align: center;
  transition: transform 0.15s ease;
}
.dc-pick-card:hover { transform: translateY(-2px); }
/* Picked-state outline removed (was creating an oval on the 5/6 aspect-ratio dot).
   Picked state now communicated by the .dc-pick-tick badge + .dc-pick-lozenge accent flip. */
.dc-pick-dot {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 6;
  background: transparent;                   /* let the composite PNG show its own circle */
  display: block;
}
.dc-pick-dot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;                       /* full DC_PACK composite renders as on the front page */
  transition: opacity 0.25s ease;
}
/* Hover-swap · same treatment as front-page .dc-flavour cards */
.dc-pick-dot .pack--hover { opacity: 0; }
.dc-pick-card:hover .dc-pick-dot .pack          { opacity: 0; }
.dc-pick-card:hover .dc-pick-dot .pack--hover   { opacity: 1; }
.dc-pick-tick {
  position: absolute;
  top: 8px; right: 8px;
  width: 28px; height: 28px;
  background: var(--ink);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.dc-pick-card.is-picked .dc-pick-tick { opacity: 1; transform: scale(1); }

/* Floating chips (tick + count + minus) replaced by the lozenge stepper.
   Hidden rather than removed so any cached HTML keeps rendering cleanly. */
.dc-pick-tick, .dc-pick-count, .dc-pick-minus { display: none !important; }

.dc-pick-count {
  position: absolute;
  bottom: 8px; right: 8px;
  min-width: 28px; height: 28px;
  padding: 0 8px;
  background: #fff;
  color: var(--ink);
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.dc-pick-card.is-picked .dc-pick-count { opacity: 1; }
.dc-pick-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(18px, 1.6vw, 22px);    /* bumped from flat 15px · reads as a proper product name */
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.1;
}

/* Lozenge · unpicked shows 'Pick me' text · picked transforms into a [−][n][+]
   stepper in the bar's accent colour. The label and the stepper are sibling
   elements; CSS toggles which one renders based on .is-picked. */
.dc-pick-lozenge {
  display: inline-flex;
  align-items: stretch;
  padding: 0;
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  border: 1.5px solid var(--ink);
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-top: 2px;
  overflow: hidden;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.dc-pick-lozenge-label {
  padding: 6px 14px;
  display: inline-block;
}
.dc-pick-stepper {
  display: none;
  align-items: stretch;
}
.dc-pick-card:hover .dc-pick-lozenge {
  background: var(--ink);
  color: #fff;
  transform: translateY(-1px);
}
.dc-pick-card.is-picked .dc-pick-lozenge {
  background: var(--card-c, var(--c11));
  border-color: var(--card-c, var(--c11));
  color: #fff;
  transform: none;
}
.dc-pick-card.is-picked .dc-pick-lozenge-label { display: none; }
.dc-pick-card.is-picked .dc-pick-stepper { display: inline-flex; }

/* Stepper segments sized to match the unpicked .dc-pick-lozenge-label height
   (padding 6px / font-size 11-13px) so the lozenge stays the same height when
   it flips to picked state. Width grows naturally to fit [-][n][+]. */
.dc-stepper-btn {
  padding: 6px 12px;
  background: rgba(0, 0, 0, 0.18);
  color: #fff;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 15px;
  line-height: 1.1;
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  transition: background 0.15s ease;
}
.dc-stepper-btn:hover { background: rgba(0, 0, 0, 0.32); }
.dc-stepper-count {
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.4px;
  line-height: 1.1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
}
.dc-pick-grid.is-at-cap .dc-stepper-plus { opacity: 0.4; cursor: not-allowed; }
.dc-pick-grid.is-at-cap .dc-stepper-plus:hover { background: rgba(0, 0, 0, 0.18); }

/* Sticky tray pinned to the bottom of the viewport */
.dc-pick-tray {
  position: fixed;
  left: 24px;
  right: 24px;
  bottom: 24px;
  z-index: 50;
  background: var(--ink);
  color: #fff;
  padding: 20px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  border-radius: 999px;
  box-shadow: 0 6px 30px rgba(0,0,0,0.18);
  max-width: 760px;
  margin: 0 auto;
}
.dc-pick-tray-left {
  /* Single-line layout · count + bundle/save on one row, separated by a divider */
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 16px;
  min-width: 0;
  flex-wrap: nowrap;
}
.dc-pick-tray-count {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 26px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}
.dc-pick-tray-count strong { color: var(--c11); font-size: 26px; }
.dc-pick-tray-count .of {
  font-weight: 600;
  color: #fff;                        /* solid white · matches the rest of the count line */
  margin-left: 8px;
  font-size: 26px;
  letter-spacing: 0.5px;
  text-transform: none;
}
.dc-pick-tray-meta {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 24px;
  color: #fff;                        /* solid white · no opacity wash */
  line-height: 1;
  white-space: nowrap;
  /* vertical pipe divider on the left */
  padding-left: 16px;
  border-left: 1px solid rgba(255,255,255,0.35);
}
.dc-pick-tray-meta em { color: var(--c01); font-style: italic; }
.dc-pick-add {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 16px 30px;
  background: #fff;
  color: var(--ink);
  border: 1.5px solid #fff;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
  white-space: nowrap;
}
.dc-pick-add:disabled {
  /* Resting state stays white-bg with solid black type (no grey wash) */
  cursor: not-allowed;
  color: var(--ink);
}
.dc-pick-add.is-ready {
  background: var(--c11);
  color: #fff;
  border-color: var(--c11);
}
.dc-pick-add:not(:disabled):hover {
  transform: translateY(-1px);
}
@media (max-width: 600px) {
  .dc-pick-tray { left: 12px; right: 12px; bottom: 12px; padding: 12px 16px; }
  .dc-pick-tray-meta { display: none; }
  .dc-pick-add { padding: 12px 18px; font-size: 13px; }
}


/* ==========================================================
   WHOLESALE PORTAL · tpl-wholesale.php
   - Logged out / non-trade: hero + pitch + apply + login
   - Logged in as wholesale: hero + summary + catalogue + downloads + CTA
========================================================== */
.dc-page--wholesale { background: var(--paper); }

/* Hero · same black treatment as About / Stockists / Recipes */
.dc-wholesale-hero {
  background: var(--ink);
  color: #fff;
  padding: var(--space-hero) 0;
  text-align: center;
}
.dc-wholesale-hero .eyebrow {
  display: block;
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(18px, 1.8vw, 22px);
  color: rgba(255,255,255,0.7);
  margin-bottom: 26px;
}
.dc-wholesale-hero h1 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(56px, 8vw, 110px);
  line-height: 0.85;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin: 0 0 22px;
  color: #fff;
}
.dc-wholesale-hero h1 .pop { color: var(--c04); }   /* Salty Susan teal · matches stockists */
.dc-wholesale-hero .lede {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(18px, 1.8vw, 22px);
  color: rgba(255,255,255,0.85);
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.45;
}
.dc-wholesale-hero .lede .ast { color: var(--c11); }
.dc-wholesale-hero h1 .ast { color: var(--c04); }
.dc-wholesale-account-bar {
  margin: 32px auto 0;
  max-width: 720px;
  padding: 14px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: rgba(255,255,255,0.85);
  border-radius: 999px;
}
.dc-wholesale-account-bar strong { color: #fff; font-weight: 600; }
.dc-wholesale-logout {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
}
.dc-wholesale-logout:hover { color: var(--c11); }

/* The pitch · three numbered cards */
.dc-wholesale-pitch {
  padding: var(--space-section) 0;
  background: var(--paper-soft);
}
.dc-wholesale-pitch .pitch-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.dc-wholesale-pitch .pitch-card {
  background: var(--paper);
  border: 1.5px solid var(--ink);
  padding: 32px 28px;
}
.dc-wholesale-pitch .pitch-num {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--c02);
  margin-bottom: 18px;
}
.dc-wholesale-pitch .pitch-card h3 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(28px, 3vw, 36px);
  line-height: 0.95;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  margin: 0 0 14px;
  color: var(--ink);
}
.dc-wholesale-pitch .pitch-card p {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}
.dc-wholesale-pitch .pitch-card p strong {
  font-family: 'Barlow Condensed', sans-serif;
  font-style: normal;
  font-weight: 800;
  font-size: 1.05em;
  letter-spacing: 0;
  color: var(--ink);
}
@media (max-width: 900px) { .dc-wholesale-pitch .pitch-grid { grid-template-columns: 1fr; gap: 18px; } }

/* Gate · apply form on left, login form on right */
.dc-wholesale-gate {
  padding: var(--space-section) 0;
}
.dc-wholesale-gate .gate-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
}
@media (max-width: 900px) { .dc-wholesale-gate .gate-grid { grid-template-columns: 1fr; gap: 36px; } }
.dc-wholesale-gate .gate-card {
  background: var(--paper);
  border: 1.5px solid var(--ink);
  padding: 40px 36px;
}
.dc-wholesale-gate .gate-card--login {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.dc-wholesale-gate .gate-card .eyebrow {
  display: block;
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 16px;
  color: var(--ink-mute);
  margin-bottom: 14px;
}
.dc-wholesale-gate .gate-card--login .eyebrow { color: rgba(255,255,255,0.6); }
.dc-wholesale-gate .gate-card h2 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(32px, 3.6vw, 48px);
  line-height: 0.92;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  margin: 0 0 16px;
  color: var(--ink);
}
.dc-wholesale-gate .gate-card--login h2 { color: #fff; }
.dc-wholesale-gate .gate-card > p {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 24px;
}
.dc-wholesale-gate .gate-card--login > p { color: rgba(255,255,255,0.8); }

/* Apply form */
.dc-trade-apply { display: flex; flex-direction: column; gap: 14px; }
.dc-trade-apply label { display: flex; flex-direction: column; gap: 6px; }
.dc-trade-apply label span {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.dc-trade-apply input,
.dc-trade-apply textarea {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  padding: 12px 14px;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  color: var(--ink);
  border-radius: 0;
}
.dc-trade-apply input:focus,
.dc-trade-apply textarea:focus { outline: none; background: var(--paper-soft); }
.dc-trade-apply textarea { resize: vertical; min-height: 80px; }
.dc-trade-submit {
  display: inline-block;
  align-self: flex-start;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 14px 28px;
  background: var(--ink);
  color: #fff;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
  margin-top: 4px;
}
.dc-trade-submit:hover { background: var(--c02); border-color: var(--c02); color: #fff; }
.dc-trade-disclaimer {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: var(--ink-mute);
  margin: 8px 0 0;
  font-style: normal;
  line-height: 1.5;
}
.dc-trade-disclaimer a { color: var(--ink); }

/* Login form (WP-rendered) restyled */
#dcTradeLogin {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
#dcTradeLogin .login-username,
#dcTradeLogin .login-password { display: flex; flex-direction: column; gap: 6px; margin: 0; }
#dcTradeLogin label {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}
#dcTradeLogin input[type="text"],
#dcTradeLogin input[type="password"] {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  padding: 12px 14px;
  background: transparent;
  border: 1.5px solid rgba(255,255,255,0.4);
  color: #fff;
  border-radius: 0;
  width: 100%;
  box-sizing: border-box;
}
#dcTradeLogin input[type="text"]:focus,
#dcTradeLogin input[type="password"]:focus {
  outline: none;
  border-color: #fff;
}
#dcTradeLogin .login-remember {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: rgba(255,255,255,0.8);
  margin: 4px 0;
}
#dcTradeLogin .login-remember input { margin-right: 8px; }
#dcTradeLogin .login-submit { margin: 4px 0 0; }
#dcTradeLogin input[type="submit"] {
  display: inline-block;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 14px 28px;
  background: #fff;
  color: var(--ink);
  border: 1.5px solid #fff;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
#dcTradeLogin input[type="submit"]:hover { background: var(--c11); border-color: var(--c11); color: #fff; }
.dc-login-reset {
  margin: 16px 0 0;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: rgba(255,255,255,0.7);
}
.dc-login-reset a { color: #fff; }
.dc-login-notice {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: rgba(255,255,255,0.85);
  line-height: 1.5;
  margin-bottom: 18px !important;
  font-style: normal !important;
}
.dc-login-notice a { color: var(--c11); }

/* ============ TRADE-ONLY VIEW ============ */
.dc-trade-summary {
  background: var(--paper);
  padding: var(--space-section) 0 var(--space-flow);
}
/* All four summary cards in cream against the white section · uniform row */
.dc-trade-summary .ts-card {
  background: var(--paper-soft);
}
.trade-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
@media (max-width: 900px) { .trade-summary-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .trade-summary-grid { grid-template-columns: 1fr; } }
.ts-card {
  background: var(--paper);
  border: 1.5px solid var(--ink);
  padding: 32px 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ts-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(18px, 1.6vw, 22px);          /* the bars/bottles idea now reads loud */
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink);
}
.ts-val {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(48px, 5.5vw, 72px);           /* trade price as the hero number */
  line-height: 1;
  letter-spacing: -0.5px;
  color: var(--ink);
  margin-top: 2px;
}
/* Two-line variant · "5–7 / DAYS", "PRO- / FORMA" · totals same vertical height as a single-line price */
.ts-val.ts-val--stacked {
  font-size: clamp(24px, 2.75vw, 36px);          /* ~half the standard, so 2 × line-height 1 ≈ one big line */
  line-height: 1;
  text-transform: uppercase;
}
.ts-meta {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(15px, 1.4vw, 19px);            /* readable, not tiny */
  color: var(--ink-soft);
  line-height: 1.45;
  margin-top: 4px;
}

/* Catalogue */
.dc-trade-catalogue {
  padding: var(--space-flow) 0 var(--space-section);
  background: var(--paper);
}
.dc-trade-catalogue .cat-head { margin-bottom: 48px; text-align: center; }
.dc-trade-catalogue h2 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: clamp(48px, 7vw, 88px);
  line-height: 0.9;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  margin: 0 0 12px;
  color: var(--ink);
}
.dc-trade-catalogue .lede {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(17px, 1.6vw, 20px);
  color: var(--ink-soft);
  margin: 0;
}
.cat-subhead {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(32px, 3.6vw, 48px);
  line-height: 1;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--ink);
  margin: 64px 0 22px;
  padding-bottom: 14px;
  border-bottom: 1.5px solid var(--ink);
}
.cat-pence {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(18px, 1.8vw, 24px);
  letter-spacing: 0;
  text-transform: none;
  color: var(--c02);
}
.cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
@media (max-width: 900px) { .cat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .cat-grid { grid-template-columns: repeat(2, 1fr); } }
.cat-card {
  background: var(--paper);
  border: 1.5px solid var(--ink);
  padding: 18px 18px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}
.cat-card .cat-dot {
  width: 100%;
  aspect-ratio: 5 / 6;
  background: var(--card-c, var(--c11));
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}
.cat-card .cat-dot img { width: 100%; height: auto; display: block; }
.cat-card .cat-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(18px, 1.6vw, 22px);
  letter-spacing: 0.3px;
  text-transform: uppercase;
  line-height: 1;
  color: var(--ink);
}
.cat-card .cat-meta {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(14px, 1.2vw, 16px);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-mute);
  line-height: 1.3;
}
.cat-card .cat-price {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  width: 100%;
}
.cat-card .cat-price-case {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(32px, 2.8vw, 40px);
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.3px;
}
.cat-card .cat-price-case .cat-price-tag {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(14px, 1.1vw, 16px);
  color: var(--ink-mute);
  margin-left: 4px;
  letter-spacing: 0;
}
.cat-card .cat-price-unit {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: clamp(12px, 1vw, 14px);
  color: var(--ink-soft);
  letter-spacing: 0;
  line-height: 1.2;
}
.cat-card .cat-price-vat {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink-mute);
  line-height: 1;
}

/* ============ TRADE CATALOGUE · LIST VIEW (active) ============ */
.cat-list { border-top: 1.5px solid var(--ink); }
.cat-row {
  display: grid;
  grid-template-columns: 96px 1fr 40px auto 170px;
  gap: 22px;
  align-items: center;
  padding: 14px 8px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  transition: background 0.15s ease;
}
.cat-row:hover, .cat-row.is-open { background: var(--paper-soft); }

.cat-row .cat-thumb {
  width: 96px;
  aspect-ratio: 5 / 6;                      /* matches the 1000×1200 pack composite · circle baked into the PNG */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cat-row .cat-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.cat-row .cat-row-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.cat-row .cat-row-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--ink);
}
.cat-row .cat-row-name .cat-row-x {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 0.7em;                        /* slightly smaller than the name · still all caps */
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-left: 6px;
}
.cat-row .cat-row-spec {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(17px, 1.6vw, 21px);      /* bumped · readable on the catalogue scan */
  line-height: 1.4;
  color: var(--ink-soft);
}

.cat-row .cat-info {
  width: 36px;
  height: 36px;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
  padding: 0;
}
.cat-row .cat-info:hover { background: var(--ink); color: #fff; }
.cat-row.is-open .cat-info { background: var(--ink); color: #fff; transform: rotate(180deg); }

.cat-row .cat-row-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  text-align: right;
}
.cat-row .cat-row-price-case {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(28px, 2.6vw, 36px);
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.3px;
}
.cat-row .cat-row-price-case .cat-row-price-tag {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(16px, 1.3vw, 18px);
  color: var(--ink-mute);
  margin-left: 6px;
  letter-spacing: 0;
}
.cat-row .cat-row-price-unit {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: clamp(13px, 1.1vw, 15px);
  color: var(--ink-soft);
  line-height: 1.2;
}
.cat-row .cat-row-price-vat {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink-mute);
  line-height: 1;
}

.cat-row .cat-add {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 14px 22px;
  background: var(--ink);
  color: #fff;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.cat-row .cat-add:hover { background: var(--c02); border-color: var(--c02); transform: translateY(-1px); }

/* Expand drawer · ingredients / allergens / shelf life */
.cat-detail {
  background: var(--paper-soft);
  border-bottom: 1px solid var(--line);
  padding: 22px 24px 26px 110px;
}
.cat-detail .cat-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.cat-detail h4 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 13px;
  color: var(--ink-mute);
  margin: 0 0 8px;
}
.cat-detail p {
  font-family: 'Inter', sans-serif;
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
}

@media (max-width: 800px) {
  .cat-row {
    grid-template-columns: 72px 1fr 36px;
    grid-template-areas:
      "thumb meta info"
      "thumb price price"
      ".     add   add";
    column-gap: 16px;
    row-gap: 10px;
    padding: 16px 8px;
  }
  .cat-row .cat-thumb { width: 72px; height: auto; grid-area: thumb; align-self: start; }
  .cat-row .cat-row-meta { grid-area: meta; }
  .cat-row .cat-info { grid-area: info; }
  .cat-row .cat-row-price { grid-area: price; align-items: flex-start; text-align: left; }
  .cat-row .cat-add { grid-area: add; width: 100%; }
  .cat-detail { padding: 18px 16px 22px 16px; }
  .cat-detail .cat-detail-grid { grid-template-columns: 1fr; gap: 18px; }
}

/* Downloads */
.dc-trade-downloads {
  padding: var(--space-section) 0;
  background: var(--paper);
}
.dc-trade-downloads .eyebrow {
  display: block;
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(17px, 1.6vw, 22px);
  color: var(--ink-mute);
  text-align: center;
  margin-bottom: 14px;
}
.dc-trade-downloads h2 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: clamp(48px, 6.5vw, 88px);
  line-height: 0.9;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  margin: 0 0 14px;
  color: var(--ink);
  text-align: center;
}
.dc-trade-downloads h2 .pop {
  color: var(--c02);
}
.dc-trade-downloads .lede {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(18px, 1.8vw, 24px);
  color: var(--ink-soft);
  text-align: center;
  margin: 0 auto 48px;
  max-width: 600px;
  line-height: 1.45;
}

.dl-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
@media (max-width: 800px) { .dl-grid { grid-template-columns: 1fr; } }

.dl-card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "title arrow"
    "meta  meta"
    "foot  foot";
  column-gap: 22px;
  row-gap: 14px;
  padding: 28px 30px 26px;
  background: var(--paper-soft);
  border: 1.5px solid var(--ink);
  color: var(--ink);
  text-decoration: none;
  transition: background 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
.dl-card:hover {
  background: var(--paper);
  transform: translateY(-2px);
  border-color: var(--c02);
}

/* Title · top-left of the card */
.dl-title {
  grid-area: title;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--ink);
  align-self: center;
}

/* Circle download · ink fill, white arrow · top-right */
.dl-arrow {
  grid-area: arrow;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.18s ease, transform 0.18s ease;
}
.dl-arrow .dl-arrow-svg {
  width: 22px;
  height: 22px;
  transition: transform 0.18s ease;
}
.dl-card:hover .dl-arrow { background: var(--c02); }
.dl-card:hover .dl-arrow .dl-arrow-svg { transform: translateY(2px); }

.dl-meta {
  grid-area: meta;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.55;
  color: var(--ink-soft);
}
.dl-foot {
  grid-area: foot;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding-top: 4px;
  border-top: 1px solid var(--line);
}

.dl-postscript {
  margin: 36px auto 0;
  max-width: 700px;
  text-align: center;
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(15px, 1.4vw, 18px);
  color: var(--ink-mute);
  line-height: 1.5;
}
.dl-postscript a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--ink-mute);
  text-underline-offset: 3px;
}
.dl-postscript a:hover { color: var(--c02); text-decoration-color: var(--c02); }

@media (max-width: 600px) {
  .dl-card { padding: 22px 22px 20px; }
  .dl-title { font-size: clamp(22px, 6vw, 28px); }
  .dl-arrow { width: 44px; height: 44px; }
  .dl-arrow .dl-arrow-svg { width: 18px; height: 18px; }
}

/* CTA strip */
.dc-trade-cta {
  background: var(--ink);
  color: #fff;
  padding: var(--space-section) 0;
  text-align: center;
}
.dc-trade-cta h2 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 0.95;
  text-transform: uppercase;
  margin: 0 0 8px;
  color: #fff;
}
.dc-trade-cta .lede {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(17px, 1.6vw, 20px);
  color: rgba(255,255,255,0.85);
  margin: 0 0 28px;
}
.dc-trade-cta-btn {
  display: inline-block;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 16px 32px;
  background: #fff;
  color: var(--ink);
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.dc-trade-cta-btn:hover { background: var(--c11); color: #fff; }

/* ==========================================================
   LEGAL PAGES · tpl-privacy.php, tpl-terms.php
========================================================== */
.dc-page--legal { background: var(--paper); }
.dc-legal-hero {
  background: var(--ink);
  color: #fff;
  padding: var(--space-hero) 0 var(--space-flow);
  text-align: center;
}
.dc-legal-hero .eyebrow {
  display: block;
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(18px, 1.8vw, 24px);
  color: rgba(255,255,255,0.65);
  margin-bottom: 18px;
}
.dc-legal-hero h1 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: clamp(56px, 8vw, 110px);
  line-height: 0.9;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin: 0 0 18px;
  color: #fff;
}
.dc-legal-hero .lede {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(18px, 1.6vw, 22px);
  color: rgba(255,255,255,0.85);
  margin: 0 auto;
  max-width: 580px;
}
.dc-legal-body { padding: var(--space-flow) 0 var(--space-section); }
.dc-legal-body .legal-prose {
  max-width: 720px;
  margin: 0 auto;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-soft);
}
.dc-legal-body h2 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(22px, 2vw, 28px);
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--ink);
  margin: 36px 0 12px;
}
.dc-legal-body h2:first-child { margin-top: 0; }
.dc-legal-body p { margin: 0 0 14px; }
.dc-legal-body hr {
  border: none;
  border-top: 1px solid var(--line);
  margin: 36px 0 24px;
}
.dc-legal-body .legal-foot {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  color: var(--ink-mute);
  font-size: 15px;
}

/* ==========================================================
   CONTACT · delivery anchor section (#delivery)
========================================================== */
#delivery { scroll-margin-top: 110px; }
.dc-contact-delivery {
  background: var(--paper-soft);
  padding: var(--space-section) 0;
}
.dc-contact-delivery .eyebrow {
  display: block;
  text-align: center;
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(18px, 1.8vw, 24px);
  color: var(--c11);
  margin-bottom: 8px;
}
.dc-contact-delivery h2 {
  text-align: center;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(36px, 5vw, 64px);
  text-transform: uppercase;
  margin: 0 0 36px;
  color: var(--ink);
  line-height: 0.95;
}
.dc-contact-delivery .delivery-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin: 0 0 24px;
}
@media (max-width: 900px) { .dc-contact-delivery .delivery-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .dc-contact-delivery .delivery-grid { grid-template-columns: 1fr; } }
.dc-contact-delivery .delivery-card {
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 16px;
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dc-contact-delivery .delivery-num {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.5px;
  color: var(--c11);
}
.dc-contact-delivery .delivery-card h3 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 22px;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
}
.dc-contact-delivery .delivery-card p {
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}
.dc-contact-delivery .delivery-foot {
  text-align: center;
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  color: var(--ink-mute);
  margin: 0;
}
.dc-contact-delivery .delivery-foot a {
  color: var(--c11);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ==========================================================
   SHARED CROSS-SELL STRIP · template-parts/cross-sell.php
   Wraps the existing .dc-pdp-bundles .bundle-card treatment in a section header.
========================================================== */
.dc-cross-sell {
  padding: var(--space-section) 0;
}
.dc-cross-sell .cross-sell-head {
  text-align: center;
  margin: 0 0 36px;
}
.dc-cross-sell .cross-sell-head .eyebrow {
  display: inline-block;
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(18px, 1.8vw, 24px);
  color: var(--c11);
  margin-bottom: 8px;
}
.dc-cross-sell .cross-sell-head h2 {
  font-family: 'Anton', 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 0.95;
  letter-spacing: -0.5px;
  text-transform: uppercase;
  margin: 0;
  color: var(--ink);
}
/* Cards · 3 across, full section-inner width, matches the menu-grid bar card width  */
.dc-cross-sell .dc-pdp-bundles { padding: 0; }
.dc-cross-sell .bundle-list {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 20px !important;
}
@media (max-width: 900px) {
  .dc-cross-sell .bundle-list { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 600px) {
  .dc-cross-sell .bundle-list { grid-template-columns: 1fr !important; }
}

/* Dark variant · invert text colours when used on ink backgrounds */
.dc-cross-sell.dc-cross-sell--dark .cross-sell-head h2 { color: #fff; }
.dc-cross-sell.dc-cross-sell--dark .cross-sell-head .eyebrow { color: rgba(255,255,255,0.6); }

/* ==========================================================
   WHOLESALE SAMPLE BOX · sits above the apply/login gate
========================================================== */
.dc-wholesale-sample {
  background: var(--paper);
  padding: var(--space-flow) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.dc-wholesale-sample .sample-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}
@media (max-width: 900px) {
  .dc-wholesale-sample .sample-grid { grid-template-columns: 1fr; gap: 28px; }
}
.dc-wholesale-sample .eyebrow {
  display: inline-block;
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(18px, 1.8vw, 24px);
  color: var(--c11);
  margin-bottom: 10px;
}
.dc-wholesale-sample h2 {
  font-family: 'Anton', 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 0.95;
  letter-spacing: -0.5px;
  text-transform: uppercase;
  margin: 0 0 14px;
  color: var(--ink);
}
.dc-wholesale-sample p {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
  max-width: 540px;
}
.dc-wholesale-sample .sample-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.dc-wholesale-sample .sample-cta .cta {
  display: inline-block;
  background: var(--c11);
  color: #fff;
  border: 2px solid var(--c11);
  padding: 16px 28px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 999px;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.dc-wholesale-sample .sample-cta .cta:hover {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
  transform: translateY(-1px);
}
.dc-wholesale-sample .sample-foot {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  color: var(--ink-mute);
  font-size: 14px;
  margin: 0;
}

/* ==========================================================
   THE DROP · tpl-merch.php
   Type-led product cards. Brand colour blocks stand in for photography.
   All items currently sold-out · waitlist email is the conversion path.
========================================================== */
.dc-page--merch { background: var(--paper); }

/* HERO · same black treatment as About / Pick / Pour for nav consistency */
.dc-merch-hero {
  background: var(--ink);
  color: #fff;
  padding: var(--space-hero) 0 var(--space-flow);
  text-align: center;
}
.dc-merch-hero .eyebrow {
  display: block;
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(18px, 1.8vw, 24px);
  color: rgba(255,255,255,0.65);
  margin-bottom: 18px;
  letter-spacing: 1px;
}
.dc-merch-hero h1 {
  font-family: 'Anton', 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(72px, 11vw, 160px);
  line-height: 0.85;
  letter-spacing: -1px;
  text-transform: uppercase;
  margin: 0 0 24px;
  color: #fff;
}
.dc-merch-hero h1 .pop { color: var(--c11); }
.dc-merch-hero .lede {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(18px, 1.8vw, 24px);
  color: rgba(255,255,255,0.85);
  margin: 0 auto 28px;
  max-width: 620px;
  line-height: 1.45;
}
.dc-merch-hero .hero-meta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}
.dc-merch-hero .hero-meta strong { color: #fff; font-weight: 700; }
.dc-merch-hero .hero-meta .sep { color: rgba(255,255,255,0.3); }
.dc-merch-hero .hero-meta em {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--c11);
}

/* GRID */
.dc-merch-grid-wrap {
  padding: var(--space-section) 0;
}
.dc-merch-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}
@media (max-width: 900px) { .dc-merch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
@media (max-width: 480px) { .dc-merch-grid { grid-template-columns: 1fr; gap: 20px; } }

/* PRODUCT CARD · type-led visual block + meta strip */
.drop-card {
  display: flex;
  flex-direction: column;
  background: transparent;
  position: relative;
}

/* Visual block · the "image" area · brand colour + display type */
.drop-card .drop-visual {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--drop-c, var(--c11));
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.drop-card .drop-cat-tag {
  position: absolute;
  top: 16px;
  left: 16px;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(0,0,0,0.65);
}
.drop-card .drop-num {
  position: absolute;
  top: 14px;
  right: 16px;
  font-family: 'Anton', 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 28px;
  line-height: 1;
  color: rgba(0,0,0,0.45);
}
.drop-card .drop-symbol {
  font-family: 'Anton', 'Barlow Condensed', sans-serif;
  font-size: clamp(80px, 12vw, 140px);
  line-height: 1;
  color: rgba(0,0,0,0.18);
  pointer-events: none;
}
.drop-card .drop-display {
  position: absolute;
  inset: auto 16px 16px 16px;
  font-family: 'Anton', 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 0.95;
  letter-spacing: -0.3px;
  text-transform: uppercase;
  color: rgba(0,0,0,0.85);
}

/* SOLD OUT · sticker stamp on every card */
.drop-card .drop-stamp {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-6deg);
  background: var(--ink);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 8px 18px;
  border: 2px solid #fff;
  box-shadow: 0 4px 0 rgba(0,0,0,0.18);
  z-index: 3;
  white-space: nowrap;
}

/* Hover · subtle lift, brightens the colour block slightly */
.drop-card:hover .drop-visual {
  filter: brightness(1.05);
}
.drop-card.is-sold-out .drop-visual::after {
  /* Soft dim overlay so the SOLD OUT stamp reads cleanly without crushing the colour */
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.08);
  pointer-events: none;
}

/* META · the catalogue strip below the visual */
.drop-card .drop-meta {
  padding: 16px 4px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.drop-card .drop-meta-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.drop-card .drop-meta-price {
  font-family: 'Anton', 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-mute);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
}
.drop-card .drop-meta-name {
  font-family: 'Anton', 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.05;
  letter-spacing: -0.3px;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
}
.drop-card .drop-meta-desc {
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}
.drop-card .drop-meta-cta {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--c11);
  text-decoration: none;
  margin-top: 6px;
  transition: color 0.15s ease, transform 0.15s ease;
}
.drop-card .drop-meta-cta:hover {
  color: var(--ink);
  transform: translateX(2px);
}

/* WAITLIST · the real CTA of the page */
.dc-merch-waitlist {
  background: var(--paper-soft);
  padding: var(--space-section) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.dc-merch-waitlist .waitlist-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}
@media (max-width: 900px) {
  .dc-merch-waitlist .waitlist-grid { grid-template-columns: 1fr; gap: 32px; }
}
.dc-merch-waitlist .eyebrow {
  display: inline-block;
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(18px, 1.8vw, 24px);
  color: var(--c11);
  margin-bottom: 10px;
}
.dc-merch-waitlist h2 {
  font-family: 'Anton', 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(40px, 6vw, 80px);
  line-height: 0.92;
  letter-spacing: -0.5px;
  text-transform: uppercase;
  margin: 0 0 14px;
  color: var(--ink);
}
.dc-merch-waitlist h2 .pop { color: var(--c11); }
.dc-merch-waitlist .lede {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(18px, 1.6vw, 22px);
  color: var(--ink);
  margin: 0;
  max-width: 460px;
  line-height: 1.45;
}
.dc-merch-waitlist .waitlist-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dc-merch-waitlist .waitlist-form input,
.dc-merch-waitlist .waitlist-form button {
  font: inherit;
  height: 56px;
  padding: 0 22px;
  border-radius: 0;
  border: 2px solid var(--ink);
  font-family: 'Inter', sans-serif;
  font-size: 15px;
}
.dc-merch-waitlist .waitlist-form input {
  background: var(--paper);
  color: var(--ink);
}
.dc-merch-waitlist .waitlist-form input:focus {
  outline: none;
  background: #fff;
  box-shadow: 0 0 0 3px var(--c11);
}
.dc-merch-waitlist .waitlist-form button {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 2px;
  text-transform: uppercase;
  background: var(--ink);
  color: #fff;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.dc-merch-waitlist .waitlist-form button:hover {
  background: var(--c11);
  color: #fff;
  border-color: var(--c11);
}
.dc-merch-waitlist .waitlist-foot {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: var(--ink-mute);
  margin: 4px 0 0;
}

/* ==========================================================
   CART DRAWER · suggested-upsell strip
   Appears between the item list and the totals when the cart has bars but no bottle
   (or vice versa). Single-card · one-click add.
========================================================== */
.dc-cart-upsell {
  padding: 14px 16px 16px;
  border-top: 1px solid var(--line);
  background: var(--paper-soft);
}
.dc-cart-upsell-eyebrow {
  display: block;
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 13px;
  color: var(--c11);
  margin-bottom: 10px;
  letter-spacing: 0.2px;
}
.dc-cart-upsell-card {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 12px;
  align-items: center;
}
/* Upsell pack image · let the composite circle show on its own, like the
   main cart-thumb. No paper square, no border-radius forcing it to a circle. */
.dc-cart-upsell-img {
  width: 64px;
  height: 72px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
.dc-cart-upsell-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.dc-cart-upsell-meta { min-width: 0; }
.dc-cart-upsell-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.1;
}
.dc-cart-upsell-line {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.35;
  margin: 2px 0 0;
}
.dc-cart-upsell-add {
  appearance: none;
  background: var(--ink);
  color: #fff;
  border: 2px solid var(--ink);
  border-radius: 999px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 8px 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.dc-cart-upsell-add:hover {
  background: var(--c11);
  border-color: var(--c11);
}

/* ==========================================================
   STUB FORMS · honeypot + sent state
   Forms tagged .dc-stub-form get progressive-enhancement submit handling
   from footer.php inline JS. Each form ships with an invisible honeypot
   <input name="dc_hp_company"> · this CSS keeps it out of the layout AND
   out of the tab order without breaking keyboard or screen-reader users
   (the input also has aria-hidden + tabindex="-1" in the markup).
========================================================== */
.dc-hp {
  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;
}
/* Sent state · disabled fields read as muted, button confirms success */
form.dc-stub-form.is-sent input,
form.dc-stub-form.is-sent textarea,
form.dc-stub-form.is-sent select {
  opacity: 0.6;
  cursor: not-allowed;
}
form.dc-stub-form button.is-sent {
  background: var(--c11) !important;
  border-color: var(--c11) !important;
  color: #fff !important;
  cursor: default !important;
}

/* ==========================================================
   UX-DECISIONS REBUILD · added 2026-05-19
   Components introduced by the Pick-Your-N, pre-picked bundle,
   and Mystery Pack page rebuilds. See dirty-cow-ux-decisions.html.
========================================================== */

/* ----------------------------------------------------------
   SEGMENT TOGGLE · /pour/ tabs · [1 BOTTLE][2 OF US][ALL 3]
---------------------------------------------------------- */
.dc-pour-toggle-wrap {
  background: var(--paper);
  padding: 32px 0 12px 0;   /* top padding lifts toggle off the black hero edge */
}
.dc-pour-toggle-wrap .section-inner {
  display: flex;
  justify-content: center;
}
.dc-seg {
  display: inline-flex;
  background: var(--ink);
  border-radius: 999px;
  padding: 4px;
  gap: 0;
}
.dc-seg-btn {
  background: transparent;
  color: #fff;
  border: none;
  padding: 10px 22px;
  border-radius: 999px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.dc-seg-btn:hover { color: var(--c01); }
.dc-seg-btn.is-on {
  background: var(--c11);
  color: #fff;
}
@media (max-width: 500px) {
  .dc-seg-btn { padding: 9px 14px; font-size: 12px; letter-spacing: 1.1px; }
}

/* ----------------------------------------------------------
   PROGRESS BAR · top of /pour/ picker
---------------------------------------------------------- */
.dc-progress {
  max-width: 760px;
  margin: 0 auto 32px;
  padding: 0 8px;
}
.dc-progress-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 10px;
  gap: 14px;
  flex-wrap: wrap;
}
.dc-progress-meta strong {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.dc-progress-counter em {
  font-style: italic;
  color: var(--ink-mute, #666);
  font-weight: 600;
}
.dc-progress-bar {
  height: 10px;
  background: #e5e0d6;
  border-radius: 999px;
  overflow: hidden;
}
.dc-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--c11), var(--c02));
  border-radius: 999px;
  transition: width 0.3s ease;
}

/* ----------------------------------------------------------
   IN-PICKER CTA · big pink button sat inside the stage
   (replaces the sticky tray on /pour/ and /date-night/)
---------------------------------------------------------- */
.dc-picker-cta {
  display: flex;
  justify-content: center;
  margin: 36px auto 8px;
  padding: 0 8px;
}
.dc-picker-cta-btn {
  display: inline-flex;
  flex-direction: row;            /* one-line · label and save sit side-by-side */
  flex-wrap: wrap;                /* drop to two lines on narrow screens */
  align-items: baseline;
  justify-content: center;
  gap: 4px 14px;
  background: #e5e0d6;
  color: #888;
  border: none;
  padding: 18px 36px;
  border-radius: 999px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  cursor: not-allowed;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
  min-width: 360px;
}
.dc-picker-cta-btn.is-ready,
.dc-picker-cta-btn:not([disabled]) {
  background: var(--c11);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(255, 46, 120, 0.32);
}
.dc-picker-cta-btn.is-ready:hover,
.dc-picker-cta-btn:not([disabled]):hover {
  transform: translateY(-1px);
  background: #ff1768;
  box-shadow: 0 8px 28px rgba(255, 46, 120, 0.4);
}
.dc-picker-cta-btn[disabled] { pointer-events: none; }
.dc-picker-cta-label { display: inline-block; }
.dc-picker-cta-save {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.2px;
  text-transform: none;
  opacity: 0.95;
  display: inline-block;
}
.dc-picker-cta-save::before {
  content: '\00b7';
  margin-right: 10px;
  opacity: 0.6;
  font-style: normal;
}
.dc-picker-cta-btn[disabled] .dc-picker-cta-save { display: none; }

/* ----------------------------------------------------------
   DATE NIGHT · pre-picked bundle hero + inside panel
---------------------------------------------------------- */
.dc-bundle-hero {
  background: var(--ink);
  color: #fff;
  padding: clamp(60px, 9vw, 100px) 0 clamp(50px, 7vw, 80px);
  text-align: center;
}
.dc-bundle-hero .eyebrow {
  display: inline-block;
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(15px, 1.6vw, 20px);
  color: rgba(255,255,255,0.7);
  margin-bottom: 18px;
}
.dc-bundle-hero h1 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: clamp(56px, 8vw, 110px);
  line-height: 0.9;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin: 0 0 18px;
}
.dc-bundle-hero h1 .pop { color: var(--c11); }
.dc-bundle-hero .lede {
  max-width: 640px;
  margin: 0 auto 22px;
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(18px, 1.9vw, 24px);
  line-height: 1.4;
  color: rgba(255,255,255,0.86);
}
.dc-bundle-hero-meta {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  background: rgba(255,255,255,0.08);
  border-radius: 999px;
  padding: 10px 22px;
}
.dc-bundle-price {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: 22px;
  letter-spacing: 0.6px;
  color: var(--c01);
}
.dc-bundle-save {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 14px;
  color: #fff;
}

.dc-bundle-inside-wrap {
  background: var(--paper);
  padding: clamp(50px, 7vw, 80px) 0 clamp(70px, 9vw, 100px);
}
.dc-bundle-inside {
  max-width: 880px;
  margin: 0 auto;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 22px;
  padding: clamp(28px, 4vw, 44px);
  box-shadow: 0 10px 40px rgba(0,0,0,0.06);
}
.dc-bundle-inside-head {
  text-align: center;
  margin-bottom: 28px;
}
.dc-bundle-inside-eyebrow {
  display: inline-block;
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 15px;
  color: var(--ink-mute, #666);
  margin-bottom: 6px;
}
.dc-bundle-inside-head h2 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: clamp(28px, 3.6vw, 40px);
  line-height: 1;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  margin: 0;
  color: var(--ink);
}

.dc-bundle-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-bottom: 26px;
}
@media (max-width: 600px) {
  .dc-bundle-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
}

.dc-bundle-card {
  background: var(--paper);
  border: 1.5px solid rgba(0,0,0,0.08);
  border-radius: 14px;
  padding: 18px 12px 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  position: relative;
}
.dc-bundle-dot {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  background: var(--card-c, var(--c11));
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.dc-bundle-dot .pack {
  width: 80%;
  height: 80%;
  object-fit: contain;
  transition: opacity 0.18s ease;
}
.dc-bundle-dot .pack--hover {
  position: absolute;
  inset: 10%;
  opacity: 0;
}
.dc-bundle-card:hover .dc-bundle-dot .pack        { opacity: 0; }
.dc-bundle-card:hover .dc-bundle-dot .pack--hover { opacity: 1; }
.dc-bundle-qty {
  position: absolute;
  top: 6px;
  right: 6px;
  background: var(--ink);
  color: #fff;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.4px;
  padding: 3px 9px;
  border-radius: 999px;
  line-height: 1;
}
.dc-bundle-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.15;
}
.dc-bundle-sub {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: var(--ink-mute, #666);
  margin-top: 2px;
}

.dc-bundle-divider {
  border-top: 1.5px dashed rgba(0,0,0,0.18);
  margin: 18px -8px 22px;
}

.dc-bundle-bottle-row {
  margin: 0 auto 6px;
  max-width: 320px;
}
.dc-bundle-card--bottle {
  flex-direction: row;
  text-align: left;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
}
.dc-bundle-card--bottle .dc-bundle-dot {
  width: 72px;
  height: 88px;
  aspect-ratio: auto;
  flex-shrink: 0;
  border-radius: 8px;
}
.dc-bundle-card--bottle .dc-bundle-qty {
  position: static;
  background: var(--c11);
  margin-top: 4px;
  align-self: flex-start;
}
.dc-bundle-card--bottle .dc-bundle-name {
  font-size: 15px;
}

/* ----------------------------------------------------------
   THE DROP · Mystery Pack page · black, wax-sealed
---------------------------------------------------------- */
.dc-page--mystery { background: #0a0a0a; }

.dc-mystery-hero {
  background: #0a0a0a;
  color: #fff;
  padding: clamp(60px, 9vw, 110px) 0 clamp(50px, 7vw, 90px);
  text-align: center;
}
.dc-mystery-eyebrow {
  display: inline-block;
  background: var(--c11);
  color: #fff;
  padding: 7px 16px;
  border-radius: 999px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 32px;
}

.dc-mystery-stage {
  display: flex;
  justify-content: center;
  gap: 22px;
  margin: 10px auto 36px;
  flex-wrap: wrap;
}
/* Bars · white chocolate-bar silhouettes (taller than wide, rounded corners).
   Each contains a flavour-coloured circle that cycles through the 12 bar
   accent colours via CSS animation, with delays so the three bars are always
   on different colours. */
.dc-mystery-bar {
  width: 130px;
  aspect-ratio: 0.55;
  background: #fff;
  border: 2.5px solid var(--ink, #0a0a0a);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  transition: transform 0.3s ease;
}
.dc-mystery-bar:hover { transform: translateY(-4px); }
.dc-mystery-bar-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 2.5px;
  color: var(--ink, #0a0a0a);
  text-transform: uppercase;
  opacity: 0.55;
}
@media (max-width: 600px) {
  .dc-mystery-bar { width: 96px; }
}

/* Flavour circle (was the wax seal). Snaps through the 12 bar accents
   discretely (no fade between colours · steps() does the snapping). */
.dc-wax-seal {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--c01);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  animation: dc-mystery-flavour-cycle 18s steps(1, end) infinite;
}
.dc-mystery-bar--1 .dc-wax-seal { animation-delay: 0s; }
.dc-mystery-bar--2 .dc-wax-seal { animation-delay: -6s; }
.dc-mystery-bar--3 .dc-wax-seal { animation-delay: -12s; }

@keyframes dc-mystery-flavour-cycle {
  0%     { background: var(--c01); }
  8.33%  { background: var(--c02); }
  16.66% { background: var(--c03); }
  25%    { background: var(--c04); }
  33.33% { background: var(--c05); }
  41.66% { background: var(--c06); }
  50%    { background: var(--c07); }
  58.33% { background: var(--c08); }
  66.66% { background: var(--c09); }
  75%    { background: var(--c10); }
  83.33% { background: var(--c11); }
  91.66% { background: var(--c12); }
}
.dc-wax-mark {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: 18px;
  letter-spacing: 1px;
  color: var(--ink, #0a0a0a);
  opacity: 0.85;
}

.dc-mystery-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: clamp(64px, 9vw, 130px);     /* matches .dc-pick-hero h1 */
  line-height: 0.85;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #fff;
  margin: 8px 0 22px;
}
.dc-mystery-title .ln { display: block; }
.dc-mystery-title .pop { color: var(--c11); }

.dc-mystery-sub {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(17px, 1.9vw, 22px);
  color: rgba(255,255,255,0.78);
  margin: 0 0 32px;
}

.dc-mystery-cta {
  display: inline-block;
  background: var(--c11);
  color: #fff;
  border: none;
  padding: 20px 48px;
  border-radius: 999px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(255, 46, 120, 0.4);
  transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.dc-mystery-cta:hover {
  background: #ff1768;
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(255, 46, 120, 0.5);
}
.dc-mystery-foot {
  margin: 20px 0 0;
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 14px;
  color: rgba(255,255,255,0.5);
}

/* THE DARE · long-form copy block · WHITE BACKGROUND. Body type sits in full
   ink, lede + sub-stamp punch hard, foot is the only quiet line. */
.dc-mystery-dare {
  background: var(--paper);
  color: var(--ink);
  padding: clamp(56px, 7vw, 96px) 0;
  text-align: center;
}
.dc-mystery-dare .eyebrow {
  display: inline-block;
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  color: var(--ink-mute, #666);
  font-size: 20px;
  margin-bottom: 30px;
}
.dc-mystery-dare-copy {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 24px;
}
/* Default body paragraph · placed first so the lede / sub / foot rules below
   win on specificity. */
.dc-mystery-dare-copy p {
  font-family: 'Inter', sans-serif;
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 20px;
  font-weight: 500;
}
/* Lede · big chunky display headline. Scoped to .dc-mystery-dare-copy so it
   beats the bare-p rule above (specificity fix). */
.dc-mystery-dare-copy p.dc-mystery-dare-lede {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: clamp(44px, 6vw, 72px);
  line-height: 1;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin: 0 0 36px;
  color: var(--ink);
}
/* Italic flourish line under the lede · Instrument Serif italic at a confident size */
.dc-mystery-dare-copy p.dc-mystery-dare-italic {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.35;
  letter-spacing: 0.1px;
  color: var(--ink);
  margin: 0 0 28px;
}
/* Foot · small italic outro */
.dc-mystery-dare-copy p.dc-mystery-dare-foot {
  margin-top: 36px;
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  color: var(--ink-mute, #666);
  font-size: 16px;
  font-weight: 400;
}

/* THE RULES · merged sass + FAQ · WHITE BACKGROUND. Cards inverted to light
   panels with subtle dark borders and the c11 pink accent on the left edge. */
.dc-mystery-rules {
  background: var(--paper);
  color: var(--ink);
  padding: clamp(60px, 8vw, 100px) 0;
}
.dc-mystery-rules .eyebrow {
  display: block;
  text-align: center;
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 18px;
  color: var(--ink-mute, #666);
  margin-bottom: 10px;
}
.dc-mystery-rules h2 {
  text-align: center;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 0.95;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  margin: 0 0 42px;
  color: var(--ink);
}
/* Merged-in sass + foot lines · light-bg colours when sitting in .dc-mystery-rules */
.dc-mystery-rules .dc-mystery-dare-italic {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 18px;
  padding: 0 24px;
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.35;
  color: var(--ink);
}
.dc-mystery-rules .dc-mystery-dare-foot {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 40px;
  padding: 0 24px;
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 16px;
  color: var(--ink-mute, #666);
}
.dc-mystery-rules-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  max-width: 880px;
  margin: 0 auto;
  padding: 0 24px;
}
@media (max-width: 700px) {
  .dc-mystery-rules-grid { grid-template-columns: 1fr; gap: 20px; }
}
.dc-mystery-rule {
  background: #fff;
  border: 1.5px solid rgba(0,0,0,0.08);
  border-left: 4px solid var(--c11);
  border-radius: 12px;
  padding: 22px 24px;
}
.dc-mystery-rule-num {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 1.6px;
  color: var(--c11);
  margin-bottom: 8px;
}
.dc-mystery-rule h3 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 19px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 8px;
  line-height: 1.15;
}
.dc-mystery-rule p {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(0,0,0,0.72);
  margin: 0;
}


/* ==========================================================
   WOOCOMMERCE · brand overrides for cart + checkout + my account
   Added 2026-05-21. Replaces WC's generic templates' look with
   the Dirty Cow voice — Barlow Condensed headings, black/pink
   buttons, paper background, "inc. VAT" suffix in Inter italic.
========================================================== */

.woocommerce, .woocommerce-page {
  font-family: 'Inter', sans-serif;
  color: var(--ink, #0a0a0a);
}

/* Headings · cart / checkout / my account */
.woocommerce h1, .woocommerce h2, .woocommerce h3,
.woocommerce-page h1, .woocommerce-page h2, .woocommerce-page h3 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--ink, #0a0a0a);
}

/* Cart + checkout tables · cleaner borders, more breathing room */
.woocommerce table.shop_table,
.woocommerce-cart table.cart,
.woocommerce-checkout table.shop_table {
  border: none;
  border-collapse: collapse;
  width: 100%;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  border-top: 1px solid rgba(0,0,0,0.08);
  padding: 18px 12px;
  background: transparent;
}
.woocommerce table.shop_table thead th {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 13px;
  color: var(--ink, #0a0a0a);
  border-top: none;
  border-bottom: 2px solid var(--ink, #0a0a0a);
}
.woocommerce-cart .cart_totals,
.woocommerce-checkout .cart_totals {
  background: var(--paper, #f4ede1);
  padding: 24px;
  border-radius: 14px;
}

/* All WC buttons · brand black-pill default, pink hover */
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-page button.button,
.wc-block-components-button {
  background: var(--ink, #0a0a0a);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 14px 28px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
  text-decoration: none;
  display: inline-block;
  line-height: 1.2;
}
.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.wc-block-components-button:hover {
  background: var(--c11, #ff2e78);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(255, 46, 120, 0.28);
}

/* Primary action · "Proceed to checkout" + "Place order" pop pink */
.woocommerce-cart .wc-proceed-to-checkout .checkout-button,
.woocommerce-checkout #place_order,
button#place_order {
  background: var(--c11, #ff2e78);
  font-size: 17px;
  padding: 18px 36px;
  letter-spacing: 1.8px;
  box-shadow: 0 6px 24px rgba(255, 46, 120, 0.28);
  width: 100%;
}
.woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover,
.woocommerce-checkout #place_order:hover {
  background: #ff1768;
  box-shadow: 0 8px 28px rgba(255, 46, 120, 0.4);
}

/* Form inputs · checkout fields */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout select {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  padding: 12px 14px;
  border: 1.5px solid rgba(0,0,0,0.18);
  border-radius: 8px;
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce-checkout input:focus,
.woocommerce-checkout select:focus {
  outline: none;
  border-color: var(--ink, #0a0a0a);
  box-shadow: 0 0 0 3px rgba(255, 46, 120, 0.18);
}
.woocommerce form .form-row label,
form.checkout .form-row label,
form.woocommerce-checkout .form-row label,
form.checkout label,
form.checkout legend {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  color: var(--ink, #0a0a0a) !important;
  margin-bottom: 6px !important;
  display: block;
}
/* Inputs themselves · explicit font so the placeholder + typed value match */
form.checkout .form-row input.input-text,
form.checkout .form-row textarea,
form.checkout .form-row select,
form.checkout input[type="text"],
form.checkout input[type="email"],
form.checkout input[type="tel"],
form.checkout input[type="password"] {
  font-family: 'Inter', sans-serif !important;
  font-size: 15px !important;
}
form.checkout ::placeholder {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  color: rgba(0,0,0,0.38);
  font-size: 15px;
}

/* Price displays · clean Barlow Condensed for amounts */
.woocommerce .price,
.woocommerce-Price-amount,
.woocommerce table.cart .product-subtotal,
.woocommerce-cart .cart_totals .order-total {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  color: var(--ink, #0a0a0a);
}

/* "inc. VAT" suffix · Instrument Serif italic for the brand flourish */
.woocommerce-Price-taxLabel,
.woocommerce .price small,
.product .price small {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-mute, #666);
  font-size: 0.78em;
  margin-left: 4px;
}

/* Notices · clean, no garish backgrounds */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-NoticeGroup .woocommerce-message {
  background: var(--paper, #f4ede1);
  border: none;
  border-left: 4px solid var(--c11, #ff2e78);
  border-radius: 6px;
  padding: 16px 20px;
  font-family: 'Inter', sans-serif;
  color: var(--ink, #0a0a0a);
}
.woocommerce-error { border-left-color: #e74c3c; }

/* Quantity inputs · match the rest of the form */
.woocommerce .quantity input.qty {
  border: 1.5px solid rgba(0,0,0,0.18);
  border-radius: 8px;
  padding: 8px 10px;
  width: 64px;
  text-align: center;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
}

/* Product thumb in cart · slightly larger, rounded */
.woocommerce-cart table.cart img {
  width: 80px;
  border-radius: 8px;
}

/* Order received page · "ORDER RECEIVED" heading already pops · just polish the receipt */
.woocommerce-order .woocommerce-thankyou-order-received {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 22px;
  color: var(--ink-mute, #555);
  margin-bottom: 32px;
}
.woocommerce-order .woocommerce-order-overview {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 18px;
  padding: 0;
  margin: 0 0 36px;
  border-top: 2px solid var(--ink, #0a0a0a);
  border-bottom: 2px solid var(--ink, #0a0a0a);
  padding: 24px 0;
}
.woocommerce-order .woocommerce-order-overview li {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--ink-mute, #666);
  text-transform: uppercase;
  letter-spacing: 1px;
  border: none;
}
.woocommerce-order .woocommerce-order-overview li strong {
  display: block;
  margin-top: 4px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: 22px;
  letter-spacing: 0.4px;
  text-transform: none;
  color: var(--ink, #0a0a0a);
}

/* ==========================================================
   WOOCOMMERCE · checkout / cart page-level wrapper (2026-05-22)
   The classic [woocommerce_checkout] / [woocommerce_cart] shortcodes
   render via index.php, which doesn't add the .dc-page class — so
   .section-inner has no max-width and the whole page goes full-bleed.
   This block adds the missing container + paper bg + section cards
   + sized H1 + payment row polish, scoped to WC body classes only.
========================================================== */

/* Paper background behind the whole page on WC routes (!important to win
   against any earlier body { background: #fff } rule from earlier in the file) */
html body.woocommerce-checkout,
html body.woocommerce-cart,
html body.woocommerce-account,
html body.woocommerce-order-received,
body.woocommerce-checkout main,
body.woocommerce-cart main,
body.woocommerce-account main,
body.woocommerce-order-received main,
body.woocommerce-checkout main.section,
body.woocommerce-cart main.section {
  background: var(--paper, #f4ede1) !important;
}

/* Container · centers content and adds breathing room.
   IMPORTANT: index.php wraps content in main > .section-inner > article,
   so we target .section-inner (not article) for the max-width. */
body.woocommerce-checkout main,
body.woocommerce-cart main,
body.woocommerce-account main,
body.woocommerce-order-received main {
  padding: 56px 0 96px;
}
body.woocommerce-checkout main .section-inner,
body.woocommerce-cart main .section-inner,
body.woocommerce-account main .section-inner,
body.woocommerce-order-received main .section-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 5vw;
}

/* Page title H1 on CHECKOUT · HIDDEN entirely. The lede above is the
   only headline customers see. Word "CHECKOUT" removed per design call. */
body.woocommerce-checkout article > h1 {
  display: none !important;
}

/* Cart / Account / Order received still get the full-size brand H1 */
body.woocommerce-cart main > article > h1,
body.woocommerce-account main > article > h1,
body.woocommerce-order-received main > article > h1 {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 900 !important;
  font-size: clamp(40px, 5.5vw, 64px) !important;
  line-height: 1 !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase !important;
  color: var(--ink, #0a0a0a) !important;
  margin: 0 0 36px !important;
}

/* Coupon notice · clean strip not flush-bar */
body.woocommerce-checkout .woocommerce-form-coupon-toggle,
body.woocommerce-cart .woocommerce-form-coupon-toggle {
  margin: 0 0 24px;
}
body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-left: 4px solid var(--c11, #ff2e78);
  border-radius: 10px;
  padding: 14px 20px;
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
}
body.woocommerce-checkout .woocommerce-form-coupon-toggle .showcoupon {
  color: var(--c11, #ff2e78);
  font-weight: 600;
  text-decoration: underline;
}

/* Express checkout row (Apple Pay / Google Pay / Amazon Pay) · contained + rounded */
body.woocommerce-checkout .wc-stripe-payment-request-wrapper,
body.woocommerce-checkout .wc-stripe-payment-request-button-separator,
body.woocommerce-checkout #wc-stripe-payment-request-wrapper,
body.woocommerce-checkout .apple-pay-button-with-text,
body.woocommerce-checkout #pay_with_amazon {
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}
body.woocommerce-checkout .wc-stripe-payment-request-button-separator {
  margin: 24px 0 28px;
  text-align: center;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  letter-spacing: 2px;
  font-size: 13px;
  color: var(--ink-mute, #666);
  text-transform: uppercase;
}

/* Form area · split into card sections */
body.woocommerce-checkout form.checkout {
  display: block;
}
@media (min-width: 980px) {
  body.woocommerce-checkout form.checkout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "billing payment summary";
    gap: 32px 28px;
    align-items: stretch;
  }
  /* Force all 3 column cards to fill the tallest column's height */
  body.woocommerce-checkout form.checkout #customer_details,
  body.woocommerce-checkout form.checkout #payment,
  body.woocommerce-checkout form.checkout #order_review {
    height: 100%;
  }
  body.woocommerce-checkout .dc-checkout-express-top {
    grid-area: express;
    grid-column: 1 / -1 !important;
  }
  /* Col 1: customer details (billing + shipping + notes) */
  body.woocommerce-checkout form.checkout #customer_details {
    grid-area: billing;
    display: block;
  }
  /* Col 2: payment + place order. The JS moves #payment OUT of #order_review
     so it lives as a direct sibling of #order_review under the form. */
  body.woocommerce-checkout form.checkout #payment {
    grid-area: payment;
    align-self: start;
  }
  /* Col 3: order summary (heading + items table). The JS moves
     #order_review_heading INSIDE #order_review so they group together. */
  body.woocommerce-checkout form.checkout #order_review {
    grid-area: summary;
    align-self: start;
    display: block;
  }
  /* Hide the now-orphaned heading sibling outside #order_review */
  body.woocommerce-checkout form.checkout #order_review_heading {
    display: none;
  }
  /* Inside #customer_details, WC's col-1/col-2 stack vertically */
  body.woocommerce-checkout #customer_details .col-1,
  body.woocommerce-checkout #customer_details .col-2 {
    width: 100%;
    float: none;
    margin-bottom: 24px;
  }
  /* First name + Last name stack vertically (col is ~350px, too tight for 50/50) */
  body.woocommerce-checkout p.form-row-first,
  body.woocommerce-checkout p.form-row-last {
    width: 100% !important;
    float: none !important;
    margin-right: 0 !important;
  }
}

/* Express checkout row · contain the Apple/Google/Amazon buttons in a tidy
   max-width strip with consistent button height. They render via separate
   plugins so each gets its own wrapper styled the same way. */
body.woocommerce-checkout .wc-stripe-payment-request-button,
body.woocommerce-checkout #wc-stripe-payment-request-button,
body.woocommerce-checkout #pay_with_amazon,
body.woocommerce-checkout .amazon-pay-button {
  max-width: 100%;
  border-radius: 12px;
  overflow: hidden;
}
body.woocommerce-checkout .wc-stripe-payment-request-wrapper,
body.woocommerce-checkout #pay_with_amazon {
  margin-bottom: 12px;
}

/* Card treatment for each form section */
/* #customer_details is now the single billing/shipping/notes card.
   Sub-sections inside (billing-fields, shipping-fields, additional-fields)
   sit transparently inside it with section dividers between them. */
body.woocommerce-checkout #customer_details {
  background: #fff;
  border-radius: 14px;
  padding: 24px 26px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.05);
}
body.woocommerce-checkout .woocommerce-billing-fields,
body.woocommerce-checkout .woocommerce-shipping-fields,
body.woocommerce-checkout .woocommerce-additional-fields {
  background: transparent;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  margin-bottom: 20px;
}
.woocommerce-billing-fields-unused {
  padding: 28px 28px 12px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.05);
  margin-bottom: 24px;
}
/* (#order_review styling moved further down — uses paper bg, not sticky) */

/* Section headings */
body.woocommerce-checkout h3,
body.woocommerce-checkout #order_review_heading {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ink, #0a0a0a);
  border-bottom: 2px solid var(--ink, #0a0a0a);
  padding-bottom: 10px;
  margin: 0 0 20px;
}
body.woocommerce-checkout #order_review_heading {
  background: transparent;
  padding: 0 0 10px;
  margin: 0 0 16px;
}

/* Payment methods · clean radio rows, no garish wc default */
body.woocommerce-checkout #payment {
  background: transparent;
  border-radius: 0;
  margin-top: 8px;
}
body.woocommerce-checkout #payment ul.wc_payment_methods {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  border-top: 1px solid rgba(0,0,0,0.08);
}
body.woocommerce-checkout #payment ul.wc_payment_methods li.wc_payment_method {
  border-bottom: 1px solid rgba(0,0,0,0.08);
  padding: 14px 4px;
  background: transparent;
}
body.woocommerce-checkout #payment ul.wc_payment_methods li label {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}
body.woocommerce-checkout #payment div.payment_box {
  background: var(--paper, #f4ede1);
  border-radius: 10px;
  padding: 16px;
  margin-top: 12px;
  color: var(--ink, #0a0a0a);
}
body.woocommerce-checkout #payment div.payment_box::before {
  display: none; /* kill the default little tail/arrow */
}

/* Terms checkbox row · readable */
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
  margin: 16px 0;
}
body.woocommerce-checkout .form-row.validate-required label {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}

/* Order review table polish */
body.woocommerce-checkout #order_review table.shop_table tfoot th,
body.woocommerce-checkout #order_review table.shop_table tfoot td {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.5px;
}
body.woocommerce-checkout #order_review table.shop_table tfoot tr.order-total th,
body.woocommerce-checkout #order_review table.shop_table tfoot tr.order-total td {
  font-size: 20px;
  font-weight: 900;
  border-top: 2px solid var(--ink, #0a0a0a);
  padding-top: 16px;
}

/* Tighter mobile spacing */
@media (max-width: 720px) {
  body.woocommerce-checkout main,
  body.woocommerce-cart main {
    padding: 36px 5vw 72px;
  }
  body.woocommerce-checkout .woocommerce-billing-fields,
  body.woocommerce-checkout .woocommerce-shipping-fields,
  body.woocommerce-checkout .woocommerce-additional-fields,
  body.woocommerce-checkout #order_review,
  body.woocommerce-checkout #payment {
    padding: 20px 18px;
  }
}

/* ----- Brand lede · the ONLY headline on the checkout page ----------
   The CHECKOUT h1 is hidden entirely (per design call). This lede is the
   visual headline. The JS moves it out of the form so it sits cleanly
   as a sibling above the 3-col grid. */
body.woocommerce-checkout .dc-checkout-lede,
.dc-checkout-lede {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(44px, 5.6vw, 68px);
  line-height: 1.08;
  letter-spacing: -0.5px;
  color: var(--ink, #0a0a0a);
  margin: 0 0 32px;
  max-width: 100%;
}
.dc-checkout-lede br {
  display: block;
  content: "";
  margin-top: 4px;
}
body.woocommerce-checkout .dc-checkout-lede strong {
  font-family: 'Barlow Condensed', sans-serif;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--c11, #ff2e78);
  display: inline-block;
}

/* Express checkout container · placed at the top of the form by the
   dc_checkout_dom_tidy JS. Spans both grid columns. */
body.woocommerce-checkout .dc-checkout-express-top {
  grid-column: 1 / -1;
  grid-row: 1;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
body.woocommerce-checkout .dc-checkout-express-top .wc-stripe-payment-request-button-separator {
  text-align: center;
  margin: 14px 0 4px;
  font-family: 'Barlow Condensed', sans-serif;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 12px;
  color: var(--ink-mute, #888);
  font-weight: 700;
}
body.woocommerce-checkout .dc-checkout-express-top > * {
  border-radius: 12px;
  overflow: hidden;
}

/* "Billing Details" h3 inside the form · keep it on-brand, tighter */
body.woocommerce-checkout .woocommerce-billing-fields h3,
body.woocommerce-checkout .woocommerce-shipping-fields h3,
body.woocommerce-checkout .woocommerce-additional-fields h3 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: 20px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ink, #0a0a0a);
  border-bottom: 2px solid var(--ink, #0a0a0a);
  padding-bottom: 8px;
  margin: 0 0 18px;
}

/* ----- Your Order section · the third column ---------------------- */
/* The JS moves #order_review_heading INSIDE #order_review (first child),
   so #order_review becomes a single paper-bg card containing heading + table. */
body.woocommerce-checkout #order_review {
  background: var(--paper, #f4ede1);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 14px;
  padding: 22px 22px 18px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.06);
}
/* The heading (now first child of #order_review) is the card's top title */
body.woocommerce-checkout #order_review > #order_review_heading {
  display: block !important; /* re-show after the grid-level display:none */
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--ink, #0a0a0a);
  margin: 0 0 12px;
  padding: 0 0 10px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: 18px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
/* Items table inside the card · transparent so the paper bg shows through */
body.woocommerce-checkout #order_review table.shop_table {
  background: transparent !important;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
  box-shadow: none;
  border-collapse: separate;
}
body.woocommerce-checkout #order_review table.shop_table thead {
  display: none;  /* PRODUCT / SUBTOTAL header isn't needed in the sidebar */
}
body.woocommerce-checkout #order_review table.shop_table tbody td {
  background: transparent;
  border: none;
  border-top: 1px solid rgba(0,0,0,0.10);
  padding: 14px 0;
  vertical-align: middle;
}
body.woocommerce-checkout #order_review table.shop_table tbody tr:first-child td {
  border-top: none;
}

/* Product row · image + name + qty + price */
body.woocommerce-checkout .dc-checkout-item {
  display: flex;
  align-items: center;
  gap: 14px;
}
body.woocommerce-checkout .dc-checkout-item-thumb {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff;
  object-fit: contain;
  flex-shrink: 0;
}
body.woocommerce-checkout .dc-checkout-item-text {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  line-height: 1.15;
}
body.woocommerce-checkout #order_review .product-quantity {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 13px;
  color: var(--ink-mute, #666);
  margin-left: 6px;
}
body.woocommerce-checkout #order_review td.product-total {
  text-align: right;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 16px;
  white-space: nowrap;
}

/* Totals (Subtotal / Shipment / Total) · cleaner row layout */
body.woocommerce-checkout #order_review table.shop_table tfoot tr {
  border-top: 1px solid rgba(0,0,0,0.10);
}
body.woocommerce-checkout #order_review table.shop_table tfoot th,
body.woocommerce-checkout #order_review table.shop_table tfoot td {
  background: transparent;
  border: none;
  padding: 10px 0;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--ink, #0a0a0a);
}
body.woocommerce-checkout #order_review table.shop_table tfoot td {
  text-align: right;
  font-size: 15px;
}
body.woocommerce-checkout #order_review table.shop_table tfoot tr.order-total th,
body.woocommerce-checkout #order_review table.shop_table tfoot tr.order-total td {
  font-size: 22px;
  font-weight: 900;
  border-top: 2px solid var(--ink, #0a0a0a);
  padding-top: 14px;
}

/* Payment section · its own white card in the MIDDLE column.
   The JS moves #payment OUT of #order_review so it lives as a sibling
   under the form. The Place Order button stays inside #payment. */
body.woocommerce-checkout #payment {
  background: #fff;
  border-radius: 14px;
  padding: 22px 22px 22px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.05);
  margin: 0;
}
/* Add a "PAYMENT" heading at the top of the card (synthesized via CSS
   since WC doesn't include one by default) */
body.woocommerce-checkout #payment::before {
  content: "Payment";
  display: block;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: 18px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ink, #0a0a0a);
  border-bottom: 2px solid var(--ink, #0a0a0a);
  padding-bottom: 10px;
  margin-bottom: 14px;
}
body.woocommerce-checkout #payment ul.wc_payment_methods {
  background: transparent;
  border-radius: 0;
  padding: 0;
  border-top: none;
  border-bottom: none;
  margin: 0 0 16px;
  list-style: none;
}
/* Each payment method (Card, Klarna, etc) rendered as a card-like button row */
body.woocommerce-checkout #payment ul.wc_payment_methods li.wc_payment_method {
  border: 1.5px solid rgba(0,0,0,0.10);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 0 0 10px;
  background: #fff;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  cursor: pointer;
}
body.woocommerce-checkout #payment ul.wc_payment_methods li.wc_payment_method:hover {
  border-color: rgba(255, 46, 120, 0.5);
}
body.woocommerce-checkout #payment ul.wc_payment_methods li.wc_payment_method:has(input[type="radio"]:checked) {
  border-color: var(--c11, #ff2e78);
  background: rgba(255, 46, 120, 0.05);
  box-shadow: 0 0 0 3px rgba(255, 46, 120, 0.12);
}
body.woocommerce-checkout #payment ul.wc_payment_methods li.wc_payment_method:last-child {
  margin-bottom: 0;
}
body.woocommerce-checkout #payment ul.wc_payment_methods li.wc_payment_method label {
  margin: 0 !important;
  width: 100%;
}

/* Coupon strip when moved INTO #payment by the JS · slim accent at top */
body.woocommerce-checkout #payment .woocommerce-form-coupon-toggle {
  margin: 0 0 18px;
  padding: 0 0 18px;
  border-bottom: 1px dashed rgba(0,0,0,0.12);
}
body.woocommerce-checkout #payment .woocommerce-form-coupon-toggle .woocommerce-info {
  background: transparent;
  border: none;
  border-left: 3px solid var(--c11, #ff2e78);
  border-radius: 0;
  padding: 4px 0 4px 14px;
  margin: 0;
  font-size: 13px;
}

/* Express checkout row · CENTERED COLUMN above the form.
   The JS moves this wrap OUTSIDE the form (sibling above), so it's a plain
   block-level element — no grid placement battles. Stripe's PaymentRequest
   iframes have fixed inner width, so the column is stacked, not 3-up. */
.dc-checkout-express-top {
  display: block;
  width: 100%;
  max-width: 480px;
  margin: 0 auto 28px;
}
.dc-checkout-express-top > * {
  display: block;
  width: 100%;
  margin: 0 0 10px;
  border-radius: 12px;
  overflow: hidden;
}
.dc-checkout-express-top > .wc-stripe-payment-request-button-separator {
  text-align: center;
  margin: 14px 0 4px;
  padding: 0;
  font-family: 'Barlow Condensed', sans-serif;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 12px;
  color: var(--ink-mute, #888);
  font-weight: 700;
  border-radius: 0;
  overflow: visible;
}

/* "Pay in 3 with PayPal" message · keep it small + tidy */
body.woocommerce-checkout #order_review .paypal-message,
body.woocommerce-checkout #order_review .ppcp-messages {
  margin-top: 14px;
  font-size: 12px;
}

/* ---------- PDP pack-stage · hover-fade fix (Cherry Pop overlay) -----
   Cherry Pop's dedicated template renders <img.pack> + <img.pack.pack--hover>
   inside .pack-stage. Without this rule both images stack visible.
   Matches the hover-fade pattern used in .dc-flavour / .dc-also / .dc-pick.
   (Originally appended directly on the server during a separate PDP gallery
   deploy — preserved here so style.css redeploys don't wipe it.) */
.dc-pdp .pack-stage .pack--hover { opacity: 0; transition: opacity 0.4s; }
.dc-pdp .pack-stage:hover .pack--hover { opacity: 1; }

/* ---------- PDP extra thumbnails (bar shot + lifestyle) --------------
   Injected via JS in wc-drawer-bridge.php#dc_pdp_gallery_inject.
   Sits right below the main .visual block. Click to swap the hero image. */
.dc-pdp-extra-thumbs {
  display: flex;
  gap: 12px;
  margin-top: 18px;
  justify-content: center;
}
.dc-pdp-thumb {
  display: block;
  width: 72px;
  height: 72px;
  padding: 0;
  border: 2px solid rgba(0,0,0,0.10);
  background: #fff;
  border-radius: 50%;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.dc-pdp-thumb:hover {
  border-color: var(--c11, #ff2e78);
  transform: translateY(-2px);
}
.dc-pdp-thumb.is-active {
  border-color: var(--ink, #0a0a0a);
  box-shadow: 0 0 0 3px rgba(0,0,0,0.06);
}
.dc-pdp-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- Front-page free-postage strip --------------------------- */
/* Thin paper-bg ribbon between dc-reasons and dc-liqueur sections.
   Promotes the "3+ items = free UK postage" rule everywhere a customer
   might see it before checkout. */
.dc-free-postage {
  background: var(--paper, #f4ede1);
  padding: 18px 0;
  border-top: 1px solid rgba(0,0,0,0.08);
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.dc-free-postage .section-inner {
  text-align: center;
}
.dc-free-postage-line {
  margin: 0;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(18px, 2.2vw, 24px);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink, #0a0a0a);
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}
.dc-free-postage-emph {
  color: var(--c11, #ff2e78);
}
.dc-free-postage-sep {
  color: rgba(0,0,0,0.3);
  font-weight: 400;
}
.dc-free-postage-cond {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink, #0a0a0a);
  font-size: 1.1em;
}