/* Ficha pública da loja. Compartilhada pelas vitrines desktop e mobile.
   Pinta com as cores DA LOJA, em dois papéis: preenchimento (--info-accent,
   com o rótulo --info-on-accent) e tinta sobre a superfície (--info-ink).
   No computador eles vêm das --store-*-current da raiz .sf-page
   (storefront-appearance.css, que já troca no escuro); no celular o bloco da
   loja repinta --ok-action/--ok-on-action/--ok-accent-ink dentro de .ok-main.
   Sem loja, fica o coral da plataforma. */
.dok-info-icon { flex: none; width: 20px; height: 20px; }
body:has(.dok-store-info[open]) { overflow: hidden; }
dialog.dok-store-info {
    --info-accent: var(--store-accent-fill-current, var(--ok-action, #FF464F));
    --info-on-accent: var(--store-accent-fill-contrast-current, var(--ok-on-action, #fff));
    --info-ink: var(--store-accent-ink-current, var(--ok-accent-ink, var(--info-accent)));
    width: min(590px, calc(100vw - 40px)); max-width: none;
    max-height: min(800px, calc(100dvh - 48px));
    margin: auto; padding: 0; inset: 0;
    border: 1px solid var(--ok-line, #e3dad4); border-radius: 24px;
    background: var(--ok-surface, #fff); color: var(--ok-text, #1a1210);
    box-shadow: 0 24px 80px rgb(0 0 0 / .22); overflow: hidden;
    text-align: left; font-family: inherit;
}
dialog.dok-store-info:not([open]) { display: none; }
.dok-store-info::backdrop { background: rgb(18 15 13 / .48); }
.dok-store-info__panel { display: flex; flex-direction: column; min-height: 0; max-height: inherit; padding: 0; background: var(--ok-surface); }
.dok-store-info__header { display: flex; align-items: center; flex: none; gap: 14px; padding: 24px 24px 20px; background: linear-gradient(180deg, color-mix(in srgb, var(--info-accent) 12%, var(--ok-surface)), var(--ok-surface)); }
.dok-store-info__logo { flex: none; width: 56px; height: 56px; padding: 4px; object-fit: contain; border: 1px solid color-mix(in srgb, var(--info-accent) 32%, var(--ok-line)); border-radius: 15px; background: #fff; box-shadow: 0 4px 12px color-mix(in srgb, var(--info-accent) 16%, transparent); }
.dok-store-info__identity { flex: 1; min-width: 0; }
.dok-store-info__eyebrow { display: block; margin-bottom: 4px; color: var(--info-ink); font-size: 11px; font-weight: 700; }
.dok-store-info h2 { margin: 0; font-size: 20px; line-height: 1.25; font-weight: 800; letter-spacing: -.025em; color: inherit; overflow-wrap: anywhere; }
.dok-store-info__status { display: inline-flex; align-items: center; gap: 5px; margin-top: 7px; font-size: 11px; color: var(--ok-text-muted); }
.dok-store-info__status > span { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.dok-store-info__status.is-open { color: var(--ok-success-500, #12885f); }
.dok-store-info__close { display: grid; place-items: center; flex: none; align-self: flex-start; width: 44px; height: 44px; padding: 0; border: 1px solid var(--ok-line); border-radius: 12px; background: var(--ok-surface); color: var(--ok-text); cursor: pointer; }
.dok-store-info__nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); flex: none; gap: 4px; margin: 0 24px; padding: 4px; background: var(--ok-surface-sunk); border-radius: 13px; }
.dok-store-info__nav button { display: flex; justify-content: center; align-items: center; gap: 7px; min-height: 42px; padding: 8px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--ok-text-muted); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.dok-store-info__nav button:not([aria-pressed="true"]):hover { color: var(--ok-text); background: color-mix(in srgb, var(--info-accent) 9%, transparent); }
.dok-store-info__nav button[aria-pressed="true"] { background: var(--info-accent); color: var(--info-on-accent); border-color: var(--info-accent); box-shadow: 0 4px 10px color-mix(in srgb, var(--info-accent) 26%, transparent); }
.dok-store-info__nav .dok-info-icon { width: 17px; height: 17px; }
.dok-store-info__body { min-height: 0; padding: 24px; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--ok-line-strong) transparent; }
.dok-store-info h3 { margin: 0 0 6px; color: inherit; font-size: 17px; line-height: 1.3; font-weight: 750; letter-spacing: -.02em; }
.dok-store-info__lead { margin: 0 0 20px; color: var(--ok-text-muted); font-size: 12px; line-height: 1.6; }
.dok-store-info__address { display: flex; gap: 14px; padding: 18px; background: var(--ok-surface-sunk); border: 1px solid var(--ok-line); border-radius: 16px; }
.dok-store-info__address-icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: color-mix(in srgb, var(--info-accent) 13%, var(--ok-surface)); color: var(--info-ink); }
.dok-store-info__address strong { display: block; margin: 0 0 7px; font-size: 13px; }
.dok-store-info__address p { margin: 0; color: var(--ok-text-muted); font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; }
.dok-store-info__map-actions { display: grid; grid-template-columns: 1.2fr 1fr; gap: 10px; margin-top: 12px; }
.dok-store-info__action { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 10px 12px; border: 1px solid transparent; border-radius: 12px; text-decoration: none; font-size: 12px; font-weight: 700; box-shadow: 0 3px 8px rgb(0 0 0 / .08); }
.dok-store-info__action.is-maps { background: #174ea6; border-color: #174ea6; color: #fff; }
.dok-store-info__action.is-waze { background: #33ccff; border-color: #26b8e8; color: #10212b; }
.dok-store-info__action:hover { filter: brightness(.94); }
.dok-store-info__action:active { box-shadow: none; }
.dok-store-info__brand { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 9px; background: #fff; }
.dok-store-info__brand img { width: 28px; height: 28px; object-fit: contain; }
.dok-store-info__action .dok-info-icon { flex: none; width: 16px; height: 16px; margin-left: auto; }
.dok-store-info__services { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 20px; }
.dok-store-info__services span { padding: 6px 9px; border: 1px solid var(--ok-line); border-radius: 8px; color: var(--ok-text-muted); font-size: 11px; }
.dok-store-info__hours { display: grid; }
.dok-store-info__day { display: grid; grid-template-columns: 100px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 54px; padding: 11px 12px; border-bottom: 1px solid var(--ok-line); }
.dok-store-info__day:last-child { border-bottom: 0; }
.dok-store-info__day.is-today { border: 1px solid color-mix(in srgb, var(--info-accent) 34%, var(--ok-line)); border-radius: 12px; background: color-mix(in srgb, var(--info-accent) 8%, var(--ok-surface)); }
.dok-store-info__day-name { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.dok-store-info__day-name strong { font-size: 12px; font-weight: 600; }
.dok-store-info__day-name > span { padding: 2px 8px; border-radius: 999px; background: var(--info-accent); color: var(--info-on-accent); font-size: 10px; font-weight: 700; line-height: 1.5; }
.dok-store-info__periods { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.dok-store-info__period { display: grid; gap: 2px; padding: 6px 9px; border: 1px solid var(--ok-line); border-radius: 7px; background: var(--ok-surface); text-align: center; font-size: 12px; font-weight: 600; white-space: nowrap; }
.dok-store-info__period small { color: var(--ok-text-muted); font-size: 9px; font-weight: 400; }
.dok-store-info__closed { color: var(--ok-text-muted); font-size: 12px; }
.dok-store-info__note { display: flex; align-items: flex-start; gap: 6px; margin: 18px 0 0; color: var(--ok-text-muted); font-size: 11px; line-height: 1.6; }
.dok-store-info__note .dok-info-icon { width: 16px; height: 16px; }
.dok-store-info__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
.dok-store-info__facts:empty { display: none; }
.dok-store-info__facts > div { padding: 12px 14px; border-radius: 12px; background: var(--ok-surface-sunk); }
.dok-store-info__facts span { display: block; margin-bottom: 5px; color: var(--ok-text-muted); font-size: 10px; }
.dok-store-info__facts strong { display: block; font-size: 12px; line-height: 1.5; }
.dok-store-info__search { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 12px; border: 1px solid var(--ok-line); border-radius: 12px; color: var(--ok-text-muted); }
.dok-store-info__search input { width: 100%; min-width: 0; border: 0; padding: 12px 0; outline: none; color: var(--ok-text); background: transparent; font: inherit; font-size: 14px; }
.dok-store-info__search:focus-within { outline: 2px solid var(--info-ink); outline-offset: 2px; }
.dok-store-info__zone-heading { display: flex; justify-content: space-between; padding: 16px 12px 8px; color: var(--ok-text-muted); font-size: 10px; font-weight: 600; }
.dok-store-info__zones { list-style: none; margin: 0; padding: 0; border: 1px solid var(--ok-line); border-radius: 12px; overflow: hidden; }
.dok-store-info__zones li { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 46px; padding: 12px; border-bottom: 1px solid var(--ok-line); font-size: 12px; }
.dok-store-info__zones li:last-child { border-bottom: 0; }
.dok-store-info__zones li:nth-child(even) { background: color-mix(in srgb, var(--ok-surface-sunk) 50%, var(--ok-surface)); }
.dok-store-info__zones strong { white-space: nowrap; font-weight: 600; }
.dok-store-info__zones .is-free { color: var(--ok-success-500, #12885f); }
.dok-store-info__default-fee { display: flex; justify-content: space-between; gap: 16px; padding: 18px; border: 1px solid var(--ok-line); border-radius: 12px; font-size: 14px; }
.dok-store-info__empty { margin: 12px 0 0; padding: 20px; border-radius: 12px; background: var(--ok-surface-sunk); color: var(--ok-text-muted); font-size: 13px; line-height: 1.6; }
.dok-store-info :is(button, a):focus-visible { outline: 2px solid var(--info-ink); outline-offset: 3px; }
.dok-store-info__sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Barra do topo da loja no celular (25/09/2026): Horários, Endereço e entrega
   e Compartilhar num contorno só. A cor da loja fica só no ícone, na tinta
   (--ok-accent-ink): eram três caixas tingidas com o preenchimento. Largura
   pelo conteúdo, para o rótulo maior não quebrar em 360 px. */
.dok-store-links { display: flex; margin: 12px var(--ok-gutter) 4px; border: 1px solid var(--ok-line); border-radius: 12px; background: var(--ok-surface); overflow: hidden; }
.dok-store-links button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; flex: auto; min-height: 46px; margin: 0; padding: 0 10px; border: 0; border-radius: 0; background: transparent; color: var(--ok-text); font: inherit; font-size: 13px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.dok-store-links button + button { border-inline-start: 1px solid var(--ok-line); }
.dok-store-links button .dok-info-icon { width: 18px; height: 18px; color: var(--ok-accent-ink, var(--ok-action)); }
.dok-store-links button:active { background: var(--ok-surface-sunk); }
.dok-store-links button:focus-visible { outline: 2px solid var(--ok-action); outline-offset: -3px; }
@media (hover: hover) { .dok-store-links button:hover { background: var(--ok-surface-sunk); } }
@media (max-width: 350px) { .dok-store-links button { gap: 5px; padding: 0 6px; font-size: 12px; } }
@media (max-width: 640px) {
    dialog.dok-store-info { width: 100%; max-width: 480px; max-height: calc(100dvh - 16px); margin: auto auto 0; inset: auto 0 0; border-radius: 22px 22px 0 0; border-bottom: 0; }
    .dok-store-info__header { gap: 10px; padding: 20px 16px 16px; }
    .dok-store-info__logo { width: 48px; height: 48px; border-radius: 13px; }
    .dok-store-info h2 { font-size: 17px; }
    .dok-store-info__nav { margin-inline: 16px; }
    .dok-store-info__nav button { min-height: 44px; gap: 5px; font-size: 11px; }
    .dok-store-info__body { padding: 20px 16px calc(24px + env(safe-area-inset-bottom, 0px)); }
    .dok-store-info__day { grid-template-columns: 76px minmax(0, 1fr); padding: 10px 8px; gap: 8px; }
    .dok-store-info__period { padding: 6px; font-size: 11px; }
    .dok-store-info__search input { font-size: 16px; }
    .dok-store-info__map-actions { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: no-preference) {
    .dok-store-info[open] { animation: dok-store-info-in 160ms ease-out; }
    @keyframes dok-store-info-in { from { opacity: 0; transform: translateY(10px); } }
}