/* ==========================================================================
   COMPONENTES — menú, carrito, galería, reservaciones, mapa, CTA.
   ========================================================================== */

/* Reveal-on-scroll (usado por ui-effects.js) ---------------------------- */
[data-reveal]{ opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
[data-reveal].in-view{ opacity: 1; transform: translateY(0); }
[data-reveal-delay="1"]{ transition-delay: .08s; }
[data-reveal-delay="2"]{ transition-delay: .16s; }
[data-reveal-delay="3"]{ transition-delay: .24s; }
[data-reveal-delay="4"]{ transition-delay: .32s; }

/* Toggle de idioma (nav) --------------------------------------------------*/
.lang-toggle{
  display: flex; align-items: center; gap: 4px;
  height: 46px; padding: 0 12px; border-radius: var(--radius-pill);
  background: rgba(255,255,255,.04); border: 1px solid var(--border);
  color: var(--ink-faint); font-family: var(--font-mono); font-size: 12.5px; font-weight: 700;
  letter-spacing: .04em; cursor: pointer; transition: border-color .2s ease, background .2s ease;
}
.lang-toggle:hover{ border-color: var(--border-strong); background: rgba(255,255,255,.07); }
.lang-sep{ color: var(--border-strong); }
.lang-opt{ padding: 2px 3px; border-radius: 6px; transition: color .2s ease; }
.lang-opt.active{ color: var(--ink); background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* Menú: tabs de categoría ------------------------------------------------*/
.menu-section{ background: var(--bg); }
.category-tabs{
  position: sticky; top: 74px; z-index: 30;
  display: flex; gap: 6px; overflow-x: auto; padding: 6px;
  background: var(--bg-glass); border: 1px solid var(--border); backdrop-filter: blur(14px);
  border-radius: var(--radius-pill); margin: 0 auto 40px; width: fit-content; max-width: 100%;
  scrollbar-width: none;
}
.category-tabs::-webkit-scrollbar{ display: none; }
.cat-tab{
  padding: 11px 20px; border-radius: var(--radius-pill); border: none; background: transparent;
  color: var(--ink-soft); font-size: 13.5px; font-weight: 600; white-space: nowrap;
  transition: color .2s ease, background .2s ease;
}
.cat-tab.active{ background: var(--accent-grad); color: #241005; }

.menu-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 340px)); gap: 22px; }
.menu-card{
  position: relative; display: flex; flex-direction: column;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform .3s var(--ease-out), border-color .3s ease, box-shadow .3s ease;
}
.menu-card:hover{ transform: translateY(-6px); border-color: var(--border-strong); box-shadow: var(--shadow-lg); }
.menu-card:hover .menu-card-emoji{ transform: scale(1.12) rotate(-4deg); }

.menu-card-photo{
  position: relative; aspect-ratio: 4/3; overflow: hidden;
  background: var(--thumb-grad, var(--accent-grad));
  display: flex; align-items: center; justify-content: center;
}
.menu-card-photo::before{
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.22), transparent 55%);
}
.menu-card-photo::after{
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.4));
}
.menu-card-photo img{
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .4s var(--ease-out);
}
.menu-card:hover .menu-card-photo img{ transform: scale(1.06); }

/* Fotos de platillo con clic para ver en grande (mismo lightbox que la
   galería de "Ambiente"). Solo las fotos con data-dish-index son
   clicables — los platillos sin foto real (que muestran el emoji) no. */
.menu-card-photo[data-dish-index]{ cursor: pointer; }
.photo-expand{
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(11,10,12,.6); backdrop-filter: blur(6px);
  color: #fff; font-size: 17px; line-height: 1; font-weight: 600;
  border: 1px solid rgba(255,255,255,.16);
  opacity: 0; transform: scale(.85);
  transition: opacity .2s ease, transform .2s var(--ease-spring), background .2s ease;
  pointer-events: none;
}
.menu-card:hover .photo-expand{ opacity: 1; transform: scale(1); }
.menu-card-photo[data-dish-index]:hover .photo-expand{ background: rgba(11,10,12,.8); }
.menu-card-emoji{
  font-size: 46px; position: relative; z-index: 1; filter: drop-shadow(0 8px 16px rgba(0,0,0,.35));
  transition: transform .3s var(--ease-spring);
}
.tag-float{ position: absolute; top: 12px; left: 12px; z-index: 2; }
.price-chip{
  position: absolute; bottom: 12px; right: 12px; z-index: 2;
  background: rgba(11,10,12,.72); backdrop-filter: blur(6px);
  color: #fff; font-family: var(--font-mono); font-weight: 700; font-size: 13px;
  padding: 5px 11px; border-radius: var(--radius-pill); border: 1px solid rgba(255,255,255,.14);
}

.menu-card-body{ padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.menu-card-body h4{ font-family: var(--font-body); font-size: 15.5px; font-weight: 700; color: var(--ink); margin-bottom: 5px; }
.menu-card-body p{ font-size: 13px; color: var(--ink-faint); line-height: 1.5; margin-bottom: 14px; flex: 1; }
.menu-card-foot{ display: flex; justify-content: space-between; align-items: center; gap: 10px; }

.share-btn{
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.04); border: 1px solid var(--border);
  color: var(--ink-faint); transition: border-color .2s ease, background .2s ease, color .2s ease, transform .2s var(--ease-spring);
}
.share-btn svg{ width: 16px; height: 16px; }
.share-btn:hover{ border-color: var(--success); background: rgba(53,199,126,.1); color: var(--success); transform: scale(1.08); }

.tag{
  font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  padding: 4px 9px; border-radius: var(--radius-pill);
  background: rgba(11,10,12,.72); backdrop-filter: blur(6px);
  color: var(--accent-2); border: 1px solid rgba(255,178,56,.35);
}

.qty-add{
  width: 40px; height: 40px; border-radius: 12px; border: none; flex-shrink: 0;
  background: var(--accent-grad); color: #241005; font-size: 20px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  transition: transform .2s var(--ease-spring), box-shadow .2s ease;
}
.qty-add:hover{ transform: scale(1.08); box-shadow: var(--shadow-glow); }
.qty-ctrl{ display: flex; align-items: center; gap: 10px; flex-shrink: 0; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 12px; padding: 4px; }
.qty-ctrl button{
  width: 30px; height: 30px; border-radius: 8px; border: none;
  background: transparent; color: var(--ink); font-size: 16px; font-weight: 700;
}
.qty-ctrl button:hover{ background: rgba(255,255,255,.06); color: var(--accent-2); }
.qty-ctrl .n{ min-width: 18px; text-align: center; font-weight: 700; font-size: 14px; }

/* Reseñas -----------------------------------------------------------------
   Resumen (calificación + total, capturados a mano en el panel a partir de
   la ficha real del negocio en Google) y, debajo, una franja horizontal
   con tarjetas de reseñas individuales — también capturadas a mano, nunca
   generadas. Si el dueño no ha llenado nada todavía, la sección entera se
   oculta desde renderReviews() en vez de mostrarse vacía. */
.reviews-section{ background: var(--bg-elevated); }

.reviews-summary{
  display: flex; align-items: center; justify-content: center; gap: 22px;
  flex-wrap: wrap; text-align: left; margin: 0 auto 48px; max-width: 640px;
  background: var(--bg-card); border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  padding: 26px 34px; box-shadow: var(--shadow-md);
}
.reviews-score{ font-family: var(--font-display); font-size: 44px; font-weight: 700; color: var(--ink); line-height: 1; }
.reviews-summary-mid{ display: flex; flex-direction: column; gap: 6px; }
.reviews-stars{ display: flex; gap: 2px; color: var(--accent-2); }
.reviews-stars .star{ width: 18px; height: 18px; opacity: .28; }
.reviews-stars .star.filled{ opacity: 1; }
.reviews-stars svg{ width: 100%; height: 100%; }
.reviews-count{ font-size: 12.5px; color: var(--ink-faint); }
.reviews-google-link{
  margin-left: auto; background: var(--accent-grad); color: #241005; font-weight: 700; font-size: 13px;
  padding: 11px 20px; border-radius: var(--radius-pill); white-space: nowrap;
  transition: transform .2s var(--ease-spring);
}
.reviews-google-link:hover{ transform: translateY(-2px); }

/* Franja de reseñas: mismo mecanismo que el marquee de frases del hero —
   el "viewport" recorta y difumina las orillas (mask-image), y adentro un
   carril el doble de ancho de lo necesario avanza sin parar con
   translateX(-50%) (@keyframes marquee-scroll, en 05-animations.css).
   Se detiene al pasar el mouse encima para poder leer con calma. */
.reviews-strip-viewport{
  overflow: hidden; margin: 8px 0 44px;
  mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
}
.reviews-strip{
  display: flex; width: max-content; gap: 24px;
  animation: marquee-scroll 70s linear infinite;
}
.reviews-strip-viewport:hover .reviews-strip{ animation-play-state: paused; }
.review-card{
  flex: 0 0 360px; background: var(--bg-card); border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg); padding: 26px; box-shadow: var(--shadow-sm);
}
.review-card-head{ display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.review-card-avatar{
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-grad); color: #241005; font-weight: 800; font-size: 15px;
}
.review-card-avatar img{ width: 100%; height: 100%; object-fit: cover; }
.review-card-who{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.review-card-author{ font-weight: 700; font-size: 13.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.review-card-date{ font-size: 11.5px; color: var(--ink-faint); white-space: nowrap; }
.review-card-stars{ display: flex; gap: 2px; color: var(--accent-2); margin-bottom: 14px; }
.review-card-stars .star{ width: 15px; height: 15px; opacity: .28; }
.review-card-stars .star.filled{ opacity: 1; }
.review-card-stars svg{ width: 100%; height: 100%; }
.review-card-quote{ font-size: 14.5px; color: var(--ink-soft); line-height: 1.6; }

/* Invitación a dejar reseña (debajo de la franja) — tarjeta con degradado
   de marca, no un simple renglón de texto, para que invite a darle clic. */
.reviews-invite{
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  background: linear-gradient(135deg, rgba(255,107,53,.14), rgba(232,54,91,.1));
  border: 1px solid rgba(255,178,56,.3); border-radius: var(--radius-xl);
  padding: 34px 40px; box-shadow: var(--shadow-md);
}
.reviews-invite::before{
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(circle at 15% 30%, rgba(255,178,56,.18), transparent 55%);
}
.reviews-invite > *{ position: relative; z-index: 1; }
.reviews-invite-icon{
  width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent-grad); color: #241005;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-glow);
}
.reviews-invite-icon svg{ width: 26px; height: 26px; }
.reviews-invite-copy{ flex: 1; min-width: 220px; }
.reviews-invite-copy h3{ font-family: var(--font-display); font-size: clamp(19px, 2vw, 23px); color: var(--ink); margin-bottom: 4px; }
.reviews-invite-copy p{ color: var(--ink-soft); font-size: 14px; margin: 0; }
.reviews-invite .btn-primary{ flex-shrink: 0; }

@media (max-width: 640px){
  .reviews-invite{ flex-direction: column; text-align: center; padding: 30px 26px; }
  .reviews-invite .btn-primary{ width: 100%; }
}

@media (max-width: 920px){
  .review-card{ flex: 0 0 300px; }
}

@media (max-width: 640px){
  .reviews-summary{ justify-content: flex-start; padding: 22px 24px; }
  .reviews-google-link{ margin-left: 0; }
  .review-card{ flex: 0 0 78vw; }
}

/* Nosotros + Horario ------------------------------------------------------
   El título ("Nosotros") va centrado y arriba de la sección, igual que en
   "Ambiente" — no metido en ningún cuadro. Debajo, una foto grande de
   banner da impacto visual, y los datos de horario/ubicación sí viven en
   su propia tarjeta, para que se sientan organizados y no sueltos. */
.about-visit-section{ background: var(--bg); }

.about-photo-banner{
  position: relative; border-radius: var(--radius-xl); overflow: hidden;
  height: 440px; border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg);
  margin-bottom: 46px;
}
.about-photo-banner img{
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.about-photo-banner::after{
  content:""; position:absolute; inset:0; pointer-events: none;
  background:
    linear-gradient(155deg, rgba(181,69,27,.32), transparent 55%),
    linear-gradient(0deg, rgba(11,10,12,.7), transparent 40%);
  mix-blend-mode: multiply;
}
.photo-badge{
  position: absolute; left: 24px; bottom: 24px; z-index: 1;
  display: flex; align-items: center; gap: 14px;
  background: rgba(11,10,12,.68); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius-md);
  padding: 15px 18px;
}
.photo-badge .stars{ color: var(--accent-2); font-size: 17px; letter-spacing: 2px; flex-shrink: 0; }
.photo-badge strong{ display: block; color: var(--ink); font-size: 13.5px; font-weight: 600; }
.photo-badge a{ color: var(--accent-2); font-size: 12.5px; font-weight: 600; }
.photo-badge a:hover{ text-decoration: underline; }

/* Tarjeta de horario/ubicación — los "datos" van aquí adentro. */
.visit-card{
  background: var(--bg-card); border: 1px solid var(--border-strong); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg); padding: 46px 48px;
}
.visit-card-head{ text-align: center; margin-bottom: 34px; }
.avc-subhead{ font-family: var(--font-display); font-size: clamp(22px, 2.4vw, 30px); color: var(--ink); margin-top: 6px; }

.visit-hours-map{ display: grid; grid-template-columns: .85fr 1.15fr; gap: 40px; align-items: start; }

/* Gallery ("Ambiente" / modo antro) -------------------------------------
   Sección de foto a foto ancho completo, sin .wrap — a propósito, para que
   se sienta más inmersiva/impactante que el resto del sitio (que sí está
   contenido). Usa columnas CSS (masonry con el alto real de cada foto) en
   vez de una cuadrícula uniforme, así se ve bien con cualquier cantidad de
   fotos y cualquier proporción (verticales, horizontales, etc.). */
.gallery-section{ background: #050405; padding: 90px 0 100px; overflow: hidden; }
.gallery-section .section-head{ padding: 0 28px; }

.gallery-grid{ columns: 4 260px; column-gap: 6px; padding: 0 6px; }
.gallery-item{
  display: block; width: 100%; margin: 0 0 6px; break-inside: avoid;
  border: none; padding: 0; position: relative; overflow: hidden; cursor: pointer;
  background: var(--bg-card); border-radius: 4px;
}
.gallery-item img{
  display: block; width: 100%; height: auto;
  transition: transform .5s var(--ease-out);
  filter: saturate(1.05);
}
.gallery-item::after{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.6));
  opacity: 0; transition: opacity .3s ease;
}
.gallery-item::before{
  content: "＋"; position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; color: #fff; opacity: 0; transition: opacity .3s ease;
  text-shadow: 0 2px 10px rgba(0,0,0,.5);
}
.gallery-item:hover img{ transform: scale(1.06); }
.gallery-item:hover::after, .gallery-item:hover::before{ opacity: 1; }

/* Lightbox — pantalla completa al hacer clic en una foto ---------------- */
.lightbox{
  position: fixed; inset: 0; z-index: 200; background: rgba(3,2,4,.94);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .25s ease;
  backdrop-filter: blur(6px);
}
.lightbox.show{ opacity: 1; pointer-events: auto; }
.lightbox img{
  max-width: min(90vw, 1100px); max-height: 85vh; border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}
.lightbox-close{
  position: absolute; top: 24px; right: 24px; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.08); border: 1px solid var(--border-strong); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
}
.lightbox-close svg{ width: 18px; height: 18px; }
.lightbox-nav{
  position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255,255,255,.08); border: 1px solid var(--border-strong); color: var(--ink);
  font-size: 30px; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.lightbox-nav.prev{ left: 24px; }
.lightbox-nav.next{ right: 24px; }
.lightbox-nav:hover, .lightbox-close:hover{ background: rgba(255,255,255,.16); }

/* Reservation ---------------------------------------------------------*/
.reserve-section{ background: var(--bg-elevated); }
.reserve-grid{ display: grid; grid-template-columns: .9fr 1.1fr; gap: 50px; align-items: center; }
.reserve-card{
  background: var(--bg-card); border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  padding: 34px; box-shadow: var(--shadow-lg);
}
.form-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field-full{ grid-column: 1 / -1; }
.reserve-perks{ display: flex; flex-direction: column; gap: 18px; }
.perk{ display: flex; gap: 14px; align-items: flex-start; }
.perk .ic{
  width: 42px; height: 42px; border-radius: 12px; background: rgba(255,107,53,.12);
  display: flex; align-items: center; justify-content: center; color: var(--accent-1); flex-shrink: 0;
}
.perk .ic svg{ width: 20px; height: 20px; }
.perk h4{ font-family: var(--font-body); font-size: 15px; margin-bottom: 3px; }
.perk p{ font-size: 13.5px; color: var(--ink-faint); }

/* Hours + map -----------------------------------------------------------*/
.hours-list{ list-style: none; }
.hours-list li{ display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 14.5px; }
.hours-list li b{ color: var(--ink); font-weight: 600; }
.hours-list li span{ color: var(--ink-soft); font-family: var(--font-mono); }
.map-frame{ position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border-strong); height: 260px; }
/* El filtro va en el iframe (no en .map-frame) para que el mapa se vea en
   tonos oscuros a juego con el sitio, sin afectar el color del botón
   "Cómo llegar" que va encima. */
.map-frame iframe{ width: 100%; height: 100%; border: 0; filter: grayscale(.3) invert(.92) contrast(.9); }
.map-directions-btn{
  position: absolute; right: 14px; bottom: 14px; z-index: 1;
  background: var(--accent-grad); color: #241005; font-size: 12.5px; font-weight: 700;
  padding: 9px 16px; border-radius: var(--radius-pill); box-shadow: var(--shadow-md);
  transition: transform .2s var(--ease-spring);
}
.map-directions-btn:hover{ transform: translateY(-2px); }

/* CTA band ------------------------------------------------------------
   Lleva la foto del hero muy difuminada de fondo (#ctaBgPhoto, la pone
   render.js) — arriba va el mismo degradado naranja/rosa de siempre pero
   semi-transparente (::before), así el cuadro se sigue viendo de los
   mismos colores y nomás se alcanza a apreciar la foto detrás. */
.cta-band{
  position: relative; overflow: hidden;
  background: var(--bg-card);
  border-radius: var(--radius-xl); padding: 70px 40px; text-align: center;
}
.cta-bg-photo{
  position: absolute; inset: -10px; z-index: 0;
  background-size: cover; background-position: center 25%;
  filter: blur(6px) saturate(1.1);
}
.cta-band::before{
  content:""; position:absolute; inset:0; z-index: 1;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent-3) 58%, transparent),
    color-mix(in srgb, var(--accent-1) 58%, transparent) 60%,
    color-mix(in srgb, var(--accent-2) 58%, transparent));
}
.cta-band::after{
  content:""; position:absolute; inset:0; z-index: 2; opacity:.5;
  background: radial-gradient(circle at 20% 20%, rgba(255,255,255,.25), transparent 45%);
}
.cta-band > *:not(.cta-bg-photo){ position: relative; z-index: 3; }
.cta-band h2{ font-size: clamp(26px, 3.2vw, 38px); color: #1a0d05; margin-bottom: 12px; text-shadow: 0 1px 14px rgba(255,255,255,.18); }
.cta-band p{ color: rgba(26,13,5,.8); font-size: 16px; margin-bottom: 30px; font-weight: 500; text-shadow: 0 1px 14px rgba(255,255,255,.14); }
.cta-band .btn-primary{ background: #1a0d05; color: #fff; box-shadow: 0 20px 50px -14px rgba(0,0,0,.5); }
.cta-band .btn-primary:hover{ box-shadow: 0 24px 60px -14px rgba(0,0,0,.6); }

/* Cart FAB ----------------------------------------------------------- */
.cart-fab{
  position: fixed; bottom: 26px; right: 26px; z-index: 75;
  display: flex; align-items: center; gap: 10px;
  background: var(--accent-grad); color: #241005; border: none; border-radius: var(--radius-pill);
  padding: 15px 22px; font-weight: 700; font-size: 14.5px;
  box-shadow: var(--shadow-glow);
  opacity: 0; transform: translateY(16px) scale(.9); pointer-events: none;
  transition: opacity .25s var(--ease-out), transform .25s var(--ease-spring);
}
.cart-fab.show{ opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.cart-fab.bump{ animation: bump .35s var(--ease-spring); }
.cart-fab .fab-badge{
  background: rgba(36,16,5,.85); color: #fff; border-radius: 999px; min-width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center; font-size: 12px; padding: 0 5px;
}

/* Botón "volver arriba" — aparece al bajar más allá del hero (lo controla
   Effects.initBackToTop en effects.js). Va del lado izquierdo para no
   encimarse con el botón del carrito. */
.back-to-top{
  position: fixed; bottom: 26px; left: 26px; z-index: 75;
  width: 48px; height: 48px; border-radius: 50%; border: none;
  background: var(--accent-grad); color: #241005;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-glow);
  opacity: 0; transform: translateY(16px) scale(.9); pointer-events: none;
  transition: opacity .25s var(--ease-out), transform .25s var(--ease-spring);
}
.back-to-top.show{ opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.back-to-top:hover{ transform: translateY(-2px) scale(1.05); }
.back-to-top svg{ width: 20px; height: 20px; stroke-width: 2.5; }

/* Cart drawer ---------------------------------------------------------*/
.overlay{
  position: fixed; inset: 0; z-index: 95; background: rgba(0,0,0,.6); backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.overlay.show{ opacity: 1; pointer-events: auto; }
.drawer{
  position: fixed; top: 0; right: 0; height: 100%; width: 420px; max-width: 94vw;
  background: var(--bg-elevated); border-left: 1px solid var(--border-strong);
  z-index: 100; transform: translateX(100%); transition: transform .35s var(--ease-out);
  display: flex; flex-direction: column; box-shadow: -30px 0 60px -20px rgba(0,0,0,.6);
}
.drawer.show{ transform: translateX(0); }
.drawer-head{ display: flex; justify-content: space-between; align-items: center; padding: 22px 24px; border-bottom: 1px solid var(--border); }
.drawer-head h3{ font-family: var(--font-body); font-size: 17px; font-weight: 700; }
.drawer-body{ flex: 1; overflow-y: auto; padding: 20px 24px; }
.drawer-empty{ color: var(--ink-faint); font-size: 14px; text-align: center; padding: 60px 10px; }
.drawer-empty svg{ width: 40px; height: 40px; color: var(--border-strong); margin: 0 auto 14px; }

.cart-line{ display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.cart-line .name{ font-size: 14px; font-weight: 600; color: var(--ink); }
.cart-line .unit{ font-size: 12px; color: var(--ink-faint); margin-top: 2px; }
.cart-line .remove{ background: none; border: none; color: var(--ink-faint); font-size: 12px; text-decoration: underline; margin-top: 6px; }
.cart-line .lineprice{ font-weight: 700; font-family: var(--font-mono); font-size: 13.5px; }

.mode-toggle{ display: flex; gap: 8px; margin-bottom: 18px; background: var(--bg-card); padding: 5px; border-radius: var(--radius-pill); border: 1px solid var(--border); }
.mode-toggle button{
  flex: 1; padding: 10px; border-radius: var(--radius-pill); border: none; background: transparent;
  font-size: 12.5px; font-weight: 700; color: var(--ink-faint); display: flex; align-items: center; justify-content: center; gap: 6px;
}
.mode-toggle button svg{ width: 14px; height: 14px; }
.mode-toggle button.active{ background: var(--accent-grad); color: #241005; }

.drawer-foot{ border-top: 1px solid var(--border); padding: 20px 24px 24px; background: var(--bg-elevated); }
.subtotal-row{ display: flex; justify-content: space-between; font-size: 16px; font-weight: 700; margin-bottom: 16px; }
.subtotal-row .val{ font-family: var(--font-mono); color: var(--accent-2); }

@media (max-width: 920px){
  .reserve-grid, .visit-hours-map{ grid-template-columns: 1fr; }
  .about-photo-banner{ height: 280px; }
  .visit-card{ padding: 32px 24px; }
  .gallery-grid{ columns: 2 160px; }
  .lightbox-nav{ width: 42px; height: 42px; font-size: 24px; }
  .lightbox-nav.prev{ left: 10px; }
  .lightbox-nav.next{ right: 10px; }
  .lightbox-close{ top: 14px; right: 14px; }
  .form-grid{ grid-template-columns: 1fr; }
  .category-tabs{ top: 64px; }
}

@media (max-width: 560px){
  .menu-grid{ grid-template-columns: minmax(0, 1fr); }
}