/* ============================================================
   GUD4U ORGANICKS — site.css  (v2)
   Verdant Codex palette · botanical motion · responsive grid.
   ============================================================ */

:root {
  --brand-brown: #5a2a0c;
  --brand-amber: #c47a2a;
  --brand-gold: #e3a857;
  --brand-cream: #fdf6ec;
  --brand-sand: #f7e7c9;
  --brand-green: #5b7a2a;
  --brand-leaf: #88a844;
  --brand-deep-green: #2e4a17;
  --ink: #3a2410;
  --ink-soft: #5a3a22;

  --shadow-sm: 0 6px 18px rgba(90, 42, 12, 0.10);
  --shadow-md: 0 14px 36px rgba(90, 42, 12, 0.14);
  --shadow-lg: 0 24px 64px rgba(90, 42, 12, 0.20);

  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 22px;

  --max-w: 1200px;
}

/* --- Reset --- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  /* min-height, not height: a fixed 100% turned <body> into a nested scroll
     container, so window.scrollY stayed 0 and anchor links overshot. */
  min-height: 100%;
}

html {
  scroll-behavior: smooth;
}

img {
  max-width: 100%;
  height: auto; /* width/height attributes reserve space; CSS keeps the ratio */
  display: block;
}

a {
  color: inherit;
}

button {
  font-family: inherit;
  cursor: pointer;
}

body {
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(1200px 600px at 10% 0%, #fff2dc 0%, transparent 60%),
    radial-gradient(1000px 700px at 100% 100%, #f5e2bf 0%, transparent 55%),
    linear-gradient(135deg, #fdf6ec 0%, #f7e7c9 100%);
  min-height: 100vh;
  overflow-x: clip;
  position: relative;
  line-height: 1.55;
}

/* --- Preloader --- */
#preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: radial-gradient(circle at center, #fff8eb 0%, #f7e7c9 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}

#preloader.loaded {
  opacity: 0;
  visibility: hidden;
}

.loader-content {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.loader-logo {
  width: 180px;
  height: auto;
  margin-bottom: 20px;
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  filter: drop-shadow(0 4px 12px rgba(90, 42, 12, 0.2));
}

.jaggery-loader {
  position: relative;
  width: 250px;
  height: 250px;
}

.jaggery-loader .jaggery-img.grayscale {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: grayscale(1) opacity(0.3);
}

.jaggery-fill {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0%;
  overflow: hidden;
  animation: fillJaggery 2.5s ease-out forwards;
}

.jaggery-fill .jaggery-img.color {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 250px;
  height: 250px;
  object-fit: contain;
  object-position: bottom;
  filter: drop-shadow(0 8px 16px rgba(196, 122, 42, 0.3));
}

.loader-text {
  font-family: 'Playfair Display', serif;
  color: var(--brand-brown);
  font-size: 1.4rem;
  font-weight: 700;
  font-style: italic;
  letter-spacing: 1px;
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes fillJaggery {
  0% {
    height: 0%;
  }

  100% {
    height: 100%;
  }
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.8;
    transform: scale(0.97);
  }
}

/* --- Decorative blobs --- */
.blob {
  position: fixed;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.45;
  z-index: 0;
  animation: float 14s ease-in-out infinite;
  pointer-events: none;
}

.blob.b1 {
  width: 360px;
  height: 360px;
  background: #f0c37a;
  top: -80px;
  left: -80px;
}

.blob.b2 {
  width: 300px;
  height: 300px;
  background: #bcd88a;
  bottom: -100px;
  right: -60px;
  animation-delay: -4s;
}

.blob.b3 {
  width: 220px;
  height: 220px;
  background: #e3a857;
  top: 40%;
  right: 10%;
  animation-delay: -8s;
  opacity: 0.30;
}

@keyframes float {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(20px, -30px) scale(1.08);
  }
}

/* --- Drifting leaves --- */
.leaf {
  position: fixed;
  width: 28px;
  height: 28px;
  z-index: 1;
  opacity: 0.5;
  pointer-events: none;
  animation: drift linear infinite;
}

@keyframes drift {
  0% {
    transform: translateY(-10vh) rotate(0deg);
  }

  100% {
    transform: translateY(110vh) rotate(360deg);
  }
}

/* ============================================================
   NEW BOTANICAL SUGARCANE FIELD (v2)
   Three depth layers with parallax + organic sway
   ============================================================ */
.cane-field {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 220px;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
}

.cane-field::before {
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -40px;
  height: 110px;
  background:
    radial-gradient(ellipse at center, rgba(46, 74, 23, 0.18), transparent 70%),
    linear-gradient(180deg, transparent, rgba(90, 42, 12, 0.08));
  filter: blur(12px);
}

.cane-field::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(90, 42, 12, 0.35), transparent);
}

.cane-layer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  pointer-events: none;
}

.cane-layer.l-back {
  opacity: 0.30;
  filter: blur(2px);
}

.cane-layer.l-mid {
  opacity: 0.55;
  filter: blur(0.6px);
}

.cane-layer.l-front {
  opacity: 0.95;
}

.cane-stalk {
  position: absolute;
  bottom: 0;
  transform-origin: 50% 100%;
  will-change: transform;
}

.cane-stalk svg {
  display: block;
  filter: drop-shadow(0 4px 6px rgba(46, 74, 23, 0.22));
}

.cane-stalk.sway-1 {
  animation: caneSway1 7s ease-in-out infinite;
}

.cane-stalk.sway-2 {
  animation: caneSway2 9s ease-in-out infinite;
}

.cane-stalk.sway-3 {
  animation: caneSway3 11s ease-in-out infinite;
}

@keyframes caneSway1 {

  0%,
  100% {
    transform: rotate(-1.8deg);
  }

  50% {
    transform: rotate(1.8deg);
  }
}

@keyframes caneSway2 {

  0%,
  100% {
    transform: rotate(2.2deg);
  }

  50% {
    transform: rotate(-2.2deg);
  }
}

@keyframes caneSway3 {

  0%,
  100% {
    transform: rotate(-2.6deg);
  }

  50% {
    transform: rotate(2.6deg);
  }
}

/* Botanical specimen label (bottom-left corner) */
.specimen-label {
  position: fixed;
  bottom: 14px;
  left: 18px;
  z-index: 2;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 11px;
  color: rgba(90, 42, 12, 0.55);
  letter-spacing: 0.3px;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

.specimen-label::before {
  content: "";
  width: 22px;
  height: 1px;
  background: rgba(90, 42, 12, 0.35);
}

/* --- Layout shell --- */
.wrap {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* padding-bottom: 180px; */
}

/* --- Header & Nav --- */
header.site {
  padding: 18px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(253, 246, 236, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(196, 122, 42, 0.15);
  transition: padding 0.25s ease, box-shadow 0.25s ease;
}

header.site.scrolled {
  padding: 10px 32px;
  box-shadow: 0 6px 22px rgba(90, 42, 12, 0.06);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--brand-brown);
}

.brand-4 {
  font-family: Arial, sans-serif;
}

.brand img {
  /* width: 64px;*/
  height: 80px;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(90, 42, 12, 0.22));
  transition: transform 0.4s cubic-bezier(.2, .8, .2, 1.1);
}

.brand:hover img {
  transform: rotate(-6deg) scale(1.05);
}

nav.primary {
  display: flex;
  align-items: center;
  gap: 6px;
}

nav.primary a {
  text-decoration: none;
  color: var(--brand-brown);
  font-weight: 500;
  font-size: 0.92rem;
  letter-spacing: 0.5px;
  padding: 8px 14px;
  border-radius: 999px;
  transition: background 0.2s ease, color 0.2s ease;
  position: relative;
}

nav.primary a:hover {
  background: rgba(196, 122, 42, 0.10);
}

nav.primary a.active {
  color: var(--brand-deep-green);
}

nav.primary a.active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 18px;
  height: 2px;
  background: var(--brand-amber);
  border-radius: 2px;
  transform: translateX(-50%);
}

.nav-cta {
  margin-left: 10px;
  background: linear-gradient(135deg, var(--brand-amber), var(--brand-gold)) !important;
  color: #fff !important;
  padding: 10px 18px !important;
  font-weight: 600 !important;
  box-shadow: var(--shadow-sm);
}

.nav-cta:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.nav-toggle {
  display: none;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(196, 122, 42, 0.25);
  border-radius: 10px;
  padding: 8px 10px;
  color: var(--brand-brown);
}

.nav-toggle svg {
  width: 22px;
  height: 22px;
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.96rem;
  letter-spacing: 0.5px;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
  white-space: nowrap;
}

.btn-primary {
  background: linear-gradient(135deg, var(--brand-amber), var(--brand-gold));
  color: #fff;
  box-shadow: var(--shadow-md);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.btn-ghost {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(196, 122, 42, 0.3);
  color: var(--brand-brown);
  backdrop-filter: blur(6px);
}

.btn-ghost:hover {
  transform: translateY(-2px);
  border-color: var(--brand-amber);
  box-shadow: var(--shadow-sm);
}

.btn-green {
  background: linear-gradient(135deg, var(--brand-deep-green), var(--brand-leaf));
  color: #fff;
  box-shadow: var(--shadow-md);
}

.btn-green:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.btn svg {
  width: 18px;
  height: 18px;
}

/* --- Generic typography --- */
.eyebrow {
  font-size: 11px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--brand-green);
  font-weight: 600;
  margin-bottom: 14px;
}

.divider {
  width: 64px;
  height: 3px;
  margin-bottom: 22px;
  background: linear-gradient(90deg, var(--brand-amber), transparent);
  border-radius: 3px;
}

.lead {
  font-size: clamp(1rem, 1.45vw, 1.1rem);
  color: var(--ink-soft);
  line-height: 1.7;
}

/* --- Section --- */
.section {
  padding: 60px 32px;
  max-width: var(--max-w);
  margin: 0 auto;
  width: 100%;
  position: relative;
  z-index: 2;
}

.section.tight {
  padding: 40px 32px;
}

.section.deep {
  padding: 90px 32px;
}

.section.full {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

.section-head {
  text-align: center;
  margin-bottom: 44px;
}

.section-eyebrow {
  font-size: 11px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--brand-green);
  font-weight: 600;
  margin-bottom: 12px;
}

.section-title {
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  color: var(--brand-brown);
  line-height: 1.15;
  margin-bottom: 12px;
}

.section-sub {
  color: var(--ink-soft);
  font-size: 1rem;
  max-width: 620px;
  margin: 0 auto;
  line-height: 1.65;
}

h1,
h2,
h3 {
  color: var(--brand-brown);
}

/* --- Hero --- */
.hero {
  padding: 30px 32px 60px;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: center;
  max-width: var(--max-w);
  width: 100%;
  margin: 0 auto;
  position: relative;
  z-index: 10;
}

.hero-copy {
  animation: fadeUp 1s ease-out 0.2s both;
}

h1.hero-title {
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  font-size: clamp(1.8rem, 4.5vw, 3.5rem);
  color: var(--brand-brown);
  letter-spacing: 0.5px;
  line-height: 1.05;
  margin-bottom: 14px;
}

h1 .shine {
  background: linear-gradient(90deg, var(--brand-amber) 0%, var(--brand-gold) 40%, #fff1cf 50%, var(--brand-gold) 60%, var(--brand-amber) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shine 4s linear infinite;
}

@keyframes shine {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

.tagline {
  font-size: clamp(0.95rem, 1.6vw, 1.05rem);
  color: var(--brand-green);
  letter-spacing: 6px;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 22px;
}

.lead.hero-lead {
  margin-bottom: 28px;
  max-width: 540px;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 32px;
}

/* Hero visual ring + coin */
.hero-visual {
  position: relative;
  animation: popIn 1.1s cubic-bezier(.2, .9, .2, 1.1) both;
}

.hero-ring {
  position: relative;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: radial-gradient(circle at 50% 50%, #fff8eb 0%, #f5e2bf 70%, #ecd2a0 100%);
  transition: transform 0.2s ease;
}

.hero-ring::before {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--brand-gold), var(--brand-leaf), var(--brand-amber), var(--brand-gold));
  filter: blur(18px);
  opacity: 0.42;
  animation: spin 18s linear infinite;
  z-index: -1;
}

.hero-ring img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  animation: floatY 6s ease-in-out infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes floatY {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

@keyframes popIn {
  0% {
    opacity: 0;
    transform: scale(0.85);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.hero-coin {
  position: absolute;
  width: 28%;
  aspect-ratio: 1;
  bottom: -6%;
  left: -8%;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, #fff8eb 65%, transparent 70%);
  box-shadow: var(--shadow-md);
  display: grid;
  place-items: center;
  animation: floatY 5.2s ease-in-out infinite reverse;
}

.hero-coin img {
  width: 88%;
  height: 88%;
  object-fit: contain;
}

/* --- Trust strip --- */
.trust-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 30px 32px;
}

.trust-cell {
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(196, 122, 42, 0.20);
  border-radius: var(--radius);
  padding: 22px 18px;
  backdrop-filter: blur(6px);
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.trust-cell:hover {
  transform: translateY(-4px);
  border-color: var(--brand-amber);
  box-shadow: var(--shadow-sm);
}

.trust-cell .num {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 2.4rem;
  color: var(--brand-deep-green);
  line-height: 1;
  margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
}

.trust-cell .lab {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 600;
}

/* --- Pillars --- */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.pillar {
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(196, 122, 42, 0.20);
  border-radius: var(--radius-lg);
  padding: 28px 26px;
  backdrop-filter: blur(6px);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.pillar:hover {
  transform: translateY(-6px);
  border-color: var(--brand-amber);
  box-shadow: var(--shadow-md);
}

.pillar .icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--brand-leaf), var(--brand-deep-green));
  color: #fff;
  margin-bottom: 16px;
  box-shadow: 0 8px 18px rgba(46, 74, 23, 0.30);
  transition: transform 0.4s cubic-bezier(.2, .8, .2, 1.1);
}

.pillar:hover .icon {
  transform: rotate(-8deg) scale(1.06);
}

.pillar .icon svg {
  width: 28px;
  height: 28px;
}

.pillar h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.25rem;
  margin-bottom: 8px;
  color: var(--brand-brown);
}

.pillar p {
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* --- Product cards (no prices) --- */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}

.product-card {
  background: transparent;
  border-radius: var(--radius-lg);
  perspective: 1000px;
  height: 100%;
  min-height: 420px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: left;
  transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform-style: preserve-3d;
}

.product-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(196, 122, 42, 0.20);
  backdrop-filter: blur(6px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.flip-card-front {
  z-index: 2;
  box-shadow: var(--shadow-sm);
}

.flip-card-back {
  transform: rotateY(180deg);
  padding: 32px 24px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(247, 231, 201, 0.9));
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: var(--shadow-lg);
  border-color: var(--brand-amber);
}

.product-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  background-color: #fff8eb;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  overflow: hidden;
}

.product-carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  aspect-ratio: 4 / 3;
  position: relative;
}

.product-carousel::-webkit-scrollbar {
  display: none;
}

.carousel-slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  background-color: #fff8eb;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

.carousel-nav {
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 6px;
  z-index: 5;
}

.carousel-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(196, 122, 42, 0.4);
}

.product-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.5), transparent 65%);
  pointer-events: none;
}

.product-body {
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.product-chip {
  align-self: flex-start;
  font-size: 9px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--brand-green);
  background: rgba(136, 168, 68, 0.15);
  padding: 5px 10px;
  border-radius: 999px;
}

.product-name {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--brand-brown);
  line-height: 1.15;
}

.product-weight {
  font-size: 0.82rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 500;
}

.product-desc {
  font-size: 0.92rem;
  color: var(--ink-soft);
  line-height: 1.55;
  flex: 1;
}

.product-card .btn {
  margin-top: auto;
  align-self: flex-start;
  padding: 10px 20px;
  font-size: 0.85rem;
}

/* --- Product detail (Products page) --- */
.product-detail {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(196, 122, 42, 0.20);
  border-radius: var(--radius-lg);
  padding: 36px;
  backdrop-filter: blur(6px);
  box-shadow: var(--shadow-sm);
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 36px;
  align-items: center;
  margin-bottom: 28px;
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

.product-detail:hover {
  transform: translateY(-4px);
  border-color: var(--brand-amber);
  box-shadow: var(--shadow-md);
}

.product-detail .visual {
  background: linear-gradient(135deg, #fff8eb, #f7e7c9);
  border-radius: var(--radius);
  padding: 22px;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  overflow: hidden;
}

.product-detail .visual img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.6s cubic-bezier(.2, .8, .2, 1.1);
}

.product-detail:hover .visual img {
  transform: scale(1.06) rotate(-2deg);
}

.product-detail h2 {
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  font-size: clamp(1.6rem, 2.6vw, 2rem);
  color: var(--brand-brown);
  line-height: 1.15;
  margin-bottom: 6px;
}

.product-detail .sub {
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--brand-green);
  font-weight: 600;
  margin-bottom: 14px;
}

.product-detail p.lead-p {
  color: var(--ink-soft);
  line-height: 1.7;
  margin-bottom: 18px;
}

.feature-list {
  list-style: none;
  display: grid;
  gap: 8px;
  margin-bottom: 22px;
}

.feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.92rem;
  color: var(--ink);
}

.feature-list .tick {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-leaf), var(--brand-deep-green));
  color: #fff;
  display: grid;
  place-items: center;
  margin-top: 2px;
}

.feature-list .tick svg {
  width: 10px;
  height: 10px;
}

.product-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* --- Products page trade card --- */
.trade-card {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr);
  gap: clamp(24px, 5vw, 56px);
  align-items: center;
}

.trade-title {
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  font-size: clamp(1.6rem, 2.6vw, 2rem);
  line-height: 1.15;
  color: var(--brand-brown);
  margin: 0 0 16px;
  max-width: 520px;
}

.trade-card .feature-list {
  margin: 0;
  gap: 12px;
}

.trade-card .feature-list li {
  max-width: 520px;
  line-height: 1.55;
}

.trade-contact {
  display: grid;
  justify-items: center;
  gap: 12px;
  text-align: center;
}

.trade-contact p {
  color: var(--ink-soft);
  line-height: 1.65;
  margin: 0 0 6px;
  max-width: 360px;
}

.trade-contact .btn {
  width: min(100%, 300px);
  justify-content: center;
}

.trade-phone {
  width: min(100%, 300px);
}

.trade-phone .btn {
  width: 100%;
}

.anchor-nav {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  background: rgba(255, 255, 255, 0.78);
  padding: 10px;
  border-radius: 999px;
  border: 1px solid rgba(196, 122, 42, 0.22);
  backdrop-filter: blur(6px);
  margin: 0 auto;
}

.anchor-nav a {
  text-decoration: none;
  color: var(--brand-brown);
  font-weight: 500;
  font-size: 0.88rem;
  padding: 8px 14px;
  border-radius: 999px;
  transition: background 0.2s ease, color 0.2s ease;
}

.anchor-nav a:hover {
  background: var(--brand-amber);
  color: #fff;
}

/* ============================================================
   PROCESS TIMELINE  (with SVG draw-on icons)
   ============================================================ */
.timeline-wrap {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  padding: 20px 0;
}

.progress-bar {
  position: absolute;
  left: 30px;
  top: 0;
  width: 4px;
  border-radius: 4px;
  background: rgba(196, 122, 42, 0.18);
  height: 100%;
  z-index: 0;
}

.progress-bar::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: var(--p, 0%);
  background: linear-gradient(180deg, var(--brand-amber), var(--brand-leaf), var(--brand-deep-green));
  border-radius: 4px;
  transition: height 0.15s linear;
  box-shadow: 0 0 16px rgba(136, 168, 68, 0.4);
}

.tl-step {
  position: relative;
  padding: 26px 0 26px 100px;
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.tl-step.in {
  opacity: 1;
  transform: translateX(0);
}

.tl-step .step-num {
  position: absolute;
  left: 8px;
  top: 30px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-deep-green), var(--brand-leaf));
  display: grid;
  place-items: center;
  box-shadow: 0 8px 20px rgba(46, 74, 23, 0.32);
  z-index: 2;
}

/* Custom SVG draw-on icon inside the circle */
.tl-step .step-num svg {
  width: 30px;
  height: 30px;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.tl-step .step-num svg .draw {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  transition: stroke-dashoffset 1.2s cubic-bezier(.2, .8, .2, 1) 0.2s;
}

.tl-step.in .step-num svg .draw {
  stroke-dashoffset: 0;
}

.tl-step .step-card {
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(196, 122, 42, 0.20);
  border-radius: var(--radius-lg);
  padding: 24px 26px;
  backdrop-filter: blur(6px);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.tl-step:hover .step-card {
  transform: translateY(-4px);
  border-color: var(--brand-amber);
  box-shadow: var(--shadow-md);
}

.step-tag {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--brand-green);
  font-weight: 700;
  background: rgba(136, 168, 68, 0.15);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
}

.tl-step h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.45rem;
  color: var(--brand-brown);
  margin-bottom: 8px;
  line-height: 1.2;
}

.tl-step p {
  color: var(--ink-soft);
  line-height: 1.7;
  font-size: 0.96rem;
}

.principle-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.principle {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(196, 122, 42, 0.20);
  border-radius: var(--radius-lg);
  padding: 26px 22px;
  text-align: center;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.principle:hover {
  transform: translateY(-4px);
  border-color: var(--brand-amber);
  box-shadow: var(--shadow-sm);
}

.principle .x {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f4d4d4, #e8a4a4);
  color: #b6491f;
  display: grid;
  place-items: center;
  font-size: 1.4rem;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(182, 73, 31, 0.18);
}

.principle h4 {
  font-family: 'Playfair Display', serif;
  font-size: 1.15rem;
  margin-bottom: 6px;
  color: var(--brand-brown);
}

.principle p {
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.55;
}

/* --- Cards & info blocks --- */
.card-soft {
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(196, 122, 42, 0.20);
  border-radius: var(--radius-lg);
  padding: 36px;
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-sm);
}

/* --- Pre-book section --- */
.prebook-wrap {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(196, 122, 42, 0.20);
  border-radius: var(--radius-lg);
  padding: 40px;
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-md);
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 40px;
}

.prebook-pitch h2 {
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  font-size: clamp(1.6rem, 2.8vw, 2.1rem);
  color: var(--brand-brown);
  line-height: 1.15;
  margin-bottom: 14px;
}

.prebook-pitch p {
  color: var(--ink-soft);
  font-size: 0.98rem;
  line-height: 1.7;
  margin-bottom: 22px;
}

.perks {
  list-style: none;
  display: grid;
  gap: 12px;
  margin-bottom: 26px;
}

.perks li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.92rem;
  color: var(--ink);
}

.perks .check {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-leaf), var(--brand-deep-green));
  color: #fff;
  display: grid;
  place-items: center;
  margin-top: 2px;
}

.perks .check svg {
  width: 12px;
  height: 12px;
}

.contact-strip {
  display: grid;
  gap: 12px;
  margin-top: 8px;
}

.contact-strip a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(196, 122, 42, 0.18);
  border-radius: var(--radius);
  color: var(--brand-brown);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.92rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  overflow: hidden;
}

.contact-strip a:hover {
  transform: translateY(-2px);
  border-color: var(--brand-amber);
  box-shadow: var(--shadow-sm);
}

.contact-strip .icon {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--brand-gold), var(--brand-amber));
  color: #fff;
}

.contact-strip .icon svg {
  width: 18px;
  height: 18px;
}

.contact-strip .icon-wa {
  background: linear-gradient(135deg, #25d366, #128c7e);
}

.contact-strip .label {
  display: block;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--brand-green);
  font-weight: 600;
  margin-bottom: 1px;
}

.contact-strip .value {
  display: block;
  color: var(--ink);
  font-weight: 500;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* --- Form --- */
.prebook-form {
  display: grid;
  gap: 14px;
}

.row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}

.field label {
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--brand-brown);
  font-weight: 600;
}

.field label .req {
  color: #b6491f;
  margin-left: 2px;
}

.field input,
.field select,
.field textarea {
  font-family: inherit;
  font-size: 0.96rem;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(196, 122, 42, 0.28);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  width: 100%;
}

.field textarea {
  resize: vertical;
  min-height: 92px;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--brand-amber);
  box-shadow: 0 0 0 3px rgba(227, 168, 87, 0.22);
  background: #fff;
}

.field.invalid input,
.field.invalid select,
.field.invalid textarea {
  border-color: #c94f25;
  box-shadow: 0 0 0 3px rgba(201, 79, 37, 0.15);
}

.field .err {
  font-size: 11px;
  color: #b6491f;
  font-weight: 500;
  min-height: 14px;
}

.char-counter {
  position: absolute;
  right: 8px;
  bottom: 6px;
  font-size: 10px;
  color: var(--ink-soft);
  background: rgba(255, 255, 255, 0.7);
  padding: 2px 6px;
  border-radius: 6px;
  pointer-events: none;
}

.honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden;
}

.consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--ink-soft);
  line-height: 1.5;
}

.consent input {
  margin-top: 3px;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  accent-color: var(--brand-amber);
}

.submit-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.btn-submit {
  background: linear-gradient(135deg, var(--brand-deep-green), var(--brand-leaf));
  color: #fff;
  border: none;
  padding: 14px 28px;
  box-shadow: var(--shadow-md);
  min-width: 220px;
}

.btn-submit:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.btn-submit:disabled {
  opacity: 0.7;
  cursor: progress;
  transform: none;
}

.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spinner 0.8s linear infinite;
  display: none;
}

@keyframes spinner {
  to {
    transform: rotate(360deg);
  }
}

.btn-submit.loading .spinner {
  display: inline-block;
}

.btn-submit.loading .label-text {
  opacity: 0.85;
}

.form-status {
  font-size: 0.92rem;
  color: var(--ink-soft);
  line-height: 1.5;
  min-height: 20px;
}

.form-status.error {
  color: #b6491f;
}

.form-status .fallback {
  display: inline-block;
  margin-left: 6px;
  text-decoration: underline;
  color: var(--brand-brown);
  font-weight: 600;
}

.success-card {
  text-align: center;
  padding: 40px 24px;
  border: 1px solid var(--brand-leaf);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(136, 168, 68, 0.10), rgba(255, 255, 255, 0.85));
  box-shadow: var(--shadow-md);
  animation: fadeUp 0.5s ease-out both;
}

.success-card .check-big {
  width: 64px;
  height: 64px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-leaf), var(--brand-deep-green));
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 24px rgba(46, 74, 23, 0.35);
}

.success-card .check-big svg {
  width: 30px;
  height: 30px;
}

.success-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.6rem;
  color: var(--brand-brown);
  margin-bottom: 8px;
}

.success-card p {
  color: var(--ink-soft);
  line-height: 1.6;
  max-width: 380px;
  margin: 0 auto;
}

/* --- Confetti leaf burst --- */
.burst {
  position: fixed;
  pointer-events: none;
  z-index: 50;
  width: 18px;
  height: 18px;
  will-change: transform, opacity;
}

/* --- Follow strip --- */
.follow {
  margin: 0 auto 8px;
  padding: 30px 32px 20px;
  text-align: center;
  max-width: var(--max-w);
  width: 100%;
}

.follow-label {
  font-size: 11px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--brand-brown);
  opacity: 0.75;
  margin-bottom: 14px;
  font-weight: 600;
}

.socials {
  display: inline-flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

.socials a {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(196, 122, 42, 0.25);
  color: var(--brand-brown);
  transition: transform 0.3s cubic-bezier(.2, .8, .2, 1.1), box-shadow 0.3s ease, color 0.3s ease, background 0.3s ease, border-color 0.3s ease;
  text-decoration: none;
}

.socials a svg {
  width: 20px;
  height: 20px;
  transition: transform 0.3s ease;
}

.socials a:hover {
  transform: translateY(-4px) scale(1.08);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 10px 22px rgba(90, 42, 12, 0.25);
}

.socials a:hover svg {
  transform: rotate(-8deg) scale(1.08);
}

.socials a.x:hover {
  background: #000;
}

.socials a.fb:hover {
  background: #1877f2;
}

.socials a.ig:hover {
  background: linear-gradient(135deg, #f58529, #dd2a7b 50%, #8134af 80%, #515bd4);
}

.socials a.li:hover {
  background: #0a66c2;
}

/* --- Footer --- */
footer.site {
  padding: 50px 32px;
  position: relative;
  z-index: 3;
  background: rgba(255, 255, 255, 0.55);
  border-top: 1px solid rgba(196, 122, 42, 0.15);
  backdrop-filter: blur(10px);
  margin-top: 40px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 32px;
  max-width: var(--max-w);
  margin: 0 auto;
}

.footer-grid h4 {
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  color: var(--brand-brown);
  margin-bottom: 14px;
  letter-spacing: 0.5px;
}

.footer-grid ul {
  list-style: none;
  display: grid;
  gap: 10px;
}

.footer-grid a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.92rem;
  transition: color 0.2s ease, padding 0.2s ease;
}

.footer-grid a:hover {
  color: var(--brand-amber);
  padding-left: 4px;
}

.footer-brand p {
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.6;
  max-width: 320px;
  margin-top: 12px;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 36px;
  padding-top: 22px;
  border-top: 1px dashed rgba(196, 122, 42, 0.25);
  font-size: 12px;
  color: var(--ink-soft);
  letter-spacing: 0.5px;
  max-width: var(--max-w);
  margin-left: auto;
  margin-right: auto;
}

.footer-bottom .copy {
  flex: 1 1 auto;
  min-width: 0;
}

.footer-legal {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: flex-end;
  font-size: 12px;
}

.footer-legal a {
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-legal a:hover {
  color: var(--brand-amber);
  text-decoration: underline;
}

.footer-legal .sep {
  opacity: 0.45;
}

@media (max-width: 640px) {
  .footer-bottom {
    justify-content: center;
    text-align: center;
  }

  .footer-legal {
    justify-content: center;
  }
}

/* --- Reveal-on-scroll --- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s cubic-bezier(.2, .8, .2, 1), transform 0.8s cubic-bezier(.2, .8, .2, 1);
}

.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

.reveal.delay-1 {
  transition-delay: 0.10s;
}

.reveal.delay-2 {
  transition-delay: 0.20s;
}

.reveal.delay-3 {
  transition-delay: 0.30s;
}

.reveal.delay-4 {
  transition-delay: 0.40s;
}

/* --- Animations --- */
@keyframes fadeDown {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 960px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 20px 24px 40px;
    text-align: left;
  }

  .hero-visual {
    max-width: 420px;
    margin: 0 auto;
  }

  .products-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin: 0 auto;
    gap: 40px;
  }

  /* Removed early vs-grid and benefits-grid overrides */

  .trust-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  nav.primary {
    position: fixed;
    top: 76px;
    left: 16px;
    right: 16px;
    background: rgba(253, 246, 236, 0.97);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(196, 122, 42, 0.20);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 14px;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.25s ease, opacity 0.25s ease;
  }

  nav.primary.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  nav.primary a {
    padding: 12px 16px;
  }

  nav.primary a.active::after {
    display: none;
  }

  nav.primary a.active {
    background: rgba(196, 122, 42, 0.10);
  }

  .nav-cta {
    margin-left: 0 !important;
    margin-top: 6px;
    text-align: center;
  }

  .nav-toggle {
    display: inline-flex;
  }


  /* Pre-book section collapses to a single column on tablets and phones */
  .prebook-wrap {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 28px;
  }

  /* Three pillars stack on tablets and phones to prevent overflow */
  .pillars {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin: 0 auto;
    gap: 18px;
  }
}

@media (max-width: 640px) {
  header.site {
    padding: 14px 18px;
  }

  .brand img {
    /* width: 48px; */
    height: 60px;
  }

  .section {
    padding: 44px 18px;
  }

  .section.deep {
    padding: 60px 18px;
  }

  .row-2 {
    grid-template-columns: 1fr;
  }

  .prebook-wrap {
    padding: 22px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .trust-strip {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 22px 18px;
  }

  .trust-cell .num {
    font-size: 1.7rem;
  }

  .cane-field {
    height: 160px;
  }

  /* .wrap {
    padding-bottom: 140px;
  } */

  .btn-submit {
    width: 100%;
    min-width: 0;
  }

  .timeline-wrap {
    padding: 0;
  }

  .progress-bar {
    left: 22px;
  }

  .tl-step {
    padding-left: 76px;
  }

  .tl-step .step-num {
    left: -2px;
    width: 48px;
    height: 48px;
    top: 26px;
  }

  .tl-step .step-num svg {
    width: 24px;
    height: 24px;
  }

  .principle-grid {
    grid-template-columns: 1fr;
  }

  .product-detail {
    grid-template-columns: 1fr;
    padding: 24px;
  }

  .trade-card {
    grid-template-columns: 1fr;
    gap: 28px;
    align-items: start;
  }

  .trade-title {
    max-width: none;
  }

  .trade-card .feature-list li {
    max-width: none;
  }

  .trade-contact {
    justify-items: stretch;
    text-align: left;
  }

  .trade-contact p {
    max-width: none;
  }

  .trade-contact .btn,
  .trade-phone {
    width: 100%;
  }

  .card-soft {
    padding: 24px;
  }

  .specimen-label {
    display: none;
  }

}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition: none !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  .tl-step {
    opacity: 1;
    transform: none;
  }

  .tl-step .step-num svg .draw {
    stroke-dashoffset: 0;
  }
}

/* --- VS Comparison Section --- */
.vs-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 20px;
  align-items: center;
  position: relative;
}

.vs-badge {
  background: var(--brand-amber);
  color: #fff;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  font-size: 1.2rem;
  box-shadow: 0 4px 12px rgba(196, 122, 42, 0.4);
  z-index: 2;
}

.vs-card {
  background: rgba(255, 255, 255, 0.9);
  border-radius: var(--radius-lg);
  padding: 30px;
  box-shadow: var(--shadow-md);
  border: 1px solid rgba(196, 122, 42, 0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.vs-card:hover {
  transform: translateY(-5px);
}

.vs-card.organic {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(240, 248, 230, 0.9));
  border-color: var(--brand-leaf);
  box-shadow: 0 12px 30px rgba(46, 74, 23, 0.1);
}

.vs-card.organic:hover {
  box-shadow: 0 16px 40px rgba(46, 74, 23, 0.15);
}

.vs-card.chemical {
  background: linear-gradient(135deg, #fcfcfc, #f5f5f5);
  border-color: #ddd;
  filter: grayscale(0.2);
}

.vs-header {
  text-align: center;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.vs-header h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.6rem;
  margin-bottom: 8px;
}

.badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.badge-green {
  background: var(--brand-leaf);
  color: #fff;
}

.badge-grey {
  background: #666;
  color: #fff;
}

.vs-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.vs-list li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.vs-list .icon-wrap {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  margin-top: 2px;
}

.vs-list .check-wrap {
  background: var(--brand-deep-green);
}

.vs-list .cross-wrap {
  background: #d05342;
}

.vs-list svg {
  width: 18px;
  height: 18px;
}

/* Benefits Grid */
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}

.benefit-card {
  background: #fcf8f0;
  border: 1px solid rgba(196, 122, 42, 0.2);
  border-radius: 4px;
  padding: 32px 24px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.benefit-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-sm);
  border-color: var(--brand-amber);
}

.benefit-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.benefit-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--brand-gold);
  display: grid;
  place-items: center;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(196, 122, 42, 0.3);
  border: 2px solid var(--brand-amber);
}

.benefit-icon svg {
  width: 24px;
  height: 24px;
}

.benefit-card h4 {
  font-family: 'Playfair Display', serif;
  font-size: 1.25rem;
  color: var(--brand-brown);
  margin: 0;
}

.benefit-card p {
  color: var(--ink-soft);
  line-height: 1.6;
  font-size: 0.95rem;
  margin: 0;
}

@media (max-width: 768px) {
  .vs-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .vs-badge {
    margin: -40px auto;
  }
}


/* ============================================================
   MOBILE RESPONSIVENESS HOTFIX  (appended last to win specificity)
   Fixes confirmed live on https://www.gud4uorganicks.com :
   2. .pillars stayed 3-column on mobile
   3. .prebook-wrap stayed 2-column on mobile
   4. .benefits-grid stayed 2-column on small phones
   5. preloader appeared off-centre because horizontal overflow
      shifted the flex centring axis
   ============================================================ */

/* Hard guard against any rogue child causing horizontal scroll */
html,
body {
  overflow-x: clip !important; /* clip: no nested scroll container */
  max-width: 100%;
}

/* Tablet & phone: collapse the desktop 3-/2-column layouts */
@media (max-width: 960px) {
  .pillars {
    grid-template-columns: 1fr !important;
    max-width: 480px;
    margin: 0 auto;
    gap: 18px !important;
  }

  .prebook-wrap {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    padding: 28px !important;
  }

  .vs-grid {
    grid-template-columns: 1fr !important;
  }

  .benefits-grid {
    grid-template-columns: 1fr !important;
    max-width: 480px;
    margin: 40px auto 0;
  }

  /* Decorative sugarcane field SVGs use overflow: visible so leaves
     can extend naturally on desktop. On phones those leaves stick
     past the viewport edge and force ~100px of horizontal scroll.
     Clip them at the field boundary on mobile. */
  .cane-field {
    overflow: hidden !important;
  }

  .cane-stalk svg {
    overflow: hidden !important;
  }
}

/* Phones: also collapse the four-card benefit grids */
@media (max-width: 640px) {
  .benefits-grid {
    grid-template-columns: 1fr !important;
    max-width: 360px;
    margin: 32px auto 0;
    gap: 14px !important;
  }
}

/* Preloader: lock to viewport centre with transform so any layout
   overflow elsewhere can't shift the loader's horizontal position. */
#preloader {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100vw;
  height: 100vh;
  inset: 0;
}

#preloader .loader-content {
  width: auto;
  max-width: 90vw;
  margin: 0 auto;
  text-align: center;
}

@media (max-width: 640px) {
  .trade-card {
    padding: 24px !important;
  }

  .trade-title {
    font-size: 1.65rem;
    line-height: 1.16;
  }

  .trade-card .feature-list {
    gap: 10px;
  }

  .trade-card .feature-list li {
    font-size: 0.95rem;
  }

  .trade-contact {
    text-align: center;
  }

  #preloader .jaggery-loader {
    width: 180px !important;
    height: 180px !important;
  }
}

/* ============================================================
   STORY SCRUB — sticky scroll-driven scene player
   How it works (zero external libraries, zero pin-spacer):
     1. .story-track is 500vh tall, giving 4 × viewport of scroll room
     2. .story-stage is position:sticky inside the track, so the
        browser natively pins it at top:0 while the track scrolls
     3. JS reads scroll progress (0-1) within the track and sets
        the CSS variable --p on the active scene
     4. Each scene's child elements animate via calc(var(--p) ...)
     5. When scroll exits the track, sticky naturally releases —
        no overlap with FAQ, no pin-spacer leftover
   ============================================================ */
.story-scrub {
  position: relative;
  width: 100%;
  margin: 40px 0 0;
  z-index: 1;
  isolation: isolate;
}

.story-track {
  position: relative;
  height: 500vh; /* 5 scenes × 100vh of scroll each */
}

.story-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(247, 231, 201, 0.6), transparent 70%),
    linear-gradient(180deg, transparent 0%, rgba(247, 231, 201, 0.35) 50%, transparent 100%);
}

/* Headline that crossfades content */
.story-headline {
  position: absolute;
  top: 6vh;
  left: 0;
  right: 0;
  text-align: center;
  pointer-events: none;
  z-index: 5;
  padding: 0 24px;
}
.story-eyebrow {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--brand-green);
  font-weight: 600;
  margin-bottom: 10px;
}
.story-title {
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  font-size: clamp(1.6rem, 3.2vw, 2.6rem);
  color: var(--brand-brown);
  line-height: 1.15;
  margin: 0 auto;
  max-width: 760px;
  min-height: 1.2em;
  transition: opacity 0.4s ease;
}
.story-caption {
  font-size: 0.92rem;
  color: var(--ink-soft);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 600;
  margin-top: 10px;
  min-height: 1.3em;
  transition: opacity 0.4s ease;
}
.story-headline.fade .story-title,
.story-headline.fade .story-caption { opacity: 0; }

/* Scene container — all scenes layered on top of each other */
.story-scenes {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.story-scene {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 0.5s cubic-bezier(.4, 0, .2, 1), transform 0.5s cubic-bezier(.4, 0, .2, 1);
  pointer-events: none;
  padding: 0 24px;
}
.story-scene.active {
  opacity: 1;
  transform: scale(1);
}
.story-scene svg {
  width: 100%;
  max-width: 600px;
  height: auto;
  max-height: 60vh;
  display: block;
}

/* Progress bar at the bottom of the stage */
.story-progress {
  position: absolute;
  left: 32px;
  right: 32px;
  bottom: 32px;
  height: 4px;
  background: rgba(196, 122, 42, 0.18);
  border-radius: 4px;
  overflow: hidden;
  z-index: 5;
}
.story-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--brand-amber), var(--brand-leaf), var(--brand-deep-green));
  border-radius: 4px;
  transition: width 0.15s linear;
  box-shadow: 0 0 12px rgba(196, 122, 42, 0.4);
}

/* ============================================================
   SCENE-SPECIFIC SUB-ANIMATIONS  (driven by --p, 0 to 1)
   Each .story-scene.active gets --p set by JS based on the
   user's scroll progress within that scene's portion of the
   total scroll range.
   ============================================================ */

/* ---- SCENE 0: FIELD ---- sun rises, stalks gently sway up */
.story-scene[data-scene="0"] .fld-sun {
  transform: translateY(calc((1 - var(--p, 0)) * 60px));
  opacity: var(--p, 0);
  transform-origin: center;
  transform-box: fill-box;
}
.story-scene[data-scene="0"] .fld-front path,
.story-scene[data-scene="0"] .fld-back path {
  transform-origin: center bottom;
  transform-box: fill-box;
  transform: scaleY(calc(0.4 + var(--p, 0) * 0.6));
  transition: transform 0.2s ease-out;
}

/* ---- SCENE 1: PRESS ---- cane slides in, lever lowers, syrup fills ---- */
.story-scene[data-scene="1"] .prs-cane {
  transform: translateX(calc(150px + var(--p, 0) * 130px));
}
.story-scene[data-scene="1"] .prs-lever {
  transform: rotate(calc(var(--p, 0) * 8deg)) translateY(calc(var(--p, 0) * 18px));
}
.story-scene[data-scene="1"] .prs-syrup {
  /* SVG: scale-y the syrup rect from 0 to full height (140px from y=240 down) */
  transform: scaleY(var(--p, 0));
}
.story-scene[data-scene="1"] .prs-drip {
  opacity: calc(min(1, var(--p, 0) * 4));
  transform: translateY(calc(var(--p, 0) * 14px));
}

/* ---- SCENE 2: BOIL ---- syrup darkens + reduces, bubbles bubble, flames flicker ---- */
.story-scene[data-scene="2"] .boil-syrup {
  /* Shrink from full to reduced thickness, color shifts darker */
  transform: scaleY(calc(0.6 + var(--p, 0) * 0.4));
  fill: rgb(
    calc(196 - var(--p, 0) * 80),
    calc(122 - var(--p, 0) * 60),
    calc(42  - var(--p, 0) * 20)
  );
}
.story-scene[data-scene="2"].active .bub {
  animation: bubble-up 2.2s ease-in infinite;
}
.story-scene[data-scene="2"].active .bub.b1 { animation-delay: 0s; }
.story-scene[data-scene="2"].active .bub.b2 { animation-delay: 0.4s; }
.story-scene[data-scene="2"].active .bub.b3 { animation-delay: 0.8s; }
.story-scene[data-scene="2"].active .bub.b4 { animation-delay: 1.2s; }
.story-scene[data-scene="2"].active .bub.b5 { animation-delay: 1.6s; }
@keyframes bubble-up {
  0%   { transform: translateY(0) scale(0.5); opacity: 0; }
  20%  { opacity: 0.9; }
  100% { transform: translateY(-80px) scale(1.4); opacity: 0; }
}
.story-scene[data-scene="2"].active .fl {
  animation: flame-flicker 0.45s ease-in-out infinite alternate;
  transform-origin: 50% 100%;
  transform-box: fill-box;
}
.story-scene[data-scene="2"].active .fl2 { animation-duration: 0.32s; }
.story-scene[data-scene="2"].active .fl3 { animation-duration: 0.55s; }
@keyframes flame-flicker {
  0%   { transform: scaleY(0.85) skewX(-3deg); opacity: 0.9; }
  100% { transform: scaleY(1.15) skewX(3deg);  opacity: 1; }
}

/* ---- SCENE 3: MOULD ---- liquid pours, coins fill in sequence ---- */
.story-scene[data-scene="3"] .mld-pour {
  transform: scaleY(calc(min(1, var(--p, 0) * 3)));
}
/* Coins fill in sequence: each becomes visible at successive thresholds */
.story-scene[data-scene="3"] .cn {
  transform: scale(0);
  transform-origin: center;
  transform-box: fill-box;
  transition: transform 0.4s cubic-bezier(.4, 0, .2, 1);
}
.story-scene[data-scene="3"][style*="--p"] .cn.c1 { transform: scale(calc(min(1, max(0, (var(--p, 0) - 0.10) * 6)))); }
.story-scene[data-scene="3"][style*="--p"] .cn.c2 { transform: scale(calc(min(1, max(0, (var(--p, 0) - 0.25) * 6)))); }
.story-scene[data-scene="3"][style*="--p"] .cn.c3 { transform: scale(calc(min(1, max(0, (var(--p, 0) - 0.40) * 6)))); }
.story-scene[data-scene="3"][style*="--p"] .cn.c4 { transform: scale(calc(min(1, max(0, (var(--p, 0) - 0.55) * 6)))); }
.story-scene[data-scene="3"][style*="--p"] .cn.c5 { transform: scale(calc(min(1, max(0, (var(--p, 0) - 0.70) * 6)))); }

/* ---- SCENE 4: PACK ---- block drops in, ribbon settles ---- */
.story-scene[data-scene="4"] .pck-block {
  transform: translateY(calc((1 - var(--p, 0)) * -80px)) scale(calc(0.85 + var(--p, 0) * 0.15));
  transform-origin: center;
  transform-box: fill-box;
  opacity: calc(min(1, var(--p, 0) * 1.5));
}
.story-scene[data-scene="4"] .pck-ribbon {
  opacity: calc(max(0, var(--p, 0) - 0.4) * 2);
  transform: translateY(calc((1 - var(--p, 0)) * -20px));
}

/* ============================================================
   STORY SCRUB — MOBILE FALLBACK (<= 960px)
   On phones/tablets the scroll-scrub is converted to a simple
   vertical sequence of static scene cards. No sticky, no scrub.
   ============================================================ */
@media (max-width: 960px) {
  .story-scrub { margin: 40px 0; }
  .story-track { height: auto !important; }
  .story-stage {
    position: relative !important;
    top: auto;
    height: auto;
    min-height: 0;
    overflow: visible;
    padding: 40px 18px 60px;
    background: none;
    display: block;
  }
  .story-headline {
    position: relative;
    top: 0;
    margin-bottom: 32px;
  }
  .story-headline .story-title {
    /* Show a single static heading on mobile */
    transition: none;
  }
  .story-scenes {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    place-items: stretch;
  }
  .story-scene {
    position: relative;
    inset: auto;
    opacity: 1;
    transform: none;
    padding: 0;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(196, 122, 42, 0.20);
    border-radius: var(--radius-lg);
    padding: 20px;
    box-shadow: var(--shadow-sm);
  }
  .story-scene svg { max-height: 280px; }
  /* Reset all the --p driven sub-animations to their end states */
  .story-scene[data-scene="0"] .fld-sun { transform: none; opacity: 1; }
  .story-scene[data-scene="0"] .fld-front path,
  .story-scene[data-scene="0"] .fld-back path { transform: none; }
  .story-scene[data-scene="1"] .prs-cane { transform: translateX(280px); }
  .story-scene[data-scene="1"] .prs-lever { transform: rotate(8deg) translateY(18px); }
  .story-scene[data-scene="1"] .prs-syrup { transform: scaleY(1); }
  .story-scene[data-scene="1"] .prs-drip { opacity: 1; }
  .story-scene[data-scene="2"] .boil-syrup { transform: scaleY(1); }
  .story-scene[data-scene="3"] .mld-pour { transform: scaleY(1); }
  .story-scene[data-scene="3"] .cn { transform: scale(1); }
  .story-scene[data-scene="4"] .pck-block { transform: none; opacity: 1; }
  .story-scene[data-scene="4"] .pck-ribbon { opacity: 1; transform: none; }
  .story-progress { display: none; }
}

/* Honour reduced motion: kill all transitions and continuous animations */
@media (prefers-reduced-motion: reduce) {
  .story-scene,
  .story-title,
  .story-caption,
  .story-progress-fill { transition: none; }
  .story-scene[data-scene="2"].active .bub,
  .story-scene[data-scene="2"].active .fl { animation: none; }
}

/* ============================================================
   GAP MODEL - single-row jaggery process animation
   Replaces the previous multi-scene scrub on the homepage.
   ============================================================ */
.story-scrub {
  display: none !important;
}

.gap-model {
  position: relative;
  z-index: 1;
  margin: 64px 0 30px;
}

.gap-model-head {
  max-width: 760px;
  margin: 0 auto 18px;
  text-align: center;
  padding: 0 20px;
}

.gap-stage {
  position: relative;
  width: min(1180px, calc(100vw - 36px));
  margin: 0 auto;
  min-height: clamp(360px, 48vw, 520px);
  overflow: hidden;
  border: 1px solid rgba(196, 122, 42, 0.16);
  border-radius: 8px;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255, 248, 223, 0.95), rgba(253, 246, 236, 0.55) 42%, rgba(247, 231, 201, 0.22) 70%),
    linear-gradient(180deg, rgba(255, 250, 237, 0.92), rgba(246, 229, 193, 0.64));
  box-shadow: 0 24px 80px rgba(90, 48, 20, 0.13);
  isolation: isolate;
}

.gap-stage::before {
  content: "";
  position: absolute;
  inset: auto -6% 0;
  height: 42%;
  background: linear-gradient(180deg, rgba(171, 203, 78, 0), rgba(155, 191, 57, 0.2));
  z-index: -1;
}

.gap-svg {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: auto;
  min-width: 0;
  transform-origin: center bottom;
}

.gap-product-final {
  position: absolute;
  z-index: 4;
  top: clamp(30px, 5vw, 58px);
  right: clamp(28px, 5vw, 72px);
  width: clamp(250px, 33vw, 430px);
  max-height: 48%;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 18px 48px rgba(90, 48, 20, 0.2);
  opacity: 0;
  transform: translateY(22px) scale(0.96);
  animation: gap-product-reveal 6.6s cubic-bezier(.18, .9, .22, 1) infinite;
}

.gap-field {
  position: absolute;
  inset: auto 0 0;
  height: 43%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.78;
}

.gap-field span {
  position: absolute;
  bottom: -8px;
  width: 12px;
  height: 150px;
  border-radius: 10px;
  background: linear-gradient(90deg, #456315, #86ad36, #385314);
  transform-origin: bottom center;
  animation: gap-cane-sway 5.8s ease-in-out infinite;
}

.gap-field span::before,
.gap-field span::after {
  content: "";
  position: absolute;
  top: 18px;
  width: 82px;
  height: 20px;
  background: #a8cf54;
  clip-path: polygon(0 58%, 100% 0, 82% 30%, 18% 100%);
  transform-origin: left center;
}

.gap-field span::before {
  left: 5px;
  transform: rotate(-28deg);
}

.gap-field span::after {
  right: 5px;
  transform: scaleX(-1) rotate(-28deg);
}

.gap-field span:nth-child(1) { left: 5%; height: 190px; animation-delay: -1.4s; }
.gap-field span:nth-child(2) { left: 27%; height: 128px; animation-delay: -3.1s; opacity: 0.68; }
.gap-field span:nth-child(3) { left: 50%; height: 168px; animation-delay: -0.7s; }
.gap-field span:nth-child(4) { left: 77%; height: 142px; animation-delay: -2.2s; opacity: 0.72; }
.gap-field span:nth-child(5) { left: 91%; height: 176px; animation-delay: -4.4s; }

@keyframes gap-cane-sway {
  0%, 100% { transform: rotate(-1.8deg); }
  50% { transform: rotate(2deg); }
}

.gap-floor {
  fill: none;
  stroke: rgba(111, 72, 35, 0.14);
  stroke-width: 26;
  stroke-linecap: round;
}

.gap-cane-main {
  transform-origin: 80px 492px;
  animation: gap-feed-cane 6.6s cubic-bezier(.55, .02, .18, 1) infinite;
}

.gap-press-bar {
  transform-origin: 342px 145px;
  animation: gap-press-down 6.6s cubic-bezier(.45, 0, .15, 1) infinite;
}

.gap-glass-fill {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: gap-glass-fill 6.6s cubic-bezier(.4, 0, .2, 1) infinite;
}

.gap-glass-surface {
  animation: gap-surface-rise 6.6s cubic-bezier(.4, 0, .2, 1) infinite;
}

.gap-pan-syrup {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: gap-pan-reduce 6.6s cubic-bezier(.4, 0, .2, 1) infinite;
}

.gap-pan-surface {
  animation: gap-pan-heat 6.6s ease-in-out infinite;
}

.gap-fire {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: gap-fire-show 6.6s ease-in-out infinite;
}

.gap-flame {
  transform-box: fill-box;
  transform-origin: center bottom;
  filter: blur(0.2px);
  animation: gap-flame-flicker 0.46s ease-in-out infinite alternate;
}

.gap-flame-2,
.gap-flame-5 {
  animation-duration: 0.34s;
}

.gap-flame-3 {
  animation-duration: 0.58s;
}

.gap-steam {
  animation: gap-steam 6.6s ease-in-out infinite;
}

.gap-coin {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
}

.gap-coin-1 { animation: gap-coin-pop 6.6s cubic-bezier(.18, .9, .22, 1.25) infinite 4.12s; }
.gap-coin-2 { animation: gap-coin-pop 6.6s cubic-bezier(.18, .9, .22, 1.25) infinite 4.32s; }
.gap-coin-3 { animation: gap-coin-pop 6.6s cubic-bezier(.18, .9, .22, 1.25) infinite 4.52s; }
.gap-coin-4 { animation: gap-coin-pop 6.6s cubic-bezier(.18, .9, .22, 1.25) infinite 4.72s; }

.gap-caption {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 20px;
  z-index: 3;
  margin: 0;
  color: var(--brand-brown);
  font-weight: 700;
  font-size: clamp(0.78rem, 1.45vw, 1rem);
  letter-spacing: 2.5px;
  text-align: center;
  text-transform: uppercase;
}

@keyframes gap-feed-cane {
  0% { transform: translateX(-34px) rotate(-2deg); opacity: 0.92; }
  16% { transform: translateX(122px) rotate(2deg); opacity: 1; }
  36% { transform: translateX(152px) rotate(3deg) scaleY(0.96); opacity: 0.95; }
  58%, 100% { transform: translateX(178px) rotate(4deg) scaleY(0.88); opacity: 0.18; }
}

@keyframes gap-press-down {
  0%, 14%, 100% { transform: rotate(0deg) translateY(0); }
  24%, 35% { transform: rotate(7deg) translateY(26px); }
  45% { transform: rotate(1deg) translateY(4px); }
}

@keyframes gap-glass-fill {
  0%, 18% { transform: scaleY(0.04); opacity: 0.4; }
  40%, 55% { transform: scaleY(1); opacity: 1; }
  71%, 100% { transform: scaleY(0.24); opacity: 0.68; }
}

@keyframes gap-surface-rise {
  0%, 18% { transform: translateY(150px); opacity: 0.2; }
  40%, 55% { transform: translateY(0); opacity: 0.9; }
  71%, 100% { transform: translateY(116px); opacity: 0.35; }
}

@keyframes gap-pan-reduce {
  0%, 34% { transform: scaleY(0.2); opacity: 0.42; }
  50%, 68% { transform: scaleY(1); opacity: 0.9; }
  85%, 100% { transform: scaleY(0.58); opacity: 0.78; }
}

@keyframes gap-pan-heat {
  0%, 38%, 100% { fill: #221f1c; }
  56%, 76% { fill: #1a1714; }
}

@keyframes gap-fire-show {
  0%, 36%, 96%, 100% { opacity: 0; transform: scaleY(0.72); }
  48%, 84% { opacity: 0.92; transform: scaleY(1); }
}

@keyframes gap-flame-flicker {
  0% { transform: scaleY(0.84) translateY(7px) skewX(-2deg); opacity: 0.72; }
  100% { transform: scaleY(1.12) translateY(-3px) skewX(2deg); opacity: 1; }
}

@keyframes gap-steam {
  0%, 38%, 100% { opacity: 0; transform: translateY(20px); }
  52%, 82% { opacity: 0.78; transform: translateY(-10px); }
}

@keyframes gap-coin-pop {
  0%, 4% { transform: scale(0); opacity: 0; }
  9%, 76% { transform: scale(1); opacity: 1; }
  90%, 100% { transform: scale(0); opacity: 0; }
}

@keyframes gap-product-reveal {
  0%, 66% { opacity: 0; transform: translateY(22px) scale(0.96); }
  76%, 94% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(8px) scale(0.98); }
}

@media (max-width: 960px) {
  .gap-model {
    margin: 42px 0 24px;
    overflow: hidden;
    max-width: 100vw;
  }

  .gap-model-head {
    text-align: left;
    padding: 0 18px;
  }

  .gap-stage {
    width: calc(100vw - 24px);
    min-height: 0;
    overflow: hidden;
  }

  .gap-svg {
    width: 100%;
    min-width: 0;
  }

  .gap-product-final {
    position: relative;
    z-index: 4;
    display: block;
    left: auto;
    right: auto;
    top: auto;
    width: calc(100% - 32px);
    max-height: none;
    margin: 12px auto 0;
  }

  .gap-caption {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    min-width: 0;
    margin: 10px 0 0;
    padding: 0 14px 16px;
  }
}

@media (max-width: 640px) {
  .gap-model-head {
    margin-bottom: 12px;
  }
  .gap-stage {
    width: calc(100vw - 18px);
  }

  .gap-svg {
    width: 100%;
    min-width: 0;
  }

  .gap-product-final {
    width: calc(100% - 24px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gap-field span,
  .gap-cane-main,
  .gap-press-bar,
  .gap-glass-fill,
  .gap-glass-surface,
  .gap-pan-syrup,
  .gap-pan-surface,
  .gap-fire,
  .gap-flame,
  .gap-steam,
  .gap-coin,
  .gap-product-final {
    animation: none !important;
  }
  .gap-coin { transform: scale(1); }
  .gap-product-final { opacity: 1; transform: none; }
  .gap-glass-fill,
  .gap-pan-syrup { transform: none; }
}

/* ============================================================
   THE OKRA DIFFERENCE
   Two-column feature section: image + 5 differentiators.
   Botanical, calm, brand-aligned. Stacks on tablet/phone.
   ============================================================ */
.okra-difference {
  position: relative;
  z-index: 2;
  padding: 70px 32px;
  max-width: var(--max-w);
  margin: 40px auto;
}

.okra-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
  align-items: center;
  background: rgba(255, 255, 255, 0.90);
  border: 1px solid rgba(196, 122, 42, 0.20);
  border-radius: var(--radius-lg);
  padding: 48px;
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-sm);
}

/* Visual side */
.okra-visual { position: relative; }
.okra-photo-wrap {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(135deg, #d9eba0, #88a844);
  box-shadow: var(--shadow-md);
}
.okra-photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 6s ease;
}
.okra-photo-wrap:hover img { transform: scale(1.04); }

.okra-photo-tag {
  position: absolute;
  bottom: 16px;
  left: 16px;
  right: 16px;
  background: rgba(253, 246, 236, 0.92);
  backdrop-filter: blur(6px);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-family: 'Playfair Display', serif;
  border-left: 3px solid var(--brand-amber);
}
.okra-photo-tag em {
  display: block;
  font-style: italic;
  font-size: 0.95rem;
  color: var(--brand-deep-green);
  letter-spacing: 0.3px;
}
.okra-photo-tag span {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 600;
  margin-top: 4px;
}

/* Copy side */
.okra-copy .section-eyebrow { text-align: left; }
.okra-lead {
  color: var(--ink-soft);
  font-size: 1.02rem;
  line-height: 1.75;
  margin-bottom: 26px;
}

.okra-points {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: grid;
  gap: 14px;
}
.okra-points li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: flex-start;
  gap: 14px;
  font-size: 0.96rem;
  color: var(--ink);
  line-height: 1.6;
}
.okra-points strong {
  color: var(--brand-brown);
  font-weight: 700;
}
.okra-tick {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-leaf), var(--brand-deep-green));
  color: #fff;
  display: grid;
  place-items: center;
  margin-top: 1px;
  box-shadow: 0 4px 10px rgba(46, 74, 23, 0.25);
  overflow: hidden;
}
.okra-tick svg {
  display: block;
  width: 14px !important;
  height: 14px !important;
  max-width: 14px;
  max-height: 14px;
}

.okra-cta { margin-top: 4px; }

/* Mobile / tablet — stack vertically, photo first */
@media (max-width: 960px) {
  .okra-difference,
  .okra-difference * {
    box-sizing: border-box;
  }

  .okra-difference {
    width: 100%;
    max-width: 100vw;
    padding: 42px 14px;
    margin: 24px auto;
    overflow: hidden;
  }

  .okra-grid {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    padding: 22px 18px;
    background: rgba(255, 255, 255, 0.94);
    overflow: hidden;
  }

  .okra-visual,
  .okra-copy,
  .okra-copy > *,
  .okra-points,
  .okra-points li > span:last-child {
    min-width: 0;
    max-width: 100%;
  }

  .okra-photo-wrap {
    aspect-ratio: 4 / 3;
    max-height: 360px;
  }

  .okra-copy .section-title {
    font-size: clamp(1.55rem, 7vw, 2rem);
    line-height: 1.12;
    overflow-wrap: anywhere;
  }

  .okra-lead,
  .okra-points li {
    overflow-wrap: anywhere;
    word-break: normal;
  }
}

@media (max-width: 520px) {
  .okra-difference {
    padding: 28px 10px;
  }

  .okra-grid {
    padding: 18px 14px;
    border-radius: 18px;
  }

  .okra-photo-wrap {
    aspect-ratio: 1 / 1.08;
    max-height: 340px;
  }
  .okra-photo-tag {
    bottom: 10px;
    left: 10px;
    right: 10px;
    padding: 10px 12px;
  }

  .okra-lead {
    font-size: 0.98rem;
    line-height: 1.65;
  }

  .okra-points li {
    grid-template-columns: 22px minmax(0, 1fr);
    font-size: 0.92rem;
    line-height: 1.55;
    gap: 10px;
  }

  .okra-tick {
    width: 22px;
    height: 22px;
  }
  .okra-tick svg {
    width: 12px !important;
    height: 12px !important;
    max-width: 12px;
    max-height: 12px;
  }
  .okra-cta {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}

/* ============================================================
   2026-09 AUDIT FIXES
   ============================================================ */

/* --- Preloader: CSS-only safety net. If site.js never runs, the overlay
       fades itself out after 4 s and the page stays usable. --- */
#preloader {
  animation: preloader-autohide 0.6s ease 4s forwards;
}
#preloader.loaded {
  animation: none;
}
#preloader.instant {
  transition: none;
}
@keyframes preloader-autohide {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* --- Keyboard focus: visible on every interactive element --- */
:focus-visible {
  outline: 3px solid var(--brand-amber);
  outline-offset: 3px;
  border-radius: 4px;
}
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: none; /* these already show a box-shadow focus ring */
}

/* --- Skip link --- */
.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 10000;
  padding: 10px 16px;
  background: var(--brand-brown);
  color: #fff;
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus {
  top: 16px;
}

/* --- Larger tap targets for carousel dots and social icons --- */
.carousel-dot {
  position: relative;
}
.carousel-dot::before {
  content: "";
  position: absolute;
  inset: -12px;
}
.socials a {
  min-width: 40px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* --- Product images as real <img> (width/height set for stable layout) --- */
.carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ============================================================
   NEW FORMATS & FLAVOURS
   ============================================================ */
.section-lead {
  max-width: 62ch;
  margin: 12px auto 0;
  text-align: center;
  color: var(--ink-soft);
  font-size: 1.02rem;
}
.new-range .products-grid {
  margin-top: 34px;
}

.flavour-guide {
  margin-top: 44px;
  padding: 30px 26px 26px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(196, 122, 42, 0.18);
  backdrop-filter: blur(6px);
}
.flavour-guide h3 {
  font-family: 'Playfair Display', serif;
  color: var(--brand-brown);
  font-size: 1.35rem;
  margin-bottom: 4px;
}
.flavour-guide .flavour-note {
  color: var(--ink-soft);
  font-size: 0.92rem;
  margin-bottom: 22px;
}
.flavour-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 18px;
}
.flavour-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 14px 16px;
  border-radius: var(--radius);
  background: #fff8eb;
  border: 1px solid rgba(196, 122, 42, 0.14);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.flavour-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-sm);
}
.flavour-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  display: block;
}
.flavour-card h4 {
  font-family: 'Playfair Display', serif;
  color: var(--brand-brown);
  font-size: 1.05rem;
  line-height: 1.2;
}
.flavour-card h4 span {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--brand-green);
  margin-top: 3px;
}
.flavour-card p {
  font-size: 0.86rem;
  color: var(--ink-soft);
  line-height: 1.5;
}
.flavour-card .formats {
  margin-top: auto;
  font-size: 0.72rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 500;
}

/* Homepage teaser strip */
.new-strip {
  margin-top: 34px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.new-strip a {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 14px;
  align-items: center;
  padding: 12px 16px 12px 12px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(196, 122, 42, 0.16);
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.new-strip a:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-sm);
  border-color: var(--brand-amber);
}
.new-strip img {
  width: 76px;
  height: 76px;
  object-fit: contain;
  display: block;
}
.new-strip .new-chip {
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--brand-amber);
}
.new-strip strong {
  display: block;
  font-family: 'Playfair Display', serif;
  color: var(--brand-brown);
  font-size: 1.05rem;
  line-height: 1.2;
  margin: 2px 0 3px;
}
.new-strip span.use {
  font-size: 0.84rem;
  color: var(--ink-soft);
  line-height: 1.45;
}

@media (prefers-reduced-motion: reduce) {
  .flavour-card, .new-strip a { transition: none; }
  .flavour-card:hover, .new-strip a:hover { transform: none; }
}

/* Anchored sections land below the sticky header */
section[id],
article[id],
.flavour-guide[id] {
  scroll-margin-top: 120px;
}

@media (max-width: 640px) {
  .flavour-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .flavour-card {
    padding: 10px 10px 12px;
  }
  .flavour-card h4 {
    font-size: 0.98rem;
  }
  .flavour-card p {
    font-size: 0.8rem;
  }
}

/* ============================================================
   CATALOGUE v2 (products page + homepage preview), Sep 2026
   Image tiles have a fixed height and the image is absolutely
   positioned inside, so every card lines up whatever the render's
   aspect ratio. Cards are solid white so the cane backdrop never
   shows through the product.
   ============================================================ */
:root {
  --tile: #ffffff;
  --tile-glow: radial-gradient(70% 60% at 50% 45%, rgba(255, 255, 255, 1), rgba(255, 247, 232, 0.55) 100%);
  --card-line: rgba(196, 122, 42, 0.18);
}

/* --- Shared image tile --- */
.tile {
  position: relative;
  background: var(--tile-glow), var(--tile);
  overflow: hidden;
}
.tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 18px;
  transition: transform 0.45s cubic-bezier(.2, .8, .2, 1);
}
.range-card:hover .tile img,
.flavour-item:hover .tile.main img { transform: scale(1.04); }
.tile .tag {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  font-size: 9px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--brand-green);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--card-line);
  padding: 5px 10px;
  border-radius: 999px;
}

/* --- Featured Masala Chai --- */
.feature-hero {
  display: grid;
  grid-template-columns: minmax(280px, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(20px, 4vw, 48px);
  align-items: center;
  padding: clamp(22px, 3.5vw, 40px);
  border-radius: var(--radius-lg);
  background: #fff;
  border: 1px solid rgba(196, 122, 42, 0.28);
  box-shadow: var(--shadow-md);
}
.feature-hero .visual {
  display: grid;
  gap: 14px;
}
.feature-hero .visual .tile {
  height: clamp(300px, 34vw, 420px);
  border-radius: var(--radius);
  border: 1px solid var(--card-line);
}
.feature-hero .visual .badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  background: var(--brand-brown);
  color: #fff;
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 999px;
}
.feature-hero .visual .thumb {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 12px;
  align-items: center;
  padding: 8px 12px 8px 8px;
  border-radius: var(--radius-sm);
  background: var(--tile);
  border: 1px solid var(--card-line);
}
.feature-hero .visual .thumb img { width: 64px; height: 64px; object-fit: contain; }
.feature-hero .visual .thumb span {
  font-size: 0.82rem;
  color: var(--ink-soft);
}
.feature-hero .visual .thumb span b { color: var(--brand-brown); font-weight: 600; }
.feature-hero h2 {
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  color: var(--brand-brown);
  line-height: 1.1;
  margin: 8px 0 10px;
}
.feature-hero .spices {
  font-size: 0.82rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--brand-green);
  font-weight: 600;
  margin-bottom: 14px;
}
.feature-hero p.lead { color: var(--ink-soft); font-size: 1.02rem; margin-bottom: 6px; max-width: 52ch; }
.feature-hero .actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

/* --- Spec rows (sizes, pack, audience) --- */
.formats { display: grid; gap: 8px; margin-top: 14px; }
.format-row {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 10px;
  align-items: start;
}
.format-row .k {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--brand-amber);
  padding-top: 5px;
}
.size-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.size-chips span {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--brand-brown);
  background: var(--brand-cream);
  border: 1px solid var(--card-line);
  padding: 4px 11px;
  border-radius: 999px;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}
.size-chips span.pack { background: #fff; border-style: dashed; color: var(--ink-soft); }
.aud { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.aud span {
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--brand-green);
  background: rgba(136, 168, 68, 0.14);
  padding: 4px 9px;
  border-radius: 4px;
}

/* --- Natural range cards --- */
.range-head { text-align: center; max-width: 68ch; margin: 0 auto 28px; }
.range-head .section-sub { color: var(--ink-soft); }
.range-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
}
.range-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--card-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.range-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.range-card .tile { height: 260px; flex: none; border-bottom: 1px solid var(--card-line); }
.range-card .body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.range-card .sub-brand {
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--brand-green);
  font-weight: 700;
}
.range-card h3 {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--brand-brown);
  line-height: 1.15;
  margin: 4px 0 8px;
}
.range-card p.use { font-size: 0.92rem; color: var(--ink-soft); line-height: 1.55; }
.range-card .cta {
  margin-top: auto;
  padding-top: 18px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.range-card .cta a { font-size: 0.84rem; padding: 10px 18px; }

/* Lead card (Block) spans two columns and lays out side by side */
@media (min-width: 900px) {
  .range-card.wide {
    grid-column: span 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .range-card.wide .tile { height: 100%; min-height: 340px; }
  .range-card.wide .tile { border-bottom: 0; border-right: 1px solid var(--card-line); }
  .range-card.wide .body { padding: 28px 30px; justify-content: center; }
  .range-card.wide .cta { margin-top: 24px; }
  .range-card.wide h3 { font-size: 1.7rem; }
}

/* --- Flavoured cards: block + cubes --- */
.flavour-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 22px;
}
.flavour-item {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--card-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border-top: 5px solid var(--band, var(--brand-amber));
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.flavour-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.flavour-item .pics {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 8px;
  padding: 10px;
  background: #fff;
  border-bottom: 1px solid var(--card-line);
}
.flavour-item .pics figure { margin: 0; display: grid; grid-template-rows: 200px auto; gap: 4px; }
.flavour-item .pics .tile { border-radius: var(--radius-sm); background: #fff; }
.flavour-item .pics .tile:not(.main) { border-left: 1px solid rgba(196, 122, 42, 0.12); }
.flavour-item .pics .tile img { padding: 12px; }
.flavour-item .pics figcaption {
  text-align: center;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.flavour-item .body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.flavour-item h3 {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--brand-brown);
  line-height: 1.15;
}
.flavour-item h3 small {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--brand-green);
  margin-top: 3px;
}
.flavour-item p.use { font-size: 0.9rem; color: var(--ink-soft); margin-top: 8px; line-height: 1.55; }
.flavour-item .flag {
  position: absolute;
  top: 16px;
  left: 16px;
  background: var(--brand-brown);
  color: #fff;
  font-size: 9px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 999px;
  z-index: 3;
}
.flavour-item .cta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 16px; }
.flavour-item .cta a { font-size: 0.82rem; padding: 9px 16px; }

/* --- Full pack list --- */
.sku-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--card-line); background: #fff; }
.sku-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; min-width: 640px; }
.sku-table th, .sku-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid rgba(196, 122, 42, 0.14); vertical-align: top; }
.sku-table th {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--brand-green);
  background: var(--tile);
  font-weight: 700;
}
.sku-table td.grp { font-family: 'Playfair Display', serif; font-weight: 700; color: var(--brand-brown); white-space: nowrap; }
.sku-table td.n { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-soft); white-space: nowrap; }
.sku-table tr.range-row td { background: rgba(136, 168, 68, 0.12); font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase; font-weight: 700; color: var(--brand-deep-green); }
.sku-foot { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-top: 18px; color: var(--ink-soft); font-size: 0.9rem; }

/* --- Homepage preview --- */
.feature-mini {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 22px;
  align-items: center;
  padding: 16px 24px 16px 16px;
  border-radius: var(--radius-lg);
  background: #fff;
  border: 1px solid rgba(196, 122, 42, 0.28);
  text-decoration: none;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  margin-bottom: 22px;
}
.feature-mini:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.feature-mini .tile { height: 170px; border-radius: var(--radius); border: 1px solid var(--card-line); }
.feature-mini .tile img { padding: 10px; }
.feature-mini h3 { font-family: 'Playfair Display', serif; font-size: 1.45rem; color: var(--brand-brown); margin: 6px 0 6px; }
.feature-mini p { color: var(--ink-soft); font-size: 0.94rem; }
.feature-mini .sizes { display: block; margin-top: 10px; font-size: 0.78rem; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-soft); }
.range-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; }
.range-tile {
  display: block;
  padding: 22px 22px 20px;
  border-radius: var(--radius-lg);
  background: #fff;
  border: 1px solid var(--card-line);
  text-decoration: none;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.range-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.range-tile h3 { font-family: 'Playfair Display', serif; font-size: 1.4rem; color: var(--brand-brown); }
.range-tile p { color: var(--ink-soft); font-size: 0.92rem; margin: 6px 0 14px; }
.range-tile .strip { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.range-tile .strip .tile { aspect-ratio: 1 / 1; border-radius: var(--radius-sm); border: 1px solid var(--card-line); }
.range-tile .strip .tile img { padding: 6px; }
.range-tile .more { display: inline-block; margin-top: 16px; font-weight: 600; color: var(--brand-amber); font-size: 0.9rem; }

@media (max-width: 800px) {
  .feature-hero { grid-template-columns: 1fr; }
  .feature-mini { grid-template-columns: 120px 1fr; gap: 14px; padding: 12px; }
  .feature-mini .tile { height: 120px; }
  .range-card .tile { height: 240px; }
  .flavour-item .pics figure { grid-template-rows: 170px auto; }
}
@media (max-width: 480px) {
  .range-tile .strip { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); }
  .format-row { grid-template-columns: 1fr; gap: 4px; }
  .format-row .k { padding-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .range-card, .flavour-item, .feature-mini, .range-tile, .tile img { transition: none; }
  .range-card:hover, .flavour-item:hover, .feature-mini:hover, .range-tile:hover { transform: none; }
  .range-card:hover .tile img, .flavour-item:hover .tile.main img { transform: none; }
}

/* --- Homepage: shop by format --- */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}
.cat-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--card-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.cat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--brand-amber); }
.cat-card .tile { display: block; height: 200px; border-bottom: 1px solid var(--card-line); }
.cat-card .tile img { padding: 14px; }
.cat-card:hover .tile img { transform: scale(1.05); }
.cat-card .body { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 16px; flex: 1; }
.cat-card strong {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 1.12rem;
  color: var(--brand-brown);
  line-height: 1.2;
}
.cat-card .use { font-size: 0.84rem; color: var(--ink-soft); line-height: 1.45; }
.cat-card .sizes {
  font-size: 0.74rem;
  letter-spacing: 0.5px;
  color: var(--brand-brown);
  background: var(--brand-cream);
  border: 1px solid var(--card-line);
  border-radius: 8px;
  padding: 6px 9px;
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.cat-card .more { margin-top: auto; padding-top: 10px; font-size: 0.82rem; font-weight: 600; color: var(--brand-amber); }
@media (max-width: 640px) { .cat-card .more { font-size: 0.78rem; } .cat-card .tile .tag { font-size: 8px; padding: 4px 8px; } }

.flavour-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding: 12px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--card-line);
}
.flavour-strip .lbl {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--brand-green);
  margin-right: 6px;
}
.flavour-strip a {
  text-decoration: none;
  color: var(--brand-brown);
  font-size: 0.84rem;
  font-weight: 500;
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--card-line);
  background: #fff;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.flavour-strip a::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--band, var(--brand-amber)); }
.flavour-strip a:hover { border-color: var(--brand-amber); background: var(--brand-cream); }
.flavour-strip a.all { margin-left: auto; border: 0; background: none; color: var(--brand-amber); font-weight: 600; }
.flavour-strip a.all::before { display: none; }

@media (max-width: 1000px) { .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .cat-card .tile { height: 160px; }
  .cat-card .body { padding: 12px 12px 14px; }
  .flavour-strip { border-radius: var(--radius); }
  .flavour-strip a.all { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .cat-card { transition: none; } .cat-card:hover { transform: none; } .cat-card:hover .tile img { transform: none; } }

/* ============================================================
   PRODUCT FINDER: choose type -> plain/flavour -> pack -> pre-book
   ============================================================ */
.finder { scroll-margin-top: 110px; }
.finder-shell {
  background: #fff;
  border: 1px solid var(--card-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: clamp(18px, 3vw, 34px);
}
.finder-top {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--card-line);
  margin-bottom: 8px;
}
.finder-top .lbl {
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--brand-green);
}
.seg {
  display: inline-flex;
  background: var(--brand-cream);
  border: 1px solid var(--card-line);
  border-radius: 999px;
  padding: 4px;
  gap: 4px;
}
.seg button {
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink-soft);
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.seg button[aria-pressed="true"] { background: var(--brand-brown); color: #fff; }
.seg button:hover:not([aria-pressed="true"]) { color: var(--brand-brown); }

.fsteps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.fstep {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px dashed rgba(196, 122, 42, 0.25);
}
.fstep:last-of-type { border-bottom: 0; }
.fstep[hidden] { display: none; }
.fstep .num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--brand-amber), var(--brand-gold));
  box-shadow: var(--shadow-sm);
}
.fstep.done .num { background: linear-gradient(135deg, var(--brand-leaf), var(--brand-deep-green)); }
.fstep h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.15rem;
  color: var(--brand-brown);
  margin-bottom: 4px;
}
.fstep .hint { font-size: 0.86rem; color: var(--ink-soft); margin-bottom: 12px; }
.fchoices { display: flex; flex-wrap: wrap; gap: 10px; }
.fchoices button {
  font: inherit;
  cursor: pointer;
  border: 1px solid var(--card-line);
  background: #fff;
  color: var(--brand-brown);
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 0.9rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.fchoices button:hover { border-color: var(--brand-amber); background: var(--brand-cream); }
.fchoices button[aria-pressed="true"] { border-color: var(--brand-brown); background: var(--brand-brown); color: #fff; }
.fchoices button .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--band, var(--brand-amber)); flex: none; }
.fchoices button[aria-pressed="true"] .dot { outline: 2px solid #fff; }
.fchoices button small { font-weight: 400; opacity: 0.75; font-size: 0.78rem; }
/* Type tiles: image + label */
.fchoices.tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.fchoices.tiles button {
  display: grid;
  grid-template-rows: 120px auto auto;
  gap: 6px;
  padding: 10px 10px 12px;
  border-radius: var(--radius);
  text-align: center;
  justify-items: center;
}
.fchoices.tiles button .tile { display: block; width: 100%; height: 120px; border-radius: var(--radius-sm); }
.fchoices.tiles button .tile img { padding: 6px; }
.fchoices.tiles button b { font-family: 'Playfair Display', serif; font-size: 1rem; font-weight: 700; }
.fchoices.tiles button small { display: block; font-size: 0.72rem; letter-spacing: 0.3px; }
.fchoices.tiles button[aria-pressed="true"] { background: var(--brand-cream); color: var(--brand-brown); border-color: var(--brand-brown); box-shadow: inset 0 0 0 2px var(--brand-brown); }

/* Result */
.fresult {
  margin-top: 8px;
  display: grid;
  grid-template-columns: minmax(200px, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(16px, 3vw, 32px);
  align-items: center;
  padding: clamp(16px, 2.5vw, 28px);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #fff, var(--brand-cream));
  border: 1px solid rgba(196, 122, 42, 0.3);
}
.fresult[hidden] { display: none; }
.fresult .tile { height: 260px; border-radius: var(--radius); border: 1px solid var(--card-line); }
.fresult .kicker { font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase; font-weight: 700; color: var(--brand-green); }
.fresult h3 { font-family: 'Playfair Display', serif; font-size: clamp(1.4rem, 2.6vw, 1.9rem); color: var(--brand-brown); line-height: 1.15; margin: 6px 0 8px; }
.fresult p.use { color: var(--ink-soft); font-size: 0.95rem; margin-bottom: 10px; }
.fresult .meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.fresult .meta span { font-size: 0.8rem; background: #fff; border: 1px solid var(--card-line); border-radius: 999px; padding: 4px 11px; color: var(--brand-brown); }
.fresult .meta span.sku { font-family: ui-monospace, Consolas, monospace; font-size: 0.74rem; color: var(--ink-soft); }
.fresult .actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; align-items: center; }
.fresult .actions .reset { background: none; border: 0; font: inherit; font-size: 0.86rem; color: var(--ink-soft); text-decoration: underline; cursor: pointer; padding: 6px; }
.fresult .note { font-size: 0.82rem; color: var(--ink-soft); margin-top: 10px; }
.finder-foot { display: flex; flex-wrap: wrap; gap: 10px 20px; justify-content: space-between; margin-top: 18px; font-size: 0.88rem; color: var(--ink-soft); }
.finder-foot a { color: var(--brand-amber); font-weight: 600; text-decoration: none; }

details.packlist > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  background: #fff;
  border: 1px solid var(--card-line);
  border-radius: var(--radius);
  font-weight: 600;
  color: var(--brand-brown);
}
details.packlist > summary::-webkit-details-marker { display: none; }
details.packlist > summary::after { content: "+"; font-size: 1.4rem; color: var(--brand-amber); }
details.packlist[open] > summary::after { content: "\2212"; }
details.packlist[open] > summary { border-radius: var(--radius) var(--radius) 0 0; }
details.packlist .sku-wrap { border-radius: 0 0 var(--radius) var(--radius); border-top: 0; }

@media (max-width: 900px) {
  .fchoices.tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .fstep { grid-template-columns: 1fr; gap: 8px; }
  .fstep .num { width: 30px; height: 30px; font-size: 0.9rem; }
  .fchoices.tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fchoices.tiles button { grid-template-rows: 100px auto auto; }
  .fchoices.tiles button .tile { height: 100px; }
  .fresult { grid-template-columns: 1fr; }
  .fresult .tile { height: 220px; }
}
@media (prefers-reduced-motion: reduce) { .fchoices button, .seg button { transition: none; } }

/* Brand line in hero + footer */
.brand-line {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--brand-green);
}
.brand-line::before { content: ""; width: 26px; height: 2px; background: var(--brand-amber); }
footer.site .tag-line { font-family: 'Playfair Display', serif; font-style: italic; color: var(--brand-brown); font-size: 1rem; margin: 6px 0 10px; }

/* Partners page */
.partner-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.partner-card { background: #fff; border: 1px solid var(--card-line); border-radius: var(--radius-lg); padding: 22px; box-shadow: var(--shadow-sm); }
.partner-card h3 { font-family: 'Playfair Display', serif; color: var(--brand-brown); font-size: 1.2rem; margin-bottom: 6px; }
.partner-card p { color: var(--ink-soft); font-size: 0.92rem; }
.downloads { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.dl {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 16px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--card-line);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  text-decoration: none;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.dl:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--brand-amber); }
.dl .ic { width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; background: var(--brand-cream); color: var(--brand-brown); border: 1px solid var(--card-line); }
.dl .ic svg { width: 26px; height: 26px; }
.dl b { display: block; font-family: 'Playfair Display', serif; color: var(--brand-brown); font-size: 1.08rem; }
.dl span { font-size: 0.84rem; color: var(--ink-soft); }
.dl .pill { display: block; margin-top: 6px; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700; color: var(--brand-green); }

/* Pre-book: ordering-for segmented radio */
.seg .segopt { display: inline-block; font-size: 0.86rem; font-weight: 600; color: var(--ink-soft); padding: 8px 16px; border-radius: 999px; transition: background 0.2s ease, color 0.2s ease; }
.seg input:checked + .segopt { background: var(--brand-brown); color: #fff; }
.seg input:focus-visible + .segopt { outline: 3px solid var(--brand-amber); outline-offset: 2px; }

/* Page hero (was inline on several pages; global so new pages get it) */
.page-hero { padding: 60px 32px 30px; text-align: center; max-width: 880px; margin: 0 auto; position: relative; z-index: 2; }
.page-hero h1 { font-family: 'Playfair Display', serif; font-weight: 900; font-size: clamp(2.4rem, 5vw, 3.8rem); color: var(--brand-brown); line-height: 1.1; margin-bottom: 14px; }
.page-hero p { color: var(--ink-soft); line-height: 1.7; font-size: 1.05rem; max-width: 640px; margin: 0 auto; }

/* nav density: seven links must fit on one line down to ~1000px */
nav.primary a, .nav-cta { white-space: nowrap; }
@media (min-width: 901px) and (max-width: 1400px) {
  nav.primary { gap: 2px; }
  nav.primary a { padding: 8px 10px; font-size: 0.86rem; letter-spacing: 0.2px; }
  header.site { padding-left: 20px; padding-right: 20px; }
}

/* ============================================================
   HOMEPAGE FLAVOUR CAROUSEL
   ============================================================ */
.feature-carousel {
  position: relative;
  background: #fff;
  border: 1px solid rgba(196, 122, 42, 0.28);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom: 22px;
  overflow: hidden;
}
.fc-slide {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 24px;
  align-items: center;
  padding: 16px 24px 16px 16px;
  text-decoration: none;
  color: var(--ink);
  min-height: 210px;
}
.fc-slide[hidden] { display: none; }
.fc-slide .tile { height: 180px; border-radius: var(--radius); border: 1px solid var(--card-line); }
.fc-slide .tile img { padding: 10px; }
.fc-slide h3 { font-family: 'Playfair Display', serif; font-size: 1.45rem; color: var(--brand-brown); margin: 6px 0 2px; }
.fc-slide .fc-spice { display: block; font-size: 0.74rem; letter-spacing: 2px; text-transform: uppercase; color: var(--brand-green); font-weight: 600; margin-bottom: 6px; }
.fc-slide p { color: var(--ink-soft); font-size: 0.94rem; margin: 0; }
.fc-slide .sizes { display: block; margin-top: 10px; font-size: 0.78rem; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-soft); }
.fc-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 8px 16px 14px;
  border-top: 1px solid var(--card-line);
  background: var(--brand-cream);
}
.fc-nav button { font: inherit; cursor: pointer; }
.fc-prev, .fc-next {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--card-line); background: #fff; color: var(--brand-brown);
  display: grid; place-items: center; font-size: 1rem;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.fc-prev:hover, .fc-next:hover { border-color: var(--brand-amber); background: #fff8eb; }
.fc-dots { display: flex; gap: 8px; }
.fc-dots button { width: 10px; height: 10px; padding: 0; border-radius: 50%; border: 1px solid var(--brand-amber); background: transparent; position: relative; }
.fc-dots button::before { content: ""; position: absolute; inset: -10px; }
.fc-dots button[aria-selected="true"] { background: var(--brand-amber); }
@media (max-width: 640px) {
  .fc-slide { grid-template-columns: 1fr; gap: 12px; padding: 14px; text-align: center; }
  .fc-slide .tile { height: 200px; }
}
@media (prefers-reduced-motion: reduce) { .fc-prev, .fc-next { transition: none; } }

/* ============================================================
   PRE-BOOK: product picker with images + ordering-for control
   ============================================================ */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.picker { position: relative; }
.picker-btn {
  width: 100%;
  display: grid;
  grid-template-columns: 56px 1fr 20px;
  gap: 12px;
  align-items: center;
  text-align: left;
  font: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid rgba(196, 122, 42, 0.35);
  border-radius: var(--radius-sm);
  padding: 8px 12px 8px 8px;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.picker-btn:hover, .picker-btn[aria-expanded="true"] { border-color: var(--brand-amber); box-shadow: 0 0 0 3px rgba(227, 168, 87, 0.25); }
.picker-btn .tile, .picker-opt .tile { display: block; width: 56px; height: 56px; border-radius: 10px; border: 1px solid var(--card-line); background: #fff8eb; }
.picker-btn .tile img, .picker-opt .tile img { padding: 4px; }
.picker-btn .tile.empty { background: repeating-linear-gradient(45deg, #fff8eb, #fff8eb 6px, #fdf1dd 6px, #fdf1dd 12px); }
.picker-btn .t.placeholder { color: var(--ink-soft); }
.picker-btn .chev { width: 10px; height: 10px; border-right: 2px solid var(--brand-brown); border-bottom: 2px solid var(--brand-brown); transform: rotate(45deg); justify-self: center; margin-top: -4px; }
.picker-btn[aria-expanded="true"] .chev { transform: rotate(-135deg); margin-top: 4px; }
.picker-list {
  position: absolute;
  z-index: 40;
  left: 0; right: 0;
  top: calc(100% + 6px);
  max-height: 380px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid rgba(196, 122, 42, 0.35);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  padding: 6px;
}
.picker-list[hidden] { display: none; }
.picker-group-label {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--brand-green);
  padding: 10px 10px 4px;
  position: sticky;
  top: 0;
  background: #fff;
}
.picker-opt {
  width: 100%;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 12px;
  align-items: center;
  text-align: left;
  font: inherit;
  font-size: 0.9rem;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-radius: 10px;
  padding: 6px 8px;
  cursor: pointer;
}
.picker-opt:hover, .picker-opt:focus-visible { background: var(--brand-cream); outline: none; }
.picker-opt[aria-selected="true"] { background: rgba(136, 168, 68, 0.16); }
.picker-opt[aria-selected="true"] .t::after { content: " \2713"; color: var(--brand-green); font-weight: 700; }

.seg label { all: unset; display: inline-flex; cursor: pointer; }
.seg .segopt { text-transform: none; letter-spacing: 0; white-space: nowrap; font-size: 0.86rem; }
.field .seg { margin-top: 2px; }