/* DeliveryOK — landing marketplace Design 3 (desktop). */

.okd3-landing,
.okd3-landing *,
.okd3-landing *::before,
.okd3-landing *::after {
    box-sizing: border-box;
}

.okd3-landing {
    min-height: 100vh;
    color: var(--okd3-ink, #201711);
    background: #f8f6f4;
    font-family: Manrope, "Helvetica Neue", Arial, sans-serif;
}

.okd3-landing :where(a) {
    color: inherit;
    text-decoration: none;
}

.okd3-landing :where(button, input, select) {
    font: inherit;
}

.okd3-main {
    width: min(1280px, calc(100% - 40px));
    margin: 0 auto;
    padding: 20px 0 64px;
}

.okd3-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ---------------------------------------------------------- filtros rápidos */

.okd3-quick-filters {
    display: flex;
    gap: 9px;
    padding: 2px 1px 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.okd3-quick-filters::-webkit-scrollbar,
.okd3-category-rail::-webkit-scrollbar,
.okd3-product-rail::-webkit-scrollbar {
    display: none;
}

.okd3-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 38px;
    flex: 0 0 auto;
    padding: 0 15px;
    color: #514740;
    background: #fff;
    border: 1px solid #e9e1db;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

.okd3-chip:hover {
    color: #a84f00;
    border-color: #ffc46c;
    background: #fffaf2;
}

.okd3-chip.is-active {
    color: #fff;
    border-color: #201711;
    background: #201711;
}

.okd3-chip i {
    color: #ff464f;
}

.okd3-chip.is-active i {
    color: #ffb84d;
}

/* ------------------------------------------------------------------- hero */

.okd3-hero-carousel {
    position: relative;
    margin-top: 20px;
    overflow: hidden;
    border-radius: 26px;
    box-shadow: 0 16px 40px rgb(106 54 16 / 13%);
}

.okd3-hero {
    display: flex;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-behavior: smooth;
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;
    cursor: grab;
    touch-action: pan-y;
    user-select: none;
}

.okd3-hero-carousel[data-is-dragging="true"] .okd3-hero {
    cursor: grabbing;
    scroll-snap-type: none;
    scroll-behavior: auto;
}

.okd3-hero-carousel[data-is-dragging="true"] .okd3-hero a {
    cursor: grabbing;
}

.okd3-hero::-webkit-scrollbar {
    display: none;
}

.okd3-hero__slide {
    position: relative;
    display: grid;
    flex: 0 0 100%;
    grid-template-columns: minmax(0, 1.12fr) minmax(320px, 0.88fr);
    min-height: 230px;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 88% -35%, rgb(255 255 255 / 20%) 0 28%, transparent 28.4%),
        linear-gradient(118deg, var(--okd3-slide-start, #ff9700) 0%, var(--okd3-slide-end, #ff464f) 100%);
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.okd3-hero__copy {
    position: relative;
    z-index: 2;
    align-self: center;
    padding: 26px 20px 30px 70px;
}

.okd3-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.okd3-hero :is(h1, h2) {
    max-width: 690px;
    margin: 9px 0 10px;
    color: #fff;
    font-family: "Bricolage Grotesque", Manrope, sans-serif;
    font-size: clamp(32px, 3.4vw, 46px);
    font-weight: 800;
    line-height: 0.99;
    letter-spacing: -0.045em;
}

.okd3-carousel-arrow {
    position: absolute;
    z-index: 4;
    top: 50%;
    display: grid;
    width: 40px;
    height: 40px;
    padding: 0;
    place-items: center;
    color: #7e302b;
    background: rgb(255 255 255 / 92%);
    border: 0;
    border-radius: 999px;
    box-shadow: 0 8px 22px rgb(72 31 13 / 18%);
    cursor: pointer;
    transform: translateY(-50%);
}

.okd3-carousel-arrow--previous { left: 14px; }
.okd3-carousel-arrow--next { right: 14px; }
.okd3-carousel-arrow:focus-visible { outline: 3px solid rgb(255 255 255 / 76%); outline-offset: 3px; }

.okd3-carousel-dots {
    position: absolute;
    z-index: 4;
    right: 0;
    bottom: 14px;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    pointer-events: none;
}

.okd3-carousel-dots button {
    width: 7px;
    height: 7px;
    padding: 0;
    background: rgb(255 255 255 / 58%);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    pointer-events: auto;
    transition: width 160ms ease, background-color 160ms ease;
}

.okd3-carousel-dots button[aria-current="true"] {
    width: 24px;
    background: #fff;
}

.okd3-carousel-dots button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.okd3-hero p {
    max-width: 590px;
    margin: 0 0 22px;
    color: rgb(255 255 255 / 91%);
    font-size: 14px;
    line-height: 1.55;
}

.okd3-hero__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 45px;
    padding: 0 18px;
    color: #b42c35 !important;
    background: #fff;
    border-radius: 13px;
    box-shadow: 0 10px 24px rgb(116 34 0 / 16%);
    font-size: 12px;
    font-weight: 800;
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.okd3-hero__cta:hover {
    box-shadow: 0 14px 30px rgb(116 34 0 / 22%);
    transform: translateY(-2px);
}

.okd3-hero__art {
    position: relative;
    min-height: 230px;
}

.okd3-hero__art img {
    position: absolute;
    right: 7%;
    bottom: -74px;
    width: min(380px, 96%);
    height: auto;
    filter: drop-shadow(0 24px 25px rgb(106 35 0 / 24%));
}

/* ---------------------------------------------------------------- seções */

.okd3-section {
    margin-top: 28px;
    scroll-margin-top: 90px;
}

/* Quebra de linha liberada: com zoom alto as setas dos destaques ficavam fora
   da tela e davam rolagem lateral na página inteira. */
.okd3-section__head {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: 12px 20px;
    margin-bottom: 15px;
}

.okd3-section__head h2 {
    margin: 0;
    color: #201711;
    font-family: "Bricolage Grotesque", Manrope, sans-serif;
    font-size: 23px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.03em;
}

.okd3-section__head p {
    margin: 5px 0 0;
    color: #746b65;
    font-size: 12.5px;
    line-height: 1.5;
}

.okd3-section__link {
    flex: 0 0 auto;
    padding: 7px 0;
    color: #c9323c !important;
    font-size: 12px;
    font-weight: 800;
}

.okd3-section__link:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.okd3-section__actions,
.okd3-rail-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.okd3-rail-controls button {
    display: grid;
    width: 38px;
    height: 38px;
    padding: 0;
    place-items: center;
    color: #4a3b34;
    background: #fff;
    border: 1px solid #e8dfd8;
    border-radius: 11px;
    box-shadow: 0 5px 14px rgb(73 43 23 / 7%);
    cursor: pointer;
}

.okd3-rail-controls button:hover:not(:disabled) {
    color: #b75100;
    border-color: #ffb84d;
}

.okd3-rail-controls button:disabled {
    cursor: not-allowed;
    opacity: .36;
}

.okd3-rail-controls button:focus-visible {
    outline: 3px solid rgb(255 151 0 / 25%);
    outline-offset: 2px;
}

/* -------------------------------------------------------------- categorias */

.okd3-category-rail {
    display: grid;
    grid-auto-columns: minmax(140px, 1fr);
    grid-auto-flow: column;
    gap: 12px;
    padding: 1px 1px 10px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline proximity;
    scrollbar-width: none;
}

.okd3-category {
    display: flex;
    min-height: 150px;
    padding: 14px 10px 12px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: #443a35;
    background: #fff;
    border: 1px solid #e9e1db;
    border-radius: 18px;
    scroll-snap-align: start;
    font-size: 13px;
    font-weight: 800;
    text-align: center;
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.okd3-category:hover,
.okd3-category.is-active {
    border-color: #ffc46c;
    box-shadow: 0 10px 24px rgb(73 43 23 / 8%);
    transform: translateY(-3px);
}

.okd3-category.is-active {
    box-shadow: 0 0 0 2px rgb(255 151 0 / 14%), 0 10px 24px rgb(73 43 23 / 8%);
}

/* 88 px: as imagens dos tipos têm 150×150, nítidas até 1,7× de densidade. */
.okd3-category__image {
    display: grid;
    width: 88px;
    height: 88px;
    place-items: center;
    overflow: hidden;
    background: #fff4e4;
    border-radius: 50%;
}

.okd3-category__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.okd3-category small {
    color: #918680;
    font-size: 11px;
    font-weight: 650;
}

/* -------------------------------------------------------- acontecendo agora */

/*
 * Cartões brancos, como a lista de lojas: a cor fica só na pastilha do ícone.
 * Os blocos coloridos de antes (amarelo, rosa, verde) liam como aviso do
 * sistema. Tudo por token, então o escuro vem dos próprios tokens.
 */
.okd3-live {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

/* A ação vem por último no HTML (o leitor de tela ouve o título primeiro) e
   sobe para o canto pela área da grade. */
.okd3-live__card {
    display: grid;
    min-height: 150px;
    padding: 18px;
    align-content: start;
    grid-template-areas:
        "icon go"
        "body body";
    grid-template-columns: auto minmax(0, 1fr);
    gap: 20px 12px;
    color: var(--ok-text, #1a1210);
    background: var(--ok-surface, #fff);
    border: 1px solid var(--ok-line, #e3dad4);
    border-radius: 20px;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.okd3-live__card:hover {
    border-color: color-mix(in srgb, var(--ok-brand-warm, #ff9700) 45%, var(--ok-line, #e3dad4));
    box-shadow: 0 12px 28px rgb(73 43 23 / 9%);
    transform: translateY(-2px);
}

.okd3-live__card:focus-visible {
    outline: 3px solid var(--ok-accent-ink, #bf1b27);
    outline-offset: 3px;
}

.okd3-live__icon {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    grid-area: icon;
    border-radius: 13px;
    font-size: 17px;
}

.okd3-live__icon--warm {
    color: var(--ok-warm-ink, #a35a00);
    background: color-mix(in srgb, var(--ok-brand-warm, #ff9700) 15%, var(--ok-surface, #fff));
}

.okd3-live__icon--coral {
    color: var(--ok-accent-ink, #bf1b27);
    background: color-mix(in srgb, var(--ok-brand, #ff464f) 12%, var(--ok-surface, #fff));
}

.okd3-live__icon--neutral {
    color: var(--ok-text, #1a1210);
    background: var(--ok-surface-sunk, #f2ede9);
}

.okd3-live__body {
    min-width: 0;
    grid-area: body;
}

.okd3-live__body strong {
    display: block;
    font-family: "Bricolage Grotesque", Manrope, sans-serif;
    font-size: 23px;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.okd3-live__body small {
    display: block;
    margin-top: 6px;
    color: var(--ok-text-muted, #6b5b54);
    font-size: 13px;
    line-height: 1.4;
}

.okd3-live__faces {
    display: flex;
    margin-top: 10px;
    align-items: center;
}

.okd3-live__faces > * {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border: 2px solid var(--ok-surface, #fff);
    border-radius: 50%;
    box-shadow: 0 1px 4px rgb(0 0 0 / 14%);
}

.okd3-live__faces > * + * {
    margin-left: -9px;
}

.okd3-live__faces img {
    object-fit: cover;
    background: var(--ok-surface, #fff);
}

.okd3-live__faces span {
    display: grid;
    place-items: center;
    color: var(--ok-text-muted, #6b5b54);
    background: var(--ok-surface-sunk, #f2ede9);
    font-size: 11px;
    font-weight: 800;
}

.okd3-live__go {
    display: inline-flex;
    align-items: center;
    justify-self: end;
    gap: 7px;
    grid-area: go;
    color: var(--ok-text-muted, #6b5b54);
    font-size: 12px;
    font-weight: 700;
}

.okd3-live__go i {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 1px solid var(--ok-line, #e3dad4);
    border-radius: 50%;
    font-size: 11px;
    transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

.okd3-live__card:hover .okd3-live__go i {
    color: var(--ok-bg, #fdf9f5);
    background: var(--ok-text, #1a1210);
    border-color: var(--ok-text, #1a1210);
}

:root[data-theme="dark"] .okd3-live__card {
    box-shadow: var(--ok-sh-1);
}

:root[data-theme="dark"] .okd3-live__card:hover {
    background: var(--ok-surface-2);
    border-color: var(--ok-line-strong);
}

/* ---------------------------------------------------------------- produtos */

.okd3-product-rail {
    display: grid;
    grid-auto-columns: minmax(238px, 1fr);
    grid-auto-flow: column;
    gap: 15px;
    padding: 1px 1px 12px;
    overflow-x: auto;
    scroll-snap-type: inline proximity;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    cursor: grab;
    scroll-padding-inline: 1px;
    touch-action: pan-y;
}

[data-okd3-product-carousel][data-is-dragging="true"] .okd3-product-rail {
    cursor: grabbing;
    scroll-snap-type: none;
    user-select: none;
}

.okd3-product {
    overflow: hidden;
    background: #fff;
    border: 1px solid #e9e1db;
    border-radius: 19px;
    scroll-snap-align: start;
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.okd3-product:hover {
    box-shadow: 0 14px 34px rgb(73 43 23 / 11%);
    transform: translateY(-3px);
}

.okd3-product > a {
    display: block;
}

.okd3-product__media {
    position: relative;
    display: block;
    height: 150px;
    overflow: hidden;
    background: #f1ece9;
}

.okd3-product__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 220ms ease;
}

.okd3-product:hover .okd3-product__media img {
    transform: scale(1.035);
}

.okd3-product__tag {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 6px 8px;
    color: #fff;
    background: #201711;
    border-radius: 8px;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.okd3-product__body {
    display: grid;
    gap: 4px;
    min-height: 108px;
    padding: 14px;
}

.okd3-product__body strong {
    overflow: hidden;
    font-size: 14px;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.okd3-product__body span {
    overflow: hidden;
    color: #746b65;
    font-size: 10.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.okd3-product__body b {
    align-self: end;
    color: #bd3039;
    font-size: 14px;
}

/* ------------------------------------------------------------ todas lojas */

.okd3-all-stores {
    overflow: hidden;
    background: #fff;
    border: 1px solid #e9e1db;
    border-radius: 20px;
}

.okd3-all-stores__toolbar {
    display: flex;
    min-height: 66px;
    padding: 12px 14px;
    align-items: center;
    gap: 11px;
    border-bottom: 1px solid #e9e1db;
}

.okd3-local-search {
    display: flex;
    width: min(390px, 42%);
    min-height: 42px;
    padding: 0 13px;
    align-items: center;
    gap: 9px;
    color: #776d67;
    background: #f5f2f0;
    border: 1px solid transparent;
    border-radius: 12px;
}

.okd3-local-search:focus-within {
    background: #fff;
    border-color: #ffb13d;
    box-shadow: 0 0 0 3px rgb(255 151 0 / 12%);
}

.okd3-local-search input {
    width: 100%;
    min-width: 0;
    padding: 0;
    color: #201711;
    background: transparent;
    border: 0;
    outline: 0;
    font-size: 12px;
}

/* O contêiner desenha o estado de foco; o input não deve criar um segundo
   retângulo dentro dele quando a regra global de acessibilidade estiver ativa. */
body[data-desktop-design="model_3"] .okd3-local-search input[type="search"]:focus-visible {
    outline: 0;
    outline-offset: 0;
}

.okd3-sort {
    display: flex;
    min-height: 42px;
    padding: 0 10px 0 13px;
    align-items: center;
    gap: 8px;
    color: #6f655f;
    background: #fff;
    border: 1px solid #e9e1db;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
}

.okd3-sort select {
    max-width: 130px;
    padding: 4px 2px;
    color: #201711;
    background: transparent;
    border: 0;
    outline: 0;
    font-size: 11px;
    font-weight: 800;
}

/* A caixa desenha o foco, arredondado, como a busca ao lado: a regra geral de
   acessibilidade desenhava um quadrado laranja em volta do select (06/10/2026). */
.okd3-sort:focus-within {
    border-color: #ffb13d;
    box-shadow: 0 0 0 3px rgb(255 151 0 / 12%);
}

/* O escuro do pacote repinta a borda e a sombra da caixa com (0,3,0). */
:root[data-theme="dark"] .okd3-sort:focus-within {
    border-color: #ffb13d;
    box-shadow: 0 0 0 3px rgb(255 151 0 / 18%);
}

body[data-desktop-design="model_3"] .okd3-sort select:focus-visible {
    outline: 0;
    outline-offset: 0;
}

/* Lista desenhada, como o Ordenar da loja e os selects do painel: era a lista
   azul do Windows. Navegador sem suporte continua com a lista do sistema.
   Escolhido na tinta (contraste de texto), nunca na cor de preenchimento. */
@supports (appearance: base-select) {
    .okd3-sort select,
    .okd3-sort select::picker(select) {
        appearance: base-select;
    }

    /* Em base-select o texto sobe para o topo sem o flex. */
    .okd3-sort select {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 30px;
        cursor: pointer;
    }

    .okd3-sort select::picker-icon {
        content: "";
        width: 7px;
        height: 7px;
        margin: -3px 2px 0 0;
        border-right: 1.8px solid currentColor;
        border-bottom: 1.8px solid currentColor;
        rotate: 45deg;
        transition: rotate 0.15s;
    }

    .okd3-sort select::picker(select) {
        /* Embaixo primeiro, como a lista do sistema; em cima só se não couber.
           O padrão do Chrome escolhe o lado com mais espaço e abria para cima. */
        position-try-order: normal;
        min-width: max(200px, anchor-size(width));
        margin-block: 10px;
        padding: 6px;
        border: 1px solid #e9e1db;
        border-radius: 14px;
        color: #201711;
        background: #fff;
        box-shadow: 0 16px 36px -14px rgb(40 20 10 / 30%), 0 2px 6px rgb(40 20 10 / 6%);
        font: inherit;
        font-size: 13px;
    }

    .okd3-sort select option {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 40px;
        padding: 9px 12px;
        border-radius: 9px;
        color: #201711;
        font-weight: 600;
    }

    .okd3-sort select option:is(:hover, :focus) {
        background: rgb(255 151 0 / 10%);
        outline: none;
    }

    .okd3-sort select option:checked {
        color: var(--ok-warm-ink, #9a5200);
        font-weight: 800;
    }

    .okd3-sort select option::checkmark {
        order: 1;
        margin-left: auto;
        color: var(--ok-warm-ink, #9a5200);
    }

    :root[data-theme="dark"] .okd3-sort select::picker(select) {
        border-color: var(--ok-line, #373940);
        color: var(--ok-text, #f5f5f7);
        background: var(--ok-surface-2, #292b31);
        box-shadow: 0 16px 36px -14px rgb(0 0 0 / 60%);
    }

    :root[data-theme="dark"] .okd3-sort select option {
        color: var(--ok-text, #f5f5f7);
    }

    :root[data-theme="dark"] .okd3-sort select option:is(:hover, :focus) {
        background: rgb(255 151 0 / 14%);
    }

    :root[data-theme="dark"] .okd3-sort select option:checked,
    :root[data-theme="dark"] .okd3-sort select option::checkmark {
        color: #ffc066;
    }
}

/* :open em regra própria: seletor desconhecido derruba a regra inteira. Com a
   lista aberta o foco está na opção, e o :focus-within da caixa não acende. */
@supports (appearance: base-select) {
    .okd3-sort select:open::picker-icon {
        margin-top: 3px;
        rotate: 225deg;
    }

    .okd3-sort:has(select:open) {
        border-color: #ffb13d;
        box-shadow: 0 0 0 3px rgb(255 151 0 / 12%);
    }

    :root[data-theme="dark"] .okd3-sort:has(select:open) {
        border-color: #ffb13d;
        box-shadow: 0 0 0 3px rgb(255 151 0 / 18%);
    }
}

.okd3-all-stores__count {
    margin-left: auto;
    color: #776d67;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.okd3-all-stores__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.okd3-store-row {
    min-width: 0;
    border-right: 1px solid #eee8e3;
    border-bottom: 1px solid #eee8e3;
}

.okd3-store-row:nth-child(2n) {
    border-right: 0;
}

.okd3-store-row > a {
    position: relative;
    display: grid;
    min-height: 150px;
    height: 100%;
    padding: 20px;
    grid-template-columns: 88px minmax(0, 1fr);
    align-items: start;
    gap: 18px;
    transition: background-color 150ms ease;
}

.okd3-store-row > a:hover {
    background: #fffaf3;
}

/* 88 px: a derivada de 96 cobre a tela comum e a de 192 (srcset) a de alta
   densidade. */
.okd3-store-row__logo {
    width: 88px;
    height: 88px;
    object-fit: cover;
    background: #f4efeb;
    border: 1px solid #eee6df;
    border-radius: 18px;
}

.okd3-store-row__copy {
    min-width: 0;
}

.okd3-store-row__copy strong,
.okd3-store-row__copy span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.okd3-store-row__copy strong {
    padding-right: 72px;
    color: #201711;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.4;
}

.okd3-store-row__copy span {
    margin-top: 3px;
    color: #776d67;
    font-size: 13px;
}

.okd3-store-row__copy small {
    display: block;
    margin-top: 9px;
    color: #514740;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
    white-space: normal;
    overflow-wrap: anywhere;
}

.okd3-store-row__copy .okd3-store-row__fee {
    margin-top: 3px;
    font-weight: 600;
}

.okd3-store-row__state {
    position: absolute;
    top: 23px;
    right: 20px;
    color: #16865a;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.okd3-store-row__state.is-closed {
    color: #928882;
}

.okd3-empty,
.okd3-filter-empty {
    padding: 48px 20px;
    color: #746b65;
    text-align: center;
}

.okd3-empty i {
    color: #ff9700;
    font-size: 30px;
}

.okd3-empty h3 {
    margin: 12px 0 4px;
    color: #201711;
    font-size: 18px;
}

.okd3-empty p,
.okd3-filter-empty {
    margin: 0;
    font-size: 12px;
}

.okd3-empty a {
    display: inline-flex;
    margin-top: 16px;
    padding: 10px 15px;
    color: #fff !important;
    background: #ff464f;
    border-radius: 11px;
    font-size: 11px;
    font-weight: 800;
}

/* ------------------------------------------------------------- lojista */

/*
 * Uma faixa de uma linha: a landing é do cliente, e o convite ao lojista não
 * precisa disputar com a lista de lojas. Um só botão cheio; quem já vende tem
 * a porta ao lado, sem peso.
 */
.okd3-merchant-strip {
    display: grid;
    margin-top: 40px;
    padding: 22px 24px;
    align-items: center;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 20px;
    color: var(--ok-text, #1a1210);
    background: var(--ok-surface, #fff);
    border: 1px solid var(--ok-line, #e3dad4);
    border-radius: 22px;
}

.okd3-merchant-strip__icon {
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, var(--ok-brand-warm, #ff9700), var(--ok-brand, #ff464f));
    border-radius: 16px;
    box-shadow: 0 8px 18px rgb(255 70 79 / 22%);
    font-size: 21px;
}

.okd3-merchant-strip__copy {
    min-width: 0;
}

.okd3-merchant-strip h2 {
    margin: 0;
    color: var(--ok-text, #1a1210);
    font-family: "Bricolage Grotesque", Manrope, sans-serif;
    font-size: 22px;
    line-height: 1.2;
    letter-spacing: -0.03em;
}

.okd3-merchant-strip p {
    margin: 5px 0 0;
    color: var(--ok-text-muted, #6b5b54);
    font-size: 13.5px;
    line-height: 1.45;
}

.okd3-merchant-strip__actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.okd3-merchant-strip__actions > a {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    font-size: 13px;
    line-height: 1.3;
    white-space: nowrap;
    transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.okd3-merchant-strip__actions > a:focus-visible {
    outline: 3px solid var(--ok-accent-ink, #bf1b27);
    outline-offset: 3px;
}

.okd3-merchant-strip__ghost {
    padding: 0 18px;
    gap: 9px;
    color: var(--ok-text, #1a1210);
    border: 1px solid var(--ok-line-strong, #c9bcb4);
    font-weight: 700;
}

.okd3-merchant-strip__ghost i {
    color: var(--ok-text-muted, #6b5b54);
    font-size: 13px;
}

.okd3-merchant-strip__ghost:hover {
    background: var(--ok-surface-2, #fdf3e3);
    border-color: color-mix(in srgb, var(--ok-brand-warm, #ff9700) 45%, var(--ok-line, #e3dad4));
}

.okd3-merchant-strip__cta {
    padding: 0 10px 0 20px;
    gap: 12px;
    color: var(--ok-on-brand-action, #fff);
    background: var(--ok-brand-action, #e02533);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--ok-brand-action, #e02533) 24%, transparent);
    font-weight: 800;
}

.okd3-merchant-strip__cta i {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    background: rgb(255 255 255 / 16%);
    border-radius: 9px;
    font-size: 11px;
    transition: transform 160ms ease;
}

.okd3-merchant-strip__cta:hover {
    background: var(--ok-brand-action-hover, #bf1b27);
    box-shadow: var(--ok-sh-1, 0 1px 2px rgb(60 25 10 / 6%));
}

.okd3-merchant-strip__cta:hover i {
    transform: translateX(2px);
}

:root[data-theme="dark"] .okd3-merchant-strip {
    box-shadow: var(--ok-sh-1);
}

/* ------------------------------------------------------------- responsivo */

@media (max-width: 1040px) {
    .okd3-main {
        width: min(100% - 28px, 1280px);
    }

    .okd3-all-stores__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .okd3-store-row:nth-child(2n) {
        border-right: 0;
    }
}

@media (max-width: 820px) {
    .okd3-merchant-strip {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .okd3-merchant-strip__actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }
}

@media (max-width: 760px) {
    .okd3-all-stores__grid {
        grid-template-columns: 1fr;
    }

    .okd3-store-row {
        border-right: 0;
    }

    .okd3-live {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .okd3-live__card:first-child {
        grid-column: 1 / -1;
    }

    .okd3-hero__slide {
        grid-template-columns: minmax(0, 1.15fr) minmax(190px, 0.85fr);
    }

    .okd3-hero__copy {
        padding-left: 64px;
    }

    .okd3-hero :is(h1, h2) {
        font-size: 34px;
    }

    .okd3-all-stores__toolbar {
        flex-wrap: wrap;
    }

    .okd3-local-search {
        width: 100%;
    }

    .okd3-all-stores__count {
        margin-left: auto;
    }
}

@media (max-width: 620px) {
    .okd3-merchant-strip {
        padding: 18px;
    }

    .okd3-merchant-strip__actions {
        display: grid;
    }
}

/*
 * Zoom alto (250% ou mais numa tela de 1440). O canal continua o do
 * computador, então a landing precisa caber aqui também.
 */
@media (max-width: 600px) {
    /* A arte tinha 190 px fixos e espremia o texto a uma palavra por linha. */
    .okd3-hero__slide {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
    }

    .okd3-hero__art {
        display: none;
    }

    .okd3-hero__copy {
        padding: 24px 22px 64px;
    }

    .okd3-hero :is(h1, h2) {
        font-size: 30px;
    }

    /* As setas saem do meio do texto e descem para os cantos, ao lado dos
       pontos. */
    .okd3-carousel-arrow {
        top: auto;
        bottom: 10px;
        width: 36px;
        height: 36px;
        transform: none;
    }
}

@media (max-width: 560px) {
    .okd3-live {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 480px) {
    .okd3-store-row > a {
        padding: 16px;
        grid-template-columns: 64px minmax(0, 1fr);
        gap: 14px;
    }

    .okd3-store-row__logo {
        width: 64px;
        height: 64px;
        border-radius: 15px;
    }

    .okd3-store-row__state {
        top: 18px;
        right: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .okd3-landing *,
    .okd3-landing *::before,
    .okd3-landing *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .okd3-landing :where(a, article):hover {
        transform: none !important;
    }
}