/** Shopify CDN: Minification failed

Line 153:69 Unexpected "/"

**/
/* ==========================================================================
   Same Skies — PDP "Letter Nº 06" (Concept 01)
   Scoped port of the static design into a single theme asset.

   EVERYTHING here is scoped under `.ss-pdp` so it cannot leak into the
   theme header / footer / other sections. The whole PDP markup is wrapped
   in a single root element: <div class="ss-pdp"> … </div>

   Sources ported (verbatim values, only rescoped):
     - PDP_extracted/assets/colors_and_type.css   (tokens + base elements)
     - PDP_extracted/assets/pdp-base.css          (shared components)
     - PDP_extracted/pdp-01-letter.html <style>    (Concept 01 art direction)

   Dropped (site chrome the live theme already provides):
     - @import Google Fonts + @import colors_and_type.css
     - all .pdp-nav* rules
     - all .pdp-footer* rules
     - page-level html{overflow-x:clip} / body{overflow-x:hidden}
   Kept: .pdp-stickybar*, .pdp-crumb* (we still render those).
   ========================================================================== */

/* ==========================================================================
   DESIGN TOKENS — kept exactly (these custom-prop names don't clash with
   the theme; they're all design-owned: --ssb-*, --color-*, --font-display/
   body/mono, --fw-*, --tracking-*, --lh-*, --fs-*, --radius-*, --space-*,
   --shadow-*, --ease-*, --t-*).
   ========================================================================== */
.ss-pdp {
  /* ===== BRAND PALETTE =============================================== */
  /* Terracotta — primary brand accent, CTAs, warmth */
  --ssb-terracotta:         #a85e38;
  --ssb-terracotta-hover:   #8f4e2e;  /* primary button hover */
  --ssb-terracotta-light:   #d4896a;
  --ssb-terracotta-pale:    #f5ebe4;  /* tinted backgrounds */

  /* Creams / warm neutrals — canvas */
  --ssb-cream:              #faf8f4;  /* page background */
  --ssb-parchment:          #f2ede4;  /* scheme-2 background, chip bg */
  --ssb-dust:               #e8e0d0;  /* borders, dividers */
  --ssb-dust-deep:          #d4c8b4;

  /* Ink / dark neutrals — text, dark panels */
  --ssb-ink:                #1a1714;  /* body heading ink */
  --ssb-ink-soft:           #4a4540;  /* body text */
  --ssb-slate:              #6e655c;  /* muted labels, slate grey — AA on cream (was #8c8278, ~3.1:1 fail) */

  /* Navy / midnight — dark panels (hero strip headers, order cards) */
  --ssb-navy:               #1c2b3a;  /* brief spec navy */
  --ssb-navy-2:             #1e2535;  /* gift-builder navy */
  --ssb-midnight:           #2c3240;
  --ssb-navy-line:          #3d4455;

  /* Teal — secondary accent (used for trust / totals / price) */
  --ssb-teal:               #2d6b5e;
  --ssb-teal-dark:          #1e4d43;
  --ssb-teal-light:         #3d8b7a;
  --ssb-sage:               #7a8c72;
  --ssb-green:              #4a7c5a;

  /* ===== SEMANTIC ===================================================== */
  --color-bg:               var(--ssb-cream);
  --color-bg-alt:           var(--ssb-parchment);
  --color-bg-dark:          var(--ssb-navy-2);
  --color-surface:          #ffffff;
  --color-border:           var(--ssb-dust);
  --color-border-strong:    var(--ssb-dust-deep);

  --color-fg:               var(--ssb-ink);          /* headings / strong */
  --color-fg-body:          var(--ssb-ink-soft);     /* body text */
  --color-fg-muted:         var(--ssb-slate);        /* labels, hints */
  --color-fg-inverse:       var(--ssb-cream);

  --color-accent:           var(--ssb-terracotta);
  --color-accent-hover:     var(--ssb-terracotta-hover);
  --color-accent-soft:      var(--ssb-terracotta-pale);

  --color-trust:            var(--ssb-teal);         /* price, confirmation */
  --color-trust-hover:      var(--ssb-teal-dark);

  /* ===== TYPE FAMILIES ================================================ */
  --font-display:   'Cormorant Garamond', 'Cormorant', Georgia, 'Times New Roman', serif;
  --font-body:      'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:      ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Weights */
  --fw-display:     300;   /* serif display is intentionally LIGHT */
  --fw-body:        300;   /* body is LIGHT by default — a key brand signature */
  --fw-medium:      500;
  --fw-semibold:    600;

  /* Letter spacing */
  --tracking-tight:   -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.06em;
  --tracking-eyebrow: 0.22em;  /* UPPERCASE eyebrows / labels */

  /* Line heights */
  --lh-display-tight:   1.05;
  --lh-display-normal:  1.15;
  --lh-display-loose:   1.35;
  --lh-body-tight:      1.5;
  --lh-body-loose:      1.75;

  /* ===== TYPE SCALE (display = serif, body = sans) ==================== */
  --fs-h1:    clamp(42px, 6vw, 72px);   /* hero serif */
  --fs-h2:    48px;                      /* section serif */
  --fs-h3:    36px;                      /* panel serif */
  --fs-h4:    24px;
  --fs-h5:    14px;                      /* subheading sans */
  --fs-h6:    12px;                      /* smallest subheading */
  --fs-body:  14px;
  --fs-small: 13px;
  --fs-xs:    11px;
  --fs-eyebrow: 11px;

  /* ===== SPACING & RADII ============================================== */
  --radius-xs:   2px;   /* buttons (actual theme value) */
  --radius-sm:   3px;
  --radius-md:   4px;   /* cards (actual theme value) */
  --radius-lg:   8px;   /* brief-spec rounded CTAs */
  --radius-pill: 999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* ===== SHADOWS ======================================================= */
  --shadow-nav:     0 2px 12px rgba(0,0,0,0.05);
  --shadow-card:    0 4px 20px rgba(0,0,0,0.06);
  --shadow-lift:    0 8px 24px rgba(0,0,0,0.08);
  --shadow-cta:     0 6px 16px rgba(45,107,94,0.3);
  --shadow-cta-warm:0 6px 16px rgba(168, 94, 56,0.35);

  /* ===== MOTION ======================================================== */
  --ease-out:       cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft:      cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast:         0.2s;
  --t-base:         0.25s;
  --t-slow:         0.4s;
}

/* ==========================================================================
   BASE ELEMENT STYLES — rescoped under .ss-pdp (was html/body/h*/p/a etc.)
   ========================================================================== */
/* was: html { color; background } + body { ... }  →  the root .ss-pdp */
.ss-pdp {
  color: var(--color-fg-body);
  background: var(--color-bg);
  font-family: var(--font-body);
  font-weight: var(--fw-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body-loose);
  -webkit-font-smoothing: antialiased;
}

/* was: *, *::before, *::after { box-sizing } */
.ss-pdp, .ss-pdp *, .ss-pdp *::before, .ss-pdp *::after { box-sizing: border-box; }
/* was: * { margin; padding } */
.ss-pdp * { margin: 0; padding: 0; }
/* was: img { display; max-width } */
.ss-pdp img { display: block; max-width: 100%; }
/* was: button { font-family; cursor } */
.ss-pdp button { font-family: inherit; cursor: pointer; }

.ss-pdp h1, .ss-pdp h2, .ss-pdp h3, .ss-pdp h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  color: var(--color-fg);
  letter-spacing: var(--tracking-tight);
  text-wrap: pretty;
}
.ss-pdp h1 { font-size: var(--fs-h1); line-height: var(--lh-display-tight); }
.ss-pdp h2 { font-size: var(--fs-h2); line-height: var(--lh-display-tight); }
.ss-pdp h3 { font-size: var(--fs-h3); line-height: var(--lh-display-normal); }
.ss-pdp h4 { font-size: var(--fs-h4); line-height: var(--lh-display-tight); }
.ss-pdp h1 em, .ss-pdp h2 em, .ss-pdp h3 em, .ss-pdp h4 em { font-style: italic; color: var(--color-accent); }

/* Sans sub-headings — uppercase eyebrow style */
.ss-pdp h5, .ss-pdp h6, .ss-pdp .ss-eyebrow {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-fg-muted);
}

.ss-pdp p { font-size: var(--fs-body); line-height: var(--lh-body-loose); color: var(--color-fg-body); }
.ss-pdp small, .ss-pdp .ss-small { font-size: var(--fs-small); color: var(--color-fg-muted); }

.ss-pdp a { color: var(--color-accent); text-decoration: none; transition: color var(--t-fast) var(--ease-out); }
.ss-pdp a:hover { color: var(--color-accent-hover); }

.ss-pdp hr { border: none; border-top: 1px solid var(--color-border); margin: var(--space-5) 0; }

/* Selection */
.ss-pdp ::selection { background: var(--color-accent-soft); color: var(--ssb-ink); }

/* was: :focus-visible { ... } (global) → scoped to focusable inside .ss-pdp */
.ss-pdp :focus-visible {
  outline: 2px solid var(--ssb-terracotta);
  outline-offset: 3px;
  border-radius: 2px;
}
/* was: .hidden, [hidden] { display:none !important } */
.ss-pdp .hidden, .ss-pdp [hidden] { display: none !important; }

/* tabular figures helper — countdowns, prices */
.ss-pdp .tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* ── KRAFT PLACEHOLDER (never a broken grey square) ───────── */
.ss-pdp .ph { position: relative; overflow: hidden; background: #d8c9ad;
  background-image:
    repeating-linear-gradient(135deg, rgba(168,90,54,.05) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(45deg, rgba(26,23,20,.04) 0 1px, transparent 1px 7px),
    radial-gradient(120% 120% at 30% 20%, #e3d6bd 0%, #d2c1a1 60%, #c4b194 100%);
}
.ss-pdp .ph::after {
  content: attr(data-mono); position: absolute; inset: 0; z-index: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(28px, 6vw, 54px); color: rgba(26,23,20,.20);
  letter-spacing: .04em;
}
.ss-pdp .ph > img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; transition: opacity .4s var(--ease-out); }
.ss-pdp .ph[data-label]::before {
  content: attr(data-label); position: absolute; left: 10px; bottom: 9px; z-index: 2;
  font-family: var(--font-body); font-size: 9px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: rgba(26,23,20,.42);
}

/* ── EYEBROW (hairline + tracked caps) ───────────────────── */
.ss-pdp .pdp-eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--font-body); font-size: 11px; font-weight: 500;
  letter-spacing: .28em; text-transform: uppercase; color: var(--ssb-terracotta);
}
.ss-pdp .pdp-eyebrow::before { content: ""; width: 32px; height: 1px; background: var(--ssb-terracotta); }
.ss-pdp .pdp-eyebrow.is-center { justify-content: center; }

/* ── BREADCRUMB ──────────────────────────────────────────── */
.ss-pdp .pdp-crumb {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ssb-slate);
}
.ss-pdp .pdp-crumb a { color: var(--ssb-slate); }
.ss-pdp .pdp-crumb a:hover { color: var(--ssb-terracotta); }
.ss-pdp .pdp-crumb .sep { opacity: .5; }
.ss-pdp .pdp-crumb .cur { color: var(--ssb-ink); }

/* ── PRICE ───────────────────────────────────────────────── */
.ss-pdp .pdp-price { font-family: var(--font-display); font-weight: 300; color: var(--ssb-teal); line-height: 1; }
.ss-pdp .pdp-price .cur { font-size: .52em; vertical-align: .42em; color: var(--ssb-slate); margin-right: .12em; }

/* ── BUTTONS ─────────────────────────────────────────────── */
.ss-pdp .pdp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border: none; border-radius: 999px; padding: 15px 30px;
  font-family: var(--font-body); font-size: 12px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; white-space: nowrap;
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out), background var(--t-fast);
}
/* Primary CTA: flat AA terracotta (white on #a85e38 is 4.60:1 - the old
   gradient's light top edge fell to ~3.2:1) with the tinted shadow kept. */
.ss-pdp .pdp-btn-atc {
  background: var(--ssb-terracotta);
  color: #fff; width: 100%; font-size: 14px;
  box-shadow: 0 4px 14px rgba(168, 94, 56,.20), inset 0 1px 0 rgba(255,255,255,.16);
}
.ss-pdp .pdp-btn-atc:hover {
  transform: translateY(-1px);
  background: var(--ssb-terracotta-hover);
  box-shadow: 0 9px 22px rgba(143, 78, 46,.26), inset 0 1px 0 rgba(255,255,255,.18);
}
.ss-pdp .pdp-btn-atc:active { transform: translateY(0); box-shadow: 0 3px 9px rgba(143, 78, 46,.22); }
.ss-pdp .pdp-btn-ghost { background: transparent; color: var(--ssb-ink); border: 1.5px solid var(--ssb-ink); }
.ss-pdp .pdp-btn-ghost:hover { background: var(--ssb-ink); color: var(--ssb-cream); }

/* ── TRUST MICRO-ROW ─────────────────────────────────────── */
.ss-pdp .pdp-trust { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.ss-pdp .pdp-trust li {
  list-style: none; display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--ssb-slate); letter-spacing: .02em;
}
.ss-pdp .pdp-trust svg { width: 15px; height: 15px; color: var(--ssb-terracotta); flex: none; }

/* ── COUNTDOWN ───────────────────────────────────────────── */
.ss-pdp .pdp-countdown {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12px; letter-spacing: .04em; color: var(--ssb-ink-soft);
}
.ss-pdp .pdp-countdown svg { width: 14px; height: 14px; color: var(--ssb-terracotta); }
.ss-pdp .pdp-countdown b { font-weight: 500; }
.ss-pdp .pdp-countdown .clock {
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
  letter-spacing: .06em; color: var(--ssb-terracotta); font-weight: 600;
}

/* ── DELIVERY TIMELINE ───────────────────────────────────── */
.ss-pdp .pdp-timeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.ss-pdp .pdp-tl-step { position: relative; padding-top: 22px; }
.ss-pdp .pdp-tl-step::before {
  content: ""; position: absolute; top: 5px; left: 0; width: 11px; height: 11px;
  border-radius: 50%; border: 1.5px solid var(--ssb-dust-deep); background: var(--ssb-cream);
}
.ss-pdp .pdp-tl-step.is-done::before { background: var(--ssb-terracotta); border-color: var(--ssb-terracotta); }
.ss-pdp .pdp-tl-step::after {
  content: ""; position: absolute; top: 10px; left: 11px; right: 0; height: 1.5px;
  background: var(--ssb-dust);
}
.ss-pdp .pdp-tl-step:last-child::after { display: none; }
.ss-pdp .pdp-tl-k { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--ssb-slate); }
.ss-pdp .pdp-tl-v { font-size: 13px; color: var(--ssb-ink); margin-top: 3px; }

/* ── SECTION SCAFFOLD ────────────────────────────────────── */
.ss-pdp .pdp-section { padding: clamp(40px, 5vw, 72px) clamp(20px, 5vw, 64px); }
.ss-pdp .pdp-wrap { max-width: 1240px; margin: 0 auto; }
.ss-pdp .pdp-sec-head { margin-bottom: clamp(32px, 5vw, 56px); }
.ss-pdp .pdp-sec-title { font-size: clamp(34px, 5vw, 52px); }

/* ── EXPERIENCE STRIP (shared default; concepts may override) ─ */
.ss-pdp .pdp-exp { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 900px) { .ss-pdp .pdp-exp { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .ss-pdp .pdp-exp { grid-template-columns: 1fr; } }

/* ── FAQ ACCORDION ───────────────────────────────────────── */
.ss-pdp .pdp-faq { border-top: 1px solid var(--ssb-dust); }
.ss-pdp .pdp-acc-item { border-bottom: 1px solid var(--ssb-dust); }
.ss-pdp .pdp-acc-q {
  width: 100%; background: none; border: none; text-align: left;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 26px 4px; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(20px, 2.4vw, 26px); color: var(--ssb-ink);
}
.ss-pdp .pdp-acc-q .ic { flex: none; width: 22px; height: 22px; position: relative; }
.ss-pdp .pdp-acc-q .ic::before, .ss-pdp .pdp-acc-q .ic::after {
  content: ""; position: absolute; top: 50%; left: 50%; background: var(--ssb-terracotta);
  transition: transform var(--t-base) var(--ease-out);
}
.ss-pdp .pdp-acc-q .ic::before { width: 14px; height: 1.5px; transform: translate(-50%, -50%); }
.ss-pdp .pdp-acc-q .ic::after { width: 1.5px; height: 14px; transform: translate(-50%, -50%); }
.ss-pdp .pdp-acc-item.is-open .ic::after { transform: translate(-50%, -50%) scaleY(0); }
.ss-pdp .pdp-acc-a { max-height: 0; overflow: hidden; transition: max-height var(--t-slow) var(--ease-out); }
.ss-pdp .pdp-acc-a-inner { padding: 0 4px 28px; max-width: 660px; color: var(--ssb-slate); font-size: 15px; line-height: 1.75; }

/* ── RELATED RAIL (polaroid cards) ───────────────────────── */
.ss-pdp .pdp-rail { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 900px) {
  .ss-pdp .pdp-rail { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 74%;
    overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px;
    padding-bottom: 14px; margin: 0 calc(clamp(20px,5vw,64px) * -1); padding-inline: clamp(20px,5vw,64px); }
  .ss-pdp .pdp-rail > * { scroll-snap-align: start; }
}
.ss-pdp .pdp-card { background: #fff; padding: 12px 12px 18px; border-radius: 3px;
  box-shadow: 0 18px 38px -18px rgba(28,43,58,.30), 0 6px 14px -8px rgba(28,43,58,.16);
  transition: transform var(--t-base) var(--ease-out); }
.ss-pdp .pdp-card:hover { transform: translateY(-4px) rotate(-.4deg); }
.ss-pdp .pdp-card .ph { aspect-ratio: 4/5; border-radius: 2px; }
.ss-pdp .pdp-card-name { font-family: var(--font-display); font-size: 21px; color: var(--ssb-ink); margin: 14px 4px 4px; line-height: 1.1; }
.ss-pdp .pdp-card-meta { display: flex; justify-content: space-between; align-items: baseline; padding: 0 4px; }
.ss-pdp .pdp-card-tag { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ssb-slate); }
.ss-pdp .pdp-card-price { font-family: var(--font-display); font-size: 18px; color: var(--ssb-teal); }

/* ── STICKY ATC BAR (phones only) ────────────────────────────
   The bar IS the .ss-pdp root (class="ss-pdp pdp-stickybar"), so these are
   compound selectors, not descendants. Rests off-screen in server markup and
   slides up on a class initSticky toggles from scroll. z 80 keeps it under
   the cart drawer / gift modal (12000); it is removed while either is open,
   the same way ss-header.css drops floating bars behind the nav drawer. */
.ss-pdp.pdp-stickybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  background: rgba(255,255,255,.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-top: 1px solid var(--ssb-dust); box-shadow: 0 -8px 28px -16px rgba(28,43,58,.30);
  transform: translateY(110%); transition: transform var(--t-base) var(--ease-out);
  padding: 10px 16px; padding-bottom: max(10px, env(safe-area-inset-bottom));
}
.ss-pdp.pdp-stickybar.is-visible { transform: translateY(0); }
.ss-pdp.pdp-stickybar .pdp-stickybar-in { display: flex; align-items: center; gap: 14px; }
.ss-pdp.pdp-stickybar .sb-price { flex: none; font-size: 26px; }
.ss-pdp.pdp-stickybar .pdp-btn { flex: 1 1 auto; min-width: 0; white-space: normal; padding: 13px 18px; }
@media (min-width: 750px) { .ss-pdp.pdp-stickybar { display: none; } }
body.ss-drawer-open .ss-pdp.pdp-stickybar,
body.overflow-hidden .ss-pdp.pdp-stickybar,
body:has(.ct-root[data-open="true"]) .ss-pdp.pdp-stickybar,
body:has(.gm-root[data-open="true"]) .ss-pdp.pdp-stickybar { display: none; }
.ss-pdp.pdp-stickybar [data-ss-add][disabled] { pointer-events: none; }

/* ── SHARED BUY-BOX INNER (bx-*) — primitives styled for default reuse ── */
.ss-pdp .bx-title { font-family: var(--font-display); font-weight: 300; color: var(--ssb-ink);
  font-size: clamp(38px, 4.6vw, 56px); line-height: 1.04; letter-spacing: -.012em; margin: 12px 0 0; }
.ss-pdp .bx-title em { font-style: italic; color: var(--ssb-terracotta); }
.ss-pdp .bx-priceline { display: flex; align-items: baseline; gap: 14px; margin-top: 16px; flex-wrap: wrap; }
.ss-pdp .bx-priceline .pdp-price { font-size: 40px; }
.ss-pdp .bx-gbp { font-size: 12px; color: var(--ssb-slate); letter-spacing: .04em; }
.ss-pdp .bx-desc { margin: 18px 0 22px; font-size: 15px; line-height: 1.7; color: var(--ssb-slate); max-width: 44ch; }
.ss-pdp .bx-actions { display: flex; gap: 12px; margin: 22px 0 10px; }
.ss-pdp .bx-actions .pdp-btn-atc { flex: 1; }
.ss-pdp .bx-div { height: 1px; background: var(--ssb-dust); margin: 22px 0; }
.ss-pdp .bx-cd { background: var(--ssb-terracotta-pale); border-radius: 12px; padding: 14px 16px; }
.ss-pdp .bx-cd-deliver { font-size: 13px; color: var(--ssb-ink-soft); margin-top: 7px; line-height: 1.6; }
.ss-pdp .bx-cd-deliver b { color: var(--ssb-ink); font-weight: 500; }
.ss-pdp .bx-timeline { margin: 22px 0; }
.ss-pdp .bx-trust { margin-top: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; }

/* ── SHARED PERSONALISATION FOCUS CARD (px-*) ── */
.ss-pdp .px-card { background: #15212e; color: var(--ssb-cream); border-radius: 20px; overflow: hidden;
  display: grid; grid-template-columns: 1.1fr .9fr; }
@media (max-width: 820px) { .ss-pdp .px-card { grid-template-columns: 1fr; } }
.ss-pdp .px-l { padding: clamp(32px, 4vw, 56px); }
.ss-pdp .px-l .pdp-eyebrow { color: var(--ssb-terracotta-light); }
.ss-pdp .px-l h2 { color: #fff; font-size: clamp(30px, 3.6vw, 44px); line-height: 1.06; margin-top: 14px; }
.ss-pdp .px-l h2 em { color: var(--ssb-terracotta-light); font-style: italic; }
.ss-pdp .px-l > p { color: rgba(255,255,255,.66); margin: 18px 0 26px; max-width: 44ch; }
.ss-pdp .px-flow { display: grid; gap: 14px; }
.ss-pdp .px-step { display: flex; gap: 14px; align-items: flex-start; }
.ss-pdp .px-n { font-family: var(--font-display); font-style: italic; font-size: 22px; color: var(--ssb-terracotta-light); flex: none; width: 26px; }
.ss-pdp .px-t { font-size: 13.5px; color: #fff; font-weight: 500; }
.ss-pdp .px-b { font-size: 12.5px; color: rgba(255,255,255,.6); margin-top: 2px; line-height: 1.55; }
.ss-pdp .px-r { position: relative; background: #0f1923; min-height: 300px; }
.ss-pdp .px-r .ph { position: absolute; inset: 0; }
.ss-pdp .px-qr { position: absolute; right: 24px; bottom: 24px; width: 92px; height: 92px; background: #fff; border-radius: 10px; padding: 9px; z-index: 3;
  box-shadow: 0 16px 30px -14px rgba(0,0,0,.6); }
.ss-pdp .px-qr svg { width: 100%; height: 100%; }

/* ══════════════════════════════════════════════════════════════════════
   SHARED "HOW IT WORKS" — faithful recreation of the homepage
   "From you, to them." four-act section.
   ══════════════════════════════════════════════════════════════════════ */
.ss-pdp .ssx { text-align: center; }
.ss-pdp .ssx-head { max-width: 760px; margin: 0 auto clamp(24px, 4vw, 48px); }
.ss-pdp .ssx-head h2 { font-size: clamp(40px, 6vw, 76px); line-height: 1.02; letter-spacing: -.014em; margin: 16px 0 0; }
.ss-pdp .ssx-head h2 em { color: var(--ssb-terracotta); }
.ss-pdp .ssx-head p { margin: 18px auto 0; max-width: 46ch; color: var(--ssb-slate); font-size: 15px; }
.ss-pdp .ssx-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
@media (max-width: 940px) { .ss-pdp .ssx-grid { grid-template-columns: repeat(2, 1fr); gap: 48px 32px; } }
@media (max-width: 480px) { .ss-pdp .ssx-grid { grid-template-columns: 1fr; gap: 56px; } }
.ss-pdp .ssx-col { display: flex; flex-direction: column; align-items: center; }
.ss-pdp .ssx-mock { height: 320px; display: flex; align-items: center; justify-content: center; margin-bottom: 22px; }
@media (max-width: 480px) { .ss-pdp .ssx-mock { height: 320px; } }

/* navy phone */
.ss-pdp .ssx-phone { width: 188px; height: 320px; background: #16222f; border-radius: 30px; padding: 9px;
  box-shadow: 0 30px 50px -22px rgba(22,34,47,.55), 0 10px 22px -14px rgba(22,34,47,.4); }
.ss-pdp .ssx-screen { width: 100%; height: 100%; background: #fff; border-radius: 22px; overflow: hidden;
  display: flex; flex-direction: column; padding: 18px 15px; text-align: left; position: relative; }
.ss-pdp .ssx-notch { position: absolute; top: 9px; left: 50%; transform: translateX(-50%); width: 44px; height: 4px; border-radius: 999px; background: rgba(22,34,47,.16); }

/* step 01 — your gift checklist */
.ss-pdp .ssx-s1-eye { font-size: 9px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ssb-terracotta); margin-top: 10px; }
.ss-pdp .ssx-s1-title { font-family: var(--font-display); font-style: italic; font-size: 19px; color: var(--ssb-ink); margin: 3px 0 14px; }
.ss-pdp .ssx-s1-row { display: flex; align-items: center; gap: 9px; background: var(--ssb-cream); border-radius: 9px; padding: 8px 10px; margin-bottom: 7px; }
.ss-pdp .ssx-s1-row.is-pending { background: var(--ssb-terracotta-pale); }
.ss-pdp .ssx-s1-ic { width: 22px; height: 22px; border-radius: 6px; background: #fff; display: grid; place-items: center; flex: none; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.ss-pdp .ssx-s1-ic svg { width: 12px; height: 12px; color: var(--ssb-terracotta); }
.ss-pdp .ssx-s1-lbl { font-size: 11.5px; color: var(--ssb-ink); flex: 1; }
.ss-pdp .ssx-s1-ck { width: 15px; height: 15px; color: var(--ssb-green); flex: none; }
.ss-pdp .ssx-s1-ck svg { width: 100%; height: 100%; }
.ss-pdp .ssx-s1-btn { margin-top: auto; background: var(--ssb-terracotta); color: #fff; border-radius: 8px; text-align: center;
  font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; padding: 11px; }

/* step 02 — the cotton-card letter */
.ss-pdp .ssx-letter { width: 180px; height: 300px; background: #fbf7ee; border: 1px solid #ece2cf; border-radius: 6px;
  padding: 26px 22px; position: relative; transform: rotate(-1.4deg);
  box-shadow: 0 26px 46px -22px rgba(22,34,47,.4), 0 8px 16px -10px rgba(22,34,47,.25); }
.ss-pdp .ssx-letter-seal { position: absolute; top: 18px; right: 18px; width: 34px; height: 34px; border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, var(--ssb-terracotta-light), var(--ssb-terracotta-hover));
  color: #fff; display: grid; place-items: center; font-family: var(--font-display); font-style: italic; font-size: 13px;
  box-shadow: 0 3px 8px -2px rgba(168,90,54,.5); }
.ss-pdp .ssx-letter-to { font-family: var(--font-display); font-style: italic; font-size: 15px; color: var(--ssb-ink); margin-bottom: 18px; }
.ss-pdp .ssx-letter-lines { display: flex; flex-direction: column; gap: 9px; }
.ss-pdp .ssx-letter-lines i { display: block; height: 4px; border-radius: 2px; background: #e2d8c6; }
.ss-pdp .ssx-letter-from { position: absolute; bottom: 26px; right: 22px; font-family: var(--font-display); font-style: italic; font-size: 14px; color: var(--ssb-terracotta); }

/* step 03 — notification */
.ss-pdp .ssx-s3-time { text-align: center; font-size: 9.5px; color: var(--ssb-slate); letter-spacing: .04em; margin: 8px 0 14px; }
.ss-pdp .ssx-notif { background: var(--ssb-cream); border-radius: 11px; padding: 11px 12px; margin-bottom: 10px; }
.ss-pdp .ssx-notif-t { font-size: 11.5px; color: var(--ssb-ink); line-height: 1.45; }
.ss-pdp .ssx-notif-t em { font-style: italic; color: var(--ssb-terracotta); }
.ss-pdp .ssx-pill-green { display: inline-flex; align-items: center; gap: 5px; background: var(--ssb-teal); color: #fff;
  border-radius: 999px; padding: 6px 11px; font-size: 10px; font-weight: 500; letter-spacing: .04em; margin-bottom: 10px; }
.ss-pdp .ssx-pill-green svg { width: 10px; height: 10px; }
.ss-pdp .ssx-s3-btn { background: var(--ssb-terracotta); color: #fff; border-radius: 9px; text-align: center; padding: 11px;
  font-size: 11px; font-weight: 600; letter-spacing: .08em; display: flex; align-items: center; justify-content: center; gap: 7px; }
.ss-pdp .ssx-s3-btn svg { width: 12px; height: 12px; }

/* step 04 — unlocked */
.ss-pdp .ssx-s4-eye { display: flex; align-items: center; gap: 5px; font-size: 9px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ssb-green); margin: 10px 0 4px; }
.ss-pdp .ssx-s4-eye svg { width: 11px; height: 11px; }
.ss-pdp .ssx-s4-from { font-family: var(--font-display); font-style: italic; font-size: 17px; color: var(--ssb-ink); margin-bottom: 16px; }
.ss-pdp .ssx-video { border-radius: 11px; aspect-ratio: 1/1; position: relative; overflow: hidden;
  background: linear-gradient(150deg, #a85e38, #1e4d43); display: grid; place-items: center; }
.ss-pdp .ssx-video .play { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.92); display: grid; place-items: center; }
.ss-pdp .ssx-video .play svg { width: 14px; height: 14px; color: var(--ssb-ink); margin-left: 2px; }
.ss-pdp .ssx-s4-meta { margin-top: 12px; font-size: 10px; color: var(--ssb-slate); letter-spacing: .04em; text-align: center; }

/* captions under each mockup */
.ss-pdp .ssx-step { display: inline-flex; align-items: center; gap: 10px; font-size: 10px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--ssb-terracotta); margin-bottom: 14px; }
.ss-pdp .ssx-step::before { content: ""; width: 22px; height: 1px; background: var(--ssb-terracotta); }
.ss-pdp .ssx-h { font-family: var(--font-display); font-size: 30px; font-weight: 300; color: var(--ssb-ink); line-height: 1.05; margin-bottom: 12px; }
.ss-pdp .ssx-h em { font-style: italic; color: var(--ssb-terracotta); }
.ss-pdp .ssx-b { font-size: 13.5px; line-height: 1.65; color: var(--ssb-slate); max-width: 30ch; }
.ss-pdp .ssx-rule { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: clamp(48px, 6vw, 80px); }
.ss-pdp .ssx-rule::before, .ss-pdp .ssx-rule::after { content: ""; height: 1px; width: clamp(60px, 16vw, 200px); background: var(--ssb-dust-deep); }
.ss-pdp .ssx-rule span { font-family: var(--font-display); font-style: italic; color: var(--ssb-terracotta); letter-spacing: .3em; font-size: 15px; }

/* ── REDUCED MOTION ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ss-pdp *, .ss-pdp *::before, .ss-pdp *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   SECTION BACKGROUND BANDS (colourway variants)
   ══════════════════════════════════════════════════════════════════════ */
.ss-pdp .bg-cream { background: #faf8f4 !important; }
.ss-pdp .bg-parch { background: #f8f3ea !important; }
.ss-pdp .bg-white { background: #ffffff !important; }
.ss-pdp .bg-sky   { background: #e7edf1 !important; }          /* soft dusty blue, dark text */
.ss-pdp .bg-navy  { background: #15212e !important; }          /* bold blue, light text */
.ss-pdp .bg-teal  { background: #1f4f47 !important; }           /* deep teal, light text */
.ss-pdp .bg-navy h2, .ss-pdp .bg-navy h3, .ss-pdp .bg-navy .ssx-h,
.ss-pdp .bg-teal h2, .ss-pdp .bg-teal h3, .ss-pdp .bg-teal .ssx-h { color: #fff !important; }
.ss-pdp .bg-navy h2 em, .ss-pdp .bg-navy h3 em,
.ss-pdp .bg-teal h2 em, .ss-pdp .bg-teal h3 em { color: var(--ssb-terracotta-light) !important; }
.ss-pdp .bg-navy p, .ss-pdp .bg-navy .c1-inside-foot, .ss-pdp .bg-navy .pc-ifoot, .ss-pdp .bg-navy .ssx-b,
.ss-pdp .bg-teal p, .ss-pdp .bg-teal .c1-inside-foot, .ss-pdp .bg-teal .pc-ifoot, .ss-pdp .bg-teal .ssx-b { color: rgba(255,255,255,.74) !important; }
.ss-pdp .bg-navy .pdp-eyebrow, .ss-pdp .bg-teal .pdp-eyebrow { color: var(--ssb-terracotta-light) !important; }
.ss-pdp .bg-navy .pdp-eyebrow::before, .ss-pdp .bg-teal .pdp-eyebrow::before { background: var(--ssb-terracotta-light) !important; }
.ss-pdp .px-perso-band { padding-block: clamp(56px, 8vw, 104px); }

/* ══════════════════════════════════════════════════════════════════════
   CONCEPT 01 ART DIRECTION — "LETTER Nº 06"  (from pdp-01-letter.html <style>)
   ══════════════════════════════════════════════════════════════════════ */
.ss-pdp .c1 { position: relative; background:
    linear-gradient(180deg, #faf8f4 0%, #f6f1e8 100%); min-height: 100vh; }

/* legacy fixed stripe retired in favour of the in-grid postal rail below */
.ss-pdp .c1-stripe { display: none; }

.ss-pdp .c1-main { max-width: 1320px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 56px); position: relative; z-index: 2; }

/* envelope frame — fills the outer margins on wide screens only */
.ss-pdp .c1-frame { display: none; }
@media (min-width: 1480px) {
  .ss-pdp .c1-main { max-width: 1480px; }
  .ss-pdp .c1-frame { display: block; position: fixed; inset: 0; z-index: 0; pointer-events: none; }
  .ss-pdp .c1-frame::before, .ss-pdp .c1-frame::after { content: ""; position: absolute; top: 56px; bottom: 56px;
    border-left: 1.5px dashed rgba(168, 94, 56,.26); }
  .ss-pdp .c1-frame::before { left: 62px; }
  .ss-pdp .c1-frame::after { right: 62px; }
  .ss-pdp .c1-frame i { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--ssb-terracotta); opacity: .55; }
  .ss-pdp .c1-frame i.tl { left: 57.5px; top: 52px; } .ss-pdp .c1-frame i.bl { left: 57.5px; bottom: 52px; }
  .ss-pdp .c1-frame i.tr { right: 57.5px; top: 52px; } .ss-pdp .c1-frame i.br { right: 57.5px; bottom: 52px; }
  .ss-pdp .c1-frame .fr { position: absolute; right: 46px; top: 50%; transform: translateY(-50%) rotate(180deg);
    writing-mode: vertical-rl; font-family: var(--font-body); font-size: 10px; font-weight: 500;
    letter-spacing: .34em; text-transform: uppercase; color: var(--ssb-slate); opacity: .7; }
  .ss-pdp .c1-frame .fr b { color: var(--ssb-terracotta); font-weight: 500; }
}
@media (min-width: 1900px) { .ss-pdp .c1-main { max-width: 1560px; } }

/* widen lower sections to match the hero (cut side whitespace); FAQ stays narrow for readability */
.ss-pdp .c1 .pdp-wrap { max-width: 1440px; }
@media (min-width: 1900px) { .ss-pdp .c1 .pdp-wrap { max-width: 1560px; } }

/* ── above the fold ── */
.ss-pdp .c1-crumb-row { padding: 26px 0 8px; padding-left: clamp(0px, 6vw, 92px); }
.ss-pdp .c1-fold { display: grid; grid-template-columns: clamp(64px, 7vw, 92px) minmax(0, 1.12fr) minmax(0, 0.84fr);
  gap: clamp(20px, 2.6vw, 40px); align-items: stretch; padding: 14px 0 24px; }
@media (max-width: 1000px) { .ss-pdp .c1-fold { grid-template-columns: 1fr; } .ss-pdp .c1-crumb-row { padding-left: 0; } }

/* postal margin rail — fills the left gutter with the airmail dressing */
.ss-pdp .c1-rail { position: relative; display: flex; flex-direction: column; align-items: center;
  justify-content: space-between; padding: 4px 0 8px; }
.ss-pdp .c1-rail::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%);
  border-left: 1.5px dashed rgba(168, 94, 56,.5); }
.ss-pdp .c1-rail .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ssb-terracotta); position: relative; z-index: 1; flex: none; }
.ss-pdp .c1-rail .vstack { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 18px 0; }
.ss-pdp .c1-rail .vtext { writing-mode: vertical-rl; transform: rotate(180deg); background: #faf8f4; padding: 8px 2px;
  font-family: var(--font-body); font-size: 10px; font-weight: 500; letter-spacing: .32em; text-transform: uppercase; color: var(--ssb-slate); }
.ss-pdp .c1-rail .vtext.is-route { color: var(--ssb-terracotta); }
.ss-pdp .c1-rail .vtext.is-route b { font-weight: 500; }
@media (max-width: 1000px) { .ss-pdp .c1-rail { display: none; } }

/* hero "letter" plate */
.ss-pdp .c1-plate { position: relative; background: #fffdf9; border: 1px solid var(--ssb-dust);
  border-radius: 16px; padding: 22px; box-shadow: 0 24px 48px -22px rgba(28,43,58,.30), 0 8px 18px -10px rgba(28,43,58,.16); }
.ss-pdp .c1-letterhead { display: flex; align-items: flex-start; justify-content: space-between;
  padding: 4px 6px 18px; border-bottom: 1px dashed var(--ssb-dust-deep); margin-bottom: 18px; }
.ss-pdp .c1-lh-no { font-family: var(--font-display); font-style: italic; font-size: 22px; color: var(--ssb-ink); }
.ss-pdp .c1-lh-no span { display: block; font-family: var(--font-body); font-style: normal;
  font-size: 9.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--ssb-slate); margin-top: 4px; }
.ss-pdp .c1-stamp { width: 76px; height: 92px; flex: none; position: relative; transform: rotate(2.4deg);
  background: var(--ssb-terracotta-pale); padding: 6px;
  -webkit-mask: radial-gradient(circle 3px at 3px 3px, transparent 96%, #000) -3px -3px / 9px 9px;
  mask: radial-gradient(circle 3px at 3px 3px, transparent 96%, #000) -3px -3px / 9px 9px; }
.ss-pdp .c1-stamp-in { width: 100%; height: 100%; border: 1px solid rgba(168, 94, 56,.4); border-radius: 2px;
  display: grid; place-items: center; gap: 3px; color: var(--ssb-terracotta); text-align: center; }
.ss-pdp .c1-stamp-in .crest { font-family: var(--font-display); font-size: 26px; line-height: 1; }
.ss-pdp .c1-stamp-in small { font-size: 7px; letter-spacing: .14em; text-transform: uppercase; color: var(--ssb-terracotta); }
.ss-pdp .c1-postmark { position: absolute; top: 30px; right: 88px; width: 78px; height: 78px; border-radius: 50%;
  border: 1.5px solid rgba(140,130,120,.45); color: rgba(140,130,120,.7); transform: rotate(-9deg);
  display: grid; place-items: center; text-align: center; pointer-events: none; }
.ss-pdp .c1-postmark span { font-size: 7.5px; letter-spacing: .12em; text-transform: uppercase; line-height: 1.5; }
@media (max-width: 520px) { .ss-pdp .c1-postmark { display: none; } }

.ss-pdp .c1-hero-img { position: relative; border-radius: 10px; overflow: hidden; aspect-ratio: 4/3.05; }
.ss-pdp .c1-hero-img .ph { position: absolute; inset: 0; }
.ss-pdp .c1-hero-cap { position: absolute; left: 12px; bottom: 12px; z-index: 3; background: rgba(255,253,249,.92);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); border-radius: 999px; padding: 7px 15px;
  font-family: var(--font-display); font-style: italic; font-size: 15px; color: var(--ssb-ink); }
.ss-pdp .c1-thumbs { display: flex; gap: 10px; margin-top: 14px; }
.ss-pdp .c1-thumb { flex: 1; aspect-ratio: 1; border-radius: 6px; overflow: hidden; border: 1.5px solid transparent;
  cursor: pointer; transition: border-color var(--t-fast) var(--ease-out); padding: 0; background: none; }
.ss-pdp .c1-thumb.is-active { border-color: var(--ssb-terracotta); }
.ss-pdp .c1-thumb .ph { position: absolute; inset: 0; }
.ss-pdp .c1-thumb-wrap { position: relative; }

/* buy box */
.ss-pdp .c1-buy { position: sticky; top: 88px; }
@media (max-width: 1000px) { .ss-pdp .c1-buy { position: static; } }
.ss-pdp .c1-buy h1 { font-size: clamp(40px, 5vw, 60px); line-height: 1.04; letter-spacing: -.012em; margin: 14px 0 0; }
.ss-pdp .c1-desc { margin: 18px 0 22px; font-size: 15px; line-height: 1.7; color: var(--ssb-slate); max-width: 42ch; }
.ss-pdp .c1-priceline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-top: 16px; }
.ss-pdp .c1-priceline .pdp-price { font-size: 40px; }
.ss-pdp .c1-priceline .gbp-note { font-size: 12px; line-height: 1.5; color: var(--ssb-slate); letter-spacing: .06em; }
.ss-pdp .c1-actions { display: flex; gap: 12px; margin: 22px 0 8px; }
/* ATC is the only control in the row (one box per order, no qty stepper);
   min-width:0 + wrapping stop a long gated label from overflowing the card. */
.ss-pdp .c1-actions .pdp-btn-atc { flex: 1 1 auto; min-width: 0; white-space: normal; }
.ss-pdp .c1-buy-divider { height: 1px; background: var(--ssb-dust); margin: 22px 0; }
.ss-pdp .c1-cd-wrap { margin-top: 18px; background: var(--ssb-terracotta-pale); border-radius: 12px; padding: 14px 16px; }
.ss-pdp .c1-cd-deliver { font-size: 13px; color: var(--ssb-ink-soft); margin-top: 7px; line-height: 1.6; }
.ss-pdp .c1-cd-deliver b { color: var(--ssb-ink); font-weight: 500; }
.ss-pdp .c1-cd-u2a { white-space: nowrap; color: var(--ssb-terracotta); text-decoration: underline; text-underline-offset: 2px; font-weight: 500; }
.ss-pdp .c1-cd-u2a:hover { opacity: .72; }
.ss-pdp .c1-choice-route { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 12px; margin-top: 13px; padding-top: 11px; border-top: 1px dashed color-mix(in srgb, var(--ssb-terracotta) 30%, transparent); font-size: 11.5px; line-height: 1.45; color: var(--ssb-ink-soft); }
.ss-pdp .c1-choice-route > span { font-family: var(--font-display); font-style: italic; color: var(--ssb-ink); }
.ss-pdp .c1-choice-route a { color: var(--ssb-terracotta); text-decoration: none; font-weight: 500; white-space: nowrap; }
.ss-pdp .c1-choice-route a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ss-pdp .c1-choice-route a:focus-visible { outline: 2px solid var(--ssb-terracotta); outline-offset: 3px; }
.ss-pdp .c1-timeline { margin: 22px 0; }
.ss-pdp .c1-trust { margin-top: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; }
.ss-pdp .c1-trust li { align-items: flex-start; }

/* ── What's Inside — taped overlapping polaroids ── */
.ss-pdp .c1-inside { background: #f8f3ea;
  background-image: repeating-linear-gradient(92deg, rgba(168,90,54,.035) 0 1px, transparent 1px 26px); }
.ss-pdp .c1-pomasonry { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 26px; }
@media (max-width: 1000px) { .ss-pdp .c1-pomasonry { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .ss-pdp .c1-pomasonry { grid-template-columns: repeat(2, 1fr); gap: 8px 18px; } }
.ss-pdp .c1-pol { position: relative; background: #fffdf9; padding: 9px 9px 14px; border-radius: 2px;
  box-shadow: 0 16px 30px -16px rgba(28,43,58,.34), 0 5px 12px -8px rgba(28,43,58,.18);
  transition: transform var(--t-base) var(--ease-out); }
.ss-pdp .c1-pol:nth-child(3n+1) { transform: rotate(-1.6deg); margin-top: 18px; }
.ss-pdp .c1-pol:nth-child(3n+2) { transform: rotate(1.2deg); }
.ss-pdp .c1-pol:nth-child(3n+3) { transform: rotate(-.6deg); margin-top: 30px; }
.ss-pdp .c1-pol:hover { transform: rotate(0) translateY(-4px); z-index: 4; }
.ss-pdp .c1-pol .ph { aspect-ratio: 1; border-radius: 1px; }
.ss-pdp .c1-pol-tape { position: absolute; top: -10px; left: 50%; transform: translateX(-50%) rotate(-3deg);
  width: 58px; height: 22px; background: rgba(168, 94, 56,.22); border: 1px solid rgba(168, 94, 56,.18);
  -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ss-pdp .c1-pol-name { font-family: var(--font-body); font-weight: 500; font-size: 13px; color: var(--ssb-ink);
  margin: 12px 2px 2px; line-height: 1.3; }
.ss-pdp .c1-pol-note { font-family: var(--font-display); font-style: italic; font-size: 13.5px; color: var(--ssb-terracotta);
  margin: 0 2px; line-height: 1.35; }
/* ── Experience strip ── */
.ss-pdp .c1-exp-card { background: #fffdf9; border: 1px solid var(--ssb-dust); border-radius: 14px; padding: 24px; position: relative; overflow: hidden; }
.ss-pdp .c1-exp-no { font-family: var(--font-body); font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--ssb-terracotta); }
.ss-pdp .c1-exp-t { font-family: var(--font-display); font-size: 27px; color: var(--ssb-ink); margin: 8px 0 8px; line-height: 1.1; }
.ss-pdp .c1-exp-b { font-size: 13px; line-height: 1.65; color: var(--ssb-slate); }
.ss-pdp .c1-exp-visual { margin-top: 18px; }
/* visual 1: mini gift checklist */
.ss-pdp .c1-mini { background: var(--ssb-cream); border: 1px solid var(--ssb-dust); border-radius: 8px; padding: 12px 14px; }
.ss-pdp .c1-mini-h { font-size: 9px; letter-spacing: .22em; text-transform: uppercase; color: var(--ssb-slate); margin-bottom: 8px; }
.ss-pdp .c1-mini-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ssb-ink-soft); padding: 3px 0; }
.ss-pdp .c1-mini-row .ck { width: 15px; height: 15px; border-radius: 50%; background: var(--ssb-terracotta); color: #fff;
  display: grid; place-items: center; flex: none; }
.ss-pdp .c1-mini-row .ck svg { width: 9px; height: 9px; }
/* visual 2: folded letter w/ wax seal */
.ss-pdp .c1-fold-letter { position: relative; background: var(--ssb-cream); border: 1px solid var(--ssb-dust); border-radius: 8px; height: 86px; overflow: hidden; }
.ss-pdp .c1-fold-letter::before { content: ""; position: absolute; inset: 0; background:
  repeating-linear-gradient(180deg, transparent 0 13px, rgba(140,130,120,.18) 13px 14px); }
.ss-pdp .c1-fold-letter::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 32px; height: 32px; border-radius: 50%; background: radial-gradient(circle at 38% 35%, var(--ssb-terracotta-light), var(--ssb-terracotta-hover));
  box-shadow: 0 3px 8px -2px rgba(168,90,54,.5); }
/* visual 3: iphone notification */
.ss-pdp .c1-phone { background: #15212e; border-radius: 12px; padding: 12px; }
.ss-pdp .c1-notif { background: rgba(255,255,255,.12); border-radius: 9px; padding: 9px 11px; display: flex; gap: 9px; align-items: flex-start; }
.ss-pdp .c1-notif .ic { width: 22px; height: 22px; border-radius: 6px; background: var(--ssb-terracotta); flex: none; display: grid; place-items: center; }
.ss-pdp .c1-notif .ic svg { width: 12px; height: 12px; color: #fff; }
.ss-pdp .c1-notif-t { font-size: 11px; font-weight: 600; color: #fff; }
.ss-pdp .c1-notif-b { font-size: 10.5px; color: rgba(255,255,255,.66); margin-top: 2px; line-height: 1.4; }
/* visual 4: unlocked reveal */
.ss-pdp .c1-reveal { background: #15212e; border-radius: 10px; height: 86px; position: relative; overflow: hidden;
  display: grid; place-items: center; }
.ss-pdp .c1-reveal::before { content: ""; position: absolute; inset: 0; background:
  radial-gradient(120% 90% at 50% 120%, rgba(168, 94, 56,.4), transparent 60%); }
.ss-pdp .c1-reveal .play { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.92); display: grid; place-items: center; position: relative; z-index: 1; }
.ss-pdp .c1-reveal .play svg { width: 14px; height: 14px; color: var(--ssb-ink); margin-left: 2px; }
.ss-pdp .c1-reveal .badge { position: absolute; top: 8px; left: 8px; z-index: 1; font-size: 9px; letter-spacing: .14em;
  text-transform: uppercase; color: #8fd0b0; display: flex; align-items: center; gap: 5px; }
.ss-pdp .c1-reveal .badge svg { width: 10px; height: 10px; }

/* section headers */
.ss-pdp .c1-sh { margin-bottom: 36px; }
.ss-pdp .c1-sh h2 { font-size: clamp(32px, 4.4vw, 50px); line-height: 1.05; margin-top: 12px; }
.ss-pdp .c1-sh p { margin-top: 12px; color: var(--ssb-slate); max-width: 54ch; }

/* faq + related share base classes */
.ss-pdp .c1-related .pdp-rail .ph { background: #efe6d4; }

/* gift-box PDP: title-case the inside-item names */
.ss-pdp .c1-pol-name { text-transform: capitalize; }

/* gift-box PDP: "estimated" timeline labelling */
.ss-pdp .c1-tl-head { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--ssb-slate); margin-bottom: 14px; }
.ss-pdp .c1-tl-note { margin-top: 14px; font-size: 11.5px; line-height: 1.5; color: var(--ssb-slate); font-style: italic; }

/* ════════════════════════════════════════════════════════════════════
   Desktop polaroid compaction (a bit tighter than the original stagger)
   ════════════════════════════════════════════════════════════════════ */
.ss-pdp .c1-pomasonry { gap: 6px 20px; }
.ss-pdp .c1-pol:nth-child(3n+1) { margin-top: 10px; }
.ss-pdp .c1-pol:nth-child(3n+3) { margin-top: 18px; }

/* mobile segmented-tab bar is desktop-hidden */
.ss-pdp .ss-mtabs { display: none; }

/* ════════════════════════════════════════════════════════════════════
   MOBILE - "built for the thumb": segmented tabs + horizontal snap rails
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 749px) {
  /* Product facts stay in tabs; the gifting story follows Details. */
  .ss-pdp.c1 { display: flex; flex-direction: column; }
  .ss-pdp .c1-main { order: 0; }
  .ss-pdp .ss-mtabs { order: 1; display: block; }
  .ss-pdp [data-mtab-panel] { order: 2; }
  .ss-pdp .c1-experience { order: 3; }
  .ss-pdp .ss-pb-sec { order: 4; }
  .ss-pdp .c1-related { order: 5; }
  .ss-pdp .c1-reviews { order: 6; }   /* reviews to the very bottom on mobile (was defaulting to order 0 = near top) */

  /* Show one information panel. Keep the longer gifting story with Details. */
  .ss-pdp [data-mtab-panel],
  .ss-pdp .c1-experience { display: none; }
  .ss-pdp[data-mtab="inside"] [data-mtab-panel="inside"],
  .ss-pdp[data-mtab="allergens"] [data-mtab-panel="allergens"],
  .ss-pdp[data-mtab="details"] [data-mtab-panel="details"],
  .ss-pdp[data-mtab="details"] .c1-experience { display: block; }

  /* the pill-tab bar */
  .ss-pdp .ss-mtabs { background: var(--ssb-cream); padding: 12px 18px 10px; }
  .ss-pdp .ss-mtabs-in { display: flex; background: var(--ssb-parchment); border-radius: 999px; padding: 4px; position: relative; }
  .ss-pdp .ss-mtab { flex: 1; border: none; background: none; padding: 11px 4px; font-family: var(--font-body); font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ssb-slate); position: relative; z-index: 2; transition: color .25s ease; cursor: pointer; }
  .ss-pdp .ss-mtab.is-active { color: #fff; }
  .ss-pdp .ss-mtab-pill { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / var(--ss-mtab-count, 3)); background: var(--ssb-ink); border-radius: 999px; transition: transform .3s cubic-bezier(.22,1,.36,1); z-index: 1; }

  /* tighten the panel sections themselves */
  .ss-pdp [data-mtab-panel].pdp-section { padding-top: 14px; padding-bottom: 22px; }
  .ss-pdp [data-mtab-panel] .c1-sh { margin-bottom: 18px; }

  /* What's inside -> horizontal snap rail of polaroid cards.
     The kraft-placeholder caption (.ph[data-label]::before) sits ON TOP
     of the photo (z2 > img z1) and wraps/clips at rail-card width — on
     cards that have a real image the name already prints below it, so
     suppress the overlay there. Cards without an image keep the label. */
  .ss-pdp .c1-pomasonry { display: flex; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; gap: 12px; margin: 0 -18px; padding: 6px 18px 14px 30px; scroll-padding-left: 30px; }
  .ss-pdp .c1-pomasonry::-webkit-scrollbar { display: none; }
  .ss-pdp .c1-pomasonry .ph:has(> img)::before { content: none; }
  .ss-pdp .c1-pol { flex: 0 0 168px; scroll-snap-align: start; transform: none !important; margin-top: 0 !important; }
  .ss-pdp .c1-pol-name { font-size: 12px; margin-top: 9px; }
  .ss-pdp .c1-pol-note { font-size: 12.5px; }
  .ss-pdp .c1-pol:hover { transform: none !important; }

  /* experience phones: keep one-up but tidy spacing under the tab */
  .ss-pdp .ssx-head { margin-bottom: 22px; }
  .ss-pdp .ssx-grid { gap: 40px; }

  /* hero plate a touch tighter on phones */
  .ss-pdp .c1-plate { padding: 16px; }
}

/* tighten the "What's inside" section (was leaving a big gap below the grid) */
.ss-pdp .c1-inside { padding-top: clamp(34px, 4vw, 52px); padding-bottom: clamp(26px, 3vw, 42px); }
/* The shared UK-to-Australia journey is designed as a full-bleed band. The
   PDP section shell used to add a cream gutter around it on larger screens. */
.ss-pdp .c1-experience { padding: 0; }
.ss-pdp .c1-allergens { padding: 0; }
@media (max-width: 749px) {
  .ss-pdp .c1-allergens { padding: 14px 18px 24px; background: var(--ssb-cream); }
  .ss-pdp .c1-allergens .ss-alg-card { padding: 0; box-shadow: none; }
  .ss-pdp .c1-allergens .ss-alg-inner { padding: 20px 16px; background: transparent; border: 0; }
  .ss-pdp .c1-allergens .ss-alg-legal { margin: 0; padding: 0 16px 18px; }
}

/* ── mobile audit fixes (overlap, overflow, touch targets) ── */
@media (max-width: 749px) {
  .ss-pdp.c1 { overflow-x: clip; }                 /* kill residual horizontal scroll from balanced rails + rotated decor */
  .ss-pdp .c1-postmark { display: none; }          /* was only hidden <=520px; collided with the stamp 521-749px */
  .ss-pdp .ss-mtab { min-height: 44px; }           /* touch target */
  .ss-pdp .ssx-grid { gap: 28px; }                 /* tighten the stacked experience phones */
  .ss-pdp .ssx-head { margin-bottom: 18px; }
}
@media (max-width: 600px) {
  /* trust badges in a compact 2x2 grid on phones (base .pdp-trust is flex) */
  .ss-pdp .c1-trust { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
  .ss-pdp .c1-trust li { font-size: 11.5px; }
}

/* ════════════════════════════════════════════════════════════════════
   MOBILE real-estate diet: compact experience step-list + trimmed bands
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 749px) {
  /* EXPERIENCE: drop the 4 phone mockups for a compact numbered step list */
  .ss-pdp .ssx { counter-reset: ssxstep; }
  .ss-pdp .ssx-grid { grid-template-columns: 1fr; gap: 0; }
  .ss-pdp .ssx-mock, .ss-pdp .ssx-step { display: none; }
  .ss-pdp .ssx-col { counter-increment: ssxstep; display: grid; grid-template-columns: 44px 1fr; column-gap: 16px; align-items: start; text-align: left; position: relative; padding-bottom: 22px; }
  .ss-pdp .ssx-col::before { content: counter(ssxstep, decimal-leading-zero); grid-column: 1; grid-row: 1 / span 2; width: 44px; height: 44px; border-radius: 50%; background: var(--ssb-terracotta-pale); color: var(--ssb-terracotta); display: grid; place-items: center; font-family: var(--font-display); font-style: italic; font-size: 18px; z-index: 1; }
  .ss-pdp .ssx-col::after { content: ""; position: absolute; left: 21px; top: 48px; bottom: 0; width: 1.5px; background: var(--ssb-dust); }
  .ss-pdp .ssx-col:last-child::after { display: none; }
  .ss-pdp .ssx-h { grid-column: 2; grid-row: 1; font-size: 20px; margin-bottom: 4px; }
  .ss-pdp .ssx-b { grid-column: 2; grid-row: 2; font-size: 13.5px; max-width: none; margin: 0; }
  .ss-pdp .ssx-rule { margin-top: 10px; }

}

/* ════════════════════════════════════════════════════════════════════════
   BUNDLE OPTION SELECTOR — "Choose your print / scent"
   Renders only on multi-variant gift boxes. Markup in ss-pdp-letter.liquid,
   behaviour in ss-pdp-letter.js (initOptions). Brand pills, terracotta when
   selected; Add-to-Cart stays gated until every group is chosen.
   ════════════════════════════════════════════════════════════════════════ */
.ss-pdp .c1-opts {
  margin: 4px 0 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* Print preview hero (2026-07-06): always-visible large image of the
   currently selected art print design, sits above that option's swatches. */
.ss-pdp .c1-print-hero {
  width: 100%;
  aspect-ratio: 1;
  max-width: 320px;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 4px;
  background: var(--ssb-cream);
  box-shadow: 0 4px 20px rgba(26,23,20,0.08);
}
.ss-pdp .c1-print-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.15s ease;
}
@media (max-width: 700px) {
  .ss-pdp .c1-print-hero { max-width: 100%; }
}
/* Art print ADD-ON showcase (2026-07-06): print-free boxes only. Big preview
   + design switcher so the print is seen at size, not a tiny cart chip. */
.ss-pdp .c1-print-addon {
  margin-top: 24px;
  padding: 22px 20px;
  border-radius: 14px;
  background: var(--ssb-cream, #faf8f4);
  border: 1px solid rgba(168, 94, 56,0.16);
  text-align: center;
}
.ss-pdp .c1-print-addon-eyebrow {
  font-family: var(--font-body);
  font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: #a85e38;
}
.ss-pdp .c1-print-addon-title {
  font-family: var(--font-heading, 'Cormorant Garamond', serif);
  font-weight: 300; font-size: 1.5rem; line-height: 1.15;
  color: var(--ssb-ink, #1a1714); margin: 6px 0 6px;
}
.ss-pdp .c1-print-addon-title em { font-style: italic; color: #a85e38; }
.ss-pdp .c1-print-addon-sub {
  font-family: var(--font-body); font-size: 0.85rem; line-height: 1.5;
  color: var(--ssb-ink-soft, #4a4540); margin: 0 auto 6px; max-width: 340px;
}
.ss-pdp .c1-print-addon-spec {
  font-family: var(--font-body); font-size: 0.72rem; letter-spacing: .02em;
  color: var(--ssb-slate, #8c8278); margin: 0 0 16px;
}
.ss-pdp .c1-print-addon-hero {
  position: relative; display: block;
  width: 100%; max-width: 340px; aspect-ratio: 1;
  border: none; padding: 0; margin: 0 auto 14px;
  border-radius: 12px; overflow: hidden; cursor: zoom-in;
  background: #fff; box-shadow: 0 4px 20px rgba(26,23,20,0.10);
}
.ss-pdp .c1-print-addon-hero img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .15s ease; }
.ss-pdp .c1-print-addon-zoombadge {
  position: absolute; right: 12px; bottom: 12px;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,0.94); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.ss-pdp .c1-print-addon-zoombadge svg { width: 16px; height: 16px; stroke: #1a1714; }
.ss-pdp .c1-print-addon-sw { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; justify-content: center; }
.ss-pdp .c1-print-addon-chip {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  background: none; border: none; padding: 0; cursor: pointer;
}
.ss-pdp .c1-print-addon-chip-img {
  width: 56px; height: 56px; border-radius: 8px; overflow: hidden;
  border: 2px solid transparent; transition: border-color .15s ease;
}
.ss-pdp .c1-print-addon-chip.is-sel .c1-print-addon-chip-img { border-color: #a85e38; }
.ss-pdp .c1-print-addon-chip-img img { width: 100%; height: 100%; object-fit: cover; }
.ss-pdp .c1-print-addon-chip-name {
  font-family: var(--font-body); font-size: 11px; color: var(--ssb-slate, #6b6258);
}
.ss-pdp .c1-print-addon-chip.is-sel .c1-print-addon-chip-name { color: #a85e38; font-weight: 600; }
/* Outline ghost (pdp-btn-ghost) so the ATC stays the only filled primary. */
.ss-pdp .c1-print-addon-add { width: 100%; white-space: normal; }
@media (max-width: 700px) { .ss-pdp .c1-print-addon-hero { max-width: 100%; } }

.ss-pdp .c1-wine-addon {
  margin-top: 24px;
  padding: 22px 20px;
  border-radius: 14px;
  background: var(--ssb-cream, #faf8f4);
  border: 1px solid rgba(168, 94, 56, .16);
  text-align: center;
}
.ss-pdp .c1-wine-addon-eyebrow { font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #a85e38; }
.ss-pdp .c1-wine-addon-title { font-family: var(--font-heading, 'Cormorant Garamond', serif); font-weight: 300; font-size: 1.5rem; line-height: 1.15; color: var(--ssb-ink, #1a1714); margin: 6px 0; }
.ss-pdp .c1-wine-addon-title em { font-style: italic; color: #a85e38; }
.ss-pdp .c1-wine-addon-sub { font-family: var(--font-body); font-size: .85rem; line-height: 1.5; color: var(--ssb-ink-soft, #4a4540); margin: 0 auto 6px; max-width: 340px; }
.ss-pdp .c1-wine-addon-spec { font-family: var(--font-body); font-size: .72rem; letter-spacing: .02em; color: var(--ssb-slate, #8c8278); margin: 0 0 16px; }
.ss-pdp .c1-wine-addon-hero { width: 100%; max-width: 340px; aspect-ratio: 1; border-radius: 12px; overflow: hidden; margin: 0 auto 14px; background: #fff; box-shadow: 0 4px 20px rgba(26,23,20,.10); }
.ss-pdp .c1-wine-addon-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ss-pdp .c1-wine-addon-sw { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; justify-content: center; }
.ss-pdp .c1-wine-addon-chip { display: flex; flex-direction: column; align-items: center; gap: 5px; background: none; border: 0; padding: 0; cursor: pointer; }
.ss-pdp .c1-wine-addon-chip-img { width: 56px; height: 56px; border-radius: 8px; overflow: hidden; border: 2px solid transparent; transition: border-color .15s ease; }
.ss-pdp .c1-wine-addon-chip.is-sel .c1-wine-addon-chip-img { border-color: #a85e38; }
.ss-pdp .c1-wine-addon-chip-img img { width: 100%; height: 100%; object-fit: cover; }
.ss-pdp .c1-wine-addon-chip-name { font-family: var(--font-body); font-size: 11px; color: var(--ssb-slate, #6b6258); }
.ss-pdp .c1-wine-addon-chip.is-sel .c1-wine-addon-chip-name { color: #a85e38; font-weight: 600; }
.ss-pdp .c1-wine-addon-add { width: 100%; white-space: normal; }
@media (max-width: 700px) { .ss-pdp .c1-wine-addon-hero { max-width: 100%; } }

/* Full-screen print preview (portaled to <body>, so NOT scoped under .ss-pdp) */
.c1-pa-lb[hidden] { display: none; }
.c1-pa-lb {
  position: fixed; inset: 0; z-index: 100000;
  display: flex; align-items: center; justify-content: center; padding: 28px;
}
.c1-pa-lb-scrim { position: absolute; inset: 0; background: rgba(26,23,20,0.82); }
.c1-pa-lb-card { position: relative; max-width: min(92vw, 640px); display: flex; flex-direction: column; gap: 16px; }
.c1-pa-lb-imgwrap { background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 24px 70px rgba(0,0,0,0.45); }
.c1-pa-lb-imgwrap img { width: 100%; height: auto; max-height: 78vh; object-fit: contain; display: block; }
.c1-pa-lb-x {
  position: absolute; top: -42px; right: 0; background: none; border: none;
  color: #faf8f4; font-size: 34px; line-height: 1; cursor: pointer;
}
.c1-pa-lb-bar { display: flex; align-items: center; justify-content: center; gap: 22px; }
.c1-pa-lb-nav {
  background: rgba(255,255,255,0.14); border: none; color: #fff;
  width: 42px; height: 42px; border-radius: 50%; font-size: 22px; line-height: 1; cursor: pointer;
  transition: background .15s ease;
}
.c1-pa-lb-nav:hover { background: rgba(255,255,255,0.28); }
.c1-pa-lb-name {
  font-family: 'DM Sans', sans-serif; font-size: 0.85rem; letter-spacing: .04em;
  color: #faf8f4; min-width: 130px; text-align: center;
}
html.c1-pa-lb-open { overflow: hidden; }

.ss-pdp .c1-opt-group { display: flex; flex-direction: column; gap: 8px; }
.ss-pdp .c1-opt-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ssb-slate);
}
.ss-pdp .c1-opt-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.ss-pdp .c1-opt-pill {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--ssb-ink-soft);
  background: var(--ssb-cream);
  border: 1.5px solid var(--ssb-dust);
  border-radius: 999px;
  padding: 9px 18px;
  line-height: 1.2;
  transition: border-color .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
}
.ss-pdp .c1-opt-pill:hover { border-color: var(--ssb-terracotta-light); color: var(--ssb-ink); }
.ss-pdp .c1-opt-pill:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ssb-terracotta-pale);
  border-color: var(--ssb-terracotta);
}
.ss-pdp .c1-opt-pill.is-sel {
  color: #fff;
  background: var(--ssb-terracotta);
  border-color: var(--ssb-terracotta);
  box-shadow: 0 2px 8px rgba(168, 94, 56, .28);
}
.ss-pdp .c1-opt-hint {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  color: var(--ssb-terracotta);
  margin: 2px 0 0;
}
/* gated Add-to-Cart: clearly non-interactive but still legible */
.ss-pdp .pdp-btn-atc:disabled {
  opacity: .55;
  cursor: not-allowed;
  box-shadow: none;
}

/* image-swatch variant of the option pill (e.g. art print designs) */
/* ── Single-row scrollable swatch strip with edge fade (compact) ──
   Was flex-wrap (spilled to 2+ rows on mobile). Now one row that scrolls
   horizontally; a horizontal mask fades the overflowing edge(s) to signal
   "more to scroll". initSwatchRail() in ss-pdp-letter.js toggles at-start /
   at-end to drop the fade on whichever side has nothing more to reveal
   (and removes it entirely when the strip fits with no overflow).
   Note: overflow-x:auto makes overflow-y compute to auto, so the vertical
   padding gives the selected swatch's box-shadow room and avoids clipping. */
.ss-pdp .c1-opt-pills.is-swatches {
  flex-wrap: nowrap;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding: 8px 2px 10px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 26px, #000 calc(100% - 30px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 26px, #000 calc(100% - 30px), transparent 100%);
}
.ss-pdp .c1-opt-pills.is-swatches::-webkit-scrollbar { display: none; }
.ss-pdp .c1-opt-pills.is-swatches .c1-sw-wrap { flex: 0 0 auto; }
.ss-pdp .c1-opt-pills.is-swatches.at-start {
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 30px), transparent 100%);
          mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 30px), transparent 100%);
}
.ss-pdp .c1-opt-pills.is-swatches.at-end {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 26px, #000 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 26px, #000 100%);
}
.ss-pdp .c1-opt-pills.is-swatches.at-start.at-end {
  -webkit-mask-image: none;
          mask-image: none;
}
.ss-pdp .c1-opt-pills.is-swatches.is-grabbing { cursor: grabbing; }
.ss-pdp .c1-opt-pill.is-swatch {
  padding: 4px;
  border-radius: 11px;
  width: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  background: #fff;
}
.ss-pdp .c1-opt-pill.is-swatch .c1-sw-img {
  display: block;
  width: 100%;
  border-radius: 7px;
  overflow: hidden;
  line-height: 0;
}
.ss-pdp .c1-opt-pill.is-swatch .c1-sw-img img {
  width: 100%;
  height: 64px;
  object-fit: cover;
  display: block;
}
.ss-pdp .c1-opt-pill.is-swatch .c1-sw-name {
  font-size: 11px;
  font-weight: 500;
  color: var(--ssb-ink-soft);
  padding: 6px 2px 2px;
  text-align: center;
  line-height: 1.15;
}
.ss-pdp .c1-opt-pill.is-swatch.is-sel {
  background: #fff;
  box-shadow: 0 0 0 2px var(--ssb-terracotta), 0 2px 8px rgba(168, 94, 56, .22);
}
.ss-pdp .c1-opt-pill.is-swatch.is-sel .c1-sw-name { color: var(--ssb-terracotta); }

/* The launch print is an order property, so its swatches use a separate button
   class while sharing the same image rail and preview treatment as box options. */
.ss-pdp .c1-launch-print-pill.is-swatch {
  font-family: var(--font-body);
  color: var(--ssb-ink-soft);
  width: 80px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
  border: 1.5px solid var(--ssb-dust);
  border-radius: 11px;
  cursor: pointer;
}
.ss-pdp .c1-launch-print-pill.is-swatch .c1-sw-img {
  display: block;
  width: 100%;
  border-radius: 7px;
  overflow: hidden;
  line-height: 0;
}
.ss-pdp .c1-launch-print-pill.is-swatch .c1-sw-img img {
  display: block;
  width: 100%;
  height: 64px;
  object-fit: cover;
}
.ss-pdp .c1-launch-print-pill.is-swatch .c1-sw-name {
  padding: 6px 2px 2px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.15;
  text-align: center;
}
.ss-pdp .c1-launch-print-pill.is-swatch:hover { border-color: var(--ssb-terracotta-light); }
.ss-pdp .c1-launch-print-pill.is-swatch:focus-visible {
  outline: 3px solid var(--ssb-terracotta-pale);
  outline-offset: 2px;
}
.ss-pdp .c1-launch-print-pill.is-swatch[aria-checked="true"] {
  border-color: var(--ssb-terracotta);
  box-shadow: 0 0 0 2px var(--ssb-terracotta), 0 2px 8px rgba(168, 94, 56, .22);
}
.ss-pdp .c1-launch-print-pill.is-swatch[aria-checked="true"] .c1-sw-name { color: var(--ssb-terracotta); }

/* ════════════════════════════════════════════════════════════════════════
   SWATCH VIEWER + SOLD-OUT STATES
   Magnifier badge on each image swatch opens a large preview (browse all
   designs, choose from inside). Ships hidden in markup; interaction-only
   motion per the Smooth-Load Playbook. Sold-out values grey + lock.
   ════════════════════════════════════════════════════════════════════════ */
.ss-pdp .c1-sw-wrap { position: relative; display: inline-flex; }
.ss-pdp .c1-sw-zoom {
  position: absolute;
  top: 5px; right: 5px;
  width: 18px; height: 18px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.9);
  border: 1px solid var(--ssb-dust);
  border-radius: 50%;
  color: var(--ssb-ink-soft);
  padding: 0;
  z-index: 2;
  transition: color .15s ease, border-color .15s ease, transform .15s ease;
}
.ss-pdp .c1-sw-zoom svg { width: 10px; height: 10px; }
.ss-pdp .c1-sw-zoom:hover { color: var(--ssb-terracotta); border-color: var(--ssb-terracotta-light); transform: scale(1.08); }
/* Touch/coarse-pointer devices apply a global 44px min touch-target to interactive
   controls (incl. .c1-sw-zoom). On the tiny swatch magnifier that balloons it to 44px
   and hides the product. The swatch itself is the primary tap target, so keep this
   secondary "view larger" badge at its small visual size on phones too. 2026-07-20 */
.ss-pdp .c1-sw-zoom { min-width: 0 !important; min-height: 0 !important; }
.ss-pdp .c1-fold.is-compact .c1-sw-zoom { min-width: 0 !important; min-height: 0 !important; }

/* sold out: greyed, label struck, not selectable */
.ss-pdp .c1-opt-pill.is-oos { opacity: .45; cursor: not-allowed; }
.ss-pdp .c1-opt-pill.is-oos .c1-sw-img { filter: grayscale(1); }
.ss-pdp .c1-opt-pill.is-oos .c1-sw-name,
.ss-pdp .c1-opt-pill.is-oos:not(.is-swatch) { text-decoration: line-through; text-decoration-thickness: 1px; }
.ss-pdp .c1-opt-pill.is-oos:hover { border-color: var(--ssb-dust); color: var(--ssb-ink-soft); }

/* viewer */
.c1-swv { position: fixed; inset: 0; z-index: 99999; }
.c1-swv[hidden] { display: none; }
.c1-swv-scrim { position: absolute; inset: 0; background: rgba(26, 23, 20, .55); }
html.c1-swv-open { overflow: hidden; }
.c1-swv-card {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(440px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px);
  display: flex; flex-direction: column;
  background: var(--ssb-cream);
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 24px 64px rgba(26,23,20,.35);
}
.c1-swv-x {
  position: absolute; top: 8px; right: 10px;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  border: 1px solid var(--ssb-dust);
  font-size: 20px; line-height: 1;
  color: var(--ssb-ink-soft);
  z-index: 2;
}
.c1-swv-imgwrap {
  border-radius: 10px; overflow: hidden;
  background: #fff;
  min-height: 200px;
}
.c1-swv-imgwrap img { display: block; width: 100%; height: auto; max-height: min(56vh, 460px); object-fit: contain; }
.c1-swv-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 2px 10px; }
.c1-swv-nav {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--ssb-dust);
  font-size: 22px; line-height: 1;
  color: var(--ssb-ink-soft);
  transition: border-color .15s ease, color .15s ease;
}
.c1-swv-nav:hover { border-color: var(--ssb-terracotta); color: var(--ssb-terracotta); }
.c1-swv-meta { text-align: center; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.c1-swv-name { font-family: var(--font-display); font-size: 19px; color: var(--ssb-ink); line-height: 1.15; }
.c1-swv-count { font-family: var(--font-body); font-size: 11px; letter-spacing: .14em; color: var(--ssb-slate); }
.c1-swv-choose {
  width: 100%;
  border: none;
  border-radius: 999px;
  padding: 15px;
  font-family: "DM Sans", sans-serif;
  font-size: 14px; font-weight: 500;
  letter-spacing: .04em; text-transform: uppercase;
  color: #fff; background: var(--ssb-terracotta, #a85e38);
  cursor: pointer;
}
.c1-swv-choose:hover { background: var(--ssb-terracotta-hover, #8f4e2e); }
.c1-swv { --ssb-cream:#faf8f4; --ssb-dust:#e8e0d0; --ssb-ink:#1a1714; --ssb-ink-soft:#4a4540; --ssb-slate:#6e655c; --ssb-terracotta:#a85e38; --font-display:"Cormorant Garamond",Georgia,serif; --font-body:"DM Sans",sans-serif; }
.c1-swv-choose:disabled { opacity: .55; cursor: not-allowed; }

/* ════════════════════════════════════════════════════════════════════════
   V4 COMPACT FOLD  ·  pdp-fix-4-compact
   Attacks the PDP whitespace: condenses the buy card and the variant pickers
   (circular swatch rows, selection echoed in the group header) and squares
   the hero, so the two columns are height-balanced. Scoped to .c1-fold.is-compact
   and appended last so it overrides the base letter-plate fold above.
   ════════════════════════════════════════════════════════════════════════ */

/* two balanced columns — no postal rail */
.ss-pdp .c1-fold.is-compact {
  max-width: 1360px; margin-inline: auto;
  grid-template-columns: minmax(0, 1.28fr) minmax(0, 1fr);
  gap: clamp(28px, 3.4vw, 52px);
  align-items: start;
}
@media (max-width: 1000px) { .ss-pdp .c1-fold.is-compact { max-width: none; grid-template-columns: 1fr; } }

/* MEDIA — clean square plate, sticky */
.ss-pdp .c1-fold.is-compact .c1-plate {
  position: sticky; top: 88px;
  background: none; border: 0; border-radius: 0; padding: 0;
  align-self: start;
}
.ss-pdp .c1-fold.is-compact .c1-hero-img {
  aspect-ratio: 1 / 1; border-radius: 16px; overflow: hidden;
  background: #f6f1ea;
  box-shadow: 0 26px 52px -26px rgba(28, 43, 58, .35);
}
.ss-pdp .c1-fold.is-compact .c1-hero-img .ph,
.ss-pdp .c1-fold.is-compact .c1-hero-img .ph img { position: absolute; inset: 0; width: 100%; height: 100%; }
.ss-pdp .c1-fold.is-compact .c1-hero-img .ph { background: #f6f1ea; }
.ss-pdp .c1-fold.is-compact .c1-hero-img .ph img { object-fit: contain; }
.ss-pdp .c1-fold.is-compact .c1-stamp-pill {
  position: absolute; top: 14px; left: 14px; z-index: 3; white-space: nowrap;
  background: rgba(255, 253, 249, .92); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  border-radius: 999px; padding: 6px 13px;
  font-family: var(--font-body); font-size: 9px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ssb-terracotta);
}
.ss-pdp .c1-fold.is-compact .c1-hero-cap { left: 14px; bottom: 14px; z-index: 3; }
.ss-pdp .c1-fold.is-compact .c1-thumbs {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 12px;
}
.ss-pdp .c1-fold.is-compact .c1-thumb { border-radius: 8px; }

/* BUY CARD — bordered, condensed */
.ss-pdp .c1-fold.is-compact .c1-buy {
  background: #fffdf9; border: 1px solid var(--ssb-dust); border-radius: 18px;
  padding: clamp(24px, 2.6vw, 34px);
  box-shadow: 0 18px 40px -26px rgba(28, 43, 58, .2);
  align-self: start;
}
.ss-pdp .c1-fold.is-compact .c1-buy h1 { font-size: clamp(34px, 4vw, 50px); margin-top: 10px; }
.ss-pdp .c1-fold.is-compact .ss-pdp-badge { margin: 10px 0 0; }
.ss-pdp .c1-fold.is-compact .c1-priceline { margin-top: 14px; }
.ss-pdp .c1-fold.is-compact .c1-priceline .pdp-price { font-size: 38px; }
.ss-pdp .c1-fold.is-compact .c1-desc { margin: 14px 0 4px; font-size: 14.5px; line-height: 1.65; max-width: none; }
.ss-pdp .c1-fold.is-compact .c1-opts { margin: 16px 0 18px; gap: 18px; }
.ss-pdp .c1-fold.is-compact .c1-actions { margin: 6px 0 10px; }
.ss-pdp .c1-fold.is-compact .c1-buy-divider { margin: 18px 0; }

/* OPTION GROUPS — label left, chosen value echoed right */
.ss-pdp .c1-fold.is-compact .c1-opt-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 4px 12px; flex-wrap: wrap;
}
.ss-pdp .c1-fold.is-compact .c1-opt-head .c1-opt-label { flex: 0 1 auto; }
.ss-pdp .c1-fold.is-compact .c1-opt-selname {
  margin-left: auto;
  font-family: var(--font-display); font-style: italic; font-size: 15px;
  color: var(--ssb-terracotta); line-height: 1.1; text-align: right;
}

/* COMPACT CIRCULAR SWATCHES */
.ss-pdp .c1-fold.is-compact .c1-opt-pills.is-swatches { gap: 12px; }
.ss-pdp .c1-fold.is-compact .c1-sw-wrap { display: inline-flex; }
.ss-pdp .c1-fold.is-compact .c1-opt-pill.is-swatch {
  position: relative; width: 54px; height: 54px; padding: 0; border-radius: 50%;
  flex-direction: row; overflow: visible; background: #fffdf9; border: 1.5px solid var(--ssb-dust);
}
.ss-pdp .c1-fold.is-compact .c1-opt-pill.is-swatch .c1-sw-img {
  width: 100%; height: 100%; border-radius: 50%; overflow: hidden;
}
.ss-pdp .c1-fold.is-compact .c1-opt-pill.is-swatch .c1-sw-img img { width: 100%; height: 100%; object-fit: cover; }
.ss-pdp .c1-fold.is-compact .c1-opt-pill.is-swatch .c1-sw-name { display: none; }
.ss-pdp .c1-fold.is-compact .c1-launch-print-pill.is-swatch {
  position: relative;
  width: 54px;
  height: 54px;
  padding: 0;
  border-radius: 50%;
  overflow: visible;
  background: #fffdf9;
}
.ss-pdp .c1-fold.is-compact .c1-launch-print-pill.is-swatch .c1-sw-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.ss-pdp .c1-fold.is-compact .c1-launch-print-pill.is-swatch .c1-sw-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ss-pdp .c1-fold.is-compact .c1-launch-print-pill.is-swatch .c1-sw-name { display: none; }
/* Prints show the whole design (2026-10-05). The circle + cover crop zoomed
   each print into an unrecognisable detail; three are portrait and the map is
   landscape, so a rounded square with contain shows every one in full. */
.ss-pdp .c1-fold.is-compact .c1-launch-print-pill.is-swatch {
  width: 60px; height: 60px; padding: 3px; border-radius: 9px; background: #fff;
}
.ss-pdp .c1-fold.is-compact .c1-launch-print-pill.is-swatch .c1-sw-img {
  border-radius: 6px; overflow: hidden; background: #f6f1ea;
}
.ss-pdp .c1-fold.is-compact .c1-launch-print-pill.is-swatch .c1-sw-img img { object-fit: contain; }
/* keep the magnifier — opens the full-size product preview. Tucked at the
   bottom-right so it never collides with the top-right "selected" check. */
.ss-pdp .c1-fold.is-compact .c1-sw-zoom {
  top: auto; bottom: -2px; right: -2px;
  width: 15px; height: 15px;
  background: rgba(255, 253, 249, .96);
  box-shadow: 0 1px 4px rgba(28, 43, 58, .18);
}
.ss-pdp .c1-fold.is-compact .c1-sw-zoom svg { width: 9px; height: 9px; }
.ss-pdp .c1-fold.is-compact .c1-opt-pill.is-swatch.is-sel {
  border-color: var(--ssb-terracotta);
  box-shadow: 0 0 0 2px var(--ssb-terracotta), 0 0 0 4px #fffdf9, 0 3px 10px rgba(168, 94, 56, .22);
}
.ss-pdp .c1-fold.is-compact .c1-opt-pill.is-swatch.is-sel::after {
  content: "✓"; position: absolute; top: -5px; right: -5px; z-index: 2;
  width: 18px; height: 18px; border-radius: 50%; background: var(--ssb-terracotta);
  color: #fff; font-size: 10px; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center; border: 2px solid #fffdf9;
}

/* Keep the whole gift in view on smaller screens. */
@media (max-width: 1000px) {
  .ss-pdp .c1-fold.is-compact .c1-plate,
  .ss-pdp .c1-fold.is-compact .c1-buy { position: static; }
  .ss-pdp .c1-fold.is-compact .c1-hero-img { aspect-ratio: 1 / 1; }
}
@media (max-width: 749px) {
  .ss-pdp .c1-fold.is-compact .c1-stamp-pill,
  .ss-pdp .c1-fold.is-compact .c1-hero-cap { display: none; }
}

/* ════════════════════════════════════════════════════════════════════
   MOBILE OVERFLOW FIX (2026-06-17)
   Root cause of the right-side overflow: the single-column fold used
   `grid-template-columns: 1fr`, whose implicit min-width:auto let a wide
   child (the buy card's Shop-Pay / dynamic-checkout button carries an
   intrinsic min-width) stretch the track past the viewport — clipping the
   card, breadcrumb and price on the right instead of wrapping.
   minmax(0,1fr) + min-width:0 lets the column shrink so content wraps.
   (Pairs with the page-level html{overflow-x:clip} guard in the section.)
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 1000px) {
  .ss-pdp .c1-fold,
  .ss-pdp .c1-fold.is-compact { grid-template-columns: minmax(0, 1fr); }
  .ss-pdp .c1-main,
  .ss-pdp .c1-fold > *,
  .ss-pdp .c1-buy,
  .ss-pdp .c1-plate { min-width: 0; max-width: 100%; }
  /* let the breadcrumb's current page title wrap rather than force width */
  .ss-pdp .pdp-crumb { min-width: 0; }
  .ss-pdp .pdp-crumb .cur { overflow-wrap: anywhere; }
}

/* Phones: tighten the side gutter a touch so cards sit closer to the edges
   (base is clamp(20px,4vw,56px) = 20px on phones; nudge down to 14px). */
@media (max-width: 600px) {
  .ss-pdp .c1-main { padding-inline: 14px; }
}

/* ════════════════════════════════════════════════════════════════════
   ALLERGENS & DIETARY  (.ss-alg)  +  THE PERSONAL BIT (.ss-pb)
   Ported from the "Product page allergens section" handoff, 2026-08-29.
   Mobile = base, desktop = @media (min-width: 750px) to match the PDP's
   own 749/750 tab breakpoint (the handoff said 768px; using 768 would
   leave a 750-767px band where the tabs are desktop but these are not).
   Colours are the handoff's literal hex, not --ssb-* tokens, so the two
   blocks stay byte-faithful to the signed-off design.
   ════════════════════════════════════════════════════════════════════ */

/* ── Allergens: band ───────────────────────────────────────────────── */
.ss-pdp .ss-alg { position: relative; }
.ss-pdp .ss-alg-rail, .ss-pdp .ss-alg-vert { display: none; }
.ss-pdp .ss-alg-in { position: relative; }
.ss-pdp .ss-alg-eyebrow, .ss-pdp .ss-alg-h2 { display: none; }

/* ── Allergens: tray + card ────────────────────────────────────────── */
.ss-pdp .ss-alg-card { background: #faf8f4; border: 1px solid #ece2d0; border-radius: 20px;
  padding: 22px 18px 20px; box-shadow: 0 8px 24px rgba(26,42,68,0.06); }
.ss-pdp .ss-alg-inner { background: #ffffff; border: 1px solid #e7ddcb; border-radius: 16px; padding: 22px 18px; }

/* ── Allergens: mobile header + key ────────────────────────────────── */
.ss-pdp .ss-alg-mh { display: flex; align-items: center; justify-content: center; gap: 8px; }
.ss-pdp .ss-alg-mh svg { width: 14px; height: 14px; flex: none; }
.ss-pdp .ss-alg-mh span { font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: #4a4540; }
.ss-pdp .ss-alg-key { display: flex; justify-content: center; gap: 22px; margin-top: 16px; }
.ss-pdp .ss-alg-key > span { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; }
.ss-pdp .ss-alg-key .k-c { color: #4a4540; }
.ss-pdp .ss-alg-key .k-m { color: #8c8278; }
.ss-pdp .ss-alg-key .sw { width: 9px; height: 9px; border-radius: 999px; flex: none; }
.ss-pdp .ss-alg-key .sw--c { background: #a85e38; }
.ss-pdp .ss-alg-key .sw--m { background: #ddd2bd; }

/* ── Allergens: the declared list (mobile = chip cloud) ────────────── */
.ss-pdp .ss-alg-grid { display: block; }
.ss-pdp .ss-alg-colh { display: none; }
.ss-pdp .ss-alg-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 16px; margin-top: 16px; }
.ss-pdp .ss-alg-item { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: #1a1714; }
.ss-pdp .ss-alg-item .ic { flex: none; line-height: 0; color: #a85e38; }
.ss-pdp .ss-alg-item .ic svg { width: 16px; height: 16px; display: block; }
.ss-pdp .ss-alg-item .tag { display: none; }
.ss-pdp .ss-alg-item.is-may { color: #8c8278; }
.ss-pdp .ss-alg-item.is-may .ic { color: #b3a99c; }

/* ── Allergens: "not suitable for" ─────────────────────────────────── */
.ss-pdp .ss-alg-nsf { margin-top: 20px; padding-top: 20px; border-top: 1px solid #ece2d0; }
.ss-pdp .ss-alg-nsf-h { margin: 0 0 12px; font-size: 10px; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: #8c8278; text-align: center; }
.ss-pdp .ss-alg-badges { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ss-pdp .ss-alg-badge { display: flex; align-items: center; gap: 8px; background: #faf8f4; border: 1px solid #f0e8d7;
  border-radius: 999px; padding: 9px 12px 9px 14px; font-size: 12px; font-weight: 400; color: #8c8278; }
.ss-pdp .ss-alg-badge svg { width: 15px; height: 15px; flex: none; color: #b3a99c; }
.ss-pdp .ss-alg-badge .t { flex: 1; }

/* ── Allergens: gelatine note ──────────────────────────────────────── */
.ss-pdp .ss-alg-note { margin: 12px 0 0; }
.ss-pdp .ss-alg-note .lbl { display: none; }
.ss-pdp .ss-alg-note .txt { display: block; font-size: 12px; font-weight: 300; line-height: 1.6; color: #8c8278; }
.ss-pdp .ss-alg a { color: #a85e38; text-decoration: none; border-bottom: 1px solid #e0bda9; }
.ss-pdp .ss-alg a:hover { color: #a85e38; }

.ss-pdp .ss-alg-food-row { border-top: 1px solid #e8dfd7; }
.ss-pdp .ss-alg-food-row:first-of-type { margin-top: 20px; }
.ss-pdp .ss-alg-food-summary { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 15px 0; cursor: pointer; color: #1a1714; font-size: 14px; font-weight: 600; line-height: 1.4;
  list-style: none; }
.ss-pdp .ss-alg-food-summary::-webkit-details-marker { display: none; }
.ss-pdp .ss-alg-food-summary:hover { color: #a85e38; }
.ss-pdp .ss-alg-food-summary:focus-visible { outline: 2px solid #a85e38; outline-offset: 3px; border-radius: 2px; }
.ss-pdp .ss-alg-food-toggle { position: relative; flex: 0 0 26px; width: 26px; height: 26px;
  border: 1px solid #e7ddcb; border-radius: 50%; }
.ss-pdp .ss-alg-food-toggle::before, .ss-pdp .ss-alg-food-toggle::after { content: ''; position: absolute;
  top: 50%; left: 50%; width: 10px; height: 1px; background: #a85e38; transform: translate(-50%, -50%); }
.ss-pdp .ss-alg-food-toggle::after { transform: translate(-50%, -50%) rotate(90deg); }
.ss-pdp .ss-alg-food-row[open] .ss-alg-food-toggle::after { display: none; }
.ss-pdp .ss-alg-food-body { padding: 0 34px 16px 0; color: #4a4540; font-size: 13px; line-height: 1.6; }
.ss-pdp .ss-alg-food-body p { margin: 0 0 8px; }

/* ── Allergens: legal tail ─────────────────────────────────────────── */
.ss-pdp .ss-alg-legal { margin: 16px 0 0; padding: 0 4px; font-size: 11px; font-weight: 300;
  line-height: 1.65; color: #9a9086; font-style: normal; }

/* ── Allergens: DESKTOP ────────────────────────────────────────────── */
@media (min-width: 750px) {
  .ss-pdp .ss-alg { background-image: repeating-linear-gradient(90deg, rgba(26,42,68,0.028) 0 1px, transparent 1px 34px);
    padding: 96px 0 88px; margin: 0 calc(50% - 50vw); width: 100vw; }
  .ss-pdp .ss-alg-rail { display: block; position: absolute; top: 0; bottom: 0;
    border-left: 1px dashed rgba(196,113,74,0.32); }
  .ss-pdp .ss-alg-rail--l { left: 64px; }
  .ss-pdp .ss-alg-rail--r { right: 64px; }
  .ss-pdp .ss-alg-vert { display: block; position: absolute; top: 50%; right: 40px; transform: translateY(-50%);
    writing-mode: vertical-rl; font-size: 9px; font-weight: 600; letter-spacing: 0.3em;
    text-transform: uppercase; color: #c0b6a8; }
  .ss-pdp .ss-alg-in { max-width: 820px; margin: 0 auto; padding: 0 24px; }

  .ss-pdp .ss-alg-eyebrow { display: flex; align-items: center; justify-content: center; gap: 18px; }
  .ss-pdp .ss-alg-eyebrow .r { width: 44px; height: 1px; background: #dcae95; }
  .ss-pdp .ss-alg-eyebrow .t { font-size: 11px; font-weight: 600; letter-spacing: 0.26em;
    text-transform: uppercase; color: #a85e38; }
  .ss-pdp .ss-alg-h2 { display: block; margin: 18px 0 0; font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 400; font-size: 36px; line-height: 1.2; color: #1a1714; text-align: center; letter-spacing: 0; }
  .ss-pdp .ss-alg-h2 em { font-style: italic; color: #a85e38; }

  /* tray → the white card; inner → plain contents */
  .ss-pdp .ss-alg-card { margin-top: 34px; background: #ffffff; border: 1px solid #ece2d0; border-radius: 20px;
    padding: 36px 40px 32px; box-shadow: 0 8px 24px rgba(26,42,68,0.06); }
  .ss-pdp .ss-alg-inner { background: none; border: 0; border-radius: 0; padding: 0; }

  .ss-pdp .ss-alg-mh, .ss-pdp .ss-alg-key { display: none; }

  .ss-pdp .ss-alg-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 40px; align-items: start; }
  .ss-pdp .ss-alg-colh { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    padding-bottom: 10px; border-bottom: 1px solid #ece2d0; }
  .ss-pdp .ss-alg-colh .h { font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: #4a4540; }
  .ss-pdp .ss-alg-colh .n { font-size: 9.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #b3a99c; }

  .ss-pdp .ss-alg-list { display: block; margin-top: 0; }
  .ss-pdp .ss-alg-item { display: flex; align-items: center; gap: 12px; padding: 13px 0;
    border-bottom: 1px solid #f4eee2; font-size: 15.5px; }
  .ss-pdp .ss-alg-item:last-child { border-bottom: 0; }
  .ss-pdp .ss-alg-item .ic svg { width: 18px; height: 18px; }
  .ss-pdp .ss-alg-item .nm { flex: 1; }
  .ss-pdp .ss-alg-item .tag { display: block; flex: 0 0 auto; font-size: 9.5px; font-weight: 600;
    letter-spacing: 0.14em; text-transform: uppercase; color: #a85e38; }
  .ss-pdp .ss-alg-item.is-may { color: #6b635a; }
  .ss-pdp .ss-alg-item.is-may .ic { color: #c0b6a8; }
  .ss-pdp .ss-alg-item.is-may .tag { color: #b3a99c; }

  .ss-pdp .ss-alg-nsf { display: flex; flex-direction: column; gap: 14px; margin-top: 0; padding-top: 0;
    padding-left: 40px; border-top: 0; border-left: 1px solid #f4eee2; }
  .ss-pdp .ss-alg-nsf-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    margin: 0; padding-bottom: 10px; border-bottom: 1px solid #ece2d0; text-align: left;
    font-size: 10px; letter-spacing: 0.2em; color: #4a4540; }
  .ss-pdp .ss-alg-badges { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .ss-pdp .ss-alg-badge { gap: 9px; padding: 11px 15px; font-size: 12.5px; }
  .ss-pdp .ss-alg-badge svg { width: 18px; height: 18px; }

  .ss-pdp .ss-alg-note { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 0;
    padding-top: 16px; border-top: 1px solid #f4eee2; }
  .ss-pdp .ss-alg-note .lbl { display: block; font-size: 10px; font-weight: 600; letter-spacing: 0.18em;
    text-transform: uppercase; color: #a85e38; }
  .ss-pdp .ss-alg-note .txt { font-size: 13.5px; line-height: 1.6; color: #4a4540; }

  .ss-pdp .ss-alg-legal { margin: 28px 0 0; padding: 20px 0 0; border-top: 1px solid #f4eee2;
    font-size: 12.5px; line-height: 1.7; color: #9a9086; text-align: center; }
}

/* ════════════════════════════════════════════════════════════════════
   THE PERSONAL BIT  (.ss-pb)  - v4a desktop / 3a mobile.
   Desktop: framed photo left, head + body right. Mobile: head, photo, body.
   ════════════════════════════════════════════════════════════════════ */
.ss-pdp .ss-pb-sec { background: #f2ede4; padding: 96px clamp(20px, 5vw, 72px); }
.ss-pdp .ss-pb { max-width: 1240px; margin: 0 auto; display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr); grid-template-areas: "img head" "img body";
  column-gap: 80px; align-items: center; }
.ss-pdp .ss-pb-head { grid-area: head; align-self: end; }
.ss-pdp .ss-pb-body { grid-area: body; align-self: start; }
.ss-pdp .ss-pb-img { grid-area: img; background: #fffdf8; padding: 14px; border-radius: 20px;
  box-shadow: 0 20px 50px rgba(26,42,68,.10), 0 1px 2px rgba(26,42,68,.06); }
.ss-pdp .ss-pb-img-in { border-radius: 10px; aspect-ratio: 4/5; overflow: hidden; }
.ss-pdp .ss-pb-img-in img { width: 100%; height: 100%; object-fit: cover; object-position: 74% 32%; display: block; }
.ss-pdp .ss-pb-eye { display: flex; align-items: center; gap: 10px; margin: 0; font-family: 'DM Sans', sans-serif;
  font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: #a85e38; }
.ss-pdp .ss-pb-eye::before { content: '\2726'; font-size: 12px; letter-spacing: 0; }
.ss-pdp .ss-pb-h { margin: 18px 0 0; font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 300;
  font-size: clamp(32px, 4vw, 52px); line-height: 1.04; letter-spacing: -.01em; color: #1a1714; text-wrap: balance; max-width: 8.8em; }
.ss-pdp .ss-pb-h em { font-style: italic; color: #a85e38; }
.ss-pdp .ss-pb-rule { width: 36px; height: 1px; background: #a85e38; margin-top: 26px; }
.ss-pdp .ss-pb-lede { margin: 22px 0 0; font-family: 'DM Sans', sans-serif; font-weight: 300; font-size: 16px;
  line-height: 1.8; color: #4a4540; max-width: 46ch; }
.ss-pdp .ss-pb-steps { margin-top: 32px; border-top: 1px solid #e2d5c0; }
.ss-pdp .ss-pb-step { display: grid; grid-template-columns: 48px 1fr; gap: 22px; padding: 22px 0;
  border-bottom: 1px solid #e2d5c0; align-items: center; }
.ss-pdp .ss-pb-step .ic { width: 48px; height: 48px; border-radius: 999px; border: 1px solid #dcc3ad; color: #a85e38;
  display: flex; align-items: center; justify-content: center; }
.ss-pdp .ss-pb-step .ic svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.25;
  stroke-linecap: round; stroke-linejoin: round; }
.ss-pdp .ss-pb-step .t { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; font-size: 23px;
  line-height: 1.2; color: #1a1714; }
.ss-pdp .ss-pb-step .b { font-family: 'DM Sans', sans-serif; font-weight: 300; font-size: 14px; line-height: 1.55;
  color: #8c8278; margin-top: 4px; }

/* ── Personal bit: MOBILE (3a) ─────────────────────────────────────── */
@media (max-width: 820px) {
  .ss-pdp .ss-pb-sec { padding: 40px 20px; }
  .ss-pdp .ss-pb { grid-template-columns: 1fr; grid-template-areas: "head" "img" "body"; }
  /* !important beats the global h2 flattener in snippets/fonts.liquid (<=768px) */
  .ss-pdp .ss-pb-h { margin-top: 12px; font-size: min(32px, 8.2vw) !important; line-height: 1.06; max-width: none; }
  .ss-pdp .ss-pb-rule { display: none; }
  .ss-pdp .ss-pb-img { margin-top: 22px; padding: 8px; border-radius: 14px; box-shadow: 0 8px 24px rgba(26,42,68,.08); }
  .ss-pdp .ss-pb-img-in { border-radius: 8px; aspect-ratio: 4/3; }
  .ss-pdp .ss-pb-img-in img { object-position: 78% 30%; }
  .ss-pdp .ss-pb-lede { margin-top: 18px; font-size: 14.5px; line-height: 1.6; }
  .ss-pdp .ss-pb-steps { margin-top: 22px; }
  .ss-pdp .ss-pb-step { grid-template-columns: 34px 1fr; gap: 14px; padding: 16px 0; }
  .ss-pdp .ss-pb-step .ic { width: 34px; height: 34px; }
  .ss-pdp .ss-pb-step .ic svg { width: 16px; height: 16px; }
  .ss-pdp .ss-pb-step .t { font-size: 18px; }
  .ss-pdp .ss-pb-step .b { font-size: 12.5px; line-height: 1.5; margin-top: 2px; }
}
@media (min-width: 750px) and (max-width: 1023px) {
  .ss-pdp .ss-alg-grid { grid-template-columns: 1fr; gap: 28px; }
  .ss-pdp .ss-alg-nsf { padding-left: 0; border-left: 0; }
}
@media (min-width: 750px) and (max-width: 1199px) {
  .ss-pdp .ss-alg-in { padding: 0 88px; }
}

/* Compact, readable purchase choices. */
.ss-pdp .c1-candle-group .c1-opt-head { gap:12px; align-items:baseline; }
.ss-pdp .c1-candle-group .c1-opt-selname { margin:0; min-height:0; font-size:15px; text-align:right; }
.ss-pdp .c1-opt-pills.is-candles { display:flex; flex-wrap:nowrap; gap:8px; overflow-x:auto; padding:8px 2px 12px; }
.ss-pdp .c1-fold.is-compact .c1-opt-pills.is-candles { gap:8px; }
.ss-pdp .c1-opt-pills.is-candles .c1-sw-wrap { flex:0 0 auto; }
.ss-pdp .c1-opt-pill.is-swatch.c1-candle-choice { width:64px; min-height:82px; padding:4px; background:#fff; border-radius:9px; }
.ss-pdp .c1-candle-choice .c1-sw-img img { height:64px; object-fit:cover; }
.ss-pdp .c1-candle-choice .c1-sw-name { font-size:11px; line-height:1.2; }
.ss-pdp .c1-opt-pill.is-swatch.c1-candle-choice.is-sel { box-shadow:0 0 0 2px var(--ssb-terracotta),0 2px 8px rgba(168,94,56,.22); }
.ss-pdp .c1-fold.is-compact .c1-opts { margin-bottom:6px; gap:10px; }
.ss-pdp .c1-fold.is-compact .c1-candle-group { margin-bottom:0; }
.ss-pdp .c1-fold.is-compact .c1-opt-pill.is-swatch.c1-candle-choice {
  width:64px; height:82px; min-height:82px; padding:4px; border-radius:9px;
  flex-direction:column; justify-content:flex-start; background:#fff; border-color:transparent;
}
.ss-pdp .c1-fold.is-compact .c1-opt-pill.is-swatch.c1-candle-choice .c1-sw-img {
  width:54px; height:54px; flex:0 0 54px; border-radius:50%;
}
.ss-pdp .c1-fold.is-compact .c1-opt-pill.is-swatch.c1-candle-choice .c1-sw-img img {
  width:54px; height:54px; object-fit:cover;
}
.ss-pdp .c1-fold.is-compact .c1-opt-pill.is-swatch.c1-candle-choice .c1-sw-name {
  display:block; width:100%; padding:4px 0 0; font-size:11px; line-height:1.15;
  white-space:nowrap; text-align:center;
}
.ss-pdp .c1-fold.is-compact .c1-opt-pill.is-swatch.c1-candle-choice.is-sel {
  border-color:var(--ssb-terracotta); box-shadow:0 0 0 2px var(--ssb-terracotta),0 2px 8px rgba(168,94,56,.22);
}
.ss-pdp .c1-wine-choice { margin:8px 0 14px; padding:12px 0; border-top:1px solid #e6dfd2; border-bottom:1px solid #e6dfd2; }
.ss-pdp .c1-wine-choice h3 { margin:0 0 6px; font-size:25px; font-weight:400; }
.ss-pdp .c1-wine-choice h3 span { font:14px 'DM Sans',sans-serif; color:#625b54; margin-left:8px; }
.ss-pdp .c1-wine-choice p { margin:6px 0 12px; font-size:14px; line-height:1.5; }
.ss-pdp .c1-wine-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.ss-pdp .c1-wine-options button { min-height:48px; padding:8px 4px; border:1px solid #c9beb0; background:transparent; border-radius:6px; font:15px/1.4 'DM Sans',sans-serif; cursor:pointer; color:#282522; }
.ss-pdp .c1-wine-options button span { display:block; font-size:13px; }
.ss-pdp .c1-wine-options button.is-sel { background:#f5eae3; border-color:#a85e38; box-shadow:inset 0 0 0 1px #a85e38; }
.ss-pdp .c1-wine-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.ss-pdp .c1-wine-none { flex:0 0 auto; background:none; border:0; padding:4px 0; font:14px 'DM Sans',sans-serif; color:#625b54; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.ss-pdp .c1-wine-none.is-sel { color:#a85e38; text-decoration-color:#a85e38; }
.ss-pdp .c1-wine-options button.c1-wine-opt { display:flex; align-items:center; gap:8px; min-height:66px; padding:6px 8px; text-align:left; }
.ss-pdp .c1-wine-opt img { flex:0 0 22px; width:22px; height:55px; object-fit:cover; border-radius:3px; }
.ss-pdp .c1-wine-options button .c1-wine-txt { display:flex; flex-direction:column; min-width:0; }
.ss-pdp .c1-wine-options button .c1-wine-name { font-size:14px; line-height:1.2; }
.ss-pdp .c1-wine-options button .c1-wine-price { display:block; font-size:13px; color:#625b54; margin-top:2px; }
@media (max-width:420px) { .ss-pdp .c1-wine-options { gap:6px; } .ss-pdp .c1-wine-options button.c1-wine-opt { gap:5px; padding:6px 5px; } .ss-pdp .c1-wine-opt img { flex-basis:18px; width:18px; height:45px; } .ss-pdp .c1-wine-options button .c1-wine-name { font-size:13px; } .ss-pdp .c1-wine-options button .c1-wine-price { font-size:12px; } }
.ss-pdp .c1-wine-notice { color:#554b42; margin-bottom:0!important; }
.ss-pdp .c1-delivery-summary { margin:14px 0; font-size:14px; line-height:1.5; }
.ss-pdp .c1-delivery-summary p { margin:0 0 8px; }
.ss-pdp .c1-delivery-summary summary { cursor:pointer; padding:8px 0; text-decoration:underline; text-underline-offset:3px; }
.ss-pdp .c1-trust { gap:10px; margin:16px 0; font-size:14px; }
.ss-pdp .c1-purchase-error { color:#8c2f24; font-size:15px; }
.ss-pdp .c1-wine-options button:focus-visible,.ss-pdp .c1-candle-choice:focus-visible { outline:2px solid #1b2c3b; outline-offset:3px; }
@media(max-width:749px) {
 .ss-pdp .pdp-btn-atc { font-size:15px; letter-spacing:1px; min-height:52px; padding:14px 12px; }
 .ss-pdp .c1-opt-group { margin-bottom:10px; }
 .ss-pdp .c1-opt-label { font-size:13px; letter-spacing:1px; }
}

@media(max-width:749px) { body:has(.ss-pdp) #ss-btt { display:none!important; } .ss-pdp .c1-opt-hint { margin:8px 0; font-size:14px; } }
@media(max-width:749px) { .ss-pdp .c1-opt-hint { display:none!important; } }

/* Box shot + spread gallery (2026-09-29). The base .c1-thumb is flex:1 for a
   flex row; inside the compact grid it needs an explicit block size. */
.ss-pdp .c1-thumbs--box .c1-thumb {
  display: block; position: relative; width: 100%; padding: 0; cursor: pointer;
  background: #f6f1ea;
}
.ss-pdp .c1-thumbs--box .c1-thumb .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ss-pdp .c1-fold.is-compact .c1-hero-img [data-hero-img] { transition: opacity .2s ease; }

/* Box/spread thumbs take no height (2026-09-29). The sticky plate was
   hero + 156px row, taller than a laptop viewport, so the row never showed.
   Desktop: chips overlay the hero bottom-right (caption pill owns bottom-left).
   Below 1001px the plate isn't sticky, so a small strip is fine. */
.ss-pdp .c1-fold.is-compact .c1-thumbs--box {
  grid-template-columns: repeat(auto-fill, 56px); gap: 8px; margin-top: 10px;
}
@media (min-width: 1001px) {
  .ss-pdp .c1-fold.is-compact .c1-thumbs--box {
    position: absolute; right: 14px; bottom: 14px; z-index: 4; margin: 0;
    display: flex; gap: 6px; padding: 5px; border-radius: 12px;
    background: rgba(255, 253, 249, .72);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    box-shadow: 0 6px 18px -8px rgba(28, 43, 58, .35);
  }
  .ss-pdp .c1-fold.is-compact .c1-thumbs--box .c1-thumb-wrap { width: 58px; }
  .ss-pdp .c1-fold.is-compact .c1-thumbs--box .c1-thumb { border-radius: 7px; opacity: .8; transition: opacity .15s ease; }
  .ss-pdp .c1-fold.is-compact .c1-thumbs--box .c1-thumb:hover,
  .ss-pdp .c1-fold.is-compact .c1-thumbs--box .c1-thumb.is-active { opacity: 1; }
}
/* Phones and tablets get the same in-photo chips (2026-10-05). The row under
   the photo read as a large white strip; swiping the photo still steps
   through both shots, and the chips stay as 44px buttons for taps and keys. */
@media (max-width: 1000px) {
  .ss-pdp .c1-fold.is-compact .c1-plate { position: relative; top: auto; }
  .ss-pdp .c1-fold.is-compact .c1-thumbs--box {
    position: absolute; right: 10px; bottom: 10px; z-index: 4; margin: 0;
    display: flex; gap: 5px; padding: 4px; border-radius: 11px;
    background: rgba(255, 253, 249, .72);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    box-shadow: 0 6px 18px -8px rgba(28, 43, 58, .35);
  }
  .ss-pdp .c1-fold.is-compact .c1-thumbs--box .c1-thumb-wrap { width: 44px; }
  .ss-pdp .c1-fold.is-compact .c1-thumbs--box .c1-thumb { border-radius: 7px; opacity: .8; }
  .ss-pdp .c1-fold.is-compact .c1-thumbs--box .c1-thumb.is-active { opacity: 1; }
}

/* Allergens compact (2026-09-29): desktop keeps Contains as rows, May contain
   becomes a wrapped chip row under one label (~600px -> ~120px on 9 traces).
   Mobile is already a chip cloud with its own legend, so the label is hidden there. */
.ss-pdp .ss-alg-mayh { display: none; }
@media (min-width: 750px) {
  .ss-pdp .ss-alg-list { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 8px; }
  .ss-pdp .ss-alg-item:not(.is-may) { flex: 0 0 100%; }
  .ss-pdp .ss-alg-mayh { display: block; flex: 0 0 100%; margin-top: 10px;
    font-size: 9.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #b3a99c; }
  .ss-pdp .ss-alg-item.is-may { flex: 0 0 auto; gap: 7px; padding: 6px 12px 6px 10px; font-size: 13.5px;
    border: 1px solid #ece2d0; border-radius: 999px; background: #fdfaf5; }
  .ss-pdp .ss-alg-item.is-may:last-child { border-bottom: 1px solid #ece2d0; }
  .ss-pdp .ss-alg-item.is-may .ic svg { width: 14px; height: 14px; }
  .ss-pdp .ss-alg-item.is-may .nm { flex: none; }
  .ss-pdp .ss-alg-item.is-may .tag { display: none; }
}


.ss-pdp .c1-wine-options { max-width: 360px; }
.ss-pdp .c1-wine-options button.c1-wine-opt {
  flex-direction: column; align-items: stretch; gap: 0; padding: 0;
  overflow: hidden; border-radius: 10px;
  background: var(--ssb-parchment, #f2ede4); text-align: center;
}
.ss-pdp .c1-wine-opt img {
  flex: none; width: 100%; height: 92px; object-fit: contain; border-radius: 0;
}
.ss-pdp .c1-wine-options button .c1-wine-txt {
  flex: none; justify-content: center; min-height: 51px; padding: 5px 3px 7px;
}
.ss-pdp .c1-wine-options button .c1-wine-name { font-size: 12px; line-height: 1.2; }
.ss-pdp .c1-wine-options button .c1-wine-price { font-size: 11px; }