/* ═══════════════════════════════════════
   FRERO BAR — style.css
   Art Déco · Cartoon '30s · Neon · Milano
═══════════════════════════════════════ */

/* 1. Custom Properties
─────────────────────── */
:root {
  --bg:        #0a0a0a;
  --bg-alt:    #111111;
  --cream:     #f5e6c8;
  --cream-dim: #b8a88a;
  --magenta:   #ff2d9b;
  --magenta-d: #cc1a75;
  --magenta-g: rgba(255, 45, 155, 0.35);
  --cyan:      #00e5ff;
  --yellow:    #f0c040;
  --brass:     #c49a28;
  --font-d:    'Poiret One', 'Georgia', serif;
  --font-b:    'DM Sans', system-ui, sans-serif;
  --max-w:     1100px;
  --gap:       2rem;
  --rad:       6px;
  --trans:     0.3s ease;
}

/* 2. Reset & Base
───────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 72px;
}

body {
  background: var(--bg);
  color: var(--cream);
  font-family: var(--font-b);
  font-size: clamp(15px, 1.05vw, 17px);
  font-weight: 300;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
address { font-style: normal; }

/* Screen-reader only */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Focus visible */
:focus-visible {
  outline: 2px solid var(--magenta);
  outline-offset: 3px;
  border-radius: 3px;
}

/* 3. Typography
─────────────── */
h2 {
  font-family: var(--font-d);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cream);
}

.lead-text {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  font-weight: 400;
  line-height: 1.8;
  color: var(--cream);
  margin-bottom: 1.2rem;
}
.body-text {
  font-size: 0.95rem;
  color: var(--cream-dim);
  line-height: 1.8;
  margin-bottom: 2rem;
}

/* 4. Layout helpers
──────────────────── */
.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 1.5rem;
}

section { padding: 5rem 0; }

.section-header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 3.5rem;
  text-align: center;
  justify-content: center;
}

.deco-hline {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--magenta), transparent);
  opacity: 0.45;
  max-width: 280px;
}

/* 5. Buttons
──────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.75rem 1.8rem;
  border-radius: var(--rad);
  font-family: var(--font-b);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  border: 2px solid transparent;
  transition: var(--trans);
  white-space: nowrap;
}

.btn-icon { width: 18px; height: 18px; flex-shrink: 0; }

.btn-neon {
  background: var(--magenta);
  color: #fff;
  border-color: var(--magenta);
  box-shadow: 0 0 18px var(--magenta-g), 0 2px 8px rgba(0,0,0,.4);
}
.btn-neon:hover, .btn-neon:focus-visible {
  background: var(--magenta-d);
  border-color: var(--magenta-d);
  box-shadow: 0 0 32px var(--magenta-g), 0 4px 16px rgba(0,0,0,.5);
  transform: translateY(-2px);
}
.btn-neon:active { transform: translateY(0); }

.btn-outline {
  background: transparent;
  color: var(--cream);
  border-color: var(--cream);
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.btn-outline:hover, .btn-outline:focus-visible {
  background: var(--cream);
  color: var(--bg);
  transform: translateY(-2px);
}

.btn-large { padding: 1rem 2.4rem; font-size: 1rem; }

/* 6. Header
─────────── */
#site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  transition: background var(--trans), box-shadow var(--trans);
}
#site-header.scrolled,
.menu-page #site-header {
  background: rgba(10, 10, 10, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 2px 24px rgba(0,0,0,.6);
}

.header-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 1.5rem;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.brand-link {
  font-family: var(--font-d);
  font-size: 1.5rem;
  letter-spacing: 0.2em;
  color: var(--cream);
  text-transform: uppercase;
  transition: color var(--trans);
  flex-shrink: 0;
}
.brand-link:hover { color: var(--magenta); }

.nav-list {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.nav-link {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cream-dim);
  padding: 0.45rem 0.75rem;
  border-radius: var(--rad);
  transition: color var(--trans), background var(--trans);
}
.nav-link:hover, .nav-link:focus-visible { color: var(--cream); background: rgba(255,255,255,.06); }
.nav-link.active { color: var(--magenta); }

.nav-cta {
  color: var(--magenta);
  border: 1px solid rgba(255, 45, 155, 0.4);
  padding: 0.4rem 1rem;
}
.nav-cta:hover, .nav-cta:focus-visible {
  background: var(--magenta);
  color: #fff;
  border-color: var(--magenta);
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--cream);
  cursor: pointer;
  padding: 0.25rem;
  border-radius: var(--rad);
  transition: color var(--trans);
}
.nav-toggle:hover { color: var(--magenta); }

/* 7. Hero
────────── */
#hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 30%;
  transform: scale(1.05);
  will-change: transform;
}
@media (prefers-reduced-motion: no-preference) {
  .hero-bg { animation: hero-parallax 30s ease-in-out infinite alternate; }
  @keyframes hero-parallax {
    from { background-position: center 25%; }
    to   { background-position: center 45%; }
  }
}

.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(10,10,10,.72) 0%,
    rgba(10,10,10,.55) 40%,
    rgba(10,10,10,.80) 100%
  );
}

/* Deco: Art Déco diamond pattern, very subtle */
.hero-pattern {
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,45,155,.025) 0px, rgba(255,45,155,.025) 1px, transparent 1px, transparent 32px),
    repeating-linear-gradient(-45deg, rgba(255,45,155,.025) 0px, rgba(255,45,155,.025) 1px, transparent 1px, transparent 32px);
  pointer-events: none;
}

/* Deco corner SVGs */
.deco-corner {
  position: absolute;
  width: clamp(60px, 8vw, 110px);
  height: clamp(60px, 8vw, 110px);
}
.deco-tl { top: 18px; left: 18px; }
.deco-tr { top: 18px; right: 18px; }
.deco-bl { bottom: 18px; left: 18px; }
.deco-br { bottom: 18px; right: 18px; }

.hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.25rem;
  padding: 6rem 1.5rem 4rem;
}

.hero-logo {
  max-width: min(540px, 85vw);
  width: 100%;
  height: auto;
  filter:
    drop-shadow(0 0 28px rgba(255,45,155,.65))
    drop-shadow(0 0 70px rgba(255,45,155,.3))
    drop-shadow(0 0 4px rgba(255,45,155,.9));
}

.hero-tagline {
  font-size: clamp(0.78rem, 1.2vw, 0.92rem);
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cream-dim);
}

.hero-divider { max-width: 320px; width: 100%; }
.hero-divider svg { width: 100%; height: auto; }

.hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}

/* Marquee dots */
.marquee-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mdot {
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 7px var(--yellow);
}
.mdot-lg { width: 9px; height: 9px; }

/* Mascot */
.hero-mascot {
  position: absolute;
  bottom: -6px;
  left: clamp(12px, 4vw, 60px);
  width: clamp(100px, 14vw, 175px);
  pointer-events: none;
  z-index: 2;
}
.hero-mascot-img {
  width: 100%;
  height: auto;
  object-fit: contain;
  /* Subtle drop shadow for depth */
  filter: drop-shadow(0 8px 20px rgba(0,0,0,.55));
}

/* Scroll cue */
.scroll-cue {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}
.scroll-cue span {
  display: block;
  width: 20px; height: 32px;
  border: 2px solid rgba(255,255,255,.35);
  border-radius: 12px;
  position: relative;
}
.scroll-cue span::after {
  content: '';
  position: absolute;
  top: 4px; left: 50%;
  transform: translateX(-50%);
  width: 4px; height: 8px;
  background: var(--magenta);
  border-radius: 2px;
}
@media (prefers-reduced-motion: no-preference) {
  .scroll-cue span::after {
    animation: scroll-dot 2s ease-in-out infinite;
  }
  @keyframes scroll-dot {
    0%, 100% { top: 4px; opacity: 1; }
    60%       { top: 16px; opacity: 0.3; }
  }
}

/* 8. Separators
──────────────── */
.sep-arch, .sep-wave, .sep-arch-inv, .sep-wave-inv, .sep-arch-dark {
  display: block;
  line-height: 0;
  background: var(--bg-alt); /* section behind */
}
.sep-arch svg, .sep-wave svg, .sep-arch-inv svg, .sep-wave-inv svg, .sep-arch-dark svg {
  display: block; width: 100%; height: auto;
}
.sep-arch     { background: var(--bg); }
.sep-wave     { background: var(--bg-alt); }
.sep-arch-inv { background: var(--bg); }
.sep-wave-inv { background: var(--bg-alt); }
.sep-arch-dark{ background: var(--bg-alt); }

/* 9. Il Bar
─────────── */
#bar { background: var(--bg-alt); }

.bar-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
}

.bar-photo-wrap {
  border-radius: var(--rad);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
}
.bar-photo {
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
  object-position: 50% 66%;
}
.bar-photo-wrap:hover .bar-photo { transform: scale(1.04); }
.bar-photo-offset { margin-top: 2rem; }

/* CRT TV
──────── */
.crt-tv {
  margin-top: 2.5rem;
  max-width: 300px;
}

.crt-cabinet {
  background: #2b2318;
  border-radius: 14px;
  padding: 10px 10px 0;
  box-shadow:
    inset 0 3px 6px rgba(255,255,255,.07),
    inset 0 -6px 10px rgba(0,0,0,.5),
    0 24px 64px rgba(0,0,0,.8),
    0 0 0 2px #1a1410;
}

.crt-antenna {
  display: flex;
  justify-content: center;
  height: 30px;
  position: relative;
  margin-bottom: 2px;
}
.ant { position: absolute; bottom: 0; width: 3px; border-radius: 2px; background: #3c3020; }
.ant-l { height: 26px; transform-origin: bottom center; transform: rotate(-28deg) translateX(-8px); }
.ant-r { height: 26px; transform-origin: bottom center; transform: rotate(28deg)  translateX(8px);  }
.ant-base {
  position: absolute; bottom: 0;
  width: 18px; height: 6px;
  background: #3c3020;
  border-radius: 4px;
  left: 50%; transform: translateX(-50%);
}

.crt-body-wrap {
  background: #1e190e;
  border-radius: 10px;
  padding: 8px 8px 4px;
  box-shadow: inset 0 2px 8px rgba(0,0,0,.7);
}

.crt-screen {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: 6px;
  overflow: hidden;
  background: #000;
  box-shadow: inset 0 0 12px rgba(0,0,0,.9), 0 0 18px rgba(0,150,255,.12);
}

.crt-img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.2) brightness(0.8);
}

.crt-scanlines {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px, transparent 3px,
    rgba(0,0,0,.28) 3px, rgba(0,0,0,.28) 4px
  );
  pointer-events: none; z-index: 1;
}

.crt-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,.75) 100%);
  pointer-events: none; z-index: 2;
}

.crt-glare {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.07) 0%, transparent 55%);
  pointer-events: none; z-index: 3;
  border-radius: 6px;
}

@media (prefers-reduced-motion: no-preference) {
  .crt-screen { animation: crt-flicker 14s ease-in-out infinite; }
}
@keyframes crt-flicker {
  0%,91%,100% { opacity: 1; }
  92% { opacity: 0.87; }
  93% { opacity: 1; }
  95% { opacity: 0.91; }
  96% { opacity: 1; }
}

.crt-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 2px 4px;
}
.crt-knob {
  width: 18px; height: 18px; flex-shrink: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #5a4824, #2a1a08);
  border: 2px solid #1a1208;
  box-shadow: 0 2px 4px rgba(0,0,0,.5);
}
.crt-speaker {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
}
.sp-dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #1a1208;
  margin: auto;
}

.crt-legs {
  display: flex;
  justify-content: space-around;
  padding: 0 24px;
}
.crt-leg {
  width: 12px; height: 14px;
  background: #2b2318;
  border-radius: 0 0 4px 4px;
  border: 1px solid #1a1208;
  box-shadow: 0 4px 8px rgba(0,0,0,.4);
}

.crt-caption {
  display: block;
  text-align: center;
  margin-top: 0.75rem;
  font-size: 0.78rem;
  font-style: italic;
  color: var(--cream-dim);
  letter-spacing: 0.08em;
}

/* 10. Menù — Cuphead Style
──────────────────────────── */
:root {
  --cup-bg:     #f2e6c2;
  --cup-dark:   #1a0e08;
  --cup-red:    #c5281c;
  --cup-yellow: #f4c430;
  --cup-green:  #3a7a28;
  --cup-blue:   #2a6aaa;
  --cup-cream:  #fef6e4;
}

.menu-cuphead {
    background: #f7dbfd;
    color: var(--cup-dark);
    position: relative;
    overflow: hidden;
}

/* Halftone dot texture */
.cup-halftone {
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(26,14,8,.1) 1.5px, transparent 1.5px);
  background-size: 12px 12px;
  pointer-events: none; z-index: 0;
}

/* Background decorative SVG */
.cup-bg-deco {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
}
.cup-bg-deco svg { width: 100%; height: 100%; }

.menu-cuphead .container { position: relative; z-index: 1; }

/* ─ Header ─ */
.cup-header {
  text-align: center;
  margin-bottom: 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.cup-stars-row svg { width: 200px; height: 24px; }

.cup-main-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.cup-main-banner h2 {
  font-family: var(--font-d);
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  color: var(--cup-dark);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* Ink outline effect */
  text-shadow:
    2px  2px 0 rgba(26,14,8,.15),
    -1px -1px 0 rgba(26,14,8,.08);
}

.cup-banner-sub {
  font-family: var(--font-b);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--cup-red);
  background: var(--cup-dark);
  color: var(--cup-bg);
  padding: 0.2rem 1rem;
  border-radius: 2px;
}

/* ─ Panels ─ */
.cup-panel {
  background: var(--cup-cream);
  border: 3px solid var(--cup-dark);
  border-radius: 8px;
  box-shadow: 5px 5px 0 var(--cup-dark);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0;
  transition: transform 0.22s cubic-bezier(.22,.61,.36,1), box-shadow 0.22s ease, opacity 0.4s ease;
}
@media (prefers-reduced-motion: reduce) {
  .cup-panel { transition: none; }
}
/* Lift on hover (desktop) */
.cup-panel:hover {
  transform: translateY(-7px);
  box-shadow: 8px 12px 0 var(--cup-dark);
}
/* Lift on touch tap (mobile) */
.cup-panel.cup-touch-active {
  transform: translateY(-5px);
  box-shadow: 6px 10px 0 var(--cup-dark);
}
/* Scroll entrance: JS adds this before observing, removes when card enters viewport */
@media (prefers-reduced-motion: no-preference) {
  .cup-panel.cup-will-reveal {
    opacity: 0;
    transform: translateY(28px);
  }
}

/* Featured: DRINK — horizontal layout */
.cup-panel--featured {
  flex-direction: row;
  align-items: stretch;
  margin-bottom: 2rem;
  min-height: 340px;
}

.cup-panel--featured .cup-char-wrap {
    flex-shrink: 0;
    width: 200px;
    background: linear-gradient(135deg, #f2dbb0, #d890e8);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0 1rem 0.5rem;
    border-right: 3px solid var(--cup-dark);
}

.cup-panel--featured .cup-char-wrap .cup-char-svg { width: 160px; height: auto; }

.cup-panel--featured .cup-panel-content { flex: 1; padding: 1.5rem; }

/* Extras panel: spans full width */
.cup-panel--extras {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
}
.cup-panel-content--row {
  display: flex;
  flex: 1;
  gap: 0;
}
.cup-extras-col {
  flex: 1;
  padding: 1.25rem 1.5rem;
}
.cup-extras-divider {
  display: flex;
  align-items: center;
  padding: 0 0.5rem;
  font-size: 1.4rem;
  color: var(--cup-red);
  border-left: 2px dashed rgba(26,14,8,.2);
  border-right: 2px dashed rgba(26,14,8,.2);
}
.cup-extras-decos {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  background: linear-gradient(135deg, #f2dbb0, #e8cc90);
  border-left: 3px solid var(--cup-dark);
  min-width: 110px;
}
.cup-mini-char { width: 60px; height: auto; }

/* Grid for food sections */
.cup-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

/* Panel content (shared) */
.cup-panel-content {
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex: 1;
    background: linear-gradient(135deg, #fef6e4, #e9c2f2);
}

/* Character wrap (smaller panels) */
.cup-char-wrap--sm {
  background: linear-gradient(135deg, #f2dbb0, #e8cc90);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0.75rem 1rem 0.25rem;
  border-bottom: 3px solid var(--cup-dark);
}
.cup-char-wrap--sm .cup-char-svg { width: 110px; height: auto; }

/* Micro deco character (michetta panel) */
.cup-micro-deco {
  display: flex;
  justify-content: flex-end;
  padding: 0.5rem 1rem 1rem;
}
.cup-micro-deco svg { width: 80px; height: auto; }

/* ─ Category labels ─ */
.cup-cat-label {
  display: inline-flex;
  align-items: center;
}
.cup-cat-label span {
  font-family: var(--font-d);
  font-size: 1.2rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  background: var(--cup-red);
  color: #fff;
  padding: 0.25rem 0.9rem;
  border: 2.5px solid var(--cup-dark);
  box-shadow: 3px 3px 0 var(--cup-dark);
}
.cup-cat-label--blue span  { background: var(--cup-blue); }
.cup-cat-label--green span { background: var(--cup-green); }
.cup-cat-label--gold span  { background: var(--cup-yellow); color: var(--cup-dark); }

.cup-cat-note {
  font-size: 0.8rem;
  font-style: italic;
  color: rgba(26,14,8,.6);
  margin-top: -0.25rem;
  line-height: 1.4;
}

/* Fixed price badge */
.cup-fixed-price {
  font-family: var(--font-d);
  font-size: 1.6rem;
  color: var(--cup-red);
  letter-spacing: 0.05em;
}
.cup-fixed-price span {
  font-size: 0.85rem;
  font-family: var(--font-b);
  color: rgba(26,14,8,.5);
  margin-left: 0.25rem;
}

/* ─ Menu items ─ */
.cup-items { list-style: none; }

.cup-item {
  padding: 0.5rem 0;
  border-bottom: 2px dotted rgba(26,14,8,.2);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.cup-item:last-child { border-bottom: none; }

.cup-item-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.cup-item-name {
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cup-dark);
  line-height: 1.3;
}
.cup-item-name--extra { color: rgba(26,14,8,.5); font-style: italic; }

.cup-item-price {
  font-family: var(--font-d);
  font-size: 1rem;
  color: var(--cup-red);
  letter-spacing: 0.04em;
  flex-shrink: 0;
  white-space: nowrap;
}
.cup-item-price--extra { color: rgba(26,14,8,.4); font-size: 0.9rem; }
.cup-item-price::before { content: '€ '; font-size: 0.75em; }

.cup-item-desc {
  font-size: 0.75rem;
  color: rgba(26,14,8,.55);
  font-style: italic;
  line-height: 1.4;
}

/* 2-column items grid */
.cup-items--2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1.5rem;
}
.cup-items--2col .cup-item { border-bottom: 2px dotted rgba(26,14,8,.15); }

/* Tag pills (for Scarpetta variants) */
.cup-items--tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-top: 0.25rem;
}
.cup-items--tags li { border: none; padding: 0; }
.cup-tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25rem 0.7rem;
  background: transparent;
  border: 2px solid var(--cup-dark);
  border-radius: 3px;
  box-shadow: 2px 2px 0 var(--cup-dark);
  transition: background var(--trans), color var(--trans);
}
.cup-tag:hover { background: var(--cup-dark); color: var(--cup-bg); }

/* ─ Lavagna note ─ */
.cup-lavagna {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding: 1rem 1.5rem;
  background: var(--cup-dark);
  border-radius: 6px;
  box-shadow: 4px 4px 0 rgba(26,14,8,.4);
}
.cup-lavagna p {
  font-family: var(--font-d);
  font-size: 1rem;
  letter-spacing: 0.1em;
  color: var(--cup-bg);
  text-align: center;
}
.cup-lavagna-icon { width: 28px; height: 28px; flex-shrink: 0; }

/* 10b. Menu Teaser (home page)
──────────────────────────────── */
.menu-teaser-section { background: var(--bg); }

.menu-teaser {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
  padding: 1rem 0 2rem;
}

.teaser-chars {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(-10px, -1vw, 0px);
  position: relative;
}

.teaser-char {
  width: clamp(80px, 12vw, 150px);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.6));
  transition: transform 0.4s ease;
}
.teaser-char:hover { transform: translateY(-8px) rotate(-2deg); }

/* Slight overlap and height stagger */
.tc-1 { transform: rotate(-6deg)  translateX(8px);  z-index: 1; }
.tc-2 { transform: rotate(3deg)   translateX(-4px); z-index: 4; height: clamp(100px, 16vw, 190px); }
.tc-3 { transform: rotate(-2deg)  translateX(4px);  z-index: 3; }
.tc-4 { transform: rotate(5deg)   translateX(-8px); z-index: 2; height: clamp(90px, 14vw, 170px); }

.tc-1:hover { transform: rotate(-6deg)  translateX(8px)  translateY(-10px); }
.tc-2:hover { transform: rotate(3deg)   translateX(-4px) translateY(-10px); }
.tc-3:hover { transform: rotate(-2deg)  translateX(4px)  translateY(-10px); }
.tc-4:hover { transform: rotate(5deg)   translateX(-8px) translateY(-10px); }

@media (prefers-reduced-motion: reduce) {
  .teaser-char, .teaser-char:hover { transform: none; }
}

.teaser-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}

.teaser-labels {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.teaser-label {
  font-family: var(--font-d);
  font-size: clamp(1.4rem, 3vw, 2rem);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--cream);
}
.teaser-sep {
  font-size: 1.8rem;
  color: var(--magenta);
  text-shadow: 0 0 12px var(--magenta-g);
}
.teaser-desc {
  font-size: 0.9rem;
  color: var(--cream-dim);
  letter-spacing: 0.04em;
  max-width: 420px;
  line-height: 1.7;
}
.teaser-cta {
  margin-top: 0.5rem;
}

/* 10c. Menu page layout
────────────────────────── */
.menu-page body { background: var(--cup-bg); }

.menu-page-main {
  padding-top: 68px; /* header height */
  padding-bottom: 4rem;
  min-height: 100vh;
}

/* Back link in header */
.nav-back {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cream-dim);
  transition: color var(--trans);
}
.nav-back:hover { color: var(--magenta); }
.nav-back span { display: none; }
@media (min-width: 500px) { .nav-back span { display: inline; } }

/* Page title block */
.cup-page-title-block {
  text-align: center;
  padding: 2.5rem 0 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}
.cup-page-brand {
  font-family: var(--font-b);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--cup-dark);
  background: var(--cup-dark);
  color: var(--cup-bg);
  padding: 0.2rem 1rem;
  border-radius: 2px;
}
.cup-page-heading {
  font-family: var(--font-d);
  font-size: clamp(2.6rem, 6vw, 4.5rem);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--cup-dark);
  line-height: 1;
  text-shadow: 3px 3px 0 rgba(26,14,8,.12);
}
.cup-page-divider { max-width: 320px; width: 100%; }
.cup-page-divider svg { width: 100%; height: auto; }

/* Mega section headers (À BOIR / À MANGER) */
.cup-mega-section {
  margin-bottom: 3rem;
}

.cup-mega-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1.75rem;
}
.cup-mega-title h2 {
  font-family: var(--font-d);
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  padding: 0.35rem 1.8rem;
  border: 3.5px solid var(--cup-dark);
  box-shadow: 5px 5px 0 var(--cup-dark);
}
.cup-mega-title--boir  h2 { background: var(--cup-blue);  }
.cup-mega-title--manger h2 { background: var(--cup-red); }

.cup-mega-star { width: 36px; height: 36px; flex-shrink: 0; }

/* Section divider (between À BOIR and À MANGER) */
.cup-section-divider {
  text-align: center;
  margin: 2rem 0 3rem;
  overflow: visible;
}
.cup-section-divider svg { width: 100%; max-width: 900px; height: 60px; }

/* PNG character images */
.cup-char-wrap--png {
    background: linear-gradient(135deg, #f2dbb0, #d890e8);
}

.cup-char-img {
  width: 100%;
  height: 100%;
  max-height: 200px;
  object-fit: contain;
  object-position: bottom center;
  display: block;
}

/* Featured panel for À BOIR: taller char area */
.cup-panel--featured .cup-char-wrap--png {
  width: 220px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0.5rem 1rem 0;
}
.cup-panel--featured .cup-char-wrap--png .cup-char-img {
    max-height: 288px;
    object-position: center;
}

/* Small panels with PNG */
.cup-char-wrap--sm.cup-char-wrap--png {
  padding: 0.5rem 1rem 0;
  min-height: 160px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.cup-char-wrap--sm.cup-char-wrap--png .cup-char-img {
  max-height: 160px;
}

/* Pinchos panel char-wrap width */
.cup-panel--pinchos .cup-char-wrap { width: 180px; }

/* Pinchos item: larger text (it's a simple price list) */
.cup-items--pinchos { display: flex; flex-direction: column; gap: 0; }
.cup-item--pincho .cup-item-name { font-size: 1rem; }
.cup-item--pincho .cup-item-price { font-size: 1.2rem; }

/* Grid for menu page food */
.cup-grid--menu { grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 1.25rem; }

/* Dessert: spans 2 cols, horizontal layout */
.cup-panel--dessert {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: stretch;
}
.cup-char-wrap--dessert {
  width: 180px;
  flex-shrink: 0;
  border-right: 3px solid var(--cup-dark);
  border-bottom: none !important;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0.5rem 1.5rem 0;
}
.cup-char-wrap--dessert .cup-char-img { max-height: 200px; }

/* Menu page footer */
.menu-page-footer .footer-inner { gap: 0.75rem; }

/* 11. Eventi
──────────── */
#eventi {
  background: var(--bg-alt);
  text-align: center;
}

.eventi-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

.eventi-dots { gap: 14px; }
.eventi-dots .mdot { opacity: .6; }

.eventi-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255, 45, 155, 0.2);
  border-radius: 10px;
  padding: 2.5rem 3rem;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  box-shadow: 0 0 40px rgba(255,45,155,.06);
}
.eventi-icon {
  width: 52px; height: 52px;
  color: var(--yellow);
  margin-bottom: 0.5rem;
}
.eventi-msg {
  font-family: var(--font-d);
  font-size: 1.3rem;
  letter-spacing: 0.08em;
  color: var(--cream);
}
.eventi-hint {
  font-size: 0.85rem;
  color: var(--cream-dim);
  letter-spacing: 0.05em;
}

/* ─── Instagram grid ─── */
.ig-profile-header {
  text-align: center;
  margin-bottom: 2rem;
}
.ig-handle {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--cream);
  text-decoration: none;
  font-family: var(--font-b);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  padding: 0.55rem 1.5rem;
  border: 1.5px solid rgba(245,230,200,.18);
  border-radius: 50px;
  transition: border-color 0.22s, color 0.22s, box-shadow 0.22s;
}
.ig-handle:hover,
.ig-handle:focus-visible {
  border-color: var(--magenta);
  color: var(--magenta);
  outline: none;
  box-shadow: 0 0 14px rgba(255,45,155,.25);
}
.ig-handle svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  flex-shrink: 0;
}

.ig-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  margin-bottom: 2.5rem;
}
.ig-frame {
  border-radius: 10px;
  overflow: hidden;
  background: #0f0f0f;
  border: 1.5px solid rgba(245,230,200,.1);
  box-shadow: 0 4px 20px rgba(0,0,0,.55);
  transition: transform 0.22s cubic-bezier(.22,.61,.36,1),
              border-color 0.22s ease,
              box-shadow 0.22s ease;
  min-height: 220px;
  display: flex;
  flex-direction: column;
}
.ig-frame:hover {
  transform: translateY(-5px);
  border-color: rgba(255,45,155,.45);
  box-shadow: 0 0 0 1px rgba(255,45,155,.25), 0 10px 36px rgba(255,45,155,.12);
}
/* Force Instagram embeds to fill each frame */
.ig-frame .instagram-media {
  max-width: 100% !important;
  min-width: unset !important;
  width: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  flex: 1;
}
.ig-cta {
  text-align: center;
  margin-top: 0.5rem;
}
.ig-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
@media (max-width: 700px) {
  .ig-grid { grid-template-columns: 1fr; }
}
@media (min-width: 701px) and (max-width: 1024px) {
  .ig-grid { grid-template-columns: repeat(2, 1fr); }
}

/* 12. Orari
─────────── */
#orari { background: var(--bg); }

.orari-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
}

.orari-icon svg { width: 56px; height: 56px; }

.orari-table {
  width: 100%;
  max-width: 480px;
  border-collapse: collapse;
}

.orari-row th, .orari-row td {
  padding: 0.9rem 1.2rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.orari-row th {
  font-weight: 400;
  font-family: var(--font-b);
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-align: left;
  color: var(--cream-dim);
  text-transform: uppercase;
  width: 50%;
}
.orari-row td {
  font-family: var(--font-d);
  font-size: 1.05rem;
  letter-spacing: 0.05em;
  color: var(--cream);
  text-align: right;
}
.orari-row.closed th,
.orari-row.closed td { opacity: .45; }

.chiuso-badge {
  font-family: var(--font-b);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cream-dim);
}

.orari-row.highlight td {
  color: var(--magenta);
  text-shadow: 0 0 12px var(--magenta-g);
}
.orari-row.highlight th { color: var(--cream); }

.orari-row:last-child th,
.orari-row:last-child td { border-bottom: none; }

/* 13. Dove siamo
──────────────── */
#dove { background: var(--bg-alt); }

.dove-layout {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 3rem;
  align-items: start;
}

.dove-info-col {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.pin-icon svg { width: 40px; height: 50px; }

.dove-address {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.address-name {
  font-family: var(--font-d);
  font-size: 1.3rem;
  letter-spacing: 0.1em;
  color: var(--cream);
}
.address-street,
.address-city {
  font-size: 0.95rem;
  color: var(--cream-dim);
  letter-spacing: 0.03em;
}

.esterno-wrap {
  border-radius: var(--rad);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  margin-top: 0.5rem;
}
.esterno-photo {
  width: 100%;
  height: 200px;
  object-fit: cover;
  filter: brightness(.9);
  transition: filter 0.3s ease, transform 0.5s ease;
}
.esterno-wrap:hover .esterno-photo { filter: brightness(1); transform: scale(1.04); }

.map-frame {
  border-radius: var(--rad);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 8px 40px rgba(0,0,0,.5);
}
.map-frame iframe { display: block; min-height: 380px; }

/* 14. Contatti
───────────── */
#contatti { background: var(--bg); text-align: center; }

.contatti-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
}

.phone-link {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: 1.2rem 2rem;
  background: rgba(255,45,155,.08);
  border: 1px solid rgba(255,45,155,.3);
  border-radius: 12px;
  transition: var(--trans);
}
.phone-link:hover, .phone-link:focus-visible {
  background: rgba(255,45,155,.16);
  border-color: var(--magenta);
  box-shadow: 0 0 30px var(--magenta-g);
  transform: translateY(-2px);
}
.phone-icon { width: 52px; height: 52px; flex-shrink: 0; }
.phone-number {
  font-family: var(--font-d);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  letter-spacing: 0.12em;
  color: var(--cream);
}

.contatti-social {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}
.social-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--cream-dim);
}
.social-links {
  display: flex;
  gap: 1rem;
}
.social-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 6px;
  font-size: 0.85rem;
  color: var(--cream-dim);
  transition: var(--trans);
}
.social-link svg { width: 18px; height: 18px; }
.social-link:hover, .social-link:focus-visible {
  color: var(--magenta);
  border-color: var(--magenta);
  background: rgba(255,45,155,.06);
}

/* 15. Prenotazioni
────────────────── */
.reserv-home {
  background: var(--bg-alt);
}

.reserv-home-card {
  border: 1.5px solid rgba(255, 45, 155, 0.28);
  border-radius: 10px;
  background: linear-gradient(140deg, rgba(255, 45, 155, 0.08), rgba(0, 229, 255, 0.05));
  box-shadow: 0 0 40px rgba(0,0,0,.35);
  text-align: center;
  padding: 2.8rem 2rem;
}

.reserv-home-eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--magenta);
  margin-bottom: 0.45rem;
}

.reserv-home-card h2 {
  margin-bottom: 0.7rem;
}

.reserv-home-text {
  max-width: 560px;
  margin: 0 auto 1.35rem;
  color: var(--cream-dim);
}

.reservations-main {
  background: #f7dbfd;
}

.reservations-wrap {
  position: relative;
  z-index: 1;
  padding-bottom: 2rem;
}

.reserv-subtitle {
  margin-top: 0.3rem;
  font-size: 0.95rem;
  color: rgba(26,14,8,.72);
}

.reserv-card {
  margin-bottom: 1.25rem;
  padding-top: 0;
}

.reserv-card-body {
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.reserv-section {
  border: 1px solid rgba(0,0,0,.09);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(0,0,0,.06), 0 0 0 0.5px rgba(0,0,0,.04);
}

.reserv-section-title {
  margin: 0;
  padding: 1rem 1.2rem 0.3rem;
  font-size: 0.72rem;
  font-family: var(--font-s);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6e6e73;
}

.reserv-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 1.2rem;
  border-bottom: 3px solid var(--cup-dark);
  background: linear-gradient(135deg, #f2dbb0, #d890e8);
}

.reserv-panel-head h2 {
  font-size: clamp(1.25rem, 2.4vw, 1.8rem);
  letter-spacing: 0.08em;
  color: var(--cup-dark);
  text-transform: uppercase;
}

.reserv-refresh {
  border: 2px solid var(--cup-dark);
  background: #fff;
  color: var(--cup-dark);
  font-family: var(--font-b);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 0.45rem 0.9rem;
  cursor: pointer;
  transition: background var(--trans), color var(--trans), transform var(--trans);
}

.reserv-refresh:hover,
.reserv-refresh:focus-visible {
  background: var(--cup-dark);
  color: var(--cup-cream);
  transform: translateY(-1px);
}

.reserv-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.85rem;
  padding: 1rem 1.2rem 1.2rem;
}

.reserv-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.reserv-field span {
  font-family: var(--font-d);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.85rem;
  color: var(--cup-dark);
}

.reserv-field input,
.reserv-field select,
.reserv-field textarea {
  width: 100%;
  border: 2px solid var(--cup-dark);
  border-radius: 4px;
  background: #fff;
  font-family: var(--font-b);
  font-size: 0.92rem;
  color: var(--cup-dark);
  padding: 0.55rem 0.65rem;
}

.reserv-field textarea {
  resize: vertical;
  min-height: 84px;
}

.reserv-summary {
  padding: 0 1.2rem 1.2rem;
  color: rgba(26,14,8,.8);
  font-size: 0.9rem;
}

.reserv-panel-head--map {
  border-bottom: 0;
  background: transparent;
  padding-bottom: 0;
  padding: 0;
  align-items: flex-start;
}

.reserv-map-note {
  font-size: 0.78rem;
  color: rgba(29,29,31,.5);
  letter-spacing: 0.04em;
  font-family: var(--font-s);
}

.reserv-legend {
  display: flex;
  gap: 0.45rem;
  padding: 0.85rem 1.2rem 1rem;
  flex-wrap: wrap;
}

.reserv-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  background: rgba(29,29,31,.05);
  border: 1px solid rgba(29,29,31,.10);
  border-radius: 20px;
  padding: 0.18rem 0.72rem 0.18rem 0.52rem;
  font-size: 0.77rem;
  font-family: var(--font-s);
  color: #3a3a3c;
  letter-spacing: 0.02em;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.dot.free     { background: #34c759; }
.dot.busy     { background: #ff3b30; }
.dot.selected { background: #0071e3; }

.reserv-map {
  position: relative;
  margin: 0 auto 1.2rem;
  max-width: min(1000px, calc(100% - 2.4rem));
  background: #f5f5f7;
  border: 1px solid rgba(0,0,0,.09);
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  box-shadow:
    0 1px 0 rgba(255,255,255,.8) inset,
    0 4px 24px rgba(0,0,0,.08),
    0 1px 4px rgba(0,0,0,.05);
}

/* ── SVG floor plan ── */
.rmap-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.rmap-elem { pointer-events: none; }

/* Tables */
.rmap-tbl { cursor: default; }
.rmap-tbl-free,
.rmap-tbl-selected { cursor: pointer; }
.rmap-tbl-busy { cursor: not-allowed; }

.rmap-tbl-free .rmap-tbl-rect {
  fill: #ffffff;
  stroke: #34c759;
  stroke-width: 0.7;
}
.rmap-tbl-free:hover .rmap-tbl-rect,
.rmap-tbl-free:focus-visible .rmap-tbl-rect {
  fill: #f0faf4;
  stroke: #28a745;
  stroke-width: 0.8;
  filter: drop-shadow(0 0 1.8px rgba(52,199,89,.3));
}

.rmap-tbl-busy .rmap-tbl-rect {
  fill: #fff8f8;
  stroke: #ff3b30;
  stroke-width: 0.7;
  opacity: 0.88;
}

.rmap-tbl-selected .rmap-tbl-rect {
  fill: #0071e3;
  stroke: #005bbf;
  stroke-width: 0.7;
  filter: drop-shadow(0 0 2.5px rgba(0,113,227,.38));
}
.rmap-tbl-selected:hover .rmap-tbl-rect,
.rmap-tbl-selected:focus-visible .rmap-tbl-rect {
  fill: #0077ed;
  filter: drop-shadow(0 0 4px rgba(0,113,227,.55));
}

.rmap-tbl:focus-visible { outline: none; }

.rmap-tid  { fill: #1d1d1f; }
.rmap-tcap { fill: rgba(29,29,31,.48); }
.rmap-tbl-selected .rmap-tid  { fill: #ffffff; }
.rmap-tbl-selected .rmap-tcap { fill: rgba(255,255,255,.68); }
.rmap-tbl-busy .rmap-tid      { fill: #8c1a1a; }
.rmap-tbl-busy .rmap-tcap     { fill: rgba(140,26,26,.6); }

.table-chip {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: 3px solid var(--cup-dark);
  background: #2f8e4f;
  color: #fff;
  box-shadow: 3px 3px 0 var(--cup-dark);
  cursor: pointer;
  transition: transform var(--trans), box-shadow var(--trans), background var(--trans);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
}

.table-chip .table-id {
  font-family: var(--font-d);
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.table-chip .table-cap {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.table-chip.free:hover,
.table-chip.free:focus-visible {
  transform: translate(-50%, -54%);
  box-shadow: 5px 6px 0 var(--cup-dark);
}

.table-chip.busy {
  background: #c5281c;
  opacity: 0.88;
  cursor: not-allowed;
  box-shadow: 2px 2px 0 var(--cup-dark);
}

.table-chip.selected {
  background: #2a6aaa;
  box-shadow: 0 0 0 4px rgba(42,106,170,.3), 4px 5px 0 var(--cup-dark);
}

.reserv-form {
  padding: 0.8rem 1.2rem 1.2rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.reserv-selected {
  grid-column: 1 / -1;
  font-size: 0.95rem;
  color: rgba(26,14,8,.82);
}

.reserv-selected strong {
  color: var(--cup-red);
}

.reserv-form .btn {
  grid-column: 1 / -1;
  justify-content: center;
  margin-top: 0.2rem;
}

.reserv-status {
  grid-column: 1 / -1;
  font-size: 0.86rem;
  color: #2f8e4f;
  min-height: 1.2em;
}

.reserv-status--error {
  color: #c5281c;
}

/* 15. Footer
──────────── */
footer {
  background: #060606;
  border-top: 1px solid rgba(255,255,255,.06);
  padding: 2rem 1.5rem;
}

.footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  text-align: center;
}

.footer-brand {
  font-family: var(--font-d);
  font-size: 1.2rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--cream);
}
.footer-address {
  font-size: 0.8rem;
  color: var(--cream-dim);
  letter-spacing: 0.04em;
}
.footer-address a { transition: color var(--trans); }
.footer-address a:hover { color: var(--magenta); }
.footer-deco { display: flex; gap: 8px; margin-top: 0.25rem; }

/* 16. FAB (mobile) */
.fab-call {
  display: none;
  position: fixed;
  bottom: 24px;
  right: 20px;
  z-index: 200;
  width: 56px; height: 56px;
  background: var(--magenta);
  color: #fff;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 24px var(--magenta-g), 0 4px 16px rgba(0,0,0,.5);
  transition: var(--trans);
}
.fab-call svg { width: 24px; height: 24px; }
.fab-call:hover, .fab-call:focus-visible {
  background: var(--magenta-d);
  transform: scale(1.08);
  box-shadow: 0 0 40px var(--magenta-g), 0 8px 24px rgba(0,0,0,.6);
}

/* 17. Scroll reveal
──────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* 18. Responsive
──────────────── */
@media (max-width: 900px) {
  .bar-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .bar-photos-col { display: flex; gap: 1rem; }
  .bar-photo-wrap { flex: 1; }
  .bar-photo-offset { margin-top: 0; }
  .bar-photo { height: 200px; }

  .dove-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  /* Teaser home */
  .teaser-char { width: clamp(70px, 10vw, 130px); }
  .tc-2 { height: clamp(90px, 14vw, 160px); }
  .tc-4 { height: clamp(80px, 12vw, 145px); }

  /* Cuphead menu */
  .cup-panel--featured {
    flex-direction: column;
  }
  .cup-panel--featured .cup-char-wrap,
  .cup-panel--featured .cup-char-wrap--png {
    width: 100%;
    border-right: none;
    border-bottom: 3px solid var(--cup-dark);
    padding: 1rem 1rem 0;
    min-height: 160px;
  }
  .cup-panel--featured .cup-char-wrap--png .cup-char-img { max-height: 180px; }
  .cup-panel--featured .cup-char-wrap .cup-char-svg { width: 120px; }
  .cup-items--2col { grid-template-columns: 1fr; }
  /* Dessert: stack on smaller screens */
  .cup-panel--dessert { flex-direction: column; grid-column: 1; }
  .cup-char-wrap--dessert { width: 100%; border-right: none; border-bottom: 3px solid var(--cup-dark); }
  /* Menu page grid */
  .cup-grid--menu { grid-template-columns: 1fr; }
  .cup-panel--dessert { grid-column: 1; }
  /* Old home menu extras (kept for compatibility) */
  .cup-panel--extras { flex-direction: column; }
  .cup-panel-content--row { flex-direction: column; }
  .cup-extras-divider { border-left: none; border-right: none; border-top: 2px dashed rgba(26,14,8,.2); border-bottom: 2px dashed rgba(26,14,8,.2); padding: 0.5rem; }
  .cup-extras-decos { border-left: none; border-top: 3px solid var(--cup-dark); flex-direction: row; min-width: unset; }

  .reserv-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .reserv-form {
    grid-template-columns: 1fr;
  }

  .reserv-card-body {
    padding: 1rem;
  }

}


.reserv-admin-entry {
  margin-bottom: 1.25rem;
}

.reserv-admin-entry-body {
  padding: 1rem 1.2rem 1.2rem;
}

.reserv-admin-entry-text {
  color: rgba(26,14,8,.82);
  margin: 0 0 0.8rem;
}

.reserv-admin-entry-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
  align-items: end;
}

.reserv-admin-entry-actions {
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
}

.adm-kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
}

.adm-kpi-card {
  border: 2px solid var(--cup-dark);
  border-radius: 8px;
  background: #fff;
  padding: 0.7rem 0.8rem;
}

.adm-kpi-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: rgba(26,14,8,.74);
}

.adm-kpi-value {
  font-size: 1.3rem;
  font-family: var(--font-d);
  color: var(--cup-dark);
}

.adm-day-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.adm-day-row {
  border: 2px solid rgba(26,14,8,.2);
  border-radius: 8px;
  background: rgba(255,255,255,.55);
  padding: 0.8rem;
}

.adm-day-row-top {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  align-items: center;
}

.adm-day-row-top h3 {
  margin: 0;
  font-size: 1rem;
  letter-spacing: 0.04em;
}

.adm-time-badge {
  display: inline-block;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 2px solid var(--cup-dark);
  border-radius: 4px;
  padding: 0.2rem 0.45rem;
  background: #fff;
}

.adm-status-active {
  background: #2f8e4f;
  color: #fff;
}

.adm-status-upcoming {
  background: #2a6aaa;
  color: #fff;
}

.adm-status-complete {
  background: #7c5c45;
  color: #fff;
}

.adm-day-row-details,
.adm-day-row-notes,
.adm-day-row-meta {
  margin: 0.35rem 0 0;
  font-size: 0.9rem;
  color: rgba(26,14,8,.83);
}

.adm-day-row-meta {
  font-size: 0.8rem;
  color: rgba(26,14,8,.67);
}

.adm-overview-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.55rem;
}

.adm-overview-row {
  text-align: left;
  border: 2px solid var(--cup-dark);
  border-radius: 6px;
  background: #fff;
  color: var(--cup-dark);
  padding: 0.6rem 0.75rem;
  cursor: pointer;
  font-family: var(--font-b);
}

.adm-overview-row:hover,
.adm-overview-row:focus-visible {
  background: #f3e6c8;
}

@media (max-width: 680px) {
  section { padding: 3.5rem 0; }
  /* Teaser chars: 2 visible on small mobile */
  .tc-4 { height: 105px; }
  .tc-1, .tc-3 { width: 100px; }
  .tc-2 {height: 124px;}
  
  /* Cuphead mobile */
  .cup-grid { grid-template-columns: 1fr; }
  .cup-grid--menu { grid-template-columns: 1fr; }
  .cup-panel--extras { grid-column: 1; }
  .cup-mega-title h2 { font-size: 1.5rem; padding: 0.3rem 1rem; }
  .cup-mega-star { width: 26px; height: 26px; }
  .cup-page-heading { font-size: 2.2rem; }

  .nav-list {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(10,10,10,.97);
    backdrop-filter: blur(16px);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    z-index: 99;
  }
  .nav-list.open { display: flex; }
  .nav-link { font-size: 1.1rem; padding: 0.85rem 2rem; }
  .nav-cta { font-size: 1rem; margin-top: 1rem; }

  .nav-toggle { display: flex; position: relative; z-index: 101; }

  .fab-call { display: flex; }

  .food-photos { grid-template-columns: 1fr; }
  .food-photos .food-photo-wrap:last-child { grid-column: 1; }
  .food-photo-wrap img { height: 200px; }

  .bar-photos-col { flex-direction: column; }
  .bar-photo { height: 220px; }

  .orari-table { max-width: 100%; }
  .orari-row th, .orari-row td { padding: 0.7rem 0.75rem; }

  .eventi-card { padding: 2rem 1.5rem; }

  .hero-mascot { width: 120px; right: 12px; }

  .phone-link { flex-direction: column; gap: 0.5rem; padding: 1rem 1.5rem; }
  .phone-number { font-size: 1.4rem; }

  .reserv-home-card {
    padding: 2rem 1.2rem;
  }

  .reserv-panel-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .reserv-grid {
    grid-template-columns: 1fr;
    padding: 1rem;
  }

  .reserv-section-title {
    padding: 0.9rem 1rem 0.2rem;
  }

  .reserv-summary,
  .reserv-legend {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .reserv-map {
    margin: 0 1rem 1rem;
  }

  .reserv-form {
    padding: 0.5rem 1rem 1rem;
  }

  .table-chip {
    width: 72px;
    height: 72px;
  }

  .reserv-admin-entry-form {
    grid-template-columns: 1fr;
  }

  .adm-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .adm-day-row-top {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 420px) {
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { justify-content: center; }
  .hero-divider svg { max-width: 240px; }
}