/* =========================================================================
   R.P's Café — Stylesheet
   Structure:
     1. Fonts & Design Tokens
     2. Reset & Base
     3. Layout / Utilities
     4. Buttons & Form Controls
     5. Navbar
     6. Skeleton / Lazy Media
     7. Hero
     8. Section headers / eyebrows
     9. Cards (favourites, menu, values, team, gallery)
    10. About page bits (stats)
    11. Contact page (FAQ accordion, contact form, info list)
    12. Order page (filters, cart drawer, toast, modal)
    13. Footer
    14. Reveal / motion helper classes
    15. Responsive
   ========================================================================= */

/* ---------- 1. Fonts & Design Tokens ---------- */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,500&family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

:root{
  /* Warm café palette */
  --cream-50:#FBF6EE;
  --cream-100:#F5EBDA;
  --cream-200:#EEE0C6;
  --espresso-900:#2A1D15;
  --espresso-700:#3E2A1D;
  --espresso-500:#5B4636;
  --terracotta-600:#BC4B2C;
  --terracotta-700:#9C3B21;
  --terracotta-100:#F4D9C9;
  --gold-500:#C9A66B;
  --gold-300:#E6D3AC;
  --sage-600:#6B7A52;
  --sage-100:#E4E9D8;
  --cream-rgb:251,246,238;

  --color-bg: var(--cream-50);
  --color-bg-alt: var(--cream-100);
  --color-surface: #FFFFFF;
  --color-ink: var(--espresso-900);
  --color-ink-soft: var(--espresso-500);
  --color-primary: var(--terracotta-600);
  --color-primary-dark: var(--terracotta-700);
  --color-accent: var(--gold-500);
  --color-sage: var(--sage-600);
  --color-border: rgba(42,29,21,0.12);
  --color-border-soft: rgba(42,29,21,0.07);

  --font-display: 'Fraunces', 'Iowan Old Style', serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .875rem;
  --space-4: 1.25rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4.5rem;
  --space-8: 6.5rem;

  --shadow-sm: 0 2px 10px rgba(42,29,21,.06);
  --shadow-md: 0 12px 32px -8px rgba(42,29,21,.18);
  --shadow-lg: 0 30px 60px -20px rgba(42,29,21,.30);

  --container: 1240px;
  --ease-out: cubic-bezier(.16,1,.3,1);
  --header-h: 84px;
}

/* ---------- 2. Reset & Base ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
body{
  margin:0;
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font: inherit; cursor:pointer; }
input, textarea, select{ font: inherit; }
h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  margin: 0 0 .5em;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}
p{ margin: 0 0 1em; }
::selection{ background: var(--terracotta-100); color: var(--color-primary-dark); }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ---------- 3. Layout / Utilities ---------- */
.container{ max-width: var(--container); margin-inline:auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); }
.section{ padding-block: clamp(3.5rem, 8vw, var(--space-8)); }
.section-alt{ background: var(--color-bg-alt); }
.grid{ display:grid; gap: var(--space-5); }
.eyebrow{
  display:inline-flex; align-items:center; gap:.5em;
  font-family: var(--font-body); font-weight:700; font-size:.78rem;
  letter-spacing:.16em; text-transform:uppercase; color: var(--color-primary);
  margin-bottom: var(--space-3);
}
.eyebrow::before{ content:""; width:22px; height:2px; background: var(--color-primary); border-radius:2px; }
.section-head{ max-width: 640px; margin-bottom: var(--space-6); }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head p{ color: var(--color-ink-soft); font-size: 1.05rem; }
.text-balance{ text-wrap: balance; }
.visually-hidden{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:1rem; top:-4rem; z-index:200; background:var(--color-ink);
  color:#fff; padding:.75rem 1.25rem; border-radius: var(--radius-sm); transition: top .25s var(--ease-out);
}
.skip-link:focus{ top: 1rem; }

/* ---------- 4. Buttons & Form Controls ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  padding: .95em 1.7em; border-radius: var(--radius-pill);
  font-weight:600; font-size:.95rem; letter-spacing:.01em;
  border:1px solid transparent; white-space:nowrap;
  transition: transform .35s var(--ease-out), scale .35s var(--ease-out), box-shadow .35s var(--ease-out), background-color .25s, color .25s, border-color .25s;
  will-change: transform;
  cursor: pointer;
}
/* `scale`/`translate` are standalone transform properties (not the
   `transform` shorthand) so the hover "lift" (transform: translateY) and
   the press-down "squash" (scale) can animate independently without one
   clobbering the other. */
.btn:hover{ scale: 1.03; }
.btn:active{ scale: .96; }
.btn-primary{ background: var(--color-primary); color:#fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover{ background: var(--color-primary-dark); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.btn-outline{ background: transparent; color: var(--color-ink); border-color: var(--color-border); }
.btn-outline:hover{ border-color: var(--color-ink); background: rgba(42,29,21,.04); transform: translateY(-2px); }
.btn-ghost{ background: rgba(255,255,255,.14); color:#fff; border-color: rgba(255,255,255,.4); backdrop-filter: blur(6px); }
.btn-ghost:hover{ background: rgba(255,255,255,.24); transform: translateY(-2px); }
.btn-sm{ padding:.6em 1.2em; font-size:.85rem; }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }
.btn[disabled]:hover{ scale:1; transform:none; box-shadow: var(--shadow-sm); }

.field{ margin-bottom: var(--space-4); text-align:left; }
.field label{ display:block; font-weight:600; font-size:.85rem; margin-bottom:.5em; color: var(--color-ink); }
.field input, .field textarea{
  width:100%; padding: .9em 1.05em; border-radius: var(--radius-sm);
  border:1.5px solid var(--color-border); background: var(--color-surface);
  color: var(--color-ink); transition: border-color .25s, box-shadow .25s;
}
.field input:focus, .field textarea:focus{
  outline:none; border-color: var(--color-primary); box-shadow: 0 0 0 4px var(--terracotta-100);
}
.field textarea{ resize: vertical; min-height: 120px; }
.field-error{ color:#B3261E; font-size:.8rem; margin-top:.35em; min-height:1em; }

/* ---------- 5. Navbar ---------- */
.site-header{
  position: sticky; top:0; z-index:100; width:100%;
  padding-block: 1.1rem;
  transition: padding .35s var(--ease-out), background-color .35s var(--ease-out), box-shadow .35s var(--ease-out);
  background: rgba(251,246,238,.7);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled{
  padding-block: .65rem; background: rgba(251,246,238,.92);
  border-bottom-color: var(--color-border-soft); box-shadow: 0 8px 24px -16px rgba(42,29,21,.25);
}
.nav{ display:flex; align-items:center; justify-content:space-between; gap: var(--space-4); }
.brand{ display:flex; align-items:center; gap:.65rem; font-family: var(--font-display); font-weight:600; font-size:1.28rem; color: var(--color-ink); white-space: nowrap; }
.brand-mark{
  width:40px; height:40px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  box-shadow: 0 1px 3px rgba(42,29,21,.35);
}
.brand-mark svg{ width:100%; height:100%; display:block; }
.brand-name em{ font-style:normal; color: var(--color-primary); }
.nav-links{ display:flex; align-items:center; gap: var(--space-5); }
.nav-links a{
  position:relative; font-weight:600; font-size:.95rem; color: var(--color-ink-soft);
  padding-block:.3rem; transition: color .25s;
}
.nav-links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px;
  background: var(--color-primary); border-radius:2px; transition: right .3s var(--ease-out);
}
.nav-links a:hover, .nav-links a.is-active{ color: var(--color-ink); }
.nav-links a:hover::after, .nav-links a.is-active::after{ right:0; }
.nav-actions{ display:flex; align-items:center; gap: var(--space-3); }
.icon-btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%; background: var(--color-surface);
  border:1px solid var(--color-border); color: var(--color-ink); cursor:pointer;
  transition: transform .3s var(--ease-out), scale .3s var(--ease-out), border-color .25s, background .25s, color .25s, box-shadow .3s var(--ease-out);
}
.icon-btn:hover{ transform: translateY(-2px); scale: 1.06; border-color: var(--color-primary); color: var(--color-primary); box-shadow: var(--shadow-sm); }
.icon-btn:active{ scale: .94; }
.icon-btn svg{ width:19px; height:19px; transition: transform .3s var(--ease-out); }
.cart-badge{
  position:absolute; top:-4px; right:-4px; min-width:20px; height:20px; padding:0 5px;
  border-radius:999px; background: var(--color-primary); color:#fff; font-size:.68rem; font-weight:700;
  display:flex; align-items:center; justify-content:center; border:2px solid var(--color-bg);
  transform: scale(0); transition: transform .3s var(--ease-out);
}
.cart-badge.is-visible{ transform: scale(1); }
.nav-toggle{
  display:none; width:44px; height:44px; border-radius:50%; border:1px solid var(--color-border);
  background: var(--color-surface); align-items:center; justify-content:center; flex-direction:column; gap:5px;
}
.nav-toggle span{ width:20px; height:2px; background: var(--color-ink); border-radius:2px; transition: transform .3s var(--ease-out), opacity .3s; }
.nav-toggle.is-open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

.mobile-panel{
  position: fixed; inset: var(--header-h) 0 0 0; z-index:99; background: var(--color-bg);
  padding: var(--space-5) var(--space-4); display:none; overflow-y:auto;
}
.mobile-panel.is-open{ display:block; }
.mobile-panel .nav-links{ flex-direction:column; align-items:flex-start; gap: var(--space-4); margin-bottom: var(--space-5); }
.mobile-panel .nav-links a{ font-family: var(--font-display); font-size:1.6rem; }
.mobile-panel .btn{ width:100%; }

/* ---------- 6. Skeleton / Lazy Media ---------- */
.media{ position:relative; overflow:hidden; background: var(--color-bg-alt); }
.media::before{
  content:""; position:absolute; inset:0; z-index:1;
  background: linear-gradient(100deg, var(--cream-200) 8%, var(--cream-100) 18%, var(--cream-200) 33%);
  background-size: 200% 100%; animation: shimmer 1.6s ease-in-out infinite;
  opacity:1; transition: opacity .5s var(--ease-out);
}
.media img{
  position:relative; z-index:2; width:100%; height:100%; object-fit:cover;
  opacity:0; transform: scale(1.04); filter: blur(6px);
  transition: opacity .6s var(--ease-out), transform .8s var(--ease-out), filter .6s var(--ease-out), scale .5s var(--ease-out);
}
.media.is-loaded::before{ opacity:0; pointer-events:none; }
.media.is-loaded img{ opacity:1; transform: scale(1); filter: blur(0); }
/* Card image "zoom" on hover, via the standalone `scale` property — it
   composes on top of the `transform` above instead of overwriting it, so
   the lazy-load blur-up and the hover zoom never fight each other. */
.dish-card:hover .media img,
.menu-item:hover .media img,
.team-card:hover .media img,
.gallery-item:hover .media img{ scale: 1.08; }
@keyframes shimmer{
  0%{ background-position: 200% 0; }
  100%{ background-position: -200% 0; }
}
.ratio-1-1{ aspect-ratio: 1/1; }
.ratio-4-3{ aspect-ratio: 4/3; }
.ratio-3-2{ aspect-ratio: 3/2; }
.ratio-16-9{ aspect-ratio: 16/9; }
.ratio-3-4{ aspect-ratio: 3/4; }

/* ---------- 7. Hero ---------- */
.hero{
  position:relative; min-height: 88vh; display:flex; align-items:center;
  overflow:hidden; color:#fff;
}
.hero-bg{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero-bg .media{
  position:absolute; inset:-10% 0; width:100%; height:120%; border-radius:0; will-change: transform;
}
.hero-scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(100deg, rgba(20,13,9,.86) 0%, rgba(20,13,9,.6) 42%, rgba(20,13,9,.28) 70%, rgba(20,13,9,.12) 100%),
    linear-gradient(0deg, rgba(20,13,9,.45) 0%, transparent 45%);
}
.hero-content{ position:relative; z-index:2; padding-block: clamp(4rem, 11vw, 7rem); }
.hero-eyebrow{ color: var(--gold-300); }
.hero-eyebrow::before{ background: var(--gold-300); }
.hero-title{ color:#fff; font-size: clamp(2.7rem, 6.5vw, 4.8rem); }
.hero-title .line{ display:block; overflow:hidden; }
.hero-title .line span{ display:block; }
.hero-title .line:nth-child(2) span{ color: var(--terracotta-100); }
.hero-sub{ font-size:1.15rem; color: rgba(255,255,255,.85); max-width: 46ch; }
.hero-actions{ display:flex; gap: var(--space-3); flex-wrap:wrap; margin-top: var(--space-4); }
.hero-trust{
  display:flex; align-items:center; gap:.65rem; margin-top: var(--space-5);
  color: rgba(255,255,255,.85); font-size:.92rem; font-weight:600;
}
.hero-trust .stars{ color: var(--gold-300); letter-spacing:.12em; flex-shrink:0; }

.page-hero{ padding-top: clamp(2.5rem, 6vw, 4rem); padding-bottom: clamp(2.5rem, 6vw, 3.5rem); text-align:center; }
.page-hero h1{ font-size: clamp(2.4rem, 5vw, 3.6rem); }
.page-hero p{ color: var(--color-ink-soft); font-size:1.1rem; max-width: 560px; margin-inline:auto; }

/* ---------- 9. Cards ---------- */
.favourites-grid{ grid-template-columns: repeat(3, 1fr); }
.dish-card{
  background: var(--color-surface); border-radius: var(--radius-lg); overflow:hidden;
  box-shadow: var(--shadow-sm); transition: box-shadow .4s var(--ease-out), transform .4s var(--ease-out);
  display:flex; flex-direction:column; height:100%;
}
.dish-card:hover{ box-shadow: var(--shadow-md); transform: translateY(-6px); }
.dish-card .media{ border-radius:0; }
.dish-card-body{ padding: var(--space-4) var(--space-4) var(--space-5); display:flex; flex-direction:column; gap:.4rem; flex:1; }
.tag{
  align-self:flex-start; font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color: var(--color-primary); background: var(--terracotta-100); padding: .3em .8em; border-radius: var(--radius-pill);
}
.dish-card h3{ font-size:1.28rem; margin: .3rem 0 .15rem; }
.dish-card .desc{ color: var(--color-ink-soft); font-size:.93rem; flex:1; }
.dish-row{ display:flex; align-items:center; justify-content:space-between; margin-top: var(--space-2); gap:.75rem; }
.price{ font-family: var(--font-display); font-size:1.2rem; font-weight:600; color: var(--color-primary-dark); }
.link-arrow{ display:inline-flex; align-items:center; gap:.4em; font-weight:700; font-size:.85rem; color: var(--color-ink); transition: color .25s; }
.link-arrow svg{ width:14px; height:14px; transition: transform .3s var(--ease-out); }
.link-arrow:hover{ color: var(--color-primary); }
.link-arrow:hover svg{ transform: translateX(4px); }

/* About preview (home) */
.about-preview{ display:grid; grid-template-columns: .95fr 1.05fr; gap: var(--space-6); align-items:center; }
.about-preview .media{ border-radius: var(--radius-lg); }
.feature-list{ display:grid; gap: var(--space-4); margin-top: var(--space-5); }
.feature-item{ display:flex; gap:1rem; align-items:flex-start; }
.feature-icon{
  flex-shrink:0; width:52px; height:52px; border-radius: var(--radius-md); background: var(--color-bg-alt);
  color: var(--color-primary); display:flex; align-items:center; justify-content:center;
}
.feature-icon svg{ width:24px; height:24px; }
.feature-item h4{ font-family: var(--font-body); font-weight:700; font-size:1.02rem; margin:0 0 .2rem; }
.feature-item p{ color: var(--color-ink-soft); font-size:.92rem; margin:0; }

/* Visit us (home) */
.visit-section{ position:relative; border-radius: var(--radius-lg); overflow:hidden; background: var(--color-ink); color:#fff; }
.visit-grid{ display:grid; grid-template-columns: 1fr 1fr; }
.visit-copy{ padding: clamp(2.5rem, 6vw, 4.5rem); position:relative; z-index:2; }
.visit-copy .eyebrow{ color: var(--gold-300); }
.visit-copy .eyebrow::before{ background: var(--gold-300); }
.visit-copy h2{ color:#fff; font-size: clamp(2rem, 4vw, 2.8rem); }
.visit-copy p{ color: rgba(255,255,255,.78); }
.visit-address{ display:flex; align-items:center; gap:.75rem; font-weight:600; margin-top: var(--space-4); }
.visit-media{ position:relative; min-height: 320px; }
.visit-media .media{ position:absolute; inset:0; border-radius:0; }

/* Values / team grids */
.values-grid{ grid-template-columns: repeat(3, 1fr); }
.value-card{
  background: var(--color-surface); border-radius: var(--radius-md); padding: var(--space-5);
  border: 1px solid var(--color-border-soft); transition: transform .35s var(--ease-out), scale .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .3s;
}
.value-card:hover{ transform: translateY(-5px); scale: 1.015; box-shadow: var(--shadow-md); border-color: transparent; }
.value-card .feature-icon{ margin-bottom: var(--space-3); transition: background .3s, color .3s, rotate .4s var(--ease-out); }
.value-card:hover .feature-icon{ background: var(--color-primary); color:#fff; rotate: -8deg; }
.value-card h3{ font-size:1.15rem; }
.value-card p{ color: var(--color-ink-soft); font-size:.92rem; margin:0; }

.team-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); max-width: 640px; margin-inline:auto; }
.team-card{ text-align:center; }
.team-card .media{ border-radius:50%; width:150px; height:150px; margin-inline:auto; margin-bottom: var(--space-3); transition: box-shadow .35s var(--ease-out); }
.team-card:hover .media{ box-shadow: 0 0 0 6px var(--terracotta-100); }
.team-card h3{ font-size:1.2rem; margin-bottom:.15rem; }
.team-card span{ color: var(--color-primary); font-weight:600; font-size:.88rem; }

/* Stats (about) */
.stats-strip{
  display:grid; grid-template-columns: repeat(4, 1fr); background: var(--color-ink); color:#fff;
  border-radius: var(--radius-lg); overflow:hidden;
}
.stat{ padding: var(--space-6) var(--space-3); text-align:center; border-right:1px solid rgba(255,255,255,.1); }
.stat:last-child{ border-right:none; }
.stat strong{ display:block; font-family: var(--font-display); font-size: clamp(2rem, 4vw, 2.7rem); color: var(--gold-300); }
.stat span{ font-size:.85rem; color: rgba(255,255,255,.75); }

/* Story section (about) */
.story-grid{ display:grid; grid-template-columns: .9fr 1.1fr; gap: var(--space-6); align-items:center; }
.story-grid .media{ border-radius: var(--radius-lg); }
.story-copy p{ color: var(--color-ink-soft); }

/* ---------- Menu / Order filters & grid ---------- */
.filter-bar{ display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; margin-bottom: var(--space-6); }
.filter-chip{
  padding:.6em 1.3em; border-radius: var(--radius-pill); border:1.5px solid var(--color-border);
  background: var(--color-surface); font-weight:600; font-size:.88rem; color: var(--color-ink-soft);
  cursor:pointer; transition: all .3s var(--ease-out), scale .3s var(--ease-out);
}
.filter-chip:hover{ border-color: var(--color-primary); color: var(--color-ink); scale: 1.05; }
.filter-chip:active{ scale: .95; }
.filter-chip.is-active{ background: var(--color-primary); border-color: var(--color-primary); color:#fff; box-shadow: var(--shadow-sm); }

.menu-grid{ grid-template-columns: repeat(3, 1fr); }
.menu-item{
  background: var(--color-surface); border-radius: var(--radius-lg); overflow:hidden; display:flex; flex-direction:column;
  box-shadow: var(--shadow-sm); transition: transform .4s var(--ease-out), scale .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.menu-item:hover{ transform: translateY(-5px); box-shadow: var(--shadow-md); }
.menu-item.is-quickviewable:hover{ scale: 1.012; }
.menu-item .media{ border-radius:0; }
.menu-item-body{ padding: var(--space-4); display:flex; flex-direction:column; gap:.35rem; flex:1; }
.menu-item-body .dish-row{ margin-top:auto; padding-top:.5rem; }
.qty-add{ display:flex; align-items:center; gap:.5rem; }
.qty-stepper{ display:flex; align-items:center; border:1.5px solid var(--color-border); border-radius: var(--radius-pill); overflow:hidden; }
.qty-stepper button{ width:32px; height:32px; background:none; border:none; font-size:1.1rem; color: var(--color-ink); cursor:pointer; transition: background .25s, scale .25s var(--ease-out); }
.qty-stepper button:hover{ background: var(--color-bg-alt); scale: 1.1; }
.qty-stepper button:active{ scale: .9; }
.qty-stepper input{ width:32px; text-align:center; border:none; background:none; font-weight:700; appearance:textfield; -moz-appearance:textfield; }
.qty-stepper input::-webkit-outer-spin-button, .qty-stepper input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.add-btn{
  width:42px; height:42px; border-radius:50%; background: var(--color-ink); color:#fff; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition: background .3s, transform .3s var(--ease-out), scale .3s var(--ease-out), box-shadow .3s var(--ease-out);
  flex-shrink:0;
}
.add-btn svg{ transition: rotate .35s var(--ease-out); width:18px; height:18px; }
.add-btn:hover{ background: var(--color-primary); scale: 1.1; box-shadow: var(--shadow-sm); }
.add-btn:hover svg{ rotate: 90deg; }
.add-btn:active{ scale: .92; }
.add-btn.is-added{ background: var(--color-sage); }
.menu-item[hidden], .gallery-item[hidden]{ display:none; }

/* Gallery */
.gallery-grid{ grid-template-columns: repeat(4, 1fr); grid-auto-rows: 190px; }
.gallery-item{ position:relative; border-radius: var(--radius-md); overflow:hidden; cursor:pointer; }
.gallery-item.tall{ grid-row: span 2; }
.gallery-item .media{ position:absolute; inset:0; border-radius:0; }
.gallery-item .media img{ transition: opacity .6s var(--ease-out), transform .8s var(--ease-out), filter .4s var(--ease-out), scale .5s var(--ease-out); }
.gallery-item:hover .media img{ filter: brightness(.75); }
.gallery-caption{
  position:absolute; inset:auto 0 0 0; z-index:3; padding: var(--space-3);
  background: linear-gradient(0deg, rgba(20,13,9,.85), transparent);
  color:#fff; transform: translateY(100%); transition: transform .4s var(--ease-out);
}
.gallery-item:hover .gallery-caption{ transform: translateY(0); }
.gallery-caption strong{ display:block; font-family: var(--font-display); font-size:1rem; }
.gallery-caption span{ font-size:.75rem; opacity:.8; text-transform:uppercase; letter-spacing:.08em; }

/* Lightbox */
.lightbox{
  position:fixed; inset:0; z-index:300; display:none; align-items:center; justify-content:center;
  background: rgba(20,13,9,.9); padding: var(--space-4);
}
.lightbox.is-open{ display:flex; }
.lightbox-inner{ position:relative; max-width: 900px; width:100%; }
.lightbox-inner img{ width:100%; border-radius: var(--radius-md); max-height:78vh; object-fit:cover; }
.lightbox-caption{ color:#fff; text-align:center; margin-top: var(--space-3); }
.lightbox-close, .lightbox-nav{
  position:absolute; width:46px; height:46px; border-radius:50%; background: rgba(255,255,255,.12);
  color:#fff; display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.25);
  transition: background .25s;
}
.lightbox-close:hover, .lightbox-nav:hover{ background: rgba(255,255,255,.25); }
.lightbox-close{ top:-56px; right:0; }
.lightbox-nav.prev{ left:-60px; top:50%; transform: translateY(-50%); }
.lightbox-nav.next{ right:-60px; top:50%; transform: translateY(-50%); }

/* ---------- FAQ Accordion ---------- */
.faq-list{ max-width: 760px; margin-inline:auto; display:flex; flex-direction:column; gap: var(--space-3); }
.faq-item{ background: var(--color-surface); border-radius: var(--radius-md); border:1px solid var(--color-border-soft); overflow:hidden; }
.faq-question{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding: 1.2rem 1.5rem; background:none; border:none; text-align:left; font-weight:700; font-size:1.02rem; color: var(--color-ink);
}
.faq-question .plus{
  flex-shrink:0; width:28px; height:28px; border-radius:50%; background: var(--color-bg-alt); position:relative;
  transition: background .3s, transform .35s var(--ease-out);
}
.faq-question .plus::before, .faq-question .plus::after{
  content:""; position:absolute; background: var(--color-ink); border-radius:2px; top:50%; left:50%;
}
.faq-question .plus::before{ width:12px; height:2px; transform: translate(-50%,-50%); }
.faq-question .plus::after{ width:2px; height:12px; transform: translate(-50%,-50%); transition: opacity .25s; }
.faq-item.is-open .faq-question .plus{ background: var(--color-primary); transform: rotate(180deg); }
.faq-item.is-open .faq-question .plus::before, .faq-item.is-open .faq-question .plus::after{ background:#fff; }
.faq-item.is-open .faq-question .plus::after{ opacity:0; }
.faq-answer{ height:0; overflow:hidden; }
.faq-answer-inner{ padding: 0 1.5rem 1.4rem; color: var(--color-ink-soft); }

/* Contact layout */
.contact-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap: var(--space-6); align-items:start; }
.contact-card{ background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-sm); }
.info-card{ background: var(--color-ink); color:#fff; border-radius: var(--radius-lg); overflow:hidden; }
.info-card .media{ border-radius:0; }
.info-list{ padding: var(--space-5); display:flex; flex-direction:column; gap: var(--space-4); }
.info-row{ display:flex; gap:1rem; align-items:flex-start; }
.info-row .feature-icon{ background: rgba(255,255,255,.08); color: var(--gold-300); }
.info-row strong{ display:block; margin-bottom:.15rem; }
.info-row p{ margin:0; color: rgba(255,255,255,.72); font-size:.9rem; }
.form-status{ font-size:.9rem; font-weight:600; padding: .5rem 0; min-height:1.4em; }
.form-status.success{ color: var(--color-sage); }

/* ---------- Cart Drawer / Toast / Modal ---------- */
.overlay{ position:fixed; inset:0; background: rgba(20,13,9,.5); z-index:150; opacity:0; pointer-events:none; transition: opacity .35s var(--ease-out); }
.overlay.is-open{ opacity:1; pointer-events:auto; }
.cart-drawer{
  position:fixed; top:0; right:0; height:100%; width:min(420px, 92vw); background: var(--color-bg);
  z-index:200; display:flex; flex-direction:column; box-shadow: -20px 0 50px rgba(20,13,9,.25);
  transform: translateX(100%);
}
.cart-drawer-head{ display:flex; align-items:center; justify-content:space-between; padding: var(--space-4) var(--space-4); border-bottom:1px solid var(--color-border-soft); }
.cart-drawer-head h3{ margin:0; font-size:1.3rem; }
.cart-items{ flex:1; overflow-y:auto; padding: var(--space-4); display:flex; flex-direction:column; gap: var(--space-4); }
.cart-line{ display:flex; gap: .9rem; align-items:center; }
.cart-line .media{ width:64px; height:64px; border-radius: var(--radius-sm); flex-shrink:0; }
.cart-line-body{ flex:1; min-width:0; }
.cart-line-body h4{ margin:0 0 .2rem; font-size:.98rem; font-family: var(--font-body); font-weight:700; }
.cart-line-body .price{ font-size:.95rem; }
.cart-line-actions{ display:flex; align-items:center; justify-content:space-between; margin-top:.4rem; }
.remove-btn{ background:none; border:none; color: var(--color-ink-soft); font-size:.78rem; font-weight:700; text-decoration:underline; }
.remove-btn:hover{ color: var(--color-primary); }
.cart-empty{ text-align:center; padding: var(--space-7) var(--space-3); color: var(--color-ink-soft); }
.cart-empty svg{ width:48px; height:48px; margin-bottom:1rem; color: var(--color-border); }
.cart-footer{ padding: var(--space-4); border-top:1px solid var(--color-border-soft); background: var(--color-bg-alt); }
.cart-subtotal{ display:flex; justify-content:space-between; align-items:center; margin-bottom: var(--space-3); font-weight:700; font-size:1.1rem; }
.cart-subtotal .price{ font-size:1.35rem; }

.toast{
  position:fixed; bottom: 1.75rem; left:50%; z-index:250; background: var(--color-ink); color:#fff;
  padding: .9rem 1.4rem; border-radius: var(--radius-pill); font-weight:600; font-size:.9rem;
  display:flex; align-items:center; gap:.6rem; box-shadow: var(--shadow-lg);
  transform: translate(-50%, 30px); opacity:0; pointer-events:none;
}
.toast svg{ width:18px; height:18px; color: var(--sage-100); }

.modal{
  position:fixed; inset:0; z-index:260; display:none; align-items:center; justify-content:center; padding: var(--space-4);
  background: rgba(20,13,9,0);
  transition: background-color .35s var(--ease-out);
}
.modal.is-open{ display:flex; background: rgba(20,13,9,.55); }
.modal-card{
  position:relative; z-index:2; background: var(--color-surface); border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5); max-width: 420px; text-align:center; box-shadow: var(--shadow-lg);
}
.modal-icon{
  width:72px; height:72px; border-radius:50%; background: var(--sage-100); color: var(--color-sage);
  display:flex; align-items:center; justify-content:center; margin: 0 auto var(--space-4);
}
.modal-icon svg{ width:34px; height:34px; }
.modal-card h3{ font-size:1.5rem; }
.modal-card p{ color: var(--color-ink-soft); }

/* Quick-view modal (menu item detail) */
.menu-item.is-quickviewable{ cursor: pointer; }
.quickview-card{
  max-width: 560px; width:100%; padding:0; text-align:left; overflow:hidden;
  max-height: 88vh; display:flex; flex-direction:column;
}
.quickview-media{ position:relative; flex-shrink:0; }
.quickview-close{
  position:absolute; top:1rem; right:1rem; z-index:5;
  background: rgba(20,13,9,.55); border-color: transparent; color:#fff;
}
.quickview-close:hover{ background: rgba(20,13,9,.75); color:#fff; }
.quickview-tag{ position:absolute; left:1rem; bottom:1rem; z-index:3; }
.quickview-body{ padding: var(--space-5); overflow-y:auto; }
.quickview-body h3{ font-size:1.5rem; margin-bottom:.4rem; }
.quickview-rating{ display:flex; align-items:center; gap:.6rem; margin-bottom:.6rem; color: var(--color-ink-soft); font-size:.9rem; }
.quickview-rating .stars{ color: var(--color-accent); letter-spacing:.1em; }
.quickview-body > .price{ display:block; font-size:1.5rem; margin-bottom: var(--space-4); }
.quickview-actions{ display:flex; align-items:center; gap: var(--space-3); margin-bottom: var(--space-5); }
.quickview-actions .btn{ flex:1; }
.quickview-tabs{ display:flex; gap: var(--space-4); border-bottom:1px solid var(--color-border-soft); margin-bottom: var(--space-4); overflow-x:auto; }
.quickview-tab{
  background:none; border:none; padding:.6rem 0; font-weight:700; font-size:.9rem;
  color: var(--color-ink-soft); border-bottom:2px solid transparent; white-space:nowrap;
  transition: color .25s, border-color .25s;
}
.quickview-tab:hover{ color: var(--color-ink); }
.quickview-tab.is-active{ color: var(--color-primary); border-color: var(--color-primary); }
.quickview-pane{ display:none; color: var(--color-ink-soft); font-size:.94rem; line-height:1.7; }
.quickview-pane.is-active{ display:block; }
.ingredient-list{ display:grid; grid-template-columns: repeat(2,1fr); gap:.5rem .5rem; list-style:none; padding:0; margin:0; }
.ingredient-list li{ position:relative; padding-left:1.1rem; }
.ingredient-list li::before{ content:""; position:absolute; left:0; top:.65em; width:5px; height:5px; border-radius:50%; background: var(--color-primary); }
.nutrition-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:.6rem; }
.nutrition-stat{ background: var(--color-bg-alt); border-radius: var(--radius-sm); padding:.8rem .5rem; text-align:center; }
.nutrition-stat span{ display:block; font-size:.72rem; color: var(--color-ink-soft); margin-bottom:.25rem; }
.nutrition-stat strong{ font-family: var(--font-display); font-size:1.05rem; }
@media (max-width: 480px){
  .nutrition-grid{ grid-template-columns: repeat(2,1fr); }
  .ingredient-list{ grid-template-columns: 1fr; }
}

/* ---------- 13. Footer ---------- */
.site-footer{ background: var(--color-ink); color: rgba(255,255,255,.85); padding-top: var(--space-7); }
.footer-grid{ display:grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: var(--space-6); padding-bottom: var(--space-6); border-bottom:1px solid rgba(255,255,255,.1); }
.footer-brand .brand{ color:#fff; }
.footer-brand p{ color: rgba(255,255,255,.6); font-size:.92rem; max-width: 30ch; margin-top: var(--space-3); }
.social-row{ display:flex; gap:.7rem; margin-top: var(--space-4); }
.social-row a{
  width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.2); display:flex;
  align-items:center; justify-content:center; transition: background .3s, transform .3s var(--ease-out);
}
.social-row a:hover{ background: var(--color-primary); border-color: var(--color-primary); transform: translateY(-3px); }
.social-row svg{ width:17px; height:17px; }
.footer-col h4{ font-family: var(--font-body); font-size:.85rem; letter-spacing:.1em; text-transform:uppercase; color: rgba(255,255,255,.5); margin-bottom: var(--space-3); }
.footer-col ul{ display:flex; flex-direction:column; gap:.75rem; }
.footer-col a{ display:inline-block; color: rgba(255,255,255,.78); font-size:.94rem; transition: color .25s, translate .25s var(--ease-out); }
.footer-col a:hover{ color: var(--gold-300); translate: 3px 0; }
.footer-col p{ color: rgba(255,255,255,.78); font-size:.94rem; margin:0 0 .5rem; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-block: var(--space-4); font-size:.82rem; color: rgba(255,255,255,.5); flex-wrap:wrap; gap:.5rem; }
.footer-bottom a{ color: rgba(255,255,255,.5); }
.footer-bottom a:hover{ color:#fff; }

/* ---------- 14. Reveal helper (paired with Motion via animations.js) ---------- */
.reveal{ opacity:0; }
.no-js .reveal{ opacity:1; }

/* ---------- 15. Responsive ---------- */
@media (max-width: 1080px){
  .favourites-grid, .values-grid{ grid-template-columns: repeat(2, 1fr); }
  .menu-grid{ grid-template-columns: repeat(2, 1fr); }
  .gallery-grid{ grid-template-columns: repeat(3, 1fr); }
  .about-preview, .story-grid{ grid-template-columns: 1fr; }
  .visit-grid{ grid-template-columns: 1fr; }
  .visit-media{ min-height: 260px; order:-1; }
  .contact-grid{ grid-template-columns: 1fr; }
  .stats-strip{ grid-template-columns: repeat(2,1fr); }
  .stat{ border-bottom:1px solid rgba(255,255,255,.1); }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px){
  .site-header .nav-links{ display:none; }
  .nav-toggle{ display:flex; }
  .lightbox-nav{ display:none; }
}
@media (max-width: 640px){
  .favourites-grid, .values-grid, .menu-grid, .gallery-grid, .team-grid{ grid-template-columns: repeat(2, 1fr); }
  .gallery-grid{ grid-auto-rows: 140px; }
  .stats-strip{ grid-template-columns: repeat(2,1fr); }
  .footer-grid{ grid-template-columns: 1fr; }
  .hero{ min-height: 78vh; }
  .hero-trust{ flex-wrap:wrap; }
  .footer-bottom{ flex-direction:column; text-align:center; }
  /* The header's "Order Online" button is redundant once the hamburger
     panel (which has its own full-width Order Online CTA) takes over —
     dropping it here gives the brand name room to stay on one line. */
  .nav-actions a.btn{ display:none; }
  .brand{ font-size:1.1rem; }
  .brand-mark{ width:36px; height:36px; font-size:1rem; }
}
@media (max-width: 480px){
  .favourites-grid, .values-grid, .menu-grid, .gallery-grid, .team-grid{ grid-template-columns: 1fr; }
  .gallery-grid{ grid-auto-rows: 220px; }
  .cart-drawer{ width:100vw; }
}