/* Layout: app de drogaria. Cabeçalho branco translúcido, vitrine com destaque verde, cards com área de imagem; no celular, barra de abas inferior como app nativo. */
:root {
  --bg: #f4f8f6;
  --surface: #ffffff;
  --surface-2: #eef5f2;
  --ink: #0d2a22;
  --muted: #5a7269;
  --line: #dde8e3;
  --brand: #009b5a;
  --brand-strong: #00703f;
  --brand-ink: #ffffff;
  --brand-soft: #e3f5ec;
  --chart: #009b5a;
  --glow: rgb(0 155 90 / .18);
  --hero-a: #00a862;
  --hero-b: #005c35;
  --offer: #d9480f;
  --offer-soft: #fff0e8;
  --rx: #d32f2f;
  --rx-soft: #fdeceb;
  --warn-ink: #5b4708;
  --warn-soft: #fff6d9;
  --shadow: 0 1px 2px rgb(13 42 34 / .05), 0 8px 24px rgb(13 42 34 / .06);
  --font-display: "Sora", "Segoe UI", system-ui, sans-serif;
  --font-body: "Figtree", "Segoe UI", system-ui, sans-serif;
  --radius: 18px;
  --tabbar-h: 0px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0a1511; --surface: #11201a; --surface-2: #162a22; --ink: #e4f2ec; --muted: #9bb8ac; --line: #22382f;
    --brand: #2bd486; --brand-strong: #5fe3a5; --brand-ink: #03251a; --brand-soft: #143a2a; --glow: rgb(43 212 134 / .2); --chart: #1fa865;
    --hero-a: #0b7a4a; --hero-b: #063d26;
    --offer: #ff8f5c; --offer-soft: #3a2117; --rx: #ff7d7d; --rx-soft: #3a1b1b;
    --warn-ink: #f2dc94; --warn-soft: #33301a; --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 8px 24px rgb(0 0 0 / .25);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0a1511; --surface: #11201a; --surface-2: #162a22; --ink: #e4f2ec; --muted: #9bb8ac; --line: #22382f;
  --brand: #2bd486; --brand-strong: #5fe3a5; --brand-ink: #03251a; --brand-soft: #143a2a; --glow: rgb(43 212 134 / .2); --chart: #1fa865;
  --hero-a: #0b7a4a; --hero-b: #063d26;
  --offer: #ff8f5c; --offer-soft: #3a2117; --rx: #ff7d7d; --rx-soft: #3a1b1b;
  --warn-ink: #f2dc94; --warn-soft: #33301a; --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 8px 24px rgb(0 0 0 / .25);
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.15; text-wrap: balance; margin: 0; letter-spacing: -.01em; }
a { color: var(--brand-strong); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.wrap { max-width: 1180px; margin: 0 auto; padding-inline: 16px; }
svg.i { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.demo { background: var(--warn-soft); color: var(--warn-ink); font-size: 13px; padding-block: 6px; }

/* Cabeçalho */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; background: color-mix(in srgb, var(--surface) 86%, transparent); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; padding-block: 12px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.logo-mark { width: 44px; height: 44px; border-radius: 14px; background: linear-gradient(135deg, var(--hero-a), var(--hero-b)); display: grid; place-items: center; box-shadow: 0 4px 14px var(--glow); }
.logo-mark svg { width: 34px; height: 34px; }
.logo-text { display: grid; line-height: 1.05; }
.logo-text small { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-strong); font-weight: 700; }
.logo-text strong { font-family: var(--font-display); font-size: 18px; font-weight: 700; }
.search { flex: 1 1 280px; min-width: 0; position: relative; }
.search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); width: 20px; height: 20px; }
.search input { width: 100%; border: 1px solid var(--line); background: var(--surface-2); border-radius: 14px; padding: 11px 16px 11px 44px; transition: border-color .15s, box-shadow .15s; }
.search input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--glow); background: var(--surface); }
.nav { display: flex; gap: 4px; }
.nav a { position: relative; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--ink); padding: 9px 14px; border-radius: 12px; font-weight: 600; font-size: 15px; }
.nav a:hover { background: var(--surface-2); }
.nav a[aria-current="page"] { background: var(--brand-soft); color: var(--brand-strong); }
.cart-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding-inline: 6px; border-radius: 999px; background: var(--brand); color: var(--brand-ink); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }

main { padding-block: 20px 110px; }

/* Destaque */
.hero { position: relative; overflow: hidden; border-radius: 24px; color: #fff; background: radial-gradient(120% 140% at 100% 0%, var(--hero-a) 0%, var(--hero-b) 70%); padding: clamp(22px, 4vw, 40px); display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px; align-items: center; margin-bottom: 22px; }
.hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgb(255 255 255 / .07) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .07) 1px, transparent 1px); background-size: 28px 28px; mask-image: linear-gradient(120deg, transparent 20%, #000 90%); -webkit-mask-image: linear-gradient(120deg, transparent 20%, #000 90%); pointer-events: none; }
.hero > * { position: relative; }
.hero .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; background: rgb(255 255 255 / .14); border: 1px solid rgb(255 255 255 / .22); border-radius: 999px; padding: 5px 12px; margin-bottom: 14px; }
.hero .dot { width: 8px; height: 8px; border-radius: 50%; background: #7dffb8; box-shadow: 0 0 0 4px rgb(125 255 184 / .25); }
.hero h1 { font-size: clamp(26px, 4.4vw, 44px); font-weight: 700; }
.hero p { margin: 10px 0 18px; max-width: 46ch; color: rgb(255 255 255 / .86); }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.hero .btn { background: #fff; color: #00703f; }
.hero .btn.ghost { background: rgb(255 255 255 / .12); color: #fff; border: 1px solid rgb(255 255 255 / .3); }
.steps { display: grid; gap: 10px; }
.step { display: flex; gap: 12px; align-items: center; background: rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .18); border-radius: 16px; padding: 12px 14px; }
.step .n { width: 32px; height: 32px; border-radius: 10px; background: #fff; color: #00703f; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; flex: none; }
.step b { display: block; font-size: 15px; }
.step span { font-size: 13px; color: rgb(255 255 255 / .8); }
@media (max-width: 760px) { .hero { grid-template-columns: minmax(0, 1fr); } .steps { display: none; } }

/* Categorias */
.section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin: 4px 0 12px; }
.section-title h2 { font-size: 20px; }
.section-title p { margin: 0; color: var(--muted); font-size: 14px; }
.cats { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 10px; margin-bottom: 14px; scrollbar-width: thin; }
.cat { flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 92px; padding: 12px 6px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; font-size: 13px; font-weight: 600; text-align: center; line-height: 1.2; transition: border-color .15s, background .15s; }
.cat .ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-strong); }
.cat[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-soft); }
.cat[aria-pressed="true"] .ic { background: var(--brand); color: var(--brand-ink); }

/* Produtos */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
@media (max-width: 520px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; display: flex; flex-direction: column; gap: 8px; min-width: 0; position: relative; box-shadow: var(--shadow); }
.thumb { position: relative; aspect-ratio: 4 / 3; max-width: 100%; border-radius: 12px; background: radial-gradient(circle at 30% 25%, var(--surface) 0%, var(--surface-2) 70%); display: grid; place-items: center; color: var(--brand); overflow: hidden; }
.thumb svg.i { width: 46%; height: 46%; stroke-width: 1.2; opacity: .85; }
.thumb img { width: 100%; height: 100%; object-fit: contain; }
.thumb .tag { position: absolute; top: 8px; left: 8px; }
.card .body { display: flex; flex-direction: column; gap: 6px; padding: 2px 4px 4px; flex: 1; min-width: 0; }
.card h3 { font-size: 15px; font-weight: 600; font-family: var(--font-body); line-height: 1.3; }
.card .meta { color: var(--muted); font-size: 13px; margin: 0; }
.card .spacer { flex: 1; }
.tag { align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 4px 8px; border-radius: 8px; }
.tag.offer { background: var(--offer); color: #fff; }
.tag.rx { background: var(--rx-soft); color: var(--rx); }
.card.rx { border-top: 4px solid var(--rx); }
.rx-data { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 8px; font-size: 13px; }
.rx-data dt { color: var(--muted); }
.rx-data dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.price .now { font-family: var(--font-display); font-size: 20px; font-weight: 700; }
.price .was { color: var(--muted); font-size: 13px; }
.price.is-offer .now { color: var(--offer); }
.warning { font-size: 11px; line-height: 1.35; color: var(--warn-ink); background: var(--warn-soft); border-radius: 8px; padding: 6px 8px; margin: 0; font-weight: 700; }
.note { font-size: 13px; color: var(--muted); margin: 0; }

.btn { border: 0; border-radius: 12px; padding: 11px 16px; font-weight: 700; cursor: pointer; background: var(--brand); color: var(--brand-ink); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: transform .1s, box-shadow .15s, background .15s; }
.btn:hover { box-shadow: 0 6px 18px var(--glow); }
.btn:active { transform: scale(.98); }
.btn.ghost { background: transparent; color: var(--brand-strong); border: 1px solid var(--line); }
.btn.block { width: 100%; }
.qty { display: flex; align-items: center; justify-content: space-between; gap: 4px; background: var(--brand-soft); border-radius: 12px; padding: 4px; }
.qty button { width: 34px; height: 34px; border-radius: 10px; border: 0; background: var(--surface); color: var(--brand-strong); cursor: pointer; font-weight: 700; font-size: 18px; }
.qty span { min-width: 24px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--brand-strong); }

.empty { text-align: center; color: var(--muted); padding: 40px 16px; }
.legal-note { display: flex; gap: 10px; align-items: flex-start; margin-top: 18px; padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px dashed var(--line); font-size: 13px; color: var(--muted); }

/* Carrinho */
.page-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 16px; }
.page-head h1 { font-size: clamp(24px, 4vw, 32px); }
.page-head p { margin: 0; color: var(--muted); }
.cart-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 20px; align-items: start; }
@media (max-width: 860px) { .cart-layout { grid-template-columns: minmax(0, 1fr); } }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; display: grid; gap: 14px; min-width: 0; box-shadow: var(--shadow); }
.panel h2 { font-size: 19px; }
.line { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding-block: 10px; border-bottom: 1px solid var(--line); }
.line .mini { width: 48px; height: 48px; border-radius: 12px; background: var(--surface-2); color: var(--brand); display: grid; place-items: center; }
.line .name { font-weight: 600; }
.line .sub { font-size: 13px; color: var(--muted); }
.totals { display: grid; gap: 6px; font-variant-numeric: tabular-nums; background: var(--surface-2); border-radius: 14px; padding: 12px 14px; }
.totals div { display: flex; justify-content: space-between; }
.totals .grand { font-family: var(--font-display); font-weight: 700; font-size: 20px; padding-top: 8px; border-top: 1px solid var(--line); }
.field { display: grid; gap: 6px; }
.field label, .legend { font-weight: 600; font-size: 14px; }
.field input, .field select, .field textarea { border: 1px solid var(--line); background: var(--surface-2); border-radius: 12px; padding: 11px 12px; width: 100%; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--glow); }
.seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.seg label { border: 1px solid var(--line); border-radius: 12px; padding: 12px; display: flex; gap: 8px; align-items: center; cursor: pointer; font-weight: 600; font-size: 15px; }
.seg label:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-strong); }
.seg input { accent-color: var(--brand); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.check input { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: var(--brand); }
.alert { border-radius: 12px; padding: 12px 14px; font-size: 14px; }
.alert.rx { background: var(--rx-soft); color: var(--ink); border-left: 4px solid var(--rx); }
.error { color: var(--rx); font-size: 14px; margin: 0; }
.msg-preview { white-space: pre-wrap; font-size: 13px; background: var(--surface-2); border: 1px dashed var(--line); border-radius: 12px; padding: 12px; max-height: 260px; overflow: auto; margin: 0; }
.success { display: grid; gap: 10px; }

/* Páginas de texto */
.prose { max-width: 70ch; display: grid; gap: 12px; }
.prose h2 { font-size: 19px; margin-top: 10px; }
.prose p, .prose ul { margin: 0; }
.datalist { display: grid; grid-template-columns: minmax(0, 210px) minmax(0, 1fr); margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.datalist dt, .datalist dd { padding: 10px 14px; border-bottom: 1px solid var(--line); margin: 0; }
.datalist dt { color: var(--muted); background: var(--surface-2); }
.datalist dd { font-weight: 600; overflow-wrap: anywhere; }
@media (max-width: 520px) { .datalist { grid-template-columns: minmax(0, 1fr); } .datalist dt { border-bottom: 0; padding-bottom: 2px; } }

footer { border-top: 1px solid var(--line); background: var(--surface); font-size: 13px; color: var(--muted); }
footer .wrap { padding-block: 20px calc(100px + var(--tabbar-h)); display: grid; gap: 4px; }
footer strong { color: var(--ink); }

.fab { position: fixed; right: 16px; bottom: calc(16px + var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); z-index: 20; border-radius: 999px; padding: 13px 18px; box-shadow: 0 10px 30px var(--glow), 0 2px 6px rgb(0 0 0 / .15); }

.toast { position: fixed; left: 50%; bottom: calc(24px + var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 30; background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 12px; font-size: 14px; font-weight: 600; display: flex; gap: 8px; align-items: center; box-shadow: var(--shadow); max-width: calc(100% - 32px); white-space: nowrap; }

/* Barra de abas no celular */
.tabbar { display: none; }
@media (max-width: 760px) {
  :root { --tabbar-h: 64px; }
  .nav { display: none; }
  .top .wrap { padding-block: 10px; }
  .logo-text strong { font-size: 16px; }
  .tabbar { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom, 0px); }
  .tabbar a { position: relative; height: var(--tabbar-h); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-decoration: none; color: var(--muted); font-size: 11px; font-weight: 600; }
  .tabbar a[aria-current="page"] { color: var(--brand-strong); }
  .tabbar a[aria-current="page"]::before { content: ""; position: absolute; top: 0; width: 28px; height: 3px; border-radius: 0 0 3px 3px; background: var(--brand); }
  .tabbar .cart-count { position: absolute; top: 8px; left: calc(50% + 6px); }
  .fab { padding: 12px; }
  .fab .lbl { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .card { transition: transform .18s ease, box-shadow .18s ease, border-color .18s; }
  .card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--brand) 35%, var(--line)); }
  .toast { animation: rise .25s ease; }
  @keyframes rise { from { transform: translate(-50%, 10px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
}

/* Onde estamos */
.store { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "photo info" "photo map"; grid-template-rows: auto minmax(180px, 1fr); gap: 16px 24px; margin-top: 26px; background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 16px; box-shadow: var(--shadow); }
.store + .prose { margin-top: 26px; }
.store-photo { grid-area: photo; position: relative; border-radius: 16px; overflow: hidden; min-height: 340px; background: var(--surface-2); }
.store-map { grid-area: map; position: relative; border-radius: 16px; overflow: hidden; background: var(--surface-2); }
.store-photo img, .store-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; border: 0; }
@media (max-width: 860px) {
  .store { grid-template-columns: minmax(0, 1fr); grid-template-areas: "photo" "info" "map"; grid-template-rows: auto; }
  .store-photo { min-height: 0; aspect-ratio: 570 / 555; max-width: 100%; }
  .store-map { min-height: 200px; }
}
.store-info { grid-area: info; display: grid; gap: 14px; align-content: start; padding: 6px 2px 0; min-width: 0; }
.store-info h2 { font-size: clamp(20px, 2.6vw, 26px); }
.eyebrow-s { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-strong); }
.eyebrow-s svg.i { width: 16px; height: 16px; }
.store-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.store-list li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); min-width: 0; }
.store-list li:first-child { grid-column: 1 / -1; }
.store-list svg.i { width: 20px; height: 20px; color: var(--brand-strong); margin-top: 2px; }
.store-list div { display: grid; min-width: 0; }
.store-list span { font-size: 12px; color: var(--muted); }
.store-list b { font-weight: 600; font-size: 15px; overflow-wrap: anywhere; }
@media (max-width: 520px) { .store-list { grid-template-columns: minmax(0, 1fr); } }
.store-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.store-list li:last-child { grid-column: 1 / -1; }
.facade { position: absolute; inset: 0; display: grid; grid-template-rows: 22% auto 1fr; background: linear-gradient(180deg, var(--surface-2), var(--brand-soft)); }
.awning { background: repeating-linear-gradient(90deg, var(--brand) 0 22px, #ffffff 22px 44px); border-bottom: 4px solid var(--brand-strong); }
.sign { margin: 14px auto 0; display: flex; align-items: center; gap: 8px; background: linear-gradient(135deg, var(--hero-a), var(--hero-b)); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 14px; padding: 8px 14px; border-radius: 10px; max-width: calc(100% - 24px); }
.sign span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doors { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 54%; margin: 14px auto 0; }
.doors span { background: var(--brand-soft); border: 3px solid var(--brand-strong); border-bottom: 0; border-radius: 6px 6px 0 0; }
.photo-tag { position: absolute; left: 10px; bottom: 10px; font-size: 12px; font-weight: 600; background: var(--surface); color: var(--muted); border-radius: 8px; padding: 3px 8px; }
.map-art { position: absolute; inset: 0; display: grid; place-items: center; color: var(--brand-strong);
  background:
    linear-gradient(115deg, transparent 46%, var(--surface) 46% 52%, transparent 52%),
    linear-gradient(20deg, transparent 60%, var(--surface) 60% 64%, transparent 64%),
    linear-gradient(90deg, transparent 30%, var(--surface) 30% 33%, transparent 33%),
    repeating-linear-gradient(0deg, var(--line) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 26px),
    var(--brand-soft); }
.pin { width: 48px; height: 48px; border-radius: 50% 50% 50% 4px; transform: rotate(-45deg); background: var(--brand); color: var(--brand-ink); display: grid; place-items: center; box-shadow: 0 8px 20px var(--glow); }
.pin svg.i { transform: rotate(45deg); }

/* Atalhos da página inicial */
.quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
@media (max-width: 760px) { .quick { grid-template-columns: minmax(0, 1fr); gap: 8px; } }
.q { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; align-items: center; text-align: left; padding: 14px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none; cursor: pointer; box-shadow: var(--shadow); font: inherit; }
.q .ic { grid-row: 1 / 3; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-strong); }
.q b { font-size: 15px; }
.q > span:last-child { font-size: 13px; color: var(--muted); }
.q:hover { border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); }
.status { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; margin: 0; }
.status .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.status.on .dot { background: var(--brand); box-shadow: 0 0 0 3px var(--glow); }
.status.off .dot { background: var(--muted); }
.q .status { color: var(--muted); }

.due-banner { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; margin-bottom: 12px; background: var(--warn-soft); color: var(--warn-ink); border: 1px solid color-mix(in srgb, var(--warn-ink) 20%, transparent); }
.due-banner > div { display: grid; flex: 1; min-width: 0; }
.due-banner span { font-size: 13px; }
.due-banner .btn { padding: 8px 14px; }

.install-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; margin-bottom: 18px; background: var(--surface); border: 1px dashed color-mix(in srgb, var(--brand) 45%, var(--line)); }
.install-card > div { display: grid; flex: 1; min-width: 0; }
.install-card span { font-size: 13px; color: var(--muted); }
.app-ic { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, var(--hero-a), var(--hero-b)); display: grid; place-items: center; flex: none; }
.app-ic svg { width: 32px; height: 32px; }
.install-btn { padding: 9px 14px; }
@media (max-width: 760px) { .install-btn { display: none; } }

.icon-btn { width: 36px; height: 36px; border-radius: 10px; border: 0; background: transparent; color: var(--muted); display: grid; place-items: center; cursor: pointer; flex: none; }
.icon-btn:hover { background: var(--surface-2); color: var(--ink); }

/* Atendimento */
.sheet-backdrop { position: fixed; inset: 0; z-index: 40; background: rgb(6 20 15 / .45); }
.sheet { position: fixed; z-index: 41; right: 16px; bottom: calc(84px + var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); width: min(400px, calc(100% - 32px)); max-height: calc(100% - 120px); overflow: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 16px; display: grid; gap: 12px; box-shadow: 0 20px 50px rgb(0 0 0 / .25); }
@media (max-width: 760px) { .sheet { left: 0; right: 0; bottom: 0; width: 100%; border-radius: 22px 22px 0 0; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); max-height: 85%; } }
.sheet-head { display: flex; align-items: center; gap: 12px; }
.sheet-head > div:nth-child(2) { flex: 1; min-width: 0; }
.sheet-head h2 { font-size: 18px; }
.sheet-head p { margin: 0; font-size: 13px; color: var(--muted); }
.avatar { width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(135deg, var(--hero-a), var(--hero-b)); color: #fff; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 20px; flex: none; }
.sheet-label { margin: 0; font-weight: 600; font-size: 14px; }
.topics { display: grid; gap: 8px; }
.topic { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); color: var(--ink); text-decoration: none; font-weight: 600; }
.topic span { flex: 1; }
.topic svg.i:first-child { color: var(--brand-strong); }
.topic svg.i:last-child { color: var(--muted); width: 18px; height: 18px; }
.topic:hover { background: var(--brand-soft); }

/* Receita */
.photo-picks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pick { display: grid; justify-items: center; gap: 8px; padding: 18px 10px; border-radius: 16px; border: 2px dashed color-mix(in srgb, var(--brand) 40%, var(--line)); background: var(--brand-soft); color: var(--brand-strong); font-weight: 700; cursor: pointer; text-align: center; }
.pick svg.i { width: 30px; height: 30px; }
.pick:focus-within, .pick:hover { border-style: solid; }
.thumbs { display: flex; gap: 10px; flex-wrap: wrap; }
.thumbs figure { position: relative; margin: 0; width: 96px; height: 120px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); }
.thumbs img { width: 100%; height: 100%; object-fit: cover; }
.thumbs .icon-btn { position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; background: var(--surface); color: var(--ink); }
.seg.seg3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 520px) { .seg.seg3 { grid-template-columns: minmax(0, 1fr); } }
.alert { background: var(--brand-soft); }
.info-panel h2 { font-size: 18px; }
.how { margin: 0; padding: 0; list-style: none; counter-reset: how; display: grid; gap: 12px; }
.how li { counter-increment: how; display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 10px; }
.how li::before { content: counter(how); grid-row: 1 / 3; width: 30px; height: 30px; border-radius: 10px; background: var(--brand); color: var(--brand-ink); display: grid; place-items: center; font-weight: 700; font-family: var(--font-display); }
.how b { font-size: 15px; }
.how span { font-size: 13px; color: var(--muted); }

/* Lembretes */
.rem-list { display: grid; gap: 12px; min-width: 0; }
.rem { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; display: grid; gap: 12px; box-shadow: var(--shadow); }
.rem.due { border-color: color-mix(in srgb, var(--warn-ink) 35%, var(--line)); background: linear-gradient(0deg, var(--surface), var(--surface)) padding-box; }
.rem-top { display: flex; gap: 12px; align-items: center; }
.rem-top > div { flex: 1; min-width: 0; }
.rem-top h3 { font-size: 17px; }
.rem-top p { margin: 0; font-size: 13px; color: var(--muted); }
.rem.due .rem-top p { color: var(--warn-ink); font-weight: 600; }
.rem .ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-strong); flex: none; }
.bar { height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.bar span { display: block; height: 100%; border-radius: 99px; background: var(--brand); }
.rem.due .bar span { background: var(--offer); }
.rem-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.rem-cal { display: flex; gap: 6px 14px; flex-wrap: wrap; align-items: center; font-size: 13px; color: var(--muted); }
.rem-cal a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none; }
.rem-cal svg.i { width: 16px; height: 16px; }
.empty-rem { justify-items: center; text-align: center; color: var(--muted); padding: 28px 18px; }
.empty-rem svg.i { width: 36px; height: 36px; color: var(--brand); }
.empty-rem p { margin: 0; max-width: 40ch; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

/* Barra de abas com 5 itens */
@media (max-width: 760px) {
  .tabbar { grid-template-columns: repeat(5, 1fr); }
  .tabbar .dot-count { background: var(--offer); color: #fff; }
}
.seg label { justify-content: flex-start; text-align: left; line-height: 1.25; }

/* Conta do cliente */
.acct { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none; font-weight: 600; font-size: 14px; flex: none; }
.acct > svg.i { width: 28px; height: 28px; padding: 5px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-strong); }
.acct:hover, .acct[aria-current="page"] { border-color: var(--brand); }
.acct-lbl { max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 760px) {
  .acct { margin-left: auto; }
  .search { order: 3; flex-basis: 100%; }
}
.avatar.sm { width: 28px; height: 28px; font-size: 13px; }
.avatar.lg { width: 56px; height: 56px; font-size: 24px; }
img.avatar { object-fit: cover; background: var(--surface-2); }
.btn.google { background: var(--surface); color: var(--ink); border: 1px solid var(--line); justify-content: center; gap: 10px; font-weight: 600; }
.btn.google svg { width: 20px; height: 20px; flex: none; }
.btn.google:hover { border-color: var(--brand); }
.btn.danger { background: var(--rx); color: #fff; }
.btn.danger-ghost { color: var(--rx); }
.btn:disabled { opacity: .6; cursor: progress; }
.demo-alert { background: var(--warn-soft); color: var(--warn-ink); margin-bottom: 14px; }
.panel > .demo-alert { margin-bottom: 0; }
.account-hero { max-width: 560px; margin: 8px auto 0; padding: 26px 22px; gap: 16px; }
.account-hero h1 { font-size: clamp(24px, 4vw, 30px); }
.account-hero > p { margin: 0; color: var(--muted); }
.perks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.perks li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); }
.perks svg.i { width: 22px; height: 22px; color: var(--brand-strong); flex: none; margin-top: 2px; }
.perks div { display: grid; min-width: 0; }
.perks span { font-size: 13px; color: var(--muted); }
.who { display: flex; align-items: center; gap: 14px; min-width: 0; }
.who > div { display: grid; min-width: 0; }
.who h1 { font-size: clamp(20px, 3.4vw, 26px); overflow-wrap: anywhere; }
.who p { margin: 0; color: var(--muted); font-size: 14px; overflow-wrap: anywhere; }
.account-head { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.account-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; padding: 4px; border-radius: 14px; background: var(--surface-2); margin-bottom: 16px; overflow-x: auto; }
.tabs button { border: 0; background: transparent; color: var(--muted); font: inherit; font-weight: 600; padding: 9px 14px; border-radius: 10px; cursor: pointer; white-space: nowrap; }
.tabs button[aria-selected="true"] { background: var(--surface); color: var(--brand-strong); box-shadow: var(--shadow); }
.orders { display: grid; gap: 12px; }
.order { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; display: grid; gap: 10px; box-shadow: var(--shadow); min-width: 0; }
.order-top { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.order-top > div { display: grid; min-width: 0; }
.order-top span { font-size: 13px; color: var(--muted); }
.order-items, .order-meta { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.order-meta { color: var(--muted); }
.order-meta b { color: var(--ink); }
.order-foot { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; font-size: 14px; }
.order-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.order-btns .btn { padding: 9px 14px; }
.order-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 14px; }
.order-lines li { display: flex; justify-content: space-between; gap: 10px; font-variant-numeric: tabular-nums; }
.rx-mini { font-style: normal; font-size: 11px; font-weight: 700; color: var(--rx); background: var(--rx-soft); border-radius: 6px; padding: 1px 6px; }
.chip { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--surface-2); color: var(--muted); white-space: nowrap; }
.chip.st-confirmado, .chip.st-em_analise, .chip.st-orcamento_enviado { background: var(--warn-soft); color: var(--warn-ink); }
.chip.st-pronto, .chip.st-saiu, .chip.st-entregue, .chip.st-atendida { background: var(--brand-soft); color: var(--brand-strong); }
.chip.st-cancelado, .chip.st-recusada { background: var(--rx-soft); color: var(--rx); }
.status-sel { border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); border-radius: 10px; padding: 7px 10px; font: inherit; font-size: 14px; }
.login-hint { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--brand-soft); font-size: 14px; }
.login-hint > svg.i { color: var(--brand-strong); flex: none; }
.login-hint span { flex: 1; min-width: 0; }
.login-hint .btn { padding: 8px 14px; background: var(--surface); }
.info-panel > svg.i { width: 30px; height: 30px; color: var(--brand-strong); }
#f-hist { display: flex; gap: 6px; align-items: center; }
#f-hist svg.i { width: 18px; height: 18px; color: var(--brand-strong); }
@media (min-width: 761px) {
  .search { flex-basis: 180px; }
  .nav a { padding-inline: 11px; }
  .nav { gap: 2px; }
}
/* iPhones com iOS antigo (antes do 16.2) não entendem color-mix: usa fundo sólido no topo e na barra de abas */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .top, .tabbar { background: var(--surface); }
}

/* Cadastro de produtos (painel) */
.prod-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.prod-bar .search { flex: 1 1 220px; order: 0; }
.prod-list { display: grid; gap: 8px; margin-top: 10px; }
.prod-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; text-align: left; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; cursor: pointer; }
.prod-row:hover { border-color: var(--brand); }
.prod-row.off { opacity: .6; }
.prod-row .mini, .prod-photo .mini { width: 48px; height: 48px; border-radius: 12px; background: var(--surface-2); color: var(--brand); display: grid; place-items: center; overflow: hidden; }
.prod-row .mini img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.pr-main { display: grid; min-width: 0; }
.pr-main b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-main span { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-side { display: grid; justify-items: end; gap: 2px; font-variant-numeric: tabular-nums; font-size: 14px; }
.pr-side s { color: var(--muted); font-size: 12px; }
.offer-txt { color: var(--offer); }
.prod-form { max-width: 720px; }
.prod-form-head { display: flex; align-items: center; gap: 8px; }
[data-voltar-produtos] svg.i { transform: rotate(180deg); }
.prod-photo { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.prod-photo > img { width: 112px; height: 112px; object-fit: contain; border-radius: 14px; border: 1px solid var(--line); background: #fff; }
.prod-photo .mini { width: 112px; height: 112px; }
.prod-photo-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.prod-photo-btns .btn { padding: 9px 14px; cursor: pointer; }
.field select { font: inherit; color: var(--ink); }

/* Pagamento */
.pay-list { display: grid; gap: 8px; }
.pay { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.pay input { margin-top: 2px; accent-color: var(--brand); flex: none; }
/* Radio e caixa de seleção não herdam o visual das caixas de texto (no iPhone ocupavam a linha inteira). */
.field input[type=radio], .field input[type=checkbox], .check input, .pay input { width: 20px; height: 20px; min-width: 20px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.pay span { display: grid; gap: 2px; min-width: 0; flex: 1; }
.pay small { font-size: 13px; color: var(--muted); }
.pay:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.pay.off { cursor: not-allowed; opacity: .65; }
.pay-box { display: grid; gap: 6px; padding: 12px 14px; border-radius: 14px; background: var(--warn-soft); color: var(--warn-ink); font-size: 14px; }
.pay-box code { font-family: ui-monospace, monospace; font-weight: 700; overflow-wrap: anywhere; }
.pay-box .btn { justify-self: start; padding: 8px 14px; }
.pay-box small { font-size: 12px; }
.chip.st-aguardando_pagamento { background: var(--warn-soft); color: var(--warn-ink); }
.chip.st-pago { background: var(--brand-soft); color: var(--brand-strong); }

/* Botão oficial do Google (desenhado pelo próprio Google) */
.gsi-slot { display: flex; justify-content: center; width: 100%; max-width: 400px; min-height: 44px; margin-inline: auto; color-scheme: light; }
.login-hint .gsi-slot { width: auto; min-height: 32px; margin: 0; flex: none; }

/* Linha do tempo do pedido (cliente) */
.timeline { list-style: none; margin: 4px 0 2px; padding: 0; display: grid; gap: 0; }
.timeline li { position: relative; padding: 0 0 12px 28px; display: grid; gap: 1px; font-size: 14px; color: var(--muted); }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before { content: ""; position: absolute; left: 4px; top: 3px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--line); background: var(--surface); box-sizing: border-box; }
.timeline li::after { content: ""; position: absolute; left: 9px; top: 17px; bottom: -1px; width: 2px; background: var(--line); }
.timeline li:last-child::after { display: none; }
.timeline li b { font-weight: 600; }
.timeline li span { font-size: 12px; }
.timeline li.feito { color: var(--ink); }
.timeline li.feito::before { background: var(--brand); border-color: var(--brand); }
.timeline li.feito::after { background: var(--brand); }
.timeline li.agora::after { background: var(--line); }
.timeline li.agora::before { box-shadow: 0 0 0 4px var(--glow); }
.timeline li.agora b { color: var(--brand-strong); }
.timeline li.esperando { color: var(--warn-ink); }
.timeline li.esperando::before { border-color: var(--warn-ink); background: var(--warn-soft); }
.timeline li.cancelado { color: var(--rx); }
.timeline li.cancelado::before { background: var(--rx); border-color: var(--rx); }
/* Valores do pedido no painel */
.order-sum { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.order-sum b { color: var(--ink); margin-left: auto; }

/* Informações do produto */
.info-link { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 4px 0; margin: 2px 0 0; color: var(--brand-strong); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; text-align: left; }
.info-link .i { width: 16px; height: 16px; }
.info-link:hover { text-decoration: underline; }
.prod-sheet { left: 50%; right: auto; transform: translateX(-50%); bottom: calc(16px + var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); width: min(480px, calc(100% - 32px)); }
.prod-sheet .ip-foto { width: 100%; max-height: 220px; object-fit: contain; border-radius: 14px; background: var(--surface-2); }
.prod-sheet .rx-data { margin: 0; }
.ip-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 12px; }
.ip-preco b { font-size: 20px; } .ip-preco .was { color: var(--muted); font-size: 13px; text-decoration: line-through; }

/* Receita no carrinho */
.rx-field { border: 1px solid var(--line); border-radius: 14px; padding: 12px; }

/* Painel: alertas, abas, destaque */
.tab-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 4px; border-radius: 999px; background: var(--rx); color: #fff; font-size: 12px; }
.order.destaque { border-color: var(--brand); box-shadow: 0 0 0 4px var(--glow); }

/* Resumo */
.period { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.chip-btn { border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-weight: 600; font-size: 14px; padding: 7px 14px; border-radius: 999px; cursor: pointer; }
.chip-btn[aria-pressed="true"] { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-strong); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 12px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 14px; display: grid; gap: 2px; }
.stat span { font-size: 13px; color: var(--muted); font-weight: 600; }
.stat b { font-family: Sora, Figtree, sans-serif; font-size: 24px; font-variant-numeric: tabular-nums; }
.stat small { font-size: 12px; color: var(--muted); }
.chart-card { display: grid; gap: 10px; margin-bottom: 12px; }
.chart-card h2 { font-size: 16px; }
.bars { display: flex; align-items: flex-end; gap: 2px; height: 180px; padding-top: 8px; border-bottom: 1px solid var(--line); }
.bar-col { position: relative; flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; outline: none; cursor: default; }
.bar { width: 100%; max-width: 36px; background: var(--chart); border-radius: 4px 4px 0 0; }
.bar-x { position: absolute; top: 100%; margin-top: 4px; font-size: 11px; color: var(--muted); white-space: nowrap; }
.bars { margin-bottom: 20px; }
.bar-col .tip { position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--surface); font-size: 12px; padding: 6px 8px; border-radius: 8px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .12s; z-index: 2; }
.bar-col:first-child .tip { left: 0; transform: none; } .bar-col:last-child .tip { left: auto; right: 0; transform: none; }
.bar-col:hover .tip, .bar-col:focus .tip { opacity: 1; }
.bar-col:hover .bar, .bar-col:focus .bar { filter: brightness(1.1); }
.split-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.split-grid .chart-card { margin: 0; }
.hbars { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hb-top { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.hb-top span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-top b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.hb-track { height: 8px; margin-top: 4px; }
.hb { height: 100%; background: var(--chart); border-radius: 0 4px 4px 0; }

/* Horário */
.week { display: grid; gap: 8px; margin-bottom: 8px; }
.wk-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: 6px; min-height: 44px; }
.wk-row .check { min-width: 0; }
.wk-row input[type=time] { width: 104px; border: 1px solid var(--line); background: var(--surface-2); border-radius: 10px; padding: 8px 6px; font: inherit; font-size: 15px; color: inherit; }
.wk-off { grid-column: 2 / -1; }
.wk-sep { font-size: 13px; color: var(--muted); }
@media (max-width: 560px) { .tabs-painel { grid-auto-columns: max-content; } .tabs-painel button { padding: 9px 12px; } }
.wk-off { color: var(--muted); font-size: 14px; }
.special-list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
.special-list li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; background: var(--surface-2); font-size: 14px; }
.special-list .btn { padding: 6px 12px; }
.special-new { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; align-items: end; margin-bottom: 8px; }
.special-new .btn { align-self: end; }
#form-horario { display: grid; gap: 8px; }
#form-horario h2 { font-size: 16px; margin-top: 4px; }
.feriado { display: block; font-size: 13px; color: var(--warn-ink); margin-top: 2px; }
.dia-c { display: none; }
@media (max-width: 420px) { .dia-l { display: none; } .dia-c { display: inline; } .wk-row input[type=time] { width: 112px; } }

/* Situação da loja, sempre à vista */
.loja-bar { display: block; font-size: 14px; text-decoration: none; border-top: 1px solid var(--line); }
.loja-bar .wrap { display: flex; align-items: center; gap: 8px; padding-block: 7px; flex-wrap: wrap; }
.loja-bar .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.loja-bar.on { background: var(--brand-soft); color: var(--brand-strong); }
.loja-bar.on .dot { background: var(--brand); box-shadow: 0 0 0 4px var(--glow); animation: pulso 2s ease-in-out infinite; }
.loja-bar.off { background: var(--warn-soft); color: var(--warn-ink); }
.loja-bar.off .dot { background: var(--warn-ink); }
.loja-bar span span, .loja-bar .wrap > span:last-child { font-weight: 500; }
@keyframes pulso { 50% { box-shadow: 0 0 0 7px transparent; } }
@media (prefers-reduced-motion: reduce) { .loja-bar.on .dot { animation: none; } }

/* Pedido pronto para enviar */
.done-panel { display: grid; gap: 12px; justify-items: start; }
.done-ic { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-strong); }
.done-ic .i { width: 26px; height: 26px; }

/* Alerta de pedido novo (painel) */
.alerta-fundo { position: fixed; inset: 0; z-index: 60; background: rgb(6 20 15 / .55); display: grid; place-items: center; padding: 16px; }
.alerta-fundo[hidden] { display: none; }
.alerta-box { width: min(440px, 100%); background: var(--surface); border: 3px solid var(--brand); border-radius: 22px; padding: 22px; display: grid; gap: 10px; box-shadow: 0 24px 60px rgb(0 0 0 / .35); animation: chega .35s cubic-bezier(.2, 1.4, .4, 1); }
.alerta-box h2 { font-size: 24px; margin: 0; }
.alerta-box p { margin: 0; }
.alerta-ic { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: #fff; animation: balanca 1s ease-in-out 3; }
.alerta-ic .i { width: 30px; height: 30px; }
.alerta-itens { margin: 0; padding-left: 18px; font-size: 14px; color: var(--muted); }
@keyframes chega { from { transform: scale(.85); opacity: 0; } }
@keyframes balanca { 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); } }
@media (prefers-reduced-motion: reduce) { .alerta-box, .alerta-ic { animation: none; } }
.chip.guest { font-style: normal; font-size: 11px; margin-left: 6px; vertical-align: middle; background: var(--surface-2); color: var(--muted); }

/* Painel: organização dos pedidos */
.ped-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.ped-bar .search { flex: 1 1 260px; margin: 0; order: 0; }
.ped-bar .ped-ordem { order: 1; }
.ped-ordem { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.ped-ordem select { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.chip-n { display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 4px; border-radius: 999px; background: var(--bg); font-size: 12px; text-align: center; }
.chip-btn[aria-pressed="true"] .chip-n { background: var(--surface); }
.ped-grupo { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 16px; margin: 18px 0 8px; padding: 8px 12px; border-left: 4px solid var(--line); background: var(--surface); border-radius: 8px; }
.ped-grupo small { font-weight: 500; color: var(--muted); font-size: 13px; text-align: right; }
.ped-grupo.st-enviado { border-left-color: var(--brand); }
.ped-grupo.st-aguardando_pagamento { border-left-color: #d99a00; }
.ped-grupo.st-cancelado { border-left-color: #c0392b; }
@media (max-width: 560px) { .ped-ordem { width: 100%; } .ped-ordem select { flex: 1; } }