/* ============================================
   GAD'S BERLIN — BRAND TOKENS
   ============================================ */
:root {
  --teal: #3FA0AD;
  --teal-dark: #2D7A85;
  --teal-darker: #1E5A63;
  --teal-light: #7FC0CB;
  --teal-pale: #D4ECEF;
  --teal-hero: #A7D8E0;

  --gold: #E8B547;
  --gold-bright: #F5CF5A;
  --gold-dark: #B8862C;

  --pink: #F5A5B8;
  --pink-bright: #E87598;

  --pistachio: #A8C88A;

  --cream: #FEF8E8;
  --cream-warm: #FAEEC8;
  --white: #FFFFFF;
  --ink: #1A2E33;
  --ink-soft: #3D4F54;
  --muted: #7A8A8E;

  --shadow-sm: 0 2px 8px rgba(26,46,51,0.06);
  --shadow-md: 0 8px 24px rgba(26,46,51,0.10);
  --shadow-lg: 0 20px 50px rgba(26,46,51,0.18);
  --border: rgba(63,160,173,0.2);

  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-xl: 40px;
  --radius-round: 999px;

  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-hand: 'Caveat', cursive;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body {
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--ink);
  overflow-x: hidden;
  line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; border: none; cursor: pointer; background: none; color: inherit; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }

/* ============================================
   ANNOUNCEMENT BAR
   ============================================ */
.announce {
  background: var(--ink);
  color: var(--cream);
  padding: 6px 0;
  overflow: hidden;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.announce-track {
  display: flex;
  gap: 60px;
  animation: scroll 40s linear infinite;
  width: max-content;
}
.announce-item {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  white-space: nowrap;
}
.announce-item::before { content: '✦'; color: var(--gold); font-size: 14px; }
@keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============================================
   TOP STATUS BAR (tier 2) — live open/delivery/pickup + order CTA
   ============================================ */
.statusbar {
  background: var(--cream-warm, #FBF1D9);
  border-bottom: 1px solid rgba(26,46,51,0.10);
}
.statusbar-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 7px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.statusbar-chips {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.statusbar-chips::-webkit-scrollbar { display: none; }
.statuschip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  flex: none;
  background: rgba(26,46,51,0.06);
  color: var(--ink);
}
.statuschip.sc-open   { background: #E1F5EE; color: #0F6E56; }
.statuschip.sc-soon   { background: #FAEEDA; color: #854F0B; }
.statuschip.sc-closed { background: #FBEAF0; color: #993556; }
.statuschip.is-off { opacity: 0.42; }
.sc-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #1D9E75;
  animation: scPulse 2s ease-in-out infinite;
}
@keyframes scPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
.statusbar-order {
  margin-inline-start: auto;
  flex: none;
  background: var(--ink);
  color: var(--gold-bright);
  padding: 6px 15px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}
.statusbar-order:hover { background: #14242a; }
@media (max-width: 700px) {
  .statusbar-inner { padding: 6px 10px; gap: 6px; }
  .statuschip { font-size: 11.5px; padding: 4px 9px; }
  .statusbar-order { padding: 6px 12px; font-size: 12px; }
}

/* ============================================
   NAVIGATION
   ============================================ */
.nav {
  position: sticky;
  top: 0;
  background: rgba(254,248,232,0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 90;
  padding: 14px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border);
}
.nav-logo { display: flex; align-items: center; gap: 14px; }
.nav-logo-wrap {
  width: 56px; height: 56px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--gold);
  background: var(--white);
  flex-shrink: 0;
  position: relative;
  box-shadow: 0 2px 8px rgba(26,46,51,0.15);
}
.nav-logo-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
.nav-logo-text {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: 30px;
  color: var(--teal-dark);
  letter-spacing: -1.5px;
  line-height: 1;
}
.nav-links {
  display: flex;
  gap: 32px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.nav-links a {
  color: var(--ink);
  position: relative;
  padding: 4px 0;
  transition: color 0.2s;
}
.nav-links a:hover { color: var(--teal); }
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -2px;
  height: 2px; width: 0;
  background: var(--gold);
  transition: width 0.3s;
}
.nav-links a:hover::after { width: 100%; }

.nav-right { display: flex; gap: 12px; align-items: center; }

.lang-switcher {
  display: flex;
  gap: 2px;
  background: var(--teal-pale);
  padding: 4px;
  border-radius: var(--radius-round);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
}
.lang-switcher button {
  padding: 5px 10px;
  border-radius: var(--radius-round);
  cursor: pointer;
  color: var(--teal-dark);
  transition: all 0.2s;
}
.lang-switcher button.active {
  background: var(--teal-dark);
  color: var(--cream);
}

.nav-icon-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--cream-warm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  transition: all 0.2s;
  font-size: 15px;
}
.nav-icon-btn:hover { background: var(--gold); transform: translateY(-2px); }

.cart-btn {
  background: var(--ink);
  color: var(--cream);
  padding: 11px 20px;
  border-radius: var(--radius-round);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: all 0.2s;
  position: relative;
}
.cart-btn:hover { background: var(--teal-dark); transform: translateY(-2px); }
.cart-count {
  background: var(--gold);
  color: var(--ink);
  min-width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 900;
  padding: 0 6px;
}

/* Mobile nav toggle */
.nav-toggle {
  display: none;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--cream-warm);
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

/* ============================================
   HERO
   ============================================ */
.hero {
  position: relative;
  min-height: 88vh;
  padding: 80px 40px 60px;
  background:
    radial-gradient(ellipse 60% 50% at 30% 40%, rgba(245,207,90,0.2), transparent),
    radial-gradient(ellipse 50% 40% at 80% 70%, rgba(245,165,184,0.18), transparent),
    linear-gradient(180deg, var(--cream) 0%, var(--teal-pale) 100%);
  overflow: hidden;
}

.hero-inner {
  max-width: 1500px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.9fr 1.3fr;
  gap: 40px;
  align-items: center;
  position: relative;
  z-index: 2;
}

.hero-content { position: relative; z-index: 3; }

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--white);
  padding: 8px 18px;
  border-radius: var(--radius-round);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--teal-dark);
  box-shadow: var(--shadow-sm);
  margin-bottom: 24px;
}
.hero-badge .dot {
  width: 8px; height: 8px;
  background: var(--pistachio);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(168,200,138,0.3);
  animation: pulse 2s infinite;
}
.hero-badge.is-closed {
  color: #9a3a3a;
}
.hero-badge.is-closed .dot {
  background: #d65252;
  box-shadow: 0 0 0 4px rgba(214,82,82,0.25);
}
.hero-badge.is-closing-soon {
  color: #a56e0e;
}
.hero-badge.is-closing-soon .dot {
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(232,181,71,0.3);
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(48px, 8vw, 110px);
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: -3px;
  color: var(--ink);
  margin-bottom: 28px;
}
.hero-title em {
  font-style: italic;
  color: var(--teal-dark);
  font-weight: 900;
  position: relative;
  display: inline-block;
}
.hero-title em::after {
  content: '';
  position: absolute;
  left: 0; bottom: 8px;
  width: 100%; height: 10px;
  background: var(--gold);
  z-index: -1;
  border-radius: 3px;
}
.hero-title .hand {
  font-family: var(--font-hand);
  font-style: normal;
  color: var(--pink-bright);
  font-size: 0.7em;
  font-weight: 700;
  transform: rotate(-3deg);
  display: inline-block;
}

.hero-lede {
  font-size: 18px;
  color: var(--ink-soft);
  max-width: 520px;
  margin-bottom: 32px;
  line-height: 1.6;
}

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

.btn-primary {
  background: var(--ink);
  color: var(--cream);
  padding: 16px 30px;
  border-radius: var(--radius-round);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: all 0.25s;
  box-shadow: var(--shadow-md);
}
.btn-primary:hover {
  background: var(--teal-dark);
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.btn-secondary {
  background: var(--white);
  color: var(--ink);
  padding: 16px 30px;
  border-radius: var(--radius-round);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: all 0.25s;
  border: 2px solid var(--ink);
}
.btn-secondary:hover {
  background: var(--ink);
  color: var(--cream);
  transform: translateY(-3px);
}

.hero-stats {
  display: flex;
  gap: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.stat { display: flex; flex-direction: column; gap: 2px; }
.stat-num {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 900;
  color: var(--teal-dark);
  line-height: 1;
}
.stat-lbl {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 600;
}

/* Hero Visual — 3D tilt stage */
.hero-visual {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 620px;
  perspective: 1400px;
  perspective-origin: 50% 40%;
  /* Allow the price tag to peek outside while the hero-product itself
     stays bounded by max-width below. */
  overflow: visible;
}

.hero-product {
  position: relative;
  width: 100%;
  max-width: 680px;
  aspect-ratio: 16/11;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
  z-index: 4;
  margin-left: 0;
  /* keep the inner product image contained */
  overflow: hidden;
  border-radius: var(--radius-lg);
}
.hero-product.idle {
  /* JS now owns the transform via initHeroTilt(); CSS animation disabled to avoid conflict.
     The class is kept as a fallback for users with prefers-reduced-motion, where JS exits early. */
  animation: heroFloat 7s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .hero-product.idle { animation: none; }
}
@keyframes heroFloat {
  0%, 100% { transform: translateY(0) rotateX(6deg) rotateY(-4deg); }
  50%      { transform: translateY(-14px) rotateX(2deg) rotateY(3deg); }
}

/* 3D multi-layer stack — image + reflected shadow */
.hero-product-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}
/* Hero product image — the source PNGs now ship with real alpha
   transparency (no more black background), so we just render them
   normally with shadows and a colour boost. */
.hero-product img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter:
    drop-shadow(0 8px 16px rgba(26,46,51,0.22))
    drop-shadow(0 28px 48px rgba(26,46,51,0.18))
    contrast(1.04)
    saturate(1.08);
  transform: translateZ(60px);
  user-select: none;
  -webkit-user-drag: none;
  position: relative;
  z-index: 2;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform, opacity;
}
/* Stacked rotating hero images — only .is-active is visible */
.hero-product .hero-swap {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateZ(60px) scale(0.86) rotateY(28deg);
  transition:
    opacity 1.1s cubic-bezier(0.22, 0.9, 0.28, 1),
    transform 1.4s cubic-bezier(0.22, 0.9, 0.28, 1);
  pointer-events: none;
}
.hero-product .hero-swap.is-active {
  opacity: 1;
  transform: translateZ(60px) scale(1.15) rotateY(0deg);
  pointer-events: auto;
}
.hero-product .hero-swap.is-leaving {
  opacity: 0;
  transform: translateZ(60px) scale(1.25) rotateY(-28deg);
}
/* Glare / specular highlight layer — updated live by JS */
.hero-product-glare {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  border-radius: var(--radius-lg);
  transform: translateZ(70px);
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0) 45%);
  z-index: 3;
  transition: background 0.08s linear;
}
/* soft glow behind the product — gives lift for 3D */
.hero-product::before {
  content: '';
  position: absolute;
  inset: 10% 12%;
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(245,207,90,0.52), transparent 65%),
    radial-gradient(ellipse 50% 40% at 30% 70%, rgba(245,165,184,0.35), transparent 70%);
  filter: blur(34px);
  transform: translateZ(-60px);
  z-index: -1;
  border-radius: 50%;
}
/* floor reflection — deeper, softer, more believable */
.hero-product::after {
  content: '';
  position: absolute;
  left: 12%; right: 12%;
  bottom: -8%;
  height: 34px;
  background: radial-gradient(ellipse at center, rgba(26,46,51,0.42), rgba(26,46,51,0.15) 45%, transparent 75%);
  filter: blur(14px);
  transform: translateZ(-40px) rotateX(80deg);
  z-index: -1;
}

.hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.6;
  z-index: 1;
}
.hero-blob-1 {
  width: 280px; height: 280px;
  background: radial-gradient(circle, var(--gold-bright), transparent 70%);
  top: 10%; left: 5%;
  animation: blob 10s ease-in-out infinite;
}
.hero-blob-2 {
  width: 320px; height: 320px;
  background: radial-gradient(circle, var(--pink), transparent 70%);
  bottom: 5%; right: 0%;
  animation: blob 12s ease-in-out infinite reverse;
}
@keyframes blob {
  0%, 100% { transform: scale(1) translate(0,0); }
  50% { transform: scale(1.15) translate(10px,-10px); }
}

/* Floating fruits around hero */
.hero-fruit {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}
.hero-fruit svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 14px 24px rgba(26,46,51,0.25));
}
.fruit-1 { top: 4%; right: 12%; width: 90px; height: 90px; animation: floatfruit 7s ease-in-out infinite; }
.fruit-2 { bottom: 12%; left: 4%; width: 100px; height: 100px; animation: floatfruit 9s ease-in-out infinite 1s; }
.fruit-3 { top: 42%; right: -2%; width: 100px; height: 100px; animation: floatfruit 8s ease-in-out infinite 0.5s; }
.fruit-4 { top: 20%; left: 2%; width: 70px; height: 70px; animation: floatfruit 10s ease-in-out infinite 0.7s; }

@keyframes floatfruit {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-22px) rotate(10deg); }
}

/* Price tag callout on hero */
.hero-price-tag {
  position: absolute;
  top: 12%;
  left: -5%;
  background: var(--ink);
  color: var(--cream);
  padding: 14px 22px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  transform: rotate(-6deg);
  z-index: 5;
  border: 3px solid var(--gold);
}
.hero-price-tag-label {
  font-family: var(--font-hand);
  font-size: 18px;
  color: var(--gold);
  line-height: 1;
}
.hero-price-tag-big {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
  margin-top: 4px;
}
.hero-price-tag-sub {
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--teal-light);
  margin-top: 4px;
}

/* ============================================
   SECTION DEFAULTS
   ============================================ */
.section {
  padding: 100px 40px;
  position: relative;
}
.section-inner {
  max-width: 1400px;
  margin: 0 auto;
}
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  margin-bottom: 50px;
  flex-wrap: wrap;
}
.section-label {
  font-family: var(--font-hand);
  color: var(--pink-bright);
  font-size: 26px;
  margin-bottom: 8px;
  line-height: 1;
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -2px;
  color: var(--ink);
}
.section-title em {
  font-style: italic;
  color: var(--teal-dark);
}
.section-desc {
  font-size: 16px;
  color: var(--ink-soft);
  max-width: 440px;
}

/* ============================================
   PRICE BATTLE — THE KEY MESSAGE
   ============================================ */
.pricebattle {
  background: var(--ink);
  color: var(--cream);
  padding: 70px 40px;
  position: relative;
  overflow: hidden;
}
.pricebattle::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 40% 60% at 10% 30%, rgba(232,181,71,0.15), transparent),
    radial-gradient(ellipse 40% 60% at 90% 70%, rgba(63,160,173,0.18), transparent);
}
.pricebattle-inner {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  text-align: center;
}
.pricebattle-label {
  font-family: var(--font-hand);
  color: var(--gold);
  font-size: 32px;
  margin-bottom: 8px;
  line-height: 1;
}
.pricebattle-title {
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -1.5px;
  margin-bottom: 20px;
}
.pricebattle-title em { font-style: italic; color: var(--gold-bright); }
.pricebattle-sub {
  font-size: 17px;
  color: var(--teal-light);
  max-width: 640px;
  margin: 0 auto 40px;
}

.pricebattle-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 700px;
  margin: 0 auto;
}
.pricebattle-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(232,181,71,0.3);
  border-radius: var(--radius-lg);
  padding: 30px 24px;
  backdrop-filter: blur(10px);
}
.pricebattle-card h4 {
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
  font-weight: 700;
}
.pricebattle-card .savings {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 900;
  color: var(--cream);
  line-height: 1;
  margin-bottom: 8px;
}
.pricebattle-card .savings .currency {
  font-size: 28px;
  vertical-align: top;
  margin-right: 4px;
  color: var(--gold-bright);
}
.pricebattle-card p {
  font-size: 14px;
  color: var(--teal-light);
}

/* ============================================
   BESTSELLERS GRID
   ============================================ */
.bestsellers { background: var(--cream); }

.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 28px;
}

.product-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  transition: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}
.product-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
}

.product-img {
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, var(--teal-hero), var(--teal-pale));
  position: relative;
  overflow: hidden;
}
.product-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}
.product-card:hover .product-img img { transform: scale(1.08); }

.product-badges {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 2;
}
.badge {
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  font-weight: 800;
  padding: 5px 10px;
  border-radius: var(--radius-round);
  color: var(--white);
}
.badge-best { background: var(--gold-dark); }
.badge-hot { background: var(--pink-bright); }
.badge-new { background: var(--teal-dark); }

.product-points-tag {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--ink);
  color: var(--gold-bright);
  padding: 6px 12px;
  border-radius: var(--radius-round);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  z-index: 2;
  box-shadow: var(--shadow-md);
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.product-body {
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.product-cat {
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--teal);
  font-weight: 700;
}
.product-name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.1;
}
.product-desc {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  flex: 1;
}
.product-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}
.product-price {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.product-price-old {
  font-size: 13px;
  color: var(--muted);
  text-decoration: line-through;
  font-weight: 500;
}
.product-price-new {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 900;
  color: var(--teal-dark);
  line-height: 1;
}
.product-add {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--cream);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  transition: all 0.2s;
  flex-shrink: 0;
}
.product-add:hover {
  background: var(--gold);
  color: var(--ink);
  transform: rotate(90deg);
}

.products-cta {
  text-align: center;
  margin-top: 48px;
}
.products-cta .btn-secondary {
  padding: 18px 40px;
  font-size: 14px;
}

/* ============================================
   STORY
   ============================================ */
.story {
  background: linear-gradient(180deg, var(--cream) 0%, var(--cream-warm) 100%);
  padding: 110px 40px;
}
.story-inner {
  max-width: 1300px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.story-title {
  font-family: var(--font-display);
  font-size: clamp(40px, 5.5vw, 72px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -2px;
  color: var(--ink);
  margin-bottom: 24px;
}
.story-title em { font-style: italic; color: var(--teal-dark); }
.story-text {
  font-size: 17px;
  color: var(--ink-soft);
  margin-bottom: 20px;
  line-height: 1.7;
}
.story-sig {
  font-family: var(--font-hand);
  font-size: 32px;
  color: var(--pink-bright);
  margin-top: 12px;
}

.story-visual {
  position: relative;
  aspect-ratio: 1;
}
.story-img {
  position: absolute;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(26,46,51,0.25), 0 0 0 4px var(--cream), 0 0 0 6px var(--gold);
  transition: transform 0.4s;
}
.story-img:hover { transform: scale(1.03) rotate(0deg) !important; }
.story-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.story-img-1 {
  width: 68%; height: 78%;
  top: 0; left: 0;
  transform: rotate(-4deg);
  z-index: 2;
}
.story-img-2 {
  width: 58%; height: 58%;
  bottom: 0; right: 0;
  transform: rotate(5deg);
  z-index: 3;
}

/* Decorative sparkles around story */
.story-sparkle {
  position: absolute;
  color: var(--gold);
  font-size: 28px;
  filter: drop-shadow(0 4px 8px rgba(232,181,71,0.4));
  animation: sparkle 3s ease-in-out infinite;
  z-index: 4;
}
.story-sparkle-1 { top: -10px; right: 10%; font-size: 36px; animation-delay: 0s; }
.story-sparkle-2 { top: 40%; left: -20px; font-size: 24px; animation-delay: 1s; color: var(--pink-bright); }
.story-sparkle-3 { bottom: 15%; right: -15px; font-size: 30px; animation-delay: 2s; color: var(--teal); }
.story-sparkle-4 { bottom: -8px; left: 30%; font-size: 22px; animation-delay: 0.5s; }

@keyframes sparkle {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.9; }
  50% { transform: scale(1.2) rotate(15deg); opacity: 1; }
}

/* Background circle decoration behind story images */
.story-visual::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 85%;
  height: 85%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232,181,71,0.15) 0%, transparent 60%);
  z-index: 1;
}

/* ============================================
   LOCATIONS
   ============================================ */
.locations { background: var(--cream); }

.locations-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.location-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-sm);
  transition: all 0.3s;
  border: 1px solid var(--border);
}
.location-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}
.location-type {
  display: inline-block;
  background: var(--pistachio);
  color: var(--ink);
  padding: 4px 12px;
  border-radius: var(--radius-round);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.location-name {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 900;
  color: var(--ink);
  margin-bottom: 6px;
  line-height: 1;
}
.location-addr {
  color: var(--muted);
  font-size: 15px;
  margin-bottom: 20px;
  line-height: 1.5;
}
.location-hours {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.hour-pill {
  background: var(--teal-pale);
  color: var(--teal-darker);
  padding: 6px 12px;
  border-radius: var(--radius-round);
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  gap: 6px;
}

/* A closed day must not look like an opening time. */
.hour-pill.is-closed {
  background: rgba(216, 80, 63, .10);
  color: #9E3325;
}

.location-hours {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.hour-pill .day { font-weight: 800; }

/* ============================================
   FOOTER
   ============================================ */
.footer {
  background: var(--ink);
  color: var(--cream);
  padding: 80px 40px 30px;
}
.footer-inner {
  max-width: 1400px;
  margin: 0 auto;
}
.footer-top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 60px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(254,248,232,0.1);
}
.footer-brand .footer-logo {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 900;
  font-style: italic;
  color: var(--teal-light);
  margin-bottom: 8px;
  line-height: 1;
}
.footer-tagline {
  font-family: var(--font-hand);
  font-size: 22px;
  color: var(--gold);
  margin-bottom: 16px;
}
.footer-description {
  color: rgba(254,248,232,0.7);
  font-size: 14px;
  max-width: 340px;
  margin-bottom: 20px;
  line-height: 1.6;
}
.social-links {
  display: flex;
  gap: 10px;
}
.social-links a {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(254,248,232,0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.5px;
  transition: all 0.2s;
}
.social-links a:hover {
  background: var(--gold);
  color: var(--ink);
}

.footer-col h4 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 16px;
  color: var(--gold);
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 10px; }
.footer-col a {
  color: rgba(254,248,232,0.7);
  font-size: 14px;
  transition: color 0.2s;
}
.footer-col a:hover { color: var(--cream); }

.footer-bottom {
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 12px;
  color: rgba(254,248,232,0.5);
  letter-spacing: 0.5px;
}
.footer-bottom a { color: inherit; }
.footer-bottom a:hover { color: var(--cream); }

/* ============================================
   CART DRAWER
   ============================================ */
.cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26,46,51,0.5);
  backdrop-filter: blur(4px);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.cart-overlay.active { opacity: 1; pointer-events: auto; }

.cart-drawer {
  position: fixed;
  top: 0; right: 0;
  width: 100%;
  max-width: 440px;
  height: 100vh;
  height: 100dvh;
  background: var(--cream);
  z-index: 201;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
}
.cart-drawer.active { transform: translateX(0); }

.cart-head {
  padding: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border);
}
.cart-head h3 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 900;
  color: var(--ink);
}
.cart-close {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--white);
  font-size: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cart-items { flex: 1; overflow-y: auto; padding: 20px 24px; }
.cart-empty { text-align: center; color: var(--muted); padding: 80px 20px; }
.cart-empty .big { font-size: 60px; margin-bottom: 10px; }

.cart-item {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  align-items: center;
}
.cart-item-img {
  width: 72px; height: 72px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--teal-pale);
}
.cart-item-img img { width: 100%; height: 100%; object-fit: cover; }
.cart-item-info { min-width: 0; }
.cart-item-name {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
  line-height: 1.2;
}
.cart-item-price { font-size: 13px; color: var(--teal-dark); font-weight: 700; }
.cart-qty { display: inline-flex; gap: 8px; align-items: center; margin-top: 6px; }
.cart-qty button {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--white);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cart-qty span { font-weight: 700; font-size: 13px; min-width: 20px; text-align: center; }
.cart-remove { color: var(--muted); font-size: 18px; cursor: pointer; }

.cart-foot { padding: 24px; padding-bottom: calc(24px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); background: var(--white); }
.cart-mode {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
  padding: 6px;
  background: var(--teal-pale);
  border-radius: var(--radius-round);
}
.cart-mode button {
  padding: 10px;
  border-radius: var(--radius-round);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--teal-darker);
  transition: all 0.2s;
}
.cart-mode button.active {
  background: var(--ink);
  color: var(--cream);
}
.cart-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
}
.cart-total-label { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; font-weight: 600; }
.cart-total-value {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 900;
  color: var(--ink);
}
.cart-checkout {
  width: 100%;
  background: var(--ink);
  color: var(--cream);
  padding: 16px;
  border-radius: var(--radius-round);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  transition: all 0.2s;
}
.cart-checkout:hover:not(:disabled) { background: var(--teal-dark); }
.cart-checkout:disabled { opacity: 0.4; cursor: not-allowed; }

/* ============================================
   MOBILE MENU
   ============================================ */
.mobile-menu {
  position: fixed;
  top: 0; right: 0;
  width: 100%;
  max-width: 340px;
  height: 100vh;
  height: 100dvh;
  background: var(--cream);
  z-index: 150;
  transform: translateX(100%);
  transition: transform 0.3s;
  padding: 70px 30px 30px;
  box-shadow: var(--shadow-lg);
}
.mobile-menu.active { transform: translateX(0); }
.mobile-menu a {
  display: block;
  padding: 16px 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  border-bottom: 1px solid var(--border);
  letter-spacing: 0.5px;
}
.mobile-menu-close {
  position: absolute;
  top: 20px; right: 20px;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--white);
  font-size: 20px;
}

/* ============================================
   TOAST
   ============================================ */
.toast {
  position: fixed;
  bottom: 30px; left: 50%;
  transform: translateX(-50%) translateY(120%);
  background: var(--ink);
  color: var(--cream);
  padding: 14px 24px;
  border-radius: var(--radius-round);
  font-weight: 600;
  font-size: 14px;
  box-shadow: var(--shadow-lg);
  z-index: 300;
  transition: transform 0.35s;
  letter-spacing: 0.3px;
}
.toast.show { transform: translateX(-50%) translateY(0); }

/* ============================================
   SECTION REVEAL & PRODUCT CARDS ENTRY
   ============================================ */
/* Section reveal: rise + fade + subtle 3D tilt as each block enters view */
.reveal-3d {
  opacity: 0;
  transform: translate3d(0, 48px, 0) rotateX(8deg) scale(0.985);
  transform-origin: 50% 100%;
  transition:
    opacity 0.8s cubic-bezier(0.22, 0.9, 0.28, 1),
    transform 0.9s cubic-bezier(0.22, 0.9, 0.28, 1);
  will-change: transform, opacity;
}
.reveal-3d.in-view {
  opacity: 1;
  transform: translate3d(0, 0, 0) rotateX(0deg) scale(1);
}

/* Product cards: staggered 3D tilt-in when the bestsellers section enters view */
.products-grid .product-card {
  opacity: 0;
  transform: translate3d(0, 60px, 0) rotateX(14deg) scale(0.95);
  transform-origin: 50% 100%;
  transition:
    opacity 0.7s cubic-bezier(0.22, 0.9, 0.28, 1),
    transform 0.9s cubic-bezier(0.22, 0.9, 0.28, 1);
}
.bestsellers.in-view .products-grid .product-card { opacity: 1; transform: none; }
.bestsellers.in-view .products-grid .product-card:nth-child(1){transition-delay:.04s}
.bestsellers.in-view .products-grid .product-card:nth-child(2){transition-delay:.10s}
.bestsellers.in-view .products-grid .product-card:nth-child(3){transition-delay:.16s}
.bestsellers.in-view .products-grid .product-card:nth-child(4){transition-delay:.22s}
.bestsellers.in-view .products-grid .product-card:nth-child(5){transition-delay:.28s}
.bestsellers.in-view .products-grid .product-card:nth-child(6){transition-delay:.34s}
.bestsellers.in-view .products-grid .product-card:nth-child(7){transition-delay:.40s}
.bestsellers.in-view .products-grid .product-card:nth-child(8){transition-delay:.46s}

/* Hero carousel dots — a small indicator for the rotating dishes */
.hero-carousel-dots {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 10;
}
.hero-carousel-dots button {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(26,46,51,0.22);
  transition: all 0.25s;
  padding: 0;
}
.hero-carousel-dots button.active {
  background: var(--teal-dark);
  transform: scale(1.35);
  box-shadow: 0 0 0 4px rgba(63,160,173,0.18);
}

/* ============================================
   3D IMMERSIVE LAYER — WebGL canvas + CSS 3D ghosts
   ============================================ */
/* Fixed WebGL stage that sits behind everything.
   pointer-events: none makes it 100% click-through,
   and low z-index keeps it under all content & buttons. */
.gads-3d-stage {
  position: fixed;
  inset: 0;
  z-index: 0;              /* below everything interactive */
  pointer-events: none;    /* never blocks clicks/scroll */
  overflow: hidden;
  contain: strict;
  will-change: transform;
}
.gads-3d-stage canvas {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Readability overlay — disabled at center so products stay vibrant.
   Only subtle corner glow, products in middle display at full vibrance. */
.gads-3d-veil {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(254,248,232,0) 0%, rgba(254,248,232,0) 70%, rgba(254,248,232,0.3) 100%);
  mix-blend-mode: normal;
  opacity: 1;
}

/* Real content sits above the 3D layer (z-index: 0).
   Drawers and overlays keep their original position:fixed + higher z-index. */
.announce, .nav, main, section, footer {
  position: relative;
  z-index: 2;
}
.nav { z-index: 50; }

/* Hero section becomes semi-transparent so the 3D can peek through */
.hero { background: transparent !important; }
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 20% 30%, rgba(215,236,239,0.55), transparent 60%);
  z-index: -1;
  pointer-events: none;
}

/* CSS 3D "ghost" products — decorative background images.
   v6.4: re-enabled at smaller sizes (was disabled in v6.3 which made the
   page look empty). Now they sit behind the hero as soft accents instead
   of dominating the layout with 48-54vw widths. */
.gads-css3d-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  perspective: 1400px;
  perspective-origin: 50% 30%;
}
.gads-3d-stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  contain: strict;
  will-change: transform;
}
.gads-3d-stage canvas {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.gads-3d-veil {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(254,248,232,0) 0%, rgba(254,248,232,0) 70%, rgba(254,248,232,0.3) 100%);
  mix-blend-mode: normal;
  opacity: 1;
}
.gads-css3d-item {
  position: absolute;
  transform-style: preserve-3d;
  will-change: transform, opacity;
  filter: drop-shadow(0 30px 50px rgba(26,46,51,0.25));
  /* Slightly translucent so they read as "ghost" accents, not foreground. */
  opacity: 0.55;
  transition: opacity 0.6s ease;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}
.gads-css3d-item img {
  width: 100%;
  height: auto;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  image-rendering: -webkit-optimize-contrast;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
  /* The "ohne_background" PNGs are real RGBA PNGs with a fully transparent
     background, so the food sits cleanly on any backdrop — no blend hacks needed.
     (Previously these were black-background JPEGs that required mix-blend-mode:
     multiply; that darkened the food and is no longer correct.) */
  border-radius: 18px;
}
/* Ghost products — MUCH smaller than before (was 48-54vw, now 22-26vw)
   so they don't dominate the page or overlap the main content. */
.gads-css3d-item.g3-a { top:  4%;   left: -4%;   width: 24vw; max-width: 320px; min-width: 180px; }
.gads-css3d-item.g3-b { top: 38%;   right: -6%;  width: 26vw; max-width: 360px; min-width: 200px; }
.gads-css3d-item.g3-c { top: 70%;   left:  3%;   width: 22vw; max-width: 300px; min-width: 170px; }

/* Dim the CSS 3D layer when the WebGL canvas is live (desktop) */
.gads-3d-stage.webgl-active ~ .gads-css3d-layer .gads-css3d-item { opacity: 0; }

/* On mobile / small screens, kill ONLY the heavy WebGL canvas. Keep the
   3 CSS-3D dishes visible — they are styled at full size in the 980px block
   below. (Bug fix: previously `.gads-css3d-layer { display:none }` here hid
   the whole layer, so the 3 dishes never showed on phones/tablets.) */
@media (max-width: 980px) {
  .gads-3d-stage { display: none; }
}

/* Dim the CSS 3D layer when the WebGL canvas is live (desktop) */
.gads-3d-stage.webgl-active ~ .gads-css3d-layer .gads-css3d-item { opacity: 0; }

/* ============================================
   DYNAMIC CART BADGE — empty/active states
   ============================================ */
.cart-count {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
              background 0.3s ease,
              color 0.3s ease,
              opacity 0.3s ease;
}
/* Empty state: pale + slightly shrunk */
.cart-count.is-empty {
  background: rgba(232,181,71,0.35);
  color: rgba(26,46,51,0.55);
  transform: scale(0.88);
}
/* Pop when item added */
.cart-count.is-pulsing {
  animation: cartPulse 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes cartPulse {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.55); background: var(--gold-bright); box-shadow: 0 0 0 8px rgba(245,207,90,0.45); }
  70%  { transform: scale(0.92); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(245,207,90,0); }
}

/* ============================================
   SMOOTH SCROLL (momentum wrapper)
   ============================================ */
html.gads-smooth-scroll { scroll-behavior: auto; }
html.gads-smooth-scroll body { overflow: hidden; }
.gads-smooth-wrap {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .gads-3d-stage, .gads-css3d-layer { display: none; }
  .reveal-3d { opacity: 1; transform: none; }
  .products-grid .product-card { opacity: 1; transform: none; }
  html.gads-smooth-scroll, html.gads-smooth-scroll body { overflow: auto; position: static; }
  .gads-smooth-wrap { position: static; transform: none !important; }
}

/* Mobile/tablet: kill WebGL, keep the 3 big CSS 3D products at full visibility.
   Matches the 980px breakpoint above so there's no dead zone where the dishes
   are hidden by one query but not yet enlarged by this one. */
@media (max-width: 980px) {
  .gads-3d-stage { display: none !important; }
  .gads-css3d-item { opacity: 1; filter: drop-shadow(0 32px 42px rgba(26,46,51,0.30)); }
  .gads-css3d-item.g3-a { width: 75vw; max-width: 460px; top: 1%; }
  .gads-css3d-item.g3-b { width: 82vw; max-width: 500px; top: 36%; }
  .gads-css3d-item.g3-c { width: 72vw; max-width: 440px; top: 68%; }
  html.gads-smooth-scroll, html.gads-smooth-scroll body { overflow: auto; position: static; }
  .gads-smooth-wrap { position: static; transform: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-3d { opacity: 1; transform: none; }
  .products-grid .product-card { opacity: 1; transform: none; }
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1100px) {
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; }
  .hero { padding: 50px 24px 40px; min-height: auto; }
  .hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .hero-visual { order: -1; max-width: 500px; margin: 0 auto; width: 100%; }
  .story-inner { grid-template-columns: 1fr; gap: 40px; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 40px; }
}

@media (max-width: 700px) {
  .nav { padding: 10px 14px; gap: 8px; }
  .nav-logo-text { font-size: 22px; }
  .nav-logo-wrap { width: 40px; height: 40px; }
  .nav-right { gap: 6px; }
  .lang-switcher { padding: 3px; font-size: 10px; }
  .lang-switcher button { padding: 4px 8px; }
  .cart-btn { padding: 9px 12px; gap: 6px; font-size: 11px; }
  .cart-btn .cart-label { display: none; }
  .cart-count { min-width: 18px; height: 18px; font-size: 10px; }
  .nav-toggle { width: 36px; height: 36px; }

  .section { padding: 60px 20px; }
  .hero { padding: 30px 20px 30px; }
  .hero-stats { gap: 20px; flex-wrap: wrap; }
  .stat-num { font-size: 26px; }
  .pricebattle { padding: 50px 20px; }
  .pricebattle-grid { grid-template-columns: 1fr; }
  .locations-grid { grid-template-columns: 1fr; }
  .footer { padding: 50px 20px 20px; }
  .footer-top { grid-template-columns: 1fr; gap: 30px; }
  .cart-drawer { max-width: 100%; }
  .hero-price-tag { padding: 10px 16px; top: 8%; }
  .hero-price-tag-big { font-size: 22px; }
  .hero-fruit { font-size: 40px; }
  .announce { font-size: 10px; }
  .section-head { gap: 16px; }
  .btn-primary, .btn-secondary { padding: 14px 22px; font-size: 12px; }
  .products-grid { gap: 16px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}

/* ============================================
   RTL / ARABIC
   ============================================ */
html[dir="rtl"] body {
  font-family: 'Cairo', 'Inter', system-ui, sans-serif;
}
html[dir="rtl"] .hero-inner { direction: rtl; }
html[dir="rtl"] .hero-title { letter-spacing: 0; }
html[dir="rtl"] .hero-title .hand,
html[dir="rtl"] .story-sig,
html[dir="rtl"] .section-label,
html[dir="rtl"] .footer-tagline,
html[dir="rtl"] .menu-hero-label {
  font-family: 'Cairo', cursive;
  font-weight: 700;
}
html[dir="rtl"] .hero-price-tag { transform: rotate(6deg); left: auto; right: -5%; }
html[dir="rtl"] .nav-links { direction: rtl; }
html[dir="rtl"] .announce-track { animation-direction: reverse; }
html[dir="rtl"] .products-grid,
html[dir="rtl"] .locations-grid,
html[dir="rtl"] .pricebattle-grid,
html[dir="rtl"] .footer-top { direction: rtl; }
html[dir="rtl"] .btn-primary span,
html[dir="rtl"] .btn-secondary span { transform: scaleX(-1); }
html[dir="rtl"] .hero-title em::after { left: auto; right: 0; }
html[dir="rtl"] .mobile-menu {
  right: auto; left: 0;
  transform: translateX(-100%);
  box-shadow: -20px 0 50px rgba(26,46,51,0.18);
}
html[dir="rtl"] .mobile-menu.active { transform: translateX(0); }
html[dir="rtl"] .mobile-menu-close { right: auto; left: 20px; }
html[dir="rtl"] .mobile-menu a { text-align: right; }
html[dir="rtl"] .cart-drawer {
  right: auto; left: 0;
  transform: translateX(-100%);
}
html[dir="rtl"] .cart-drawer.active { transform: translateX(0); }


/* ============================================
   HERO POWER-UP — badges, perks, ribbon, fresh chip
   (added 2026-07 · appetite + conversion upgrade)
   ============================================ */
.hero-badges{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  margin-bottom:24px;
}
.hero-badges .hero-badge{ margin-bottom:0; }

.hero-rating-badge{
  display:inline-flex; align-items:center; gap:7px;
  background:var(--white);
  padding:7px 15px; border-radius:var(--radius-round);
  box-shadow:var(--shadow-sm);
  font-size:13px; font-weight:700; color:var(--ink);
  line-height:1;
}
.hero-rating-badge strong{ font-weight:800; }
.hero-stars{ color:var(--gold); letter-spacing:1px; font-size:13px; }
.hero-rating-count{ color:var(--muted); font-weight:600; font-size:12px; }

/* Primary CTA — bigger, warmer, subtle shine */
.btn-primary-xl{
  padding:18px 34px; font-size:15px;
  background:linear-gradient(135deg,var(--ink) 0%,var(--teal-darker) 100%);
  position:relative; overflow:hidden;
}
.btn-primary-xl .btn-spark{ font-size:15px; }
.btn-primary-xl .btn-arrow{ transition:transform .25s; }
.btn-primary-xl:hover .btn-arrow{ transform:translateX(4px); }
.btn-primary-xl::after{
  content:""; position:absolute; top:0; left:-120%;
  width:60%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-20deg);
  animation:btnShine 4.5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes btnShine{ 0%,100%{ left:-120%; } 55%,70%{ left:130%; } }

/* Perks row — the "why order now" strip */
.hero-perks{ display:flex; flex-wrap:wrap; gap:10px 18px; margin-bottom:34px; }
.hero-perk{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13.5px; font-weight:600; color:var(--ink-soft);
}
.hero-perk-ic{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:50%;
  background:rgba(63,160,173,.12); font-size:14px;
}

/* Bestseller ribbon on the visual */
.hero-ribbon{
  position:absolute; top:9%; right:6%; z-index:6;
  background:var(--gold); color:var(--ink);
  font-weight:800; font-size:12px; letter-spacing:1px; text-transform:uppercase;
  padding:8px 16px; border-radius:var(--radius-round);
  box-shadow:var(--shadow-md); transform:rotate(6deg);
  animation:ribbonPop 6s ease-in-out infinite;
}
@keyframes ribbonPop{ 0%,100%{ transform:rotate(6deg) scale(1);} 50%{ transform:rotate(6deg) scale(1.06);} }

/* Fresh & hot chip with animated steam */
.hero-fresh-chip{
  position:absolute; bottom:9%; right:4%; z-index:6;
  display:inline-flex; align-items:center; gap:9px;
  background:var(--white); color:var(--ink);
  padding:10px 16px 10px 14px; border-radius:var(--radius-round);
  box-shadow:var(--shadow-md); font-size:13px; font-weight:700;
}
.steam{ position:relative; width:16px; height:18px; display:inline-block; }
.steam i{
  position:absolute; bottom:0; width:3px; height:12px; border-radius:3px;
  background:linear-gradient(to top,rgba(232,181,71,0),rgba(232,181,71,.75));
  animation:steamRise 2.4s ease-in-out infinite;
}
.steam i:nth-child(1){ left:1px;  animation-delay:0s; }
.steam i:nth-child(2){ left:6px;  height:16px; animation-delay:.5s; }
.steam i:nth-child(3){ left:11px; animation-delay:1s; }
@keyframes steamRise{
  0%{ transform:translateY(4px) scaleY(.6); opacity:0; }
  35%{ opacity:1; }
  100%{ transform:translateY(-8px) scaleY(1.1); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .btn-primary-xl::after, .steam i, .hero-ribbon{ animation:none; }
  .btn-primary-xl::after{ display:none; }
}

/* RTL */
html[dir="rtl"] .hero-ribbon{ right:auto; left:6%; transform:rotate(-6deg); }
html[dir="rtl"] .hero-fresh-chip{ right:auto; left:4%; }

/* Mobile */
@media (max-width:768px){
  .hero-badges{ justify-content:center; }
  .hero-perks{ justify-content:center; text-align:center; }
  .hero-ribbon{ top:4%; right:4%; font-size:11px; padding:6px 12px; }
  .hero-fresh-chip{ bottom:4%; right:2%; font-size:12px; padding:8px 12px; }
}

/* ============================================
   HERO DESSERT SPINNER — drag to rotate (2026-07)
   ============================================ */
.spin-wrap{
  position:relative; z-index:4; width:100%;
  display:flex; flex-direction:column; align-items:center; gap:18px;
}
.dessert-spin{
  position:relative; width:100%; height:min(52vh,420px);
  cursor:grab; touch-action:pan-y; -webkit-user-select:none; user-select:none;
}
.dessert-spin.grabbing{ cursor:grabbing; }
.dessert-spin .d-dish{
  position:absolute; left:50%; top:50%;
  width:min(300px,52%);
  transform-style:preserve-3d; will-change:transform,opacity;
}
.dessert-spin .d-dish img{
  width:100%; display:block; -webkit-user-drag:none; pointer-events:none;
  filter:drop-shadow(0 16px 30px rgba(26,46,51,.28)) saturate(1.08) contrast(1.04);
}
.spin-name{ text-align:center; }
.spin-name span{
  display:inline-block; font-family:var(--font-display); font-weight:900;
  font-size:clamp(22px,2.4vw,36px); letter-spacing:3px; text-transform:uppercase;
  color:var(--ink); line-height:1.15;
}
.spin-name span::after{
  content:""; display:block; height:7px; width:52px; margin:10px auto 0;
  background:var(--gold); border-radius:3px;
}
.spin-hint{
  display:inline-flex; align-items:center; gap:7px;
  background:var(--white); color:var(--ink-soft);
  padding:7px 15px; border-radius:var(--radius-round); box-shadow:var(--shadow-sm);
  font-size:12px; font-weight:600; white-space:nowrap;
}
.spin-hint .dot{ width:7px; height:7px; border-radius:50%; background:var(--teal); animation:pulse 1.8s infinite; }
.spin-name-fade{ opacity:0; transform:translateY(6px); transition:opacity .22s ease, transform .22s ease; }
html[dir="rtl"] .spin-name span{ letter-spacing:0; text-transform:none; }
@media (max-width:768px){
  .dessert-spin{ height:44vh; }
  .spin-name span{ font-size:24px; letter-spacing:2px; }
  .dessert-spin .d-dish{ width:62%; }
}