/* ============================================
   SHAOUB FOOD STUFF - Premium Brand Website
   Design System & Core Styles
   ============================================ */

:root {
  /* Brand Colors from Logo */
  --color-brown-darkest: #2A1810;
  --color-brown-dark: #3D2817;
  --color-brown: #5A3A22;
  --color-brown-light: #8B6240;
  --color-gold: #C9A961;
  --color-gold-light: #E5C998;
  --color-gold-pale: #F2E4C4;
  --color-cream: #FAF7F2;
  --color-cream-warm: #F5EEE0;
  --color-white: #FFFFFF;
  --color-black: #1A0F08;

  /* Functional */
  --color-text: #2A1810;
  --color-text-muted: #6B5544;
  --color-text-light: #FAF7F2;
  --color-bg: #FAF7F2;
  --color-bg-alt: #F5EEE0;

  /* Gradients */
  --gradient-gold: linear-gradient(135deg, #C9A961 0%, #E5C998 50%, #C9A961 100%);
  --gradient-brown: linear-gradient(135deg, #3D2817 0%, #5A3A22 50%, #3D2817 100%);
  --gradient-luxury: linear-gradient(135deg, #2A1810 0%, #5A3A22 40%, #C9A961 100%);
  --gradient-hero: linear-gradient(135deg, rgba(42,24,16,0.85) 0%, rgba(90,58,34,0.7) 50%, rgba(201,169,97,0.4) 100%);
  --gradient-overlay: linear-gradient(180deg, rgba(42,24,16,0) 0%, rgba(42,24,16,0.8) 100%);

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(42, 24, 16, 0.08);
  --shadow-md: 0 8px 24px rgba(42, 24, 16, 0.12);
  --shadow-lg: 0 16px 48px rgba(42, 24, 16, 0.18);
  --shadow-xl: 0 24px 64px rgba(42, 24, 16, 0.24);
  --shadow-gold: 0 12px 32px rgba(201, 169, 97, 0.35);
  --shadow-inset: inset 0 2px 6px rgba(42, 24, 16, 0.1);

  /* Typography */
  --font-en: 'Playfair Display', 'Georgia', serif;
  --font-en-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-ar: 'Amiri', 'Tajawal', 'Cairo', serif;
  --font-ar-body: 'Tajawal', 'Cairo', sans-serif;

  /* Sizing */
  --container-max: 1400px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);
  --section-pad: clamp(4rem, 10vw, 8rem);
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --radius-xl: 48px;

  /* Transitions */
  --ease-smooth: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-elegant: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-fast: 0.25s var(--ease-smooth);
  --transition-base: 0.4s var(--ease-smooth);
  --transition-slow: 0.7s var(--ease-elegant);

  /* Navbar */
  --nav-height: 84px;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  font-family: var(--font-en-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  position: relative;
  width: 100%;
  max-width: 100vw;
}

body[dir="rtl"] {
  font-family: var(--font-ar-body);
}

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

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

ul {
  list-style: none;
}

/* ===== Typography ===== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-en);
  font-weight: 700;
  line-height: 1.15;
  color: #dec08a;
  letter-spacing: -0.02em;
}

body[dir="rtl"] h1,
body[dir="rtl"] h2,
body[dir="rtl"] h3,
body[dir="rtl"] h4,
body[dir="rtl"] h5,
body[dir="rtl"] h6 {
  font-family: var(--font-ar);
  letter-spacing: 0;
  line-height: 1.4;
}

h1 { font-size: clamp(2.5rem, 6vw, 5rem); }
h2 { font-size: clamp(2rem, 4.5vw, 3.5rem); }
h3 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
h4 { font-size: clamp(1.25rem, 2vw, 1.5rem); }

p {
  font-size: clamp(1rem, 1.1vw, 1.0625rem);
  color: var(--color-text-muted);
}

.text-gold {
  color: var(--color-gold);
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ===== Layout ===== */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  width: 100%;
}

section {
  position: relative;
  padding: var(--section-pad) 0;
}

.section-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 4rem;
}

.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-en-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 1rem;
}

body[dir="rtl"] .section-eyebrow {
  font-family: var(--font-ar-body);
  letter-spacing: 0.1em;
}

.section-eyebrow::before,
.section-eyebrow::after {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--gradient-gold);
}

.section-title {
  margin-bottom: 1.25rem;
}

.section-subtitle {
  font-size: 1.0625rem;
  color: var(--color-text-muted);
  line-height: 1.7;
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1rem 2.25rem;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 999px;
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
}

.btn-primary {
  background: var(--gradient-gold);
  color: var(--color-brown-darkest);
  box-shadow: var(--shadow-gold);
}

.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #E5C998 0%, #F2E4C4 100%);
  opacity: 0;
  transition: opacity var(--transition-base);
}

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

.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 40px rgba(201, 169, 97, 0.45);
}

.btn-primary:hover::before {
  opacity: 1;
}

.btn-outline {
  background: transparent;
  color: var(--color-brown-dark);
  border: 2px solid var(--color-brown-dark);
}

.btn-outline:hover {
  background: var(--color-brown-dark);
  color: var(--color-cream);
  transform: translateY(-3px);
}

.btn-light {
  background: var(--color-cream);
  color: var(--color-brown-dark);
}

.btn-light:hover {
  background: var(--color-white);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.btn .arrow {
  transition: transform var(--transition-base);
}

.btn:hover .arrow {
  transform: translateX(4px);
}

body[dir="rtl"] .btn:hover .arrow {
  transform: translateX(-4px) scaleX(-1);
}

body[dir="rtl"] .btn .arrow {
  transform: scaleX(-1);
}

/* ===== Navbar أ¢â‚¬â€‌ always cream/light ===== */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-height);
  z-index: 1000;
  transition: box-shadow var(--transition-base);
  background: rgba(250, 247, 242, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 2px 20px rgba(42, 24, 16, 0.08);
  transform: translateZ(0);
  will-change: transform;
}

/* Subtle shadow deepens on scroll for depth, but the bg stays cream */
.navbar.scrolled {
  box-shadow: 0 4px 24px rgba(42, 24, 16, 0.12);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-en);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--color-brown-darkest);
  transition: transform var(--transition-fast);
}

.nav-logo:hover {
  transform: scale(1.03);
}

.nav-logo .logo-mark {
  width: 44px;
  height: 44px;
  background: var(--gradient-gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-brown-darkest);
  font-weight: 900;
  font-size: 1.15rem;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}

.nav-logo .logo-mark::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  border: 1.5px solid rgba(42, 24, 16, 0.2);
}

.nav-logo .logo-text-en {
  font-family: var(--font-en);
}

.nav-logo .logo-text-ar {
  font-family: var(--font-ar);
}

/* Brand logo image — replaces the legacy S mark + SHAOUB wordmark */
.nav-logo-img {
  display: block;
  height: 48px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  transition: transform var(--transition-fast), filter var(--transition-fast);
}

.navbar.scrolled .nav-logo-img {
  height: 42px;
}

@media (max-width: 768px) {
  .nav-logo-img { height: 40px; max-width: 160px; }
  .navbar.scrolled .nav-logo-img { height: 36px; }
}

@media (max-width: 480px) {
  .nav-logo-img { height: 36px; max-width: 140px; }
  .navbar.scrolled .nav-logo-img { height: 32px; }
}

.nav-menu {
  display: flex;
  align-items: center;
}

.nav-menu__list {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Mobile-only sub-sections — hidden on desktop */
.nav-menu__header,
.nav-menu__footer {
  display: none;
}

.nav-link {
  position: relative;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-brown-darkest);
  padding: 0.5rem 0;
  transition: color var(--transition-fast);
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--gradient-gold);
  transition: width var(--transition-base);
}

.nav-link:hover,
.nav-link.active {
  color: var(--color-gold);
}

.nav-link.active::after,
.nav-link:hover::after {
  width: 100%;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.lang-switcher {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-width: 44px;
  min-height: 44px;
  padding: 0.5rem 1rem;
  border: 1.5px solid var(--color-brown-dark);
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-brown-dark);
  transition: all var(--transition-fast);
  letter-spacing: 0.05em;
  cursor: pointer;
}

.lang-switcher:hover {
  background: var(--color-brown-dark);
  color: var(--color-cream);
}

.lang-switcher svg {
  width: 14px;
  height: 14px;
}

/* Hamburger */
.hamburger {
  display: none;
  width: 44px;
  height: 44px;
  position: relative;
  z-index: 1001;
}

.hamburger span {
  position: absolute;
  left: 10px;
  width: 24px;
  height: 2px;
  background: var(--color-brown-darkest);
  border-radius: 2px;
  transition: all 0.35s var(--ease-smooth);
}

.hamburger span:nth-child(1) { top: 16px; }
.hamburger span:nth-child(2) { top: 22px; }
.hamburger span:nth-child(3) { top: 28px; }

.hamburger.active span:nth-child(1) {
  top: 22px;
  transform: rotate(45deg);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  top: 22px;
  transform: rotate(-45deg);
}

/* ===== Hero Section ===== */
/* ===== Hero: GSAP slideshow ===== */
.hero {
  position: relative;
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
  background: var(--color-brown-darkest);
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(ellipse at top right, rgba(201, 169, 97, 0.18), transparent 60%),
    radial-gradient(ellipse at bottom left, rgba(201, 169, 97, 0.1), transparent 60%);
  pointer-events: none;
  z-index: 5;
}

/* The stage GSAP populates with .card + .card-content */
.hero-slideshow #slideshow-stage {
  position: absolute;
  inset: 0;
}

/* Per-slide timer indicator (thin gold sliver under the navbar) */
.slideshow-indicator {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--nav-height);
  height: 3px;
  z-index: 40;
  background-color: var(--color-gold);
  opacity: 0.85;
}

/* Each .card injected by GSAP أ¢â‚¬â€‌ active fills hero, queue is right side */
.hero .card {
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  box-shadow: 10px 14px 28px 0 rgba(0, 0, 0, 0.45);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Dual overlay on every card أ¢â‚¬â€‌ a strong left-side darken for text
   legibility, plus a soft bottom vignette so the wave divider sits
   on richer tone. Photos with bright/varied content still read. */
.hero .card::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(95deg,
      rgba(20, 12, 6, 0.78) 0%,
      rgba(20, 12, 6, 0.55) 35%,
      rgba(20, 12, 6, 0.18) 65%,
      rgba(20, 12, 6, 0)   100%),
    linear-gradient(180deg,
      rgba(20, 12, 6, 0)   55%,
      rgba(20, 12, 6, 0.45) 100%);
  pointer-events: none;
  z-index: 1;
}

/* RTL: flip the horizontal darken so the text-side gradient stays
   under the details panel (which moves to the right side). */
body[dir="rtl"] .hero .card::after {
  background:
    linear-gradient(265deg,
      rgba(20, 12, 6, 0.78) 0%,
      rgba(20, 12, 6, 0.55) 35%,
      rgba(20, 12, 6, 0.18) 65%,
      rgba(20, 12, 6, 0)   100%),
    linear-gradient(180deg,
      rgba(20, 12, 6, 0)   55%,
      rgba(20, 12, 6, 0.45) 100%);
}

/* Mini-label rendered on the queue cards (right side strip) */
.hero .card-content {
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-cream);
  padding-left: 16px;
  pointer-events: none;
  z-index: 41;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}
.hero .content-start {
  width: 28px;
  height: 4px;
  border-radius: 99px;
  background-color: var(--color-gold);
  margin-bottom: 10px;
}
.hero .content-place {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-gold-light);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.hero .content-title-1,
.hero .content-title-2 {
  font-weight: 700;
  font-size: 18px;
  font-family: 'Oswald', var(--font-en), sans-serif;
  letter-spacing: 0.02em;
  line-height: 1.1;
}

/* Left-side overlay text for the ACTIVE slide */
.hero .details {
  position: absolute;
  top: 35%;
  left: clamp(2rem, 6vw, 5rem);
  max-width: 540px;
  z-index: 22;
  color: var(--color-cream);
}
.hero .details .place-box {
  height: 46px;
  overflow: hidden;
}
.hero .details .place-box .text {
  position: relative;
  padding-top: 18px;
  font-size: 14px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-gold-light);
  font-weight: 600;
}
.hero .details .place-box .text::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 30px;
  height: 4px;
  border-radius: 99px;
  background-color: var(--color-gold);
}
.hero .details .title-1,
.hero .details .title-2 {
  font-weight: 700;
  font-size: clamp(3rem, 7.5vw, 6rem);
  font-family: 'Oswald', var(--font-en), sans-serif;
  line-height: 0.95;
  letter-spacing: 0.01em;
  color: var(--color-cream);
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.55);
}
.hero .details .title-box-1,
.hero .details .title-box-2 {
  margin-top: 4px;
  height: clamp(58px, 8.5vw, 92px);
  overflow: hidden;
}
.hero .details .desc {
  margin-top: 24px;
  max-width: 500px;
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(250, 247, 242, 0.88);
  /* Wrap naturally within the comfortable 500px column. overflow-wrap
     also breaks very long unbroken strings so they never run off as a
     single line. */
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}
.hero .details .cta {
  max-width: 500px;
  margin-top: 28px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.hero .details .cta .bookmark {
  border: none;
  background: var(--gradient-gold);
  width: 38px;
  height: 38px;
  border-radius: 99px;
  color: var(--color-brown-darkest);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(201, 169, 97, 0.4);
  transition: transform 0.4s var(--ease-elegant), box-shadow 0.4s var(--ease-elegant);
}
.hero .details .cta .bookmark:hover {
  transform: translateY(-2px) scale(1.06);
  box-shadow: 0 12px 24px rgba(201, 169, 97, 0.55);
}
.hero .details .cta .bookmark svg {
  width: 18px;
  height: 18px;
}
.hero .details .cta .discover {
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background-color: #ddc089;
  border-radius: 99px;
  color: var(--color-cream);
  padding: 0 22px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: background 0.35s, color 0.35s, border-color 0.35s;
}
.hero .details .cta .discover:hover {
  background-color: var(--color-cream);
  color: var(--color-brown-darkest);
  border-color: var(--color-cream);
}

/* Pagination strip أ¢â‚¬â€‌ GSAP positions absolutely; we style the look */
.hero .pagination {
  /* Hidden: arrows, progress bar, and slide number removed from view.
     Kept in the DOM because hero-slideshow.js depends on #slide-numbers. */
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  align-items: center;
  z-index: 60;
}
.hero .pagination .arrow {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  display: grid;
  place-items: center;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.75);
  transition: border-color 0.35s, color 0.35s, background 0.35s;
}
.hero .pagination .arrow:hover {
  border-color: var(--color-gold);
  color: var(--color-gold-light);
  background: rgba(201, 169, 97, 0.1);
}
.hero .pagination .arrow:nth-child(2) {
  margin-left: 16px;
}
.hero .pagination .arrow svg {
  width: 22px;
  height: 22px;
  stroke-width: 2;
}
.hero .pagination .progress-sub-container {
  margin-left: 24px;
  width: 500px;
  height: 48px;
  display: flex;
  align-items: center;
}
.hero .pagination .progress-sub-background {
  width: 500px;
  height: 2px;
  background-color: rgba(255, 255, 255, 0.22);
  border-radius: 99px;
  overflow: hidden;
}
.hero .pagination .progress-sub-foreground {
  height: 2px;
  background-color: var(--color-gold);
  border-radius: 99px;
}
.hero .pagination .slide-numbers {
  width: 48px;
  height: 48px;
  overflow: hidden;
  position: relative;
}
.hero .pagination .slide-numbers .item {
  width: 48px;
  height: 48px;
  position: absolute;
  color: var(--color-cream);
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  font-size: 26px;
  font-weight: 700;
  font-family: var(--font-en);
}

/* The details panels are kept off-screen until GSAP reveals them.
   This prevents a flash of unstyled "Wheat Crackers" text before
   the slideshow JS runs. */
.hero .details { opacity: 0; }
.hero .card    { opacity: 0; }
.hero .pagination { opacity: 0; }
.hero.is-ready .card,
.hero.is-ready .details,
.hero.is-ready .pagination { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .slideshow-indicator { display: none; }
}

/* ===== Hand-Painted Section Dividers =====
   Each divider is a single confident brushstroke with an SVG
   turbulence filter that tears its edge أ¢â‚¬â€‌ like the painted
   transitions in editorial food / cookbook layouts. A thin
   accent stroke rides above each main edge for double-painted
   depth. */
.section-divider {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: clamp(100px, 11vw, 180px);
  overflow: hidden;
  pointer-events: none;
  line-height: 0;
  z-index: 2;
}

.section-divider svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 101%;
}

.section-divider.top    { top: -1px; }
.section-divider.bottom { bottom: -1px; }

body[dir="rtl"] .section-divider svg { transform: scaleX(-1); }

/* Seam divider — a torn band that straddles the boundary between two
   sections. Unlike .section-divider (absolutely placed and clipped
   INSIDE its section), this is a flow element placed BETWEEN sections.
   Negative block margins (~half its own height each side) pull it to
   overlap equally into both sections, so the band lands centred on the
   seam with no gap, and it never gets clipped by either section's
   overflow:hidden. Height/margins scale with the viewport for full
   responsiveness on desktop, tablet and mobile. */
.seam-divider {
  position: relative;
  z-index: 4;
  width: 100%;
  height: clamp(48px, 6.5vw, 88px);
  margin-block: clamp(-44px, -3.25vw, -24px);
  line-height: 0;
  pointer-events: none;
}

.seam-divider svg {
  display: block;
  width: 100%;
  height: 100%;
}

body[dir="rtl"] .seam-divider svg { transform: scaleX(-1); }

/* Keep section content above the absolute divider */
.products-section > .container,
.cta-section > .container {
  position: relative;
  z-index: 3;
}

/* A little extra bottom breathing room on sections that own a wave,
   so cards/CTAs don't crowd the curve. */
.products-section,
.cta-section {
  padding-bottom: calc(var(--section-pad) + 1.5rem);
}

/* ===== Product Category Section ===== */
.products-section {
  background: var(--color-cream);
  position: relative;
  overflow: hidden;
}

/* First product section sits flush against the page-header's cream
   curve so its title appears directly under the brown arch instead
   of after a tall padding gap. Negative margin pulls it upward into
   the cream curve area of the page-header above. */
#products {
  padding-top: 0;
  margin-top: -4rem;
  position: relative;
  z-index: 2;
}

.products-section.alt {
  background: linear-gradient(180deg, var(--color-cream-warm) 0%, var(--color-cream) 100%);
  padding-top: 0;
  margin-top: -4rem;
  position: relative;
  z-index: 2;
}

/* When the first product section sits directly after a page-header
   (products.html), don't pull it up over the page-header's arch —
   the page-header has its own SVG curve that needs to stay fully
   visible, identical to about/contact/clients pages. The negative
   margin above is meant for index.html where #products follows the
   hero (no arch). */
.page-header + #products,
.page-header + .products-section.alt {
  margin-top: 0;
  padding-top: var(--section-pad, 4rem);
}

.products-section.dark {
  background: var(--gradient-luxury);
}

.products-section.dark .section-title,
.products-section.dark .section-subtitle {
  color: var(--color-cream);
}

.products-section.dark .section-subtitle {
  color: rgba(250, 247, 242, 0.8);
}

/* Pop Corn — light cream treatment (#f9f5ee). Keeps the gourmet cards
   but recolors them for a light background so they stay readable and
   consistent with the other cream product sections. */
.products-section.pop-light {
  background: #f9f5ee;
}

.pop-light .gourmet-card {
  background: linear-gradient(135deg, #ffffff 0%, #f6efe2 100%);
  border-color: rgba(201, 169, 97, 0.32);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow:
    0 18px 40px rgba(90, 58, 34, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.pop-light .gourmet-card:hover {
  border-color: rgba(201, 169, 97, 0.55);
  box-shadow:
    0 30px 60px rgba(90, 58, 34, 0.2),
    0 0 0 1px rgba(201, 169, 97, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.pop-light .gourmet-card__title { color: var(--color-text); }
.pop-light .gourmet-card__desc { color: var(--color-text-muted); }

.pop-light .gourmet-card__eyebrow {
  background: rgba(201, 169, 97, 0.16);
  border-color: rgba(201, 169, 97, 0.45);
  color: #97772f;
}

.pop-light .gourmet-size {
  border-color: rgba(90, 58, 34, 0.3);
  background: rgba(90, 58, 34, 0.04);
  color: var(--color-text);
}

.pop-light .gourmet-size:hover {
  border-color: var(--color-gold);
  background: rgba(201, 169, 97, 0.12);
  color: var(--color-brown);
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
  max-width: 1300px;
  margin: 0 auto;
}

.product-card {
  position: relative;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 2.5rem 1.75rem;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: all 0.5s var(--ease-elegant);
  overflow: hidden;
  cursor: pointer;
  transform-style: preserve-3d;
}

.products-section.dark .product-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(201, 169, 97, 0.2);
  backdrop-filter: blur(10px);
}

.product-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--gradient-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease-elegant);
}

body[dir="rtl"] .product-card::before {
  transform-origin: right;
}

.product-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(201, 169, 97, 0.12), transparent 60%);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}

.product-card:hover {
  transform: translateY(-12px);
  box-shadow: var(--shadow-xl);
}

.product-card:hover::before {
  transform: scaleX(1);
}

.product-card:hover::after {
  opacity: 1;
}

.product-image-wrap {
  width: 180px;
  height: 180px;
  margin: 0 auto 1.5rem;
  position: relative;
  transition: transform 0.5s var(--ease-bounce);
}

.product-card:hover .product-image-wrap {
  transform: translateY(-8px) scale(1.05);
}

.product-bag {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--gradient-gold);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 20px 40px rgba(201, 169, 97, 0.3),
    inset 0 -10px 20px rgba(90, 58, 34, 0.2),
    inset 0 10px 20px rgba(255, 255, 255, 0.3);
  overflow: hidden;
}

.product-bag::before {
  content: '';
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  border: 1.5px dashed rgba(42, 24, 16, 0.2);
}

.product-bag::after {
  content: '';
  position: absolute;
  inset: 25%;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.4), transparent 60%);
}

.product-bag svg {
  width: 50%;
  height: 50%;
  position: relative;
  z-index: 2;
  color: var(--color-brown-darkest);
}

/* Flavor variants */
.product-bag.classic { background: linear-gradient(135deg, #E5C998 0%, #C9A961 100%); }
.product-bag.cheese { background: linear-gradient(135deg, #F7D560 0%, #E8A030 100%); }
.product-bag.chili { background: linear-gradient(135deg, #E84A2F 0%, #B82E18 100%); }
.product-bag.bbq { background: linear-gradient(135deg, #8B4513 0%, #5A2810 100%); }
.product-bag.salt { background: linear-gradient(135deg, #C9D8E8 0%, #6B8FAB 100%); }
.product-bag.sourcream { background: linear-gradient(135deg, #F5E8C8 0%, #C9A961 100%); }
.product-bag.onion { background: linear-gradient(135deg, #D8C0A0 0%, #8B6240 100%); }
.product-bag.spicy { background: linear-gradient(135deg, #FF6B35 0%, #D9351A 100%); }
.product-bag.honey { background: linear-gradient(135deg, #FFD93D 0%, #C9851D 100%); }
.product-bag.tomato { background: linear-gradient(135deg, #E84A4A 0%, #A02828 100%); }
.product-bag.pepper { background: linear-gradient(135deg, #4A8B3D 0%, #2A5A20 100%); }
.product-bag.ketchup { background: linear-gradient(135deg, #E84A2F 0%, #8B1810 100%); }

.product-name {
  font-family: var(--font-en);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--color-brown-dark);
  margin-bottom: 0.5rem;
}

body[dir="rtl"] .product-name {
  font-family: var(--font-ar);
}

.products-section.dark .product-name {
  color: var(--color-cream);
}

.product-flavor {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.products-section.dark .product-flavor {
  color: var(--color-gold-light);
}

.product-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.85rem;
  background: var(--color-bg-alt);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-brown);
  letter-spacing: 0.05em;
}

.products-section.dark .product-meta {
  background: rgba(201, 169, 97, 0.15);
  color: var(--color-gold-light);
}

/* ===== Fresh Product Cards (Timeless Originals) =====
   Colored header with the bag image overhanging the top, white
   body underneath with name, rating, pack/size and a gold +
   action button. Tones differ per card via [data-tone]. */
.products-fresh-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.25rem, 2vw, 2rem);
  max-width: 1300px;
  margin: 0 auto;
  padding-top: 5rem;
}

@media (max-width: 1024px) {
  .products-fresh-grid { grid-template-columns: repeat(2, 1fr); max-width: 720px; }
}
@media (max-width: 480px) {
  .products-fresh-grid { grid-template-columns: 1fr; max-width: 320px; gap: 1.5rem; }
}

.product-card-fresh {
  position: relative;
  border-radius: 28px;
  padding: 0;
  box-shadow: 0 12px 28px rgba(42, 24, 16, 0.08);
  cursor: pointer;
  transition:
    transform 0.55s var(--ease-elegant),
    box-shadow 0.55s var(--ease-elegant);
  isolation: isolate;
}

/* Per-card tinted header أ¢â‚¬â€‌ soft warm tones that echo each bag */
.product-card-fresh[data-tone="lavender"] { background: #E8DDF1; }
.product-card-fresh[data-tone="caramel"]  { background: #F1E2C5; }
.product-card-fresh[data-tone="peach"]    { background: #FBE3C5; }
.product-card-fresh[data-tone="pearl"]    { background: #EAE3D2; }

.product-card-fresh:hover {
  transform: translateY(-10px);
  box-shadow: 0 28px 50px rgba(42, 24, 16, 0.16);
}

/* Header (the tinted top zone where the bag floats) */
.product-card-fresh__header {
  position: relative;
  height: 140px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: visible;
}

/* Soft shadow puddle directly under the bag */
.product-card-fresh__header::after {
  content: '';
  position: absolute;
  bottom: 8px;
  left: 50%;
  width: 55%;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(42, 24, 16, 0.32), transparent 70%);
  transform: translateX(-50%);
  filter: blur(2px);
  transition: opacity 0.5s var(--ease-elegant), width 0.5s var(--ease-elegant);
  z-index: 0;
}

.product-card-fresh__picture {
  position: relative;
  top: -70px;
  width: auto;
  height: 220px;
  max-width: 90%;
  object-fit: contain;
  filter: drop-shadow(0 14px 18px rgba(42, 24, 16, 0.28));
  transition:
    transform 0.65s var(--ease-elegant),
    filter 0.55s var(--ease-elegant);
  transform-origin: 50% 90%;
  z-index: 1;
}

.product-card-fresh:nth-child(even) .product-card-fresh__picture { transform: rotate(4deg); }
.product-card-fresh:nth-child(odd) .product-card-fresh__picture  { transform: rotate(-4deg); }

.product-card-fresh:hover .product-card-fresh__picture {
  transform: rotate(-2deg) translateY(-10px) scale(1.06);
  filter: drop-shadow(0 24px 26px rgba(42, 24, 16, 0.38));
}
.product-card-fresh:nth-child(even):hover .product-card-fresh__picture {
  transform: rotate(2deg) translateY(-10px) scale(1.06);
}
.product-card-fresh:hover .product-card-fresh__header::after {
  width: 65%;
  opacity: 0.75;
}

/* White body underneath */
.product-card-fresh__body {
  background: var(--color-white);
  border-radius: 28px;
  padding: 1.25rem 1.25rem 1.35rem;
  position: relative;
  z-index: 2;
}

.product-card-fresh__name {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--color-brown-darkest);
  margin: 0 0 0.4rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
body[dir="rtl"] .product-card-fresh__name { font-family: var(--font-ar); }

.product-card-fresh__stars {
  display: flex;
  align-items: center;
  gap: 2px;
  color: var(--color-gold);
  font-family: var(--font-en-body);
  font-size: 0.72rem;
  margin: 0 0 1.4rem;
}
.product-card-fresh__stars svg {
  width: 11px;
  height: 11px;
}
.product-card-fresh__count {
  margin-inline-start: 6px;
  color: var(--color-text-muted);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.product-card-fresh__bottom-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}

.product-card-fresh__price {
  font-family: var(--font-en);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-brown-darkest);
  margin: 0;
  letter-spacing: -0.01em;
}
body[dir="rtl"] .product-card-fresh__price { font-family: var(--font-ar); }

.product-card-fresh__add {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--gradient-gold);
  color: var(--color-brown-darkest);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(201, 169, 97, 0.4);
  transition:
    transform 0.4s var(--ease-elegant),
    box-shadow 0.4s var(--ease-elegant),
    background 0.4s var(--ease-elegant);
}
.product-card-fresh__add svg { width: 16px; height: 16px; }

.product-card-fresh:hover .product-card-fresh__add,
.product-card-fresh__add:hover {
  transform: rotate(90deg) scale(1.1);
  box-shadow: 0 10px 22px rgba(201, 169, 97, 0.55);
}

@media (max-width: 1024px) {
  .product-card-fresh__header { height: 130px; }
  .product-card-fresh__picture { height: 200px; top: -65px; }
}
@media (max-width: 480px) {
  .product-card-fresh__header { height: 150px; }
  .product-card-fresh__picture { height: 230px; top: -70px; max-width: 80%; }
  .product-card-fresh__name { font-size: 1.05rem; }
}

@media (prefers-reduced-motion: reduce) {
  .product-card-fresh,
  .product-card-fresh__picture,
  .product-card-fresh__add,
  .product-card-fresh__header::after { transition: none; }
  .product-card-fresh:hover { transform: none; }
  .product-card-fresh:hover .product-card-fresh__picture { transform: rotate(-4deg); }
  .product-card-fresh:nth-child(even):hover .product-card-fresh__picture { transform: rotate(4deg); }
}

/* ===== Corn Puff Overview (homepage intro) =====
   A clean two-column composition: a single product visual on one side
   with a soft gold halo and concentric rings, and a vertical list of
   the three core ingredients on the other side. Stacks on mobile. */
.product-overview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  max-width: 1200px;
  margin: 4rem auto 0;
}

.product-overview__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 480px;
  padding: 1.5rem;
}

.product-overview__halo {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(201, 169, 97, 0.28) 0%, rgba(201, 169, 97, 0.10) 45%, transparent 70%);
  filter: blur(24px);
  z-index: 0;
}

.product-overview__rings {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.product-overview__rings span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1.5px solid rgba(201, 169, 97, 0.22);
}

.product-overview__rings span:nth-child(1) { width: 58%; aspect-ratio: 1; }
.product-overview__rings span:nth-child(2) { width: 74%; aspect-ratio: 1; border-color: rgba(201, 169, 97, 0.15); }
.product-overview__rings span:nth-child(3) { width: 92%; aspect-ratio: 1; border-color: rgba(201, 169, 97, 0.08); }

.product-overview__image {
  position: relative;
  z-index: 1;
  display: block;
  max-width: 100%;
  max-height: 460px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 22px 44px rgba(42, 24, 16, 0.22));
  transition: transform 0.6s var(--ease-elegant);
}

.product-overview__visual:hover .product-overview__image {
  transform: translateY(-8px) scale(1.02);
}

.product-overview__details {
  padding: 1.5rem 0;
}

.product-overview__eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 0.75rem;
}

.product-overview__title {
  font-family: var(--font-en);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 700;
  color: var(--color-brown-darkest);
  line-height: 1.25;
  margin: 0 0 1.75rem;
}

.product-ingredients {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.product-ingredient {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.1rem 1.4rem;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(201, 169, 97, 0.22);
  border-radius: 16px;
  transition: transform 0.35s var(--ease-elegant),
              border-color 0.35s var(--ease-elegant),
              background 0.35s var(--ease-elegant),
              box-shadow 0.35s var(--ease-elegant);
}

.product-ingredient:hover {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(201, 169, 97, 0.5);
  transform: translateX(4px);
  box-shadow: 0 14px 32px rgba(42, 24, 16, 0.08);
}

body[dir="rtl"] .product-ingredient:hover {
  transform: translateX(-4px);
}

.product-ingredient__icon {
  flex: 0 0 50px;
  width: 50px;
  height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient-gold);
  color: var(--color-brown-darkest);
  border-radius: 50%;
  box-shadow: 0 8px 18px rgba(201, 169, 97, 0.35);
}

.product-ingredient__icon svg {
  width: 24px;
  height: 24px;
}

.product-ingredient__text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.product-ingredient__name {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-brown-darkest);
  margin: 0;
  line-height: 1.3;
}

.product-ingredient__sub {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin: 0;
  font-style: italic;
}

.product-overview__cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(2rem, 4vw, 3rem);
}

/* ===== Flavor Showcase (Bold & Daring) =====
   Three-column composition: copy on the left, a large featured bag
   in the middle, and a vertical thumbnail strip on the right. Click
   a thumbnail to crossfade the bag and swap the descriptive copy. */
.flavor-showcase {
  position: relative; /* anchors the absolutely-positioned mascot avatar */
  display: grid;
  /* Symmetric: avatar column on the left mirrors the thumbs cluster
     on the right so left/right margins stay equal. */
  grid-template-columns: 320px 1fr 1.05fr 320px;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
  min-height: 520px;
}

/* --- Left: text details --- */
.flavor-showcase__details {
  position: relative;
}

.flavor-showcase__details > * {
  transition: opacity 0.35s var(--ease-elegant), transform 0.45s var(--ease-elegant);
}

.flavor-showcase.is-swapping .flavor-showcase__details > * {
  opacity: 0;
  transform: translateY(10px);
}

.flavor-showcase__eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 1rem;
  background: rgba(201, 169, 97, 0.14);
  border: 1px solid rgba(201, 169, 97, 0.4);
  border-radius: 999px;
  color: var(--color-brown-dark);
  font-family: var(--font-en-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}
body[dir="rtl"] .flavor-showcase__eyebrow {
  font-family: var(--font-ar-body);
  letter-spacing: 0;
}

.flavor-showcase__title {
  font-family: var(--font-en);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 700;
  color: var(--color-brown-darkest);
  line-height: 1.05;
  margin: 0 0 0.6rem;
  letter-spacing: -0.02em;
}
body[dir="rtl"] .flavor-showcase__title { font-family: var(--font-ar); }

.flavor-showcase__sub {
  font-family: var(--font-en-body);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-gold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 1.3rem;
}
body[dir="rtl"] .flavor-showcase__sub {
  font-family: var(--font-ar-body);
  letter-spacing: 0;
}

.flavor-showcase__desc {
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--color-text-muted);
  max-width: 480px;
  margin: 0 0 1.8rem;
}

/* --- Size selector (S / M / L) --- */
.flavor-sizes {
  display: inline-flex;
  gap: 0.85rem;
  margin-top: 0.5rem;
}

.flavor-size {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1.5px solid rgba(201, 169, 97, 0.4);
  background: var(--color-white);
  color: var(--color-brown-dark);
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition:
    background 0.4s var(--ease-elegant),
    color 0.4s var(--ease-elegant),
    border-color 0.4s var(--ease-elegant),
    transform 0.4s var(--ease-elegant),
    box-shadow 0.4s var(--ease-elegant);
}
.flavor-size:hover {
  transform: translateY(-3px);
  border-color: var(--color-gold);
  color: var(--color-brown-darkest);
}
.flavor-size.is-active {
  background: var(--gradient-gold);
  border-color: var(--color-gold);
  color: var(--color-brown-darkest);
  transform: scale(1.12);
  box-shadow: 0 10px 24px rgba(201, 169, 97, 0.5);
}

/* --- Center: featured bag stage --- */
.flavor-showcase__stage {
  position: relative;
  height: 100%;
  min-height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  perspective: 1000px;
}

.flavor-showcase__halo {
  position: absolute;
  inset: 8% 5%;
  background: radial-gradient(circle at 50% 50%,
    rgba(201, 169, 97, 0.35) 0%,
    rgba(229, 201, 152, 0.18) 35%,
    transparent 70%);
  filter: blur(28px);
  z-index: 0;
  animation: flavorHalo 5s ease-in-out infinite alternate;
  transition: opacity 0.4s, transform 0.4s;
}

.flavor-showcase.is-swapping .flavor-showcase__halo {
  opacity: 1.4;
  transform: scale(1.25);
}

@keyframes flavorHalo {
  from { transform: scale(0.94); opacity: 0.85; }
  to   { transform: scale(1.08); opacity: 1;    }
}

/* Concentric rings أ¢â‚¬â€‌ echo the brand's golden ripples */
.flavor-showcase__rings {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 0;
  pointer-events: none;
}
.flavor-showcase__rings span {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid rgba(201, 169, 97, 0.22);
}
.flavor-showcase__rings span:nth-child(1) { width: 70%; aspect-ratio: 1; }
.flavor-showcase__rings span:nth-child(2) { width: 88%; aspect-ratio: 1; opacity: 0.6; }
.flavor-showcase__rings span:nth-child(3) { width: 104%; aspect-ratio: 1; opacity: 0.32; border-style: dashed; }

/* Wrapper handles the idle float so the swap animation on the
   inner <img> can spin/scale independently. The --bag-scale CSS
   variable is set by the active size button (S/M/L) and composed
   into the float keyframe so both animate cleanly together. */
.flavor-showcase__bag-wrap {
  --bag-scale: 1;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  animation: flavorBagFloat 7s ease-in-out infinite;
  transform-style: preserve-3d;
}

/* Size-driven scaling: S=smaller, M=medium, L=larger */
.flavor-showcase__stage[data-size="S"] .flavor-showcase__bag-wrap { --bag-scale: 0.88; }
.flavor-showcase__stage[data-size="M"] .flavor-showcase__bag-wrap { --bag-scale: 1;    }
.flavor-showcase__stage[data-size="L"] .flavor-showcase__bag-wrap { --bag-scale: 1.12; }

@keyframes flavorBagFloat {
  0%, 100% { transform: translateY(0)     rotate(-2deg) scale(var(--bag-scale, 1)); }
  50%      { transform: translateY(-12px) rotate( 2deg) scale(var(--bag-scale, 1)); }
}

.flavor-showcase__bag {
  height: 88%;
  max-height: 480px;
  max-width: 78%;
  width: auto;
  object-fit: contain;
  /* Chroma-key the JPG/WebP white background to real transparency,
     then drop-shadow traces the actual bag silhouette. */
  filter:
    url(#shaoub-chromakey-white)
    drop-shadow(0 28px 44px rgba(42, 24, 16, 0.4));
  transform-origin: center;
  will-change: transform, opacity;
}

/* "Vortex out" + "bounce in" sequence on swap.
   JS toggles .is-swapping (out) then .is-entering (in). */
.flavor-showcase.is-swapping .flavor-showcase__bag {
  animation: bagSwapOut 0.34s ease-in forwards;
}
.flavor-showcase.is-entering .flavor-showcase__bag {
  animation: bagSwapIn 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes bagSwapOut {
  0%   { transform: rotate(0)     scale(1)    translateY(0);   opacity: 1; }
  100% { transform: rotate(360deg) scale(0.25) translateY(20px); opacity: 0; }
}

@keyframes bagSwapIn {
  0%   { transform: rotate(-220deg) scale(0.35) translateY(-40px); opacity: 0; }
  55%  { transform: rotate(12deg)   scale(1.12) translateY(-4px);  opacity: 1; }
  100% { transform: rotate(0)       scale(1)    translateY(0);     opacity: 1; }
}

/* --- Right: thumbnail cluster — bags scattered freely in 2D --- */
.flavor-thumbs {
  position: relative;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  min-height: 660px;
  overflow: visible;
}

.flavor-thumbs li {
  position: absolute;
  width: 100px;
  height: 128px;
  transform: translate(-50%, -50%);
}

/* Three-column grid of anchor points — bags fall into 3 cols أ— 3 rows,
   evenly distributed so the three rows read cleanly one above the other.
   The inner thumb's tilt still adds gentle organic variation. */
.flavor-thumbs li:nth-child(1) { top: 17%; left: 18%; }
.flavor-thumbs li:nth-child(2) { top: 17%; left: 50%; }
.flavor-thumbs li:nth-child(3) { top: 17%; left: 82%; }
.flavor-thumbs li:nth-child(4) { top: 50%; left: 18%; }
.flavor-thumbs li:nth-child(5) { top: 50%; left: 50%; }
.flavor-thumbs li:nth-child(6) { top: 50%; left: 82%; }
.flavor-thumbs li:nth-child(7) { top: 83%; left: 18%; }
.flavor-thumbs li:nth-child(8) { top: 83%; left: 50%; }
.flavor-thumbs li:nth-child(9) { top: 83%; left: 82%; }

.flavor-thumb {
  --tilt: 0deg;
  --offset-x: 0px;
  --offset-y: 0px;
  --scale: 1;
  position: relative;
  display: block;
  width: 118px;
  height: 150px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  transform: translate(var(--offset-x), var(--offset-y)) rotate(var(--tilt)) scale(var(--scale));
  transition: transform 0.55s var(--ease-elegant), filter 0.4s var(--ease-elegant);
}

/* Even two-row distribution — anchor points place the bags evenly; the
   tilt-only variation keeps the hand-tossed feel without breaking the rows. */
.flavor-thumbs li:nth-child(1) .flavor-thumb { --tilt: -10deg; --offset-x: 0; --offset-y: 0; --scale: 1; }
.flavor-thumbs li:nth-child(2) .flavor-thumb { --tilt:   6deg; --offset-x: 0; --offset-y: 0; --scale: 1; }
.flavor-thumbs li:nth-child(3) .flavor-thumb { --tilt:  -4deg; --offset-x: 0; --offset-y: 0; --scale: 1; }
.flavor-thumbs li:nth-child(4) .flavor-thumb { --tilt:   8deg; --offset-x: 0; --offset-y: 0; --scale: 1; }
.flavor-thumbs li:nth-child(5) .flavor-thumb { --tilt:  -6deg; --offset-x: 0; --offset-y: 0; --scale: 1; }
.flavor-thumbs li:nth-child(6) .flavor-thumb { --tilt:   4deg; --offset-x: 0; --offset-y: 0; --scale: 1; }
.flavor-thumbs li:nth-child(7) .flavor-thumb { --tilt:  -8deg; --offset-x: 0; --offset-y: 0; --scale: 1; }
.flavor-thumbs li:nth-child(8) .flavor-thumb { --tilt:   5deg; --offset-x: 0; --offset-y: 0; --scale: 1; }
.flavor-thumbs li:nth-child(9) .flavor-thumb { --tilt:  -5deg; --offset-x: 0; --offset-y: 0; --scale: 1; }

.flavor-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Chroma-key the white photo background to transparent so the
     thumbnail shows just the bag silhouette. */
  filter:
    url(#shaoub-chromakey-white)
    drop-shadow(0 14px 18px rgba(42, 24, 16, 0.28));
  animation: thumbBob 4.5s ease-in-out infinite;
  transition: filter 0.35s;
}
.flavor-thumbs li:nth-child(1) .flavor-thumb img { animation-delay: 0s;   }
.flavor-thumbs li:nth-child(2) .flavor-thumb img { animation-delay: -0.75s; }
.flavor-thumbs li:nth-child(3) .flavor-thumb img { animation-delay: -1.5s;  }
.flavor-thumbs li:nth-child(4) .flavor-thumb img { animation-delay: -2.25s; }
.flavor-thumbs li:nth-child(5) .flavor-thumb img { animation-delay: -3.0s;  }
.flavor-thumbs li:nth-child(6) .flavor-thumb img { animation-delay: -3.75s; }
.flavor-thumbs li:nth-child(7) .flavor-thumb img { animation-delay: -4.5s;  }
.flavor-thumbs li:nth-child(8) .flavor-thumb img { animation-delay: -5.25s; }
.flavor-thumbs li:nth-child(9) .flavor-thumb img { animation-delay: -6.0s;  }

/* Tighten thumb size now that there are 6 of them in the column */
.flavor-thumb { width: 100px; height: 128px; }

/* ===== Mascot avatar — slides in from screen-left, anchored beside details =====
   Three nested layers so the three animations (vertical centering,
   slide-in, idle float) don't fight over `transform`. */
.flavor-showcase__avatar-wrap {
  position: relative;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 1;
  z-index: 5;
  pointer-events: none;
  justify-self: center;
}
/* Avatar now lives inside its own grid column, so no RTL mirroring needed. */

.flavor-showcase__avatar-slide {
  width: 100%;
  height: 100%;
  animation: avatarSlideIn 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both;
}

body[dir="rtl"] .flavor-showcase__avatar-slide {
  animation-name: avatarSlideInRtl;
}

.flavor-showcase__avatar-float {
  width: 100%;
  height: 100%;
  animation: avatarFloat 6s ease-in-out infinite;
  animation-delay: 1.5s;
  will-change: transform;
}

@keyframes avatarSlideIn {
  from { transform: translateX(-100vw); opacity: 0; }
  to   { transform: translateX(0);      opacity: 1; }
}

@keyframes avatarSlideInRtl {
  from { transform: translateX(100vw); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}

@keyframes avatarFloat {
  0%, 100% { transform: translateY(0)    rotate(-3deg); }
  50%      { transform: translateY(-8px) rotate(3deg); }
}

/* Glow halo removed — avatar floats without a container backdrop. */
.flavor-showcase__avatar-glow { display: none; }

.flavor-showcase__avatar {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Chroma-key the photo's white background to transparent, then drop
     a soft shadow that traces the character silhouette so it floats. */
  filter:
    url(#shaoub-chromakey-white)
    drop-shadow(0 14px 18px rgba(42, 24, 16, 0.35));
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 0.35s ease;
}

/* On narrow viewports there's no room to the left of the details column,
   so dock the avatar above the title and shrink it. */
@media (max-width: 768px) {
  .flavor-showcase__avatar-wrap,
  body[dir="rtl"] .flavor-showcase__avatar-wrap {
    position: static;
    width: clamp(200px, 48vw, 300px);
    transform: none;
    margin: 0 auto 1rem;
  }
  .flavor-showcase__avatar-slide,
  body[dir="rtl"] .flavor-showcase__avatar-slide {
    animation-duration: 0.9s;
  }
}

.flavor-showcase.is-swapping .flavor-showcase__avatar {
  transform: scale(0.6) rotate(-180deg);
  opacity: 0;
}

.flavor-showcase.is-entering .flavor-showcase__avatar {
  animation: avatarSwapIn 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes avatarSwapIn {
  0%   { transform: scale(0.5) rotate(180deg); opacity: 0; }
  60%  { transform: scale(1.1) rotate(-10deg); opacity: 1; }
  100% { transform: scale(1)   rotate(0deg);   opacity: 1; }
}

@keyframes thumbBob {
  0%, 100% { transform: translateY(0)    rotate(0deg); }
  25%      { transform: translateY(-5px) rotate(2deg); }
  75%      { transform: translateY(3px)  rotate(-2deg); }
}

.flavor-thumb:hover { --scale: 1.1; }
.flavor-thumb:hover img {
  filter: url(#shaoub-chromakey-white)
          drop-shadow(0 18px 26px rgba(42, 24, 16, 0.4))
          drop-shadow(0 0 16px rgba(201, 169, 97, 0.4));
}

.flavor-thumb.is-active { --scale: 1.18; }
.flavor-thumb.is-active img {
  filter: url(#shaoub-chromakey-white)
          drop-shadow(0 22px 32px rgba(42, 24, 16, 0.45))
          drop-shadow(0 0 22px rgba(201, 169, 97, 0.55));
}
.flavor-thumb.is-active::after {
  content: '';
  position: absolute;
  inset-inline-start: -14px;
  top: 50%;
  width: 4px;
  height: 38px;
  background: var(--gradient-gold);
  border-radius: 99px;
  transform: translateY(-50%);
  box-shadow: 0 0 14px rgba(201, 169, 97, 0.7);
}

/* --- Responsive --- */
@media (max-width: 1024px) {
  .flavor-showcase {
    grid-template-columns: 1fr 90px;
    grid-template-areas:
      "stage   thumbs"
      "details details";
    gap: 2rem;
  }
  .flavor-showcase__details { grid-area: details; text-align: center; }
  .flavor-showcase__details .flavor-showcase__desc { margin-inline: auto; }
  .flavor-showcase__details .flavor-showcase__actions { justify-content: center; }
  .flavor-showcase__stage   { grid-area: stage; min-height: 380px; }
  .flavor-thumbs            { grid-area: thumbs; }
  .flavor-showcase__bag     { max-height: 360px; }
}

@media (max-width: 768px) {
  /* ===== Corn Puff — hero-style campaign composition (mobile) =====
     The active flavor is the large, centered focal bag; every other
     flavor fans out to its left and right in depth tiers — nearer bags
     larger and in front, farther ones smaller, dimmer, and tucked
     BEHIND the hero for an overlapping, premium 3D advertising feel.
     The supporting bags stay fully tappable (tap one to promote it to
     the hero), so the flavor switcher still works on mobile. */
  .flavor-showcase {
    grid-template-columns: 1fr;
    grid-template-areas:
      "avatar"
      "stage"
      "details";
    align-items: stretch;
    gap: 1.5rem;
    min-height: 0;
  }

  .flavor-showcase__avatar-wrap,
  body[dir="rtl"] .flavor-showcase__avatar-wrap { grid-area: avatar; align-self: center; }

  /* Hero bag: the focal point, sitting in front of the supporting bags.
     pointer-events:none is critical — the stage's full-width box overlays
     the thumbnails behind it, so without this it would swallow every tap
     and the side bags would be unclickable on mobile. The bag/halo/rings
     are decorative and need no clicks; taps fall through to the thumbs. */
  .flavor-showcase__stage {
    grid-area: stage;
    min-height: clamp(380px, 96vw, 470px);
    z-index: 2;
    pointer-events: none;
  }
  .flavor-showcase__bag { max-height: 300px; max-width: 56%; }

  /* Supporting bags overlay the hero's cell and scatter around it */
  .flavor-thumbs {
    grid-area: stage;
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
    z-index: 1;            /* behind the hero bag */
    display: block;        /* cancel the desktop flex/scatter */
    pointer-events: none;  /* only the bags themselves catch taps */
  }
  .flavor-thumbs li {
    position: absolute;
    width: 84px;
    height: 106px;
    transform: translate(-50%, -50%);
    pointer-events: auto;
  }
  .flavor-thumb { width: 100%; height: 100%; }

  /* Left cluster */
  .flavor-thumbs li:nth-child(1) { top: 32%; left: 15%; z-index: 6; }
  .flavor-thumbs li:nth-child(3) { top: 60%; left: 10%; z-index: 5; }
  .flavor-thumbs li:nth-child(5) { top: 82%; left: 24%; z-index: 4; }
  .flavor-thumbs li:nth-child(7) { top: 12%; left: 27%; z-index: 3; }
  /* Right cluster */
  .flavor-thumbs li:nth-child(2) { top: 32%; left: 85%; z-index: 6; }
  .flavor-thumbs li:nth-child(4) { top: 60%; left: 90%; z-index: 5; }
  .flavor-thumbs li:nth-child(6) { top: 82%; left: 76%; z-index: 4; }
  .flavor-thumbs li:nth-child(8) { top: 12%; left: 73%; z-index: 3; }
  /* Deep back, peeking above the hero */
  .flavor-thumbs li:nth-child(9) { top: 3%; left: 50%; z-index: 1; }

  /* Depth tiers — override only --scale (per-child --tilt is kept for
     organic rotation), so nearer bags read larger than farther ones. */
  .flavor-thumbs li:nth-child(1) .flavor-thumb,
  .flavor-thumbs li:nth-child(2) .flavor-thumb { --scale: 1; }
  .flavor-thumbs li:nth-child(3) .flavor-thumb,
  .flavor-thumbs li:nth-child(4) .flavor-thumb { --scale: 0.85; }
  .flavor-thumbs li:nth-child(5) .flavor-thumb,
  .flavor-thumbs li:nth-child(6) .flavor-thumb { --scale: 0.76; }
  .flavor-thumbs li:nth-child(7) .flavor-thumb,
  .flavor-thumbs li:nth-child(8) .flavor-thumb { --scale: 0.68; }
  .flavor-thumbs li:nth-child(9) .flavor-thumb { --scale: 0.58; }

  /* Fade the deeper bags so they support without competing */
  .flavor-thumbs li:nth-child(5) .flavor-thumb img,
  .flavor-thumbs li:nth-child(6) .flavor-thumb img { opacity: 0.9; }
  .flavor-thumbs li:nth-child(7) .flavor-thumb img,
  .flavor-thumbs li:nth-child(8) .flavor-thumb img { opacity: 0.8; }
  .flavor-thumbs li:nth-child(9) .flavor-thumb img { opacity: 0.6; }

  /* The active flavor is already shown large as the hero — drop the side pip */
  .flavor-thumb.is-active::after { display: none; }
}

/* The flavor showcase intentionally keeps its full swap motion even when the
   OS requests reduced motion (product decision), so there is deliberately no
   prefers-reduced-motion override for it here. */

/* ===== Gourmet Cards (Crafted with Distinction) =====
   Glass-style cards on the dark luxury background. The product bag
   image sits in the upper-right and extends out of the card frame.
   Each card supports a 3D mouse-tilt hover, driven by JS that writes
   CSS variables (--rx, --ry) onto the card element. */
.gourmet-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.75rem, 3.5vw, 3rem);
  max-width: 1280px;
  margin: 0 auto;
  padding-top: 3rem;
  perspective: 1400px;
}

.gourmet-card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 200px;
  align-items: center;
  gap: 1rem;
  padding: 2.25rem 2rem 2.25rem 2.25rem;
  min-height: 280px;
  background:
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.08) 0%,
      rgba(255, 255, 255, 0.03) 100%);
  border: 1px solid rgba(201, 169, 97, 0.25);
  border-radius: 28px;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  isolation: isolate;
  overflow: visible;
  transform-style: preserve-3d;
  transition: transform 0.55s var(--ease-elegant),
              box-shadow 0.55s var(--ease-elegant),
              border-color 0.5s ease;
  --rx: 0deg;
  --ry: 0deg;
}

/* Subtle gold halo behind the card on hover */
.gourmet-card::before {
  content: '';
  position: absolute;
  inset: 20% -8% -8% 20%;
  background: radial-gradient(circle at 65% 65%,
    rgba(201, 169, 97, 0.35), transparent 60%);
  z-index: -1;
  opacity: 0;
  filter: blur(40px);
  transition: opacity 0.6s var(--ease-elegant);
}

.gourmet-card:hover {
  border-color: rgba(201, 169, 97, 0.5);
  box-shadow:
    0 30px 60px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(201, 169, 97, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transform: perspective(1400px) rotateX(var(--rx)) rotateY(var(--ry));
}

.gourmet-card:hover::before { opacity: 1; }

/* --- Media (bag) أ¢â‚¬â€‌ floats above the card with a 3D ground shadow --- */
.gourmet-card__media {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
  transform: translateZ(60px);
  z-index: 2;
}

/* Ground shadow on the card surface أ¢â‚¬â€‌ flat ellipse the bag appears
   to cast onto the card. Sits BEHIND the bag (negative Z) and
   stretches/softens on hover to amplify the floating lift. */
.gourmet-card__media::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 10%;
  width: 65%;
  height: 18px;
  background: radial-gradient(ellipse at center,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.25) 45%,
    transparent 75%);
  filter: blur(7px);
  transform: translateX(-50%) translateZ(-50px);
  z-index: -1;
  pointer-events: none;
  transition: width 0.6s var(--ease-elegant),
              height 0.6s var(--ease-elegant),
              opacity 0.6s var(--ease-elegant),
              filter 0.6s var(--ease-elegant);
}

.gourmet-card__bag {
  width: auto;
  height: auto;
  max-height: 360px;
  max-width: 100%;
  margin-top: -3rem;
  margin-bottom: -3rem;
  margin-inline-end: -2rem;
  object-fit: contain;
  /* Three layered shadows for elevation:
     1. tight contact shadow (close, sharp) أ¢â‚¬â€‌ anchors to the card
     2. main lift shadow (mid-distance, soft) أ¢â‚¬â€‌ bulk of the depth
     3. ambient gold halo أ¢â‚¬â€‌ premium accent */
  filter:
    drop-shadow(0 6px 8px rgba(0, 0, 0, 0.45))
    drop-shadow(0 28px 32px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 28px rgba(201, 169, 97, 0.22));
  transform: rotate(-6deg) translateZ(30px) scale(var(--bag-scale, 1));
  transform-origin: 60% 70%;
  transition: transform 0.7s var(--ease-elegant),
              filter 0.55s var(--ease-elegant);
}

.gourmet-card:nth-child(even) .gourmet-card__bag {
  transform: rotate(6deg) translateZ(30px) scale(var(--bag-scale, 1));
}

.gourmet-card:hover .gourmet-card__bag {
  /* Lift higher, push further forward in 3D, scale up slightly.
     Hover scale is multiplied with the size-driven --bag-scale so
     S/M/L all get the same proportional hover boost. */
  transform: rotate(-2deg) translateY(-18px) translateZ(70px) scale(calc(var(--bag-scale, 1) * 1.08));
  filter:
    drop-shadow(0 10px 14px rgba(0, 0, 0, 0.5))
    drop-shadow(0 44px 44px rgba(0, 0, 0, 0.7))
    drop-shadow(0 0 50px rgba(201, 169, 97, 0.5));
}

.gourmet-card:nth-child(even):hover .gourmet-card__bag {
  transform: rotate(2deg) translateY(-18px) translateZ(70px) scale(calc(var(--bag-scale, 1) * 1.08));
}

/* Bag scaling driven by the active S / M / L button. The size handler
   in gourmet-tilt.js writes data-size onto the card; CSS reads it and
   sets --bag-scale, which all four bag transforms above consume. */
.gourmet-card[data-size="S"] { --bag-scale: 0.85; }
.gourmet-card[data-size="M"] { --bag-scale: 1;    }
.gourmet-card[data-size="L"] { --bag-scale: 1.15; }

/* Ground shadow stretches and softens as the bag lifts */
.gourmet-card:hover .gourmet-card__media::after {
  width: 82%;
  height: 22px;
  filter: blur(10px);
  background: radial-gradient(ellipse at center,
    rgba(0, 0, 0, 0.5) 0%,
    rgba(0, 0, 0, 0.2) 45%,
    transparent 75%);
}

/* Soft moving sheen that follows the cursor across the bag */
.gourmet-card__shine {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(
    180px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 255, 255, 0.18),
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.4s var(--ease-elegant);
  z-index: 3;
  mix-blend-mode: screen;
}
.gourmet-card:hover .gourmet-card__shine { opacity: 1; }

/* --- Body text + buttons --- */
.gourmet-card__body {
  position: relative;
  transform: translateZ(20px);
  z-index: 1;
}

.gourmet-card__eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.9rem;
  background: rgba(201, 169, 97, 0.18);
  border: 1px solid rgba(201, 169, 97, 0.4);
  color: var(--color-gold-light);
  font-family: var(--font-en-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border-radius: 999px;
  margin-bottom: 1rem;
}
body[dir="rtl"] .gourmet-card__eyebrow {
  font-family: var(--font-ar-body);
  letter-spacing: 0;
}

.gourmet-card__title {
  position: relative;
  font-family: var(--font-en);
  font-size: clamp(1.6rem, 2.3vw, 2rem);
  font-weight: 700;
  color: var(--color-cream);
  line-height: 1.1;
  margin: 0 0 0.5rem;
  letter-spacing: -0.015em;
  padding-inline-start: 1rem;
}
body[dir="rtl"] .gourmet-card__title { font-family: var(--font-ar); }

/* Gold accent line on the title's start edge أ¢â‚¬â€‌ echoes the reference */
.gourmet-card__title::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 12%;
  bottom: 12%;
  width: 3px;
  border-radius: 99px;
  background: var(--gradient-gold);
  box-shadow: 0 0 12px rgba(201, 169, 97, 0.6);
}

.gourmet-card__sub {
  font-family: var(--font-en-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin: 0 0 0.95rem;
  padding-inline-start: 1rem;
}
body[dir="rtl"] .gourmet-card__sub {
  font-family: var(--font-ar-body);
  letter-spacing: 0;
}

.gourmet-card__desc {
  color: rgba(250, 247, 242, 0.78);
  font-size: 0.94rem;
  line-height: 1.65;
  margin: 0 0 1.4rem;
  max-width: 380px;
}

.gourmet-card__actions {
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
}

.gourmet-card__btn {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 1.2rem;
  border-radius: 999px;
  font-family: var(--font-en-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.4s var(--ease-elegant),
              background 0.4s var(--ease-elegant),
              color 0.4s var(--ease-elegant),
              border-color 0.4s var(--ease-elegant),
              box-shadow 0.4s var(--ease-elegant);
}
body[dir="rtl"] .gourmet-card__btn {
  font-family: var(--font-ar-body);
  letter-spacing: 0;
}

.gourmet-card__btn--primary {
  background: var(--gradient-gold);
  color: var(--color-brown-darkest);
  border: 1px solid transparent;
  box-shadow: 0 8px 20px rgba(201, 169, 97, 0.35);
}
.gourmet-card__btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(201, 169, 97, 0.5);
}

.gourmet-card__btn--ghost {
  background: transparent;
  color: var(--color-cream);
  border: 1px solid rgba(250, 247, 242, 0.4);
}
.gourmet-card__btn--ghost:hover {
  background: rgba(250, 247, 242, 0.08);
  border-color: var(--color-gold-light);
  color: var(--color-gold-light);
  transform: translateY(-2px);
}

/* Size selector group — three S/M/L circular buttons. Tuned for the
   dark gourmet card background, so the resting state stays visible
   without the heavy white fill used in the Flower section. */
.gourmet-card__sizes {
  display: inline-flex;
  gap: 0.75rem;
}

.gourmet-size {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid rgba(250, 247, 242, 0.35);
  background: rgba(250, 247, 242, 0.06);
  color: var(--color-cream);
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition:
    background 0.35s var(--ease-elegant),
    color 0.35s var(--ease-elegant),
    border-color 0.35s var(--ease-elegant),
    transform 0.35s var(--ease-elegant),
    box-shadow 0.35s var(--ease-elegant);
}

.gourmet-size:hover {
  transform: translateY(-2px);
  border-color: var(--color-gold-light);
  color: var(--color-gold-light);
  background: rgba(250, 247, 242, 0.1);
}

.gourmet-size.is-active {
  background: var(--gradient-gold);
  border-color: var(--color-gold);
  color: var(--color-brown-darkest);
  transform: scale(1.12);
  box-shadow: 0 10px 22px rgba(201, 169, 97, 0.5);
}

.gourmet-size:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
  .gourmet-grid {
    grid-template-columns: 1fr;
    max-width: 640px;
  }
  .gourmet-card {
    grid-template-columns: 1fr 180px;
    padding: 2rem 1.75rem;
  }
  .gourmet-card__bag { max-height: 300px; }
}

@media (max-width: 768px) {
  .gourmet-card {
    grid-template-columns: 1fr;
    grid-template-areas: "media" "body";
    padding-top: 0;
    padding-inline-end: 1.5rem;
    padding-inline-start: 1.5rem;
    padding-bottom: 2rem;
    /* Center the whole text block on mobile. The eyebrow badge, the
       size buttons (both inline-flex) and the title/sub/desc all centre
       via this. */
    text-align: center;
  }
  .gourmet-card__media {
    grid-area: media;
    min-height: 220px;
    margin-top: -2rem;
  }
  .gourmet-card__bag {
    max-height: 240px;
    margin: 0;
  }
  .gourmet-card__body { grid-area: body; transform: none; }
  /* Drop the title's left accent bar + its indent so the centered
     title sits balanced rather than offset to one side. */
  .gourmet-card__title { padding-inline-start: 0; }
  .gourmet-card__title::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .gourmet-card,
  .gourmet-card__bag,
  .gourmet-card__btn { transition: none; }
  .gourmet-card:hover { transform: none; }
  .gourmet-card:hover .gourmet-card__bag { transform: rotate(-6deg) scale(var(--bag-scale, 1)); }
  .gourmet-card:nth-child(even):hover .gourmet-card__bag { transform: rotate(6deg) scale(var(--bag-scale, 1)); }
}

/* ===== Coming Soon — Natural Potato Chips teaser =====
   A dark "vault" section that shows the upcoming bags heavily
   darkened, blurred and locked behind a veil to build curiosity.
   Visual language mirrors the dark gourmet (Pop Corn) cards. */
.reveal-section {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 0%, rgba(201, 169, 97, 0.12), transparent 55%),
    #faf7f2;
  overflow: hidden;
}

/* Soft gold spotlight breathing behind the cards */
.reveal-section__glow {
  position: absolute;
  left: 50%;
  top: 38%;
  width: min(820px, 90%);
  height: 520px;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(201, 169, 97, 0.14), transparent 68%);
  filter: blur(20px);
  pointer-events: none;
  z-index: 0;
  animation: reveal-spotlight 7s ease-in-out infinite;
}

.reveal-section > .container { position: relative; z-index: 1; }

.reveal-section .section-title { color: var(--color-text); }
.reveal-section .section-subtitle { color: var(--color-text-muted); }

.reveal-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  max-width: 760px;
  margin: 0 auto;
  padding-top: 3rem;
}

.reveal-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.75rem 1.5rem 1.6rem;
  min-height: 360px;
  background:
    linear-gradient(135deg, #ffffff 0%, #f6efe2 100%);
  border: 1px solid rgba(201, 169, 97, 0.3);
  border-radius: 26px;
  box-shadow:
    0 18px 44px rgba(90, 58, 34, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  overflow: hidden;
  transition: transform 0.55s var(--ease-elegant),
              border-color 0.5s ease,
              box-shadow 0.55s var(--ease-elegant);
}

.reveal-card:hover {
  transform: translateY(-8px);
  border-color: rgba(201, 169, 97, 0.55);
  box-shadow:
    0 30px 64px rgba(90, 58, 34, 0.2),
    0 0 0 1px rgba(201, 169, 97, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* Slow shimmer sweep across the card surface */
.reveal-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(229, 201, 152, 0.22) 50%, transparent 70%);
  transform: translateX(-120%);
  pointer-events: none;
  z-index: 3;
  animation: reveal-shimmer 5.5s ease-in-out infinite;
}

/* "Coming Soon" badge */
.reveal-card__badge {
  position: absolute;
  top: 1rem;
  inset-inline-start: 1rem;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.85rem;
  background: rgba(42, 24, 16, 0.72);
  border: 1px solid rgba(201, 169, 97, 0.5);
  color: var(--color-gold-light);
  font-family: var(--font-en-body);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 999px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}
body[dir="rtl"] .reveal-card__badge {
  font-family: var(--font-ar-body);
  letter-spacing: 0;
}

.reveal-card__badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-gold-light);
  box-shadow: 0 0 0 0 rgba(229, 201, 152, 0.7);
  animation: reveal-pulse 2s ease-out infinite;
}

/* Media — the bag, hidden behind darkening + blur + a veil */
.reveal-card__media {
  position: relative;
  width: 100%;
  flex: 1;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 18px;
  /* Dark "vault window" inside the light card — keeps the upcoming
     product hidden and gives the teaser a premium locked-away feel. */
  background: linear-gradient(180deg, #2a1810 0%, #1d100b 100%);
  box-shadow:
    inset 0 2px 14px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(201, 169, 97, 0.18);
}

.reveal-card__bag {
  width: auto;
  height: auto;
  max-height: 280px;
  max-width: 100%;
  object-fit: contain;
  /* Keep the product a mystery: dark, blurred, desaturated. */
  filter: brightness(0.28) blur(7px) grayscale(0.45) contrast(0.92);
  transform: rotate(-5deg) scale(1.02);
  transition: filter 0.7s var(--ease-elegant), transform 0.7s var(--ease-elegant);
}
.reveal-card:nth-child(even) .reveal-card__bag { transform: rotate(5deg) scale(1.02); }

/* On hover, tease a little more — never a full reveal */
.reveal-card:hover .reveal-card__bag {
  filter: brightness(0.42) blur(5px) grayscale(0.3) contrast(0.95);
  transform: rotate(-2deg) scale(1.07);
}
.reveal-card:nth-child(even):hover .reveal-card__bag { transform: rotate(2deg) scale(1.07); }

/* Dark veil + lock icon over the bag */
.reveal-card__veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 45%, rgba(42, 24, 16, 0.25), rgba(29, 16, 11, 0.78) 75%);
  color: rgba(229, 201, 152, 0.85);
  transition: background 0.6s var(--ease-elegant);
}
.reveal-card:hover .reveal-card__veil {
  background:
    radial-gradient(circle at 50% 45%, rgba(42, 24, 16, 0.12), rgba(29, 16, 11, 0.62) 78%);
}
.reveal-card__veil svg {
  width: 38px;
  height: 38px;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.6));
  opacity: 0.9;
}

/* Footer of the card — size circle + label */
.reveal-card__foot {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: 1.4rem;
}

.reveal-card__size {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--gradient-gold);
  color: var(--color-brown-darkest);
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 1.05rem;
  box-shadow: 0 8px 20px rgba(201, 169, 97, 0.4);
}

.reveal-card__size-label {
  font-family: var(--font-en-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
body[dir="rtl"] .reveal-card__size-label {
  font-family: var(--font-ar-body);
  letter-spacing: 0;
}

@keyframes reveal-spotlight {
  0%, 100% { opacity: 0.75; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.06); }
}
@keyframes reveal-shimmer {
  0%, 65%, 100% { transform: translateX(-120%); }
  80%           { transform: translateX(120%); }
}
@keyframes reveal-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(229, 201, 152, 0.6); }
  70%  { box-shadow: 0 0 0 8px rgba(229, 201, 152, 0); }
  100% { box-shadow: 0 0 0 0 rgba(229, 201, 152, 0); }
}

@media (max-width: 640px) {
  .reveal-grid { grid-template-columns: 1fr; max-width: 360px; }
  .reveal-card { min-height: 320px; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-section__glow,
  .reveal-card::after,
  .reveal-card__badge-dot { animation: none; }
  .reveal-card,
  .reveal-card__bag,
  .reveal-card__veil { transition: none; }
}

/* =========================================================
   Natural Potato Chips — premium floating showcase
   A banner-style presentation: the product is the hero, set
   on a layered gold halo with floating accents and generous
   white space. Replaces the old boxed "reveal-card" teaser.
   ========================================================= */
.chips-stage__inner {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  align-items: center;
  gap: clamp(2rem, 6vw, 6rem);
  padding-top: clamp(1.5rem, 4vw, 3.5rem);
}

/* ---------- Visual (floating product) ---------- */
.chips-stage__visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(340px, 44vw, 560px);
  isolation: isolate;
}

/* Big soft gold halo glowing behind the product */
.chips-stage__halo {
  position: absolute;
  width: min(92%, 480px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%,
    rgba(229, 201, 152, 0.55) 0%,
    rgba(201, 169, 97, 0.30) 38%,
    rgba(201, 169, 97, 0) 70%);
  filter: blur(4px);
  z-index: 0;
  animation: chips-halo 8s ease-in-out infinite;
}

/* Thin dashed gold ring, slowly rotating */
.chips-stage__ring {
  position: absolute;
  width: min(84%, 430px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px dashed rgba(201, 169, 97, 0.4);
  z-index: 0;
  animation: chips-spin 30s linear infinite;
}

/* Floating gold accent dots */
.chips-stage__dot {
  position: absolute;
  border-radius: 50%;
  background: var(--gradient-gold);
  box-shadow: 0 6px 18px rgba(201, 169, 97, 0.5);
  z-index: 1;
}
.chips-stage__dot--a { width: 14px; height: 14px; top: 10%;  inset-inline-start: 14%; animation: chips-bob 6s ease-in-out infinite; }
.chips-stage__dot--b { width: 9px;  height: 9px;  bottom: 18%; inset-inline-end: 12%;  animation: chips-bob 5s ease-in-out infinite 0.6s; }
.chips-stage__dot--c { width: 6px;  height: 6px;  top: 24%;  inset-inline-end: 20%;  opacity: 0.8; animation: chips-bob 7s ease-in-out infinite 1.2s; }

/* Wrapper drives the gentle continuous float (kept separate from the
   scroll-reveal transform on .chips-stage__visual so they don't fight) */
.chips-stage__float {
  position: relative;
  z-index: 2;
  animation: chips-float 6s ease-in-out infinite;
  will-change: transform;
}

.chips-stage__product {
  display: block;
  width: clamp(220px, 30vw, 420px);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 28px 38px rgba(42, 24, 16, 0.34));
  transition: transform 0.6s var(--ease-elegant);
}
.chips-stage__visual:hover .chips-stage__product {
  transform: scale(1.04) rotate(-1.5deg);
}

/* Soft ground shadow that breathes in sync with the float */
.chips-stage__reflection {
  position: absolute;
  bottom: 7%;
  width: min(58%, 260px);
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(42, 24, 16, 0.3), transparent 70%);
  filter: blur(7px);
  z-index: 1;
  animation: chips-shadow 6s ease-in-out infinite;
}

/* ---------- Copy ---------- */
.chips-stage__content { max-width: 520px; }

.chips-stage__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 1.05rem;
  border-radius: 999px;
  background: rgba(201, 169, 97, 0.12);
  border: 1px solid rgba(201, 169, 97, 0.4);
  color: var(--color-brown);
  font-family: var(--font-en-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
body[dir="rtl"] .chips-stage__pill { font-family: var(--font-ar-body); letter-spacing: 0; }
.chips-stage__pill-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-gold);
  animation: reveal-pulse 2s ease-out infinite;
}

.chips-stage__title {
  font-family: var(--font-en);
  font-size: clamp(2.4rem, 5.2vw, 4.2rem);
  line-height: 1.05;
  margin: 1.2rem 0 0;
  background: var(--gradient-luxury);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--color-text); /* fallback if clip unsupported */
}
body[dir="rtl"] .chips-stage__title { font-family: var(--font-ar); }

.chips-stage__lead {
  font-family: var(--font-en-body);
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  line-height: 1.8;
  color: var(--color-text-muted);
  margin: 1.4rem 0 0;
}
body[dir="rtl"] .chips-stage__lead { font-family: var(--font-ar-body); }

.chips-stage__meta { margin-top: 2.1rem; }
.chips-stage__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.72rem 1.45rem;
  border-radius: 999px;
  background: var(--gradient-gold);
  color: var(--color-brown-darkest);
  font-family: var(--font-en-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: var(--shadow-gold);
}
body[dir="rtl"] .chips-stage__badge { font-family: var(--font-ar-body); letter-spacing: 0; }
.chips-stage__badge-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-brown-darkest);
  animation: reveal-pulse 2s ease-out infinite;
}

/* ---------- Keyframes ---------- */
@keyframes chips-float  { 0%, 100% { transform: translateY(0); }      50% { transform: translateY(-18px); } }
@keyframes chips-shadow { 0%, 100% { transform: scale(1); opacity: 0.55; } 50% { transform: scale(0.82); opacity: 0.3; } }
@keyframes chips-halo   { 0%, 100% { opacity: 0.82; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes chips-spin   { to { transform: rotate(360deg); } }
@keyframes chips-bob    { 0%, 100% { transform: translateY(0); }      50% { transform: translateY(-12px); } }

/* ---------- Responsive: stack + center on smaller screens ---------- */
@media (max-width: 860px) {
  .chips-stage__inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    text-align: center;
  }
  .chips-stage__content { max-width: 560px; margin: 0 auto; }
  /* Gradient text can clip oddly on some mobile browsers — use solid there */
  .chips-stage__title {
    background: none;
    -webkit-text-fill-color: var(--color-text);
  }
}

@media (prefers-reduced-motion: reduce) {
  .chips-stage__float,
  .chips-stage__halo,
  .chips-stage__ring,
  .chips-stage__dot,
  .chips-stage__reflection,
  .chips-stage__pill-dot,
  .chips-stage__badge-dot { animation: none; }
  .chips-stage__product { transition: none; }
}

/* ===== Footer ===== */
.footer {
  background: var(--color-brown-darkest);
  color: var(--color-cream);
  padding: 5rem 0 2rem;
  position: relative;
  overflow: hidden;
}

.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gradient-gold);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 3rem;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  font-family: var(--font-en);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.footer-brand .logo-mark {
  width: 44px;
  height: 44px;
  background: var(--gradient-gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-brown-darkest);
  font-weight: 900;
  font-size: 1.15rem;
}

.footer-logo-img {
  display: block;
  height: 56px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  /* Footer is dark — if the logo is dark too, this filter keeps it
     visible. Safe to remove if your logo.png is already light. */
  filter: brightness(0) invert(1) opacity(0.92);
}

@media (max-width: 768px) {
  .footer-logo-img { height: 48px; max-width: 180px; }
}

.footer-about {
  font-size: 0.9375rem;
  color: rgba(250, 247, 242, 0.7);
  line-height: 1.75;
  margin-bottom: 1.5rem;
  max-width: 320px;
}

.footer-social {
  display: flex;
  gap: 0.75rem;
}

.social-link {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(201, 169, 97, 0.12);
  color: var(--color-gold-light);
  transition: all var(--transition-base);
}

.social-link:hover {
  background: var(--color-gold);
  color: var(--color-brown-darkest);
  transform: translateY(-3px);
  box-shadow: var(--shadow-gold);
}

.social-link svg {
  width: 18px;
  height: 18px;
}

.footer-title {
  font-family: var(--font-en);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-gold-light);
  margin-bottom: 1.25rem;
  letter-spacing: 0.02em;
}

body[dir="rtl"] .footer-title {
  font-family: var(--font-ar);
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer-links a {
  font-size: 0.9375rem;
  color: rgba(250, 247, 242, 0.7);
  transition: all var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  width: fit-content;
}

.footer-links a:hover {
  color: var(--color-gold);
  transform: translateX(4px);
}

body[dir="rtl"] .footer-links a:hover {
  transform: translateX(-4px);
}

.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.9375rem;
  color: rgba(250, 247, 242, 0.75);
  line-height: 1.5;
}

.footer-contact-item svg {
  width: 16px;
  height: 16px;
  color: var(--color-gold);
  flex-shrink: 0;
  margin-top: 3px;
}

.footer-bottom {
  padding-top: 2rem;
  border-top: 1px solid rgba(201, 169, 97, 0.15);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.875rem;
  color: rgba(250, 247, 242, 0.55);
  flex-wrap: wrap;
  gap: 1rem;
}

/* ===== Page Header (inner pages) ===== */
.page-header {
    position: relative;
    padding: calc(var(--nav-height) + 4rem) 0 12rem;
    background: var(--gradient-luxury);
    color: var(--color-cream);
    overflow: hidden;
    text-align: center;
}

.page-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at top, rgba(201, 169, 97, 0.2), transparent 60%),
    radial-gradient(circle at 20% 80%, rgba(201, 169, 97, 0.1), transparent 50%);
  pointer-events: none;
}

.page-header-content {
  position: relative;
  z-index: 2;
}

.page-header h1 {
  color: var(--color-cream);
  margin-bottom: 1rem;
}

.page-header h1 .accent {
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-style: italic;
}

.page-header p {
  font-size: 1.125rem;
  color: rgba(250, 247, 242, 0.8);
  max-width: 640px;
  margin: 0 auto;
}

.breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.25rem;
  background: rgba(201, 169, 97, 0.12);
  border: 1px solid rgba(201, 169, 97, 0.25);
  border-radius: 999px;
  font-size: 0.8125rem;
  color: var(--color-gold-light);
  margin-bottom: 1.5rem;
  letter-spacing: 0.1em;
}

/* ===== About Page ===== */
.story-section {
  padding: var(--section-pad) 0;
  background: var(--color-cream);
}

.story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.story-visual {
  position: relative;
}

.story-visual__img {
  width: 100%;
  height: auto;
  display: block;
}

.story-visual .visual-chip {
  position: absolute;
  border-radius: 50%;
  background: var(--gradient-gold);
  box-shadow:
    0 20px 40px rgba(0,0,0,0.3),
    inset 0 -10px 20px rgba(90, 58, 34, 0.3);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
}

/* Brand logo sits inside the center chip — slightly smaller so the
   gold backdrop frames it cleanly. */
.story-visual .visual-chip__logo {
  width: 72%;
  height: 72%;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.25));
}

/* Product images inside the four small chips. The chip's gold/shadow
   backdrop is stripped for these (see rule below), so only the PNG
   shows — letting the removebg transparency read cleanly against
   the card's brown gradient. */
.story-visual .visual-chip__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.45));
}

/* Strip the chip backdrop on every small chip — image only, no
   visible container behind it. Only the center (.c1 / logo chip)
   keeps the gold backdrop. */
.story-visual .visual-chip.c2,
.story-visual .visual-chip.c3,
.story-visual .visual-chip.c4,
.story-visual .visual-chip.c5 {
  background: none;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
  isolation: auto;
}

/* Center chip (logo) — slightly tighter than before to give the four
   surrounding chips breathing room. */
.story-visual .visual-chip.c1 { width: 52%; height: 52%; top: 24%; left: 24%; animation: float 8s infinite; }

/* Four small image-only chips arranged at the four corners */
.story-visual .visual-chip.c2 { width: 24%; height: 24%; top: 4%; right: 4%; animation: float 6s infinite -2s; }
.story-visual .visual-chip.c3 { width: 24%; height: 24%; bottom: 6%; left: 4%; animation: float 7s infinite -4s; }
.story-visual .visual-chip.c4 { width: 24%; height: 24%; top: 4%; left: 4%; animation: float 7.5s infinite -1s; }
.story-visual .visual-chip.c5 { width: 24%; height: 24%; bottom: 6%; right: 4%; animation: float 6.5s infinite -3s; }

.story-content h2 {
  margin-bottom: 1.5rem;
}

.story-content p {
  margin-bottom: 1.25rem;
  font-size: 1.0625rem;
  line-height: 1.8;
}

.story-points {
  list-style: none;
  padding: 0;
  margin: 0;
}

.story-points li {
  position: relative;
  padding-inline-start: 1.75rem;
  margin-bottom: 1.1rem;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--color-text);
}

.story-points li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 0.7em;
  width: 8px;
  height: 8px;
  border-radius: 99px;
  background: var(--gradient-gold);
  box-shadow: 0 2px 6px rgba(201, 169, 97, 0.45);
}

/* Values */
.values-section {
  padding: var(--section-pad) 0;
  background: var(--color-cream-warm);
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
}

.value-card {
  background: var(--color-white);
  padding: 3rem 2rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: all 0.5s var(--ease-elegant);
  position: relative;
  overflow: hidden;
}

.value-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--gradient-gold);
  opacity: 0;
  transition: opacity var(--transition-base);
  z-index: 0;
}

.value-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
}

.value-icon {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-md);
  background: var(--gradient-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 1;
  color: var(--color-brown-darkest);
  box-shadow: var(--shadow-gold);
}

.value-icon svg {
  width: 30px;
  height: 30px;
}

.value-card h3 {
  font-size: 1.375rem;
  margin-bottom: 0.75rem;
  position: relative;
  z-index: 1;
}

.value-card p {
  font-size: 0.9375rem;
  line-height: 1.7;
  position: relative;
  z-index: 1;
}

/* Stats */
.stats-section {
  background: var(--gradient-luxury);
  padding: 5rem 0;
  color: var(--color-cream);
  position: relative;
  overflow: hidden;
}

.stats-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 50%, rgba(201, 169, 97, 0.15), transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(229, 201, 152, 0.1), transparent 50%);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 2rem;
  position: relative;
  z-index: 1;
  text-align: center;
}

.stat-item {
  padding: 1rem;
}

.stat-num {
  font-family: var(--font-en);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 800;
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  margin-bottom: 0.5rem;
  display: inline-block;
}

.stat-label {
  font-size: 0.9375rem;
  color: rgba(250, 247, 242, 0.8);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Timeline */
.timeline-section {
  padding: var(--section-pad) 0;
  background: var(--color-cream);
}

.timeline {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
}

.timeline::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: linear-gradient(to bottom, transparent, var(--color-gold), transparent);
  transform: translateX(-50%);
}

.timeline-item {
  position: relative;
  width: 50%;
  padding: 2rem;
  margin-bottom: 1rem;
}

.timeline-item:nth-child(odd) {
  margin-left: 0;
  margin-right: 50%;
  padding-right: 3rem;
  text-align: right;
}

.timeline-item:nth-child(even) {
  margin-left: 50%;
  padding-left: 3rem;
}

body[dir="rtl"] .timeline-item:nth-child(odd) {
  text-align: left;
  padding-right: 2rem;
  padding-left: 3rem;
}

body[dir="rtl"] .timeline-item:nth-child(even) {
  padding-right: 3rem;
  padding-left: 2rem;
}

.timeline-item::before {
  content: '';
  position: absolute;
  top: 2.5rem;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--gradient-gold);
  box-shadow: 0 0 0 4px var(--color-cream), var(--shadow-gold);
}

.timeline-item:nth-child(odd)::before {
  right: -8px;
}

.timeline-item:nth-child(even)::before {
  left: -8px;
}

.timeline-year {
  font-family: var(--font-en);
  font-size: 2rem;
  font-weight: 800;
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.5rem;
}

.timeline-content {
  background: var(--color-white);
  padding: 1.5rem 1.75rem;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
}

.timeline-item:hover .timeline-content {
  transform: scale(1.03);
  box-shadow: var(--shadow-md);
}

.timeline-content h4 {
  margin-bottom: 0.5rem;
  color: var(--color-brown-dark);
}

/* ===== Clients Page ===== */
.clients-grid-section {
  padding: var(--section-pad) 0;
  background: var(--color-cream);
}

.clients-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.5rem;
}

.client-card {
  aspect-ratio: 3/2;
  background: var(--color-white);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  box-shadow: var(--shadow-sm);
  transition: all 0.5s var(--ease-elegant);
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.client-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gradient-gold);
  opacity: 0;
  transition: opacity var(--transition-base);
}

.client-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: var(--shadow-lg);
}

.client-card:hover::before {
  opacity: 0.08;
}

.client-logo {
  font-family: var(--font-en);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--color-brown);
  text-align: center;
  letter-spacing: 0.05em;
  position: relative;
  z-index: 1;
  transition: color var(--transition-base);
  filter: grayscale(0.3);
}

.client-card:hover .client-logo {
  color: var(--color-brown-darkest);
  filter: grayscale(0);
}

/* Logo marquee */
.marquee-section {
  padding: 3rem 0;
  background: var(--color-cream-warm);
  border-top: 1px solid rgba(201, 169, 97, 0.15);
  border-bottom: 1px solid rgba(201, 169, 97, 0.15);
  overflow: hidden;
}

.marquee {
  display: flex;
  gap: 4rem;
  width: max-content;
  animation: marquee 30s linear infinite;
}

.marquee:hover {
  animation-play-state: paused;
}

.marquee-item {
  font-family: var(--font-en);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--color-brown);
  letter-spacing: 0.1em;
  white-space: nowrap;
  opacity: 0.6;
  transition: opacity var(--transition-base);
  display: flex;
  align-items: center;
  gap: 4rem;
}

.marquee-item::after {
  content: 'أ¢â€”†';
  color: var(--color-gold);
  font-size: 0.8rem;
}

.marquee-item:hover {
  opacity: 1;
}

/* Testimonials */
.testimonials-section {
  padding: var(--section-pad) 0;
  background: var(--gradient-luxury);
  color: var(--color-cream);
  position: relative;
  overflow: hidden;
}

.testimonials-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(201, 169, 97, 0.15), transparent 60%);
}

.testimonials-section .section-title,
.testimonials-section .section-subtitle {
  color: var(--color-cream);
}

.testimonials-section .section-subtitle {
  color: rgba(250, 247, 242, 0.8);
}

.testimonial-slider {
  max-width: 880px;
  margin: 0 auto;
  position: relative;
}

.testimonial-track {
  position: relative;
  min-height: 320px;
}

.testimonial {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s var(--ease-elegant);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(201, 169, 97, 0.25);
  border-radius: var(--radius-lg);
  padding: 3rem;
  backdrop-filter: blur(10px);
  text-align: center;
}

.testimonial.active {
  opacity: 1;
  transform: translateY(0);
}

.testimonial-quote {
  font-size: 1.25rem;
  line-height: 1.7;
  margin-bottom: 2rem;
  color: var(--color-cream);
  font-style: italic;
  position: relative;
}

.testimonial-quote::before {
  content: '"';
  font-family: var(--font-en);
  font-size: 5rem;
  color: var(--color-gold);
  position: absolute;
  top: -2rem;
  left: -1rem;
  line-height: 1;
  opacity: 0.4;
}

.testimonial-author {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.author-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--gradient-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-en);
  font-weight: 800;
  color: var(--color-brown-darkest);
  font-size: 1.25rem;
}

.author-info h5 {
  color: var(--color-cream);
  font-size: 1rem;
  margin-bottom: 0.25rem;
}

.author-info span {
  color: var(--color-gold-light);
  font-size: 0.875rem;
}

.testimonial-dots {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 2.5rem;
}

.testimonial-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(201, 169, 97, 0.3);
  cursor: pointer;
  transition: all var(--transition-base);
}

.testimonial-dot.active {
  background: var(--color-gold);
  width: 28px;
  border-radius: 999px;
}

/* ===== Contact Page ===== */
.contact-section {
  padding: var(--section-pad) 0;
  background: var(--color-cream);
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 4rem;
}

.contact-info-card {
  background: var(--gradient-luxury);
  padding: 3rem;
  border-radius: var(--radius-lg);
  color: var(--color-cream);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.contact-info-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(201, 169, 97, 0.2), transparent 60%);
}

.contact-info-card > * {
  position: relative;
  z-index: 1;
}

.contact-info-card h3 {
  color: var(--color-cream);
  margin-bottom: 1rem;
  font-size: 1.75rem;
}

.contact-info-card > p {
  color: rgba(250, 247, 242, 0.75);
  margin-bottom: 2.5rem;
  line-height: 1.7;
}

.contact-info-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

.contact-info-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.contact-info-item .icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(201, 169, 97, 0.15);
  border: 1px solid rgba(201, 169, 97, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gold);
  flex-shrink: 0;
  transition: all var(--transition-base);
}

.contact-info-item:hover .icon {
  background: var(--color-gold);
  color: var(--color-brown-darkest);
  transform: scale(1.05);
}

.contact-info-item .icon svg {
  width: 20px;
  height: 20px;
}

.contact-info-item .info-label {
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-gold-light);
  margin-bottom: 0.25rem;
}

.contact-info-item .info-value {
  font-size: 1rem;
  color: var(--color-cream);
  line-height: 1.5;
}

.contact-info-card .footer-social {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(201, 169, 97, 0.2);
}

.contact-form-card {
  background: var(--color-white);
  padding: 3rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.contact-form-card h3 {
  margin-bottom: 0.5rem;
}

.contact-form-card > p {
  margin-bottom: 2rem;
}

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

.form-group {
  position: relative;
  margin-bottom: 1.25rem;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 1rem 1.25rem;
  border: 1.5px solid var(--color-bg-alt);
  border-radius: var(--radius-sm);
  background: var(--color-cream);
  font-family: inherit;
  font-size: 0.9375rem;
  color: var(--color-text);
  transition: all var(--transition-fast);
}

.form-group label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-brown);
  margin-bottom: 0.5rem;
  letter-spacing: 0.05em;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--color-gold);
  background: var(--color-white);
  box-shadow: 0 0 0 4px rgba(201, 169, 97, 0.15);
}

.form-group textarea {
  resize: vertical;
  min-height: 140px;
}

.form-submit {
  width: 100%;
  margin-top: 0.5rem;
}

.map-section {
  padding: 0 0 var(--section-pad);
  background: var(--color-cream);
}

.map-wrapper {
  height: 460px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  position: relative;
  background: var(--gradient-luxury);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-cream);
}

.map-wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(201, 169, 97, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201, 169, 97, 0.08) 1px, transparent 1px);
  background-size: 40px 40px;
}

.map-pin {
  position: relative;
  z-index: 2;
  text-align: center;
}

.map-pin .pin {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: var(--gradient-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-brown-darkest);
  margin: 0 auto 1rem;
  position: relative;
  box-shadow: var(--shadow-gold);
  animation: pulseScale 2s infinite;
}

.map-pin .pin::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid var(--color-gold);
  animation: ping 2s infinite;
}

.map-pin .pin svg {
  width: 32px;
  height: 32px;
}

/* ===== CTA Section ===== */
.cta-section {
  padding: 5rem 0;
  background: var(--gradient-luxury);
  color: var(--color-cream);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(201, 169, 97, 0.2), transparent 60%);
}

.cta-section > .container {
  position: relative;
  z-index: 1;
}

.cta-section h2 {
  color: var(--color-cream);
  margin-bottom: 1rem;
}

.cta-section p {
  color: rgba(250, 247, 242, 0.85);
  max-width: 600px;
  margin: 0 auto 2.5rem;
  font-size: 1.125rem;
}

/* ===== Loader ===== */
.loader {
  position: fixed;
  inset: 0;
  background: var(--color-brown-darkest);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.6s, visibility 0.6s;
}

.loader.hidden {
  opacity: 0;
  visibility: hidden;
}

.loader-content {
  text-align: center;
  color: var(--color-cream);
}

.loader-logo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--gradient-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  font-family: var(--font-en);
  font-weight: 900;
  font-size: 1.5rem;
  color: var(--color-brown-darkest);
  animation: loaderPulse 1.5s ease-in-out infinite;
}

.loader-text {
  font-family: var(--font-en);
  font-size: 0.875rem;
  letter-spacing: 0.4em;
  color: var(--color-gold-light);
  text-transform: uppercase;
}

.loader-bar {
  width: 200px;
  height: 2px;
  background: rgba(201, 169, 97, 0.2);
  margin: 1.5rem auto 0;
  border-radius: 2px;
  overflow: hidden;
}

.loader-bar::after {
  content: '';
  display: block;
  width: 40%;
  height: 100%;
  background: var(--gradient-gold);
  animation: loaderBar 1.2s ease-in-out infinite;
}

/* =========================================================
   TIMELESS ORIGINALS — Interactive Picker (ط§ظ„ط£طµظˆظ„ ط§ظ„ط®ط§ظ„ط¯ط©)
   Side thumbnail menu + animated blob backdrop + single
   3D-flipping glass card. Scoped strictly to #products.
   ========================================================= */

#products.products-section {
  /* background:
    radial-gradient(120% 80% at 100% 0%, rgba(201, 169, 97, 0.14) 0%, transparent 55%),
    radial-gradient(90% 70% at 0% 100%, rgba(90, 58, 34, 0.08) 0%, transparent 60%),
    linear-gradient(180deg, #FAF7F2 0%, #F5EEE0 100%); */
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* --- Stage ----------------------------------------------- */
.timeless-stage {
  position: relative;
  margin: 3rem auto 0;
  max-width: 1100px;
  min-height: 560px;
  padding: 2rem 0 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Animated blob backdrop ------------------------------ */
/* Stage background completely removed per design — hide the blob layer. */
.timeless-box {
  display: none;
}
.timeless-box--legacy {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
  overflow: hidden;
  border-radius: 36px;
  z-index: 0;
}

.timeless-box__block {
  position: absolute;
  list-style: none;
  background: var(--color-gold);
  filter: blur(48px);
  border-radius: 50%;
  opacity: 0.55;
  transition: top 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              left 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              width 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              height 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.6s ease;
}

/* Default layout = card 1 — tuned for a luminous glow on the dark bg */
.timeless-box .timeless-box__block:nth-child(1) {
  width: 140px; height: 140px; top: 50%; left: 24%; opacity: 0.72;
  background: var(--color-gold);
}
.timeless-box .timeless-box__block:nth-child(2) {
  width: 110px; height: 110px; top: 22%; left: 72%; opacity: 0.62;
  background: var(--color-gold-light);
}
.timeless-box .timeless-box__block:nth-child(3) {
  width: 220px; height: 220px; top: 8%; left: 49%; opacity: 0.45;
  background: var(--color-gold-light);
}
.timeless-box .timeless-box__block:nth-child(4) {
  width: 520px; height: 520px; top: 48%; left: 68%; opacity: 0.28;
  background: var(--color-gold);
}
.timeless-box .timeless-box__block:nth-child(5) {
  width: 400px; height: 400px; top: 6%; left: 2%; opacity: 0.4;
  background: var(--color-gold-pale);
}
.timeless-box .timeless-box__block:nth-child(6) {
  width: 200px; height: 200px; top: 74%; left: 32%; opacity: 0.55;
  background: var(--color-brown-light);
}

/* Per-card layouts (lifted from reference, kept brand-neutral) */
.timeless-box.timeless-card-2-bg .timeless-box__block:nth-child(1){ top: 50%; left: 25%; }
.timeless-box.timeless-card-2-bg .timeless-box__block:nth-child(2){ top: 36%; left: 72%; }
.timeless-box.timeless-card-2-bg .timeless-box__block:nth-child(3){ top: 11%; left: 58%; }
.timeless-box.timeless-card-2-bg .timeless-box__block:nth-child(4){ top: 28%; left: 73%; }
.timeless-box.timeless-card-2-bg .timeless-box__block:nth-child(5){ top: 10%; left: 10%; }
.timeless-box.timeless-card-2-bg .timeless-box__block:nth-child(6){ top: 68%; left: 41%; }

.timeless-box.timeless-card-3-bg .timeless-box__block:nth-child(1){ top: 74%; left: 29%; }
.timeless-box.timeless-card-3-bg .timeless-box__block:nth-child(2){ top: 52%; left: 66%; }
.timeless-box.timeless-card-3-bg .timeless-box__block:nth-child(3){ top: 11%; left: 58%; }
.timeless-box.timeless-card-3-bg .timeless-box__block:nth-child(4){ top: -2%; left: 73%; }
.timeless-box.timeless-card-3-bg .timeless-box__block:nth-child(5){ top: 17%; left: 4%; }
.timeless-box.timeless-card-3-bg .timeless-box__block:nth-child(6){ top: 68%; left: 53%; }

.timeless-box.timeless-card-4-bg .timeless-box__block:nth-child(1){ top: 78%; left: 10%; }
.timeless-box.timeless-card-4-bg .timeless-box__block:nth-child(2){ top: 27%; left: 59%; }
.timeless-box.timeless-card-4-bg .timeless-box__block:nth-child(3){ top: 5%;  left: 67%; }
.timeless-box.timeless-card-4-bg .timeless-box__block:nth-child(4){ top: 1%;  left: 77%; }
.timeless-box.timeless-card-4-bg .timeless-box__block:nth-child(5){ top: 13%; left: 18%; }
.timeless-box.timeless-card-4-bg .timeless-box__block:nth-child(6){ top: 58%; left: 57%; }

/* --- Side menu (thumbnails) ------------------------------ */
.timeless-menu {
  position: absolute;
  left: 2%;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
  z-index: 6;
}

.timeless-menu__item {
  width: 72px;
  height: 92px;
  border-radius: 0;
  cursor: pointer;
  background: none;
  border: none;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  position: relative;
  padding: 0;
  transition: transform 0.45s var(--ease-elegant);
}

.timeless-menu__item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 8px 12px rgba(42, 24, 16, 0.22));
  transition:
    transform 0.5s var(--ease-elegant),
    filter 0.5s var(--ease-elegant),
    opacity 0.45s var(--ease-elegant);
  opacity: 0.55;
}

.timeless-menu__item:hover img {
  transform: scale(1.08);
  opacity: 0.85;
  filter: drop-shadow(0 12px 18px rgba(42, 24, 16, 0.28));
}

.timeless-menu__item.is-selected img {
  transform: scale(1.15);
  opacity: 1;
  filter:
    drop-shadow(0 14px 22px rgba(42, 24, 16, 0.32))
    drop-shadow(0 0 14px rgba(201, 169, 97, 0.45));
}

/* --- Card region ----------------------------------------- */
.timeless-cards {
  position: relative;
  z-index: 3;
  width: 100%;
  min-height: 480px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.timeless-card {
  position: relative;
  width: min(640px, 100%);
  min-height: 420px;
  background: linear-gradient(
    210deg,
    rgba(255, 255, 255, 0.82) 0%,
    rgba(250, 247, 242, 0.48) 97%
  );
  border-radius: 36px;
  backdrop-filter: blur(24px) saturate(135%);
  -webkit-backdrop-filter: blur(24px) saturate(135%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow:
    0 28px 60px -18px rgba(42, 24, 16, 0.28),
    0 8px 22px -10px rgba(42, 24, 16, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
  transform-origin: right;
  transform-style: preserve-3d;
  display: none;
  transform: perspective(300px) rotateY(-30deg);
}

.timeless-card.show-card {
  display: block;
  animation: timelessCardIn 0.8s both;
}
.timeless-card.show-card .timeless-card__photo {
  animation: timelessPhotoIn 0.8s both;
}
.timeless-card.hide-card {
  animation: timelessCardOut 0.4s both;
}
.timeless-card.hide-card .timeless-card__photo {
  animation: timelessPhotoOut 0.4s both;
}

@keyframes timelessCardIn {
  0%   { transform: perspective(300px) rotateY(-30deg); opacity: 0; }
  40%  { transform: perspective(300px) rotateY(-30deg); opacity: 1; }
  100% { transform: perspective(300px) rotateY(0deg); opacity: 1; }
}
@keyframes timelessCardOut {
  0%   { transform: perspective(300px) rotateY(0deg); opacity: 1; }
  60%  { transform: perspective(300px) rotateY(-30deg); opacity: 0.6; }
  100% { transform: perspective(300px) rotateY(-30deg); opacity: 0; }
}
@keyframes timelessPhotoIn {
  0%   { opacity: 0; transform: translateX(-40%) scale(1.12); }
  35%  { opacity: 1; }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes timelessPhotoOut {
  0%   { opacity: 1; transform: translateX(0) scale(1); }
  100% { opacity: 0; transform: translateX(-12%) scale(0.94); }
}

/* --- Card inner — symmetric 2-column grid -----------------
   Column 1 = leading side (photo). Column 2 = trailing (details).
   With `direction: rtl` on body, the grid columns auto-reverse,
   so the photo always lands on the leading edge and the details
   on the trailing edge — no extra RTL rules needed for layout. */
.timeless-card__inner {
  position: relative;
  width: 100%;
  min-height: 420px;
  padding: 2rem 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 2.25rem);
  align-items: stretch;
}

.timeless-card__photo {
  position: relative;
  grid-column: 1;
  width: 100%;
  height: 100%;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* No fill, border, or radius — the bag is the only visual */
}

.timeless-card__photo img {
  width: 100%;
  height: 100%;
  max-height: 380px;
  object-fit: contain;
  filter:
    drop-shadow(0 24px 30px rgba(42, 24, 16, 0.28))
    drop-shadow(0 8px 12px rgba(42, 24, 16, 0.18));
  transform: scale(var(--bag-scale, 1));
  transform-origin: center;
  transition: transform 0.55s var(--ease-elegant);
}

/* Bag scaling driven by the active S / M / L button. The size handler
   in timeless-picker.js writes data-size onto the card; CSS reads it
   and sets --bag-scale, which the img above consumes. */
.timeless-card[data-size="S"] { --bag-scale: 0.85; }
.timeless-card[data-size="M"] { --bag-scale: 1;    }
.timeless-card[data-size="L"] { --bag-scale: 1.15; }

/* Details column — flex column so bottom action sticks to the floor */
.timeless-card__details {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  text-align: end;
}

.timeless-card__bottom { margin-top: auto; }

/* Title — bold flavor name at the top of the details column */
.timeless-card__name {
  margin: 0 0 0.85rem;
  width: 100%;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: clamp(1.85rem, 3.2vw, 2.6rem);
  color: var(--color-brown-darkest);
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-align: end;
  /* Reset any previous gradient text-fill */
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: currentColor;
  text-shadow: none;
}
body[dir="rtl"] .timeless-card__name { font-family: var(--font-ar); }

/* Description paragraph */
.timeless-card__desc {
  margin: 0 0 1.75rem;
  font-family: var(--font-en-body);
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--color-text-muted);
  text-align: end;
  max-width: 100%;
}
body[dir="rtl"] .timeless-card__desc { font-family: var(--font-ar-body); }

/* Size selector group — three circular S / M / L buttons */
.timeless-card__sizes {
  display: inline-flex;
  align-self: flex-end;
  gap: 0.75rem;
  margin-top: auto;
}

.timeless-size {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid rgba(201, 169, 97, 0.4);
  background: #fff;
  color: var(--color-brown-dark);
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition:
    background 0.35s var(--ease-elegant),
    color 0.35s var(--ease-elegant),
    border-color 0.35s var(--ease-elegant),
    transform 0.35s var(--ease-elegant),
    box-shadow 0.35s var(--ease-elegant);
}

.timeless-size:hover {
  transform: translateY(-2px);
  border-color: var(--color-gold);
  color: var(--color-brown-darkest);
}

.timeless-size.is-active {
  background: var(--gradient-gold);
  border-color: var(--color-gold);
  color: var(--color-brown-darkest);
  transform: scale(1.12);
  box-shadow: 0 10px 22px rgba(201, 169, 97, 0.5);
}

.timeless-size:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
}

/* --- RTL: flip the picker horizontally ------------------- */
body[dir="rtl"] .timeless-menu { left: auto; right: 2%; }

body[dir="rtl"] .timeless-card {
  transform-origin: left;
  transform: perspective(300px) rotateY(30deg);
}
body[dir="rtl"] .timeless-card.show-card { animation-name: timelessCardInRTL; }
body[dir="rtl"] .timeless-card.hide-card { animation-name: timelessCardOutRTL; }
/* Photo now lives in a grid cell; the grid auto-reverses in RTL,
   so we only need to flip the slide-in direction here. */
body[dir="rtl"] .timeless-card.show-card .timeless-card__photo { animation-name: timelessPhotoInRTL; }
body[dir="rtl"] .timeless-card.hide-card .timeless-card__photo { animation-name: timelessPhotoOutRTL; }

@keyframes timelessCardInRTL {
  0%   { transform: perspective(300px) rotateY(30deg); opacity: 0; }
  40%  { transform: perspective(300px) rotateY(30deg); opacity: 1; }
  100% { transform: perspective(300px) rotateY(0deg); opacity: 1; }
}
@keyframes timelessCardOutRTL {
  0%   { transform: perspective(300px) rotateY(0deg); opacity: 1; }
  60%  { transform: perspective(300px) rotateY(30deg); opacity: 0.6; }
  100% { transform: perspective(300px) rotateY(30deg); opacity: 0; }
}
@keyframes timelessPhotoInRTL {
  0%   { opacity: 0; transform: translateX(40%) scale(1.12); }
  35%  { opacity: 1; }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes timelessPhotoOutRTL {
  0%   { opacity: 1; transform: translateX(0) scale(1); }
  100% { opacity: 0; transform: translateX(12%) scale(0.94); }
}

/* --- Responsive ------------------------------------------ */
@media (max-width: 1024px) {
  .timeless-stage {
    flex-direction: column;
    min-height: auto;
    margin-top: 2rem;
    padding-top: 1rem;
  }
  .timeless-menu {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    transform: none;
    flex-direction: row;
    justify-content: center;
    gap: 14px;
    margin: 0 auto 5rem;
    width: 100%;
  }
  body[dir="rtl"] .timeless-menu { right: auto; }

  .timeless-menu__item { width: 64px; height: 80px; }
  .timeless-menu__item:hover img { transform: scale(1.08); }

  .timeless-cards { min-height: 560px; padding: 0 1rem; }

  .timeless-card { width: 100%; max-width: 420px; }

  /* Mobile: collapse the 2-col grid into a single column stack
     (photo on top, details below) and center everything. */
  .timeless-card__inner {
    grid-template-columns: 1fr;
    padding: 1.75rem 1.85rem 2rem;
    gap: 1rem;
    text-align: center;
  }
  .timeless-card__photo {
    grid-column: 1;
    min-height: 240px;
  }
  .timeless-card__photo img { max-height: 280px; }
  .timeless-card__details {
    grid-column: 1;
    text-align: center;
  }
  .timeless-card__pack { align-self: center; }
  .timeless-card__name { text-align: center; }
  /* The desc + size buttons default to end-aligned on desktop; override
     so the whole text block is centered on mobile. */
  .timeless-card__desc { text-align: center; }
  .timeless-card__sizes { align-self: center; }
  .timeless-card__stars,
  body[dir="rtl"] .timeless-card__stars { justify-content: center; }
}

@media (max-width: 480px) {
  .timeless-menu__item { width: 56px; height: 72px; }
  .timeless-card { max-width: 340px; min-height: 460px; }
  .timeless-card__inner { padding: 1.5rem 1.4rem 1.75rem; }
  .timeless-card__photo { min-height: 220px; }
  .timeless-card__photo img { max-height: 240px; }
}

@media (prefers-reduced-motion: reduce) {
  .timeless-card,
  .timeless-card.show-card,
  .timeless-card.hide-card,
  .timeless-card .timeless-card__photo,
  .timeless-box__block {
    animation: none !important;
    transition: opacity 0.3s ease !important;
  }
  .timeless-card.show-card { transform: none; }
}

/* ============================================
   ABOUT PAGE — Vision/Mission, Brand, USP,
   Production, Flavors, Partner
   ============================================ */

/* --- Vision & Mission --- */
/* Vision & Mission — single section with the two cards side-by-side. */
.vision-mission-section { background: var(--color-cream); }

.vm-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  max-width: 1100px;
  margin: 0 auto;
}

.vm-card {
  position: relative;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem) clamp(1.25rem, 0.75rem + 1.8vw, 2rem);
  border-radius: var(--radius-lg);
  background: #fff;
  border: 1px solid rgba(201, 169, 97, 0.18);
  box-shadow: 0 12px 32px -16px rgba(42, 24, 16, 0.18);
  text-align: start;
}

.vm-card__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--gradient-gold);
  color: var(--color-brown-darkest);
  margin-bottom: 1.25rem;
}
.vm-card__icon svg { width: 28px; height: 28px; }

.vm-card__label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 0.65rem;
}

.vm-card__title,
.vm-card__list li {
  font-family: var(--font-en);
  font-size: clamp(1rem, 0.85rem + 0.6vw, 1.25rem);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: normal;
  color: var(--color-brown-darkest);
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: normal;
  font-variant-ligatures: normal;
  font-style: normal;
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
}

body[dir="rtl"] .vm-card__title,
body[dir="rtl"] .vm-card__list li {
  font-family: var(--font-ar);
}

.vm-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.vm-card__list li {
  position: relative;
  padding-inline-start: 1.5rem;
}

.vm-card__list li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 0.55em;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--gradient-gold);
}

/* --- Brand Overview --- */
.brand-section {
  background: linear-gradient(180deg, var(--color-cream) 0%, var(--color-cream-warm) 100%);
}

.brand-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
  max-width: 1180px;
  margin: 0 auto;
}

@media (max-width: 1024px) {
  .brand-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .brand-grid { grid-template-columns: 1fr; }
}

.brand-feature {
  position: relative;
  background: #fff;
  border: 1px solid rgba(201, 169, 97, 0.18);
  border-radius: var(--radius-lg);
  padding: 2.25rem 1.75rem 2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 10px 30px -22px rgba(42, 24, 16, 0.18);
  transition: transform 0.4s var(--ease-elegant), box-shadow 0.4s var(--ease-elegant), border-color 0.4s var(--ease-elegant);
}

.brand-feature::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(160deg, rgba(201, 169, 97, 0.45), rgba(201, 169, 97, 0) 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s var(--ease-elegant);
  pointer-events: none;
}

.brand-feature:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px -24px rgba(42, 24, 16, 0.3);
  border-color: rgba(201, 169, 97, 0.32);
}

.brand-feature:hover::before { opacity: 1; }

.brand-feature__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--gradient-gold);
  color: var(--color-brown-darkest);
  display: grid;
  place-items: center;
  margin-bottom: 1.25rem;
  box-shadow: 0 8px 20px -8px rgba(201, 169, 97, 0.55);
}
.brand-feature__icon svg { width: 26px; height: 26px; }

.brand-feature h4 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-brown-darkest);
  margin: 0 0 0.6rem;
  letter-spacing: 0.005em;
}

.brand-feature p {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
  max-width: 30ch;
}

/* --- Product Specs & Nutrition --- */
.specs-section {
  background: linear-gradient(180deg, var(--color-cream-warm) 0%, var(--color-cream) 100%);
}

.specs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  max-width: 1180px;
  margin: 0 auto;
  align-items: start;
}

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

.specs-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 14px 36px -20px rgba(42, 24, 16, 0.28);
  display: flex;
  flex-direction: column;
}

.specs-card--light {
  background: #fff;
  border: 1px solid rgba(201, 169, 97, 0.22);
  color: var(--color-brown-darkest);
}

.specs-card--dark {
  background: linear-gradient(160deg, #2f2a26 0%, #1f1a16 100%);
  color: var(--color-cream);
  border: 1px solid rgba(201, 169, 97, 0.18);
}

.specs-card__head {
  background: var(--color-brown-darkest);
  color: var(--color-cream);
  text-align: center;
  padding: 1.1rem 1.25rem;
}

.specs-card__head h3 {
  margin: 0;
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  font-weight: 600;
  letter-spacing: 0.04em;
}

.specs-card__head--dark {
  background: rgba(0, 0, 0, 0.22);
  border-bottom: 1px solid rgba(201, 169, 97, 0.18);
}

.specs-card__meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.25rem;
  font-size: 0.78rem;
  color: var(--color-text-muted);
  border-bottom: 1px solid rgba(201, 169, 97, 0.2);
  flex-wrap: wrap;
}

.nutrition-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.nutrition-table th,
.nutrition-table td {
  width: 33.3333%;
  padding: 0.7rem 1rem;
  text-align: center;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--color-brown-darkest);
  letter-spacing: 0;
  text-transform: none;
  border-bottom: 1px solid rgba(201, 169, 97, 0.14);
  font-variant-numeric: tabular-nums;
}

.nutrition-table thead th {
  background: rgba(201, 169, 97, 0.08);
  border-bottom: 1px solid rgba(201, 169, 97, 0.22);
}

.nutrition-table tbody tr:nth-child(even) { background: rgba(201, 169, 97, 0.04); }
.nutrition-table tbody tr:last-child th,
.nutrition-table tbody tr:last-child td { border-bottom: none; }

/* RTL: flip data alignment */
body[dir="rtl"] .nutrition-table thead th,
body[dir="rtl"] .nutrition-table tbody td { text-align: left; }
body[dir="rtl"] .nutrition-table thead th:first-child,
body[dir="rtl"] .nutrition-table tbody th { text-align: right; }

/* Specs list (dark card) */
.specs-list {
  list-style: none;
  margin: 0;
  padding: 1.5rem clamp(1.25rem, 2.5vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.specs-list li {
  display: grid;
  grid-template-columns: minmax(120px, 0.7fr) 1fr;
  gap: 1.25rem;
  align-items: baseline;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid rgba(201, 169, 97, 0.16);
}

.specs-list li:last-child { border-bottom: none; padding-bottom: 0; }

.specs-list__label {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gold-light);
}

.specs-list__value {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--color-cream);
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.85rem;
}

.specs-list__value > span:not(:last-child)::after {
  content: '·';
  margin-inline-start: 0.85rem;
  color: rgba(201, 169, 97, 0.55);
}

/* --- USP / Why Choose Crunch Rush --- */
.usp-section { background: var(--color-cream-warm); }

/* --- USP journey flow (5 steps in a wave) --- */
.usp-flow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(0.75rem, 1.6vw, 1.5rem);
  max-width: 1240px;
  margin: 0 auto;
  padding: 1rem 0 3rem;
  align-items: end;
}

.usp-flow__path {
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 22px;
  width: 92%;
  height: 100px;
  pointer-events: none;
  z-index: 0;
}

.usp-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Mountain offset: low → high → highest → high → low */
.usp-step--1 { margin-top: 88px; }
.usp-step--2 { margin-top: 44px; }
.usp-step--3 { margin-top: 0; }
.usp-step--4 { margin-top: 44px; }
.usp-step--5 { margin-top: 88px; }

.usp-step__card {
  position: relative;
  width: 100%;
  background: #fff;
  border: 1px solid rgba(201, 169, 97, 0.22);
  border-radius: var(--radius-md);
  padding: 1.4rem 1.25rem 1.5rem;
  box-shadow: 0 14px 32px -22px rgba(42, 24, 16, 0.3);
  text-align: center;
  transition: transform 0.4s var(--ease-elegant), box-shadow 0.4s var(--ease-elegant);
}

/* Card 04 (Imported Premium Quality) mirrors Card 02 (Display-Ready Carton) dimensions */
.usp-step--4 .usp-step__card {
  min-height: 230px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.usp-step__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 44px -22px rgba(42, 24, 16, 0.35);
}

.usp-step__card h3 {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-brown-darkest);
  margin: 0 0 0.9rem;
  line-height: 1.3;
}

.usp-step__card p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

.usp-step__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  text-align: start;
}

.usp-step__list li {
  position: relative;
  padding-inline-start: 1.1rem;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.usp-step__list li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 99px;
  background: var(--color-gold);
}

/* Connector stem under each card */
.usp-step__stem {
  width: 2px;
  height: 18px;
  background: linear-gradient(180deg, rgba(201, 169, 97, 0.5), rgba(201, 169, 97, 0));
  margin-top: 0;
}

/* Hexagon icon — clip-path keeps it a clean hexagon */
.usp-step__hex {
  width: 64px;
  height: 72px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  display: grid;
  place-items: center;
  color: var(--color-cream);
  position: relative;
  filter: drop-shadow(0 8px 14px rgba(42, 24, 16, 0.22));
}

.usp-step__hex svg { width: 26px; height: 26px; }

/* Five tonal variations across the brand palette */
.usp-step--1 .usp-step__hex { background: linear-gradient(160deg, var(--color-gold-light) 0%, var(--color-gold-pale) 100%); color: var(--color-brown-darkest); }
.usp-step--2 .usp-step__hex { background: linear-gradient(160deg, var(--color-gold) 0%, var(--color-gold-light) 100%); color: var(--color-brown-darkest); }
.usp-step--3 .usp-step__hex { background: linear-gradient(160deg, var(--color-brown-light) 0%, var(--color-gold) 100%); color: var(--color-cream); }
.usp-step--4 .usp-step__hex { background: linear-gradient(160deg, var(--color-brown) 0%, var(--color-brown-light) 100%); color: var(--color-cream); }
.usp-step--5 .usp-step__hex { background: linear-gradient(160deg, var(--color-brown-dark) 0%, var(--color-brown) 100%); color: var(--color-cream); }

/* Dot sitting on the dashed journey path */
.usp-step__dot {
  width: 14px;
  height: 14px;
  border-radius: 99px;
  background: var(--color-cream);
  border: 3px solid var(--color-gold);
  margin-top: 14px;
  box-shadow: 0 4px 10px rgba(42, 24, 16, 0.18);
}

.usp-step--1 .usp-step__dot { border-color: var(--color-gold-light); }
.usp-step--5 .usp-step__dot { border-color: var(--color-brown); }

/* Responsive: stack vertically below 900px */
@media (max-width: 900px) {
  .usp-flow {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    padding-bottom: 1rem;
  }
  .usp-flow__path { display: none; }
  .usp-step,
  .usp-step--1,
  .usp-step--2,
  .usp-step--3,
  .usp-step--4,
  .usp-step--5 { margin-top: 0; }
  .usp-step { flex-direction: row; align-items: stretch; gap: 1rem; text-align: start; }
  .usp-step__card { flex: 1; text-align: start; }
  .usp-step__card h3 { text-align: start; }
  .usp-step__list { text-align: start; }
  .usp-step__stem,
  .usp-step__dot { display: none; }
  .usp-step__hex { flex-shrink: 0; align-self: center; }
}

/* --- Production & Quality --- */
.production-section {
  position: relative;
  background: linear-gradient(160deg, var(--color-brown-darkest) 0%, var(--color-brown-dark) 60%, var(--color-brown) 100%);
}

.production-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 18%, rgba(201, 169, 97, 0.12), transparent 45%),
    radial-gradient(circle at 88% 82%, rgba(201, 169, 97, 0.08), transparent 50%);
  pointer-events: none;
}

.production-section .container { position: relative; z-index: 1; }

.production-section .section-eyebrow { color: var(--color-gold-light); }
.production-section .section-title { color: var(--color-cream); }
.production-section .section-subtitle { color: rgba(250, 247, 242, 0.72); }

.production-checklist {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.production-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.1rem 1.4rem;
  background: rgba(250, 247, 242, 0.06);
  border: 1px solid rgba(201, 169, 97, 0.28);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 28px -22px rgba(0, 0, 0, 0.6);
  line-height: 1.55;
  backdrop-filter: blur(4px);
  transition: border-color 0.4s var(--ease-elegant), background 0.4s var(--ease-elegant);
}

.production-checklist li:hover {
  border-color: rgba(201, 169, 97, 0.5);
  background: rgba(250, 247, 242, 0.1);
}

.production-check {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  padding: 4px;
  border-radius: 50%;
  background: var(--gradient-gold);
  color: var(--color-brown-darkest);
  box-shadow: 0 4px 10px -2px rgba(201, 169, 97, 0.45);
}

.production-checklist strong {
  color: var(--color-cream);
  font-weight: 700;
}

.production-checklist span {
  color: rgba(250, 247, 242, 0.7);
  margin-inline-start: 0.35rem;
}

/* --- Responsive: Production checklist (self-contained, was previously
   coupled inside the Vision/Mission media query) --- */
@media (max-width: 768px) {
  .production-checklist li { padding: 1rem 1.1rem; }
}

/* --- Flavors chip grid --- */
.flavors-section {
  background: linear-gradient(180deg, var(--color-cream) 0%, var(--color-cream-warm) 100%);
}

/* Honeycomb arrangement — 4+4 with second row offset by half a hex */
.flavors-grid {
  list-style: none;
  margin: 0 auto;
  padding: 1.5rem 0;
  max-width: 1080px;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  column-gap: clamp(0.5rem, 1.2vw, 1rem);
  row-gap: clamp(1.5rem, 3vw, 2.5rem);
}

.flavors-grid > .flavor-tile:nth-child(1) { grid-column: 1 / span 2; }
.flavors-grid > .flavor-tile:nth-child(2) { grid-column: 3 / span 2; }
.flavors-grid > .flavor-tile:nth-child(3) { grid-column: 5 / span 2; }
.flavors-grid > .flavor-tile:nth-child(4) { grid-column: 7 / span 2; }
.flavors-grid > .flavor-tile:nth-child(5) { grid-column: 2 / span 2; }
.flavors-grid > .flavor-tile:nth-child(6) { grid-column: 4 / span 2; }
.flavors-grid > .flavor-tile:nth-child(7) { grid-column: 6 / span 2; }
.flavors-grid > .flavor-tile:nth-child(8) { grid-column: 8 / span 2; }

/* Pull second row up so the hexes lock into a honeycomb lattice */
.flavors-grid > .flavor-tile:nth-child(n + 5) {
  margin-top: -2.6rem;
}

@media (max-width: 880px) {
  .flavors-grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 1.5rem;
    row-gap: 1.75rem;
  }
  .flavors-grid > .flavor-tile,
  .flavors-grid > .flavor-tile:nth-child(1),
  .flavors-grid > .flavor-tile:nth-child(2),
  .flavors-grid > .flavor-tile:nth-child(3),
  .flavors-grid > .flavor-tile:nth-child(4),
  .flavors-grid > .flavor-tile:nth-child(5),
  .flavors-grid > .flavor-tile:nth-child(6),
  .flavors-grid > .flavor-tile:nth-child(7),
  .flavors-grid > .flavor-tile:nth-child(8) {
    grid-column: auto;
    margin-top: 0;
  }
}

.flavor-tile {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  transition: transform 0.55s var(--ease-elegant);
}

.flavor-tile:hover { transform: translateY(-4px); }

.flavor-tile__num {
  position: static;
  font-family: var(--font-display, 'Playfair Display'), serif;
  font-style: italic;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-gold);
  opacity: 0.85;
}

/* The hex — built with two stacked clip-path layers so we get a true gold border */
.flavor-tile__icon {
  position: relative;
  width: 110px;
  height: 124px;
  display: grid;
  place-items: center;
  font-size: 2.7rem;
  line-height: 1;
  isolation: isolate;
  transition: transform 0.55s var(--ease-elegant), filter 0.55s var(--ease-elegant);
  filter: drop-shadow(0 14px 22px rgba(201, 169, 97, 0.28));
}

.flavor-tile__icon::before,
.flavor-tile__icon::after {
  content: '';
  position: absolute;
  inset: 0;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

/* Outer hex acts as the gold border */
.flavor-tile__icon::before {
  background: linear-gradient(155deg, var(--color-gold) 0%, var(--color-gold-light) 45%, var(--color-gold) 100%);
  z-index: -2;
}

/* Inner hex inset by 2px — the cream gradient fill */
.flavor-tile__icon::after {
  inset: 2px;
  background:
    radial-gradient(circle at 30% 28%, #ffffff 0%, var(--color-cream) 45%, var(--color-gold-pale) 100%);
  z-index: -1;
}

.flavor-tile:hover .flavor-tile__icon {
  transform: rotate(-3deg) scale(1.04);
  filter: drop-shadow(0 22px 30px rgba(201, 169, 97, 0.45));
}

.flavor-tile__name {
  font-family: var(--font-display, 'Playfair Display'), serif;
  font-style: italic;
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--color-brown-darkest);
  text-align: center;
  letter-spacing: 0.005em;
  line-height: 1.3;
  margin-top: 0.4rem;
  position: relative;
}

/* Thin gold flourish under each name */
.flavor-tile__name::after {
  content: '';
  display: block;
  width: 22px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
  margin: 0.4rem auto 0;
  opacity: 0.6;
  transition: width 0.5s var(--ease-elegant), opacity 0.5s var(--ease-elegant);
}

.flavor-tile:hover .flavor-tile__name::after {
  width: 42px;
  opacity: 1;
}

/* --- Competitive Advantage --- */
.advantage-section {
  position: relative;
  background:
    linear-gradient(160deg, var(--color-gold-pale) 0%, #efddb5 50%, var(--color-gold-pale) 100%);
}

.advantage-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 22%, rgba(201, 169, 97, 0.22), transparent 40%),
    radial-gradient(circle at 88% 78%, rgba(201, 169, 97, 0.18), transparent 42%);
  pointer-events: none;
}

.advantage-section .container { position: relative; z-index: 1; }

.advantage-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.advantage-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1.15rem 1.6rem;
  background: #fff;
  border: 1px solid rgba(201, 169, 97, 0.32);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 28px -20px rgba(42, 24, 16, 0.28);
  color: var(--color-brown-darkest);
  font-size: 1rem;
  line-height: 1.55;
  transition: transform 0.4s var(--ease-elegant), box-shadow 0.4s var(--ease-elegant), border-color 0.4s var(--ease-elegant);
  overflow: hidden;
}

.advantage-item::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--gradient-gold);
  transform: scaleY(0.4);
  transform-origin: center;
  transition: transform 0.4s var(--ease-elegant);
}

.advantage-item:hover {
  transform: translateX(4px);
  border-color: rgba(201, 169, 97, 0.45);
  box-shadow: 0 18px 36px -22px rgba(42, 24, 16, 0.3);
}

body[dir="rtl"] .advantage-item:hover { transform: translateX(-4px); }

.advantage-item:hover::before { transform: scaleY(1); }

.advantage-item__icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--gradient-gold);
  color: var(--color-brown-darkest);
  display: grid;
  place-items: center;
  box-shadow: 0 4px 10px -2px rgba(201, 169, 97, 0.45);
}

.advantage-item__icon svg {
  width: 18px;
  height: 18px;
}

.advantage-item__text {
  font-weight: 500;
  flex: 1;
}

/* --- Product Catalog Table — neutral grid look matching reference --- */
.catalog-section {
  background: var(--color-cream);
}

.catalog-table-wrap {
  max-width: 1280px;
  margin: 0 auto;
  overflow-x: auto;
  background: #fff;
  border: 1px solid #4a4a4a;
  box-shadow: 0 16px 36px -22px rgba(42, 24, 16, 0.28);
  -webkit-overflow-scrolling: touch;
}

.catalog-table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
  font-size: 0.95rem;
  color: #1a1a1a;
  background: #fff;
}

.catalog-table th,
.catalog-table td {
  padding: 0.9rem 0.85rem;
  text-align: center;
  vertical-align: middle;
  border: 1px solid #4a4a4a;
  background: #fff;
}

/* Header row — light gray fill, bold dark text */
.catalog-table thead th {
  background: #ebebeb;
  font-weight: 700;
  font-size: 0.95rem;
  color: #1a1a1a;
  letter-spacing: 0;
  padding: 0.9rem 0.75rem;
  line-height: 1.25;
}

/* Subtle zebra striping for the variant (sub) rows */
.catalog-table tbody tr:nth-child(even) td {
  background: #f4f4f4;
}

/* Kind column — white, regular weight, vertical text rhythm */
.catalog-kind {
  background: #fff !important;
  font-weight: 500;
  font-size: 1rem;
  color: #1a1a1a;
}

/* Flavor column — bold, larger, white background */
.catalog-flavor {
  background: #fff !important;
  font-weight: 700;
  font-size: 1.15rem;
  color: #1a1a1a;
}

/* Picture cell */
.catalog-pic {
  padding: 0.5rem !important;
  background: #fff !important;
}

.catalog-pic img {
  display: block;
  max-width: 78px;
  max-height: 78px;
  width: auto;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
}

.catalog-pic__ph {
  display: block;
  width: 78px;
  height: 78px;
  margin: 0 auto;
  background:
    linear-gradient(135deg, #f0f0f0 0%, #fafafa 100%);
  border: 1px dashed #b8b8b8;
  border-radius: 4px;
  position: relative;
}

.catalog-pic__ph::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, transparent 49%, #b8b8b8 49%, #b8b8b8 51%, transparent 51%),
    linear-gradient(45deg,  transparent 49%, #b8b8b8 49%, #b8b8b8 51%, transparent 51%);
  opacity: 0.35;
}

/* Weight column — bold */
.catalog-table tbody td:nth-child(4),
.catalog-table tbody tr:not(:has(.catalog-kind)) td:nth-child(3) {
  font-weight: 700;
}

/* Barcodes — bold, tabular numerics */
.catalog-barcode {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  font-size: 0.95rem;
  color: #1a1a1a;
}

/* Price */
.catalog-price {
  font-weight: 500;
  color: #1a1a1a;
}

@media (max-width: 880px) {
  .catalog-table { font-size: 0.82rem; }
  .catalog-table th,
  .catalog-table td { padding: 0.55rem 0.45rem; }
  .catalog-flavor { font-size: 0.95rem; }
  .catalog-pic img { max-width: 60px; max-height: 60px; }
}

/* --- Why Partner With Us --- */
.partner-section {
  position: relative;
  background:
    linear-gradient(180deg, #eadeba 0%, #d8c694 100%);
  border-top: 1px solid rgba(201, 169, 97, 0.55);
  box-shadow: inset 0 8px 24px -16px rgba(42, 24, 16, 0.18);
}

.partner-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.45), transparent 45%),
    radial-gradient(circle at 88% 82%, rgba(201, 169, 97, 0.25), transparent 50%);
  pointer-events: none;
}

.partner-section .container { position: relative; z-index: 1; }

.partner-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.75rem, 1.8vw, 1.5rem);
  max-width: 1280px;
  margin: 0 auto;
}

.partner-card {
  background: #fff;
  border: 1px solid rgba(201, 169, 97, 0.18);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 1.8vw, 2rem) clamp(0.9rem, 1.4vw, 1.5rem);
  text-align: center;
  box-shadow: 0 10px 28px -18px rgba(42, 24, 16, 0.2);
  transition: transform 0.4s var(--ease-elegant), box-shadow 0.4s var(--ease-elegant);
}

.partner-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 50px -22px rgba(42, 24, 16, 0.3);
}

.partner-card__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--gradient-gold);
  color: var(--color-brown-darkest);
  display: grid;
  place-items: center;
  margin: 0 auto 1.1rem;
}
.partner-card__icon svg { width: 30px; height: 30px; }

.partner-card h3 {
  font-family: var(--font-display), serif;
  font-size: 1.15rem;
  color: var(--color-brown-darkest);
  margin: 0 0 0.5rem;
}

.partner-card p {
  color: var(--color-text-muted);
  font-size: 0.94rem;
  line-height: 1.55;
  margin: 0;
}

/* --- Responsive: partner cards reflow on smaller screens --- */
@media (max-width: 1024px) {
  .partner-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .partner-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 400px) {
  .partner-grid { grid-template-columns: 1fr; }
}

/* --- Responsive: collapse Vision/Mission 2-col into 1 on mobile --- */
@media (max-width: 768px) {
  .vm-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .vm-card__icon { width: 48px; height: 48px; margin-bottom: 1rem; }
  .vm-card__icon svg { width: 24px; height: 24px; }
  .vm-card__label { font-size: 0.7rem; letter-spacing: 0.18em; }
  .vm-card__list { gap: 0.55rem; }
}