/* ============================================================
   PizzerÃ­a QuÃ© Hambre â€“ Main Stylesheet
   Mobile-first | Dark mode | Premium UX
   ============================================================ */

:root {
  --primary: #e63946;
  --primary-dark: #c1121f;
  --secondary: #1d3557;
  --accent: #f4a261;
  --bg: #ffffff;
  --bg-secondary: #f8f9fa;
  --text: #212529;
  --text-muted: #6c757d;
  --card-bg: #ffffff;
  --card-border: rgba(0,0,0,.08);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.06);
  --shadow-md: 0 4px 20px rgba(0,0,0,.10);
  --shadow-lg: 0 8px 40px rgba(0,0,0,.15);
  --radius: 1rem;
  --radius-sm: .5rem;
  --transition: .25s ease;
}

[data-bs-theme="dark"] {
  --bg: #0f1117;
  --bg-secondary: #1a1d2e;
  --text: #e2e8f0;
  --text-muted: #94a3b8;
  --card-bg: #1e2231;
  --card-border: rgba(255,255,255,.07);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.3);
  --shadow-md: 0 4px 20px rgba(0,0,0,.4);
}

/* â”€â”€ Base â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  padding-top: 65px; /* fallback: solo navbar, JS ajusta al medir el header real */
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  transition: background var(--transition), color var(--transition);
  overflow-x: hidden;
}
img { max-width: 100%; }

/* â”€â”€ Navbar â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
#mainNav {
  background: linear-gradient(135deg, var(--secondary) 0%, color-mix(in srgb, var(--secondary) 80%, var(--primary)) 100%);
  box-shadow: var(--shadow-md);
}
.navbar-brand .brand-emoji { font-size: 1.5rem; }
.navbar-brand { font-size: 1.1rem; }

/* Cart button */
.btn-cart {
  position: relative;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
  border-radius: var(--radius-sm);
  padding: .4rem .8rem;
  transition: background var(--transition);
}
.btn-cart:hover { background: rgba(255,255,255,.25); color: #fff; }
.cart-badge {
  position: absolute;
  top: -6px; right: -6px;
  background: var(--primary);
  color: #fff;
  border-radius: 50%;
  width: 20px; height: 20px;
  font-size: .65rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--secondary);
  animation: badge-pop .3s ease;
}
@keyframes badge-pop {
  0% { transform: scale(0); }
  70% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

/* â”€â”€ Fixed top header wrapper â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.top-fixed-header {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 1030;
}

/* Store status bar â€” integrada al header, tamaÃ±o prominente */
.store-status-bar {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .03em;
  padding: .55rem 1rem;
  text-align: center;
}
.store-status-bar.open  { background: #198754; color: #fff; }
.store-status-bar.closed{ background: #dc3545; color: #fff; }

/* â”€â”€ Hero Section â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.hero-section {
  position: relative;
  min-height: 40vh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  background: linear-gradient(135deg, var(--secondary) 0%, #2c3e50 50%, color-mix(in srgb, var(--primary) 60%, #000) 100%);
}
.hero-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transform: scale(1.05);
  filter: blur(1px);
  transition: transform 8s ease;
}
.hero-section:hover .hero-bg { transform: scale(1); }
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.55) 0%, rgba(0,0,0,.35) 100%);
}
.hero-content {
  position: relative; z-index: 2;
  padding: 2rem 1rem;
}
.hero-badge {
  display: inline-block;
  background: rgba(255,255,255,.15);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.3);
  color: #fff;
  padding: .35rem 1.25rem;
  border-radius: 2rem;
  font-size: .85rem;
  font-weight: 600;
  margin-bottom: 1.25rem;
  letter-spacing: .05em;
}
.hero-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(2.2rem, 6vw, 4.5rem);
  font-weight: 700;
  line-height: 1.1;
  text-shadow: 0 2px 20px rgba(0,0,0,.5);
  margin-bottom: .75rem;
}
.hero-subtitle {
  font-size: clamp(1rem, 2.5vw, 1.35rem);
  opacity: .9;
  text-shadow: 0 1px 8px rgba(0,0,0,.4);
}
.hero-scroll-indicator {
  position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,.7);
  animation: bounce 2s infinite;
  font-size: 1.5rem;
  z-index: 2;
}
@keyframes bounce { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(8px)} }

/* Animate-in */
.animate-in {
  opacity: 0; transform: translateY(20px);
  animation: fadeUp .6s ease forwards;
}
.animate-in:nth-child(2) { animation-delay: .1s; }
.animate-in:nth-child(3) { animation-delay: .2s; }
.animate-in:nth-child(4) { animation-delay: .3s; }
@keyframes fadeUp { to { opacity:1; transform:none; } }

/* â”€â”€ Categories Navigation â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.categories-scroll { -ms-overflow-style: none; scrollbar-width: none; }
.categories-scroll::-webkit-scrollbar { display: none; }
.cat-pill {
  display: inline-flex; align-items: center; gap: .4rem;
  white-space: nowrap;
  padding: .45rem 1.1rem;
  border-radius: 2rem;
  background: var(--card-bg);
  border: 1.5px solid var(--card-border);
  color: var(--text);
  text-decoration: none;
  font-size: .875rem;
  font-weight: 500;
  transition: all var(--transition);
  cursor: pointer;
}
.cat-pill:hover, .cat-pill.active-cat {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(230,57,70,.3);
}
.cat-count { font-size: .7rem; opacity: .7; }

/* â”€â”€ Features Strip â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.feature-card {
  padding: 1rem;
  border-radius: var(--radius);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  transition: transform var(--transition), box-shadow var(--transition);
}
.feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.feature-icon { font-size: 2rem; margin-bottom: .5rem; }
.feature-text { font-size: .875rem; font-weight: 600; color: var(--text-muted); }

/* â”€â”€ Section styles â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.section-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  color: var(--text);
}

/* â”€â”€ Product Card â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.product-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: transform .3s ease, box-shadow .3s ease;
  height: 100%;
}
.product-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}
.product-card.sold-out { opacity: .65; pointer-events: none; }

.product-img-wrap {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--bg-secondary);
}
.product-img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s ease, opacity .3s ease;
  position: absolute; top: 0; left: 0;
}
.primary-img { opacity: 1; z-index: 1; }
.hover-img   { opacity: 0; z-index: 2; }
.product-card:hover .primary-img { transform: scale(1.08); opacity: 0; }
.product-card:hover .hover-img   { opacity: 1; transform: scale(1.08); }
.product-img-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 3rem;
  background: var(--bg-secondary);
}

.product-overlay {
  position: absolute; inset: 0; z-index: 3;
  background: rgba(0,0,0,.4);
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 1rem;
  opacity: 0;
  transition: opacity var(--transition);
}
.product-card:hover .product-overlay { opacity: 1; }

.btn-share {
  position: absolute; top: .5rem; right: .5rem; z-index: 5;
  background: rgba(255,255,255,.9);
  border: none;
  border-radius: 50%;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--primary);
  font-size: .85rem;
  box-shadow: var(--shadow-sm);
  transition: background var(--transition), transform var(--transition), opacity var(--transition);
  opacity: 0;
}
.product-card:hover .btn-share { opacity: 1; }
.btn-share:hover { background: #fff; transform: scale(1.12); }
[data-bs-theme="dark"] .btn-share { background: rgba(30,34,49,.9); }
.btn-share-modal { display: inline-flex; align-items: center; gap: .35rem; background: none; border: 1px solid var(--primary); color: var(--primary); border-radius: 2rem; padding: .3rem .9rem; font-size: .85rem; cursor: pointer; transition: background var(--transition), color var(--transition); }
.btn-share-modal:hover { background: var(--primary); color: #fff; }

.btn-quick-add {
  position: absolute; bottom: .5rem; right: .5rem; z-index: 5;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--primary); color: #fff; border: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; line-height: 1;
  box-shadow: 0 4px 12px rgba(0,0,0,.28);
  transition: transform .15s ease, filter .2s ease;
}
.btn-quick-add:hover { transform: scale(1.12); filter: brightness(1.08); }
.btn-quick-add:active { transform: scale(.94); }
.btn-quick-add:disabled { opacity: .7; pointer-events: none; }

.free-deliv-nudge {
  background: var(--bg-secondary);
  border-radius: .6rem;
  padding: .6rem .75rem;
  margin-bottom: .75rem;
  font-size: .85rem;
  line-height: 1.3;
}
.free-deliv-nudge.ok {
  background: rgba(34,197,94,.12);
  color: #16a34a;
  font-weight: 600;
  text-align: center;
}
.free-deliv-nudge .fdn-text { margin-bottom: .45rem; }
.free-deliv-nudge .fdn-bar {
  height: 6px; border-radius: 4px;
  background: rgba(128,128,128,.22);
  overflow: hidden;
}
.free-deliv-nudge .fdn-bar span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  border-radius: 4px;
  transition: width .4s ease;
}

.cart-suggestions {
  margin-bottom: .85rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid rgba(128,128,128,.2);
}
.cart-suggestions .cs-title {
  font-size: .8rem; font-weight: 700;
  margin-bottom: .5rem; opacity: .85;
}
.cart-suggestions .cs-scroll {
  display: flex; gap: .5rem;
  overflow-x: auto; padding-bottom: .25rem;
  scrollbar-width: thin;
}
.cart-suggestions .cs-item {
  position: relative; flex: 0 0 auto;
  width: 92px;
  background: var(--bg-secondary);
  border-radius: .6rem; padding: .4rem;
  text-align: center;
}
.cart-suggestions .cs-img {
  width: 100%; height: 56px;
  object-fit: cover; border-radius: .4rem;
  margin-bottom: .25rem; display: block;
}
.cart-suggestions .cs-img-ph {
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; background: rgba(128,128,128,.12);
}
.cart-suggestions .cs-name {
  font-size: .72rem; font-weight: 600; line-height: 1.15;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 1.9em;
}
.cart-suggestions .cs-price {
  font-size: .78rem; font-weight: 700; color: var(--primary);
  margin-top: .15rem;
}
.cart-suggestions .cs-add {
  position: absolute; top: .25rem; right: .25rem;
  width: 24px; height: 24px; border-radius: 50%;
  border: none; background: var(--primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem; line-height: 1;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.cart-suggestions .cs-add:active { transform: scale(.9); }

.hero-trust {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .45rem .6rem; margin-top: 1rem;
  font-size: .8rem; font-weight: 600;
}
.hero-trust span {
  display: inline-flex; align-items: center;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 50px; padding: .35rem .8rem;
  white-space: nowrap;
}
@media (max-width: 480px) {
  .hero-trust { font-size: .72rem; }
  .hero-trust span { padding: .3rem .65rem; }
}

.product-badge {
  position: absolute; top: .5rem; left: .5rem; z-index: 4;
  font-size: .7rem; font-weight: 700;
  padding: .25rem .6rem;
  border-radius: .3rem;
  text-transform: uppercase; letter-spacing: .05em;
}
.sold-out-badge  { background: #dc3545; color: #fff; }
.promo-badge     { background: var(--accent); color: #fff; }
.featured-badge  { background: var(--secondary); color: #fff; }

.product-body { padding: .875rem; }
.product-category { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--primary); font-weight: 600; margin-bottom: .25rem; }
.product-name { font-size: .95rem; font-weight: 700; margin-bottom: .25rem; color: var(--text); line-height: 1.3; }
.product-desc { font-size: .78rem; color: var(--text-muted); margin-bottom: .5rem; line-height: 1.4; }
.product-price-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.price-final { font-size: 1.05rem; font-weight: 800; color: var(--primary); }
.price-original { font-size: .8rem; text-decoration: line-through; color: var(--text-muted); }

/* â”€â”€ Category Sidebar (menu) â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.categories-sidebar {
  padding: .5rem;
}
.cat-sidebar-link {
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem .85rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--text);
  font-size: .875rem;
  font-weight: 500;
  margin-bottom: .2rem;
  transition: all var(--transition);
}
.cat-sidebar-link:hover { background: var(--bg-secondary); color: var(--primary); }
.cat-sidebar-link.active { background: var(--primary); color: #fff; }
.cat-section-header { padding: .5rem 0; }
.cat-section-icon { font-size: 1.5rem; }
.cat-section-title { font-size: 1.35rem; font-weight: 700; }

/* â”€â”€ Cart Offcanvas â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.cart-offcanvas { width: 400px; }
@media (max-width: 576px) { .cart-offcanvas { width: 100%; } }
.cart-item {
  display: flex; gap: .75rem;
  padding: .75rem 0;
  border-bottom: 1px solid var(--card-border);
}
.cart-item-img { width: 60px; height: 60px; border-radius: .5rem; object-fit: cover; flex-shrink: 0; }
.cart-item-name { font-weight: 600; font-size: .9rem; }
.cart-item-extras { font-size: .75rem; color: var(--text-muted); }
.cart-qty-control { display: flex; align-items: center; gap: .4rem; }
.qty-btn { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--card-border); background: var(--card-bg); display:flex;align-items:center;justify-content:center; cursor:pointer; transition: all var(--transition); font-weight: 700; }
.qty-btn:hover { background: var(--primary); border-color: var(--primary); color: #fff; }
.qty-val { font-weight: 700; min-width: 24px; text-align: center; }
.cart-footer { background: var(--bg-secondary); border-radius: 0 0 var(--radius) var(--radius); }

/* â”€â”€ Product Modal â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
#productModalContent {
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card-bg);
}
.modal-product-img { width: 100%; aspect-ratio: 16/9; object-fit: cover; max-height: 200px; }
@media (min-width: 576px) { .modal-product-img { max-height: 300px; } }
.topping-check { cursor: pointer; }
.topping-check input:checked + .topping-label { border-color: var(--primary); background: rgba(230,57,70,.08); }
.topping-label {
  display: flex; justify-content: space-between; align-items: center;
  padding: .6rem .85rem;
  border: 1.5px solid var(--card-border);
  border-radius: var(--radius-sm);
  transition: all var(--transition);
  cursor: pointer;
}
.topping-price { font-weight: 700; color: var(--primary); font-size: .85rem; }

/* â”€â”€ Checkout / Order â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.checkout-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
}
.delivery-option { display: block; cursor: pointer; }
.delivery-option-inner {
  border: 2px solid var(--card-border);
  border-radius: var(--radius);
  padding: 1rem;
  text-align: center;
  transition: all var(--transition);
}
.delivery-option input:checked + .delivery-option-inner {
  border-color: var(--primary);
  background: rgba(230,57,70,.06);
}
.delivery-icon { display: block; font-size: 2rem; margin-bottom: .4rem; }
.payment-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .6rem; }
.payment-option { display: block; cursor: pointer; }
.payment-option-inner {
  border: 2px solid var(--card-border);
  border-radius: var(--radius-sm);
  padding: .75rem;
  text-align: center;
  transition: all var(--transition);
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  font-size: .875rem; font-weight: 600;
}
.payment-option input:checked + .payment-option-inner {
  border-color: var(--primary);
  background: rgba(230,57,70,.06);
}
.payment-icon { font-size: 1.5rem; }
.summary-row { display: flex; justify-content: space-between; padding: .35rem 0; }
.total-row { padding: .5rem 0; }

/* â”€â”€ CTA Section â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.cta-section {
  background: linear-gradient(135deg, var(--primary) 0%, color-mix(in srgb, var(--primary) 70%, var(--secondary)) 100%);
}

/* â”€â”€ Footer â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.footer {
  background: var(--secondary);
  color: #fff;
  padding: 3rem 0 1.5rem;
}
.footer .text-muted { color: rgba(255,255,255,.6) !important; }
.footer hr { border-color: rgba(255,255,255,.15); }
.social-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  color: #fff;
  text-decoration: none;
  font-size: 1.1rem;
  transition: all var(--transition);
}
.social-link:hover { background: var(--primary); color: #fff; transform: translateY(-3px); }

/* â”€â”€ WhatsApp FAB â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.whatsapp-fab {
  position: fixed;
  bottom: 1.5rem; right: 1.5rem;
  width: 58px; height: 58px;
  background: #25d366;
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.75rem;
  text-decoration: none;
  box-shadow: 0 4px 20px rgba(37,211,102,.5);
  z-index: 1040;
  transition: transform var(--transition), box-shadow var(--transition);
  animation: pulse-wa 3s infinite;
}
.whatsapp-fab:hover { transform: scale(1.12); color: #fff; box-shadow: 0 6px 28px rgba(37,211,102,.6); }
@keyframes pulse-wa {
  0%,100% { box-shadow: 0 4px 20px rgba(37,211,102,.5); }
  50% { box-shadow: 0 4px 35px rgba(37,211,102,.75); }
}

/* â”€â”€ WhatsApp button â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.btn-whatsapp {
  background: #25d366; color: #fff; border: none;
}
.btn-whatsapp:hover { background: #1ebe5d; color: #fff; }
/* -- PWA Install hero button */
.btn-pwa-hero{background:linear-gradient(135deg,#3b82f6,#6366f1);border:none;color:#fff;box-shadow:0 4px 15px rgba(99,102,241,.45);transition:all .25s ease;}
.btn-pwa-hero:hover{background:linear-gradient(135deg,#2563eb,#4f46e5);color:#fff;transform:translateY(-2px);box-shadow:0 6px 20px rgba(99,102,241,.6);}


/* â”€â”€ Map container â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.map-container { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-md); }

/* â”€â”€ Bootstrap overrides â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.btn-primary {
  background: var(--primary);
  border-color: var(--primary);
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
}
.btn-outline-primary { border-color: var(--primary); color: var(--primary); }
.btn-outline-primary:hover { background: var(--primary); border-color: var(--primary); }
.text-primary { color: var(--primary) !important; }

/* â”€â”€ Utility â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.object-fit-cover { object-fit: cover; }
.sticky-top { top: 70px; }

/* â”€â”€ Mobile Responsive â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
@media (max-width: 768px) {
  .hero-section { min-height: 0; }
  .checkout-card { padding: 1rem; }
  .cart-offcanvas { width: 100%; }
}

/* â”€â”€ Scrollbar custom â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 3px; }

/* â”€â”€ Loading spinner overlay â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.page-loader {
  position: fixed; inset: 0;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
  transition: opacity .5s ease;
}
.page-loader.hide { opacity: 0; pointer-events: none; }
.loader-pizza { font-size: 3rem; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* â”€â”€ Search â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.menu-search-wrap { max-width: 280px; width: 100%; }


/* â”€â”€ PWA Install Banner â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
#pwa-banner{position:fixed;bottom:-120px;left:0;right:0;z-index:9999;padding:.75rem 1rem;background:var(--bs-body-bg);border-top:2px solid var(--primary);box-shadow:0 -4px 20px rgba(0,0,0,.18);transition:bottom .4s cubic-bezier(.25,.8,.25,1);}#pwa-banner.pwa-banner--visible{bottom:0;}#pwa-banner .pwa-banner-inner{display:flex;align-items:center;gap:.75rem;max-width:600px;margin:0 auto;}.pwa-icon{font-size:2rem;flex-shrink:0;}.pwa-text{flex:1;min-width:0;}.pwa-text strong{display:block;font-size:.95rem;}.pwa-text small{color:var(--bs-secondary-color);font-size:.8rem;}.pwa-text .bi{font-size:.9rem;}.pwa-install{flex-shrink:0;white-space:nowrap;}.pwa-close{background:none;border:none;font-size:1.1rem;color:var(--bs-secondary-color);padding:.25rem .5rem;cursor:pointer;flex-shrink:0;line-height:1;}
/* -- Hero schedule link */
.hero-schedule-link{color:rgba(255,255,255,.72);font-size:.85rem;font-weight:500;text-decoration:none;border-bottom:1px dashed rgba(255,255,255,.4);padding-bottom:1px;transition:color .2s,border-color .2s;letter-spacing:.01em;}
.hero-schedule-link:hover{color:#fff;border-color:rgba(255,255,255,.85);}

/* -- Feature card as link */
.feature-card-link{display:block;text-decoration:none;color:inherit;height:100%;}
.feature-card-link:hover .feature-card{transform:translateY(-4px);box-shadow:var(--shadow-md);}

.feature-card-link:hover .feature-icon{transform:scale(1.15);}

/* -- Schedule banner */
.schedule-banner{background:linear-gradient(135deg,#1e3a5f 0%,#2d1b69 100%);border-radius:var(--radius);padding:2rem 2.5rem;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;box-shadow:var(--shadow-md);}
.schedule-banner-text h4{color:#fff;margin-bottom:.5rem;}
.schedule-banner-text p{color:rgba(255,255,255,.72);font-size:.95rem;margin:0;}
.btn-schedule-cta{background:#fff;color:#2d1b69;border:none;padding:.65rem 1.75rem;border-radius:var(--radius-sm);font-weight:700;transition:all .2s;white-space:nowrap;}
.btn-schedule-cta:hover{background:#f0edff;color:#1e1057;transform:translateY(-2px);box-shadow:0 4px 16px rgba(45,27,105,.3);}
@media(max-width:576px){.schedule-banner{padding:1.5rem;text-align:center;}.schedule-banner-text{width:100%;}.btn-schedule-cta{width:100%;}}
/* -- Condiments box in product modal */
.condiments-box { border: 1px solid var(--card-border); }
.cond-label { min-width: 75px; font-size: .85rem; }
.cond-opt { cursor: pointer; }