/*
 * DeliveryOK — topo da loja com a logo em destaque (computador).
 *
 * Padrão de toda loja desde 24/09/2026 (Aparência > Topo da loja no
 * computador; "Faixa compacta" é o plano B e não carrega esta folha).
 * Referência: o delivery antigo — capa alta, logo grande e nome no centro,
 * só o estado e os botões de horários e endereço. Na loja a marca é a do
 * lojista: a assinatura do DeliveryOK sai do cabeçalho (fica no rodapé) e vira
 * uma casinha que volta para todas as lojas.
 *
 * Duas raízes, sem depender uma da outra:
 * - .okd-head--store-top      o cabeçalho da loja nesse modo (qualquer página
 *                             da loja: cardápio, sacola, checkout);
 * - .store-hero--centered     a capa, só no cardápio.
 *
 * Com capa, a barra fica TRANSPARENTE sobre a foto (a capa sobe 72 px por baixo
 * dela) e vira sólida ao condensar. Logo, nome e estado da loja só entram na
 * barra quando a identidade da capa sai da tela (.is-past-hero, posto por
 * public/js/desktop-chrome.js) — antes disso seriam a mesma logo duas vezes.
 *
 * Servida de public/ com filemtime (layouts/storefront), carregada depois de
 * storefront-modular.css e storefront-appearance.css: as regras da capa ali
 * usam id e !important, e só especificidade maior (mais !important onde a base
 * tem) as vence.
 */

/* ------------------------------------------------------------ papéis */

/* Tinta e vidro sobre a capa: na raiz da página, para o cabeçalho (que mora
   dentro dela) herdar a versão da capa em cor. */
.sf-page[data-store-hero="centered"] {
    --sh-ink: #fff;
    --sh-glass: rgb(16 12 10 / 0.3);
    --sh-glass-line: rgb(255 255 255 / 0.26);
    --sh-glass-hover: rgb(255 255 255 / 0.16);
    --sh-head-h: 72px;
}

/* Barra sólida: no próprio cabeçalho, que também aparece na sacola e no
   checkout. */
.okd-head--store-top {
    --sh-bar: var(--okd3-surface, #fff);
    --sh-soft: #f7f3ef;
    --sh-line: #eadfd6;
    --sh-hover: rgb(26 18 16 / 0.06);
    --sh-head-h: 72px;
}

/* Capa em cor ou degradê: o texto segue o contraste que o sistema calculou
   para a cor do topo (branco sobre vermelho, escuro sobre amarelo). */
.sf-page[data-store-hero="centered"]:is([data-store-cover="color"], [data-store-cover="gradient"]) {
    --sh-ink: var(--store-top-contrast, #fff);
    --sh-glass: color-mix(in srgb, var(--store-top-contrast, #fff) 14%, transparent);
    --sh-glass-line: color-mix(in srgb, var(--store-top-contrast, #fff) 32%, transparent);
    --sh-glass-hover: color-mix(in srgb, var(--store-top-contrast, #fff) 22%, transparent);
}

:root[data-theme="dark"] .okd-head--store-top {
    --sh-bar: var(--ok-surface, #202126);
    --sh-soft: var(--ok-surface-2, #292b31);
    --sh-line: var(--ok-line, #373940);
    --sh-hover: rgb(255 255 255 / 0.08);
}

/* ======================================================= cabeçalho */

/* Mesma régua do cardápio (1488 px com 18 px de respiro): antes a barra tinha
   1320, a capa 1488 com 28 e o corpo 1488 com 18 — nada começava na mesma
   linha. Altura fixa e filete em sombra (não borda) para a barra não mudar de
   altura entre transparente e sólida. */
/* O .sf-page na frente é o nível a mais contra o Design 3
   (body[data-desktop-design] .okd-head, 0-2-1, e o .is-condensed dele, 0-3-1). */
.sf-page .okd-chrome.okd-head--store-top {
    border-bottom: 0;
    background: var(--sh-bar);
    box-shadow: 0 1px 0 var(--sh-line);
}

.sf-page .okd-chrome.okd-head--store-top.is-condensed {
    box-shadow: 0 1px 0 var(--sh-line), 0 10px 28px rgb(73 43 23 / 0.1);
}

.sf-page .okd-chrome.okd-head--store-top .okd-head__inner {
    width: min(1452px, calc(100% - 36px));
    min-height: var(--sh-head-h);
    gap: 12px;
}

.sf-page .okd-chrome.okd-head--store-top.is-condensed .okd-head__inner {
    min-height: 60px;
}

/* Barra de progresso da navegação: na borda de CIMA e na cor da loja. Na de
   baixo (padrão do cabeçalho) ela riscava a foto da capa a 72 px sempre que
   se clicava na casinha, com o cabeçalho ainda transparente. */
.sf-page .okd-chrome.okd-head--store-top .okd-progress {
    top: 0;
    bottom: auto;
    height: 3px;
    background: var(--store-accent-fill-current, var(--store-top, #ff9700));
    box-shadow: 0 0 10px color-mix(in srgb, var(--store-accent-fill-current, #ff9700) 55%, transparent);
}

/* A casinha no lugar da assinatura. */
.okd-chrome .okd-storebar__home {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 44px;
    height: 44px;
    border: 1px solid var(--sh-line);
    border-radius: 50%;
    background: var(--sh-soft);
    color: inherit;
    text-decoration: none;
    transition: background-color 0.16s ease, border-color 0.16s ease;
}

.okd-chrome .okd-storebar__home:hover {
    background: var(--sh-hover);
    color: inherit;
}

.okd-storebar__home svg,
.okd-storebar__tool svg,
.okd-storebar__bag svg {
    width: 20px;
    height: 20px;
}

/* A identidade da loja na barra (logo, nome, estado): sem o filete que a
   separava da assinatura, e com a logo sempre visível (na faixa compacta ela
   espera a barra condensar). */
.okd-head--store-top .okd-head__rule {
    display: none;
}

.okd-chrome.okd-head--store-top .okd-head__store-logo.okd-reveal {
    width: 40px;
    height: 40px;
    margin-right: 0;
    opacity: 1;
}

/* Cápsula das ações de apoio: Entrar | tema | mais. */
.okd-storebar__tools {
    display: flex;
    align-items: center;
    height: 44px;
    padding: 0 4px;
    border: 1px solid var(--sh-line);
    border-radius: 999px;
    background: var(--sh-soft);
}

.okd-chrome .okd-storebar__tool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 36px;
    min-width: 36px;
    padding: 0 12px;
    border-radius: 999px;
    color: inherit;
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.16s ease;
}

.okd-chrome .okd-storebar__tool:hover {
    background: var(--sh-hover);
    color: inherit;
}

.okd-chrome .okd-storebar__tool--icon {
    width: 36px;
    padding: 0;
}

/* O botão de tema entra na cápsula sem a moldura própria. */
.okd-head .okd-storebar__tools .ok-theme-toggle {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: inherit;
}

.okd-head .okd-storebar__tools .ok-theme-toggle:hover {
    background: var(--sh-hover);
    color: inherit;
}

/* Fios entre os itens da cápsula. */
.okd-storebar__tools > * + * {
    position: relative;
    margin-left: 5px;
}

.okd-storebar__tools > * + *::before {
    content: "";
    position: absolute;
    left: -3px;
    top: 10px;
    bottom: 10px;
    width: 1px;
    background: var(--sh-line);
    pointer-events: none;
}

.okd-storebar__more .okd-more__panel {
    top: calc(100% + 12px);
    color: var(--okd3-ink, #1a1210);
}

/* A Sacola é a ação principal do topo: preenchida na cor de destaque da loja,
   com o número de itens num selo. */
.okd-chrome .okd-storebar__bag {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 44px;
    padding: 0 16px 0 14px;
    border-radius: 999px;
    background: var(--store-accent, #e02533);
    color: var(--store-accent-contrast, #fff);
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    transition: filter 0.16s ease, box-shadow 0.16s ease;
}

.okd-chrome .okd-storebar__bag:hover {
    color: var(--store-accent-contrast, #fff);
    filter: brightness(0.94);
}

:root[data-theme="dark"] .okd-chrome .okd-storebar__bag,
:root[data-theme="dark"] .okd-chrome .okd-storebar__bag:hover {
    background: var(--store-accent-fill-dark, var(--store-accent, #ff6b73));
    color: var(--store-accent-fill-dark-contrast, #17181c);
}

.okd-chrome .okd-storebar__bag .okd-cart__count {
    position: static;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    background: var(--store-accent-contrast, #fff);
    color: var(--store-accent, #e02533);
    font-size: 12px;
}

:root[data-theme="dark"] .okd-chrome .okd-storebar__bag .okd-cart__count {
    background: var(--store-accent-fill-dark-contrast, #17181c);
    color: var(--store-accent-fill-dark, #ff6b73);
}

.okd-chrome .okd-storebar__home:focus-visible,
.okd-chrome .okd-storebar__tool:focus-visible,
.okd-chrome .okd-storebar__bag:focus-visible {
    outline: 3px solid rgb(255 151 0 / 0.5);
    outline-offset: 2px;
}

/* ------------------------------------- barra sobre a capa (cardápio) */

/*
 * Só onde existe a capa centralizada. A barra fica transparente e escreve na
 * tinta da capa; a Sacola vira pílula branca, que é o que se destaca sobre
 * foto. Ao condensar (80 px de rolagem) ela volta a ser sólida.
 */
.sf-page:has(.store-hero--centered) .okd-chrome.okd-head--store-top:not(.is-condensed) {
    background: transparent;
    box-shadow: none;
    color: var(--sh-ink);
}

.sf-page:has(.store-hero--centered) .okd-chrome.okd-head--store-top:not(.is-condensed) :is(.okd-storebar__home, .okd-storebar__tools) {
    border-color: var(--sh-glass-line);
    background: var(--sh-glass);
    -webkit-backdrop-filter: blur(12px) saturate(1.2);
    backdrop-filter: blur(12px) saturate(1.2);
}

.sf-page:has(.store-hero--centered) .okd-chrome.okd-head--store-top:not(.is-condensed) :is(.okd-storebar__home, .okd-storebar__tool):hover,
.sf-page:has(.store-hero--centered) .okd-chrome.okd-head--store-top:not(.is-condensed) .okd-storebar__tools .ok-theme-toggle:hover {
    background: var(--sh-glass-hover);
}

.sf-page:has(.store-hero--centered) .okd-chrome.okd-head--store-top:not(.is-condensed) .okd-storebar__tools > * + *::before {
    background: var(--sh-glass-line);
}

.sf-page:has(.store-hero--centered) .okd-chrome.okd-head--store-top:not(.is-condensed) .okd-storebar__bag {
    background: #fff;
    color: #1a1210;
    box-shadow: 0 8px 20px -6px rgb(0 0 0 / 0.35);
}

.sf-page:has(.store-hero--centered) .okd-chrome.okd-head--store-top:not(.is-condensed) .okd-storebar__bag .okd-cart__count {
    background: var(--store-accent, #e02533);
    color: var(--store-accent-contrast, #fff);
}

/* Hambúrguer (telas estreitas) e saldo de pontos também sobre a foto. */
.sf-page:has(.store-hero--centered) .okd-chrome.okd-head--store-top:not(.is-condensed) :is(.okd-burger, .okd-points) {
    border: 1px solid var(--sh-glass-line);
    background: var(--sh-glass);
    color: var(--sh-ink);
}

/* Logo, nome e estado só entram na barra quando a capa sai da tela. */
.sf-page:has(.store-hero--centered) .okd-head--store-top .okd-head__store {
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0s;
}

.sf-page:has(.store-hero--centered) .okd-head--store-top:not(.is-past-hero) .okd-head__store {
    visibility: hidden;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.14s ease, transform 0.14s ease, visibility 0s linear 0.14s;
}

/* ============================================================ capa */

.sf-page[data-store-hero="centered"] .legacy-vitrine #img-head-loja {
    /* Sobe por baixo da barra transparente. */
    margin-top: calc(-1 * var(--sh-head-h));
}

.sf-page[data-store-hero="centered"] .legacy-vitrine #img-head-loja,
.sf-page[data-store-hero="centered"] .legacy-vitrine #img-head-loja .store-hero__cover,
.sf-page[data-store-hero="centered"] .legacy-vitrine #subheader {
    min-height: 0 !important;
}

/* A foto como ela é, com uma sombra só onde há texto: no alto (barra) e no
   centro (logo e nome). O topo anterior escurecia duas vezes — brilho em 62%
   e véu preto por cima — e a comida virava fundo marrom. */
.sf-page[data-store-hero="centered"] .legacy-vitrine #img-head-loja .store-hero__cover-image {
    filter: saturate(1.05) brightness(0.8);
    transform: none;
    background-position: center 50%;
}

.sf-page[data-store-hero="centered"] .legacy-vitrine #img-head-loja .store-hero__cover::before {
    background:
        linear-gradient(180deg, rgb(10 8 7 / 0.45) 0, rgb(10 8 7 / 0) 110px),
        radial-gradient(60% 75% at 50% 56%, rgb(10 8 7 / 0.52), rgb(10 8 7 / 0.22) 72%, rgb(10 8 7 / 0.12));
}

.sf-page[data-store-hero="centered"] .legacy-vitrine #sub_content {
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center;
    gap: 14px;
    width: min(1452px, calc(100% - 36px));
    padding: calc(var(--sh-head-h) + 26px) 0 34px !important;
    text-align: center;
    color: var(--sh-ink);
}

.sf-page[data-store-hero="centered"] .legacy-vitrine #thumb {
    width: 124px !important;
    height: 124px !important;
    padding: 7px;
    border: 4px solid rgb(255 255 255 / 0.95);
    box-shadow: 0 14px 34px rgb(0 0 0 / 0.32);
}

/* "Ocultar nome": a logo ocupa o lugar do nome, então cresce mais. */
.sf-page[data-store-hero="centered"] .legacy-vitrine #thumb.store-hero__logo--large {
    width: 168px !important;
    height: 168px !important;
}

.sf-page[data-store-hero="centered"] .store-hero__identity {
    justify-items: center;
    gap: 12px;
}

.sf-page[data-store-hero="centered"] .store-hero__title-row {
    flex-direction: column;
    gap: 10px;
}

/* O nome como a loja cadastrou: a caixa alta vinha forçada pelo CSS
   (vitrine-rebuild.css) e gritava "PIZZARIA DO JOÃO". */
.sf-page[data-store-hero="centered"] .legacy-vitrine .store-hero__title {
    color: var(--sh-ink) !important;
    font-size: clamp(30px, 2.8vw, 40px) !important;
    line-height: 1.12;
    letter-spacing: -0.02em;
    text-transform: none;
    text-shadow: 0 2px 18px rgb(0 0 0 / 0.45);
}

.sf-page[data-store-hero="centered"]:is([data-store-cover="color"], [data-store-cover="gradient"]) .legacy-vitrine .store-hero__title {
    text-shadow: none;
}

.sf-page[data-store-hero="centered"] .legacy-vitrine .store-hero__status {
    justify-content: center;
}

.sf-page[data-store-hero="centered"] .legacy-vitrine .store-hero__status-badge {
    gap: 7px;
    min-height: 0;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgb(255 255 255 / 0.95);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: none;
    box-shadow: 0 6px 16px rgb(0 0 0 / 0.18);
}

.sf-page[data-store-hero="centered"] .legacy-vitrine .store-hero__status-badge::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.sf-page[data-store-hero="centered"] .legacy-vitrine .store-hero__status-badge.is-open {
    background: rgb(255 255 255 / 0.95);
    color: #12885f;
}

.sf-page[data-store-hero="centered"] .legacy-vitrine .store-hero__status-badge.is-closed {
    background: rgb(255 255 255 / 0.95);
    color: #b3261e;
}

.sf-page[data-store-hero="centered"] .legacy-vitrine .store-hero__status-note {
    color: var(--sh-ink) !important;
    font-size: 13.5px;
    font-weight: 700;
    text-shadow: 0 1px 8px rgb(0 0 0 / 0.35);
}

.sf-page[data-store-hero="centered"] .legacy-vitrine .store-hero__tagline {
    max-width: 640px;
    color: var(--sh-ink) !important;
    font-size: 15px;
    text-align: center;
    text-wrap: pretty;
}

/* Os dois botões, lado a lado e sem a seta — como os links do antigo. */
.sf-page[data-store-hero="centered"] .legacy-vitrine .store-hero__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 2px;
}

.sf-page[data-store-hero="centered"] .legacy-vitrine .store-hero__link {
    gap: 8px;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid var(--sh-glass-line);
    border-radius: 999px;
    background: var(--sh-glass);
    color: var(--sh-ink) !important;
    font-size: 14px;
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
    backdrop-filter: blur(10px) saturate(1.2);
}

.sf-page[data-store-hero="centered"] .legacy-vitrine .store-hero__link:hover {
    background: var(--sh-glass-hover);
}

.sf-page[data-store-hero="centered"] .store-hero__link > svg {
    width: 18px;
    height: 18px;
}

/* ================================================= telas estreitas */

/* Mesma margem do cardápio em cada faixa (storefront-modular.css: 18 px,
   13 px até 1230, 12 px até 820). */
@media (max-width: 1230px) {
    .sf-page .okd-chrome.okd-head--store-top .okd-head__inner {
        width: calc(100% - 26px);
    }
}

@media (max-width: 900px) {
    /* O hambúrguer recebe os secundários; a cápsula fica só com os ícones. */
    .okd-chrome .okd-storebar__tool > span {
        display: none;
    }

    .okd-chrome .okd-storebar__tool {
        width: 36px;
        padding: 0;
    }
}

@media (max-width: 820px) {
    .sf-page .okd-chrome.okd-head--store-top .okd-head__inner {
        width: calc(100% - 24px);
    }

    .sf-page[data-store-hero="centered"] .legacy-vitrine #sub_content {
        grid-template-columns: minmax(0, 1fr) !important;
        width: calc(100% - 24px);
        padding: calc(var(--sh-head-h) + 18px) 0 28px !important;
    }

    .sf-page[data-store-hero="centered"] .legacy-vitrine #thumb {
        width: 100px !important;
        height: 100px !important;
    }

    .sf-page[data-store-hero="centered"] .legacy-vitrine #thumb.store-hero__logo--large {
        width: 132px !important;
        height: 132px !important;
    }

    .sf-page[data-store-hero="centered"] .legacy-vitrine .store-hero__links {
        grid-column: auto;
    }
}

@media (max-width: 620px) {
    .sf-page[data-store-hero="centered"] .legacy-vitrine #sub_content {
        align-items: center;
    }

    .sf-page[data-store-hero="centered"] .legacy-vitrine #thumb {
        width: 88px !important;
        height: 88px !important;
    }

    .okd-chrome .okd-storebar__bag > span:not([data-store-cart-count-wrap]) {
        display: none;
    }

    .okd-chrome .okd-storebar__bag {
        padding: 0 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sf-page:has(.store-hero--centered) .okd-head--store-top .okd-head__store,
    .sf-page:has(.store-hero--centered) .okd-head--store-top:not(.is-past-hero) .okd-head__store {
        transition: none;
    }
}