/*
Theme Name: Health Culture Theme
Theme URI: https://healthculture.in/
Author: Health Culture
Author URI: https://healthculture.in/
Description: Premium 100% Whole Wheat Artisan Bakery WordPress Theme with GSAP animations, canvas frame sequence, interactive timeline, and built-in client-side e-commerce store.
Version: 1.1.2
Text Domain: health-culture-theme
*/

/* ═══════════════════════════════════════════════
HEALTH CULTURE — PREMIUM WHEAT BAKERY
Design System & Global Styles
═══════════════════════════════════════════════ */

    /* ─── DESIGN TOKENS ─── */
    :root {
      --clr-wheat-beige: #F5EDD6;
      --clr-flour-white: #FBF7EE;
      --clr-terracotta: #C1613A;
      --clr-wholegrain: #2C1F0E;
      --clr-grain-mid: #5C3D1E;
      --clr-olive: #6B7C3A;
      --clr-olive-dark: #4D5A27;
      --clr-mustard: #C8922A;
      --clr-mustard-light: #E4B96A;
      --clr-cream: #F0E6C8;
      --clr-parchment: #EDE0C0;
      --font-serif: 'Playfair Display', 'Georgia', serif;
      --font-display: 'Cormorant Garamond', 'Georgia', serif;
      --font-sans: 'DM Sans', system-ui, sans-serif;
      --space-xs: 0.5rem;
      --space-sm: 1rem;
      --space-md: 2rem;
      --space-lg: 4rem;
      --space-xl: 6rem;
      --space-xxl: 10rem;
      --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
      --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
      --transition-slow: 0.8s var(--ease-out-expo);
      --transition-med: 0.5s var(--ease-out-expo);
      --transition-fast: 0.3s var(--ease-in-out);
    }

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

    html {
      /* NOTE: no `scroll-behavior: smooth` here on purpose — it fights
         GSAP ScrollTrigger's own scroll-driven animations (the browser
         tries to animate scroll position itself while GSAP is also
         driving it every frame), which is a big part of what made the
         Slice Reveal section jitter/flicker/disappear. Anchor-link smooth
         scrolling is already handled by this site's own JS (see the
         RAF-based smooth-scroll handler for `a[href^="#"]` in index.php),
         so nothing is lost by removing this. */
      font-size: 16px;
    }

    body {
      font-family: var(--font-sans);
      background-color: var(--clr-flour-white);
      color: var(--clr-wholegrain);
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
    }

    /* iOS Safari: removes the gray tap-flash on every button/link and the
       ~300ms delay before a tap registers (also stops accidental double-tap
       zoom on fast repeated taps on small buttons like qty steppers). */
    a,
    button {
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
    }

    img {
      display: block;
      max-width: 100%;
      height: auto;
    }

    a {
      text-decoration: none;
      color: inherit;
    }

    ul {
      list-style: none;
    }

    /* ─── BUTTONS ─── */
    .btn-primary {
      display: inline-flex;
      align-items: center;
      gap: 0.6rem;
      background: var(--clr-olive);
      color: var(--clr-flour-white);
      font-family: var(--font-sans);
      font-weight: 700;
      font-size: 0.95rem;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      padding: 1.05rem 2.4rem;
      border-radius: 50px;
      border: 2px solid var(--clr-olive);
      cursor: pointer;
      transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
      position: relative;
      overflow: hidden;
      box-shadow: 0 8px 24px rgba(107, 124, 58, 0.4);
      animation: heroCtaPulse 2.6s ease-in-out infinite;
    }

    @keyframes heroCtaPulse {

      0%,
      100% {
        box-shadow: 0 8px 24px rgba(107, 124, 58, 0.4);
      }

      50% {
        box-shadow: 0 8px 32px rgba(107, 124, 58, 0.65), 0 0 0 6px rgba(107, 124, 58, 0.12);
      }
    }

    .btn-primary::before {
      content: '';
      position: absolute;
      inset: 0;
      background: var(--clr-olive-dark);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform var(--transition-fast);
      z-index: 0;
    }

    .btn-primary:hover::before {
      transform: scaleX(1);
    }

    .btn-primary:hover {
      transform: translateY(-3px) scale(1.02);
      animation-play-state: paused;
      box-shadow: 0 14px 32px rgba(107, 124, 58, 0.55);
    }

    .btn-primary span,
    .btn-primary {
      position: relative;
      z-index: 1;
    }

    .btn-ghost {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      background: transparent;
      color: var(--clr-flour-white);
      font-family: var(--font-sans);
      font-weight: 400;
      font-size: 0.875rem;
      letter-spacing: 0.05em;
      padding: 0.85rem 2rem;
      border: 1.5px solid rgba(255, 255, 255, 0.5);
      border-radius: 2px;
      cursor: pointer;
      transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
    }

    .btn-ghost:hover {
      border-color: rgba(255, 255, 255, 0.9);
      background: rgba(255, 255, 255, 0.08);
      transform: translateY(-2px);
    }

    /* Trust badges under the hero CTAs — quick, scannable proof points
       right where the buying decision starts, so the visitor doesn't have
       to scroll to feel reassured before clicking. */
    .hero__trust-badges {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 0.6rem 1rem;
      margin-top: 1.75rem;
      opacity: 0;
      transform: translateY(20px);
    }

    .hero__trust-badges.animated {
      opacity: 1;
      transform: translateY(0);
      transition: opacity 0.8s ease 0.9s, transform 0.8s ease 0.9s;
    }

    .hero__trust-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      font-family: var(--font-sans);
      font-size: 0.78rem;
      font-weight: 600;
      letter-spacing: 0.02em;
      color: rgba(255, 255, 255, 0.92);
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.25);
      backdrop-filter: blur(6px);
      padding: 0.45rem 0.9rem;
      border-radius: 50px;
    }

    .btn-large {
      font-size: 1rem;
      padding: 1.1rem 2.5rem;
    }

    /* ═══════════════════════════════════════════════
NAVIGATION
═══════════════════════════════════════════════ */
    .nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1000;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0.5rem 3rem;
      /* env() resolves to 0 on non-notch devices, so this is a no-op
         everywhere except iPhones with a Dynamic Island/notch, where it
         keeps the logo/icons clear of it. */
      padding-top: calc(0.5rem + env(safe-area-inset-top));
      transition: background var(--transition-med), padding var(--transition-med), backdrop-filter var(--transition-med);
    }

    .nav.scrolled {
      background: rgba(44, 31, 14, 0.92);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      padding: 0.3rem 4rem;
      padding-top: calc(0.3rem + env(safe-area-inset-top));
      box-shadow: 0 2px 24px rgba(0, 0, 0, 0.2);
    }

    .nav__logo {
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }

    .nav__logo-img {
      height: 100px;
      width: auto;
      object-fit: contain;
      display: block;
      transition: transform var(--transition-fast);
    }

    .nav__logo-img:hover {
      transform: scale(1.04);
    }

    .nav__links {
      display: flex;
      align-items: center;
      gap: 2.5rem;
    }

    .nav__links a {
      font-family: var(--font-sans);
      font-size: 0.95rem;
      font-weight: 500;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.8);
      transition: color var(--transition-fast);
      position: relative;
    }

    .nav__links a::after {
      content: '';
      position: absolute;
      bottom: -4px;
      left: 0;
      width: 0;
      height: 1px;
      background: var(--clr-mustard);
      transition: width var(--transition-fast);
    }

    .nav__links a:hover {
      color: var(--clr-mustard-light);
    }

    .nav__links a:hover::after {
      width: 100%;
    }

    .nav__cta {
      font-size: 0.88rem !important;
      padding: 0.7rem 1.8rem !important;
    }

    .nav__hamburger {
      display: none;
      flex-direction: column;
      gap: 5px;
      cursor: pointer;
      background: none;
      border: none;
      padding: 0.5rem;
    }

    .nav__hamburger span {
      display: block;
      width: 24px;
      height: 2px;
      background: var(--clr-flour-white);
      transition: transform var(--transition-fast), opacity var(--transition-fast);
      border-radius: 2px;
    }

    /* ═══════════════════════════════════════════════
HERO SECTION
═══════════════════════════════════════════════ */
    .hero {
      position: relative;
      height: 100vh;
      min-height: 700px;
      display: flex;
      align-items: center;
      overflow: hidden;
    }

    .hero__bg {
      position: absolute;
      inset: 0;
      z-index: 0;
    }

    .hero__bg-img {
      width: 100%;
      height: 120%;
      object-fit: cover;
      object-position: center;
      transform: translateY(0);
      will-change: transform;
    }

    .hero__overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(105deg, rgba(44, 31, 14, 0.82) 0%, rgba(44, 31, 14, 0.55) 50%, rgba(44, 31, 14, 0.2) 100%);
    }

    .hero__content {
      position: relative;
      z-index: 2;
      padding: 0 4rem;
      max-width: 700px;
    }

    .hero__eyebrow {
      font-family: var(--font-sans);
      font-size: 0.75rem;
      font-weight: 500;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      color: var(--clr-mustard);
      margin-bottom: 1.5rem;
      opacity: 0;
      transform: translateY(20px);
    }

    .hero__eyebrow.animated {
      opacity: 1;
      transform: translateY(0);
      transition: opacity 0.8s ease, transform 0.8s ease;
    }

    .hero__headline {
      font-family: var(--font-serif);
      font-size: clamp(3.5rem, 8vw, 7rem);
      font-weight: 900;
      line-height: 1.0;
      color: var(--clr-flour-white);
      margin-bottom: 1.5rem;
      overflow: hidden;
    }

    .split-word {
      display: inline-block;
      opacity: 0;
      transform: translateY(100px) rotateX(-30deg);
      transform-origin: bottom;
    }

    .split-word.animated {
      opacity: 1;
      transform: translateY(0) rotateX(0);
      transition: opacity 0.9s var(--ease-out-expo), transform 0.9s var(--ease-out-expo);
    }

    .hero__headline--accent {
      color: var(--clr-mustard);
      font-style: italic;
    }

    .hero__sub {
      font-family: var(--font-sans);
      font-size: 1.05rem;
      font-weight: 300;
      line-height: 1.7;
      color: rgba(255, 255, 255, 0.85);
      margin-bottom: 2.5rem;
      opacity: 0;
      transform: translateY(20px);
    }

    .hero__sub.animated {
      opacity: 1;
      transform: translateY(0);
      transition: opacity 0.8s ease 0.5s, transform 0.8s ease 0.5s;
    }

    .hero__actions {
      display: flex;
      align-items: center;
      gap: 1.5rem;
      flex-wrap: wrap;
      opacity: 0;
      transform: translateY(20px);
    }

    .hero__actions.animated {
      opacity: 1;
      transform: translateY(0);
      transition: opacity 0.8s ease 0.7s, transform 0.8s ease 0.7s;
    }

    .hero__product-float {
      position: absolute;
      right: 8%;
      top: auto;
      bottom: 6%;
      z-index: 2;
      width: clamp(320px, 30vw, 440px);
      height: fit-content;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    @keyframes floatProduct {

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

      50% {
        transform: translateY(-20px) rotate(1.5deg);
      }
    }

    .hero__floating-img {
      width: 100%;
      border-radius: 32px;
      border: 1px solid rgba(255, 255, 255, 0.2);
      box-shadow: 0 30px 70px rgba(44, 31, 14, 0.35), 0 10px 30px rgba(44, 31, 14, 0.15);
      filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.35));
      animation: floatProduct 4s ease-in-out infinite;
    }

    .hero__float-glow {
      position: absolute;
      bottom: -25px;
      left: 10%;
      right: 10%;
      height: 40px;
      background: radial-gradient(ellipse, rgba(200, 146, 42, 0.25), transparent 70%);
      filter: blur(15px);
    }

    .hero__scroll-indicator {
      position: absolute;
      bottom: 2.5rem;
      left: 4rem;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.75rem;
      opacity: 0;
      animation: fadeInScroll 1s ease 2s forwards;
    }

    @keyframes fadeInScroll {
      to {
        opacity: 1;
      }
    }

    .hero__scroll-text {
      font-family: var(--font-sans);
      font-size: 0.7rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.5);
      writing-mode: vertical-rl;
    }

    .hero__scroll-line {
      width: 1px;
      height: 60px;
      background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), transparent);
      animation: scrollPulse 2s ease-in-out infinite;
    }

    @keyframes scrollPulse {
      0% {
        transform: scaleY(0);
        transform-origin: top;
      }

      50% {
        transform: scaleY(1);
        transform-origin: top;
      }

      51% {
        transform: scaleY(1);
        transform-origin: bottom;
      }

      100% {
        transform: scaleY(0);
        transform-origin: bottom;
      }
    }

    /* ═══════════════════════════════════════════════
PHILOSOPHY / PROMISE SECTION — DEPTH FADE RAIL (ARC CUT)
═══════════════════════════════════════════════ */
    .philosophy {
      background: radial-gradient(circle at center, #F5AE52 0%, #DE8A27 100%);
      padding: var(--space-xl) 0;
      color: var(--clr-wholegrain);
      position: relative;
      overflow: hidden;
    }

    .promise__container {
      max-width: 1400px;
      margin: 0 auto;
      padding: 0 2rem;
      position: relative;
    }

    .promise__header {
      text-align: center;
      margin-bottom: 3.5rem;
    }

    .promise__label {
      font-family: var(--font-sans);
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      color: var(--clr-wholegrain);
      margin-bottom: 0.75rem;
      opacity: 0.85;
    }

    .promise__title {
      font-family: var(--font-serif);
      font-size: clamp(2.5rem, 5vw, 4.2rem);
      font-weight: 900;
      color: var(--clr-wholegrain);
      line-height: 1.1;
      letter-spacing: -0.02em;
    }

    /* Stage: 3D perspective container for the arc carousel */
    .promise-stage {
      position: relative;
      max-width: 1100px;
      margin: 0 auto;
      height: 560px;
      perspective: 1800px;
      outline: none;
      touch-action: pan-y;
    }

    .promise-rail {
      position: relative;
      width: 100%;
      height: 100%;
      transform-style: preserve-3d;
      cursor: grab;
      touch-action: pan-y;
    }

    .promise-rail.dragging {
      cursor: grabbing;
    }

    /* Cards positioned absolutely, arranged along the arc by JS */
    .promise-card {
      position: absolute;
      top: 50%;
      left: 50%;
      width: clamp(280px, 42vw, 440px);
      height: 480px;
      border-radius: 24px;
      overflow: hidden;
      background: var(--clr-wholegrain);
      box-shadow: 0 30px 60px -20px rgba(44, 31, 14, 0.45);
      transition: none;
      user-select: none;
      will-change: transform, opacity;
    }

    .promise-card__img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: brightness(0.7) contrast(1.05) saturate(0.9);
      pointer-events: none;
      -webkit-user-drag: none;
    }

    .promise-card::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(44, 31, 14, 0.95) 0%, rgba(44, 31, 14, 0.35) 55%, transparent 100%);
    }

    .promise-card::before {
      content: '';
      position: absolute;
      inset: 0;
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: 24px;
      z-index: 3;
    }

    .promise-card__overlay {
      position: absolute;
      left: 26px;
      right: 26px;
      bottom: 26px;
      z-index: 2;
      color: var(--clr-flour-white);
      pointer-events: none;
      /* No CSS transition here on purpose — the carousel JS already sets
         this opacity every animation frame during drag/swipe (a smooth,
         per-frame calculation). A CSS transition on top of that made the
         opacity change lag behind the JS's own timing, which is what let
         neighbor-card text stay visible longer than intended mid-swipe. */
    }

    .promise-card__num {
      font-family: var(--font-serif);
      font-size: 0.85rem;
      font-weight: 700;
      letter-spacing: 0.05em;
      color: var(--clr-mustard-light);
      display: block;
      margin-bottom: 6px;
    }

    .promise-card__title {
      font-family: var(--font-serif);
      font-size: clamp(1.3rem, 2.2vw, 1.6rem);
      font-weight: 700;
      color: var(--clr-flour-white);
      line-height: 1.2;
      margin: 0 0 8px;
    }

    .promise-card__desc {
      font-family: var(--font-sans);
      font-size: 0.85rem;
      font-weight: 300;
      line-height: 1.6;
      color: rgba(251, 247, 238, 0.8);
      max-width: 28ch;
      margin: 0;
    }

    /* Arrow buttons */
    .promise-carousel__btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 52px;
      height: 52px;
      border-radius: 50%;
      background: var(--clr-flour-white);
      color: var(--clr-wholegrain);
      border: none;
      box-shadow: 0 10px 25px rgba(44, 31, 14, 0.15);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 10;
      transition: transform 0.4s var(--ease-spring), background var(--transition-fast), color var(--transition-fast);
    }

    .promise-carousel__btn:hover {
      background: var(--clr-wholegrain);
      color: var(--clr-flour-white);
      transform: translateY(-50%) scale(1.1);
    }

    .promise-carousel__btn:active {
      transform: translateY(-50%) scale(0.94);
    }

    .promise-carousel__btn--prev {
      left: 0;
    }

    .promise-carousel__btn--next {
      right: 0;
    }

    /* Segmented progress track (story-style) */
    .promise-seg__wrap {
      max-width: 320px;
      margin: 2.5rem auto 0;
      display: flex;
      gap: 8px;
    }

    .promise-seg {
      flex: 1;
      height: 2px;
      background: rgba(44, 31, 14, 0.15);
      border-radius: 2px;
      overflow: hidden;
    }

    .promise-seg__fill {
      height: 100%;
      width: 0%;
      background: var(--clr-wholegrain);
      transition: width 0.85s var(--ease-out-expo);
    }

    .promise-caption {
      text-align: center;
      margin-top: 1rem;
      font-family: var(--font-sans);
      font-size: 0.78rem;
      letter-spacing: 0.04em;
      color: var(--clr-wholegrain);
      opacity: 0.75;
    }

    .promise-caption span {
      color: var(--clr-terracotta);
      font-weight: 600;
    }


    /* ═══════════════════════════════════════════════
PRODUCTS SECTION
═══════════════════════════════════════════════ */
    .products {
      background: var(--clr-flour-white);
      padding: 1.5rem 0 1rem;
      overflow: hidden;
    }

    .products__header {
      text-align: center;
      padding: 0 1.5rem;
      margin-bottom: 1.25rem;
    }

    .products__label {
      font-family: var(--font-sans);
      font-size: 0.68rem;
      font-weight: 500;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      color: var(--clr-olive);
      margin-bottom: 0.25rem;
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.6s ease, transform 0.6s ease;
    }

    .products__label.animated {
      opacity: 1;
      transform: translateY(0);
    }

    .products__title {
      font-family: var(--font-serif);
      font-size: clamp(1.6rem, 2.8vw, 2.5rem);
      font-weight: 700;
      line-height: 1.1;
      color: var(--clr-wholegrain);
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 0.7s ease 0.1s, transform 0.7s ease 0.1s;
    }

    .products__title em {
      font-style: italic;
      color: var(--clr-terracotta);
    }

    .products__title.animated {
      opacity: 1;
      transform: translateY(0);
    }

    .products__track {
      display: flex;
      transition: transform 0.7s var(--ease-out-expo);
      will-change: transform;
    }

    .product-card {
      min-width: 100vw;
      height: clamp(440px, 62vh, 560px);
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      background: #120d07;
    }

    .product-card__bg-layer {
      position: absolute;
      inset: 0;
      z-index: 0;
    }

    .product-card__bg-layer::after {
      content: '';
      position: absolute;
      inset: 0;
      /* Warm golden ember glow radiating from behind the product image area */
      background: radial-gradient(circle at 25% 50%, rgba(200, 146, 42, 0.18) 0%, rgba(18, 13, 7, 0.88) 60%, #120d07 100%);
      z-index: 1;
    }

    .product-card__bg-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: brightness(0.18) saturate(0.5);
    }

    .product-card__content {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: 0.95fr 1.05fr;
      align-items: center;
      gap: 2.5rem;
      padding: 1rem clamp(1.5rem, 4vw, 3.5rem);
      width: 100%;
      max-width: 1250px;
      margin: 0 auto;
    }

    .product-card__img-wrap {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 1.25rem;
      background: radial-gradient(circle at center, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.015) 75%);
      border: 1px solid rgba(200, 146, 42, 0.3);
      border-radius: 20px;
      backdrop-filter: blur(12px);
      box-shadow: 0 20px 45px rgba(0, 0, 0, 0.65), inset 0 0 30px rgba(200, 146, 42, 0.06);
      transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .product-card__img-wrap:hover {
      border-color: rgba(200, 146, 42, 0.6);
      box-shadow: 0 25px 60px rgba(200, 146, 42, 0.22), inset 0 0 40px rgba(200, 146, 42, 0.12);
    }

    .product-card__img {
      width: 100%;
      max-width: 310px;
      max-height: 310px;
      object-fit: contain;
      border-radius: 14px;
      filter: drop-shadow(0 12px 25px rgba(0, 0, 0, 0.8));
      transition: transform 0.6s var(--ease-out-expo), filter 0.6s ease;
      cursor: pointer;
    }

    .product-card__img-wrap:hover .product-card__img {
      transform: scale(1.05) translateY(-5px);
      filter: drop-shadow(0 20px 35px rgba(0, 0, 0, 0.9));
    }

    .product-card__badge {
      position: absolute;
      top: 12px;
      left: 12px;
      z-index: 3;
      padding: 4px 10px;
      border-radius: 20px;
      font-family: var(--font-sans);
      font-size: 0.65rem;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      background: linear-gradient(135deg, #c8922a, #f1c40f);
      color: #120d07;
      box-shadow: 0 4px 12px rgba(200, 146, 42, 0.4);
    }

    .product-card__badge--popular {
      background: linear-gradient(135deg, #e67e22, #f39c12);
      color: #fff;
    }

    .product-card__badge--featured {
      background: linear-gradient(135deg, #27ae60, #2ecc71);
      color: #fff;
    }

    .product-card__weight-tag {
      position: absolute;
      bottom: 12px;
      right: 12px;
      z-index: 3;
      padding: 4px 10px;
      border-radius: 16px;
      font-family: var(--font-sans);
      font-size: 0.7rem;
      font-weight: 700;
      background: rgba(18, 13, 7, 0.85);
      color: #e5c17c;
      border: 1px solid rgba(200, 146, 42, 0.4);
      backdrop-filter: blur(8px);
    }

    .product-card__info {
      color: var(--clr-flour-white);
    }

    .product-card__header-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      margin-bottom: 0.25rem;
    }

    .product-card__number {
      font-family: var(--font-sans);
      font-size: 0.7rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--clr-mustard);
      font-weight: 700;
    }

    .product-card__stock-status {
      font-family: var(--font-sans);
      font-size: 0.68rem;
      font-weight: 600;
      color: #4cd137;
      background: rgba(76, 209, 55, 0.1);
      padding: 2px 8px;
      border-radius: 10px;
      border: 1px solid rgba(76, 209, 55, 0.25);
    }

    .product-card__name {
      font-family: var(--font-serif);
      font-size: clamp(1.8rem, 3.2vw, 2.8rem);
      font-weight: 800;
      line-height: 1.05;
      color: var(--clr-flour-white);
      margin-bottom: 0.25rem;
    }

    .product-card__tagline {
      font-family: var(--font-serif);
      font-size: 1.05rem;
      font-style: italic;
      font-weight: 600;
      color: var(--clr-mustard-light);
      margin-bottom: 0.5rem;
    }

    .product-card__rating {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin-bottom: 0.6rem;
    }

    .product-card__stars {
      color: #f1c40f;
      letter-spacing: 1px;
      font-size: 0.85rem;
    }

    .product-card__rating-text {
      font-family: var(--font-sans);
      font-size: 0.75rem;
      color: rgba(255, 255, 255, 0.65);
    }

    .product-card__tags {
      display: flex;
      flex-wrap: wrap;
      gap: 0.35rem;
      margin-bottom: 0.6rem;
    }

    .product-card__tags li {
      font-family: var(--font-sans);
      font-size: 0.65rem;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      padding: 0.3rem 0.75rem;
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(200, 146, 42, 0.25);
      color: var(--clr-mustard-light);
      border-radius: 100px;
      transition: all 0.3s ease;
    }

    .product-card__tags li:hover {
      background: var(--clr-mustard);
      color: var(--clr-wholegrain);
      border-color: var(--clr-mustard);
    }

    .product-card__desc {
      font-family: var(--font-sans);
      font-size: 0.88rem;
      font-weight: 400;
      line-height: 1.45;
      color: rgba(255, 255, 255, 0.75);
      max-width: 480px;
    }

    .product-card__selling-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      margin-top: 0.85rem;
      padding-top: 0.75rem;
      border-top: 1px solid rgba(255, 255, 255, 0.12);
      flex-wrap: wrap;
    }

    .product-card__price-box {
      display: flex;
      flex-direction: column;
    }

    .product-card__price-label {
      font-size: 0.62rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: rgba(255, 255, 255, 0.5);
      font-weight: 600;
    }

    .product-card__price-val {
      display: flex;
      align-items: baseline;
      gap: 3px;
    }

    .product-card__currency {
      font-size: 1rem;
      font-weight: 700;
      color: #c8922a;
    }

    .product-card__amount {
      font-family: var(--font-sans);
      font-size: 1.75rem;
      font-weight: 800;
      color: #ffffff;
      line-height: 1;
    }

    .product-card__mrp {
      font-size: 0.6rem;
      color: rgba(255, 255, 255, 0.4);
      margin-left: 4px;
    }

    .product-card__actions {
      display: flex;
      align-items: center;
      gap: 0.6rem;
    }

    .product-card__btn {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      padding: 0.6rem 1.25rem;
      border-radius: 50px;
      font-family: var(--font-sans);
      font-size: 0.8rem;
      font-weight: 700;
      text-decoration: none;
      transition: all 0.3s ease;
      cursor: pointer;
    }

    .product-card__btn--primary {
      background: linear-gradient(135deg, #c8922a 0%, #a6731a 100%);
      color: #120d07;
      border: none;
      box-shadow: 0 8px 20px rgba(200, 146, 42, 0.35);
    }

    .product-card__btn--primary:hover {
      background: linear-gradient(135deg, #dfa536 0%, #c8922a 100%);
      transform: translateY(-2px);
      box-shadow: 0 12px 25px rgba(200, 146, 42, 0.5);
      color: #120d07;
    }

    .product-card__btn--outline {
      background: transparent;
      color: #e5c17c;
      border: 1px solid rgba(200, 146, 42, 0.4);
    }

    .product-card__btn--outline:hover {
      background: rgba(200, 146, 42, 0.15);
      border-color: #c8922a;
      color: #ffffff;
    }

    @media (max-height: 800px) and (min-width: 769px) {
      .products {
        padding: 0.75rem 0 0.5rem;
      }

      .products__header {
        margin-bottom: 0.75rem;
      }

      .products__title {
        font-size: 1.7rem;
      }

      .product-card {
        height: clamp(380px, 56vh, 480px);
      }

      .product-card__img {
        max-width: 250px;
        max-height: 250px;
      }

      .product-card__name {
        font-size: 2rem;
      }

      .product-card__desc {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }

      .product-card__selling-bar {
        margin-top: 0.5rem;
        padding-top: 0.5rem;
      }
    }

    .products__nav {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 1.5rem;
      padding: 0.75rem 1rem 0.25rem;
    }

    .products__nav-btn {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      border: 1.5px solid var(--clr-grain-mid);
      background: transparent;
      color: var(--clr-wholegrain);
      font-size: 1.1rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
    }

    .products__nav-btn:hover {
      background: var(--clr-olive);
      color: white;
      border-color: var(--clr-olive);
      transform: scale(1.1);
    }

    .products__dots {
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }

    .dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--clr-parchment);
      cursor: pointer;
      transition: width var(--transition-fast), background var(--transition-fast), border-radius var(--transition-fast);
    }

    .dot.active {
      width: 24px;
      border-radius: 3px;
      background: var(--clr-olive);
    }

    /* ═══════════════════════════════════════════════
JOURNEY SECTION
═══════════════════════════════════════════════ */
    .journey-scroll-container {
      position: relative;
      z-index: 1;
      isolation: isolate;
      height: 380vh;
      /* Comfortable scroll length for 5 steps */
      background: var(--clr-wheat-beige);
    }

    .journey {
      position: sticky;
      top: 0;
      height: 100vh; /* fallback for the rare browser with no JS */
      height: calc(var(--vh, 1vh) * 100); /* stable on iOS Safari — same fix as .frame-seq, see main-engine.js */
      display: flex;
      align-items: center;
      padding: 0 clamp(2rem, 8vw, 8rem);
      overflow: hidden;
      background: var(--clr-wheat-beige);
      transition: background 0.6s var(--ease-out-expo);
    }

    /* Ambient grain/flour particles */
    .journey__ambient {
      position: absolute;
      inset: 0;
      pointer-events: none;
      overflow: hidden;
      z-index: 0;
    }

    .journey__ambient span {
      position: absolute;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--clr-mustard-light);
      opacity: 0.35;
      animation: journeyDrift linear infinite;
    }

    @keyframes journeyDrift {
      0% {
        transform: translateY(0) translateX(0);
        opacity: 0;
      }

      10% {
        opacity: 0.35;
      }

      90% {
        opacity: 0.35;
      }

      100% {
        transform: translateY(-90vh) translateX(20px);
        opacity: 0;
      }
    }

    .journey__sticky-layout,
    .journey__left,
    .journey__right {
      position: relative;
      z-index: 1;
    }

    .journey__sticky-layout {
      display: grid;
      grid-template-columns: 1fr 1.2fr;
      gap: 5rem;
      width: 100%;
      max-width: 1250px;
      margin: 0 auto;
      height: 75vh;
      align-items: center;
    }

    .journey__left {
      display: flex;
      flex-direction: column;
      justify-content: center;
      height: 100%;
    }

    .journey__right {
      position: relative;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }

    .journey__header {
      text-align: left;
      margin-bottom: 0;
    }

    .journey__label {
      font-family: var(--font-sans);
      font-size: 0.7rem;
      font-weight: 500;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      color: var(--clr-olive);
      margin-bottom: 1rem;
    }

    .journey__title {
      font-family: var(--font-serif);
      font-size: clamp(2.5rem, 5vw, 4.5rem);
      font-weight: 700;
      color: var(--clr-wholegrain);
      line-height: 1.15;
    }

    .journey__title em {
      font-style: italic;
      color: var(--clr-terracotta);
    }

    /* Timeline styles (Left column) */
    .journey-timeline {
      position: relative;
      margin-top: 3.5rem;
      padding-left: 2rem;
      display: flex;
      flex-direction: column;
      gap: 2.2rem;
    }

    .journey-timeline__line {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 3px;
      background: rgba(44, 31, 14, 0.12);
      border-radius: 4px;
    }

    .journey-timeline__progress {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 0%;
      background: var(--clr-terracotta);
      border-radius: 4px;
      transition: height 0.1s ease;
    }

    .journey-timeline__step {
      position: relative;
      display: flex;
      align-items: center;
      gap: 1.25rem;
      opacity: 0.35;
      transform: translateX(-5px);
      transition: opacity 0.4s ease, transform 0.4s ease;
      cursor: pointer;
    }

    .journey-timeline__step.active {
      opacity: 1;
      transform: translateX(0);
    }

    .journey-timeline__num {
      position: absolute;
      left: -2rem;
      transform: translateX(-50%);
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: var(--clr-wheat-beige);
      border: 2px solid rgba(44, 31, 14, 0.2);
      color: var(--clr-wholegrain);
      font-family: var(--font-sans);
      font-size: 0.75rem;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 2;
      transition: border-color 0.4s ease, background 0.4s ease, color 0.4s ease;
    }

    .journey-timeline__step.active .journey-timeline__num {
      border-color: var(--clr-terracotta);
      background: var(--clr-terracotta);
      color: var(--clr-flour-white);
      animation: journeyNumPulse 0.6s ease-out;
    }

    @keyframes journeyNumPulse {
      0% {
        box-shadow: 0 0 0 0 rgba(193, 97, 58, 0.55);
      }

      10% {
        box-shadow: 0 0 0 14px rgba(193, 97, 58, 0);
      }
    }

    .journey-timeline__name {
      font-family: var(--font-serif);
      font-size: 1.15rem;
      font-weight: 700;
      color: var(--clr-wholegrain);
    }

    /* Deck and Cards stack (Right column) */
    .journey-deck {
      position: relative;
      width: 100%;
      max-width: 560px;
      height: 430px;
    }

    .journey-card {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      transform: translateY(60px) scale(0.95);
      pointer-events: none;
      transition: none;
      will-change: transform, opacity;
    }

    .journey-card__inner {
      width: 100%;
      height: 100%;
      background: var(--clr-flour-white);
      border-radius: 20px;
      padding: 3rem;
      box-shadow: 0 24px 64px -16px rgba(44, 31, 14, 0.15);
      border: 1px solid rgba(44, 31, 14, 0.06);
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      position: relative;
      overflow: hidden;
    }

    .journey-card__inner::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: radial-gradient(var(--clr-parchment) 1px, transparent 0);
      background-size: 24px 24px;
      opacity: 0.15;
      z-index: 0;
    }

    .journey-card__icon-wrap {
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;
      z-index: 1;
      opacity: 0;
      transform: translateY(10px);
      transition: opacity 0.35s var(--ease-out-expo), transform 0.35s var(--ease-out-expo);
    }

    .journey-card.is-active .journey-card__icon-wrap {
      opacity: 1;
      transform: translateY(0);
      transition-delay: 0.02s;
    }

    .journey-card__icon {
      width: 64px;
      height: 64px;
      border-radius: 16px;
      background: var(--clr-wholegrain);
      color: var(--clr-mustard);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 12px 24px -6px rgba(44, 31, 14, 0.25);
    }

    .journey-card.is-active .journey-card__icon {
      animation: journeyIconPop 0.45s var(--ease-out-expo) 0.04s both;
    }

    @keyframes journeyIconPop {
      0% {
        transform: scale(0.6) rotate(-10deg);
      }

      55% {
        transform: scale(1.12) rotate(4deg);
      }

      100% {
        transform: scale(1) rotate(0deg);
      }
    }

    .journey-card__icon svg {
      width: 28px;
      height: 28px;
    }

    .journey-card__badge {
      font-family: var(--font-sans);
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--clr-terracotta);
      background: rgba(193, 97, 58, 0.1);
      padding: 0.45rem 1rem;
      border-radius: 100px;
    }

    .journey-card__content {
      position: relative;
      z-index: 1;
      margin-top: 2.2rem;
    }

    .journey-card__title {
      font-family: var(--font-serif);
      font-size: 2rem;
      font-weight: 700;
      color: var(--clr-wholegrain);
      margin-bottom: 1rem;
      opacity: 0;
      transform: translateY(14px);
      transition: opacity 0.4s var(--ease-out-expo), transform 0.4s var(--ease-out-expo);
    }

    .journey-card.is-active .journey-card__title {
      opacity: 1;
      transform: translateY(0);
      transition-delay: 0.08s;
    }

    .journey-card__desc {
      font-family: var(--font-sans);
      font-size: 1.18rem;
      font-weight: 500;
      line-height: 1.75;
      color: var(--clr-wholegrain);
      opacity: 0;
      transform: translateY(14px);
      transition: opacity 0.4s var(--ease-out-expo), transform 0.4s var(--ease-out-expo);
    }

    .journey-card.is-active .journey-card__desc {
      opacity: 1;
      transform: translateY(0);
      transition-delay: 0.14s;
    }

    /* Responsive adjustments */
    @media (max-width: 991px) {
      .journey-scroll-container {
        height: 340vh;
      }

      .journey {
        padding: 0 1.25rem;
      }

      .journey__sticky-layout {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        gap: 1.25rem;
        height: 88vh; /* fallback */
        height: calc(var(--vh, 1vh) * 88); /* stable on iOS Safari — same fix as .frame-seq */
        padding-top: 5.25rem;
        align-content: flex-start;
      }

      .journey__left {
        justify-content: flex-start;
        height: auto;
      }

      .journey-timeline {
        margin-top: 1rem;
        flex-direction: row;
        justify-content: space-between;
        padding-left: 0;
        gap: 0;
      }

      .journey-timeline__line {
        left: 0;
        right: 0;
        top: 12px;
        bottom: auto;
        height: 3px;
        width: 100%;
      }

      .journey-timeline__progress {
        left: 0;
        top: 0;
        height: 100%;
        width: 0%;
        transition: width 0.1s ease;
      }

      .journey-timeline__num {
        position: static;
        transform: none;
      }

      .journey-timeline__name {
        display: none;
      }

      .journey-timeline__step {
        transform: none;
        flex-direction: column;
        gap: 0.5rem;
        align-items: center;
      }

      .journey__right {
        height: 380px;
      }

      .journey-deck {
        max-width: 100%;
        height: 350px;
      }

      .journey-card__inner {
        padding: 1.5rem;
      }

      .journey-card__title {
        font-size: 1.4rem;
      }

      .journey-card__desc {
        font-size: 0.85rem;
      }
    }

    /* Accessibility */
    @media (prefers-reduced-motion: reduce) {
      .journey__ambient span {
        animation: none;
        opacity: 0;
      }

      .journey-timeline__step.active .journey-timeline__num {
        animation: none;
      }

      .journey-card.is-active .journey-card__icon {
        animation: none;
      }

      .journey-card__icon-wrap,
      .journey-card__title,
      .journey-card__desc {
        transition-duration: 0.01ms !important;
      }
    }


    /* ═══════════════════════════════════════════════
TRUST / WHY WHEAT SECTION
═══════════════════════════════════════════════ */
    .trust {
      background: var(--clr-flour-white);
      padding: var(--space-xl) clamp(2rem, 8vw, 8rem);
    }

    .trust__header {
      text-align: center;
      margin-bottom: 5rem;
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 0.7s ease, transform 0.7s ease;
    }

    .trust__header.animated {
      opacity: 1;
      transform: translateY(0);
    }

    .trust__label {
      font-family: var(--font-sans);
      font-size: 0.7rem;
      font-weight: 500;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      color: var(--clr-olive);
      margin-bottom: 1rem;
    }

    .trust__title {
      font-family: var(--font-serif);
      font-size: clamp(2.5rem, 5vw, 4.5rem);
      font-weight: 700;
      color: var(--clr-wholegrain);
      line-height: 1.15;
    }

    .trust__title em {
      font-style: italic;
      color: var(--clr-terracotta);
    }

    .trust__numbers {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 2rem;
      max-width: 1100px;
      margin: 0 auto 5rem;
    }

    .trust__stat {
      text-align: center;
      padding: 2.5rem 1.5rem;
      border: 1px solid var(--clr-parchment);
      border-radius: 4px;
      background: var(--clr-wheat-beige);
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 0.6s ease, transform 0.6s ease;
      position: relative;
      overflow: hidden;
    }

    .trust__stat::before {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(to right, var(--clr-olive), var(--clr-mustard));
      transform: scaleX(0);
      transition: transform 0.5s ease;
    }

    .trust__stat:hover::before {
      transform: scaleX(1);
    }

    .trust__stat.animated {
      opacity: 1;
      transform: translateY(0);
    }

    .trust__stat-display {
      display: flex;
      align-items: baseline;
      justify-content: center;
      gap: 2px;
      margin-bottom: 0.75rem;
    }

    .trust__count {
      font-family: var(--font-serif);
      font-size: clamp(3rem, 5vw, 4.5rem);
      font-weight: 900;
      color: var(--clr-wholegrain);
      line-height: 1;
    }

    .trust__suffix {
      font-family: var(--font-serif);
      font-size: 1.8rem;
      font-weight: 700;
      color: var(--clr-olive);
    }

    .trust__stat-label {
      font-family: var(--font-serif);
      font-size: 1rem;
      font-weight: 700;
      color: var(--clr-wholegrain);
      margin-bottom: 0.5rem;
    }

    .trust__stat-sub {
      font-family: var(--font-sans);
      font-size: 0.78rem;
      font-weight: 300;
      line-height: 1.5;
      color: var(--clr-grain-mid);
    }

    .trust__comparison {
      max-width: 900px;
      margin: 0 auto;
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 0.7s ease, transform 0.7s ease;
    }

    .trust__comparison.animated {
      opacity: 1;
      transform: translateY(0);
    }

    .trust__comparison-title {
      font-family: var(--font-serif);
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--clr-wholegrain);
      text-align: center;
      margin-bottom: 2rem;
    }

    .trust__table {
      border-radius: 4px;
      overflow: hidden;
      border: 1px solid var(--clr-parchment);
    }

    .trust__table-head,
    .trust__table-row {
      display: grid;
      grid-template-columns: 2fr 1.5fr 1.5fr;
    }

    .trust__table-head {
      background: var(--clr-wholegrain);
    }

    .trust__table-row {
      border-bottom: 1px solid var(--clr-parchment);
      transition: background var(--transition-fast);
    }

    .trust__table-row:hover {
      background: var(--clr-cream);
    }

    .trust__table-row:last-child {
      border-bottom: none;
    }

    .trust__table-cell {
      padding: 1rem 1.5rem;
      font-family: var(--font-sans);
      font-size: 0.875rem;
    }

    .trust__table-head .trust__table-cell {
      font-weight: 600;
      color: var(--clr-flour-white);
      font-size: 0.8rem;
      letter-spacing: 0.05em;
    }

    .trust__table-cell--hc {
      background: rgba(107, 124, 58, 0.3);
      text-align: center;
    }

    .trust__table-cell--other {
      background: rgba(193, 97, 58, 0.15);
      text-align: center;
    }

    .trust__table-cell--label {
      font-weight: 500;
      color: var(--clr-wholegrain);
    }

    .trust__table-cell--good {
      text-align: center;
      color: var(--clr-olive-dark);
      font-weight: 500;
      background: rgba(107, 124, 58, 0.08);
    }

    .trust__table-cell--bad {
      text-align: center;
      color: var(--clr-terracotta);
      font-weight: 400;
      background: rgba(193, 97, 58, 0.04);
    }

    /* ═══════════════════════════════════════════════
FOOTER / CTA
═══════════════════════════════════════════════ */
    .footer {
      position: relative;
      z-index: 10;
      background: var(--clr-wholegrain);
    }

    .footer__cta-section {
      position: relative;
      min-height: 70vh;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    .footer__bg-texture {
      position: absolute;
      inset: 0;
    }

    .footer__bg-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0.25;
    }

    .footer__bg-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to bottom, var(--clr-wholegrain) 0%, transparent 30%, transparent 70%, var(--clr-wholegrain) 100%);
    }

    .footer__cta-content {
      position: relative;
      z-index: 2;
      text-align: center;
      padding: 4rem 2rem;
      opacity: 1;
      transform: translateY(0);
      transition: opacity 0.7s ease, transform 0.7s ease;
    }

    .footer__cta-content.animated {
      opacity: 1;
      transform: translateY(0);
    }

    .footer__cta-eyebrow {
      font-family: var(--font-sans);
      font-size: 0.7rem;
      font-weight: 500;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      color: var(--clr-mustard);
      margin-bottom: 1.5rem;
    }

    .footer__cta-headline {
      font-family: var(--font-serif);
      font-size: clamp(3.5rem, 9vw, 8rem);
      font-weight: 900;
      line-height: 1.0;
      color: var(--clr-flour-white);
      margin-bottom: 1.5rem;
    }

    .split-word-footer {
      display: inline-block;
      opacity: 1;
      transform: translateY(0);
      transition: opacity 0.7s var(--ease-out-expo), transform 0.7s var(--ease-out-expo);
    }

    .split-word-footer.animated {
      opacity: 1;
      transform: translateY(0);
    }

    .footer__cta-accent {
      color: var(--clr-mustard);
      font-style: italic;
    }

    .footer__cta-sub {
      font-family: var(--font-sans);
      font-size: 1rem;
      font-weight: 300;
      color: rgba(255, 255, 255, 0.65);
      margin-bottom: 2.5rem;
    }

    .footer__cta-actions {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 1.2rem;
      flex-wrap: wrap;
    }

    .footer__cta-actions a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.45rem;
      text-decoration: none;
      white-space: normal;
      text-align: center;
      line-height: 1.3;
    }

    @media (max-width: 600px) {
      .footer__cta-actions a {
        width: 100%;
        max-width: 360px;
        padding: 0.9rem 1.4rem;
        font-size: 0.88rem;
      }
    }

    .footer__bottom {
      display: grid;
      grid-template-columns: minmax(240px, 1fr) auto;
      align-items: start;
      gap: 3rem 4rem;
      padding: 3.5rem clamp(2rem, 8vw, 8rem);
      border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .footer__brand {
      display: flex;
      align-items: center;
      gap: 1rem;
      grid-column: 1;
      justify-self: start;
      text-align: left;
    }

    .footer__brand-logo-img {
      height: 60px;
      width: auto;
      object-fit: contain;
      display: block;
    }

    .footer__brand-name {
      font-family: var(--font-sans);
      font-size: 1rem;
      font-weight: 600;
      color: var(--clr-flour-white);
      letter-spacing: 0.05em;
    }

    .footer__brand-tagline {
      font-family: var(--font-sans);
      font-size: 0.75rem;
      font-weight: 300;
      color: rgba(255, 255, 255, 0.5);
      letter-spacing: 0.08em;
    }

    .footer__links {
      display: grid;
      grid-template-columns: repeat(3, minmax(130px, auto));
      align-items: start;
      gap: 2rem 3.5rem;
      grid-column: 2;
      justify-self: end;
    }

    .footer__link-col {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 0.75rem;
      min-width: 0;
    }

    .footer__link-col a {
      overflow-wrap: anywhere;
    }

    @media (max-width: 1100px) {
      .footer__bottom {
        grid-template-columns: 1fr;
      }
      .footer__links {
        grid-column: 1;
        justify-self: start;
        width: 100%;
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }

    .footer__link-col h4 {
      font-family: var(--font-sans);
      font-size: 0.7rem;
      font-weight: 600;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--clr-mustard);
      margin-bottom: 0.25rem;
    }

    .footer__link-col a {
      font-family: var(--font-sans);
      font-size: 0.85rem;
      font-weight: 300;
      color: rgba(255, 255, 255, 0.55);
      transition: color var(--transition-fast);
    }

    .footer__link-col a:hover {
      color: var(--clr-mustard-light);
    }

    .footer__legal {
      padding: 1.5rem clamp(2rem, 8vw, 8rem);
      border-top: 1px solid rgba(255, 255, 255, 0.07);
    }

    .footer__legal p {
      font-family: var(--font-sans);
      font-size: 0.75rem;
      font-weight: 300;
      color: rgba(255, 255, 255, 0.3);
      text-align: center;
    }

    .footer__credit-link {
      color: rgba(255, 255, 255, 0.55);
      text-decoration: underline;
      text-underline-offset: 2px;
      transition: color var(--transition-fast);
    }

    .footer__credit-link:hover {
      color: var(--clr-mustard);
    }

    /* ─── SCROLL ANIMATION UTILITIES ─── */
    .scroll-reveal {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 0.7s ease, transform 0.7s ease;
    }

    .scroll-reveal.animated {
      opacity: 1;
      transform: translateY(0);
    }

    .scroll-stagger {
      opacity: 0;
      transform: translateY(40px);
      transition: opacity 0.6s ease, transform 0.6s ease;
    }

    .scroll-stagger.animated {
      opacity: 1;
      transform: translateY(0);
    }

    /* ─── RESPONSIVE ─── */
    @media (max-width: 1200px) {
      .hero__content {
        max-width: 580px;
      }

      .hero__product-float {
        width: clamp(280px, 30vw, 420px);
        right: 4%;
      }
    }

    @media (max-width: 1024px) {
      .nav {
        padding: 1.25rem 2.5rem;
        padding-top: calc(1.25rem + env(safe-area-inset-top));
      }

      .nav.scrolled {
        padding: 0.85rem 2.5rem;
        padding-top: calc(0.85rem + env(safe-area-inset-top));
      }

      .nav__links {
        gap: 1.75rem;
      }

      .hero__content {
        padding: 0 2.5rem;
        max-width: 480px;
      }

      .hero__product-float {
        width: clamp(240px, 28vw, 350px);
        right: 3%;
      }

      .hero__scroll-indicator {
        left: 2.5rem;
      }

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

    }

    @media (max-width: 768px) {
      .nav {
        padding: 0.35rem 1rem;
        padding-top: calc(0.35rem + env(safe-area-inset-top));
        justify-content: space-between;
      }

      .nav__actions {
        right: auto;
        position: relative;
        gap: 0.5rem;
      }

      .nav.scrolled {
        padding: 0.25rem 1.25rem;
        padding-top: calc(0.25rem + env(safe-area-inset-top));
      }

      .nav__links {
        display: none;
      }

      .nav__cta {
        display: none;
      }

      .nav__hamburger {
        display: flex;
      }

      .nav__logo-img {
        height: clamp(52px, 13vw, 62px);
      }

      .hero {
        height: 100vh;
        height: 100dvh;
        min-height: 100vh;
        min-height: 100dvh;
        max-height: 100dvh;
        padding-top: clamp(4.2rem, 11vh, 5.8rem);
        padding-bottom: clamp(1.5rem, 4vh, 3rem);
        display: flex;
        flex-direction: column;
        justify-content: center;
        overflow: hidden;
      }

      .hero__headline {
        font-size: clamp(2.2rem, 8.5vw, 3.5rem);
        line-height: 1.05;
        margin-bottom: 0.85rem;
      }

      .hero__eyebrow {
        font-size: clamp(0.68rem, 2.8vw, 0.75rem);
        margin-bottom: 0.6rem;
      }

      .hero__sub {
        font-size: clamp(0.85rem, 3.5vw, 0.98rem);
        line-height: 1.5;
        margin-bottom: 1.25rem;
      }

      .hero__actions {
        gap: 0.75rem;
      }

      .btn-primary {
        font-size: 0.82rem;
        padding: 0.9rem 1.8rem;
        width: 100%;
        justify-content: center;
      }

      .btn-ghost {
        font-size: 0.8rem;
        padding: 0.8rem 1.6rem;
        width: 100%;
        justify-content: center;
      }

      .hero__trust-badges {
        gap: 0.5rem;
        margin-top: 1.25rem;
      }

      .hero__trust-badge {
        font-size: 0.68rem;
        padding: 0.38rem 0.7rem;
      }

      .hero__product-float {
        display: none !important;
      }

      .hero__content {
        padding: 0 1.25rem;
      }

      .hero__scroll-indicator {
        left: 1.25rem;
        bottom: clamp(0.5rem, 2vh, 1.25rem);
      }

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

      .philosophy__right {
        height: 300px;
        position: relative;
      }

      .philosophy__image-wrap {
        position: relative;
        height: 300px;
      }

      /* Promise Carousel Section Mobile Adjustments */
      .philosophy {
        /* Section was using the same 6rem top/bottom padding as desktop,
           which — stacked on top of a tall stage — pushed the whole
           section well past one phone screen's height. Tightened for
           mobile so the section reads as "one screenful". */
        padding: 3rem 0;
      }

      .promise__container {
        /* Less side padding gives the stage more width to work with, so
           neighbor cards have room to peek instead of landing almost
           fully off the edge of the visible box. */
        padding: 0 1rem;
      }

      .promise__header {
        margin-bottom: 2rem;
      }

      .promise-stage {
        height: 340px;
        /* Neighbor cards in the 3D arc are meant to peek in slightly, but
           without clipping here their edges (with legible title text)
           spilled almost all the way to the screen edges on narrow
           viewports, showing broken mid-word text like "...Whea" /
           "...o Pres". Clipping to the stage's own box keeps the peek
           effect but hides the illegible overflow. */
        overflow: hidden;
        border-radius: 20px;
      }

      .promise-card {
        /* Narrower card = smaller peek spacing (JS scales spacing off
           card width), so neighbor cards land inside the stage instead
           of almost entirely clipped past its edge. */
        width: 220px;
        height: 320px;
      }

      .promise-card__overlay {
        left: 18px;
        right: 18px;
        bottom: 18px;
      }

      .promise-card__title {
        font-size: 1.25rem;
      }

      .promise-card__desc {
        font-size: 0.78rem;
        line-height: 1.5;
      }

      .promise-carousel__btn {
        width: 40px;
        height: 40px;
      }

      .promise-carousel__btn--prev {
        left: 4px;
      }

      .promise-carousel__btn--next {
        right: 4px;
      }

      .promise-seg__wrap {
        margin-top: 1.5rem;
      }

      /* Products Slider Section Mobile Auto-Height */
      .product-card {
        height: auto;
        padding: 3rem 0;
      }

      .product-card__content {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 2rem 1.25rem;
        gap: 2rem;
      }

      .product-card__img {
        max-width: 280px;
        margin: 0 auto;
        padding: 0;
      }

      .product-card__desc {
        margin: 0 auto;
      }

      .product-card__tags {
        justify-content: center;
      }

      .product-card__header-meta {
        justify-content: center;
      }

      .product-card__rating {
        justify-content: center;
      }

      .product-card__selling-bar {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 1.2rem;
      }

      .product-card__actions {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
      }

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

      /* Comparison Table Mobile Fit */
      .trust__comparison {
        width: 100%;
        overflow-x: hidden;
      }

      .trust__table {
        width: 100%;
        min-width: 0;
        font-size: 0.72rem;
      }

      .trust__table-head,
      .trust__table-row {
        grid-template-columns: 1.15fr 1fr 1fr;
      }

      .trust__table-cell {
        padding: 0.6rem 0.35rem;
        font-size: 0.72rem;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
      }

      .trust__table-cell--label {
        justify-content: flex-start;
        text-align: left;
      }

      .trust__table-head .trust__table-cell {
        font-size: 0.68rem;
        line-height: 1.2;
        padding: 0.6rem 0.25rem;
      }

      .footer__bottom {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 2rem;
      }

      .footer__brand {
        justify-self: unset;
        text-align: center;
      }

      .footer__links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        justify-self: stretch;
        text-align: left;
        gap: 2rem;
      }

      .products {
        padding: 3rem 1.25rem 2rem;
      }

      .products-grid {
        gap: 1.25rem;
      }

    }

    @media (max-width: 480px) {
      .trust__numbers {
        grid-template-columns: 1fr;
      }

      .footer__links {
        grid-template-columns: 1fr;
        gap: 1.5rem;
      }

      .trust__table-cell {
        padding: 0.5rem 0.25rem;
        font-size: 0.68rem;
      }

      .trust__table-head .trust__table-cell {
        font-size: 0.64rem;
        padding: 0.5rem 0.15rem;
      }

      .products {
        padding: 2rem 0.85rem 1.5rem;
      }

      /* Card was stacking to a very long scroll: full-height image +
         a 5-line description + a wrapped tags row + a stepper that
         forced itself onto its own row above Add/Buy Now. The image
         is now a responsive square (see .store-card__img-wrap) and
         the description is clamped to 2 lines globally, so no extra
         image/desc overrides are needed here anymore. */
      .store-card__body {
        padding: 0.9rem 0.85rem;
      }

      .store-card__category {
        margin-bottom: 0.2rem;
      }

      .store-card__title {
        font-size: 1.02rem;
        margin-bottom: 0.25rem;
      }

      .store-card__rating {
        margin-bottom: 0.4rem;
      }

      .store-card__desc {
        margin-bottom: 0.5rem;
      }

      .store-card__tags {
        margin-top: 0.4rem;
      }

      .store-card__footer {
        gap: 0.6rem;
        padding-top: 0.6rem;
        margin-top: 0.75rem;
      }

      .store-card__action-row {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        width: 100%;
        min-width: 0;
      }

      .stepper {
        flex: 0 0 auto;
      }

      .stepper__btn {
        width: 26px;
        height: 34px;
        font-size: 0.85rem;
      }

      .stepper__val {
        width: 24px;
        font-size: 0.85rem;
      }

      .btn-add-cart {
        flex: 1 1 auto;
        min-width: 0;
        padding: 0.6rem 0.5rem;
        font-size: 0.76rem;
        justify-content: center;
        white-space: nowrap;
      }

      .btn-buy-now {
        flex: 1 1 100%;
        padding: 0.65rem 0.5rem;
        font-size: 0.8rem;
        white-space: nowrap;
      }
    }

    /* Extra-narrow phones (iPhone SE, older/small Android — 320-374px).
       The 480px breakpoint above was still using desktop-ish spacing/
       font-sizes that felt cramped or slightly overflowed on these
       smaller screens, so this tightens the store card further and
       shrinks the badge/wishlist controls so nothing crowds the edges. */
    @media (max-width: 380px) {
      .promise-stage {
        height: 300px;
      }

      .promise-card {
        width: 190px;
        height: 280px;
      }

      .promise-card__title {
        font-size: 1.1rem;
      }

      .promise-card__desc {
        font-size: 0.72rem;
      }

      .store-card__body {
        padding: 0.85rem 0.75rem;
      }

      .store-card__title {
        font-size: 1.02rem;
      }

      .store-card__desc {
        font-size: 0.78rem;
      }

      .store-card__badge {
        font-size: 0.58rem;
        padding: 0.2rem 0.5rem;
        top: 10px;
        left: 10px;
      }

      .store-card__wishlist-btn {
        width: 30px;
        height: 30px;
        top: 10px;
        right: 10px;
      }

      .store-card__quickview-btn {
        font-size: 0.68rem;
        padding: 0.35rem 0.85rem;
      }

      .store-card__price {
        font-size: 1.1rem;
      }

      .stepper__btn {
        height: 34px;
        width: 24px;
      }

      .stepper__val {
        width: 20px;
      }

      .store-card__action-row {
        gap: 0.4rem;
      }

      .btn-add-cart {
        flex: 1 1 auto;
        min-width: 0;
        padding: 0.55rem 0.4rem;
        font-size: 0.72rem;
        white-space: nowrap;
      }

      .btn-buy-now {
        flex: 1 1 100%;
        padding: 0.6rem 0.4rem;
        font-size: 0.76rem;
        white-space: nowrap;
      }
    }

    /* ═══════════════════════════════════════════════
    SLICE REVEAL — GSAP SCROLL FRAME SEQUENCE
    (white studio backdrop matching the video, seamless
    cinematic stage with in-scene captions)
    ═══════════════════════════════════════════════ */
    .frame-seq {
      position: relative;
      z-index: 2;
      isolation: isolate;
      background-color: var(--clr-flour-white);
      height: 100vh; /* fallback */
      height: 100dvh; /* modern dynamic viewport height on iOS Safari & Android */
      height: calc(var(--vh, 1vh) * 100); /* stable mobile address bar fallback */
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      background: radial-gradient(ellipse 85% 80% at 50% 48%,
          #f5f7f9 0%,
          #eaeff2 50%,
          #dbe2e6 100%);
    }

    /* the video stage — fully seamless: a wide elliptical feather mask
       fades the video's edges to transparent, so it melts into the section
       background with no visible border at all. GSAP scales this for the
       cinematic dolly zoom as you scroll. */
    .frame-seq__stage {
      position: relative;
      width: min(88vw, 1380px);
      aspect-ratio: 16 / 9;
      will-change: transform;
      -webkit-mask-image: radial-gradient(ellipse 64% 66% at 50% 50%,
          #000 46%,
          transparent 74%);
      mask-image: radial-gradient(ellipse 64% 66% at 50% 50%,
          #000 46%,
          transparent 74%);
    }

    .frame-seq__canvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      display: block;
    }

    .frame-seq__loader {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
      align-items: center;
      justify-content: center;
      background: rgba(246, 248, 250, 0.94);
      z-index: 10;
      transition: opacity 0.45s ease, visibility 0.45s;
    }

    .frame-seq__loader.hidden {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }

    .frame-seq__loader-label {
      font-family: 'DM Sans', sans-serif;
      font-size: 0.82rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--clr-wholegrain);
      font-weight: 700;
    }

    .frame-seq__loader-pct {
      font-family: 'Cormorant Garamond', serif;
      font-size: 2rem;
      font-weight: 700;
      color: #1b300c;
    }

    /* ─── PRODUCT CLAIMS ROW & BANNER ─── */
    .claims-banner {
      background: var(--clr-flour-white);
      border-top: 1px solid rgba(44, 31, 14, 0.08);
      border-bottom: 1px solid rgba(44, 31, 14, 0.08);
      padding: 1.5rem 1rem;
      text-align: center;
      position: relative;
      z-index: 5;
    }

    .claims-banner__content {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 2rem;
      flex-wrap: wrap;
      max-width: 1200px;
      margin: 0 auto;
    }

    .claims-banner__item {
      font-family: var(--font-sans);
      font-size: 0.9rem;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--clr-wholegrain);
      opacity: 0.9;
    }

    .claims-banner__dot {
      color: var(--clr-terracotta);
      font-size: 1.2rem;
      opacity: 0.8;
    }

    .frame-seq__fixed-claims {
      position: absolute;
      top: clamp(80px, 12vh, 105px);
      left: 50%;
      transform: translateX(-50%);
      z-index: 10;
      display: flex;
      align-items: center;
      gap: clamp(0.75rem, 1.4vw, 1.5rem);
      background: rgba(255, 255, 255, 0.78);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      padding: 0.55rem 1.6rem;
      border-radius: 50px;
      border: 1px solid rgba(44, 31, 14, 0.08);
      box-shadow: 0 4px 24px rgba(44, 31, 14, 0.04);
      pointer-events: none;
      white-space: nowrap;
    }

    .frame-seq__fixed-claims-item {
      font-family: var(--font-sans);
      font-size: clamp(0.7rem, 0.85vw, 0.8rem);
      font-weight: 700;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--clr-wholegrain);
    }

    .frame-seq__fixed-claims-dot {
      color: var(--clr-terracotta);
      font-size: 1.1rem;
    }

    /* ── in-scene captions (pure floating text directly on the studio scene — NO BOX) ── */
    .frame-seq__caption {
      position: absolute;
      z-index: 4;
      max-width: min(400px, 30vw);
      opacity: 0;
      /* GSAP reveals each at its scroll stage */
      pointer-events: none;
      background: none !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      border: none !important;
      border-radius: 0 !important;
      box-shadow: none !important;
      padding: 0 !important;
      /* Soft white text-shadow for effortless legibility over any background brightness */
      text-shadow: 0 2px 14px rgba(255, 255, 255, 0.98), 0 0 24px rgba(255, 255, 255, 0.95), 0 0 8px rgba(255, 255, 255, 0.9);
      will-change: transform, opacity;
    }

    .frame-seq__caption--left {
      left: clamp(3%, 5vw, calc(50% - 480px));
      top: 50%;
      transform: translateY(-50%);
    }

    .frame-seq__caption--right {
      right: clamp(3%, 5vw, calc(50% - 480px));
      top: 50%;
      transform: translateY(-50%);
    }

    .frame-seq__caption--bottom {
      left: 50%;
      bottom: clamp(4%, 7vh, 8%);
      transform: translateX(-50%);
      max-width: min(640px, 86vw);
      text-align: center;
    }

    .frame-seq__eyebrow {
      font-family: 'DM Sans', sans-serif;
      font-size: 0.78rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--clr-wholegrain);
      font-weight: 700;
      margin-bottom: 0.7rem;
    }

    .frame-seq__heading {
      font-family: 'Playfair Display', serif;
      font-size: clamp(1.7rem, 2.6vw, 2.5rem);
      font-weight: 900;
      line-height: 1.15;
      color: var(--clr-wholegrain);
      margin: 0 0 0.8rem;
    }

    .frame-seq__heading em {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-weight: 800;
      color: #1b300c;
      /* Deep forest green for high contrast */
    }

    .frame-seq__heading--center {
      font-size: clamp(1.8rem, 3vw, 2.8rem);
      margin: 0;
    }

    .frame-seq__body {
      font-family: 'DM Sans', sans-serif;
      font-size: 0.98rem;
      font-weight: 500;
      line-height: 1.65;
      color: var(--clr-wholegrain);
      margin: 0;
    }

    .frame-seq__stats {
      display: flex;
      gap: 2.5rem;
      margin-top: 1.4rem;
    }

    .frame-seq__stat-label {
      display: block;
      font-family: 'DM Sans', sans-serif;
      font-size: 0.82rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--clr-wholegrain);
      font-weight: 700;
      margin-bottom: 0.25rem;
    }

    .frame-seq__stat-value {
      font-family: 'Cormorant Garamond', serif;
      font-size: 2.2rem;
      font-weight: 800;
      color: #1b300c;
      /* Deep forest green for high contrast */
    }

    /* Tablets & Small Laptops */
    @media (max-width: 1200px) {
      .frame-seq__stage {
        /* Scale stage based on both width and height to prevent vertical scroll overflow */
        width: min(88vw, 1.77 * 46vh);
      }

      .frame-seq__caption {
        max-width: min(320px, 30vw);
      }

      .frame-seq__caption--left {
        left: 4%;
      }

      .frame-seq__caption--right {
        right: 4%;
      }

      .frame-seq__heading {
        font-size: clamp(1.35rem, 2.2vw, 1.9rem);
      }

      .frame-seq__body {
        font-size: 0.88rem;
      }

      .frame-seq__stats {
        gap: 1.5rem;
      }

      .frame-seq__stat-value {
        font-size: 1.75rem;
      }
    }

    /* Medium Tablets & Large Phones */
    @media (max-width: 900px) {
      .frame-seq__stage {
        width: min(90vw, 1.77 * 42vh);
      }
      .frame-seq__caption {
        max-width: min(280px, 32vw);
      }
      .frame-seq__caption--left {
        left: 2.5%;
      }
      .frame-seq__caption--right {
        right: 2.5%;
      }
    }

    /* Mobile (Portrait) — iOS Safari & Android */
    @media (max-width: 768px) {
      .frame-seq {
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
      }

      .frame-seq__stage {
        position: relative;
        width: min(94vw, 540px);
        height: auto;
        aspect-ratio: 16 / 9;
        transform: translateY(-1.5vh);
        pointer-events: none;
        /* Let all swipe touches pass through to page scroll */
        -webkit-mask-image: radial-gradient(ellipse 68% 68% at 50% 50%,
            #000 48%,
            transparent 76%);
        mask-image: radial-gradient(ellipse 68% 68% at 50% 50%,
            #000 48%,
            transparent 76%);
      }

      .frame-seq__caption {
        max-width: calc(100vw - 2rem);
        width: 100%;
        padding: 0 1rem !important;
        box-sizing: border-box;
        left: 0 !important;
        right: 0 !important;
        margin: 0 auto !important;
        text-align: center !important;
        background: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
      }

      /* First text: show ABOVE the bread, below claims pill */
      #frameSeqCap1 {
        position: absolute;
        left: 0;
        right: 0;
        margin: 0 auto;
        top: clamp(88px, 13vh, 120px);
        bottom: auto;
        text-align: center;
        transform: none;
        z-index: 5;
      }

      /* Second and third text: show BELOW the bread */
      #frameSeqCap2,
      #frameSeqCap3 {
        position: absolute;
        left: 0;
        right: 0;
        margin: 0 auto;
        bottom: clamp(1rem, 4vh, 2.5rem);
        top: auto;
        text-align: center;
        transform: none;
        z-index: 5;
      }

      .frame-seq__eyebrow {
        font-size: 0.72rem;
        margin-bottom: 0.35rem;
      }

      .frame-seq__heading {
        font-size: clamp(1.22rem, 4.6vw, 1.7rem);
        margin-bottom: 0.45rem;
        text-align: center;
        width: 100%;
      }

      .frame-seq__heading--center {
        text-align: center;
        width: 100%;
      }

      .frame-seq__body {
        font-size: 0.85rem;
        line-height: 1.5;
      }

      .frame-seq__stats {
        gap: 1.8rem;
        justify-content: center;
        margin-top: 0.6rem;
      }

      .frame-seq__stat-label {
        font-size: 0.72rem;
      }

      .frame-seq__stat-value {
        font-size: 1.7rem;
      }

      .claims-banner {
        padding: 1.25rem 1rem;
      }

      .claims-banner__content {
        gap: 1rem;
      }

      .claims-banner__item {
        font-size: 0.75rem;
        letter-spacing: 0.12em;
      }

      .frame-seq__fixed-claims {
        top: clamp(68px, 8.5vh, 85px);
        z-index: 10;
        max-width: calc(100vw - 1.5rem);
        padding: 0.4rem 0.85rem;
        gap: 0.5rem;
        box-sizing: border-box;
        justify-content: center;
      }

      .frame-seq__fixed-claims-item {
        font-size: 0.62rem;
        letter-spacing: 0.08em;
      }

      .frame-seq__fixed-claims-dot {
        font-size: 0.8rem;
      }
    }

    /* Small/Narrow Phones (iPhone SE, Galaxy Fold 320-375px) */
    @media (max-width: 375px) {
      .frame-seq__fixed-claims {
        padding: 0.3rem 0.6rem;
        gap: 0.35rem;
      }
      .frame-seq__fixed-claims-item {
        font-size: 0.56rem;
      }
      .frame-seq__heading {
        font-size: 1.15rem;
      }
      .frame-seq__body {
        font-size: 0.8rem;
        line-height: 1.4;
      }
      .frame-seq__stat-value {
        font-size: 1.45rem;
      }
      .frame-seq__stats {
        gap: 1.2rem;
      }
    }

    /* Mobile Landscape orientation (iPhone / Android held horizontally) */
    @media (max-height: 520px) and (orientation: landscape) {
      .frame-seq__stage {
        width: min(60vw, 1.77 * 68vh);
        aspect-ratio: 16 / 9;
        transform: none;
      }
      .frame-seq__fixed-claims {
        top: 10px;
        padding: 0.25rem 0.8rem;
      }
      .frame-seq__caption {
        max-width: 28vw;
      }
      #frameSeqCap1,
      .frame-seq__caption--left {
        left: 3% !important;
        top: 50% !important;
        bottom: auto !important;
        transform: translateY(-50%) !important;
        text-align: left !important;
      }
      #frameSeqCap2,
      .frame-seq__caption--right {
        right: 3% !important;
        top: 50% !important;
        bottom: auto !important;
        left: auto !important;
        transform: translateY(-50%) !important;
        text-align: left !important;
      }
      #frameSeqCap3,
      .frame-seq__caption--bottom {
        bottom: 5% !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        text-align: center !important;
      }
      .frame-seq__heading {
        font-size: 1.15rem;
      }
      .frame-seq__body {
        font-size: 0.75rem;
        line-height: 1.35;
      }
      .frame-seq__stat-value {
        font-size: 1.3rem;
      }
      .frame-seq__stats {
        margin-top: 0.4rem;
        gap: 0.8rem;
      }
    }

    /* ═══════════════════════════════════════════════
    PREMIUM PRELOADER — 2s brand intro
    ═══════════════════════════════════════════════ */
    body.hc-lock {
      /* overflow:hidden alone does NOT stop background touch-scroll on iOS
         Safari — WebKit still lets the page rubber-band behind a fixed
         overlay. position:fixed + width:100% is the actual iOS-safe lock;
         main-engine.js sets/restores `top` to the pre-lock scroll offset
         so nothing visually jumps when a drawer/modal opens or closes. */
      overflow: hidden;
      position: fixed;
      width: 100%;
    }

    .preloader {
      position: fixed;
      inset: 0;
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
      background:
        radial-gradient(ellipse 60% 50% at 50% 42%,
          rgba(200, 146, 42, 0.14) 0%,
          transparent 65%),
        linear-gradient(165deg, #241a0d 0%, var(--clr-wholegrain) 55%, #1a1208 100%);
      /* curtain exit: starts at 1.5s, done by ~2.2s */
      animation: hcCurtain 0.7s cubic-bezier(0.83, 0, 0.17, 1) 1.5s forwards;
      will-change: transform;
    }

    @keyframes hcCurtain {
      to {
        transform: translateY(-100%);
      }
    }

    .preloader__inner {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    .preloader__wordmark {
      font-family: var(--font-serif);
      font-size: clamp(1.5rem, 3.2vw, 2.2rem);
      font-weight: 700;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: var(--clr-flour-white);
      white-space: nowrap;
    }

    .preloader__wordmark span {
      display: inline-block;
      opacity: 0;
      transform: translateY(26px);
      animation: hcLetter 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }

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

    .preloader__tagline {
      margin-top: 0.9rem;
      font-family: var(--font-accent, 'Cormorant Garamond', serif);
      font-style: italic;
      font-size: 1.05rem;
      color: var(--clr-mustard-light);
      opacity: 0;
      transform: translateY(14px);
      animation: hcLetter 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.95s forwards;
    }

    .preloader__line {
      margin-top: 1.6rem;
      width: min(220px, 40vw);
      height: 1px;
      background: rgba(240, 230, 200, 0.18);
      overflow: hidden;
    }

    .preloader__line span {
      display: block;
      height: 100%;
      width: 100%;
      background: linear-gradient(90deg, var(--clr-mustard), var(--clr-mustard-light));
      transform: scaleX(0);
      transform-origin: left center;
      animation: hcLine 1.25s cubic-bezier(0.65, 0, 0.35, 1) 0.25s forwards;
    }

    @keyframes hcLine {
      to {
        transform: scaleX(1);
      }
    }

    @media (max-width: 768px) {
      .preloader__wordmark {
        letter-spacing: 0.2em;
      }
    }

    /* ═══════════════════════════════════════════════
    E-COMMERCE DESIGN SYSTEM & STYLES
    ═══════════════════════════════════════════════ */
    /* Top Promo Announcement Banner */
    .top-banner {
      background: linear-gradient(90deg, #2C1F0E 0%, #4D3418 50%, #2C1F0E 100%);
      color: var(--clr-flour-white);
      padding: 0.5rem 1rem;
      font-size: 0.8rem;
      font-weight: 500;
      text-align: center;
      position: relative;
      z-index: 1001;
      border-bottom: 1px solid rgba(200, 146, 42, 0.3);
    }

    .top-banner__content {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 1rem;
      flex-wrap: wrap;
    }

    .top-banner__divider {
      color: var(--clr-mustard);
      opacity: 0.6;
    }

    .code-highlight {
      color: var(--clr-mustard-light);
      background: rgba(200, 146, 42, 0.2);
      padding: 0.1rem 0.4rem;
      border-radius: 3px;
      letter-spacing: 0.05em;
    }

    /* Nav Actions Extensions */
    .nav__actions {
      position: relative;
      right: auto;
      display: flex;
      align-items: center;
      gap: 0.8rem;
    }

    .nav__search-wrap {
      position: relative;
    }

    .nav__icon-btn {
      background: transparent;
      border: 1px solid rgba(255, 255, 255, 0.2);
      color: var(--clr-flour-white);
      width: 42px;
      height: 42px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      position: relative;
      transition: all var(--transition-fast);
    }

    .nav__icon-btn:hover {
      background: rgba(255, 255, 255, 0.15);
      border-color: var(--clr-mustard-light);
      color: var(--clr-mustard-light);
      transform: translateY(-2px);
    }

    .nav__badge {
      position: absolute;
      top: -4px;
      right: -4px;
      background: var(--clr-terracotta);
      color: #fff;
      font-size: 0.7rem;
      font-weight: 700;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 2px solid var(--clr-wholegrain);
      transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    .nav__badge.bump {
      transform: scale(1.3);
    }

    .nav__cart-btn {
      width: auto;
      padding: 0 1rem;
      border-radius: 24px;
      gap: 0.5rem;
    }

    .nav__cart-total {
      font-size: 0.85rem;
      font-weight: 600;
      color: var(--clr-mustard-light);
    }

    /* Search Popover */
    .nav__search-popover {
      position: absolute;
      top: calc(100% + 12px);
      right: 0;
      width: 320px;
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
      padding: 0.75rem;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-10px);
      transition: all 0.3s ease;
      z-index: 1002;
    }

    .nav__search-popover.active {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

    .nav__search-popover input {
      width: 100%;
      padding: 0.7rem 1rem;
      border: 1.5px solid var(--clr-parchment);
      border-radius: 8px;
      font-family: var(--font-sans);
      font-size: 16px; /* iOS zoom-on-focus fix — was 0.9rem (14.4px) */
      outline: none;
    }

    .nav__search-popover input:focus {
      border-color: var(--clr-olive);
    }

    .nav__search-results {
      max-height: 260px;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior-y: contain;
      margin-top: 0.5rem;
    }

    .search-result-item {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      padding: 0.5rem;
      border-radius: 6px;
      cursor: pointer;
      transition: background 0.2s;
    }

    .search-result-item:hover {
      background: var(--clr-wheat-beige);
    }

    .search-result-item img {
      width: 40px;
      height: 40px;
      border-radius: 6px;
      object-fit: cover;
      background: #fff;
    }

    .search-result-info h4 {
      font-size: 0.85rem;
      color: var(--clr-wholegrain);
    }

    .search-result-info span {
      font-size: 0.75rem;
      color: var(--clr-olive);
      font-weight: 600;
    }

    /* E-Commerce Store Toolbar & Grid */
    .store-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      margin: 2rem 0 2.5rem;
      flex-wrap: wrap;
    }

    .store-tabs {
      display: flex;
      gap: 0.5rem;
      flex-wrap: wrap;
    }

    .store-tab {
      background: transparent;
      border: 1.5px solid var(--clr-parchment);
      color: var(--clr-grain-mid);
      padding: 0.5rem 1.25rem;
      border-radius: 30px;
      font-size: 0.85rem;
      font-weight: 500;
      cursor: pointer;
      transition: all var(--transition-fast);
    }

    .store-tab:hover,
    .store-tab.active {
      background: var(--clr-wholegrain);
      color: var(--clr-flour-white);
      border-color: var(--clr-wholegrain);
    }

    .store-controls {
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }

    .store-sort-select {
      padding: 0.5rem 1rem;
      border-radius: 20px;
      border: 1.5px solid var(--clr-parchment);
      background: var(--clr-flour-white);
      color: var(--clr-wholegrain);
      font-family: var(--font-sans);
      font-size: 16px; /* iOS zoom-on-focus fix — was 0.85rem (13.6px) */
      outline: none;
      cursor: pointer;
    }

    .products {
      position: relative;
      z-index: 10;
      background: var(--clr-flour-white);
      padding: 4rem 4rem 3rem;
    }

    /* Product Grid Layout — fluid, fits any screen width without
       relying on fixed breakpoints; cards never get narrower than
       230px and always fill the row evenly.
       auto-fit (not auto-fill) collapses empty leftover column
       tracks on wide screens, so a handful of cards stretch to
       fill the row instead of leaving a blank gap on the right.
       A max-width keeps cards from stretching into oversized
       tiles on ultra-wide monitors. */
    .products-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
      gap: 1.75rem;
      margin-top: 2rem;
      max-width: 1400px;
      margin-left: auto;
      margin-right: auto;
    }

    @media (max-width: 640px) {
      .products-grid {
        grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
        gap: 1rem;
      }
    }

    @media (max-width: 380px) {
      .products-grid {
        grid-template-columns: 1fr;
      }
    }

    .store-card {
      background: var(--clr-flour-white);
      border: 1px solid rgba(44, 31, 14, 0.08);
      border-radius: 12px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      height: 100%;
      position: relative;
      box-shadow: 0 4px 20px rgba(44, 31, 14, 0.04);
      transition: transform var(--transition-med), box-shadow var(--transition-med);
    }

    .store-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 16px 36px rgba(44, 31, 14, 0.12);
    }

    /* Image tile is now a true square (1:1) that scales with the
       card's own width, so it's identical on every screen size
       instead of a tall fixed 300px block. Background matches the
       card's background color exactly (--clr-flour-white) so the
       grey studio backdrop baked into the product photos no longer
       shows up as a mismatched box. */
    .store-card__img-wrap {
      position: relative;
      width: 100%;
      aspect-ratio: 1 / 1;
      background: var(--clr-flour-white);
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 0;
    }

    .store-card__img {
      width: 92%;
      height: 92%;
      object-fit: contain;
      transition: transform var(--transition-slow);
      position: relative;
      z-index: 1;
    }

    .store-card:hover .store-card__img {
      transform: scale(1.08);
    }

    .store-card__badge {
      position: absolute;
      top: 12px;
      left: 12px;
      background: var(--clr-olive);
      color: #fff;
      font-size: 0.65rem;
      font-weight: 700;
      letter-spacing: 0.05em;
      padding: 0.25rem 0.6rem;
      border-radius: 4px;
      text-transform: uppercase;
      z-index: 4;
      max-width: calc(100% - 60px);
      white-space: normal;
      line-height: 1.3;
    }

    .store-card__badge--saver {
      background: var(--clr-terracotta);
    }

    .store-card__wishlist-btn {
      position: absolute;
      top: 12px;
      right: 12px;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.9);
      border: none;
      color: #888;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s;
      z-index: 4;
    }

    .store-card__wishlist-btn:hover,
    .store-card__wishlist-btn.active {
      color: #e74c3c;
      background: #fff;
      transform: scale(1.1);
    }

    .store-card__quickview-btn {
      position: absolute;
      bottom: 10px;
      left: 50%;
      transform: translateX(-50%) translateY(10px);
      background: rgba(44, 31, 14, 0.92);
      color: var(--clr-flour-white);
      border: 1px solid rgba(200, 146, 42, 0.45);
      padding: 0.4rem 1rem;
      border-radius: 20px;
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.03em;
      cursor: pointer;
      opacity: 0;
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      white-space: nowrap;
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
      z-index: 5;
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      pointer-events: none;
    }

    .store-card:hover .store-card__quickview-btn,
    .store-card:focus-within .store-card__quickview-btn {
      bottom: 14px;
      background: var(--clr-olive);
      color: #ffffff;
      border-color: var(--clr-olive);
      transform: translateX(-50%) translateY(0) scale(1.06);
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
      opacity: 1;
      pointer-events: auto;
    }

    /* On touch devices there's no hover state, so keep the button visible
       but small and out of the way at the bottom of the image rather than
       centered over the product photo, so it never overlaps the artwork. */
    @media (hover: none) {
      .store-card__quickview-btn {
        opacity: 1;
        pointer-events: auto;
        bottom: 8px;
        transform: translateX(-50%) translateY(0) scale(0.92);
      }
    }

    .store-card__body {
      padding: 1.25rem;
      display: flex;
      flex-direction: column;
      flex-grow: 1;
    }

    .store-card__category {
      font-size: 0.7rem;
      font-weight: 600;
      color: var(--clr-olive);
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin-bottom: 0.3rem;
    }

    .store-card__title {
      font-family: var(--font-serif);
      font-size: 1.15rem;
      font-weight: 700;
      color: var(--clr-wholegrain);
      margin-bottom: 0.4rem;
    }

    .store-card__rating {
      display: flex;
      align-items: center;
      gap: 0.4rem;
      font-size: 0.78rem;
      color: var(--clr-mustard);
      margin-bottom: 0.75rem;
    }

    .store-card__rating-count {
      color: var(--clr-grain-mid);
    }

    .store-card__desc {
      font-size: 0.82rem;
      color: #666;
      line-height: 1.45;
      margin-bottom: 1rem;
      flex-grow: 1;
      /* Clamp to 2 lines instead of letting long descriptions push
         the card taller — this was the biggest cause of the
         "very long" card. */
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .store-card__footer {
      display: flex;
      flex-direction: column;
      gap: 0.8rem;
      margin-top: auto;
      padding-top: 0.75rem;
      border-top: 1px dashed var(--clr-parchment);
    }

    .store-card__price-row {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
    }

    .store-card__price {
      font-family: var(--font-sans);
      font-size: 1.25rem;
      font-weight: 700;
      color: var(--clr-wholegrain);
    }

    .store-card__mrp {
      font-size: 0.8rem;
      color: #999;
      text-decoration: line-through;
      margin-left: 0.4rem;
    }

    .store-card__weight {
      font-size: 0.75rem;
      color: var(--clr-grain-mid);
      background: var(--clr-wheat-beige);
      padding: 0.15rem 0.5rem;
      border-radius: 4px;
    }

    .store-card__tags {
      display: flex;
      flex-wrap: wrap;
      gap: 0.35rem;
      margin-top: 0.6rem;
    }

    .store-card__tag {
      background: var(--clr-flour-white);
      color: var(--clr-grain-mid);
      border: 1px solid var(--clr-parchment);
      font-size: 0.68rem;
      font-weight: 600;
      padding: 0.15rem 0.45rem;
      border-radius: 4px;
    }

    .store-card__discount {
      font-size: 0.75rem;
      font-weight: 700;
      color: var(--clr-terracotta);
      /* Was "bg:" in the old inline style, which isn't a real CSS
         property, so the highlight background never actually rendered.
         Using "background" here fixes that. */
      background: rgba(193, 97, 58, 0.1);
      padding: 0.1rem 0.4rem;
      border-radius: 4px;
    }

    /* Stepper & Action Controls */
    .store-card__action-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.5rem;
      width: 100%;
      min-width: 0;
    }

    .stepper {
      display: inline-flex;
      align-items: center;
      border: 1px solid var(--clr-parchment);
      border-radius: 6px;
      overflow: hidden;
      background: var(--clr-flour-white);
      flex: 0 0 auto;
    }

    .stepper__btn {
      width: 28px;
      height: 32px;
      border: none;
      background: transparent;
      color: var(--clr-wholegrain);
      font-weight: 700;
      font-size: 0.9rem;
      cursor: pointer;
      transition: background 0.2s;
    }

    .stepper__btn:hover {
      background: var(--clr-wheat-beige);
    }

    .stepper__val {
      width: 28px;
      text-align: center;
      font-size: 0.85rem;
      font-weight: 600;
      color: var(--clr-wholegrain);
    }

    .btn-add-cart {
      flex: 1 1 auto;
      min-width: 0;
      background: var(--clr-olive);
      color: #fff;
      border: none;
      padding: 0.6rem 0.8rem;
      border-radius: 6px;
      font-family: var(--font-sans);
      font-size: 0.8rem;
      font-weight: 600;
      letter-spacing: 0.03em;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.4rem;
      white-space: nowrap;
      transition: all var(--transition-fast);
    }

    .btn-add-cart:hover {
      background: var(--clr-olive-dark);
      transform: translateY(-1px);
    }

    .btn-buy-now {
      flex: 1 1 100%;
      order: 3;
      background: var(--clr-terracotta);
      color: #fff;
      border: none;
      padding: 0.65rem 0.8rem;
      border-radius: 6px;
      font-family: var(--font-sans);
      font-size: 0.85rem;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.4rem;
      white-space: nowrap;
      transition: all var(--transition-fast);
    }

    .btn-buy-now:hover {
      background: #a34c28;
    }

    /* Cart Slide-over Drawer */
    .cart-drawer-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.6);
      backdrop-filter: blur(4px);
      z-index: 2000;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
    }

    .cart-drawer-overlay.active {
      opacity: 1;
      visibility: visible;
    }

    .cart-drawer {
      position: fixed;
      top: 0;
      right: 0;
      width: 100%;
      max-width: 420px;
      height: 100%;
      background: var(--clr-flour-white);
      z-index: 2001;
      box-shadow: -8px 0 32px rgba(0, 0, 0, 0.2);
      display: flex;
      flex-direction: column;
      transform: translateX(100%);
      transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .cart-drawer.active {
      transform: translateX(0);
    }

    .cart-drawer__header {
      padding: 1.25rem 1.5rem;
      background: var(--clr-wholegrain);
      color: var(--clr-flour-white);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .cart-drawer__title {
      font-family: var(--font-serif);
      font-size: 1.3rem;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .cart-drawer__close {
      background: none;
      border: none;
      color: #fff;
      font-size: 1.5rem;
      cursor: pointer;
      opacity: 0.8;
      transition: opacity 0.2s;
    }

    .cart-drawer__close:hover {
      opacity: 1;
    }

    /* Free Shipping Bar inside Cart */
    .free-shipping-bar {
      background: var(--clr-wheat-beige);
      padding: 0.75rem 1.5rem;
      border-bottom: 1px solid var(--clr-parchment);
    }

    .free-shipping-text {
      font-size: 0.78rem;
      font-weight: 600;
      color: var(--clr-wholegrain);
      margin-bottom: 0.4rem;
    }

    /* ═══════════════════════════════════════════════
    AUTH & MEMBER PROFILE MODAL STYLING
    ═══════════════════════════════════════════════ */
    .auth-tab-container {
      display: flex;
      gap: 0.5rem;
      margin-bottom: 1.25rem;
      background: var(--clr-flour-white);
      padding: 0.35rem;
      border-radius: 10px;
      border: 1px solid var(--clr-parchment);
    }

    .auth-tab-btn {
      flex: 1;
      padding: 0.7rem 0.85rem;
      border-radius: 8px;
      border: 1px solid transparent;
      background: transparent;
      color: var(--clr-wholegrain);
      font-family: var(--font-sans);
      font-weight: 700;
      font-size: 0.85rem;
      cursor: pointer;
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.4rem;
    }

    .auth-tab-btn.active {
      background: var(--clr-olive) !important;
      color: #ffffff !important;
      border-color: var(--clr-olive) !important;
      box-shadow: 0 4px 12px rgba(107, 124, 58, 0.25);
    }

    .auth-submit-btn {
      width: 100%;
      margin-top: 1rem;
      padding: 0.85rem;
      background: var(--clr-wholegrain);
      color: #ffffff !important;
      border: none;
      border-radius: 8px;
      font-family: var(--font-sans);
      font-size: 0.9rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      cursor: pointer;
      transition: background 0.2s ease, transform 0.2s ease;
    }

    .auth-submit-btn:hover {
      background: var(--clr-olive);
      transform: translateY(-1px);
    }

    .nav__icon-btn.user-logged-in {
      background: rgba(107, 124, 58, 0.15) !important;
      color: var(--clr-olive) !important;
      border-color: var(--clr-olive) !important;
      position: relative;
    }

    .nav__icon-btn.user-logged-in::after {
      content: '';
      position: absolute;
      top: 4px;
      right: 4px;
      width: 8px;
      height: 8px;
      background: var(--clr-olive);
      border-radius: 50%;
      border: 1.5px solid #fff;
    }

    .progress-fill {
      height: 100%;
      background: var(--clr-olive);
      width: 0%;
      transition: width 0.4s ease;
    }

    .cart-drawer__body {
      flex: 1;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior-y: contain;
      padding: 1.25rem 1.5rem;
    }

    .cart-empty {
      text-align: center;
      padding: 3rem 1rem;
      color: var(--clr-grain-mid);
    }

    .cart-empty svg {
      margin-bottom: 1rem;
      opacity: 0.4;
    }

    .cart-item {
      display: flex;
      gap: 1rem;
      padding: 1rem 0;
      border-bottom: 1px dashed var(--clr-parchment);
      align-items: center;
    }

    .cart-item__img {
      width: 64px;
      height: 64px;
      border-radius: 8px;
      object-fit: cover;
      background: #fff;
      border: 1px solid var(--clr-parchment);
    }

    .cart-item__details {
      flex: 1;
    }

    .cart-item__name {
      font-family: var(--font-sans);
      font-weight: 600;
      font-size: 0.9rem;
      color: var(--clr-wholegrain);
    }

    .cart-item__meta {
      font-size: 0.75rem;
      color: #777;
      margin-top: 0.2rem;
    }

    .cart-item__price {
      font-weight: 700;
      color: var(--clr-wholegrain);
      font-size: 0.95rem;
      margin-top: 0.3rem;
    }

    .cart-item__remove {
      background: none;
      border: none;
      color: #b00;
      cursor: pointer;
      padding: 0.3rem;
      opacity: 0.6;
      transition: opacity 0.2s;
    }

    .cart-item__remove:hover {
      opacity: 1;
    }

    /* Coupon Box */
    .coupon-box {
      margin-top: 1rem;
      display: flex;
      gap: 0.5rem;
    }

    .coupon-input {
      flex: 1;
      padding: 0.6rem 0.8rem;
      border: 1px solid var(--clr-parchment);
      border-radius: 6px;
      font-family: var(--font-sans);
      font-size: 16px; /* iOS zoom-on-focus fix — was 0.85rem (13.6px) */
      text-transform: uppercase;
    }

    .btn-apply-coupon {
      background: var(--clr-wholegrain);
      color: #fff;
      border: none;
      padding: 0.6rem 1rem;
      border-radius: 6px;
      font-size: 0.8rem;
      font-weight: 600;
      cursor: pointer;
    }

    .applied-coupon-tag {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      background: rgba(107, 124, 58, 0.15);
      color: var(--clr-olive-dark);
      padding: 0.3rem 0.75rem;
      border-radius: 4px;
      font-size: 0.8rem;
      font-weight: 600;
      margin-top: 0.5rem;
    }

    .cart-drawer__footer {
      padding: 1.25rem 1.5rem;
      padding-bottom: calc(1.25rem + env(safe-area-inset-bottom));
      background: #fff;
      border-top: 1px solid var(--clr-parchment);
      box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.04);
    }

    .cart-summary-row {
      display: flex;
      justify-content: space-between;
      font-size: 0.85rem;
      color: #555;
      margin-bottom: 0.5rem;
    }

    .cart-summary-row.total {
      font-size: 1.15rem;
      font-weight: 700;
      color: var(--clr-wholegrain);
      border-top: 1px solid var(--clr-parchment);
      padding-top: 0.75rem;
      margin-top: 0.5rem;
    }

    .btn-checkout {
      width: 100%;
      background: var(--clr-olive);
      color: #fff;
      border: none;
      padding: 0.9rem;
      border-radius: 6px;
      font-family: var(--font-sans);
      font-size: 0.95rem;
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      cursor: pointer;
      margin-top: 0.75rem;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      transition: background 0.2s;
    }

    .btn-checkout:hover {
      background: var(--clr-olive-dark);
    }

    /* Checkout & Quickview Modal Overlays */
    .modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.7);
      backdrop-filter: blur(6px);
      z-index: 3000;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 1rem;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
    }

    .modal-overlay.active {
      opacity: 1;
      visibility: visible;
    }

    .modal-container {
      background: #fff;
      border-radius: 16px;
      width: 100%;
      max-width: 680px;
      max-height: 90vh;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior-y: contain;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
      position: relative;
      transform: scale(0.95);
      transition: transform 0.3s ease;
    }

    .modal-overlay.active .modal-container {
      transform: scale(1);
    }

    .modal-close {
      position: absolute;
      top: 16px;
      right: 16px;
      background: rgba(255, 255, 255, 0.95);
      color: var(--clr-wholegrain);
      border: none;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      font-size: 1.3rem;
      line-height: 1;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 10;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
      transition: all 0.2s ease;
    }

    .modal-close:hover {
      background: #ffffff;
      color: var(--clr-terracotta);
      transform: scale(1.08);
    }

    /* Checkout Multi-Step Flow */
    .checkout-header {
      background: var(--clr-wholegrain);
      color: #fff;
      padding: 1.5rem;
      border-radius: 16px 16px 0 0;
    }

    .checkout-title {
      font-family: var(--font-serif);
      font-size: 1.3rem;
      margin-bottom: 1rem;
    }

    .checkout-steps {
      display: flex;
      justify-content: space-between;
      position: relative;
    }

    .checkout-step {
      display: flex;
      align-items: center;
      gap: 0.4rem;
      font-size: 0.8rem;
      opacity: 0.5;
    }

    .checkout-step.active {
      opacity: 1;
      font-weight: 700;
      color: var(--clr-mustard-light);
    }

    .checkout-step-num {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.2);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.75rem;
    }

    .checkout-step.active .checkout-step-num {
      background: var(--clr-mustard);
      color: var(--clr-wholegrain);
    }

    .checkout-body {
      padding: 1.5rem;
    }

    .form-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
    }

    .form-group {
      display: flex;
      flex-direction: column;
      gap: 0.3rem;
    }

    .form-group.full {
      grid-column: span 2;
    }

    .form-group label {
      font-size: 0.8rem;
      font-weight: 600;
      color: var(--clr-wholegrain);
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
      padding: 0.7rem 0.9rem;
      border: 1.5px solid var(--clr-parchment);
      border-radius: 8px;
      font-family: var(--font-sans);
      font-size: 16px; /* iOS Safari auto-zooms the whole page on focus for any input under 16px — this was 0.9rem (14.4px) */
      outline: none;
    }

    .form-group input:focus {
      border-color: var(--clr-olive);
    }

    /* Delivery Slot selector */
    .delivery-slots {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0.75rem;
      margin-top: 0.5rem;
    }

    .slot-card {
      border: 1.5px solid var(--clr-parchment);
      border-radius: 8px;
      padding: 0.75rem;
      text-align: center;
      cursor: pointer;
      transition: all 0.2s;
    }

    .slot-card.active,
    .slot-card:hover {
      border-color: var(--clr-olive);
      background: rgba(107, 124, 58, 0.08);
    }

    .slot-title {
      font-size: 0.8rem;
      font-weight: 700;
      color: var(--clr-wholegrain);
    }

    .slot-time {
      font-size: 0.72rem;
      color: #666;
    }

    /* Payment Tabs */
    .payment-tabs {
      display: flex;
      gap: 0.5rem;
      margin-bottom: 1.25rem;
    }

    .payment-tab {
      flex: 1;
      padding: 0.65rem;
      border: 1.5px solid var(--clr-parchment);
      border-radius: 8px;
      background: transparent;
      font-size: 0.8rem;
      font-weight: 600;
      cursor: pointer;
      text-align: center;
      transition: all 0.2s;
    }

    .payment-tab.active {
      border-color: var(--clr-olive);
      background: var(--clr-olive);
      color: #fff;
    }

    .upi-qr-box {
      text-align: center;
      padding: 1rem;
      background: var(--clr-flour-white);
      border-radius: 12px;
      border: 1px dashed var(--clr-mustard);
    }

    .upi-qr-img {
      width: 140px;
      height: 140px;
      margin: 0.5rem auto;
      border: 4px solid #fff;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    /* Quick View Modal Styles */
    .quickview-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.5rem;
      padding: 3.25rem 1.5rem 1.5rem;
    }

    .quickview-img {
      width: 100%;
      max-height: 320px;
      border-radius: 12px;
      object-fit: contain;
      background: var(--clr-flour-white);
      display: block;
    }

    .nutrition-table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 0.75rem;
      font-size: 0.8rem;
    }

    .nutrition-table th,
    .nutrition-table td {
      padding: 0.5rem;
      border-bottom: 1px solid var(--clr-parchment);
      text-align: left;
    }

    .nutrition-table th {
      background: var(--clr-wheat-beige);
      font-weight: 700;
    }

    /* Enhanced Quick View & Product Label Details */
    .qv-category-pill {
      font-size: 0.75rem;
      font-weight: 700;
      color: var(--clr-olive);
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }
    .qv-weight-pill {
      font-size: 0.78rem;
      color: #666;
    }
    .qv-title {
      font-family: var(--font-serif);
      font-size: 1.45rem;
      color: var(--clr-wholegrain);
      margin: 0.35rem 0 0.2rem;
      line-height: 1.25;
    }
    .qv-tagline {
      font-size: 0.88rem;
      color: var(--clr-terracotta);
      font-style: italic;
      margin-bottom: 0.75rem;
      font-weight: 600;
    }
    .qv-price-block {
      background: rgba(107, 124, 58, 0.08);
      border: 1.5px solid rgba(107, 124, 58, 0.22);
      border-radius: 10px;
      padding: 0.75rem 1rem;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.75rem;
      margin-bottom: 1rem;
    }
    .qv-price {
      font-size: 1.5rem;
      font-weight: 800;
      color: var(--clr-wholegrain);
    }
    .qv-mrp {
      font-size: 0.85rem;
      color: #777;
    }
    .qv-usp {
      font-size: 0.78rem;
      color: var(--clr-terracotta);
      font-weight: 700;
      margin-left: auto;
      background: #fff;
      padding: 4px 9px;
      border-radius: 6px;
      border: 1px solid rgba(193, 102, 60, 0.25);
    }
    .qv-claims-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 0.35rem;
      margin: 0.6rem 0 0.2rem;
    }
    .qv-claim-tag {
      background: #fff;
      border: 1px solid #d4cca9;
      color: var(--clr-wholegrain);
      font-size: 0.72rem;
      font-weight: 600;
      padding: 3px 8px;
      border-radius: 20px;
      display: inline-flex;
      align-items: center;
      gap: 3px;
    }
    .qv-ingredients-card {
      background: #faf8f5;
      border: 1.5px solid #e8decb;
      border-radius: 10px;
      padding: 0.85rem 1rem;
      margin: 0.85rem 0;
      font-size: 0.82rem;
      line-height: 1.45;
      color: #333;
    }
    .qv-ingredients-title {
      font-weight: 700;
      color: var(--clr-wholegrain);
      display: flex;
      align-items: center;
      gap: 0.4rem;
      margin-bottom: 0.35rem;
    }
    .qv-allergen-alert {
      margin-top: 0.6rem;
      padding-top: 0.5rem;
      border-top: 1px dashed #d9cbaf;
      font-size: 0.78rem;
      color: #92400e;
      font-weight: 600;
    }
    .qv-mfg-card {
      margin-top: 0.85rem;
      padding: 0.75rem 0.9rem;
      background: #fdfdfc;
      border: 1px solid var(--clr-parchment);
      border-radius: 8px;
      font-size: 0.74rem;
      color: #555;
      line-height: 1.4;
    }

    /* Order Confirmation & Receipt */
    .receipt-card {
      background: var(--clr-flour-white);
      border: 1px solid var(--clr-parchment);
      border-radius: 12px;
      padding: 1.5rem;
      margin-top: 1rem;
    }

    .receipt-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 2px dashed var(--clr-parchment);
      padding-bottom: 1rem;
      margin-bottom: 1rem;
    }

    /* Wishlist Drawer */
    .wishlist-drawer {
      position: fixed;
      top: 0;
      right: 0;
      width: 100%;
      max-width: 380px;
      height: 100%;
      background: #fff;
      z-index: 2001;
      box-shadow: -8px 0 32px rgba(0, 0, 0, 0.2);
      display: flex;
      flex-direction: column;
      transform: translateX(100%);
      transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .wishlist-drawer.active {
      transform: translateX(0);
    }

    /* Toast Notification Container */
    .toast-container {
      position: fixed;
      bottom: 24px;
      right: 24px;
      z-index: 9999;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .toast-item {
      background: var(--clr-wholegrain);
      color: var(--clr-flour-white);
      padding: 0.85rem 1.25rem;
      border-radius: 8px;
      font-size: 0.85rem;
      font-weight: 500;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
      display: flex;
      align-items: center;
      gap: 0.6rem;
      border-left: 4px solid var(--clr-olive);
      animation: toastIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    @keyframes toastIn {
      from {
        opacity: 0;
        transform: translateY(20px) scale(0.9);
      }

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

    /* Floating Cart FAB */
    .cart-fab {
      position: fixed;
      bottom: calc(24px + env(safe-area-inset-bottom));
      left: 24px;
      background: var(--clr-olive);
      color: #fff;
      width: 56px;
      height: 56px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 8px 24px rgba(107, 124, 58, 0.4);
      cursor: pointer;
      z-index: 1000;
      border: none;
      transition: transform 0.2s;
    }

    .cart-fab:hover {
      transform: scale(1.1);
    }

    .cart-fab__badge {
      position: absolute;
      top: -4px;
      right: -4px;
      background: var(--clr-terracotta);
      color: #fff;
      font-size: 0.7rem;
      font-weight: 700;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    @media (max-width: 768px) {
      .top-banner {
        font-size: 0.72rem;
      }

      .nav__cart-total {
        display: none;
      }

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

      .form-group.full {
        grid-column: span 1;
      }

      .delivery-slots {
        grid-template-columns: 1fr;
      }

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

      .cart-drawer,
      .wishlist-drawer {
        max-width: 100%;
      }
    }

    /* ── Compact product card for phones ──────────────────────────
       Placed at the very end of the stylesheet on purpose: several
       .store-card__* rules earlier in this file are unconditional
       (not inside any @media block), and since a media query adds
       no specificity of its own, an unconditional rule appearing
       *later* in the cascade always wins a tie over an earlier
       conditional one — regardless of screen width. Putting this
       block last guarantees these overrides actually take effect.

       The desktop card (image + category + title + rating + 2-line
       desc + tag chips + price row + 2-row action row) runs 600px+
       tall, so only a sliver of one card fit on a phone screen.
       Every purchase-critical element — product photo, badge,
       wishlist toggle, category, title, rating, price, qty stepper,
       Add, and Buy Now — stays exactly as-is, just tighter spacing.
       Only the secondary long-form copy (description, tag chips)
       is hidden, since that's already available on the product's
       own quick-view popup. Net result: card height drops from
       ~630px to ~330px on a 390px-wide phone — a near-square tile
       instead of a long scroll. */
    @media (max-width: 640px) {
      .products-grid {
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: 1.25rem;
      }

      /* Image box goes from a perfect 1:1 square to a slightly
         taller 4:3 box — larger than the previous 5:4 — since the
         card itself now has more room per row to grow into. */
      .store-card__img-wrap {
        aspect-ratio: 4 / 3;
      }

      .store-card__img {
        width: 96%;
        height: 96%;
      }

      .store-card__desc,
      .store-card__tags {
        display: none;
      }

      .store-card__body {
        padding: 1rem 1rem;
      }

      .store-card__category {
        font-size: 0.68rem;
        margin-bottom: 0.25rem;
      }

      .store-card__title {
        font-size: 1.05rem;
        margin-bottom: 0.35rem;
        /* Clamp to a single line — with the description gone, the
           title is the only text left that could push height up
           unpredictably on long product names. */
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }

      .store-card__rating {
        font-size: 0.8rem;
        margin-bottom: 0;
      }

      .store-card__footer {
        gap: 0.6rem;
        padding-top: 0.65rem;
        margin-top: 0.7rem;
      }

      .store-card__price {
        font-size: 1.2rem;
      }

      .store-card__action-row {
        gap: 0.5rem;
      }

      .stepper__btn {
        width: 28px;
        height: 34px;
      }

      .stepper__val {
        width: 26px;
        font-size: 0.88rem;
      }

      .btn-add-cart,
      .btn-buy-now {
        padding: 0.6rem 0.6rem;
        font-size: 0.8rem;
      }
    }

    /* ── Bigger product card + bigger product image on mobile ──────
       Appended after every other .store-card rule for the same
       reason the block above explains: an unconditional class rule
       cascades by source order, not by which @media block "feels"
       more specific, so whichever matching rule is physically last
       in the file wins the tie at any given viewport width. Putting
       this last (after the 640px/480px/380px blocks above) means it
       overrides all of them without editing/duplicating that logic.

       - Image box: 4:3 → 1:1 (taller box = more visible photo) and
         96% → 100% fill (no inset padding around the image).
       - Grid forced to a single column up to 640px, so the bigger
         card never gets squeezed into 2-up on larger phones/small
         tablets in portrait.
       - Title/price/rating bumped up a step since the card itself
         is now taller and the smaller mobile-only type looked out
         of proportion next to a bigger photo. */
    @media (max-width: 640px) {
      .products-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
      }

      .store-card__img-wrap {
        aspect-ratio: 1 / 1;
      }

      .store-card__img {
        width: 100%;
        height: 100%;
      }

      .store-card__body {
        padding: 1.25rem 1.15rem;
      }

      .store-card__category {
        font-size: 0.75rem;
      }

      .store-card__title {
        font-size: 1.3rem;
        -webkit-line-clamp: 2;
      }

      .store-card__rating {
        font-size: 0.92rem;
      }

      .store-card__price {
        font-size: 1.45rem;
      }

      .store-card__mrp {
        font-size: 1rem;
      }

      .store-card__footer {
        gap: 0.75rem;
        padding-top: 0.8rem;
        margin-top: 0.85rem;
      }

      .stepper__btn {
        width: 34px;
        height: 40px;
        font-size: 1rem;
      }

      .stepper__val {
        width: 32px;
        font-size: 1rem;
      }

      .btn-add-cart,
      .btn-buy-now {
        padding: 0.8rem 0.7rem;
        font-size: 0.92rem;
      }
    }