/*
 * DeliveryOK — casca do desktop: cabeçalho e rodapé.
 *
 * Este arquivo existe para resolver um problema específico: o desktop tinha
 * sete cabeçalhos e quatro rodapés sem uma linha de código em comum, e a
 * maioria das telas não tinha rodapé nenhum. Aqui há UM cabeçalho e UM rodapé,
 * com variação por área via classe (`okd-head--landing`, `--store`, etc.).
 *
 * NÃO é um design system. É a casca, e só ela. As ~27.300 linhas de CSS de
 * conteúdo continuam onde estavam e não são tocadas por este arquivo — todo
 * seletor aqui começa em `.okd-`, prefixo que não existia no projeto.
 *
 * Prefixo: `okd` = OK desktop. O celular usa `ok-` e nunca divide página com
 * este arquivo (a camada mobile tem layout raiz próprio), mas prefixos
 * distintos evitam que alguém confunda os dois ao ler o CSS fora de contexto.
 */

/*
 * Reset local. A casca não pode depender do reset da página que a cerca: nas
 * telas de descoberta ela fica FORA de `.discovery-page`, e era de lá que vinha
 * o box-sizing. Sem isto, padding e largura do rodapé somam errado só ali.
 */
.okd-chrome,
.okd-chrome *,
.okd-chrome *::before,
.okd-chrome *::after {
    box-sizing: border-box;
}

.okd-chrome {
    /* Pelo mesmo motivo, a fonte é declarada e não herdada: em descoberta o
       <body> não define nenhuma e a casca cairia no serifado do navegador.
       Manrope na landing e na descoberta, Lato na loja — cada área carrega a
       sua, e a lista resolve para a que estiver disponível. */
    font-family: Manrope, Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;

    /* Marca. O laranja e o coral abaixo são os oficiais — antes desta etapa
       nenhum dos dois existia no CSS do projeto: havia #ff8900, #ff7300 e um
       terceiro no theme-color, todos divergentes entre si. */
    --okd-brand: #ff9700;

    /* Era #c96900, que sobre branco da 3,81:1 e reprova em AA nos seis lugares
       onde este token e cor de TEXTO — inclusive o rotulo do botao solido do
       cabecalho. #a85800 da 5,17:1 e mantem a mesma familia. */
    --okd-brand-ink: #a85800;
    --okd-coral: #ff464f;

    /* Cabeçalho. `--okd-head-bg` é sobrescrito inline na loja, onde a cor é
       escolhida pelo lojista. Fora dela resolve para a cor da marca. */
    --okd-head-bg: var(--okd-brand);

    /* Branco, por decisao de marca.
       Nota medida em 31/08/2026: branco sobre o laranja oficial #ff9700 da
       2,17:1 num texto de 13px, abaixo dos 4,5:1 da WCAG AA. Passar exigiria ou
       escurecer o texto (fica tinta escura sobre laranja) ou escurecer a barra
       ate ~#b85a00, que ja nao e a cor da marca. Ficou branco de proposito; o
       ponto esta registrado para quando houver uma terceira saida. */
    --okd-head-fg: #ffffff;
    --okd-head-h: 60px;
    --okd-head-h-min: 46px;

    /* Rodapé. Escuro em todas as áreas. */
    /*
     * Rodapé claro. Era escuro (#1b1613) e voltou ao claro por três motivos:
     *
     * 1. A marca não cabe no escuro. Sobre fundo quase preto a assinatura tem
     *    de ser branca chapada — o laranja e o coral perdem contraste. No claro
     *    ela entra COLORIDA, e essa passou a ser a única aparição da marca
     *    oficial em cores fora do hero da landing.
     * 2. Era a única superfície escura do produto: landing branca, loja
     *    #efefef, descoberta #f8f6f2, painel #ececec. O bloco não fechava a
     *    página, destoava dela.
     * 3. Os rodapés originais eram claros. A estrutura precisava mudar; o fundo
     *    não precisava, e mudá-lo junto alterou a essência sem necessidade.
     *
     * O creme é o mesmo tom da tela de descoberta, então o rodapé pertence ao
     * produto em vez de interromper.
     */
    --okd-foot-bg: #faf7f2;
    --okd-foot-fg: #1f2328;
    --okd-foot-dim: #5b6169;
    --okd-foot-line: #ece4d9;
    --okd-foot-social-bg: #f0e9df;
    --okd-foot-social-fg: #8a5a1e;

    --okd-radius: 10px;
    --okd-dur: 0.18s;
    --okd-ease: cubic-bezier(0.2, 0, 0.2, 1);
}

/* ------------------------------------------------------------------ marca */

/*
 * A assinatura entra por `mask-image`, não por <img>.
 *
 * O motivo: um <img> apontando para um SVG externo não herda `currentColor` —
 * o arquivo é um documento isolado. Com máscara, o SVG define só o recorte e
 * a cor vem de `background-color`, então a MESMA requisição serve a barra
 * laranja (branco) e o rodapé escuro (branco a 85%), e continua cacheável
 * entre as páginas. Inline no Blade custaria 23 KB em toda resposta HTML.
 *
 * `--okd-mark` é definida no atributo style do elemento, em Blade, via
 * asset(). Caminho fixo aqui quebraria em instalação sob subdiretório.
 */
.okd-mark {
    display: block;
    flex: none;
    width: var(--okd-mark-w, 84px);
    height: var(--okd-mark-h, 30px);
    background-color: currentColor;
    -webkit-mask: var(--okd-mark) no-repeat left center / contain;
    mask: var(--okd-mark) no-repeat left center / contain;
    transition: transform var(--okd-dur) var(--okd-ease);
    transform-origin: left center;
}

/* ------------------------------------------------------------- cabeçalho */

.okd-head {
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--okd-head-bg);
    color: var(--okd-head-fg);
    transition:
        box-shadow var(--okd-dur) var(--okd-ease),
        background-color var(--okd-dur) var(--okd-ease);
}

.okd-head__inner {
    display: flex;
    align-items: center;
    gap: 13px;
    width: min(1440px, calc(100% - 2rem));
    min-height: var(--okd-head-h);
    margin: 0 auto;
    transition: min-height var(--okd-dur) var(--okd-ease);
}

/* Condensa ao rolar. A classe entra por JS a partir de 24px — o mesmo limiar
   que a landing já usava no seu `is-sticky`, mantido para não mudar o ponto
   em que a pessoa sente a barra reagir. */
.okd-head.is-condensed {
    box-shadow: 0 4px 16px rgb(0 0 0 / 0.22);
}

.okd-head.is-condensed .okd-head__inner {
    min-height: var(--okd-head-h-min);
}

.okd-head.is-condensed .okd-mark {
    transform: scale(0.85);
}

.okd-chrome .okd-head__brand {
    display: flex;
    align-items: center;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    border-radius: var(--okd-radius);
}

/*
 * Marca que só aparece depois que a barra condensa.
 *
 * Existe porque a assinatura já está grande no hero logo abaixo, e repetida a
 * 30px no cabeçalho ela só duplica a marca e rouba espaço do que é ação — o
 * mesmo raciocínio que o cabeçalho do celular já documenta. Ao rolar, o hero
 * sai de vista e aí sim a marca no topo passa a ter função.
 *
 * A largura anima junto com a opacidade, e a margem negativa cancela o `gap`
 * do flex enquanto o elemento está recolhido: sem ela sobraria um buraco.
 */
.okd-reveal {
    opacity: 0;
    transition:
        width var(--okd-dur) var(--okd-ease),
        opacity var(--okd-dur) var(--okd-ease),
        margin var(--okd-dur) var(--okd-ease);
}

.okd-head__brand.okd-reveal {
    width: 0;
    margin-right: -13px;
}

.okd-head.is-condensed .okd-head__brand.okd-reveal {
    width: var(--okd-mark-w, 84px);
    margin-right: 0;
    opacity: 1;
}

.okd-head__store-logo.okd-reveal {
    width: 0;
    margin-right: -10px;
}

.okd-head.is-condensed .okd-head__store-logo.okd-reveal {
    width: 30px;
    height: 30px;
    margin-right: 0;
    opacity: 1;
}

.okd-head__brand:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

.okd-head__rule {
    flex: none;
    width: 1px;
    height: 28px;
    background: rgb(255 255 255 / 0.34);
}

/* --------------------------------------------------------- loja no topo */

.okd-chrome .okd-head__store {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.okd-head__store-logo {
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: var(--okd-radius);
    background: #fff;
    object-fit: cover;
}

.okd-head__store-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    color: var(--okd-coral);
}

.okd-head__store-text {
    min-width: 0;
}

.okd-head__store-name {
    display: block;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.okd-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 2px;
    padding: 2px 9px;
    border-radius: 999px;
    background: rgb(255 255 255 / 0.22);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.5;
}

.okd-status__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ff8f8f;
}

.okd-status.is-open .okd-status__dot {
    background: #7be3a8;
    animation: okd-blink 2s ease-in-out infinite;
}

@keyframes okd-blink {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.45;
    }
}

/* ------------------------------------------------------------ navegação */

.okd-head__nav {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

/*
 * Na landing a assinatura da barra é ~25% maior que nas demais áreas. É a
 * porta de entrada da plataforma e a barra não divide espaço com nome de loja
 * nem com abas — tem folga para a marca respirar. 38px de altura ainda deixam
 * 11px de margem na barra cheia, e o scale(0.85) do condensado a devolve a
 * ~32px, dentro dos 46px da barra mínima.
 */
.okd-head--landing {
    --okd-mark-w: 106px;
    --okd-mark-h: 38px;
}

/*
 * A landing usa a MESMA âncora das outras áreas: marca à esquerda, ações à
 * direita, desde o primeiro pixel.
 *
 * Já foi diferente — navegação centralizada e marca escondida até rolar,
 * porque o hero mostra a assinatura grande logo abaixo. Na prática a barra
 * centrada lia como perdida ("falta algo à esquerda"), e o estado rolado era
 * unanimemente o melhor; ele virou o único. Assinatura no cabeçalho E no hero
 * é o padrão da categoria. O condensar continua existindo, mas hoje só encolhe
 * a altura e soma sombra — nada mais aparece nem some.
 */
.okd-head__spacer {
    display: none;
}

/*
 * Os seletores de cor abaixo levam `.okd-chrome` na frente de propósito.
 *
 * `.landing-home a { color: inherit }` (storefront-home.css) tem
 * especificidade 0-1-1 e vencia um `.okd-act--solid` de 0-1-0: o botão sólido
 * herdava o branco da barra e virava texto branco sobre fundo branco. Com o
 * ancestral, a casca passa a 0-2-0 e ganha do legado sem precisar de
 * !important — que é justamente o que produziu os nove arquivos `-overrides`
 * que o projeto já carrega.
 */
.okd-chrome .okd-act {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 12px;
    border: 0;
    border-radius: var(--okd-radius);
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition:
        background-color var(--okd-dur) var(--okd-ease),
        transform var(--okd-dur) var(--okd-ease);
}

.okd-chrome .okd-act:hover {
    background: rgb(255 255 255 / 0.18);
    transform: translateY(-1px);
}

/* Foco visível. Nenhum dos cabeçalhos anteriores tinha isto — quem navega por
   teclado não enxergava onde estava. */
.okd-act:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* Item ativo. O indicador anterior do painel era `color: rgba(255,255,255,.82)`
   sobre laranja: diferença imperceptível. Aqui é uma barra sólida. */
.okd-act.is-active::after {
    content: "";
    position: absolute;
    right: 12px;
    bottom: -1px;
    left: 12px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: currentColor;
    animation: okd-slide 0.26s var(--okd-ease);
}

@keyframes okd-slide {
    from {
        transform: scaleX(0.2);
    }
    to {
        transform: scaleX(1);
    }
}

.okd-act__icon {
    font-size: 18px;
    line-height: 1;
}

/* Saldo de pontos: informação, não ação. Não levanta nem muda de fundo no
   hover, senão parece clicável e não é. */
.okd-points,
.okd-points:hover {
    background: rgb(255 255 255 / 0.14);
    transform: none;
    cursor: default;
}

.okd-chrome .okd-act--solid {
    background: #fff;
    color: var(--okd-brand-ink);
    font-weight: 800;
    padding: 10px 17px;
}

.okd-chrome .okd-act--solid:hover {
    background: #fff;
    box-shadow: 0 5px 14px rgb(0 0 0 / 0.2);
}

/* --------------------------------------------------------------- sacola */

.okd-cart__count {
    position: absolute;
    top: 3px;
    right: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--okd-coral);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
}

/* Pulsa uma vez quando a quantidade muda. Classe posta e removida por JS —
   animação contínua em elemento sempre visível vira ruído. */
.okd-cart__count.is-bumped {
    animation: okd-bump 0.42s var(--okd-ease);
}

@keyframes okd-bump {
    0%,
    100% {
        transform: scale(1);
    }
    45% {
        transform: scale(1.3);
    }
}

/* ------------------------------------------------- central de atenção */

/*
 * O sino vem do seu próprio componente com `background:#fff`, e dentro da
 * barra virava um quadrado branco solto, sem relação com o resto. Aqui ele
 * passa a se comportar como qualquer outra ação do cabeçalho — o badge
 * continua vermelho, que é a única parte que precisa gritar.
 *
 * Só a aparência muda: o comportamento continua no componente Livewire.
 */
.okd-chrome .attention-bell {
    width: auto;
    height: auto;
    padding: 9px 12px;
    border-radius: var(--okd-radius);
    background: transparent;
    color: inherit;
    font-size: 18px;
    transition:
        background-color var(--okd-dur) var(--okd-ease),
        transform var(--okd-dur) var(--okd-ease);
}

.okd-chrome .attention-bell:hover {
    background: rgb(255 255 255 / 0.18);
    transform: translateY(-1px);
}

.okd-chrome .attention-bell:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.okd-chrome .attention-bell__badge {
    right: 2px;
    top: 0;
    min-width: 17px;
    height: 17px;
    border-radius: 999px;
    background: var(--okd-coral);
    font-size: 10px;
    line-height: 17px;
}

/* -------------------------------------------------------------- dropdown */

/*
 * <details> em vez de Alpine: funciona sem JS, fecha com Esc e é focável por
 * teclado de graça. O painel do lojista já usa este mesmo padrão.
 */
.okd-more {
    position: relative;
}

.okd-more > summary {
    list-style: none;
    cursor: pointer;
}

.okd-more > summary::-webkit-details-marker {
    display: none;
}

.okd-more__panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 5;
    min-width: 210px;
    padding: 6px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 34px rgb(0 0 0 / 0.2);
    animation: okd-drop 0.16s var(--okd-ease);
}

@keyframes okd-drop {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.okd-chrome .okd-more__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #2b2b2b;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    width: 100%;
    cursor: pointer;
    transition: background-color var(--okd-dur) var(--okd-ease);
}

.okd-chrome .okd-more__item:hover {
    background: #f3f4f6;
}

.okd-more__item i {
    width: 16px;
    color: #9aa0a6;
    text-align: center;
}

.okd-chrome .okd-more__item.is-active {
    background: rgb(255 151 0 / 0.12);
    color: var(--okd-brand-ink);
    font-weight: 700;
}

.okd-chrome .okd-more__item.is-active i {
    color: var(--okd-brand-ink);
}

/* Sair fica em vermelho e por último: é a única ação do menu que não dá para
   desfazer com um clique de volta. */
.okd-chrome .okd-more__item--danger,
.okd-chrome .okd-more__item--danger i {
    color: #c62828;
}

.okd-chrome .okd-more__item--danger:hover {
    background: rgb(198 40 40 / 0.09);
}

.okd-more > summary .fa-angle-down {
    font-size: 12px;
    opacity: 0.8;
    transition: transform var(--okd-dur) var(--okd-ease);
}

.okd-more[open] > summary .fa-angle-down {
    transform: rotate(180deg);
}

.okd-more__sep {
    height: 1px;
    margin: 5px 8px;
    background: #ececec;
}

/* ------------------------------------------------- progresso e responsivo */

/*
 * Barra de progresso de navegação. Equivale ao `ok-navcover` do celular: sem
 * ela, um clique que leva 1–3s em 4G do interior não dá sinal nenhum e a
 * pessoa acha que travou e clica de novo.
 */
.okd-progress {
    position: absolute;
    inset: auto 0 -3px;
    height: 3px;
    background: var(--okd-coral);
    transform-origin: left center;
    transform: scaleX(0);
    opacity: 0;
    pointer-events: none;
}

.okd-progress.is-running {
    opacity: 1;
    animation: okd-progress 8s cubic-bezier(0.05, 0.7, 0.1, 1) forwards;
}

@keyframes okd-progress {
    0% {
        transform: scaleX(0.02);
    }
    40% {
        transform: scaleX(0.55);
    }
    100% {
        transform: scaleX(0.94);
    }
}

/* Precisa do ancestral: `.okd-chrome .okd-act` define `display: inline-flex`
   com especificidade 0-2-0 e venceria um `.okd-burger` de 0-1-0 — o hambúrguer
   aparecia em tela larga. */
.okd-chrome .okd-burger {
    display: none;
}

@media (max-width: 900px) {
    .okd-head__inner {
        width: calc(100% - 1.2rem);
        gap: 9px;
    }

    /*
     * Abaixo deste ponto os secundários saem da barra — mas SÓ onde existe um
     * hambúrguer para recebê-los. As telas de descoberta não têm drawer; sem o
     * :has() elas ficariam com um cabeçalho de logo e mais nada.
     *
     * Navegador sem :has() apenas mantém os links visíveis, que é o
     * comportamento seguro.
     */
    .okd-head:has(.okd-burger) .okd-act--secondary,
    .okd-head:has(.okd-burger) .okd-more {
        display: none;
    }

    .okd-chrome .okd-burger {
        display: inline-flex;
    }

    .okd-head__rule,
    .okd-status {
        display: none;
    }
}

/* ---------------------------------------------------------------- rodapé */

.okd-foot {
    position: relative;
    margin-top: auto;
    /* Filete da marca no topo: separa o rodapé do conteúdo sem precisar
       escurecer o bloco inteiro, que era o que o fundo escuro fazia. */
    border-top: 3px solid var(--okd-brand);
    padding: 44px 0 18px;
    background: var(--okd-foot-bg);
    color: var(--okd-foot-fg);
    overflow: hidden;
}

.okd-foot__inner {
    position: relative;
    z-index: 1;
    width: min(1440px, calc(100% - 2rem));
    margin: 0 auto;
}

.okd-foot__cols {
    display: grid;
    grid-template-columns: 1.55fr 1fr 1fr 1fr;
    gap: 20px 40px;
}

/* --- coluna de identidade --- */

/*
 * Aqui a assinatura é <img> do vetor COLORIDO, não a máscara monocromática do
 * cabeçalho: sobre o creme o laranja e o coral têm contraste, e esta virou a
 * única aparição da marca oficial em cores fora do hero da landing.
 */
.okd-foot__mark {
    display: block;
    width: 158px;
    height: auto;
    margin-bottom: 18px;
}

/*
 * Arte do acervo, decorativa. Fica ancorada no canto inferior direito, atrás do
 * conteúdo e sem capturar clique.
 *
 * É uma WebP única de 26 KB montada a partir de três recortes: os originais têm
 * 0,9 a 1,9 MB cada, e o rodapé carrega em toda página do desktop.
 *
 * Some abaixo de 1180px — a partir dali as colunas ocupam a largura toda e a
 * arte passaria por baixo do texto em vez de emoldurá-lo.
 */
.okd-foot__art {
    position: absolute;
    right: -18px;
    /* Acima da faixa legal, não colada no fundo: encostada embaixo ela passava
       atrás do "Termos de uso" e o copo de açaí competia com o texto. */
    bottom: 54px;
    width: 380px;
    max-width: 30%;
    height: auto;
    /* Textura, não conteúdo. Acima de ~0,18 ela começa a disputar leitura com
       a coluna que fica por cima. */
    opacity: 0.16;
    pointer-events: none;
    user-select: none;
}

@media (max-width: 1180px) {
    .okd-foot__art {
        display: none;
    }
}

.okd-foot__pitch {
    max-width: 30ch;
    margin: 0;
    color: var(--okd-foot-dim);
    font-size: 14px;
    line-height: 1.6;
}

.okd-foot__store-name {
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
}

/*
 * Telefone, endereço e horários. São informação com ícone, não mais uma lista
 * de links iguais aos das outras colunas — antes o endereço vinha com a mesma
 * aparência de link e não levava a lugar nenhum.
 */
.okd-foot__facts {
    display: grid;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.okd-foot__facts li {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    color: var(--okd-foot-dim);
    font-size: 13.5px;
    line-height: 1.5;
}

.okd-foot__facts i {
    margin-top: 3px;
    color: var(--okd-brand);
    font-size: 12px;
    text-align: center;
}

.okd-chrome .okd-foot__facts a {
    color: var(--okd-foot-dim);
    text-decoration: none;
    transition: color var(--okd-dur) var(--okd-ease);
}

.okd-chrome .okd-foot__facts a:hover {
    color: var(--okd-brand-ink);
}

/* --- colunas de links --- */

.okd-foot__title {
    margin: 0 0 14px;
    padding-bottom: 8px;
    /* Ambar suave em vez do laranja cheio: no claro o filete cheio em
       quatro colunas grita mais que os proprios titulos. */
    border-bottom: 2px solid #ffd79a;
    color: var(--okd-foot-fg);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.okd-chrome .okd-foot__link {
    display: block;
    margin: 0 0 9px;
    color: var(--okd-foot-dim);
    font-size: 13.5px;
    text-decoration: none;
    transition:
        color var(--okd-dur) var(--okd-ease),
        transform var(--okd-dur) var(--okd-ease);
}

.okd-chrome .okd-foot__link:hover {
    color: var(--okd-brand-ink);
    transform: translateX(2px);
}

.okd-foot__link:focus-visible {
    outline: 2px solid var(--okd-brand);
    outline-offset: 2px;
}

.okd-foot__social {
    display: flex;
    gap: 9px;
    margin-top: 12px;
    padding: 0;
    list-style: none;
}

.okd-chrome .okd-foot__social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--okd-radius);
    background: var(--okd-foot-social-bg);
    color: var(--okd-foot-social-fg);
    font-size: 15px;
    text-decoration: none;
    transition:
        transform var(--okd-dur) var(--okd-ease),
        background-color var(--okd-dur) var(--okd-ease);
}

.okd-chrome .okd-foot__social a:hover {
    background: var(--okd-brand);
    color: #fff;
    transform: scale(1.12);
}

.okd-foot__legal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 34px;
    padding-top: 18px;
    border-top: 1px solid var(--okd-foot-line);
    color: #8b9198;
    font-size: 12px;
}

/* Sem isto o link cai no azul padrão do navegador: ele não usa a classe
   .okd-foot__link, e nenhuma das áreas define cor de <a> no rodapé. */
.okd-chrome .okd-foot__legal a {
    color: #8b9198;
    text-decoration: none;
    transition: color var(--okd-dur) var(--okd-ease);
}

.okd-chrome .okd-foot__legal a:hover {
    color: var(--okd-brand-ink);
}

@media (max-width: 900px) {
    .okd-foot__cols {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 560px) {
    .okd-foot__cols {
        grid-template-columns: 1fr;
    }
}

/* ------------------------------------------------------ movimento reduzido */

/*
 * O CSS desktop não tinha uma única ocorrência de prefers-reduced-motion antes
 * desta etapa. Quem marca "reduzir movimento" no sistema costuma fazer isso
 * por enxaqueca ou distúrbio vestibular: animação sem esta guarda passa mal.
 */
@media (prefers-reduced-motion: reduce) {
    .okd-chrome *,
    .okd-chrome *::before,
    .okd-chrome *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .okd-act:hover,
    .okd-foot__link:hover,
    .okd-foot__social a:hover {
        transform: none;
    }
}

/* ------------------------------------------------ autenticação em tela estreita */

/*
 * Abaixo de ~516px a barra de autenticação (Cliente / Lojista / Cadastrar
 * loja / tema) não cabia numa linha e empurrava a página inteira para a
 * rolagem horizontal (96px medidos a 420px). Só acontece quando o canal de
 * celular está desligado; ainda assim, quebrar a linha custa menos que
 * esconder metade das ações.
 */
@media (max-width: 560px) {
    .okd-head {
        overflow-x: clip;
    }

    .okd-head--auth .okd-head__inner {
        flex-wrap: wrap;
        row-gap: 6px;
        padding-block: 8px;
    }

    .okd-head--auth .okd-head__nav {
        flex-wrap: wrap;
        justify-content: flex-end;
        row-gap: 6px;
    }
}