/* =============================================================================
   TOMATO KETCHUP — this product's sections only

   Moved verbatim from the approved builds. Rules are unchanged and in their
   original order — a split, not a rewrite.
   ========================================================================== */

/* --- 03 PRODUCT CAROUSEL -------------------------------------------------
   Manual, arrow-driven. The track is a native horizontal scroll container
   with snap points, which means touch swipe and keyboard both work with no
   JavaScript at all — carousel.js only adds the arrow buttons and their
   disabled states on top of behaviour the browser already provides.
 
   Card width is derived from --visible, the number of cards on screen at
   once. The fractional part is the peek: 1.7 shows one card plus 70% of the
   next, so there is always a visible cue that the row continues.
   ------------------------------------------------------------------------- */
 
.range {
  position: relative;
  background: var(--grad-page);
  overflow: hidden;
}
 
.carousel {
  position: relative;
  --visible: 1.7;
  --card-gap: var(--sp-sm);
}
 
.carousel__track {
  display: flex;
  align-items: stretch;
  gap: var(--card-gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  /* Snap lands the card flush with the gutter rather than the raw edge */
  scroll-padding-inline: var(--gutter);
  padding-inline: var(--gutter);
  padding-block: var(--sp-sm);
  -webkit-overflow-scrolling: touch;
  /* The arrows are the affordance; a scrollbar underneath them is noise */
  scrollbar-width: none;
}
 
.carousel__track::-webkit-scrollbar { display: none; }
 
.carousel__track:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: var(--radius-md);
}
 
/* ---- Card --------------------------------------------------------------- */
 
.card {
  /* 100% here is the track's content box, so the gutters are already
     excluded and the peek maths stays honest at every width. */
  flex: 0 0 calc((100% - (var(--visible) - 1) * var(--card-gap)) / var(--visible));
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: var(--shadow-md);
  transition: transform var(--dur-mid) var(--ease-out),
              box-shadow var(--dur-mid) var(--ease-out);
}
 
.card__media {
  position: relative;
  aspect-ratio: 6 / 7;
  overflow: hidden;
  /* Sits under the splash, so a splash with transparency still reads */
  background: var(--white);
}
 
/* Background layer: the animated sauce splash */
.card__splash {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  /* If the splash file has a white background rather than transparency,
     uncomment this and it drops out against the white card:
     mix-blend-mode: multiply; */
  transition: transform var(--dur-slow) var(--ease-out),
              opacity var(--dur-mid) var(--ease-out);
}
 
/* Foreground layer: the product pack */
.card__product {
  position: relative;
  z-index: 1;
  width: 90%;
  height: 90%;
  margin: 22px auto 0;
  padding: var(--sp-xs);
  object-fit: contain;
  filter: drop-shadow(0 10px 14px rgba(74, 2, 6, 0.28));
  transition: transform var(--dur-slow) var(--ease-out);
}
 
/* Red footer bar: product name left, pack size right, as in the reference */
.card__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2xs);
  margin-top: auto;
  padding: 0.6rem 0.85rem;
  background: var(--grad-accent);
  color: var(--white);
}
 .card__bar .nong{
  font-size:14px;
  flex-shrink: 0;
 }
.card__name {
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: 1.2;
}
 
.card__size {
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  opacity: 0.95;
}
 
/* ---- Arrows -------------------------------------------------------------- */
 
.carousel__nav {
    position: absolute;
    top: 45%;
    z-index: 3;
    translate: 0 -50%;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--white);
    outline: none;
    border: none;
    color: var(--red-600);
    box-shadow: 0 10px 24px -8px rgba(35, 18, 8, 0.45);
    transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-mid) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.carousel__nav svg {
  width: 45%;
  height: 45%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
 
.carousel__nav--prev { left: calc(var(--gutter) / 3); }
.carousel__nav--next { right: calc(var(--gutter) / 3); }
 
.carousel__nav:hover {
  background: var(--red-600);
  color: var(--white);
  transform: scale(1.08);
}
 
.carousel__nav:active { transform: scale(1); }
 
/* At either end the button stays in place but stops inviting a press —
   removing it entirely would shift the other arrow and jump the layout. */
.carousel__nav[disabled] {
  opacity: 0.3;
  pointer-events: none;
}
 
/* Without JS the arrows do nothing, so they are not offered.
   is-complete means every card already fits — no arrows needed either. */
.no-js .carousel__nav,
.carousel.is-complete .carousel__nav { display: none; }
 
/* Hover lift. Guarded so touch devices never get a stuck hover state.
   The splash pushes out a little further than the pack, which reads as
   depth between the two layers. */
@media (hover: hover) {
  .card:hover,
  .card:focus-within {
    transform: translateY(-4px) scale(1.03);
    box-shadow: var(--shadow-lg);
  }
 
  .card:hover .card__product,
  .card:focus-within .card__product { transform: scale(1.04); }
 
  .card:hover .card__splash,
  .card:focus-within .card__splash { transform: scale(1.06); }
}
 
/* ---- Cards on screen at each width, peek preserved throughout ------------ */
 
@media (min-width: 40em)  { .carousel { --visible: 2.7; } }
@media (min-width: 62em)  { .carousel { --visible: 3.7; } }
@media (min-width: 80em)  { .carousel { --visible: 4.7; } }
 
@media (min-width: 62em) {
  .carousel__nav { width: 3.25rem; height: 3.25rem; }
}

/* =============================================================================
   04 SHARE — user-generated content call to action
   Standalone section stylesheet. Depends only on the tokens in base.css.

   Motion note: the tomatoes, bottle and phone are moved by share.js on
   scroll, each along its own angle and distance (data-drift on the markup).
   Nothing here sets a transform on them — CSS only declares the compositor
   hint and the origin the rotation turns around.
   ========================================================================== */
.share {
    --share-red: var(--red-600);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background-image: url(images/share-bg.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    color: var(--white);
    padding: 36px 0;
}
/* ---- Decorative layer ---------------------------------------------------- */

.share__decor {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.share__tomato {
  position: absolute;
  width: clamp(3.5rem, 12vw, 7.5rem);
  height: auto;
  transform-origin: 50% 50%;
  will-change: transform;
}

/* Clustered along the top edge, the way they fall into the reference frame */
.share__tomato--a {
    top: 2%;
    left: -2%;
    width: clamp(3.5rem, 22vw, 7.5rem);
    filter: blur(2px);
}
.share__tomato--c {
    bottom: -10%;
    left: -12%;
    width: clamp(3.5rem, 25vw, 7.5rem);
    filter: blur(1px);
}
.share__tomato--b {
    top: -8%;
    right: 36%;
    filter: blur(1px);
}
.share__blob {
  position: absolute;
  right: -18%;
  bottom: -24%;
  width: clamp(16rem, 60vw, 32rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.16), transparent 70%);
}

/* ---- Layout -------------------------------------------------------------- */

.share__inner {
  display: grid;
  gap: var(--sp-lg);
  align-items: center;
}

/* ---- Copy ---------------------------------------------------------------- */

.share__title {
  max-width: 16ch;
  font-family: var(--font-display);
 font-size: clamp(1.375rem, 0.35rem + 2vw, 2rem);
  font-weight: 800;
  line-height: 1.14;
  color: var(--white);
  text-shadow: 0 8px 24px rgba(74, 2, 6, 0.35);
}

.share__note {
  max-width: 34ch;
  margin-top: var(--sp-xs);
  font-size: var(--fs-sm);
  color: color-mix(in srgb, var(--white) 82%, transparent);
}

/* Pill CTA: white on red, inverted from the buttons elsewhere on the page */
.share__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  overflow: hidden;
  min-height: 2.875rem;
  margin-top: var(--sp-md);
  padding: 0.8rem 1.75rem;
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--red-700);
  font-size: var(--fs-base);
  font-weight: 700;
  box-shadow: 0 14px 30px -14px rgba(74, 2, 6, 0.75);
  --sheen-x: -120%;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
              z-index: 9;
}

.share__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px -14px rgba(74, 2, 6, 0.85);
}

.share__cta:active { transform: translateY(0); }

/* Sheen sweep, driven by the JS module on hover */
.share__cta::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--grad-sheen);
  /* Position driven by the JS module through the --sheen-x variable */
  transform: translateX(var(--sheen-x));
  pointer-events: none;
}

.share__cta__arrow {
  transition: transform var(--dur-fast) var(--ease-out);
}

.share__cta:hover .share__cta__arrow { transform: translateX(3px); }

/* ---- Visual -------------------------------------------------------------- */

.share__visual {
  position: relative;
  width: 100%;
  /* Gives the phone's Y-rotation somewhere to happen */
  perspective: 1000px;
}

.share__bottle,
.share__phone {
  position: absolute;
  height: auto;
  will-change: transform;
}

/* Rotation turns around the base, so the bottle leans rather than pivoting
   about its middle like a compass needle */
.share__bottle { transform-origin: 50% 90%; }

.share__bottle {
    left: 35%;
    top: -108px;
    bottom: auto;
    width: 18%;
    z-index: 2;
    rotate: -10deg;
    filter: drop-shadow(0 18px 26px rgba(74, 2, 6, 0.45));
}

.share__phone {
  right: 0;
  bottom: 0;
  width: 62%;
  z-index: 1;
  filter: drop-shadow(0 26px 40px rgba(74, 2, 6, 0.5));
  /* Perspective lives here so the JS tilt reads as depth, not a flat skew */
  transform-origin: 60% 100%;
}

/* ---- 48em ---------------------------------------------------------------- */

@media (min-width: 48em) {
  .share__visual { aspect-ratio: 16 / 10; }
  .share__bottle { width: 20%; }
  .share__phone { width: 52%; }
  .share__note { font-size: var(--fs-base); }
}

/* ---- 62em: copy left, visual right, as in the reference ------------------ */

@media (min-width: 62em) {
  .share { padding-block: var(--sp-2xl); }

  .share__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: var(--sp-xl);
  }

  .share__visual { aspect-ratio: 4 / 3; }
  .share__bottle { width: 22%; left: 0; }
  .share__phone { width: 58%; }

  .share__tomato--a { top: 6%; left: 2%; }
  .share__tomato--b { top: -4%; left: 42%; }
  .share__tomato--c { top: 10%; right: 2%; }
}

/* ---- Reduced motion ------------------------------------------------------
   share.js bails out entirely when this is set, so nothing would apply a
   transform anyway. The rule stays as a belt-and-braces guard against a
   stale inline transform left over from a preference change mid-session.
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .share__tomato,
  .share__bottle,
  .share__phone {
    transform: none !important;
    opacity: 1 !important;
  }
}

/* =============================================================================
   05 TIFFIN — "What's in the tiffin this week?"
   Standalone section stylesheet. Depends only on the tokens in base.css.

   The lunchbox, cutlery, bottle and tomatoes are all baked into one scene
   image set on .tiffin__stage. Only the headline, the blurb and the two
   arrows are elements, positioned as percentages of the stage.

   Because the text is positioned over fixed artwork, the stage must keep the
   scene image's exact aspect ratio — otherwise the copy drifts off the spot
   it was placed against. Keep --scene-ratio in sync with the export.

   Type is sized in cqw so it scales with the artwork rather than the
   viewport, which matters once the stage hits its max-width and stops
   growing.
   ========================================================================== */

.tiffin {
  --scene-ratio: 41 / 52;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-image: url('images/tiffin-whole-bg.webp');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

  color: var(--white);
}
.tiffin .container{
  padding: 0;
}

/* ---- Stage --------------------------------------------------------------- */

.tiffin__stage {
  container-type: inline-size;
  position: relative;
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
  aspect-ratio: var(--scene-ratio);
  background-image: var(--scene-img);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ---- Type ---------------------------------------------------------------- */

.tiffin__title {
  position: absolute;
  left: 20%;
  top: 8%;
  width: 66%;
  z-index: 3;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 9.0cqw;
  line-height: 1.1;
  color: var(--white);
  text-shadow: 0 8px 22px rgba(58, 0, 4, 0.45);
}

.tiffin__blurb {
  position: absolute;
  left: 44%;
  top: 82%;
  width: 46%;
  z-index: 3;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 4.6cqw;
  line-height: 1.28;
  color: var(--white);
  text-shadow: 0 6px 18px rgba(58, 0, 4, 0.5);
}

/* Very old browsers without container queries fall back to viewport sizing */
@supports not (container-type: inline-size) {
  .tiffin__title { font-size: clamp(1.6rem, 8vw, 2.6rem); }
  .tiffin__blurb { font-size: clamp(0.85rem, 4vw, 1.3rem); }
}

/* ---- Bottom-left tomato --------------------------------------------------
   Sits over the scene image and drifts on scroll. Anchored from the bottom
   so it stays pinned to the corner as the stage changes proportion.
   ------------------------------------------------------------------------- */

.tiffin__tomato {
  position: absolute;
  left: -3%;
  bottom: -7%;
  z-index: 1;
  width: 48%;
  height: auto;
  pointer-events: none;
  will-change: transform;
}

/* ---- Arrows -------------------------------------------------------------- */

.tiffin__arrow {
  position: absolute;
  z-index: 3;
  height: auto;
  pointer-events: none;
}

.tiffin__arrow--top {
    left: 0;
    top: 10%;
    width: 24%;
}
.tiffin__arrow--bottom { left: 74%; top: 63%; width: 22%; }



/* ---- Click Here button ---------------------------------------------------
   Positioned like every other element in the stage: a percentage of it, so
   it holds its place against the scene image at any width. Type is in cqw
   for the same reason as the headline — it scales with the artwork rather
   than the viewport.
   ------------------------------------------------------------------------- */
 
.tiffin__cta {
    position: absolute;
    left: 44%;
    top: 74%;
    z-index: 4;
    padding: 8px 24px;
    border: 0;
    border-radius: 999px;
    background: var(--white);
    color: var(--red-700);
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 800;
    line-height: 1.1;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 8px 20px -8px rgba(58, 0, 4, 0.6);
    transition: transform 180ms var(--ease-out), background-color 180ms var(--ease-out);
    outline: none;
    border: none;
}

 
.tiffin__cta:hover {
  transform: translateY(-2px);
  background: var(--cream);
}
 
.tiffin__cta:active { transform: translateY(0); }
 

 
@supports not (container-type: inline-size) {
  .tiffin__cta { font-size: clamp(0.8rem, 3.6vw, 1.05rem); }
}
 


/* ---- 48em ---------------------------------------------------------------- */

@media (min-width: 48em) {
  .tiffin { padding-block: var(--sp-xl); }
  .tiffin__stage { max-width: 34rem; }
}

/* ---- 62em ---------------------------------------------------------------
   A portrait scene stretched across a desktop viewport either crops badly or
   strands the copy, so this swaps to a landscape export and re-places the
   text and arrows against it. Drop the wide file in and adjust these five
   blocks to match; if you only ever ship the portrait scene, delete this
   whole media query and the composition simply stays centred and capped.
   ------------------------------------------------------------------------- */

@media (min-width: 62em) {
  .tiffin {
    --scene-ratio: 16 / 11;
    --scene-img: url('images/tiffin/tiffin-scene-wide.png');
  }

  .tiffin__stage { max-width: 62rem; }

  .tiffin__title { left: 8%;  top: 12%; width: 38%; font-size: 6.4cqw; }
  .tiffin__blurb { left: 62%; top: 62%; width: 32%; font-size: 2.9cqw; }

  .tiffin__arrow--top { left: 6%; top: 30%; width: 16%; }
  .tiffin__arrow--bottom { left: 56%; top: 56%; width: 12%; }

  .tiffin__tomato { left: 1%; bottom: 2%; width: 26%; }
}

/* ---- Reduced motion ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .tiffin__tomato { transform: none !important; }
}

/* =============================================================================
   RECIPE POPUP
   Self-contained. Every selector is namespaced under .rcp so nothing here can
   reach existing page styles, and nothing existing reaches in.

   Only base.css tokens are consumed (colours, fonts, easing). If this file is
   removed the site is unchanged.
   ========================================================================== */

.rcp {
  --rcp-red: var(--red-600, #E8202A);
  --rcp-red-dark: var(--red-700, #C20D16);
  --rcp-ink: var(--ink-900, #231208);
  --rcp-radius: 14px;

  width: min(30rem, calc(100vw - 1.5rem));
  max-width: 95vw;
  max-height: 94vh;        /* fallback for browsers without svh */
  max-height: 94svh;
  margin: auto;            /* centres in the top layer */
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;

  /* The dialog itself must never scroll. If it does, its content grows to
     full height, .rcp__scroll receives all of it, and the inner scroller
     has nothing left to scroll — which is exactly the bug. One scroll
     container, and it is the inner one. */
  overflow: hidden;
}

/* Only when open: dialog:not([open]) is display:none, and an unscoped
   display value here would force the closed dialog visible.

   flex-direction: column is not cosmetic. In the default row direction the
   main axis is horizontal, so `flex: 1 1 auto` and `min-height: 0` on the
   panel apply to width and do nothing to height — the panel keeps its full
   content height and the inner scroller never gets a bounded one. Switching
   the main axis to vertical is what makes those declarations bite. */
.rcp[open] {
  display: flex;
  flex-direction: column;
}

.rcp::backdrop {
  background: rgba(30, 8, 6, 0.68);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* ---- Shell --------------------------------------------------------------- */

.rcp__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  /* min-height:0 lets this shrink below its content, which is what allows
     the child scroller to take a bounded height instead of expanding */
  min-height: 0;
  max-height: 100%;
  background: #FFFFFF;
  border-radius: 4px;
  overflow: hidden;
}

.rcp__close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 99;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(60, 60, 60, 0.55);
    color: #FFFFFF;
    font-size: 1.35rem;
    line-height: 1;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: background-color 180ms var(--ease-out, ease), transform 180ms var(--ease-out, ease);
    padding-bottom: 6px;
    outline: none;
}

.rcp__close:hover { background: var(--rcp-red); transform: rotate(90deg); }

/* The scroll container. The tomatoes are NOT inside it — they sit in the
   panel alongside, which is why they hold still while the recipe scrolls. */
.rcp__scroll {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;           /* without this the flex item refuses to shrink */
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  /* Tells the browser this element handles vertical panning itself, so touch
     scrolling starts immediately instead of waiting on the swipe listener */
  touch-action: pan-y;
}

/* ---- Content swap --------------------------------------------------------
   Only the elements that differ between days carry .rcp__fade, and only
   their opacity moves. The panel, its background, the red hero band, the
   ingredient tiles' fill, the video and the tomatoes are never animated —
   which is what makes this read as one popup refreshing rather than two
   cards trading places.

   Opacity alone is deliberate: any translate would reintroduce the sideways
   motion of a slider. Keep the duration in step with SWAP_MS in recipe.js.
   ------------------------------------------------------------------------- */

.rcp__fade {
  transition: opacity 180ms var(--ease-out, ease);
}

.rcp__panel.is-swapping .rcp__fade {
  opacity: 0;
}

/* ---- Hero ---------------------------------------------------------------- */

.rcp__hero {
  position: relative;
  background: var(--rcp-red);
  padding-bottom: 0.9rem;
}

.rcp__hero-img {
    display: block;
    width: 90%;
    aspect-ratio: 20 / 10;
    object-fit: cover;
    margin: 20px auto;
    border-radius: 12px;
}

.rcp__day {
  padding: 0.9rem 1.15rem 0;
  font-family: var(--font-display, sans-serif);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #FFFFFF;
  opacity: 0.9;
}

.rcp__title {
  padding: 0.1rem 1.15rem 0;
  font-family: var(--font-display, sans-serif);
  font-size: clamp(1.5rem, 1.1rem + 2.2vw, 2rem);
  font-weight: 800;
  line-height: 1.1;
  color: #FFFFFF;
}

.rcp__sub {
  padding: 0.2rem 1.15rem 0;
  font-family: var(--font-display, sans-serif);
  font-size: 0.9rem;
  color: #FFFFFF;
  opacity: 0.92;
}

/* ---- Body ---------------------------------------------------------------- */

.rcp__body { padding: 1.15rem 1.15rem 1.5rem; z-index: 9; position: relative; }

.rcp__heading {
  font-family: var(--font-display, sans-serif);
  font-size: clamp(1.5rem, 1.7rem + 1.8vw, 2rem);
  font-weight: 800;
  color: var(--rcp-red);
  line-height: 1.1;
}

/* ---- Ingredients --------------------------------------------------------- */

.rcp__ingredients {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  margin-top: 0.75rem;
}
.rcp__ingredients--tuesday {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.rcp__ing[hidden] { display: none; }
/* Four across is very tight on the narrowest phones */
@media (max-width: 22em) {
  .rcp__ingredients { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.rcp__ing {
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  background: var(--rcp-red);
  overflow: hidden;
}

.rcp__ing-label {
  padding: 0.4rem 0.3rem;
  font-family: var(--font-display, sans-serif);
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  color: #FFFFFF;
  min-height: 2.6em;
  display: grid;
  place-items: center;
}

.rcp__ing-img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  /* background: #FFFFFF; */
}

/* ---- Quick steps --------------------------------------------------------- */

.rcp__steps-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42%;
  gap: 0.5rem;
  align-items: start;
  margin-top: 1.5rem;
  position: relative;
}

.rcp__steps {
  margin-top: 0.6rem;
  padding-left: 1.15rem;
  font-family: var(--font-display, sans-serif);
  font-size: clamp(0.95rem, 1.2rem + 0.5vw, 1.1rem);
  font-weight: 700;
  line-height: 1.45;
  color: var(--rcp-red);
}

.rcp__steps li { margin-bottom: 0.35rem; list-style: decimal; }

/* Video replaces the bottle-and-tomatoes artwork from the reference */
.rcp__steps-img {
    /* aspect-ratio: 3 / 4; */
    object-fit: contain;
    background: transparent;
    pointer-events: none;
    position: absolute;
    right: -51px;
    top: -50px;
    width: 220px;
    z-index: -1;
}

/* ---- Hack and warning ---------------------------------------------------- */

.rcp__hack {
  margin-top: 1rem;
  padding: 0.7rem 1rem;
  border-radius: var(--rcp-radius);
  background: var(--rcp-red);
  font-family: var(--font-display, sans-serif);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  color: #FFFFFF;
}

.rcp__hack b { display: block; font-weight: 800; }

.rcp__warning {
  margin-top: 0.75rem;
  font-family: var(--font-display, sans-serif);
  font-size: 0.95rem;
  font-weight: 700;
  text-align: center;
  color: var(--rcp-red);
}

/* ---- Actions ------------------------------------------------------------- */

.rcp__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin-top: 1rem;
}

.rcp__btn {
  display: grid;
  place-items: center;
  min-height: 3rem;
  padding: 0.7rem 1rem;
  border-radius: var(--rcp-radius);
  background: var(--rcp-red);
  color: #FFFFFF;
  font-family: var(--font-display, sans-serif);
  font-size: 1.05rem;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition: background-color 180ms var(--ease-out, ease),
              transform 180ms var(--ease-out, ease);
}

.rcp__btn:hover { background: var(--rcp-red-dark); }
.rcp__btn:active { transform: translateY(1px); }
.rcp__btn[disabled] { opacity: 0.6; cursor: wait; }

.rcp__btn--wide {
  grid-column: 1 / -1;
  margin-top: 0.6rem;
  font-size: 1.2rem;
}

/* ---- Arrows -------------------------------------------------------------- */

.rcp__nav {
  position: absolute;
  top: 50%;
  z-index: 5;
  translate: 0 -50%;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: var(--rcp-red);
  box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.45);
  transition: background-color 180ms var(--ease-out, ease),
              transform 180ms var(--ease-out, ease);
  outline: none;
  border: none;
  /* Hidden by choice. Swap to `display: grid` to bring them back — without
     the arrows there is no route to the previous day on desktop, since
     Tomorrow's Preview and swipe both only move forward. */
  display: none;
}

.rcp__nav svg {
  width: 45%; height: 45%;
  fill: none; stroke: currentColor;
  stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
}

/* Inside the panel: it clips overflow, so negative offsets would hide them */
.rcp__nav--prev { left: 0.5rem; }
.rcp__nav--next { right: 0.5rem; }

.rcp__nav:hover { background: var(--rcp-red); color: #FFFFFF; }

/* ---- Floating tomatoes ---------------------------------------------------
   A continuous vertical drift and nothing else. .rcp__decor is a sibling of
   the scroller rather than a child, so these already hold still while the
   recipe scrolls beneath them — no scroll-linked offset is applied or
   wanted, and nothing in recipe.js writes to these elements.
   ------------------------------------------------------------------------- */

.rcp__decor {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
}

/* Broken or slow images must not leave alt text floating over the layout */
.rcp__decor img { color: transparent; font-size: 0; }

/* The wrapper holds the position; the image inside is the only thing moving */
.rcp__tomato-shift { position: absolute; }

.rcp__tomato {
  display: block;
  width: 100%;
  will-change: transform;
  animation: rcp-float 6s ease-in-out infinite;
}

.rcp__tomato--hero-l { position: absolute; left: -6%;  top: 75%;  width: 18%; }
.rcp__tomato--hero-r { position: absolute; right: -5%; top: 16%; width: 20%;  }
.rcp__tomato--body-l { position: absolute; left: -7%;  top: 56%; width: 15%; }
.rcp__tomato--body-r {
    position: absolute;
    right: -3%;
    top: 72%;
    width: 12%;
}
/* ---- Toast --------------------------------------------------------------- */

.rcp__toast {
  position: absolute;
  left: 50%;
  bottom: 1rem;
  z-index: 99;
  translate: -50% 0;
  max-width: 88%;
  padding: 0.6rem 1rem;
  border-radius: 999px;
  background: rgba(20, 6, 4, 0.92);
  color: #FFFFFF;
  font-size: 0.8rem;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms var(--ease-out, ease);
}

.rcp__toast.is-shown { opacity: 1; }

/* ---- Open and close motion ----------------------------------------------- */

.rcp[open] { animation: rcp-in 300ms var(--ease-out, ease); }
.rcp[open]::backdrop { animation: rcp-fade-in 300ms var(--ease-out, ease); }
.rcp.is-closing { animation: rcp-out 200ms ease forwards; }
.rcp.is-closing::backdrop { animation: rcp-fade-out 200ms ease forwards; }

@keyframes rcp-in { from { opacity: 0; transform: translateY(16px) scale(0.97); } }
@keyframes rcp-out { to { opacity: 0; transform: translateY(10px) scale(0.98); } }
@keyframes rcp-fade-in { from { opacity: 0; } }
@keyframes rcp-fade-out { to { opacity: 0; } }

/* ---- Trigger ------------------------------------------------------------- */

/* Sits over the tiffin stage. Transparent, but a real button, so it is
   keyboard reachable and announced. */
.tiffin__open {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  background: transparent;
  border: 0;
  cursor: pointer;
  border-radius: 12px;
}

.tiffin__open:focus-visible {
  outline: 3px solid #FFFFFF;
  outline-offset: -4px;
}

/* ---- Reduced motion ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .rcp[open], .rcp[open]::backdrop,
  .rcp.is-closing, .rcp.is-closing::backdrop { animation: none; }
  .rcp__tomato { animation: none; transform: none; }
  .rcp__fade { transition: none; }
}

/* ---- Wider screens ------------------------------------------------------- */

@media (min-width: 30em) {
  .rcp { width: min(30rem, calc(100vw - 3rem)); }
  .rcp__panel { border-radius: 10px; }
  .rcp__ing-label { font-size: 0.7rem; }
}

/* Broken images should not push alt text across the design while the real
   files are still being wired up */
.rcp__hero-img,
.rcp__ing-img {
  color: transparent;
  font-size: 0;
}

/* ---- Nested Lenis --------------------------------------------------------
   The popup runs its own Lenis instance over .rcp__scroll, so Lenis writes
   its classes onto that element rather than <html>.
   ------------------------------------------------------------------------- */

/* Lenis animates scrollTop itself; native smooth behaviour would fight it */
.rcp__scroll.lenis-smooth { scroll-behavior: auto !important; }

/* Keeps an overscroll gesture inside the popup rather than chaining to the
   page behind it */
.rcp__scroll.lenis { overscroll-behavior: contain; }





/* --- 02 HERO BANNER ------------------------------------------------------
   Full-bleed video with a scrim and the headline on top. The video is a
   placeholder: drop the real file at assets/video/hero.mp4 and nothing else
   needs to change. The poster carries the frame until it loads.
   ------------------------------------------------------------------------- */
 .hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-items: end;
  margin-top: 58px;
  width: 100%;
  aspect-ratio: 1080 / 1000;   /* box always matches the video */
  /* background: var(--grad-dark); */
  background-color: #fff;
  color: var(--cream);
}
 
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
 
/* Slightly oversized so the parallax drift never exposes an edge */
.hero__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;          /* no crop, because the shapes match */
  pointer-events: none;
  user-select: none;
}
/* Belt and braces — some engines still paint a native overlay button */
.hero__video::-webkit-media-controls,
.hero__video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
}
 
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--grad-scrim);
}
 
.hero__content {
  position: relative;
  text-align: center;
}
 
.hero__eyebrow {
  display: inline-block;
  margin-bottom: var(--sp-xs);
  padding: 0.35rem 0.9rem;
  border: 1px solid color-mix(in srgb, var(--cream) 40%, transparent);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--cream);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
 
.hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 1.2rem + 4.6vw, 5rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.005em;
  color: var(--white);
  text-shadow: 0 10px 30px rgba(45, 3, 6, 0.55);
  text-wrap: balance;
}
 
/* Second line sits lighter, the way the reference splits the two phrases */
.hero__title span {
  display: block;
  font-weight: 600;
  color: color-mix(in srgb, var(--white) 92%, transparent);
}
 
.hero__sub {
  max-width: 34ch;
  margin: var(--sp-sm) auto 0;
  font-size: var(--fs-lg);
  font-weight: 300;
  color: color-mix(in srgb, var(--cream) 88%, transparent);
  text-shadow: 0 4px 16px rgba(45, 3, 6, 0.5);
}
 
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-xs);
  margin-top: var(--sp-md);
}
 
/* Floating tomato-red motes, purely atmospheric */
.hero__mote {
  position: absolute;
  z-index: -1;
  display: block;
  width: clamp(4rem, 16vw, 9rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--grad-glow);
  opacity: 0.5;
  will-change: transform;
}
 
.hero__mote--a { top: 12%; left: -4%; }
.hero__mote--b { bottom: 16%; right: -6%; }
 
.hero__cue {
  position: absolute;
  left: 50%;
  bottom: var(--sp-sm);
  translate: -50% 0;
  width: 1px;
  height: var(--sp-lg);
  background: linear-gradient(180deg, transparent, var(--cream));
  opacity: 0.6;
}
 



/* --- TK FACTS -------------------------------------------------------------
   Accordion built on <details>. No JavaScript.

   ON THE OPENING ANIMATION

   A <details> element cannot be transitioned by ordinary means: the browser
   flips its content between rendered and not-rendered, and there is no
   height to interpolate between. The two rules at the bottom of this file
   use `interpolate-size` and `::details-content`, which exist precisely to
   solve that. Where they are unsupported the panel simply appears — the
   accordion works identically, only without the slide.
   ------------------------------------------------------------------------- */

.tk-facts {
  --tk-red:      #E8202A;
  --tk-red-deep: #A5121A;
  --tk-ink:      #231208;
  --tk-body:     #5A4436;
  --tk-line:     #EFD9DA;
  --tk-tint:     #FFF6F6;

  padding-block: clamp(1.75rem, 8vw, 3.5rem);
  background: #FFFFFF;
}

.tk-facts__inner {
  width: 100%;
  /* Narrower than the page. This is the one section people read line by
     line, and past about 70 characters the eye starts losing its place on
     the carriage return. */
  max-width: 46rem;
  margin-inline: auto;
  padding-inline: clamp(0.9rem, 4vw, 2rem);
}

.tk-facts__title {
  margin: 0 0 clamp(1rem, 4.5vw, 1.75rem);
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 6vw, 2.2rem);
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  color: var(--tk-red);
}

.tk-facts__list {
  display: grid;
  gap: clamp(0.4rem, 2vw, 0.6rem);
}

/* ---- One fact --------------------------------------------------------------- */

.tk-fact {
  overflow: hidden;
  border: 1.5px solid var(--tk-line);
  border-radius: clamp(10px, 3vw, 14px);
  background: #FFFFFF;
  transition: border-color var(--dur-fast, 180ms) var(--ease, ease),
              box-shadow var(--dur-fast, 180ms) var(--ease, ease);
}

.tk-fact[open] {
  border-color: var(--tk-red);
  box-shadow: 0 10px 26px -18px rgba(165, 18, 26, 0.6);
}

/* ---- The question ------------------------------------------------------------ */

.tk-fact__q {
  display: flex;
  align-items: center;
  gap: clamp(0.6rem, 3vw, 1rem);
  padding: clamp(0.75rem, 3.4vw, 1.1rem) clamp(0.9rem, 4vw, 1.35rem);
  font-family: var(--font-display);
  font-size: clamp(0.9rem, 3.7vw, 1.15rem);
  font-weight: 800;
  line-height: 1.35;
  color: var(--tk-ink);
  cursor: pointer;
  /* Stops a double-tap selecting the heading instead of opening the panel */
  user-select: none;
  transition: background-color var(--dur-fast, 180ms) var(--ease, ease),
              color var(--dur-fast, 180ms) var(--ease, ease);
}

/* The default disclosure triangle, removed in both syntaxes: WebKit needs
   the pseudo-element, everything else honours list-style. */
.tk-fact__q::-webkit-details-marker { display: none; }
.tk-fact__q { list-style: none; }
.tk-fact__q::marker { content: ''; }

.tk-fact[open] .tk-fact__q { color: var(--tk-red); }

@media (hover: hover) {
  .tk-fact__q:hover { background: var(--tk-tint); }
}

/* Keyboard focus lands on the summary, so the ring belongs there */
.tk-fact__q:focus-visible {
  outline: 3px solid var(--tk-red);
  outline-offset: -3px;
}

/* ---- The +/− mark -------------------------------------------------------------
   Two bars drawn with pseudo-elements: one horizontal, one vertical. Opening
   rotates and hides the vertical bar, turning the plus into a minus. Cheaper
   and sharper at every size than swapping two icon files, and it inherits
   the summary's colour for free.
   ------------------------------------------------------------------------- */

.tk-fact__mark {
  position: relative;
  flex: none;                 /* or a long question squashes it */
  margin-left: auto;          /* pins it to the right edge */
  width: clamp(0.85rem, 3.6vw, 1.1rem);
  aspect-ratio: 1;
  color: var(--tk-red);
  transition: rotate var(--dur-base, 320ms) var(--ease, ease);
}

.tk-fact__mark::before,
.tk-fact__mark::after {
  content: '';
  position: absolute;
  top: 42%;
  width: 62%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

/* Left half tips down, right half tips up — together they form the V */
.tk-fact__mark::before { left: 1px;  rotate: 45deg;  transform-origin: left center; }
.tk-fact__mark::after  { right: 2px; rotate: -45deg; transform-origin: right center; }

/* Open: the whole chevron flips to point up */
.tk-fact[open] .tk-fact__mark { rotate: 180deg; }

/* ---- The answer ---------------------------------------------------------------- */

.tk-fact__a {
  padding: 0 clamp(0.9rem, 4vw, 1.35rem) clamp(0.85rem, 3.6vw, 1.25rem);
  font-family: var(--font-display);
  font-size: clamp(0.85rem, 3.4vw, 1rem);
  font-weight: 600;
  /* Generous, because these run several lines and are read in one pass */
  line-height: 1.65;
  color: var(--tk-body);
}

.tk-fact__a p { margin: 0 0 0.8em; text-wrap: pretty; }
.tk-fact__a p:last-child { margin-bottom: 0; }

.tk-fact__a em { font-style: italic; }

/* ---- The vitamin list ----------------------------------------------------------- */

.tk-fact__dl { margin: 0; }

.tk-fact__dl dt {
  margin-top: 0.7em;
  font-weight: 800;
  color: var(--tk-red);
}

.tk-fact__dl dt:first-child { margin-top: 0; }

/* Indented, so the definition reads as belonging to the term above it */
.tk-fact__dl dd {
  margin: 0.15em 0 0;
  padding-left: 0.9rem;
  border-left: 2px solid var(--tk-line);
}

/* ---- Smooth open ----------------------------------------------------------------
   `interpolate-size: allow-keywords` lets height animate to and from `auto`,
   which is otherwise impossible. `::details-content` is the box holding
   everything after the summary — the thing that actually needs to grow.

   Both are recent. Everywhere else the panel appears instantly, which is
   what a <details> has always done, so nothing is lost.
   ------------------------------------------------------------------------- */

@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }

  .tk-fact::details-content {
    height: 0;
    overflow: hidden;
    opacity: 0;
    transition: height var(--dur-base, 320ms) var(--ease, ease),
                opacity var(--dur-base, 320ms) var(--ease, ease),
                content-visibility var(--dur-base, 320ms) allow-discrete;
  }

  .tk-fact[open]::details-content {
    height: auto;
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tk-fact::details-content,
  .tk-fact[open]::details-content { transition: none; }
  .tk-fact__mark { transition: none; }
}
.buy__social{
  padding: 8px 0 20px 0;
}
.buy {
    position: relative;
    padding-top: 12px;
    padding-bottom: var(--sp-lg);
    background: var(--white);
}