/* ==========================================================================
   Sustenir — Design Tokens
   ========================================================================== */
:root {
  --red: #CE3F2B;
  --red-dark: #AC3120;
  --red-darker: #8C2718;
  --cream: #FDF3E0;
  --cream-line: #F3E4C7;
  --peach: #EFC2AA;
  --peach-dark: #E2A684;
  --ink: #2A1F18;
  --ink-soft: #75634F;
  --ink-faint: #A89682;
  --dark: #1B1714;
  --olive: #9FB23E;
  --yellow: #FFCC5E;
  --white: #FFFFFF;

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 26px;
  --radius-pill: 999px;

  --shadow-sm: 0 4px 14px rgba(42, 31, 24, 0.07);
  --shadow: 0 14px 34px rgba(42, 31, 24, 0.10);
  --shadow-lg: 0 24px 60px rgba(42, 31, 24, 0.16);

  --font-display: 'Sora', system-ui, sans-serif;
  --font-body: 'Sora', system-ui, sans-serif;

  --container: 1680px;
  --header-h: 72px; /* measured & updated by JS to the real header height */
  --gap: clamp(16px, 3vw, 32px);
}

/* ==========================================================================
   Reset
   ========================================================================== */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul { padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; font-size: 1rem; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  /* clip (not hidden): hidden on html+body breaks position:sticky on mobile.
     'hidden' first = fallback for old browsers that don't know 'clip'. */
  overflow-x: hidden;
  overflow-x: clip;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  color: var(--ink);
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(16px, 2.5vw, 32px);
}

:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 13px 28px;
  border-radius: var(--radius-pill);
  border: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, opacity .15s ease;
  white-space: nowrap;
}
.btn:hover { transform: none; }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--white); color: var(--red); }
.btn--primary:hover { box-shadow: var(--shadow-sm); }

.btn--solid-red { background: var(--red); color: var(--white); }
.btn--solid-red:hover { background: var(--red-dark); }

.btn--peach { background: var(--peach); color: var(--dark); }
.btn--peach:hover { background: var(--peach-dark); }

.btn--dark { background: var(--dark); color: var(--white); }
.btn--dark:hover { background: #000; }

.btn--outline { background: transparent; border: 1.5px solid var(--ink); color: var(--ink); }

.btn--block { width: 100%; }
.btn--sm { padding: 10px 20px; font-size: 0.85rem; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  background: var(--red);
  padding: 14px 0;
  position: sticky;
  top: 0;
  z-index: 50;
  transition: transform .35s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}
/* Hide-on-scroll-down / show-on-scroll-up (Heinz style) */
.site-header.header--hidden { transform: translateY(-100%); }
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--white);
  letter-spacing: 0.3px;
  flex-shrink: 0;
}
.logo svg { width: 26px; height: 26px; flex-shrink: 0; }
.logo-img { height: 30px; width: auto; display: block; }
.footer-brand .logo-img { height: 34px; }

.nav-pills {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.16);
  border-radius: var(--radius-pill);
  padding: 5px;
}
.nav-pills a {
  color: var(--white);
  font-size: 0.88rem;
  font-weight: 500;
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  transition: background .15s ease;
}
.nav-pills a:hover { background: rgba(255,255,255,0.22); }
.nav-pills a.is-active {
  background: #ffffff;
  color: #CE3D29;
  font-weight: 700;
}
/* active side link (e.g. For HoReCa) */
.header-link.is-active {
  opacity: 1;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 5px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-shrink: 0;
}
.header-link {
  color: var(--white);
  font-size: 0.85rem;
  font-weight: 500;
  opacity: 0.9;
}
.header-link:hover { opacity: 1; text-decoration: underline; }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--white);
  font-size: 1.6rem;
  line-height: 1;
  padding: 4px;
}

@media (max-width: 860px) {
  .nav-pills { display: none; }
  .header-link { display: none; }
  .nav-toggle { display: block; }
  .site-header.is-open .nav-pills {
    display: flex;
    position: absolute;
    top: 64px;
    left: 16px;
    right: 16px;
    background: var(--red-dark);
    flex-direction: column;
    align-items: stretch;
    padding: 10px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
  }
  .site-header.is-open .nav-pills a { text-align: center; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100dvh - var(--header-h));
  overflow: hidden;
  color: var(--white);
}
.hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: transparent;
  z-index: 1;
}
.hero__content {
  position: relative;
  z-index: 2;
  padding: 40px 24px;
  max-width: 880px;
}
.hero__title {
  font-family: 'Sora', system-ui, sans-serif;
  font-weight: 700;
  color: #ffffff;
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  letter-spacing: 0.5px;
  text-shadow: 0 4px 18px rgba(0,0,0,0.35);
}
.hero__subtitle {
  margin-top: 14px;
  font-size: 1.05rem;
  font-weight: 400;
  opacity: 0.95;
  max-width: 560px;
  margin-inline: auto;
  text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
.hero--short { min-height: calc(100vh - var(--header-h)); min-height: calc(100dvh - var(--header-h)); }
.hero--short.hero::before {
  background: transparent;
}
.hero--tall { min-height: calc(100vh - var(--header-h)); min-height: calc(100dvh - var(--header-h)); }
.hero--story { min-height: calc(100vh - var(--header-h)); min-height: calc(100dvh - var(--header-h)); }

/* Our Story hero — tablet & mobile */
@media (max-width: 760px) {

  .hero--story .hero__content { padding: 32px 18px; max-width: 92%; }
  .hero--story .hero__story-copy { font-size: 0.88rem; padding: 14px 16px; margin-top: 14px; }
}
@media (max-width: 480px) {

  .hero--story .hero__title { font-size: 2.1rem; }
}
.hero--tall.hero::before {
  background: transparent;
}

/* Home hero — big uppercase title over photo (matches brand hero) */
.hero--home { min-height: calc(100vh - var(--header-h)); min-height: calc(100dvh - var(--header-h)); }
.hero--home img { object-position: center 30%; }

/* Slow cinematic zoom (Ken Burns) — zooms in, then back out, forever */
@keyframes heroSlowZoom {
  0%   { transform: scale(1); }
  100% { transform: scale(1.18); }
}
.hero--home img {
  animation: heroSlowZoom 10s ease-in-out infinite alternate;
  will-change: transform;
}
/* Opt-out of the zoom animation (e.g. HoReCa hero) */
.hero--noanim img { animation: none !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  .hero--home img { animation: none; }
}
.hero--home.hero::before {
  background: linear-gradient(180deg, rgba(20,14,10,0.20) 0%, rgba(20,14,10,0.30) 55%, rgba(20,14,10,0.45) 100%);
}
.hero__eyebrow {
  position: relative;
  z-index: 2;
  color: #fff;
  font-size: clamp(0.85rem, 1.4vw, 1.05rem);
  font-weight: 500;
  letter-spacing: 0.6px;
  margin-bottom: 10px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.45);
}
.hero__title--big {
  color: #fff;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 700;
  font-size: clamp(2.8rem, 8.5vw, 6.5rem);
  line-height: 1.02;
  letter-spacing: 1px;
  text-shadow: 0 4px 24px rgba(0,0,0,0.4);
}

/* hero with story copy box overlapping image bottom */
.hero__story-copy {
  position: relative;
  z-index: 2;
  border-radius: var(--radius);
  padding: 18px 22px;
  margin-top: 18px;
  font-size: 0.95rem;
  line-height: 1.6;
}

/* ==========================================================================
   Petal burst decoration
   ========================================================================== */
.petal-wrap { position: relative; display: inline-block; }
.petal-wrap--photo { display: block; text-align: center; }
.petal-lady { width: 100%; max-width: 480px; height: auto; display: block; margin: 0 auto; }
.petal-burst {
  position: absolute;
  inset: -18% ;
  z-index: 0;
  color: var(--red);
}
.petal-wrap img, .petal-wrap .petal-photo {
  position: relative;
  z-index: 1;
  border-radius: 0;
}

/* ==========================================================================
   Sections
   ========================================================================== */
.section { padding: clamp(56px, 9vw, 120px) 0; }
.section--cream { background: var(--cream); }
.section--white { background: var(--white); }

/* ===== About / "Food grown by people who care" — exact Figma specs ===== */
.section--about { background: #FDF3E0; padding: clamp(32px, 5vw, 60px) 0; }
.section--about .container { max-width: var(--container); }

/* Top row: image 640 + text 640 (50/50) */
.section--about .feature-split {
  grid-template-columns: 1fr 1fr !important;
  align-items: center;
  gap: 0 !important;
}
@media (max-width: 760px) {
  .section--about .feature-split { grid-template-columns: 1fr; gap: 20px; text-align: center; }
  .section--about .petal-wrap--photo { max-width: 100%; margin: 0; }
  .section--about .feature-copy { max-width: 100%; }
  .section--about .timeline--full { text-align: left; }
}
/* Image block = fills the full left column, no side gaps */
.section--about .petal-wrap--photo {
  width: 100%;
  max-width: 100%;
}
.section--about .petal-wrap--photo img,
.section--about .petal-lady {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: auto;
  margin: 0 !important;
  object-fit: contain;
}

/* Text block = 640 wide, inner content 512 wide */
.section--about .feature-copy { max-width: 100%; }

/* Heading: Inter Bold 56, LH 110%, LS -2% */
.section--about .feature-copy h2 {
  color: #CE3D29;
  font-family: 'Sora', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(2rem, 4.4vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}
/* Paragraph: Sora Regular 24, LH 145%, LS -0.5% */
.section--about .feature-copy p {
  color: #000000;
  font-family: 'Sora', system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(1rem, 1.9vw, 24px);
  line-height: 1.45;
  letter-spacing: -0.005em;
  margin: 0;
}

/* Timeline full-width = 1280, inner 1040 centered */
.section--about .timeline--full {
  max-width: 1040px;
  margin: clamp(28px, 4vw, 44px) auto 0;
}
.section--about .timeline__item {
  min-height: 67px;
  padding: 12px 0;
  align-items: center;
  border-bottom: 1px solid rgba(0,0,0,0.14);
}
.section--about .timeline__item:last-child { border-bottom: 1px solid rgba(0,0,0,0.14); }
/* Timeline label: Sora SemiBold 36, LH 120%, LS -2% */
.section--about .timeline__item span:first-child {
  color: #000000;
  font-family: 'Sora', system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(1.1rem, 2.8vw, 36px);
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.section--about .timeline__item span:last-child {
  color: rgba(0,0,0,0.35);
  font-family: 'Sora', system-ui, sans-serif;
  font-size: clamp(0.85rem, 1.4vw, 18px);
}
.section--red { background: var(--red); color: var(--white); }
.section--dark { background: var(--dark); color: var(--white); }

.section-head { text-align: center; margin-bottom: clamp(28px, 5vw, 48px); }
.section-head h2 {
  color: var(--red);
  font-size: clamp(1.6rem, 4vw, 2.3rem);
}
.section--red .section-head h2, .section--dark .section-head h2 { color: var(--white); }
.section-head p { margin-top: 10px; color: var(--ink-soft); font-size: 1rem; }

/* Irresistible Meals heading — Figma: Sora SemiBold 60, LH120%, LS-2%, uppercase */
.section-head--meals h2 {
  font-family: 'Sora', system-ui, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  font-size: clamp(1.9rem, 4.7vw, 60px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--red);
}
.section-head--meals p {
  font-family: 'Sora', system-ui, sans-serif;
}

/* Find Your Superfood heading — Figma: Sora SemiBold 60, LH110%, LS-2%, uppercase */
.section-head--superfood h2 {
  font-family: 'Sora', system-ui, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  font-size: clamp(1.9rem, 4.7vw, 60px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #CE3D29;
}

.eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 10px;
}

/* ==========================================================================
   Filter pills (tabs)
   ========================================================================== */
.filter-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}
.filter-pills button {
  background: var(--white);
  border: 1px solid var(--cream-line);
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 500;
  padding: 9px 20px;
  border-radius: var(--radius-pill);
  transition: all .15s ease;
}
.filter-pills button:hover { border-color: var(--red); }
.filter-pills button.is-active { background: var(--red); color: var(--white); border-color: var(--red); }

/* Mobile & tablet: single-row horizontal scroll instead of wrapping */
@media (max-width: 900px) {
  .filter-pills {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 16px;
    margin-inline: -16px;
    scroll-snap-type: x proximity;
  }
  .filter-pills::-webkit-scrollbar { display: none; }
  .filter-pills button {
    flex: 0 0 auto;
    white-space: nowrap;
    scroll-snap-align: start;
  }
}

/* ==========================================================================
   Category grid (Find Your Superfood / Horeca categories)
   ========================================================================== */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
}
@media (max-width: 900px) { .cat-grid { grid-template-columns: repeat(2, 1fr); } }
.cat-card { display: block; text-align: left; }
.cat-card__img {
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease;
}
.cat-card:hover .cat-card__img { transform: translateY(-4px); }
.cat-card__img img { width: 100%; height: 100%; object-fit: cover; }
.cat-card h3 { font-size: 1.02rem; margin-bottom: 4px; }
.cat-card p { font-size: 0.85rem; color: var(--ink-soft); }

.cat-grid--2x2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 640px) { .cat-grid--2x2 { grid-template-columns: 1fr 1fr; } }
.cat-card--tagged { position: relative; }
.cat-card--tagged .cat-card__img { position: relative; }
.cat-card--tagged .cat-card__tag {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(20,14,10,0.55);
  color: var(--white);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  z-index: 2;
}

.center-cta { text-align: center; margin-top: clamp(40px, 6vw, 72px); }

/* ==========================================================================
   Get SVIP popup modal — red panel, lady cutout left, form right
   ========================================================================== */
.svip-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 14, 10, 0.55);
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.svip-modal-overlay.is-open { display: flex; }
.svip-modal {
  position: relative;
  background: var(--red);
  color: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  width: min(880px, 100%);
  max-height: 90vh;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
}
.svip-modal__media { position: relative; min-height: 380px; }
.svip-modal__media img {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: left bottom;
}
.svip-modal__body { padding: clamp(24px, 4vw, 44px); overflow-y: auto; }
.svip-modal__body h2 {
  font-family: 'Sora', system-ui, sans-serif;
  font-weight: 700;
  color: #fff;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  margin-bottom: 16px;
}
.svip-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.18);
  color: #fff;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}
.svip-modal__close:hover { background: rgba(255,255,255,0.32); }
@media (max-width: 720px) {
  .svip-modal { grid-template-columns: 1fr; }
  .svip-modal__media { display: none; }
}

/* Tablet — slightly narrower panel, balanced columns */
@media (max-width: 1024px) and (min-width: 721px) {
  .svip-modal { width: min(680px, 100%); grid-template-columns: 0.85fr 1.15fr; }
  .svip-modal__media { min-height: 320px; }
}

/* Mobile polish — bigger touch targets, no iOS zoom, safe heights */
@media (max-width: 720px) {
  .svip-modal-overlay { padding: 14px; }
  .svip-modal { max-height: 92vh; }
  .svip-modal__body { padding: 22px 18px; }
  .svip-modal__body h2 { padding-right: 36px; }
  .svip-modal__close { width: 40px; height: 40px; top: 8px; right: 8px; }
  .svip-modal .field input { font-size: 16px; padding: 13px 16px; }
  .svip-modal .btn--block { padding-top: 14px; padding-bottom: 14px; }
}

/* HoReCa B2B heading — Figma: Sora Bold 96, LH 110%, LS -2% */
.section-head--b2b h2 {
  font-family: 'Sora', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(1.8rem, 7.5vw, 96px);
  line-height: 110%;
  letter-spacing: -0.02em;
  color: #FFFFFF;
}
.section-head--b2b .b2b-accent { color: #FDF3E0; }

/* ==========================================================================
   HoReCa category masonry — 2 cols: left stack (wide + square), right tall
   ========================================================================== */
.horeca-masonry {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  align-items: stretch;
}

/* ---- Dynamic HoReCa category layouts (adjusts to category count) ---- */
/* 3 categories: original masonry (wide+square left, tall right) */
.horeca-cats--masonry {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  align-items: stretch;
}
/* 2 or 4+ categories: equal grid. 2 -> side-by-side (Heinz style). */
.horeca-cats--grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(10px, 1.4vw, 18px);
  align-items: start;
  justify-items: center;
}
.horeca-cats--grid .horeca-card--grid { width: 100%; }
/* 1 category: single full-width card */
.horeca-cats--one {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
}
/* grid cards: squarish (Heinz-style), but capped to fit within one screen */
.section--cream:has(.horeca-cats--grid),
.section--cream:has(.horeca-cats--one) { padding: clamp(40px, 6vw, 72px) 0; }
.horeca-card--grid {
  aspect-ratio: 1 / 1;
  max-height: calc(100vh - var(--header-h) + 20px);
}
.horeca-cats--one .horeca-card--grid {
  aspect-ratio: 16 / 9;
  max-height: calc(100vh - var(--header-h) + 20px);
}
@media (max-width: 760px) {
  .horeca-cats--grid { grid-template-columns: 1fr; }
  .horeca-card--grid { aspect-ratio: 4 / 3; max-height: none; }
  .horeca-cats--one .horeca-card--grid { aspect-ratio: 16 / 10; max-height: none; }
}
.horeca-masonry__col {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
.horeca-card {
  position: relative;
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.horeca-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s cubic-bezier(.22,.61,.36,1);
}
/* whole HoReCa card lifts as one unit (image zoom removed) */
.horeca-card { transition: transform .38s cubic-bezier(.2,.7,.2,1); will-change: transform; }
.horeca-card:hover { transform: translateY(-12px) scale(1.03) !important; z-index: 5; }
.horeca-card:hover .masonry__arrow { background: #fff; color: var(--red); }
.horeca-card--wide { aspect-ratio: 16 / 10; }
.horeca-card--square { aspect-ratio: 1 / 1; flex: 1; }
.horeca-card--tall { height: 100%; }
.horeca-card__desc {
  color: rgba(255,255,255,0.92);
  font-size: 0.88rem;
  line-height: 1.45;
  margin-top: 6px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.45);
}
@media (max-width: 760px) {
  .horeca-masonry { grid-template-columns: 1fr; }
  .horeca-card--tall { height: auto; aspect-ratio: 3 / 4; }
}

/* ==========================================================================
   Heinz-style product cards (Find Your Superfood)
   ========================================================================== */
/* Superfood slider (swipeable) */
.hz-grid {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Big vertical padding pushes the overflow clip line away from the cards,
     so a hovered (scaled) card is never cut off top/bottom. Negative margin
     cancels the extra space so page spacing stays the same. */
  padding: 40px 2px 40px;
  margin: -40px 0;
}
.hz-grid::-webkit-scrollbar { display: none; }
.hz-grid > .hz-card {
  flex: 0 0 calc((100% - 60px) / 3.5);
  scroll-snap-align: start;
}
@media (max-width: 900px) { .hz-grid > .hz-card { flex: 0 0 calc((100% - 20px) / 2); } }
@media (max-width: 520px) { .hz-grid > .hz-card { flex: 0 0 88%; } }

/* nav arrows — sit outside the cards on left/right */
.hz-slider { position: relative; padding: 0 30px; }
.hz-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: #fff;
  color: var(--red);
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.hz-nav:hover { background: var(--red); color: #fff; }
.hz-nav svg { width: 22px; height: 22px; }
.hz-nav--prev { left: -18px; }
.hz-nav--next { right: -18px; }
@media (max-width: 520px) { .hz-nav { display: none; } .hz-slider { padding: 0; } }

.hz-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 3 / 4.4;
  border-radius: 22px;
  overflow: hidden;
  padding: 22px 20px 24px;
  color: #fff;
  text-align: left;
  isolation: isolate;
  box-shadow: none;
  transition: transform .38s cubic-bezier(.2,.7,.2,1), filter .38s ease;
}
/* whole card animates as one unit: lift + slight zoom.
   !important + higher specificity so .reveal.is-visible (transform:none)
   can't override it once the scroll-reveal has run. */
.hz-grid > .hz-card:hover,
.hz-card.reveal.is-visible:hover,
.hz-card:hover {
  transform: scale(1.03) !important;
  box-shadow: none !important;
  z-index: 5;
}

/* colored backgrounds */
.hz-card--red    { background: radial-gradient(120% 90% at 50% 20%, #e23b2e 0%, #c22a1f 60%, #9e1e15 100%); }
.hz-card--maroon { background: radial-gradient(120% 90% at 50% 20%, #6a1220 0%, #4a0d18 70%, #350a12 100%); }
.hz-card--yellow { background: radial-gradient(120% 90% at 50% 20%, #ffc21a 0%, #f5a800 60%, #e29200 100%); }
.hz-card--cream  { background: linear-gradient(180deg, #efe7d6 0%, #e6dcc6 100%); }

/* product image floats in upper area */
.hz-card__media {
  position: absolute;
  top: 6%;
  left: 50%;
  transform: translateX(-50%);
  width: 72%;
  height: 58%;
  z-index: 1;
}
.hz-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 14px 22px rgba(0,0,0,0.28));
  transition: transform .38s cubic-bezier(.2,.7,.2,1);
}
/* photo cards: image FILLS the whole card (Heinz KegChup style, full-bleed) */
.hz-card__media--photo {
  position: absolute;
  inset: 0;
  top: 0;
  left: 0;
  transform: none;
  width: 100%;
  height: 100%;
  border-radius: 22px;
  overflow: hidden;
  z-index: 0;
}
.hz-card__media--photo img {
  object-fit: cover;
  border-radius: 0;
  filter: none;
  transform: translateZ(0);
  backface-visibility: hidden;
  image-rendering: auto;
}
/* black gradient rising from bottom so text stays readable.
   Height reduced 30% -> 15%; the inner stops are halved with it so the
   fade keeps the same shape instead of ending in a hard band. */
.hz-card__media--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.45) 7%, rgba(0,0,0,0.08) 12%, rgba(0,0,0,0) 15%);
}

/* text block over bottom */
.hz-card__body { position: relative; z-index: 2; max-width: 82%; }
.hz-card__body h3 {
  font-family: 'Sora', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(1.4rem, 2vw, 1.85rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
.hz-card__body p {
  font-family: 'Sora', system-ui, sans-serif;
  font-size: 0.9rem;
  line-height: 1.4;
  color: rgba(255,255,255,0.92);
  margin: 0;
  text-shadow: 0 1px 8px rgba(0,0,0,0.25);
}
.hz-card__body--dark h3 { color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,0.3); }
.hz-card__body--dark p { color: rgba(255,255,255,0.92); text-shadow: 0 1px 8px rgba(0,0,0,0.25); }

/* circular button bottom-right */
.hz-card__btn {
  position: absolute;
  right: 18px;
  bottom: 22px;
  z-index: 3;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: background .2s ease, color .2s ease;
}
.hz-card__btn svg { width: 20px; height: 20px; }
.hz-card:hover .hz-card__btn { background: #fff; color: #c22a1f; }
.hz-card__btn--dark { border-color: rgba(255,255,255,0.85); color: #fff; }
.hz-card:hover .hz-card__btn--dark { background: #fff; color: #111; }

/* badges */
.hz-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 4;
  background: #f4ead6;
  color: #2a1f18;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.3px;
  padding: 7px 14px;
  border-radius: 6px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
.hz-badge--star {
  left: 50%;
  transform: translateX(-50%);
  background: #1a1a1a;
  color: #fff;
  text-align: center;
  line-height: 1.05;
  font-size: 0.8rem;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  clip-path: polygon(50% 0%, 61% 12%, 76% 8%, 79% 24%, 95% 30%, 88% 45%, 100% 58%, 86% 66%, 90% 82%, 74% 82%, 67% 97%, 52% 88%, 38% 98%, 30% 83%, 14% 84%, 18% 68%, 4% 59%, 15% 45%, 8% 30%, 24% 25%, 26% 9%, 42% 13%); }
@media (max-width: 520px) {
  .hz-card { aspect-ratio: 3 / 3.4; }
}

/* ==========================================================================
   Banner quote (red full-bleed statement)
   ========================================================================== */
.banner-quote {
  background: transparent;
  color: #FFFFFF;
  text-align: center;
  padding: clamp(44px, 7vw, 120px) clamp(12px, 1.5vw, 24px);
}
.banner-quote h2 {
  font-family: 'Sora', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(1.8rem, 7.5vw, 96px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  max-width: 1850px;
  margin-inline: auto;
}
.banner-quote__accent { color: #FDF3E0; }

.banner-strip {
  text-align: center;
  padding: 18px 24px;
  font-weight: 600;
  font-size: 1rem;
}
.banner-strip--yellow { background: var(--yellow); color: var(--dark); }
/* per-product banner (image or video) on horeca product view */
.pd-banner { position: relative; width: 100%; aspect-ratio: 21 / 9; overflow: hidden; background: #000; }
.pd-banner .pd-banner__media,
.pd-banner img, .pd-banner video, .pd-banner iframe,
.pd-banner .cms-yt-cover, .pd-banner .cms-video-cover { width: 100%; height: 100%; object-fit: cover; display: block; border: 0; }
.pd-banner .cms-yt-cover { position: absolute; inset: 0; }
@media (max-width: 760px) { .pd-banner { aspect-ratio: 16 / 10; } }

/* ==========================================================================
   Lifestyle gallery (image + colored product tag card)
   ========================================================================== */
.lifestyle-stack { display: flex; flex-direction: column; gap: 0; }
.lifestyle-card { position: relative; }
.lifestyle-card img { width: 100%; aspect-ratio: 16/8; object-fit: cover; border-radius: 0; }
.lifestyle-card__tag {
  position: absolute;
  right: clamp(16px, 6vw, 64px);
  bottom: clamp(-30px, -4vw, -18px);
  width: min(320px, 80%);
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 16px;
  display: flex;
  gap: 12px;
  align-items: center;
}
.lifestyle-card__tag img { width: 56px; height: 56px; border-radius: 10px; flex-shrink: 0; aspect-ratio: 1/1; }
.lifestyle-card__tag h4 { font-size: 0.95rem; margin-bottom: 3px; }
.lifestyle-card__tag p { font-size: 0.78rem; color: var(--ink-soft); line-height: 1.35; }
.lifestyle-card--red .lifestyle-card__tag { border-left: 5px solid var(--red); }
.lifestyle-card--yellow .lifestyle-card__tag { border-left: 5px solid var(--yellow); }
.lifestyle-card--olive .lifestyle-card__tag { border-left: 5px solid var(--olive); }
.lifestyle-card + .lifestyle-card { margin-top: 46px; }
.lifestyle-banner { display: block; }
.lifestyle-banner img { width: 100%; height: auto; display: block; border-radius: 0; }
.lifestyle-banner + .lifestyle-banner { margin-top: 24px; }

/* ===== Live lifestyle banners (photo bg + overlay panel) — Figma specs ===== */
.lf-banner {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1280 / 560;
  border-radius: 20px;
  overflow: hidden;
  isolation: isolate;
}
.lf-banner + .lf-banner { margin-top: 0; }
.lf-banner__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  border-radius: 0;
}
/* colored panel bottom-right */
.lf-banner__panel {
  position: absolute;
  right: 2.5%;
  bottom: 6%;
  z-index: 2;
  width: 62%;
  max-width: 780px;
  min-height: 0;
  /* Fixed layout: 40% image | flexible text | auto arrow. Nothing shifts. */
  display: grid;
  grid-template-columns: 40% 1fr auto;
  align-items: center;
  gap: clamp(12px, 1.5vw, 24px);
  padding: clamp(12px, 1.4vw, 18px) clamp(22px, 2.4vw, 36px);
  border-radius: 24px;
  color: #FFFFFF;
  overflow: visible;
}
.lf-banner--red .lf-banner__panel    { background: #CE3F2B; }
.lf-banner--yellow .lf-banner__panel { background: #F5B33D; }
.lf-banner--green .lf-banner__panel  { background: #9FB980; }

/* product image — sits in the 40% column, anchored to bottom, can overflow up.
   Fixed viewport-based height so it doesn't stretch the panel tall. */
.lf-banner__product {
  grid-column: 1;
  grid-row: 1;
  justify-self: center;
  align-self: end;
  width: auto;
  max-width: 100%;
  height: clamp(120px, 15vw, 200px);
  margin-top: -30px;
  margin-bottom: -8px;
  object-fit: contain;
  object-position: center bottom;
}
.lf-banner__product--pair {
  grid-column: 1;
  justify-self: center;
  align-self: end;
  display: inline-flex;
  align-items: flex-end;
  gap: 6px;
  width: 100%;
  max-width: clamp(110px, 15vw, 230px);
  margin-bottom: clamp(-12px, -1.4vw, -20px);
}
.lf-banner__product--pair img {
  width: auto;
  height: clamp(150px, 20vw, 290px);
  object-fit: contain;
}
.lf-banner__product--pair img:last-child { height: clamp(90px, 12vw, 175px); }

/* Wolffia tub is wider/shorter — enlarge slightly but keep it in its 40% slot */
.lf-banner--green .lf-banner__product {
  max-width: clamp(150px, 20vw, 300px);
}

/* text */
.lf-banner__text { grid-column: 2; min-width: 0; }
.lf-banner__text h3 {
  font-family: 'Sora', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(1.1rem, 2.5vw, 32px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
  color: #FFFFFF;
}
.lf-banner__text p {
  font-family: 'Sora', system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(0.78rem, 1.55vw, 20px);
  line-height: 1.3;
  letter-spacing: -0.02em;
  margin: 0;
  color: #FFFFFF;
}
/* arrow button 57x57 */
.lf-banner__arrow {
  flex-shrink: 0;
  width: clamp(38px, 4.5vw, 57px);
  height: clamp(38px, 4.5vw, 57px);
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  transition: background .2s ease, color .2s ease;
}
.lf-banner__arrow svg { width: 45%; height: 45%; }
.lf-banner--red:hover .lf-banner__arrow    { background:#fff; color:#CE3F2B; }
.lf-banner--yellow:hover .lf-banner__arrow { background:#fff; color:#F5B33D; }
.lf-banner--green:hover .lf-banner__arrow  { background:#fff; color:#9FB980; }

@media (max-width: 700px) {
  .lf-banner { aspect-ratio: 4 / 5; }
  .lf-banner__panel {
    width: 94%;
    right: 3%;
    left: 3%;
    bottom: 3%;
    padding: 16px 18px;
    padding-left: 110px;
    gap: 12px;
  }
  .lf-banner__text h3 { font-size: 1.25rem; }
  .lf-banner__text p { font-size: 0.8rem; line-height: 1.35; }
  /* product smaller & fixed left slot so it never covers the text */
  .lf-banner__product,
  .lf-banner--green .lf-banner__product {
    width: 90px;
    left: 10px;
    bottom: 8px;
  }
  .lf-banner__product--pair { width: 96px; left: 8px; bottom: 8px; }
  .lf-banner__product--pair img { height: 120px; }
  .lf-banner__product--pair img:last-child { height: 78px; }
  .lf-banner__arrow { width: 40px; height: 40px; }
}
@media (max-width: 420px) {
  .lf-banner { aspect-ratio: 3 / 4; }
  .lf-banner__panel { padding-left: 96px; }
  .lf-banner__product,
  .lf-banner--green .lf-banner__product { width: 78px; }
}

/* ==========================================================================
   Timeline
   ========================================================================== */
.timeline { margin-top: 30px; }
.timeline--full { margin-top: clamp(28px, 4vw, 44px); }
/* timeline rendered inside the About right column */
.timeline--incolumn { margin-top: clamp(24px, 3vw, 36px); }
.section--about .feature-copy .timeline--incolumn .timeline__item { padding: 13px 0; }
.timeline__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 15px 0;
  border-bottom: 1px solid var(--cream-line);
  font-size: 0.95rem;
}
.timeline__item:last-child { border-bottom: none; }
.timeline__item span:last-child { color: var(--ink-faint); flex-shrink: 0; }

/* Our Story timeline — Figma spec: Sora SemiBold 20, LH 120%, LS -2%, #000 */
.timeline--story .timeline__item {
  font-family: 'Sora', system-ui, sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 120%;
  letter-spacing: -0.02em;
  color: #000000;
}
.timeline--story .timeline__item span:last-child { color: #000000; }

/* ==========================================================================
   Founder / detail feature block (image + petal + copy)
   ========================================================================== */
.feature-split {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(28px, 6vw, 64px);
  align-items: center;
}
.section--about .feature-split,
.cms-section--about .feature-split { grid-template-columns: 1fr 1fr !important; gap: 0 !important; column-gap: 0 !important; }
.feature-split--story { grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(32px, 5vw, 72px); }
/* image on the right: swap the two columns (image is first in the DOM) */
.feature-split--story.feature-split--img-right .ti-media { order: 2; }
.feature-split--story.feature-split--img-right > div:not(.ti-media) { order: 1; }
.feature-split--story h2 { color: var(--red); font-size: clamp(1.6rem, 3.2vw, 2.1rem); line-height: 1.2; letter-spacing: -0.01em; margin-bottom: 16px; }
.feature-split--story > div > div { color: var(--ink-soft); line-height: 1.7; letter-spacing: 0.005em; }
.feature-split--story p { line-height: 1.7; }
@media (max-width: 760px) {
  .feature-split { grid-template-columns: 1fr; gap: 14px; }
  .feature-split .timeline { margin-top: 20px; }
  /* Our Story: image always first on mobile (image is first in DOM) */
  .feature-split--story .ti-media { order: -1 !important; }
  .feature-split--story > div:not(.ti-media) { order: 0 !important; }
}
.feature-split--reverse { direction: rtl; }
.feature-split--reverse > * { direction: ltr; }
.feature-copy h2 { color: var(--red); margin-bottom: 14px; font-size: clamp(1.5rem, 3.4vw, 2rem); }
.feature-copy p { color: var(--ink-soft); line-height: 1.7; }

/* ==========================================================================
   Feature rows (Our Story: Fresher shelves / Better business)
   ========================================================================== */
.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 360px;
}
@media (max-width: 760px) {
  .feature-row { grid-template-columns: 1fr; min-height: auto; }
  .feature-row__img { order: -1; }
}
.feature-row__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: clamp(28px, 6vw, 64px);
}
.feature-row__copy h3 { font-size: clamp(1.4rem, 3vw, 1.9rem); line-height: 1.25; letter-spacing: -0.01em; margin-bottom: 12px; }
.feature-row__copy p { color: var(--ink-soft); line-height: 1.7; letter-spacing: 0.005em; }
.feature-row__img { overflow: hidden; min-height: 280px; }
.feature-row__img img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   SVIP / Newsletter sign-up section
   ========================================================================== */
.svip-section {
  position: relative;
  background: var(--red);
  color: var(--white);
  overflow: hidden;
  padding: clamp(48px, 7vw, 96px) 0;
}
.svip-section .svip-form h2 { margin-bottom: 14px; }
.svip-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(20px, 5vw, 56px);
  /* extra side padding ONLY for the SVIP/B2B form section */
  padding-left: clamp(16px, 5vw, 80px);
  padding-right: clamp(16px, 5vw, 80px);
}
@media (max-width: 760px) { .svip-grid { grid-template-columns: 1fr; } }
/* Hide lady image on mobile & tablet — show only the form */
@media (max-width: 900px) {
  .svip-grid { grid-template-columns: 1fr; }
  .svip-photo--cutout { display: none; }
  .svip-form { max-width: 520px; margin: 0 auto; }
}
.svip-photo { aspect-ratio: 4/5; border-radius: var(--radius); overflow: hidden; }
.svip-photo img { width: 100%; height: 100%; object-fit: cover; }
.svip-photo--cutout {
  position: static;
  min-height: 0;
  aspect-ratio: auto;
}
.svip-photo--cutout img {
  position: absolute;
  bottom: 0;
  left: clamp(0px, 2vw, 40px);
  width: 40%;
  max-width: 520px;
  height: auto;
  object-fit: contain;
  display: block;
  z-index: 1;
}
.svip-form h2 {
  margin-bottom: 18px;
  font-family: 'Sora', system-ui, sans-serif;
  font-weight: 700;
  color: #FFFFFF;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  letter-spacing: -0.02em;
}
.svip-form label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 6px;
  opacity: 0.9;
}
.field { margin-bottom: 10px; }
.field input {
  width: 100%;
  padding: 11px 16px;
  border-radius: var(--radius-sm);
  border: none;
  background: var(--white);
  color: var(--ink);
}
.field input::placeholder { color: var(--ink-faint); }
.form-note { font-size: 0.78rem; opacity: 0.85; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.form-note input[type="checkbox"] { width: 16px; height: 16px; flex-shrink: 0; accent-color: #fff; margin: 0; }
.form-success {
  background: rgba(255,255,255,0.16);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  font-size: 0.9rem;
  margin-top: 10px;
  display: none;
}
.form-success.is-visible { display: block; }

/* combined hero + svip on one red section (retail page) */
.svip-section--with-heading h2.banner-h {
  text-align: center;
  margin-bottom: 40px;
  font-family: 'Sora', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(2rem, 6.6vw, 96px);
  line-height: 110%;
  letter-spacing: -0.02em;
}
.banner-h__line1 { color: #FFFFFF; }
.banner-h__line2 { color: #FDF3E0; }

/* ==========================================================================
   Card grids — products / recipes / meals
   ========================================================================== */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}
@media (min-width: 1300px) { .card-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 900px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .card-grid { grid-template-columns: 1fr; } }

.product-card, .recipe-card { display: block; background: transparent; }
.product-card__img, .recipe-card__img {
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 4/5;
  margin-bottom: 16px;
  background: var(--cream);
}
/* Products listing pages: square (no rounded) card images */
#product-grid .product-card__img,
#horeca-product-grid .product-card__img,
[data-page="products"] .product-card__img,
[data-page="horeca-products"] .product-card__img { border-radius: 0 !important; }
.product-card__img img, .recipe-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
/* transparent product-pack PNGs sit centered on the cream tile */
.product-card__img img[src$="-pack.png"],
.product-card__img img[src$="-tub.png"] {
  object-fit: contain;
  padding: 14%;
}
.product-card:hover img, .recipe-card:hover img { transform: scale(1.05); }

/* ===== HoReCa products page: cream card, red on hover (Heinz-style) ===== */
#horeca-product-grid .product-card__img,
[data-page="horeca-products"] .product-card__img {
  background: var(--cream) !important;
  transition: background .45s cubic-bezier(.4,0,.2,1);
}
#horeca-product-grid .product-card:hover .product-card__img,
[data-page="horeca-products"] .product-card:hover .product-card__img {
  background: #CE3D29 !important;
}
/* Heinz-style: image lifts up + gently zooms on hover */
#horeca-product-grid .product-card__img img,
[data-page="horeca-products"] .product-card__img img {
  transition: transform .45s cubic-bezier(.4,0,.2,1) !important;
}
#horeca-product-grid .product-card:hover img,
[data-page="horeca-products"] .product-card:hover img { transform: rotate(-8deg) !important; }

/* ===== Retail products page: transparent-image cards (cream + red hover) ===== */
#product-grid .product-card--transparent .product-card__img {
  background: var(--cream) !important;
  transition: background .45s cubic-bezier(.4,0,.2,1);
}
#product-grid .product-card--transparent:hover .product-card__img {
  background: #CE3D29 !important;
}
#product-grid .product-card--transparent .product-card__img img {
  object-fit: contain !important;
  padding: 0;
  transition: transform .45s cubic-bezier(.4,0,.2,1) !important;
}
/* Heinz-style: image lifts up + gently zooms on hover */
#product-grid .product-card--transparent:hover .product-card__img img { transform: rotate(-8deg) !important; }
/* transparent product images: contain + padding so cream/red bg shows around */
#horeca-product-grid .product-card__img img,
[data-page="horeca-products"] .product-card__img img {
  object-fit: contain;
  padding: 0;
}
.product-card h3, .recipe-card h3 {
  font-family: 'Sora', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
  color: var(--ink);
}
.product-card p, .recipe-card p {
  font-family: 'Sora', system-ui, sans-serif;
  font-size: 0.85rem;
  color: var(--ink-soft);
  line-height: 1.55;
}
/* View button on product cards */
.product-card__view {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-family: 'Sora', system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  transition: background .2s ease;
}
.product-card__view svg { width: 16px; height: 16px; }
.product-card:hover .product-card__view { background: #a5291b; }
.recipe-card__link { display: inline-block; margin-top: 10px; font-size: 0.85rem; font-weight: 600; color: var(--red); }

.hide { display: none !important; }

/* ==========================================================================
   Product detail layout
   ========================================================================== */
.pd-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: stretch;
}
@media (max-width: 760px) { .pd-layout { grid-template-columns: 1fr; } }
.pd-gallery {
  /* Heinz-style: compact product that floats on the page. NOT sticky itself —
     the wrapper/column is sticky so the image travels to the section end. */
  border-radius: var(--radius);
  background: transparent;
  box-shadow: none;
  height: auto;
  display: flex;
  flex-direction: column;
}
/* Retail: column wrapper (image + thumbnails) sticks and travels to the
   section's end because .pd-layout stretches both columns to equal height. */
.pd-gallery-col {
  position: sticky;
  top: 110px;
  height: fit-content;
}
/* HoReCa detail has no col wrapper — the gallery itself is the sticky child */
.pd-layout > .pd-gallery {
  position: sticky;
  top: 110px;
  height: fit-content;
}
.pd-gallery [data-media-main] { min-height: 0; }
/* HoReCa detail: main <img> sits DIRECTLY inside .pd-gallery (no media-main
   wrapper). Exclude .pd-thumb so gallery thumbnails aren't stretched. */
.pd-gallery > img:not(.pd-thumb) {
  min-height: 0;
  width: 100%;
  max-height: 520px;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 22px 26px rgba(0, 0, 0, 0.14));
}
.pd-gallery [data-media-main] img {
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: contain;
  object-position: center;
  padding: 0;
  filter: drop-shadow(0 22px 26px rgba(0, 0, 0, 0.14));
}
/* Product detail: tighter top space above the image/title */
.section--cream:has(.pd-layout) { padding-top: clamp(20px, 2.5vw, 36px); }
/* transparent product-pack PNGs sit centered on the cream tile */
.pd-gallery img[src$="-pack.png"],
.pd-gallery img[src$="-tub.png"] {
  object-fit: contain;
  padding: 12%;
}
.pd-info h1 { color: var(--red); font-size: clamp(1.8rem, 4vw, 2.4rem); margin-bottom: 18px; }
.pd-info-section { margin-bottom: 20px; }
.pd-info-section h4 {
  color: var(--red);
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.pd-info-section p { color: var(--ink-soft); font-size: 0.92rem; line-height: 1.65; }

.option-pills { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.option-pills button,
.option-pills span {
  display: inline-block;
  background: var(--white);
  border: 1.5px solid var(--cream-line);
  padding: 9px 22px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 0.85rem;
  /* Display-only pills: no selection/focus state at all */
  cursor: default;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.option-pills button:focus,
.option-pills button:focus-visible,
.option-pills button:active,
.option-pills button:hover,
.option-pills button.is-active,
.option-pills span:hover {
  background: var(--white);
  border-color: var(--cream-line);
  color: inherit;
  outline: none;
  box-shadow: none;
}

.spec-list { font-size: 0.85rem; color: var(--ink-soft); line-height: 1.8; }
.spec-list div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px dashed var(--cream-line); padding: 4px 0; }

/* ==========================================================================
   Accordion
   ========================================================================== */
.accordion { border-top: 1px solid var(--cream-line); margin-top: 24px; }
/* full-width accordion below the image+content row */
.accordion--full {
  margin-top: clamp(32px, 5vw, 56px);
  border-top: 1px solid var(--cream-line);
}
/* accordion inside the right column (Heinz-style product nav) */
.accordion--incolumn {
  margin-top: 24px;
  border-top: 1px solid var(--cream-line);
}
.accordion--incolumn .accordion-header { padding: 16px 2px; font-size: 1rem; }
.accordion--full .accordion-header { padding: 24px 4px; font-size: 1.15rem; }
.accordion-item { border-bottom: 1px solid var(--cream-line); }
.accordion-header {
  width: 100%;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 2px;
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--ink);
  text-align: left;
}
.accordion-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--red);
  color: var(--red);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.35rem;
  transition: transform .2s ease;
}
.accordion-item.is-open .accordion-icon { transform: rotate(45deg); }
.accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s ease;
}
.accordion-item.is-open .accordion-body { max-height: 600px; }
.accordion-body-inner { padding: 0 2px 18px; color: var(--ink-soft); font-size: 0.9rem; line-height: 1.7; }

/* ==========================================================================
   Mosaic grid (Kitchen Essentials)
   ========================================================================== */
/* Masonry gallery — auto-height, supports images & videos, columns flow */
/* ==========================================================================
   Recipe cards grid (recipes PAGE only) — image on top, title + desc below
   ========================================================================== */
.recipe-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.5vw, 36px);
}
.recipe-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--ink);
  transition: transform .38s cubic-bezier(.2,.7,.2,1);
  will-change: transform;
}
.recipe-card:hover { transform: translateY(-8px); }
.recipe-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--cream-line);
}
.recipe-card__media img,
.recipe-card__media video,
.recipe-card__media iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.recipe-card__body { padding: 16px 2px 0; }
.recipe-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.05rem, 1.4vw, 1.35rem);
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 6px;
}
.recipe-card__desc {
  font-size: .95rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}
@media (max-width: 900px) {
  .recipe-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .recipe-cards { grid-template-columns: 1fr; }
}

.masonry {
  column-count: 3;
  column-gap: 8px;
}
.masonry__item {
  position: relative;
  display: inline-block;
  width: 100%;
  break-inside: avoid;
  margin: 0 0 8px;
  border-radius: 14px;
  overflow: hidden;
  transition: transform .38s cubic-bezier(.2,.7,.2,1);
  will-change: transform;
}
.masonry__item img,
.masonry__item video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  transition: transform .3s ease;
}
/* whole recipe card lifts as one unit (image zoom removed) */
.masonry__item:hover {
  transform: translateY(-6px) scale(1.015) !important;
  z-index: 5;
}

/* name + arrow overlay on each gallery item */
.masonry__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 22px;
  background: linear-gradient(to top, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.10) 28%, rgba(0,0,0,0) 50%);
  pointer-events: none;
}
.masonry__overlay h3 {
  color: #fff;
  font-family: 'Sora', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(1.05rem, 1.8vw, 1.5rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0;
  text-shadow: 0 2px 10px rgba(0,0,0,0.45);
}
.masonry__arrow {
  flex-shrink: 0;
  width: clamp(40px, 4vw, 54px);
  height: clamp(40px, 4vw, 54px);
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: background .2s ease, color .2s ease;
}
.masonry__arrow svg { width: 46%; height: 46%; }
.masonry__item:hover .masonry__arrow { background: #fff; color: var(--red); }

/* video items in masonry (16:9 YouTube embeds) */
.masonry__item--video {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
}
.masonry__item--video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  pointer-events: none;
}
/* Transparent layer above the muted preview iframe so clicking the card
   navigates to the recipe page (instead of YouTube capturing the click) */
.masonry__video-hit {
  position: absolute;
  inset: 0;
  z-index: 1;
  cursor: pointer;
}
a.masonry__item--video { cursor: pointer; }
@media (max-width: 900px) { .masonry { column-count: 2; } }
@media (max-width: 520px) { .masonry { column-count: 1; } }

/* ==========================================================================
   B2B enquiry (Horeca)
   ========================================================================== */
.b2b-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(24px,5vw,56px);
  align-items: center;
  max-width: 980px;
  margin: 0 auto;
}
@media (max-width: 760px) { .b2b-grid { grid-template-columns: 1fr; } }
.b2b-photo { aspect-ratio: 4/5; border-radius: var(--radius); overflow: hidden; }
.b2b-photo img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   Recipe detail
   ========================================================================== */
.rd-layout {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(28px, 6vw, 64px);
  align-items: start;
}
@media (max-width: 860px) {
  .rd-layout { grid-template-columns: 1fr; gap: 24px; }
  .rd-media { max-width: 560px; margin: 0 auto; width: 100%; }
}
@media (max-width: 520px) {
  .rd-info h1 { font-size: 1.6rem; }
  .rd-directions .accordion-header { padding: 18px 2px; }
  .rd-thumbs .rd-thumb { width: 56px; height: 56px; }
}
.rd-media img { width: 100%; border-radius: var(--radius); aspect-ratio: 1/1; object-fit: cover; box-shadow: var(--shadow-sm); }
.rd-directions { margin-top: clamp(28px, 4vw, 48px); }
/* Recipe detail section headings — Sora 48, #CE3D29 */
h2.rd-section-title,
.section-head h2.rd-section-title {
  font-family: 'Sora', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(1.7rem, 3.4vw, 48px);
  color: #CE3D29;
  text-align: left;
}
/* Directions header — Figma: Sora Regular 36, LH 120%, LS -2%, #000, left */
.rd-directions .accordion-header {
  font-family: 'Sora', system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(1.4rem, 2.5vw, 36px);
  line-height: 120%;
  letter-spacing: -0.02em;
  color: #000000;
  text-align: left;
  padding: 24px 4px;
}
.rd-media__main { position: relative; width: 100%; aspect-ratio: 1/1; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.rd-media__main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rd-media__main iframe { width: 100%; height: 100%; border: 0; display: block; }
.rd-thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.rd-thumb {
  position: relative;
  width: 64px; height: 64px;
  border-radius: 10px;
  overflow: hidden;
  border: 1.5px solid var(--cream-line);
  padding: 0;
  background: none;
  cursor: pointer;
}
.rd-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rd-thumb.is-active { border-color: var(--red); box-shadow: 0 0 0 2px rgba(206,63,43,0.25); }
.rd-thumb__play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.35);
  color: #fff;
}
.rd-thumb__play svg { width: 22px; height: 22px; }
.rd-info h1 { color: var(--red); margin-bottom: 12px; font-size: clamp(1.7rem, 3.6vw, 2.3rem); }
.rd-tags { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
.rd-tags span { background: var(--cream); border-radius: var(--radius-pill); padding: 7px 16px; font-size: 0.8rem; font-weight: 600; color: var(--ink-soft); }
.ingredient-group { margin-bottom: 18px; }
.ingredient-group h4 { color: var(--red); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 8px; }
.ingredient-group ul li { font-size: 0.92rem; color: var(--ink-soft); padding: 5px 0; border-bottom: 1px dashed var(--cream-line); }
.directions-list { padding-left: 0; counter-reset: step; }
.directions-list li {
  counter-increment: step;
  position: relative;
  padding: 4px 0 14px 36px;
  font-size: 0.92rem;
  color: var(--ink-soft);
  line-height: 1.6;
}
.directions-list li::before {
  content: counter(step);
  position: absolute;
  left: 0; top: 2px;
  width: 24px; height: 24px;
  background: var(--red);
  color: var(--white);
  font-size: 0.78rem;
  font-weight: 700;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================================================
   Social banner
   ========================================================================== */
.social-banner { background: var(--red); text-align: center; padding: 40px 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.social-banner h3 { color: var(--white); font-family: 'Sora', system-ui, sans-serif; font-weight: 700; text-transform: uppercase; font-size: clamp(1.2rem, 2.2vw, 1.6rem); letter-spacing: -0.01em; margin-bottom: 16px; }
.social-icons { display: flex; justify-content: center; gap: 22px; }
.social-icons a {
  width: var(--social-circle, 56px); height: var(--social-circle, 56px);
  border: 1.5px solid currentColor;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--social-icon, var(--white));
  transition: background .15s ease;
}
.social-icons a:hover { background: rgba(255,255,255,0.18); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--white); padding: 56px 0 28px; border-top: 1px solid var(--cream-line); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 32px;
}
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand .logo { color: var(--red); margin-bottom: 10px; }
.footer-brand p { color: var(--ink-soft); font-size: 0.88rem; line-height: 1.6; max-width: 280px; }
.footer-social { display: flex; gap: 10px; margin-top: 16px; }
.footer-social a {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px solid var(--cream-line);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink);
}
.footer-col h5 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 14px; color: var(--ink); }
.footer-col a, .footer-col span { display: block; font-size: 0.88rem; color: var(--ink-soft); padding: 5px 0; }
.footer-col a:hover { color: var(--red); }
.footer-bottom {
  border-top: 1px solid var(--cream-line);
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.8rem;
  color: var(--ink-faint);
}

/* ==========================================================================
   Utility
   ========================================================================== */
.text-center { text-align: center; }
.mt-0 { margin-top: 0 !important; }
.muted { color: var(--ink-soft); }
.lead { font-size: 1.05rem; color: var(--ink-soft); max-width: 640px; margin: 14px auto 0; text-align: center; line-height: 1.7; }

/* ==========================================================================
   Scroll reveal animations (Argeta-style) — smooth fade + slide-up on scroll.
   Does NOT change layout: elements occupy final position; only opacity/transform
   animate. Transform is reset to none at rest so nothing shifts permanently.
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
/* small stagger for grouped items */
.reveal--d1 { transition-delay: .08s; }
.reveal--d2 { transition-delay: .16s; }
.reveal--d3 { transition-delay: .24s; }

/* subtle zoom on media hover (banners, gallery, cards) — no layout shift */
.lf-banner__bg, .masonry__item img, .hz-card__media img {
  transition: transform .5s cubic-bezier(.22,.61,.36,1);
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}


/* ==========================================================================
   Argeta-style pinned CROSS-FADE lifestyle banners.
   .lf-track is tall (gives scroll room). .lf-stage pins (sticky). Each
   .lf-banner is stacked absolutely and cross-fades via opacity as you scroll.
   ========================================================================== */
.lifestyle-stack { display: block; }

.lf-track {
  position: relative;
  /* scroll room for the transitions — JS sets the exact height based on the
     number of banners so each product changes slowly/smoothly. Fallback below. */
  height: 400vh;
}
.lf-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  display: block;
  padding: 0;
}
/* each banner stacked, filling the whole stage edge-to-edge (no gaps).
   WIPE reveal: later banners start clipped from the bottom (hidden) and
   are revealed upward as you scroll. JS drives the clip-path inset. */
.lf-stage .lf-banner {
  position: absolute;
  inset: 0;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
  transform: none;
  margin: 0;
  opacity: 1;
  /* every banner above the base one starts fully clipped (hidden) */
  clip-path: inset(100% 0 0 0);
  will-change: clip-path;
}
/* base (first) banner always fully visible underneath the stack */
.lf-stage .lf-banner:first-child {
  clip-path: inset(0 0 0 0);
}

/* Small screens: keep the pinned cross-fade (same as desktop), just make
   the panel + product compact enough to fit a phone width. */
@media (max-width: 700px) {
  .lf-banner__panel {
    left: 4%;
    right: 4%;
    bottom: 4%;
    width: auto;
    max-width: none;
    padding: 14px 16px;
    grid-template-columns: 34% 1fr auto;
    gap: 10px;
    border-radius: 18px;
  }
  .lf-banner__product { max-width: 92px; margin-top: -18px; }
  .lf-banner--green .lf-banner__product { max-width: 104px; }
  .lf-banner__product--pair { max-width: 96px; margin-bottom: -8px; }
  .lf-banner__product--pair img { height: 118px; }
  .lf-banner__product--pair img:last-child { height: 76px; }
  .lf-banner__text h3 { font-size: 1.05rem; }
  .lf-banner__text p { font-size: 0.78rem; }
  .lf-banner__arrow { width: 34px; height: 34px; flex-shrink: 0; }
  .lf-banner__panel { gap: 8px; padding: 12px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .lf-track { height: auto; }
  .lf-stage { position: static; height: auto; display: block; padding: 0; }
  .lf-stage .lf-banner {
    position: relative; left:auto; right:auto; top:auto;
    transform: none; opacity: 1; clip-path: none;
  }
}

/* ==========================================================================
   Where to buy — store buttons on product detail
   ========================================================================== */
.pd-buy__stores {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 6px;
}
.pd-store {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 20px;
  min-height: 52px;
  border-radius: 12px;
  border: 1.5px solid var(--cream-line);
  background: #fff;
  font-family: 'Sora', system-ui, sans-serif;
  font-size: 1rem;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pd-store:hover { transform: translateY(-2px); box-shadow: none; }
.pd-store__logo { height: 22px; max-width: 90px; object-fit: contain; display: block; }
.pd-store__name { font-weight: 500; letter-spacing: -0.01em; }
.pd-store__name strong { font-weight: 700; }

/* Amazon */
.pd-store--amazon { color: #131921; }
.pd-store--amazon:hover { border-color: #FF9900; }
.pd-store--amazon .pd-store__name { font-weight: 700; }
.pd-store--amazon .pd-store__smile { color: #FF9900; font-weight: 700; }

/* NTUC FairPrice */
.pd-store--ntuc { color: #E4002B; }
.pd-store--ntuc:hover { border-color: #E4002B; }

/* RedMart */
.pd-store--redmart { color: #1A9E8F; }
.pd-store--redmart:hover { border-color: #1A9E8F; }

@media (max-width: 480px) {
  .pd-store { flex: 1 1 100%; }
}

/* ===== CMS section wrappers (fixed v2) ===== */
.cms-section { position: static; }
.rich-block { max-width: 820px; margin: 0 auto 20px; }
.rich-block h3 { margin-bottom: 8px; }

/* Hero wrapper: zero spacing, block, so hero image is edge-to-edge with no gap. */
.cms-section--hero { padding: 0 !important; margin: 0 !important; line-height: 0; }
.cms-section--hero .hero { display: flex; margin: 0; }

/* Plain content sections get default vertical spacing. */
.cms-section--about,
.cms-section--text_image,
.cms-section--timeline,
.cms-section--heading,
.cms-section--rich_text { padding: 60px 0; }
.cms-section--products_slider,
.cms-section--recipes_grid { padding: 70px 0; }
/* New CMS-converted page sections (Products / Recipes / HoReCa / Retail) */
.cms-section--products_grid,
.cms-section--recipes_list,
.cms-section--recipes_mosaic,
.cms-section--horeca_categories { padding: clamp(48px, 7vw, 90px) 0; }

/* ALL inner spacing in these sections is driven by variables so the admin can
   control each gap independently. Previously .section-head had
   margin-bottom:48px and .cat-filter had margin:48px 0 8px — those hardcoded
   MARGINS (not padding) produced the big gaps, which is why changing padding
   in the CMS looked like it did nothing. They are now zeroed and replaced by:
     --gap-head   : heading  -> filter   (Gap after heading)
     --gap-filter : filter   -> grid     (Gap after filter)
   The section's own Pad top / Pad bottom control the outer spacing. */
.cms-section--products_grid,
.cms-section--recipes_list,
.cms-section--recipes_mosaic,
.cms-section--horeca_categories {
  --gap-head: 28px;
  --gap-filter: 28px;
}

.cms-section--products_grid .section-head,
.cms-section--recipes_list .section-head,
.cms-section--recipes_mosaic .section-head,
.cms-section--horeca_categories .section-head {
  margin-top: 0 !important;
  margin-bottom: var(--gap-head) !important;
}
.cms-section--products_grid .cat-filter,
.cms-section--recipes_list .cat-filter,
.cms-section--products_grid .filter-pills,
.cms-section--recipes_list .filter-pills {
  margin-top: 0 !important;
  margin-bottom: var(--gap-filter) !important;
}
.cms-section--products_grid > .container > :last-child,
.cms-section--recipes_list > .container > :last-child,
.cms-section--recipes_mosaic > .container > :last-child,
.cms-section--horeca_categories > .container > :last-child { margin-bottom: 0 !important; }

/* svip, b2b, banners, quote keep their OWN original styling — wrapper adds nothing. */
.cms-section--svip,
.cms-section--b2b,
.cms-section--banners,
.cms-section--quote { padding: 0; background: #CE3F2B; }


/* ===== SVIP cutout lady — full section height (top to bottom), matches original ===== */
.cms-section--svip,
.cms-section--b2b { position: relative; overflow: hidden; }
.cms-section--svip .svip-photo--cutout,
.cms-section--b2b .svip-photo--cutout {
  position: static;
}
.cms-section--svip .svip-photo--cutout img,
.cms-section--b2b .svip-photo--cutout img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: clamp(0px, 3vw, 60px);
  height: 100%;
  width: auto;
  max-width: none;
  object-fit: contain;
  object-position: bottom left;
  z-index: 1;
}

/* Hero media (image OR video/iframe) fill behaviour */
.hero > .hero-media-el,
.hero video.hero-media-el,
.hero iframe.hero-media-el {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; z-index: 0;
}

/* Generic section media (about/text_image/feature_row) image-or-video fill */
.feature-row__img video, .feature-row__img iframe, .feature-row__img img,
.ti-media video, .ti-media iframe, .ti-media img,
.petal-wrap--photo video, .petal-wrap--photo iframe { width:100%; height:100%; object-fit:cover; border:0; display:block; }
.ti-media { aspect-ratio: 4/3; }

/* ===== Full-cover video (MP4 + YouTube) ===== */
/* MP4/WebM: perfect cover, edge to edge */
.cms-video-cover {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border: 0; z-index: 0;
  pointer-events: none;
}

/* YouTube cover wrapper: clip the iframe, scale it up so chrome sits outside */
.cms-yt-cover {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}
.cms-yt-cover iframe {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
  /* default: cover by width */
  width: 100vw; height: 56.25vw;
  min-height: 100%; min-width: 177.78vh;
}

/* Transparent shield over YouTube iframe — blocks hover controls entirely */
.cms-yt-shield {
  position: absolute;
  inset: -4px;                 /* slight overscan to cover edges */
  z-index: 999;                /* above the iframe always */
  background: transparent;
  cursor: default;
  pointer-events: auto;        /* catch all mouse so YT hover controls never fire */
}
/* iframe itself never receives pointer events */
.cms-yt-cover iframe { pointer-events: none !important; }

/* ===== Fix: video in about/text_image/feature_row needs a sized box ===== */
/* When these contain a video/iframe, give the wrapper a real height. */
.petal-wrap--photo:has(video),
.petal-wrap--photo:has(iframe),
.feature-row__img:has(video),
.feature-row__img:has(iframe),
.ti-media:has(video),
.ti-media:has(iframe) {
  position: relative;
  aspect-ratio: 4 / 3;
  min-height: 300px;
  width: 100%;
  border-radius: 0;
  overflow: hidden;
}
/* The cover video/iframe inside them fills the box */
.petal-wrap--photo .cms-video-cover,
.petal-wrap--photo .cms-yt-cover,
.feature-row__img .cms-video-cover,
.feature-row__img .cms-yt-cover,
.ti-media .cms-video-cover,
.ti-media .cms-yt-cover {
  position: absolute; inset: 0; width: 100%; height: 100%;
}

/* ============================================================
   HERO VIDEO — definitive fix (image/video both fill hero)
   ============================================================ */
/* The media wrapper (image, video, or yt-cover div) fills the hero fully */
.hero > img,
.hero > video,
.hero > .cms-video-cover,
.hero > .cms-yt-cover {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  z-index: 0;
  margin: 0;
}
/* YouTube iframe inside hero: cover the whole hero box, hide chrome */
.hero .cms-yt-cover { overflow: hidden; }
.hero .cms-yt-cover iframe {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 177.78vh;
  height: 100%;
  min-width: 100%;
  min-height: 56.25vw;
  border: 0;
  pointer-events: none;
}
/* Make sure hero content sits above the media */
.hero .hero__content { position: relative; z-index: 2; }

/* ===== Banner background video (image ya video) ===== */
.lf-banner > video.lf-banner__bg,
.lf-banner > .lf-banner__bg.cms-yt-cover {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0; border: 0;
}
.lf-banner .lf-banner__bg.cms-yt-cover { overflow: hidden; }
.lf-banner .lf-banner__bg.cms-yt-cover iframe {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 177.78vh; height: 100%;
  min-width: 100%; min-height: 56.25vw;
  border: 0; pointer-events: none;
}

/* SVIP/B2B cutout: if video used, keep it in the cutout spot */
.svip-photo--cutout video,
.svip-photo--cutout .cms-yt-cover,
.svip-photo--cutout .cms-video-cover {
  position: absolute; bottom: 0; left: clamp(0px, 2vw, 40px);
  width: clamp(200px, 34vw, 460px); height: auto; max-height: 100%;
  object-fit: contain; z-index: 1;
}

/* ---- Category image filter (Heinz-style round photos) ---- */
.cat-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 36px;
  margin: 48px 0 8px;
}
.cat-filter__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: transform .2s ease;
}
.cat-filter__circle {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: #4a1420;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 34px;
  font-weight: 700;
  color: #fff;
  border: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.cat-filter__circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cat-filter__circle--all {
  background: var(--all-bg, var(--red, #CE3D29));
  font-size: 24px;
}
.cat-filter__label {
  font-weight: 600;
  font-size: 18px;
  color: inherit;
}
.cat-filter__item.is-active .cat-filter__circle {
  border: 4px solid var(--red, #CE3D29);
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
}
.cat-filter__item.is-active .cat-filter__label {
  color: var(--red, #CE3D29);
}
@media (max-width: 640px) {
  .cat-filter { gap: 18px; }
  .cat-filter__circle { width: 110px; height: 110px; font-size: 24px; }
  .cat-filter__label { font-size: 14px; }
}

/* ---- Multi-select checkmark badge on active category ---- */
.cat-filter__item { position: relative; }
.cat-filter__item .cat-filter__check {
  position: absolute;
  top: 4px;
  right: calc(50% - 70px);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--red, #CE3D29);
  color: #fff;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
  z-index: 2;
}
.cat-filter__item.is-active[data-filter]:not([data-filter="all"]) .cat-filter__check {
  display: flex;
}
@media (max-width: 640px) {
  .cat-filter__item .cat-filter__check {
    right: calc(50% - 45px);
    width: 24px; height: 24px; font-size: 13px;
  }
}

/* ==========================================================================
   COMPREHENSIVE RESPONSIVE PASS  (tablet + mobile)
   Added at the end so it reliably tops up the earlier rules.
   ========================================================================== */

/* --- Global overflow / sizing safety (all small screens) --- */
@media (max-width: 1024px) {
  html, body { overflow-x: hidden; overflow-x: clip; max-width: 100%; }
  img, video, iframe, table { max-width: 100%; }
  /* Never let any element force the page wider than the screen */
  .container, .section, .lifestyle-stack, .hz-slider { max-width: 100%; }
}

/* ============================ TABLET (<= 1024px) ============================ */
@media (max-width: 1024px) {
  .section { padding: clamp(40px, 7vw, 72px) 0; }

  /* Two-column splits -> keep as 2 but tighten gaps on tablet */
  .feature-split { gap: clamp(20px, 3vw, 32px); }

  /* Product & recipe detail: a touch tighter */
  .pd-layout { gap: clamp(20px, 3vw, 36px); }
  .rd-layout { gap: clamp(20px, 3vw, 36px); }
}

/* ========================= SMALL TABLET (<= 900px) ========================= */
@media (max-width: 900px) {
  /* Any remaining two-column feature splits stack */
  .feature-split,
  .feature-split--story,
  .feature-split--reverse,
  .feature-split--img-right {
    grid-template-columns: 1fr !important;
  }
  /* Image always on top when stacked */
  .feature-split .ti-media,
  .feature-split--story .ti-media,
  .feature-split--img-right .ti-media { order: -1; margin-bottom: 16px; }

  .pd-info { padding-top: 8px; }
}

/* ============================= MOBILE (<= 760px) =========================== */
@media (max-width: 760px) {
  .section { padding: clamp(32px, 8vw, 52px) 0; }

  /* Product detail image no longer sticky on mobile (it scrolls with page) */
  .pd-gallery-col { position: static; top: auto; }
  .pd-gallery { position: static; top: auto; height: auto; max-height: none; aspect-ratio: 4/5; }

  /* Headings scale down a bit so they never overflow */
  h1 { font-size: clamp(1.9rem, 8vw, 2.6rem); }
  h2 { font-size: clamp(1.5rem, 6.5vw, 2.1rem); }
  h3 { font-size: clamp(1.2rem, 5vw, 1.6rem); }


  /* Buttons / pills wrap nicely, easier tap targets */
  .btn, .nav-pills a { min-height: 42px; }

  /* Forms full width */
  .field input, .field select, .field textarea, .form-field input, .form-field select, .form-field textarea { width: 100%; box-sizing: border-box; }
}

/* ============================ SMALL PHONE (<= 480px) ======================= */
@media (max-width: 480px) {
  .container { padding: 0 16px; }
  .section { padding: 34px 0; }

  h1, .hero__title, .hero__title--big { font-size: clamp(1.7rem, 9vw, 2.3rem); line-height: 1.12; }

  /* Card grids single column already; make images a touch shorter */
  .card-grid { gap: 16px; }

  /* Accordions / info sections spacing */
  .pd-info-section { margin-bottom: 16px; }

  /* Footer stacks single column, centered */
  .footer-grid { grid-template-columns: 1fr !important; text-align: center; }
  .footer-grid .footer-social, .footer-grid .footer-col { justify-content: center; align-items: center; }

}

/* ==========================================================================
   MOBILE: scale down admin-set (inline) sizes so desktop values don't
   overflow or look huge on phones. Targets CMS section content.
   ========================================================================== */
@media (max-width: 760px) {
  /* Any image with an inline width from the CMS must never exceed the screen */
  .feature-split img[style],
  .feature-split--story img[style],
  .feature-row img[style],
  .petal-wrap img[style],
  .ti-media img[style] {
    max-width: 100% !important;
    height: auto !important;
    width: auto !important;
  }
  /* CMS per-side padding (inline) shrinks on mobile so content isn't pushed around */
  .feature-copy[style],
  .feature-split--story > div[style],
  .feature-row__copy[style],
  .petal-wrap[style],
  .ti-media[style] {
    padding: 0 !important;
  }
}
@media (max-width: 480px) {
  /* Extra safety: headings with big inline font-sizes stay readable */
  .feature-copy h1[style], .feature-copy h2[style], .feature-copy h3[style],
  .feature-split h1[style], .feature-split h2[style], .feature-split h3[style] {
    font-size: clamp(1.5rem, 7vw, 2rem) !important;
    line-height: 1.15 !important;
  }
}

/* ==========================================================================
   MOBILE FIX PASS 2 (July 2026) — real-device screenshot fixes
   ========================================================================== */
@media (max-width: 900px) {
  .section--about .feature-split,
  .cms-section--about .feature-split {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .section--about .petal-wrap--photo { order: -1; }
}
@media (max-width: 760px) {
  .timeline__item { gap: 12px; }
  .timeline__item span:first-child { min-width: 0; overflow-wrap: break-word; }
  .timeline__item span:last-child { flex-shrink: 0; }
  .banner-quote h2,
  .banner-quote h2 span,
  .social-banner h3,
  .section-head h1, .section-head h2, .section-head h3 {
    overflow-wrap: break-word;
    max-width: 100%;
  }
  .social-banner { padding: 32px 16px; }
  .svip-form[style] { padding: 28px 18px !important; }
  .lf-banner__text h3, .lf-banner__text p { overflow-wrap: break-word; }
}

/* ==========================================================================
   CMS MOBILE VALUES (July 2026) — admin can set separate mobile
   font-size / width / height / padding. Blades emit --fs-m / --w-m / --h-m /
   --pt-m / --pr-m / --pb-m / --pl-m / --mh-m CSS vars inline; these rules
   apply them on phones.
   ========================================================================== */
@media (max-width: 760px) {
  [style*="--fs-m:"] { font-size: var(--fs-m) !important; }
  [style*="--w-m:"]  { width: var(--w-m) !important; max-width: 100% !important; }
  [style*="--h-m:"]  { height: var(--h-m) !important; }
  img[style*="--w-m:"]:not([style*="--h-m:"]) { height: auto !important; }
  img[style*="--h-m:"]:not([style*="--w-m:"]) { width: auto !important; }
  img[style*="--w-m:"], img[style*="--h-m:"] { object-fit: contain; }
}

/* Section & box level mobile overrides (height / padding set in CMS).
   Double [style] selectors = higher specificity than the blanket mobile
   rules so an admin-set mobile padding always wins. */
@media (max-width: 760px) {
  [style*="--mh-m:"][style] { min-height: var(--mh-m) !important; }
  [style*="--pt-m:"][style] { padding-top: var(--pt-m) !important; }
  [style*="--pr-m:"][style] { padding-right: var(--pr-m) !important; }
  [style*="--pb-m:"][style] { padding-bottom: var(--pb-m) !important; }
  [style*="--pl-m:"][style] { padding-left: var(--pl-m) !important; }
}

/* ==========================================================================
   LIFESTYLE BANNERS ON MOBILE (July 2026) — desktop pinned wipe-reveal runs
   on phones too. The old responsive pass collapsed .lf-stage to height:auto
   while banners were position:absolute + clip-path hidden (0px tall stack).
   overflow-x:clip on html/body (above) keeps position:sticky working here.
   ========================================================================== */

/* ==========================================================================
   BIG DESKTOP (>=1800px) — 27"/32"+ monitors. The fixed 1680px container
   left huge empty side margins on 2560px+ screens; scale it near edge-to-edge.
   ========================================================================== */
@media (min-width: 1800px) {
  :root { --container: 97vw; }
}

/* ==========================================================================
   PRODUCT DETAIL THUMBNAILS (July 2026) — centered slider under the product
   image, 4 visible at a time, rest scroll horizontally. Width matches the
   .pd-gallery column (so it stays aligned with the product image, not the
   whole page).
   ========================================================================== */
.pd-thumbs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 16px auto 0;
  width: 100%;
}
.pd-thumbs__track {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;          /* Firefox */
  justify-content: center;        /* few thumbs -> centered */
  max-width: calc(84px * 4 + 10px * 3);  /* 4 thumbs + 3 gaps = 366px */
  margin: 0 auto;
}
.pd-thumbs__track::-webkit-scrollbar { display: none; }  /* Chrome/Safari */
/* Fixed compact thumbnails so they never blow up */
.pd-thumb {
  flex: 0 0 auto;
  width: 84px;
  height: 84px;
  object-fit: cover;
  border-radius: 10px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color .2s ease;
}
.pd-thumb:hover { border-color: var(--red); }
.pd-thumb.is-active { border-color: var(--red); }
/* 5+ thumbs (arrows present) -> align left so scrolling feels natural */
.pd-thumbs:has(.pd-thumbs__arrow) .pd-thumbs__track { justify-content: flex-start; }
.pd-thumbs__arrow {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--red);
  background: #fff;
  color: var(--red);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease, color .2s ease;
}
.pd-thumbs__arrow:hover { background: var(--red); color: #fff; }

/* ==========================================================================
   PRODUCT DETAIL BREADCRUMB (July 2026) — Heinz-style "All Products / Name"
   above the product title.
   ========================================================================== */
.pd-breadcrumb {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  font-size: 0.95rem;
  margin: 0 0 20px;
  flex-wrap: wrap;
}
.pd-breadcrumb a {
  color: var(--ink);
  text-decoration: none;
  opacity: 0.7;
  transition: opacity .2s ease, color .2s ease;
}
.pd-breadcrumb a:hover { opacity: 1; color: var(--red); }
.pd-breadcrumb__sep { color: var(--ink); opacity: 0.4; }
.pd-breadcrumb__current { color: var(--ink); opacity: 0.55; }

/* ==========================================================================
   PRODUCT CARD ALIGNMENT (July 2026) — equal-height cards so the "View"
   buttons line up across the row regardless of title/description length.
   ========================================================================== */
.card-grid .product-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.card-grid .product-card p { flex: 1 1 auto; }
.card-grid .product-card__view,
.card-grid .product-card .btn {
  margin-top: auto;
  align-self: flex-start;
}

/* ==========================================================================
   ROUND 9 — JULY 2026
   1) Header menu always centered
   2) Superfood slider: red hairline removed + Heinz motion
   3) Product cards: 2-line description + guaranteed gap before View
   4) Feature row (Our Story): gap between text and button
   5) HoReCa categories: more gap + Heinz motion
   6) (breadcrumbs = blade)
   7) Recipe detail: equal columns, product-sized media, directions in column
   8) ONE brand motion across the whole site
   ========================================================================== */

/* ---- 8) Brand motion tokens — change here, changes everywhere ---- */
:root {
  --hz-ease: cubic-bezier(.22, 1, .36, 1);
  --hz-dur: .9s;      /* slow and gentle */
  --hz-scale: 1.03;       /* card zoom - original value, unchanged */
  --hz-img-scale: 1.05;   /* image zoom - original value, unchanged */
  /* superfood slider: equal pixel growth on all 4 sides (see note below) */
  --hz-zoom-x: 1.012;
  --hz-zoom-y: 1.0082;
  /* how many px every edge grows on hover. Set it on any card (or on a whole
     section) to give that one a bigger or smaller zoom. */
  --zoom-grow: 2.2px;
}

/* ==========================================================================
   1) HEADER — nav pills stay dead-center no matter how many menu items
   Grid (1fr auto 1fr) keeps the middle column centered in the container and,
   unlike absolute centering, it can never overlap the logo or the buttons.
   ========================================================================== */
@media (min-width: 861px) {
  .site-header .container {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 18px;
  }
  .site-header .container > .logo { justify-self: start; }
  .site-header .container > .nav-pills { justify-self: center; }
  .site-header .container > .header-right { justify-self: end; }
  .site-header .container > .nav-toggle { justify-self: end; }
}
/* many items: wrap inside the pill instead of pushing the layout */
@media (min-width: 861px) {
  .nav-pills { flex-wrap: wrap; justify-content: center; max-width: 100%; }
}
@media (max-width: 860px) {
  /* mobile: nav is hidden / dropdown, so go back to the simple flex bar */
  .site-header .container { display: flex; justify-content: space-between; }
}

/* ==========================================================================
   2) SUPERFOOD SLIDER (.hz-card)
   The faint red edge was the card's own colour gradient showing through the
   1px anti-alias seam between two nested rounded clips (card + photo).
   Fix: photo overhangs the card by 1px and drops its own radius, and photo
   cards get a neutral dark base instead of the red/maroon/yellow gradient.
   ========================================================================== */
.hz-card--photo {
  /* transparent, NOT a colour: any colour behind a photo card bleeds into the
     1px anti-aliased seam at the rounded corners - which showed up as a red
     hairline at rest and a grey hairline while the card was zoomed. With no
     colour behind it the seam can only blend photo -> page, so it vanishes.
     The bottom ::after gradient still renders, so the title stays readable. */
  background: transparent !important;
}
.hz-card--photo .hz-card__media--photo {
  top: -1px;
  right: -1px;
  bottom: -1px;
  left: -1px;
  width: auto;
  height: auto;
  border-radius: 0;
}
/* Motion: a very light zoom that grows by the SAME number of pixels on all
   four sides, and grows slowly.

   Why two different scale values: the card is much taller than it is wide
   (aspect-ratio 3/4.4), so a single scale() adds ~1.47x more pixels top and
   bottom than left and right - which is exactly why it looked like the card
   was rising. Because the aspect ratio is fixed, scaleY = scaleX shrunk by
   that same 3/4.4 factor gives an identical pixel growth on every side, at
   any card width.

     scaleX 1.012  ->  scaleY 1 + (0.012 x 3/4.4) = 1.0082          */
.hz-card {
  transition: transform var(--hz-dur) var(--hz-ease), filter var(--hz-dur) var(--hz-ease);
}
.hz-grid > .hz-card:hover,
.hz-card.reveal.is-visible:hover,
.hz-card:hover {
  transform: scale(var(--zx, var(--hz-zoom-x)), var(--zy, var(--hz-zoom-y))) !important;
  box-shadow: none !important;
  z-index: 5;
}

/* ==========================================================================
   3) PRODUCT CARDS — description is ALWAYS 2 lines, then a real gap, then
   the View button. Applies to every product grid on the site:
   products listing, HoReCa listing, related products on detail pages.
   ========================================================================== */
.card-grid .product-card p {
  flex: 0 0 auto;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  /* reserve exactly two lines even when the text is one line (or empty) */
  min-height: calc(2 * 1.55em);
  margin: 0 0 18px;
}
.card-grid .product-card__view,
.card-grid .product-card .btn {
  margin-top: auto;          /* keeps buttons aligned across the row */
  align-self: flex-start;
}

/* ==========================================================================
   4) FEATURE ROW (Our Story — "Fresher shelves") — gap above the button
   ========================================================================== */
.feature-row__cta { margin-top: clamp(10px, 1.4vw, 20px); }

/* ==========================================================================
   5) HORECA CATEGORY CARDS — more gap so a hovered card never rides over
   its neighbour, plus the same Heinz motion.
   ========================================================================== */
.horeca-cats--grid,
.horeca-cats--masonry,
.horeca-masonry,
.horeca-masonry__col { gap: clamp(20px, 2.6vw, 36px); }
/* these cards are large, so they carry a slightly stronger zoom than the rest */
.horeca-card { --zoom-grow: 4px; }
.horeca-card { transition: transform var(--hz-dur) var(--hz-ease); }
.horeca-card:hover { transform: translateY(-12px) scale(var(--hz-scale)) !important; z-index: 5; }

/* ==========================================================================
   7) RECIPE DETAIL — same shape as the product detail page:
   equal columns, media capped to the product image size, media column
   sticky, and Directions now living inside the right-hand column.
   ========================================================================== */
.rd-layout {
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}
.rd-media {
  position: sticky;
  top: 110px;
  height: fit-content;
}
.rd-media__main {
  width: 100%;
  max-width: 520px;
  max-height: 520px;
  aspect-ratio: 1 / 1;
  margin-left: auto;
  margin-right: auto;
}
.rd-media__thumbs { max-width: 520px; margin-left: auto; margin-right: auto; }
/* directions accordion now sits in the column, so it needs column spacing */
.rd-directions.accordion--incolumn { margin-top: 24px; }
.rd-directions.accordion--incolumn .accordion-header {
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  padding: 18px 2px;
}
@media (max-width: 860px) {
  .rd-layout { grid-template-columns: 1fr; }
  .rd-media { position: static; }
  .rd-media__main { max-width: 560px; }
}

/* ==========================================================================
   8) ONE MOTION LANGUAGE FOR THE WHOLE SITE
   Photo cards  -> image scales inside its frame
   Pack cards   -> keeps the signature tilt (transparent PNGs)
   Both use the identical duration + easing, so the site feels the same
   everywhere.
   ========================================================================== */
/* -- photo product cards (listing + related) -- */
.card-grid .product-card__img img {
  transition: transform var(--hz-dur) var(--hz-ease);
}
.card-grid .product-card:hover .product-card__img img {
  transform: scale(var(--hz-img-scale));
}
/* -- transparent pack / HoReCa cards keep the tilt, new timing -- */
#product-grid .product-card--transparent .product-card__img img,
#horeca-product-grid .product-card__img img,
[data-page="horeca-products"] .product-card__img img,
.card-grid:not([id]) .product-card__img img {
  transition: transform var(--hz-dur) var(--hz-ease) !important;
}
/* -- SAME equal-pixel zoom on: recipe cards, masonry items, HoReCa
      category cards and the mosaic tiles.
      --zx / --zy are written per element by initEqualZoom() in main.js so
      every one of these cards grows by the same 2.2px on all four sides no
      matter what shape it is. The values in the var() fallbacks are only
      used if JS has not run yet. -- */
.recipe-card,
.masonry__item,
.horeca-card,
.mosaic-grid a {
  transition: transform var(--hz-dur) var(--hz-ease);
  will-change: transform;
}
.recipe-card:hover,
.masonry__item:hover,
.horeca-card:hover,
.mosaic-grid a:hover {
  transform: scale(var(--zx, 1.012), var(--zy, 1.012)) !important;
  z-index: 5;
}
/* the media used to zoom separately inside recipe cards - the whole card
   moves as one unit now, exactly like the superfood cards */
.recipe-card__media img,
.recipe-card__media video,
.recipe-card__media iframe,
.masonry__item img,
.masonry__item video {
  transition: transform var(--hz-dur) var(--hz-ease);
}
.recipe-card:hover .recipe-card__media img,
.recipe-card:hover .recipe-card__media video,
.recipe-card:hover .recipe-card__media iframe,
.masonry__item:hover img,
.masonry__item:hover video {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .hz-card:hover,
  .horeca-card:hover,
  .recipe-card:hover,
  .masonry__item:hover,
  .mosaic-grid a:hover { transform: none !important; }
}

/* ---- Recipe detail: tighter space above the media/title (matches the
   product detail page, which uses the same compact top padding). ---- */
.rd-section { padding-top: clamp(20px, 2.5vw, 36px); }

/* ==========================================================================
   MOBILE ROUND — footer alignment, nav drawer, and breathing room
   ========================================================================== */

/* ---- 1) Footer: left aligned on mobile (was centred) ---- */
@media (max-width: 760px) {
  .footer-grid { text-align: left !important; }
  .footer-grid .footer-col,
  .footer-grid .footer-brand { align-items: flex-start !important; }
  .footer-grid .footer-social {
    justify-content: flex-start !important;
    align-items: center !important;
  }
  .footer-brand p { max-width: none; }
  .footer-col h5 { margin-bottom: 10px; }
  .footer-col a,
  .footer-col span { padding: 7px 0; }
  /* the columns stack, so separate them clearly */
  .footer-grid { row-gap: 26px; }
}

/* ---- 2) Mobile nav drawer ----
   The old drawer was a small red box floating under the logo with centred
   text. This is a full-width light panel: bigger tap targets, left aligned,
   thin dividers, and it now also carries the side links (For HoReCa) which
   were simply unreachable on a phone.
   ------------------------------------------------------------------------ */
.nav-pills__m-only { display: none; }

@media (max-width: 860px) {
  .site-header.is-open .nav-pills {
    display: block;
    position: absolute;
    top: var(--header-h, 64px);
    left: 0;
    right: 0;
    justify-self: stretch;   /* never shrink-to-fit */
    /* reset the desktop pill */
    background: var(--cream);
    border-radius: 0 0 20px 20px;
    padding: 4px 0 8px;
    gap: 0;
    box-shadow: 0 20px 44px rgba(42, 31, 24, 0.22);
    max-height: calc(100vh - var(--header-h, 64px) - 10px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .site-header.is-open .nav-pills a {
    display: block;
    text-align: left;
    padding: 15px 20px;
    margin: 0;
    border-radius: 0;
    background: transparent;
    color: var(--ink);
    font-size: 1.02rem;
    font-weight: 600;
    letter-spacing: 0.1px;
    border-bottom: 1px solid var(--cream-line);
  }
  .site-header.is-open .nav-pills a:last-child { border-bottom: 0; }
  .site-header.is-open .nav-pills a:hover,
  .site-header.is-open .nav-pills a:active { background: rgba(206, 63, 43, 0.07); }
  .site-header.is-open .nav-pills a.is-active {
    color: var(--red);
    background: transparent;
    box-shadow: inset 3px 0 0 var(--red);
  }
  /* side links appear only inside the drawer */
  .site-header.is-open .nav-pills__m-only { display: block; }

  /* ☰ turns into ✕ while the drawer is open */
  .site-header.is-open .nav-toggle { font-size: 0; }
  .site-header.is-open .nav-toggle::before {
    content: '\2715';
    font-size: 1.5rem;
    line-height: 1;
  }
}

/* ---- 3) Product lists: room between stacked cards ---- */
@media (max-width: 760px) {
  .card-grid { gap: 26px; }
}
@media (max-width: 560px) {
  /* single column now, so the gap is purely vertical and needs to be clearer */
  .card-grid { gap: 30px; }
}

/* ---- 4) Product detail: breathing room between the info blocks ---- */
@media (max-width: 760px) {
  .pd-info-section { margin-bottom: 26px; }
  .pd-info-section h4 { margin-bottom: 9px; }
  .pd-info-section p { line-height: 1.7; }
  .pd-info h1 { margin-bottom: 18px; }
}

/* ---- 5) Recipe lists: same treatment ---- */
@media (max-width: 760px) {
  .recipe-cards { gap: 26px; }
}
@media (max-width: 560px) {
  .recipe-cards { gap: 32px; }
}

/* ---- Mobile follow-ups ---- */
@media (max-width: 760px) {
  /* HoReCa category cards were squashed to 4:3 on phones, which made them
     look like short banners. Square, same as desktop. */
  .horeca-card--grid { aspect-ratio: 1 / 1; max-height: none; }

  /* more air between stacked product cards */
  .card-grid { gap: 40px; }
}
@media (max-width: 560px) {
  .card-grid { gap: 44px; }
}

/* ---- Superfood slider on phones: always show the next card ----
   The card was 88% wide with a 20px gap, so only ~26px of the next card
   peeked — and most of that was its rounded corner, which read as empty
   cream. A narrower card and tighter gap make the peek obvious from the
   first paint, not only after you swipe back. */
@media (max-width: 520px) {
  .hz-grid { gap: 12px; }
  .hz-grid > .hz-card { flex: 0 0 80%; }
  /* The card is narrower now, and height follows width through the aspect
     ratio — at 3/3.4 that made it noticeably shorter. Taller ratio brings the
     height back and then some, closer to the portrait shape used on desktop. */
  .hz-card { aspect-ratio: 3 / 4; }
}

/* ---- Product detail gallery on phones ----
   .pd-gallery was forced to aspect-ratio 4/5 on mobile. The image inside is
   height:auto, so a shorter image left dead space at the bottom of that box —
   which showed up as a big gap between the product image and the thumbnail
   strip. With only one image there are no thumbnails, so the dead space fell
   at the end of the section and nobody noticed.

   Let the box hug the image (same as desktop) and cap the height in vh so a
   tall product still fits on screen. ---- */
@media (max-width: 760px) {
  .pd-gallery {
    aspect-ratio: auto;
    height: auto;
  }
  /* Centre with text-align, NOT flex: a flex item defaults to min-width:auto,
     so a large image refuses to shrink below its natural width, overflows the
     column and — being centred — hangs off the right while leaving a gap on
     the left. */
  .pd-gallery [data-media-main] {
    display: block;
    text-align: center;
    min-width: 0;
  }
  .pd-gallery [data-media-main] img,
  .pd-gallery > img:not(.pd-thumb) {
    display: inline-block;
    vertical-align: middle;   /* kills the ~4px inline baseline gap below it */
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 62vh;
    min-width: 0;
  }
  /* transparent packs keep a little breathing room, but nothing like 12% */
  .pd-gallery img[src$="-pack.png"],
  .pd-gallery img[src$="-tub.png"] { padding: 4%; }

  .pd-thumbs { margin-top: 14px; }
}

/* ---- Product detail thumbnails must never widen their column ----
   .pd-thumbs is a flex row: prev arrow + track + next arrow. The track caps
   at 366px, so with both arrows the strip wants 450px. Grid and flex items
   default to min-width:auto, so nothing shrank — the gallery COLUMN grew to
   450px instead, and the main image (max-width:100% of that column) then hung
   off the right of the screen. It only showed up on products with enough
   gallery images to bring the arrows in.

   This bites on narrow desktop/tablet too, not just phones, so the shrink
   fixes are unscoped. ---- */
.pd-gallery-col { min-width: 0; }
.pd-thumbs { min-width: 0; max-width: 100%; }
.pd-thumbs__track {
  min-width: 0;
  max-width: min(calc(84px * 4 + 10px * 3), 100%);
}

@media (max-width: 760px) {
  /* the strip already scrolls by swipe on touch, so the arrows only take
     space away from the thumbnails */
  .pd-thumbs__arrow { display: none; }
  .pd-thumbs__track { justify-content: flex-start; }
  .pd-thumbs:has(.pd-thumbs__arrow) .pd-thumbs__track { justify-content: flex-start; }
}

/* ==========================================================================
   CONTACT SECTION  (form + details side by side)
   ========================================================================== */
.contact-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
.contact-grid--reverse .contact-form-card { order: 2; }
.contact-grid--reverse .contact-info { order: 1; }

.contact-form-card {
  background: #fff;
  border: 1px solid var(--cream-line);
  border-radius: var(--radius);
  padding: clamp(20px, 3vw, 34px);
  box-shadow: 0 10px 30px rgba(42, 31, 24, 0.06);
  min-width: 0;
}
.contact-form-card__title {
  margin: 0 0 18px;
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  color: var(--ink);
}

.contact-info { min-width: 0; }
.contact-info h2 { margin: 0 0 12px; }
.contact-info__intro { margin-bottom: 24px; line-height: 1.7; }
.contact-info__intro a { color: var(--red); text-decoration: underline; }

.contact-info__list { list-style: none; margin: 0; padding: 0; }
.contact-info__row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 12px 0;
}
.contact-info__row + .contact-info__row { border-top: 1px solid var(--cream-line); }
.contact-info__icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(206, 63, 43, 0.09);
  color: var(--red);
}
.contact-info__icon svg { width: 18px; height: 18px; }
.contact-info__text { min-width: 0; }
.contact-info__label {
  display: block;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 700;
  color: var(--red);
  margin-bottom: 3px;
}
.contact-info__value {
  display: block;
  color: var(--ink);
  line-height: 1.6;
  word-break: break-word;
}
a.contact-info__value:hover { color: var(--red); }

@media (max-width: 860px) {
  .contact-grid { grid-template-columns: 1fr; }
  /* details first on a phone — the address is what people usually want */
  .contact-grid--reverse .contact-form-card,
  .contact-grid--reverse .contact-info { order: 0; }
}

/* ==========================================================================
   MAP SECTION
   ========================================================================== */
.map-embed {
  position: relative;
  width: 100%;
  height: var(--map-h, 420px);
  overflow: hidden;
  background: var(--cream);
}
.map-embed--boxed {
  border-radius: var(--radius);
  border: 1px solid var(--cream-line);
}
.map-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
@media (max-width: 760px) {
  .map-embed { height: min(var(--map-h, 420px), 60vh); }
}

/* ==========================================================================
   PRODUCT CARDS — ONE definition for every place they appear
   --------------------------------------------------------------------------
   They render in five places:

     retail listing        #product-grid                (CMS section)
     HoReCa listing        #horeca-product-grid         (CMS section)
     product detail        .card-grid in .container--cms
     HoReCa detail         .card-grid in .container--cms
     recipe detail         .card-grid in .container--cms

   The listings sit inside a CMS section capped at 1280px, while the detail
   pages used the full 1680px container — so the same card came out 280px wide
   on the listing and up to 380px on a detail page, and the gap grew with the
   screen. On top of that the detail grids missed the square corners and the
   object-fit rule. Everything below is stated once and applied to all five.
   ========================================================================== */

/* 1. NO width override here.
   The listing sections are CMS-driven — their width is whatever the editor
   set on the section, which on this site is the full container. Hard-coding
   1280px here (the admin's default for NEW sections) made the related grid
   narrower than the listing instead of matching it. Both now use the same
   plain .container, so the columns line up by themselves.
   .container--cms stays purely as a hook for the card rules below. */

/* 2. Card image tile: square corners, cream tile, red on hover */
#product-grid .product-card__img,
#horeca-product-grid .product-card__img,
[data-page="products"] .product-card__img,
[data-page="horeca-products"] .product-card__img,
.container--cms .card-grid .product-card__img {
  border-radius: 0 !important;
  background: var(--cream) !important;
  transition: background .45s cubic-bezier(.4, 0, .2, 1);
}
#product-grid .product-card--transparent:hover .product-card__img,
#horeca-product-grid .product-card:hover .product-card__img,
[data-page="horeca-products"] .product-card:hover .product-card__img,
.container--cms .card-grid .product-card:hover .product-card__img {
  background: #CE3D29 !important;
}

/* 3. The pack sits inside the tile rather than filling and cropping it */
#product-grid .product-card--transparent .product-card__img img,
#horeca-product-grid .product-card__img img,
[data-page="horeca-products"] .product-card__img img,
.container--cms .card-grid .product-card__img img {
  object-fit: contain !important;
  padding: 0;
  transition: transform .45s cubic-bezier(.4, 0, .2, 1) !important;
}

/* 4. The signature tilt, nothing else */
#product-grid .product-card--transparent:hover .product-card__img img,
#horeca-product-grid .product-card:hover img,
[data-page="horeca-products"] .product-card:hover img,
.container--cms .card-grid .product-card:hover img {
  transform: rotate(-8deg) !important;
}

/* ==========================================================================
   LIFESTYLE BANNER — equal padding around the product image
   --------------------------------------------------------------------------
   The image sat in a fixed 40% column, centred in it, with margin-top:-30px
   and margin-bottom:-8px so it poked out of the panel. That gave four
   different gaps: panel padding on the left, the grid gap on the right, and
   negative margins top and bottom.

   One spacing value now drives the panel padding AND the gap after the image,
   and the column hugs the image instead of being a fixed 40%. Left, right,
   top and bottom then come out identical.
   ========================================================================== */
@media (min-width: 701px) {
  .lf-banner__panel {
    --lf-pad: clamp(14px, 1.6vw, 22px);
    /* Panel width lives in one place so it is easy to tune:
       was 62% / 780px, which left the text sitting in a very wide band. */
    --lf-panel-w: 660px;
    width: 54%;
    max-width: var(--lf-panel-w);
    grid-template-columns: auto 1fr auto;
    padding: var(--lf-pad);
    gap: var(--lf-pad);
    align-items: center;
  }

  .lf-banner__product,
  .lf-banner--green .lf-banner__product {
    justify-self: start;
    align-self: center;
    margin: 0;                       /* was -30px top / -8px bottom */
    height: clamp(104px, 12vw, 164px);
    width: auto;
    max-width: clamp(120px, 16vw, 240px);
    object-fit: contain;
    object-position: center center;
  }

  /* two-image variant gets the same treatment */
  .lf-banner__product--pair {
    justify-self: start;
    align-self: center;
    margin: 0;
    width: auto;
    max-width: none;
  }
  .lf-banner__product--pair img { height: clamp(104px, 12vw, 164px); }
  .lf-banner__product--pair img:last-child { height: clamp(74px, 8.5vw, 116px); }
}