/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root{
  /* Base palette. The dark base exists so the five bottle colours carry
     all the colour in the design. Do not add a sixth accent. */
  --tf-ink:        #080B12;   /* page background            */
  --tf-slate:      #111726;   /* raised surface             */
  --tf-slate-2:    #192133;   /* hover / nested surface     */
  --tf-bone:       #F2F4F8;   /* primary text               */
  --tf-mist:       #8E99AC;   /* secondary text             */
  --tf-line:       rgba(242,244,248,.12);
  --tf-line-soft:  rgba(242,244,248,.06);

  /* Active flavour. Overwritten at runtime by TFFlavour.set().
     Default is Blue Raspberry. */
  --tf-core:  #2453C6;
  --tf-lift:  #4A7BFF;
  --tf-deep:  #12307E;
  --tf-grad:  linear-gradient(135deg, #4A7BFF 0%, #2453C6 48%, #12307E 100%);
  --tf-glow:  rgba(74,123,255,.38);

  /* Type */
  --tf-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --tf-body:    "Inter", "Helvetica Neue", Arial, sans-serif;

  /* Type scale. Fluid, clamped. Ratio approx 1.28 (major third-ish),
     tightened at the top so headlines stay controlled on wide screens. */
  --tf-t-xs:  0.8125rem;
  --tf-t-sm:  0.9375rem;
  --tf-t-md:  1.0625rem;
  --tf-t-lg:  clamp(1.25rem, 1.05rem + 0.7vw,  1.5rem);
  --tf-t-xl:  clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem);
  --tf-t-2xl: clamp(2.4rem,  1.7rem  + 2.9vw, 4rem);
  --tf-t-3xl: clamp(3.2rem,  2.0rem  + 5.2vw, 6.5rem);

  /* Layout */
  --tf-max:     1280px;
  --tf-gutter:  clamp(1.25rem, 0.7rem + 2.2vw, 3rem);
  --tf-radius:  14px;
  --tf-radius-lg: 24px;

  /* Spacing, 8pt */
  --tf-s1: 8px;  --tf-s2: 16px; --tf-s3: 24px; --tf-s4: 32px;
  --tf-s5: 48px; --tf-s6: 64px; --tf-s7: 96px; --tf-s8: 128px;

  /* Motion */
  --tf-ease:  cubic-bezier(.22,.61,.36,1);
  --tf-ease-out: cubic-bezier(.16,1,.3,1);
  --tf-dur:   .55s;
}

/* Flavour presets. Applied by adding data-tf-flavour to any element,
   or set globally on <html> by the flavour engine below. */
[data-tf-flavour="blue-raspberry"]{
  --tf-core:#2453C6; --tf-lift:#4A7BFF; --tf-deep:#12307E;
  --tf-grad:linear-gradient(135deg,#4A7BFF 0%,#2453C6 48%,#12307E 100%);
  --tf-glow:rgba(74,123,255,.38);
}
[data-tf-flavour="mango"]{
  --tf-core:#F5B00D; --tf-lift:#FFCE45; --tf-deep:#B87A00;
  --tf-grad:linear-gradient(135deg,#FFCE45 0%,#F5B00D 48%,#B87A00 100%);
  --tf-glow:rgba(255,206,69,.38);
}
[data-tf-flavour="granny-smith"]{
  --tf-core:#55B32B; --tf-lift:#7FD94F; --tf-deep:#2F6E15;
  --tf-grad:linear-gradient(135deg,#7FD94F 0%,#55B32B 48%,#2F6E15 100%);
  --tf-glow:rgba(127,217,79,.38);
}
[data-tf-flavour="orange"]{
  --tf-core:#F4791F; --tf-lift:#FF9A48; --tf-deep:#B04B08;
  --tf-grad:linear-gradient(135deg,#FF9A48 0%,#F4791F 48%,#B04B08 100%);
  --tf-glow:rgba(255,154,72,.38);
}
[data-tf-flavour="strawberry"]{
  --tf-core:#F4586B; --tf-lift:#FF8090; --tf-deep:#B02A3C;
  --tf-grad:linear-gradient(135deg,#FF8090 0%,#F4586B 48%,#B02A3C 100%);
  --tf-glow:rgba(255,128,144,.38);
}

/* --------------------------------------------------------------------------
   2. RESET + PORTO OVERRIDES
   Porto injects its own container padding and link colours. These
   selectors are deliberately scoped to .tf so nothing leaks into
   the WP admin bar or Porto's own header while we build.
   -------------------------------------------------------------------------- */
body.tf-page{
  background: var(--tf-ink);
  color: var(--tf-bone);
  font-family: var(--tf-body);
  font-size: var(--tf-t-md);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.tf-page #main,
body.tf-page .main-content,
body.tf-page .page-content,
body.tf-page .container,
body.tf-page .vc_row{
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: none !important;
  background: transparent;
}
body.tf-page .wpb_content_element{ margin-bottom: 0 !important; }

.tf *,
.tf *::before,
.tf *::after{ box-sizing: border-box; }

.tf h1,.tf h2,.tf h3,.tf h4{
  font-family: var(--tf-display);
  font-variation-settings: "wdth" 115, "wght" 800;
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0 0 var(--tf-s3);
  color: var(--tf-bone);
  text-wrap: balance;
}
.tf h1{ font-size: var(--tf-t-3xl); letter-spacing:-0.035em; }
.tf h2{ font-size: var(--tf-t-2xl); letter-spacing:-0.028em; }
.tf h3{ font-size: var(--tf-t-xl);  }
.tf h4{ font-size: var(--tf-t-lg);  }

.tf p{ margin: 0 0 var(--tf-s3); max-width: 68ch; color: var(--tf-mist); }
.tf p.tf-lead{ font-size: var(--tf-t-lg); color: var(--tf-bone); max-width: 56ch; }
.tf a{ color: inherit; text-decoration: none; }
.tf img{ max-width: 100%; height: auto; display: block; }
.tf ul{ margin:0; padding:0; list-style:none; }

/* --------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.tf-wrap{
  width: 100%;
  max-width: var(--tf-max);
  margin-inline: auto;
  padding-inline: var(--tf-gutter);
}
.tf-section{ position: relative; padding-block: clamp(64px, 8vw, 128px); }
.tf-section--tight{ padding-block: clamp(48px, 5vw, 80px); }

/* The bottle label's repeating outlined wordmark, reused as page texture.
   Sits behind content at very low opacity. */
.tf-texture{ position: relative; isolation: isolate; }
.tf-texture::before{
  content: "TRYFECTA TRYFECTA TRYFECTA TRYFECTA TRYFECTA TRYFECTA TRYFECTA TRYFECTA TRYFECTA";
  position: absolute; inset: -10% -20%;
  z-index: -1; pointer-events: none;
  font-family: var(--tf-display);
  font-variation-settings: "wdth" 125, "wght" 900;
  font-size: clamp(80px, 13vw, 190px);
  line-height: .92;
  word-spacing: .4em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--tf-core);
  opacity: .05;
  overflow: hidden;
  user-select: none;
}

/* --------------------------------------------------------------------------
   4. BUTTONS
   Two levels only. Primary carries the flavour gradient, secondary is a
   hairline. Resisting a third variant keeps the flavour colour meaningful.
   -------------------------------------------------------------------------- */
.tf-btn{
  --_pad: 16px 30px;
  display: inline-flex; align-items: center; gap: 10px;
  padding: var(--_pad);
  font-family: var(--tf-display);
  font-variation-settings: "wdth" 105, "wght" 700;
  font-size: var(--tf-t-sm);
  letter-spacing: .01em;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform .35s var(--tf-ease-out), box-shadow .35s var(--tf-ease-out);
  will-change: transform;
}
.tf-btn--primary{
  background: var(--tf-grad);
  color: #fff;
  box-shadow: 0 8px 26px -10px var(--tf-glow);
}
.tf-btn--primary:hover{ transform: translateY(-2px); box-shadow: 0 16px 40px -12px var(--tf-glow); }
.tf-btn--ghost{
  background: transparent; color: var(--tf-bone);
  border-color: var(--tf-line);
}
.tf-btn--ghost:hover{ border-color: var(--tf-core); background: rgba(255,255,255,.03); }
.tf-btn:focus-visible{ outline: 2px solid var(--tf-lift); outline-offset: 3px; }

/* --------------------------------------------------------------------------
   5. SMALL SHARED PIECES
   -------------------------------------------------------------------------- */
.tf-rule{ height:1px; background: var(--tf-line); border:0; margin:0; }

.tf-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 14px; border-radius:999px;
  border:1px solid var(--tf-line);
  background: rgba(255,255,255,.02);
  font-size: var(--tf-t-xs); color: var(--tf-mist);
}
.tf-chip b{ color: var(--tf-bone); font-weight:600; }

/* --------------------------------------------------------------------------
   6. REVEAL ENGINE (CSS half)
   One reveal utility, used only where a section genuinely benefits.
   Elements are visible by default so the page never depends on JS.
   -------------------------------------------------------------------------- */
.tf-js [data-tf-reveal]{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .8s var(--tf-ease-out), transform .8s var(--tf-ease-out);
  transition-delay: var(--tf-delay, 0s);
}
.tf-js [data-tf-reveal].is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .tf-js [data-tf-reveal]{ opacity:1 !important; transform:none !important; transition:none !important; }
  .tf *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  html{ scroll-behavior: auto !important; }
}

/* --------------------------------------------------------------------------
   7. ACCESSIBILITY
   -------------------------------------------------------------------------- */
.tf-sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.tf :focus-visible{ outline: 2px solid var(--tf-lift); outline-offset: 3px; border-radius: 4px; }
::selection{ background: var(--tf-core); color:#fff; }
/* ==========================================================================
   TRYFECTA — 02 HEADER
   Append this to the END of assets/tryfecta.css
   ========================================================================== */

.tf-header-wrap{
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 900;
}
body.admin-bar .tf-header-wrap{ top: 32px; }
@media (max-width: 782px){ body.admin-bar .tf-header-wrap{ top: 46px; } }

/* --------------------------------------------------------------------------
   Announcement bar
   Carries the live flavour gradient, so the very top edge of the page
   re-themes with the bottle the visitor is looking at.
   -------------------------------------------------------------------------- */
.tf-announce{
  background: var(--tf-grad);
  color: #fff;
  height: 38px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  font-size: var(--tf-t-xs);
  letter-spacing: .01em;
}
.tf-announce__track{ position: relative; height: 38px; width: 100%; }
.tf-announce__item{
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: translateY(100%);
  transition: opacity .5s var(--tf-ease-out), transform .5s var(--tf-ease-out);
}
.tf-announce__item.is-on{ opacity: 1; transform: none; }
.tf-announce__item.is-out{ opacity: 0; transform: translateY(-100%); }

/* --------------------------------------------------------------------------
   Header bar
   Transparent while sitting over the hero, solid once you scroll past it.
   -------------------------------------------------------------------------- */
.tf-header{
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .4s var(--tf-ease), border-color .4s var(--tf-ease),
              backdrop-filter .4s var(--tf-ease);
}
.tf-header.is-stuck{
  background: rgba(8,11,18,.78);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
          backdrop-filter: saturate(160%) blur(16px);
  border-bottom-color: var(--tf-line-soft);
}
.tf-header__inner{
  height: 76px;
  display: flex; align-items: center; gap: var(--tf-s4);
}
@media (max-width: 991px){ .tf-header__inner{ height: 62px; } }

/* Logo */
.tf-logo{
  font-family: var(--tf-display);
  font-variation-settings: "wdth" 125, "wght" 900;
  font-size: 22px;
  letter-spacing: -.01em;
  color: var(--tf-bone);
  line-height: 1;
  flex: 0 0 auto;
  padding: 6px 0;
}
.tf-logo:hover{ color: var(--tf-lift); }

/* Desktop nav */
.tf-nav{
  display: flex; align-items: center; gap: var(--tf-s4);
  margin-inline: auto;
}
.tf-nav a{
  position: relative;
  font-size: var(--tf-t-sm);
  font-weight: 500;
  color: var(--tf-mist);
  padding: 8px 0;
  transition: color .25s var(--tf-ease);
}
.tf-nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:2px; border-radius:2px; background: var(--tf-core);
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--tf-ease-out);
}
.tf-nav a:hover{ color: var(--tf-bone); }
.tf-nav a:hover::after,
.tf-nav a[aria-current="page"]::after{ transform: scaleX(1); }
.tf-nav a[aria-current="page"]{ color: var(--tf-bone); }
@media (max-width: 991px){ .tf-nav{ display:none; } }

/* Right-hand actions */
.tf-actions{ display:flex; align-items:center; gap: var(--tf-s2); flex: 0 0 auto; }

/* Language toggle */
.tf-lang{
  display:inline-flex; align-items:center;
  border:1px solid var(--tf-line); border-radius:999px;
  padding:3px; gap:2px;
}
.tf-lang button{
  appearance:none; border:0; background:transparent; cursor:pointer;
  font-family: var(--tf-body); font-size: 12px; font-weight:600;
  color: var(--tf-mist);
  padding: 5px 11px; border-radius:999px; line-height:1;
  transition: color .25s var(--tf-ease), background .25s var(--tf-ease);
}
.tf-lang button.is-on{ background: var(--tf-core); color:#fff; }
.tf-lang button:hover:not(.is-on){ color: var(--tf-bone); }

/* Cart */
.tf-cart{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:999px;
  border:1px solid var(--tf-line); color: var(--tf-bone);
  transition: border-color .25s var(--tf-ease), background .25s var(--tf-ease);
}
.tf-cart:hover{ border-color: var(--tf-core); background: rgba(255,255,255,.03); }
.tf-cart svg{ width:18px; height:18px; }
.tf-cart__count{
  position:absolute; top:-4px; right:-4px;
  min-width:18px; height:18px; padding:0 5px;
  border-radius:999px; background: var(--tf-core); color:#fff;
  font-size:10px; font-weight:700; line-height:18px; text-align:center;
}

/* Burger */
.tf-burger{
  display:none; appearance:none; background:transparent; cursor:pointer;
  width:40px; height:40px; border-radius:999px; border:1px solid var(--tf-line);
  align-items:center; justify-content:center; flex-direction:column; gap:5px;
}
.tf-burger span{
  display:block; width:17px; height:2px; border-radius:2px; background: var(--tf-bone);
  transition: transform .35s var(--tf-ease-out), opacity .2s linear;
}
.tf-burger.is-open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.tf-burger.is-open span:nth-child(2){ opacity:0; }
.tf-burger.is-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 991px){ .tf-burger{ display:flex; } }

/* --------------------------------------------------------------------------
   Mobile drawer
   -------------------------------------------------------------------------- */
.tf-drawer{
  position: fixed; inset: 0; z-index: 899;
  background: var(--tf-ink);
  padding: 120px var(--tf-gutter) var(--tf-s6);
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .4s var(--tf-ease-out), transform .4s var(--tf-ease-out), visibility .4s;
  overflow-y: auto;
}
.tf-drawer.is-open{ opacity:1; visibility:visible; transform:none; }
.tf-drawer a{
  font-family: var(--tf-display);
  font-variation-settings: "wdth" 112, "wght" 800;
  font-size: clamp(2rem, 9vw, 2.75rem);
  line-height: 1.1;
  color: var(--tf-bone);
  padding: 10px 0;
  border-bottom: 1px solid var(--tf-line-soft);
  transition: color .25s var(--tf-ease), padding-left .3s var(--tf-ease-out);
}
.tf-drawer a:hover{ color: var(--tf-core); padding-left: 10px; }
.tf-drawer__foot{ margin-top: auto; padding-top: var(--tf-s5); }
.tf-drawer .tf-btn{
  font-family: var(--tf-display);
  font-variation-settings: "wdth" 105, "wght" 700;
  font-size: var(--tf-t-sm);
  line-height: 1;
  border-bottom: 0;
  padding: 16px 30px;
  color: #fff;
}
.tf-drawer .tf-btn:hover{ color:#fff; padding-left: 30px; }
body.tf-drawer-open{ overflow: hidden; }

@media (prefers-reduced-motion: reduce){
  .tf-announce__item{ transition: none; }
  .tf-drawer{ transition: none; }
}
/* ==========================================================================
   TRYFECTA — 03 FOOTER
   Append this to the END of assets/tryfecta.css
   ========================================================================== */

.tf-footer{
  position: relative;
  background: var(--tf-ink);
  border-top: 1px solid var(--tf-line-soft);
  padding-top: clamp(56px, 6vw, 88px);
  overflow: hidden;
}

/* Column grid */
.tf-footer__cols{
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: var(--tf-s5) var(--tf-s4);
  padding-bottom: clamp(40px, 5vw, 64px);
}
@media (max-width: 991px){
  .tf-footer__cols{ grid-template-columns: 1fr 1fr; gap: var(--tf-s5) var(--tf-s3); }
  .tf-footer__brand{ grid-column: 1 / -1; }
}
@media (max-width: 560px){
  .tf-footer__cols{ grid-template-columns: 1fr; }
}

/* Brand column */
.tf-footer__logo{
  font-family: var(--tf-display);
  font-variation-settings: "wdth" 125, "wght" 900;
  font-size: 26px; line-height: 1;
  color: var(--tf-bone);
  display: inline-block; margin-bottom: var(--tf-s3);
}
.tf-footer__brand p{ font-size: var(--tf-t-sm); max-width: 34ch; margin-bottom: var(--tf-s3); }

.tf-footer__addr{
  font-size: var(--tf-t-xs);
  color: var(--tf-mist);
  line-height: 1.75;
  font-style: normal;
}
.tf-footer__addr a:hover{ color: var(--tf-core); }

/* Social */
.tf-social{ display:flex; gap:10px; margin-top: var(--tf-s3); }
.tf-social a{
  width:38px; height:38px; border-radius:999px;
  border:1px solid var(--tf-line);
  display:flex; align-items:center; justify-content:center;
  color: var(--tf-mist);
  transition: color .25s var(--tf-ease), border-color .25s var(--tf-ease), transform .25s var(--tf-ease-out);
}
.tf-social a:hover{ color: var(--tf-bone); border-color: var(--tf-core); transform: translateY(-2px); }
.tf-social svg{ width:16px; height:16px; }

/* Link columns */
.tf-footer__h{
  font-family: var(--tf-body);
  font-size: var(--tf-t-xs);
  font-weight: 600;
  color: var(--tf-bone);
  margin: 0 0 var(--tf-s2);
}
.tf-footer__list li{ margin-bottom: 10px; }
.tf-footer__list a{
  font-size: var(--tf-t-sm);
  color: var(--tf-mist);
  transition: color .2s var(--tf-ease);
}
.tf-footer__list a:hover{ color: var(--tf-bone); }

/* Flavour links carry their own dot, so the range reads as a range */
.tf-footer__list a[data-tf-dot]{ display:inline-flex; align-items:center; gap:9px; }
.tf-footer__list a[data-tf-dot]::before{
  content:""; width:8px; height:8px; border-radius:999px;
  background: var(--_dot); flex:0 0 auto;
}

/* Regulatory strip */
.tf-footer__reg{
  border-top: 1px solid var(--tf-line-soft);
  padding-block: var(--tf-s3);
  font-size: var(--tf-t-xs);
  color: var(--tf-mist);
  line-height: 1.7;
  max-width: 92ch;
}
.tf-footer__reg b{ color: var(--tf-bone); font-weight:600; }

/* Bottom bar */
.tf-footer__bottom{
  border-top: 1px solid var(--tf-line-soft);
  padding-block: var(--tf-s3);
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--tf-s2) var(--tf-s4);
  font-size: var(--tf-t-xs);
  color: var(--tf-mist);
}
.tf-footer__legal{ display:flex; flex-wrap:wrap; gap: var(--tf-s3); margin-left:auto; }
.tf-footer__legal a:hover{ color: var(--tf-bone); }
@media (max-width: 640px){ .tf-footer__legal{ margin-left:0; } }

/* Oversized wordmark, bled off the bottom edge.
   This is the one loud element in the footer, so everything above it stays quiet. */
.tf-footer__mark{
  display: block;
  width: 100%;
  margin-top: var(--tf-s3);
  margin-bottom: -0.22em;
  font-family: var(--tf-display);
  font-variation-settings: "wdth" 125, "wght" 900;
  font-size: clamp(64px, 15.5vw, 260px);
  line-height: .8;
  text-align: center;
  letter-spacing: -.03em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--tf-core);
  opacity: .22;
  user-select: none;
  pointer-events: none;
  white-space: nowrap;
}
/* ==========================================================================
   TRYFECTA — 03b HOVER PATCH
   Append this to the END of assets/tryfecta.css (after the footer CSS)

   Fixes hover jitter on any element that lifts on hover. The lift moves the
   element out from under the cursor at its bottom edge, which ends the hover,
   which drops it back, which restarts the hover. The ::after pseudo-element
   extends the hit area past the lift distance so that loop cannot start.
   ========================================================================== */

.tf .tf-social a{
  position: relative;
  transform: translate3d(0,0,0);
  backface-visibility: hidden;
  transition: transform .32s var(--tf-ease-out),
              color .32s var(--tf-ease-out),
              border-color .32s var(--tf-ease-out) !important;
}
.tf .tf-social a::after{
  content: "";
  position: absolute;
  inset: -6px;          /* hit area extends 6px past the visible circle */
  border-radius: 999px;
}
.tf .tf-social a:hover{ transform: translate3d(0,-3px,0); }
.tf .tf-social a svg{ pointer-events: none; }

/* Same guard for the primary buttons */
.tf .tf-btn{
  position: relative;
  transform: translate3d(0,0,0);
  backface-visibility: hidden;
}
.tf .tf-btn::after{
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 999px;
}
.tf .tf-btn--primary:hover{ transform: translate3d(0,-2px,0); }

/* And for the cart button in the header */
.tf .tf-cart{ position: relative; }
.tf .tf-cart::after{ content:""; position:absolute; inset:-5px; border-radius:999px; }
/* ==========================================================================
   TRYFECTA — 04 HERO
   Append this to the END of assets/tryfecta.css
   ========================================================================== */

.tf-hero{
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  padding-top: 150px;
  padding-bottom: clamp(56px, 7vw, 96px);
  overflow: hidden;
  isolation: isolate;
}
@media (max-width: 991px){ .tf-hero{ padding-top: 118px; min-height: 0; } }

/* Flavour glow. The only light source on the page. */
.tf-hero__glow{
  position: absolute; z-index: -2;
  top: 42%; left: 72%;
  width: min(78vw, 900px); aspect-ratio: 1;
  transform: translate(-50%,-50%) scale(.7);
  background: radial-gradient(circle at center, var(--tf-glow) 0%, transparent 66%);
  filter: blur(20px);
  opacity: 0;
  transition: opacity 1.1s var(--tf-ease-out), transform 1.1s var(--tf-ease-out),
              background .6s var(--tf-ease);
  pointer-events: none;
}
.tf-hero.is-ready .tf-hero__glow{ opacity:.85; transform: translate(-50%,-50%) scale(1); }
@media (max-width: 991px){ .tf-hero__glow{ top: 66%; left: 50%; } }

.tf-hero__grid{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  width: 100%;
}
@media (max-width: 991px){
  .tf-hero__grid{ grid-template-columns: 1fr; gap: var(--tf-s5); }
}

/* --------------------------------------------------------------------------
   Copy column
   -------------------------------------------------------------------------- */
.tf-hero__copy h1{ margin-bottom: var(--tf-s3); }
.tf-hero__copy .tf-lead{ margin-bottom: var(--tf-s4); }

.tf-hero__cta{ display:flex; flex-wrap:wrap; gap: var(--tf-s2); margin-bottom: var(--tf-s4); }

.tf-hero__chips{ display:flex; flex-wrap:wrap; gap: 10px; }

/* Load sequence. One orchestrated entrance, then the page is still. */
.tf-hero__copy > *{
  opacity: 0; transform: translateY(22px);
  transition: opacity .9s var(--tf-ease-out), transform .9s var(--tf-ease-out);
}
.tf-hero.is-ready .tf-hero__copy > *{ opacity:1; transform:none; }
.tf-hero.is-ready .tf-hero__copy > *:nth-child(1){ transition-delay:.05s; }
.tf-hero.is-ready .tf-hero__copy > *:nth-child(2){ transition-delay:.16s; }
.tf-hero.is-ready .tf-hero__copy > *:nth-child(3){ transition-delay:.27s; }
.tf-hero.is-ready .tf-hero__copy > *:nth-child(4){ transition-delay:.38s; }

/* --------------------------------------------------------------------------
   Bottle stage
   -------------------------------------------------------------------------- */
.tf-hero__stage{
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  gap: var(--tf-s4);
}

.tf-hero__bottles{
  position: relative;
  width: 100%;
  max-width: 460px;
  aspect-ratio: 1 / 1;
}
.tf-hero__bottles img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  opacity: 0;
  transform: scale(.94) translateY(14px);
  transition: opacity .55s var(--tf-ease-out), transform .55s var(--tf-ease-out);
  filter: drop-shadow(0 40px 60px rgba(0,0,0,.55));
}
.tf-hero__bottles img.is-on{ opacity:1; transform: none; }

.tf-hero.is-ready .tf-hero__bottles{ animation: tf-float 7s ease-in-out 1.2s infinite; }
@keyframes tf-float{
  0%,100%{ transform: translateY(0); }
  50%    { transform: translateY(-14px); }
}

/* Oversized flavour name sitting behind the bottle */
.tf-hero__word{
  position: absolute; z-index:-1;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  font-family: var(--tf-display);
  font-variation-settings: "wdth" 125, "wght" 900;
  font-size: clamp(38px, 6.5vw, 92px);
  line-height: .9;
  letter-spacing: -.035em;
  text-align: center;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--tf-core);
  opacity: .38;
  user-select: none; pointer-events: none;
  transition: opacity .35s var(--tf-ease);
}
.tf-hero__word.is-swapping{ opacity: 0; }

/* --------------------------------------------------------------------------
   Flavour selector
   -------------------------------------------------------------------------- */
.tf-flavours{
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px;
}
.tf-flavour{
  appearance: none; cursor: pointer;
  background: transparent;
  border: 1px solid var(--tf-line);
  border-radius: 999px;
  padding: 8px 15px 8px 9px;
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--tf-body); font-size: var(--tf-t-xs); font-weight: 500;
  color: var(--tf-mist);
  position: relative;
  transition: color .25s var(--tf-ease), border-color .25s var(--tf-ease),
              background .25s var(--tf-ease);
}
.tf-flavour::after{ content:""; position:absolute; inset:-5px; border-radius:999px; }
.tf-flavour__dot{
  width: 18px; height: 18px; border-radius: 999px;
  background: var(--_dot);
  flex: 0 0 auto;
  box-shadow: 0 0 0 0 var(--_dot);
  transition: box-shadow .3s var(--tf-ease-out);
}
.tf-flavour:hover{ color: var(--tf-bone); border-color: rgba(242,244,248,.28); }
.tf-flavour.is-on{
  color: var(--tf-bone);
  border-color: var(--_dot);
  background: rgba(255,255,255,.04);
}
.tf-flavour.is-on .tf-flavour__dot{ box-shadow: 0 0 0 4px color-mix(in srgb, var(--_dot) 22%, transparent); }

.tf-hero__stage{ opacity:0; transform: translateY(26px);
  transition: opacity 1s var(--tf-ease-out) .3s, transform 1s var(--tf-ease-out) .3s; }
.tf-hero.is-ready .tf-hero__stage{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .tf-hero.is-ready .tf-hero__bottles{ animation: none; }
  .tf-hero__copy > *, .tf-hero__stage, .tf-hero__glow{
    opacity:1 !important; transform:none !important; transition:none !important;
  }
}
/* ==========================================================================
   TRYFECTA — 05 PROOF  (certification marquee + collagen comparison)
   Append this to the END of assets/tryfecta.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   Certification marquee
   Sits directly under the hero as a continuous band. Echoes the repeating
   wordmark printed on the bottles.
   -------------------------------------------------------------------------- */
.tf-marquee{
  position: relative;
  border-block: 1px solid var(--tf-line-soft);
  padding-block: 18px;
  overflow: hidden;
  background: rgba(255,255,255,.015);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.tf-marquee__track{
  display: flex; width: max-content;
  animation: tf-marquee 38s linear infinite;
}
.tf-marquee:hover .tf-marquee__track{ animation-play-state: paused; }
@keyframes tf-marquee{ to{ transform: translateX(-50%); } }

.tf-marquee__group{ display: flex; align-items: center; flex: 0 0 auto; }
.tf-marquee__item{
  display: inline-flex; align-items: center; gap: 22px;
  padding-inline: 22px;
  font-family: var(--tf-display);
  font-variation-settings: "wdth" 112, "wght" 700;
  font-size: clamp(13px, 1.1vw, 15px);
  letter-spacing: .04em;
  color: var(--tf-bone);
  white-space: nowrap;
}
.tf-marquee__item::after{
  content:""; width:7px; height:7px; border-radius:999px;
  background: var(--tf-core);
  flex: 0 0 auto;
}

@media (prefers-reduced-motion: reduce){
  .tf-marquee__track{ animation: none; }
  .tf-marquee{ -webkit-mask-image:none; mask-image:none; overflow-x:auto; }
}

/* --------------------------------------------------------------------------
   Comparison
   Two panels, deliberately unequal. The left is flat and grey because it
   describes the category. The right carries the live flavour colour.
   -------------------------------------------------------------------------- */
.tf-compare__head{ max-width: 62ch; margin-bottom: clamp(32px, 4vw, 56px); }

.tf-compare__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2vw, 28px);
}
@media (max-width: 820px){ .tf-compare__grid{ grid-template-columns: 1fr; } }

.tf-panel{
  border: 1px solid var(--tf-line);
  border-radius: var(--tf-radius-lg);
  padding: clamp(24px, 3vw, 38px);
  background: rgba(255,255,255,.015);
}
.tf-panel--them{ opacity: .78; }
.tf-panel--us{
  border-color: color-mix(in srgb, var(--tf-core) 55%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--tf-core) 10%, transparent), transparent 60%),
    rgba(255,255,255,.02);
  box-shadow: 0 24px 60px -34px var(--tf-glow);
}

.tf-panel__title{
  font-family: var(--tf-display);
  font-variation-settings: "wdth" 112, "wght" 800;
  font-size: var(--tf-t-lg);
  line-height: 1.15;
  margin: 0 0 6px;
  color: var(--tf-bone);
}
.tf-panel__sub{ font-size: var(--tf-t-sm); color: var(--tf-mist); margin: 0 0 var(--tf-s4); }
.tf-panel--us .tf-panel__title{ color: var(--tf-lift); }

.tf-panel__rows{ display: grid; gap: 0; }
.tf-row{
  display: grid;
  grid-template-columns: 108px 1fr;
  gap: var(--tf-s2);
  align-items: baseline;
  padding-block: 15px;
  border-top: 1px solid var(--tf-line-soft);
}
.tf-row:first-child{ border-top: 0; }
.tf-row dt{
  font-size: var(--tf-t-xs);
  color: var(--tf-mist);
  font-weight: 500;
}
.tf-row dd{
  margin: 0;
  font-size: var(--tf-t-sm);
  color: var(--tf-bone);
  line-height: 1.5;
}
.tf-panel--them .tf-row dd{ color: #A6AEBD; }
@media (max-width: 420px){
  .tf-row{ grid-template-columns: 1fr; gap: 2px; }
}

/* Small note under the grid */
.tf-compare__note{
  margin-top: var(--tf-s4);
  font-size: var(--tf-t-xs);
  color: var(--tf-mist);
  max-width: 80ch;
}
/* ==========================================================================
   TRYFECTA — 06 INGREDIENTS
   Append this to the END of assets/tryfecta.css
   ========================================================================== */

.tf-ing__grid{
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}
@media (max-width: 900px){ .tf-ing__grid{ grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Left: intro and the three largest actives
   -------------------------------------------------------------------------- */
.tf-ing__intro h2{ margin-bottom: var(--tf-s3); }

.tf-ing__stats{ display: grid; gap: 2px; margin-top: var(--tf-s4); }
.tf-stat{
  display: flex; align-items: baseline; gap: var(--tf-s2);
  padding-block: 14px;
  border-top: 1px solid var(--tf-line-soft);
}
.tf-stat__n{
  font-family: var(--tf-display);
  font-variation-settings: "wdth" 118, "wght" 800;
  font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.35rem);
  line-height: 1;
  color: var(--tf-lift);
  flex: 0 0 auto;
  min-width: 4.6ch;
}
.tf-stat__u{ font-size: var(--tf-t-xs); color: var(--tf-mist); margin-left: -6px; }
.tf-stat__l{ font-size: var(--tf-t-sm); color: var(--tf-bone); }

/* --------------------------------------------------------------------------
   Right: the panel, styled after the printed label
   -------------------------------------------------------------------------- */
.tf-ing__panel{
  border: 1px solid var(--tf-line);
  border-radius: var(--tf-radius-lg);
  background: rgba(255,255,255,.02);
  padding: clamp(20px, 2.6vw, 34px);
}

.tf-ing__tabs{
  display: flex; flex-wrap: wrap; gap: 8px;
  padding-bottom: var(--tf-s3);
  border-bottom: 1px solid var(--tf-line);
  margin-bottom: 4px;
}
.tf-tab{
  appearance: none; cursor: pointer;
  background: transparent;
  border: 1px solid var(--tf-line);
  border-radius: 999px;
  padding: 7px 14px;
  font-family: var(--tf-body); font-size: var(--tf-t-xs); font-weight: 500;
  color: var(--tf-mist);
  position: relative;
  transition: color .25s var(--tf-ease), border-color .25s var(--tf-ease), background .25s var(--tf-ease);
}
.tf-tab::after{ content:""; position:absolute; inset:-5px; border-radius:999px; }
.tf-tab:hover{ color: var(--tf-bone); }
.tf-tab.is-on{
  color: #fff;
  background: var(--tf-core);
  border-color: var(--tf-core);
}
.tf-tab__c{ opacity: .6; margin-left: 5px; font-variant-numeric: tabular-nums; }

/* Rows. Dotted leader between the name and the amount, like the bottle. */
.tf-ing__list{ display: block; }
.tf-ing__row{
  display: flex; align-items: baseline; gap: 10px;
  padding-block: 12px;
  border-bottom: 1px solid var(--tf-line-soft);
  transition: opacity .35s var(--tf-ease), transform .35s var(--tf-ease-out), color .2s var(--tf-ease);
}
.tf-ing__row.is-hidden{ display: none; }
.tf-ing__row.is-fading{ opacity: 0; transform: translateY(6px); }
.tf-ing__name{ font-size: var(--tf-t-sm); color: var(--tf-bone); flex: 0 1 auto; }
.tf-ing__src{ display: block; font-size: var(--tf-t-xs); color: var(--tf-mist); margin-top: 2px; }
.tf-ing__lead{
  flex: 1 1 auto;
  min-width: 18px;
  height: 1px;
  align-self: flex-end;
  margin-bottom: 5px;
  border-bottom: 1px dotted rgba(242,244,248,.22);
}
.tf-ing__amt{
  flex: 0 0 auto;
  font-family: var(--tf-body);
  font-size: var(--tf-t-sm);
  font-weight: 600;
  color: var(--tf-bone);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tf-ing__foot{
  margin-top: var(--tf-s3);
  padding-top: var(--tf-s3);
  border-top: 1px solid var(--tf-line);
}
.tf-ing__foot h4{
  font-family: var(--tf-body); font-size: var(--tf-t-xs); font-weight:600;
  color: var(--tf-bone); margin: 0 0 6px;
}
.tf-ing__foot p{ font-size: var(--tf-t-xs); color: var(--tf-mist); margin: 0; max-width: none; }

/* Empty state, in case a filter ever returns nothing */
.tf-ing__empty{
  padding-block: var(--tf-s5);
  text-align: center;
  font-size: var(--tf-t-sm);
  color: var(--tf-mist);
}
/* ==========================================================================
   TRYFECTA — 07 RANGE
   Append this to the END of assets/tryfecta.css
   ========================================================================== */

.tf-range__head{
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--tf-s4); flex-wrap: wrap;
  margin-bottom: clamp(28px, 3.5vw, 48px);
}
.tf-range__head h2{ margin-bottom: 10px; }
.tf-range__head p{ margin: 0; max-width: 52ch; }
.tf-range__nav{ display: flex; gap: 10px; flex: 0 0 auto; }
@media (max-width: 720px){ .tf-range__nav{ display: none; } }

.tf-arrow{
  appearance: none; cursor: pointer;
  width: 44px; height: 44px; border-radius: 999px;
  background: transparent; border: 1px solid var(--tf-line);
  color: var(--tf-bone);
  display: flex; align-items: center; justify-content: center;
  transition: border-color .25s var(--tf-ease), background .25s var(--tf-ease), opacity .25s var(--tf-ease);
}
.tf-arrow:hover{ border-color: var(--tf-core); background: rgba(255,255,255,.03); }
.tf-arrow[disabled]{ opacity: .3; cursor: default; }
.tf-arrow svg{ width: 17px; height: 17px; }

/* --------------------------------------------------------------------------
   Track
   Bleeds to the right edge on desktop so the row reads as continuing.
   -------------------------------------------------------------------------- */
.tf-range__track{
  display: flex; gap: clamp(14px, 1.6vw, 22px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: var(--tf-s2);
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.tf-range__track::-webkit-scrollbar{ display: none; }

.tf-card{
  flex: 0 0 clamp(230px, 26vw, 290px);
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  border: 1px solid var(--tf-line);
  border-radius: var(--tf-radius-lg);
  background: rgba(255,255,255,.02);
  overflow: hidden;
  transition: border-color .3s var(--tf-ease), transform .4s var(--tf-ease-out),
              box-shadow .4s var(--tf-ease-out);
}
.tf-card:hover{
  border-color: color-mix(in srgb, var(--_c) 60%, transparent);
  transform: translateY(-4px);
  box-shadow: 0 30px 70px -40px var(--_c);
}

/* Bottle sits on a tint of its own colour, not the global flavour */
.tf-card__vis{
  position: relative;
  aspect-ratio: 1 / 1.02;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 50% 62%, color-mix(in srgb, var(--_c) 32%, transparent) 0%, transparent 62%),
    color-mix(in srgb, var(--_c) 7%, transparent);
  overflow: hidden;
}
.tf-card__vis img{
  height: 82%; width: auto; object-fit: contain;
  filter: drop-shadow(0 22px 34px rgba(0,0,0,.5));
  transition: transform .5s var(--tf-ease-out);
}
.tf-card:hover .tf-card__vis img{ transform: translateY(-8px) scale(1.04); }

.tf-card__body{
  padding: var(--tf-s3);
  display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto;
}
.tf-card__flav{
  font-family: var(--tf-display);
  font-variation-settings: "wdth" 112, "wght" 800;
  font-size: var(--tf-t-lg);
  line-height: 1.1;
  color: var(--tf-bone);
}
.tf-card__desc{ font-size: var(--tf-t-xs); color: var(--tf-mist); margin: 0; }
.tf-card__foot{
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--tf-s2); margin-top: auto; padding-top: var(--tf-s3);
}
.tf-card__price{
  font-family: var(--tf-display);
  font-variation-settings: "wdth" 108, "wght" 700;
  font-size: var(--tf-t-md);
  color: var(--tf-bone);
}
.tf-card__add{
  appearance: none; cursor: pointer;
  border: 0; border-radius: 999px;
  padding: 11px 18px;
  background: var(--_c); color: #fff;
  font-family: var(--tf-display);
  font-variation-settings: "wdth" 104, "wght" 700;
  font-size: var(--tf-t-xs);
  position: relative;
  transition: filter .25s var(--tf-ease), transform .3s var(--tf-ease-out);
}
.tf-card__add::after{ content:""; position:absolute; inset:-5px; border-radius:999px; }
.tf-card__add:hover{ filter: brightness(1.12); transform: translateY(-2px); }

/* --------------------------------------------------------------------------
   Bundle strip
   -------------------------------------------------------------------------- */
.tf-bundles{
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.6vw, 20px);
  margin-top: clamp(28px, 3.5vw, 44px);
}
@media (max-width: 720px){ .tf-bundles{ grid-template-columns: 1fr; } }

.tf-bundle{
  border: 1px solid var(--tf-line);
  border-radius: var(--tf-radius);
  padding: var(--tf-s3);
  display: flex; align-items: baseline; gap: var(--tf-s2);
}
.tf-bundle--best{
  border-color: color-mix(in srgb, var(--tf-core) 55%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--tf-core) 9%, transparent), transparent);
}
.tf-bundle__n{
  font-family: var(--tf-display);
  font-variation-settings: "wdth" 118, "wght" 800;
  font-size: 1.5rem; line-height: 1;
  color: var(--tf-lift); flex: 0 0 auto;
}
.tf-bundle__t{ font-size: var(--tf-t-sm); color: var(--tf-bone); display:block; }
.tf-bundle__s{ font-size: var(--tf-t-xs); color: var(--tf-mist); display:block; margin-top:2px; }
/* ==========================================================================
   TRYFECTA — 08 WAITLIST
   Append this to the END of assets/tryfecta.css
   ========================================================================== */

.tf-wait{
  position: relative;
  border: 1px solid color-mix(in srgb, var(--tf-core) 42%, transparent);
  border-radius: var(--tf-radius-lg);
  padding: clamp(28px, 4vw, 56px);
  overflow: hidden;
  background:
    radial-gradient(120% 140% at 88% 10%, color-mix(in srgb, var(--tf-core) 20%, transparent) 0%, transparent 58%),
    rgba(255,255,255,.02);
}
.tf-wait__grid{
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 60px); align-items: center;
}
@media (max-width: 860px){ .tf-wait__grid{ grid-template-columns: 1fr; } }

.tf-wait h2{ margin-bottom: var(--tf-s2); }
.tf-wait__copy p{ margin-bottom: 0; }

.tf-wait__list{ margin-top: var(--tf-s3); display: grid; gap: 9px; }
.tf-wait__list li{
  display: flex; align-items: flex-start; gap: 10px;
  font-size: var(--tf-t-sm); color: var(--tf-mist);
}
.tf-wait__list li::before{
  content: ""; flex: 0 0 auto;
  width: 7px; height: 7px; margin-top: 8px;
  border-radius: 999px; background: var(--tf-core);
}

/* --------------------------------------------------------------------------
   Form
   -------------------------------------------------------------------------- */
.tf-form{ display: grid; gap: var(--tf-s2); }

.tf-field label{
  display: block;
  font-size: var(--tf-t-xs);
  color: var(--tf-mist);
  margin-bottom: 7px;
}
.tf-field input,
.tf-field select{
  width: 100%;
  appearance: none;
  background: rgba(8,11,18,.6);
  border: 1px solid var(--tf-line);
  border-radius: 12px;
  padding: 14px 16px;
  color: var(--tf-bone);
  font-family: var(--tf-body);
  font-size: var(--tf-t-sm);
  transition: border-color .25s var(--tf-ease), background .25s var(--tf-ease);
}
.tf-field select{
  background-image: linear-gradient(45deg, transparent 50%, var(--tf-mist) 50%),
                    linear-gradient(135deg, var(--tf-mist) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 42px;
}
.tf-field select option{ background: #111726; color: var(--tf-bone); }
.tf-field input::placeholder{ color: #5D6779; }
.tf-field input:focus,
.tf-field select:focus{ outline: none; border-color: var(--tf-core); background: rgba(8,11,18,.85); }
.tf-field input:focus-visible,
.tf-field select:focus-visible{ outline: 2px solid var(--tf-lift); outline-offset: 2px; }

.tf-consent{
  display: flex; align-items: flex-start; gap: 11px;
  font-size: var(--tf-t-xs); color: var(--tf-mist); line-height: 1.6;
  cursor: pointer;
}
.tf-consent input{
  appearance: none;
  flex: 0 0 auto;
  width: 18px; height: 18px; margin-top: 2px;
  border: 1px solid var(--tf-line);
  border-radius: 5px;
  background: rgba(8,11,18,.6);
  cursor: pointer;
  position: relative;
  transition: background .2s var(--tf-ease), border-color .2s var(--tf-ease);
}
.tf-consent input:checked{ background: var(--tf-core); border-color: var(--tf-core); }
.tf-consent input:checked::after{
  content: "";
  position: absolute; left: 5px; top: 1px;
  width: 5px; height: 10px;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(43deg);
}
.tf-consent a{ color: var(--tf-lift); text-decoration: underline; text-underline-offset: 2px; }

.tf-form__btn{ justify-self: start; margin-top: 4px; }
.tf-form__err{
  font-size: var(--tf-t-xs);
  color: #FF8A8A;
  min-height: 1.2em;
}

/* Success state replaces the form in place */
.tf-form__done{
  display: none;
  border: 1px solid color-mix(in srgb, var(--tf-core) 50%, transparent);
  border-radius: var(--tf-radius);
  padding: var(--tf-s4);
  background: color-mix(in srgb, var(--tf-core) 9%, transparent);
}
.tf-form__done b{
  display: block;
  font-family: var(--tf-display);
  font-variation-settings: "wdth" 112, "wght" 800;
  font-size: var(--tf-t-lg);
  color: var(--tf-bone);
  margin-bottom: 6px;
}
.tf-form__done p{ font-size: var(--tf-t-sm); margin: 0; }
.tf-wait.is-done .tf-form{ display: none; }
.tf-wait.is-done .tf-form__done{ display: block; }
/* ==========================================================================
   TRYFECTA — 09 FAQ
   Append this to the END of assets/tryfecta.css
   ========================================================================== */

.tf-faq__grid{
  display: grid;
  grid-template-columns: .72fr 1.28fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}
@media (max-width: 900px){ .tf-faq__grid{ grid-template-columns: 1fr; } }

.tf-faq__aside{ position: sticky; top: 130px; }
@media (max-width: 900px){ .tf-faq__aside{ position: static; } }
.tf-faq__aside h2{ margin-bottom: var(--tf-s3); }

.tf-faq__list{ border-top: 1px solid var(--tf-line); }

.tf-q{ border-bottom: 1px solid var(--tf-line); }

.tf-q__btn{
  appearance: none; cursor: pointer;
  width: 100%; text-align: left;
  background: transparent; border: 0;
  display: flex; align-items: flex-start; gap: var(--tf-s3);
  padding: 22px 0;
  font-family: var(--tf-display);
  font-variation-settings: "wdth" 108, "wght" 700;
  font-size: clamp(1rem, .93rem + .32vw, 1.18rem);
  line-height: 1.35;
  color: var(--tf-bone);
  transition: color .25s var(--tf-ease);
}
.tf-q__btn:hover{ color: var(--tf-lift); }
.tf-q__btn:focus-visible{ outline: 2px solid var(--tf-lift); outline-offset: 3px; border-radius: 6px; }

/* Plus that becomes a minus */
.tf-q__ico{
  flex: 0 0 auto;
  margin-left: auto;
  position: relative;
  width: 20px; height: 20px;
  margin-top: 3px;
}
.tf-q__ico::before,
.tf-q__ico::after{
  content: "";
  position: absolute; left: 50%; top: 50%;
  background: var(--tf-core);
  border-radius: 2px;
  transform: translate(-50%,-50%);
  transition: transform .35s var(--tf-ease-out), opacity .25s var(--tf-ease);
}
.tf-q__ico::before{ width: 16px; height: 2px; }
.tf-q__ico::after{ width: 2px; height: 16px; }
.tf-q.is-open .tf-q__ico::after{ transform: translate(-50%,-50%) rotate(90deg); opacity: 0; }

/* Panel. The 0fr to 1fr grid trick animates to auto height cleanly. */
.tf-q__panel{
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .42s var(--tf-ease-out);
}
.tf-q.is-open .tf-q__panel{ grid-template-rows: 1fr; }
.tf-q__inner{
  overflow: hidden;
  min-height: 0;
  opacity: 0;
  transition: opacity .3s var(--tf-ease);
}
.tf-q.is-open .tf-q__inner{ opacity: 1; transition-delay: .1s; }
.tf-q__inner p{
  font-size: var(--tf-t-sm);
  color: var(--tf-mist);
  margin: 0 0 22px;
  max-width: 74ch;
  padding-right: var(--tf-s4);
}
.tf-q__inner p:only-child{ margin-bottom: 22px; }
.tf-q__inner a{ color: var(--tf-lift); text-decoration: underline; text-underline-offset: 2px; }

@media (prefers-reduced-motion: reduce){
  .tf-q__panel, .tf-q__inner, .tf-q__ico::before, .tf-q__ico::after{ transition: none; }
}
/* ==========================================================================
   TRYFECTA — 11 PAGE HEADER + SHOP
   Append this to the END of assets/tryfecta.css

   The .tf-phead block is reused on every inner page (Shop, Ingredients,
   Our Story, FAQ, Contact). Build it once here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Reusable inner page header
   -------------------------------------------------------------------------- */
.tf-phead{
  position: relative;
  padding-top: clamp(150px, 15vw, 210px);
  padding-bottom: clamp(40px, 5vw, 72px);
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid var(--tf-line-soft);
}
.tf-phead::before{
  content: "";
  position: absolute; z-index: -1;
  top: -40%; left: 62%;
  width: min(70vw, 760px); aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(circle at center, var(--tf-glow) 0%, transparent 64%);
  opacity: .55;
  filter: blur(16px);
  pointer-events: none;
}
.tf-phead__crumb{
  display: flex; align-items: center; gap: 9px;
  font-size: var(--tf-t-xs); color: var(--tf-mist);
  margin-bottom: var(--tf-s3);
}
.tf-phead__crumb a:hover{ color: var(--tf-bone); }
.tf-phead__crumb span[aria-hidden]{ opacity: .45; }
.tf-phead h1{ max-width: 18ch; margin-bottom: var(--tf-s3); }
.tf-phead p{ font-size: var(--tf-t-lg); color: var(--tf-bone); max-width: 52ch; margin: 0; }

/* --------------------------------------------------------------------------
   Shop grid
   Reuses .tf-card from the home page range section.
   -------------------------------------------------------------------------- */
.tf-shop__grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: clamp(16px, 2vw, 24px);
}
.tf-shop__grid .tf-card{ flex: none; }

/* Every card links through, so the whole card is the target */
.tf-card--link{ position: relative; }
.tf-card--link .tf-card__flav::after{
  content: ""; position: absolute; inset: 0; z-index: 1;
}
.tf-card--link .tf-card__add{ position: relative; z-index: 2; }

/* --------------------------------------------------------------------------
   Same formula band
   -------------------------------------------------------------------------- */
.tf-same{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--tf-s4);
  align-items: center;
  border: 1px solid var(--tf-line);
  border-radius: var(--tf-radius-lg);
  padding: clamp(24px, 3vw, 40px);
  background: rgba(255,255,255,.02);
}
@media (max-width: 720px){ .tf-same{ grid-template-columns: 1fr; } }
.tf-same h3{ margin-bottom: 10px; }
.tf-same p{ margin: 0; }

/* --------------------------------------------------------------------------
   Shipping / returns reassurance row
   -------------------------------------------------------------------------- */
.tf-assure{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(16px, 2vw, 28px);
  border-top: 1px solid var(--tf-line);
  padding-top: clamp(28px, 3.5vw, 44px);
}
.tf-assure__i{ display: flex; gap: 14px; align-items: flex-start; }
.tf-assure__i svg{
  width: 22px; height: 22px; flex: 0 0 auto;
  color: var(--tf-core); margin-top: 2px;
}
.tf-assure__i b{
  display: block; font-size: var(--tf-t-sm); color: var(--tf-bone);
  font-weight: 600; margin-bottom: 3px;
}
.tf-assure__i span{ font-size: var(--tf-t-xs); color: var(--tf-mist); line-height: 1.6; }
/* ==========================================================================
   TRYFECTA — 12 PATCH
   Append this to the END of assets/tryfecta.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Footer column headings were rendering at display size.
      ".tf h4" (two selectors) was beating ".tf-footer__h" (one selector),
      so the label styling never applied. Raising specificity fixes it
      on every page at once.
   -------------------------------------------------------------------------- */
.tf .tf-footer__h{
  font-family: var(--tf-body);
  font-variation-settings: normal;
  font-size: var(--tf-t-xs);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.4;
  color: var(--tf-bone);
  margin: 0 0 var(--tf-s2);
}

/* Same trap in the ingredient panel footer */
.tf .tf-ing__foot h4{
  font-family: var(--tf-body);
  font-variation-settings: normal;
  font-size: var(--tf-t-xs);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.4;
  margin: 0 0 6px;
}

/* --------------------------------------------------------------------------
   2. Five cards in a four-column grid left Strawberry stranded alone.
      Three columns gives 3 + 2, and the cards get more room.
   -------------------------------------------------------------------------- */
@media (min-width: 1000px){
  .tf .tf-shop__grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 620px) and (max-width: 999px){
  .tf .tf-shop__grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 619px){
  .tf .tf-shop__grid{ grid-template-columns: 1fr; }
}

/* Long flavour names were pushing card bodies to uneven heights */
.tf .tf-shop__grid .tf-card__flav{ min-height: 2.2em; }

/* --------------------------------------------------------------------------
   3. Spacing. The page header's bottom padding stacked on top of the next
      section's top padding, leaving a dead band. Two "tight" sections in a
      row did the same thing.
   -------------------------------------------------------------------------- */
.tf-phead + .tf-section{ padding-top: clamp(40px, 5vw, 72px); }
.tf-section--tight + .tf-section--tight{ padding-top: 0; }
/* ==========================================================================
   TRYFECTA — 13 PRODUCT PAGE
   Append this to the END of assets/tryfecta.css
   ========================================================================== */

.tf-pdp{
  padding-top: clamp(140px, 13vw, 190px);
  padding-bottom: clamp(48px, 6vw, 88px);
}
.tf-pdp__grid{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(28px, 4.5vw, 72px);
  align-items: start;
}
@media (max-width: 940px){ .tf-pdp__grid{ grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Gallery
   -------------------------------------------------------------------------- */
.tf-gal{ position: sticky; top: 128px; }
@media (max-width: 940px){ .tf-gal{ position: static; } }

.tf-gal__stage{
  position: relative;
  border: 1px solid var(--tf-line);
  border-radius: var(--tf-radius-lg);
  aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 58%, color-mix(in srgb, var(--tf-core) 26%, transparent) 0%, transparent 64%),
    rgba(255,255,255,.02);
}
.tf-gal__stage img{
  position: absolute;
  height: 84%; width: auto; object-fit: contain;
  opacity: 0; transform: scale(.95);
  transition: opacity .45s var(--tf-ease-out), transform .45s var(--tf-ease-out);
  filter: drop-shadow(0 34px 52px rgba(0,0,0,.55));
}
.tf-gal__stage img.is-on{ opacity: 1; transform: none; }

.tf-gal__word{
  position: absolute; bottom: 18px; left: 0; right: 0;
  text-align: center;
  font-family: var(--tf-display);
  font-variation-settings: "wdth" 118, "wght" 800;
  font-size: clamp(13px, 1.2vw, 15px);
  letter-spacing: .06em;
  color: var(--tf-mist);
  pointer-events: none;
}

.tf-gal__thumbs{ display: flex; gap: 10px; margin-top: 12px; }
.tf-thumb{
  appearance: none; cursor: pointer; padding: 0;
  flex: 1 1 0;
  aspect-ratio: 1 / 1.1;
  border: 1px solid var(--tf-line);
  border-radius: var(--tf-radius);
  background: color-mix(in srgb, var(--_c) 8%, transparent);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  position: relative;
  transition: border-color .25s var(--tf-ease), background .25s var(--tf-ease);
}
.tf-thumb::after{ content:""; position:absolute; inset:-4px; }
.tf-thumb img{ height: 82%; width: auto; object-fit: contain; }
.tf-thumb:hover{ border-color: color-mix(in srgb, var(--_c) 55%, transparent); }
.tf-thumb.is-on{
  border-color: var(--_c);
  background: color-mix(in srgb, var(--_c) 18%, transparent);
}

/* --------------------------------------------------------------------------
   Buy box
   -------------------------------------------------------------------------- */
.tf-buy__title{ margin-bottom: 8px; font-size: var(--tf-t-2xl); }
.tf-buy__sub{ font-size: var(--tf-t-sm); color: var(--tf-mist); margin: 0 0 var(--tf-s3); }

.tf-buy__badges{ display:flex; flex-wrap:wrap; gap: 8px; margin-bottom: var(--tf-s4); }

.tf-buy__label{
  display: block;
  font-size: var(--tf-t-xs);
  color: var(--tf-mist);
  margin-bottom: 10px;
}
.tf-buy__label b{ color: var(--tf-bone); font-weight: 600; }

.tf-buy__group{ margin-bottom: var(--tf-s4); }

/* Flavour swatches */
.tf-sw{ display: flex; flex-wrap: wrap; gap: 8px; }
.tf-sw button{
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px 8px 8px;
  border: 1px solid var(--tf-line);
  border-radius: 999px;
  background: transparent;
  color: var(--tf-mist);
  font-family: var(--tf-body); font-size: var(--tf-t-xs); font-weight: 500;
  position: relative;
  transition: color .25s var(--tf-ease), border-color .25s var(--tf-ease), background .25s var(--tf-ease);
}
.tf-sw button::after{ content:""; position:absolute; inset:-5px; border-radius:999px; }
.tf-sw i{
  width: 16px; height: 16px; border-radius: 999px;
  background: var(--_c); flex: 0 0 auto;
}
.tf-sw button:hover{ color: var(--tf-bone); }
.tf-sw button.is-on{
  color: var(--tf-bone);
  border-color: var(--_c);
  background: rgba(255,255,255,.04);
}

/* Option cards, used for both quantity and purchase type */
.tf-opts{ display: grid; gap: 8px; }
.tf-opt{
  cursor: pointer;
  display: grid;
  grid-template-columns: 20px 1fr auto;
  gap: 13px;
  align-items: center;
  border: 1px solid var(--tf-line);
  border-radius: var(--tf-radius);
  padding: 14px 16px;
  transition: border-color .25s var(--tf-ease), background .25s var(--tf-ease);
}
.tf-opt:hover{ border-color: rgba(242,244,248,.26); }
.tf-opt.is-on{
  border-color: var(--tf-core);
  background: color-mix(in srgb, var(--tf-core) 8%, transparent);
}
.tf-opt input{
  appearance: none; margin: 0;
  width: 18px; height: 18px; border-radius: 999px;
  border: 1px solid var(--tf-line);
  background: rgba(8,11,18,.6);
  position: relative; cursor: pointer;
  transition: border-color .2s var(--tf-ease);
}
.tf-opt.is-on input{ border-color: var(--tf-core); }
.tf-opt.is-on input::after{
  content:""; position:absolute; inset:4px;
  border-radius:999px; background: var(--tf-core);
}
.tf-opt__t{ font-size: var(--tf-t-sm); color: var(--tf-bone); display:block; }
.tf-opt__s{ font-size: var(--tf-t-xs); color: var(--tf-mist); display:block; margin-top: 2px; }
.tf-opt__tag{
  font-size: 11px; font-weight: 600;
  padding: 5px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--tf-core) 20%, transparent);
  color: var(--tf-lift);
  white-space: nowrap;
}

/* Price */
.tf-price{
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px;
  padding-top: var(--tf-s3);
  border-top: 1px solid var(--tf-line);
  margin-bottom: var(--tf-s3);
}
.tf-price__now{
  font-family: var(--tf-display);
  font-variation-settings: "wdth" 115, "wght" 800;
  font-size: clamp(2rem, 1.5rem + 1.6vw, 2.6rem);
  line-height: 1;
  color: var(--tf-bone);
}
.tf-price__was{ font-size: var(--tf-t-md); color: var(--tf-mist); text-decoration: line-through; }
.tf-price__save{
  font-size: var(--tf-t-xs); font-weight: 600;
  color: var(--tf-lift);
  padding: 5px 11px; border-radius: 999px;
  background: color-mix(in srgb, var(--tf-core) 16%, transparent);
}
.tf-price__each{ width: 100%; font-size: var(--tf-t-xs); color: var(--tf-mist); }

.tf-buy__cta{ width: 100%; justify-content: center; font-size: var(--tf-t-sm); padding: 18px 30px; }

.tf-buy__note{
  margin-top: 14px;
  font-size: var(--tf-t-xs);
  color: var(--tf-mist);
  text-align: center;
}

/* Small reassurance list under the button */
.tf-buy__re{ display: grid; gap: 9px; margin-top: var(--tf-s4); }
.tf-buy__re li{
  display: flex; gap: 10px; align-items: flex-start;
  font-size: var(--tf-t-xs); color: var(--tf-mist);
}
.tf-buy__re svg{ width: 15px; height: 15px; color: var(--tf-core); flex: 0 0 auto; margin-top: 2px; }

/* --------------------------------------------------------------------------
   How to take it
   -------------------------------------------------------------------------- */
.tf-steps{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(18px, 2.4vw, 32px);
  counter-reset: tfstep;
}
.tf-step{ border-top: 2px solid var(--tf-core); padding-top: var(--tf-s3); }
.tf-step::before{
  counter-increment: tfstep;
  content: counter(tfstep);
  display: block;
  font-family: var(--tf-display);
  font-variation-settings: "wdth" 118, "wght" 800;
  font-size: 1.4rem;
  color: var(--tf-core);
  line-height: 1;
  margin-bottom: 12px;
}
.tf-step b{ display:block; font-size: var(--tf-t-md); color: var(--tf-bone); margin-bottom: 6px; font-weight:600; }
.tf-step p{ font-size: var(--tf-t-sm); margin: 0; }
/* ==========================================================================
   TRYFECTA — 14 CARD LINKS
   Append this to the END of assets/tryfecta.css
   ========================================================================== */

/* The old overlay was attached to the flavour name span, not the link, so it
   covered the card without being clickable. Removed here, replaced by the
   handler in tryfecta.js which makes the whole card a target. */
.tf .tf-card--link .tf-card__flav::after{ content: none; }

.tf .tf-card{ cursor: pointer; }
.tf .tf-card__add,
.tf .tf-card__flav a{ cursor: pointer; position: relative; z-index: 2; }

/* Keyboard users get the same affordance as mouse users */
.tf .tf-card:focus-visible{
  outline: 2px solid var(--tf-lift);
  outline-offset: 3px;
}
.tf .tf-card__flav a:hover{ color: var(--_c); }
/* ==========================================================================
   TRYFECTA — 16 INGREDIENTS PAGE
   Append this to the END of assets/tryfecta.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   Sourcing table
   The core argument of this page: where every ingredient comes from.
   -------------------------------------------------------------------------- */
.tf-src{
  border: 1px solid var(--tf-line);
  border-radius: var(--tf-radius-lg);
  overflow: hidden;
  background: rgba(255,255,255,.02);
}
.tf-src__row{
  display: grid;
  grid-template-columns: 1.5fr 1fr auto;
  gap: var(--tf-s3);
  align-items: center;
  padding: 15px clamp(18px, 2.4vw, 28px);
  border-top: 1px solid var(--tf-line-soft);
}
.tf-src__row:first-child{ border-top: 0; }
.tf-src__row--head{
  background: rgba(255,255,255,.03);
  border-top: 0;
}
.tf-src__row--head span{
  font-size: var(--tf-t-xs);
  color: var(--tf-mist);
  font-weight: 600;
}
.tf-src__n{ font-size: var(--tf-t-sm); color: var(--tf-bone); }
.tf-src__o{ font-size: var(--tf-t-sm); color: var(--tf-mist); }
.tf-src__v{
  font-size: 11px; font-weight: 600;
  padding: 5px 11px; border-radius: 999px;
  white-space: nowrap;
  border: 1px solid var(--tf-line);
  color: var(--tf-mist);
}
.tf-src__v[data-ok="1"]{
  border-color: color-mix(in srgb, var(--tf-core) 50%, transparent);
  background: color-mix(in srgb, var(--tf-core) 14%, transparent);
  color: var(--tf-lift);
}
.tf-src__v[data-ok="0"]{
  border-color: rgba(255,180,90,.5);
  background: rgba(255,180,90,.12);
  color: #FFC078;
}
@media (max-width: 700px){
  .tf-src__row{ grid-template-columns: 1fr auto; row-gap: 4px; }
  .tf-src__o{ grid-column: 1 / -1; }
  .tf-src__row--head{ display: none; }
}

/* --------------------------------------------------------------------------
   What is not in it
   -------------------------------------------------------------------------- */
.tf-not{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px;
  background: var(--tf-line-soft);
  border: 1px solid var(--tf-line);
  border-radius: var(--tf-radius-lg);
  overflow: hidden;
}
.tf-not__i{
  background: var(--tf-ink);
  padding: clamp(20px, 2.4vw, 28px);
}
.tf-not__i svg{ width: 20px; height: 20px; color: var(--tf-mist); margin-bottom: 12px; display:block; }
.tf-not__i b{ display:block; font-size: var(--tf-t-md); color: var(--tf-bone); font-weight:600; margin-bottom: 5px; }
.tf-not__i span{ font-size: var(--tf-t-xs); color: var(--tf-mist); line-height:1.6; }

/* --------------------------------------------------------------------------
   Reading the label
   -------------------------------------------------------------------------- */
.tf-read{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(20px, 2.8vw, 36px);
}
.tf-read__i{ border-top: 1px solid var(--tf-line); padding-top: var(--tf-s3); }
.tf-read__i h3{ font-size: var(--tf-t-lg); margin-bottom: 10px; }
.tf-read__i p{ font-size: var(--tf-t-sm); margin: 0 0 14px; }
.tf-read__i p:last-child{ margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Closing band
   -------------------------------------------------------------------------- */
.tf-band{
  border: 1px solid color-mix(in srgb, var(--tf-core) 42%, transparent);
  border-radius: var(--tf-radius-lg);
  padding: clamp(28px, 4vw, 56px);
  background:
    radial-gradient(110% 150% at 85% 15%, color-mix(in srgb, var(--tf-core) 20%, transparent) 0%, transparent 60%),
    rgba(255,255,255,.02);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--tf-s4);
  align-items: center;
}
@media (max-width: 760px){ .tf-band{ grid-template-columns: 1fr; } }
.tf-band h2{ margin-bottom: 10px; }
.tf-band p{ margin: 0; }
/* ==========================================================================
   TRYFECTA — 17 CONTACT PAGE
   Append this to the END of assets/tryfecta.css
   ========================================================================== */

.tf-contact__grid{
  display: grid;
  grid-template-columns: .78fr 1.22fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}
@media (max-width: 900px){ .tf-contact__grid{ grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Left column, direct contact details
   -------------------------------------------------------------------------- */
.tf-cinfo{ display: grid; gap: 2px; }
.tf-cinfo__i{
  padding-block: var(--tf-s3);
  border-top: 1px solid var(--tf-line-soft);
}
.tf-cinfo__i:first-child{ border-top: 0; padding-top: 0; }
.tf-cinfo__i b{
  display: block;
  font-size: var(--tf-t-xs);
  color: var(--tf-mist);
  font-weight: 500;
  margin-bottom: 5px;
}
.tf-cinfo__i a,
.tf-cinfo__i span{ font-size: var(--tf-t-md); color: var(--tf-bone); }
.tf-cinfo__i a:hover{ color: var(--tf-lift); }
.tf-cinfo__i small{ display:block; font-size: var(--tf-t-xs); color: var(--tf-mist); margin-top: 6px; line-height:1.6; }

/* --------------------------------------------------------------------------
   Form shell
   -------------------------------------------------------------------------- */
.tf-cform{
  border: 1px solid var(--tf-line);
  border-radius: var(--tf-radius-lg);
  padding: clamp(24px, 3vw, 40px);
  background: rgba(255,255,255,.02);
}

/* Contact Form 7 wraps every input in a span. Make it behave. */
.tf-cform .wpcf7-form-control-wrap{ display: block; }
.tf-cform .tf-field{ margin-bottom: var(--tf-s2); }
.tf-cform .tf-field textarea{
  width: 100%;
  min-height: 150px;
  resize: vertical;
  background: rgba(8,11,18,.6);
  border: 1px solid var(--tf-line);
  border-radius: 12px;
  padding: 14px 16px;
  color: var(--tf-bone);
  font-family: var(--tf-body);
  font-size: var(--tf-t-sm);
  line-height: 1.6;
  transition: border-color .25s var(--tf-ease), background .25s var(--tf-ease);
}
.tf-cform .tf-field textarea:focus{
  outline: none; border-color: var(--tf-core); background: rgba(8,11,18,.85);
}

/* Two fields side by side where they fit */
.tf-cform__row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--tf-s2);
}
@media (max-width: 560px){ .tf-cform__row{ grid-template-columns: 1fr; } }

/* Submit button, styled as our primary button */
.tf-cform .wpcf7-submit{
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: var(--tf-s2);
  padding: 16px 34px;
  border: 0; border-radius: 999px;
  background: var(--tf-grad);
  color: #fff;
  font-family: var(--tf-display);
  font-variation-settings: "wdth" 105, "wght" 700;
  font-size: var(--tf-t-sm);
  box-shadow: 0 8px 26px -10px var(--tf-glow);
  transition: transform .3s var(--tf-ease-out), box-shadow .3s var(--tf-ease-out);
}
.tf-cform .wpcf7-submit:hover{ transform: translateY(-2px); box-shadow: 0 16px 40px -12px var(--tf-glow); }
.tf-cform .wpcf7-submit:disabled{ opacity: .55; cursor: wait; transform: none; }

/* Validation and response messages */
.tf-cform .wpcf7-not-valid-tip{
  font-size: var(--tf-t-xs);
  color: #FF8A8A;
  margin-top: 6px;
}
.tf-cform .wpcf7-form-control.wpcf7-not-valid{ border-color: rgba(255,138,138,.6); }
.tf-cform .wpcf7-response-output{
  margin: var(--tf-s3) 0 0 !important;
  padding: 14px 18px !important;
  border: 1px solid var(--tf-line) !important;
  border-radius: var(--tf-radius) !important;
  font-size: var(--tf-t-sm);
  color: var(--tf-bone);
  background: rgba(255,255,255,.03);
}
.tf-cform form.sent .wpcf7-response-output{
  border-color: color-mix(in srgb, var(--tf-core) 55%, transparent) !important;
  background: color-mix(in srgb, var(--tf-core) 10%, transparent);
}
.tf-cform form.invalid .wpcf7-response-output,
.tf-cform form.failed .wpcf7-response-output{
  border-color: rgba(255,138,138,.5) !important;
  background: rgba(255,138,138,.08);
}
.tf-cform .wpcf7-spinner{ margin-left: 12px; }

/* --------------------------------------------------------------------------
   Before you write, deflection links
   -------------------------------------------------------------------------- */
.tf-deflect{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(16px, 2vw, 22px);
}
.tf-deflect a{
  border: 1px solid var(--tf-line);
  border-radius: var(--tf-radius);
  padding: var(--tf-s3);
  display: block;
  transition: border-color .25s var(--tf-ease), background .25s var(--tf-ease);
}
.tf-deflect a:hover{ border-color: var(--tf-core); background: rgba(255,255,255,.03); }
.tf-deflect b{ display:block; font-size: var(--tf-t-md); color: var(--tf-bone); font-weight:600; margin-bottom: 6px; }
.tf-deflect span{ font-size: var(--tf-t-xs); color: var(--tf-mist); line-height:1.6; }
/* ==========================================================================
   TRYFECTA — 18 CONTACT RELOCATOR
   Append this to the END of assets/tryfecta.css
   ========================================================================== */

.tf-cform__wait{
  font-size: var(--tf-t-sm);
  color: var(--tf-mist);
  margin: 0;
  padding-block: var(--tf-s4);
  text-align: center;
}

/* The Text Block that held the shortcode is now empty. Collapse it so it
   does not leave a gap under the page. */
.tf-page .wpb_text_column:empty{ display: none; }
/* ==========================================================================
   TRYFECTA — 20 FAQ PAGE
   Append this to the END of assets/tryfecta.css
   ========================================================================== */

.tf-faqp__grid{
  display: grid;
  grid-template-columns: .68fr 1.32fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}
@media (max-width: 900px){ .tf-faqp__grid{ grid-template-columns: 1fr; } }

.tf-faqp__aside{ position: sticky; top: 128px; }
@media (max-width: 900px){ .tf-faqp__aside{ position: static; } }

/* Search */
.tf-faqs{ position: relative; margin-bottom: var(--tf-s3); }
.tf-faqs input{
  width: 100%;
  background: rgba(8,11,18,.6);
  border: 1px solid var(--tf-line);
  border-radius: 12px;
  padding: 14px 16px 14px 44px;
  color: var(--tf-bone);
  font-family: var(--tf-body);
  font-size: var(--tf-t-sm);
  transition: border-color .25s var(--tf-ease), background .25s var(--tf-ease);
}
.tf-faqs input::placeholder{ color: #5D6779; }
.tf-faqs input:focus{ outline: none; border-color: var(--tf-core); background: rgba(8,11,18,.85); }
.tf-faqs svg{
  position: absolute; left: 15px; top: 50%;
  transform: translateY(-50%);
  width: 17px; height: 17px;
  color: var(--tf-mist);
  pointer-events: none;
}
.tf-faqs__count{
  font-size: var(--tf-t-xs);
  color: var(--tf-mist);
  margin: 10px 0 0;
}

/* Group headings inside the accordion */
.tf-qgroup{
  font-family: var(--tf-body);
  font-size: var(--tf-t-xs);
  font-weight: 600;
  color: var(--tf-lift);
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: var(--tf-s5) 0 var(--tf-s2);
  border-bottom: 1px solid var(--tf-line);
  margin: 0;
}
.tf-faq__list > .tf-qgroup:first-child{ padding-top: 0; }
.tf-qgroup.is-hidden{ display: none; }
.tf-q.is-hidden{ display: none; }

/* No results */
.tf-faqp__none{
  padding: var(--tf-s6) 0;
  text-align: center;
  color: var(--tf-mist);
  font-size: var(--tf-t-sm);
}
.tf-faqp__none[hidden]{ display: none; }

/* Aside contact card */
.tf-askcard{
  border: 1px solid var(--tf-line);
  border-radius: var(--tf-radius-lg);
  padding: var(--tf-s4);
  background: rgba(255,255,255,.02);
  margin-top: var(--tf-s4);
}
.tf-askcard b{ display:block; font-size: var(--tf-t-md); color: var(--tf-bone); font-weight:600; margin-bottom: 6px; }
.tf-askcard p{ font-size: var(--tf-t-sm); margin: 0 0 var(--tf-s3); }
/* ==========================================================================
   TRYFECTA — 22 HALAL AND VEGAN PAGE
   Append this to the END of assets/tryfecta.css

   Reuses .tf-src (ingredients page) and .tf-not for most of the layout.
   ========================================================================== */

/* Certificate cards */
.tf-certs{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(16px, 2vw, 24px);
}
.tf-cert{
  border: 1px solid var(--tf-line);
  border-radius: var(--tf-radius-lg);
  padding: clamp(22px, 2.6vw, 32px);
  background: rgba(255,255,255,.02);
  display: flex; flex-direction: column;
}
.tf-cert__mark{
  width: 54px; height: 54px;
  border-radius: 999px;
  border: 1px solid var(--tf-line);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--tf-display);
  font-variation-settings: "wdth" 112, "wght" 800;
  font-size: 1.05rem;
  color: var(--tf-lift);
  margin-bottom: var(--tf-s3);
}
.tf-cert b{ display:block; font-size: var(--tf-t-md); color: var(--tf-bone); font-weight:600; margin-bottom: 6px; }
.tf-cert p{ font-size: var(--tf-t-xs); color: var(--tf-mist); margin: 0 0 var(--tf-s3); line-height:1.65; }
.tf-cert__meta{
  margin-top: auto;
  padding-top: var(--tf-s3);
  border-top: 1px solid var(--tf-line-soft);
  font-size: var(--tf-t-xs);
  color: var(--tf-mist);
}
.tf-cert__meta span{ display:block; }
.tf-cert__meta b{ display:inline; font-size: var(--tf-t-xs); color: var(--tf-bone); }

/* Pull quote used once, to break the page */
.tf-pull{
  border-left: 3px solid var(--tf-core);
  padding-left: clamp(20px, 3vw, 36px);
  max-width: 46ch;
}
.tf-pull p{
  font-family: var(--tf-display);
  font-variation-settings: "wdth" 108, "wght" 700;
  font-size: clamp(1.25rem, 1rem + 1.1vw, 1.75rem);
  line-height: 1.25;
  color: var(--tf-bone);
  margin: 0;
}

/* Two column prose */
.tf-prose2{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(24px, 3.5vw, 56px);
}
.tf-prose2 h3{ font-size: var(--tf-t-lg); margin-bottom: 10px; }
.tf-prose2 p{ font-size: var(--tf-t-sm); }
/* ==========================================================================
   TRYFECTA — 23 OUR STORY PAGE
   Append this to the END of assets/tryfecta.css
   ========================================================================== */

/* Lead paragraph set larger, this page is mostly prose */
.tf-story__lead{ max-width: 60ch; }
.tf-story__lead p{ font-size: var(--tf-t-lg); color: var(--tf-bone); }

/* --------------------------------------------------------------------------
   Rules, the three decisions the brand was built on
   -------------------------------------------------------------------------- */
.tf-rules{ display: grid; gap: 0; counter-reset: tfrule; }
.tf-rule{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(20px, 3vw, 44px);
  padding-block: clamp(28px, 3.5vw, 44px);
  border-top: 1px solid var(--tf-line);
}
.tf-rule:last-child{ border-bottom: 1px solid var(--tf-line); }
.tf-rule::before{
  counter-increment: tfrule;
  content: "0" counter(tfrule);
  font-family: var(--tf-display);
  font-variation-settings: "wdth" 120, "wght" 800;
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.2px var(--tf-core);
}
.tf-rule h3{ font-size: var(--tf-t-xl); margin-bottom: 12px; }
.tf-rule p{ font-size: var(--tf-t-sm); margin: 0 0 14px; max-width: 62ch; }
.tf-rule p:last-child{ margin-bottom: 0; }
@media (max-width: 620px){
  .tf-rule{ grid-template-columns: 1fr; gap: 12px; }
}

/* --------------------------------------------------------------------------
   Timeline
   -------------------------------------------------------------------------- */
.tf-time{ display: grid; gap: 0; }
.tf-time__i{
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: var(--tf-s3);
  padding-block: var(--tf-s3);
  border-top: 1px solid var(--tf-line-soft);
  position: relative;
}
.tf-time__i:first-child{ border-top: 0; }
.tf-time__w{
  font-family: var(--tf-display);
  font-variation-settings: "wdth" 108, "wght" 700;
  font-size: var(--tf-t-sm);
  color: var(--tf-lift);
}
.tf-time__b b{ display:block; font-size: var(--tf-t-md); color: var(--tf-bone); font-weight:600; margin-bottom: 5px; }
.tf-time__b span{ font-size: var(--tf-t-sm); color: var(--tf-mist); line-height:1.65; }
.tf-time__i--now .tf-time__w::after{
  content: "";
  display: inline-block;
  width: 7px; height: 7px; margin-left: 8px;
  border-radius: 999px;
  background: var(--tf-core);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--tf-core) 22%, transparent);
}
@media (max-width: 560px){
  .tf-time__i{ grid-template-columns: 1fr; gap: 6px; }
}

/* --------------------------------------------------------------------------
   Founder card
   -------------------------------------------------------------------------- */
.tf-founder{
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: clamp(24px, 3.5vw, 48px);
  align-items: start;
  border: 1px solid var(--tf-line);
  border-radius: var(--tf-radius-lg);
  padding: clamp(24px, 3vw, 40px);
  background: rgba(255,255,255,.02);
}
@media (max-width: 700px){ .tf-founder{ grid-template-columns: 1fr; } }
.tf-founder__ph{
  aspect-ratio: 1 / 1.15;
  border-radius: var(--tf-radius);
  border: 1px dashed var(--tf-line);
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  font-size: var(--tf-t-xs);
  color: var(--tf-mist);
  padding: var(--tf-s3);
  background: rgba(255,255,255,.015);
}
.tf-founder__n{
  font-family: var(--tf-display);
  font-variation-settings: "wdth" 112, "wght" 800;
  font-size: var(--tf-t-xl);
  color: var(--tf-bone);
  margin-bottom: 4px;
}
.tf-founder__r{ font-size: var(--tf-t-xs); color: var(--tf-lift); margin: 0 0 var(--tf-s3); }
.tf-founder p{ font-size: var(--tf-t-sm); }
/* ==========================================================================
   TRYFECTA — 25 CONSOLIDATED PATCH
   Append this ONCE to the END of assets/tryfecta.css

   Contains three blocks that never made it into the file, plus two fixes
   found during the audit. Safe to paste even if part of it is already there,
   everything here is written to win on specificity or is genuinely new.
   ========================================================================== */


/* ==========================================================================
   1. tf-rule collision  (was 24-patch)
   .tf-rule is a 1px divider in the foundation. Our Story reused the name for
   its numbered blocks, so all three collapsed to 1px and stacked.
   ========================================================================== */
.tf .tf-rules .tf-rule{
  height: auto;
  background: none;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(20px, 3vw, 44px);
  padding-block: clamp(28px, 3.5vw, 44px);
  margin: 0;
  border: 0;
  border-top: 1px solid var(--tf-line);
}
.tf .tf-rules .tf-rule:last-child{ border-bottom: 1px solid var(--tf-line); }
.tf .tf-rules .tf-rule::before{
  counter-increment: tfrule;
  content: "0" counter(tfrule);
  font-family: var(--tf-display);
  font-variation-settings: "wdth" 120, "wght" 800;
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.2px var(--tf-core);
}
@media (max-width: 620px){
  .tf .tf-rules .tf-rule{ grid-template-columns: 1fr; gap: 12px; }
}


/* ==========================================================================
   2. Hero flavour name overflow  (was 10-polish, never applied)
   It was set to never wrap, so GRANNY SMITH and BLUE RASPBERRY ran off the
   right edge of the page.
   ========================================================================== */
.tf .tf-hero__word{
  width: 116%;
  max-width: 116%;
  white-space: normal;
  word-break: keep-all;
  font-size: clamp(30px, 4.3vw, 60px);
  line-height: .95;
  opacity: .32;
}
@media (max-width: 991px){
  .tf .tf-hero__word{ width: 104%; max-width: 104%; font-size: clamp(26px, 7vw, 44px); }
}


/* ==========================================================================
   3. Carousel arrows and texture weight  (was 10-polish)
   ========================================================================== */
.tf .tf-range__nav{ margin-left: auto; }
.tf .tf-range__head > div:first-child{ flex: 1 1 420px; }

.tf-texture::before{
  opacity: .03;
  -webkit-text-stroke-width: 1px;
}

.tf .tf-wait__grid{ align-items: start; }


/* ==========================================================================
   4. Placeholder pages  (was 15-placeholder, never applied)
   Used by all thirteen stub pages.
   ========================================================================== */
.tf-stub{
  min-height: 68svh;
  display: flex;
  align-items: center;
  border-bottom: 0;
}
.tf-stub__cta{
  display: flex; flex-wrap: wrap; gap: var(--tf-s2);
  margin-top: var(--tf-s4);
}


/* ==========================================================================
   5. Inner page headings were set at hero size
   .tf-phead h1 inherited --tf-t-3xl, which caps at 6.5rem. That is the home
   hero size and it swamps an inner page. One step down, and the width cap
   relaxed so long headlines do not run to four lines.
   ========================================================================== */
.tf .tf-phead h1{
  font-size: var(--tf-t-2xl);
  letter-spacing: -0.028em;
  max-width: 24ch;
}


/* ==========================================================================
   6. Product page title matched the page header, now sits below it
   ========================================================================== */
.tf .tf-buy__title{ font-size: var(--tf-t-xl); }

/* ==========================================================================
   TRYFECTA — 27 SINGLE PRODUCT CONVERSION  (CSS)
   Append this to the END of assets/tryfecta.css

   Client review 23 Sep: one variant, not five. White bottle, white lid.
   No Kosher. This removes the five-flavour colour system and locks the
   site to one brand colour.
   ========================================================================== */


/* ==========================================================================
   1. BRAND COLOUR
   PROVISIONAL. Deep green, chosen to suit halal, vegan and a white bottle.
   To change the whole site, edit only the four values in this block.
   ========================================================================== */
:root,
html[data-tf-flavour]{
  --tf-core: #1F7A4C;   /* main brand colour        */
  --tf-lift: #35B173;   /* lighter, for accents     */
  --tf-deep: #124A2D;   /* darker, for gradients    */
  --tf-grad: linear-gradient(135deg, #35B173 0%, #1F7A4C 48%, #124A2D 100%);
  --tf-glow: rgba(53,177,115,.34);
}


/* ==========================================================================
   2. FLAVOUR UI REMOVED
   Backup to the JS, which strips these from the DOM. Kept in case JS is
   blocked, so nothing half-built ever shows.
   ========================================================================== */
.tf-flavours,
.tf-sw,
.tf-gal__thumbs,
.tf-hero__word,
.tf-gal__word,
.tf-range__nav{
  display: none !important;
}

/* The hero bottle no longer needs a stack of five */
.tf .tf-hero__bottles img{ opacity: 1; transform: none; }
.tf .tf-gal__stage img{ opacity: 1; transform: none; }

/* Stage had a gap for the selector that is now gone */
.tf .tf-hero__stage{ gap: 0; }


/* ==========================================================================
   3. SINGLE PRODUCT LAYOUT
   The range carousel becomes one centred product block.
   ========================================================================== */
.tf-range__track{
  justify-content: center;
  overflow: visible;
  scroll-snap-type: none;
}
.tf-range__track .tf-card{
  flex: 0 0 min(320px, 100%);
}

.tf-shop__grid{
  grid-template-columns: 1fr !important;
  max-width: 340px;
  margin-inline: auto;
}


/* ==========================================================================
   4. ONE PRODUCT BLOCK
   Used on the home page in place of the carousel.
   ========================================================================== */
.tf-solo{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  border: 1px solid var(--tf-line);
  border-radius: var(--tf-radius-lg);
  padding: clamp(24px, 3.5vw, 52px);
  background:
    radial-gradient(90% 120% at 22% 30%, color-mix(in srgb, var(--tf-core) 14%, transparent) 0%, transparent 62%),
    rgba(255,255,255,.02);
}
@media (max-width: 820px){ .tf-solo{ grid-template-columns: 1fr; } }

.tf-solo__vis{
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1 / 1;
}
.tf-solo__vis img{
  height: 88%; width: auto; object-fit: contain;
  filter: drop-shadow(0 34px 52px rgba(0,0,0,.5));
}

/* Placeholder while the white bottle render is outstanding */
.tf-solo__ph{
  width: 100%; height: 100%;
  border: 1px dashed var(--tf-line);
  border-radius: var(--tf-radius);
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: var(--tf-s4);
  font-size: var(--tf-t-xs); color: var(--tf-mist);
  background: rgba(255,255,255,.015);
}

.tf-solo h3{ font-size: var(--tf-t-xl); margin-bottom: 10px; }
.tf-solo__sub{ font-size: var(--tf-t-sm); margin-bottom: var(--tf-s3); }
.tf-solo__chips{ display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--tf-s4); }
.tf-solo__foot{ display: flex; flex-wrap: wrap; align-items: center; gap: var(--tf-s3); }
.tf-solo__price{
  font-family: var(--tf-display);
  font-variation-settings: "wdth" 115, "wght" 800;
  font-size: clamp(1.7rem, 1.3rem + 1.3vw, 2.2rem);
  line-height: 1;
  color: var(--tf-bone);
}
/* ==========================================================================
   TRYFECTA — 39 LAYOUT POLISH
   Append this to the END of assets/tryfecta.css

   The "How the formula is built" grid holds six cards. With auto-fit it was
   laying out five across and stranding the sixth on its own row. Three
   columns gives 3 + 3.
   ========================================================================== */

@media (min-width: 1000px){
  .tf .tf-not{ grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 620px) and (max-width: 999px){
  .tf .tf-not{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 619px){
  .tf .tf-not{ grid-template-columns: 1fr; }
}