/* Gastro Pro 360 — páginas públicas das lojas (site, cardápio, bio, retirada).
   Cores da marca do lojista via --brand e --accent (definidas no <body>). */
@font-face { font-family: "Fraunces"; src: url("/assets/fonts/fraunces-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("/assets/fonts/instrument-sans-latin-wght-normal.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

:root {
  --ivory: #f5f0e7; --paper: #fbf8f2; --ivory-2: #ece4d5; --espresso: #191a16; --ink-soft: #55554a; --line: rgba(25, 26, 22, .13);
  --serif: "Fraunces", Georgia, serif; --sans: "Instrument Sans", "Segoe UI", system-ui, sans-serif; --radius: 6px;
  --brand: #234637; --accent: #d6653e; --brand-ink: #fff; --accent-ink: #191a16;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--ivory); color: var(--espresso); font: 400 1rem/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-underline-offset: .18em; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 420; margin: 0; letter-spacing: -.01em; line-height: 1.1; }
.s-wrap { max-width: 1120px; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2rem); }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 1rem; top: -4rem; background: var(--espresso); color: var(--ivory); padding: .6rem 1rem; z-index: 100; }
.skip:focus { top: 1rem; }

.s-head { background: var(--brand); color: var(--brand-ink); }
.s-head__inner { display: flex; justify-content: space-between; align-items: center; min-height: 64px; gap: 1rem; }
.s-brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; }
.s-brand__mark { width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font: 500 1.1rem var(--serif); }
.s-brand__name { font: 500 1.2rem/1 var(--serif); }
.s-nav { display: flex; gap: 1.2rem; }
.s-nav a { text-decoration: none; font-weight: 500; opacity: .85; padding: .3rem 0; }
.s-nav a[aria-current="page"], .s-nav a:hover { opacity: 1; box-shadow: inset 0 -2px 0 var(--accent); }

.s-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .85rem 1.3rem; border-radius: 999px; font: 600 .95rem/1 var(--sans); text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: transform .2s ease, filter .2s; }
.s-btn:hover { transform: translateY(-1px); filter: brightness(1.06); }
.s-btn--accent { background: var(--accent); color: var(--accent-ink); }
.s-btn--brand { background: var(--brand); color: var(--brand-ink); }
.s-btn--line { border-color: currentColor; background: transparent; color: var(--espresso); }
.s-btn--wa { background: #1f6f43; color: #fff; }
.s-btn--block { width: 100%; }
.s-btn[disabled] { opacity: .6; cursor: progress; }
.s-kicker { font: 600 .76rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--brand); margin: 0 0 .9rem; }
.s-title { font-size: clamp(1.8rem, 3.6vw, 2.6rem); margin-bottom: 1.4rem; }
.s-note { font-size: .88rem; color: var(--ink-soft); }

/* Site da loja */
.s-hero { padding: clamp(2rem, 5vw, 4rem) 0; }
.s-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 4rem); align-items: center; }
.s-hero__title { font-size: clamp(2.2rem, 5vw, 3.8rem); letter-spacing: -.02em; }
.s-hero__lead { font-size: 1.1rem; color: var(--ink-soft); margin: 1.2rem 0 1.8rem; max-width: 48ch; }
.s-actions { display: flex; flex-wrap: wrap; gap: .8rem; }
.s-info { margin: 2rem 0 0; display: grid; gap: .5rem; font-size: .95rem; }
.s-info div { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; border-top: 1px solid var(--line); padding-top: .5rem; }
.s-info dt { color: var(--ink-soft); }
.s-info dd { margin: 0; }
.s-hero__media { margin: 0; aspect-ratio: 4 / 3.4; overflow: hidden; border-radius: 999px 999px var(--radius) var(--radius) / 55% 55% var(--radius) var(--radius); background: var(--ivory-2); }
.s-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.s-hero__ph { width: 100%; height: 100%; display: grid; place-items: center; font: italic 300 8rem var(--serif); color: var(--brand); background: var(--ivory-2); }
.s-featured { padding: 3rem 0 4rem; background: var(--paper); border-top: 1px solid var(--line); }
.s-featured__list { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.6rem; }
.s-dish img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; border-radius: var(--radius); margin-bottom: .9rem; }
.s-dish h3 { font-size: 1.3rem; }
.s-dish p { color: var(--ink-soft); margin: .35rem 0; font-size: .95rem; }
.s-price { font-weight: 700; color: var(--espresso) !important; }
.s-price s { color: var(--ink-soft); font-weight: 400; }
.s-cake { padding: 3.5rem 0 4.5rem; background: var(--brand); color: var(--brand-ink); }
.s-cake .s-kicker { color: rgba(255, 255, 255, .8); }
.s-cake .s-note { color: rgba(255, 255, 255, .78); }
.s-cake__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(1.5rem, 5vw, 4rem); align-items: start; }
.s-form { background: var(--paper); color: var(--espresso); padding: 1.5rem; border-radius: var(--radius); display: grid; gap: 1rem; }
.s-field { display: grid; gap: .35rem; }
.s-field label, .s-seg legend { font-weight: 600; font-size: .9rem; }
.s-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.s-field input, .s-field select, .s-field textarea { font: inherit; padding: .7rem .8rem; border: 1px solid rgba(25, 26, 22, .3); border-radius: var(--radius); background: #fff; color: var(--espresso); width: 100%; }
.s-field input:focus, .s-field select:focus, .s-field textarea:focus { outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); border-color: var(--accent); }
.s-seg { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.s-seg legend { margin-bottom: .4rem; width: 100%; }
.s-seg label { display: inline-flex; align-items: center; gap: .4rem; padding: .55rem .9rem; border: 1px solid rgba(25, 26, 22, .3); border-radius: 999px; cursor: pointer; }
.s-seg label:has(input:checked) { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, #fff); }
.s-seg input { accent-color: var(--brand); }
.s-form__error, .m-error { color: #8f2410; background: #f8e3dc; padding: .6rem .8rem; border-radius: var(--radius); margin: 0; font-size: .92rem; }
.s-msg { white-space: pre-wrap; font: .86rem/1.5 ui-monospace, Consolas, monospace; background: var(--ivory); padding: .9rem; border-radius: var(--radius); border: 1px dashed var(--line); margin: .5rem 0 1rem; max-height: 260px; overflow: auto; }

.s-foot { padding: 2rem 0 6rem; font-size: .88rem; color: var(--ink-soft); border-top: 1px solid var(--line); }
.s-foot p { margin: 0 0 .4rem; }
.s-unavail { padding: 5rem 0; text-align: center; }

/* Cardápio */
.m-head { background: var(--paper); border-bottom: 1px solid var(--line); }
.m-head .s-wrap { padding-top: 1.8rem; padding-bottom: 1.2rem; }
.m-title { font-size: clamp(1.9rem, 4vw, 2.8rem); }
.m-title span { display: block; font-style: italic; color: var(--brand); font-size: .62em; margin-top: .2rem; }
.m-sub { margin: .7rem 0 0; color: var(--ink-soft); font-size: .92rem; }
.m-cats { position: sticky; top: 0; z-index: 10; background: var(--paper); border-top: 1px solid var(--line); }
.m-cats__inner { display: flex; gap: .4rem; overflow-x: auto; padding-top: .6rem !important; padding-bottom: .6rem !important; scrollbar-width: thin; }
.m-cats a { flex: none; text-decoration: none; padding: .45rem .9rem; border-radius: 999px; border: 1px solid var(--line); font-size: .9rem; background: #fff; }
.m-cats a:hover, .m-cats a:focus-visible { border-color: var(--brand); color: var(--brand); }
.m-body { padding-top: 1rem; padding-bottom: 7rem; }
.m-cat { padding-top: 1.6rem; scroll-margin-top: 64px; }
.m-cat__title { font-size: 1.6rem; padding-bottom: .6rem; border-bottom: 2px solid var(--espresso); }
.m-list { list-style: none; margin: 0; padding: 0; }
.m-item { display: flex; gap: 1rem; justify-content: space-between; padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
.m-item__body { flex: 1; display: grid; gap: .3rem; align-content: start; }
.m-item__name { font-size: 1.2rem; }
.m-item__desc { margin: 0; color: var(--ink-soft); font-size: .93rem; }
.m-item__price { margin: .2rem 0 .4rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.m-item__price s { color: var(--ink-soft); font-size: .88rem; }
.m-item__opts { font-size: .78rem; color: var(--ink-soft); }
.m-tag { font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: color-mix(in srgb, var(--accent) 18%, #fff); color: #6b2a10; padding: .15rem .45rem; border-radius: 4px; }
.m-item__img { width: 112px; height: 112px; object-fit: cover; border-radius: var(--radius); flex: none; }
.m-add { justify-self: start; font: 600 .88rem/1 var(--sans); padding: .55rem 1rem; border-radius: 999px; border: 1px solid var(--brand); background: transparent; color: var(--brand); cursor: pointer; }
.m-add:hover { background: var(--brand); color: var(--brand-ink); }
.m-empty { padding: 3rem 0; color: var(--ink-soft); }
.m-bar { position: fixed; left: 0; right: 0; bottom: 0; padding: .8rem clamp(1rem, 4vw, 2rem) calc(.8rem + env(safe-area-inset-bottom)); background: linear-gradient(transparent, rgba(245, 240, 231, .96) 30%); z-index: 20; }
.m-bar__btn { width: 100%; max-width: 640px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.3rem; border: 0; border-radius: 999px; background: var(--espresso); color: var(--ivory); font: 600 1rem/1 var(--sans); cursor: pointer; box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .5); }
.m-bar__count { font-weight: 500; opacity: .85; }
.m-dialog { border: 0; padding: 0; width: min(560px, 100%); max-height: min(92vh, 900px); border-radius: 14px; background: var(--paper); color: var(--espresso); }
.m-dialog::backdrop { background: rgba(25, 26, 22, .55); }
.m-dialog__inner { padding: 1.4rem; display: grid; gap: 1rem; }
.m-dialog__head { display: flex; justify-content: space-between; align-items: start; gap: 1rem; }
.m-dialog__head h2 { font-size: 1.5rem; }
.m-dialog__desc { margin: 0; color: var(--ink-soft); }
.m-close { border: 0; background: var(--ivory-2); width: 2.2rem; height: 2.2rem; border-radius: 50%; font-size: 1.3rem; cursor: pointer; flex: none; }
.m-group { border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1rem; margin: 0 0 .8rem; }
.m-group legend { font-weight: 700; padding: 0 .3rem; }
.m-group__rule { font-size: .8rem; color: var(--ink-soft); font-weight: 400; margin-left: .4rem; }
.m-opt { display: flex; align-items: center; gap: .6rem; padding: .45rem 0; cursor: pointer; }
.m-opt input { accent-color: var(--brand); width: 1.1rem; height: 1.1rem; }
.m-opt span:last-child { margin-left: auto; color: var(--ink-soft); font-size: .9rem; }
.m-qty { display: flex; justify-content: space-between; align-items: center; }
.m-stepper { display: inline-flex; align-items: center; border: 1px solid rgba(25, 26, 22, .3); border-radius: 999px; }
.m-stepper button { width: 2.4rem; height: 2.4rem; border: 0; background: transparent; font-size: 1.2rem; cursor: pointer; border-radius: 50%; }
.m-stepper output { min-width: 2rem; text-align: center; font-weight: 700; }
.m-cart { list-style: none; margin: 0; padding: 0; }
.m-cart li { display: grid; grid-template-columns: 1fr auto; gap: .3rem 1rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.m-cart__opts { font-size: .84rem; color: var(--ink-soft); grid-column: 1; }
.m-cart__ctrl { display: flex; align-items: center; gap: .5rem; grid-column: 1 / -1; }
.m-cart__ctrl .m-stepper button { width: 2rem; height: 2rem; }
.m-cart__remove { border: 0; background: none; color: #8f2410; text-decoration: underline; cursor: pointer; font-size: .85rem; }
.m-cart__sub { display: flex; justify-content: space-between; margin: 0; }
.m-checkout { display: grid; gap: .9rem; }
.m-review { display: grid; gap: .8rem; }
.m-review h3 { font-size: 1.25rem; }
.m-review__code { margin: 0; font: 700 1.1rem ui-monospace, Consolas, monospace; background: var(--espresso); color: var(--ivory); padding: .5rem .8rem; border-radius: var(--radius); justify-self: start; }
.m-review__totals { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: .3rem 1rem; }
.m-review__totals dt { color: var(--ink-soft); }
.m-review__totals dd { margin: 0; text-align: right; }
.m-review__totals .is-total { font-weight: 700; color: var(--espresso); font-size: 1.1rem; }
.m-review__note { font-size: .86rem; color: var(--ink-soft); margin: 0; }

/* Bio */
.store--bio { background: var(--brand); min-height: 100vh; }
.bio { min-height: 100vh; display: grid; place-items: start center; padding: 2.5rem 1rem; }
.bio__card { width: min(480px, 100%); background: var(--paper); border-radius: 18px; overflow: hidden; text-align: center; padding-bottom: 1.8rem; }
.bio__cover { width: 100%; height: 160px; object-fit: cover; }
.bio__mark { width: 76px; height: 76px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font: 500 2rem var(--serif); margin: -38px auto .8rem; border: 4px solid var(--paper); position: relative; }
.bio__card:not(:has(.bio__cover)) .bio__mark { margin-top: 1.8rem; }
.bio__name { font-size: 1.8rem; }
.bio__desc { color: var(--ink-soft); padding: 0 1.5rem; margin: .6rem 0 1.2rem; }
.bio__links { list-style: none; margin: 0; padding: 0 1.4rem; display: grid; gap: .6rem; }
.bio__link { display: block; padding: .95rem 1rem; border: 1px solid var(--espresso); border-radius: 999px; text-decoration: none; font-weight: 600; transition: background .2s, color .2s; }
.bio__link:hover { background: var(--espresso); color: var(--ivory); }
.bio__link--main { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.bio__hours { margin: 1.2rem 0 0; font-size: .88rem; color: var(--ink-soft); }

/* Painel de retirada */
.store--board { background: var(--espresso); color: var(--ivory); min-height: 100vh; }
.board { padding: clamp(1rem, 3vw, 2.5rem); min-height: 100vh; display: flex; flex-direction: column; gap: 1.5rem; }
.board__head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 1rem; border-bottom: 1px solid rgba(245, 240, 231, .2); padding-bottom: 1rem; }
.board__head h1 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
.board__head h1 span { font: 400 1rem var(--sans); color: rgba(245, 240, 231, .65); }
.board__clock { margin: 0; color: rgba(245, 240, 231, .7); font-size: .9rem; }
.board__cols { display: grid; grid-template-columns: 1fr 1.3fr; gap: 1.5rem; flex: 1; }
.board__col h2 { font: 700 1rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: rgba(245, 240, 231, .7); margin-bottom: 1rem; }
.board__col--ready h2 { color: #9fd8b5; }
.board__codes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .8rem; }
.board__codes li { font: 700 clamp(1.8rem, 4vw, 3rem)/1 ui-monospace, Consolas, monospace; padding: .6rem 1rem; border: 1px solid rgba(245, 240, 231, .25); border-radius: 10px; letter-spacing: .06em; }
.board__col--ready .board__codes li { background: #1f6f43; border-color: #1f6f43; }
.board__foot { font-size: .85rem; color: rgba(245, 240, 231, .55); margin: 0; }

@media (max-width: 760px) {
  .s-hero__grid, .s-cake__grid, .board__cols { grid-template-columns: 1fr; }
  .s-hero__media { order: -1; aspect-ratio: 4 / 3; }
  .m-item__img { width: 88px; height: 88px; }
  .m-dialog { width: 100%; max-height: 94vh; margin: auto 0 0; border-radius: 16px 16px 0 0; }
  .s-field-row { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .s-btn, .bio__link { transition: none; } .s-btn:hover { transform: none; } }
/* Link Bio premium: identidades por estabelecimento */
.store--bio{background:#100f0c}
.bio{--bio-bg:#15140f;--bio-ink:#f5eddd;--bio-soft:#cbbda7;--bio-accent:#cba660;min-height:100svh;background:radial-gradient(ellipse at 50% 0%,#382c1a,var(--bio-bg) 75%);display:grid;place-items:start center;padding:clamp(1rem,4vw,3rem) 1rem;color:var(--bio-ink)}
.bio--editorial{--bio-bg:#f2eadb;--bio-ink:#322518;--bio-soft:#675447;--bio-accent:#c89d5c;background:#e6d9c5}.bio--energia{--bio-bg:#ec622b;--bio-ink:#fff8e9;--bio-soft:#fff1dd;--bio-accent:#201711;background:#19150f}
.bio .bio__card{background:var(--bio-bg);color:var(--bio-ink);width:min(480px,100%);padding:0 0 1.7rem;min-width:0;border:1px solid color-mix(in srgb,var(--bio-accent) 28%,transparent);border-radius:18px;overflow:hidden;box-shadow:0 18px 45px #0003}
.bio__top{min-height:115px;background:linear-gradient(135deg,var(--bio-accent),var(--bio-bg));overflow:hidden}.bio .bio__cover{display:block;width:100%;height:190px;object-fit:cover}
.bio .bio__mark{background:var(--bio-accent);color:#1b1711;border:4px solid var(--bio-bg);margin:-38px auto 1rem;position:relative}
.bio__eyebrow{font-size:.68rem;letter-spacing:.22em;font-weight:700;color:var(--bio-soft);margin:0 1rem .6rem}.bio .bio__name{font:500 clamp(1.5rem,5vw,2rem) Fraunces,Georgia,serif;padding:0 1rem;overflow-wrap:anywhere}.bio .bio__desc{color:var(--bio-soft);padding:0 1.8rem;line-height:1.5;margin:.7rem 0 1.4rem;overflow-wrap:anywhere}.bio__navigation{padding:0 1.4rem}.bio .bio__links{padding:0;gap:.6rem}.bio .bio__link{display:flex;align-items:center;justify-content:space-between;text-align:left;gap:1rem;color:var(--bio-ink);border:1px solid color-mix(in srgb,var(--bio-accent) 55%,transparent);border-radius:7px;padding:1rem 1.15rem;background:transparent;font-weight:650;transition:transform .18s,background .18s}.bio .bio__link:hover{transform:translateY(-2px);background:color-mix(in srgb,var(--bio-accent) 12%,transparent);color:var(--bio-ink)}.bio .bio__link--main{background:var(--bio-accent);color:#1c1812}.bio .bio__link--main:hover{color:#1c1812;background:color-mix(in srgb,var(--bio-accent) 85%,white)}.bio .bio__hours{color:var(--bio-soft);margin:1.3rem 1rem .2rem;font-size:.83rem}.bio__footer{color:var(--bio-soft);opacity:.8;font-size:.65rem;margin:1.4rem 1rem 0;letter-spacing:.06em}@media(max-width:500px){.bio{padding:.6rem}.bio .bio__cover{height:155px}.bio__navigation{padding:0 .9rem}}@media(prefers-reduced-motion:reduce){.bio .bio__link{transition:none}.bio .bio__link:hover{transform:none}}