@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Oswald:wght@500;600&display=swap');

:root {
  --ink: #17130f;
  --charcoal: #1d1a16;
  --charcoal-2: #29231d;
  --paper: #f0dcc0;
  --paper-light: #fff9ee;
  --copper: #b66d35;
  --gold: #e2b66b;
  --muted: #746c61;
  --green: #3f5f46;
  --line: rgba(23, 19, 15, .14);
  --shadow: 0 22px 70px rgba(37, 26, 14, .14);
  --radius: 22px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 0; overflow-x: clip; background: #f7f2e9; color: var(--ink); font-family: "DM Sans", system-ui, sans-serif; font-size: 16px; line-height: 1.5; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
.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; }
.demo-ribbon { background: var(--gold); color: var(--ink); text-align: center; padding: 7px 16px; font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

.site-header { height: 86px; padding: 0 clamp(18px, 4vw, 64px); display: flex; align-items: center; justify-content: space-between; background: rgba(22, 19, 15, .96); color: white; position: sticky; top: 0; z-index: 40; backdrop-filter: blur(16px); border-bottom: 1px solid rgba(255,255,255,.08); }
.brand { color: inherit; text-decoration: none; display: flex; gap: 12px; align-items: center; min-width: 0; }
.brand-title { font-family: Georgia, serif; font-size: clamp(1.3rem, 2.25vw, 1.85rem); font-weight: 700; letter-spacing: .01em; line-height: 1; white-space: nowrap; }
.brand-title > span { color: var(--gold); font-family: "DM Sans", system-ui, sans-serif; font-size: .55em; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-left: .45em; }
.brand-mark { width: 38px; height: 38px; display: inline-grid; place-items: center; border: 1px solid rgba(226,182,107,.55); border-radius: 50%; color: var(--gold); font-size: 1rem; flex: 0 0 auto; }
.header-actions { display: flex; gap: 10px; align-items: center; }
.site-sections { min-height: 48px; padding: 0 clamp(18px, 4vw, 64px); display: flex; align-items: stretch; gap: 6px; background: #0f0d0a; border-top: 1px solid rgba(255,255,255,.05); border-bottom: 1px solid rgba(226,182,107,.28); }
.site-sections a { color: rgba(255,255,255,.62); text-decoration: none; display: inline-flex; align-items: center; padding: 0 18px; border-bottom: 2px solid transparent; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.site-sections a:hover, .site-sections a:focus-visible { color: white; }
.site-sections a.active { color: var(--gold); border-bottom-color: var(--gold); }
.lang-button { min-width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.2); background: transparent; color: white; border-radius: 999px; padding: 0 12px; font-size: .78rem; font-weight: 800; letter-spacing: .08em; }
.icon-button { border: 1px solid rgba(255,255,255,.2); background: transparent; color: inherit; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; }
.cart-button { border: 0; background: var(--gold); color: var(--ink); min-height: 43px; border-radius: 999px; padding: 0 8px 0 18px; display: flex; align-items: center; gap: 12px; font-weight: 700; }
.cart-button b { min-width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: white; }

.hero { min-height: 470px; position: relative; overflow: hidden; background: var(--charcoal); color: white; display: flex; align-items: center; }
.hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(16,14,11,.94) 0%, rgba(16,14,11,.78) 40%, rgba(16,14,11,.16) 78%), linear-gradient(0deg, rgba(16,14,11,.48), transparent 55%); }
.hero-content { position: relative; z-index: 1; width: min(1200px, calc(100% - 40px)); margin: 0 auto; padding: 64px 0 72px; }
.eyebrow { display: block; color: var(--gold); text-transform: uppercase; letter-spacing: .19em; font-size: .76rem; font-weight: 700; margin-bottom: 13px; }
.eyebrow.ink { color: var(--copper); }
.hero h1 { margin: 0; max-width: 620px; font-family: Georgia, serif; font-size: clamp(3rem, 7vw, 6.2rem); line-height: .89; font-weight: 600; letter-spacing: -.055em; text-wrap: balance; }
.hero-logo { display: block; width: clamp(280px, 29vw, 360px); height: auto; margin: -7px 0 8px -14px; filter: drop-shadow(0 16px 28px rgba(0,0,0,.52)); }
.hero p { color: rgba(255,255,255,.78); margin: 20px 0 28px; font-size: 1.05rem; }
.service-switch { display: inline-flex; padding: 4px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; background: rgba(0,0,0,.26); backdrop-filter: blur(10px); }
.service { border: 0; background: transparent; color: rgba(255,255,255,.66); border-radius: 999px; padding: 11px 18px; font-weight: 600; }
.service.active { background: var(--paper-light); color: var(--ink); }
.hero-status { position: absolute; z-index: 2; bottom: 28px; right: max(20px, calc((100% - 1200px)/2)); background: rgba(20,17,13,.76); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: 10px 16px; font-size: .84rem; }
.hero-status span { display: inline-block; width: 8px; height: 8px; background: #77b97f; border-radius: 50%; margin-right: 8px; box-shadow: 0 0 0 4px rgba(119,185,127,.13); }
.hero-status small { color: rgba(255,255,255,.5); }
.hero-order-callout { width: min(350px, 33vw); position: absolute; right: 0; top: 50%; display: grid; gap: 7px; padding: 22px; border: 1px solid rgba(230,185,109,.46); border-radius: 16px; background: rgba(20,15,11,.82); box-shadow: 0 18px 48px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.04); transform: translateY(-50%); backdrop-filter: blur(14px); }
.hero-call-label { color: rgba(255,255,255,.58); font-size: .72rem; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.hero-phone-link { width: fit-content; color: white; font-family: Georgia, serif; font-size: clamp(1.65rem, 2.7vw, 2.35rem); font-weight: 800; line-height: 1; text-decoration: none; }
.hero-phone-link:hover, .hero-phone-link:focus-visible { color: #f4d28e; }
.hero-order-or { margin: 3px 0; color: rgba(255,255,255,.36); font-size: .72rem; text-transform: uppercase; }
.hero-click-link { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 12px; padding: 12px 14px; border-radius: 11px; background: #e6b96d; color: #17130f; text-decoration: none; box-shadow: 0 8px 22px rgba(0,0,0,.22); }
.hero-click-link span { grid-column: 1; font-size: .66rem; font-weight: 750; opacity: .72; }
.hero-click-link strong { grid-column: 1; font-size: .96rem; }
.hero-click-link b { grid-column: 2; grid-row: 1 / 3; font-size: 1.25rem; }
.hero-click-link:hover, .hero-click-link:focus-visible { filter: brightness(1.08); transform: translateY(-1px); }

.menu-shell { width: min(1200px, calc(100% - 40px)); margin: 0 auto; padding: 72px 0 90px; }
.menu-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 32px; }
h2 { font-family: Georgia, serif; font-size: clamp(2.1rem, 4vw, 3.5rem); letter-spacing: -.045em; line-height: 1; margin: 0; }
.search-box { width: min(360px, 100%); height: 50px; border-radius: 999px; border: 1px solid var(--line); background: white; display: flex; align-items: center; padding: 0 18px; gap: 10px; box-shadow: 0 8px 26px rgba(31,24,16,.05); }
.search-box span { color: var(--muted); font-size: 1.35rem; }
.search-box input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); min-width: 0; }
.search-box input::placeholder { color: #9a9288; }
.category-nav { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 4px 0 18px; position: sticky; top: 76px; z-index: 20; background: linear-gradient(#f7f2e9 75%, rgba(247,242,233,0)); }
.category-nav::-webkit-scrollbar { display: none; }
.category-chip { border: 1px solid var(--line); background: rgba(255,255,255,.78); color: var(--ink); border-radius: 999px; padding: 10px 15px; white-space: nowrap; font-size: .88rem; font-weight: 600; }
.category-chip.active { background: var(--ink); color: white; border-color: var(--ink); }
.content-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 42px; align-items: start; }
.result-meta { color: var(--muted); font-size: .84rem; margin: 2px 0 16px; }
.menu-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.menu-item { background: rgba(255,255,255,.88); border: 1px solid var(--line); border-radius: 18px; padding: 19px; display: grid; grid-template-columns: 1fr auto; gap: 12px 16px; min-height: 154px; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.menu-item:hover { transform: translateY(-2px); border-color: rgba(182,109,53,.45); box-shadow: 0 16px 38px rgba(42,29,17,.08); }
.item-category { color: var(--copper); font-size: .68rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.menu-item h3 { margin: 5px 0 8px; font-family: Georgia, serif; font-size: 1.25rem; line-height: 1.08; letter-spacing: -.02em; }
.menu-item p { margin: 0; color: var(--muted); font-size: .83rem; line-height: 1.45; }
.price { font-family: "Oswald", Impact, sans-serif; font-size: 1.08rem; white-space: nowrap; }
.add-button { align-self: end; justify-self: end; grid-column: 2; border: 0; width: 38px; height: 38px; border-radius: 50%; background: var(--ink); color: white; font-size: 1.25rem; display: grid; place-items: center; transition: transform .16s, background .16s; }
.add-button:hover { transform: scale(1.06); background: var(--copper); }
.add-button:active { transform: scale(.96); }
.item-note { grid-column: 1 / -1; color: var(--green); font-size: .74rem; font-weight: 700; }
.empty-state { background: white; border: 1px dashed var(--line); padding: 60px 20px; text-align: center; border-radius: var(--radius); }
.empty-state span { color: var(--copper); font-size: 1.5rem; }
.empty-state h3 { font-family: Georgia, serif; font-size: 1.5rem; margin: 10px 0 4px; }
.empty-state p { color: var(--muted); margin: 0; }

.order-card { position: sticky; top: 142px; background: var(--charcoal); color: white; border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); }
.order-card-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 17px; border-bottom: 1px solid rgba(255,255,255,.1); font-weight: 700; }
.order-card-head small { color: var(--gold); font-weight: 600; }
.order-empty { min-height: 180px; display: grid; place-content: center; text-align: center; color: rgba(255,255,255,.5); }
.order-empty span { font-size: 2rem; color: var(--gold); }
.order-empty p { max-width: 190px; font-size: .88rem; }
.order-lines { max-height: min(54vh, 560px); overflow-y: auto; padding-right: 3px; }
.cart-line { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,.09); }
.cart-line strong { font-size: .88rem; }
.cart-line small { color: rgba(255,255,255,.55); display: block; margin-top: 2px; }
.qty-control { display: flex; align-items: center; gap: 8px; }
.qty-control button { width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); color: white; background: transparent; display: grid; place-items: center; }
.qty-control span { font-size: .84rem; min-width: 12px; text-align: center; }
.order-total { display: flex; align-items: center; justify-content: space-between; padding: 18px 0 15px; font-size: .9rem; }
.order-total strong { font-family: Georgia, serif; font-size: 1.45rem; }
.primary-button { width: 100%; min-height: 50px; border: 0; border-radius: 999px; background: var(--gold); color: var(--ink); font-weight: 700; }
.primary-button:disabled { opacity: .36; cursor: not-allowed; }
.order-note { color: rgba(255,255,255,.43); font-size: .7rem; line-height: 1.4; text-align: center; margin: 11px 8px 0; }
.menu-optimizer-card { margin: 14px 0 5px; padding: 15px; border: 1px solid rgba(226,182,107,.48); border-radius: 14px; background: linear-gradient(145deg, rgba(226,182,107,.14), rgba(87,52,24,.16)); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.menu-optimizer-card h3 { margin: 7px 0 7px; font-family: Georgia, serif; font-size: 1.05rem; line-height: 1.15; color: #fff8e9; }
.menu-optimizer-card > p { margin: 0 0 10px; color: rgba(255,255,255,.68); font-size: .74rem; line-height: 1.45; }
.optimizer-kicker { display: flex; align-items: center; gap: 7px; color: var(--gold); font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.optimizer-kicker span { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; color: var(--ink); background: var(--gold); font-size: .7rem; }
.optimizer-formula { padding: 10px; border-radius: 10px; background: rgba(0,0,0,.22); }
.optimizer-formula > strong { display: block; color: #fff3d8; font-size: .8rem; }
.optimizer-formula > div { display: grid; gap: 3px; margin-top: 7px; }
.optimizer-formula span { color: rgba(255,255,255,.62); font-size: .64rem; line-height: 1.35; }
.optimizer-formula span b { color: rgba(255,255,255,.86); margin-right: 4px; }
.optimizer-comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.optimizer-comparison span { display: grid; gap: 2px; padding: 8px 9px; border-radius: 9px; background: rgba(0,0,0,.18); }
.optimizer-comparison small { color: rgba(255,255,255,.48); font-size: .6rem; text-transform: uppercase; letter-spacing: .06em; }
.optimizer-comparison del { color: rgba(255,255,255,.6); font-size: .86rem; }
.optimizer-comparison strong { color: #fff; font-family: Georgia, serif; font-size: 1rem; }
.menu-optimizer-card .optimizer-saving { margin: 10px 0; color: #dff7c9; text-align: center; font-size: .72rem; }
.optimizer-saving strong { color: #b9f184; font-size: 1rem; }
.optimizer-apply, .optimizer-undo { width: 100%; min-height: 42px; padding: 8px 12px; border-radius: 999px; font-weight: 800; font-size: .72rem; }
.optimizer-apply { border: 0; background: linear-gradient(135deg, #f0cb83, #d9a852); color: #1b130d; box-shadow: 0 8px 18px rgba(0,0,0,.18); }
.optimizer-undo { border: 1px solid rgba(255,255,255,.2); background: transparent; color: rgba(255,255,255,.78); }
.optimizer-consent { display: block; margin-top: 7px; color: rgba(255,255,255,.42); text-align: center; font-size: .59rem; }
.menu-optimizer-card.applied { border-color: rgba(157,219,112,.52); background: linear-gradient(145deg, rgba(107,169,77,.18), rgba(32,74,31,.18)); }
.menu-optimizer-card.applied .optimizer-kicker { color: #c9efaa; }
.menu-optimizer-card.applied .optimizer-kicker span { background: #a9dc7d; }
.menu-optimizer-card.compact { padding: 13px; }
.menu-optimizer-card.compact h3 { margin-bottom: 3px; color: #b9f184; }
.menu-optimizer-card.compact .optimizer-apply { margin-top: 2px; }
.optimization-summary-line { color: #4d7f2d; background: #eff8e8; margin-inline: -8px; padding-inline: 8px; border-radius: 8px; }

.optimization-modal { position: fixed; inset: 0; z-index: 72; display: grid; place-items: center; padding: 20px; overflow-y: auto; background: rgba(12,8,5,.82); backdrop-filter: blur(8px); }
.optimization-modal-panel { width: min(760px, 100%); position: relative; overflow: hidden; padding: clamp(30px, 5vw, 54px); border: 1px solid rgba(153,102,48,.58); border-radius: 24px; color: var(--ink); background:
  radial-gradient(circle at 88% 8%, rgba(226,182,107,.24), transparent 24%),
  repeating-linear-gradient(92deg, rgba(101,68,34,.025) 0 1px, transparent 1px 6px),
  var(--paper-light); box-shadow: 0 34px 100px rgba(0,0,0,.52), inset 0 0 0 7px rgba(118,75,34,.07); }
.optimization-modal-panel::after { content: "✦"; position: absolute; right: 30px; bottom: 18px; color: rgba(116,72,32,.16); font-size: 4rem; pointer-events: none; }
.optimization-modal-close { position: absolute; z-index: 2; top: 16px; right: 16px; border-color: rgba(73,48,27,.22); color: var(--ink); }
.optimization-modal-kicker { display: flex; align-items: center; gap: 9px; color: #7b4a22; font-size: .7rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.optimization-modal-kicker span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: #24170f; background: var(--gold); }
.optimization-saving-burst { display: inline-grid; gap: 1px; margin: 22px 0 12px; padding: 10px 16px; border-radius: 999px; color: white; background: linear-gradient(135deg, #315d2c, #1d3d21); box-shadow: 0 8px 20px rgba(34,73,32,.2); }
.optimization-saving-burst small { font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.optimization-saving-burst strong { color: #d5ffad; font-family: Georgia, serif; font-size: 1.55rem; line-height: 1; }
.optimization-modal-panel h2 { max-width: 650px; margin: 4px 0 13px; font-size: clamp(1.65rem, 4vw, 2.65rem); line-height: 1.05; letter-spacing: -.035em; }
.optimization-modal-panel > div > p { max-width: 640px; margin: 0 0 22px; color: #5d5145; font-size: .95rem; line-height: 1.6; }
.optimization-modal-offer { padding: 18px; border: 1px solid rgba(113,72,35,.22); border-radius: 15px; background: rgba(255,255,255,.56); }
.optimization-modal-offer > strong { display: block; margin-bottom: 10px; font-family: Georgia, serif; font-size: 1.08rem; }
.optimization-modal-offer > div:not(.optimization-modal-prices) { display: grid; gap: 4px; color: #6c5b4b; font-size: .75rem; }
.optimization-modal-offer > div:not(.optimization-modal-prices) span b { color: #342419; margin-right: 5px; }
.optimization-modal-prices { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(113,72,35,.17); }
.optimization-modal-prices span { display: grid; gap: 3px; }
.optimization-modal-prices span:last-child { text-align: right; }
.optimization-modal-prices small { color: #796a5c; font-size: .65rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.optimization-modal-prices del { color: #88786a; font-size: 1.1rem; }
.optimization-modal-prices strong { color: #376c2d; font-family: Georgia, serif; font-size: 1.45rem; }
.optimization-modal-prices > b { color: #a46d37; font-size: 1.25rem; }
.optimization-modal-panel h3 { margin: 22px 0 12px; font-family: Georgia, serif; font-size: 1.12rem; }
.optimization-modal-actions { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1.25fr; gap: 10px; }
.optimization-modal-actions button { min-height: 52px; padding: 10px 16px; border-radius: 999px; font-weight: 800; }
.optimization-keep { border: 1px solid rgba(56,38,24,.24); background: rgba(255,255,255,.58); color: #332217; }
.optimization-choose { border: 0; color: #1d150f; background: linear-gradient(135deg, #f0cb83, #d9a852); box-shadow: 0 10px 24px rgba(122,79,32,.2); }
.optimization-modal-note { display: block; margin-top: 10px; color: #827466; text-align: center; font-size: .67rem; }

.practical { background: var(--paper); padding: 70px max(20px, calc((100% - 1200px)/2)); display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; position: relative; overflow: hidden; }
.practical::after { content: "✦"; position: absolute; color: rgba(23,19,15,.06); font-size: 18rem; right: 18%; top: -100px; }
.practical > * { position: relative; z-index: 1; }
.practical p { color: #5d5145; margin: 18px 0 0; }
.practical-actions { display: grid; min-width: 330px; }
.practical-actions a, .practical-actions button { display: flex; align-items: center; justify-content: space-between; gap: 28px; background: transparent; color: var(--ink); text-decoration: none; border: 0; border-bottom: 1px solid rgba(23,19,15,.28); padding: 16px 0; font-weight: 700; text-align: left; }
.practical-actions span { color: var(--copper); font-size: 1.2rem; }
footer { background: var(--charcoal); color: white; padding: 52px max(20px, calc((100% - 1200px)/2)); display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 18px; }
footer p { margin: 0; }
footer p strong { font-family: Georgia, serif; font-size: 1.08rem; }
footer small { color: rgba(255,255,255,.45); text-align: right; }
.restaurant-demo-link { border: 1px solid rgba(226,182,107,.32); background: transparent; color: var(--gold); padding: 10px 14px; border-radius: 999px; font-weight: 700; white-space: nowrap; }
.restaurant-demo-link span { color: rgba(255,255,255,.45); font-weight: 500; }

.mobile-cart { position: fixed; z-index: 35; left: 12px; right: 12px; bottom: 12px; display: none; border: 0; border-radius: 16px; background: var(--gold); color: var(--ink); padding: 14px 17px; align-items: center; justify-content: space-between; font-weight: 700; box-shadow: 0 14px 40px rgba(19,14,10,.3); }
.mobile-cart > span:first-child { font-size: .78rem; }
.mobile-cart b { background: var(--ink); color: white; border-radius: 50%; display: inline-grid; place-items: center; width: 25px; height: 25px; margin-right: 4px; }
.drawer-backdrop { position: fixed; inset: 0; z-index: 50; background: rgba(12,10,8,.62); backdrop-filter: blur(3px); }
.drawer { position: fixed; z-index: 51; right: 0; top: 0; height: 100dvh; width: min(430px, 100%); background: var(--charcoal); color: white; transform: translateX(105%); transition: transform .28s ease; display: grid; grid-template-rows: auto 1fr auto; box-shadow: -30px 0 80px rgba(0,0,0,.3); }
.drawer.open { transform: translateX(0); }
.drawer-head { padding: 24px; display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 1px solid rgba(255,255,255,.1); }
.drawer-head small { color: var(--gold); text-transform: uppercase; letter-spacing: .12em; }
.drawer-head h2 { font-size: 2rem; margin-top: 6px; }
.drawer-body { overflow-y: auto; padding: 6px 24px; }
.drawer-body .empty-drawer { min-height: 45vh; display: grid; place-content: center; text-align: center; color: rgba(255,255,255,.52); }
.drawer-foot { padding: 0 24px 24px; border-top: 1px solid rgba(255,255,255,.1); }
.info-modal { position: fixed; inset: 0; z-index: 60; background: rgba(12,10,8,.7); backdrop-filter: blur(5px); padding: 20px; display: grid; place-items: center; }
.info-panel { width: min(540px, 100%); position: relative; background: var(--paper-light); color: var(--ink); border-radius: 24px; padding: clamp(28px, 5vw, 52px); box-shadow: var(--shadow); }
.modal-close { position: absolute; right: 16px; top: 16px; border-color: var(--line); }
.info-panel p { color: var(--muted); }
.info-panel dl { margin: 28px 0 0; }
.info-panel dl div { border-top: 1px solid var(--line); padding: 14px 0; display: grid; grid-template-columns: 100px 1fr; gap: 18px; }
.info-panel dt { font-weight: 700; }
.info-panel dd { margin: 0; color: var(--muted); }
.checkout-modal, .restaurant-modal { position: fixed; inset: 0; z-index: 65; background: rgba(12,10,8,.74); backdrop-filter: blur(6px); padding: 20px; display: grid; place-items: center; overflow-y: auto; }
.checkout-panel { width: min(680px, 100%); max-height: calc(100dvh - 40px); overflow-y: auto; position: relative; background: var(--paper-light); color: var(--ink); border-radius: 24px; box-shadow: var(--shadow); }
.checkout-panel > .modal-close { z-index: 2; }
.checkout-progress { padding: 24px 72px 20px 28px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; border-bottom: 1px solid var(--line); }
.progress-step { position: relative; padding-top: 11px; color: var(--muted); font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; }
.progress-step::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; border-radius: 99px; background: #ded6ca; }
.progress-step.active { color: var(--ink); }
.progress-step.active::before, .progress-step.done::before { background: var(--copper); }
.checkout-body { padding: clamp(24px, 5vw, 42px); }
.checkout-body h2 { font-size: clamp(2rem, 6vw, 3rem); margin-bottom: 10px; }
.checkout-body > p { color: var(--muted); margin-top: 0; }
.checkout-form { margin-top: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.checkout-form label { display: grid; gap: 7px; color: var(--muted); font-size: .8rem; font-weight: 700; }
.checkout-form label:first-child, .checkout-form .full { grid-column: 1 / -1; }
.checkout-form input { min-height: 50px; border: 1px solid var(--line); background: white; border-radius: 12px; padding: 0 14px; outline: 0; color: var(--ink); }
.checkout-form input:focus { border-color: var(--copper); box-shadow: 0 0 0 3px rgba(182,109,53,.12); }
.checkout-summary { margin: 24px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 14px 0; }
.summary-line { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; color: var(--muted); font-size: .88rem; }
.summary-line strong { color: var(--ink); }
.summary-total { font-size: 1rem; margin-top: 6px; padding-top: 13px; border-top: 1px solid var(--line); }
.checkout-body .primary-button { max-width: 360px; }
.safe-note { display: flex; gap: 9px; align-items: flex-start; color: var(--muted); font-size: .76rem; margin-top: 13px; }
.status-view { text-align: center; padding: clamp(34px, 7vw, 64px); }
.status-icon { width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 22px; background: #f0e1c9; color: var(--copper); font-size: 1.9rem; }
.status-icon.success { background: #dfeade; color: var(--green); }
.status-view h2 { margin-bottom: 12px; }
.status-view > p { color: var(--muted); max-width: 470px; margin: 0 auto 24px; }
.order-reference { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: white; padding: 9px 15px; border-radius: 999px; margin-bottom: 22px; font-size: .82rem; }
.pulse-dot { width: 9px; height: 9px; background: #d39538; border-radius: 50%; box-shadow: 0 0 0 6px rgba(211,149,56,.13); }
.pickup-offer { background: white; border: 1px solid var(--line); border-radius: 18px; padding: 20px; margin: 22px auto; max-width: 430px; }
.pickup-offer small { display: block; color: var(--muted); }
.pickup-offer strong { display: block; font-family: Georgia, serif; font-size: 2rem; margin-top: 3px; }
.payment-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 24px 0 16px; }
.payment-option { border: 1px solid var(--line); background: white; border-radius: 14px; padding: 17px; text-align: left; font-weight: 700; }
.payment-option.active { border-color: var(--copper); box-shadow: inset 0 0 0 1px var(--copper); }
.payment-option small { display: block; color: var(--muted); font-weight: 400; margin-top: 3px; }
.pickup-ticket { max-width: 420px; margin: 24px auto; background: var(--ink); color: white; border-radius: 20px; padding: 24px; display: grid; grid-template-columns: 1fr auto; align-items: center; text-align: left; }
.pickup-ticket small { color: rgba(255,255,255,.55); }
.pickup-ticket strong { font-family: Georgia, serif; font-size: 2.2rem; }
.pickup-ticket .ticket-number { grid-row: 1 / 3; grid-column: 2; font-size: 1.55rem; color: var(--gold); }
.restaurant-panel { width: min(980px, 100%); max-height: calc(100dvh - 40px); overflow-y: auto; background: #181612; color: white; border: 1px solid rgba(255,255,255,.1); border-radius: 24px; padding: clamp(22px, 4vw, 38px); box-shadow: 0 32px 90px rgba(0,0,0,.42); }
.restaurant-panel-head { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 22px; border-bottom: 1px solid rgba(255,255,255,.1); }
.restaurant-panel-head h2 { font-size: 2.5rem; }
.restaurant-status { display: inline-flex; align-items: center; gap: 9px; margin: 18px 0; color: rgba(255,255,255,.58); font-size: .78rem; }
.restaurant-status span { width: 8px; height: 8px; background: #72b77b; border-radius: 50%; box-shadow: 0 0 0 5px rgba(114,183,123,.12); }
.restaurant-empty { min-height: 360px; display: grid; place-items: center; text-align: center; color: rgba(255,255,255,.46); }
.restaurant-empty strong { color: white; display: block; font-family: Georgia, serif; font-size: 1.4rem; margin-bottom: 6px; }
.incoming-order { background: #25211b; border: 1px solid rgba(226,182,107,.25); border-radius: 20px; overflow: hidden; }
.incoming-head { padding: 18px 20px; display: flex; justify-content: space-between; align-items: center; gap: 16px; background: rgba(226,182,107,.08); border-bottom: 1px solid rgba(255,255,255,.08); }
.incoming-head strong { color: var(--gold); }
.incoming-head small { color: rgba(255,255,255,.52); }
.incoming-body { display: grid; grid-template-columns: 1.25fr .75fr; gap: 28px; padding: 22px; }
.incoming-items { border-right: 1px solid rgba(255,255,255,.1); padding-right: 26px; }
.incoming-items .summary-line { color: rgba(255,255,255,.62); }
.incoming-items .summary-line strong { color: white; }
.incoming-meta { color: rgba(255,255,255,.58); font-size: .83rem; }
.incoming-meta b { color: white; }
.time-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin: 13px 0 17px; }
.time-option { border: 1px solid rgba(255,255,255,.15); background: transparent; color: white; border-radius: 10px; padding: 10px 5px; }
.time-option.active { background: var(--gold); color: var(--ink); border-color: var(--gold); font-weight: 700; }
.restaurant-actions { display: flex; gap: 8px; }
.restaurant-actions button { flex: 1; border: 0; border-radius: 12px; min-height: 44px; font-weight: 700; }
.restaurant-actions .accept { background: var(--gold); color: var(--ink); }
.restaurant-actions .reject { background: rgba(255,255,255,.08); color: rgba(255,255,255,.68); }
.restaurant-state { padding: 38px 24px; text-align: center; }
.restaurant-state .status-icon { background: rgba(226,182,107,.12); }
.restaurant-state p { color: rgba(255,255,255,.58); }
.restaurant-state .pickup-ticket { background: #0f0e0c; }
.restaurant-state .primary-button { max-width: 300px; }
.toast { position: fixed; z-index: 80; left: 50%; bottom: 28px; transform: translate(-50%, 30px); background: var(--ink); color: white; padding: 12px 18px; border-radius: 999px; font-size: .86rem; opacity: 0; pointer-events: none; transition: .22s ease; box-shadow: 0 12px 30px rgba(0,0,0,.24); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Le grimoire du restaurant : cuir sombre, parchemin et ferronnerie ouvragée. */
body {
  background-color: #e9dcc5;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.46), transparent 28%),
    radial-gradient(circle at 84% 68%, rgba(107,67,34,.08), transparent 34%),
    repeating-linear-gradient(96deg, rgba(83,51,27,.025) 0 1px, transparent 1px 7px);
}

.site-header { box-shadow: 0 5px 24px rgba(7,5,3,.28); }

.hero {
  width: min(1280px, calc(100% - 32px));
  min-height: 500px;
  margin: 18px auto 0;
  border: 1px solid rgba(211,170,101,.56);
  border-radius: 18px;
  box-shadow: 0 18px 42px rgba(47,29,14,.22), inset 0 0 0 5px rgba(10,7,5,.48);
}
.hero > img { inset: 12px; width: calc(100% - 24px); height: calc(100% - 24px); border-radius: 12px; }
.hero-shade { inset: 12px; border-radius: 12px; }
.hero::before { content: ""; position: absolute; z-index: 3; inset: 12px; border: 1px solid rgba(224,183,110,.5); border-radius: 12px; box-shadow: inset 0 0 0 4px rgba(10,7,5,.38), inset 0 0 34px rgba(0,0,0,.28); pointer-events: none; }
.hero-content { z-index: 4; width: min(1160px, calc(100% - 104px)); }
.hero-content::before { display: none; }
.hero h1 { text-shadow: 0 3px 0 rgba(0,0,0,.55), 0 0 32px rgba(229,181,99,.14); }
.hero-status { z-index: 5; border-color: rgba(226,182,107,.34); }

.grimoire-metal { position: absolute; z-index: 3; inset: 12px; pointer-events: none; }
.binding-rail { position: absolute; left: 0; top: 52px; bottom: 52px; width: 24px; border-radius: 0 12px 12px 0; border: 1px solid rgba(235,207,149,.5); background: linear-gradient(90deg, #34281f 0%, #9b8567 24%, #3d3025 48%, #bc9f76 73%, #30231a 100%); box-shadow: inset 0 0 0 3px rgba(11,8,6,.42), 4px 0 14px rgba(0,0,0,.42); }
.binding-rail::before, .binding-rail::after { content: ""; position: absolute; left: 6px; right: 6px; height: 10px; border-radius: 50%; border: 1px solid #d6bd8f; background: radial-gradient(circle at 38% 34%, #ddc49b, #68533c 45%, #211811 75%); box-shadow: 0 0 0 3px rgba(15,10,7,.34); }
.binding-rail::before { top: 22%; }
.binding-rail::after { bottom: 22%; }

.metal-corner { position: absolute; width: 88px; height: 88px; background: linear-gradient(135deg, #d0b27e 0%, #6c5841 22%, #2b2119 46%, #9a7d56 72%, #d5b87d 100%); clip-path: polygon(0 0, 100% 0, 100% 16%, 44% 30%, 30% 44%, 16% 100%, 0 100%); filter: drop-shadow(3px 5px 5px rgba(0,0,0,.42)); }
.metal-corner::before { content: ""; position: absolute; inset: 9px 34px 34px 9px; border: 2px solid rgba(32,23,16,.8); border-radius: 50% 0 50% 0; box-shadow: inset 0 0 0 2px rgba(225,198,142,.34); }
.metal-corner::after { content: "✦"; position: absolute; left: 14px; top: 9px; width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; color: #2b2017; background: radial-gradient(circle at 38% 30%, #e1c694, #7a6247 62%, #2a2018); font-size: .62rem; box-shadow: 0 1px 4px rgba(0,0,0,.6); }
.corner-nw { left: 0; top: 0; }
.corner-ne { right: 0; top: 0; transform: rotate(90deg); }
.corner-se { right: 0; bottom: 0; transform: rotate(180deg); }
.corner-sw { left: 0; bottom: 0; transform: rotate(270deg); }

.book-clasp { position: absolute; right: 0; width: 70px; height: 28px; border: 1px solid rgba(225,196,139,.56); border-radius: 14px 0 0 14px; background: linear-gradient(#ad9167, #3b2d21 42%, #8c7354 55%, #2b2018); box-shadow: inset 0 0 0 3px rgba(14,10,7,.4), -6px 4px 13px rgba(0,0,0,.36); }
.book-clasp i { position: absolute; left: 10px; top: 6px; width: 15px; height: 15px; border-radius: 50%; border: 1px solid #d4b984; background: radial-gradient(circle at 36% 32%, #e6cd9c, #756047 48%, #251b14 76%); }
.clasp-one { top: 31%; }
.clasp-two { bottom: 25%; }

.fae-spark { position: absolute; color: #f6d98d; text-shadow: 0 0 8px #f1c86a, 0 0 18px rgba(245,208,120,.68); animation: fae-glimmer 3.8s ease-in-out infinite; }
.spark-one { right: 18%; top: 20%; font-size: .8rem; }
.spark-two { right: 29%; top: 55%; font-size: 1.15rem; animation-delay: -1.2s; }
.spark-three { right: 12%; bottom: 18%; font-size: 2rem; animation-delay: -2.4s; }
@keyframes fae-glimmer { 0%, 100% { opacity: .18; transform: scale(.7) rotate(0deg); } 45% { opacity: .9; transform: scale(1.12) rotate(24deg); } 70% { opacity: .36; } }

.menu-shell { width: min(1280px, calc(100% - 40px)); margin: 46px auto; padding: 64px clamp(24px, 4vw, 54px) 78px; position: relative; isolation: isolate; border: 1px solid rgba(86,56,30,.42); border-radius: 10px; background:
  linear-gradient(90deg, rgba(90,54,25,.08), transparent 6%, transparent 94%, rgba(90,54,25,.08)),
  radial-gradient(circle at 18% 10%, rgba(255,255,255,.7), transparent 34%),
  #f4e5c9;
  box-shadow: 0 24px 70px rgba(58,36,18,.2), inset 0 0 48px rgba(116,71,31,.08); }
.menu-shell::before { content: ""; position: absolute; z-index: -1; inset: 12px; border: 1px solid rgba(120,77,40,.25); border-radius: 5px; pointer-events: none; }
.menu-shell::after { content: "❦"; position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); color: rgba(112,69,34,.52); font-family: Georgia, serif; font-size: 1.35rem; }
.menu-heading { margin-bottom: 18px; }
.menu-heading h2::first-letter { color: #8e2f25; font-size: 1.22em; text-shadow: 1px 1px 0 rgba(79,41,21,.18); }
.medieval-rule { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; color: #8e6b3e; margin: 0 0 15px; }
.medieval-rule i { height: 1px; background: linear-gradient(90deg, transparent, rgba(100,63,31,.5)); }
.medieval-rule i:last-child { transform: scaleX(-1); }
.medieval-rule span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(116,76,39,.38); background: rgba(255,248,230,.7); font-size: .7rem; }
.category-nav { top: 76px; background: linear-gradient(#f4e5c9 74%, rgba(244,229,201,0)); }
.category-chip { border-color: rgba(98,61,31,.3); border-radius: 9px 9px 14px 14px; background: rgba(255,249,235,.72); box-shadow: inset 0 0 0 1px rgba(255,255,255,.42), 0 3px 8px rgba(73,43,20,.06); }
.category-chip.active { background: linear-gradient(145deg, #7b2c25, #3a1915); color: #f6dfb0; border-color: #b58c54; box-shadow: inset 0 0 0 1px rgba(232,193,123,.24), 0 5px 13px rgba(68,26,20,.23); }
.menu-item { position: relative; overflow: hidden; background: rgba(255,250,238,.76); border-color: rgba(96,60,31,.25); border-radius: 10px 10px 18px 10px; box-shadow: inset 0 0 24px rgba(105,65,31,.035), 0 7px 16px rgba(74,44,21,.045); }
.menu-item::before { content: "❧"; position: absolute; right: 9px; bottom: 4px; color: rgba(122,76,37,.11); font-family: Georgia, serif; font-size: 2.25rem; line-height: 1; pointer-events: none; }
.menu-item:hover { border-color: rgba(134,79,36,.58); box-shadow: inset 0 0 24px rgba(105,65,31,.045), 0 17px 34px rgba(67,39,18,.11); }
.add-button { border: 1px solid rgba(230,195,128,.42); background: linear-gradient(145deg, #332319, #130e0a); box-shadow: inset 0 0 0 2px rgba(255,255,255,.03); }
.order-card { overflow: hidden; border: 1px solid rgba(217,178,108,.34); border-radius: 12px; background:
  linear-gradient(135deg, rgba(255,255,255,.035), transparent 35%),
  repeating-linear-gradient(92deg, rgba(255,255,255,.018) 0 1px, transparent 1px 5px),
  #21150f;
  box-shadow: inset 0 0 0 5px rgba(9,6,4,.34), var(--shadow); }
.order-card::before, .order-card::after { content: "✦"; position: absolute; right: 10px; color: rgba(224,186,117,.42); font-size: .58rem; }
.order-card::before { top: 9px; }
.order-card::after { bottom: 9px; }
.search-box { border-color: rgba(100,64,33,.27); background: rgba(255,251,242,.76); }
.practical { border-top: 1px solid rgba(92,58,30,.34); border-bottom: 1px solid rgba(92,58,30,.34); background:
  radial-gradient(circle at 8% 20%, rgba(255,255,255,.45), transparent 34%),
  repeating-linear-gradient(96deg, rgba(89,55,27,.025) 0 1px, transparent 1px 7px),
  #ddc49b; }
.practical::after { content: "❦"; color: rgba(65,38,20,.07); }
.practical { display: grid; grid-template-columns: minmax(270px, .72fr) minmax(420px, 1.28fr); align-items: center; gap: clamp(42px, 7vw, 96px); }
.practical-copy { position: relative; z-index: 2; }
.practical-services { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 22px; }
.practical-services span { padding: 7px 10px; border: 1px solid rgba(91,58,31,.28); border-radius: 999px; background: rgba(255,250,241,.48); color: #594937; font-size: .73rem; font-weight: 800; }
.practical-actions { min-width: 0; margin-top: 28px; }
.facade-frame { position: relative; z-index: 2; margin: 0; padding: 9px; border: 1px solid #33251a; border-radius: 4px; background: linear-gradient(135deg, #d0b27e, #4b3929 18%, #a88b63 42%, #2c2119 68%, #c0a171); box-shadow: 0 24px 48px rgba(55,33,16,.25), inset 0 0 0 2px rgba(238,210,154,.35); }
.facade-frame::before, .facade-frame::after { content: "✦"; position: absolute; z-index: 2; width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid #d0b57f; border-radius: 50%; color: #d8bd88; background: radial-gradient(circle at 36% 30%, #806949, #241b14 68%); box-shadow: 0 2px 7px rgba(0,0,0,.4); font-size: .62rem; }
.facade-frame::before { left: -9px; top: -9px; }
.facade-frame::after { right: -9px; bottom: 22px; }
.facade-frame img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: center 72%; border: 1px solid rgba(28,19,13,.75); filter: saturate(.84) contrast(1.05) sepia(.09); }
.facade-frame figcaption { position: absolute; left: 26px; bottom: 20px; padding: 8px 12px; color: #f5ddb0; border: 1px solid rgba(224,186,117,.36); border-radius: 3px; background: rgba(25,16,11,.82); backdrop-filter: blur(5px); font-family: Georgia, serif; font-size: .8rem; letter-spacing: .03em; }

.onsite-payments { width: min(1280px, calc(100% - 40px)); margin: 70px auto; padding: clamp(34px, 5vw, 62px); overflow: hidden; position: relative; border: 1px solid rgba(226,182,107,.42); border-radius: 22px; color: white; background: radial-gradient(circle at 82% 5%, rgba(170,116,53,.23), transparent 32%), linear-gradient(145deg, #201a14, #100d0a 72%); box-shadow: 0 24px 58px rgba(35,22,12,.28); }
.onsite-payments::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(226,182,107,.15); border-radius: 14px; pointer-events: none; }
.onsite-payments::after { content: "✦"; position: absolute; right: 3%; top: -76px; color: rgba(230,185,109,.06); font-size: 18rem; line-height: 1; pointer-events: none; }
.payment-section-heading { max-width: 790px; position: relative; z-index: 1; margin-bottom: 30px; }
.payment-section-heading .eyebrow { color: #e6b96d; }
.payment-section-heading h2 { margin: 5px 0 12px; color: white; font-family: Georgia, serif; font-size: clamp(2.35rem, 5vw, 4.8rem); line-height: .94; letter-spacing: -.05em; }
.payment-section-heading p { margin: 0; color: rgba(255,255,255,.6); font-size: 1.02rem; }
.payment-methods-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.payment-method-card { min-width: 0; min-height: 218px; display: flex; flex-direction: column; align-items: flex-start; padding: 22px; border: 1px solid rgba(255,255,255,.12); border-radius: 15px; background: rgba(255,255,255,.045); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.payment-method-card:hover { border-color: rgba(230,185,109,.46); background: rgba(230,185,109,.075); transform: translateY(-2px); }
.payment-method-card h3 { margin: 20px 0 7px; font-family: Georgia, serif; font-size: 1.2rem; line-height: 1.05; }
.payment-method-card > p { margin: 0; color: rgba(255,255,255,.48); font-size: .78rem; line-height: 1.4; }
.payment-symbol { width: 58px; height: 58px; display: grid; place-items: center; border: 1px solid rgba(230,185,109,.48); border-radius: 14px; background: linear-gradient(145deg, rgba(230,185,109,.18), rgba(230,185,109,.04)); color: #f4d28e; font: 800 1.35rem/1 Georgia, serif; box-shadow: 0 8px 24px rgba(0,0,0,.22); }
.ticket-symbol { font: 900 .9rem/1 Arial, sans-serif; letter-spacing: .05em; }
.cheque-symbol { font-size: 1.55rem; }
.card-symbol { font: 900 1rem/1 Arial, sans-serif; letter-spacing: -.06em; }
.payment-brand-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: auto; padding-top: 18px; }
.payment-brand { min-height: 27px; display: inline-flex; align-items: center; justify-content: center; padding: 4px 8px; border-radius: 5px; background: white; color: #111; font: 800 .67rem/1 Arial, sans-serif; white-space: nowrap; }
.cb-brand { color: #17478a; font-size: .8rem; letter-spacing: -.08em; }
.visa-brand { color: #163d91; font-size: .72rem; font-style: italic; letter-spacing: -.04em; }
.mastercard-brand { gap: 0; position: relative; min-width: 72px; padding-left: 35px; }
.mastercard-brand i, .mastercard-brand b { width: 18px; height: 18px; position: absolute; left: 7px; border-radius: 50%; background: #e33b29; }
.mastercard-brand b { left: 17px; background: #f4a11a; opacity: .92; }
.mastercard-brand em { font-size: .52rem; font-style: normal; }
.apple-brand { background: #fff; color: #000; font-size: .72rem; letter-spacing: -.02em; }
.google-brand { color: #2f66c9; font-size: .72rem; }
.tap-brand { border: 1px solid rgba(255,255,255,.2); background: transparent; color: white; }
.contactless-symbol { display: flex; align-items: center; justify-content: center; gap: 2px; transform: rotate(-8deg); }
.contactless-symbol i { width: 8px; height: 25px; display: block; border-right: 2px solid #f4d28e; border-radius: 0 100% 100% 0; }
.contactless-symbol i:nth-child(2) { height: 35px; }
.contactless-symbol i:nth-child(3) { height: 45px; }

footer { border-top: 5px solid #6f5436; box-shadow: inset 0 1px 0 rgba(226,182,107,.28); }

@media (max-width: 980px) {
  .content-grid { grid-template-columns: 1fr; }
  .order-card { display: none; }
  .menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mobile-cart[hidden] { display: none; }
  .mobile-cart { display: flex; }
  .hero-order-callout { width: 100%; position: static; margin-top: 20px; transform: none; }
  .payment-methods-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .contactless-payment-card { grid-column: span 2; }
}

@media (max-width: 700px) {
  .demo-ribbon { font-size: .66rem; }
  .site-header { height: 70px; padding-inline: 14px; }
  .brand-title { font-size: 1.08rem; white-space: normal; }
  .brand-title > span { display: block; margin: 4px 0 0; font-size: .62em; }
  .site-sections { min-height: 44px; padding-inline: 8px; gap: 2px; }
  .site-sections a { flex: 1; justify-content: center; padding: 0 8px; font-size: .65rem; letter-spacing: .045em; text-align: center; }
  .brand-mark { width: 34px; height: 34px; }
  .cart-button span { display: none; }
  .cart-button { padding: 0 6px; min-width: 42px; justify-content: center; background: transparent; border: 1px solid rgba(255,255,255,.2); }
  .cart-button b { background: var(--gold); color: var(--ink); }
  .hero { width: calc(100% - 16px); min-height: 520px; margin-top: 8px; border-radius: 14px; align-items: flex-end; }
  .hero > img { inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); border-radius: 9px; object-position: 67% center; }
  .hero-shade { inset: 8px; border-radius: 9px; background: linear-gradient(0deg, rgba(16,14,11,.97) 7%, rgba(16,14,11,.74) 55%, rgba(16,14,11,.12) 100%); }
  .hero::before { inset: 8px; border-radius: 9px; }
  .grimoire-metal { inset: 8px; }
  .hero-content { width: calc(100% - 48px); padding: 92px 0 44px; }
  .hero h1 { max-width: 100%; font-size: clamp(2rem, 10.5vw, 3.35rem); line-height: .94; letter-spacing: -.035em; }
  .hero-logo { width: min(280px, 88vw); margin: 0 auto 10px; }
  .hero p { margin: 10px 0 20px; }
  .service-switch { display: flex; width: 100%; }
  .service { min-width: 0; flex: 1 1 50%; padding-inline: 10px; }
  .hero-status { display: none; }
  .hero-order-callout { padding: 16px; gap: 6px; }
  .hero-phone-link { font-size: 1.75rem; }
  .menu-shell { width: calc(100% - 18px); margin: 18px auto 28px; padding: 48px 18px 76px; }
  .menu-shell::before { inset: 7px; }
  .menu-heading { display: grid; align-items: stretch; margin-bottom: 22px; }
  .search-box { width: 100%; }
  .category-nav { top: 68px; margin-inline: -14px; padding-inline: 14px; }
  .menu-grid { grid-template-columns: 1fr; gap: 11px; }
  .menu-item { min-height: 0; padding: 17px; }
  .menu-item:hover { transform: none; }
  .practical { padding: 54px 20px; display: grid; }
  .practical { grid-template-columns: 1fr; gap: 34px; }
  .practical-actions { min-width: 0; width: 100%; }
  .facade-frame { width: 100%; }
  .onsite-payments { width: calc(100% - 18px); margin: 48px auto; padding: 42px 22px; }
  .payment-methods-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .payment-method-card { min-height: 205px; padding: 18px; }
  .contactless-payment-card { grid-column: span 2; }
  footer { grid-template-columns: auto 1fr; padding: 42px 20px 100px; }
  footer .restaurant-demo-link, footer small { grid-column: 1 / -1; justify-self: start; text-align: left; }
  .checkout-modal, .restaurant-modal, .optimization-modal { padding: 0; align-items: end; }
  .checkout-panel, .restaurant-panel, .optimization-modal-panel { width: 100%; max-height: 94dvh; overflow-y: auto; border-radius: 24px 24px 0 0; }
  .optimization-modal-panel { padding: 32px 20px 24px; }
  .optimization-modal-panel h2 { padding-right: 20px; font-size: clamp(1.55rem, 7vw, 2rem); }
  .optimization-saving-burst { margin-top: 16px; }
  .optimization-modal-actions { grid-template-columns: 1fr; }
  .optimization-choose { order: -1; }
  .checkout-progress { padding-left: 18px; padding-right: 62px; }
  .progress-step { font-size: 0; }
  .checkout-form { grid-template-columns: 1fr; }
  .checkout-form label, .checkout-form label:first-child, .checkout-form .full { grid-column: 1; }
  .payment-options { grid-template-columns: 1fr; }
  .incoming-body { grid-template-columns: 1fr; }
  .incoming-items { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.1); padding: 0 0 20px; }
  .toast { bottom: 86px; white-space: nowrap; max-width: calc(100% - 30px); overflow: hidden; text-overflow: ellipsis; }
  .metal-corner { width: 48px; height: 48px; }
  .metal-corner::before { inset: 7px 19px 19px 7px; }
  .metal-corner::after { left: 7px; top: 6px; width: 18px; height: 18px; }
  .binding-rail, .book-clasp { display: none; }
  .fae-spark { display: none; }
}

@media (max-width: 380px) {
  .site-header { height: 68px; padding-inline: 8px; }
  .brand { gap: 8px; }
  .brand-title { font-size: .96rem; }
  .header-actions { gap: 6px; }
  #infoButton { display: none; }
  .demo-ribbon { padding-inline: 6px; font-size: .58rem; letter-spacing: .08em; white-space: nowrap; }
  .hero-content { width: calc(100% - 36px); }
  .hero h1 { font-size: clamp(1.65rem, 8.8vw, 2.15rem); }
  .hero-logo { width: min(238px, 86vw); }
  .hero p { font-size: .92rem; }
  .menu-intro h2 { font-size: 1.8rem; letter-spacing: -.035em; }
  .payment-methods-grid { grid-template-columns: 1fr; }
  .contactless-payment-card { grid-column: auto; }
  .payment-method-card { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}