:root {
  --bg-primary: #0f0f0f;
  --bg-secondary: #1a1a1a;
  --bg-tertiary: #222;
  --gold: #c9a84c;
  --gold-light: #e8c97a;
  --gold-dark: #8a7230;
  --ivory: #f5f0e8;
  --text-primary: #e8e8e8;
  --text-muted: #aaaaaa;
  --border: #2a2a2a;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  font-family: var(--sans);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* iOS overscroll bounce can cause perceived horizontal jitter on fixed-position elements */
  overscroll-behavior-x: none;
  /* Kill the default gray flash on tap so buttons don't appear to "flicker" when pressed. */
  -webkit-tap-highlight-color: transparent;
}

img {
  max-width: 100%;
  display: block;
  /* Image protection (casual-copy friction; not a real DRM) — see also app.js
     contextmenu/dragstart handlers. Blocks: drag-to-desktop, text-select on the
     image, and iOS long-press → Save Image / Copy menu.
     Does NOT block: screenshots, DevTools, view-source. Determined download is
     impossible to prevent in a browser. */
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}
a { color: inherit; text-decoration: none; }

/* Force HTML hidden attribute to win over class-defined display rules.
   Without !important, `display: flex` etc on a class beats the UA-default `[hidden]{display:none}`. */
[hidden] { display: none !important; }

/* ========== NAV ========== */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background: rgba(15, 15, 15, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  transition: padding 0.3s;
  /* Promote to its own GPU compositor layer so backdrop-filter doesn't repaint
     on every scroll frame (was causing visible flicker on mid-range mobile). */
  transform: translateZ(0);
  will-change: transform;
}
.nav-logo img {
  height: 44px;
  width: 44px;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid var(--gold);
}
.nav-links {
  display: flex;
  gap: 2rem;
  font-family: var(--serif);
  font-size: 1.1rem;
  letter-spacing: 1px;
}
.nav-links a {
  color: var(--text-primary);
  transition: color 0.3s;
  position: relative;
}
.nav-links a:hover { color: var(--gold); }
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -4px;
  width: 0;
  height: 1px;
  background: var(--gold);
  transition: width 0.3s;
}
.nav-links a:hover::after { width: 100%; }

/* ========== HERO ========== */
.hero {
  min-height: 100vh;
  min-height: 100svh;  /* small viewport height — fixed value, no resize when iOS URL bar collapses */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6rem 2rem 4rem;
  background:
    radial-gradient(ellipse at top, rgba(201, 168, 76, 0.08), transparent 60%),
    linear-gradient(180deg, #0f0f0f 0%, #181818 100%);
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(201, 168, 76, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(201, 168, 76, 0.05) 0%, transparent 50%);
  pointer-events: none;
}
.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 800px;
  animation: fadeUp 1s ease-out;
}
.hero-logo-wrap {
  display: inline-block;
  padding: 0;
  border-radius: 50%;
  /* No extra border — the brand logo already has its own gold ring built in.
     A second wrap-level gold border created an awkward "double border" look. */
  margin-bottom: 2rem;
  box-shadow: 0 0 40px rgba(201, 168, 76, 0.2);
}
.hero-logo {
  width: 220px;
  height: 220px;
  object-fit: cover;
  border-radius: 50%;
}
.hero-title {
  font-family: var(--serif);
  font-size: clamp(3rem, 8vw, 5.5rem);
  font-weight: 300;
  color: var(--gold);
  letter-spacing: 4px;
  margin-bottom: 0.5rem;
  line-height: 1;
}
.hero-tagline {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  color: var(--gold-light);
  letter-spacing: 2px;
  margin-bottom: 1rem;
}
.hero-sub {
  color: var(--text-muted);
  font-size: 1rem;
  letter-spacing: 0.5px;
  margin-bottom: 2.5rem;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}
.scroll-indicator {
  display: block;
  margin-top: 4rem;
  color: var(--gold);
  font-size: 1.5rem;
  animation: bounce 2s infinite;
  text-decoration: none;
}
@keyframes bounce {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50% { transform: translateY(8px); opacity: 1; }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ========== BUTTON ========== */
.btn {
  display: inline-block;
  padding: 1rem 2.5rem;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-radius: 2px;
  transition: all 0.3s;
  cursor: pointer;
  border: none;
}
.btn-gold {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
  color: #000;
  box-shadow: 0 4px 20px rgba(201, 168, 76, 0.3);
}
.btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 30px rgba(201, 168, 76, 0.5);
}
.btn-outline {
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--gold);
}
.btn-outline:hover {
  background: var(--gold);
  color: #000;
}

/* ========== SECTION ========== */
.section {
  padding: 6rem 2rem;
  position: relative;
}
.section-dark { background: var(--bg-secondary); }
.container {
  max-width: 1200px;
  margin: 0 auto;
}
.section-title {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  font-weight: 300;
  color: var(--gold);
  text-align: center;
  letter-spacing: 3px;
  margin-bottom: 0.5rem;
}
.section-title::after {
  content: '';
  display: block;
  width: 60px;
  height: 1px;
  background: var(--gold);
  margin: 1rem auto;
}
.section-sub {
  text-align: center;
  color: var(--text-muted);
  font-style: italic;
  margin-bottom: 4rem;
  font-family: var(--serif);
  font-size: 1.1rem;
}

/* ========== PRODUCT GRID ========== */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}
.product-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  transition: all 0.4s;
  display: flex;
  flex-direction: column;
  position: relative;
  scroll-margin-top: 90px;
  cursor: pointer;
}
.product-card:hover {
  border-color: var(--gold);
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
}
.product-image {
  /* element is a <button> now — strip native styles */
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  /* Pure black backstop so any near-black image edges blend invisibly. */
  background: #000;
  position: relative;
  overflow: hidden;
  cursor: zoom-in;
  font: inherit;
  color: inherit;
}
.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover) {
  .product-card:hover .product-image img { transform: scale(1.05); }
}
.product-image:focus-visible img { transform: scale(1.05); }
.product-image:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

/* The Trio's source photo (treo_hero.jpg) has more black margin around the
   platter than the rest of the heroes — visually scale the image up inside
   its card frame so the platter reads at a comparable size to The Classic
   Plus next to it on the menu. The .product-image container has
   overflow:hidden + background:#000, so the scaled overflow clips invisibly
   against the black bleed. Lightbox view still shows the full original
   image (same source file). */
.product-card#product-trio .product-image img {
  transform: scale(1.20);
}
@media (hover: hover) {
  .product-card#product-trio:hover .product-image img {
    transform: scale(1.26);
  }
}
.product-card#product-trio .product-image:focus-visible img {
  transform: scale(1.26);
}

.product-body { padding: 1.5rem 1.5rem 1.8rem; flex: 1; display: flex; flex-direction: column; }
.product-name {
  font-family: var(--serif);
  font-size: 1.6rem;
  color: var(--gold);
  letter-spacing: 2px;
  margin-bottom: 0.5rem;
}
.product-desc {
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.6;
  margin-bottom: 1rem;
  flex: 1;
}
.product-container {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 0.5rem;
  opacity: 0.7;
}
.product-serves {
  font-family: var(--serif);
  font-size: 0.95rem;
  color: var(--gold);
  letter-spacing: 0.5px;
  margin-bottom: 1.2rem;
}
.product-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--border);
  padding-top: 1.2rem;
}
.product-price {
  font-family: var(--serif);
  color: var(--gold-light);
  font-size: 1.8rem;
  font-weight: 500;
}

/* ---------- Promo styling on homepage product cards ---------- */
.product-price-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  line-height: 1.1;
}
.product-promo-badge {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: 1.5px;
  font-size: 0.62rem;
  color: #0a0a0a;
  background: var(--gold-light);
  padding: 3px 8px;
  border-radius: 2px;
  text-transform: uppercase;
}
.product-price-row {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
}
.product-price-original {
  font-family: var(--serif);
  font-weight: 400;
  color: rgba(245, 240, 232, 0.45);
  font-size: 1.1rem;
  text-decoration: line-through;
}
.product-price-promo {
  font-family: var(--serif);
  color: var(--gold-light);
  font-size: 1.8rem;
  font-weight: 500;
}
.product-card-promo {
  position: relative;
}
.product-card-promo::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid var(--gold);
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.55;
}
.product-add {
  font-family: var(--sans);
  background: transparent;
  color: var(--gold);
  font-size: 0.85rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border: 1px solid var(--gold);
  padding: 0.5rem 1rem;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.3s;
}
.product-add:hover {
  background: var(--gold);
  color: #000;
}
.product-add.product-add-flash {
  background: var(--gold);
  color: #000;
  border-color: var(--gold);
}

/* ========== GALLERY ========== */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}
.gallery-item {
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 4px;
  border: 1px solid var(--border);
  cursor: zoom-in;
  transition: all 0.3s;
  background: var(--bg-primary);
}
.gallery-item:hover {
  border-color: var(--gold);
  transform: scale(1.02);
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s;
}
.gallery-item:hover img { transform: scale(1.08); }

/* Items beyond the initial cap stay hidden until "View More Photos" is clicked. */
.gallery-item-hidden { display: none; }

/* Tighten the gap between Gallery and Reviews — both are dark sections so 6rem
   top + 6rem bottom (= ~12rem of empty space) reads as too much breathing room.
   Using IDs since these are one-off section overrides. */
#gallery { padding-bottom: 2.5rem; }
#reviews { padding-top: 3rem; }

.gallery-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: 1.6rem;
}
.gallery-show-more {
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--gold);
  border-radius: 2px;
  padding: 0.7rem 1.6rem;
  font-size: 0.82rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.2s, color 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.gallery-show-more:hover {
  background: var(--gold);
  color: #000;
}
.gallery-show-more-count {
  color: inherit;
  opacity: 0.75;
}
.gallery-show-more-chevron {
  font-size: 1.1rem;
  line-height: 1;
  transform: translateY(-1px);
}

/* ========== LIGHTBOX ========== */
/* ========== LIGHTBOX — full-screen vertical scroll with snap ========== */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.97);
  z-index: 1000;
  display: none;
}
.lightbox.open {
  display: block;
  animation: lightboxIn 0.22s ease-out;
}
@keyframes lightboxIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Scroll container holds the stack of full-screen slides. iOS-style snap so each image
   locks into place as the user scrolls. */
.lightbox-scroll {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain; /* don't chain-scroll the page behind */
  /* Hide the visible scrollbar — on Windows the default scrollbar appeared
     as a light vertical strip on the right edge inside the dark lightbox.
     Wheel/touch scrolling still works. */
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* legacy Edge / IE */
}
.lightbox-scroll::-webkit-scrollbar { display: none; } /* Chrome, Safari */
.lightbox-slide {
  scroll-snap-align: center;
  scroll-snap-stop: always;
  height: 100vh;       /* fallback for older browsers */
  height: 100svh;      /* mobile-safe: sizes to the visible viewport (excludes URL bar) */
  width: 100%;         /* match the actual lightbox width — `100vw` includes the
                          hidden scrollbar gutter on Windows and pushes content
                          ~17px past the right edge of the dark backdrop */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  box-sizing: border-box;
  position: relative; /* anchor for the "Scroll for more" hint */
}
.lightbox-slide img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

/* Close button — glass chip, top right */
.lightbox-close {
  position: fixed;
  top: 1rem;
  right: 1rem;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.2s;
  z-index: 3;
}
.lightbox-close:hover { background: rgba(255, 255, 255, 0.24); transform: scale(1.05); }

/* "1 / N" counter — small glass pill, top left; only shown when multi-image */
.lightbox-counter {
  position: fixed;
  top: 1rem;
  left: 1rem;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.78rem;
  letter-spacing: 1px;
  font-weight: 500;
  pointer-events: none;
  display: none;
  z-index: 3;
}
.lightbox.lightbox-multi .lightbox-counter { display: block; }

/* In-lightbox Add-to-Cart bar — pinned to bottom, only shown when lightbox opens
   for a specific product (not for plain gallery images). */
.lightbox-cta {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.7rem 1.2rem calc(1rem + env(safe-area-inset-bottom, 0));
  padding-left: calc(1.2rem + env(safe-area-inset-left, 0));
  padding-right: calc(1.2rem + env(safe-area-inset-right, 0));
  box-sizing: border-box;
  max-width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: linear-gradient(to top, rgba(0,0,0,0.92), rgba(0,0,0,0.55));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 4;
  animation: lightbox-cta-in 0.35s ease-out;
}
/* Tap-the-image toggles .lightbox-controls-hidden on the .lightbox. The
   Add-to-Cart row ALWAYS stays put — only the kashrus strip + disclaimer
   collapse (the "passive info") so the photo gets more room without
   blocking the primary action. */
.lightbox-kashrus,
.lightbox-disclaimer {
  transition: opacity 0.22s ease, max-height 0.28s ease, padding 0.22s ease,
              margin 0.22s ease, border-color 0.22s ease;
  max-height: 200px;  /* generous ceiling; real height set by content */
  overflow: hidden;
}
.lightbox.lightbox-controls-hidden .lightbox-kashrus,
.lightbox.lightbox-controls-hidden .lightbox-disclaimer {
  opacity: 0;
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
  border-color: transparent;
  pointer-events: none;
}
/* Counter ("1 / 3") tucks away too — minor positional info, fine to hide
   for the edge-to-edge view. Close button stays visible. */
.lightbox-counter {
  transition: opacity 0.2s ease;
}
.lightbox.lightbox-controls-hidden .lightbox-counter {
  opacity: 0;
  pointer-events: none;
}
.lightbox-cta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.lightbox-disclaimer {
  margin: 0;
  text-align: center;
  font-size: 0.72rem;
  font-style: italic;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.2px;
  line-height: 1.4;
}
/* Kashrus confirmation strip in the product lightbox — small inline row
   with the CRC mark + "Certified Kosher Parve under the hashgacha of the
   CRC". Sits above the disclaimer so it reads as the FIRST piece of info
   after the customer drills into a product, before the slice-count
   disclaimer + Add-to-Cart CTA. */
.lightbox-kashrus {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  margin: 0 auto;
  padding: 0.55rem 0.9rem;
  border-top: 1px solid rgba(201, 168, 76, 0.22);
  border-bottom: 1px solid rgba(201, 168, 76, 0.22);
  max-width: 540px;
}
.lightbox-kashrus-img {
  width: 72px;
  height: auto;
  flex-shrink: 0;
}
.lightbox-kashrus-text {
  font-size: 0.82rem;
  color: rgba(245, 240, 232, 0.85);
  letter-spacing: 0.2px;
  line-height: 1.4;
  text-align: left;
}
.lightbox-kashrus-text strong {
  color: var(--gold, #c9a84c);
  font-weight: 500;
}
@media (max-width: 600px) {
  .lightbox-disclaimer { font-size: 0.66rem; }
  .lightbox-kashrus { padding: 0.45rem 0.6rem; gap: 0.6rem; }
  .lightbox-kashrus-img { width: 58px; }
  .lightbox-kashrus-text { font-size: 0.76rem; }
}
@keyframes lightbox-cta-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.lightbox-cta-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
}
.lightbox-cta-name {
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--ivory);
  letter-spacing: 0.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lightbox-cta-price {
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--gold-light);
  margin-top: 2px;
}
.lightbox-cta-btn {
  flex-shrink: 0;
  padding: 0.7rem 1.3rem;
  font-size: 0.92rem;
  letter-spacing: 1px;
}
.lightbox-cta-btn.product-add-flash {
  background: var(--gold-light);
  color: #000;
}

.lightbox-cta-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-shrink: 0;
}
.lightbox-view-cart-btn {
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--gold);
  border-radius: 2px;
  padding: 0.65rem 1rem;
  font-size: 0.78rem;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}
.lightbox-view-cart-btn:hover {
  background: var(--gold);
  color: #000;
}
@media (max-width: 600px) {
  .lightbox-cta { gap: 0.6rem; padding-left: calc(0.9rem + env(safe-area-inset-left, 0)); padding-right: calc(0.9rem + env(safe-area-inset-right, 0)); }
  .lightbox-cta-btn { padding: 0.6rem 0.9rem; font-size: 0.82rem; }
  .lightbox-view-cart-btn { padding: 0.55rem 0.75rem; font-size: 0.7rem; letter-spacing: 1px; }
}

/* "Scroll for more" hint — only on the first slide of multi-image galleries.
   Lives INSIDE slide 0, so it scrolls away naturally once the user interacts.
   Bottom value floats it ABOVE the .lightbox-cta bar (~5-6rem tall, pinned
   to the same slide bottom) so it's visible — at the prior 2.2rem it was
   hidden behind the CTA bar and customers never saw it. */
.lightbox-scroll-hint {
  position: absolute;
  bottom: 8.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.72rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 500;
  pointer-events: none;
  animation: scrollHintFade 0.4s ease-out 0.3s both;
}
.lightbox-scroll-hint-chevron {
  display: inline-block;
  font-size: 1rem;
  line-height: 1;
  animation: scrollHintBounce 1.6s ease-in-out infinite;
}
@keyframes scrollHintBounce {
  0%, 100% { transform: translateY(0); opacity: 0.7; }
  50%      { transform: translateY(5px); opacity: 1; }
}
@keyframes scrollHintFade {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .lightbox-scroll-hint-chevron { animation: none; }
  .lightbox-scroll-hint { animation: none; }
}

@media (max-width: 480px) {
  .lightbox-close { top: 0.7rem; right: 0.7rem; width: 38px; height: 38px; }
  .lightbox-counter { top: 0.85rem; left: 0.85rem; font-size: 0.7rem; }
  .lightbox-scroll-hint { bottom: 7.5rem; font-size: 0.68rem; padding: 0.4rem 0.85rem; }
}

/* ========== ORDER ========== */
.order-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}
.order-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2.5rem 1.5rem;
  text-align: center;
  transition: all 0.3s;
  color: var(--text-primary);
  /* Center the icon + label + detail vertically inside the card so the
     left card aligns with the QR card next to it (which is naturally
     taller because of the 200px QR image). */
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.order-card:hover {
  border-color: var(--gold);
  transform: translateY(-4px);
}
.order-icon { font-size: 2.5rem; margin-bottom: 1rem; }
/* SVG variant for the WhatsApp order card — overrides emoji-based sizing */
.order-icon-wa {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1rem;
}
.order-icon-wa svg {
  width: 64px;
  height: 64px;
  display: block;
}
.order-label {
  font-family: var(--serif);
  color: var(--gold);
  font-size: 1.4rem;
  letter-spacing: 2px;
  margin-bottom: 0.3rem;
}
.order-detail { color: var(--text-muted); font-size: 0.9rem; }
.qr-image {
  display: block;
  width: 200px;
  max-width: 100%;
  height: auto;
  margin: 0 auto 1rem;
  background: #fff;
  padding: 8px;
  border-radius: 4px;
  box-sizing: border-box;
}

.order-payment-note {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.88rem;
  margin: 1.6rem 0 0;
  letter-spacing: 0.3px;
}
.order-payment-note strong { color: var(--gold); font-weight: 500; }

/* Bottom-of-page Order section — single prominent CTA + a quieter
   "Questions? WhatsApp us" inline link below. Replaces the older two
   side-by-side cards that duplicated paths (the menu link was already
   accessible from the hero CTA, the nav anchor, and the menu section
   directly above this one). 2026-05-13 site-review cleanup. */
.order-cta-row {
  display: flex;
  justify-content: center;
  margin: 0 0 1.2rem;
}
.btn.btn-large {
  padding: 1rem 2.4rem;
  font-size: 1.05rem;
  letter-spacing: 1.2px;
}
.order-questions-note {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.92rem;
  margin: 0;
  letter-spacing: 0.3px;
}
.order-questions-note a {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(201, 168, 76, 0.4);
  transition: border-color 0.18s ease;
}
.order-questions-note a:hover { border-bottom-color: var(--gold); }


/* ========== FOOTER ========== */
.footer {
  background: #080808;
  padding: 3rem 2rem 2rem;
  border-top: 1px solid var(--border);
  text-align: center;
}
.footer-brand {
  font-family: var(--serif);
  color: var(--gold);
  font-size: 1.8rem;
  letter-spacing: 3px;
  margin-bottom: 0.3rem;
  /* Now a link to #hero — strip default link styles, add subtle hover. */
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.2s;
}
.footer-brand:hover { opacity: 0.75; }
.footer-tagline {
  color: var(--gold-light);
  font-family: var(--serif);
  font-style: italic;
  margin-bottom: 1.5rem;
  letter-spacing: 1px;
}
.footer-contact { margin-bottom: 1.5rem; color: var(--text-muted); }
.footer-contact a { color: var(--text-primary); transition: color 0.3s; }
.footer-contact a:hover { color: var(--gold); }
.footer-divider { margin: 0 1rem; color: var(--gold-dark); }
.footer-copy {
  color: var(--text-muted);
  font-size: 0.8rem;
  letter-spacing: 1px;
  margin-bottom: 0.8rem;
}
.footer-admin { margin-top: 1rem; }
.footer-admin a {
  display: inline-block;
  color: var(--text-muted);
  font-size: 0.7rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 0.4rem 1rem;
  border: 1px solid var(--border);
  border-radius: 2px;
  transition: all 0.3s;
}
.footer-admin a:hover {
  color: var(--gold);
  border-color: var(--gold);
}

/* ========== TRUST BANNER ==========
   Sits between hero and menu. 5 glass tiles in a row, each holding a
   randomly-selected approved review. Hidden until reviews load (graceful
   degradation when admin first launches with zero reviews). Tiles are
   reshuffled per page load so the section feels fresh on repeat visits.
   Goal: every visitor sees rich social proof up-front instead of
   scrolling past gallery + events to find the full reviews section. */

/* ===== Hechsher strip — CRC kashrus certification announcement ===== */
/* Sits between the hero and the trust banner. Variant 1 (stacked, balanced)
   from Site/_internal/kashrus-crc/strip-preview.html, approved by admin
   with the logo at 220px. Mobile drops the logo size + tightens padding
   so it doesn't dominate on small screens. */
.hechsher-strip {
  background: #0a0a0a;
  border-top: 1px solid rgba(201, 168, 76, 0.35);
  border-bottom: 1px solid rgba(201, 168, 76, 0.35);
  padding: 3.5rem 1.5rem;
  text-align: center;
}
.hechsher-strip-eyebrow {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.35em;
  color: var(--gold, #c9a84c);
  margin: 0 0 1.4rem;
}
.hechsher-strip-logo {
  width: 220px;
  height: auto;
  display: block;
  margin: 0 auto 1.6rem;
}
.hechsher-strip-tagline {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.25rem;
  font-style: italic;
  color: rgba(245, 240, 232, 0.85);
  letter-spacing: 0.5px;
  margin: 0;
}
.hechsher-strip-tagline strong {
  color: var(--gold, #c9a84c);
  font-weight: 500;
  font-style: normal;
}
@media (max-width: 600px) {
  .hechsher-strip {
    padding: 2.4rem 1.2rem;
  }
  .hechsher-strip-logo {
    width: 160px;
    margin-bottom: 1.2rem;
  }
  .hechsher-strip-eyebrow {
    font-size: 0.7rem;
    letter-spacing: 0.3em;
    margin-bottom: 1rem;
  }
  .hechsher-strip-tagline {
    font-size: 1.1rem;
  }
}

/* ===== Kashrus section — added 2026-06-03 with the CRC certification ===== */
/* Sits between Menu and Events on the homepage. Two-column on desktop
   (mark on the left + copy on the right); stacks vertically on mobile. */
.section-kashrus {
  background: linear-gradient(180deg, #0f0f0f 0%, #0a0a0a 100%);
}
.kashrus-content {
  display: flex;
  align-items: center;
  gap: 3rem;
  max-width: 900px;
  margin: 2.2rem auto 0;
}
.kashrus-mark {
  flex-shrink: 0;
  width: 230px;
}
.kashrus-mark-img {
  width: 100%;
  height: auto;
  display: block;
}
.kashrus-text {
  flex: 1;
}
.kashrus-text p {
  margin: 0 0 1.1rem;
  color: rgba(245, 240, 232, 0.85);
  font-size: 1.05rem;
  line-height: 1.65;
}
.kashrus-text p:last-child {
  margin-bottom: 0;
}
.kashrus-text strong {
  color: var(--gold);
  font-weight: 500;
}
.kashrus-text a {
  color: var(--gold);
  border-bottom: 1px solid rgba(201, 168, 76, 0.4);
  transition: border-bottom-color 0.15s;
}
.kashrus-text a:hover {
  border-bottom-color: var(--gold);
}
@media (max-width: 720px) {
  .kashrus-content {
    flex-direction: column;
    text-align: center;
    gap: 1.8rem;
  }
  .kashrus-mark {
    width: 200px;
  }
}

/* Delivery Zones — sits between Kashrus and Events on the homepage.
   Two cards side-by-side on desktop, stacked on mobile. Mirrors the
   .events-tile look (thin gold mark + serif title) so the section feels
   cohesive with the rest of the page. */
.section-delivery-zones {
  background: linear-gradient(180deg, #0a0a0a 0%, #0f0f0f 100%);
}
.zones-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.8rem;
  max-width: 960px;
  margin: 2.2rem auto 0;
}
.zones-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(201, 168, 76, 0.18);
  border-radius: 6px;
  padding: 1.8rem 1.6rem;
}
.zones-card-mark {
  width: 32px;
  height: 1px;
  background: var(--gold);
  margin-bottom: 1.4rem;
}
.zones-card-title {
  font-family: var(--serif);
  font-size: 1.55rem;
  font-weight: 500;
  color: var(--cream);
  margin: 0 0 1.1rem;
}
.zones-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.1rem;
}
.zones-list li {
  color: rgba(245, 240, 232, 0.88);
  font-size: 1.05rem;
  line-height: 1.6;
  padding: 0.35rem 0;
  border-bottom: 1px dashed rgba(201, 168, 76, 0.12);
}
.zones-list li:last-child { border-bottom: none; }
.zones-list strong {
  color: var(--gold);
  font-weight: 500;
}
.zones-card-note {
  margin: 0;
  font-size: 0.95rem;
  font-style: italic;
  color: rgba(245, 240, 232, 0.65);
  line-height: 1.55;
}
.zones-card-note a {
  color: var(--gold);
  border-bottom: 1px solid rgba(201, 168, 76, 0.4);
  transition: border-bottom-color 0.15s;
}
.zones-card-note a:hover {
  border-bottom-color: var(--gold);
}
.zones-card-note-flag {
  font-style: normal;
  color: rgba(245, 240, 232, 0.85);
  background: rgba(201, 168, 76, 0.08);
  border-left: 3px solid var(--gold);
  padding: 0.7rem 0.9rem;
  border-radius: 0 4px 4px 0;
  margin-top: 0.4rem;
}
.zones-card-note-flag strong { color: var(--gold); }
@media (max-width: 720px) {
  .zones-grid {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }
}

.trust-banner {
  position: relative;
  background: linear-gradient(180deg, #0a0a0a 0%, #0f0f0f 100%);
  border-top: 1px solid rgba(201, 168, 76, 0.18);
  border-bottom: 1px solid rgba(201, 168, 76, 0.18);
  padding: 2.6rem 0 2.4rem;
  text-align: center;
  overflow: hidden;
}
/* Soft gold radial glow behind the cards — gives the glassmorphism
   effect something to blur against and adds visual warmth without
   overpowering the cards themselves. */
.trust-banner-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 800px 280px at 30% 60%, rgba(201, 168, 76, 0.12), transparent 60%),
    radial-gradient(ellipse 700px 220px at 75% 50%, rgba(201, 168, 76, 0.07), transparent 60%);
  pointer-events: none;
}
.trust-banner-inner {
  max-width: 980px;
  margin: 0 auto 1.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  position: relative;
  z-index: 1;
}
.trust-banner-heading {
  margin: 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.3rem;
  color: var(--gold-light);
  letter-spacing: 0.6px;
}

/* Glass tile row — 5-up grid on desktop, all cards visible, no scroll
   needed. Falls back to horizontal-scroll carousel on narrower screens
   where 5 tiles don't fit cleanly. */
.trust-banner-cards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  max-width: 1280px;
  margin: 0 auto 1.6rem;
  padding: 0.4rem 1.5rem 1.2rem;
  position: relative;
  z-index: 1;
}
.trust-banner-card {
  /* Lighter "floating glass" — slightly more opaque white tint so the
     cards read as being LIFTED off the page surface, not flush with it.
     Bright top-edge highlight + deep layered shadow underneath sells
     the "raised, see-through" feel the user asked for. */
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.11) 0%, rgba(255, 255, 255, 0.05) 100%);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  padding: 1.4rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  text-align: left;
  box-shadow:
    /* Top edge — bright catching-light highlight */
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    /* Subtle inner glow on the side facing the gold backdrop */
    inset 1px 0 0 rgba(201, 168, 76, 0.06),
    /* Close shadow for depth */
    0 2px 6px rgba(0, 0, 0, 0.25),
    /* Big soft drop shadow — the "holding it away from the page" feel */
    0 18px 40px rgba(0, 0, 0, 0.5);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.trust-banner-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 1px 0 0 rgba(201, 168, 76, 0.10),
    0 4px 10px rgba(0, 0, 0, 0.3),
    0 24px 50px rgba(0, 0, 0, 0.55);
}
.trust-banner-card-stars {
  color: var(--gold);
  font-size: 0.95rem;
  letter-spacing: 1.5px;
  line-height: 1;
}
.trust-banner-card-text {
  margin: 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--text-light);
  /* Clamp long reviews so the row stays uniform-height */
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.trust-banner-card-name {
  margin-top: auto;
  font-size: 0.82rem;
  color: var(--text-muted);
  letter-spacing: 0.5px;
}

.trust-banner-link {
  display: inline-block;
  color: var(--gold);
  text-decoration: none;
  font-size: 0.9rem;
  letter-spacing: 0.6px;
  border-bottom: 1px solid rgba(201, 168, 76, 0.3);
  padding-bottom: 1px;
  transition: border-color 0.18s ease;
  position: relative;
  z-index: 1;
}
.trust-banner-link:hover { border-bottom-color: var(--gold); }

/* Narrower viewports — fall back to horizontal scroll with snap points
   since 5 tiles can't fit cleanly in a single row below ~1100px. */
@media (max-width: 1100px) {
  .trust-banner-cards {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 1.5rem;
    padding-bottom: 1.4rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .trust-banner-cards::-webkit-scrollbar { display: none; }
  .trust-banner-card {
    flex: 0 0 280px;
    scroll-snap-align: start;
  }
}
@media (max-width: 700px) {
  .trust-banner { padding: 2rem 0 1.8rem; }
  .trust-banner-cards { padding: 0.4rem 1rem 1.2rem; scroll-padding: 0 1rem; gap: 0.8rem; }
  .trust-banner-card { flex: 0 0 80vw; padding: 1.2rem 1.1rem; }
  .trust-banner-card-text { font-size: 0.98rem; }
}

/* ========== REVIEWS ========== */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}
.reviews-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--text-muted);
  font-style: italic;
  font-family: var(--serif);
  padding: 2rem;
  font-size: 1.1rem;
}
.review-card {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1.8rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  transition: border-color 0.3s;
}
.review-card:hover { border-color: var(--gold-dark); }
.review-stars { font-size: 1.1rem; letter-spacing: 2px; }
.review-star { color: #3a3a3a; }
.review-star.filled { color: var(--gold); }
.review-text {
  color: var(--text-primary);
  line-height: 1.7;
  font-size: 0.95rem;
  font-style: italic;
  flex: 1;
}
.review-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  padding-top: 0.9rem;
  gap: 1rem;
  flex-wrap: wrap;
}
.review-name {
  font-family: var(--serif);
  color: var(--gold);
  font-size: 0.95rem;
  letter-spacing: 1px;
}
.review-occasion {
  font-size: 0.75rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: var(--bg-tertiary);
  padding: 3px 8px;
  border-radius: 2px;
}
.reviews-cta-wrap { text-align: center; margin-top: 2rem; }

/* Review submission modal */
.review-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  z-index: 1000;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 2rem;
  overflow-y: auto;
}
.review-modal.open { display: flex; animation: fadeUp 0.3s; }
.review-modal-inner {
  background: var(--bg-secondary);
  border: 1px solid var(--gold-dark);
  border-radius: 8px;
  padding: 2.5rem 2rem;
  max-width: 520px;
  width: 100%;
  position: relative;
  margin: auto;
}
.review-modal-close {
  position: absolute;
  top: 1rem; right: 1.2rem;
  background: none; border: none;
  color: var(--text-muted);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s;
}
.review-modal-close:hover { color: var(--gold); }
.review-modal-title {
  font-family: var(--serif);
  color: var(--gold);
  font-size: 1.8rem;
  letter-spacing: 2px;
  text-align: center;
  margin-bottom: 0.3rem;
  font-weight: 300;
}
.review-modal-sub {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.88rem;
  margin-bottom: 1.8rem;
  font-style: italic;
}
.review-welcome {
  background: rgba(201, 168, 76, 0.08);
  border: 1px solid rgba(201, 168, 76, 0.3);
  border-radius: 6px;
  padding: 0.9rem 1.1rem;
  margin: -0.6rem 0 1.6rem;
  color: var(--text);
  font-size: 0.92rem;
  line-height: 1.5;
  text-align: center;
}
.review-field { margin-bottom: 1.1rem; }
.review-field label {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
}
.review-optional {
  text-transform: none;
  letter-spacing: 0;
  color: var(--gold-dark);
  font-size: 0.85em;
}
.review-field input,
.review-field textarea,
.review-field select {
  width: 100%;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0.7rem 0.9rem;
  color: var(--text-primary);
  font-family: var(--sans);
  font-size: 0.95rem;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.review-field input:focus,
.review-field textarea:focus,
.review-field select:focus { outline: none; border-color: var(--gold); }
.review-product-tag {
  display: inline-block;
  font-family: var(--serif);
  color: var(--gold-light);
  font-size: 0.78rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  border: 1px solid var(--gold-dark);
  border-radius: 2px;
  padding: 3px 8px;
  align-self: flex-start;
}
.review-field textarea { resize: vertical; min-height: 100px; }
.star-picker { display: flex; gap: 0.3rem; padding: 0.3rem 0; }
.star-picker button {
  background: none;
  border: none;
  color: #3a3a3a;
  font-size: 2rem;
  cursor: pointer;
  transition: transform 0.15s, color 0.15s;
  padding: 0 0.1rem;
  line-height: 1;
}
.star-picker button:hover { transform: scale(1.15); }
.star-picker button.filled { color: var(--gold); }
.review-submit-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 1.4rem;
  flex-wrap: wrap;
}
.review-submit-row .btn { min-width: 180px; }
.review-status {
  flex: 1;
  font-size: 0.85rem;
  color: var(--text-muted);
  text-align: right;
  min-height: 1.2rem;
}
.review-status.success { color: #7ec8a0; }
.review-status.error { color: #e85c5c; }

/* ========== EVENTS / CUSTOM ORDERS SECTION ========== */
.events-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 4rem;
}
.events-tile {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2rem 1.6rem;
  position: relative;
  transition: border-color 0.3s, transform 0.3s;
}
.events-tile:hover {
  border-color: var(--gold-dark);
  transform: translateY(-2px);
}
.events-tile-mark {
  width: 32px;
  height: 1px;
  background: var(--gold);
  margin-bottom: 1.4rem;
}
.events-tile-title {
  font-family: var(--serif);
  font-size: 1.55rem;
  font-weight: 400;
  color: var(--gold-light);
  letter-spacing: 0.5px;
  margin-bottom: 0.8rem;
}
.events-tile-text {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.65;
}

.events-cta {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2.6rem 2.2rem;
  max-width: 760px;
  margin: 0 auto;
}
.events-cta-title {
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 400;
  color: var(--gold-light);
  letter-spacing: 0.5px;
  margin-bottom: 0.5rem;
  text-align: center;
}
.events-cta-sub {
  color: var(--text-muted);
  text-align: center;
  margin-bottom: 2rem;
  font-size: 0.95rem;
}
.events-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem 1.2rem;
  margin-bottom: 1.1rem;
}
.events-field { display: flex; flex-direction: column; }
.events-field-full { width: 100%; margin-bottom: 1.4rem; }
.events-field label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text-muted);
  margin-bottom: 0.45rem;
}
.events-optional {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.75rem;
  opacity: 0.7;
}
.events-field input,
.events-field select,
.events-field textarea {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text-primary);
  font-family: var(--sans);
  font-size: 0.98rem;
  padding: 0.7rem 0.9rem;
  transition: border-color 0.2s;
}
.events-field input:focus,
.events-field select:focus,
.events-field textarea:focus {
  outline: none;
  border-color: var(--gold);
}
/* Date input — make the native calendar picker discoverable on the dark
   theme. Default Chrome/Edge calendar icon is dark grey on dark bg
   (invisible). Invert it to a light gold-ish color + make the whole field
   clearly clickable so admin/customer knows they can tap to open the
   native date picker (not type the date manually). */
.events-field input[type="date"] {
  cursor: pointer;
  position: relative;
  /* iOS Safari sometimes renders type="date" as inline-block at minimum
     height — this normalizes to match other inputs. */
  min-height: 2.6rem;
  color-scheme: dark;
}
.events-field input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.85) sepia(0.4) hue-rotate(10deg) saturate(2);
  cursor: pointer;
  opacity: 0.9;
  padding: 4px;
}
.events-field input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}
.events-field textarea { resize: vertical; min-height: 100px; }
.events-field select { appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%),
                    linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position: calc(100% - 18px) 18px, calc(100% - 13px) 18px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2.2rem;
}
.events-submit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.events-wa-link {
  color: var(--gold);
  font-size: 0.88rem;
  letter-spacing: 0.3px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}
.events-wa-link:hover { border-bottom-color: var(--gold); }
.events-form-status {
  margin-top: 1rem;
  font-size: 0.92rem;
  color: var(--text-muted);
  min-height: 1.2rem;
  text-align: center;
}
.events-form-status.success { color: #7ec8a0; }
.events-form-status.error { color: #e85c5c; }

/* Confirmation panel — swaps in for the form after a successful inquiry.
   Brand-styled (gold accents on charcoal) matching the rest of the public
   site. Centered, padded card with clear success state. */
.events-confirmation {
  text-align: center;
  padding: 2.4rem 2rem 2.5rem;
  background: rgba(201, 168, 76, 0.06);
  border: 1px solid rgba(201, 168, 76, 0.3);
  border-radius: 10px;
  animation: fadeUp 0.4s ease-out;
}
.events-confirmation-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  color: var(--gold);
  font-size: 2rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.2rem;
}
.events-confirmation-title {
  font-family: var(--serif);
  color: var(--gold);
  font-size: 1.6rem;
  letter-spacing: 1.2px;
  margin: 0 0 0.8rem;
  font-weight: 500;
}
.events-confirmation-body {
  color: var(--ivory);
  font-size: 1rem;
  line-height: 1.65;
  max-width: 480px;
  margin: 0 auto 1.6rem;
  opacity: 0.85;
}
.events-confirmation-actions {
  display: flex;
  gap: 0.8rem;
  justify-content: center;
  flex-wrap: wrap;
}
.events-confirmation-actions .btn-ghost {
  background: transparent;
  border: 1px solid rgba(245, 240, 232, 0.3);
  color: var(--ivory);
  padding: 0.9rem 1.4rem;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.92rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  transition: border-color 0.2s, color 0.2s;
}
.events-confirmation-actions .btn-ghost:hover {
  border-color: var(--gold);
  color: var(--gold);
}
@media (max-width: 480px) {
  .events-confirmation { padding: 1.8rem 1.2rem 2rem; }
  .events-confirmation-title { font-size: 1.4rem; }
  .events-confirmation-actions { flex-direction: column; }
  .events-confirmation-actions .btn,
  .events-confirmation-actions .btn-ghost { width: 100%; }
}

/* ========== FLOATING WA BUTTON ========== */
/* ========== CHAT WIDGET (floating, replaces old WhatsApp FAB) ========== */
/* Wrapper positioned bottom-right; the toggle button + the slide-up panel
   live inside. Keeps the .fab-whatsapp class for compatibility with the
   cart.js visibility logic that hides this when the cart modal opens. */
.chat-widget {
  position: fixed;
  bottom: max(1.5rem, env(safe-area-inset-bottom, 0));
  right: max(1.5rem, env(safe-area-inset-right, 0));
  z-index: 90;
  animation: fadeUp 1s ease-out 0.5s backwards;
  transition: opacity 0.2s, transform 0.2s;
}
.fab-whatsapp-hidden { opacity: 0; transform: scale(0.6); pointer-events: none; }

/* The circular toggle button — same green WhatsApp styling as before */
.chat-fab {
  width: 56px;
  height: 56px;
  background: #25D366;
  color: #fff;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.5);
  transition: transform 0.2s, background 0.2s;
  position: relative;
}
.chat-fab:hover { transform: scale(1.1); }
.chat-fab-icon-open { display: none; }
.chat-widget.is-open .chat-fab-icon-closed { display: none; }
.chat-widget.is-open .chat-fab-icon-open { display: block; }
.chat-widget.is-open .chat-fab { background: #128C7E; }

/* The chat panel that slides up from above the FAB */
.chat-panel {
  position: absolute;
  bottom: calc(56px + 12px);
  right: 0;
  width: 320px;
  max-width: calc(100vw - 2rem);
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: chatPanelIn 0.18s ease-out;
}
@keyframes chatPanelIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.chat-header {
  background: #075E54;
  color: #fff;
  padding: 0.85rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.chat-header-info {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: 1;
  min-width: 0;
}
.chat-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
  flex-shrink: 0;
}
.chat-name {
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.2px;
  line-height: 1.2;
}
.chat-status {
  font-size: 0.72rem;
  opacity: 0.85;
  margin-top: 2px;
}
.chat-close {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.25rem;
  opacity: 0.85;
  transition: opacity 0.15s;
  flex-shrink: 0;
}
.chat-close:hover { opacity: 1; }

.chat-messages {
  background: #ECE5DD; /* WhatsApp chat-bg beige */
  padding: 0.85rem;
  min-height: 80px;
  max-height: 220px;
  overflow-y: auto;
  font-family: var(--sans);
  font-size: 0.9rem;
}
.chat-bubble {
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  max-width: 85%;
  line-height: 1.4;
  color: #1a1a1a;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}
.chat-bubble-from {
  background: #fff;
  align-self: flex-start;
  border-top-left-radius: 2px;
}

.chat-form {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  padding: 0.5rem 0.6rem;
  background: #f5f5f5;
  border-top: 1px solid #e0e0e0;
}
.chat-input {
  flex: 1;
  border: 1px solid #d4d4d4;
  border-radius: 18px;
  padding: 0.55rem 0.85rem;
  font-family: var(--sans);
  font-size: 0.9rem;
  resize: none;
  outline: none;
  background: #fff;
  color: #1a1a1a;
  max-height: 100px;
  line-height: 1.35;
  box-sizing: border-box;
}
.chat-input:focus { border-color: #25D366; }
.chat-send {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s;
}
.chat-send:hover { background: #1faa55; }
.chat-send:disabled { background: #b0b0b0; cursor: not-allowed; }

/* ========== CART PILL (FAB) ========== */
.fab-cart {
  position: fixed;
  /* Stacked ABOVE the chat fab (56px circle at bottom: 1.5rem) so both stay
     accessible when the cart has items. 56px chat + 0.7rem gap ≈ 4rem offset. */
  bottom: calc(max(1.5rem, env(safe-area-inset-bottom, 0)) + 4rem);
  right: max(1.5rem, env(safe-area-inset-right, 0));
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.2rem 0.85rem 1rem;
  background: var(--gold);
  color: #0a0a0a;
  border: none;
  border-radius: 999px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.4px;
  box-shadow: 0 8px 22px rgba(201, 168, 76, 0.45);
  cursor: pointer;
  /* Above the lightbox (z-index: 1000) so the cart pill stays visible when
     a customer is browsing product/gallery images and wants to check out. */
  z-index: 1010;
  transition: transform 0.18s, box-shadow 0.18s;
  animation: fab-cart-in 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);  /* bounce-in entrance */
}
.fab-cart:hover { transform: scale(1.04); box-shadow: 0 10px 28px rgba(201, 168, 76, 0.6); }
/* When viewing a product in the lightbox, the in-lightbox CTA bar already has
   "Add to Cart" + "View Cart" — hide the floating pill so it doesn't overlap
   those buttons. Gallery (no CTA bar) keeps the pill visible. */
body.lightbox-product-open .fab-cart { display: none; }
/* Triggered by JS each time the cart count changes — quick attention pulse so customers
   notice their item was added even if their finger is hovering over the button. */
.fab-cart.fab-cart-pulse {
  animation: fab-cart-pulse 0.55s ease-out;
}
@keyframes fab-cart-in {
  0%   { opacity: 0; transform: translateY(60px) scale(0.4); }
  60%  { opacity: 1; transform: translateY(-6px) scale(1.06); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes fab-cart-pulse {
  0%   { transform: scale(1); box-shadow: 0 8px 22px rgba(201, 168, 76, 0.45); }
  35%  { transform: scale(1.18); box-shadow: 0 12px 38px rgba(201, 168, 76, 0.85); }
  100% { transform: scale(1); box-shadow: 0 8px 22px rgba(201, 168, 76, 0.45); }
}
.fab-cart svg { stroke: #0a0a0a; }
.fab-cart-text { display: inline-flex; align-items: center; gap: 0.4rem; }
.fab-cart-count { font-weight: 600; }
.fab-cart-sep { opacity: 0.5; }

/* ========== CART MODAL ========== */
.cart-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: none;
  align-items: center;
  justify-content: center;
  /* Above the lightbox (z-index: 1000) so the cart can be opened on top of an
     open lightbox — fab-cart click works without first closing the lightbox. */
  z-index: 1020;
  padding: 1rem;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.cart-modal.open { display: flex; animation: fadeUp 0.25s; }
.cart-modal-inner {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2rem 1.8rem 1.6rem;
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
}
.cart-modal-close {
  position: absolute;
  top: 0.6rem;
  right: 0.9rem;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s;
}
.cart-modal-close:hover { color: var(--gold); }
.cart-modal-title {
  font-family: var(--serif);
  font-size: 1.8rem;
  font-weight: 400;
  color: var(--gold-light);
  margin-bottom: 1.2rem;
  letter-spacing: 1px;
}
.cart-empty {
  color: var(--text-muted);
  text-align: center;
  padding: 2rem 0;
}
.cart-lines {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-bottom: 1.4rem;
}
.cart-line {
  display: grid;
  grid-template-columns: 76px 1fr auto auto auto;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0.4rem;
  border-bottom: 1px solid var(--border);
}
.cart-line-image {
  width: 76px;
  height: 76px;
  border-radius: 4px;
  overflow: hidden;
  background: #0a0a0a;
}
.cart-line-image img { width: 100%; height: 100%; object-fit: cover; }
.cart-line-info { min-width: 0; }
.cart-line-name {
  font-family: var(--serif);
  font-size: 1.3rem;
  color: var(--ivory);
  margin-bottom: 0.25rem;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cart-line-price { font-size: 0.95rem; color: var(--text-muted); }
.cart-line-controls {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.cart-qty-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--gold);
  color: var(--gold);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  transition: all 0.2s;
}
.cart-qty-btn:hover { background: var(--gold); color: #000; }
.cart-qty {
  font-weight: 500;
  font-size: 1.1rem;
  min-width: 1.8ch;
  text-align: center;
}
.cart-line-total {
  font-family: var(--serif);
  color: var(--gold-light);
  font-size: 1.4rem;
  min-width: 4ch;
  text-align: right;
}
.cart-line-remove {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.3rem;
  transition: color 0.2s;
}
.cart-line-remove:hover { color: #e85c5c; }
.cart-footer { display: flex; flex-direction: column; }
.cart-total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 0.6rem;
}
.cart-total-label {
  font-family: var(--serif);
  font-size: 1.2rem;
  letter-spacing: 1px;
  color: var(--text-primary);
}
.cart-total-value {
  font-family: var(--serif);
  font-size: 1.6rem;
  color: var(--gold-light);
}
.cart-fine-print {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 0.4rem 0 1rem;
}
.cart-checkout-btn {
  width: 100%;
  margin-bottom: 0.5rem;
  text-align: center;
  display: block;
}
.cart-wa-link {
  display: block;
  text-align: center;
  color: var(--gold);
  font-size: 0.86rem;
  margin-bottom: 0.6rem;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  transition: border-color 0.2s;
}
.cart-wa-link:hover { border-bottom-color: var(--gold); }
.cart-clear-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.82rem;
  cursor: pointer;
  padding: 0.4rem;
  transition: color 0.2s;
}
.cart-clear-btn:hover { color: #e85c5c; }

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
  .nav { padding: 0.8rem 1rem; }
  .nav-logo img { height: 38px; width: 38px; }
  .nav-links { gap: 1rem; font-size: 1.1rem; }
  .hero { padding: 5rem 1.5rem 3rem; }
  .section { padding: 4rem 1.2rem; }
  .section-sub { margin-bottom: 2.5rem; }
  .product-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
  .chat-widget { bottom: max(1rem, env(safe-area-inset-bottom, 0)); right: max(1rem, env(safe-area-inset-right, 0)); }
  .chat-fab { width: 52px; height: 52px; }
  .chat-panel { bottom: calc(52px + 10px); width: 300px; }
  .events-tiles { grid-template-columns: 1fr; gap: 1rem; margin-bottom: 2.5rem; }
  .events-tile { padding: 1.6rem 1.4rem; }
  .events-cta { padding: 2rem 1.4rem; }
  .events-cta-title { font-size: 1.7rem; }
  .events-form-grid { grid-template-columns: 1fr; gap: 1rem; }
  .events-submit-row { justify-content: center; text-align: center; }
  .fab-cart { bottom: max(1rem, env(safe-area-inset-bottom, 0)); right: max(1rem, env(safe-area-inset-right, 0)); padding: 0.8rem 1.1rem; font-size: 0.95rem; }
  .cart-modal-inner { padding: 1.6rem 1.2rem 1.2rem; }
  .cart-line {
    grid-template-columns: 68px 1fr auto;
    grid-template-areas:
      "img info total"
      "img controls remove";
    column-gap: 0.9rem;
    row-gap: 0.6rem;
    padding: 1rem 0.2rem;
  }
  .cart-line-image { grid-area: img; width: 68px; height: 68px; }
  .cart-line-info { grid-area: info; }
  .cart-line-controls { grid-area: controls; }
  .cart-line-total { grid-area: total; font-size: 1.3rem; }
  .cart-line-remove { grid-area: remove; align-self: end; font-size: 1.8rem; padding: 0 0.4rem; }
  .cart-line-name { font-size: 1.2rem; }
  .cart-qty-btn { width: 38px; height: 38px; font-size: 1.25rem; }
  .cart-qty { font-size: 1.15rem; }
}
@media (max-width: 768px) {
  /* Tighten the QR card on mobile so it doesn't dwarf the WhatsApp card
     stacked above it AND doesn't overflow narrow phone viewports. */
  /* width only — aspect-ratio: 1/1 computes height to keep the box square */
  .qr-image { width: 170px; }
  .order-card { padding: 2rem 1.25rem; }
  .order-icon-wa svg { width: 56px; height: 56px; }
}
@media (max-width: 420px) {
  .nav-links { gap: 0.7rem; font-size: 1rem; letter-spacing: 0.5px; }
  .nav { padding: 0.7rem 0.8rem; }
  .nav-logo img { height: 34px; width: 34px; }
  .hero { padding: 4.5rem 1rem 2.5rem; }
  .hero-title { letter-spacing: 2px; }
  .hero-tagline { letter-spacing: 1px; }
  .section { padding: 3.5rem 1rem; }
  .gallery-grid { grid-template-columns: 1fr; }
  .qr-image { width: 150px; }
  .order-card { padding: 1.75rem 1rem; }
  .order-icon-wa svg { width: 48px; height: 48px; }
}
@media (max-width: 360px) {
  .nav-links { gap: 0.5rem; font-size: 0.92rem; letter-spacing: 0; }
  .hero-title { letter-spacing: 1px; }
  .qr-image { width: 130px; }
}