/* ============================================================
   YUMMY – A Tasteful Moment  |  Brand Redesign
   Palette:  Butter Yellow #FFF176  ·  Soft Terracotta #FFAB91
             Custard #FFF9E1  ·  Gold #D4A843  ·  Dark Cocoa #4E342E
   Vibe:     Sunset-Sorbet · ice-cream-cozy · candy-shop-warm
   ============================================================ */

/* ======== GOOGLE FONTS ======== */
@import url('https://fonts.googleapis.com/css2?family=Pacifico&family=Nunito:wght@400;600;700;800;900&family=Playfair+Display:ital,wght@0,700;0,900;1,700&display=swap');

/* ======== CSS VARIABLES ======== */
:root {
  /* Core palette — Sunset Sorbet */
  --coral:        #FFF176;   /* Butter Yellow — main accent */
  --coral-light:  #FFF9C4;   /* Pale butter yellow */
  --coral-pale:   #FFFDE7;   /* Whisper yellow wash */
  --peach:        #FFCCBC;   /* Soft peach blush */
  --teal:         #FFAB91;   /* Soft Terracotta / Peach — secondary accent */
  --teal-dark:    #FF8A65;   /* Deeper terracotta */
  --teal-light:   #FFCCBC;   /* Light terracotta wash */
  --teal-pale:    #FFF3E0;   /* Warm cream-orange wash */
  --gold:         #D4A843;
  --gold-light:   #F5E0A0;
  --cream:        #FFF9E1;   /* Custard / Light Cream — main background */
  --cream-dark:   #FFF0C2;   /* Slightly deeper custard */
  --deep:         #4E342E;   /* Dark Cocoa Brown — primary text */
  --deep-mid:     #6D4C41;   /* Mid cocoa */
  --white:        #FFFFFF;
  --text:         #4E342E;   /* Dark Cocoa body text */
  --text-light:   #A1887F;   /* Warm rosy-brown for secondary text */
  --card-bg:      #FFFFFF;   /* Clean white so food photos pop */
  --green:        #25D366;

  /* Glows — warm peach and butter yellow */
  --glow-coral:   0 0 12px rgba(255,241,118,0.55), 0 0 32px rgba(255,241,118,0.28);
  --glow-teal:    0 0 12px rgba(255,171,145,0.55), 0 0 32px rgba(255,171,145,0.28);
  --glow-gold:    0 0 12px rgba(212,168,67,0.55),  0 0 32px rgba(212,168,67,0.28);

  /* Shadows — warm terracotta-toned */
  --shadow-sm:    0 4px 16px rgba(255,171,145,0.14);
  --shadow:       0 8px 32px rgba(255,171,145,0.18);
  --shadow-lg:    0 20px 60px rgba(255,171,145,0.22);
  --shadow-card:  0 8px 40px rgba(78,52,46,0.10);

  /* Radii */
  --radius-sm:  12px;
  --radius:     20px;
  --radius-lg:  32px;
  --radius-xl:  48px;

  /* Motion */
  --transition: all 0.32s cubic-bezier(0.4,0,0.2,1);

  /* Fonts */
  --font-display: 'Pacifico', cursive;
  --font-heading: 'Playfair Display', serif;
  --font-body:    'Nunito', sans-serif;

  /* Glass — custard-tinted */
  --glass: rgba(255,249,225,0.92);
}

/* Dark mode — warm cocoa darks, not cold blacks */
body.dark-mode {
  --cream:      #1C1210;
  --cream-dark: #281915;
  --card-bg:    #33201C;
  --glass:      rgba(28,18,16,0.93);
  --text:       #FFF9E1;
  --text-light: #FFCCBC;
  --shadow:     0 8px 32px rgba(0,0,0,0.40);
  --shadow-lg:  0 20px 60px rgba(0,0,0,0.50);
  --shadow-card:0 8px 40px rgba(0,0,0,0.45);
}

/* ======== RESET ======== */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--text);
  overflow-x: hidden;
  transition: background 0.4s, color 0.4s;
  -webkit-font-smoothing: antialiased;
}
a { text-decoration:none; color:inherit; }
ul { list-style:none; }
img { max-width:100%; display:block; }
input, button { font-family:var(--font-body); }

/* ======== SCROLLBAR ======== */
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:var(--cream-dark); }
::-webkit-scrollbar-thumb { background:var(--teal-dark); border-radius:3px; }

/* ======== LOADING SCREEN ======== */
#loader {
  position:fixed; inset:0;
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal-light) 50%, var(--coral) 100%);
  display:flex; align-items:center; justify-content:center;
  z-index:10000;
  transition: opacity 0.6s, visibility 0.6s;
}
#loader.hidden { opacity:0; visibility:hidden; }
.loader-inner { text-align:center; }
.loader-logo-img {
  width: clamp(140px,30vw,200px);
  height: clamp(140px,30vw,200px);
  object-fit:contain;
  border-radius:50%;
  display:block; margin:0 auto 12px;
  box-shadow: 0 0 40px rgba(255,255,255,0.35);
  animation: loaderPulse 1.5s ease-in-out infinite;
}
@keyframes loaderPulse { 0%,100%{box-shadow:0 0 30px rgba(255,255,255,0.3);} 50%{box-shadow:0 0 60px rgba(255,255,255,0.6);} }
.loader-bar-wrap { width:220px; height:5px; background:rgba(255,255,255,0.25); border-radius:3px; margin:24px auto; overflow:hidden; }
.loader-bar { height:100%; background:#FFF176; border-radius:3px; animation:loadFill 0.8s ease forwards; }
.loader-emojis { font-size:1.6rem; letter-spacing:10px; animation:fadeInUp 0.8s 0.4s both; }
@keyframes loadFill { from{width:0} to{width:100%} }
@keyframes fadeInUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:none} }

/* ======== CORNER LOGO ======== */
/* Corner logo — float animation removed (performance + distraction) */
.corner-logo {
  position:fixed; top:20px; left:20px; z-index:100;
  width:80px; height:80px;
  background:rgba(255,249,225,0.95);
  border-radius:50%; padding:8px;
  box-shadow: var(--shadow), 0 0 0 2px rgba(255,171,145,0.15);
  transition:var(--transition);
}
.corner-logo:hover { transform:scale(1.07); }
.corner-logo img { width:100%; height:100%; object-fit:contain; border-radius:50%; }

/* ======== NAVBAR ======== */
#navbar {
  position:fixed; top:0; left:0; right:0;
  z-index:1000; padding:0 24px;
  background:transparent; transition:var(--transition);
}
#navbar.scrolled {
  background:var(--glass);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  box-shadow:0 2px 24px rgba(255,171,145,0.12);
  border-bottom:1px solid rgba(255,171,145,0.2);
}
.nav-inner {
  max-width:1280px; margin:0 auto;
  display:flex; align-items:center; height:72px; gap:32px;
}
.nav-logo {
  font-family:var(--font-display);
  font-size:2.1rem; color:var(--gold); flex-shrink:0;
  text-shadow:0 0 12px rgba(212,168,67,0.35);
  letter-spacing:1px;
}
.nav-links { display:flex; gap:26px; margin-left:auto; }
.nav-links a {
  font-size:0.88rem; font-weight:800; color:var(--deep);
  letter-spacing:0.4px; position:relative; transition:var(--transition);
}
body.dark-mode .nav-links a { color:var(--coral-pale); }
.nav-links a::after {
  content:''; position:absolute; bottom:-3px; left:0; right:0;
  height:2px; background:var(--teal);
  border-radius:2px; transform:scaleX(0); transition:transform 0.3s;
}
.nav-links a:hover { color:var(--teal-dark); }
.nav-links a:hover::after { transform:scaleX(1); }
.nav-actions { display:flex; align-items:center; gap:12px; margin-left:16px; }
.cart-btn, .theme-toggle {
  background:rgba(255,171,145,0.10);
  border:none; cursor:pointer;
  padding:8px 14px; border-radius:40px;
  font-size:0.9rem; font-weight:800; color:var(--teal-dark);
  transition:var(--transition);
}
.cart-btn:hover, .theme-toggle:hover {
  background:var(--teal); color:var(--deep);
  box-shadow:var(--glow-teal);
}
.hamburger { display:none; background:none; border:none; cursor:pointer; font-size:1.6rem; color:var(--teal-dark); }

/* ======== BUTTONS ======== */
.btn-primary {
  display:inline-block;
  background:linear-gradient(135deg, var(--teal), var(--teal-dark));
  color:var(--deep); padding:15px 36px; border-radius:50px;
  font-weight:800; font-size:1rem; border:none; cursor:pointer;
  transition:var(--transition); letter-spacing:0.4px;
  box-shadow: 0 4px 20px rgba(255,171,145,0.32);
  position:relative; overflow:hidden;
}
.btn-primary::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(255,255,255,0.18), transparent);
  border-radius:inherit;
}
.btn-primary:hover {
  transform:translateY(-3px);
  box-shadow: 0 8px 30px rgba(255,171,145,0.50);
}
/* .btn-primary.glow — glow overrides removed; standard shadow applies */
.btn-primary.glow { box-shadow: 0 4px 20px rgba(255,171,145,0.32); }

.btn-secondary {
  display:inline-block;
  background:transparent; color:var(--teal-dark);
  padding:14px 36px; border-radius:50px;
  border:2.5px solid var(--teal);
  font-weight:800; font-size:1rem;
  cursor:pointer; transition:var(--transition);
}
.btn-secondary:hover {
  background:var(--teal); color:var(--deep);
  transform:translateY(-3px);
  box-shadow:var(--glow-teal);
}

/* ======== SECTIONS ======== */
.section-pad { padding:100px 0; }
.container { max-width:1280px; margin:0 auto; padding:0 24px; }
.section-header { text-align:center; margin-bottom:60px; }
.section-tag {
  display:inline-block;
  background:linear-gradient(135deg, var(--teal), var(--teal-dark));
  color:#fff; padding:6px 22px; border-radius:50px;
  font-size:0.82rem; font-weight:800; letter-spacing:1.5px;
  margin-bottom:16px; text-transform:uppercase;
  box-shadow:0 4px 14px rgba(255,171,145,0.30);
}
.section-header h2 {
  font-family:var(--font-heading);
  font-size:clamp(2rem,4vw,3rem); color:var(--deep); line-height:1.2;
}
body.dark-mode .section-header h2 { color:var(--coral-pale); }
.section-header h2 em { color:var(--teal-dark); font-style:italic; }
.section-header p { color:var(--text-light); margin-top:12px; font-size:1.05rem; }

/* Reveal animation — shorter duration for faster perceived performance */
.reveal { opacity:0; transform:translateY(20px); transition:opacity 0.5s ease, transform 0.5s ease; }
.reveal.visible { opacity:1; transform:none; }

/* ======================================================
   HERO — "Life is Sweet" immersive candy-shop energy
   ====================================================== */
#hero {
  position:relative; min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  background:#4E342E; /* Dark Cocoa fallback */ /* deep fallback */
}
#hero::before {
  content:''; position:absolute; inset:0;
  background-image: url('outside.png');
  background-size:cover; background-position:center top;
  filter:brightness(0.45) saturate(1.2);
  z-index:0;
}
/* Warm tinted gradient over photo */
#hero::after {
  content:''; position:absolute; inset:0;
  background: linear-gradient(
    170deg,
    rgba(255,171,145,0.55) 0%,
    rgba(255,171,145,0.20) 40%,
    rgba(78,52,46,0.80) 100%
  );
  z-index:1;
}
/* #particleCanvas and #confettiCanvas elements removed from HTML */
.hero-content {
  position:relative; z-index:3;
  text-align:center; padding:120px 24px 80px;
  max-width:960px;
}

/* Logo ring */
/* Hero center logo — pulse animation removed (reduces rAF churn on mobile) */
.hero-center-logo {
  width:180px; height:180px; margin:0 auto 32px;
  background:rgba(255,255,255,0.12);
  border-radius:50%; padding:14px;
  backdrop-filter:blur(12px);
  border:2px solid rgba(255,171,145,0.50);
  box-shadow: var(--glow-coral), inset 0 0 40px rgba(255,171,145,0.08);
}
.hero-center-logo img { width:100%; height:100%; object-fit:contain; border-radius:50%; }

/* Hero neon — flicker animation removed; keeps readable warm glow */
.hero-neon {
  font-family:var(--font-display);
  font-size:clamp(1.8rem,4vw,2.8rem);
  color:#FFF176;
  letter-spacing:3px;
  margin-bottom:16px;
  display:inline-block;
  text-shadow:
    0 0 6px #FFF176,
    0 0 16px rgba(255,171,145,0.60);
}

.hero-headline {
  font-family:var(--font-heading);
  font-size:clamp(2rem,5vw,4rem);
  color:#fff;
  line-height:1.18;
  margin-bottom:18px;
  text-shadow:0 2px 20px rgba(78,52,46,0.45);
}
.hero-headline em { color:var(--peach); font-style:italic; }

.hero-sub {
  color:rgba(255,249,225,0.85);
  font-size:clamp(1rem,2vw,1.15rem);
  line-height:1.7; margin-bottom:40px;
}
.hero-sub strong { color:#fff; }

.hero-btns { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-bottom:48px; }

/* Peach primary CTA */
.hero-btns .btn-primary {
  background:linear-gradient(135deg, var(--teal) 0%, var(--teal-dark) 100%);
  box-shadow: var(--glow-teal), 0 4px 20px rgba(255,171,145,0.40);
  color:var(--deep);
  font-size:1.05rem; padding:17px 40px;
}
/* WhatsApp CTA */
.btn-whatsapp-hero {
  display:inline-block;
  background:linear-gradient(135deg, #25D366, #128C7E);
  color:#fff; padding:16px 38px; border-radius:50px;
  font-weight:800; font-size:1.05rem;
  box-shadow:0 4px 20px rgba(37,211,102,0.38);
  transition:var(--transition);
}
.btn-whatsapp-hero:hover { transform:translateY(-3px); box-shadow:0 8px 32px rgba(37,211,102,0.55); }

/* Stats bar */
.hero-stats {
  display:flex; gap:36px; justify-content:center; flex-wrap:wrap;
  background:rgba(78,52,46,0.52);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-radius:var(--radius-lg);
  padding:28px 40px;
  border:1px solid rgba(255,171,145,0.30);
  box-shadow:0 8px 32px rgba(0,0,0,0.25);
}
.stat { text-align:center; }
/* stat-num kept for legacy compat; stat-val is the new plain-text version */
.stat-num, .stat-val { font-family:var(--font-heading); font-size:2.4rem; font-weight:900; color:var(--coral-light); }
.stat-label { font-size:0.78rem; color:rgba(255,255,255,0.65); font-weight:800; letter-spacing:1.2px; text-transform:uppercase; }

.scroll-indicator {
  position:absolute; bottom:32px; left:50%; transform:translateX(-50%);
  text-align:center; color:rgba(255,255,255,0.6);
  font-size:0.78rem; font-weight:800; letter-spacing:2px;
  animation:fadeInUp 1s 2s both; z-index:3;
}
.scroll-arrow-anim {
  width:22px; height:22px;
  border-right:2px solid var(--coral-light);
  border-bottom:2px solid var(--coral-light);
  transform:rotate(45deg); margin:8px auto 0;
  animation:scrollBounce 1.5s ease-in-out infinite;
}
@keyframes scrollBounce { 0%,100%{transform:rotate(45deg) translateY(0)} 50%{transform:rotate(45deg) translateY(6px)} }

/* ======== STORE PEEK ======== */
.store-peek-section { padding:80px 0; background:var(--cream-dark); }
.store-peek-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media(max-width:768px){ .store-peek-grid { grid-template-columns:1fr; } }
.store-peek-card {
  border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow-card); background:var(--card-bg);
  transition:var(--transition);
  border:1px solid rgba(255,171,145,0.10);
}
.store-peek-card:hover { transform:translateY(-8px); box-shadow:0 24px 60px rgba(255,171,145,0.18); }
.store-peek-img { width:100%; height:260px; object-fit:cover; transition:transform 0.5s ease; }
.store-peek-card:hover .store-peek-img { transform:scale(1.05); }
.store-peek-label { padding:20px 24px; }
.store-peek-badge {
  display:inline-block; background:var(--teal); color:#fff;
  font-size:0.78rem; font-weight:800; padding:4px 14px;
  border-radius:50px; margin-bottom:8px; letter-spacing:0.5px;
}
.store-peek-label p { color:var(--text-light); font-size:0.9rem; line-height:1.5; }

/* ======== GALLERY ======== */
.gallery-section { background:var(--cream); }
.gallery-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.gallery-item { border-radius:var(--radius); overflow:hidden; aspect-ratio:1; }
.gallery-item--tall { grid-row:span 2; aspect-ratio:unset; }
.gallery-item--wide { grid-column:span 2; aspect-ratio:2/1; }
.gallery-img { width:100%; height:100%; object-fit:cover; transition:transform 0.5s cubic-bezier(0.4,0,0.2,1); }
.gallery-item:hover .gallery-img { transform:scale(1.06); }
@media(max-width:768px){ .gallery-grid{grid-template-columns:1fr 1fr;} .gallery-item--tall{grid-row:span 1;} }
@media(max-width:480px){ .gallery-grid{grid-template-columns:1fr;} .gallery-item--wide{grid-column:span 1;aspect-ratio:1;} }

/* ======================================================
   MENU — Vibrant candy-shop product cards
   ====================================================== */
#menu { background:var(--cream); }
.filter-tabs { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-bottom:48px; }
.filter-btn {
  background:var(--card-bg); border:2px solid rgba(255,171,145,0.20);
  color:var(--text-light); padding:10px 24px; border-radius:50px;
  font-weight:800; font-size:0.88rem; cursor:pointer; transition:var(--transition);
}
.filter-btn.active, .filter-btn:hover {
  background:var(--teal); color:var(--deep); border-color:var(--teal);
  box-shadow:0 3px 12px rgba(255,171,145,0.25);
}
.menu-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:28px; }

/* Card */
.menu-card {
  background:var(--card-bg);
  border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow-card); transition:var(--transition);
  position:relative; cursor:pointer;
  border:1px solid rgba(255,171,145,0.08);
}
.menu-card:hover { transform:translateY(-6px); box-shadow:0 16px 40px rgba(255,171,145,0.14); }
.menu-card.hidden { display:none; }

/* Image area */
.card-img-wrap {
  height:190px; display:flex; align-items:center; justify-content:center;
  font-size:4.5rem; position:relative; overflow:hidden;
  background:linear-gradient(135deg, var(--coral-pale), var(--peach));
}
.card-photo { width:100%; height:100%; object-fit:cover; transition:transform 0.45s ease; }
.menu-card:hover .card-photo { transform:scale(1.08); }

/* Label badges */
.best-tag {
  position:absolute; top:12px; left:12px;
  background:linear-gradient(135deg, var(--teal), var(--teal-dark));
  color:var(--deep); padding:5px 14px; border-radius:50px;
  font-size:0.72rem; font-weight:800; letter-spacing:0.5px;
  box-shadow:0 3px 10px rgba(255,171,145,0.35);
}
.new-tag {
  position:absolute; top:12px; left:12px;
  background:linear-gradient(135deg, var(--teal), var(--teal-dark));
  color:#fff; padding:5px 14px; border-radius:50px;
  font-size:0.72rem; font-weight:800; letter-spacing:0.5px;
  box-shadow:0 3px 10px rgba(255,171,145,0.35);
}
.card-heart {
  position:absolute; top:12px; right:12px;
  background:rgba(255,255,255,0.90); border-radius:50%;
  width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; cursor:pointer; border:none;
  box-shadow:0 2px 10px rgba(0,0,0,0.12); transition:var(--transition);
  backdrop-filter:blur(4px);
}
.card-heart.liked { background:#FF5B7F; }
.card-heart:hover { transform:scale(1.2); }

.card-body { padding:20px 20px 4px; }
.card-name { font-family:var(--font-heading); font-size:1.12rem; color:var(--deep); margin-bottom:6px; font-weight:700; }
.card-desc { font-size:0.83rem; color:var(--text-light); line-height:1.5; margin-bottom:10px; }
/* card-hover-info kept for compat; card-ingredients is the always-visible version */
.card-hover-info { font-size:0.78rem; color:var(--teal-dark); max-height:0; overflow:hidden; transition:max-height 0.4s ease; font-weight:600; }
.menu-card:hover .card-hover-info { max-height:60px; }
/* Always-visible ingredients line — no hover needed, mobile-friendly */
.card-ingredients { font-size:0.78rem; color:var(--teal-dark); font-weight:600; margin-top:4px; line-height:1.4; }
.card-footer {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px 18px;
}
.card-price { font-family:var(--font-heading); font-size:1.1rem; font-weight:700; color:var(--gold); }
.card-add {
  background:linear-gradient(135deg, var(--teal), var(--teal-dark));
  color:var(--deep); border:none; padding:9px 20px; border-radius:50px;
  font-weight:800; font-size:0.83rem; cursor:pointer; transition:var(--transition);
  box-shadow:0 3px 12px rgba(255,171,145,0.28);
}
.card-add:hover { transform:scale(1.08); box-shadow:var(--glow-coral); }
.card-add.added { background:linear-gradient(135deg,#4CAF50,#2E7D32); }

/* ======== CAKE BUILDER ======== */
.builder-section { background: linear-gradient(135deg, var(--teal-pale) 0%, var(--cream) 100%); }
.builder-wrap { display:grid; grid-template-columns:1fr 380px; gap:40px; align-items:start; }
.builder-form { display:flex; flex-direction:column; gap:28px; }
.builder-step label { display:block; font-weight:800; color:var(--deep); margin-bottom:12px; font-size:1rem; }
.builder-step label small { font-weight:400; color:var(--text-light); font-size:0.8rem; }
.option-pills { display:flex; gap:10px; flex-wrap:wrap; }
.pill {
  background:var(--card-bg); border:2px solid rgba(255,171,145,0.18);
  color:var(--text-light); padding:9px 20px;
  border-radius:50px; font-size:0.88rem; font-weight:700; cursor:pointer; transition:var(--transition);
}
.pill:hover { border-color:var(--teal); color:var(--teal-dark); }
.pill.active { background:var(--teal); color:var(--deep); border-color:var(--teal); box-shadow:0 3px 12px rgba(255,171,145,0.30); }
.pill.toggle.active { background:var(--coral); color:var(--deep); border-color:var(--coral); }
.builder-step input[type="text"],
.builder-step input[type="date"] {
  width:100%; background:var(--card-bg); border:2px solid rgba(255,171,145,0.18);
  border-radius:var(--radius-sm); padding:12px 18px;
  font-size:1rem; color:var(--text); transition:var(--transition); outline:none;
  font-weight:600;
}
.builder-step input:focus { border-color:var(--coral); box-shadow:0 0 0 3px rgba(255,171,145,0.12); }
.summary-card {
  background:var(--card-bg); border-radius:var(--radius-lg); padding:32px;
  box-shadow:var(--shadow-lg); border:2px solid rgba(255,171,145,0.20);
  position:sticky; top:100px;
}
.cake-preview {
  background:linear-gradient(135deg, var(--coral-pale), var(--peach));
  border-radius:var(--radius); padding:32px; text-align:center; margin-bottom:24px;
}
.cake-visual { font-size:5rem; } /* pulse animation removed */
.cake-msg-preview { font-family:var(--font-display); font-size:1.1rem; color:var(--deep); margin-top:12px; min-height:28px; }
.summary-card h3 { font-family:var(--font-heading); color:var(--deep); margin-bottom:20px; font-size:1.4rem; }
.s-row { display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid var(--cream-dark); font-size:0.9rem; }
.s-row span { color:var(--text-light); }
.s-row strong { color:var(--deep); font-size:0.9rem; }
.s-row.total { padding-top:16px; margin-top:8px; border-bottom:none; border-top:2px solid rgba(255,171,145,0.25); }
.s-row.total span { font-weight:800; font-size:1rem; color:var(--deep); }
.s-row.total strong { font-size:1.3rem; color:var(--gold); }
.summary-card .btn-primary { width:100%; text-align:center; margin-top:20px; }
.summary-card .btn-secondary { width:100%; text-align:center; margin-top:10px; }

/* ======================================================
   GELATO — Auto-sliding infinite conveyor carousel
   ====================================================== */
.gelato-section {
  background:linear-gradient(170deg, #FFF3E0 0%, #FFFFFF 60%, var(--cream) 100%);
  position:relative; overflow:hidden;
}
.gelato-section::before {
  content:''; position:absolute; inset:0;
  background: radial-gradient(ellipse at 20% 50%, rgba(255,171,145,0.08) 0%, transparent 60%),
              radial-gradient(ellipse at 80% 20%, rgba(212,168,67,0.06) 0%, transparent 50%);
  pointer-events:none;
}
.gelato-section .section-header h2 { color:var(--deep); }
.gelato-section .section-header h2 em { color:var(--teal-dark); }
.gelato-section .section-header p { color:var(--text-light); }
.gelato-section .section-tag { background:var(--teal); }

/* Conveyor belt wrapper */
.gelato-conveyor-outer {
  overflow:hidden;
  padding:12px 0 48px;
  position:relative;
  /* Fade edges */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
}
.gelato-conveyor {
  display:flex; gap:22px;
  width:max-content;
  /* animation applied by JS */
  will-change:transform;
  cursor:grab;
}
.gelato-conveyor:active { cursor:grabbing; }
.gelato-conveyor.paused { animation-play-state:paused !important; }

/* Individual gelato card on carousel */
.gel-slide {
  flex-shrink:0;
  width:280px;
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:0 8px 40px rgba(0,0,0,0.30);
  background:var(--card-bg);
  transition:transform 0.35s cubic-bezier(0.4,0,0.2,1), box-shadow 0.35s ease;
  position:relative;
}
.gel-slide:hover { transform:translateY(-10px) scale(1.035); box-shadow:0 20px 60px rgba(0,0,0,0.45); }
.gel-slide-img { width:100%; height:220px; object-fit:cover; display:block; transition:transform 0.45s ease; }
.gel-slide:hover .gel-slide-img { transform:scale(1.06); }
.gel-slide-body { padding:16px 20px 20px; }
.gel-slide-name { font-family:var(--font-heading); font-size:1.05rem; color:var(--deep); font-weight:700; margin-bottom:4px; }
.gel-slide-desc { font-size:0.80rem; color:var(--text-light); line-height:1.4; }
.gel-slide-best {
  position:absolute; top:12px; right:12px;
  background:var(--teal); color:var(--deep);
  font-size:0.65rem; font-weight:800; padding:4px 10px;
  border-radius:50px; letter-spacing:0.5px;
  box-shadow:0 2px 8px rgba(255,171,145,0.40);
}

/* Dot row under carousel (purely decorative, matches flavour count) */
.gelato-dots { display:flex; gap:8px; justify-content:center; padding-top:24px; }
.gel-dot {
  width:8px; height:8px; border-radius:50%;
  background:rgba(78,52,46,0.20); border:none; cursor:pointer; transition:var(--transition);
}
.gel-dot.active { background:var(--teal-dark); width:22px; border-radius:4px; box-shadow:0 0 8px rgba(255,171,145,0.60); }

/* Keep old drag-track CSS for any pages that use it */
.gelato-track-wrap { overflow:hidden; cursor:grab; padding:16px 0 32px; }
.gelato-track-wrap:active { cursor:grabbing; }
.gelato-track { display:flex; gap:24px; width:max-content; padding:8px 24px; user-select:none; }
.gelato-card { background:var(--card-bg); border-radius:var(--radius-lg); padding:0; text-align:center; min-width:260px; box-shadow:var(--shadow-lg); transition:var(--transition); position:relative; overflow:hidden; cursor:pointer; }
.gelato-card:hover { transform:translateY(-12px) scale(1.05); }
.gelato-img-full { width:100%; height:220px; object-fit:cover; border-radius:var(--radius-lg); display:block; transition:transform 0.4s ease; }
.gelato-img-only:hover .gelato-img-full { transform:scale(1.06); }

/* ======== ABOUT ======== */
.about-section { background:var(--cream); }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.about-text .section-tag { display:inline-block; margin-bottom:16px; }
.about-text h2 { font-family:var(--font-heading); font-size:clamp(1.8rem,3.5vw,2.8rem); color:var(--deep); margin-bottom:24px; }
.about-text h2 em { color:var(--teal-dark); font-style:normal; }
.about-text p { color:var(--text-light); line-height:1.8; margin-bottom:16px; font-size:1rem; }
.about-counters { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:40px; }
.counter {
  background:var(--card-bg); border-radius:var(--radius); padding:24px;
  text-align:center; box-shadow:var(--shadow);
  border:1px solid rgba(255,171,145,0.12);
  transition:var(--transition);
}
.counter:hover { transform:translateY(-4px); box-shadow:0 12px 40px rgba(255,171,145,0.15); }
.count-num { font-family:var(--font-heading); font-size:2.2rem; font-weight:900; color:var(--teal-dark); }
.counter div { font-size:0.78rem; color:var(--text-light); font-weight:800; margin-top:4px; letter-spacing:0.5px; }
.about-visual { position:relative; }
.about-img-card {
  background:linear-gradient(135deg, var(--teal-light) 0%, var(--teal-pale) 100%);
  border-radius:40px; padding:40px 36px; text-align:center;
  box-shadow:var(--shadow-lg), var(--glow-teal);
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; gap:24px;
}
.about-logo-img { display:flex; justify-content:center; }
.about-yummy-logo {
  width:180px; height:180px; object-fit:contain; border-radius:50%;
  box-shadow:0 8px 32px rgba(44,44,44,0.12); background:rgba(255,255,255,0.65); padding:10px;
}
.about-croissant-img img { width:100%; max-height:220px; object-fit:cover; border-radius:var(--radius); box-shadow:0 8px 24px rgba(44,44,44,0.10); }
.croissant-placeholder { width:100%; min-height:180px; border:2px dashed rgba(44,44,44,0.2); border-radius:var(--radius); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; background:rgba(255,255,255,0.4); }
.croissant-placeholder span { font-size:3.5rem; }
.croissant-placeholder p { color:rgba(44,44,44,0.6); font-size:0.85rem; text-align:center; line-height:1.5; }

/* ======== SIGNATURE CAKES ======== */
.signature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.sig-card {
  background:var(--card-bg); border-radius:var(--radius); padding:0 0 32px;
  text-align:center; box-shadow:var(--shadow-card);
  transition:var(--transition); position:relative; overflow:hidden;
  border:2px solid transparent;
}
.sig-img-wrap { width:100%; height:220px; overflow:hidden; border-radius:var(--radius) var(--radius) 0 0; margin-bottom:24px; }
.sig-img { width:100%; height:100%; object-fit:cover; transition:transform 0.5s ease; }
.sig-card:hover .sig-img { transform:scale(1.07); }
.sig-card h3 { font-family:var(--font-heading); font-size:1.3rem; color:var(--deep); margin-bottom:12px; padding:0 24px; }
.sig-card p { color:var(--text-light); font-size:0.9rem; line-height:1.6; margin-bottom:20px; padding:0 24px; }
.sig-price { font-family:var(--font-heading); font-size:1.1rem; font-weight:700; color:var(--gold); }
.sig-card:hover { transform:translateY(-8px); border-color:var(--teal); box-shadow:0 20px 60px rgba(255,171,145,0.18); }
.sig-card.featured { background:var(--teal-dark); border-color:var(--teal); }
.sig-card.featured h3, .sig-card.featured p { color:var(--deep); }
.sig-card.featured .sig-price { color:var(--gold); }
.sig-best { position:absolute; top:12px; left:50%; transform:translateX(-50%); background:var(--teal); color:var(--deep); padding:4px 20px; border-radius:50px; font-size:0.75rem; font-weight:800; white-space:nowrap; z-index:2; }

/* ======================================================
   REVIEWS — Warm, emotional, trust-building
   ====================================================== */
.reviews-section { background:linear-gradient(170deg, var(--cream-dark) 0%, var(--cream) 100%); }

/* Stat banner */
.reviews-stat-bar {
  display:flex; align-items:center; justify-content:center; gap:24px;
  background:linear-gradient(135deg, var(--coral), #FFAB91);
  border-radius:var(--radius-lg); padding:24px 40px; margin-bottom:56px;
  box-shadow:0 8px 32px rgba(255,171,145,0.22);
}
.rsb-number { font-family:var(--font-heading); font-size:3rem; font-weight:900; color:#fff; line-height:1; }
.rsb-label { color:rgba(255,255,255,0.85); font-size:0.9rem; font-weight:800; letter-spacing:0.5px; }
.rsb-stars { color:#FFE066; font-size:1.6rem; letter-spacing:3px; }
.rsb-divider { width:2px; height:50px; background:rgba(255,255,255,0.25); border-radius:2px; }
.google-badge {
  display:inline-flex; align-items:center; gap:6px;
  background:white; border:1px solid #e0e0e0; border-radius:50px;
  padding:6px 16px; font-size:0.82rem; font-weight:800; color:#555;
  margin-top:14px; box-shadow:0 2px 8px rgba(0,0,0,0.08);
}
.review-carousel-wrap { display:flex; align-items:center; gap:16px; }
.carousel-btn {
  background:linear-gradient(135deg, var(--teal), var(--teal-dark));
  color:var(--deep); border:none; border-radius:50%;
  width:52px; height:52px; font-size:1.6rem;
  cursor:pointer; transition:var(--transition); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 16px rgba(255,171,145,0.30);
}
.carousel-btn:hover { background:var(--coral); color:var(--deep); box-shadow:var(--glow-coral); }
.review-track-outer { flex:1; overflow:hidden; }
.review-track { display:flex; gap:24px; transition:transform 0.5s cubic-bezier(0.4,0,0.2,1); }
.review-card {
  background:var(--card-bg); border-radius:var(--radius-lg);
  padding:28px 24px 24px;
  min-width:calc(50% - 14px); max-width:calc(50% - 14px);
  aspect-ratio:1/1; flex-shrink:0;
  box-shadow:var(--shadow-card); position:relative;
  display:flex; flex-direction:column; overflow:hidden;
  border:1px solid rgba(255,171,145,0.08);
  transition:var(--transition);
}
.review-card:hover { transform:translateY(-6px); box-shadow:0 20px 56px rgba(255,171,145,0.16); }
.review-quote { font-size:3.5rem; line-height:1; color:var(--teal-dark); opacity:0.35; font-family:Georgia,serif; flex-shrink:0; margin-bottom:4px; }
.review-stars { color:var(--gold); font-size:1.1rem; margin-bottom:10px; flex-shrink:0; letter-spacing:2px; }
.review-text { font-size:0.9rem; line-height:1.65; color:var(--text-light); flex:1; overflow:hidden; display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; }
.review-author { display:flex; align-items:center; gap:14px; margin-top:16px; padding-top:14px; border-top:1px solid var(--cream-dark); flex-shrink:0; }
.review-avatar {
  width:46px; height:46px; border-radius:50%;
  background:linear-gradient(135deg, var(--teal), var(--teal-dark));
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; font-weight:800; color:var(--deep); flex-shrink:0;
  box-shadow:0 3px 10px rgba(255,171,145,0.30);
}
.review-name { font-weight:800; color:var(--deep); font-size:0.88rem; }
.review-location { font-size:0.74rem; color:var(--text-light); margin-top:2px; }
.review-google-link { margin-left:auto; display:flex; align-items:center; opacity:0.65; transition:opacity 0.2s; flex-shrink:0; }
.review-google-link:hover { opacity:1; }
.review-dots { display:flex; gap:8px; justify-content:center; margin-top:28px; }
.review-dot {
  width:8px; height:8px; border-radius:50%;
  background:rgba(255,171,145,0.20); border:none; cursor:pointer; transition:var(--transition);
}
.review-dot.active { background:var(--teal-dark); width:22px; border-radius:4px; box-shadow:0 0 8px rgba(255,171,145,0.50); }
@media(max-width:768px){
  .review-card { min-width:calc(100% - 0px); max-width:calc(100% - 0px); aspect-ratio:unset; min-height:280px; }
  .reviews-stat-bar { flex-direction:column; gap:16px; padding:24px; text-align:center; }
  .rsb-divider { display:none; }
}

/* ======== DESSERT PICKER SPIN ======== */
.picker-section { background:linear-gradient(135deg, var(--teal-pale), var(--cream)); }
.picker-inner { display:flex; gap:48px; align-items:center; flex-wrap:wrap; }
.picker-text { flex:1; min-width:280px; }
.picker-text h2 { font-family:var(--font-heading); font-size:clamp(1.8rem,3.5vw,2.6rem); color:var(--deep); margin-bottom:12px; }
.picker-text h2 em { color:var(--teal-dark); font-style:normal; }
.picker-text p { color:var(--text-light); line-height:1.7; margin-bottom:28px; }
.picker-wheel { flex:0 0 320px; text-align:center; }
#spinBtn {
  background:linear-gradient(135deg, var(--teal), var(--teal-dark));
  color:var(--deep); border:none; width:200px; height:200px; border-radius:50%;
  font-size:1.2rem; font-weight:800; cursor:pointer;
  box-shadow:0 8px 32px rgba(255,171,145,0.30);
  transition:var(--transition);
}
#spinBtn:hover { transform:scale(1.05); box-shadow:0 12px 40px rgba(255,171,145,0.45); }
#spinBtn.spinning { animation:spinSpin 0.3s linear infinite; }
@keyframes spinSpin { from{transform:rotate(0)} to{transform:rotate(360deg)} }
#spinResult { margin-top:28px; }
.spin-result-img { width:140px; height:140px; object-fit:cover; border-radius:var(--radius-lg); margin:0 auto 16px; box-shadow:var(--shadow-card); }

/* ======== CONTACT / LOCATIONS ======== */
.contact-section { background:var(--cream-dark); }
.locations-grid { display:grid; grid-template-columns:1fr 1fr; gap:36px; }
.location-card {
  background:var(--card-bg); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card); overflow:hidden;
  border:1px solid rgba(255,171,145,0.10);
  transition:var(--transition);
}
.location-card:hover { transform:translateY(-6px); box-shadow:0 24px 64px rgba(255,171,145,0.16); }
.location-store-img { width:100%; height:200px; overflow:hidden; }
.location-img { width:100%; height:100%; object-fit:cover; transition:transform 0.5s ease; }
.location-card:hover .location-img { transform:scale(1.05); }
.location-header { padding:24px 28px 16px; }
.location-badge {
  display:inline-block; background:var(--teal); color:#fff;
  font-size:0.75rem; font-weight:800; padding:4px 14px;
  border-radius:50px; margin-bottom:10px; letter-spacing:0.5px;
}
.location-badge--new { background:var(--coral); }
.location-header h3 { font-family:var(--font-heading); font-size:1.4rem; color:var(--deep); margin-bottom:4px; }
.location-header p { color:var(--text-light); font-size:0.9rem; }
.contact-info { padding:0 28px; display:flex; flex-direction:column; gap:14px; }
.info-card { display:flex; gap:16px; align-items:flex-start; padding:16px; background:var(--cream); border-radius:var(--radius-sm); }
.info-icon { font-size:1.5rem; flex-shrink:0; }
.info-card strong { display:block; font-weight:800; color:var(--deep); font-size:0.9rem; margin-bottom:4px; }
.info-card p { color:var(--text-light); font-size:0.85rem; }
.hours-btn { background:none; border:none; color:var(--teal-dark); font-weight:800; font-size:0.85rem; cursor:pointer; margin-left:8px; }
.hours-drop { display:none; margin-top:8px; }
.hours-drop.open { display:block; }
.h-row { display:flex; justify-content:space-between; font-size:0.82rem; color:var(--text-light); padding:5px 0; border-bottom:1px solid rgba(0,0,0,0.05); }
.map-container { padding:20px 28px; }
.map-placeholder { background:var(--teal-pale); border-radius:var(--radius); padding:32px; text-align:center; }
.map-pin-anim { font-size:2.5rem; animation:pinBounce 1.5s ease-in-out infinite; margin-bottom:12px; }
@keyframes pinBounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.map-label { color:var(--deep); font-size:0.88rem; line-height:1.5; margin-bottom:16px; }
.contact-btns { display:flex; gap:12px; padding:16px 28px 28px; flex-wrap:wrap; }
.btn-whatsapp {
  flex:1; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:linear-gradient(135deg,#25D366,#128C7E); color:#fff;
  padding:14px 24px; border-radius:50px; font-weight:800; font-size:0.9rem;
  box-shadow:0 4px 16px rgba(37,211,102,0.30); transition:var(--transition);
}
.btn-whatsapp:hover { transform:translateY(-3px); box-shadow:0 8px 28px rgba(37,211,102,0.45); }
.btn-call {
  flex:1; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:linear-gradient(135deg, var(--teal), var(--teal-dark)); color:#fff;
  padding:14px 24px; border-radius:50px; font-weight:800; font-size:0.9rem;
  border:none; cursor:pointer; box-shadow:0 4px 16px rgba(255,171,145,0.28); transition:var(--transition);
  text-decoration:none;
}
.btn-call:hover { transform:translateY(-3px); box-shadow:var(--glow-teal); }
@media(max-width:900px){ .locations-grid { grid-template-columns:1fr; } }

/* ======== FOOTER ======== */
#footer { background:var(--deep); color:var(--cream-pale,#FFF9E1); padding:80px 0 0; }
.footer-inner {
  max-width:1280px; margin:0 auto; padding:0 24px;
  display:grid; grid-template-columns:2fr 1fr 1fr 2fr; gap:48px;
}
.footer-brand { font-family:var(--font-display); font-size:2.8rem; color:var(--gold); line-height:1; margin-bottom:12px; }
.footer-logo-col p { color:rgba(255,249,225,0.65); font-size:0.9rem; line-height:1.6; }
.footer-links-col h4,.footer-social-col h4,.footer-news-col h4 { color:var(--coral-light); font-size:1rem; margin-bottom:20px; letter-spacing:1px; font-weight:800; }
.footer-links-col ul { display:flex; flex-direction:column; gap:10px; }
.footer-links-col a { color:rgba(255,249,225,0.65); font-size:0.9rem; transition:var(--transition); font-weight:600; }
.footer-links-col a:hover { color:var(--coral-light); }
.social-links { display:flex; gap:12px; flex-wrap:wrap; }
.social-icon {
  background:rgba(255,171,145,0.15); border-radius:50%;
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; transition:var(--transition);
}
.social-icon:hover { background:var(--teal); transform:scale(1.15); box-shadow:var(--glow-teal); }
.footer-news-col p { color:rgba(255,249,225,0.65); font-size:0.85rem; margin-bottom:16px; }
.newsletter-form { display:flex; gap:10px; }
.newsletter-form input {
  flex:1; background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,171,145,0.25); border-radius:50px;
  padding:10px 18px; color:var(--cream); font-size:0.9rem; outline:none; font-weight:600;
}
.newsletter-form input::placeholder { color:rgba(255,249,225,0.40); }
.newsletter-form input:focus { border-color:var(--teal); }
.newsletter-form button {
  background:var(--teal); color:var(--deep); border:none;
  padding:10px 22px; border-radius:50px; font-weight:800; cursor:pointer; transition:var(--transition);
}
.newsletter-form button:hover { background:var(--teal-dark); }
.footer-bottom { max-width:1280px; margin:48px auto 0; padding:24px; border-top:1px solid rgba(255,171,145,0.15); text-align:center; color:rgba(255,249,225,0.45); font-size:0.85rem; }
@media(max-width:1024px){ .footer-inner{grid-template-columns:1fr 1fr;} }
@media(max-width:768px){ .footer-inner{grid-template-columns:1fr;gap:32px;} }

/* ======== CART SIDEBAR ======== */
.cart-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.55); z-index:2000; display:none; backdrop-filter:blur(4px); }
.cart-overlay.open { display:block; }
.cart-sidebar { position:fixed; top:0; right:-420px; width:400px; height:100vh; background:var(--card-bg); z-index:2001; display:flex; flex-direction:column; transition:right 0.4s cubic-bezier(0.4,0,0.2,1); box-shadow:-8px 0 40px rgba(0,0,0,0.20); }
.cart-sidebar.open { right:0; }
.cart-header { display:flex; justify-content:space-between; align-items:center; padding:28px 24px; border-bottom:1px solid var(--cream-dark); }
.cart-header h3 { font-family:var(--font-heading); font-size:1.4rem; color:var(--deep); }
.close-cart { background:none; border:none; font-size:1.3rem; cursor:pointer; color:var(--text-light); transition:var(--transition); }
.close-cart:hover { color:var(--teal-dark); transform:scale(1.2); }
.cart-items { flex:1; overflow-y:auto; padding:20px 24px; }
.empty-cart { text-align:center; color:var(--text-light); padding:40px 0; font-size:1rem; line-height:1.7; }
.cart-item { display:flex; gap:16px; align-items:center; padding:16px 0; border-bottom:1px solid var(--cream-dark); }
.ci-emoji { font-size:2rem; flex-shrink:0; }
.ci-info { flex:1; }
.ci-name { font-weight:800; color:var(--deep); font-size:0.95rem; }
.ci-price { color:var(--gold); font-size:0.9rem; font-weight:700; }
.ci-controls { display:flex; align-items:center; gap:8px; }
.ci-controls button { background:var(--cream-dark); border:none; width:28px; height:28px; border-radius:50%; cursor:pointer; font-size:1rem; font-weight:800; color:var(--deep); transition:var(--transition); display:flex; align-items:center; justify-content:center; }
.ci-controls button:hover { background:var(--teal); color:var(--deep); }
.ci-qty { font-weight:800; color:var(--deep); min-width:20px; text-align:center; }
.cart-footer { padding:24px; border-top:1px solid var(--cream-dark); }
.cart-total { font-family:var(--font-heading); font-size:1.2rem; color:var(--deep); margin-bottom:16px; }
.cart-total strong { color:var(--gold); }
.cart-footer .btn-primary { width:100%; text-align:center; }
@media(max-width:480px){ .cart-sidebar{width:100%;right:-100%;} }

/* ======== PRODUCT MODAL ======== */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.65); z-index:3000; display:none; align-items:center; justify-content:center; backdrop-filter:blur(10px); }
.modal-overlay.open { display:flex; }
.product-modal { background:var(--card-bg); border-radius:var(--radius-xl); padding:48px; max-width:480px; width:90%; text-align:center; position:relative; animation:modalIn 0.3s cubic-bezier(0.4,0,0.2,1); box-shadow:0 24px 60px rgba(0,0,0,0.28); border:1px solid rgba(255,171,145,0.12); }
@keyframes modalIn { from{opacity:0;transform:scale(0.85) translateY(20px)} to{opacity:1;transform:none} }
.modal-close { position:absolute; top:20px; right:20px; background:var(--cream-dark); border:none; width:36px; height:36px; border-radius:50%; font-size:1rem; cursor:pointer; color:var(--deep); transition:var(--transition); }
.modal-close:hover { background:var(--teal); color:var(--deep); }
.modal-emoji { font-size:5rem; margin-bottom:16px; }
.product-modal h2 { font-family:var(--font-heading); font-size:1.6rem; color:var(--deep); margin-bottom:12px; }
.product-modal p { color:var(--text-light); margin-bottom:20px; line-height:1.6; }
.modal-ingredients { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-bottom:20px; }
.ing-tag { background:var(--coral-pale); color:var(--deep); padding:4px 12px; border-radius:50px; font-size:0.8rem; font-weight:700; }
/* Modal price row — shows unit price × qty = total in one line */
.modal-price-row {
  display:flex; align-items:center; justify-content:center;
  gap:12px; flex-wrap:wrap; margin-bottom:24px;
}
.modal-unit-price { font-family:var(--font-heading); font-size:1.3rem; font-weight:700; color:var(--text-light); }
.modal-price-sep { font-size:1.2rem; color:var(--text-light); }
.modal-total-price { font-family:var(--font-heading); font-size:1.8rem; font-weight:900; color:var(--gold); }
.modal-qty { display:flex; align-items:center; gap:14px; }
.modal-qty button { background:var(--cream-dark); border:none; width:40px; height:40px; border-radius:50%; font-size:1.4rem; cursor:pointer; color:var(--deep); transition:var(--transition); font-weight:800; min-width:40px; }
.modal-qty button:hover { background:var(--teal); color:var(--deep); }
#modalQty { font-family:var(--font-heading); font-size:1.5rem; font-weight:700; color:var(--deep); min-width:32px; text-align:center; }

/* Dual action buttons in modal */
.modal-actions { display:flex; flex-direction:column; gap:10px; }
.modal-actions .btn-primary { width:100%; }
/* Direct WhatsApp order button in modal */
.btn-whatsapp-modal {
  display:block; width:100%; text-align:center;
  background:linear-gradient(135deg,#25D366,#128C7E); color:#fff;
  padding:14px 24px; border-radius:50px; border:none; cursor:pointer;
  font-weight:800; font-size:1rem; font-family:var(--font-body);
  box-shadow:0 4px 16px rgba(37,211,102,0.28); transition:var(--transition);
}
.btn-whatsapp-modal:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(37,211,102,0.40); }

/* Legacy modal-price kept for any leftover references */
.modal-price { font-family:var(--font-heading); font-size:1.8rem; font-weight:700; color:var(--gold); margin-bottom:20px; }

/* #confettiCanvas removed */

/* ======================================================
   FLOATING WHATSAPP BUTTON — prominent & pulsing
   ====================================================== */
.floating-whatsapp {
  position:fixed; bottom:90px; right:24px;
  width:60px; height:60px; border-radius:50%;
  background:linear-gradient(135deg,#25D366,#128C7E);
  color:#fff; font-size:1.7rem;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 24px rgba(37,211,102,0.45);
  z-index:800; transition:var(--transition);
  animation:waPulse 2.5s ease-in-out infinite;
  text-decoration:none;
}
.floating-whatsapp:hover { transform:scale(1.15); box-shadow:0 10px 40px rgba(37,211,102,0.65); animation:none; }
.floating-whatsapp-label {
  position:absolute; right:72px; white-space:nowrap;
  background:var(--deep); color:#fff;
  padding:7px 16px; border-radius:50px;
  font-size:0.82rem; font-weight:800; letter-spacing:0.3px;
  opacity:0; transform:translateX(8px); transition:var(--transition);
  pointer-events:none;
}
.floating-whatsapp:hover .floating-whatsapp-label { opacity:1; transform:translateX(0); }
@keyframes waPulse {
  0%,100% { box-shadow:0 6px 24px rgba(37,211,102,0.45); }
  50% { box-shadow:0 6px 24px rgba(37,211,102,0.45), 0 0 0 10px rgba(37,211,102,0.12); }
}

/* Legacy floating order button */
.floating-order { position:fixed; bottom:90px; right:100px; background:#25D366; color:white; padding:14px 22px; border-radius:50px; font-weight:800; font-size:0.9rem; box-shadow:0 8px 24px rgba(37,211,102,0.40); z-index:800; transition:var(--transition); animation:floatPulse 2s ease-in-out infinite; }
.floating-order:hover { transform:scale(1.05); box-shadow:0 12px 32px rgba(37,211,102,0.50); }
@keyframes floatPulse { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }

/* ======== MOBILE BOTTOM NAV ======== */
.mobile-bottom-nav { display:none; position:fixed; bottom:0; left:0; right:0; background:var(--card-bg); padding:8px 0 12px; z-index:900; box-shadow:0 -4px 20px rgba(0,0,0,0.10); justify-content:space-around; border-top:1px solid var(--cream-dark); }
.mobile-bottom-nav a,.mobile-bottom-nav button { display:flex; flex-direction:column; align-items:center; gap:4px; font-size:1.3rem; color:var(--text-light); font-weight:800; background:none; border:none; cursor:pointer; transition:var(--transition); }
.mobile-bottom-nav a span,.mobile-bottom-nav button span { font-size:0.65rem; }
.mobile-bottom-nav a:hover,.mobile-bottom-nav button:hover { color:var(--teal-dark); }

/* ======== RESPONSIVE ======== */
@media(max-width:1024px){
  .builder-wrap { grid-template-columns:1fr; }
  .summary-card { position:static; }
  .about-grid { grid-template-columns:1fr; gap:48px; }
  .signature-grid { grid-template-columns:1fr 1fr; }
}
@media(max-width:768px){
  .nav-links { display:none; flex-direction:column; position:fixed; top:72px; left:0; right:0; background:var(--glass); backdrop-filter:blur(20px); padding:24px; gap:20px; border-bottom:1px solid rgba(255,171,145,0.2); }
  .nav-links.open { display:flex; }
  .hamburger { display:block; }
  .mobile-bottom-nav { display:flex; }
  .floating-whatsapp { bottom:80px; }
  .floating-order { bottom:80px; right:24px; display:none; }
  .signature-grid { grid-template-columns:1fr; }
  .hero-stats { gap:20px; padding:20px 24px; }
  section.section-pad { padding:64px 0; }
  /* Reduce hover lift animations on touch devices — they fire incorrectly on tap */
  .menu-card:hover { transform:none; box-shadow:var(--shadow-card); }
  .store-peek-card:hover { transform:none; }
  .sig-card:hover { transform:none; }
  .location-card:hover { transform:none; }
  .counter:hover { transform:none; }
}
@media(max-width:480px){
  .hero-btns { flex-direction:column; align-items:center; }
  .btn-primary,.btn-secondary,.btn-whatsapp-hero { width:100%; text-align:center; }
  .about-counters { grid-template-columns:1fr 1fr; }
  .contact-btns { flex-direction:column; }
  .btn-whatsapp,.btn-call { text-align:center; }
  /* Bigger tap targets on small screens */
  .filter-btn { padding:12px 20px; font-size:0.92rem; }
  .pill { padding:11px 18px; font-size:0.9rem; }
  .card-add { padding:12px 18px; font-size:0.88rem; }
  .modal-qty button { width:48px; height:48px; }
}
/* Respect user motion preferences */
@media(prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
}