/* ============================================
   International Restaurant — Style System
   Single-family: Inter · Deep green accent · White ground
   ============================================ */

/* --- TOKENS --- */
:root {
  color-scheme: light;

  /* Green */
  --g50:#EDF5F0; --g100:#D4E8DB; --g200:#A8D1B7;
  --g300:#6FB48A; --g400:#3D9668; --g500:#1B7A4A;
  --g600:#1A5C3A; --g700:#14472D; --g800:#0E3320; --g900:#092215;

  /* Neutral */
  --n0:#FFFFFF; --n50:#FAFAF9; --n100:#F3F3F2; --n200:#E6E6E3;
  --n300:#D4D4D0; --n400:#A8A8A3; --n500:#787872; --n600:#55554F;
  --n700:#333330; --n800:#1C1C1A; --n900:#111110;

  /* Semantic surfaces */
  --bg:var(--n0); --bg2:var(--n50); --bg3:var(--n100);
  --bd:var(--n200); --bd2:var(--n300);

  /* Text */
  --t1:var(--n900); --t2:var(--n600); --t3:var(--n400);

  /* Accent */
  --ac:var(--g600); --ac-h:var(--g500); --ac-t:#FFFFFF;
  --ac-wash:var(--g50); --ac-muted:rgba(26,92,58,0.07);

  /* Semantic */
  --ok:var(--g600); --warn:#B45309; --err:#DC2626;

  /* Glass */
  --glass:rgba(255,255,255,0.82);
  --glass-bd:rgba(0,0,0,0.06);
  --glass-sh:0 8px 32px rgba(0,0,0,0.06);
  --glass-blur:blur(20px) saturate(1.2);

  /* Shadow */
  --sh-xs:0 1px 2px rgba(0,0,0,0.03);
  --sh-sm:0 2px 6px rgba(0,0,0,0.04);
  --sh-md:0 4px 14px rgba(0,0,0,0.06);
  --sh-lg:0 8px 30px rgba(0,0,0,0.07);
  --sh-xl:0 20px 50px rgba(0,0,0,0.10);

  /* Radius */
  --r-xs:4px; --r-sm:8px; --r-md:10px; --r-lg:14px; --r-xl:20px; --r-full:9999px;

  /* Type */
  --f:Inter,-apple-system,'Segoe UI',system-ui,Roboto,sans-serif;
  --fm:ui-monospace,'SF Mono','Cascadia Mono',monospace;

  /* Scale */
  --t-5xl:clamp(3rem,6vw,4.5rem);
  --t-4xl:clamp(2.25rem,4.5vw,3.25rem);
  --t-3xl:clamp(1.75rem,3.5vw,2.5rem);
  --t-2xl:clamp(1.375rem,2.5vw,1.75rem);
  --t-xl:1.25rem;
  --t-lg:1.0625rem;
  --t-base:0.9375rem;
  --t-sm:0.8125rem;
  --t-xs:0.6875rem;

  /* Motion */
  --ease:cubic-bezier(0.16,1,0.3,1);
  --fast:120ms; --med:200ms; --slow:450ms;

  /* Layout */
  --container:1200px;
  --header-h:64px;
  --tab-h:60px;
}

@media(prefers-reduced-motion:reduce) {
  *, *::before, *::after {
    animation-duration:0.01ms !important;
    transition-duration:0.01ms !important;
  }
}


/* --- RESET --- */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body {
  font-family:var(--f);
  font-size:var(--t-base);
  line-height:1.6;
  color:var(--t1);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img, video, svg { display:block; max-width:100%; height:auto }
a { color:inherit; text-decoration:none }
button { font:inherit; cursor:pointer; border:none; background:none }
ul, ol { list-style:none }
input, textarea, select { font:inherit }
::selection { background:var(--ac); color:var(--ac-t) }
:focus-visible { outline:2px solid var(--ac); outline-offset:2px }


/* --- UTILITY --- */
.container { width:100%; max-width:var(--container); margin:0 auto; padding:0 24px }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0 }
.text-balance { text-wrap:balance }


/* --- HEADER --- */
.site-header {
  position:fixed; top:0; left:0; right:0; z-index:100;
  height:var(--header-h);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  background:var(--glass);
  border-bottom:1px solid var(--glass-bd);
  box-shadow:var(--sh-xs);
}
.header-inner {
  display:flex; align-items:center; gap:24px;
  height:100%; max-width:var(--container); margin:0 auto; padding:0 24px;
}
.header-logo {
  display:flex; align-items:center; gap:10px;
  font-size:var(--t-lg); font-weight:600; letter-spacing:-0.03em;
  white-space:nowrap; flex-shrink:0;
}
.header-logo svg { width:28px; height:28px; flex-shrink:0 }
.header-logo .logo-fill { fill:var(--t1) }
.header-logo .logo-stroke { fill:none; stroke:var(--t1); stroke-width:4; stroke-miterlimit:10 }

.header-nav { display:flex; gap:4px; flex:1; justify-content:center }
.header-nav a {
  font-size:var(--t-sm); font-weight:450; color:var(--t2);
  padding:6px 12px; border-radius:var(--r-sm);
  transition:color var(--fast) var(--ease), background var(--fast) var(--ease);
  position:relative;
}
.header-nav a:hover { color:var(--t1); background:var(--ac-muted) }
.header-nav a.active { color:var(--ac); font-weight:500 }

.header-cta { margin-left:auto; flex-shrink:0; display:flex; align-items:center; gap:8px }

@media(max-width:768px) {
  .header-nav { display:none }
  .header-cta { gap:6px }
  .header-cta .btn-sm { padding:6px 12px; font-size:12px }
  .header-delivery span { display:none }
  .header-delivery { padding:7px; border-radius:50% }
  .header-delivery svg { width:16px; height:16px }
}


/* --- MOBILE BOTTOM NAV --- */
.mobile-nav {
  display:none; position:fixed; bottom:0; left:0; right:0; z-index:100;
  height:var(--tab-h);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  background:var(--glass);
  border-top:1px solid var(--glass-bd);
  box-shadow:0 -4px 20px rgba(0,0,0,0.04);
  padding-bottom:env(safe-area-inset-bottom, 0);
}
.mobile-nav-inner {
  display:flex; align-items:center; justify-content:space-around;
  height:100%; max-width:400px; margin:0 auto;
}
.mobile-tab {
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:4px 12px; color:var(--t3);
  font-size:10px; font-weight:500;
  transition:color var(--fast) var(--ease);
}
.mobile-tab svg { width:20px; height:20px }
.mobile-tab:hover, .mobile-tab.active { color:var(--ac) }

@media(max-width:768px) {
  .mobile-nav { display:block }
  body { padding-bottom:calc(var(--tab-h) + env(safe-area-inset-bottom, 0)) }
}


/* --- BUTTONS --- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  font-weight:500; font-size:var(--t-sm);
  border-radius:var(--r-full); padding:10px 24px;
  transition:all var(--med) var(--ease); line-height:1.4;
}
.btn:active { transform:scale(0.97) }
.btn-primary { background:var(--ac); color:var(--ac-t); box-shadow:var(--sh-sm) }
.btn-primary:hover { background:var(--ac-h); box-shadow:var(--sh-md) }
.btn-outline { color:var(--ac); box-shadow:inset 0 0 0 1.5px var(--ac) }
.btn-outline:hover { background:var(--ac-wash) }
.btn-ghost { color:var(--ac) }
.btn-ghost:hover { background:var(--ac-wash) }
.btn-dark { background:var(--t1); color:var(--bg) }
.btn-dark:hover { opacity:0.85 }
.btn-lg { padding:14px 36px; font-size:var(--t-base) }
.btn-sm { padding:6px 16px; font-size:var(--t-xs) }
.btn-block { width:100% }
.btn[disabled] { opacity:0.35; cursor:not-allowed; pointer-events:none }
.btn svg { width:16px; height:16px; flex-shrink:0 }


/* --- CARDS --- */
.card {
  border-radius:var(--r-lg); overflow:hidden;
  transition:transform var(--slow) var(--ease), box-shadow var(--slow) var(--ease);
}
.card:hover { transform:translateY(-3px) }
.card-standard { background:var(--bg); border:1px solid var(--bd); box-shadow:var(--sh-xs) }
.card-standard:hover { box-shadow:var(--sh-lg) }
.card-glass {
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  background:var(--glass); border:1px solid var(--glass-bd); box-shadow:var(--glass-sh);
}
.card-img { height:200px; position:relative; overflow:hidden }
.card-img img { width:100%; height:100%; object-fit:cover }
.card-img-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,0.45) 0%,transparent 50%) }
.card-tag {
  position:absolute; top:12px; left:12px;
  font-size:10px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase;
  background:rgba(255,255,255,0.9); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border-radius:var(--r-xs); padding:3px 10px; color:var(--ac);
}
.card-body { padding:20px }
.card-title { font-size:var(--t-xl); font-weight:600; margin-bottom:6px; letter-spacing:-0.02em }
.card-text { font-size:var(--t-sm); color:var(--t2); line-height:1.6 }
.card-footer { display:flex; align-items:center; justify-content:space-between; padding:0 20px 20px }
.card-price { font-weight:600 }
.card-link { color:var(--ac); font-weight:500; font-size:var(--t-sm) }
.card-link:hover { text-decoration:underline }


/* --- BADGES --- */
.badge {
  display:inline-flex; align-items:center; gap:3px;
  padding:3px 10px; border-radius:var(--r-full);
  font-size:10px; font-weight:600; letter-spacing:0.03em;
}
.badge-accent { background:var(--ac-wash); color:var(--ac) }
.badge-ok { background:rgba(26,92,58,0.08); color:var(--ok) }
.badge-warn { background:rgba(180,83,9,0.08); color:var(--warn) }
.badge-err { background:rgba(220,38,38,0.08); color:var(--err) }
.badge-neutral { background:var(--bg2); color:var(--t2); border:1px solid var(--bd) }


/* --- FORMS --- */
.form-group { display:flex; flex-direction:column; gap:4px; margin-bottom:16px }
.form-label { font-size:var(--t-sm); font-weight:500; color:var(--t2) }
.form-input, .form-textarea {
  font-family:var(--f); font-size:var(--t-base);
  padding:10px 14px; border:1.5px solid var(--bd);
  border-radius:var(--r-sm); background:var(--bg); color:var(--t1);
  transition:border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
  outline:none; width:100%;
}
.form-input:hover, .form-textarea:hover { border-color:var(--bd2) }
.form-input:focus, .form-textarea:focus { border-color:var(--ac); box-shadow:0 0 0 3px var(--ac-muted) }
.form-input::placeholder { color:var(--t3) }
.form-textarea { resize:vertical; min-height:80px }
.form-hint { font-size:var(--t-xs); color:var(--t3); margin-top:2px }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px }
@media(max-width:480px) { .form-row { grid-template-columns:1fr } }

/* Icon-based selectors */
.select-cards { display:grid; gap:10px }
.select-cards-2 { grid-template-columns:1fr 1fr }
@media(max-width:400px) { .select-cards-2 { grid-template-columns:1fr } }

.select-card {
  position:relative; border:1.5px solid var(--bd); border-radius:var(--r-lg);
  padding:20px 16px; text-align:center; cursor:pointer;
  transition:all var(--med) var(--ease); background:var(--bg);
}
.select-card:hover { border-color:var(--bd2); box-shadow:var(--sh-sm) }
.select-card.selected { border-color:var(--ac); background:var(--ac-wash); box-shadow:0 0 0 3px var(--ac-muted) }
.select-card input { position:absolute; opacity:0; pointer-events:none }
.select-card-icon {
  width:40px; height:40px; margin:0 auto 10px; border-radius:var(--r-md);
  background:var(--bg2); display:flex; align-items:center; justify-content:center; color:var(--t2);
}
.select-card.selected .select-card-icon { background:var(--ac); color:#fff }
.select-card-icon svg { width:20px; height:20px }
.select-card-title { font-size:var(--t-sm); font-weight:600; color:var(--t1); margin-bottom:2px }
.select-card-sub { font-size:var(--t-xs); color:var(--t3) }

.select-pills { display:flex; gap:8px; flex-wrap:wrap }
.select-pill {
  flex:1; min-width:60px; border:1.5px solid var(--bd); border-radius:var(--r-md);
  padding:12px 8px; text-align:center; cursor:pointer;
  transition:all var(--med) var(--ease); background:var(--bg); position:relative;
}
.select-pill:hover { border-color:var(--bd2); box-shadow:var(--sh-xs) }
.select-pill.selected { border-color:var(--ac); background:var(--ac-wash); box-shadow:0 0 0 3px var(--ac-muted) }
.select-pill input { position:absolute; opacity:0; pointer-events:none }
.select-pill-icon { display:flex; align-items:center; justify-content:center; gap:2px; margin-bottom:4px; color:var(--t3) }
.select-pill.selected .select-pill-icon { color:var(--ac) }
.select-pill-icon svg { width:16px; height:16px }
.select-pill-label { font-size:var(--t-sm); font-weight:600 }

.time-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:6px }
@media(max-width:480px) { .time-grid { grid-template-columns:repeat(3,1fr) } }
.time-slot {
  border:1.5px solid var(--bd); border-radius:var(--r-sm); padding:10px 6px;
  text-align:center; font-size:var(--t-sm); font-weight:500; cursor:pointer;
  transition:all var(--med) var(--ease); background:var(--bg); position:relative;
}
.time-slot:hover { border-color:var(--bd2); background:var(--bg2) }
.time-slot.selected { border-color:var(--ac); background:var(--ac-wash); color:var(--ac); font-weight:600; box-shadow:0 0 0 3px var(--ac-muted) }
.time-slot input { position:absolute; opacity:0; pointer-events:none }


/* --- SECTION LAYOUT --- */
.section { padding:80px 0 }
.section-sm { padding:48px 0 }
.section-lg { padding:120px 0 }
.section-alt { background:var(--bg2) }
.section-label {
  font-size:var(--t-xs); font-weight:600; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--ac); margin-bottom:4px;
}
.section-title {
  font-size:var(--t-3xl); font-weight:600; letter-spacing:-0.03em; margin-bottom:8px;
  text-wrap:balance;
}
.section-desc { color:var(--t2); max-width:540px; line-height:1.7; font-size:var(--t-sm); margin-bottom:40px }


/* --- HERO --- */
.hero {
  position:relative; min-height:85vh;
  display:flex; align-items:center; overflow:hidden;
}
.hero-bg {
  position:absolute; inset:0; z-index:0;
}
.hero-bg img { width:100%; height:100%; object-fit:cover }
.hero-bg::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(to right, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 50%, transparent 100%);
}
.hero-content {
  position:relative; z-index:1; color:#fff;
  max-width:580px; padding:0 24px;
}
.hero-label {
  display:inline-flex; align-items:center; gap:6px;
  font-size:var(--t-xs); font-weight:600; letter-spacing:0.1em; text-transform:uppercase;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  background:rgba(255,255,255,0.15); border:1px solid rgba(255,255,255,0.2);
  border-radius:var(--r-full); padding:5px 14px; margin-bottom:20px;
}
.hero h1 {
  font-size:var(--t-5xl); font-weight:600; letter-spacing:-0.04em;
  line-height:1.05; margin-bottom:16px; text-wrap:balance;
}
.hero p { font-size:var(--t-lg); line-height:1.7; opacity:0.85; margin-bottom:28px }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap }

@media(max-width:768px) {
  .hero { min-height:75vh }
  .hero-bg::after { background:linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.2) 60%, transparent 100%) }
  .hero-content { max-width:100% }
  .hero { align-items:flex-end; padding-bottom:40px }
}


/* --- GRID LAYOUTS --- */
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:20px }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:20px }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:16px }
@media(max-width:900px) { .grid-3 { grid-template-columns:repeat(2,1fr) } }
@media(max-width:768px) {
  .grid-2 { grid-template-columns:1fr }
  .grid-4 { grid-template-columns:repeat(2,1fr) }
}
@media(max-width:480px) {
  .grid-3 { grid-template-columns:1fr }
  .grid-4 { grid-template-columns:repeat(2,1fr) }
}


/* --- FOOTER --- */
.site-footer { background:var(--n900); color:rgba(255,255,255,0.7); padding:64px 0 0 }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px }
@media(max-width:768px) { .footer-grid { grid-template-columns:1fr 1fr; gap:32px } }
@media(max-width:480px) { .footer-grid { grid-template-columns:1fr } }

.footer-brand { max-width:300px }
.footer-brand-name {
  font-size:var(--t-xl); font-weight:600; color:#fff;
  letter-spacing:-0.02em; margin-bottom:8px;
  display:flex; align-items:center; gap:8px;
}
.footer-brand-name svg { width:22px; height:22px }
.footer-brand-name .logo-fill { fill:#fff }
.footer-brand-name .logo-stroke { fill:none; stroke:#fff; stroke-width:4; stroke-miterlimit:10 }
.footer-brand p { font-size:var(--t-sm); line-height:1.7; margin-bottom:16px }

.footer-heading {
  font-size:var(--t-xs); font-weight:600; letter-spacing:0.12em;
  text-transform:uppercase; color:#fff; margin-bottom:16px;
}
.footer-links li + li { margin-top:8px }
.footer-links a {
  font-size:var(--t-sm); color:rgba(255,255,255,0.6);
  transition:color var(--fast) var(--ease);
}
.footer-links a:hover { color:#fff }

.footer-bottom {
  border-top:1px solid rgba(255,255,255,0.1);
  margin-top:48px; padding:20px 0;
  display:flex; align-items:center; justify-content:space-between;
  font-size:var(--t-xs); color:rgba(255,255,255,0.4);
}
@media(max-width:480px) {
  .footer-bottom { flex-direction:column; gap:8px; text-align:center }
}


/* --- BRANCH PICKER (ROOT PAGE) --- */
.picker {
  height:100vh; height:100dvh;
  display:grid; grid-template-columns:1fr 1fr;
  position:relative; overflow:hidden;
}
@media(max-width:768px) {
  .picker { grid-template-columns:1fr; grid-template-rows:1fr 1fr }
}
.picker-logo {
  position:absolute; top:50%; left:50%; z-index:20;
  transform:translate(-50%,-50%);
  backdrop-filter:blur(24px) saturate(1.3); -webkit-backdrop-filter:blur(24px) saturate(1.3);
  background:rgba(255,255,255,0.9); border:1px solid rgba(255,255,255,0.3);
  border-radius:50%; width:100px; height:100px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 40px rgba(0,0,0,0.15);
}
@media(max-width:768px) { .picker-logo { width:80px; height:80px } }
.picker-logo svg { width:50px; height:50px }
@media(max-width:768px) { .picker-logo svg { width:40px; height:40px } }
.picker-logo .logo-fill { fill:var(--t1) }
.picker-logo .logo-stroke { fill:none; stroke:var(--t1); stroke-width:4; stroke-miterlimit:10 }

.picker-side {
  position:relative; overflow:hidden; cursor:pointer;
}
.picker-side img {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform 0.8s var(--ease);
}
.picker-side:hover img { transform:scale(1.04) }
.picker-side::after {
  content:''; position:absolute; inset:0;
  background:rgba(0,0,0,0.35);
  transition:background 0.5s var(--ease);
}
.picker-side:hover::after { background:rgba(0,0,0,0.2) }

.picker-content {
  position:relative; z-index:1; color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  height:100%; padding:24px; text-align:center;
}
.picker-label {
  font-size:var(--t-xs); font-weight:600; letter-spacing:0.14em; text-transform:uppercase;
  opacity:0.7; margin-bottom:6px;
}
.picker-name {
  font-size:var(--t-4xl); font-weight:600; letter-spacing:-0.04em;
  margin-bottom:6px; text-wrap:balance;
}
.picker-addr { font-size:var(--t-sm); opacity:0.65; margin-bottom:24px }
.picker-enter {
  display:inline-flex; align-items:center; gap:6px;
  font-size:var(--t-sm); font-weight:500;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  background:rgba(255,255,255,0.15); border:1px solid rgba(255,255,255,0.25);
  border-radius:var(--r-full); padding:10px 24px;
  transition:all var(--med) var(--ease);
}
.picker-side:hover .picker-enter { background:rgba(255,255,255,0.25) }
.picker-enter svg { width:16px; height:16px }


/* --- CTA STRIP --- */
.cta-strip {
  background:linear-gradient(135deg, var(--g700) 0%, var(--g600) 40%, var(--g500) 100%);
  color:var(--ac-t); padding:64px 0; text-align:center;
}
.cta-strip h2 {
  font-size:var(--t-3xl); font-weight:600; letter-spacing:-0.03em;
  margin-bottom:8px; text-wrap:balance;
}
.cta-strip p { opacity:0.8; margin-bottom:24px; font-size:var(--t-base) }
.cta-strip .btn { background:#fff; color:var(--ac) }
.cta-strip .btn:hover { background:rgba(255,255,255,0.9) }


/* --- FEATURED DISHES --- */
.dish-card { text-align:center }
.dish-card-img {
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  aspect-ratio:1; margin-bottom:14px;
}
.dish-card-img img { width:100%; height:100%; object-fit:cover }
.dish-card h3 { font-size:var(--t-lg); font-weight:600; letter-spacing:-0.02em; margin-bottom:4px }
.dish-card p { font-size:var(--t-sm); color:var(--t2) }
.dish-card .card-price { margin-top:6px; color:var(--ac); font-size:var(--t-base) }


/* --- INFO ROW --- */
.info-row { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; text-align:center }
@media(max-width:600px) { .info-row { grid-template-columns:1fr; gap:20px } }
.info-item-icon {
  width:48px; height:48px; border-radius:var(--r-md);
  background:var(--ac-wash); color:var(--ac);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.info-item-icon svg { width:22px; height:22px }
.info-item .info-item-icon { margin:0 auto 12px }
.info-item h3 { font-size:var(--t-lg); font-weight:600; margin-bottom:4px }
.info-item p { font-size:var(--t-sm); color:var(--t2) }


/* --- GALLERY GRID --- */
.gallery-grid {
  display:grid; gap:6px;
  grid-template-columns:repeat(4,1fr); grid-auto-rows:200px;
}
.gallery-grid .span-2 { grid-column:span 2; grid-row:span 2 }
@media(max-width:768px) { .gallery-grid { grid-template-columns:repeat(2,1fr); grid-auto-rows:160px } }
@media(max-width:480px) { .gallery-grid { grid-template-columns:1fr; grid-auto-rows:200px } .gallery-grid .span-2 { grid-column:span 1; grid-row:span 1 } }
.gallery-item {
  position:relative; border-radius:var(--r-md); overflow:hidden; cursor:pointer;
}
.gallery-item img { width:100%; height:100%; object-fit:cover; transition:transform 0.6s var(--ease) }
.gallery-item:hover img { transform:scale(1.06) }


/* --- ENTRANCE ANIMATIONS --- */
@keyframes fade-up {
  from { opacity:0; transform:translateY(16px) }
  to { opacity:1; transform:none }
}
.fade-up { animation:fade-up 0.6s var(--ease) both }
.fade-up-d1 { animation-delay:0.1s }
.fade-up-d2 { animation-delay:0.2s }
.fade-up-d3 { animation-delay:0.3s }
.fade-up-d4 { animation-delay:0.4s }


/* --- MENU PAGE --- */
.menu-category { margin-bottom:48px }
.menu-category-title {
  font-size:var(--t-2xl); font-weight:600; letter-spacing:-0.03em;
  padding-bottom:12px; border-bottom:2px solid var(--ac); margin-bottom:20px;
}
.menu-category-desc { font-size:var(--t-sm); color:var(--t2); margin:-12px 0 20px; line-height:1.6 }

.menu-item { display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:10px 0; border-bottom:1px solid var(--bg3) }
.menu-item:last-child { border-bottom:none }
.menu-item-info { flex:1 }
.menu-item-name { font-weight:500 }
.menu-item-desc { font-size:var(--t-sm); color:var(--t2); margin-top:2px }
.menu-item-badges { display:flex; gap:4px; margin-top:4px }
.menu-item-price { font-weight:600; white-space:nowrap; color:var(--ac) }
.menu-item-prices { display:flex; gap:12px; font-size:var(--t-sm); white-space:nowrap }

.allergen-key { display:flex; flex-wrap:wrap; gap:16px; padding:20px; background:var(--bg2); border-radius:var(--r-lg); margin-top:40px }
.allergen-key-item { display:flex; align-items:center; gap:6px; font-size:var(--t-sm); color:var(--t2) }
.spice-dot { width:8px; height:8px; border-radius:50% }
.spice-hot { background:#DC2626 }
.spice-medium { background:#F59E0B }
.spice-mild { background:#6FB48A }


/* --- PAGE HEADER (inner pages) --- */
.page-header {
  padding:calc(var(--header-h) + 48px) 0 48px;
  background:var(--bg2); border-bottom:1px solid var(--bd);
}
.page-header h1 {
  font-size:var(--t-3xl); font-weight:600; letter-spacing:-0.03em; text-wrap:balance;
}
.page-header p { color:var(--t2); font-size:var(--t-base); margin-top:4px }


/* --- ANNOUNCEMENT BANNER --- */
.announcement-bar {
  background:linear-gradient(135deg, var(--g800) 0%, var(--g700) 100%);
  color:#fff; text-align:center; padding:10px 24px;
  font-size:var(--t-sm); font-weight:500;
  position:relative; z-index:99;
}
.announcement-bar strong { font-weight:600 }
.announcement-bar + .site-header { top:0 }


/* --- LIGHTBOX --- */
.lightbox-overlay {
  position:fixed; inset:0; z-index:10000;
  background:rgba(0,0,0,0.92); display:none;
  align-items:center; justify-content:center;
  cursor:zoom-out; backdrop-filter:blur(4px);
}
.lightbox-overlay.active { display:flex }
.lightbox-overlay img {
  max-width:90vw; max-height:85vh;
  border-radius:var(--r-md); box-shadow:0 20px 60px rgba(0,0,0,0.5);
  object-fit:contain;
}
.lightbox-close {
  position:absolute; top:20px; right:24px;
  width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,0.15); color:#fff;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; border:none; font-size:20px;
  transition:background var(--fast) var(--ease);
}
.lightbox-close:hover { background:rgba(255,255,255,0.3) }
.lightbox-nav {
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,0.15); color:#fff; border:none;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:18px;
  transition:background var(--fast) var(--ease);
}
.lightbox-nav:hover { background:rgba(255,255,255,0.3) }
.lightbox-prev { left:16px }
.lightbox-next { right:16px }
.lightbox-counter {
  position:absolute; bottom:20px; left:50%; transform:translateX(-50%);
  color:rgba(255,255,255,0.6); font-size:var(--t-sm);
}


/* --- BRANCH SWITCHER --- */
.branch-switcher {
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:90;
  display:flex; align-items:center; gap:0;
  background:var(--glass); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-bd); border-radius:var(--r-full);
  box-shadow:var(--sh-lg); overflow:hidden;
}
.branch-switcher a {
  padding:8px 20px; font-size:var(--t-xs); font-weight:600;
  color:var(--t2); transition:all var(--med) var(--ease);
  white-space:nowrap; text-decoration:none;
}
.branch-switcher a:hover { color:var(--t1); background:var(--bg2) }
.branch-switcher a.current { background:var(--ac); color:#fff }
.branch-switcher-sep { width:1px; height:20px; background:var(--bd) }
@media(max-width:768px) {
  .branch-switcher { bottom:calc(var(--tab-h) + env(safe-area-inset-bottom, 0) + 12px) }
}


/* --- SOCIAL LINKS --- */
.footer-socials { display:flex; gap:10px; margin-top:16px }
.footer-socials a {
  width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,0.1); color:rgba(255,255,255,0.6);
  display:flex; align-items:center; justify-content:center;
  transition:all var(--fast) var(--ease);
}
.footer-socials a:hover { background:rgba(255,255,255,0.2); color:#fff }
.footer-socials a svg { width:18px; height:18px }


/* --- DELIVERY BUTTON --- */
.header-delivery {
  display:flex; align-items:center; gap:4px;
  padding:6px 14px; border-radius:var(--r-full);
  font-size:var(--t-xs); font-weight:600;
  background:var(--ac); color:#fff;
  transition:opacity var(--fast) var(--ease);
  white-space:nowrap;
}
.header-delivery:hover { opacity:0.85 }
.header-delivery svg { width:14px; height:14px }

/* === CART / ORDERING SYSTEM === */

/* Add-to-cart button on menu items */
.menu-add-btn {
  flex-shrink:0; width:32px; height:32px; border-radius:50%;
  background:var(--ac); color:#fff; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:transform var(--fast) var(--ease), background var(--fast) var(--ease);
  margin-left:8px;
}
.menu-add-btn:hover { background:var(--ac-h); transform:scale(1.1) }
.menu-add-btn:active { transform:scale(0.95) }
.menu-add-btn svg { pointer-events:none }

/* Variant picker dropdown */
.variant-picker {
  position:absolute; right:0; top:100%; z-index:50;
  background:var(--bg); border:1px solid var(--bd); border-radius:var(--r-md);
  box-shadow:var(--sh-lg); min-width:200px; padding:8px 0; margin-top:4px;
}
.vp-title { padding:6px 16px; font-size:var(--t-xs); font-weight:600; color:var(--t3); text-transform:uppercase; letter-spacing:0.05em }
.vp-opt {
  display:flex; justify-content:space-between; align-items:center; width:100%;
  padding:10px 16px; border:none; background:none; cursor:pointer;
  font-size:var(--t-sm); color:var(--t1); text-align:left;
  transition:background var(--fast) var(--ease);
}
.vp-opt:hover { background:var(--ac-wash) }
.vp-opt span:last-child { font-weight:600; color:var(--ac) }

/* Cart toast */
#cart-toast {
  position:fixed; bottom:100px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--n900); color:#fff; padding:10px 20px; border-radius:var(--r-full);
  font-size:var(--t-sm); font-weight:500; white-space:nowrap; z-index:9000;
  opacity:0; pointer-events:none;
  transition:opacity 0.3s, transform 0.3s;
}
#cart-toast.show { opacity:1; transform:translateX(-50%) translateY(0) }

/* Floating basket bar */
#basket-bar {
  position:fixed; bottom:0; left:0; right:0; z-index:800;
  background:var(--ac); color:#fff; padding:14px 24px;
  display:flex; justify-content:space-between; align-items:center;
  cursor:pointer; transform:translateY(100%);
  transition:transform 0.3s cubic-bezier(0.4,0,0.2,1);
  box-shadow:0 -4px 20px rgba(0,0,0,0.15);
}
#basket-bar.visible { transform:translateY(0) }
.basket-label { display:flex; align-items:center; gap:8px; font-weight:600 }
.basket-label svg { width:20px; height:20px }
.basket-count { font-size:var(--t-sm); opacity:0.85 }
.basket-total { font-size:var(--t-lg); font-weight:700 }
@media(max-width:768px) {
  #basket-bar { bottom:60px; transform:translateY(calc(100% + 60px)) }
  #basket-bar.visible { transform:translateY(0) }
}

/* Cart backdrop */
#cart-backdrop {
  position:fixed; inset:0; z-index:900; background:rgba(0,0,0,0.4);
  opacity:0; pointer-events:none; transition:opacity 0.3s;
}
#cart-backdrop.visible { opacity:1; pointer-events:auto }

/* Cart drawer */
#cart-drawer {
  position:fixed; top:0; right:0; bottom:0; z-index:910;
  width:380px; max-width:90vw; background:var(--bg);
  transform:translateX(100%); transition:transform 0.3s cubic-bezier(0.4,0,0.2,1);
  display:flex; flex-direction:column;
  box-shadow:-8px 0 30px rgba(0,0,0,0.1);
}
#cart-drawer.open { transform:translateX(0) }
.cart-drawer-head {
  display:flex; justify-content:space-between; align-items:center;
  padding:20px 24px; border-bottom:1px solid var(--bd);
}
.cart-drawer-head h2 { font-size:var(--t-lg); font-weight:700; margin:0 }
.cart-close {
  width:32px; height:32px; border-radius:50%; border:none;
  background:var(--bg2); cursor:pointer; display:flex;
  align-items:center; justify-content:center; font-size:18px; color:var(--t2);
}
.cart-close:hover { background:var(--bg3) }
.cart-items { flex:1; overflow-y:auto; padding:16px 24px }
.cart-empty { text-align:center; padding:48px 16px; color:var(--t3); font-size:var(--t-sm) }
.cart-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 0; border-bottom:1px solid var(--bg3);
}
.cart-row:last-child { border-bottom:none }
.cart-row-info { flex:1; min-width:0 }
.cart-row-name { font-size:var(--t-sm); font-weight:500; display:block }
.cart-row-line { font-size:var(--t-sm); color:var(--ac); font-weight:600 }
.cart-row-ctrls { display:flex; align-items:center; gap:4px; margin-left:12px }
.cq-btn {
  width:28px; height:28px; border-radius:50%; border:1.5px solid var(--bd);
  background:var(--bg); cursor:pointer; font-size:14px; font-weight:600;
  display:flex; align-items:center; justify-content:center; color:var(--t1);
  transition:all var(--fast) var(--ease);
}
.cq-btn:hover { border-color:var(--ac); color:var(--ac) }
.cq-val { width:24px; text-align:center; font-size:var(--t-sm); font-weight:600 }
.cart-drawer-foot {
  padding:20px 24px; border-top:1px solid var(--bd); background:var(--bg);
}
.cart-sub-row {
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:16px; font-size:var(--t-base);
}
.cart-sub-row strong { font-weight:700 }
.cart-sub-val { font-weight:700; font-size:var(--t-lg); color:var(--ac) }
.cart-checkout-btn {
  width:100%; padding:14px; border:none; border-radius:var(--r-md);
  background:var(--ac); color:#fff; font-size:var(--t-base);
  font-weight:600; cursor:pointer;
  transition:background var(--fast) var(--ease);
}
.cart-checkout-btn:hover { background:var(--ac-h) }

/* Header cart icon */
.header-cart-btn {
  position:relative; display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%; cursor:pointer;
  transition:background var(--fast) var(--ease);
}
.header-cart-btn:hover { background:var(--ac-wash) }
.header-cart-btn svg { width:20px; height:20px; color:var(--t1) }
#cart-badge {
  position:absolute; top:-2px; right:-2px;
  width:18px; height:18px; border-radius:50%;
  background:var(--ac); color:#fff; font-size:10px; font-weight:700;
  display:none; align-items:center; justify-content:center;
  line-height:1;
}

/* === CHECKOUT PAGE === */
.checkout-wrap { max-width:720px; margin:0 auto }
.checkout-section {
  background:var(--bg); border:1px solid var(--bd);
  border-radius:var(--r-lg); padding:24px; margin-bottom:20px;
}
.checkout-section h3 {
  font-size:var(--t-base); font-weight:700; margin:0 0 16px;
  padding-bottom:12px; border-bottom:1px solid var(--bg3);
}
.checkout-item {
  display:flex; justify-content:space-between; align-items:center;
  padding:8px 0; font-size:var(--t-sm);
}
.checkout-item-name { flex:1 }
.checkout-item-qty { color:var(--t3); margin:0 12px; min-width:30px; text-align:center }
.checkout-item-total { font-weight:600; min-width:60px; text-align:right }
.checkout-totals {
  margin-top:12px; padding-top:12px; border-top:1px solid var(--bg3);
}
.checkout-totals .checkout-item { font-weight:600 }
.checkout-totals .checkout-grand { font-size:var(--t-lg); color:var(--ac) }

.order-type-toggle {
  display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:20px;
}
.order-type-btn {
  padding:14px; border:2px solid var(--bd); border-radius:var(--r-md);
  background:var(--bg); cursor:pointer; text-align:center;
  font-weight:600; font-size:var(--t-sm);
  transition:all var(--fast) var(--ease);
}
.order-type-btn.active { border-color:var(--ac); background:var(--ac-wash); color:var(--ac) }
.order-type-btn.disabled {
  opacity:0.35; cursor:not-allowed; pointer-events:none;
}
.checkout-field { margin-bottom:14px }
.checkout-field label {
  display:block; font-size:var(--t-sm); font-weight:600;
  color:var(--t2); margin-bottom:5px;
}
.checkout-field input, .checkout-field textarea, .checkout-field select {
  width:100%; padding:10px 14px; border:1.5px solid var(--bd);
  border-radius:var(--r-sm); font-size:var(--t-sm); font-family:inherit;
  background:var(--bg); color:var(--t1);
  transition:border-color var(--fast) var(--ease);
}
.checkout-field input:focus, .checkout-field textarea:focus {
  outline:none; border-color:var(--ac);
}
.checkout-field textarea { resize:vertical; min-height:60px }
.checkout-row { display:grid; grid-template-columns:1fr 1fr; gap:12px }
@media(max-width:480px) { .checkout-row { grid-template-columns:1fr } }
.delivery-fields { display:none }
.delivery-fields.visible { display:block }
.checkout-note {
  padding:12px 16px; border-radius:var(--r-sm);
  background:var(--ac-wash); color:var(--ac);
  font-size:var(--t-sm); margin-bottom:16px;
}
.checkout-note.warn {
  background:rgba(180,83,9,0.08); color:#B45309;
}
.checkout-submit {
  width:100%; padding:16px; border:none; border-radius:var(--r-md);
  background:var(--ac); color:#fff; font-size:var(--t-base);
  font-weight:700; cursor:pointer;
  transition:background var(--fast) var(--ease);
}
.checkout-submit:hover { background:var(--ac-h) }
.checkout-submit:disabled { opacity:0.4; cursor:not-allowed }
.checkout-empty { text-align:center; padding:64px 24px; color:var(--t3) }
.checkout-empty a { color:var(--ac); font-weight:600 }

/* Payment placeholder */
.payment-placeholder {
  padding:24px; border:2px dashed var(--bd); border-radius:var(--r-md);
  text-align:center; color:var(--t3); font-size:var(--t-sm);
}

/* Order success */
.order-success { text-align:center; padding:48px 24px }
.order-success .tick {
  width:56px; height:56px; border-radius:50%; margin:0 auto 16px;
  background:var(--ac-wash); color:var(--ac);
  display:flex; align-items:center; justify-content:center;
}
.order-success h2 { font-size:var(--t-2xl); font-weight:700; margin-bottom:8px }
.order-success .order-num { font-size:var(--t-lg); color:var(--ac); font-weight:700; margin-bottom:16px }