/* Figma: Wo6HLVccuiQTS5iIzaffxS — somente OK Delivery. */
/* Public store information card: isolated from merchant screens and checkout. */
.okd-app .okd-hero__brand[data-store-info] { display: flow-root; width: 100%; min-width: 0; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--okd-text); font: inherit; text-align: left; cursor: pointer; }
.okd-app .okd-hero__brand[data-store-info] strong { display: block; overflow-wrap: anywhere; }
.okd-app .okd-hero__brand .okd-brand-description { display: block; margin: 8px 0; color: var(--okd-muted); font-size: 15px; font-weight: 400; letter-spacing: normal; overflow-wrap: anywhere; }
.okd-app .okd-hero__brand .okd-brand-info { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; color: var(--okd-brand-text); font-size: 13px; letter-spacing: normal; font-weight: 600; }
.okd-app .okd-brand-info svg { width: 18px; height: 18px; }
.okd-app:has(.okd-store-card[open]) { overflow: hidden; }
.okd-app .okd-store-card { position: fixed; inset: 0; width: 520px; max-width: calc(100vw - 32px); height: fit-content; max-height: calc(100dvh - 48px); margin: auto; padding: 0; border: 0; border-radius: 20px; overflow: hidden; overscroll-behavior: contain; background: var(--okd-surface); color: var(--okd-text); box-shadow: var(--okd-shadow-dialog); font: inherit; }
.okd-app .okd-store-card[open] { display: flex; flex-direction: column; }
/* Fundo escurecido unico das janelas do cardapio. A reserva vale onde o ::backdrop nao herda variaveis (Safari ate o iOS 17.3). */ .okd-app :is(.okd-store-card,.okd-order-history,.okd-order-detail,.okd-consumer-menu,.okd-customer-profile,.okd-change-dialog)::backdrop { background: var(--okd-scrim, #0c1917aa); }
.okd-app .okd-store-card > header { flex: none; display: flex; align-items: start; gap: 12px; justify-content: space-between; padding: 20px 24px; background: var(--okd-surface); }
.okd-app .okd-store-card__identity { display: flex; gap: 12px; align-items: center; min-width: 0; }
.okd-app .okd-store-card__identity > div { min-width: 0; }
.okd-app .okd-store-card__identity .okd-store-logo { width: 60px; height: 60px; object-fit: contain; flex: none; border-radius: 12px; background: var(--okd-background); }
.okd-app .okd-store-card h2 { margin: 2px 0 0; font-size: 22px; line-height: 1.25; overflow-wrap: anywhere; }
.okd-app .okd-store-card h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 15px; font-weight: 650; }
.okd-app .okd-store-card svg { flex: none; width: 20px; height: 20px; }
.okd-app .okd-store-card [data-close-store-card] { display: grid; place-items: center; width: 44px; height: 44px; flex: none; padding: 10px; border: 0; border-radius: 12px; background: var(--okd-background); color: var(--okd-text); cursor: pointer; }
.okd-app .okd-store-card__body { min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 0 24px max(24px,env(safe-area-inset-bottom)); }
.okd-app .okd-store-card__body > section { padding: 20px 0 0; }
.okd-app .okd-store-card p { margin: 8px 0 0; font-size: 13px; color: var(--okd-muted); }
.okd-app .okd-store-card small { font-size: 12px; color: var(--okd-muted); }
.okd-app .okd-store-card .okd-store-card__status { padding: 10px 12px; border-radius: 10px; background: var(--okd-soft); color: var(--okd-brand-text); font-weight: 600; }
.okd-app .okd-store-card .okd-store-card__status.is-closed { background: var(--okd-danger-bg); color: var(--okd-danger); }
.okd-app .okd-store-card .okd-store-card__phone { font-size: 18px; color: var(--okd-text); }
.okd-app .okd-store-card__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.okd-app .okd-store-card__actions a { display: inline-flex; gap: 8px; align-items: center; justify-content: center; min-height: 44px; padding: 8px 16px; border-radius: 10px; color: var(--okd-brand-text); background: var(--okd-soft); text-decoration: none; font-size: 14px; font-weight: 600; }
.okd-app .okd-store-card__hours { margin: 0 0 8px; }
.okd-app .okd-store-card__hours > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 8px; font-size: 13px; }
.okd-app .okd-store-card__hours dd { margin: 0; text-align: right; }
.okd-app .okd-store-card__hours .is-today { background: var(--okd-soft); color: var(--okd-brand-text); font-weight: 600; }
.okd-app .okd-store-card__hours dt small { font-size: 10px; margin-left: 3px; color: inherit; }
.okd-app .okd-store-card__payments { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.okd-app .okd-store-card__payments li { padding: 7px 10px; border-radius: 8px; background: var(--okd-background); font-size: 13px; }
.okd-app .okd-store-card__minimum { font-size: 24px; color: var(--okd-brand-text); }
.okd-app .okd-store-card__share { flex: none; max-height: 45dvh; overflow: auto; padding: 12px 24px max(16px,env(safe-area-inset-bottom)); background: var(--okd-surface); box-shadow: 0 -4px 16px #1720180a; }
.okd-app .okd-store-card__share [data-share-store] { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 48px; padding: 12px; border: 0; border-radius: 12px; background: var(--okd-brand); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.okd-app .okd-store-card__share-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.okd-app .okd-store-card__share-actions :is(button,a) { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: 1 1 170px; min-height: 44px; padding: 10px; border: 0; border-radius: 10px; background: var(--okd-soft); color: var(--okd-brand-text); font: inherit; font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer; }
.okd-app .okd-store-card__share label { display: grid; gap: 6px; margin-top: 12px; font-size: 13px; color: var(--okd-muted); }
.okd-app .okd-store-card__share textarea { display: block; width: 100%; min-height: 86px; resize: vertical; padding: 10px; border: 1px solid var(--okd-border); border-radius: 10px; background: var(--okd-background); color: var(--okd-text); font: inherit; font-size: 16px; overflow-wrap: anywhere; }
.okd-app .okd-store-card__share :is(button,a,textarea):focus-visible { outline: 2px solid var(--okd-brand); outline-offset: 2px; }
@media(max-width:600px) {
  .okd-app .okd-store-card { inset: auto 0 0; width: 100%; max-width: 100vw; max-height: 92dvh; margin: 0; border-radius: 20px 20px 0 0; }
  .okd-app .okd-store-card > header { padding: 18px 20px; }
  .okd-app .okd-store-card__body { padding: 0 20px max(24px,env(safe-area-inset-bottom)); }
  .okd-app .okd-store-card__share { padding-inline: 20px; }
}
@media(prefers-reduced-motion:no-preference) { .okd-app .okd-store-card[open] { animation: okd-store-card-appear 140ms ease-out; } }
@keyframes okd-store-card-appear { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.okd-app .okd-repeat-trigger { display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:8px 12px; background:var(--okd-soft); color:var(--okd-brand-text); font:inherit; font-size:13px; font-weight:600; border:0; border-radius:12px; cursor:pointer; }
.okd-app .okd-repeat-trigger svg { width:18px; height:18px; }
.okd-app .okd-order-history { width:min(620px,calc(100vw - 32px)); max-width:100vw; max-height:90dvh; padding:0; border:0; border-radius:20px; background:var(--okd-surface); color:var(--okd-text); box-shadow:var(--okd-shadow-dialog); }
.okd-app .okd-order-history[open] { display:flex; flex-direction:column; }
.okd-app .okd-order-history > header { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:18px 20px 10px; flex:none; }
.okd-app .okd-order-history h2 { margin:2px 0; font-size:22px; }
.okd-app .okd-order-history > header small { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.okd-app .okd-order-history .okd-history-original { padding:12px; margin:12px 0; border-radius:12px; background:var(--okd-background); }
.okd-app .okd-order-history .okd-history-original summary { cursor:pointer; min-height:30px; color:var(--okd-brand-text); font-size:14px; font-weight:600; }
.okd-app .okd-order-history h3 { font-size:18px; margin:16px 0 8px; }
.okd-app .okd-order-history :is(small,p) { font-size:13px; color:var(--okd-muted); line-height:1.5; overflow-wrap:anywhere; }
.okd-app .okd-order-history .okd-history-explanation { margin:0; padding:0 20px 12px; flex:none; }
.okd-app .okd-order-history [data-history-content] { padding:0 20px 16px; overflow:auto; min-height:0; overscroll-behavior:contain; }
.okd-app .okd-order-history button { min-height:44px; padding:10px 12px; border:0; border-radius:10px; background:var(--okd-soft); color:var(--okd-brand-text); font:inherit; font-size:13px; font-weight:600; cursor:pointer; }
.okd-app .okd-order-history button:disabled { opacity:.5; cursor:default; }
.okd-app .okd-order-history button:focus-visible,.okd-app .okd-repeat-trigger:focus-visible { outline:2px solid var(--okd-brand); outline-offset:2px; }
.okd-app .okd-order-history [data-history-close] { display:grid; place-items:center; width:44px; flex:none; }
.okd-app .okd-order-history [data-history-close] svg { width:20px; height:20px; }
.okd-app .okd-order-history .okd-history-order { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 0; border-bottom:1px solid var(--okd-border); }
.okd-app .okd-order-history .okd-history-order > div { display:grid; gap:6px; min-width:0; }
.okd-app .okd-order-history .okd-history-order button { flex:none; }
.okd-app .okd-order-history nav { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:16px 0; font-size:13px; }
.okd-app .okd-order-history .okd-history-items article { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 12px; padding:12px 0; border-bottom:1px solid var(--okd-border); }
.okd-app .okd-order-history .okd-history-items strong { overflow-wrap:anywhere; }
.okd-app .okd-order-history .okd-history-items small { grid-column:1; }
.okd-app .okd-order-history .okd-history-items span { grid-column:2; grid-row:1 / 3; align-self:center; }
.okd-app .okd-order-history .okd-history-warning { padding:10px 12px; border-radius:10px; background:var(--okd-danger-bg); color:var(--okd-danger); }
.okd-app .okd-order-history .okd-history-total { display:flex; justify-content:space-between; font-size:18px; color:var(--okd-text); }
.okd-app .okd-order-history .okd-history-primary { width:100%; background:var(--okd-brand); color:var(--okd-on-brand,#fff); }
.okd-app .okd-order-history [data-history-error] { margin:0; padding:0 20px; color:var(--okd-danger); }
.okd-app .okd-order-history > footer { padding:12px 20px max(16px,env(safe-area-inset-bottom)); flex:none; }
.okd-app .okd-order-history > footer button { width:100%; background:var(--okd-background); color:var(--okd-muted); }
/* Official squircle + static K; no external dependency for the isolated storefront. */
.okd-app :is(.okd-order-history, .okd-contact-preference, .okd-address-status, .okd-location-status) .ok-loader { display:grid; justify-items:center; gap:8px; padding:24px; font-size:13px; }
.okd-app :is(.okd-order-history, .okd-contact-preference, .okd-address-status, .okd-location-status) .ok-loader__brand { display:flex; align-items:center; gap:8px; font-size:28px; color:var(--okd-brand-text); }
.okd-app :is(.okd-order-history, .okd-contact-preference, .okd-address-status, .okd-location-status) .ok-loader__spinner { width:28px; height:28px; overflow:visible; }
.okd-app :is(.okd-order-history, .okd-contact-preference, .okd-address-status, .okd-location-status) .ok-loader__spinner path { stroke:var(--okd-brand); stroke-width:6; }
.okd-app :is(.okd-order-history, .okd-contact-preference, .okd-address-status, .okd-location-status) .ok-loader__spinner-track { opacity:.12; }
.okd-app :is(.okd-order-history, .okd-contact-preference, .okd-address-status, .okd-location-status) .ok-loader__spinner-car { stroke-dasharray:15,85; stroke-linecap:round; animation:okd-history-loader .9s linear infinite; }
@keyframes okd-history-loader { to { stroke-dashoffset:-100; } }
@media(prefers-reduced-motion:reduce) { .okd-app :is(.okd-order-history, .okd-contact-preference, .okd-address-status, .okd-location-status) .ok-loader__spinner-car { animation:none; } }
/* Espera no endereco e na localizacao ("Localizando seu endereco…"): loader compacto, em linha com o texto. */
.okd-app :is(.okd-address-status, .okd-location-status) .ok-loader { display:inline-flex; align-items:center; gap:8px; padding:0; font-size:14px; }
.okd-app :is(.okd-address-status, .okd-location-status) .ok-loader__brand { gap:6px; font-size:16px; font-weight:800; }
.okd-app :is(.okd-address-status, .okd-location-status) .ok-loader__spinner { width:20px; height:20px; }
.okd-app :is(.okd-address-status, .okd-location-status):has([data-loader-label]) .ok-loader > span { display:none; }
@media(max-width:600px) { .okd-app .okd-order-history { width:100%; max-height:94dvh; inset:auto 0 0; margin:0; border-radius:20px 20px 0 0; } }
@font-face {
  font-family: "OK Delivery Inter";
  src: url("/assets/fonts/inter/InterVariable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
.okd-app, .ok-delivery-workspace {
  --okd-brand: #176b45;
  --okd-brand-hover: #0d4c30;
  --okd-brand-text: var(--okd-brand);
  --okd-surface: #fff;
  --okd-background: #f6f8f6;
  --okd-text: #172018;
  --okd-muted: #56635b;
  --okd-border: #dce5df;
  --okd-danger: #a12626;
  --okd-danger-bg: #fff1f0;
  --okd-soft: #e9f3ec;
  --okd-scrim: #0c1917aa;
  --okd-shadow-dialog: 0 16px 56px #0003;
  --okd-on-action: #fff;
  --okd-space-1: 4px;
  --okd-space-2: 8px;
  --okd-space-3: 12px;
  --okd-space-4: 16px;
  --okd-space-6: 24px;
  --okd-radius: 12px;
  --okd-control: 44px;
  --okd-stroke: 1px;
  font-family: "OK Delivery Inter", system-ui, sans-serif;
  color: var(--okd-text);
  color-scheme: light;
}
.okd-app *, .ok-delivery-workspace * { box-sizing: border-box; }
.okd-app { margin: 0; background: var(--okd-background); font-size: 16px; line-height: 1.5; }
.okd-app .okd-store { display: flow-root; max-width: 1080px; margin: 0 auto; padding-bottom: 110px; }
.okd-app :is(.okd-hero__brand strong,h1,h2), .ok-delivery-workspace h2 { font-family: inherit; letter-spacing: -.025em; }
.okd-app .okd-hero { margin: 24px 20px 0; padding: 28px; min-height: auto; border-radius: 20px; background: var(--okd-soft); color: var(--okd-text); box-shadow: none; }
.okd-app .okd-hero__brand strong { color: var(--okd-text); font-size: clamp(24px,4vw,36px); line-height: 1.2; }
.okd-app .okd-hero__brand > span { color: var(--okd-brand-text); font-weight: 700; letter-spacing: .08em; }
.okd-app .okd-hero__brand p { color: var(--okd-muted); max-width: 64ch; font-size: 15px; }
.okd-app .okd-hero__facts > span { background: var(--okd-surface); color: var(--okd-text); border: 1px solid var(--okd-border); }
.okd-app .okd-hero__facts .is-open { color: var(--okd-brand-text); }
.okd-app .okd-hero__facts .is-closed { color: var(--okd-danger); background: var(--okd-danger-bg); }
.okd-app .okd-search { display: grid; gap: 8px; margin: 24px 20px 12px; font-size: 14px; font-weight: 600; }
.okd-app .okd-search input { width: 100%; min-height: 48px; border: 1px solid var(--okd-border); background: var(--okd-surface); color: var(--okd-text); border-radius: var(--okd-radius); padding: 12px 16px; font-size: 16px; }
.okd-app .okd-search-status { padding: 16px 20px; color: var(--okd-muted); }
.okd-app .okd-categories { background: var(--okd-background); border: 0; padding: 12px 20px; gap: 8px; }
.okd-app .okd-categories button { min-height: 44px; border-radius: 12px; border: 1px solid var(--okd-border); background: var(--okd-surface); color: var(--okd-muted); font-size: 14px; font-weight: 600; }
.okd-app .okd-categories button.is-active { background: var(--okd-brand); color: #fff; border-color: var(--okd-brand); }
.okd-app .okd-menu { padding: 16px 20px 32px; }
.okd-app .okd-category-section > header h2 { font-size: 24px; color: var(--okd-text); }
.okd-app .okd-product { border: 1px solid var(--okd-border); background: var(--okd-surface); border-radius: 16px; padding: 16px; box-shadow: none; min-width: 0; }
.okd-app .okd-product > div { min-width: 0; overflow-wrap: anywhere; }
.okd-app .okd-product strong { color: var(--okd-text); font-size: 16px; font-weight: 650; }
.okd-app .okd-product p { color: var(--okd-muted); font-size: 14px; line-height: 1.5; }
.okd-app .okd-product > div > span { color: var(--okd-brand-text); font-size: 16px; font-weight: 700; }
.okd-app .okd-product__placeholder { color: var(--okd-brand-text); background: var(--okd-soft); border-radius: 12px; font-size: 20px; font-family: inherit; }
.okd-app .okd-product__placeholder svg { width: 80px; height: 80px; max-width: 100%; }
.okd-app .okd-hero__brand .okd-store-logo { float: left; width: 72px; height: 72px; object-fit: contain; margin: 0 16px 12px 0; border-radius: 16px; background: var(--okd-surface); padding: 6px; }
.okd-app .okd-contact-preference { padding: 12px; border: 1px solid var(--okd-border); border-radius: 12px; background: var(--okd-background); display: grid; gap: 8px; min-width: 0; }
.okd-app .okd-contact-preference > label { display: flex; align-items: center; gap: 10px; }
.okd-app .okd-contact-preference input[type=checkbox] { flex: none; width: 20px; height: 20px; min-height: 20px; accent-color: var(--okd-brand); }
.okd-app .okd-contact-preference small { color: var(--okd-muted); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.okd-app .okd-contact-preference > div { display: flex; flex-wrap: wrap; gap: 8px; }
.okd-app .okd-contact-preference > div[hidden] { display: none; }
.okd-app .okd-contact-preference button { color: var(--okd-brand-text); background: var(--okd-surface); border: 1px solid var(--okd-border); border-radius: 8px; padding: 8px 12px; min-height: 44px; font: inherit; font-size: 13px; }
.okd-app .okd-cart-bar { background: transparent; border: 0; padding-bottom: max(12px,env(safe-area-inset-bottom)); }
.okd-app .okd-cart-bar > button { background: var(--okd-brand); color: var(--okd-on-brand,#fff); border-radius: 14px; min-height: 56px; box-shadow: 0 4px 18px #1720181a; }
.okd-app :is(.okd-cart,.okd-product-modal,.okd-checkout,.okd-order-confirmed) { background: var(--okd-surface); color: var(--okd-text); border: 0; border-radius: 20px 20px 0 0; box-shadow: 0 -4px 24px #1720181a; max-width: 680px; }
.okd-app :is(.okd-cart,.okd-product-modal,.okd-checkout) > header { padding: 20px 24px; border-bottom: 1px solid var(--okd-border); }
.okd-app :is(.okd-cart,.okd-product-modal,.okd-checkout) > header h2 { font-size: 24px; margin: 0; }
.okd-app :is(.okd-cart,.okd-product-modal,.okd-checkout) > header button { width: 44px; min-height: 44px; border-radius: 12px; color: var(--okd-text); background: var(--okd-background); font-size: 20px; }
.okd-app :is(.okd-cart,.okd-product-modal,.okd-checkout) footer { background: var(--okd-surface); padding: 20px 24px max(20px,env(safe-area-inset-bottom)); }
.okd-app :is(.okd-cart,.okd-product-modal,.okd-checkout) footer button { min-height: 48px; border-radius: 12px; background: var(--okd-brand); color: var(--okd-on-brand,#fff); font-size: 16px; font-weight: 600; }
.okd-app :is(.okd-checkout,.okd-product-modal) :is(input,select,textarea) { border: 1px solid var(--okd-border); border-radius: 10px; color: var(--okd-text); background: #fff; padding: 12px; min-height: 44px; font-size: 16px; }
.okd-app .okd-option-groups fieldset { border: 1px solid var(--okd-border); border-radius: 12px; padding: 16px; }
.okd-app .okd-option-groups label { min-height: 48px; padding: 12px; border: 1px solid var(--okd-border); border-radius: 10px; margin: 8px 0; }
.okd-app .okd-option-groups label:has(input:checked) { border-color: var(--okd-brand); background: var(--okd-soft); }
.okd-app .okd-option-groups :is(input[type=radio],input[type=checkbox]) { width: 20px; min-height: 20px; accent-color: var(--okd-brand); }
.okd-app .okd-cart__items article { align-items: start; gap: 12px; border-color: var(--okd-border); }
.okd-app .okd-cart__items article > div { min-width: 0; overflow-wrap: anywhere; }
.okd-app .okd-cart__items article > button { min-height: 44px; color: var(--okd-danger); background: transparent; border: 0; padding: 8px; }
.okd-app .okd-cart-quantity { display: flex; align-items: center; gap: 4px; margin-top: 12px; }
.okd-app .okd-cart-quantity button { width: 44px; height: 44px; background: var(--okd-background); color: var(--okd-brand-text); border: 1px solid var(--okd-border); border-radius: 10px; font-size: 20px; }
.okd-app .okd-cart-quantity input { width: 60px; height: 44px; border: 1px solid var(--okd-border); border-radius: 10px; text-align: center; background: #fff; color: var(--okd-text); font-size: 16px; }
.okd-app .okd-checkout-totals { display: grid; width: 100%; gap: 8px; }
.okd-app .okd-checkout-totals > div { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; color: var(--okd-muted); }
.okd-app .okd-checkout-totals > div:last-child { border-top: 1px solid var(--okd-border); padding-top: 12px; color: var(--okd-text); font-size: 20px; }
.okd-app .okd-payment-hint { padding: 12px; border-radius: 10px; background: var(--okd-soft); color: var(--okd-muted); font-size: 14px; margin: 0; }
.okd-app :is(.okd-checkout__error,.okd-field-error):not(:empty) { background: var(--okd-danger-bg); color: var(--okd-danger); border-radius: 10px; padding: 12px; }
.okd-app button:disabled { opacity: .55; cursor: not-allowed; }
.okd-app .okd-footer { color: var(--okd-muted); background: transparent; overflow-wrap: anywhere; }
.okd-app .okd-footer > * { min-width: 0; }
@media(max-width:600px) {
  .okd-app .okd-hero { margin: 12px 12px 0; padding: 20px; }
  .okd-app .okd-checkout__grid { grid-template-columns: minmax(0,1fr); }
  .okd-app .okd-product { grid-template-columns: minmax(0,1fr) 88px; }
  .okd-app .okd-product :is(img,.okd-product__placeholder) { width: 88px; height: 88px; }
  .okd-app .okd-cart__items article { grid-template-columns: minmax(0,1fr) auto; }
  .okd-app .okd-cart__items article > button { grid-column: 2; }
}
.okd-app [hidden], .ok-delivery-workspace [hidden] { display: none !important; }
.okd-app :is(button,input,select,textarea), .ok-delivery-workspace :is(button,input,select,textarea) { font-family: inherit; }
.okd-app :is(button,a,input,select,textarea):focus-visible,
.ok-delivery-workspace :is(button,a,input,select,textarea,summary):focus-visible { outline: 3px solid var(--okd-brand); outline-offset: 3px; }
.ok-delivery-workspace { padding: var(--okd-space-4); margin-bottom: 24px; background: var(--okd-background); border: 1px solid var(--okd-border); border-radius: 16px; min-width: 0; }
.ok-delivery-workspace__header { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 8px 4px 20px; }
.ok-delivery-workspace__header h2 { margin: 0 0 6px; color: var(--okd-text); font-size: 24px; }
.ok-delivery-workspace__header p { margin: 0; color: var(--okd-muted); font-size: 14px; }
.ok-delivery-workspace__tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.ok-delivery-workspace__tabs button { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; min-height: var(--okd-control); border: 1px solid var(--okd-border); border-radius: var(--okd-radius); background: var(--okd-surface); color: var(--okd-muted); font-weight: 600; cursor: pointer; }
.ok-delivery-workspace__tabs button[aria-selected="true"] { color: white; border-color: var(--okd-brand); background: var(--okd-brand); }
.ok-delivery-workspace__tabs svg { width: 20px; height: 20px; flex: none; }
.ok-delivery-workspace__panel { min-width: 0; }
.ok-delivery-workspace :is(.ok-delivery-orders,.ok-delivery-settings,.ok-delivery-catalog) { margin: 0; color: var(--okd-text); background: var(--okd-surface); font-family: inherit; border-radius: var(--okd-radius); box-shadow: none; }
.ok-delivery-workspace :is(.ok-delivery-orders,.ok-delivery-settings,.ok-delivery-catalog) h2 { font-family: inherit; font-size: 18px; line-height: 1.4; margin: 4px 0 8px; }
.ok-delivery-workspace :is(.ok-delivery-orders,.ok-delivery-settings,.ok-delivery-catalog) > header p { font-size: 14px; line-height: 1.5; }
.ok-delivery-workspace .okd-order .danger-button { min-height: var(--okd-control); border: 1px solid var(--okd-border); border-radius: var(--okd-radius); color: var(--okd-danger); background: var(--okd-surface); padding: 10px 16px; font-size: 14px; }
.ok-delivery-workspace :is(.primary-button,.secondary-button) { min-height: var(--okd-control); border-radius: var(--okd-radius); padding: 10px 16px; font-size: 14px; line-height: 1.4; }
.ok-delivery-workspace .primary-button { background: var(--okd-brand); color: #fff; border: 1px solid var(--okd-brand); }
.ok-delivery-workspace .secondary-button { background: #fff; color: var(--okd-text); border: 1px solid var(--okd-border); }
.ok-delivery-workspace :is(input,select,textarea) { color: var(--okd-text); background: var(--okd-surface); }
.ok-delivery-workspace button:disabled { opacity: .55; cursor: not-allowed; }
.ok-delivery-workspace .ok-delivery-orders__list { grid-template-columns: repeat(auto-fill,minmax(min(100%,300px),1fr)); align-items: start; }
.ok-delivery-workspace .okd-order { min-width: 0; border: 1px solid var(--okd-border); border-radius: var(--okd-radius); background: var(--okd-surface); box-shadow: none; overflow-wrap: anywhere; }
.ok-delivery-workspace .okd-order details { padding: 8px 0; }
.ok-delivery-workspace .okd-order summary { cursor: pointer; min-height: 44px; padding: 12px 0; color: var(--okd-brand); font-size: 14px; font-weight: 600; }
.ok-delivery-workspace .okd-order footer { gap: 12px; flex-wrap: wrap; }
.ok-delivery-workspace .okd-order footer button { white-space: normal; }
.ok-delivery-orders .okd-orders-status:not(:empty) { margin: 12px 0; padding: 12px 16px; border-radius: 12px; background: #fff1f0; color: #a12626; font-size: 14px; line-height: 1.5; }
@media(max-width:600px) {
  .ok-delivery-workspace { padding: 12px; }
  .ok-delivery-workspace__tabs { gap: 6px; }
  .ok-delivery-workspace__tabs button { flex: 1; padding: 10px 8px; font-size: 13px; }
  .ok-delivery-workspace :is(.ok-delivery-orders,.ok-delivery-settings,.ok-delivery-catalog) { padding: 12px; }
}
@media(prefers-reduced-motion:reduce) {
  .okd-app *, .ok-delivery-workspace * { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}
/* Checkout wizard: private to public Delivery, no merchant/PDV selectors. */
.okd-app .okd-checkout .okd-fulfillment { min-width:0; margin:0; padding:0; border:0; }
.okd-app .okd-address-status { margin:0; padding:12px; border-radius:10px; background:var(--okd-background); color:var(--okd-muted); font-size:14px; }
.okd-app .okd-address-status[data-valid="true"] { background:var(--okd-soft); color:var(--okd-brand-text); }
.okd-app .okd-address-status[data-valid="false"] { background:var(--okd-danger-bg); color:var(--okd-danger); }
/* Taxa a confirmar (designer#9): a loja confirma depois, entao e aviso e nao erro. Familia ambar do proprio cardapio
   (--okd-promo*), que nao muda com a cor da loja e acompanha o tema claro e o escuro. */
.okd-app { --okd-aviso:var(--okd-promo); --okd-aviso-bg:var(--okd-promo-bg); --okd-aviso-ink:var(--okd-promo-ink); }
.okd-app :is(.okd-address-status, .okd-location-status):has(.ok-loader):not([hidden]) { display:flex; align-items:center; gap:8px; }
.okd-app .okd-address-status:has(.ok-loader) { background:var(--okd-background); color:var(--okd-muted); }
.okd-app .okd-address-status[data-valid="pending"]:not([hidden], :has(.ok-loader)) { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:start; gap:10px; background:var(--okd-aviso-bg); color:var(--okd-aviso-ink); line-height:1.5; }
.okd-app .okd-address-status[data-valid="pending"]:not([hidden], :has(.ok-loader))::before { content:""; width:8px; height:8px; margin-top:6px; border-radius:50%; background:var(--okd-aviso); box-shadow:0 0 0 3px color-mix(in srgb,var(--okd-aviso) 28%,transparent); }
.okd-app .okd-address-status .okd-address-mark-map { display:block; width:fit-content; min-height:44px; margin-top:10px; padding:8px 16px; border:1px solid var(--okd-border-strong); border-radius:999px; background:var(--okd-surface); color:var(--okd-text); font:inherit; font-size:14px; font-weight:700; cursor:pointer; }
.okd-app .okd-address-status[data-valid="pending"] .okd-address-mark-map { grid-column:2; margin-top:0; }
.okd-app .okd-address-status .okd-address-mark-map:focus-visible { outline:3px solid var(--okd-brand); outline-offset:2px; }
.okd-app .okd-address-status [data-precision-note] { display:block; margin-top:2px; color:var(--okd-muted); font-size:13px; }
.okd-app .okd-checkout [data-address-search] { font-size:14px; min-height:36px; padding:8px 10px; }
.okd-app .okd-checkout [data-address-manual][hidden] { display:none; }
.ok-delivery-workspace .okd-coverage-settings { border-top:1px solid var(--okd-border); padding-top:12px; margin:12px 0; }
.ok-delivery-workspace .okd-coverage-settings [hidden] { display:none; }
.ok-delivery-workspace .okd-coverage-city-add { display:flex; flex-wrap:wrap; align-items:end; gap:8px; }
.ok-delivery-workspace .okd-coverage-city-add label { flex:1 1 120px; min-width:0; }
.ok-delivery-workspace [data-coverage-city-list] { display:flex; flex-wrap:wrap; gap:8px; margin:8px 0; }
.ok-delivery-workspace [data-coverage-city-list] > span { padding:4px 8px; border-radius:8px; background:var(--okd-soft); }
.okd-app .okd-checkout .okd-fulfillment legend { padding:0 0 12px; font-size:14px; font-weight:600; }
.okd-app .okd-fulfillment__options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.okd-app .okd-fulfillment__option { display:grid; grid-template-columns:20px minmax(0,1fr); align-items:start; gap:8px; min-width:0; padding:14px 12px; border:1px solid var(--okd-border); border-radius:12px; background:var(--okd-surface); cursor:pointer; }
.okd-app .okd-fulfillment__option:only-child { grid-column:1/-1; }
.okd-app .okd-fulfillment__option:has(:checked) { background:var(--okd-soft); border-color:var(--okd-brand); box-shadow:inset 0 0 0 1px var(--okd-brand); }
.okd-app .okd-fulfillment__option:focus-within { outline:3px solid var(--okd-brand); outline-offset:3px; }
.okd-app .okd-checkout .okd-fulfillment__option input[type=radio] { width:20px; height:20px; min-height:20px; margin:0; padding:0; accent-color:var(--okd-brand); }
.okd-app .okd-checkout .okd-fulfillment__option input:focus-visible { outline:none; } /* The entire choice has the visible focus ring. */
.okd-app .okd-fulfillment__option strong { display:block; font-size:14px; line-height:1.4; overflow-wrap:anywhere; }
.okd-app .okd-fulfillment__option small { display:block; margin-top:5px; font-size:12px; line-height:1.5; color:var(--okd-muted); }
.okd-app .okd-fulfillment__option svg { grid-column:2; width:22px; height:22px; color:var(--okd-brand-text); }
.okd-app .okd-fulfillment-hint { margin:0; color:var(--okd-muted); font-size:14px; }
.okd-app .okd-pickup-address { display:flex; align-items:start; gap:12px; min-width:0; padding:16px; border-radius:12px; background:var(--okd-background); }
.okd-app .okd-pickup-address > svg { width:24px; height:24px; flex:none; color:var(--okd-brand-text); }
.okd-app .okd-pickup-address > div { min-width:0; overflow-wrap:anywhere; }
.okd-app .okd-pickup-address p { margin:8px 0; font-size:14px; line-height:1.6; }
.okd-app .okd-pickup-address small { color:var(--okd-brand-text); font-weight:600; }
.okd-app .okd-checkout { display:flex; flex-direction:column; overflow:hidden; max-height:94dvh; }
.okd-app .okd-checkout > header { flex:none; padding:16px 20px; }
.okd-app .okd-checkout > header svg { width:22px; height:22px; }
.okd-app .okd-checkout > header small { color:var(--okd-muted); }
.okd-app .okd-checkout [hidden] { display:none !important; }
.okd-app .okd-checkout form { display:flex; flex-direction:column; min-height:0; overflow:hidden; }
.okd-app .okd-checkout-trail { display:flex; flex:none; gap:8px; margin:0; padding:12px 20px; list-style:none; border-bottom:1px solid var(--okd-border); }
.okd-app .okd-checkout-trail li { display:flex; align-items:center; justify-content:center; gap:6px; flex:1; min-width:0; font-size:12px; color:var(--okd-muted); }
.okd-app .okd-checkout-trail li.is-current { color:var(--okd-brand-text); font-weight:700; }
.okd-app .okd-checkout-trail svg { width:18px; height:18px; flex:none; }
.okd-app .okd-checkout-step { display:grid; grid-template-columns:minmax(0,1fr); gap:14px; padding:20px; overflow:auto; min-height:0; overscroll-behavior:contain; }
.okd-app .okd-checkout-step > label { display:grid; gap:6px; font-size:14px; font-weight:600; min-width:0; }
.okd-app .okd-checkout-step :is(input,select,textarea) { width:100%; box-sizing:border-box; }
.okd-app .okd-checkout-step input:is([type=radio],[type=checkbox]) { width:auto; min-height:0; }
.okd-app .okd-checkout-step :is(small,p) { overflow-wrap:anywhere; }
.okd-app .okd-checkout form > footer { position:static; flex:none; padding:12px 20px max(12px,env(safe-area-inset-bottom)); border-top:1px solid var(--okd-border); }
.okd-app .okd-checkout form > footer .okd-checkout-actions { display:flex; gap:12px; }
.okd-app .okd-checkout-actions button { flex:1; min-width:0; }
.okd-app .okd-checkout-actions :is([data-checkout-back],[data-checkout-skip]) { flex:0 0 auto; background:var(--okd-background); color:var(--okd-brand-text); }
.okd-app .okd-checkout form:not([data-checkout-step="4"]) .okd-checkout-totals > div:first-child { display:none; }
.okd-app .okd-checkout form[data-checkout-step="1"] .okd-checkout-totals > div:not(:last-child) { display:none; }
.okd-app .okd-checkout .okd-checkout-totals > div:last-child { font-size:18px; padding-top:4px; border:0; }
.okd-app .okd-checkout .okd-checkout__error:not(:empty) { flex:none; margin:8px 20px; max-height:88px; overflow:auto; }
.okd-app .okd-checkout-review { display:grid; gap:12px; }
.okd-app .okd-checkout-review article { padding:14px; border-radius:12px; background:var(--okd-background); min-width:0; }
.okd-app .okd-checkout-review article > div { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.okd-app .okd-checkout-review p { display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 12px; margin:8px 0 0; font-size:14px; }
.okd-app .okd-checkout-review small { display:block; width:100%; color:var(--okd-muted); font-size:13px; }
.okd-app .okd-checkout-review button { min-height:40px; padding:6px 10px; border:0; border-radius:8px; background:var(--okd-surface); color:var(--okd-brand-text); font:inherit; }
.okd-app .okd-checkout-step .okd-group-questions { padding:0; }
@media(min-width:601px) {
  .okd-app .okd-checkout-step[data-checkout-panel="2"] { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .okd-app .okd-checkout-step[data-checkout-panel="2"] > :is(:first-child,.is-wide) { grid-column:1/-1; }
}
@media(max-width:380px) {
  .okd-app .okd-checkout-trail { gap:4px; padding:10px 12px; }
  .okd-app .okd-checkout-trail li { flex-direction:column; font-size:11px; }
}
@media(max-height:500px) {
  .okd-app .okd-checkout > header { padding:8px 16px; }
  .okd-app .okd-checkout > header h2 { font-size:20px; }
  .okd-app .okd-checkout > header small { font-size:12px; }
  .okd-app .okd-checkout-trail { display:none; }
  .okd-app .okd-checkout-step { padding:12px 16px; gap:12px; }
  .okd-app .okd-checkout form > footer { padding:8px 16px max(8px,env(safe-area-inset-bottom)); }
}

/* Consumer navigation. Never inherits or changes the merchant's theme. */
/* Order tracking — Figma 86:248. Public storefront only, no merchant/PDV selectors. */
.okd-app :is([data-consumer-menu],[data-repeat-order],[data-history-details]) { position:relative; }
.okd-app .okd-order-unread { display:inline-block; width:10px; height:10px; flex:0 0 10px; border-radius:50%; background:#d6293e; outline:2px solid var(--okd-surface); vertical-align:middle; }
.okd-app [data-consumer-menu] > .okd-order-unread { position:absolute; right:5px; top:5px; }
.okd-app .okd-order-unread[hidden], .okd-app .okd-order-progress[hidden], .okd-app .okd-order-progress [hidden], .okd-app .okd-order-detail [hidden] { display:none; }
.okd-app .okd-order-progress { margin-top:16px; }
.okd-app .okd-order-progress > button { width:100%; display:flex; align-items:center; gap:12px; padding:12px 16px; min-height:56px; border:1px solid var(--okd-border); border-radius:12px; text-align:left; background:var(--okd-soft); color:var(--okd-brand-text); font:inherit; cursor:pointer; }
.okd-app .okd-order-progress > button > span:nth-child(2) { flex:1; min-width:0; display:grid; gap:4px; }
.okd-app .okd-order-progress small { color:var(--okd-muted); line-height:1.5; }
.okd-app .okd-order-progress > small { display:block; margin-top:8px; }
.okd-app .okd-order-progress svg { width:24px; height:24px; }
.okd-app .okd-order-detail { width:min(520px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); padding:0; box-sizing:border-box; border:1px solid var(--okd-border); border-radius:16px; background:var(--okd-background); color:var(--okd-text); overflow:auto; overscroll-behavior:contain; font:inherit; box-shadow:var(--okd-shadow-dialog); }
.okd-app .okd-order-detail > header { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:16px 20px; position:sticky; top:0; z-index:1; background:var(--okd-surface); border-bottom:1px solid var(--okd-border); }
.okd-app .okd-order-detail h2 { font-size:24px; margin:4px 0 0; line-height:1.25; overflow-wrap:anywhere; }
.okd-app .okd-order-detail h3 { margin:0 0 12px; font-size:18px; }
.okd-app .okd-order-detail small { display:block; color:var(--okd-muted); line-height:1.5; font-size:12px; }
.okd-app .okd-order-detail button { min-height:44px; min-width:44px; padding:10px 12px; border:1px solid var(--okd-border); border-radius:12px; background:var(--okd-surface); color:var(--okd-brand-text); font:inherit; cursor:pointer; }
.okd-app .okd-order-detail button svg { width:20px; height:20px; vertical-align:middle; }
.okd-app .okd-order-detail :is(button,a):focus-visible, .okd-app .okd-order-progress button:focus-visible { outline:3px solid var(--okd-brand); outline-offset:2px; }
.okd-app .okd-order-detail [data-detail-body] { padding:16px 20px; }
.okd-app .okd-detail-meta { color:var(--okd-muted); font-size:13px; margin:0 0 16px; }
.okd-app .okd-detail-current { display:grid; gap:6px; padding:16px; border-radius:12px; background:var(--okd-soft); color:var(--okd-brand-text); }
.okd-app .okd-detail-current strong { font-size:18px; }
.okd-app .okd-order-timeline { list-style:none; margin:16px 0; padding:0; }
.okd-app .okd-order-timeline li { position:relative; display:flex; align-items:center; gap:12px; padding:12px 8px; min-height:64px; box-sizing:border-box; border-radius:12px; }
.okd-app .okd-order-timeline li::before { content:""; position:absolute; left:20px; top:0; bottom:0; width:2px; background:var(--okd-border); }
.okd-app .okd-order-timeline li:first-child::before { top:50%; }
.okd-app .okd-order-timeline li:last-child::before { bottom:50%; }
.okd-app .okd-timeline-icon { position:relative; display:grid; place-items:center; width:24px; height:24px; flex:0 0 24px; border-radius:50%; color:var(--okd-muted); background:var(--okd-background); }
.okd-app .okd-timeline-icon svg { width:19px; height:19px; }
.okd-app .okd-order-timeline li strong { font-size:14px; line-height:1.5; }
.okd-app .okd-order-timeline li.is-done .okd-timeline-icon { background:var(--okd-soft); color:var(--okd-brand-text); }
.okd-app .okd-order-timeline .is-current { background:var(--okd-soft); color:var(--okd-brand-text); }
.okd-app .okd-order-detail .is-interrupted { color:var(--okd-danger); background:var(--okd-danger-bg); }
.okd-app .okd-order-summary { padding:16px; background:var(--okd-surface); border:1px solid var(--okd-border); border-radius:12px; overflow-wrap:anywhere; }
.okd-app .okd-order-summary article { display:flex; gap:12px; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--okd-border); font-size:14px; }
.okd-app .okd-order-summary article > div { flex:1; min-width:0; }
.okd-app .okd-order-summary article > strong { white-space:nowrap; }
.okd-app .okd-order-summary dl > div { display:flex; justify-content:space-between; gap:12px; margin:10px 0; font-size:14px; }
.okd-app .okd-order-summary dd { margin:0; text-align:right; }
.okd-app .okd-order-summary .okd-summary-total { padding-top:12px; border-top:1px solid var(--okd-border); font-size:18px; font-weight:700; }
.okd-app .okd-order-summary p { font-size:14px; line-height:1.5; }
.okd-app .okd-order-detail > footer { display:flex; flex-wrap:wrap; gap:12px; padding:16px 20px; border-top:1px solid var(--okd-border); background:var(--okd-surface); }
.okd-app .okd-order-detail > :is([data-detail-error],[data-detail-stale]) { padding:0 20px; color:var(--okd-danger); font-size:13px; }
.okd-app .okd-order-detail > [data-detail-error]:empty { display:none; }
.okd-app .okd-order-detail > [data-detail-refresh] { margin:0 20px 16px; }
.okd-app .okd-history-order:has([data-history-details]) { flex-wrap:wrap; gap:8px; }
.okd-app .okd-history-order:has([data-history-details]) > div { flex:1 1 100%; }
.okd-app [data-history-details] .okd-order-unread { margin-left:8px; }
.okd-app [data-track-confirmed] svg { width:20px; height:20px; vertical-align:middle; }
@media(prefers-reduced-motion:no-preference) { .okd-app .okd-order-detail[open] { animation:okd-order-detail-enter 140ms ease-out; } }
@keyframes okd-order-detail-enter { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
.okd-app { min-height:100dvh; --okd-action:#176b45; --ink:var(--okd-text); --muted:var(--okd-muted); --paper:var(--okd-background); --card:var(--okd-surface); --green:var(--okd-brand); --green-dark:var(--okd-brand); --line:var(--okd-border); }
.okd-app[data-okd-theme="dark"] { --okd-background:#101914; --okd-surface:#18241d; --okd-text:#eef6f0; --okd-muted:#b4c5ba; --okd-border:#3c5144; --okd-soft:#203c2c; --okd-brand:#8ce0b2; --okd-brand-hover:#abefca; --okd-danger:#ffaaaa; --okd-danger-bg:#442626; color-scheme:dark; }
.okd-app :is(.okd-checkout,.okd-product-modal) :is(input,select,textarea), .okd-app .okd-cart-quantity input { background:var(--okd-surface); }
.okd-app .okd-checkout :is(input,textarea)::placeholder, .okd-app .okd-search input::placeholder { color:var(--okd-muted); opacity:1; }
.okd-app .okd-product :is(s,em) { color:var(--okd-muted); }
.okd-app .okd-group-questions label:has(:checked) { background:var(--okd-soft); color:var(--okd-brand-text); border-color:var(--okd-brand); }
.okd-app .okd-cart > footer > p { color:var(--okd-danger); }
.okd-app .okd-order-tracking { background:var(--okd-soft); border-color:var(--okd-border); }
.okd-app .okd-order-tracking :is(strong,span) { color:var(--okd-text); }
.okd-app .okd-order-tracking button { background:var(--okd-action); }
.okd-app .okd-categories button.is-active, .okd-app .okd-cart-bar > button,
.okd-app :is(.okd-cart,.okd-product-modal,.okd-checkout) footer button:not([data-checkout-back]):not([data-checkout-skip]):not(.okd-freeship__more),
.okd-app .okd-order-confirmed button, .okd-app .okd-order-history .okd-history-primary,
.okd-app .okd-store-card__share [data-share-store] { background:var(--okd-action); color:#fff; }
.okd-app .okd-public-topbar { display:grid; grid-template-columns:52px minmax(0,1fr) 52px; align-items:center; gap:16px; }
.okd-app .okd-menu-toggle { display:grid; place-items:center; width:48px; height:48px; border:1px solid var(--okd-border); border-radius:12px; background:var(--okd-surface); color:var(--okd-text); cursor:pointer; }
.okd-app .okd-menu-toggle svg { width:24px; height:24px; }
.okd-app .okd-public-topbar .okd-hero__brand[data-store-info] { text-align:center; min-height:52px; }
.okd-app .okd-public-topbar .okd-hero__brand strong { margin:0; font-size:clamp(20px,3vw,30px); line-height:1.2; }
.okd-app .okd-public-topbar .okd-brand-info { display:inline-flex; align-items:center; gap:4px; color:var(--okd-muted); margin-top:6px; font-size:11px; letter-spacing:normal; text-transform:none; font-weight:500; }
.okd-app .okd-public-topbar .okd-brand-info svg { width:14px; height:14px; }
.okd-app .okd-public-logo { display:grid; place-items:center; width:52px; height:52px; border-radius:12px; background:var(--okd-surface); color:var(--okd-brand-text); overflow:hidden; }
.okd-app .okd-public-logo > svg { width:28px; height:28px; }
.okd-app .okd-public-logo:has(img) > svg { display:none; }
.okd-app .okd-public-logo .okd-store-logo { display:block; width:100%; height:100%; object-fit:contain; }
.okd-app .okd-public-description { text-align:center; margin:16px 0 0; color:var(--okd-muted); font-size:14px; overflow-wrap:anywhere; }
.okd-app .okd-hero__facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; max-width:560px; margin:24px auto 0; }
.okd-app .okd-hero__facts > div { display:flex; align-items:center; justify-content:center; gap:10px; padding:4px 12px; min-width:0; }
.okd-app .okd-hero__facts > div + div { border-left:1px solid var(--okd-border); }
.okd-app .okd-hero__facts svg { width:26px; height:26px; flex:none; color:var(--okd-brand-text); }
.okd-app .okd-hero__facts strong { display:block; font-size:18px; font-weight:650; overflow-wrap:anywhere; }
.okd-app .okd-hero__facts small { display:block; color:var(--okd-muted); font-size:12px; }
.okd-app .okd-public-availability { display:flex; gap:8px; align-items:center; justify-content:center; padding:12px; border-radius:12px; margin-top:20px; background:var(--okd-surface); color:var(--okd-brand-text); font-size:14px; font-weight:600; }
.okd-app .okd-public-availability > svg { width:20px; height:20px; flex:none; }
.okd-app .okd-public-availability:has(.is-closed) { background:var(--okd-danger-bg); color:var(--okd-danger); }
.okd-app .okd-profile-status { margin:12px 0 0; color:var(--okd-brand-text); font-size:13px; text-align:center; }
.okd-app:has(:is(.okd-consumer-menu,.okd-customer-profile,.okd-order-history)[open]) { overflow:hidden; }
.okd-app :is(.okd-consumer-menu,.okd-customer-profile) { padding:0; border:0; background:var(--okd-surface); color:var(--okd-text); font:inherit; overflow:hidden; box-shadow:var(--okd-shadow-dialog); }
.okd-app .okd-consumer-menu { position:fixed; inset:0 auto 0 0; width:340px; max-width:calc(100vw - 40px); height:100dvh; max-height:100dvh; margin:0; border-radius:0 20px 20px 0; }
.okd-app .okd-consumer-menu[open] { display:flex; flex-direction:column; }
.okd-app :is(.okd-consumer-menu,.okd-customer-profile) > header { display:flex; align-items:center; gap:12px; justify-content:space-between; padding:24px 20px 20px; border-bottom:1px solid var(--okd-border); flex:none; }
.okd-app :is(.okd-consumer-menu,.okd-customer-profile) > header > div { min-width:0; }
.okd-app :is(.okd-consumer-menu,.okd-customer-profile) h2 { margin:4px 0 0; font-size:22px; line-height:1.3; overflow-wrap:anywhere; }
.okd-app :is(.okd-consumer-menu,.okd-customer-profile) small { color:var(--okd-muted); font-size:12px; }
.okd-app :is(.okd-consumer-menu,.okd-customer-profile) [data-consumer-close] { display:grid; place-items:center; width:44px; height:44px; flex:none; border:0; border-radius:12px; background:var(--okd-background); color:var(--okd-text); cursor:pointer; }
.okd-app :is(.okd-consumer-menu,.okd-customer-profile) svg { width:22px; height:22px; flex:none; }
.okd-app .okd-consumer-menu > nav { display:grid; align-content:start; gap:8px; padding:20px 12px; overflow:auto; min-height:0; }
.okd-app .okd-consumer-menu nav button { display:flex; align-items:center; gap:14px; width:100%; min-height:68px; padding:14px; border:0; border-radius:12px; background:var(--okd-surface); color:var(--okd-text); font:inherit; text-align:left; cursor:pointer; }
.okd-app .okd-consumer-menu nav button small { display:block; margin-top:3px; }
.okd-app .okd-consumer-menu nav button > svg { color:var(--okd-brand-text); }
.okd-app .okd-consumer-menu > footer { display:grid; gap:12px; padding:20px 20px max(20px,env(safe-area-inset-bottom)); margin-top:auto; border-top:1px solid var(--okd-border); font-size:13px; flex:none; }
.okd-app .okd-theme-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.okd-app .okd-theme-options button { display:flex; align-items:center; justify-content:center; gap:8px; min-height:46px; padding:8px; border:1px solid var(--okd-border); border-radius:10px; color:var(--okd-muted); background:var(--okd-background); cursor:pointer; }
.okd-app .okd-theme-options button[aria-pressed="true"] { border-color:var(--okd-brand); background:var(--okd-soft); color:var(--okd-brand-text); box-shadow:inset 0 0 0 1px var(--okd-brand); font-weight:600; }
.okd-app [data-consumer-theme-status]:empty { display:none; }
.okd-app .okd-customer-profile { position:fixed; inset:0; width:560px; max-width:calc(100vw - 24px); max-height:92dvh; height:fit-content; margin:auto; border-radius:20px; }
.okd-app .okd-customer-profile[open] { display:flex; flex-direction:column; }
.okd-app .okd-customer-profile form { display:flex; flex-direction:column; overflow:hidden; min-height:0; }
.okd-app .okd-profile-body { overflow:auto; overscroll-behavior:contain; padding:20px; min-height:0; }
.okd-app .okd-profile-body > p:first-child { margin:0 0 16px; color:var(--okd-muted); font-size:14px; }
.okd-app .okd-profile-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.okd-app .okd-profile-grid label { display:grid; gap:6px; font-size:13px; min-width:0; color:var(--okd-text); }
.okd-app .okd-profile-grid :is(input,select) { width:100%; min-width:0; min-height:44px; padding:10px 12px; border:1px solid var(--okd-border); border-radius:10px; background:var(--okd-background); color:var(--okd-text); font-size:16px; }
.okd-app .okd-profile-grid :is(.is-wide,[name=fulfillmentType]) { grid-column:1/-1; }
.okd-app .okd-profile-address { margin:20px 0 0; border-top:1px solid var(--okd-border); }
.okd-app .okd-profile-address summary { display:flex; align-items:center; gap:10px; min-height:56px; color:var(--okd-brand-text); cursor:pointer; font-size:14px; font-weight:600; }
.okd-app .okd-profile-address > small { display:block; margin-top:12px; }
.okd-app .okd-profile-notice { color:var(--okd-muted); font-size:12px; line-height:1.6; margin:20px 0 12px; }
.okd-app .okd-profile-forget { min-height:44px; border:0; border-radius:8px; padding:8px 12px; background:var(--okd-background); color:var(--okd-danger); cursor:pointer; font-size:13px; }
.okd-app [data-profile-error] { color:var(--okd-danger); font-size:14px; margin:12px 0 0; }
.okd-app [data-profile-error]:empty { display:none; }
.okd-app .okd-customer-profile form > footer { padding:16px 20px max(16px,env(safe-area-inset-bottom)); background:var(--okd-surface); border-top:1px solid var(--okd-border); flex:none; }
.okd-app .okd-profile-save { width:100%; min-height:48px; padding:12px; border:0; border-radius:12px; background:var(--okd-action); color:#fff; font-weight:600; cursor:pointer; }
.okd-app :is(.okd-consumer-menu,.okd-customer-profile) :is(button,input,select,summary):focus-visible { outline:3px solid var(--okd-brand); outline-offset:2px; }
@media(hover:hover) { .okd-app .okd-consumer-menu nav button:hover { background:var(--okd-soft); } }
@media(max-width:600px) {
  .okd-app .okd-public-topbar { grid-template-columns:44px minmax(0,1fr) 44px; gap:10px; }
  .okd-app .okd-public-topbar :is(.okd-menu-toggle,.okd-public-logo) { width:44px; height:44px; }
  .okd-app .okd-hero__facts > div { padding:4px 6px; gap:8px; }
  .okd-app .okd-hero__facts strong { font-size:16px; }
  .okd-app .okd-hero__facts small { font-size:11px; }
  .okd-app .okd-customer-profile { inset:auto 0 0; max-width:100vw; width:100%; margin:0; border-radius:20px 20px 0 0; }
  .okd-app .okd-profile-grid { grid-template-columns:minmax(0,1fr); }
}
@media(max-height:480px) { .okd-app .okd-consumer-menu > header { padding:12px; } .okd-app .okd-consumer-menu > footer { padding:12px; gap:6px; } }
@media(prefers-reduced-motion:no-preference) { .okd-app .okd-consumer-menu[open] { animation:okd-consumer-menu-enter 160ms ease-out; } }
@keyframes okd-consumer-menu-enter { from { opacity:0; transform:translateX(-12px); } to { opacity:1; transform:translateX(0); } }

/* Personalization is confined to Delivery; no shared merchant/PDV selectors. */
.ok-delivery-workspace .okd-personalization-editor { width:min(760px,calc(100vw - 24px)); max-height:calc(100dvh - 32px); padding:0; border:1px solid var(--okd-border); border-radius:16px; background:var(--okd-surface); color:var(--okd-text); overflow:auto; }
.ok-delivery-workspace .okd-personalization-editor::backdrop { background:rgb(0 0 0 / .48); }
.ok-delivery-workspace .okd-personalization-editor :is(header,footer) { position:sticky; background:var(--okd-surface); z-index:2; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 20px; }
.ok-delivery-workspace .okd-personalization-editor header { top:0; border-bottom:1px solid var(--okd-border); }
.ok-delivery-workspace .okd-personalization-editor footer { bottom:0; border-top:1px solid var(--okd-border); }
.ok-delivery-workspace .okd-personalization-editor :is(h3,h4,p) { margin:0 0 8px; overflow-wrap:anywhere; }
.ok-delivery-workspace .okd-personalization-editor [data-body] { padding:16px 20px; display:grid; gap:16px; }
.ok-delivery-workspace .okd-personalization-editor [data-progress] { color:var(--okd-brand); font-weight:700; padding:16px 20px 0; }
.ok-delivery-workspace .okd-personalization-editor [data-status] { padding:0 20px; color:var(--okd-danger); }
.ok-delivery-workspace .okd-personalization-editor :is(button,input,select) { min-height:44px; border-radius:8px; border:1px solid var(--okd-border); color:var(--okd-text); background:var(--okd-surface); font:inherit; padding:8px 12px; max-width:100%; box-sizing:border-box; }
.ok-delivery-workspace .okd-personalization-editor button { display:inline-flex; align-items:center; justify-content:center; gap:6px; cursor:pointer; }
.ok-delivery-workspace .okd-personalization-editor button:disabled { opacity:.5; cursor:default; }
.ok-delivery-workspace .okd-personalization-editor [data-next] { background:var(--okd-brand); color:white; border-color:var(--okd-brand); font-weight:700; }
.ok-delivery-workspace .okd-personalization-editor label { display:grid; gap:6px; font-size:14px; min-width:0; }
.ok-delivery-workspace .okd-personalization-editor input[type=checkbox] { min-height:20px; width:20px; padding:0; accent-color:var(--okd-brand); }
.ok-delivery-workspace .okd-personalization-editor :is(form,.okd-personalization-origin,.okd-personalization-guides) { display:flex; flex-wrap:wrap; align-items:end; gap:8px; }
.ok-delivery-workspace .okd-personalization-editor form label { flex:1; }
.ok-delivery-workspace .okd-personalization-editor :is([data-sources],[data-products],[data-components]) { display:grid; gap:8px; }
.ok-delivery-workspace .okd-personalization-editor [data-sources] button { flex-direction:column; align-items:start; text-align:left; }
.ok-delivery-workspace .okd-personalization-limits { display:grid; grid-template-columns:2fr 1fr 1fr; gap:12px; }
.ok-delivery-workspace .okd-personalization-editor [data-component] { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:end; gap:12px; border:1px solid var(--okd-border); border-radius:12px; padding:12px; }
.ok-delivery-workspace .okd-personalization-editor [data-component]>strong { grid-column:1/-1; }
.ok-delivery-workspace .okd-personalization-editor [aria-pressed=true] { background:var(--okd-soft); border-color:var(--okd-brand); }
.ok-delivery-workspace .okd-personalization-review { padding:16px; border:1px solid var(--okd-border); border-radius:12px; }
.ok-delivery-workspace .okd-personalization-review p { display:flex; justify-content:space-between; gap:12px; }
.ok-delivery-workspace .okd-personalization-editor [hidden] { display:none!important; }
.ok-delivery-workspace .okd-personalization-editor :is(button,input,select):focus-visible { outline:3px solid var(--okd-brand); outline-offset:2px; }
.okd-app .okd-custom-mount { max-height:calc(100dvh - 24px); overflow:auto; }
.okd-app .okd-custom-mount header { position:sticky; top:0; background:var(--okd-surface); z-index:2; }
.okd-app .okd-custom-mount :is([data-mount-status],[data-mount-body]) { padding:0 20px; }
.okd-app .okd-custom-mount [data-mount-progress] { font-weight:700; color:var(--okd-brand-text); }
.okd-app .okd-custom-mount fieldset { margin:0; padding:0; border:0; min-width:0; }
.okd-app .okd-custom-mount legend { font-size:20px; font-weight:700; }
.okd-app .okd-custom-options { display:grid; gap:10px; }
.okd-app .okd-custom-mount .okd-custom-choice { display:flex; flex-direction:row; align-items:center; gap:12px; padding:14px; border:1px solid var(--okd-border); border-radius:12px; background:var(--okd-surface); cursor:pointer; }
.okd-app .okd-custom-choice.is-selected { border-color:var(--okd-brand); background:var(--okd-soft); }
.okd-app .okd-custom-choice.is-unavailable { opacity:.6; }
.okd-app .okd-custom-choice>span { display:grid; flex:1; gap:4px; min-width:0; overflow-wrap:anywhere; }
.okd-app .okd-custom-choice small { color:var(--okd-muted); }
.okd-app .okd-custom-choice input:is([type=checkbox],[type=radio]) { width:20px; min-height:20px; height:20px; accent-color:var(--okd-brand); }
.okd-app .okd-custom-quantity { display:flex; align-items:center; gap:4px; }
.okd-app .okd-custom-mount .okd-custom-quantity :is(input,button) { min-height:44px; width:44px; padding:4px; text-align:center; }
.okd-app .okd-custom-mount [data-mount-review] { display:grid; gap:12px; }
.okd-app .okd-custom-mount [data-mount-summary] p { padding:8px 0; border-bottom:1px solid var(--okd-border); }
.okd-app .okd-custom-mount footer { position:sticky; bottom:0; background:var(--okd-surface); display:grid; gap:12px; margin:12px -20px 0; border-top:1px solid var(--okd-border); padding:16px 20px; }
.okd-app .okd-custom-total { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.okd-app .okd-custom-total strong { font-size:24px; color:var(--okd-brand-text); }
.okd-app .okd-custom-actions { display:grid; grid-template-columns:auto 1fr; gap:10px; }
.okd-app .okd-custom-actions button { min-height:48px; }
.okd-app .okd-product-modal.okd-custom-mount [data-mount-back] { background:var(--okd-surface); border:1px solid var(--okd-border); color:var(--okd-text); }
.okd-app .okd-product-modal.okd-custom-mount [data-mount-next] { background:var(--okd-action); color:var(--okd-on-action); }
.okd-app .okd-product-modal.okd-custom-mount :is(input,textarea) { background:var(--okd-surface); color:var(--okd-text); }
.okd-app .okd-product .okd-custom-badge { display:block; margin-top:8px; color:var(--okd-brand-text); font-size:13px; font-weight:600; }
.okd-app .okd-cart [data-cart-error] { color:var(--okd-danger); padding:0 20px; }
.okd-app .okd-custom-mount [data-mount-error],.okd-app .okd-custom-mount [data-mount-status] { color:var(--okd-danger); }
.okd-app .okd-custom-mount [hidden] { display:none!important; }
.okd-app .okd-custom-mount :is(button,input,textarea):focus-visible { outline:3px solid var(--okd-brand); outline-offset:2px; }
.okd-app .okd-cart .okd-edit-mount { width:auto; background:var(--okd-soft); color:var(--okd-brand-text); padding:8px 12px; min-height:44px; margin-top:8px; }
@media(max-width:480px) {
  .ok-delivery-workspace .okd-personalization-limits { grid-template-columns:1fr 1fr; }
  .ok-delivery-workspace .okd-personalization-limits>label:first-child { grid-column:1/-1; }
  .ok-delivery-workspace .okd-personalization-editor [data-component] { grid-template-columns:1fr 1fr; }
  .okd-app .okd-custom-mount { width:100%; max-height:100dvh; border-radius:16px 16px 0 0; }
}

/* Linked launch offer: private merchant catalog only. */
.ok-delivery-workspace .okd-linked-offer { border:1px solid var(--okd-border); border-radius:12px; background:var(--okd-soft); padding:16px; margin:12px 0; color:var(--okd-text); }
.ok-delivery-workspace .okd-linked-offer h3 { margin:0 0 8px; font-size:17px; }
.ok-delivery-workspace .okd-linked-offer article { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; padding:12px 0; border-top:1px solid var(--okd-border); }
.ok-delivery-workspace .okd-linked-offer article>div { display:grid; gap:4px; min-width:0; overflow-wrap:anywhere; }
.ok-delivery-workspace .okd-linked-offer small { color:var(--okd-muted); }
.ok-delivery-workspace .okd-linked-offer nav { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.ok-delivery-workspace .okd-linked-offer button { min-height:44px; white-space:normal; }
.ok-delivery-workspace .okd-linked-offer button:focus-visible { outline:3px solid var(--okd-brand); outline-offset:2px; }
.ok-delivery-workspace .okd-personalization-editor [data-source] small { display:block; }

/* Visual 2026 do cardápio público. Somente .okd-app (pedir.html); o painel do lojista não usa estas regras. */
.okd-app { --okd-border:#e1e7e3; --okd-border-strong:#cdd7d1; --okd-price:#0d4c30; --okd-promo:#e8a52f; --okd-promo-bg:#fdf1d8; --okd-promo-ink:#7a4e07; --okd-inverse:#172018; --okd-inverse-ink:#f6f8f6; --okd-float:0 12px 30px -10px rgba(16,25,20,.45); }
.okd-app[data-okd-theme="dark"] { --okd-border:#26332b; --okd-border-strong:#3a4b40; --okd-price:#abefca; --okd-promo:#f2b75b; --okd-promo-bg:#3a2c12; --okd-promo-ink:#f2b75b; --okd-inverse:#eef6f0; --okd-inverse-ink:#101914; --okd-float:0 12px 30px -10px rgba(0,0,0,.7); }
.okd-app .okd-visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.okd-app .okd-store { max-width:760px; padding-bottom:120px; }
.okd-app :is(h1,h2,h3,strong) { letter-spacing:-.01em; }
/* Cabeçalho compacto: menu, nome e logo em uma linha; status em chips. */
.okd-app .okd-hero { margin:0; padding:14px 20px 4px; border-radius:0; background:transparent; }
.okd-app .okd-public-topbar { grid-template-columns:44px minmax(0,1fr) 46px; gap:12px; }
.okd-app .okd-menu-toggle { width:44px; height:44px; border-radius:12px; }
.okd-app .okd-menu-toggle svg { width:22px; height:22px; }
.okd-app .okd-public-topbar .okd-hero__brand[data-store-info] { text-align:left; min-height:44px; display:grid; align-content:center; gap:2px; }
.okd-app .okd-public-topbar .okd-hero__brand strong { font-size:clamp(18px,4.6vw,22px); font-weight:800; letter-spacing:-.02em; line-height:1.15; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.okd-app .okd-public-topbar .okd-brand-info { margin:0; gap:2px; font-size:12px; font-weight:500; color:var(--okd-muted); }
.okd-app .okd-public-topbar .okd-brand-info svg { width:13px; height:13px; }
.okd-app .okd-public-logo { width:46px; height:46px; border-radius:14px; border:1px solid var(--okd-border); }
.okd-app .okd-public-logo > svg { width:24px; height:24px; }
.okd-app .okd-public-description { margin:10px 0 0; text-align:left; font-size:13px; line-height:1.45; }
.okd-app .okd-public-status { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.okd-app .okd-public-availability { margin:0; padding:6px 11px 6px 10px; border-radius:999px; font-size:13px; font-weight:600; gap:7px; justify-content:flex-start; background:var(--okd-soft); color:var(--okd-brand-hover); }
.okd-app .okd-public-availability > svg { display:none; }
.okd-app .okd-public-availability::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--okd-brand); box-shadow:0 0 0 3px color-mix(in srgb,var(--okd-brand) 22%,transparent); flex:none; }
.okd-app .okd-public-availability:has(.is-closed) { background:var(--okd-danger-bg); color:var(--okd-danger); }
.okd-app .okd-public-availability:has(.is-closed)::before { background:var(--okd-danger); box-shadow:0 0 0 3px color-mix(in srgb,var(--okd-danger) 22%,transparent); }
.okd-app .okd-hero__facts { display:flex; flex-wrap:nowrap; gap:8px; margin:0; max-width:none; min-width:0; }
.okd-app .okd-hero__facts > div { flex:0 1 auto; min-width:0; padding:6px 11px; border:1px solid var(--okd-border); border-radius:999px; background:var(--okd-surface); font-size:13px; gap:6px; white-space:nowrap; overflow:hidden; }
.okd-app .okd-hero__facts > div + div { border-left:1px solid var(--okd-border); }
.okd-app .okd-hero__facts svg { width:15px; height:15px; color:var(--okd-muted); }
.okd-app .okd-hero__facts > div > div { display:flex; align-items:baseline; gap:4px; min-width:0; overflow:hidden; }
.okd-app .okd-hero__facts strong { display:inline; font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; }
.okd-app .okd-hero__facts small { display:inline; font-size:12px; }
.okd-app .okd-profile-status { text-align:left; }
.okd-app .okd-order-progress { margin-top:12px; }
/* Busca e categorias grudam no topo ao rolar. */
.okd-app .okd-toolbar { position:sticky; top:0; z-index:10; padding:10px 0 8px; background:var(--okd-background); box-shadow:0 1px 0 var(--okd-border); }
.okd-app .okd-search { display:flex; align-items:center; gap:10px; margin:0 20px; padding:0 14px; min-height:46px; border:1px solid var(--okd-border); border-radius:12px; background:var(--okd-surface); color:var(--okd-muted); font-weight:400; }
.okd-app .okd-search > svg { width:18px; height:18px; flex:none; }
.okd-app .okd-search input { flex:1; min-width:0; min-height:44px; padding:0; border:0; border-radius:0; background:transparent; font-size:16px; color:var(--okd-text); }
.okd-app .okd-search:focus-within { border-color:var(--okd-brand); box-shadow:0 0 0 2px color-mix(in srgb,var(--okd-brand) 25%,transparent); }
.okd-app .okd-search input:focus-visible { outline:none; }
.okd-app .okd-search-status { padding:12px 20px 0; font-size:14px; }
.okd-app .okd-categories { position:static; display:flex; gap:8px; padding:10px 20px 2px; border:0; background:transparent; backdrop-filter:none; overflow-x:auto; scrollbar-width:none; -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent); }
.okd-app .okd-categories::-webkit-scrollbar { display:none; }
.okd-app .okd-categories button { min-height:38px; padding:7px 14px; border-radius:999px; border:1px solid var(--okd-border); background:var(--okd-surface); color:var(--okd-text); font-size:13px; font-weight:600; white-space:nowrap; transition:background .15s,color .15s,border-color .15s; }
.okd-app .okd-categories button.is-active { background:var(--okd-inverse); color:var(--okd-inverse-ink); border-color:var(--okd-inverse); }
/* Lista de produtos: uma coluna, nome, descrição só quando existe, preço e "+". */
.okd-app .okd-menu { padding:10px 20px 24px; }
.okd-app .okd-category-section { margin-bottom:26px; scroll-margin-top:122px; }
.okd-app .okd-category-section > header h2 { display:flex; align-items:baseline; gap:8px; margin:0 0 10px; font-size:18px; font-weight:700; }
.okd-app .okd-category-section > header h2 small { font-size:13px; font-weight:500; color:var(--okd-muted); }
.okd-app .okd-category-section > header p { margin:-4px 0 10px; font-size:13px; }
.okd-app .okd-menu-empty { margin:24px 0; text-align:center; color:var(--okd-muted); }
.okd-app .okd-category-section > div { display:grid; grid-template-columns:minmax(0,1fr); gap:0; border:1px solid var(--okd-border); border-radius:16px; background:var(--okd-surface); overflow:hidden; }
.okd-app .okd-product { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:12px; min-height:0; padding:14px 12px 14px 16px; border:0; border-top:1px solid var(--okd-border); border-radius:0; background:transparent; box-shadow:none; }
.okd-app .okd-product:first-child { border-top:0; }
.okd-app .okd-product[hidden] { display:none; }
.okd-app .okd-product:first-child[hidden] + .okd-product { border-top:0; }
.okd-app .okd-product > div { display:grid; gap:3px; }
.okd-app .okd-product strong { font-size:15px; font-weight:600; line-height:1.3; }
.okd-app .okd-product p { margin:0; font-size:13px; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.okd-app .okd-product > div > span { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:2px; font-size:15px; font-weight:700; color:var(--okd-price); font-variant-numeric:tabular-nums; }
.okd-app .okd-product s { font-size:12px; font-weight:400; }
.okd-app .okd-promo-tag { padding:3px 6px; border-radius:6px; background:var(--okd-accent-wash,var(--okd-promo-bg)); color:var(--okd-accent-text,var(--okd-promo-ink)); font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; line-height:1; }
.okd-app .okd-product em { margin-top:2px; font-size:12px; font-weight:600; color:var(--okd-danger); }
.okd-app .okd-product .okd-custom-badge { margin-top:2px; font-size:12px; }
.okd-app .okd-product :is(img,.okd-product__placeholder) { width:64px; height:64px; border-radius:12px; }
.okd-app .okd-product__placeholder { width:48px; height:48px; opacity:.75; }
.okd-app .okd-product__placeholder svg { width:26px; height:26px; }
.okd-app .okd-product__add { display:grid; place-items:center; width:36px; height:36px; border:1px solid var(--okd-border-strong); border-radius:11px; background:var(--okd-surface); color:var(--okd-price); font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; transition:background .15s,color .15s; }
.okd-app .okd-product__add svg { width:18px; height:18px; stroke-width:2.2; }
.okd-app .okd-product__add.has-items { background:var(--okd-brand); border-color:var(--okd-brand); color:var(--okd-on-brand,#fff); }
.okd-app[data-okd-theme="dark"] .okd-product__add.has-items { color:#0b1a12; }
.okd-app .okd-product.is-blocked { opacity:.55; }
.okd-app .okd-product.is-blocked .okd-product__add { display:none; }
@media(hover:hover) { .okd-app .okd-product:not(:disabled):hover { background:var(--okd-background); } .okd-app .okd-categories button:not(.is-active):hover { border-color:var(--okd-border-strong); } }
.okd-app .okd-footer { flex-direction:column; align-items:center; gap:2px; padding:20px 20px 32px; font-size:12px; text-align:center; }
.okd-app .okd-footer strong { font-weight:600; }
/* Barra da sacola: pílula escura flutuante. */
.okd-app .okd-cart-bar { padding:10px 16px max(16px,env(safe-area-inset-bottom)); background:transparent; }
.okd-app .okd-cart-bar > button { align-items:center; gap:12px; min-height:56px; padding:12px 16px; border-radius:16px; background:var(--okd-inverse); color:var(--okd-inverse-ink); box-shadow:var(--okd-float); font-size:15px; font-weight:600; }
.okd-app .okd-cart-bar > button span { padding:4px 9px; border-radius:8px; background:color-mix(in srgb,currentColor 14%,transparent); font-size:13px; font-weight:600; }
.okd-app .okd-cart-bar > button strong { font-weight:700; font-variant-numeric:tabular-nums; }
/* Painéis (produto, sacola, checkout): raio maior, cabeçalho leve com puxador. */
.okd-app :is(.okd-cart,.okd-product-modal,.okd-checkout) { border-radius:24px 24px 0 0; box-shadow:0 -10px 40px rgba(0,0,0,.22); }
.okd-app :is(.okd-cart,.okd-product-modal,.okd-checkout) > header { position:relative; align-items:flex-start; padding:26px 20px 12px; border-bottom:0; }
.okd-app :is(.okd-cart,.okd-product-modal,.okd-checkout) > header::before { content:""; position:absolute; top:10px; left:50%; width:40px; height:4px; border-radius:2px; background:var(--okd-border-strong); transform:translateX(-50%); }
.okd-app :is(.okd-cart,.okd-product-modal,.okd-checkout) > header h2 { font-size:20px; font-weight:700; line-height:1.2; }
.okd-app :is(.okd-cart,.okd-product-modal,.okd-checkout) > header p { margin:4px 0 0; font-size:14px; color:var(--okd-muted); }
.okd-app :is(.okd-cart,.okd-product-modal,.okd-checkout) > header small { display:block; font-size:13px; color:var(--okd-muted); }
.okd-app :is(.okd-cart,.okd-product-modal,.okd-checkout) > header button { display:grid; place-items:center; width:36px; min-height:36px; height:36px; padding:0; border:0; border-radius:10px; background:var(--okd-background); color:var(--okd-text); font-size:16px; }
.okd-app :is(.okd-cart,.okd-product-modal,.okd-checkout) > header button svg { width:16px; height:16px; }
.okd-app .okd-product-modal__price { display:block; margin-top:8px; font-size:18px; font-weight:700; color:var(--okd-price); font-variant-numeric:tabular-nums; }
.okd-app .okd-product-modal__price s { margin-right:4px; font-size:13px; font-weight:400; color:var(--okd-muted); }
.okd-app .okd-option-groups fieldset { margin:0; padding:14px 20px 4px; border:0; border-top:1px solid var(--okd-border); border-radius:0; }
.okd-app .okd-option-groups legend { padding:0; font-weight:700; font-size:14px; }
.okd-app .okd-option-groups legend small { font-weight:500; font-size:12px; }
.okd-app .okd-option-groups label { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px; min-height:48px; padding:10px 12px; margin:8px 0; border:1px solid var(--okd-border); border-radius:12px; font-size:14px; font-weight:500; cursor:pointer; }
.okd-app .okd-option-groups label strong { font-size:13px; font-weight:500; color:var(--okd-muted); font-variant-numeric:tabular-nums; }
.okd-app .okd-option-groups label:has(input:checked) strong { color:var(--okd-brand-hover); }
.okd-app .okd-field-error:empty { min-height:0; margin:0; }
.okd-app .okd-note { padding:14px 20px 8px; font-size:13px; font-weight:600; }
.okd-app .okd-note textarea { padding:11px 13px; border-radius:12px; background:var(--okd-background); font-weight:400; }
.okd-app .okd-product-modal form > footer { display:flex; align-items:center; gap:12px; padding:12px 20px max(20px,env(safe-area-inset-bottom)); border-top:1px solid var(--okd-border); }
.okd-app .okd-stepper { display:inline-flex; align-items:center; height:48px; flex:none; border:1px solid var(--okd-border-strong); border-radius:12px; overflow:hidden; }
.okd-app .okd-stepper button { width:42px; height:100%; min-height:0; padding:0; border:0; border-radius:0; background:transparent; color:var(--okd-text); font-size:20px; }
.okd-app .okd-product-modal .okd-stepper input { width:48px; height:100%; min-height:0; padding:0; border:0; border-radius:0; background:transparent; text-align:center; font-size:15px; font-weight:700; -moz-appearance:textfield; }
.okd-app .okd-stepper input::-webkit-outer-spin-button, .okd-app .okd-stepper input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.okd-app .okd-product-modal form > footer button[type=submit] { display:flex; justify-content:space-between; align-items:center; gap:12px; flex:1; height:48px; padding:0 18px; border-radius:14px; font-size:15px; font-weight:700; font-variant-numeric:tabular-nums; }
/* Sacola */
.okd-app .okd-cart__items { padding:0 20px; }
.okd-app .okd-cart__items article { grid-template-columns:minmax(0,1fr) auto; gap:4px 12px; padding:14px 0; }
.okd-app .okd-cart__items article strong { font-size:15px; font-weight:600; }
.okd-app .okd-cart__items article small { font-size:13px; }
.okd-app .okd-cart__items article small:empty, .okd-app .okd-cart__items article p:empty { display:none; }
.okd-app .okd-cart__items article > span { font-weight:700; font-variant-numeric:tabular-nums; }
.okd-app .okd-cart__items article > button { grid-column:2; justify-self:end; min-height:36px; padding:4px 0; font-size:13px; font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.okd-app .okd-cart-quantity { margin-top:10px; gap:0; border:1px solid var(--okd-border-strong); border-radius:10px; width:max-content; overflow:hidden; }
.okd-app .okd-cart-quantity button { width:36px; height:36px; border:0; border-radius:0; background:transparent; color:var(--okd-text); font-size:18px; }
.okd-app .okd-cart-quantity input { width:40px; height:36px; border:0; border-radius:0; background:transparent; font-size:14px; font-weight:700; -moz-appearance:textfield; }
.okd-app .okd-cart-quantity input::-webkit-outer-spin-button, .okd-app .okd-cart-quantity input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.okd-app .okd-cart .okd-edit-mount { margin-top:10px; border-radius:10px; font-size:13px; font-weight:600; }
.okd-app .okd-cart > footer { gap:10px; padding:14px 20px max(20px,env(safe-area-inset-bottom)); border-top:1px solid var(--okd-border); }
.okd-app .okd-cart > footer > div { font-size:17px; font-weight:700; font-variant-numeric:tabular-nums; }
.okd-app .okd-cart > footer > div span { font-weight:500; color:var(--okd-muted); }
.okd-app .okd-cart > footer > p { font-size:13px; font-weight:600; }
.okd-app .okd-cart > footer > button { height:48px; border-radius:14px; font-size:15px; font-weight:700; }
.okd-app .okd-cart > footer > small { font-size:12px; }
/* Checkout: progresso em segmentos, campos leves. */
.okd-app .okd-checkout > header { padding:26px 20px 8px; }
.okd-app .okd-checkout-trail { gap:6px; padding:8px 20px 12px; border-bottom:0; }
.okd-app .okd-checkout-trail li { flex-direction:column; align-items:stretch; gap:6px; font-size:11px; font-weight:600; }
.okd-app .okd-checkout-trail li::before { content:""; display:block; height:4px; border-radius:2px; background:var(--okd-border); }
.okd-app .okd-checkout-trail li:has(~ .is-current)::before, .okd-app .okd-checkout-trail li.is-current::before { background:var(--okd-brand); }
.okd-app .okd-checkout-trail li svg { display:none; }
.okd-app .okd-checkout-trail li span { text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.okd-app .okd-checkout-trail li.is-current { color:var(--okd-text); }
.okd-app .okd-checkout-step { padding:8px 20px 20px; }
.okd-app .okd-checkout-step > label { font-size:13px; }
.okd-app :is(.okd-checkout,.okd-product-modal) :is(input,select,textarea), .okd-app .okd-cart-quantity input { border-radius:12px; }
.okd-app .okd-checkout-step :is(input,select,textarea):not([type=radio]):not([type=checkbox]) { background:var(--okd-background); }
.okd-app .okd-checkout-step :is(input,select,textarea):focus-visible { outline:2px solid var(--okd-brand); outline-offset:0; border-color:transparent; }
.okd-app .okd-fulfillment__option { border-radius:12px; }
.okd-app .okd-checkout-review article { border-radius:12px; }
.okd-app .okd-checkout form > footer { padding:12px 20px max(20px,env(safe-area-inset-bottom)); }
.okd-app .okd-checkout .okd-checkout-totals > div:last-child { font-size:17px; font-weight:700; font-variant-numeric:tabular-nums; }
.okd-app .okd-checkout-actions button { height:48px; border-radius:14px; font-size:15px; font-weight:700; }
.okd-app .okd-checkout-actions :is([data-checkout-back],[data-checkout-skip]) { border:1px solid var(--okd-border); }
.okd-app .okd-order-confirmed { border-radius:24px; gap:8px; padding:32px 28px; }
.okd-app .okd-order-confirmed > span { padding:6px 12px; border-radius:999px; background:var(--okd-soft); color:var(--okd-brand-hover); font-size:12px; font-weight:700; letter-spacing:.06em; }
.okd-app .okd-order-confirmed h2 { font-size:30px; font-weight:800; letter-spacing:-.02em; }
.okd-app .okd-order-confirmed strong { font-size:26px; font-variant-numeric:tabular-nums; }
.okd-app .okd-order-confirmed button { min-height:48px; padding:12px 20px; border-radius:14px; font-weight:700; }
.okd-app .okd-order-confirmed [data-track-confirmed] { background:var(--okd-soft); color:var(--okd-brand-hover); }
/* Menu do consumidor e cadastro */
.okd-app .okd-consumer-menu nav button { border-radius:14px; }
.okd-app .okd-consumer-menu h2 { font-weight:700; }
.okd-app .okd-store-card h2 { font-weight:700; }
.okd-app .okd-store-card__share [data-share-store], .okd-app .okd-profile-save, .okd-app .okd-order-history .okd-history-primary { border-radius:14px; font-weight:700; }
/* Carregamento inicial */
.okd-app .okd-loading strong { font-weight:600; color:var(--okd-muted); }
@media(max-width:600px) {
  .okd-app .okd-hero { margin:0; padding:12px 16px 4px; }
  .okd-app .okd-search { margin:0 16px; }
  .okd-app .okd-categories { padding:10px 16px 2px; }
  .okd-app .okd-menu { padding:8px 16px 24px; }
  .okd-app .okd-search-status { padding:12px 16px 0; }
  .okd-app .okd-product { grid-template-columns:minmax(0,1fr) auto auto; }
  .okd-app .okd-product :is(img,.okd-product__placeholder) { width:60px; height:60px; }
  .okd-app .okd-product__placeholder { width:44px; height:44px; }
  .okd-app .okd-hero__facts > div { padding:6px 10px; gap:5px; }
  .okd-app .okd-hero__facts strong { font-size:13px; }
  .okd-app .okd-hero__facts small { font-size:12px; }
}

/* Paleta da loja (2026-09-19)
   O lojista escolhe duas cores; todas as outras saem daqui. A derivacao mora no CSS, e nao no
   JavaScript, porque o cardapio publico e o preview do painel carregam este mesmo arquivo: uma
   segunda implementacao em JS divergiria sem ninguem perceber. Sem as variaveis --okd-store-*
   nada disto se aplica e valem os tokens padrao declarados no topo.
   O par de cores e validado na API e de novo antes de virar estilo; aqui nunca chega texto livre. */
.okd-app[data-okd-palette] {
  --okd-brand: var(--okd-store-brand);
  --okd-brand-hover: color-mix(in oklab, var(--okd-store-brand) 82%, #000);
  --okd-background: var(--okd-store-bg);
  --okd-surface: color-mix(in oklab, var(--okd-store-bg) 45%, #fff);
  --okd-text: var(--okd-store-ink);
  --okd-muted: color-mix(in oklab, var(--okd-store-ink) 62%, var(--okd-store-bg));
  --okd-border: color-mix(in oklab, var(--okd-store-bg) 86%, var(--okd-store-ink));
  --okd-border-strong: color-mix(in oklab, var(--okd-store-bg) 72%, var(--okd-store-ink));
  --okd-soft: color-mix(in oklab, var(--okd-store-brand) 12%, var(--okd-store-bg));
  --okd-price: color-mix(in oklab, var(--okd-store-brand) 86%, var(--okd-store-ink));
  --okd-inverse: var(--okd-store-ink);
  --okd-inverse-ink: var(--okd-store-bg);
  --okd-on-brand: var(--okd-store-on-brand);
}
/* Texto na cor da loja, tema claro (designer#14): a cor da loja pinta SUPERFICIES (botao, categoria ativa, barra da sacola, faixa do
   topo, bordas) e tambem TEXTO (preco, links, selos, realces). Superficie pode ser clara; texto sobre o fundo claro da loja precisa de
   contraste, e uma marca clara (verde-folha, laranja, amarelo, lilas, branca) deixava preco, selo e realce quase invisiveis.
   --okd-brand-text e a marca vista como texto: igual a --okd-brand, menos no tema claro de loja com paleta e tinta escura, onde a
   luminosidade relativa (a do WCAG) fica no maximo em 0,124. A conta escala as tres cores em luz linear (r, g e b vezes s, com
   s = 0,124 / Y quando Y passa do teto), entao matiz e saturacao ficam e o contraste so depende do fundo: no minimo
   (Yfundo + 0,05) / 0,174. Quem ja esta abaixo do teto nao muda um pixel. --okd-price e --okd-brand-hover so pintam texto e passam
   pela mesma conta; as superficies seguem com --okd-brand inteiro. Tema escuro fica de fora (piso do designer#13). A guarda da tinta
   escura deixa como estao as lojas de fundo quase preto (tinta branca), onde o texto claro ja e o certo. --okd-text-cap e so a
   conta escrita uma vez: vale dentro de color(from ... srgb-linear ...), onde r, g e b existem. Navegador sem essa sintaxe mantem
   a conta de antes. */
@supports (color: color(from red srgb-linear calc(r * min(1, 0.5 / max(0.000001, 0.2126 * r + 0.7152 * g + 0.0722 * b))) g b)) {
  .okd-app[data-okd-palette]:not([data-okd-theme="dark"]):is([style*="--okd-store-ink:#101914"], [style*="--okd-store-ink: #101914"]) {
    --okd-text-cap: min(1, 0.124 / max(0.000001, 0.2126 * r + 0.7152 * g + 0.0722 * b));
    --okd-brand-text: color(from var(--okd-store-brand) srgb-linear calc(r * var(--okd-text-cap)) calc(g * var(--okd-text-cap)) calc(b * var(--okd-text-cap)));
    --okd-brand-hover: color(from color-mix(in oklab, var(--okd-store-brand) 82%, #000) srgb-linear calc(r * var(--okd-text-cap)) calc(g * var(--okd-text-cap)) calc(b * var(--okd-text-cap)));
    --okd-price: color(from color-mix(in oklab, var(--okd-store-brand) 86%, var(--okd-store-ink)) srgb-linear calc(r * var(--okd-text-cap)) calc(g * var(--okd-text-cap)) calc(b * var(--okd-text-cap)));
  }
}
/* Selo da quantidade na barra da sacola, tema claro (designer#16): a barra da sacola ganha a cor da loja e o selo "1 item" pinta 14% da
   propria tinta por cima dela (clareia com tinta branca, escurece com tinta escura). Em cor de tom medio isso empurra o fundo do selo
   para o lado errado: a tinta branca perde contraste sobre o fundo mais claro, a escura sobre o mais escuro. Aqui o fundo do selo e
   puxado so o necessario para a tinta chegar a uns 4,6:1, e so onde falha: quem ja passa fica com o desenho de hoje.
   A correcao e uma sombra interna de uma cor so por cima do fundo de antes (que nao e tocado), com opacidade 0 quando passa e 1 quando
   falha (a rampa e de 0,001 de luminosidade relativa Y, a do WCAG). Tinta branca: o fundo do selo (a barra + 14% de branco) passa ate
   Y = 0,1833; acima de 0,180 ele e escalado em luz linear por 0,178 / Y. Tinta escura: passa de Y = 0,2135 para cima; abaixo de 0,218
   ele e escalado em luz linear por 0,2195 / Y (matiz e saturacao ficam) e, so se algum canal estourar o branco, o que falta vem de uma
   mistura com branco, tambem em luz linear. A folga entre 0,178 / 0,2195 e os dois limites cobre o corte para 8 bits ao pintar. A tinta
   vem de readableInk(), como na guarda do designer#14: o seletor so conhece os dois literais. Navegador sem a sintaxe fica como estava. */
@supports (color: color(from red srgb-linear calc(r * min(1, 0.5 / max(0.000001, 0.2126 * r + 0.7152 * g + 0.0722 * b))) g b)) {
  .okd-app[data-okd-palette]:not([data-okd-theme="dark"]):is([style*="--okd-store-on-brand:#ffffff"], [style*="--okd-store-on-brand: #ffffff"]) .okd-cart-bar > button span {
    --okd-selo-y: (0.2126 * r + 0.7152 * g + 0.0722 * b);
    --okd-selo-s: min(1, 0.178 / max(0.000001, var(--okd-selo-y)));
    --okd-selo-fundo: color(from color-mix(in srgb, currentColor 14%, var(--okd-action)) srgb-linear calc(r * var(--okd-selo-s)) calc(g * var(--okd-selo-s)) calc(b * var(--okd-selo-s)) / clamp(0, calc(1000 * (var(--okd-selo-y) - 0.18)), 1));
    box-shadow: inset 0 0 0 9999px var(--okd-selo-fundo);
  }
  .okd-app[data-okd-palette]:not([data-okd-theme="dark"]):is([style*="--okd-store-on-brand:#101914"], [style*="--okd-store-on-brand: #101914"]) .okd-cart-bar > button span {
    --okd-selo-y: (0.2126 * r + 0.7152 * g + 0.0722 * b);
    --okd-selo-k: max(1, min(0.2195 / max(0.000001, var(--okd-selo-y)), 1 / max(0.000001, r, g, b)));
    --okd-selo-t: clamp(0, (0.2195 - var(--okd-selo-k) * var(--okd-selo-y)) / max(0.000001, 1 - var(--okd-selo-k) * var(--okd-selo-y)), 1);
    --okd-selo-fundo: color(from color-mix(in srgb, currentColor 14%, var(--okd-action)) srgb-linear calc(r * var(--okd-selo-k) + (1 - r * var(--okd-selo-k)) * var(--okd-selo-t)) calc(g * var(--okd-selo-k) + (1 - g * var(--okd-selo-k)) * var(--okd-selo-t)) calc(b * var(--okd-selo-k) + (1 - b * var(--okd-selo-k)) * var(--okd-selo-t)) / clamp(0, calc(1000 * (0.218 - var(--okd-selo-y))), 1));
    box-shadow: inset 0 0 0 9999px var(--okd-selo-fundo);
  }
}
/* No escuro a cor da loja da o tom do fundo, dos cartoes e das bordas (designer#3, fase D): a marca tinge
   um escuro neutro em vez do verde padrao, e sobe de luminosidade sem virar pastel. Fundo claro escolhido
   pelo lojista nao clareia o tema escuro. O texto sobre a marca aqui e sempre escuro. */
.okd-app[data-okd-palette][data-okd-theme="dark"] {
  --okd-ground: #0b0d12; --okd-ground-card: #14171e; --okd-ground-line: #262a33; --okd-ground-line-strong: #343944; --okd-ground-muted: #b9bfcc;
  --okd-brand: color-mix(in oklab, var(--okd-store-brand) 80%, #fff);
  --okd-brand-hover: color-mix(in oklab, var(--okd-store-brand) 60%, #fff);
  --okd-background: color-mix(in oklab, var(--okd-store-brand) 16%, var(--okd-ground));
  --okd-surface: color-mix(in oklab, var(--okd-store-brand) 14%, var(--okd-ground-card));
  --okd-text: #eef6f0;
  --okd-muted: color-mix(in oklab, var(--okd-store-brand) 14%, var(--okd-ground-muted));
  --okd-border: color-mix(in oklab, var(--okd-store-brand) 28%, var(--okd-ground-line));
  --okd-border-strong: color-mix(in oklab, var(--okd-store-brand) 40%, var(--okd-ground-line-strong));
  --okd-soft: color-mix(in oklab, var(--okd-store-brand) 26%, var(--okd-ground-card));
  --okd-price: color-mix(in oklab, var(--okd-store-brand) 55%, #fff);
  --okd-inverse: #eef6f0;
  --okd-inverse-ink: #101914;
  --okd-on-brand: var(--okd-ground);
}
/* Piso de luminosidade da marca no escuro (designer#13): a cor da loja misturada com branco ainda pode sair escura demais
   (preto, azul-marinho, vinho) ou media demais (vermelho, verde) para servir de TEXTO, de preco e de botao sobre o escuro. O piso sobe so a
   luminosidade (L do OKLCH) e guarda matiz e croma; quem ja passa do piso fica como esta. Navegador sem a sintaxe de cor relativa
   mantem a conta de cima. O texto sobre a marca segue escuro (--okd-on-brand). */
@supports (color: oklch(from red l c h)) {
  .okd-app[data-okd-palette][data-okd-theme="dark"] {
    --okd-brand: oklch(from color-mix(in oklab, var(--okd-store-brand) 80%, #fff) max(l, 0.72) c h);
    --okd-brand-hover: oklch(from color-mix(in oklab, var(--okd-store-brand) 60%, #fff) max(l, 0.78) c h);
    --okd-price: oklch(from color-mix(in oklab, var(--okd-store-brand) 55%, #fff) max(l, 0.72) c h);
  }
}
/* Cores da loja nos botoes e na marca (designer#3, fases A e B1). Sem paleta salva nada disto vale e ficam
   os verdes e o preto de antes. A acao segue a marca; categoria ativa, "+" e barra da sacola ganham a marca. */
.okd-app[data-okd-palette] { --okd-action: var(--okd-brand); --okd-on-action: var(--okd-on-brand); }
.okd-app[data-okd-palette] :is(.okd-categories button.is-active, .okd-cart-bar > button, .okd-order-confirmed button, .okd-order-history .okd-history-primary, .okd-store-card__share [data-share-store], .okd-profile-save, .okd-order-tracking button),
.okd-app[data-okd-palette] :is(.okd-cart,.okd-product-modal,.okd-checkout) footer button:not([data-checkout-back]):not([data-checkout-skip]):not(.okd-freeship__more) { background:var(--okd-action); border-color:var(--okd-action); color:var(--okd-on-action); }
.okd-app[data-okd-palette] .okd-product__add { background:var(--okd-brand); border-color:var(--okd-brand); color:var(--okd-on-brand); }

/* Cor de destaque (designer#4, fase F). Opcional: sem --okd-store-accent as variaveis --okd-accent-* ficam invalidas e
   o var() cai nos dourados de antes (--okd-promo-*), entao a loja que nao escolheu destaque nao muda um pixel. O destaque
   so entra na etiqueta de promocao e no preco promocional; o aviso de taxa a confirmar (designer#9) segue ambar. */
.okd-app[data-okd-palette] { --okd-accent-wash: color-mix(in oklab, var(--okd-store-accent) 14%, var(--okd-surface)); --okd-accent-text: color-mix(in oklab, var(--okd-store-accent) 38%, var(--okd-store-ink)); }
.okd-app[data-okd-palette][data-okd-theme="dark"] { --okd-accent-wash: color-mix(in oklab, var(--okd-store-accent) 24%, var(--okd-ground-card)); --okd-accent-text: color-mix(in oklab, var(--okd-store-accent) 35%, #fff); }
@supports (color: oklch(from red l c h)) {
  .okd-app[data-okd-palette] { --okd-accent-wash: oklch(from var(--okd-store-accent) 0.94 min(c, 0.05) h); --okd-accent-text: oklch(from var(--okd-store-accent) 0.45 min(c, 0.16) h); }
  .okd-app[data-okd-palette][data-okd-theme="dark"] { --okd-accent-wash: oklch(from var(--okd-store-accent) 0.32 min(c, 0.07) h); --okd-accent-text: oklch(from var(--okd-store-accent) 0.84 min(c, 0.14) h); }
}
.okd-app .okd-product > div > span:has(.okd-promo-tag), .okd-app .okd-product-modal__price:has(s) { color:var(--okd-accent-text,var(--okd-price)); }

/* Topo na cor da marca (designer#4, fase F). So vale com data-okd-header="brand" no body (a vitrine poe so quando o lojista
   escolheu "Faixa na cor da marca"); sem o atributo nada abaixo se aplica. A faixa e a propria .okd-hero, com fundo opaco: o editor
   mede o contraste do nome da loja contra o primeiro fundo opaco acima dele. Todo texto da faixa usa a tinta cheia da faixa. */
.okd-app[data-okd-header="brand"][data-okd-palette] { --okd-band: var(--okd-brand); --okd-band-ink: var(--okd-on-brand); }
.okd-app[data-okd-header="brand"][data-okd-palette][data-okd-theme="dark"] { --okd-band: color-mix(in oklab, var(--okd-store-brand) 40%, var(--okd-ground)); --okd-band-ink: var(--okd-text); }
.okd-app[data-okd-header="brand"][data-okd-palette] .okd-hero { padding-bottom:16px; background-color:var(--okd-band); color:var(--okd-band-ink); box-shadow:0 0 0 100vmax var(--okd-band); clip-path:inset(0 -100vmax); }
.okd-app[data-okd-header="brand"][data-okd-palette] .okd-hero__brand { background:transparent; }
.okd-app[data-okd-header="brand"][data-okd-palette] .okd-hero :is(.okd-hero__brand, .okd-hero__brand strong, .okd-public-topbar .okd-brand-info, .okd-public-description, .okd-profile-status, .okd-order-progress > small) { color:var(--okd-band-ink); }
.okd-app[data-okd-header="brand"][data-okd-palette] .okd-menu-toggle { background:color-mix(in srgb, var(--okd-band-ink) 14%, transparent); border-color:color-mix(in srgb, var(--okd-band-ink) 38%, transparent); color:var(--okd-band-ink); }
.okd-app[data-okd-header="brand"][data-okd-palette] .okd-public-logo { border-color:color-mix(in srgb, var(--okd-band-ink) 24%, transparent); }
.okd-app[data-okd-header="brand"][data-okd-palette] .okd-public-availability:not(:has(.is-closed)) { background:var(--okd-band-ink); color:var(--okd-band); }
.okd-app[data-okd-header="brand"][data-okd-palette] .okd-public-availability:not(:has(.is-closed))::before { background:var(--okd-band); box-shadow:0 0 0 3px color-mix(in srgb, var(--okd-band) 26%, transparent); }
.okd-app[data-okd-header="brand"][data-okd-palette] .okd-hero__facts > div { background:transparent; border-color:color-mix(in srgb, var(--okd-band-ink) 42%, transparent); color:var(--okd-band-ink); }
.okd-app[data-okd-header="brand"][data-okd-palette] .okd-hero__facts :is(svg, small) { color:var(--okd-band-ink); }
.okd-app[data-okd-header="brand"][data-okd-palette] .okd-hero :is(button, a):focus-visible { outline:3px solid var(--okd-band-ink); outline-offset:2px; }

/* Janela "Vai precisar de troco?" e resumo do pagamento em dinheiro (Designer, aprovado pelo usuario em 30/09/2026).
   Cartao central no computador e folha de baixo no celular, como "Meus pedidos". So tokens --okd-*. */
.okd-app:has(.okd-change-dialog[open]) { overflow:hidden; }
.okd-app .okd-change-dialog { position:fixed; inset:0; width:420px; max-width:calc(100vw - 24px); height:fit-content; max-height:92dvh; margin:auto; padding:0; border:0; border-radius:20px; background:var(--okd-surface); color:var(--okd-text); font:inherit; overflow:auto; box-shadow:var(--okd-shadow-dialog); }
.okd-app .okd-change-dialog > header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:20px 20px 8px; }
.okd-app .okd-change-dialog h2 { margin:0; font-size:22px; line-height:1.25; }
.okd-app .okd-change-dialog [data-consumer-close] { display:grid; place-items:center; width:44px; height:44px; flex:none; border:0; border-radius:12px; background:var(--okd-background); color:var(--okd-text); cursor:pointer; }
.okd-app .okd-change-dialog [data-consumer-close] svg { width:22px; height:22px; }
.okd-app .okd-change-dialog [data-change-step] { display:grid; gap:14px; padding:4px 20px 20px; }
.okd-app .okd-change-dialog [data-change-step][hidden] { display:none; }
.okd-app .okd-change-dialog p { margin:0; color:var(--okd-muted); font-size:15px; line-height:1.45; }
.okd-app .okd-change-dialog__actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.okd-app .okd-change-dialog__actions button { min-height:56px; padding:10px 14px; border:1px solid var(--okd-border); border-radius:14px; background:var(--okd-background); color:var(--okd-text); font:inherit; font-size:17px; font-weight:700; cursor:pointer; }
.okd-app .okd-change-dialog__actions :is([data-change-yes],[type=submit]) { border-color:transparent; background:var(--okd-action); color:var(--okd-on-action); }
.okd-app .okd-change-dialog :is(button,input):focus-visible { outline:3px solid var(--okd-brand); outline-offset:2px; }
.okd-app .okd-change-dialog [data-change-total] { display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:12px 14px; border-radius:12px; background:var(--okd-soft); color:var(--okd-text); font-size:15px; }
.okd-app .okd-change-dialog [data-change-total] b { font-size:20px; font-variant-numeric:tabular-nums; }
.okd-app .okd-change-dialog label { display:grid; gap:6px; font-size:14px; font-weight:600; }
.okd-app .okd-change-field { position:relative; }
.okd-app .okd-change-field > span { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--okd-muted); font-size:20px; font-weight:600; pointer-events:none; }
.okd-app .okd-change-field input { box-sizing:border-box; width:100%; min-height:56px; padding:10px 14px 10px 50px; border:1px solid var(--okd-border); border-radius:12px; background:var(--okd-background); color:var(--okd-text); font:inherit; font-size:22px; font-weight:700; font-variant-numeric:tabular-nums; }
.okd-app .okd-change-field input:focus { border-color:var(--okd-brand); }
.okd-app .okd-change-field input[aria-invalid="true"] { border-color:var(--okd-danger); }
.okd-app .okd-change-suggestions { display:flex; flex-wrap:wrap; gap:8px; }
.okd-app .okd-change-suggestions button { min-height:44px; padding:8px 16px; border:1px solid var(--okd-border); border-radius:999px; background:transparent; color:var(--okd-text); font:inherit; font-weight:700; font-variant-numeric:tabular-nums; cursor:pointer; }
.okd-app .okd-change-dialog [data-change-error] { color:var(--okd-danger); font-weight:700; font-size:14px; }
.okd-app .okd-change-summary { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0; padding:12px 14px; border:1px solid var(--okd-border); border-radius:12px; background:var(--okd-soft); color:var(--okd-text); font-size:15px; }
.okd-app .okd-change-summary b { font-variant-numeric:tabular-nums; }
.okd-app .okd-change-summary button { min-height:44px; padding:8px 14px; border:0; border-radius:10px; background:transparent; color:var(--okd-brand-text); font:inherit; font-weight:800; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
@media (max-width:600px) {
  .okd-app .okd-change-dialog { width:100%; max-width:100%; inset:auto 0 0; margin:0; border-radius:20px 20px 0 0; padding-bottom:env(safe-area-inset-bottom); }
}

/* Cartao de entrada "Monte sua pizza" (gestao#46, gestao#70). So apresentacao. E a primeira linha da lista da categoria: ver designer#17 e docs/ok-delivery-cartao-da-pizza-20261016.md. O painel antigo da pizza (modal de uma tela) saiu com a gestao#110 e as regras dele sairam no designer#20. */
.okd-app [data-pizza-open] { background:var(--okd-soft); box-shadow:inset 3px 0 0 var(--okd-price); }
.okd-app [data-pizza-open] .okd-product__placeholder { background:var(--okd-surface); }
.okd-app [data-pizza-open] p { color:color-mix(in srgb,var(--okd-muted) 70%,var(--okd-text)); }
@media(hover:hover) { .okd-app [data-pizza-open]:not(:disabled):hover { background:color-mix(in srgb,var(--okd-price) 6%,var(--okd-soft)); } }
.okd-app .okd-product:focus-visible { outline-offset:-3px; }
/* Foto do produto no topo da janela de quantidade/montagem (so existe quando o produto tem foto). */
.okd-app .okd-product-modal__media { margin:0; aspect-ratio:16/9; max-height:32dvh; width:100%; overflow:hidden; background:var(--okd-background); }
.okd-app .okd-product-modal__media img { display:block; width:100%; height:100%; object-fit:cover; }
.okd-app .okd-product-modal__media + header::before { display:none; }
.okd-app .okd-product-modal__media + header { padding-top:16px; }

/* Barra de progresso do frete gratis (gestao#51): fina e discreta; so transform anima. */
.okd-app .okd-freeship { display:grid; gap:6px; margin:0; font-size:13px; line-height:1.3; color:var(--okd-muted); font-variant-numeric:tabular-nums; }
.okd-app .okd-freeship__text { margin:0; font-size:13px; font-weight:500; color:var(--okd-muted); }
.okd-app .okd-freeship[data-reached="1"] .okd-freeship__text { color:var(--okd-brand-text); font-weight:600; }
.okd-app .okd-freeship__bar { position:relative; height:4px; overflow:hidden; border-radius:999px; background:var(--okd-border-strong); }
.okd-app .okd-freeship__bar > span { position:absolute; inset:0; border-radius:inherit; background:var(--okd-brand); transform-origin:left center; transform:scaleX(var(--okd-freeship-progress,0)); }
@media(prefers-reduced-motion:no-preference) { .okd-app .okd-freeship__bar > span { transition:transform 300ms ease-out; } }
.okd-app .okd-freeship--compact { margin:0 0 8px; padding:7px 12px; border:0; border-radius:12px; background:var(--okd-soft); box-shadow:none; }
.okd-app .okd-freeship[data-reached="1"] .okd-freeship__bar { background:color-mix(in srgb,var(--okd-brand) 35%,var(--okd-surface)); }
.okd-app .okd-freeship--compact[data-reached="1"] { background:color-mix(in srgb,var(--okd-brand) 12%,var(--okd-surface)); }
.okd-app .okd-freeship--compact .okd-freeship__text { font-size:12px; }
.okd-app .okd-freeship--compact .okd-freeship__bar { height:3px; }
.okd-app .okd-freeship--drawer { justify-content:stretch; padding:2px 0 4px; }
.okd-app .okd-freeship .okd-freeship__more { justify-self:start; width:auto; height:auto; min-height:44px; margin:-6px 0 -8px; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; color:var(--okd-brand-text); font:inherit; font-size:13px; font-weight:600; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.okd-app .okd-checkout-totals > .okd-freeship { display:grid; justify-content:stretch; gap:6px; font-size:13px; color:var(--okd-muted); }

/* Taxa a confirmar (designer#9): chips e avisos ambar no rodape, no resumo, na confirmacao, na revisao, na janela do
   troco e no acompanhamento. So apresentacao: os textos continuam os mesmos e o aviso nunca usa a cor de erro. */
.okd-app .okd-checkout-totals { grid-template-columns:minmax(0,1fr); }
.okd-app .okd-checkout-totals > div:not(.okd-freeship) { align-items:baseline; }
.okd-app .okd-checkout-totals > div:not(.okd-freeship) > :last-child { text-align:right; }
.okd-app :is(.okd-checkout-totals, .okd-order-summary, .okd-order-history) [data-fee-notice] { display:inline-block; padding:2px 10px; border-radius:12px; background:var(--okd-aviso-bg); color:var(--okd-aviso-ink); font-size:13px; font-weight:700; line-height:1.5; text-align:center; }
.okd-app .okd-order-history [data-fee-notice] { justify-self:start; }
.okd-app :is(.okd-checkout-totals, .okd-order-summary, .okd-order-confirmed) [data-fee-suffix] { display:block; font-size:13px; font-weight:600; letter-spacing:0; line-height:1.3; text-transform:none; color:var(--okd-muted); }
.okd-app .okd-order-confirmed [data-fee-suffix] { font-size:14px; }
.okd-app .okd-order-summary dl > div > dt { flex:none; }
.okd-app .okd-order-summary dl > div:has(> dd > [data-fee-notice]) { flex-wrap:wrap; row-gap:4px; }
.okd-app .okd-order-summary dd:has(> [data-fee-notice]) { margin-left:auto; }
.okd-app .okd-order-summary [data-fee-notice] { white-space:nowrap; }
.okd-app .okd-order-confirmed [data-fee-pending] { box-sizing:border-box; width:100%; margin:8px 0 6px; padding:12px 14px; border-radius:12px; background:var(--okd-aviso-bg); color:var(--okd-aviso-ink); font-size:14px; line-height:1.45; text-align:left; }
.okd-app .okd-checkout-review article[data-fee-pending] { background:var(--okd-aviso-bg); color:var(--okd-aviso-ink); }
.okd-app .okd-change-dialog [data-change-total]:has(+ [data-change-pending]:not([hidden])) { display:grid; align-items:start; gap:2px; }
.okd-app .okd-change-dialog [data-change-pending] { padding:12px 14px; border-radius:12px; background:var(--okd-aviso-bg); color:var(--okd-aviso-ink); font-size:14px; line-height:1.45; }
.okd-app .okd-change-summary button { flex:none; white-space:nowrap; }
.okd-app .okd-order-progress[data-fee-notice] > button { border-color:color-mix(in srgb,var(--okd-aviso) 55%,var(--okd-border)); background:var(--okd-aviso-bg); color:var(--okd-aviso-ink); }
.okd-app .okd-order-progress[data-fee-notice] small { color:var(--okd-aviso-ink); }
.okd-app .okd-detail-current[data-fee-notice] { background:var(--okd-aviso-bg); color:var(--okd-aviso-ink); }
.okd-app .okd-detail-current[data-fee-notice] small { color:var(--okd-aviso-ink); }

/* Pizza por sabor em tres telas (designer#10, gestao#70): tamanho, sabor e borda. Aprovado em 14/10/2026.
   Marcacao de referencia e especificacao: docs/design/pizza-tres-telas.html. Substituiu o montador de uma tela, que
   saiu com a pizza antiga (gestao#110); as regras dele sairam deste arquivo no designer#20.
   Painel de ALTURA FIXA: so o corpo de cada tela rola; cabecalho, trilha e resumo ficam parados.
   Tokens --okd-* da loja (paleta, claro e escuro). Os --pz-* sao locais deste painel.
   --pz-ring: contorno e marca com contraste 3:1 mesmo em marca clara (a --okd-brand sozinha some em lilas).
   --pz-line: borda da marca ainda vazia, 3:1 sobre o fundo (a --okd-border-strong da 2,1:1 e a marca some). */
.okd-app .okd-pizza-flow {
  --pz-ring: color-mix(in srgb, var(--okd-action) 58%, var(--okd-text));
  --pz-line: color-mix(in srgb, var(--okd-text) 56%, var(--okd-surface));
  --pz-tint: color-mix(in srgb, var(--okd-action) 9%, var(--okd-surface));
  --pz-crust: color-mix(in srgb, var(--okd-action) 40%, var(--okd-surface));
  --pz-fill: color-mix(in srgb, var(--okd-action) 15%, var(--okd-surface));
  --pz-dot: color-mix(in srgb, var(--okd-action) 62%, var(--okd-surface));
  --pz-disc: radial-gradient(circle at 36% 40%, var(--pz-dot) 0 7%, transparent 8%), radial-gradient(circle at 65% 37%, var(--pz-dot) 0 7%, transparent 8%), radial-gradient(circle at 53% 68%, var(--pz-dot) 0 7%, transparent 8%), radial-gradient(circle, var(--pz-fill) 0 71%, transparent 72%), var(--pz-crust);
  --pz-scale: 1;
  --pz-h: min(92dvh, 720px);
  container: pizza / inline-size;
  display: flex; flex-direction: column; box-sizing: border-box;
  height: var(--pz-h); max-height: none; max-width: 760px; overflow: hidden;
}
.okd-app .okd-pizza-flow > header { flex: none; }
.okd-app .okd-pizza-flow > header h2 { font-family: inherit; }
.okd-app .okd-pizza-flow :is(button, textarea, input[type=number], input[type=search]):focus-visible { outline: 3px solid var(--pz-ring); outline-offset: 2px; }

/* Trilha das tres etapas (mesma ideia da trilha do checkout) */
.okd-app .okd-pizza-steps { display: flex; gap: 8px; flex: none; margin: 0; padding: 0 20px 14px; list-style: none; }
.okd-app .okd-pizza-steps li { flex: 1 1 0; min-width: 0; display: grid; gap: 6px; font-size: 12px; font-weight: 600; line-height: 1.2; color: var(--okd-muted); }
.okd-app .okd-pizza-steps li::before { content: ""; height: 4px; border-radius: 2px; background: var(--okd-border-strong); }
.okd-app .okd-pizza-steps li > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.okd-app .okd-pizza-steps i { margin-right: 5px; font-style: normal; font-variant-numeric: tabular-nums; }
.okd-app .okd-pizza-steps li[aria-current="step"] { color: var(--okd-text); font-weight: 700; }
.okd-app .okd-pizza-steps li[data-done] { color: var(--okd-text); }
.okd-app .okd-pizza-steps :is(li[aria-current="step"], li[data-done])::before { background: var(--pz-ring); }

/* Formulario e telas */
.okd-app .okd-pizza-flow form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; margin: 0; padding: 0; }
.okd-app .okd-pizza-screen { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; margin: 0; padding: 0; }
.okd-app .okd-pizza-head { display: flex; align-items: center; gap: 12px; flex: none; padding: 4px 20px 0; }
.okd-app .okd-pizza-head h3 { flex: 1; min-width: 0; margin: 0; font-size: 18px; font-weight: 700; line-height: 1.25; }
.okd-app .okd-pizza-head h3:focus { outline: none; }
.okd-app .okd-pizza-hint { flex: none; margin: 2px 20px 10px; font-size: 13px; line-height: 1.4; color: var(--okd-muted); }
.okd-app .okd-pizza-hint:empty { display: none; }
.okd-app .okd-pizza-head + .okd-pizza-scroll { margin-top: 10px; }
.okd-app .okd-pizza-count { flex: none; padding: 3px 10px; border-radius: 999px; background: var(--okd-soft); color: var(--okd-text); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.okd-app .okd-pizza-count[data-full] { background: var(--okd-action); color: var(--okd-on-action); }
.okd-app .okd-pizza-flow .okd-search { flex: none; margin: 0 20px 10px; }
/* O corpo rola sob uma borda que esmaece (14px em cima, 18px embaixo): em repouso o conteudo comeca depois do esmaecido,
   entao nada some; rolado, a linha cortada nao termina seca embaixo da busca nem do rodape. */
.okd-app .okd-pizza-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 20px 18px; scroll-padding-block: 14px 18px;
  /* design-ok: mascara de esmaecimento, a cor nao aparece */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14px, #000 calc(100% - 18px), transparent); mask-image: linear-gradient(to bottom, transparent, #000 14px, #000 calc(100% - 18px), transparent); }
.okd-app .okd-pizza-list { display: grid; gap: 8px; align-content: start; }
.okd-app .okd-pizza-empty { display: grid; justify-items: center; gap: 8px; margin: 0; padding: 28px 12px; text-align: center; font-size: 14px; color: var(--okd-muted); }
.okd-app .okd-pizza-empty button { min-height: 44px; padding: 0 16px; border: 1px solid var(--okd-border-strong); border-radius: 12px; background: var(--okd-surface); color: var(--okd-text); font: inherit; font-weight: 700; cursor: pointer; }

/* Linha de escolha: o campo nativo cobre a linha inteira (invisivel); a marca e desenhada */
.okd-app .okd-pizza-choice { position: relative; display: flex; align-items: center; gap: 12px; min-height: 56px; margin: 0; padding: 10px 14px; border: 1px solid var(--okd-border); border-radius: 14px; background: var(--okd-surface); color: var(--okd-text); font-size: 15px; font-weight: 500; line-height: 1.3; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease; }
.okd-app .okd-pizza-flow .okd-pizza-choice > input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: inherit; background: transparent; opacity: 0; cursor: inherit; appearance: none; }
@media (hover: hover) {
  .okd-app .okd-pizza-choice:hover:not(:has(> input:disabled)) { border-color: var(--okd-border-strong); background: color-mix(in srgb, var(--okd-action) 5%, var(--okd-surface)); }
}
.okd-app .okd-pizza-choice:has(> input:checked) { border-color: var(--pz-ring); background: var(--pz-tint); box-shadow: inset 0 0 0 1px var(--pz-ring); }
.okd-app .okd-pizza-choice:has(> input:focus-visible) { outline: 3px solid var(--pz-ring); outline-offset: 2px; }
.okd-app .okd-pizza-choice:has(> input:disabled) { cursor: not-allowed; background: var(--okd-background); }
.okd-app .okd-pizza-choice:has(> input:disabled) :is(strong, small, .okd-pizza-price, .okd-pizza-mark, .okd-pizza-photo, .okd-pizza-slot) { opacity: .5; }

.okd-app .okd-pizza-mark { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border: 2px solid var(--pz-line); border-radius: 50%; background: var(--okd-surface); color: var(--okd-on-action); font-size: 13px; font-weight: 800; line-height: 1; transition: background-color .15s ease, border-color .15s ease; }
.okd-app .okd-pizza-flow[data-pizza-multi] .okd-pizza-choice--flavor .okd-pizza-mark { border-radius: 8px; }
.okd-app .okd-pizza-mark::after { content: ""; width: 6px; height: 11px; margin-top: -2px; border: solid var(--okd-on-action); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) scale(0); transition: transform .12s ease; }
.okd-app .okd-pizza-choice:has(> input:checked) .okd-pizza-mark { border-color: var(--pz-ring); background: var(--okd-action); }
.okd-app .okd-pizza-choice:has(> input:checked) .okd-pizza-mark::after { transform: rotate(45deg) scale(1); }
/* Com mais de um sabor marcado, a marca vira a fracao: cada sabor e uma parte da pizza (½, ⅓, ¼) */
.okd-app .okd-pizza-flow[data-pizza-parts] .okd-pizza-choice--flavor:has(> input:checked) .okd-pizza-mark::after { width: auto; height: auto; margin: 0; border: 0; transform: none; font-size: 14px; }
.okd-app .okd-pizza-flow[data-pizza-parts="2"] .okd-pizza-choice--flavor:has(> input:checked) .okd-pizza-mark::after { content: "\00BD"; }
.okd-app .okd-pizza-flow[data-pizza-parts="3"] .okd-pizza-choice--flavor:has(> input:checked) .okd-pizza-mark::after { content: "\2153"; }
.okd-app .okd-pizza-flow[data-pizza-parts="4"] .okd-pizza-choice--flavor:has(> input:checked) .okd-pizza-mark::after { content: "\00BC"; }

.okd-app .okd-pizza-body { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.okd-app .okd-pizza-body strong { font-size: 15px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.okd-app .okd-pizza-body small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; font-weight: 400; line-height: 1.35; color: var(--okd-muted); }
.okd-app .okd-pizza-why { font-style: normal; font-size: 12.5px; font-weight: 700; line-height: 1.3; color: var(--okd-muted); }
.okd-app .okd-pizza-why:empty { display: none; }
.okd-app .okd-pizza-price { flex: none; display: grid; justify-items: end; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.okd-app .okd-pizza-price small { font-size: 11px; font-weight: 500; line-height: 1.2; color: var(--okd-muted); }
.okd-app .okd-pizza-price b { font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--okd-text); }
.okd-app .okd-pizza-price b.is-quiet { font-size: 13px; font-weight: 600; color: var(--okd-muted); }
.okd-app .okd-pizza-photo { flex: none; width: 52px; height: 52px; border-radius: 10px; object-fit: cover; background: var(--okd-soft); }
/* Sabor sem foto: o mesmo disco do tamanho, em vez de um quadrado vazio */
.okd-app span.okd-pizza-photo { display: grid; place-items: center; background: var(--pz-tint); }
.okd-app span.okd-pizza-photo::before { content: ""; width: 32px; height: 32px; border-radius: 50%; background: var(--pz-disc); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--okd-action) 45%, transparent); }

/* Tamanho: um disco por tamanho (so enfeite; o nome e o preco carregam a informacao) */
.okd-app .okd-pizza-slot { flex: none; display: grid; place-items: center; width: 52px; height: 52px; }
.okd-app .okd-pizza-disc { --d: calc(34px * var(--pz-scale)); width: var(--d); height: var(--d); border-radius: 50%; background: var(--pz-disc);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--okd-action) 45%, transparent); }
.okd-app .okd-pizza-choice:has(> input:checked) .okd-pizza-disc { box-shadow: inset 0 0 0 2px var(--pz-ring); }
.okd-app .okd-pizza-disc[data-size="brotinho"] { --d: calc(24px * var(--pz-scale)); }
.okd-app .okd-pizza-disc[data-size="pequena"] { --d: calc(30px * var(--pz-scale)); }
.okd-app .okd-pizza-disc[data-size="media"] { --d: calc(36px * var(--pz-scale)); }
.okd-app .okd-pizza-disc[data-size="grande"] { --d: calc(43px * var(--pz-scale)); }
.okd-app .okd-pizza-disc[data-size="gigante"] { --d: calc(50px * var(--pz-scale)); }

/* Fim da terceira tela: observacao e quantidade (fora de qualquer footer, sem a cor de acao do rodape) */
.okd-app .okd-pizza-extras { display: grid; gap: 14px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--okd-border); }
.okd-app .okd-pizza-extras .okd-note { display: grid; gap: 8px; margin: 0; padding: 0; font-size: 13px; font-weight: 600; }
.okd-app .okd-pizza-qty { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; font-weight: 600; }
.okd-app .okd-pizza-qty .okd-stepper { background: var(--okd-surface); }
.okd-app .okd-pizza-qty .okd-stepper button { color: var(--okd-text); }

/* Rodape fixo: resumo (a mesma linha que vai para a sacola), aviso, erro e botoes */
.okd-app .okd-pizza-foot { flex: none; display: grid; gap: 10px; padding: 12px 20px max(16px, env(safe-area-inset-bottom)); border-top: 1px solid var(--okd-border); background: var(--okd-surface); }
.okd-app .okd-pizza-summary { display: grid; gap: 2px; min-width: 0; }
.okd-app .okd-pizza-summary__line { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.okd-app .okd-pizza-summary strong { min-width: 0; font-size: 16px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.okd-app .okd-pizza-summary__price { flex: none; display: grid; justify-items: end; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.okd-app .okd-pizza-summary__price b { font-size: 18px; font-weight: 800; line-height: 1.2; color: var(--okd-text); }
.okd-app .okd-pizza-summary__price b small { margin-right: 4px; font-size: 12px; font-weight: 500; color: var(--okd-muted); }
.okd-app .okd-pizza-summary__unit { font-size: 12px; line-height: 1.3; color: var(--okd-muted); }
.okd-app .okd-pizza-summary__unit:empty { display: none; }
.okd-app .okd-pizza-summary p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0; font-size: 13px; line-height: 1.4; color: var(--okd-muted); }
.okd-app .okd-pizza-notice { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--okd-aviso-bg); color: var(--okd-aviso-ink); font-size: 13px; line-height: 1.4; }
.okd-app .okd-pizza-notice:empty { display: none; }
.okd-app .okd-pizza-flow [data-pizza-error]:empty { display: none; }
.okd-app .okd-pizza-flow [data-pizza-error] { margin: 0; font-size: 13px; line-height: 1.4; }
.okd-app .okd-pizza-actions { display: flex; gap: 12px; }
.okd-app .okd-pizza-actions button { min-height: 48px; padding: 0 20px; border-radius: 14px; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.okd-app .okd-pizza-actions [data-pizza-back] { flex: 0 0 auto; border: 1px solid var(--okd-border-strong); background: var(--okd-surface); color: var(--okd-text); }
.okd-app .okd-pizza-actions :is([data-pizza-next], [data-pizza-submit]) { flex: 1 1 auto; border: 1px solid var(--pz-ring); background: var(--okd-action); color: var(--okd-on-action); }
.okd-app .okd-pizza-actions button[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

/* Troca de tela: entra pelo lado da direcao; sem movimento para quem pede menos */
@keyframes okd-pizza-in-fwd { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes okd-pizza-in-back { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
.okd-app .okd-pizza-flow[data-pizza-dir="fwd"] .okd-pizza-screen:not([hidden]) { animation: okd-pizza-in-fwd .18s ease-out; }
.okd-app .okd-pizza-flow[data-pizza-dir="back"] .okd-pizza-screen:not([hidden]) { animation: okd-pizza-in-back .18s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .okd-app .okd-pizza-flow .okd-pizza-screen { animation: none !important; }
  .okd-app .okd-pizza-choice, .okd-app .okd-pizza-mark, .okd-app .okd-pizza-mark::after { transition: none; }
}

/* Painel estreito (telefone pequeno) e painel largo (computador): a consulta olha a largura do PROPRIO painel,
   nao da janela, para a mesma regra valer no cardapio e nos quadros da previa. */
@container pizza (max-width: 380px) {
  .okd-app .okd-pizza-choice { gap: 10px; padding: 10px 12px; }
  .okd-app .okd-pizza-slot { width: 46px; }
  .okd-app .okd-pizza-actions button { padding: 0 16px; }
}
/* Tela baixa: a linha de dica sai para sobrar espaco para a lista */
@media (max-height: 660px) {
  .okd-app .okd-pizza-hint { display: none; }
}
@media (min-width: 700px) {
  .okd-app .okd-pizza-flow { --pz-h: min(88dvh, 700px); }
}
@container pizza (min-width: 640px) {
  .okd-app .okd-pizza-screen { --pz-scale: 1.8; }
  .okd-app .okd-pizza-list--flavor, .okd-app .okd-pizza-list--crust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .okd-app .okd-pizza-list--size { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .okd-app .okd-pizza-choice--size { flex-direction: column; justify-content: flex-start; gap: 10px; padding: 44px 10px 22px; text-align: center; }
  .okd-app .okd-pizza-choice--size .okd-pizza-mark { position: absolute; top: 12px; left: 12px; }
  .okd-app .okd-pizza-choice--size .okd-pizza-slot { width: 100%; height: 100px; }
  .okd-app .okd-pizza-choice--size .okd-pizza-price { justify-items: center; text-align: center; }
  .okd-app .okd-pizza-qty { justify-content: flex-start; gap: 20px; }
  .okd-app .okd-pizza-foot { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 28px; }
  .okd-app .okd-pizza-foot > :is(.okd-pizza-notice, [data-pizza-error]) { grid-column: 1 / -1; }
  .okd-app .okd-pizza-actions { min-width: 340px; }
}