@charset "UTF-8";

/* Local fonts keep the entire menu available offline. */
@font-face { font-family: Manrope; src: url('assets/fonts/manrope.ttf') format('truetype'); font-weight: 200 800; font-display: swap; }
@font-face { font-family: Fraunces; src: url('assets/fonts/fraunces.ttf') format('truetype'); font-weight: 100 900; font-display: swap; }

:root {
  color-scheme: light;
  --paper: #fbf8f2;
  --surface: #ffffff;
  --ink: #241f1e;
  --muted: #6c625d;
  --accent: #b81720;
  --accent-hover: #931119;
  --line: #e5dfd6;
  --sage: #f7edcf;
  --green: #252221;
  --yellow: #efbb37;
  --radius: 16px;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  font-family: Manrope, sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 112px; scrollbar-color: #aaa99c var(--paper); }
body { margin: 0; }
::selection { background: var(--yellow); color: var(--ink); }
button, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button { font: inherit; cursor: pointer; border: 0; }
button:disabled { cursor: not-allowed; opacity: .45; }
a { color: inherit; text-decoration: none; text-underline-offset: 5px; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; transition: none; }
img { display: block; width: 100%; object-fit: cover; }
svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.svg-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 21px; height: 21px; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2 { font-family: Fraunces, Georgia, serif; font-weight: 550; font-variation-settings: 'SOFT' 30, 'WONK' 1; letter-spacing: -.04em; text-wrap: balance; }
h2 { font-size: clamp(34px, 3.3vw, 48px); line-height: 1.1; }
em { font-style: normal; color: var(--accent); }
p { line-height: 1.7; }
small { display: block; font-size: 12px; line-height: 1.6; color: var(--muted); }
.skip { position: fixed; top: -100px; left: 16px; background: var(--ink); color: white; padding: 16px; border-radius: 8px; z-index: 20; }
.skip:focus { top: 12px; }

/* Masthead */
.header { height: 96px; padding-inline: max(5%, calc((100% - 1280px) / 2)); display: flex; align-items: center; justify-content: space-between; gap: 24px; position: sticky; top: 0; z-index: 5; background: var(--paper); border-bottom: 1px solid var(--line); }
.logo { display: inline-flex; gap: 12px; align-items: center; color: var(--accent); }
.logo > span { font-family: Fraunces, Georgia, serif; font-size: 28px; font-weight: 650; letter-spacing: -.04em; line-height: 1; }
.logo small { font-family: Manrope, sans-serif; color: var(--accent); font-size: 9px; letter-spacing: .26em; font-weight: 700; margin-top: 7px; }
.header nav { display: flex; gap: 36px; font-size: 13px; font-weight: 600; }
.header nav a { padding-block: 14px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 24px; padding: 17px 24px; min-height: 52px; border-radius: 10px; background: var(--accent); color: #fffdf8; font-size: 13px; font-weight: 700; line-height: 1.4; transition: background-color 180ms ease, transform 160ms var(--ease-out); }
.button.small { padding: 12px 16px; min-height: 46px; gap: 12px; }
.button.small .icon { width: 18px; height: 18px; }
.count { display: inline-grid; place-items: center; min-width: 23px; height: 23px; padding: 0 5px; border-radius: 50%; background: #ffffff26; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Editorial opening, with a real photograph as its focal point. */
.hero { max-width: 1440px; margin: auto; padding: 40px 5% 48px; display: grid; grid-template-columns: .95fr 1.05fr; align-items: center; gap: 32px; }
.hero-content { padding-block: 24px; }
.hero h1 { font-size: clamp(52px, 5.2vw, 76px); line-height: 1.04; }
.intro { margin: 24px 0 28px; font-size: 14px; color: var(--muted); }
.hero-details { display: flex; align-items: center; gap: 10px; margin-top: 28px; font-size: 11px; color: var(--muted); }
.hero-details .icon { width: 17px; height: 17px; }
.hero-visual { position: relative; border-radius: 20px; overflow: hidden; background: #25291d; }
.hero-photo { height: 420px; object-position: center 61%; }
.hero-visual figcaption { padding: 21px 24px; display: flex; align-items: end; justify-content: space-between; gap: 20px; color: #f5f1e5; }
.hero-visual figcaption > span:first-child { font-size: 12px; line-height: 1.7; }
.hero-visual figcaption strong { font-weight: 500; color: #d7dac9; }
.hero-visual figcaption > span:last-child { font-size: 9px; white-space: nowrap; color: #d7dac9; }

/* Menu: consistent geometry and aligned price/action pairs. */
.menu-section { max-width: 1280px; margin: 0 auto; padding: 48px 0 88px; border-top: 1px solid var(--line); }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.section-heading p { margin-top: 12px; color: var(--muted); font-size: 13px; }
.menu-note { color: var(--muted); text-align: right; font-size: 10px; line-height: 1.8; }
.filters { display: flex; gap: 8px; overflow-x: auto; margin: 28px 0; padding: 5px 5px 10px; scrollbar-width: thin; }
.filters button { padding: 12px 22px; min-height: 44px; border: 1px solid var(--line); border-radius: 30px; background: transparent; color: var(--muted); font-size: 12px; font-weight: 650; white-space: nowrap; transition: background-color 180ms ease, color 180ms ease, transform 160ms var(--ease-out); }
.filters button[aria-pressed=true] { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.product { min-width: 0; display: flex; flex-direction: column; background: var(--surface); border: 1px solid #e6e2d8; border-radius: var(--radius); overflow: hidden; box-shadow: 0 5px 18px #34302606; }
.product-photo { position: relative; overflow: hidden; background: #dfd9ce; }
.product img { height: 246px; transition: transform 250ms var(--ease-out); }
.tag { position: absolute; left: 16px; top: 16px; max-width: calc(100% - 32px); padding: 7px 11px; background: var(--surface); color: #413e30; border-radius: 6px; font-size: 9px; font-weight: 750; letter-spacing: .06em; }
.product-body { padding: 24px; flex: 1; display: flex; flex-direction: column; }
.product h3 { font-size: 21px; font-weight: 750; letter-spacing: -.035em; margin-bottom: 10px; }
.product p { font-size: 12px; line-height: 1.8; color: var(--muted); margin-bottom: 24px; flex: 1; }
.product-bottom { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 18px; border-top: 1px solid var(--line); }
.price { font-size: 22px; font-weight: 750; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.price small { font-size: 9px; font-weight: 400; letter-spacing: 0; margin-top: 3px; }
.add-button { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 44px; padding: 10px 16px; background: #fbe9e6; color: #a2151d; border-radius: 8px; font-size: 12px; font-weight: 750; transition: background-color 180ms ease, transform 160ms var(--ease-out); }
.add-button span { font-size: 18px; line-height: 1; }

/* Secondary content */
.visit { max-width: 1280px; margin: auto; padding: 64px 0 80px; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; border-top: 1px solid var(--line); }
.visit > div > p { font-size: 12px; color: var(--muted); margin-top: 20px; }
.visit-info { margin: 0; display: grid; gap: 24px; }
.visit-info > div { padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.visit-info dt { font-size: 10px; font-weight: 700; color: var(--accent); margin-bottom: 8px; }
.visit-info dd { margin: 0; font-size: 14px; line-height: 1.6; }
.visit-info small { font-size: 11px; margin-top: 6px; max-width: 44ch; }
footer { display: flex; justify-content: space-between; align-items: center; gap: 32px; padding: 36px max(5%, calc((100% - 1280px) / 2)) 124px; background: var(--sage); }
footer p { font-size: 13px; }
footer small { font-size: 10px; margin-top: 4px; }
footer > div { display: flex; flex-wrap: wrap; gap: 12px 20px; font-size: 12px; }
footer > div > span { flex-basis: 100%; color: var(--muted); font-size: 10px; }

/* Cart, feedback and native accessible dialog */
.floating-order { position: fixed; bottom: 24px; right: 28px; z-index: 6; display: flex; align-items: center; gap: 14px; min-height: 58px; padding: 14px 20px; border-radius: 14px; background: var(--green); color: #fffdf8; box-shadow: 0 8px 30px #253a2d30; font-size: 12px; font-weight: 650; transition: background-color 180ms ease, transform 160ms var(--ease-out); }
.floating-order strong { border-left: 1px solid #ffffff40; padding-left: 16px; font-variant-numeric: tabular-nums; }
.toast { position: fixed; bottom: 96px; right: 28px; z-index: 12; max-width: min(420px, calc(100vw - 32px)); padding: 16px 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); font-size: 12px; line-height: 1.6; box-shadow: 0 6px 24px #25291d18; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out); }
.toast.visible { opacity: 1; transform: translateY(0); }
dialog { position: fixed; inset: 12px 12px 12px auto; margin: 0; width: 500px; max-width: calc(100% - 24px); height: calc(100dvh - 24px); max-height: calc(100dvh - 24px); padding: 32px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); color: var(--ink); overflow-y: auto; box-shadow: 0 20px 64px #25291d26; }
dialog::backdrop { background: #20271ec2; }
body:has(dialog[open]) { overflow: hidden; }
.cart-top { display: flex; justify-content: space-between; gap: 16px; align-items: start; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.cart-top h2 { font-size: 42px; }
.cart-top h2 span { color: var(--accent); }
.cart-top p { color: var(--muted); font-size: 12px; margin-top: 8px; }
.icon-button { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; background: var(--sage); color: var(--ink); border-radius: 50%; transition: transform 160ms var(--ease-out); }
.empty { text-align: center; padding: 48px 8px; }
.empty strong { display: block; font-family: Fraunces, Georgia, serif; font-size: 27px; font-weight: 550; }
.empty p { color: var(--muted); font-size: 13px; margin: 12px 0 24px; }
.cart-row { display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: 16px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.cart-row img { width: 68px; height: 80px; border-radius: 10px; }
.cart-row h3 { font-size: 16px; letter-spacing: -.025em; margin-bottom: 5px; }
.cart-row small { font-size: 11px; }
.cart-row-bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.quantity { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 8px; }
.quantity button { width: 40px; height: 42px; background: transparent; color: var(--ink); font-size: 19px; border-radius: 8px; }
.quantity span { min-width: 24px; text-align: center; font-size: 12px; font-variant-numeric: tabular-nums; }
.remove { min-height: 44px; background: transparent; color: var(--muted); font-size: 10px; padding: 8px; text-decoration: underline; text-underline-offset: 3px; }
.line-total { margin-left: auto; font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cart-bottom { margin-top: 28px; }
.total { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; }
.total strong { font-size: 26px; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
details { margin: 18px 0; font-size: 12px; }
summary { cursor: pointer; padding: 12px 0; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--paper); padding: 16px; border-radius: 8px; font: 11px/1.8 Manrope, sans-serif; }
.whatsapp { width: 100%; background: var(--green); padding-inline: 16px; }
.whatsapp[aria-disabled=true] { opacity: .4; pointer-events: none; }
.fine { font-size: 10px; color: var(--muted); margin-top: 14px; text-align: center; }

/* Short, interruptible pointer feedback. No repeated entrance animations. */
@media (hover: hover) and (pointer: fine) {
  .header nav a:hover, footer a:hover { color: var(--accent); text-decoration: underline; }
  .button:hover { background: var(--accent-hover); }
  .add-button:hover { background: #f5d2ce; }
  .filters button:not([aria-pressed=true]):hover { background: var(--sage); color: var(--ink); }
  .product:hover img { transform: scale(1.025); }
  .floating-order:hover, .whatsapp:hover { background: #3e302d; }
  .quantity button:hover { background: var(--sage); }
}
button:active:not(:disabled), .button:active { transform: scale(.97); }
button:focus-visible:active, .button:focus-visible:active { transform: none; }

@media (max-width: 1420px) {
  .menu-section, .combo-banner, .visit { margin-inline: 5%; }
}
@media (max-width: 1050px) {
  .hero { gap: 24px; }
  .hero-photo { height: 390px; }
  .hero-visual figcaption { padding: 18px; }
  .hero-visual figcaption > span:last-child { display: none; }
  .hero h1 { font-size: 56px; }
  .intro { font-size: 13px; }
  .product-body { padding: 20px; }
  .products { gap: 16px; }
  .product img { height: 210px; }
  .product-bottom { gap: 8px; }
  .price { font-size: 20px; }
  .add-button { padding-inline: 12px; gap: 8px; }
}
@media (max-width: 760px) {
  html { scroll-padding-top: 132px; }
  .header { height: 112px; flex-wrap: wrap; gap: 0; padding-block: 14px 6px; }
  .logo > span { font-size: 25px; }
  .logo { gap: 8px; }
  .logo small { font-size: 8px; }
  .button.small { font-size: 11px; gap: 8px; padding: 10px 12px; }
  .button.small .icon { display: none; }
  .header nav { order: 3; width: 100%; justify-content: center; gap: 28px; font-size: 11px; }
  .header nav a { padding: 9px 6px; }
  .hero { grid-template-columns: 1fr; padding-top: 24px; padding-bottom: 36px; gap: 28px; }
  .hero-content { padding: 0; }
  .hero h1 { font-size: clamp(46px, 10.5vw, 68px); }
  .intro { margin: 20px 0 24px; }
  .hero-details { margin-top: 20px; }
  .hero-photo { height: clamp(235px, 65vw, 420px); }
  .hero-visual { border-radius: 16px; }
  .hero-visual figcaption { padding: 16px 20px; }
  .hero-visual figcaption > span:first-child { font-size: 11px; }
  .menu-section { padding-top: 36px; padding-bottom: 48px; }
  .section-heading { display: block; }
  .section-heading h2 { font-size: 35px; }
  .section-heading p { font-size: 12px; }
  .menu-note { display: block; text-align: left; font-size: 10px; margin-top: 12px; }
  .menu-note br { display: none; }
  .filters { margin: 20px 0; gap: 8px; }
  .filters button { font-size: 11px; padding-inline: 18px; }
  .products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product img { height: 210px; }
  .product-bottom { flex-wrap: wrap; }
  .visit { grid-template-columns: 1fr; gap: 32px; padding-block: 40px 48px; }
  .visit h2 { font-size: 38px; }
  footer { flex-wrap: wrap; gap: 28px; padding-top: 32px; }
  footer > div { flex-basis: 100%; }
  .floating-order { left: 16px; right: 16px; bottom: max(12px, env(safe-area-inset-bottom)); gap: 12px; padding: 13px 16px; }
  .floating-order strong { margin-left: auto; }
  .floating-order > .icon:last-child { width: 18px; }
  .toast { left: 16px; right: 16px; bottom: calc(86px + env(safe-area-inset-bottom)); text-align: center; }
  dialog { inset: 0 0 0 auto; width: 500px; max-width: 100%; height: 100dvh; max-height: 100dvh; border-radius: 0; padding: 24px 20px max(24px, env(safe-area-inset-bottom)); }
}
@media (max-width: 500px) {
  .products { grid-template-columns: 1fr; gap: 24px; }
  .product img { height: 240px; }
  .product-body { padding: 24px; }
  .product h3 { font-size: 23px; }
  .product p { font-size: 13px; }
  .product-bottom { flex-wrap: nowrap; }
  .price { font-size: 23px; }
  .add-button { padding-inline: 18px; gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* WOK-TON: brand, service details and drop-in photo reservations. */
.service-bar { display:flex; justify-content:center; gap:24px; padding:10px 20px; background:var(--ink); color:#fff9ed; font-size:11px; line-height:1.5; }
.service-bar span { color:#f4cd68; }
.logo { gap:10px; }
.logo img { width:62px; height:62px; object-fit:cover; border-radius:50%; background:white; }
.logo > span { font-family:Manrope,sans-serif; font-size:25px; font-weight:800; letter-spacing:-.04em; }
.logo small { font-size:8px; letter-spacing:.12em; }
.hero h1 { font-size:clamp(48px,4.8vw,69px); }
.hero-visual { background:var(--ink); }
.hero-visual figcaption { padding:20px 24px; gap:12px; }
.hero-visual figcaption strong { display:block; font-size:10px; }
.hero-visual figcaption > span:last-child { font:700 21px Manrope,sans-serif; color:var(--yellow); }
.hero-actions { display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.text-link { font-size:12px; text-decoration:underline; font-weight:650; }
.hero-details { line-height:1.8; }
.hero-details .icon { height:21px; width:21px; }
.service-strip { max-width:1280px; margin:0 auto 24px; display:flex; justify-content:space-between; gap:20px; border-block:1px solid var(--line); padding:19px 0; color:var(--muted); font-size:12px; line-height:1.7; }
.service-strip strong { color:var(--ink); }
.menu-section { border-top:0; padding-top:40px; }
.menu-toolbar { display:flex; gap:20px; align-items:center; justify-content:space-between; }
.category-count { font-size:10px; color:var(--muted); white-space:nowrap; }
.filters { flex-shrink:1; min-width:0; }
.product h3 { font-size:20px; line-height:1.3; }
.product p { font-size:13px; }
.product-photo { height:246px; background:#f3eee3; isolation:isolate; }
.product-photo img { width:100%; height:100%; opacity:0; position:absolute; inset:0; object-position:center 60%; }
.product-photo.has-photo img { opacity:1; }
.photo-reserve { height:100%; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:8px; padding:30px 12px 16px; color:#796647; background:#f3eee3; }
.photo-reserve > svg { width:74px; height:74px; stroke-width:1.3; color:#ad8d4d; margin-bottom:8px; }
.photo-reserve > span { font-size:12px; font-weight:650; }
.photo-reserve small { font-size:10px; color:#796647; overflow-wrap:anywhere; text-align:center; }
.has-photo .photo-reserve { visibility:hidden; }
.product-note { font-size:10px; margin:-12px 0 18px; }
.tag { z-index:1; }
.compact-photo { width:68px; height:80px; border-radius:10px; }
.compact-photo .photo-reserve { padding:10px; }
.compact-photo .photo-reserve svg { width:40px; height:40px; margin:0; }
.cart-row .compact-photo img { width:100%; height:100%; }
.empty-icon { width:64px; height:64px; color:var(--accent); margin-bottom:16px; }
.brasa-banner { max-width:1280px; margin:0 auto 80px; display:grid; grid-template-columns:.7fr 1.3fr; border-radius:20px; background:var(--ink); color:var(--paper); overflow:hidden; }
.brasa-art { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:48px 24px; background:#b81720; text-align:center; }
.brasa-art svg { width:140px; height:140px; color:var(--yellow); stroke-width:1.4; }
.brasa-art > span { font-size:38px; font-weight:800; letter-spacing:-.04em; margin-top:16px; }
.brasa-art small { color:#ffe1d3; margin-top:12px; }
.brasa-content { align-self:center; padding:48px; }
.brasa-content h2 { font-size:44px; }
.brasa-content em { color:var(--yellow); }
.brasa-content p { max-width:50ch; font-size:13px; color:#dfd4c9; margin:24px 0; }
.brasa-content > small { color:#dfd4c9; font-size:10px; margin-top:24px; }
.brasa-action { display:flex; align-items:center; gap:32px; flex-wrap:wrap; }
.brasa-action > strong { font-size:28px; font-variant-numeric:tabular-nums; }
.brasa-action small { font-size:10px; font-weight:400; color:#dfd4c9; }
.brasa-action .button { background:var(--yellow); color:var(--ink); }
.visit-info strong { font-weight:650; margin-left:8px; }
.map-link { display:inline-flex; align-items:center; gap:12px; margin-top:24px; font-size:12px; font-weight:700; color:var(--accent); text-decoration:underline; }
.map-panel { grid-column:1/-1; border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.map-panel iframe { display:block; width:100%; height:340px; border:0; background:#eee9df; }
.map-panel p { font-size:11px; padding:16px 20px; color:var(--muted); }
.map-panel a { text-decoration:underline; }
.pickup-notice { display:flex; flex-direction:column; gap:4px; background:var(--sage); padding:16px; margin-top:20px; border-radius:10px; color:#655021; font-size:12px; line-height:1.6; }
.pickup-notice span { font-size:11px; }
.modality { border:0; padding:0; margin:28px 0 20px; display:flex; flex-wrap:wrap; gap:8px; }
.modality legend { padding:0; margin-bottom:12px; font-size:12px; font-weight:700; }
.modality label { display:flex; align-items:center; gap:8px; padding:12px 10px; border:1px solid var(--line); border-radius:8px; min-height:44px; font-size:11px; cursor:pointer; }
.modality label:has(:checked) { border-color:var(--accent); background:#fbe9e6; }
input { accent-color:var(--accent); }
input:focus-visible, textarea:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.notes-label { display:block; font-size:12px; font-weight:700; margin-bottom:8px; }
.notes-label span { font-weight:400; color:var(--muted); }
textarea { resize:vertical; width:100%; min-height:90px; max-height:220px; padding:12px; font:12px/1.6 Manrope,sans-serif; color:var(--ink); border:1px solid var(--line); border-radius:8px; background:var(--surface); caret-color:var(--accent); }
textarea::placeholder { color:var(--muted); }
.pickup-address { font-size:11px; line-height:1.8; margin-top:16px; color:var(--muted); }
noscript a { text-decoration:underline; }
@media (hover:hover) and (pointer:fine) {
  .brasa-action .button:hover { background:#ffd264; }
  .text-link:hover, .visit-info a:hover { color:var(--accent); }
}
@media(min-width:761px) and (max-width:1050px) {
  .hero h1 { font-size:48px; }
  .product-photo { height:210px; }
  .brasa-content { padding:32px; }
  .brasa-content h2 { font-size:36px; }
}
@media(max-width:1420px) {
  .service-strip, .brasa-banner { margin-inline:5%; }
}
@media(max-width:760px) {
  .service-bar { flex-direction:column; align-items:center; gap:2px; font-size:10px; padding:8px 12px; }
  .logo img { width:45px; height:45px; }
  .logo > span { font-size:21px; }
  .logo small { font-size:7px; letter-spacing:.04em; }
  .hero h1 { font-size:clamp(43px,10vw,64px); }
  .hero-actions { gap:18px; }
  .hero-actions .button { font-size:12px; padding-inline:18px; }
  .text-link { font-size:11px; }
  .hero-visual figcaption > span:last-child { display:block; font-size:17px; }
  .hero-visual figcaption > span:first-child { max-width:24ch; font-size:11px; }
  .hero-visual figcaption strong { margin-top:4px; font-size:9px; }
  .service-strip { flex-direction:column; gap:6px; font-size:11px; margin-bottom:0; }
  .menu-toolbar { display:block; margin-bottom:24px; }
  .filters { margin-bottom:8px; }
  .category-count { font-size:10px; }
  .product-photo { height:240px; }
  .compact-photo { height:80px; }
  .brasa-banner { grid-template-columns:1fr; margin-bottom:48px; }
  .brasa-art { padding:24px; flex-direction:row; flex-wrap:wrap; gap:16px; }
  .brasa-art svg { width:64px; height:64px; }
  .brasa-art > span { font-size:30px; margin:0; }
  .brasa-art small { display:none; }
  .brasa-content { padding:32px 24px; }
  .brasa-content h2 { font-size:34px; }
  .brasa-action { gap:24px; }
  .map-panel iframe { height:280px; }
  .cart-top h2 { font-size:38px; }
  .cart-top p { max-width:26ch; }
  .whatsapp { gap:10px; font-size:12px; }
}
@media(prefers-reduced-motion:no-preference) {
  /* Feedback only: a loaded photo settles over its already-visible reserve. */
  .product-photo img { transition:opacity 180ms var(--ease-out),transform 220ms var(--ease-out); }
}

/* Approved photography and visible social links. */
.logo img { object-fit:contain; }
.hero-social { display:flex; align-items:center; flex-wrap:wrap; gap:8px 18px; margin-top:24px; font-size:12px; }
.hero-social > span { color:#655e58; }
.hero-social a { display:inline-flex; align-items:center; gap:7px; min-height:44px; text-decoration:none; font-weight:700; border-bottom:1px solid #d8cec2; transition:color 160ms ease, border-color 160ms ease; }
.hero-social a:hover { color:#b81720; border-color:currentColor; }
.photo-disclaimer { position:absolute; right:8px; bottom:8px; z-index:2; padding:2px 4px; border-radius:3px; background:rgba(25,22,20,.85); color:#fff; font:500 10px/14px Manrope,sans-serif; white-space:nowrap; opacity:0; pointer-events:none; }
.has-photo .photo-disclaimer { opacity:1; }
.beverage-photo img { object-fit:contain; object-position:center; background:#eeece6; }
.cart-row .cart-photo-note { display:block; font-size:10px; margin-top:3px; }
@media(prefers-reduced-motion:reduce) { .hero-social a { transition:none; } }

/* Individual focal points: keep the dish, rather than the table, in view. */
.product-photo img[src$="/arroz-con-mariscos.jpg"] { object-position:50% 86%; }
.product-photo img[src$="/ceviche-mixto.jpg"] { object-position:50% 49%; }
.product-photo img[src$="/fetuccini-huancaina-lomo.jpg"] { object-position:50% 65%; }
.product-photo img[src$="/ceviche-pescado.jpg"] { object-position:50% 58%; }
.product-photo img[src$="/arroz-chaufa.jpg"] { object-position:50% 65%; }
.product-photo img[src$="/pollo-broster.jpg"] { object-position:50% 78%; }
.product-photo img[src$="/mostri-brasa.jpg"] { object-position:50% 51%; }
.product-photo img[src$="/pollo-entero.jpg"] {
  width:200%; max-width:none; left:-100%; object-position:50% 42%;
}

/* Delivery details follow the existing checkout typography and spacing. */
.delivery-help { font-size:11px; color:var(--muted); margin:8px 0 12px; }
.delivery-cost { font-size:12px; line-height:1.7; padding:14px 16px; background:var(--sage); border-radius:10px; margin:0 0 20px; }
.delivery-cost strong { display:block; }