/* === SCOPED to this prototype page only, prefix all rules with .tpp === */
.tpp {
  --paper:#E8EAEE;--paper-2:#F2F4F7;--white:#fff;
  --char:#042220;--ink:#042220;--slate:#5C6270;--mist:#8A8F9C;--ash:#C8CDD6;
  --hair:rgba(14,15,18,.10);--hair-2:rgba(14,15,18,.06);
  --acc:#FFB347;--berry:#FF2D8E;--lime:#B8FF3C;--indigo:#7C3AED;--cyan:#30d8c8;
  /* Warm-neutral palette replacing pure black across the page.
     Reads neutral for any audience; signals warmth, organic, refined. */
  --tea-brown:#2E2620;       /* deep tea-liquor brown */
  --tea-brown-2:#1F1814;     /* even deeper for high-contrast bg */
  --forest:#1F3329;          /* deep tea-leaf green */
  --petrol:#1B3A47;          /* deep petrol blue/teal */
  --terracotta:#D86C42;      /* CTA accent, vibrant, warm */
  --terracotta-2:#A8421F;    /* CTA hover */
  /* Buy-button gradient (amber → terracotta) so the primary action burns through everything else */
  --buy-grad: linear-gradient(135deg, #5E7045 0%, #3D4A2A 55%, #2A331C 100%);
  --buy-grad-hover: linear-gradient(135deg, #FFA035 0%, #F47A30 55%, #C25A2E 100%);
  --fb:'DM Sans',system-ui,sans-serif;
  --fd:'Instrument Serif',Georgia,serif;
  --fm:'JetBrains Mono',ui-monospace,monospace;
  --ease:cubic-bezier(0.32,0.72,0,1);
  --r-sm:8px;--r-md:14px;--r-lg:22px;--r-xl:28px;--r-2xl:32px;--r-3xl:40px;--r-pill:999px;
  --sh-card:0 .5px 1px rgba(14,15,18,.04),0 1px 2px rgba(14,15,18,.04),0 8px 24px rgba(14,15,18,.05);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--fb);
  -webkit-font-smoothing: antialiased;
  letter-spacing: -.004em;
  /* Bottom padding tightened 2026-05-11. Was 72px (~2cm "dead air" before
     the footer that Lee flagged). 16px keeps a clean break without the
     yawning gap. */
  padding: 32px 24px 16px;
}
.tpp *, .tpp *::before, .tpp *::after { box-sizing: border-box; }
.tpp svg { display: block; }
.tpp a { color: inherit; text-decoration: none; }
.tpp .shell { max-width: 1380px; margin: 0 auto; }

/* Crumbs, readable on the paper background. Sans-serif (not mono),
   ink-dark links with the accent on hover, no shouting all-caps. */
.tpp .crumbs {
  font-family: var(--fb);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -.005em;
  color: var(--slate);
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 0 18px;
  text-transform: none;
}
.tpp .crumbs a {
  color: var(--ink);
  font-weight: 600;
  border-bottom: 1px solid transparent;
  transition: border-color .14s ease, color .14s ease;
}
.tpp .crumbs a:hover {
  color: var(--ink);
  border-bottom-color: var(--acc);
}
.tpp .crumbs .sep {
  color: var(--mist);
  font-weight: 400;
  opacity: 1;
}
.tpp .crumbs .here {
  color: var(--ink);
  font-weight: 700;
}

/* Prototype banner */
.tpp .proto-banner { background: linear-gradient(135deg, #FFB347 0%, #FF8C42 100%); color: #0A0B0F; padding: 12px 18px; border-radius: var(--r-md); margin-bottom: 24px; font-family: var(--fm); font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; display: flex; align-items: center; gap: 12px; }
.tpp .proto-banner .pip { width: 8px; height: 8px; border-radius: 50%; background: #0A0B0F; flex-shrink: 0; }
.tpp .proto-banner small { font-family: var(--fb); font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: 0; color: rgba(10,11,15,.75); margin-left: auto; }

/* HERO LAYOUT, 2-col when there's plenty of room, single-col otherwise.
   Breakpoint set high (1180px) because the 460px-fixed buybox needs at least
   ~700px gallery + gap to look right. Below that, stack. */
.tpp .product-hero {
  display: grid;
  grid-template-columns: minmax(360px, 1fr) 460px;
  gap: 36px;
  align-items: stretch;
  margin-bottom: 40px;
}
@media (max-width: 1180px) {
  .tpp .product-hero { grid-template-columns: 1fr; }
}

/* === GALLERY, framed "mat" treatment ===
   The manufacturer's product photos ship with a white bleed around the box.
   We turn that bleed into a deliberate design choice: the image sits inside
   a cream-white inner card (the "mat"), which sits inside the purple outer
   panel, with an offset shadow giving a layered polaroid / gallery-frame
   feel. The mat absorbs the white edge of the photo so it reads as one
   intentional unit, not a floating box-against-purple. */
.tpp .gallery {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 580px;
}
@media (min-width: 1181px) {
  /* Sticky only at desktop where the 2-col grid is in play.
     Flex column lets .main-img grow to fill the stretched row height so
     the gallery column ends at the same Y as the buybox column. */
  .tpp .gallery {
    position: sticky; top: 90px; max-width: none;
    display: flex; flex-direction: column;
  }
  .tpp .gallery .main-img {
    flex: 1;
    aspect-ratio: auto;
    min-height: 480px;
  }
}
@media (max-width: 1180px) {
  /* Centred narrower gallery on single-col layouts so the image isn't huge */
  .tpp .gallery { margin: 0 auto; }
}
/* === GALLERY PANEL, v4 2026-05-10 ===
   Single swish tea-family-tinted panel via var(--tea-grad). Originally we
   used mix-blend-mode multiply on the product image to dissolve its white
   bleed into the panel, but that also dulled the bright pixels of any
   coloured packaging sitewide, Lee called it out as a "dull gloom" on
   the shop grid. Multiply removed entirely. Product photos keep their
   natural vivid colour; the gradient still frames them like a gallery
   piece via inset highlight + outer drop shadow. */
.tpp .main-img {
  position: relative;
  /* Background = soft top-left highlight overlay + tea-family gradient.
     The gradient comes from the var(--tea-grad) custom property set by
     the tea-fam-* class on the .tpp wrapper (see inc/tea-families.php +
     assets/css/tea-families.css). If for any reason that variable isn't
     set, we fall back to the original warm-cream gradient inline so the
     panel still renders. */
  background:
    radial-gradient(circle at 28% 18%, rgba(255,255,255,.55), transparent 50%),
    var(--tea-grad, linear-gradient(160deg, #F7F1E1 0%, #EDE3CC 55%, #E0D2B2 100%));
  border-radius: var(--r-3xl);
  width: 100%;
  min-height: 380px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 36px;
  margin-bottom: 16px;
  box-sizing: border-box;
  box-shadow:
    /* Inner top-edge highlight, "carved" light catching the rim */
    inset 0 1px 0 rgba(255,255,255,.7),
    /* Inner bottom-edge shadow, depth implication, super subtle */
    inset 0 -28px 36px -28px rgba(46,38,32,.20),
    /* Hairline ring around the panel so it doesn't dissolve into the page bg */
    inset 0 0 0 1px rgba(46,38,32,.06),
    /* Soft offset drop shadow, 3D lift off the page */
    0 1px 2px rgba(46,38,32,.04),
    0 22px 44px -14px rgba(46,38,32,.18);
}
.tpp .main-img img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  /* 2026-05-12: static drop-shadow only. Hover lift removed, Lee doesn't
     want the image moving on mouseover. */
  filter: drop-shadow(0 14px 22px rgba(46,38,32,.16)) drop-shadow(0 2px 4px rgba(46,38,32,.10));
}
.tpp .main-img .badge-img {
  position: absolute; top: 20px; left: 20px;
  background: #3D4A2A;
  color: #EFF5E8;
  font-family: var(--fm); font-size: 10.5px; font-weight: 700;
  padding: 6px 12px; border-radius: var(--r-pill);
  text-transform: uppercase; letter-spacing: .06em;
  box-shadow: 0 2px 8px rgba(58,75,42,.30);
  z-index: 2;
}
/* 2026-05-12: thumbs row switched from rigid 6-col grid (which left an empty
   slot when a product had <6 images) to a centered flex layout. Each thumb
   keeps a fixed share of the 6-column width so the spacing matches the original
   visual when there ARE 6 thumbs, but with 5 (or fewer) thumbs the row centers
   under the main hero image instead of hugging the left edge. */
.tpp .thumbs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}
.tpp .thumbs .thumb {
  flex: 0 0 calc((100% - 5 * 8px) / 6);
  max-width: 140px;
  min-width: 56px;
}
/* === THUMBNAIL, v3 2026-05-10 ===
   The purple panel around thumbs (matching the old purple main panel) became
   pointless once the main panel went cream. Use the same warm-cream tone as
   the main panel so the thumbs read as part of the same gallery system, just
   smaller. mix-blend-mode multiply on the thumb img matches the main image
   treatment exactly. */
.tpp .thumb {
  position: relative;
  width: 100%;
  height: 72px;
  min-width: 0;
  border-radius: 10px;
  /* Inherits the same tea-family gradient as the main panel via the
     .tpp wrapper class. Falls back to warm-cream if no family set. */
  background: var(--tea-grad, linear-gradient(160deg, #F7F1E1 0%, #EDE3CC 100%));
  border: 0;
  cursor: pointer;
  padding: 6px;
  overflow: hidden;
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
  display: block;
  box-sizing: border-box;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    inset 0 0 0 1px rgba(46,38,32,.06),
    0 1px 2px rgba(46,38,32,.04);
}
.tpp .thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* No multiply, images stay vivid. Gradient still shows around the
     padded edges of the contained image. */
}
.tpp .thumb:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    inset 0 0 0 1px rgba(46,38,32,.10),
    0 10px 18px -6px rgba(46,38,32,.20);
}
/* Active state: tea-brown ring (not purple). Reads as deliberate selection. */
.tpp .thumb.on {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    inset 0 0 0 1px rgba(46,38,32,.10),
    0 10px 18px -6px rgba(46,38,32,.25);
}
/* .thumb-cap rule removed, captions stripped from markup 2026-05-10 */

/* Buybox */
.tpp .buybox { display: flex; flex-direction: column; gap: 0; }
/* 2026-05-12 v3 (experiment): H1 moved ABOVE the breadcrumb. The
   buybox column no longer has H1 inside it, so the trust-card top now
   aligns with the gallery image top naturally. Negative-margin hack
   removed, no longer needed. */
.tpp .product-title--above-crumbs {
  margin: 0 0 14px;
  letter-spacing: -.028em;
  line-height: 1.0;
}
@media (max-width: 720px) {
  .tpp .product-title--above-crumbs { font-size: 32px; }
}
.tpp .brand-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; background: var(--forest); color: #eff7f6; border-radius: var(--r-pill); font-family: var(--fm); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; align-self: flex-start; margin-bottom: 14px; }
.tpp .brand-pill .bav { width: 22px; height: 22px; border-radius: 50%; background: var(--acc); color: var(--forest); display: inline-flex; align-items: center; justify-content: center; font-family: var(--fd); font-style: italic; font-size: 13px; }
.tpp .brand-pill .arr { display: inline-flex; opacity: .6; }
.tpp .product-title { font-family: var(--fb); font-size: 46px; font-weight: 800; letter-spacing: -.028em; line-height: 1.0; margin: 0 0 8px; color: var(--ink); }
.tpp .product-title em { font-family: var(--fd); font-style: italic; font-weight: 400; color: var(--slate); }
.tpp .product-sub { font-family: var(--fm); font-size: 11.5px; color: var(--slate); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 16px; }
.tpp .rating-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.tpp .stars { display: inline-flex; gap: 2px; color: var(--acc); }
.tpp .stars svg { width: 16px; height: 16px; fill: currentColor; }
.tpp .review-ct { font-size: 13px; color: var(--slate); font-weight: 500; }
.tpp .review-ct a { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--acc); text-underline-offset: 3px; }
.tpp .curator-score { display: inline-flex; align-items: center; gap: 8px; background: #E8EEF8; padding: 5px 10px 5px 5px; border-radius: var(--r-pill); font-size: 12px; font-weight: 700; color: var(--ink); }
.tpp .curator-score .av { width: 22px; height: 22px; border-radius: 50%; background: #1A2A52; color: #C7D3F0; display: inline-flex; align-items: center; justify-content: center; font-family: var(--fd); font-style: italic; font-size: 13px; }
.tpp .curator-score em { font-family: var(--fd); font-style: italic; font-weight: 400; color: var(--slate); }

/* Attribute pills */
.tpp .attr-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.tpp .attr { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 8px; border-radius: var(--r-pill); font-family: var(--fm); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; border: 1.5px solid var(--hair); background: #fff; color: var(--ink); }
.tpp .attr .pip { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.tpp .attr-caff-full .pip { background: #1A1410; }
.tpp .attr-cups { background: #042220; color: var(--acc); border-color: #042220; }
.tpp .attr-origin { background: var(--indigo); color: #fff; border-color: var(--indigo); }
.tpp .attr-format { background: #F4E5D0; color: #5C3A1A; border-color: #E8C090; }

/* Per-cup hero card, tea-brown with subtle warm-gradient instead of pure black */
.tpp .pcp-hero {
  background: linear-gradient(135deg, var(--tea-brown) 0%, var(--tea-brown-2) 100%);
  border-radius: var(--r-2xl); padding: 18px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-bottom: 16px;
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 10px 28px -10px rgba(46,38,32,.4);
}
.tpp .pcp-hero .left { display: flex; flex-direction: column; gap: 4px; }
.tpp .pcp-hero .lab { font-family: var(--fm); font-size: 10.5px; text-transform: uppercase; letter-spacing: .10em; color: rgba(239,247,246,.5); font-weight: 600; }
.tpp .pcp-hero .val { font-family: var(--fb); font-weight: 800; font-size: 38px; letter-spacing: -.025em; color: var(--acc); line-height: 1; }
/* £ inline at the same baseline as the digits (was superscript and stacked above the 0). 2026-05-12. */
.tpp .pcp-hero .val sup { font-size: 0.62em; font-weight: 700; vertical-align: baseline; position: relative; top: -0.05em; margin-right: 2px; }
.tpp .pcp-hero .val sub { font-size: 16px; font-weight: 500; color: rgba(255,179,71,.7); vertical-align: baseline; margin-left: 2px; }
/* Same fix for the ov-stat-price hero pill */
.tpp .ov-stat-price .ov-val sup { font-size: 0.6em; font-weight: 700; vertical-align: baseline; position: relative; top: -0.05em; margin-right: 2px; }
/* 2026-05-12 (blue palette): gallery panel + thumbs use pale blue gradient to match the right-column tiles. */
/* 2026-05-21 Lee: green hero gradient replaced with white per redesign — tea-type pip carries the colour identity now */
.tpp .main-img { background: #ffffff !important; }
.tpp .thumb { background: #FFFDF8 !important; }
/* .tpp .thumb.on border-color rule removed 2026-05-13, base .thumb has border:0 so override was a no-op. */
.tpp .pcp-hero .right { text-align: right; }
.tpp .pcp-hero .total-val { font-family: var(--fb); font-weight: 700; font-size: 22px; letter-spacing: -.015em; color: #eff7f6; line-height: 1; }
.tpp .pcp-hero .cups-note { font-family: var(--fm); font-size: 11px; color: rgba(239,247,246,.55); font-weight: 500; margin-top: 4px; }

/* Flavour profile */
.tpp .flavour-section { margin-bottom: 16px; background: #fff; border-radius: var(--r-xl); padding: 16px 18px; border: 1.5px solid var(--hair-2); }
.tpp .flavour-section h4 { font-family: var(--fm); font-size: 10.5px; text-transform: uppercase; letter-spacing: .10em; color: var(--slate); font-weight: 700; margin: 0 0 12px; display: flex; justify-content: space-between; align-items: center; }
.tpp .flavour-section h4 .wiki-link { color: var(--ink); text-decoration: underline; text-decoration-color: var(--acc); text-underline-offset: 3px; font-size: 10.5px; }
.tpp .flavour-bars { display: flex; flex-direction: column; gap: 8px; }
.tpp .fbar { display: grid; grid-template-columns: 90px 1fr 32px; gap: 8px; align-items: center; }
.tpp .fbar .nm { font-size: 12px; font-weight: 600; color: var(--ink); }
.tpp .fbar .rail { height: 6px; border-radius: 6px; background: var(--paper-2); overflow: hidden; }
.tpp .fbar .fill { height: 100%; border-radius: 6px; background: #042220; transition: width 1.2s var(--ease); }
.tpp .fbar .v { font-family: var(--fm); font-size: 11px; font-weight: 700; color: var(--mist); text-align: right; }

/* Brew quick card */
.tpp .brew-card { background: linear-gradient(135deg,#F4EFE2,#EDE5D2); border-radius: var(--r-xl); padding: 14px 18px; margin-bottom: 16px; display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; border: 1.5px solid rgba(14,15,18,.08); }
.tpp .brew-stat { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.tpp .brew-stat .ic { width: 32px; height: 32px; border-radius: 50%; background: #fff; display: inline-flex; align-items: center; justify-content: center; color: var(--ink); }
.tpp .brew-stat .ic svg { width: 16px; height: 16px; }
.tpp .brew-stat .val { font-family: var(--fb); font-weight: 800; font-size: 16px; color: var(--ink); letter-spacing: -.010em; }
.tpp .brew-stat .lbl { font-family: var(--fm); font-size: 10px; color: var(--slate); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.tpp .brew-card-link { font-family: var(--fm); font-size: 11px; font-weight: 600; color: var(--slate); display: flex; align-items: center; gap: 6px; margin-top: 8px; grid-column: 1/-1; text-transform: uppercase; letter-spacing: .06em; }
.tpp .brew-card-link:hover { color: var(--ink); }
.tpp .brew-card-link svg { width: 10px; height: 10px; }

/* === ADD-TO-CART ROW, high-prominence primary action === */
.tpp .buy-row { display: flex; gap: 10px; align-items: stretch; margin-bottom: 10px; }
.tpp .qty-sel { display: inline-flex; align-items: center; background: #fff; border: 1.5px solid var(--hair); border-radius: 14px; overflow: hidden; }
.tpp .qty-sel button { width: 40px; height: 58px; background: transparent; border: 0; cursor: pointer; font-size: 20px; font-weight: 700; color: var(--ink); }
.tpp .qty-sel button:hover { background: var(--paper-2); }
.tpp .qty-sel .num { width: 40px; text-align: center; font-family: var(--fb); font-weight: 800; font-size: 17px; color: var(--ink); }

/* PRIMARY: Add to basket, vibrant amber→terracotta gradient, lifted card */
.tpp .add-btn {
  flex: 1;
  height: 58px;
  background: var(--buy-grad);
  color: #2A1F18;
  border: 0;
  border-radius: 14px;
  font-family: var(--fb);
  font-weight: 800;
  font-size: 15.5px;
  letter-spacing: -.005em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  transition: transform .15s var(--ease), box-shadow .2s var(--ease), background .2s ease;
  box-shadow:
    0 1px 0 rgba(255,255,255,.5) inset,
    0 2px 4px rgba(216,108,66,.25),
    0 12px 28px -8px rgba(216,108,66,.55);
  position: relative;
  overflow: hidden;
  text-decoration: none;
}
.tpp .add-btn::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.18), transparent 60%);
  pointer-events: none;
}
.tpp .add-btn:hover {
  transform: translateY(-2px);
  background: var(--buy-grad-hover);
  box-shadow:
    0 1px 0 rgba(255,255,255,.5) inset,
    0 4px 6px rgba(168,66,31,.3),
    0 18px 36px -10px rgba(168,66,31,.65);
}
.tpp .add-btn svg { width: 18px; height: 18px; position: relative; z-index: 1; }
.tpp .add-btn span { position: relative; z-index: 1; }
.tpp .add-btn .price-inline {
  background: rgba(46,38,32,.18);
  color: #2A1F18;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  font-size: 13.5px;
  font-weight: 800;
}

/* Brew-line, compact one-row replacement for the old 4-stat brew-card.
   Same trust signals (95°C / 3 min / 1 temple/cup / milk optional) in
   ~32px of vertical space instead of ~140px. Deep-dive lives in tabs. */
.tpp .brew-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; background: linear-gradient(135deg, #F7F1E1 0%, #EFE5CB 100%); border: 1px solid rgba(46,38,32,.10); border-radius: var(--r-md); margin: 0 0 14px; font-size: 13px; color: var(--ink); text-decoration: none; transition: border-color .14s ease, transform .14s ease; }
.tpp .brew-line:hover { border-color: var(--tea-brown); transform: translateY(-1px); }
.tpp .brew-line .bl-stats { font-weight: 500; }
.tpp .brew-line .bl-stats strong { font-weight: 800; color: var(--tea-brown); }
.tpp .brew-line .bl-link { font-family: var(--fm); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--slate); display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; }
.tpp .brew-line .bl-link svg { width: 11px; height: 11px; }

/* SECONDARY: Quick Buy (Quick Checkout dropped 2026-05-10).
   Full-width button now that it's solo, same forest-outline style. */
.tpp .buy-secondary { display: flex; margin: 0 0 14px; }
.tpp .qb-btn.qb-full { flex: 1; }
.tpp .qb-btn, .tpp .qc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 14px; border-radius: 12px;
  font-family: var(--fb); font-weight: 700; font-size: 13px;
  letter-spacing: -.003em;
  border: 1.5px solid;
  cursor: pointer;
  transition: transform .14s var(--ease), background .14s ease, color .14s ease;
  text-decoration: none;
  position: relative;
}
.tpp .qb-btn svg, .tpp .qc-btn svg { width: 16px; height: 16px; }
.tpp .qb-btn {
  background: #fff;
  color: var(--forest);
  border-color: var(--forest);
}
.tpp .qb-btn:hover { background: var(--forest); color: var(--acc); transform: translateY(-1px); }
.tpp .qc-btn {
  background: #fff;
  color: var(--petrol);
  border-color: var(--petrol);
}
.tpp .qc-btn:hover { background: var(--petrol); color: #eff7f6; transform: translateY(-1px); }
.tpp .qb-btn .qb-sub, .tpp .qc-btn .qb-sub {
  font-family: var(--fm); font-size: 9.5px; font-weight: 600;
  opacity: .7; letter-spacing: .04em; text-transform: uppercase;
}

/* Subscribe & Save */
.tpp .subs-toggle { background: linear-gradient(135deg,#E4D9F5,#D0C0F0); border-radius: var(--r-xl); padding: 14px 16px; margin-bottom: 12px; cursor: pointer; border: 1.5px solid transparent; transition: all .14s var(--ease); display: flex; align-items: flex-start; gap: 12px; }
.tpp .subs-toggle:hover { border-color: var(--indigo); }
.tpp .subs-toggle.on { border-color: var(--indigo); background: linear-gradient(135deg,#D8C8F8,#C0A8F0); }
.tpp .subs-toggle .scheck { width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(124,58,237,.35); background: #fff; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; transition: all .14s; }
.tpp .subs-toggle.on .scheck { background: var(--indigo); border-color: var(--indigo); }
.tpp .subs-toggle .scheck svg { width: 10px; height: 10px; color: #fff; opacity: 0; }
.tpp .subs-toggle.on .scheck svg { opacity: 1; }
.tpp .subs-toggle .body { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.tpp .subs-toggle .body .top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.tpp .subs-toggle .body .ttl { font-weight: 700; font-size: 13.5px; color: #4C1D95; }
.tpp .subs-toggle .body .save { font-family: var(--fm); font-size: 11px; font-weight: 700; color: #6D28D9; background: rgba(124,58,237,.15); padding: 2px 8px; border-radius: var(--r-pill); }
.tpp .subs-toggle .body .desc { font-size: 12px; color: #5B21B6; line-height: 1.4; }

/* Stock notice + loyalty */
.tpp .stock-notice { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: var(--r-md); font-size: 13px; font-weight: 600; margin-bottom: 12px; }
.tpp .stock-notice.good { background: #E6F7EC; color: #1F8847; }
.tpp .stock-notice .pip { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.tpp .loyalty-row { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: var(--r-md); background: var(--paper-2); margin-bottom: 12px; font-size: 13px; font-weight: 500; color: var(--slate); }
.tpp .loyalty-row .pts { font-family: var(--fb); font-weight: 800; font-size: 14px; color: var(--acc); background: #042220; border-radius: var(--r-pill); padding: 4px 10px 4px 6px; display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; }
.tpp .loyalty-row .pts svg { width: 12px; height: 12px; }
.tpp .loyalty-row a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--acc); text-underline-offset: 3px; font-weight: 600; }

/* Delivery pill-strip, compact one-line replacement for the old 4-tile
   delivery grid. Same four reassurance signals (free over £35, same-day,
   letterbox-slim, 30-day returns) at a fraction of the vertical cost. The
   full copy moved to the footer Customer column + /delivery/ page. */
.tpp .dlv-pills { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tpp .dlv-pills li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: var(--paper-2); border: 1px solid var(--hair); border-radius: var(--r-pill); font-size: 11.5px; font-weight: 600; color: var(--ink); letter-spacing: -.005em; }
.tpp .dlv-pills svg { width: 13px; height: 13px; color: var(--tea-brown); flex-shrink: 0; }
/* Legacy .delivery-row + .drow rules kept above for any older markup that hasn't
   been refactored yet, harmless when the new pill-strip replaces them. */
.tpp .delivery-row { display: none; }

/* Wiki cross-link, petrol-teal (cooler tone, distinct from the warm-brown pricing card) */
.tpp .wiki-cross {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  background: linear-gradient(135deg, var(--petrol) 0%, #122B36 100%);
  color: #eff7f6; border-radius: var(--r-xl);
  margin-bottom: 8px;
  transition: transform .14s var(--ease);
  box-shadow: 0 8px 22px -8px rgba(27,58,71,.4);
}
.tpp .wiki-cross:hover { transform: translateX(2px); }
.tpp .wiki-cross .wic { width: 36px; height: 36px; border-radius: 50%; background: var(--acc); color: var(--petrol); display: inline-flex; align-items: center; justify-content: center; font-family: var(--fd); font-style: italic; font-size: 18px; flex-shrink: 0; }
.tpp .wiki-cross .wb { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.tpp .wiki-cross .wt { font-size: 13.5px; font-weight: 700; line-height: 1.3; }
.tpp .wiki-cross .ws { font-family: var(--fm); font-size: 10.5px; color: rgba(239,247,246,.55); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.tpp .wiki-cross .warr svg { width: 14px; height: 14px; }
/* 2026-05-12: Brand & Sustainability tab CTA wrap. Caps width so the
   wiki-cross card reads as a single feature, not a full-width banner.
   Also handles the optional secondary 'ghost' variant for wiki deep-dives. */
.tpp .bs-brand-cta-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 28px; max-width: 980px; justify-items: stretch; align-items: stretch; } @media (max-width: 720px) { .tpp .bs-brand-cta-wrap { grid-template-columns: 1fr; max-width: 480px; } } .tpp .bs-brand-cta-wrap > .wiki-cross { width: 100%; }
.tpp .wiki-cross.wiki-cross--ghost {
  background: #FFFFFF;
  color: var(--ink);
  border: 1px solid rgba(46,38,32,.10);
  box-shadow: 0 3px 12px -4px rgba(46,38,32,.12);
}
.tpp .wiki-cross.wiki-cross--ghost .wic { background: #FFF4DE; color: var(--ink); }
.tpp .wiki-cross.wiki-cross--ghost .ws { color: rgba(46,38,32,.55); }

/* ===== TABS ===== */
/* === TABS, physical folder-tab look (rebuilt 2026-05-11) ===
   Lee 2026-05-11: tabs should READ as physical tabs, texture, depth,
   shadow. Active tab "connects" to the panel below. Inactive tabs sit
   slightly lower with a cream gradient so they read as paper-tabbed. */
.tpp .tabs-section {
  background: transparent;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  margin-top: 28px;
  margin-bottom: 28px;
}
.tpp .tab-nav {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin: 0;
  padding: 0 8px;
  position: relative;
  z-index: 2;
  border-bottom: 0;
}
/* 2026-05-12 (blue palette v2): tabs in slate-blue with stronger contrast
   so they read as deliberate nav, not background trim. */
.tpp .tab-btn {
  position: relative;
  padding: 14px 22px 14px;
  background: linear-gradient(180deg, #E5EEDA 0%, #D8E4C5 100%);
  border: 1px solid rgba(94,112,69,.22);
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  font-family: var(--fb);
  font-weight: 700;
  font-size: 13.5px;
  color: #3D4A2A;
  cursor: pointer;
  letter-spacing: -.005em;
  transition: background .14s var(--ease), color .14s var(--ease), transform .14s var(--ease);
  margin-bottom: -1px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -10px 14px -10px rgba(30,42,82,.10),
    0 -1px 0 rgba(30,42,82,.06);
  transform: translateY(2px);
}
.tpp .tab-btn:hover {
  color: #2A331C;
  background: linear-gradient(180deg, #D8E4C5 0%, #C4D4A8 100%);
  transform: translateY(1px);
}
.tpp .tab-btn.on {
  background: #fff;
  color: var(--ink);
  font-weight: 800;
  z-index: 3;
  transform: translateY(0);
  border-color: var(--hair);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 -6px 16px -6px rgba(14,15,18,.10),
    -4px 0 8px -6px rgba(14,15,18,.08),
    4px 0 8px -6px rgba(14,15,18,.08);
}
/* Active tab's bottom edge MERGES into the content panel, hides the panel's
   top border directly under this tab so the two read as one carved unit. */
.tpp .tab-btn.on::after {
  content: '';
  position: absolute;
  left: -1px; right: -1px;
  bottom: -2px;
  height: 3px;
  background: #fff;
}
/* Content panel: rounded ONLY at the bottom corners (real folder-tab
   physics, the tabs themselves provide the rounded top shape, the panel
   has a flat top edge that the tabs stick out of). Fix 2026-05-11 after
   Lee called out the curve-into-square misalignment between the active
   tab's bottom-left edge and the panel's top-left rounded corner. */
.tpp .tabs-section .tab-pane-wrap, .tpp .tab-pane-wrap {
  position: relative;
  z-index: 1;
  background: #fff;
  border: 1px solid var(--hair);
  /* 2026-05-12 v3: top corners match tab radius (14px) so the curves blend; bottom keeps the soft 40px sweep. */
  border-radius: 14px 14px var(--r-3xl) var(--r-3xl) !important;
  padding: 36px 44px;
  box-shadow:
    0 1px 2px rgba(14,15,18,.04),
    0 14px 36px -10px rgba(14,15,18,.10);
}
/* 2026-05-12: indent tab-nav so the first tab doesn't visually clash with the pane's top-left rounded corner. */
.tpp .tab-nav { padding-left: 18px; padding-right: 18px; }
.tpp .tab-pane { display: none; }
.tpp .tab-pane.on { display: block; }
.tpp .tab-pane h3 { font-family: var(--fb); font-size: 22px; font-weight: 800; letter-spacing: -.014em; margin: 32px 0 12px; color: var(--ink); }
.tpp .tab-pane h3:first-child { margin-top: 0; }
.tpp .tab-pane h3 em { font-family: var(--fd); font-style: italic; font-weight: 400; }
/* Paragraphs USE the full column width now (was capped at 60ch which left
   the right half of every panel empty, Lee called this out as "half
   finished"). 72ch on plain paragraphs is comfortable reading; the 2-col
   layouts handle their own widths. */
.tpp .tab-pane p { font-size: 15px; line-height: 1.7; color: var(--ink); margin: 0 0 14px; max-width: 72ch; }
.tpp .tab-pane p.muted { color: var(--slate); }
.tpp .tab-pane ul { font-size: 15px; line-height: 1.7; color: var(--ink); margin: 0 0 14px; padding-left: 22px; max-width: 72ch; }
.tpp .tab-pane ul li { margin-bottom: 6px; }
.tpp .tab-pane strong { font-weight: 700; }
@media (max-width: 760px) {
  /* Compound selector + !important: the base rule (.tpp .tabs-section .tab-pane-wrap)
     is more specific, so a plain .tpp .tab-pane-wrap override was ignored and the
     desktop 44px side padding stayed, crushing tab content to ~148px on phones. */
  .tpp .tabs-section .tab-pane-wrap, .tpp .tab-pane-wrap { padding: 22px 14px !important; border-radius: 14px 14px var(--r-xl) var(--r-xl); }
  .tpp .tab-btn { padding: 12px 16px; font-size: 12.5px; }
}

/* Curator says callout */
/* 2026-05-16: curator-says split to match the V2 redesign images.
   BASE (.curator-says) = dark navy panel, white italic quote, cyan kicker
   (Brand & Sustainability tab, design image 5).
   .curator-says--lead = light panel, dark text, cyan glyph
   (Overview tab lead quote, design image 2).
   Cosmetic only: flex/spacing/markup unchanged; locked balance rules safe. */
.tpp .curator-says { display: flex; gap: 14px; background: linear-gradient(155deg,#0e6868 0%,#0a4444 55%,#042220 100%); border: 1px solid rgba(255,255,255,.08); border-radius: var(--r-xl); padding: 24px 30px 22px; margin-bottom: 24px; position: relative; overflow: hidden; box-shadow: 0 18px 40px -22px rgba(15,23,42,.55); }
.tpp .curator-says::before { content: ""; position: absolute; right: -90px; top: -90px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(94,234,212,.18), transparent 70%); pointer-events: none; }
.tpp .curator-says::after { content: none; }
.tpp .curator-says .cav { position: relative; width: 38px; height: 38px; border-radius: 50%; background: rgba(94,234,212,.16); color: #5eead4; display: inline-flex; align-items: center; justify-content: center; font-family: var(--fd); font-style: italic; font-size: 20px; flex-shrink: 0; }
.tpp .curator-says .cb { flex: 1; position: relative; }
.tpp .curator-says .cl { font-family: var(--fm); font-size: 10.5px; text-transform: uppercase; letter-spacing: .14em; color: #5eead4; font-weight: 700; }
.tpp .curator-says .cq { font-family: var(--fd); font-style: italic; font-weight: 400; font-size: 21px; line-height: 1.5; color: #FFFFFF; margin: 6px 0 8px; max-width: none; }
.tpp .curator-says .cn { font-family: var(--fm); font-size: 11px; color: rgba(255,255,255,.6); font-weight: 600; }
.tpp .curator-says .cn b { color: #FFFFFF; font-weight: 700; }
/* Overview lead quote — light treatment (design image 2) */
.tpp .curator-says--lead { background: linear-gradient(135deg, #f5f8fb 0%, #e6eef6 100%); border: 1px solid rgba(4,34,32,.10); border-left: 4px solid #5eead4; box-shadow: 0 1px 0 rgba(31,44,71,.03), 0 16px 32px -20px rgba(31,44,71,.18); }
.tpp .curator-says--lead::before { background: radial-gradient(circle, rgba(94,234,212,.14), transparent 70%); }
.tpp .curator-says--lead::after { content: "\201C"; position: absolute; left: 16px; top: -14px; font-family: var(--fd); font-style: italic; font-size: 110px; color: #5eead4; opacity: .30; line-height: 1; font-weight: 400; pointer-events: none; }
.tpp .curator-says--lead .cav { background: linear-gradient(155deg,#0e6868 0%,#0a4444 55%,#042220 100%); color: #5eead4; box-shadow: 0 4px 12px -4px rgba(31,44,71,.4); }
.tpp .curator-says--lead .cl { color: #0fc4a8; letter-spacing: .08em; }
.tpp .curator-says--lead .cq { color: #042220; }
.tpp .curator-says--lead .cn { color: #5C6270; }
.tpp .curator-says--lead .cn b { color: #042220; }

/* 2026-05-12 v3: lead-variant overrides removed, standard .curator-says now used everywhere. */

/* 2026-05-12: FAQ tab intro, proper heading + polished lead paragraph,
   replacing the bare <p> with em-dash. */
.tpp .fq-intro { margin: 0 0 22px; padding: 0 0 16px; border-bottom: 1px solid var(--hair); }
.tpp .fq-intro .fq-title { font-family: var(--fb); font-size: 26px; font-weight: 800; color: var(--ink); margin: 0 0 8px; letter-spacing: -.015em; line-height: 1.2; }
.tpp .fq-intro .fq-title em { font-family: var(--fd); font-style: italic; font-weight: 400; color: var(--ink); }
.tpp .fq-intro .fq-sub { font-size: 14.5px; line-height: 1.55; color: var(--slate); margin: 0 0 10px; max-width: 70ch; }
.tpp .fq-intro .fq-link { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.tpp .fq-intro .fq-link:hover { color: #8B5A2B; }
.tpp .fq-intro .fq-meta { display: inline-flex; align-items: center; gap: 8px; font-family: var(--fm); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--slate); }
.tpp .fq-intro .fq-meta-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--acc); }


/* Recipe cards */
.tpp .recipe-card { background: var(--paper-2); border-radius: var(--r-xl); padding: 20px 22px; margin: 0 0 24px; }
.tpp .recipe-card h4 { font-family: var(--fb); font-size: 18px; font-weight: 700; margin: 0 0 12px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tpp .recipe-card h4 .tag { font-family: var(--fm); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 4px 9px; border-radius: var(--r-pill); }
.tpp .recipe-card .ingr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; font-size: 14px; line-height: 1.6; color: var(--ink); margin: 0 0 16px; padding: 14px 0; border-top: 1px dashed var(--hair); border-bottom: 1px dashed var(--hair); }
.tpp .recipe-card .steps { font-size: 14.5px; line-height: 1.6; padding-left: 22px; margin: 0 0 16px; max-width: 60ch; }
.tpp .recipe-card .steps li { margin-bottom: 8px; }

/* === Structured recipe v2 (2026-05-12), proper ingredients/steps 2-col === */
/* Override legacy .r-card .r-body 280px+1fr grid that squashed the new meta-pills. */
.tpp .recipe-card .r-body { display: block !important; grid-template-columns: none !important; padding: 18px 24px 0 !important; }
.tpp .tpp-recipes-intro { max-width: none !important; }
.tpp .recipe-card .r-detail-v2 { padding: 16px 24px 20px; }
.tpp .recipe-card .r-head-v2 { cursor: pointer; list-style: none; padding: 0; margin: 0; }
.tpp .recipe-card .r-head-v2::-webkit-details-marker { display: none; }
.tpp .recipe-card .r-title-text { font-family: var(--fb); font-weight: 800; font-size: 18px; color: var(--ink); }
.tpp .recipe-card .r-meta-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 18px; }
.tpp .recipe-card .r-meta-pills .r-mb { display: inline-flex; align-items: center; gap: 5px; background: #fff; padding: 5px 11px; border-radius: var(--r-pill); font-family: var(--fm); font-size: 11px; font-weight: 700; color: var(--ink); border: 1px solid var(--hair); letter-spacing: .02em; }
.tpp .recipe-card .r-meta-pills .r-mb--auto { background: #FFF8EC; border-color: rgba(216,170,80,.30); color: #4A3517; }
/* 2026-05-12 v2: r-body-grid restructured, labels float up to row 1 so You'll need
   and Method sit aligned; the white ingredients box drops to row 2 starting at the same
   y as the first method step. Uses display:contents to flatten the .ingr-col / .steps-col
   wrappers into the parent grid. */
.tpp .recipe-card .r-body-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  grid-template-rows: auto 1fr;
  column-gap: 28px;
  row-gap: 10px;
  align-items: start;
  margin: 0 0 16px;
}
@media (max-width: 760px) {
  .tpp .recipe-card .r-body-grid { grid-template-columns: 1fr; grid-template-rows: auto auto auto auto; }
}
.tpp .recipe-card .r-body-grid .ingr-col, .tpp .recipe-card .r-body-grid .steps-col { display: contents; }
.tpp .recipe-card .r-body-grid > .ingr-col > .ingr-label { grid-row: 1; grid-column: 1; }
.tpp .recipe-card .r-body-grid > .steps-col > .ingr-label { grid-row: 1; grid-column: 2; }
.tpp .recipe-card .r-body-grid > .ingr-col > .ingr-list { grid-row: 2; grid-column: 1; }
.tpp .recipe-card .r-body-grid > .steps-col > .steps, .tpp .recipe-card .r-body-grid > .steps-col > ol { grid-row: 2; grid-column: 2; }
/* Strip the legacy white-box style from .ingr-col itself, apply it to the .ingr-list instead. */
.tpp .recipe-card .ingr-col { background: #C5D6F0 !important; padding: 0 !important; border: 0 !important; }
.tpp .recipe-card .ingr-col .ingr-label, .tpp .recipe-card .steps-col .ingr-label {
  font-family: var(--fm); font-size: 10.5px; font-weight: 700; color: var(--slate);
  text-transform: uppercase; letter-spacing: .08em; display: block;
  margin: 0; padding: 0;
}
.tpp .recipe-card .ingr-col .ingr-list {
  list-style: none; margin: 0;
  background: #fff; border-radius: 14px; padding: 16px 18px; border: 1px solid var(--hair-2);
  font-size: 13.5px; line-height: 1.65; color: var(--ink);
  display: flex; flex-direction: column; gap: 8px; max-width: none;
}
.tpp .recipe-card .ingr-col .ingr-list li { display: flex; align-items: flex-start; gap: 10px; margin: 0; }
.tpp .recipe-card .ingr-col .ingr-list .ingr-emoji { flex-shrink: 0; width: 22px; text-align: center; }
.tpp .recipe-card .ingr-col .ingr-list .ingr-text { flex: 1; }
/* Pull the first step number up to align with the top of the ingredients box. */
.tpp .recipe-card .steps-col ol.steps > li:first-child { padding-top: 14px; }
.tpp .recipe-card .steps-col ol.steps > li:first-child::before { top: 18px; }
.tpp .recipe-card .steps-col ol.steps { list-style: none; padding: 0; margin: 0; counter-reset: step-counter; max-width: none; }
.tpp .recipe-card .steps-col ol.steps li { counter-increment: step-counter; padding: 6px 0 6px 42px; position: relative; font-size: 14px; line-height: 1.6; color: var(--ink); margin: 0; }
.tpp .recipe-card .steps-col ol.steps li + li { margin-top: 6px; }
.tpp .recipe-card .steps-col ol.steps li::before { content: counter(step-counter); position: absolute; left: 0; top: 4px; width: 28px; height: 28px; background: #1A2A52; color: #C7D3F0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: var(--fb); font-weight: 700; font-size: 13px; }
.tpp .recipe-card .steps-col ol.steps li strong { font-weight: 800; color: var(--ink); }
/* Recipe feedback widget, compact horizontal row inside .recipe-bottom (2026-05-12 v2) */
.tpp .recipe-card .recipe-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 20px; background: linear-gradient(180deg, #FFFCF5 0%, #F7EFD6 100%); border-top: 1px solid var(--hair); border-bottom-left-radius: var(--r-xl); border-bottom-right-radius: var(--r-xl); }
.tpp .recipe-card .recipe-bottom .recipe-share { padding: 0; border-top: 0; flex: 0 0 auto; order: 1; }
.tpp .recipe-card .recipe-bottom .r-feedback--split { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-end; gap: 14px; flex: 1 1 auto; order: 2; }
.tpp .recipe-card .recipe-bottom .r-feedback--community { flex-direction: column; align-items: flex-end; gap: 8px; }
.tpp .recipe-card .recipe-bottom .r-feedback--community .r-fb-header { display: flex; flex-direction: column; gap: 1px; text-align: right; }
.tpp .recipe-card .recipe-bottom .r-feedback--community .r-fb-header strong { font-family: var(--fb); font-weight: 800; font-size: 13.5px; color: var(--ink); }
.tpp .recipe-card .recipe-bottom .r-feedback--community .r-fb-header span { font-family: var(--fm); font-size: 11px; color: var(--slate); }
.tpp .recipe-card .recipe-bottom .r-feedback--community .r-fb-actions { display: flex; align-items: flex-start; gap: 16px; }
.tpp .recipe-card .recipe-bottom .r-feedback--community .r-fb-rate-col, .tpp .recipe-card .recipe-bottom .r-feedback--community .r-fb-photo-col { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.tpp .recipe-card .recipe-bottom .r-feedback--community .r-feedback-stars { display: inline-flex; gap: 2px; }
.tpp .recipe-card .recipe-bottom .r-feedback--community .r-feedback-stars { display: inline-flex; gap: 2px; }

/* 2026-05-12 v3: tighter community feedback layout.
   Two stacked rows on the right side: prompt+current-rating, then action tools. */
/* 2026-05-12 v3: recipe-bottom feedback collapsed to a SINGLE horizontal row.
   Prompt becomes a short inline label, current rating compact pill, then the
   star + photo tools. No more 4-line stack. */
.tpp .recipe-card .recipe-bottom .r-feedback--v3 {
  display: inline-flex; flex-direction: row; align-items: center; gap: 14px;
  flex: 0 1 auto; min-width: 0; flex-wrap: wrap; justify-content: flex-end;
}
.tpp .recipe-card .recipe-bottom .r-feedback--v3 .r-fb-inline-prompt {
  font-family: var(--fb); font-weight: 800; font-size: 13.5px; color: var(--ink);
  cursor: help;
}
.tpp .recipe-card .recipe-bottom .r-feedback--v3 .r-fb-current {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--fb); font-weight: 700; font-size: 11.5px; color: var(--ink);
  background: #FFF8EC; padding: 3px 9px; border-radius: 999px;
  border: 1px solid rgba(216,170,80,.30);
  flex-shrink: 0;
}
.tpp .recipe-card .recipe-bottom .r-feedback--v3 .r-fb-current svg { width: 12px; height: 12px; color: var(--acc); }
.tpp .recipe-card .recipe-bottom .r-feedback--v3 .r-fb-current-count { color: var(--slate); font-weight: 500; }
.tpp .recipe-card .recipe-bottom .r-feedback--v3 .r-fb-current--empty {
  background: #fff; border-color: rgba(14,15,18,.18); color: var(--ink); font-weight: 700;
}
.tpp .recipe-card .recipe-bottom .r-feedback--v3 .r-fb-current--empty svg { color: var(--ink); }
.tpp .recipe-card .recipe-bottom .r-feedback--v3 .r-fb-tools {
  display: flex; align-items: center; gap: 14px;
}
.tpp .recipe-card .recipe-bottom .r-feedback--v3 .r-fb-tool {
  display: inline-flex; align-items: center; gap: 6px;
}
.tpp .recipe-card .recipe-bottom .r-feedback--v3 .r-fb-pts {
  padding: 4px 10px; font-size: 10.5px; font-weight: 800; letter-spacing: .04em;
  cursor: help;
}
.tpp .recipe-card .recipe-bottom .r-feedback--v3 .r-feedback-stars { display: inline-flex; gap: 1px; }
.tpp .recipe-card .recipe-bottom .r-feedback--v3 .r-fb-star svg { width: 17px; height: 17px; }

/* Summary header time pill, slightly tinted so it reads as a time chip, not a rating. */
.tpp .recipe-card .r-card .r-meta .r-mb--time { background: #FFF8EC; border-color: rgba(216,170,80,.30); color: #4A3517; }

@media (max-width: 760px) {
  .tpp .recipe-card .recipe-bottom .r-feedback--v3 { align-items: stretch; width: 100%; }
  .tpp .recipe-card .recipe-bottom .r-feedback--v3 .r-fb-prompt { justify-content: flex-start; }
  .tpp .recipe-card .recipe-bottom .r-feedback--v3 .r-fb-tools { justify-content: space-between; }
}

/* 2026-05-12 v2: both points pills use the SAME deep forest + amber colour
   (the buy-combo Quick-Buy recipe). Same animation delay base + the photo
   pill keeps its 1.3s phase offset so the two bob in a wave rather than sync. */
.tpp .recipe-card .recipe-bottom .r-fb-pts { display: inline-flex; align-items: center; background: #1A2A52; color: #FFFFFF; padding: 4px 10px; border-radius: 999px; font-family: var(--fm); font-size: 11px; font-weight: 800; letter-spacing: .02em; border: 1px solid rgba(199,211,240,.28); animation: tpp-pts-bob 2.6s ease-in-out infinite; }
.tpp .recipe-card .recipe-bottom .r-fb-pts--rate  { animation-delay: 0s; }
.tpp .recipe-card .recipe-bottom .r-fb-pts--photo { animation-delay: 1.3s; }
@keyframes tpp-pts-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .tpp .recipe-card .recipe-bottom .r-fb-pts { animation: none; }
}
@media (max-width: 760px) {
  .tpp .recipe-card .recipe-bottom .r-feedback--split { justify-content: space-between; width: 100%; order: 2; }
  .tpp .recipe-card .recipe-bottom .recipe-share { width: 100%; order: 1; }
}
.tpp .recipe-card .r-feedback--compact { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 0; background: transparent; border-top: 0; flex: 1 1 auto; }
.tpp .recipe-card .r-fb-rate-block { display: inline-flex; align-items: center; gap: 8px; }
.tpp .recipe-card .r-fb-label { font-family: var(--fb); font-size: 12.5px; font-weight: 700; color: var(--ink); }
.tpp .recipe-card .r-feedback-stars { display: inline-flex; gap: 1px; }
.tpp .recipe-card .r-fb-star { background: none; border: 0; padding: 2px; cursor: pointer; color: rgba(14,15,18,.18); transition: color .12s, transform .12s; }
.tpp .recipe-card .r-fb-star:hover { color: var(--acc); transform: scale(1.1); }
.tpp .recipe-card .r-fb-star.r-fb-star--on { color: var(--acc); }
.tpp .recipe-card .r-fb-star svg { width: 18px; height: 18px; display: block; }
.tpp .recipe-card .r-fb-pts { font-family: var(--fm); font-size: 10px; font-weight: 800; color: #1A1410; background: var(--acc); padding: 3px 8px; border-radius: var(--r-pill); text-transform: uppercase; letter-spacing: .04em; }
.tpp .recipe-card .r-fb-pts.r-fb-pts--big { font-size: 10.5px; padding: 3px 9px; }
.tpp .recipe-card .r-photo-btn { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; background: #fff; color: #1A2A52; border: 1.5px solid #1A2A52; border-radius: var(--r-pill); font-family: var(--fb); font-weight: 800; font-size: 12px; cursor: pointer; transition: background .12s, color .12s; }
.tpp .recipe-card .r-photo-btn:hover { background: #1A2A52; color: #FFFFFF; }
.tpp .recipe-card .r-photo-btn:hover svg { stroke: #FFFFFF; }
.tpp .recipe-card .r-photo-btn svg { width: 14px; height: 14px; stroke: #1A2A52; transition: stroke .12s; }
.tpp .recipe-card .r-feedback-aggregate { font-family: var(--fm); font-size: 10.5px; color: var(--slate); margin-left: auto; letter-spacing: .02em; }
.tpp .recipe-card .r-feedback-status { font-family: var(--fm); font-size: 10.5px; font-weight: 700; color: #1F8847; flex: 0 0 100%; }
.tpp .recipe-card .r-feedback-status:empty { display: none; }
.tpp .recipe-card .r-feedback-status.r-feedback-status--err { color: #C03A1F; }
@media (max-width: 720px) {
  .tpp .recipe-card .recipe-bottom { gap: 10px; padding: 12px 18px; }
  .tpp .recipe-card .r-feedback--compact { gap: 10px; }
  .tpp .recipe-card .r-feedback-aggregate { margin-left: 0; }
}

/* 2026-05-12 v7: prod-info-strip is now a marquee carousel, 9 features
   rotating left-to-right with edge fade + hover-to-pause. */
.tpp .prod-info-marquee {
  overflow: hidden;
  margin: 24px 0 8px;
  padding: 18px 0;
  background: linear-gradient(135deg, rgba(14,15,18,.03), rgba(255,179,71,.06));
  border: 1px solid rgba(14,15,18,.08);
  border-radius: 14px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.tpp .prod-info-track {
  display: inline-flex;
  gap: 36px;
  white-space: nowrap;
  align-items: center;
  animation: tpp-pi-scroll 60s linear infinite;
  will-change: transform;
  padding: 0 18px;
}
.tpp .prod-info-marquee:hover .prod-info-track { animation-play-state: paused; }
.tpp .prod-info-marquee .pi-cell {
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 10px;
  flex: 0 0 auto;
}
.tpp .prod-info-marquee .pi-lbl {
  font-family: var(--fm); font-size: 13.5px; font-weight: 700;
  color: var(--slate); text-transform: uppercase; letter-spacing: .06em;
  white-space: nowrap; flex-shrink: 0;
}
.tpp .prod-info-marquee .pi-val {
  font-family: var(--fb); font-size: 17.5px; font-weight: 700;
  color: var(--ink); line-height: 1.3; white-space: nowrap;
}
@keyframes tpp-pi-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .tpp .prod-info-track { animation: none; flex-wrap: wrap; white-space: normal; padding: 0 18px; }
}

/* 2026-05-12 v2: Allergen + safety palette redesigned, clean white tiles, soft warm amber icon chip on each, no status colour coding. */
.tpp .al-tile, .tpp .al-tile.al-ok, .tpp .al-tile.al-warn { background: #fff; border: 1px solid rgba(46,38,32,.08); color: var(--ink); padding: 16px 18px; box-shadow: 0 1px 2px rgba(46,38,32,.03); }
.tpp .al-tile .al-ic, .tpp .al-tile.al-ok .al-ic, .tpp .al-tile.al-warn .al-ic { width: 36px; height: 36px; border-radius: 50%; background: #E5EEDA; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 10px; font-size: 18px; }
.tpp .al-tile .al-h, .tpp .al-tile.al-ok .al-h, .tpp .al-tile.al-warn .al-h { color: var(--ink); font-family: var(--fb); font-weight: 800; font-size: 14.5px; }
.tpp .al-tile .al-p, .tpp .al-tile.al-ok .al-p, .tpp .al-tile.al-warn .al-p { color: var(--slate); font-size: 13px; line-height: 1.5; }
.tpp .safety-card, .tpp .safety-card--ok, .tpp .safety-card--warn { background: #fff; border: 1px solid rgba(46,38,32,.08); box-shadow: 0 1px 2px rgba(46,38,32,.03); }
.tpp .safety-card .sc-ic, .tpp .safety-card--ok .sc-ic, .tpp .safety-card--warn .sc-ic { width: 32px; height: 32px; border-radius: 50%; background: #FFF4DE; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; padding: 0; }
.tpp .safety-card .sc-h, .tpp .safety-card--ok .sc-h, .tpp .safety-card--warn .sc-h { color: var(--ink); }
.tpp .safety-card .sc-b, .tpp .safety-card--ok .sc-b, .tpp .safety-card--warn .sc-b { color: var(--slate); }
/* Pair chips become links */
.tpp .pair-chips .pair-chip.pair-chip--link { text-decoration: none; transition: background .12s, transform .12s; cursor: pointer; }
.tpp .pair-chips .pair-chip.pair-chip--link:hover { background: var(--ink); color: var(--acc); transform: translateY(-1px); }

/* Mashup CTA, sits parallel to share button below the body grid */
.tpp .recipe-card .recipe-buy-mashup { margin: 4px 0 0; }
.tpp .recipe-card .recipe-buy-cta-mashup { display: inline-flex; align-items: center; gap: 8px; background: var(--buy-grad); color: #1A1410; padding: 11px 18px; border-radius: var(--r-pill); font-family: var(--fb); font-weight: 800; font-size: 13.5px; text-decoration: none; }
.tpp .recipe-card .recipe-buy-cta-mashup:hover { background: var(--buy-grad-hover); }
/* 2026-05-12 v3: buybox visual consolidation refined, curator pill full-width, Quick Buy matches Add-to-basket height, loyalty points styled as pill */
.tpp .rating-row--curator-only { display: flex; margin-bottom: 16px; }
.tpp .stock-pill.stock-pill--big { display: inline-flex; align-items: center; gap: 8px; background: #DCF5E3; color: #1F8847; padding: 10px 16px; border-radius: var(--r-pill); font-family: var(--fm); font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; border: 1.5px solid rgba(31,136,71,.3); white-space: nowrap; }
.tpp .stock-pill.stock-pill--big .stock-pip { width: 10px; height: 10px; border-radius: 50%; background: #1F8847; box-shadow: 0 0 0 4px rgba(31,136,71,.18); }
.tpp .curator-score--big {
  display: flex; width: 100%; align-items: center; justify-content: flex-start; gap: 10px;
  background: linear-gradient(180deg, #FFFFFF 0%, #E8EEF8 100%);
  padding: 8px 18px;
  border-radius: var(--r-pill);
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  font-size: 14px; font-weight: 600; color: var(--ink);
  border: 1px solid rgba(46,38,32,.10);
  box-shadow:
    0 1px 0 rgba(255,255,255,.90) inset,
    0 -1px 0 rgba(46,38,32,.04) inset,
    0 3px 12px -4px rgba(46,38,32,.18),
    0 1px 0 rgba(255,255,255,.50);
  white-space: nowrap; min-width: 0;
}
.tpp .curator-score--big .av { width: 26px; height: 26px; border-radius: 50%; background: #FFB347; color: #2A1E12; display: inline-flex; align-items: center; justify-content: center; font-family: var(--fd); font-style: italic; font-size: 14px; flex-shrink: 0; }
.tpp .curator-score--big .curator-score-text { flex: 1; }
.tpp .curator-score--big .curator-score-text strong { font-weight: 800; font-size: 15px; }
.tpp .curator-score--big .curator-score-text em { font-family: var(--fd); font-style: italic; font-weight: 400; color: var(--slate); font-size: 13px; }
.tpp .curator-score--big .curator-stars { display: inline-flex; gap: 2px; color: var(--acc); flex-shrink: 0; }
.tpp .curator-score--big .curator-stars svg { width: 17px; height: 17px; fill: currentColor; transform-origin: center; }
.tpp .curator-score--big .curator-stars { gap: 1px !important; flex-shrink: 0; filter: drop-shadow(0 1px 2px rgba(201,132,42,.45)); }

/* 2026-05-12: sequential star pulse, stars scale up 1→2→3→4→5 in a wave.
   Targets both regular .star and the half-star wrap so both animate. */
.tpp .curator-score--big .curator-stars > svg, .tpp .curator-score--big .curator-stars > .star-half-wrap {
  animation: tpp-star-pulse 3.6s ease-in-out infinite;
}
.tpp .curator-score--big .curator-stars > *:nth-child(1) { animation-delay: 0s;    }
.tpp .curator-score--big .curator-stars > *:nth-child(2) { animation-delay: .12s;  }
.tpp .curator-score--big .curator-stars > *:nth-child(3) { animation-delay: .24s;  }
.tpp .curator-score--big .curator-stars > *:nth-child(4) { animation-delay: .36s;  }
.tpp .curator-score--big .curator-stars > *:nth-child(5) { animation-delay: .48s;  }
@keyframes tpp-star-pulse {
  0%, 86%, 100% { transform: scale(1);    filter: brightness(1); }
  92%           { transform: scale(1.22); filter: brightness(1.18); }
}
@media (prefers-reduced-motion: reduce) {
  .tpp .curator-score--big .curator-stars > svg, .tpp .curator-score--big .curator-stars > .star-half-wrap { animation: none; }
}

/* Metallic teas.co.uk, amber-gold gradient text with slow shimmer. */
/* 2026-05-12 v2: curator-metallic, dark blue metallic, no shimmer animation.
   3D pip effect via inset highlight + drop-shadow on the inline pill. */
.tpp .curator-metallic {
  font-family: inherit;
  font-weight: 800;
  display: inline-block;
  padding: 1px 8px;
  margin: 0 1px;
  border-radius: 6px;
  background: linear-gradient(180deg,
    #2B3F6F 0%,
    #1A2A52 45%,
    #0E1A3A 100%);
  color: #C7D3F0;
  letter-spacing: .01em;
  text-shadow:
    0 1px 0 rgba(255,255,255,.08),
    0 -1px 0 rgba(0,0,0,.30);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(0,0,0,.25),
    0 2px 4px -1px rgba(58,75,42,.45),
    0 1px 0 rgba(255,255,255,.40);
  position: relative;
}
.tpp .curator-metallic::after {
  content: '👑';
  position: absolute;
  top: -10px; left: -10px;
  font-size: 14px;
  line-height: 1;
  transform: rotate(-18deg);
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.25));
  pointer-events: none;
}
/* Dynamic star fill: full, half (left-fill), empty (gray outline) */
.tpp .curator-stars .star.star--full { fill: var(--acc); }
.tpp .curator-stars .star.star--empty { fill: rgba(14,15,18,.18); }
.tpp .curator-stars .star-half-wrap { position: relative; display: inline-block; width: 17px; height: 17px; vertical-align: middle; }
.tpp .curator-stars .star-half-wrap svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.tpp .curator-stars .star.star--half-fill { fill: var(--acc); clip-path: inset(0 50% 0 0); }
/* Make the curator pill label larger and darker for better contrast on the yellow background */
.tpp .curator-score--big .curator-score-text { display: inline-flex; align-items: baseline; gap: 8px; flex: 0 1 auto; min-width: 0; }
.tpp .curator-score--big .curator-score-text strong { font-family: 'DM Sans', system-ui, -apple-system, sans-serif; font-weight: 800; font-size: 15px; letter-spacing: -.005em; color: #042220; flex-shrink: 0; line-height: 1.2; }
.tpp .curator-score--big .curator-score-text .curator-sep { color: rgba(14,15,18,.55); font-weight: 800; font-size: 18px; flex-shrink: 0; line-height: 1; margin: 0 2px; }
.tpp .curator-score--big .curator-score-text em { font-family: 'DM Sans', system-ui, -apple-system, sans-serif; font-style: normal; font-weight: 600; color: #042220; font-size: 13.5px; letter-spacing: 0; line-height: 1.2; white-space: nowrap; }
@media (max-width: 760px) {
  .tpp .curator-score--big .curator-score-text em { white-space: normal; }
}
@media (max-width: 760px) {
  .tpp .curator-score--big { white-space: normal; flex-wrap: wrap; }
  .tpp .curator-score--big .curator-score-text { flex: 1 1 100%; padding-top: 4px; }
}
/* Loyalty pill, chunkier and icon-bearing */
.tpp .trust-points { display: inline-flex; align-items: center; gap: 7px; background: #FFF4DE; color: #5a4015; padding: 5px 12px; border-radius: var(--r-pill); font-family: var(--fm); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.tpp .trust-points .tp-ic { width: 13px; height: 13px; stroke: #5a4015; flex-shrink: 0; }
.tpp .trust-points a { color: #1A1410; text-decoration: underline; text-underline-offset: 2px; font-weight: 700; }
/* Subscribe & Save, make the save amount more prominent with a deeper purple + subtle pulse */
.tpp .subs-toggle .top .save { display: inline-flex; align-items: center; background: #6B21A8; color: #fff; padding: 4px 11px; border-radius: var(--r-pill); font-family: var(--fb); font-weight: 800; font-size: 12px; letter-spacing: .02em; animation: tppSubsPulse 2.4s ease-in-out infinite; }
@keyframes tppSubsPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(107,33,168,.45); }
  50% { transform: scale(1.04); box-shadow: 0 0 0 6px rgba(107,33,168,0); }
}
.tpp .buy-row--combined { display: grid; grid-template-columns: auto 1.5fr 1fr; gap: 10px; align-items: stretch; margin-bottom: 12px; }
.tpp .buy-row--combined { display: grid; grid-template-columns: auto 1.5fr 1fr; gap: 10px; align-items: stretch; margin-bottom: 12px; }

/* === 2026-05-12 v3: .buy-combo, single consolidated widget that replaces
   pcp-hero + buy-row + subs-toggle. Three internal stripes (price/action/
   subscribe) inside one bordered card so the buy area reads as ONE thing
   rather than five stacked elements. If reverting, the old .pcp-hero /
   .buy-row--combined / .subs-toggle rules above are still live, just swap
   the HTML back from /tmp/ptp-backup-pre-COMBO.php. */
/* === 2026-05-12 v4: .buy-combo light palette overhaul.
   No dark brown / dark purple / dark green backgrounds. Cream + amber + dark
   ink throughout. Add-to-basket keeps its orange CTA (must pop). Quick Buy is
   now a warm-cream secondary, not dark green. Subscribe + loyalty stripe is
   split in half. */
/* === 2026-05-12 v5: continuous vertical gradient on the outer card,
   inner stripes go transparent. Cream top → warm amber bottom. */
/* 2026-05-12 (palette v2): switched to cool slate-blue family. */
.tpp .buy-combo {
  background: linear-gradient(180deg, #FFFFFF 0%, #EBF1DE 100%);
  border: 1px solid rgba(94,112,69,.14);
  border-radius: var(--r-xl);
  overflow: hidden;
  margin: 0 0 12px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.90) inset,
    0 -1px 0 rgba(30,42,82,.04) inset,
    0 3px 12px -4px rgba(30,42,82,.18),
    0 1px 0 rgba(255,255,255,.50);
}
.tpp .buy-combo .bc-stripe {
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid rgba(46,38,32,.06);
  background: transparent;
}
.tpp .buy-combo .bc-stripe:first-child { border-top: 0; }

/* Stripe 1: price (top of gradient) */
/* 2026-05-12 v5: bc-price 2-column grid with strict center alignment on
   labels + values + buttons. text-align: center on label spans so multi-word
   labels like "for 16 biscuits" sit visually centred under the £ number. */
.tpp .buy-combo .bc-price {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto auto;
  gap: 4px 28px;
  padding: 18px 32px 26px;
  align-items: center;
  justify-items: center;
  text-align: center;
}
.tpp .buy-combo .bc-col {
  display: contents;
}
.tpp .buy-combo .bc-col--left  > * { justify-self: center; text-align: center; }
.tpp .buy-combo .bc-col--right > * { justify-self: center; text-align: center; }
/* Map each child to its grid row + column */
.tpp .buy-combo .bc-col--left  > .bc-lab           { grid-row: 1; grid-column: 1; }
.tpp .buy-combo .bc-col--left  > .bc-val           { grid-row: 2; grid-column: 1; }
.tpp .buy-combo .bc-col--left  > .bc-val-sub       { grid-row: 3; grid-column: 1; }
.tpp .buy-combo .bc-col--left  > .bc-qty           { grid-row: 4; grid-column: 1; margin-top: 7px; }
.tpp .buy-combo .bc-col--right > .bc-val-prefix    { grid-row: 1; grid-column: 2; }
.tpp .buy-combo .bc-col--right > .bc-val           { grid-row: 2; grid-column: 2; }
.tpp .buy-combo .bc-col--right > .bc-lab--below    { grid-row: 3; grid-column: 2; }
.tpp .buy-combo .bc-col--right > .bc-add           { grid-row: 4; grid-column: 2; margin-top: 7px; }
.tpp .buy-combo .bc-col--right .bc-val-prefix {
  /* 2026-05-21 Lee: enlarged from 11px to 14px for drunk-grandma readability. */
  font-family: var(--fm); font-size: 14px; font-weight: 600;
  color: var(--slate); letter-spacing: .02em; font-style: italic;
}
/* Action buttons, fixed height + similar widths so they pair as a symmetric row. */
.tpp .buy-combo .bc-qty { width: 130px; height: 48px; justify-content: center; }
.tpp .buy-combo .bc-add { width: 220px; height: 48px; padding: 0; }
.tpp .buy-combo .bc-lab {
  /* 2026-05-21 Lee: enlarged from 10px to 13px + tighter letter-spacing for readability. */
  font-family: var(--fm); font-size: 13px; text-transform: uppercase;
  letter-spacing: .08em; color: #5a4015; font-weight: 700;
}
/* 2026-05-12 v2: both price displays use the SAME big-amber treatment, total
   on the LEFT (first read), per-unit on the RIGHT. Same size for readability. */
/* 2026-05-12 v4: prices in DARK INK so they're the visual hero. £ sign stays
   in amber as a subtle accent. */
.tpp .buy-combo .bc-val {
  font-family: var(--fb); font-weight: 800; font-size: 34px;
  letter-spacing: -.025em; color: #042220; line-height: 1;
}
.tpp .buy-combo .bc-val sup { font-size: .55em; font-weight: 700; vertical-align: baseline; position: relative; top: -0.08em; margin-right: 2px; color: #1A2A52; }
.tpp .buy-combo .bc-val sub { font-size: 14px; font-weight: 500; color: var(--slate); vertical-align: baseline; margin-left: 2px; }
.tpp .buy-combo .bc-val-sub {
  /* 2026-05-21 Lee: enlarged from 11.5px to 14px for drunk-grandma readability. */
  font-family: var(--fm); font-size: 14px; color: var(--slate);
  font-weight: 600; letter-spacing: .02em;
}
.tpp .buy-combo .bc-stock {
  display: inline-flex; align-items: center; gap: 6px;
  background: #DCF5E3; color: #1F8847;
  padding: 3px 10px; border-radius: 999px;
  font-family: var(--fm); font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .08em;
  border: 1px solid rgba(31,136,71,.30);
  margin-bottom: 4px;
}
.tpp .buy-combo .bc-stock-pip {
  width: 6px; height: 6px; border-radius: 50%;
  background: #1F8847; box-shadow: 0 0 0 3px rgba(31,136,71,.18);
}

/* Optional brew-line stripe (tea/coffee only) */
.tpp .buy-combo .bc-brew {
  display: flex; justify-content: space-between; align-items: center;
  background: rgba(46,38,32,.04); color: var(--ink); text-decoration: none;
  font-family: var(--fm); font-size: 12px;
}
.tpp .buy-combo .bc-brew strong { color: #C9842A; font-weight: 800; }
.tpp .buy-combo .bc-brew:hover { background: rgba(46,38,32,.08); }

/* Stripe 2: action row, transparent on the gradient. */
/* 2026-05-12: .bc-action stripe deprecated, buttons live inside .bc-price grid. */
.tpp .buy-combo .bc-action { display: none; }
.tpp .buy-combo .bc-qty {
  display: inline-flex; align-items: center; gap: 0;
  background: #fff; border-radius: 10px; padding: 2px;
  flex-shrink: 0;
  border: 1px solid rgba(46,38,32,.10);
  box-shadow: 0 2px 6px -2px rgba(46,38,32,.10);
}
.tpp .buy-combo .bc-qty button {
  background: none; border: 0; padding: 0;
  width: 28px; height: 32px; font-size: 18px; font-weight: 800;
  color: #1A1410; cursor: pointer; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
}
.tpp .buy-combo .bc-qty button:hover { background: rgba(46,38,32,.08); }
.tpp .buy-combo .bc-qty .num {
  min-width: 24px; text-align: center;
  font-family: var(--fb); font-weight: 800; font-size: 15px; color: #1A1410;
}
.tpp .buy-combo .bc-add {
  flex: 0 1 auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(135deg,#5E7045 0%,#3D4A2A 55%,#2A331C 100%);
  color: #FFFFFF;
  padding: 0 22px; height: 44px;
  border-radius: 11px;
  text-decoration: none;
  font-family: var(--fb); font-weight: 800; font-size: 14px;
  box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 6px 14px -4px rgba(58,75,42,.45);
  transition: transform .14s ease, box-shadow .2s ease, filter .2s ease;
}
.tpp .buy-combo .bc-add:hover { transform: translateY(-1px); filter: brightness(1.05); }
.tpp .buy-combo .bc-add svg { width: 16px; height: 16px; stroke: #FFFFFF; }
.tpp .buy-combo .bc-qb {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: #fff; color: #5a4015;
  padding: 0 14px; height: 44px;
  border-radius: 11px;
  text-decoration: none;
  font-family: var(--fb); font-weight: 800; font-size: 13px;
  border: 1.5px solid rgba(90,64,21,.45);
  box-shadow: 0 2px 6px -2px rgba(46,38,32,.18);
  transition: background .14s, transform .14s;
}
.tpp .buy-combo .bc-qb:hover { background: #FFF8EC; transform: translateY(-1px); }
.tpp .buy-combo .bc-qb svg { width: 14px; height: 14px; stroke: #5a4015; }

/* Stripe 3: subscribe (full width, bottom of gradient) */
/* 2026-05-12 v2: subscribe stripe split 1:1, Subscribe & Save LEFT,
   Quick Buy RIGHT. Deeper padding so the QB chip sits comfortably. */
/* 2026-05-12 v3: Subs takes 70% of stripe, Quick Buy 30%. */
/* 2026-05-12 (palette v2): bc-final stripe, one step deeper slate so
   the price/upsell split reads inside the card. */
.tpp .buy-combo .bc-final {
  display: grid;
  grid-template-columns: 6fr 4fr;
  gap: 0;
  padding: 0;
  border-top: 1px solid rgba(94,112,69,.14);
  background: linear-gradient(180deg, #E5EEDA 0%, #D8E4C5 100%);
  min-height: 86px;
}
/* 2026-05-12 v4: subscribe block stacks vertically, title / sub / save
   pill, all left-aligned with proper line gaps. No more overlap. */
/* 2026-05-12 v8: Subscribe column gets a proper Subscribe button so it
   mirrors the Quick Buy column's layout. Save pill moves to the RIGHT of
   the price row, 'Delivered every...' becomes a discreet small line, and
   a rectangle CTA matches Quick Buy's shape. */
/* 2026-05-12 v9: Subscribe column now stacks from the TOP (not centred)
   and the button is pinned to the bottom with margin-top: auto so it lines
   up with the Quick Buy button on the right. Save pill moves to the title
   row so the price row reads cleanly (no overlap with the strikethrough). */
.tpp .buy-combo .bc-final-subs {
  display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
  gap: 4px;
  padding: 14px 22px;
  border-right: 1px solid rgba(201,132,42,.25);
  color: inherit;
}
.tpp .buy-combo .bc-final .bc-subs-ttl-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  flex-wrap: nowrap;
}
.tpp .buy-combo .bc-final .bc-subs-ttl {
  font-family: var(--fb); font-weight: 800; font-size: 15.5px; color: #042220;
  line-height: 1.2; letter-spacing: -.005em;
}
.tpp .buy-combo .bc-final .bc-subs-price-row {
  display: inline-flex; align-items: baseline; gap: 8px; flex-wrap: nowrap;
  margin: 4px 0 0;
}
.tpp .buy-combo .bc-final .bc-subs-new {
  font-family: var(--fb); font-weight: 800; font-size: 24px; color: #042220;
  letter-spacing: -.02em; line-height: 1;
}
.tpp .buy-combo .bc-final .bc-subs-new .bc-subs-per {
  font-family: var(--fm); font-size: 10.5px; font-weight: 600;
  color: var(--slate); letter-spacing: 0; margin-left: 2px;
}
.tpp .buy-combo .bc-final .bc-subs-old {
  font-family: var(--fb); font-weight: 700; font-size: 13px;
  color: var(--slate); text-decoration: line-through; opacity: .70;
  letter-spacing: -.01em;
}
.tpp .buy-combo .bc-final .bc-subs-save {
  display: inline-flex; align-items: center; flex-shrink: 0;
  background: linear-gradient(135deg,#5E7045 0%,#3D4A2A 100%); color: #FFFFFF;
  padding: 4px 10px; border-radius: var(--r-pill);
  font-family: var(--fb); font-weight: 800; font-size: 10.5px;
  letter-spacing: .02em;
  box-shadow: 0 3px 8px -2px rgba(58,75,42,.40);
  animation: bc-subs-bob 2.6s ease-in-out infinite;
}
.tpp .buy-combo .bc-final .bc-subs-sub {
  font-family: var(--fm); font-weight: 500; font-size: 11px; color: var(--slate);
  letter-spacing: 0; line-height: 1.2; white-space: nowrap; opacity: .85;
}
.tpp .buy-combo .bc-final-subs-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: auto;
  padding: 0 18px; height: 44px;
  background: linear-gradient(135deg,#5E7045 0%,#3D4A2A 55%,#2A331C 100%);
  color: #FFFFFF;
  border-radius: 11px;
  text-decoration: none;
  font-family: var(--fb); font-weight: 800; font-size: 14px; letter-spacing: -.005em;
  box-shadow: 0 4px 14px -4px rgba(58,75,42,.45), 0 1px 0 rgba(255,255,255,.45) inset;
  transition: filter .14s ease, transform .14s ease;
  white-space: nowrap;
}
.tpp .buy-combo .bc-final-subs-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
/* 2026-05-12: slim Subscribe & Save button, natural width, padded.
   Was stretching to full column width and looked oversized. */
.tpp .buy-combo .bc-final-subs-btn { align-self: flex-start; min-width: 180px; }
.tpp .buy-combo .bc-final-subs-btn svg { width: 15px; height: 15px; stroke: #FFFFFF; }
/* Right half, Quick Buy CTA */
/* 2026-05-12 v6: Quick Buy column is now a 2-line wrap: title + subtitle
   above a RECTANGLE button (matching Add to basket shape). Bottom-right cell
   mirrors the bottom-left Subscribe & Save layout. */
.tpp .buy-combo .bc-final-qb-wrap {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;
  gap: 4px;
  padding: 14px 22px;
}
.tpp .buy-combo .bc-final-qb-ttl {
  font-family: var(--fb); font-weight: 800; font-size: 16px; color: #042220; line-height: 1.2; letter-spacing: -.005em;
}
.tpp .buy-combo .bc-final-qb-sub {
  font-family: var(--fm); font-weight: 500; font-size: 12px; color: var(--slate); letter-spacing: 0;
  line-height: 1.2;
}
.tpp .buy-combo .bc-final-qb {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: auto;
  align-self: flex-start;
  min-width: 150px;
  padding: 0 22px; height: 44px;
  background: linear-gradient(135deg,#5E7045 0%,#3D4A2A 55%,#2A331C 100%);
  color: #FFFFFF;
  border-radius: 11px;
  text-decoration: none;
  font-family: var(--fb); font-weight: 800; font-size: 14px; letter-spacing: -.005em;
  box-shadow: 0 4px 14px -4px rgba(58,75,42,.45), 0 1px 0 rgba(255,255,255,.45) inset;
  transition: filter .14s ease, transform .14s ease;
  white-space: nowrap;
}
.tpp .buy-combo .bc-final-qb:hover { filter: brightness(1.06); transform: translateY(-1px); }
.tpp .buy-combo .bc-final-qb svg { width: 16px; height: 16px; stroke: #FFFFFF; }

/* === Loyalty banner, its own card under the buy-combo === */
/* 2026-05-12 (palette v2): slate-blue family. */
.tpp .loyalty-banner {
  display: block;
  background: linear-gradient(180deg, #FFFFFF 0%, #E5EEDA 100%);
  border: 1px solid rgba(94,112,69,.14);
  border-radius: var(--r-xl);
  padding: 0;
  margin: 0 0 14px;
  text-decoration: none; color: inherit;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,.90) inset,
    0 -1px 0 rgba(30,42,82,.04) inset,
    0 3px 12px -4px rgba(30,42,82,.18),
    0 1px 0 rgba(255,255,255,.50);
}
.tpp .loyalty-banner-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
}
.tpp .loyalty-banner-ic {
  width: 38px; height: 38px; border-radius: 50%;
  background: #1A1410; color: var(--acc);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.tpp .loyalty-banner-ic svg { width: 20px; height: 20px; }
.tpp .loyalty-banner-text {
  display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1;
}
.tpp .loyalty-banner-ttl {
  font-family: var(--fb); font-weight: 800; font-size: 14.5px; color: #042220; line-height: 1.25;
}
.tpp .loyalty-banner-sub {
  font-family: var(--fm); font-size: 12px; color: #5a4015; font-weight: 600; line-height: 1.4;
}
.tpp .loyalty-banner-arr {
  font-family: var(--fb); font-weight: 800; color: #5a4015; font-size: 18px;
  transition: transform .14s ease;
}
.tpp .loyalty-banner:hover .loyalty-banner-arr { transform: translateX(3px); }

/* 2026-05-12 v3: marquee strip, transparent so the loyalty banner's
   own gradient flows through cleanly. No more white band cutting the
   card in half. Edge mask tightened to 4% so tags don't fade out too
   aggressively at the sides. */
.tpp .loyalty-banner-marquee {
  overflow: hidden;
  background: transparent;
  border-top: 1px solid rgba(30,42,82,.08);
  padding: 10px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
}
.tpp .loyalty-marquee-track {
  display: inline-flex; gap: 28px;
  white-space: nowrap;
  animation: loyalty-scroll 28s linear infinite;
  will-change: transform;
}
.tpp .loyalty-tag {
  font-family: var(--fm); font-size: 12px; font-weight: 800;
  color: #042220; letter-spacing: .01em;
  display: inline-flex; align-items: center;
}
@keyframes loyalty-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* 2026-05-12 v2: hover-pause scoped to the marquee strip (was on the
   whole banner card, which flickered as the cursor crossed scrolling
   tag boundaries). Plus a stable .is-paused class controlled by JS for
   robust pause on hover/focus regardless of CSS quirks. */
.tpp .loyalty-banner-marquee:hover .loyalty-marquee-track { animation-play-state: paused; }
.tpp .loyalty-marquee-track.is-paused { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .tpp .loyalty-marquee-track { animation: none; }
}

/* === Trust-card In Stock row === */
.tpp .trust-card .trust-stock-row {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: linear-gradient(135deg, #E6F7EC 0%, #D4F0DC 100%); color: #1F8847;
  padding: 11px 14px; border-radius: var(--r-md);
  font-family: var(--fm); font-size: 12.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: 14px;
  border: 1px solid rgba(31,136,71,.28);
  box-shadow: 0 2px 8px -4px rgba(31,136,71,.20);
}
.tpp .trust-card .trust-stock-pip {
  width: 8px; height: 8px; border-radius: 50%;
  background: #1F8847; box-shadow: 0 0 0 3px rgba(31,136,71,.20);
  flex-shrink: 0;
}
.tpp .trust-card .trust-stock-text { color: #1F8847; }
@keyframes bc-subs-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  .tpp .buy-combo .bc-subs-half .bc-subs-save { animation: none; }
}

/* Mobile compaction */
@media (max-width: 760px) {
  .tpp .buy-combo .bc-action { flex-wrap: wrap; }
  .tpp .buy-combo .bc-add { flex: 1 1 100%; order: 2; }
  .tpp .buy-combo .bc-qty { order: 1; }
  .tpp .buy-combo .bc-price { padding: 14px 16px; }
  .tpp .buy-combo .bc-val { font-size: 28px; }
  .tpp .buy-combo .bc-final { grid-template-columns: 1fr; }
  .tpp .buy-combo .bc-final-subs { border-right: 0; border-bottom: 1px solid rgba(46,38,32,.10); }
}

.tpp .buy-row--combined .add-btn { padding: 14px 22px; min-height: 56px; font-size: 15px; }
.tpp .qb-btn.qb-compact { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 18px; min-height: 56px; background: linear-gradient(135deg, #1F3329 0%, #0E1A14 100%); color: var(--acc); border: 0; border-radius: 14px; font-family: var(--fb); font-weight: 800; font-size: 14px; text-decoration: none; box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 10px 24px -10px rgba(31,51,41,.5); transition: transform .12s, box-shadow .12s; }
.tpp .qb-btn.qb-compact:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 14px 28px -10px rgba(31,51,41,.65); }
.tpp .qb-btn.qb-compact svg { width: 18px; height: 18px; stroke: var(--acc); }
/* 2026-05-12 v3: trust-card now hosts the curator pill at the top, uses
   the curator widget's white→cream gradient + 3D card shadow. The 'In stock'
   pill, 4 delivery facts, and curator content are all one card. */
.tpp .trust-card {
  background: linear-gradient(180deg, #FFFFFF 0%, #EFF5E8 100%);
  border: 1px solid rgba(94,112,69,.14);
  border-radius: var(--r-xl);
  padding: 16px 18px;
  margin-bottom: 12px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.90) inset,
    0 -1px 0 rgba(30,42,82,.04) inset,
    0 3px 12px -4px rgba(30,42,82,.18),
    0 1px 0 rgba(255,255,255,.50);
}
/* Curator row at the top of the trust-card, no own bg, just inline content. */
.tpp .trust-card .trust-curator-row {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 4px 12px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(46,38,32,.08);
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  font-size: 14px; font-weight: 600; color: var(--ink);
}
.tpp .trust-card .trust-curator-row .av { width: 26px; height: 26px; border-radius: 50%; background: #FFB347; color: #2A1E12; display: inline-flex; align-items: center; justify-content: center; font-family: var(--fd); font-style: italic; font-size: 14px; flex-shrink: 0; }
.tpp .trust-card .trust-curator-row .curator-stars { display: inline-flex; gap: 1px; color: var(--acc); flex-shrink: 0; filter: drop-shadow(0 1px 2px rgba(201,132,42,.45)); }
.tpp .trust-card .trust-curator-row .curator-stars svg { width: 17px; height: 17px; fill: currentColor; transform-origin: center; }
/* 2026-05-13: half-star render fix. The catch-all svg{fill:currentColor} above
   was overriding .star--empty (grey) inside the trust-card. Re-apply per-variant
   fills with explicit class selectors so empty stars stay grey and half-fills work. */
.tpp .trust-card .trust-curator-row .curator-stars svg.star--full { fill: var(--acc); }
.tpp .trust-card .trust-curator-row .curator-stars svg.star--empty { fill: rgba(14,15,18,.18); }
.tpp .trust-card .trust-curator-row .curator-stars .star-half-wrap svg.star--empty { fill: rgba(14,15,18,.18); }
.tpp .trust-card .trust-curator-row .curator-stars .star-half-wrap svg.star--half-fill { fill: var(--acc); clip-path: inset(0 50% 0 0); }
.tpp .trust-card .trust-curator-row .curator-stars > svg, .tpp .trust-card .trust-curator-row .curator-stars > .star-half-wrap {
  animation: tpp-star-pulse 3.6s ease-in-out infinite;
}
.tpp .trust-card .trust-curator-row .curator-stars > *:nth-child(1) { animation-delay: 0s;    }
.tpp .trust-card .trust-curator-row .curator-stars > *:nth-child(2) { animation-delay: .12s;  }
.tpp .trust-card .trust-curator-row .curator-stars > *:nth-child(3) { animation-delay: .24s;  }
.tpp .trust-card .trust-curator-row .curator-stars > *:nth-child(4) { animation-delay: .36s;  }
.tpp .trust-card .trust-curator-row .curator-stars > *:nth-child(5) { animation-delay: .48s;  }
.tpp .trust-card .trust-curator-row .curator-score-text { display: inline-flex; align-items: baseline; gap: 8px; flex: 1; min-width: 0; }
.tpp .trust-card .trust-curator-row .curator-score-text strong { font-weight: 800; font-size: 15px; letter-spacing: -.005em; color: #042220; flex-shrink: 0; line-height: 1.2; }
.tpp .trust-card .trust-curator-row .curator-score-text .curator-sep { color: rgba(14,15,18,.55); font-weight: 800; font-size: 18px; flex-shrink: 0; line-height: 1; margin: 0 2px; }
.tpp .trust-card .trust-curator-row .curator-score-text em { font-style: normal; font-weight: 600; color: #042220; font-size: 13.5px; letter-spacing: 0; line-height: 1.2; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  .tpp .trust-card .trust-curator-row .curator-stars > svg, .tpp .trust-card .trust-curator-row .curator-stars > .star-half-wrap { animation: none; }
}
.tpp .trust-card-head { display: none; }  /* 2026-05-12: loyalty header moved into buy-combo bottom stripe. */
.tpp .trust-stock { display: inline-flex; align-items: center; gap: 6px; background: #E6F7EC; color: #1F8847; padding: 4px 11px; border-radius: var(--r-pill); font-family: var(--fm); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.tpp .trust-stock .pip { width: 7px; height: 7px; border-radius: 50%; background: #1F8847; }
.tpp .trust-points { display: inline-flex; align-items: center; gap: 6px; background: #FFF4DE; color: #5a4015; padding: 4px 11px; border-radius: var(--r-pill); font-family: var(--fm); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.tpp .trust-points a { color: #1A1410; text-decoration: underline; text-underline-offset: 2px; font-weight: 700; text-transform: lowercase; letter-spacing: 0; }
/* 2026-05-12 v2: trust-facts polished, each fact's svg sits inside a soft
   warm-cream circular chip. Text reads as a proper trust signal. No more
   yellow hover (Lee didn't ask for it, didn't add context). */
.tpp .trust-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
  list-style: none; padding: 0; margin: 0; max-width: none;
}
.tpp .trust-facts li {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--fb); font-size: 12.5px; font-weight: 700; color: var(--ink);
  margin: 0; padding: 0;
}
.tpp .trust-facts li svg {
  width: 16px; height: 16px;
  padding: 7px;
  background: #E5EEDA;
  border-radius: 50%;
  stroke: #5E7045;
  box-sizing: content-box;
  flex-shrink: 0;
}
.tpp .trust-facts li span { line-height: 1.25; }

/* 2026-05-12 v3: recipe-outro paragraph, override its inline cream styles
   with a pale blue-grey palette + navy border so it clearly separates from
   the warm cream gradient of .recipe-bottom below it. Lee asked. */
/* 2026-05-12 v4: outro now clearly distinct from --paper-2 (#F2F4F7), a
   saturated pale blue (#C5D6F0) with navy border + dark navy text. */
.tpp .recipe-card .recipe-outro {
  background: #C5D6F0 !important;
  border-left-color: #1A2A52 !important;
  color: #0E1A3A !important;
  border-left-width: 4px !important;
  /* 2026-05-12 v5: balance vertical spacing, inline DB styles were 18/4
     (top-heavy). Even both sides at 12px so the card sits centred between
     method step 4 and the share strip. */
  margin-top: 12px !important;
  margin-bottom: 12px !important;
}
.tpp .recipe-card .recipe-outro strong { color: #0E1A3A !important; }

/* Safety, structured card grid replaces the old 2-col text flow (2026-05-12 v2) */
.tpp .tpp-safety-extra { max-width: none !important; font-size: 14px; color: var(--slate); }
.tpp .tpp-safety-extra ul { padding-left: 22px; margin: 0; }
.tpp .tpp-safety-extra ul li { margin-bottom: 10px; }
.tpp .safety-cards, .tpp .al-grid--safety { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; }
@media (max-width: 900px) { .tpp .al-grid--safety { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .tpp .al-grid--safety { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .tpp .safety-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .tpp .safety-cards { grid-template-columns: 1fr; } }
.tpp .safety-card { display: grid; grid-template-columns: auto 1fr; gap: 12px; background: #FAF6EE; border: 1px solid rgba(46,38,32,.10); border-radius: 14px; padding: 14px 16px; align-items: start; }
.tpp .safety-card--warn { background: #FAF6EE; border-color: rgba(46,38,32,.10); }
.tpp .safety-card .sc-ic { font-size: 18px; line-height: 1; padding-top: 3px; }
.tpp .safety-card .sc-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tpp .safety-card .sc-h { font-family: var(--fb); font-weight: 800; font-size: 13.5px; color: var(--ink); letter-spacing: -.005em; }
.tpp .safety-card .sc-b { font-size: 13px; line-height: 1.55; color: var(--slate); }
.tpp .safety-card--warn .sc-h { color: var(--ink); }
/* === SHARE MENU, single button + popover (rebuilt 2026-05-11) ===
   Replaces the row of 9 pills that Lee called "pushing share too much".
   One unified button, click expands a structured menu. */
.tpp .recipe-share {
  position: relative;
  padding: 14px 24px 18px;
  border-top: 1px solid var(--hair);
}
.tpp .share-trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 10px 14px;
  height: 40px;
  background: #1A2A52;
  color: #FFFFFF;
  border: 1px solid #1A2A52;
  border-radius: var(--r-pill);
  font-family: var(--fb);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -.005em;
  cursor: pointer;
  transition: background .14s var(--ease), transform .14s var(--ease), color .14s var(--ease);
}
.tpp .share-trigger:hover { background: #0E1A3A; color: #C7D3F0; transform: translateY(-1px); }
.tpp .share-trigger-ic { width: 16px; height: 16px; flex-shrink: 0; }
.tpp .share-trigger-chev { width: 12px; height: 12px; transition: transform .18s var(--ease); }
.tpp .share-trigger[aria-expanded="true"] .share-trigger-chev { transform: rotate(180deg); }

.tpp .share-menu {
  position: absolute;
  z-index: 20;
  bottom: calc(100% - 6px);
  left: 24px;
  width: min(380px, calc(100% - 48px));
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: var(--r-xl);
  box-shadow:
    0 1px 2px rgba(14,15,18,.04),
    0 16px 40px -8px rgba(14,15,18,.18);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity .14s var(--ease), transform .14s var(--ease);
}
.tpp .share-menu.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.tpp .share-menu[hidden] { display: flex !important; }

.tpp .share-menu-group { display: flex; flex-direction: column; gap: 2px; padding: 8px 6px 6px; }
.tpp .share-menu-group + .share-menu-group { border-top: 1px solid var(--hair-2); margin-top: 4px; padding-top: 12px; }
.tpp .share-menu-label {
  font-family: var(--fm);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .10em;
  color: var(--mist);
  font-weight: 700;
  padding: 0 6px 6px;
}

.tpp .share-opt {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 8px 10px !important;
  background: #C5D6F0 !important;
  border: 0 !important;
  border-radius: var(--r-md) !important;
  width: 100% !important;
  text-align: left !important;
  cursor: pointer !important;
  color: var(--ink) !important;
  text-decoration: none !important;
  transition: background .12s ease !important;
  font-family: var(--fb) !important;
  min-width: 0 !important;
  height: auto !important;
}
.tpp .share-opt:hover { background: var(--paper-2) !important; }
.tpp .share-opt-ic {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tpp .share-opt-ic svg { width: 16px; height: 16px; display: block; }
.tpp .share-opt-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tpp .share-opt-text strong { font-size: 13.5px; font-weight: 700; color: var(--ink); letter-spacing: -.005em; }
.tpp .share-opt-text small { font-family: var(--fb); font-size: 11.5px; color: var(--slate); font-weight: 500; }
.tpp .share-opt[data-share="copy"].copied .share-opt-ic { background: #1F8847 !important; color: #fff !important; border-color: #1F8847 !important; }
.tpp .share-opt[data-share="copy"].copied .cp-label::after { content: ', copied'; color: #1F8847; }

/* ===== UPSELL CAROUSELS, condensed 2026-05-11 ===== */
.tpp .upsell-suite { margin: 28px 0 0; }
.tpp .us-h-mini {
  font-family: var(--fm);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--slate);
  font-weight: 700;
  margin: 0 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 8px;
}
.tpp .us-h-mini em {
  font-family: var(--fb);
  font-style: normal;
  font-weight: 500;
  text-transform: none;
  letter-spacing: -.005em;
  color: var(--mist);
  font-size: 12px;
}
.tpp .us-h-mini-pip {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--terracotta);
  display: inline-block;
}
.tpp .us-tier { margin-bottom: 22px; }
.tpp .us-tier:last-child { margin-bottom: 0; }
.tpp .us-tier-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--hair-2);
}
.tpp .us-tier-h-mini {
  font-family: var(--fb);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.005em;
  color: var(--ink);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  line-height: 1.3;
}
.tpp .us-tier-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  background: var(--paper-2);
  border: 1px solid var(--hair);
  border-radius: 999px;
  font-family: var(--fm);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--slate);
}
.tpp .us-tier-count {
  font-family: var(--fm);
  font-size: 11px;
  color: var(--mist);
  font-weight: 600;
}
.tpp .us-nav { display: flex; gap: 8px; flex-shrink: 0; }
.tpp .us-arr { width: 42px; height: 42px; border-radius: 50%; background: #fff; border: 1px solid var(--hair); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink); transition: background .14s var(--ease), border-color .14s var(--ease), color .14s var(--ease), transform .14s var(--ease); padding: 0; min-width: 0; }
.tpp .us-arr svg { width: 16px; height: 16px; }
.tpp .us-arr:hover { background: #1A2A52; color: #C7D3F0; border-color: var(--tea-brown); transform: translateY(-1px); }
.tpp .us-arr:disabled { opacity: .35; cursor: not-allowed; transform: none; }
.tpp .us-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 1fr);
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 4px 4px 18px;
  margin: 0 -4px;
  /* Hide scrollbar while keeping scroll fns */
  scrollbar-width: thin;
  scrollbar-color: var(--ash) transparent;
}
.tpp .us-track::-webkit-scrollbar { height: 8px; }
.tpp .us-track::-webkit-scrollbar-track { background: transparent; }
.tpp .us-track::-webkit-scrollbar-thumb { background: var(--ash); border-radius: 999px; }
@media (min-width: 720px) {
  .tpp .us-track { grid-auto-columns: minmax(280px, calc(33.333% - 12px)); }
}
@media (min-width: 1100px) {
  .tpp .us-track { grid-auto-columns: minmax(280px, calc(25% - 14px)); }
}
.tpp .up-card {
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: var(--r-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.tpp .up-card:hover { transform: translateY(-3px); box-shadow: var(--sh-card); border-color: rgba(216,108,66,.30); }
.tpp .up-link { display: flex; flex-direction: column; flex: 1 1 auto; color: inherit; }
/* Upsell-card image panel, each card carries its OWN tea-family class
   (set in tpp_render_upsell_card), so this var() resolves per-card. A
   Yorkshire Tea card paints amber, a Pukka Three Mint card paints green,
   etc. Fallback paper-cream gradient covers the rare case where no
   family is set. */
.tpp .up-img { position: relative; background: #fff; aspect-ratio: 1 / 1; overflow: hidden; } /* V3: image panel white, tint lives in up-body */
.tpp .up-img img { width: 100%; height: 100%; object-fit: contain; padding: 14px; }
.tpp .up-brand { position: absolute; top: 10px; left: 10px; font-family: var(--fm); font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: 4px 9px; background: rgba(31,51,41,.92); color: #fff; border-radius: 999px; z-index: 2; }
.tpp .up-reason-tag { position: absolute; top: 10px; right: 10px; font-family: var(--fm); font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 4px 9px; background: rgba(216,108,66,.94); color: #fff; border-radius: 999px; z-index: 2; }
.tpp .up-body { padding: 16px 16px 12px; display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; }
.tpp .up-title { font-family: var(--fb); font-size: 14.5px; font-weight: 700; line-height: 1.3; margin: 0; color: var(--ink); letter-spacing: -.005em; min-height: 2.6em; }
.tpp .up-stars { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--slate); }
.tpp .up-stars .stars { position: relative; display: inline-block; font-family: Arial, sans-serif; letter-spacing: 1px; color: var(--hair); }
.tpp .up-stars .stars::before { content: '★★★★★'; position: absolute; top: 0; left: 0; width: var(--r,0%); color: #FFB347; overflow: hidden; white-space: nowrap; }
.tpp .up-stars .rc { font-family: var(--fm); font-size: 10.5px; }
.tpp .up-price-row { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; margin-top: 2px; }
.tpp .up-price { font-family: var(--fm); font-size: 12px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.tpp .up-percup { order: -1; font-family: var(--fb); font-size: 20px; font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
.tpp .up-reason { font-size: 12px; line-height: 1.45; color: var(--slate); margin: 4px 0 0; font-style: italic; }
.tpp .up-add {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 0 16px 14px;
  background: var(--buy-grad);
  color: #fff !important;
  font-family: var(--fb);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -.005em;
  text-decoration: none;
  border-radius: 999px;
  padding: 10px 12px;
  border: none;
  cursor: pointer;
  transition: background .14s var(--ease), transform .14s var(--ease);
}
.tpp .up-add:hover { background: var(--buy-grad-hover); transform: translateY(-1px); }
.tpp .up-add svg { width: 14px; height: 14px; }

@media (max-width: 760px) {
  .tpp .us-tier-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .tpp .us-nav { align-self: flex-end; }
}

/* Nutrition table */
/* 2026-05-12: explicit nutri-table column widths so columns sit at fixed
   proportions, Nutrient label 50%, value 35%, % RI 15%. table-layout: fixed
   keeps the % RI header inside the table edge instead of overflowing. */
/* 2026-05-12 v2: nutri-table, values centred (was right-pushed), table
   trimmed to its natural width, last-row bottom-border removed so it
   doesn't read as an empty 8th line. */
.tpp .nutri-table { width: 100%; max-width: 520px; border-collapse: collapse; margin: 0 0 12px; }
.tpp .nutri-table th { font-family: var(--fm); font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--slate); font-weight: 700; padding: 8px 12px 8px 0; border-bottom: 1.5px solid var(--ink); text-align: left; }
.tpp .nutri-table th:nth-child(2), .tpp .nutri-table th:nth-child(3) { text-align: center; }
.tpp .nutri-table td { padding: 8px 12px 8px 0; border-bottom: 1px solid var(--hair); font-size: 14px; color: var(--ink); }
.tpp .nutri-table td:nth-child(2), .tpp .nutri-table td:nth-child(3) { text-align: center; font-family: var(--fm); font-weight: 600; }
.tpp .nutri-table tbody tr:last-child td { border-bottom: 0; }

/* === OVERVIEW DASHBOARD === */
/* Three big stat cards across the top, price/cup, caffeine, curator rating */
.tpp .ov-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 0 0 24px; }
.tpp .ov-stat { padding: 20px 22px; border-radius: var(--r-xl); display: flex; flex-direction: column; gap: 6px; min-height: 130px; justify-content: center; }
.tpp .ov-stat-price { background: linear-gradient(135deg, var(--tea-brown), var(--tea-brown-2)); color: var(--acc); }
.tpp .ov-stat-caff  { background: linear-gradient(135deg, var(--forest), #15241D); color: #eff7f6; }
.tpp .ov-stat-rate  { background: #FFF4DE; color: var(--ink); border: 1.5px solid var(--acc); }
.tpp .ov-stat .ov-lbl { font-family: var(--fm); font-size: 10.5px; text-transform: uppercase; letter-spacing: .10em; font-weight: 700; opacity: .65; }
.tpp .ov-stat .ov-val { font-family: var(--fb); font-weight: 800; font-size: 48px; letter-spacing: -.026em; line-height: 1; display: flex; align-items: baseline; }
.tpp .ov-stat .ov-val sup { font-size: 22px; font-weight: 700; vertical-align: super; opacity: .75; margin-right: 2px; }
.tpp .ov-stat .ov-val sub { font-size: 18px; font-weight: 500; vertical-align: baseline; opacity: .6; margin-left: 4px; }
.tpp .ov-stat .ov-sub { font-family: var(--fm); font-size: 11px; font-weight: 600; opacity: .55; letter-spacing: .02em; }

/* One-line snapshot under the stats */
.tpp .ov-snapshot { font-family: var(--fb); font-size: 17px; line-height: 1.55; color: var(--ink); margin: 0 0 24px; }
.tpp .ov-snapshot.ov-snapshot--multi { columns: 2; column-gap: 36px; column-rule: 1px solid rgba(14,15,18,.06); }
.tpp .ov-snapshot.ov-snapshot--multi p { break-inside: avoid; margin: 0 0 14px; }
/* Mobile: the 2-column overview/curator block crammed the text into ~148px-wide
   strips (1-3 words per line). Collapse to a single full-width column on phones. */
@media (max-width: 760px) {
  .tpp .ov-snapshot.ov-snapshot--multi { columns: 1; column-gap: 0; column-rule: none; }
}
/* 2026-05-12 v2: wiki-cross when rendered inside ov-snapshot, must stay
   intact (no column split), sit comfortably at the end of the prose flow,
   and not break the rhythm of the 2-col grid. */
/* 2026-05-12 (master-template): auto-link styling, subtle underline,
   accent on hover. Distinct from plain prose so readers know it's clickable,
   not so loud it disrupts editorial flow. */
.tpp .tpp-autolink {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(14,15,18,.25);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color .14s ease, color .14s ease;
}
.tpp .tpp-autolink:hover {
  color: var(--acc, #C9842A);
  text-decoration-color: var(--acc, #C9842A);
}

/* 2026-05-12 v4: wiki-cross now lives OUTSIDE the .ov-snapshot CSS-columns
   flow, in its own .ov-wiki-wrap full-width block. Deterministic, no longer
   depends on text-balancing to land at the bottom of col 2. */
/* 2026-05-12 v5: ov-wiki-wrap constrained to one-column width. The 2-col
   CSS columns above use column-gap:36px so one column = calc(50% - 18px).
   Mobile (<=760px) drops to full width since prose collapses to 1 col. */
.tpp .ov-wiki-wrap {
  margin: 20px 0 8px;
  max-width: calc(50% - 18px);
}
.tpp .ov-wiki-wrap .wiki-cross--in-ov {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none;
}
@media (max-width: 760px) {
  .tpp .ov-wiki-wrap { max-width: none; }
}
@media (max-width: 760px) { .tpp .ov-snapshot.ov-snapshot--multi { columns: 1; } }
.tpp .ov-snapshot strong { font-weight: 800; }
.tpp .ov-snapshot em { font-family: var(--fd); font-style: italic; font-weight: 400; color: var(--slate); }

/* 6-cell fact grid: temp / steep / milk / origin / format / leaf */
.tpp .ov-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 0 0 24px; }
/* 2026-05-12 v2: ov-fact cards switched from vertical 4-line stack to a
   horizontal layout, icon chip LEFT, label+value stacked on the RIGHT. */
.tpp .ov-fact {
  background: var(--paper-2);
  border-radius: var(--r-xl);
  padding: 14px 18px;
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 4px 12px;
  min-height: 0;
}
.tpp .ov-fact-ic {
  grid-row: 1 / span 2;
  width: 36px; height: 36px; border-radius: 50%;
  background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink); margin: 0;
}
.tpp .ov-fact-ic svg { width: 16px; height: 16px; }
.tpp .ov-fact-lbl {
  grid-row: 1; grid-column: 2;
  font-family: var(--fm); font-size: 10px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--slate); font-weight: 700;
  line-height: 1; align-self: end; margin-bottom: 2px;
}
.tpp .ov-fact-val {
  grid-row: 2; grid-column: 2;
  font-family: var(--fb); font-weight: 800; font-size: 15.5px;
  color: var(--ink); letter-spacing: -.012em; line-height: 1.2;
  align-self: start;
}
.tpp .ov-fact-arr {
  grid-row: 1 / span 2; grid-column: 3;
  font-family: var(--fb); font-weight: 700; color: var(--slate);
  margin-left: 4px; align-self: center;
  transition: transform .14s, color .14s;
}
.tpp .ov-fact.ov-fact--link, a.ov-fact.ov-fact--link {
  text-decoration: none; color: inherit; cursor: pointer;
  transition: background .14s, transform .14s;
}
.tpp .ov-fact.ov-fact--link:hover { background: #ECE7DC; transform: translateY(-1px); }
.tpp .ov-fact.ov-fact--link:hover .ov-fact-arr { color: var(--ink); transform: translateX(2px); }

/* Lifestyle / planet badges, quick visual reassurance row */
.tpp .ov-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.tpp .ov-badges.ov-badges--top { margin-bottom: 22px; }
/* Hero stat pills: decorative SVG glyph in the top-right corner (low-opacity, scaled up) */
.tpp .ov-stat { position: relative; overflow: hidden; }
.tpp .ov-stat .ov-stat-glyph { position: absolute; top: 50%; right: 18px; transform: translateY(-50%); opacity: .28; pointer-events: none; }
.tpp .ov-stat .ov-stat-glyph svg { width: 86px; height: 86px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.tpp .ov-stat-rate .ov-stat-glyph { opacity: .35; }
.tpp .ov-badge { display: inline-flex; align-items: center; padding: 7px 13px; border-radius: var(--r-pill); font-family: var(--fm); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.tpp .ov-badge-good { background: #E6F7EC; color: #1F8847; border: 1.5px solid rgba(31,136,71,.15); }

@media (max-width: 900px) {
  .tpp .ov-stats { grid-template-columns: 1fr; }
  .tpp .ov-stat .ov-val { font-size: 40px; }
  .tpp .ov-grid { grid-template-columns: 1fr 1fr; }
}

/* Taste bars (dotted 5-step) */
.tpp .taste-bars { display: flex; flex-direction: column; gap: 14px; margin: 16px 0 28px; }
.tpp .taste-row { padding: 14px 16px; background: var(--paper-2); border-radius: var(--r-md); }
.tpp .taste-row .t-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 6px; flex-wrap: wrap; }
.tpp .taste-row .t-nm { font-family: var(--fb); font-weight: 700; font-size: 15px; color: var(--ink); }
.tpp .taste-row .t-dots { display: inline-flex; align-items: center; gap: 4px; }
.tpp .taste-row .t-dots .d { width: 10px; height: 10px; border-radius: 50%; background: var(--ash); }
.tpp .taste-row .t-dots .d.on { background: var(--ink); }
.tpp .taste-row .t-dots .t-score { font-family: var(--fm); font-size: 11px; font-weight: 700; color: var(--slate); margin-left: 8px; }
.tpp .taste-row .t-note { font-size: 13.5px; color: var(--slate); margin: 0; line-height: 1.5; }

/* Compare table */
.tpp .compare-table { display: flex; flex-direction: column; gap: 0; margin: 16px 0 24px; border: 1px solid var(--hair); border-radius: var(--r-md); overflow: hidden; }
.tpp .compare-table .cmp-row { display: grid; grid-template-columns: 220px 1fr; gap: 16px; padding: 14px 16px; border-bottom: 1px solid var(--hair); font-size: 14px; line-height: 1.55; }
.tpp .compare-table .cmp-row:last-child { border-bottom: 0; }
.tpp .compare-table .cmp-head { background: var(--ink); color: var(--acc); font-family: var(--fm); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.tpp .compare-table .cmp-row strong { font-weight: 700; color: var(--ink); }
@media (max-width: 720px) {
  .tpp .compare-table .cmp-row { grid-template-columns: 1fr; gap: 4px; }
}

/* FAQ accordion */
.tpp .faq-item { border-bottom: 1px solid var(--hair); padding: 0; }
.tpp .faq-item:first-child { border-top: 1px solid var(--hair); }
.tpp .faq-q { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 18px 0; cursor: pointer; font-family: var(--fb); font-weight: 700; font-size: 15.5px; color: var(--ink); }
.tpp .faq-q .plus { width: 28px; height: 28px; border-radius: 50%; background: var(--paper-2); display: inline-flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 400; color: var(--ink); flex-shrink: 0; transition: transform .18s var(--ease), background .14s ease, color .14s ease; }
.tpp .faq-item.open .faq-q .plus { transform: rotate(45deg); background: #3D4A2A; color: #EFF5E8; }
.tpp .faq-a { display: none; padding: 0 0 18px; font-size: 14.5px; line-height: 1.65; color: var(--slate); }
.tpp .faq-a p { margin: 0; max-width: 64ch; }
.tpp .faq-item.open .faq-a { display: block; }

/* === TAB SECTION POLISH: shared bits === */
.tpp .cl { font-family: var(--fm); font-size: 10.5px; text-transform: uppercase; letter-spacing: .10em; font-weight: 700; color: var(--slate); display: block; margin-bottom: 10px; }

/* === TASTE & TEXTURE === */
.tpp .flavour-arc { background: linear-gradient(135deg, var(--tea-brown) 0%, #3D2A1F 100%); color: #eff7f6; border-radius: var(--r-xl); padding: 28px 28px 24px; margin: 12px 0 28px; }
.tpp .flavour-arc .arc-curve { width: 100%; height: 70px; display: block; margin-bottom: 14px; }
.tpp .flavour-arc .arc-stops { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.tpp .arc-stop { display: flex; flex-direction: column; gap: 4px; }
.tpp .arc-stop .arc-dot { width: 12px; height: 12px; border-radius: 50%; margin-bottom: 6px; box-shadow: 0 0 12px currentColor; }
.tpp .arc-stop .arc-stage { font-family: var(--fm); font-size: 10.5px; text-transform: uppercase; letter-spacing: .10em; font-weight: 700; color: rgba(239,247,246,.5); }
.tpp .arc-stop .arc-flavour { font-family: var(--fd); font-style: italic; font-weight: 400; font-size: 22px; color: #eff7f6; line-height: 1.1; }
.tpp .arc-stop .arc-note { font-size: 13px; color: rgba(239,247,246,.72); line-height: 1.55; margin-top: 4px; }

.tpp .taste-grid { display: grid; grid-template-columns: 200px 1fr; gap: 20px; margin: 0 0 24px; align-items: start; }
.tpp .taste-liquor { background: linear-gradient(180deg, #FFFFFF 0%, #DDE9DD 100%); border: 1px solid rgba(94,112,69,.14); border-radius: var(--r-xl); padding: 18px 16px; text-align: center; box-shadow: 0 3px 12px -4px rgba(94,112,69,.14); }
.tpp .liquor-cup { width: 120px; height: 120px; margin: 4px auto 8px; filter: drop-shadow(0 4px 12px rgba(201,132,42,.35)); }
.tpp .liquor-cup svg { width: 100%; height: 100%; }
.tpp .liquor-label { font-family: var(--fb); font-weight: 700; font-size: 14px; color: var(--ink); display: block; }
.tpp .liquor-hex { font-family: var(--fm); font-size: 11px; color: var(--slate); font-weight: 600; display: block; margin-top: 2px; }
.tpp .taste-dims { background: linear-gradient(180deg, #FFFFFF 0%, #E5EEDA 100%); border-radius: var(--r-xl); padding: 18px 20px; border: 1.5px solid rgba(94,112,69,.14); display: flex; flex-direction: column; gap: 14px; box-shadow: 0 3px 12px -4px rgba(94,112,69,.14); }
.tpp .dim-row { display: flex; flex-direction: column; gap: 4px; }
.tpp .dim-head { display: flex; justify-content: space-between; align-items: center; }
.tpp .dim-nm { font-family: var(--fb); font-weight: 700; font-size: 14.5px; color: var(--ink); }
.tpp .dim-score { font-family: var(--fm); font-size: 11px; font-weight: 700; color: var(--slate); }
.tpp .dim-dots { display: inline-flex; gap: 5px; margin: 2px 0 2px; }
.tpp .dim-dots .dd { width: 14px; height: 14px; border-radius: 50%; background: var(--ash); transition: background .35s var(--ease), transform .35s var(--ease); transition-delay: var(--dd-delay, 0ms); }
.tpp .dim-dots .dd.on { background: var(--dd-color, var(--ink)); transform: scale(1); }
@keyframes tppDotPop { from { transform: scale(0); opacity: .3; } to { transform: scale(1); opacity: 1; } }
.tpp .tab-pane.on .dim-dots .dd.on { animation: tppDotPop .45s var(--ease) both; animation-delay: var(--dd-delay, 0ms); }
.tpp .dim-note { font-size: 13px; color: var(--slate); line-height: 1.5; }

.tpp .taste-pairing { background: linear-gradient(135deg, #FFF8EC, #F8ECCC); border: 1px solid rgba(201,132,42,.20); border-radius: var(--r-xl); padding: 22px 24px; margin: 0 0 28px; }
/* 2026-05-12: pair-chips section header, readable. Sentence-case sans bold,
   teapot icon prefix, dots after. Anchors the start of the Taste tab. */
.tpp .taste-pairing .tp-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.tpp .taste-pairing .tp-head-ic { font-size: 22px; line-height: 1; flex-shrink: 0; }
.tpp .taste-pairing .tp-head-text { font-family: var(--fb); font-weight: 800; font-size: 17px; color: #042220; letter-spacing: -.005em; line-height: 1.2; }
.tpp .taste-pairing .tp-head .dot-pulse { margin-left: 2px; }
.tpp .taste-pairing .tp-head .dot-pulse > span { width: 6px; height: 6px; }
/* 2026-05-12: 6 pulsing dots after "You'll enjoy this if you like" so the
   section feels alive instead of static. Staggered animation makes it read
   as a wave rather than a flicker. */
.tpp .dot-pulse { display: inline-flex; gap: 3px; margin-left: 6px; vertical-align: middle; align-items: center; }
.tpp .dot-pulse > span { width: 5px; height: 5px; border-radius: 50%; background: currentColor; display: inline-block; opacity: .25; animation: tpp-dot-pulse 1.6s ease-in-out infinite; }
.tpp .dot-pulse > span:nth-child(1) { animation-delay: 0s; }
.tpp .dot-pulse > span:nth-child(2) { animation-delay: .12s; }
.tpp .dot-pulse > span:nth-child(3) { animation-delay: .24s; }
.tpp .dot-pulse > span:nth-child(4) { animation-delay: .36s; }
.tpp .dot-pulse > span:nth-child(5) { animation-delay: .48s; }
.tpp .dot-pulse > span:nth-child(6) { animation-delay: .60s; }
@keyframes tpp-dot-pulse {
  0%, 100% { opacity: .22; transform: scale(.82); }
  50%      { opacity: 1;   transform: scale(1.18); }
}
@media (prefers-reduced-motion: reduce) {
  .tpp .dot-pulse > span { animation: none; opacity: .55; }
}
/* Subtle continuous flavour-arc breathing, the arc curve's middle gradient
   stop drifts slowly along the line so the arc never reads as a static SVG.
   Range is tiny (offsets .42 → .58) and easing is smooth so the effect is felt
   not noticed, the kind of detail Lee asked for that makes every product
   render feel slightly different in time. */
.tpp .flavour-arc .arc-curve path { animation: tpp-arc-breathe 11s ease-in-out infinite; }
@keyframes tpp-arc-breathe {
  0%, 100% { stroke-width: 2.5; opacity: .92; }
  50%      { stroke-width: 3.2; opacity: 1; }
}
.tpp .flavour-arc .arc-dot { animation: tpp-arc-dot-breathe 4.5s ease-in-out infinite; }
.tpp .flavour-arc .arc-stop:nth-child(2) .arc-dot { animation-delay: 1.5s; }
.tpp .flavour-arc .arc-stop:nth-child(3) .arc-dot { animation-delay: 3s; }
@keyframes tpp-arc-dot-breathe {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 0 0 currentColor; opacity: .92; }
  50%      { transform: scale(1.18); box-shadow: 0 0 0 4px rgba(255,255,255,.08); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .tpp .flavour-arc .arc-curve path, .tpp .flavour-arc .arc-dot { animation: none; }
}
.tpp .pair-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 24px; }
.tpp .pair-chips--bottom { margin-top: 14px; }
.tpp .pair-chip { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; background: var(--paper-2); border-radius: var(--r-pill); font-family: var(--fb); font-weight: 700; font-size: 13.5px; color: var(--ink); border: 1px solid var(--hair-2); text-decoration: none; flex-shrink: 0; }
.tpp .pair-chips .pair-chip.pair-chip--link:hover, .tpp .pair-chips-marquee .pair-chip:hover { background: #EFF5E8; border-color: rgba(94,112,69,.30); }

/* 2026-05-12: pair-chips marquee, continuous horizontal scroll. The chip set
   is duplicated in PHP; the track translates -50% so the loop is seamless. */
.tpp .pair-chips-marquee {
  overflow: hidden;
  margin: 14px 0 24px;
  padding: 4px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.tpp .pair-chips-track {
  display: inline-flex;
  gap: 10px;
  white-space: nowrap;
  animation: tpp-pair-scroll 84s linear infinite;
  will-change: transform;
}
.tpp .pair-chips-marquee:hover .pair-chips-track { animation-play-state: paused; }
@keyframes tpp-pair-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .tpp .pair-chips-track { animation: none; flex-wrap: wrap; white-space: normal; }
}

@media (max-width: 720px) {
  .tpp .flavour-arc .arc-stops { grid-template-columns: 1fr; gap: 16px; }
  .tpp .taste-grid { grid-template-columns: 1fr; }
}

/* === BRAND & SUSTAINABILITY === */
.tpp .founders { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0 0 24px; }
.tpp .founder { background: var(--paper-2); border-radius: var(--r-xl); padding: 16px 18px; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; gap: 2px 14px; align-items: start; }
.tpp .founder .f-av { grid-column: 1; grid-row: 1 / span 2; width: 48px; height: 48px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: var(--fd); font-style: italic; font-weight: 400; font-size: 24px; color: #0A0B0F; margin-bottom: 0; align-self: center; }
.tpp .founder .f-nm { grid-column: 2; grid-row: 1; font-family: var(--fb); font-weight: 800; font-size: 17px; color: var(--ink); letter-spacing: -.01em; align-self: end; }
.tpp .founder .f-role { grid-column: 2; grid-row: 2; font-family: var(--fm); font-size: 11px; font-weight: 600; color: var(--slate); text-transform: uppercase; letter-spacing: .06em; align-self: start; }
.tpp .founder .f-bio { grid-column: 1 / -1; grid-row: 3; font-family: var(--fd); font-style: italic; font-weight: 400; font-size: 15px; color: var(--ink); line-height: 1.45; margin-top: 10px; }

.tpp .brand-timeline { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 0 0 24px; padding: 28px 8px 8px; }
.tpp .brand-timeline .bt-rail { position: absolute; left: 30px; right: 30px; top: 40px; height: 2px; background: repeating-linear-gradient(to right, var(--ash) 0 6px, transparent 6px 12px); z-index: 0; }
.tpp .bt-step { display: flex; flex-direction: column; gap: 4px; position: relative; z-index: 1; padding: 0 8px; }
.tpp .bt-dot { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--ash); margin: 0 0 12px; }
.tpp .bt-step.active .bt-dot { background: var(--acc); border-color: #042220; box-shadow: 0 0 0 6px rgba(255,179,71,.22); }
.tpp .bt-yr { font-family: var(--fd); font-style: italic; font-weight: 400; font-size: 32px; color: var(--ink); letter-spacing: -.018em; line-height: 1; }
.tpp .bt-step.active .bt-yr { color: var(--acc); }
.tpp .bt-h { font-family: var(--fb); font-weight: 800; font-size: 14.5px; color: var(--ink); margin-top: 4px; }
.tpp .bt-p { font-size: 12.5px; color: var(--slate); line-height: 1.5; max-width: 22ch; }
@media (max-width: 760px) {
  .tpp .brand-timeline { grid-template-columns: 1fr 1fr; }
  .tpp .brand-timeline .bt-rail { display: none; }
}

.tpp .vs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 0 0 24px; }
.tpp .vs-card { background: var(--paper-2); border-radius: var(--r-xl); padding: 20px 22px; display: flex; flex-direction: column; gap: 8px; position: relative; }
.tpp a.vs-card--link { text-decoration: none; color: inherit; transition: transform .15s, box-shadow .15s; }
.tpp a.vs-card--link:hover { transform: translateY(-2px); box-shadow: 0 8px 24px -10px rgba(14,15,18,.18); }
.tpp .vs-card .vs-arr { position: absolute; top: 16px; right: 18px; font-size: 18px; color: var(--slate); opacity: 0; transition: opacity .15s, transform .15s; }
.tpp a.vs-card--link:hover .vs-arr { opacity: 1; transform: translateX(2px); }
.tpp .vs-card-cover { position: absolute; inset: 0; z-index: 1; }
.tpp .vs-card-cover:focus-visible { outline: 2px solid var(--acc); outline-offset: 4px; border-radius: var(--r-xl); }
.tpp .vs-card.vs-card--link { transition: transform .15s, box-shadow .15s; }
.tpp .vs-card.vs-card--link:hover { transform: translateY(-2px); box-shadow: 0 8px 24px -10px rgba(14,15,18,.18); }
.tpp .vs-card .vs-card-add { position: absolute; bottom: 14px; right: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; background: var(--buy-grad); color: #1A1410; border-radius: var(--r-pill); font-family: var(--fb); font-weight: 800; font-size: 11px; text-decoration: none; box-shadow: 0 2px 8px -2px rgba(58,75,42,.45); transition: transform .15s, box-shadow .15s; }
.tpp .vs-card .vs-card-add:hover { transform: translateY(-1px); box-shadow: 0 4px 12px -2px rgba(216,108,66,.6); }
.tpp .vs-card .vs-card-add svg { width: 12px; height: 12px; stroke: #1A1410; }
.tpp .vs-card .vs-card-add.added::after { content: '✓ Added'; }
.tpp .vs-card .vs-card-add.loading { opacity: .6; pointer-events: none; }
/* Bottom padding so the absolute add-button doesn't overlap the body text */
.tpp .vs-card.vs-card--link { padding-bottom: 52px; }
.tpp .vs-card.vs-this { background: linear-gradient(135deg, var(--petrol), #122B36); color: #eff7f6; }
.tpp .vs-card.vs-this .vs-stat .vs-k { color: rgba(239,247,246,.5); }
.tpp .vs-card.vs-this .vs-stat .vs-v { color: var(--acc); }
.tpp .vs-tag { font-family: var(--fm); font-size: 10.5px; font-weight: 700; color: var(--slate); text-transform: uppercase; letter-spacing: .08em; }
.tpp .vs-this .vs-tag { color: var(--acc); }
.tpp .vs-h { font-family: var(--fb); font-weight: 800; font-size: 16px; letter-spacing: -.01em; line-height: 1.2; }
.tpp .vs-stats { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; padding-top: 10px; border-top: 1px solid rgba(14,15,18,.08); }
.tpp .vs-this .vs-stats { border-top-color: rgba(239,247,246,.12); }
.tpp .vs-stat { display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; }
.tpp .vs-stat .vs-k { font-family: var(--fm); font-weight: 600; color: var(--slate); }
.tpp .vs-stat .vs-v { font-family: var(--fb); font-weight: 700; color: var(--ink); }
.tpp .vs-note { font-size: 12.5px; color: var(--slate); line-height: 1.5; margin: 6px 0 0; }
@media (max-width: 760px) { .tpp .vs-grid { grid-template-columns: 1fr; } }

.tpp .sus-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0 0 12px; }
.tpp .sus-card { background: linear-gradient(180deg, #FFFFFF 0%, #FAFCF8 100%); border: 1px solid rgba(94,112,69,.14); border-radius: var(--r-xl); padding: 16px 18px; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; gap: 2px 14px; align-items: start; text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; box-shadow: 0 2px 8px -4px rgba(94,112,69,.12); }
.tpp a.sus-card:hover { transform: translateY(-1px); }  /* 2026-05-12: orange border-colour hover removed per Lee's ask. */
.tpp .sus-ic { grid-column: 1; grid-row: 1 / span 2; width: 40px; height: 40px; border-radius: 11px; background: #E6F7EC; color: #1F8847; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 0; align-self: center; }
.tpp .sus-ic svg { width: 24px; height: 24px; }
.tpp .sus-h { grid-column: 2; grid-row: 1; font-family: var(--fb); font-weight: 800; font-size: 15px; color: var(--ink); letter-spacing: -.005em; align-self: end; }
.tpp .sus-mat { grid-column: 2; grid-row: 2; font-family: var(--fm); font-size: 11px; font-weight: 700; color: #8B5A2B; text-transform: uppercase; letter-spacing: .04em; align-self: start; }
.tpp .sus-p { grid-column: 1 / -1; grid-row: 3; font-size: 13px; color: var(--slate); line-height: 1.55; margin-top: 8px; }
@media (max-width: 720px) { .tpp .sus-grid { grid-template-columns: 1fr; } }

/* === RECIPE IDEAS === */
.tpp .r-card { background: var(--paper-2); border-radius: var(--r-xl); padding: 0; overflow: hidden; margin: 16px 0 24px; }
.tpp .r-card .r-head { padding: 20px 24px 12px; border-bottom: 1px solid var(--hair); display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.tpp .r-card .r-head h4 { font-family: var(--fb); font-weight: 800; font-size: 22px; color: var(--ink); margin: 0; letter-spacing: -.015em; }
.tpp .r-card .r-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.tpp .r-card .r-mb { display: inline-flex; align-items: center; gap: 6px; background: #fff; padding: 6px 12px; border-radius: var(--r-pill); font-family: var(--fm); font-size: 11px; font-weight: 700; color: var(--ink); border: 1px solid var(--hair); }
.tpp .r-card .r-mb svg { width: 13px; height: 13px; color: var(--slate); }
.tpp .r-card .r-diff { display: inline-flex; gap: 3px; }
.tpp .r-card .r-diff .dd { width: 7px; height: 7px; border-radius: 50%; background: var(--ash); }
.tpp .r-card .r-diff .dd.on { background: var(--acc); }
.tpp .r-card .r-body { display: grid; grid-template-columns: 280px 1fr; gap: 24px; padding: 20px 24px; }
.tpp .r-ingr-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.tpp .r-ingr-list li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; line-height: 1.4; color: var(--ink); }
.tpp .ing-ic { width: 28px; height: 28px; border-radius: 50%; background: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; border: 1px solid var(--hair); }
.tpp .r-steps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; counter-reset: step; }
.tpp .r-steps li { display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: flex-start; font-size: 14.5px; line-height: 1.55; color: var(--ink); }
.tpp .step-n { width: 28px; height: 28px; border-radius: 50%; background: #1A2A52; color: #C7D3F0; display: inline-flex; align-items: center; justify-content: center; font-family: var(--fb); font-weight: 800; font-size: 13px; flex-shrink: 0; margin-top: 2px; }
.tpp .r-steps li strong { font-weight: 700; }
.tpp .r-card .recipe-share { padding: 14px 24px 20px; border-top: 1px solid var(--hair); }
@media (max-width: 760px) {
  .tpp .r-card .r-body { grid-template-columns: 1fr; }
}

/* === SCIENCE & NUTRITION: caffeine compare === */
.tpp .caf-compare { background: var(--paper-2); border-radius: var(--r-xl); padding: 18px 20px; margin: 16px 0 28px; display: flex; flex-direction: column; gap: 10px; }
.tpp .caf-row { display: grid; grid-template-columns: 180px 1fr 60px; gap: 12px; align-items: center; padding: 8px 0; }
.tpp .caf-row.highlight { background: linear-gradient(90deg, rgba(255,179,71,.18), transparent 90%); border-radius: 8px; padding: 10px 12px; margin: 0 -12px; }
.tpp .caf-row.highlight .caf-nm { color: var(--ink); font-weight: 800; }
.tpp .caf-nm { font-family: var(--fb); font-weight: 600; font-size: 13.5px; color: var(--ink); }
.tpp .caf-rail { height: 8px; border-radius: 4px; background: var(--white); border: 1px solid var(--hair); overflow: hidden; }
.tpp .caf-fill { height: 100%; border-radius: 4px; transition: width 1.1s var(--ease); }
.tpp .caf-row.tone-mist  .caf-fill { background: var(--mist); }
.tpp .caf-row.tone-lime  .caf-fill { background: linear-gradient(90deg, #6FA821, var(--lime)); }
.tpp .caf-row.tone-acc   .caf-fill { background: linear-gradient(90deg, var(--acc), #D88B2C); }
.tpp .caf-row.tone-slate .caf-fill { background: var(--slate); }
.tpp .caf-row.tone-ink   .caf-fill { background: var(--ink); }
.tpp .caf-row.tone-berry .caf-fill { background: linear-gradient(90deg, var(--berry), #B22072); }
.tpp .caf-val { font-family: var(--fm); font-weight: 800; font-size: 13.5px; color: var(--ink); text-align: right; }
.tpp .caf-val .u { font-weight: 500; color: var(--slate); font-size: 11px; margin-left: 1px; }
.tpp .caf-note { font-size: 13px; color: var(--ink); line-height: 1.55; margin: 8px 0 0; padding: 12px 14px; background: #fff; border-radius: var(--r-md); border-left: 3px solid var(--acc); }
@media (max-width: 720px) { .tpp .caf-row { grid-template-columns: 1fr; } .tpp .caf-rail { margin: 4px 0; } }

/* Allergen tile row */
.tpp .allergen-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0 0 24px; }
/* 2026-05-12 v6: tiles are now HORIZONTAL, icon LEFT, title + body stacked
   to its right. Halves card height vs the old column layout while keeping
   the amber icon chip + cream tile palette. */
.tpp .al-tile {
  display: grid;
  grid-template-columns: 36px 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 2px;
  align-items: center;
  padding: 10px 14px;
  border-radius: var(--r-md);
  border: 1.5px solid;
}
.tpp .al-tile.al-ok, .tpp .al-tile.al-warn { background: linear-gradient(180deg, #FFFFFF 0%, #EFF5E8 100%) !important; border-color: rgba(94,112,69,.14) !important; color: var(--ink) !important; }
/* 2026-05-12: paired-with list inside science & nutrition right column. */
.tpp .sn-aside-card .sn-pair-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tpp .sn-aside-card .sn-pair-list li { font-size: 13.5px; line-height: 1.45; color: var(--ink); padding: 6px 0; border-bottom: 1px solid rgba(46,38,32,.08); }
.tpp .sn-aside-card .sn-pair-list li:last-child { border-bottom: 0; }
.tpp .sn-aside-card .sn-pair-list li strong { font-weight: 800; color: var(--ink); font-family: var(--fb); }
.tpp .al-tile .al-ic { grid-row: 1 / span 2; grid-column: 1; margin: 0; font-size: 18px; align-self: center; }
.tpp .al-tile .al-h  { grid-row: 1; grid-column: 2; align-self: end;   font-family: var(--fb); font-weight: 800; font-size: 14px; color: inherit; letter-spacing: -.005em; line-height: 1.2; }
.tpp .al-tile .al-p  { grid-row: 2; grid-column: 2; align-self: start; font-size: 12.5px; line-height: 1.4; color: inherit; opacity: .8; }
@media (max-width: 720px) { .tpp .allergen-row { grid-template-columns: 1fr; } }

/* Storage card */
.tpp .storage-card { display: grid; grid-template-columns: 64px 1fr; gap: 14px; padding: 20px 22px; background: var(--paper-2); border-radius: var(--r-xl); align-items: flex-start; margin: 0 0 24px; }

/* === Science & Nutrition 2-col layout (added 2026-05-11) ===
   Replaces the old single-column stack where each section was 60ch wide
   and the right half of the panel was empty. Narrative left + companion
   data widget right. Each row reads as one big paired unit. */
.tpp .sn-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 32px;
  margin: 0 0 28px;
  align-items: stretch;
}
.tpp .sn-grid h3:first-child { margin-top: 0; }
/* 2026-05-12: narrative column is a flex stack so we can pin the Storage card
   to its bottom edge, that lines its bottom up with the right-column's
   Ingredients & pack info card. */
/* 2026-05-12 v6: deterministic column balance. Both .sn-narrative and
   .sn-aside use justify-content: space-between. CSS Grid's default
   align-items: stretch makes both columns the same height; space-between
   distributes their children so the FIRST sits at the top and the LAST
   sits at the bottom of each column. Both columns start at the same Y
   AND end at the same Y, with the inter-card gap evenly absorbed in
   the middle. No more last-child margin tricks. */
.tpp .sn-narrative {
  min-width: 0;
  display: flex; flex-direction: column;
  justify-content: flex-start;
  gap: 8px;
}
.tpp .sn-narrative p { max-width: none; margin: 0 0 8px; }
.tpp .sn-narrative h3 { margin: 6px 0 8px; line-height: 1.2; }
.tpp .sn-narrative h4 { margin: 8px 0 4px; line-height: 1.2; }
.tpp .sn-narrative h4 + p { margin-top: 2px; }
.tpp .sn-narrative > div + h3 { margin-top: 4px; }
.tpp .sn-aside {
  display: flex; flex-direction: column;
  justify-content: flex-start;
  gap: 20px;
  min-width: 0;
}
.tpp .sn-aside-card {
  background: var(--paper-2);
  border-radius: var(--r-xl);
  padding: 14px 18px;
  border: 1px solid var(--hair-2);
}
.tpp .sn-aside-card h4 {
  font-family: var(--fb);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -.005em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--hair);
  letter-spacing: .04em;
}
.tpp .sn-aside-card p { font-size: 13.5px; line-height: 1.55; margin: 0 0 8px; max-width: none; }
.tpp .sn-aside-card p:last-child { margin-bottom: 0; }
.tpp .sn-aside-note { font-size: 12.5px; color: var(--slate); margin: 12px 0 0 !important; padding-top: 10px; border-top: 1px solid var(--hair); }
.tpp .sn-storage-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--hair);
}
.tpp .sn-storage-stats > div { display: flex; flex-direction: column; gap: 2px; }
.tpp .sn-storage-stats .v { font-family: var(--fd); font-size: 20px; font-weight: 400; line-height: 1.1; color: var(--ink); letter-spacing: -.01em; }
.tpp .sn-storage-stats .l { font-family: var(--fm); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--slate); }
@media (max-width: 900px) {
  .tpp .sn-grid { grid-template-columns: 1fr; gap: 20px; }
}

/* === 2026-05-15 (Lee): deterministic paired-row modular Science layout ===
   Each .sn-row is its own 2-col grid; align-items:stretch forces the LEFT
   and RIGHT .sn-mod in a row to identical rendered height. Columns cannot
   drift apart regardless of how much content each module carries. */
.tpp .sn-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  margin:0 0 24px;
  align-items:stretch;
}
.tpp .sn-mod{
  background:var(--paper-2);
  border:1px solid var(--hair-2);
  border-radius:var(--r-xl);
  padding:18px 22px;
  height:100%;
  display:flex;
  flex-direction:column;
  min-width:0;
}
.tpp .sn-mod > h3{
  font-family:var(--fb);
  font-size:15px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--slate);
  margin:0 0 14px;
  padding-bottom:10px;
  border-bottom:1px solid var(--hair);
}
.tpp .sn-mod > h3 em{ font-style:normal; color:var(--ink); }
.tpp .sn-mod p{ font-size:13.5px; line-height:1.6; margin:0 0 10px; max-width:none; }
.tpp .sn-mod p:last-child{ margin-bottom:0; }
.tpp .sn-mod ul{ margin:0 0 4px; padding-left:18px; }
.tpp .sn-mod li{ font-size:13px; line-height:1.5; margin:0 0 6px; }
.tpp .sn-mod table{ width:100%; border-collapse:collapse; }
.tpp .sn-mod table td,.tpp .sn-mod table th{ vertical-align:top; padding:6px 14px 6px 0; line-height:1.45; }
.tpp .sn-mod table th{ font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--slate); padding-bottom:8px; }
.tpp .sn-mod table td{ font-size:13px; }
.tpp .sn-mod .nutri-table,
.tpp .sn-mod .caf-compare{ margin-top:2px; }
.tpp .sn-mod .sn-aside-note{ padding-top:12px; }
@media (max-width:900px){
  .tpp .sn-row{ grid-template-columns:1fr; gap:16px; margin-bottom:16px; }
}

/* === FAQ 2-col grid (added 2026-05-11) ===
   Was 6 FAQ items in a single stacked column, left the right half of the
   panel empty. Now 2-col at desktop. Items still expand independently. */
.tpp .faq-grid {
  /* 2026-05-13: switched from display:grid to CSS multi-column so each
     column flows independently. The default-open first card was creating
     a 200px whitespace in the top-right when the right column did not
     have a tall card. Multi-column lets each column size to its content. */
  column-count: 2;
  column-gap: 32px;
  margin: 24px 0 0;
}
.tpp .faq-grid .faq-item { break-inside: avoid; margin-bottom: 12px; display: inline-block; width: 100%; }
/* 2026-05-13: MOST ASKED first card spans both columns at top, so the right column does not sit level with the expanded top widget. Remaining 13 items flow in 2-col multi-column below. */
.tpp .faq-grid .faq-item:first-child { -webkit-column-span: all; column-span: all; display: block !important; width: 100%; margin: 0 0 24px; box-sizing: border-box; }
@media (max-width: 900px) { .tpp .faq-grid { column-count: 1; column-gap: 0; } }

/* === Brand & Sustainability, Founders + Timeline paired row ===
   Two big content blocks side-by-side instead of stacked. Each subsection
   has its own small uppercase mono header so the eye knows where it is. */
.tpp .bs-row-title { margin: 0 0 14px !important; }
.tpp .bs-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 0 0 28px;
  align-items: stretch;
}
.tpp .bs-row-left, .tpp .bs-row-right {
  background: var(--paper-2);
  border: 1px solid var(--hair-2);
  border-radius: var(--r-2xl);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.tpp .bs-row .founders {
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 0;
}
.tpp .bs-row .founder { background: #fff; }
.tpp .bs-row .brand-timeline {
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 0;
  padding: 14px 4px 0;
  background: transparent;
}
.tpp .bs-row .brand-timeline .bt-rail { display: none; }
/* 2026-05-12: timeline cells compacted, year drops from a 32px display
   font down to a small pill chip that sits inline at the top of the card.
   That alone removes ~30px of vertical space per cell so the right-hand
   timeline column finally matches the founders column on height. */
.tpp .bs-row .bt-step {
  background: #fff;
  border: 1px solid var(--hair-2);
  border-radius: var(--r-md);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
}
/* 2026-05-12 v2: timeline year pill goes high-contrast, dark tea-brown chip
   with amber text so the year reads as the clear anchor of each card. Previous
   light-grey-on-light-card was unreadable. */
.tpp .bs-row .bt-step .bt-yr {
  font-family: var(--fb);
  font-style: normal;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .01em;
  color: var(--acc);
  background: var(--tea-brown);
  padding: 4px 11px;
  border-radius: 999px;
  align-self: flex-start;
  line-height: 1.2;
  margin: 0;
}
.tpp .bs-row .bt-step.active .bt-yr {
  background: var(--acc);
  color: #1A1410;
  box-shadow: 0 0 0 3px rgba(255,179,71,.18);
}
.tpp .bs-row .bt-step .bt-dot { display: none; }
.tpp .bs-row .bt-step .bt-h { margin-top: 2px; font-size: 13.5px; line-height: 1.3; }
.tpp .bs-row .bt-step .bt-p { font-size: 12px; line-height: 1.45; max-width: none; }
.tpp .bs-row .founder { padding: 14px 16px; }
.tpp .bs-row .founder .f-bio { font-size: 14px; line-height: 1.45; margin-top: 8px; }
.tpp .bs-sub-h {
  font-family: var(--fm);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .10em;
  color: var(--slate);
  font-weight: 700;
  margin: 0 0 12px;
}
@media (max-width: 900px) {
  .tpp .bs-row { grid-template-columns: 1fr; gap: 20px; }
  .tpp .bs-row .brand-timeline { grid-template-columns: 1fr 1fr; }
}
.tpp .st-ic { width: 56px; height: 56px; border-radius: 14px; background: #fff; display: inline-flex; align-items: center; justify-content: center; color: var(--ink); }
.tpp .st-ic svg { width: 28px; height: 28px; }
.tpp .st-body p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.6; color: var(--ink); max-width: 60ch; }
.tpp .st-stats { display: grid; grid-template-columns: repeat(3, auto); gap: 18px; }
.tpp .st-stat { display: flex; flex-direction: column; gap: 2px; }
.tpp .st-stat .v { font-family: var(--fb); font-weight: 800; font-size: 18px; color: var(--ink); }
.tpp .st-stat .l { font-family: var(--fm); font-size: 10.5px; font-weight: 600; color: var(--slate); text-transform: uppercase; letter-spacing: .06em; }
@media (max-width: 600px) { .tpp .st-stats { grid-template-columns: 1fr; } }

/* === FAQ v2 with category icons === */
.tpp .faq-v2 { border: 1px solid var(--hair); border-radius: var(--r-md); margin-bottom: 10px; padding: 0; transition: background .14s ease, border-color .14s ease; }
.tpp .faq-v2:first-child { border-top: 1px solid var(--hair); }
.tpp .faq-v2.open { background: linear-gradient(180deg, #FAFCF8 0%, #EFF5E8 100%); border-color: #3D4A2A; }
.tpp .faq-v2 .faq-q { display: grid; grid-template-columns: 44px 1fr 32px; gap: 14px; padding: 16px 18px; cursor: pointer; align-items: center; }
.tpp .faq-cat { width: 36px; height: 36px; border-radius: 50%; background: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; border: 1px solid var(--hair); flex-shrink: 0; }
.tpp .faq-v2.open .faq-cat { background: #3D4A2A; border-color: #3D4A2A; }
.tpp .faq-q-text { font-family: var(--fb); font-weight: 700; font-size: 15px; color: var(--ink); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tpp .faq-pop { font-family: var(--fm); font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink); background: var(--lime); padding: 3px 8px; border-radius: var(--r-pill); }
.tpp .faq-v2 .faq-a { padding: 0 18px 16px 76px; }

@media (max-width: 980px) {
  .tpp .product-title { font-size: 36px; }
  .tpp .tabs-section { padding: 0; }
  .tpp .tab-btn { padding: 12px 14px 14px; font-size: 13px; }
  .tpp .delivery-row { grid-template-columns: 1fr; }
}

/* === STICKY ACTION BAR ===
   Slides up from the bottom when the primary buy-row scrolls off-screen.
   Mirrors the Add-to-basket / Quick Buy actions so the conversion path is
   always one click away from any tab or scroll position. */
.tpp-sticky-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 9000;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-top: 1px solid rgba(14,15,18,.08);
  box-shadow: 0 -8px 24px -8px rgba(14,15,18,.18);
  transform: translateY(100%);
  transition: transform .35s cubic-bezier(.32,.72,0,1);
  font-family: 'DM Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: #042220;
}
.tpp-sticky-bar.is-visible { transform: translateY(0); }
/* 2026-05-12 v3: sticky-bar rebuilt. Big centred price column, three
   commerce buttons (Add → Quick → Subscribe) in the orange family with
   tonal differences. Help widget recoloured navy in site-polish.php. */
.tpp-sticky-bar .tsb-inner {
  max-width: 1380px;
  margin: 0 auto;
  padding: 10px 20px;
  display: grid;
  grid-template-columns: 56px 1fr auto auto;
  gap: 14px;
  align-items: center;
}
.tpp-sticky-bar .tsb-thumb {
  width: 56px; height: 56px; border-radius: 10px; object-fit: cover;
  background: #FAF8F3;
  padding: 4px;
  box-shadow: inset 0 0 0 1px rgba(14,15,18,.08);
}
.tpp-sticky-bar .tsb-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tpp-sticky-bar .tsb-brand {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #5C6270;
}
.tpp-sticky-bar .tsb-title {
  font-size: 14px; font-weight: 700; letter-spacing: -.005em; color: #042220;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* PRICE COLUMN, bigger, centred. */
.tpp-sticky-bar .tsb-price {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; padding: 0 6px;
}
.tpp-sticky-bar .tsb-amount {
  font-family: var(--fb), 'DM Sans', system-ui, sans-serif;
  font-weight: 800; font-size: 26px; color: #042220; letter-spacing: -.02em; line-height: 1;
}
.tpp-sticky-bar .tsb-percup {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 11px; font-weight: 600; color: #D86C42; letter-spacing: .02em;
  text-align: center;
}
/* PRIMARY, Add to basket (full orange, strongest weight). */
.tpp-sticky-bar .tsb-add {
  display: inline-flex; align-items: center; gap: 8px;
  height: 46px; padding: 0 22px; border-radius: 12px;
  background: linear-gradient(135deg, #5E7045 0%, #3D4A2A 55%, #2A331C 100%);
  color: #1F1814;
  font-weight: 800; font-size: 14px; letter-spacing: -.005em;
  text-decoration: none;
  box-shadow:
    0 1px 0 rgba(255,255,255,.55) inset,
    0 4px 14px rgba(58,75,42,.42);
  transition: transform .14s ease, box-shadow .2s ease, filter .14s ease;
  white-space: nowrap;
}
.tpp-sticky-bar .tsb-add:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow:
    0 1px 0 rgba(255,255,255,.55) inset,
    0 8px 24px rgba(58,75,42,.55);
}
.tpp-sticky-bar .tsb-add svg { width: 15px; height: 15px; stroke: #1F1814; }
/* 2026-05-12 v2: bounce animation removed, Lee disliked it. The orange
   gradient + warm shadow already give enough visual emphasis. */
/* SECONDARY, Quick Buy (lighter amber gradient). */
.tpp-sticky-bar .tsb-qb {
  display: inline-flex; align-items: center; gap: 6px;
  height: 46px; padding: 0 18px; border-radius: 12px;
  background: linear-gradient(135deg, #FFE0A8 0%, #FFC078 55%, #FFA64D 100%);
  color: #4A2F12;
  border: 1px solid rgba(216,108,66,.30);
  font-weight: 800; font-size: 13px; letter-spacing: -.005em;
  text-decoration: none;
  box-shadow:
    0 1px 0 rgba(255,255,255,.55) inset,
    0 3px 10px rgba(216,108,66,.25);
  transition: transform .14s ease, filter .14s ease;
  white-space: nowrap;
}
.tpp-sticky-bar .tsb-qb:hover { transform: translateY(-1px); filter: brightness(1.06); }
.tpp-sticky-bar .tsb-qb svg { width: 14px; height: 14px; stroke: #4A2F12; }
/* TERTIARY, Subscribe & Save (deep terracotta, recurring revenue). */
.tpp-sticky-bar .tsb-subs {
  display: inline-flex; align-items: center; gap: 8px;
  height: 46px; padding: 0 20px; border-radius: 12px;
  background: linear-gradient(135deg, #E07E3F 0%, #C56236 55%, #8E4624 100%);
  color: #FFF6E8;
  font-weight: 800; font-size: 13px; letter-spacing: -.005em;
  text-decoration: none;
  box-shadow:
    0 1px 0 rgba(255,255,255,.30) inset,
    0 3px 12px rgba(142,70,36,.42);
  transition: transform .14s ease, filter .14s ease;
  white-space: nowrap;
}
.tpp-sticky-bar .tsb-subs:hover { transform: translateY(-1px); filter: brightness(1.07); }
.tpp-sticky-bar .tsb-subs svg { width: 14px; height: 14px; stroke: #FFF6E8; }
/* 2026-05-12: the fake yellow Help button was scrapped, the site-wide
   floating-contact widget (inc/site-polish.php) drops down to sit inside the
   sticky bar's right-hand slot instead. The sticky bar reserves ~170px on its
   right via padding-right so its content stops short of the floating widget.
   The .tpp wrapper keeps its bottom-padding so the TrustPilot widget below
   isn't covered by the floating bar. */
.tpp-sticky-bar .tsb-inner { padding-right: 180px !important; }
/* 2026-05-21 Lee: was 96px which created visible white gap before footer. Sticky bar is 77px tall, so 20px gives it clearance without leaving dead space when bar hides at page bottom. */
.tpp { padding-bottom: 20px !important; }
@media (max-width: 760px) {
  /* Mobile: sticky bar already hides via the legacy media query; the floating
     widget reclaims its normal bottom-right position. */
  .tpp-sticky-bar .tsb-inner { padding-right: 20px !important; }
}
@media (max-width: 760px) {
  .tpp-sticky-bar .tsb-inner { grid-template-columns: 44px 1fr auto; gap: 10px; padding: 10px 12px; }
  .tpp-sticky-bar .tsb-thumb { width: 44px; height: 44px; }
  .tpp-sticky-bar .tsb-price { display: none; }
  .tpp-sticky-bar .tsb-add { height: 42px; padding: 0 16px; font-size: 13px; }
  .tpp-sticky-bar .tsb-add span { display: none; }
  .tpp-sticky-bar .tsb-add::after { content: 'Add'; }
}

/* === BRAND TAB v2026-05-15 (Lee: compact tiles + vertical timeline) === */
/* Compact the founder / key-fact tiles - Lee: "tiles are too big" */
.tpp .bs-row .founders { gap: 10px; }
.tpp .bs-row .founder { padding: 12px 14px; }
.tpp .bs-row .founder .f-av { width: 38px; height: 38px; font-size: 18px; }
.tpp .bs-row .founder .f-nm { font-size: 15px; }
.tpp .bs-row .founder .f-role { font-size: 10px; }
.tpp .bs-row .founder .f-bio { font-size: 12.5px; line-height: 1.42; margin-top: 6px; }
/* Timeline: cramped 2-col grid -> proper vertical rail that fills the column
   so left (founders) and right (timeline) end on the same pixel. */
.tpp .bs-row .brand-timeline {
  display: flex; flex-direction: column; justify-content: space-between;
  grid-template-columns: none; gap: 0; padding: 6px 4px 6px 24px;
  position: relative; height: 100%;
}
.tpp .bs-row .brand-timeline .bt-rail {
  display: block; left: 7px; right: auto; top: 8px; bottom: 8px;
  width: 2px; height: auto;
  background: var(--hair-2);
}
.tpp .bs-row .bt-step {
  position: relative; background: transparent; border: 0; border-radius: 0;
  padding: 0 0 0 16px; gap: 3px; flex: 0 0 auto;
}
.tpp .bs-row .bt-step + .bt-step { margin-top: 16px; }
.tpp .bs-row .bt-step::before {
  content: ""; position: absolute; left: -22px; top: 3px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--tea-brown); border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--hair-2);
}
.tpp .bs-row .bt-step.active::before { background: var(--acc); box-shadow: 0 0 0 3px rgba(255,179,71,.20); }
.tpp .bs-row .bt-step .bt-h { margin-top: 1px; font-size: 13.5px; line-height: 1.3; }
.tpp .bs-row .bt-step .bt-p { font-size: 12px; line-height: 1.45; }
@media (max-width: 900px) {
  .tpp .bs-row .brand-timeline { justify-content: flex-start; }
  .tpp .bs-row .bt-step + .bt-step { margin-top: 14px; }
}

/* === BRAND TAB v2 2026-05-15b (founders column fills like timeline) === */
/* The left founders/key-facts column must fill the row the same way the
   right timeline does. Two short founder cards were leaving a ~115px dead
   zone at the bottom (Teapigs: L_gap 115 vs R_gap 30). Fix: the cards
   share the column height equally and centre their own content, so the
   column fills evenly with no per-brand quote padding. */
.tpp .bs-row .founders {
  display: flex; flex-direction: column;
  gap: 14px; flex: 1 1 auto;
}
.tpp .bs-row .founders > .founder {
  flex: 1 1 0;
  align-content: center;   /* base .founder is display:grid - centre rows */
}

/* 2026-05-16: .bc-add / .tsb-add converted to <button> (real WooCommerce
   quantity form). Neutralise UA/Blocksy native button chrome so they render
   pixel-identically to the previous styled anchors. */
.tpp .buy-combo button.bc-add,
.tpp-sticky-bar button.tsb-add { border: 0; cursor: pointer; -webkit-appearance: none; appearance: none; font-family: var(--fb); }

/* =====================================================================
   2026-05-16  PRODUCT-PAGE DESIGN RETHEME  (Product Page.html palette)
   Append-only override. Re-skins the platinum template's olive/amber/grey
   system to the design's cyan #5eead4 + navy #0a4444 on white. No existing
   selector edited or removed — cascade/last-wins only. Fully reversible
   (delete from this banner down to restore). Scoped to .tpp.
   ===================================================================== */
.tpp{
  --paper:#ffffff; --paper-2:#f4f6f9; --white:#ffffff;
  --hair:rgba(4,34,32,.10); --hair-2:#f4f6f9; --ash:rgba(4,34,32,.10);
  --acc:#5eead4; --cyan:#5eead4;
  --buy-grad:linear-gradient(155deg,#0e6868 0%,#0a4444 55%,#042220 100%);
  --buy-grad-hover:linear-gradient(155deg,#34466e 0%,#26365a 55%,#18233b 100%);
  background:#ffffff;
}
.tpp-sticky-bar{ --acc:#5eead4; }

/* Primary action buttons -> navy slate-grad (design .pdp-add / .us-add) */
.tpp .buy-combo .bc-add,
.tpp .buy-combo .bc-final-subs-btn,
.tpp-sticky-bar .tsb-add{
  background:linear-gradient(155deg,#0e6868 0%,#0a4444 55%,#042220 100%) !important;
  color:#ffffff !important;
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 8px 22px -8px rgba(19,28,48,.55) !important;
}
.tpp .buy-combo .bc-add svg,
.tpp .buy-combo .bc-final-subs-btn svg,
.tpp-sticky-bar .tsb-add svg{ stroke:#ffffff !important; }

/* Curator rating stars -> design green #0e8a3e */
.tpp .stars,
.tpp .curator-score--big .curator-stars,
.tpp .trust-card .trust-curator-row .curator-stars{ color:#0e8a3e !important; filter:drop-shadow(0 1px 2px rgba(14,138,62,.40)); }
.tpp .curator-stars .star.star--full,
.tpp .curator-stars .star.star--half-fill,
.tpp .stars svg{ fill:#0e8a3e !important; }
.tpp .curator-stars .star.star--empty{ fill:rgba(14,15,18,.16) !important; }

/* Stock badges -> cyan tint (design .pdp-stock) */
.tpp .stock-notice.good,
.tpp .stock-pill.stock-pill--big,
.tpp .buy-combo .bc-stock{
  background:linear-gradient(135deg,rgba(94,234,212,.12) 0%,rgba(94,234,212,.03) 100%) !important;
  color:#0fc4a8 !important;
  border-color:rgba(94,234,212,.32) !important;
}
.tpp .stock-notice.good .pip,
.tpp .stock-pill.stock-pill--big .stock-pip,
.tpp .buy-combo .bc-stock-pip{ background:#5eead4 !important; box-shadow:0 0 0 3px rgba(94,234,212,.20) !important; }

/* Loyalty banner -> cyan tint (design .pdp-loyalty) */
.tpp .loyalty-banner{
  background:linear-gradient(135deg,rgba(94,234,212,.10) 0%,rgba(94,234,212,.02) 100%) !important;
  border-color:rgba(94,234,212,.28) !important;
}
.tpp .loyalty-banner-ic{ background:linear-gradient(155deg,#0e6868 0%,#0a4444 55%,#042220 100%) !important; color:#5eead4 !important; }
.tpp .loyalty-row .pts{ background:#042220 !important; color:#5eead4 !important; }

/* Per-cup price number -> cyan (design .pdp-price-num-cyan) */
.tpp .buy-combo .bc-col--right > .bc-val,
.tpp .buy-combo .bc-col--right > .bc-val sup,
.tpp .buy-combo .bc-col--right > .bc-val sub{ color:#0fc4a8 !important; }
.tpp-sticky-bar .tsb-percup{ color:#0fc4a8 !important; }
/* up-percup colour now set in the main rule above - no override needed */

/* Tabs -> cyan active top-border, neutral hover (design .ov-tab) */
.tpp .tab-btn:hover{ background:#f4f6f9 !important; color:#042220 !important; }
.tpp .tab-btn.on{ border-top:3px solid #5eead4 !important; }

/* Link underline accent -> cyan */
.tpp a.ov-link:hover,
.tpp .ov-col a.ov-link:hover{ text-decoration-color:#0fc4a8 !important; }

/* Bottom row: light-teal Subscribe (left) | dark-navy Skip (right)
   — design .pdp-subscribe / .pdp-skip two-tone split */
.tpp .buy-combo .bc-final{
  background:linear-gradient(155deg,#e8f5f4 0%,#c8e0dd 100%) !important;
  border-top-color:rgba(28,109,114,.22) !important;
}
.tpp .buy-combo .bc-final-subs{ border-right-color:rgba(28,109,114,.22) !important; }
.tpp .buy-combo .bc-final .bc-subs-ttl,
.tpp .buy-combo .bc-final .bc-subs-new{ color:#103a3c !important; }
.tpp .buy-combo .bc-final .bc-subs-new .bc-subs-per,
.tpp .buy-combo .bc-final .bc-subs-old,
.tpp .buy-combo .bc-final .bc-subs-sub{ color:#1c5d5e !important; }
.tpp .buy-combo .bc-final .bc-subs-save{
  background:#103a3c !important; color:#5eead4 !important;
  box-shadow:0 3px 8px -2px rgba(16,58,60,.40) !important;
}
.tpp .buy-combo .bc-final-subs-btn{
  background:#103a3c !important; color:#5eead4 !important;
  box-shadow:0 8px 20px -8px rgba(16,58,60,.55),0 1px 0 rgba(255,255,255,.18) inset !important;
}
.tpp .buy-combo .bc-final-subs-btn svg{ stroke:#5eead4 !important; }
/* Skip panel -> dark navy with polish (2026-05-21 Lee: was rendering badly — square corners,
   no shadow, and floating in the cell with cream margins around it. Now: rounded corners,
   shadow, cyan glow, and align-self:stretch so it FILLS the grid cell flush with the
   Subscribe & Save panel next to it. Justify-content:center pushes content to the centre
   of the now-taller panel. */
.tpp .buy-combo .bc-final-qb-wrap{
  background:linear-gradient(155deg,#0e6868 0%,#0a4444 55%,#042220 100%) !important;
  background-image:
    radial-gradient(circle at 78% 18%, rgba(94,234,212,.18), transparent 55%),
    linear-gradient(155deg,#0e6868 0%,#0a4444 55%,#042220 100%) !important;
  /* 2026-05-21 Lee: removed 14px rounding because Subscribe panel is square and the rounded
     corners on Skip were showing cream wedges of the parent buybox bg behind them. Square
     matches Subscribe, fills cell flush, no visual mismatch. */
  border-radius: 0 !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  box-shadow:
    0 8px 24px -8px rgba(31,44,71,.40),
    0 2px 4px -2px rgba(31,44,71,.25),
    0 1px 0 rgba(255,255,255,.10) inset !important;
  align-self: stretch !important;
  height: 100% !important;
  justify-content: center !important;
}
.tpp .buy-combo .bc-final-qb-ttl{ color:#ffffff !important; }
.tpp .buy-combo .bc-final-qb-sub{ color:rgba(255,255,255,.72) !important; }
.tpp .buy-combo .bc-final-qb{
  background:#5eead4 !important; color:#042220 !important;
  box-shadow:0 8px 20px -8px rgba(94,234,212,.50),0 1px 0 rgba(255,255,255,.25) inset !important;
}
.tpp .buy-combo .bc-final-qb svg{ stroke:#042220 !important; }

/* Caffeine compare: highlighted "this tea" row + its bar -> cyan */
.tpp .caf-row.highlight{ background:linear-gradient(90deg,rgba(94,234,212,.16),transparent 90%) !important; }
.tpp .caf-row.tone-acc .caf-fill{ background:linear-gradient(90deg,#5eead4,#0fc4a8) !important; }
.tpp .caf-note{ border-left-color:#5eead4 !important; }

/* Product Questions / FAQ open-state -> navy + cyan (was olive/lime) */
.tpp .faq-item.open .faq-q .plus{ background:#042220 !important; color:#5eead4 !important; }
.tpp .faq-v2.open{ background:linear-gradient(180deg,#f4fdfd 0%,#e3f7f7 100%) !important; border-color:rgba(94,234,212,.45) !important; }
.tpp .faq-v2.open .faq-cat{ background:linear-gradient(155deg,#0e6868 0%,#0a4444 55%,#042220 100%) !important; border-color:transparent !important; }
.tpp .faq-pop{ background:#5eead4 !important; color:#0e1320 !important; }

/* STAFF PICK hero badge -> navy slate-grad (design .pdp-tag) */
.tpp .main-img .badge-img{
  background:linear-gradient(155deg,#0e6868 0%,#0a4444 55%,#042220 100%) !important;
  color:#ffffff !important;
  box-shadow:0 2px 8px rgba(19,28,48,.30) !important;
}
/* Upsell "shares X" reason badge -> cyan (design .us-badge) */
.tpp .up-reason-tag{ background:#5eead4 !important; color:#0e1320 !important; }
/* (us-tier-tag tinting handled inline per-rail in template to match image 1:
   Lee's pick + Same brand = cyan, Similar style = grey default) */
/* Buy-box trust card -> clean white + cyan->navy top accent bar (design .pdp-top::before) */
.tpp .trust-card{ background:#ffffff !important; border-color:rgba(4,34,32,.10) !important; position:relative; }
/* 2026-05-21 Lee: blue/teal strip on trust-card removed per request */
/* "L" curator avatar -> navy slate-grad (design .pdp-rating-avatar) */
.tpp .trust-card .trust-curator-row .av,
.tpp .curator-score--big .av{
  background:linear-gradient(155deg,#0e6868 0%,#0a4444 55%,#042220 100%) !important;
  color:#ffffff !important;
}
/* Upsell star rating glyph -> green (consistency with curator stars) */
.tpp .up-stars .stars::before{ color:#0e8a3e !important; }

/* Inactive tab buttons -> neutral grey (design .ov-tab, was olive) */
.tpp .tab-btn{
  background:#f4f6f9 !important;
  border-color:rgba(4,34,32,.10) !important;
  color:#0e6868 !important;
}
/* Upsell eyebrow pip -> cyan (design .eyebrow .dot, was terracotta) */
.tpp .us-h-mini-pip{ background:#5eead4 !important; }
/* ===================== END DESIGN RETHEME ===================== */


/* =====================================================================
   2026-05-17  STAGE 1 — PRODUCT PAGE MOBILE FIX  (Claude)
   Root cause: .loyalty-marquee-track has white-space:nowrap (intrinsic
   width ~2749px). With default min-width:auto on the flex/grid items,
   that nowrap line forced .buybox + the .product-hero grid item to its
   content's min-content width (~2749px), shoving the entire product
   page off-screen on mobile -> the "blank void". This clips the marquee
   and lets the flex/grid items shrink, so the hero reflows to one clean
   mobile column (image -> title -> price -> add to cart -> tabs).
   Append-only, reversible: delete from this banner down.
   ===================================================================== */

/* 1. The marquee must never drive layout width — clip it, animate inside */
.tpp .loyalty-banner-marquee { overflow: hidden; min-width: 0; max-width: 100%; }
.tpp .loyalty-marquee-track  { min-width: 0; }

/* 2. Let every flex/grid descendant shrink below its content size */
.tpp .product-hero, .tpp .product-hero > *,
.tpp .buybox, .tpp .buybox > *,
.tpp .buy-combo, .tpp .buy-combo > *,
.tpp .trust-card, .tpp .trust-card > *,
.tpp .loyalty-banner, .tpp .loyalty-banner > *,
.tpp .stock-notify, .tpp .stock-notify > * { min-width: 0; }

@media (max-width: 1180px) {
  /* One real mobile column — minmax(0,1fr) kills the auto-min blowout */
  .tpp .product-hero { grid-template-columns: minmax(0, 1fr) !important; gap: 20px !important; }
  .tpp .gallery, .tpp .main-img { width: 100% !important; max-width: 100% !important; }
  .tpp .main-img img { width: 100%; height: auto; }
  .tpp .buybox,
  .tpp .trust-card, .tpp .loyalty-banner,
  .tpp .buy-combo, .tpp .stock-notify { max-width: 100%; }
  .tpp .curator-score-text, .tpp .trust-curator-row, .tpp .trust-facts { max-width: 100%; }
}

/* 3. Phone: belt-and-braces against any residual side-scroll + tighten */
@media (max-width: 768px) {
  .tpp { overflow-x: hidden; }
  .tpp .shell { max-width: 100%; padding-left: 16px; padding-right: 16px; }
  .tpp .product-hero { margin-bottom: 20px; }
  .tpp .gallery { margin: 0 auto 4px; }
  .tpp .thumbs { flex-wrap: wrap; }
}

/* ===========================================================================
   TPP Recipe Cards — appended 2026-05-21
   Renders inside #tab-ri when _teas_use_recipe_cards postmeta = 1.
   Internal SEO: cards link to canonical /recipes/<hub>/<slug>/ pages.
   =========================================================================== */
.tpp-recipe-cards-wrap { margin: 0; padding: 0; }
.tpp-recipe-cards-intro { margin: 0 0 20px; }
.tpp-recipe-cards-h {
  font-family: var(--font-h, "DM Sans", system-ui, sans-serif);
  font-size: 22px; font-weight: 700; color: var(--ink, #0e1c2c);
  margin: 0 0 10px; line-height: 1.25;
}
.tpp-recipe-cards-lead {
  font-size: 15.5px; line-height: 1.6; color: var(--slate, #475569);
  margin: 0 0 4px; max-width: none;
}
.tpp-recipe-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 0;
}
.tpp-recipe-card {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 14px;
  padding: 18px 18px 16px;
  text-decoration: none !important;
  color: var(--ink, #0e1c2c);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  position: relative;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
.tpp-recipe-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(15,23,42,0.08);
  border-color: var(--accent, #0e7c5b);
  color: var(--ink, #0e1c2c);
}
.tpp-rc-hub {
  display: inline-block;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--accent, #0e7c5b);
  background: rgba(14,124,91,0.08);
  padding: 4px 10px;
  border-radius: 999px;
  margin: 0 0 12px;
  align-self: flex-start;
}
.tpp-rc-title {
  font-family: var(--font-h, "DM Sans", system-ui, sans-serif);
  font-size: 17px; font-weight: 700; line-height: 1.3;
  margin: 0 0 8px;
  color: var(--ink, #0e1c2c);
}
.tpp-rc-intro {
  font-size: 13.5px; line-height: 1.5;
  color: var(--slate, #475569);
  margin: 0 0 12px;
  flex-grow: 1;
}
.tpp-rc-meta {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 0 0 12px;
}
.tpp-rc-chip {
  font-size: 11.5px; font-weight: 500;
  color: var(--slate, #475569);
  background: var(--bg-soft, #f4f6f9);
  padding: 4px 9px;
  border-radius: 6px;
  white-space: nowrap;
}
.tpp-rc-cta {
  font-size: 13px; font-weight: 600;
  color: var(--accent, #0e7c5b);
  margin-top: auto;
  display: inline-block;
}
.tpp-recipe-card:hover .tpp-rc-cta { text-decoration: underline; }

/* Tablet: 2 cols */
@media (max-width: 1023px) {
  .tpp-recipe-cards-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
/* Mobile: 1 col */
@media (max-width: 639px) {
  .tpp-recipe-cards-grid { grid-template-columns: 1fr; gap: 12px; }
  .tpp-recipe-cards-h { font-size: 20px; }
  .tpp-recipe-card { padding: 16px; }
  .tpp-rc-title { font-size: 16px; }
}