/* VITRINE — CAMADA HD (v9.217) · o mesmo capricho do painel, no que o */

/* 1. Escala da vitrine (profundidade, raio, movimento) */
:root {
    /* v9.362 — LUZES FORA (pedido do dono). A receita neumórfica tinha uma luz
       BRANCA acima/à esquerda de cada peça: nas bordas ela vazava do card, do
       painel e da gaveta e virava "luzinhas" soltas na página. A elevação agora
       é só sombra — contida no próprio elemento, limpa, premium. */
    --sf-elev-1: 0 1px 2px rgba(13, 27, 62, 0.05), 0 10px 24px -16px rgba(13, 27, 62, 0.38);
    --sf-elev-2: 0 1px 2px rgba(13, 27, 62, 0.06), 0 16px 34px -18px rgba(13, 27, 62, 0.42);
    --sf-elev-3: 0 2px 4px rgba(13, 27, 62, 0.07), 0 26px 50px -22px rgba(13, 27, 62, 0.48);
    --sf-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 46%);
    --sf-edge: linear-gradient(135deg, rgba(0, 102, 255, 0.42), rgba(226, 232, 240, 0.35) 46%, rgba(226, 232, 240, 0.12));
    --sf-dur: 200ms;
    --sf-ease-hd: cubic-bezier(0.22, 0.61, 0.36, 1);
    /* v9.343 — A MALHA FIXA (o padrão da dash): título 14, preço 18 — tamanho CERTO
       em qualquer largura; o fluido (clamp) gerava 15,30 / 19,40 no calculado. */
    --sf-fs-card-title: 14px;
    --sf-fs-price: 18px;
}

/* 2. CARD DE PRODUTO — a peça que vende */
.storefront-product-card {
    position: relative;
    box-shadow: var(--sf-elev-1);
    transition: transform var(--sf-dur) var(--sf-ease-hd),
                box-shadow var(--sf-dur) var(--sf-ease-hd);
}

/* Brilho no topo do card (o "vidro" que dá vida sem custo de blur). */
.storefront-product-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 44%;
    border-radius: var(--sf-radius) var(--sf-radius) 0 0;
    background: var(--sf-sheen);
    opacity: 0.5;
    pointer-events: none;
    z-index: 1;
}

/* A borda que acende no hover — gradiente, não cor chapada. */
.storefront-product-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: var(--sf-edge);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0;
    transition: opacity 320ms var(--sf-ease-hd);
    pointer-events: none;
    z-index: 2;
}

@media (hover: hover) and (pointer: fine) {
    .storefront-product-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--sf-elev-3);
    }
    .storefront-product-card:hover::after { opacity: 1; }
    /* A imagem dá um leve "zoom" (já existia) com curva mais macia. */
    .storefront-product-card:hover .card-img-wrap img {
        transition: transform 620ms var(--sf-ease-hd);
    }
}

/* Título e preço: escala fluida + números que não "dançam". */
.storefront-product-card .card-title,
.storefront-product-card [class*="title"] {
    font-size: var(--sf-fs-card-title);
    letter-spacing: -0.006em;
}
.storefront-product-card [class*="price"],
.sf-num {
    font-size: var(--sf-fs-price);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}

/* 3. BOTÕES — o clique merece um brilho */
.btn-card-buy,
.btn-primary {
    position: relative;
    overflow: hidden;
}
.btn-card-buy::after,
.btn-primary::after {
    content: '';
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    transform: skewX(-18deg);
    transition: left 620ms var(--sf-ease-hd);
    pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
    .btn-card-buy:hover::after,
    .btn-primary:hover::after { left: 130%; }
}

/* 4. CABEÇALHO e RODAPÉ — sombra com intenção */
.storefront-header { box-shadow: 0 1px 0 rgba(15, 23, 42, 0.06), 0 6px 18px rgba(15, 23, 42, 0.05); }
.sp-header { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 26px -10px rgba(13, 27, 62, 0.35), 0 2px 4px rgba(13, 27, 62, 0.12); }

/* 5. Movimento e impressão */
@media (prefers-reduced-motion: reduce) {
    .storefront-product-card,
    .storefront-product-card::after,
    .btn-card-buy::after,
    .btn-primary::after { transition: none; }
    .storefront-product-card:hover { transform: none; }
}
@media print {
    .storefront-product-card::before,
    .storefront-product-card::after { display: none; }
    .storefront-product-card { box-shadow: none; }
}

/* 7. SISTEMA ÚNICO DE RELEVO — alinhamento final com a Dash Master (v9.348).
   Carrega por último para cobrir todas as rotas, inclusive login/checkout/conta.
   Mantém cores e estados semânticos; padroniza apenas relevo, raio e malha. */
:root {
    --sf-dash-light: rgba(255, 255, 255, 0.96);
    --sf-dash-dark: rgba(30, 58, 110, 0.50);
    --sf-dash-dark-soft: rgba(30, 58, 110, 0.28);
    /* v9.354 — poço DISCRETO: o campo afunda só o suficiente para receber a luz.
       Antes eram três sombras (branco -2px, escuro 3px/4px + fio): parecia um
       caco virado. Agora é uma linha de sombra interna no topo e um fio branco
       na base — profundidade de formulário, não de objeto esculpido. */
    --sf-dash-inset: inset 0 1px 2px rgba(13, 27, 62, 0.10), inset 0 -1px 0 rgba(255, 255, 255, 0.92);
    --sf-dash-inset-press: inset 0 2px 3px rgba(13, 27, 62, 0.40), inset 0 4px 10px rgba(13, 27, 62, 0.22), inset 0 -1px 0 rgba(255, 255, 255, 0.30);
}

/* Ações — hierarquia visual da referência: CTA principal elevado, controles
   neutros em superfície clara; o poço aparece só no estado pressionado. */
/* v9.354 — MALHA DE TEXTO DO BOTÃO: todo botão da vitrine centraliza ícone e
   rótulo no mesmo eixo e tem altura com piso. Sem isso o texto encosta na
   borda, o ícone desce meio pixel e o rótulo comprido quebra em duas linhas
   desalinhadas no celular. */
body.theme-storefront button,
body.theme-storefront .btn,
body.theme-storefront .acc-btn,
body.theme-storefront [role="button"],
body.theme-storefront .sf-af-submit,
body.theme-storefront .btn-card-buy,
body.theme-storefront .btn-storefront-buy,
body.theme-storefront .btn-sp-buy-now,
body.theme-storefront .storefront-search-btn,
body.theme-storefront .sp-inst-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 18px;
    border-radius: 10px;
    line-height: 1.2;
    text-align: center;
    vertical-align: middle;
    box-shadow: 0 2px 6px rgba(13, 27, 62, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.18); /* v9.365 — o brilho de 84% sai; fica no tom do CTA */
    transition: box-shadow 150ms ease, transform 150ms ease, filter 150ms ease;
}
/* Ícone dentro de botão não encolhe nem desalinha: é o elemento de largura
   fixa, com linha de altura 1 para casar com o texto ao lado. */
body.theme-storefront button [class*="bi-"],
body.theme-storefront .btn [class*="bi-"],
body.theme-storefront [role="button"] [class*="bi-"],
body.theme-storefront button svg,
body.theme-storefront .btn svg,
body.theme-storefront [role="button"] svg {
    flex: 0 0 auto;
    line-height: 1;
}
/* Botão de largura cheia (CTA de card, barra de compra) continua ocupando a
   linha inteira — a malha acima não pode encolher nenhum deles. */
body.theme-storefront .btn-card-buy,
body.theme-storefront .card-buy-row .btn-card-buy,
body.theme-storefront .sf-af-actions .sf-af-submit,
body.theme-storefront .sf-bar .btn-storefront-buy {
    width: 100%;
}
body.theme-storefront .btn-storefront-buy,
body.theme-storefront .btn-sp-buy-now,
body.theme-storefront .btn-card-buy,
body.theme-storefront .sf-af-submit {
    box-shadow: 0 2px 6px rgba(13, 27, 62, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.22); /* v9.362 — sem o halo azul embaixo */
}
body.theme-storefront .storefront-btn-outline,
body.theme-storefront .storefront-btn-outline-dark,
body.theme-storefront .btn-outline-primary,
body.theme-storefront .btn-outline-secondary {
    border: 1px solid rgba(0, 102, 255, 0.32);
    background: #fff;
    box-shadow: 0 2px 7px rgba(30, 58, 110, 0.10), inset 0 1px 0 #fff;
}
body.theme-storefront button:active,
body.theme-storefront .btn:active,
body.theme-storefront .acc-btn:active,
body.theme-storefront [role="button"]:active {
    box-shadow: var(--sf-dash-inset-press);
    transform: translateY(1px);
}

/* Campos de busca, login, checkout, CEP, perfil e endereço: field-in da Dash. */
body.theme-storefront input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
body.theme-storefront select,
body.theme-storefront textarea,
body.theme-storefront .form-control,
body.theme-storefront .form-select {
    border-radius: 10px;
    box-shadow: var(--sf-dash-inset);
}
body.theme-storefront input:focus,
body.theme-storefront select:focus,
body.theme-storefront textarea:focus {
    box-shadow: var(--sf-dash-inset), 0 0 0 3px rgba(0, 102, 255, 0.14);
}
body.theme-storefront input[type="checkbox"],
body.theme-storefront input[type="radio"] {
    box-shadow: var(--sf-dash-inset);
}

/* Selos e cápsulas: superfície clara com relevo LEVE e externo. O poço
   dentro de uma cápsula dava a impressão de texto espremido dentro de um
   anel escuro. Chip é etiqueta: não afunda. */
body.theme-storefront [class*="badge"],
body.theme-storefront [class*="pill"],
body.theme-storefront [class*="tag"],
body.theme-storefront .sp-inst-tag,
body.theme-storefront .sp-trust-item {
    border: 1px solid rgba(30, 58, 110, 0.12);
    box-shadow: 0 1px 3px rgba(30, 58, 110, 0.08);
}
/* Chip nunca estica nem encolhe: o texto define a largura e a altura tem piso. */
body.theme-storefront [class*="badge"],
body.theme-storefront [class*="pill"],
body.theme-storefront [class*="tag"] {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    min-height: 22px;
    padding: 2px 10px;
    line-height: 1.25;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.theme-storefront .sp-inst-tag {
    min-height: 24px;
    padding: 2px 9px;
    border-radius: 999px;
    background: #fff;
    color: #53617a;
    font-size: 11px;
}
body.theme-storefront .sp-inst-tag.is-sem {
    border-color: rgba(20, 150, 93, 0.20);
    background: #eafaf2;
    color: #087847;
}

/* Painéis de login/checkout/conta, cartões de descrição e parcelamento. */
body.theme-storefront .checkout-step-card,
body.theme-storefront .product-info-panel,
body.theme-storefront .sp-inst-box,
body.theme-storefront .sp-pdp-faq,
body.theme-storefront .sp-pdp-desc,
body.theme-storefront .sp-pdp-panel,
body.theme-storefront .sp-pdp-buybox,
body.theme-storefront .acc-card,
body.theme-storefront .acc-panel,
body.theme-storefront .account-card,
body.theme-storefront .account-panel {
    border-radius: 14px;
    box-shadow: var(--sf-elev-1);
}

/* Ícones: malha fixa, sem herdar tamanhos fracionários do contexto. */
.theme-storefront button [class*="bi-"],
.theme-storefront .btn [class*="bi-"],
.theme-storefront [role="button"] [class*="bi-"] {
    font-size: 15px;
    line-height: 1;
}
.theme-storefront .sp-footer-list [class*="bi-"],
.theme-storefront .sp-footer-bottom [class*="bi-"] { font-size: 14px; }
.theme-storefront .sp-tabbar [class*="bi-"] { font-size: 20px; }

/* Foco visível e acessibilidade preservados; preferência de movimento respeitada. */
.theme-storefront :focus-visible { outline: 2px solid rgba(0, 102, 255, 0.75); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
    .theme-storefront *, .theme-storefront *::before, .theme-storefront *::after { transition-duration: 0.01ms; animation-duration: 0.01ms; }
}

/* Menu lateral de categorias: painel elevado, itens e ícones afundados. */
body.theme-storefront .sf-menu-drawer,
body.theme-storefront .sf-drawer {
    box-shadow: var(--sf-elev-2);
}
body.theme-storefront .sf-menu-list a,
body.theme-storefront .sf-drawer-list a,
body.theme-storefront .account-nav a,
body.theme-storefront .acc-nav a {
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(30, 58, 110, 0.12);
}
body.theme-storefront .sf-drawer [class*="bi-"],
body.theme-storefront .account-nav [class*="bi-"],
body.theme-storefront .acc-nav [class*="bi-"] {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 9px;
    background: linear-gradient(145deg, #ffffff, #edf3fc);
    box-shadow: 0 2px 6px rgba(30, 58, 110, 0.14);
    font-size: 16px;
}
/* v9.375 — ícones premium da conta (SVG do sprite da casa): a MESMA ficha,
   com o padding que dá o respiro do traço vetorial. */
body.theme-storefront .acc-nav .acc-ico,
body.theme-storefront .account-nav .acc-ico {
    display: inline-block;
    box-sizing: border-box;
    width: 26px;
    height: 26px;
    padding: 5px;
    border-radius: 9px;
    background: linear-gradient(145deg, #ffffff, #edf3fc);
    box-shadow: 0 2px 6px rgba(30, 58, 110, 0.14);
    flex: none;
}
/* Superfícies e ícones próprios da área do cliente. */
body.theme-storefront .acc-coupon,
body.theme-storefront .acc-store,
body.theme-storefront .acc-alert {
    border-radius: 14px;
    box-shadow: var(--sf-elev-1);
}
body.theme-storefront .acc-card > i,
body.theme-storefront .acc-empty > i,
body.theme-storefront .acc-panel-head h2 > i,
body.theme-storefront .acc-track > i {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    color: #0866f5;
    background: #eef5ff;
    box-shadow: 0 1px 3px rgba(30, 58, 110, 0.10);
    font-size: 16px;
}
/* v9.354 — sem gravura: texto de link sobre fundo escuro não recebe
   text-shadow. Ele só embaça a letra e faz o rodapé parecer sujo. */
body.theme-storefront .sp-tab-link,
body.theme-storefront .sp-topbar-item a {
    text-shadow: none;
}

/* Footer: menu e selos seguem a malha; texto SEM gravura (a sombra de 1px
   da camada antiga deixava o rodapé com aspecto de carimbo gasto). */
body.theme-storefront .sp-footer-list a,
body.theme-storefront .sp-footer-list li,
body.theme-storefront .sp-footer-bottom,
body.theme-storefront .sp-footer-bottom a,
body.theme-storefront .sp-footer h3,
body.theme-storefront .sp-footer h4 {
    text-shadow: none;
}
/* v9.362 — LUZES FORA: o ícone do rodapé era um CÍRCULO BRANCO com sombra solta
   (a "luz" apontada pelo dono). Agora é um chip translúcido, sem sombra: integra
   ao fundo escuro em vez de flutuar sobre ele. Os selos seguem claros. */
body.theme-storefront .sp-footer-list i,
body.theme-storefront .sp-footer-list [class*="bi-"] {
    display: inline-grid;
    place-items: center;
    flex: none;
    min-width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #9fd0ff;
    box-shadow: none;
    text-shadow: none;
}
body.theme-storefront .sp-footer-seals [class*="bi-"] {
    display: inline-grid;
    place-items: center;
    flex: none;
    min-width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(145deg, #ffffff, #e8f0fc);
    color: #0866f5;
    box-shadow: none;
    text-shadow: none;
}
/* Linha do rodapé: ícone e texto no mesmo eixo, sem quebra nem espremer. */
body.theme-storefront .sp-footer-list li,
body.theme-storefront .sp-footer-list a {
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1.35;
}
body.theme-storefront .sp-footer-list a { min-height: 30px; }

/* Modais próprios da loja (auth/menu) são cards; diálogos Bootstrap como zoom
   não recebem a moldura externa para evitar card dentro de card. */
body.theme-storefront .sf-modal,
body.theme-storefront .sf-menu-drawer {
    border-radius: 16px;
    box-shadow: var(--sf-elev-2);
}
body.theme-storefront #zoomModal .modal-dialog,
body.theme-storefront #zoomModal .modal-content {
    width: fit-content;
    max-width: 92vw;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
body.theme-storefront #zoomModal .modal-zoom-img {
    display: block;
    max-width: 90vw;
    max-height: 85vh;
    margin-inline: auto;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    object-fit: contain;
}

/* ASSINATURA — By LongCat (a pedido do dono, Moisés). */

/* 6. NAVEGAÇÃO da vitrine — a aba ganha luz ao passar */
.sp-tab-link { position: relative; transition: color var(--sf-dur) var(--sf-ease-hd); }
.sp-tab-link::after {
    content: '';
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 4px;
    height: 2px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.85);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--sf-dur) var(--sf-ease-hd);
}
@media (hover: hover) and (pointer: fine) {
    .sp-tab-link:hover::after,
    .sp-tab.has-children:hover > .sp-tab-link::after { transform: scaleX(1); }
}

/* 7. RODAPÉ da vitrine — fio no topo, sem peso */
.sp-footer { border-top: 1px solid rgba(255, 255, 255, 0.10); box-shadow: 0 -2px 8px rgba(13, 27, 62, 0.10); }
.sp-footer-bottom { letter-spacing: 0.005em; }

@media (prefers-reduced-motion: reduce) {
    .sp-tab-link::after { transition: none; }
}

/* 8. AUTH MODAL — um único card limpo, tabs planas, sem duplicar a página base. */
body.theme-storefront .sf-auth-modal {
    width: min(640px, calc(100vw - 48px));
    max-height: min(88vh, 900px);
    overflow: auto;
    padding: clamp(24px, 5vw, 56px);
    border: 1px solid rgba(255, 255, 255, 0.88);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 18px 48px rgba(13, 27, 62, 0.22), 0 3px 10px rgba(13, 27, 62, 0.10);
}
body.theme-storefront .sf-auth-modal.is-wide {
    width: min(880px, calc(100vw - 48px));
}
body.theme-storefront .sf-auth-modal .sf-auth-body,
body.theme-storefront .sf-auth-modal .sf-auth-body .sf-af,
body.theme-storefront .sf-auth-modal .checkout-step-card {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
body.theme-storefront .sf-auth-modal .sf-auth-body .sf-af {
    display: block;
}
body.theme-storefront .sf-auth-modal .sf-auth-tabs {
    display: flex;
    justify-content: flex-start;
    gap: clamp(28px, 6vw, 72px);
    margin: 0 56px 40px 0;
    padding: 0;
    border: 0;
}
body.theme-storefront .sf-auth-modal .sf-auth-tabs button {
    min-height: 48px;
    padding: 8px 4px 12px;
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: #53617a;
    font-size: clamp(18px, 2vw, 24px);
    font-weight: 600;
}
body.theme-storefront .sf-auth-modal .sf-auth-tabs button.is-on {
    border-bottom-color: var(--sp-blue, #0066ff);
    background: transparent;
    box-shadow: none;
    color: var(--sp-blue, #0066ff);
}
body.theme-storefront .sf-auth-modal .sf-x.sf-modal-x {
    top: 24px;
    right: 24px;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(30, 58, 110, 0.10);
    border-radius: 14px;
    background: #f2f4f8;
    box-shadow: 0 2px 6px rgba(30, 58, 110, 0.10);
}
body.theme-storefront .sf-auth-modal .sf-af-title {
    margin: 0 0 8px;
    color: #101a2b;
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.12;
}
body.theme-storefront .sf-auth-modal .sf-af-sub {
    margin: 0 0 32px;
    color: #53617a;
    font-size: clamp(16px, 2vw, 22px);
}
body.theme-storefront .sf-auth-modal .sf-af-stack { margin-bottom: 22px; }
body.theme-storefront .sf-auth-modal .sf-af-stack label { margin-bottom: 8px; font-size: 16px; }
body.theme-storefront .sf-auth-modal .form-control,
body.theme-storefront .sf-auth-modal .form-select {
    min-height: 58px;
    padding: 14px 18px;
    border: 1px solid #d0d8e5;
    border-radius: 14px;
    background: #f7f9fc;
    box-shadow: inset 0 2px 5px rgba(13, 27, 62, 0.12), inset 0 -1px 0 rgba(255, 255, 255, 0.95);
    font-size: 17px;
}
body.theme-storefront .sf-auth-control {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 58px;
    padding: 0 16px;
    border: 1px solid #d0d8e5;
    border-radius: 14px;
    background: #f7f9fc;
    box-shadow: inset 0 2px 5px rgba(13, 27, 62, 0.12), inset 0 -1px 0 rgba(255, 255, 255, 0.95);
}
body.theme-storefront .sf-auth-control > .bi {
    flex: 0 0 24px;
    color: #64748b;
    font-size: 22px;
    text-align: center;
}
body.theme-storefront .sf-auth-control .form-control {
    min-width: 0;
    min-height: 54px;
    padding: 10px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-size: 18px;
}
body.theme-storefront .sf-auth-control .form-control:focus { box-shadow: none; outline: 0; }
body.theme-storefront .sf-auth-control .sf-auth-password-toggle {
    flex: 0 0 36px;
    width: 36px;
    min-height: 36px;
    padding: 0;
    border: 0;
    border-radius: 9px;
    background: transparent;
    box-shadow: none;
    color: #53617a;
    font-size: 20px;
}
body.theme-storefront .sf-auth-control:focus-within {
    border-color: rgba(0, 102, 255, 0.50);
    box-shadow: inset 0 2px 5px rgba(13, 27, 62, 0.12), 0 0 0 3px rgba(0, 102, 255, 0.10);
}
body.theme-storefront .sf-auth-modal .sf-af-submit {
    min-height: 62px;
    border-radius: 14px;
    background: linear-gradient(180deg, #1475ff, #0066ff);
    box-shadow: 0 2px 6px rgba(13, 27, 62, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.22); /* v9.362 — sem o halo azul embaixo */
    font-size: 20px;
}
body.theme-storefront .sf-auth-modal .storefront-btn-outline-dark {
    min-height: 56px;
    border: 1px solid rgba(0, 102, 255, 0.28);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(30, 58, 110, 0.10);
}
body.theme-storefront .sf-auth-modal .sf-af-switch { margin-top: 28px; font-size: 17px; }
@media (max-width: 640px) {
    body.theme-storefront .sf-auth-modal { width: calc(100vw - 24px); padding: 24px 20px 28px; border-radius: 18px; }
    body.theme-storefront .sf-auth-modal.is-wide { width: calc(100vw - 24px); }
    body.theme-storefront .sf-auth-modal .sf-auth-tabs { margin-bottom: 28px; }
    body.theme-storefront .sf-auth-modal .sf-x.sf-modal-x { top: 14px; right: 14px; width: 40px; height: 40px; }
}
@media (max-width: 420px) {
    body.theme-storefront .sf-auth-modal { padding: 20px 16px 24px; }
    body.theme-storefront .sf-auth-modal .sf-af-title { font-size: 28px; }
    body.theme-storefront .sf-auth-modal .sf-auth-tabs { gap: 24px; margin-bottom: 24px; }
    body.theme-storefront .sf-auth-modal .form-control { min-height: 50px; font-size: 16px; }
    body.theme-storefront .sf-auth-modal .sf-af-submit { min-height: 56px; font-size: 18px; }
}

/* Página de produto: conteúdo organizado em painéis/células minimalistas da Dash. */
body.theme-storefront .sp-pdp-tab-card,
body.theme-storefront .sp-rich,
body.theme-storefront .sf-rich {
    border-radius: 14px;
    background: #f8fafd;
    box-shadow: var(--sf-elev-1);
}
body.theme-storefront .sf-cards { gap: 12px; }
/* v9.456 — O BLOCO DA DESCRIÇÃO É SEÇÃO, NÃO CARD.
   O dono viu no celular uma PILHA: cada bloco ("Visão geral", "Destaques"…)
   era um card branco dentro do card da descrição — três camadas de moldura
   para o mesmo texto. Aqui o card sai: fio embaixo, respiro e título. A
   trava de forca do storefront-padrao.css foi colhida no mesmo passo
   (Lei 51) — o desenho agora é desta camada. */
body.theme-storefront .sf-desc-card,
body.theme-storefront .sp-pdp-tab-card .sf-rich > div {
    padding: 0;
    margin: 0 0 22px;
    border: 0;
    border-bottom: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

body.theme-storefront .sf-desc-card:last-child,
body.theme-storefront .sp-pdp-tab-card .sf-rich > div:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

body.theme-storefront .sf-desc-card h3 {
    color: #13233d;
    text-shadow: none;
    font-size: 16px;
    font-weight: 700;
}
body.theme-storefront .sf-desc-card .sf-emoji-ic {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    color: #0866f5;
    background: #eef5ff;
    box-shadow: 0 1px 3px rgba(30, 58, 110, 0.10);
}
body.theme-storefront .sp-pdp-tab-card { padding: 18px; }
body.theme-storefront .sp-pdp-feat {
    border: 1px solid rgba(30, 58, 110, 0.10);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 7px rgba(30, 58, 110, 0.08), inset 0 1px 0 #fff;
}
body.theme-storefront .sp-pdp-feat > i {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    color: #0866f5;
    background: #eef5ff;
    box-shadow: 0 1px 3px rgba(30, 58, 110, 0.10);
}
body.theme-storefront .sp-pdp-tabs .nav-link { box-shadow: none; background: transparent; }
body.theme-storefront .sp-pdp-tabs .nav-link.active { box-shadow: inset 0 -2px 0 var(--sp-blue, #0866f5); }
/* Categoria do card: cápsula dimensionada pelo texto, nunca esticada à largura toda. */
body.theme-storefront .storefront-product-card .sp-card-cat {
    display: inline-flex;
    align-self: flex-start;
    width: fit-content;
    max-width: 100%;
    min-height: 24px;
    align-items: center;
    box-sizing: border-box;
    padding: 4px 10px;
    border: 1px solid rgba(30, 58, 110, 0.12);
    border-radius: 999px;
    background: #f7f9fd;
    box-shadow: 0 1px 3px rgba(30, 58, 110, 0.08);
    color: #5b6b8a;
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 9. GAVETA DE CATEGORIAS — v9.362: fileira limpa. O item deixou de ser um
   "cartão" com sombra própria — era essa sombra, item a item, que enchia a
   gaveta de "luzinhas" na base de cada linha (queixa do dono). Agora é linha
   lisa, sem borda e sem sombra; o toque acende um fundo macio. */
body.theme-storefront .sf-menu-drawer {
    width: min(440px, 92vw);
    background: #f3f6fb;
    border-radius: 0 12px 12px 0;
    box-shadow: 8px 0 28px rgba(13, 27, 62, 0.18);
}
body.theme-storefront .sf-menu-head {
    min-height: 62px;
    padding: 8px 16px;
    background: #0866f5;
    border-radius: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: none;
}
body.theme-storefront .sf-menu-hi { gap: 10px; font-size: 18px; font-weight: 700; }
body.theme-storefront .sf-menu-head .sf-x {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    box-shadow: none;
}
body.theme-storefront .sf-menu-scroll { padding: 12px 16px 18px; }
body.theme-storefront .sf-menu-list {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}
body.theme-storefront .sf-menu-list a {
    display: flex;
    align-items: center;
    min-height: 46px;
    padding: 9px 14px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    box-shadow: none;
    color: #101a2b;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
}
body.theme-storefront .sf-menu-list a:hover,
body.theme-storefront .sf-menu-list a:focus-visible {
    background: rgba(13, 27, 62, 0.06);
    box-shadow: none;
}
body.theme-storefront .sf-menu-list a:active {
    background: rgba(13, 27, 62, 0.10);
}
body.theme-storefront .sf-menu-section-title {
    padding: 18px 6px 8px;
    color: #53617a;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
@media (max-width: 640px) {
    body.theme-storefront .sf-menu-drawer { width: min(400px, 92vw); border-radius: 0 14px 14px 0; }
    body.theme-storefront .sf-menu-head { min-height: 58px; padding: 8px 14px; }
    body.theme-storefront .sf-menu-scroll { padding: 10px 12px 16px; }
    body.theme-storefront .sf-menu-list { gap: 1px; }
    body.theme-storefront .sf-menu-list a { min-height: 44px; padding: 8px 12px; border-radius: 9px; }
}

/* ============================================================================
   10. ACABAMENTO v9.354 — ritmo, alinhamento e integridade no celular.

   Três pedidos que o dono repetiu nesta entrega:
   (1) "texto em botão e cápsula alinhado"  → eixo único, ícone com flex fixo;
   (2) "sem quebras, esticamentos, espremeção" → nada encolhe abaixo do piso,
       nada estica além do contêiner, toda linha tem min-width para quebrar
       no ponto certo em vez de espremer a palavra;
   (3) "informação clara, sem sobreposição"    → nada de conteúdo sobreposto
       a outro; cada bloco ocupa a própria faixa.
   ========================================================================== */

/* 10.1 — CARTÃO DE PRODUTO: ritmo vertical e tudo no seu lugar. */
body.theme-storefront .storefront-product-card.sp-card > * {
    flex: none;
}
body.theme-storefront .storefront-product-card .card-product-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    min-height: 2.7em;
    max-height: 2.7em;
    overflow: hidden;
    line-height: 1.35;
    overflow-wrap: break-word;
    hyphens: auto;
}
/* Preço, parcelamento, estoque e botão compram a mesma faixa na mesma ordem
   em todos os cards: sem card mais alto que o vizinho sem informação. */
body.theme-storefront .storefront-product-card .sp-card-price-row { margin: 4px 0 6px; }
body.theme-storefront .storefront-product-card .card-installments,
body.theme-storefront .storefront-product-card .sp-card-stars {
    display: flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    max-width: 100%;
    min-height: 24px;
    margin-bottom: 8px;
    padding: 3px 10px;
    border-radius: 999px;
    line-height: 1.25;
}
body.theme-storefront .storefront-product-card .card-installments [class*="bi-"],
body.theme-storefront .storefront-product-card .sp-card-stars [class*="bi-"] {
    flex: 0 0 auto;
    line-height: 1;
    font-size: 13px;
}
body.theme-storefront .storefront-product-card .sp-card-stars span { flex: 0 0 auto; }
/* Selo do card: cápsula única, com eixo próprio — não encosta na foto nem
   vira duas vezes o diâmetro do texto que carrega. */
body.theme-storefront .sp-card-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    max-width: calc(100% - 20px);
    padding: 4px 12px;
    border-radius: 999px;
    line-height: 1.15;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 4px 10px rgba(13, 27, 62, 0.22);
}

/* 10.2 — PROIBIDO ESTICAR/ESPREMER: piso de largura em todo texto longo. */
body.theme-storefront .sp-card .card-pix-price,
body.theme-storefront .card-installments,
body.theme-storefront .sp-card-cat,
body.theme-storefront .promo-timer,
body.theme-storefront .b2b-lock-link,
body.theme-storefront .sp-pdp-tabs .nav-link,
body.theme-storefront .sp-footer-list a,
body.theme-storefront .sp-footer-list li {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;
}
body.theme-storefront .promo-timer {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    max-width: 100%;
    min-height: 24px;
    padding: 3px 10px;
    border-radius: 999px;
    line-height: 1.25;
}

/* 10.3 — MOBILE: nada quebra, nada encolhe, tudo cabe na tela. */
@media (max-width: 575.98px) {
    /* Todo elemento flex da vitrine começa com min-width:0 — sem isso o
       conteúdo largo (e-mail, telefone, título) empurra a linha e corta
       a coluna em vez de quebrar o texto dentro dela. */
    body.theme-storefront .storefront-product-card,
    body.theme-storefront .storefront-product-card *,
    body.theme-storefront .sp-card-stars,
    body.theme-storefront .card-installments,
    body.theme-storefront .sp-footer-list li,
    body.theme-storefront .sp-footer-list a,
    body.theme-storefront .sf-menu-list a {
        min-width: 0;
    }
    /* Alvo de toque mínimo e rótulo que não quebra em três linhas. */
    body.theme-storefront button,
    body.theme-storefront .btn,
    body.theme-storefront .btn-card-buy,
    body.theme-storefront .btn-storefront-buy {
        min-height: 46px;
        padding: 10px 14px;
        font-size: 15px;
    }
    body.theme-storefront .sf-menu-list a {
        min-height: 52px;
        font-size: 15px;
        line-height: 1.3;
    }
    /* Título do card mantém DUAS linhas de altura fixa: a grade do celular
       fica com linhas retas, sem card esticado por causa de um nome longo. */
    body.theme-storefront .storefront-product-card .card-product-title {
        font-size: 13px;
        min-height: 2.55em;
        max-height: 2.55em;
    }
    body.theme-storefront .storefront-product-card .sp-card-cat { min-height: 22px; padding: 3px 9px; }
    body.theme-storefront .storefront-product-card .sp-card-price-row { margin: 3px 0 5px; }
}
/* Telas muito estreitas (320–359px): o texto longo encurta o padding antes de
   quebrar a palavra — o card continua com a mesma proporção. */
@media (max-width: 359.98px) {
    body.theme-storefront .storefront-product-card.sp-card { padding: 10px 10px 12px; }
    body.theme-storefront .sp-card-badge { padding: 3px 10px; font-size: 10px; }
    body.theme-storefront .storefront-product-card .card-installments,
    body.theme-storefront .storefront-product-card .sp-card-stars { padding: 3px 8px; font-size: 11px; }
    body.theme-storefront .storefront-product-card .sp-card-cat { padding: 2px 8px; }
    body.theme-storefront button,
    body.theme-storefront .btn,
    body.theme-storefront .btn-card-buy { padding: 10px 10px; font-size: 14px; }
    body.theme-storefront .sf-menu-scroll { padding: 10px 10px 14px; }
    body.theme-storefront .sf-menu-list a { padding: 8px 12px; }
}

/* 10.4 — SEM SOBREPOSIÇÃO: nada de conteúdo sobreposto a outro. */
body.theme-storefront .sp-card { position: relative; }
body.theme-storefront .sp-card > * { position: relative; z-index: 1; }
body.theme-storefront .sp-card-badge { z-index: 3; }
/* Faixas de dados da vitrine (barra de compra, topo, rodapé) não recebem
   sobreposição: cada uma tem sua própria linha no fluxo da página. */
body.theme-storefront .sf-bar,
body.theme-storefront .sp-tabbar,
body.theme-storefront .sp-footer { transform: none; }

/* ============================================================================
   11. CONTRASTE QUE SEGUE A PALETA (v9.355)

   Achado do Lighthouse (color-contrast): o lojista escolhe a cor da faixa no
   painel (Aparência) e o texto dela é branco por padrão. Com um fundo claro
   escolhido por ele, o texto saía com contraste de 2,8:1 — sumia.

   Aqui a cor do lojista NÃO é mexida. O que entra é a regra: cada faixa com
   fundo de painel carrega o gancho `.sf-peca-<peça>`, e o serviço de cores
   publica nela `--sf-on-peca` (branco ou escuro, conforme o contraste real) e
   `--sf-borda-peca` (o fio). O texto passa a herdar o tom garantido.

   O padrão de cada faixa continua no seu lugar: quando o lojista não escolheu
   cor nenhuma, a variável não existe e vale o valor da folha — o acabamento
   premium não muda por causa desta regra.
   ========================================================================== */
body.theme-storefront .sf-peca-barra_menu,
body.theme-storefront .sf-peca-rodape,
body.theme-storefront .sf-peca-faixa_pix,
body.theme-storefront .sf-peca-selo_confianca,
body.theme-storefront .sf-peca-newsletter,
body.theme-storefront .sf-peca-breadcrumb {
    border-bottom: 1px solid var(--sf-borda-peca, transparent);
}
/* Texto herda o tom garantido; o apoio fica no mesmo tom com leve modernize,
   o que preserva a hierarquia sem inventar cor fora da paleta.
   v9.367 — estas regras nasceram mirando `.sp-peca-*`, mas o renderizador
   (CoresVitrine) e as views publicam `.sf-peca-*`: nenhuma valia, e o apoio
   da newsletter ficava no cinza padrão (2,8:1 na loja, medido ao vivo). Com o
   prefixo certo o tom vem do `--sf-on-peca` que o próprio CoresVitrine calcula,
   e o apoio sobe de .82 para .9 para alcançar AA sobre a faixa escolhida pelo
   lojista. O selo de confiança fica de fora de propósito: os chips dele são
   banners com cor própria (claros e escuros misturados) e um tom único
   achataria o desenho — o mesmo vale para o fio do botão da faixa, que usava
   o token de borda da faixa (outro papel). */
body.theme-storefront .sf-peca-newsletter .sp-news-title,
body.theme-storefront .sf-peca-newsletter .sp-newsletter-title { color: var(--sf-on-peca, #fff); }
body.theme-storefront .sf-peca-newsletter .sp-news-sub,
body.theme-storefront .sf-peca-newsletter .newsletter-sub { color: var(--sf-on-peca, #aebbdd); opacity: .9; }
body.theme-storefront .sf-peca-faixa_pix .storefront-hero-eyebrow { color: var(--sf-on-peca, #fff); opacity: .92; }
body.theme-storefront .sf-peca-faixa_pix h2 { color: var(--sf-on-peca, #fff); }
/* Ícones herdam o tom — nada de azul fixo da marca sobre fundo escolhido pelo
   lojista (era o que destoava). */
body.theme-storefront .sf-peca-newsletter [class*="bi-"],
body.theme-storefront .sf-peca-faixa_pix [class*="bi-"] {
    color: inherit;
    opacity: .9;
}

/* ============================================================================
12. MENU DO RODAPÉ — barra inferior com o botão central (v9.356 · polida na v9.361)

Desenho pedido pelo dono: barra escura (azul-noite), fio neon azul e o botão de
categorias subindo no meio, sobre um domo macio. Tudo vetorial (SVG) — nada de
imagem —, então fica nítido em qualquer tela (o "HD" do pedido) e nada estica nem
borra.

As peças:
  .sf-tab-tinta   a superfície escura e o fio neon no topo.
                  v9.361: a barra é CONTÍNUA — o furo (máscara) que mostrava a
                  página em volta do botão foi tirado, porque aparecia como risco
                  cinza por baixo da bola. E o fio virou uma FAIXA que se dissolve
                  antes de chegar perto do sanduíche.
  .sf-tab-curva   SVG de 86x46 ancorado no topo: um DOMO macio da cor da barra
                  que sobe da borda até o botão. v9.361: sem furo e sem fio — os
                  contornos são a própria barra, sem linha nenhuma em volta.
  .sf-tab-fab     o botão central (o "sanduíche"), sobre a tinta, sem aro.
                  É absoluto; a linha do meio da barra cai exatamente nele porque
                  os quatro atalhos dividem a largura em partes iguais.

Tom da barra e fio NEON AZUL são fixos: é o acabamento único da vitrine, como o
resto do HD. (Antes a barra seguia as cores de "Barra inferior" do painel — que
nesta loja estavam branco + azul-marinho, ou seja, o oposto do pedido.)

v9.361 — TOM MAIS ESCURO (pedido do dono): a superfície virou azul-noite e os
rótulos um branco-azulado. O contraste MEDIDO dos atalhos subiu de 8,7:1 para
12,7:1; o atalho ativo passou a usar o próprio neon (7,0:1, contra 3,9:1 do
misto antigo). O sanduíche parou de parecer afundado e abriu folga dos vizinhos no
celular (no desktop cada atalho tem 265px: lá já sobra espaço).
Acabamento fino: sem halo neon, sem furo e sem aro — nada de linha passando em
volta nem por baixo da bola.
============================================================================ */
body.theme-storefront .sp-tabbar {
    --sf-neon: #1fb6ff;
    --sf-bar-bg: #16213a;           /* v9.361: azul-noite (era cinza #e9edf4) */
    --sf-bar-ink: #dbe6f7;          /* v9.361: 12,7:1 sobre o azul-noite (era #33415c, 8,7:1) */
    --sf-bar-ativo: var(--sf-neon); /* v9.361: 7,0:1 sobre o azul-noite (o misto antigo dava 3,9:1) */
    --sf-vizinho: 26px;             /* v9.361: folga dos atalhos ao lado do sanduíche (celular) */
    --sf-fab: 58px;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1029;
    display: flex;
    align-items: center;
    min-height: 60px;
    padding: 6px 0 calc(6px + env(safe-area-inset-bottom, 0px));
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
}
/* A tinta: é ela que tem a cor e o fio. */
body.theme-storefront .sf-tab-tinta {
    position: absolute;
    inset: 0;
    z-index: 0;
    /* v9.361 — o fio neon é uma FAIXA de 2px que se dissolve antes de chegar perto
       do sanduíche. Antes era border-top reto e terminava colado na bola, o que
       parecia uma linha atravessando o meio dela. */
    border-top: 0;
    background-color: var(--sf-bar-bg);
    background-image: linear-gradient(90deg,
        var(--sf-neon) 0,
        var(--sf-neon) calc(50% - 68px),
        transparent calc(50% - 44px),
        transparent calc(50% + 44px),
        var(--sf-neon) calc(50% + 68px),
        var(--sf-neon) 100%);
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 100% 2px;
    /* Canto RETO: a barra encosta nas laterais da tela e preenche a linha. */
    border-radius: 0;
    /* v9.361: luz de cima sutil (o branco .85 virava risco). Sem brilho neon e sem
       FURO: o furo mostrava a página em cinza por baixo da bola (queixa do dono) e
       o brilho contornava o botão — os dois pareciam falha de acabamento. */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .12),
        0 -10px 26px rgba(9, 16, 34, .30);
    pointer-events: none;
}
/* O domo que sobe da borda até o botão (macio, da cor da barra). */
body.theme-storefront .sf-tab-curva {
    position: absolute;
    left: 50%;
    bottom: calc(100% - 2px);
    transform: translateX(-50%);
    z-index: 1;
    width: 86px; height: 46px;
    pointer-events: none;
    filter: drop-shadow(0 -6px 10px rgba(9, 16, 34, .18));
}
body.theme-storefront .sf-tab-curva-fundo { fill: var(--sf-bar-bg); }
/* O botão central. */
body.theme-storefront .sp-tabbar .sf-tab-fab {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: var(--sf-fab);
    height: var(--sf-fab);
    min-height: 0;
    margin: 0;
    padding: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    /* v9.361 — o sanduíche parecia AFUNDADO: era um disco branco dentro do furo,
       sobre barra clara. Agora é o azul da vitrine com o ícone branco (4,5:1 no
       topo e 7,7:1 na base do degradê) e sombra para baixo: lê como botão ACIMA
       da barra, não dentro dela.
       Sem aro e sem halo — pedido do dono: o aro claro e o brilho viravam risco
       cinza por baixo da bola. O contorno da bola é ela mesma contra o azul-noite. */
    background: linear-gradient(180deg, #2a6bff 0%, #1a45c8 100%);
    border: 0;
    color: #fff;
    box-shadow:
        0 8px 18px rgba(9, 16, 34, .38),
        inset 0 1px 0 rgba(255, 255, 255, .32);
    cursor: pointer;
}
body.theme-storefront .sp-tabbar .sf-tab-fab [class*="bi-"] { font-size: 24px; line-height: 1; }
/* Os quatro atalhos. */
body.theme-storefront .sp-tabbar .sf-tab-item {
    position: relative;
    z-index: 1;
    flex: 1 1 0;
    min-width: 0;
    min-height: 46px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 4px 2px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    box-shadow: none;
    color: var(--sf-bar-ink);
    font-family: var(--sp-font);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
body.theme-storefront .sp-tabbar .sf-tab-item [class*="bi-"] { font-size: 21px; line-height: 1; }
body.theme-storefront .sp-tabbar .sf-tab-item.is-active,
body.theme-storefront .sp-tabbar .sf-tab-item:hover { color: var(--sf-bar-ativo); }
/* Teclado: o foco precisa aparecer. */
body.theme-storefront .sp-tabbar .sf-tab-item:focus-visible,
body.theme-storefront .sp-tabbar .sf-tab-fab:focus-visible {
    outline: 2px solid var(--sf-bar-ativo);
    outline-offset: 2px;
}
/* v9.361 — no CELULAR o sanduíche e os vizinhos ficavam juntos demais (queixa do
   dono). Os dois atalhos ao lado dele ganham folga do lado de dentro, o que
   empurra ícone e rótulo para fora sem mexer no botão; o conteúdo continua
   centrado no que sobra (o padding é de um lado só), então nada entorta. */
body.theme-storefront .sp-tabbar .sf-tab-vizinho-esq { padding-right: var(--sf-vizinho); }
body.theme-storefront .sp-tabbar .sf-tab-vizinho-dir { padding-left: var(--sf-vizinho); }
/* Desktop: a barra é a navegação principal — ícone e texto na mesma linha. */
@media (min-width: 992px) {
    body.theme-storefront .sp-tabbar { min-height: 56px; }
    body.theme-storefront .sp-tabbar .sf-tab-item {
        flex-direction: row;
        gap: 8px;
        min-height: 42px;
        font-size: 13px;
    }
    body.theme-storefront .sp-tabbar .sf-tab-item [class*="bi-"] { font-size: 18px; }
    /* v9.361: no desktop o espaço já sobra (atalhos de 265px) — a folga do celular
       volta ao padding normal para não deslocar nada onde está aprovado. */
    body.theme-storefront .sp-tabbar .sf-tab-vizinho-esq,
    body.theme-storefront .sp-tabbar .sf-tab-vizinho-dir { padding: 4px 2px; }
    /* O cometa sai da barra e passa a correr sobre a tinta: assim o recorte
       corta o rastro junto, em vez de riscar por cima dele. */
    body.theme-storefront .sp-tabbar::before,
    body.theme-storefront .sp-tabbar::after { content: none; }
    body.theme-storefront .sf-tab-tinta::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        padding: 2px;
        background: conic-gradient(from var(--sp-comet-angle),
            transparent 0deg,
            transparent 286deg,
            color-mix(in srgb, var(--sf-neon) 8%, transparent) 306deg,
            color-mix(in srgb, var(--sf-neon) 45%, transparent) 330deg,
            color-mix(in srgb, var(--sf-neon) 90%, transparent) 348deg,
            color-mix(in srgb, var(--sf-neon) 55%, #fff) 356deg,
            #ffffff 359deg,
            transparent 360deg);
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
                mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
                mask-composite: exclude;
        pointer-events: none;
        filter: drop-shadow(0 0 5px color-mix(in srgb, var(--sf-neon) 90%, transparent)) drop-shadow(0 0 14px color-mix(in srgb, var(--sf-neon) 55%, transparent));
        animation: sp-comet-run 3.6s linear infinite;
    }
}

/* Tela estreita (320–359px): o botão encolhe junto para não encostar nos atalhos. */
@media (max-width: 359.98px) {
    /* v9.361: em tela de 320px o botão e a folga encolhem juntos para o rótulo caber. */
    body.theme-storefront .sp-tabbar { --sf-fab: 52px; --sf-vizinho: 18px; }
    body.theme-storefront .sp-tabbar .sf-tab-item { font-size: 10px; }
    body.theme-storefront .sp-tabbar .sf-tab-item [class*="bi-"] { font-size: 19px; }
}

/* ============================================================================
   ACABAMENTO v9.362 — A LUZ QUE VAZAVA (pente fino do dono).

   "Tem várias luzes por baixo dos cards, menus, que estão passando dos limites
   e outra que nem deveria estar onde está." As fontes, uma a uma:
   1. a MALHA DA BUSCA dava min-height 44px na lupa dentro de um campo de
      44–48px: a lupa saía 5px do quadro no celular (1px no desktop);
   2. a receita neumórfica dos cards → a luz BRANCA vazava das bordas (corrigida
      na origem, nos tokens --sf-elev-* e --vf-raise-*);
   3. o item da gaveta era um "cartão" com sombra própria, item a item;
   4. os CÍRCULOS BRANCOS com sombra solta (ícones do rodapé e dos itens);
   5. o halo AZUL embaixo de todo botão;
   6. e a área do cliente: o campo do cadastro era o cru do Bootstrap ao lado do
      campo caprichado do login — duas gramáticas na mesma tela.
   ========================================================================== */

/* 1. A LUPA DENTRO DO CAMPO — geometria exata, sem estourar o quadro. */
body.theme-storefront .sp-search .storefront-search-btn {
    height: auto;
    min-height: 0;
    padding: 0;
    top: 5px;
    right: 5px;
    bottom: 5px;
    width: 48px;
    border-radius: 9px;
    box-shadow: none;
}
@media (min-width: 992px) {
    body.theme-storefront .sp-search .storefront-search-btn {
        width: 52px;
        border-radius: 10px;
    }
}

/* 6. A ÁREA DO CLIENTE (cadastro): o mesmo poço claro do login — mesma altura,
   mesmo raio, mesma sombra interna. Antes o login usava .sf-auth-control (campo
   com ícone, 58px, fundo claro) e o cadastro ficava com o campo cru: duas
   gramáticas na mesma tela. */
body.theme-storefront .sf-af-row .form-control,
body.theme-storefront .sf-af-row .form-select {
    height: 58px;
    padding: 0 16px;
    font-size: 16px;
    color: #0d1b3e;
    border: 1px solid #d0d8e5;
    border-radius: 14px;
    background: #f7f9fc;
    box-shadow: inset 0 2px 5px rgba(13, 27, 62, 0.12), inset 0 -1px 0 rgba(255, 255, 255, 0.95);
}
body.theme-storefront .sf-af-row .form-select { padding-right: 40px; }
body.theme-storefront .sf-af-row .form-control:focus,
body.theme-storefront .sf-af-row .form-select:focus {
    border-color: #93b4ff;
    background: #fff;
    box-shadow: inset 0 1px 2px rgba(13, 27, 62, 0.06), 0 0 0 4px rgba(0, 102, 255, 0.12);
}

/* ============================================================================
ACABAMENTO v9.363 — o pente fino das rotas

Nasceu da varredura rota a rota (bancada em 8090 + shop real). Seis achados:

  1. "Carregar mais produtos" era o ÚNICO botão laranja (#f97316) do site —
     herança do tema antigo num site azul-noite. Vira pílula clara da casa.
  2. Os chips de parcelamento eram 66px para 84px de texto: o preço ao lado
     os espremia e o texto cortava ("SEM JURO", "com juro"). Chip é etiqueta:
     nunca cede nem corta — quando não cabe, desce de linha inteiro.
  3. A foto da página do produto parava no topo e deixava ~860px de vazio ao
     lado do painel de compra (que segue até o frete). Em >=992px a galeria
     acompanha a leitura: o vazio vira vitrine.
  4. A descrição da PDP corria 1044px numa linha (~110 caracteres). Medida de
     leitura premium: 76ch, centralizada no cartão.
  5. O avião decorativo da faixa de novidades reaparecia no CELULAR: no padrão,
     o curinga de ícones vence o `display: none` do avião (mesma
     especificidade, declarado depois). Aqui a regra fecha com peso maior.
  6. "Calcular opções" era âmbar (#b45309) — última cor solta fora da paleta;
     passou a var(--sp-blue) no próprio padrão (4,83:1 no branco, AA).
============================================================================ */

body.theme-storefront .btn-load-more-full {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: fit-content;
    max-width: 100%;
    margin: 6px auto 26px;
    padding: 11px 26px;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    background: #fff;
    color: #101a2b;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: var(--sf-elev-1);
    transition: background var(--sf-dur) var(--sf-ease-hd),
        color var(--sf-dur) var(--sf-ease-hd),
        border-color var(--sf-dur) var(--sf-ease-hd);
}
body.theme-storefront .btn-load-more-full:hover,
body.theme-storefront .btn-load-more-full:focus-visible {
    background: #0866f5;
    border-color: #0866f5;
    color: #fff;
}

body.theme-storefront .sp-inst-grid { gap: 6px; }
body.theme-storefront .sp-inst-item { flex-wrap: wrap; min-width: 0; column-gap: 6px; padding: 6px 10px; }
body.theme-storefront .sp-inst-item .sp-inst-x { font-size: 13px; }
body.theme-storefront .sp-inst-item .sp-inst-tag {
    flex: 0 0 auto;
    margin-left: auto;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
}

@media (min-width: 992px) {
    body.theme-storefront .gallery-container { position: sticky; top: 16px; }
    body.theme-storefront .sp-pdp-tab-card .sf-rich {
        max-width: 76ch;
        margin-left: auto;
        margin-right: auto;
    }
}

body.theme-storefront .sp-news-plane { display: none; }
@media (min-width: 992px) {
    body.theme-storefront .sp-news-plane { display: block; }
}

/* ============================================================================
ACABAMENTO v9.364 — medida de leitura na categoria e as páginas de erro

  1. A descrição da categoria e o "Guia de compra" corriam a largura toda
     (~1050px, ~110 caracteres por linha). Mesma régua de livro da v9.363
     para a PDP: 76ch em >=992px. No celular nada muda (a tela já é estreita).
  2. A página 404 (e 500/manutenção, mesmo componente .empty-state) tinha
     "Voltar para a loja" como LINK cru: o `.btn-primary` do template antigo
     não existe nas folhas da vitrine. Ganha o botão-chefe da casa.
============================================================================ */

@media (min-width: 992px) {
    body.theme-storefront .category-title-banner .sf-rich,
    body.theme-storefront .sf-buying-guide .sf-rich { max-width: 76ch; }
}

body.theme-storefront .empty-state { text-align: center; }
body.theme-storefront .empty-state h1 { font-weight: 800; color: #101a2b; letter-spacing: -0.02em; }
body.theme-storefront .empty-state h3 { color: #101a2b; font-weight: 700; }
body.theme-storefront .empty-state p { color: #53617a; }
body.theme-storefront .empty-state .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 6px;
    padding: 12px 26px;
    border: 0;
    border-radius: 999px;
    background: #0866f5;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: var(--sf-elev-1);
    transition: background var(--sf-dur) var(--sf-ease-hd),
        color var(--sf-dur) var(--sf-ease-hd);
}
body.theme-storefront .empty-state .btn-primary:hover,
body.theme-storefront .empty-state .btn-primary:focus-visible {
    background: #064fc0;
    color: #fff;
}

/* ============================================================================
ACABAMENTO v9.365 — a área da conta entra na régua da casa

  1. O menu da conta (Resumo, Meus pedidos, ..., Sair) ainda trazia o
     "cartãozinho" da malha antiga: cada item com `0 2px 6px` e o botão Sair
     com o cinza padrão do navegador. A gaveta de categorias ficou lisa na
     v9.362; o menu da conta é o mesmo componente — linha lisa, hover e ativo
     suaves; a luz fica no painel, uma só.
  2. Os campos de formulário da conta (e do checkout) nasciam com 38px do
     template, contra 46–48px da vitrine. Piso de 46px: mesma régua de campo
     em toda a loja — o login (58px, regra mais específica) e a busca (48px)
     não mudam.
  (A ficha do ícone dos menus continua elevada por decisão travada em teste:
   não é luz de item — é a casa do ícone.)
============================================================================ */

body.theme-storefront .account-nav a,
body.theme-storefront .acc-nav a {
    border-radius: 10px;
    background: transparent;
    box-shadow: none;
}
body.theme-storefront .account-nav a:hover,
body.theme-storefront .account-nav a:focus-visible,
body.theme-storefront .acc-nav a:hover,
body.theme-storefront .acc-nav a:focus-visible {
    background: rgba(13, 27, 62, 0.06);
    box-shadow: none;
}
body.theme-storefront .account-nav a.active,
body.theme-storefront .acc-nav a.active {
    background: rgba(8, 102, 245, 0.08);
    box-shadow: none;
}
body.theme-storefront .account-nav a.active:hover,
body.theme-storefront .account-nav a.active:focus-visible,
body.theme-storefront .acc-nav a.active:hover,
body.theme-storefront .acc-nav a.active:focus-visible {
    background: rgba(8, 102, 245, 0.12);
}
body.theme-storefront .account-nav-logout {
    padding: 10px 12px;
    border: 0;
    background: transparent;
    box-shadow: none;
}
body.theme-storefront .account-nav-logout:hover,
body.theme-storefront .account-nav-logout:focus-visible {
    background: rgba(239, 68, 68, 0.08);
    box-shadow: none;
}
body.theme-storefront input.form-control,
body.theme-storefront select.form-control,
body.theme-storefront select.form-select,
body.theme-storefront textarea.form-control {
    min-height: 46px;
    padding: 11px 14px;
}

/* ============================================================================
ACABAMENTO v9.366 — botão só de ícone volta ao desenho da peça

  A malha v9.354 dá piso de 44px e padding 10/18 a TODO `button` (para o
  texto nunca encostar na borda). Os controles que o desenho fez quadrados
  e visíveis — fechar (36), lixeira (32), ações do carrinho (36), setas do
  carrossel (36) e o toggle (30) — apareciam esticados (38×44), com a
  cápsula oval e a linha torta. Aqui cada um volta ao próprio desenho;
  a malha continua valendo para os botões de texto.
  (Favorito, miniaturas e o +/- do carrinho seguem como estão: a caixa
  deles é invisível e o alvo grande ajuda no toque.)
============================================================================ */

body.theme-storefront .sf-x,
body.theme-storefront .sf-act,
body.theme-storefront .sf-trash,
body.theme-storefront .sf-carousel-arrow,
body.theme-storefront .sf-carousel-toggle,
body.theme-storefront .sf-actions button {
    min-height: 0;
    padding: 0;
}

/* ============================================================================
ACABAMENTO v9.367 — o azul de marca em texto sobe ao tom legível

  #0284c7 sobre branco mede 4,1:1 (abaixo de AA) e era usado em TEXTO: nome
  da marca na PDP, hovers de título/ajuda e o fundo do hover do "Calcular".
  Sobe para #0369a1 (~6:1), a mesma família de azul. Bordas, sombras e selos
  com fundo próprio não entram (esses ficam como estão).
============================================================================ */

body.theme-storefront .product-brand { color: #0369a1; }
body.theme-storefront .card-product-title:hover { color: #0369a1; }
body.theme-storefront .shipping-help-link:hover { color: #0369a1; }
body.theme-storefront .shipping-btn:hover { background: #0369a1; }

/* ============================================================================
ACABAMENTO v9.370 — o chat não cobre o menu nem o cupom

  Na área da conta o menu fica à esquerda e o widget do chat (configurado à
  esquerda pelo lojista) subia o balão do atendente em cima da navegação
  (Dados, Endereços, Sair — medido ao vivo: popup em x=0 sobre o menu em
  x=80..320). E no carrinho o balão cobria o cupom de desconto. Aqui o widget
  se espelha para a direita SÓ nas páginas com menu de conta, carrinho ou
  checkout (#coupon-input / .checkout-step-card): o balão e a janela ficam
  no canto oposto ao conteúdo transacional. O resto da loja não muda.
============================================================================ */

body.theme-storefront:has(.acc-nav) #mpc-root.mpc--left,
body.theme-storefront:has(#coupon-input) #mpc-root.mpc--left,
body.theme-storefront:has(.checkout-step-card) #mpc-root.mpc--left { left: auto; right: 0; }
body.theme-storefront:has(.acc-nav) #mpc-root.mpc--left .mpc-pop,
body.theme-storefront:has(#coupon-input) #mpc-root.mpc--left .mpc-pop,
body.theme-storefront:has(.checkout-step-card) #mpc-root.mpc--left .mpc-pop { left: auto; right: 0; }
body.theme-storefront:has(.acc-nav) #mpc-root.mpc--left .mpc-pop::after,
body.theme-storefront:has(#coupon-input) #mpc-root.mpc--left .mpc-pop::after,
body.theme-storefront:has(.checkout-step-card) #mpc-root.mpc--left .mpc-pop::after { left: auto; right: 22px; }
body.theme-storefront:has(.acc-nav) #mpc-root.mpc--left .mpc-badge,
body.theme-storefront:has(#coupon-input) #mpc-root.mpc--left .mpc-badge,
body.theme-storefront:has(.checkout-step-card) #mpc-root.mpc--left .mpc-badge { left: -6px; right: auto; }
body.theme-storefront:has(.acc-nav) #mpc-root.mpc--left .mpc-win,
body.theme-storefront:has(#coupon-input) #mpc-root.mpc--left .mpc-win,
body.theme-storefront:has(.checkout-step-card) #mpc-root.mpc--left .mpc-win { left: auto; right: 0; }

/* v9.371 — e o balão de PROVA SOCIAL (que nasce à direita) troca de canto nas
   páginas transacionais: no checkout ele cobria o "Finalizar Compra Segura" /
   "Voltar para o carrinho" (medido: botão em y 923..1004, balão em 894..1000) e
   no carrinho cobria o resumo. Agora: chat à direita, prova social à esquerda. */
body.theme-storefront:has(#coupon-input) .sp-gatilho-balao,
body.theme-storefront:has(.checkout-step-card) .sp-gatilho-balao {
    right: auto;
    left: 18px;
}

/* ============================================================================
ACABAMENTO v9.372 — bandeiras ESTAMPADAS, sem cápsula

  As logos reais (visa/mastercard/elo/amex/hipercard/pix em
  /assets/brands/cartoes) não devem morar dentro de cápsulas: nem a malha de
  selos do HD (que dava pill de raio 999 a todo [class*="badge"]) nem o anel
  das flags do cartão. Aqui o selo vira só a logo, estampada no card.
============================================================================ */

body.theme-storefront .payment-badge {
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}
/* v9.373 — o CONTAINER também estava na malha [class*="badge"]: uma cápsula
   pill (raio 999 + borda + sombra) envolvendo TODAS as bandeiras. O card é
   puro: aqui o container perde qualquer cápsula. */
body.theme-storefront .payment-badges {
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}
body.theme-storefront .payment-badge img {
    height: 20px;
    width: auto;
    display: block;
}

/* v9.372 — card "Compra 100% segura" conforme a referência do dono: fundo
   azul-claro, escudo em círculo branco, título forte e bandeiras ESTAMPADAS
   com fios finos entre elas (sem cápsula). Vive na camada de acabamento. */
body.theme-storefront .sp-safe-box { display: flex; gap: 20px; align-items: flex-start; margin-top: 14px; padding: 24px 26px; border: 1px solid #dbe8fa; border-radius: 18px; background: #f2f7fe; }
body.theme-storefront .sp-safe-shield { flex: none; width: 80px; height: 80px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 10px 24px rgba(13, 27, 62, .09); }
body.theme-storefront .sp-safe-shield svg { width: 46px; height: 46px; }
body.theme-storefront .sp-safe-box b { display: block; font-size: 22px; font-weight: 800; letter-spacing: -.015em; color: #16265c; }
body.theme-storefront .sp-safe-box small { display: block; margin-top: 4px; color: #5b6b8a; font-size: 14.5px; line-height: 1.55; max-width: 64ch; }
body.theme-storefront .sp-safe-flags { margin-top: 18px; }
body.theme-storefront .sp-safe-flags .payment-badges { display: flex; flex-wrap: nowrap; align-items: center; gap: 12px; }
body.theme-storefront .sp-safe-flags .payment-badge { display: inline-flex; align-items: center; gap: 5px; }
body.theme-storefront .sp-safe-flags .payment-badge img { height: 15px; }
body.theme-storefront .sp-safe-flags .payment-badge + .payment-badge { border-left: 0; margin-left: 0; padding-left: 0; }
@media (max-width: 575.98px) {
    body.theme-storefront .sp-safe-flags .payment-badges { gap: 5px; }
    body.theme-storefront .sp-safe-flags .payment-badge img { height: 13px; }
}
@media (max-width: 359.98px) {
    body.theme-storefront .sp-safe-flags .payment-badges { gap: 4px; }
    body.theme-storefront .sp-safe-flags .payment-badge img { height: 11px; }
}
body.theme-storefront .sp-safe-flags .payment-badge span { color: #5b6b8a; font-size: 12.5px; font-weight: 600; }

/* v9.392 — FORMAS DE PAGAMENTO NO RODAPÉ: faixa única, logos SVG menores,
   diretamente no fundo escuro (SEM card). A coluna antiga (231px) não cabia
   as seis logos em uma linha com tamanho legível; a faixa ocupa a largura do
   rodapé e o topo fica com as três colunas de conteúdo. */
@media (min-width: 992px) {
    body.theme-storefront .sp-footer-grid { grid-template-columns: 1.35fr 1fr 1.15fr; }
}
body.theme-storefront .sp-footer-pay-col {
    grid-column: 1 / -1;
    margin-top: 2px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, .10);
}
body.theme-storefront .sp-footer-pay-col h3 { margin: 0 0 12px; }
body.theme-storefront .sp-footer-pay .sp-footer-flags-li {
    display: block;
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
}
body.theme-storefront .sp-footer-pay .payment-badges.is-footer {
    display: flex;
    flex-wrap: nowrap;
    gap: 14px;
    align-items: center;
    width: 100%;
}
body.theme-storefront .sp-footer-pay .payment-badges.is-footer .payment-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
}
body.theme-storefront .sp-footer-pay .payment-badges.is-footer .payment-badge + .payment-badge {
    border-left: 0;
    margin-left: 0;
    padding-left: 0;
}
body.theme-storefront .sp-footer-pay .payment-badges.is-footer img {
    height: 20px;
    width: auto;
    display: block;
}
@media (max-width: 575.98px) {
    body.theme-storefront .sp-footer-pay .payment-badges.is-footer { gap: 6px; }
    body.theme-storefront .sp-footer-pay .payment-badges.is-footer img { height: 15px; }
}
@media (max-width: 359.98px) {
    body.theme-storefront .sp-footer-pay .payment-badges.is-footer { gap: 5px; }
    body.theme-storefront .sp-footer-pay .payment-badges.is-footer img { height: 13px; }
}

/* v9.388 — o contador do carrinho é DESENHADO pelo CSS (content), não texto no
   DOM: assim ele não entra no "texto visível" (o label-content-name-mismatch do
   Lighthouse) e continua anunciado pelo aria-label do link ("— N itens"). */body.theme-storefront .cart-badge-count::after { content: attr(data-count); }

/* v9.383 — achados da auditoria mobile: o "Sair" da conta media 3,76:1
   (abaixo de AA — o vermelho um passo mais escuro resolve) e o botão fantasma
   do pagamento tinha o texto 19px fora do centro. */
body.theme-storefront .account-nav-logout { color: #dc2626; }
body.theme-storefront .sf-pay-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* v9.382 — o botão do drawer do carrinho ("Finalizar compra"/"Ver carrinho
   completo") perdia o inline-flex para uma regra genérica: computava block com
   padding 7px e o texto caía à esquerda (dx 79px). Aqui a geometria é garantida
   na camada final, independente de quem vence. */
body.theme-storefront .sf-drawer .sf-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 20px;
    height: 46px;
}

/* v9.382 — stepper do drawer do carrinho fora da malha: os botões 30×32 eram
   esticados a 44px e o "+" cortava. Mesma família do v9.366. */
body.theme-storefront .sf-step button {
    min-height: 0;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
}
body.theme-storefront .sf-trash .sf-act-ico,
body.theme-storefront .sf-x .sf-act-ico { width: 18px; height: 18px; display: block; margin: 0 auto; }
body.theme-storefront .sf-empty-ico { width: 44px; height: 44px; color: var(--sf-muted, #6a7893); display: block; margin: 0 auto 8px; }

/* ============================================================================
ACABAMENTO v9.381 — CONTROLES dos carrosséis no padrão da casa

  Os carrosséis usavam os controles crus do Bootstrap: indicadores-barrinha
  sem formato e setas com o ícone de fundo (data-uri). Aqui os dots viram
  pílulas com contraste garantido sobre qualquer banner (vidro fosco) e as
  setas viram botões circulares com o chevron do sprite da casa.
============================================================================ */

body.theme-storefront .storefront-banner-carousel .carousel-indicators {
    position: absolute; left: 50%; right: auto; transform: translateX(-50%); bottom: 14px;
    width: max-content; margin: 0; padding: 6px 10px; gap: 7px; display: flex; align-items: center;
    background: rgba(13, 27, 62, 0.38);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    border-radius: 999px; z-index: 6;
}
body.theme-storefront .storefront-banner-carousel .carousel-indicators [data-bs-target] {
    width: 8px; height: 8px; min-height: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.5);
    border: 0; margin: 0; padding: 0; opacity: 1; box-sizing: border-box; box-shadow: none;
    transition: background .25s ease, box-shadow .25s ease;
}
body.theme-storefront .storefront-banner-carousel .carousel-indicators .active {
    width: 8px; height: 8px; background: #fff; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4);
}
body.theme-storefront .storefront-banner-carousel .carousel-control-prev,
body.theme-storefront .storefront-banner-carousel .carousel-control-next {
    width: 44px; height: 44px; top: 50%; transform: translateY(-50%); bottom: auto;
    border-radius: 50%; background: rgba(13, 27, 62, 0.42);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.28); opacity: 1;
    display: grid; place-items: center;
    transition: background .2s ease;
}
body.theme-storefront .storefront-banner-carousel .carousel-control-prev:hover,
body.theme-storefront .storefront-banner-carousel .carousel-control-next:hover { background: rgba(13, 27, 62, 0.62); }
body.theme-storefront .storefront-banner-carousel .carousel-control-prev { left: 16px; }
body.theme-storefront .storefront-banner-carousel .carousel-control-next { right: 16px; }
body.theme-storefront .storefront-banner-carousel .sp-car-ico { width: 20px; height: 20px; color: #fff; }
body.theme-storefront .storefront-banner-carousel .carousel-control-prev-icon,
body.theme-storefront .storefront-banner-carousel .carousel-control-next-icon { display: none; }
body.theme-storefront .sf-carousel-arrow .sp-car-ico { width: 18px; height: 18px; color: currentColor; }
body.theme-storefront .sf-carousel-toggle .sp-car-ico { width: 16px; height: 16px; color: currentColor; }

/* v9.380 — o botão de compra NUNCA encolhe abaixo do próprio conteúdo:
   no mobile o flex o apertava a 178px com 205px de conteúdo (texto e ícone
   cortados). Com fit-content a linha quebra e o botão desce inteiro. */
body.theme-storefront .btn-storefront-buy,
body.theme-storefront .btn-card-buy,
body.theme-storefront .btn-sp-buy-now {
    min-width: fit-content;
    flex: 1 1 auto;
}
body.theme-storefront .btn-storefront-buy > span { min-width: 0; }

/* v9.380 — preço riscado alcança AA sem trocar a cor do lojista: a mesma cor
   da paleta, 12% mais escura (imperceptível a olho, medido 4,43:1 → ~5,2:1). */
body.theme-storefront .card-old-price { color: color-mix(in srgb, currentColor 88%, #000); }

/* ============================================================================
ACABAMENTO v9.378 — TIPOGRAFIA HD: nitidez de ponta a ponta

  O Inter variable já carrega (100–900 reais, sem negrito sintético), mas o
  Windows renderizava com ClearType (subpixel) — o texto engorda e "estoura"
  em telas densas. Aqui o texto da vitrine passa a antialiasing em tons de
  cinza (o mesmo padrão dos apps modernos), com renderização otimizada para
  legibilidade. Aplicado em texto, campos e botões — cada pixel de tinta.
============================================================================ */

body.theme-storefront,
body.theme-storefront input,
body.theme-storefront select,
body.theme-storefront textarea,
body.theme-storefront button,
body.theme-storefront .btn {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
body.theme-storefront { text-rendering: optimizeLegibility; font-synthesis-weight: none; }

/* ============================================================================
ACABAMENTO v9.377 — BOTÕES DE AÇÃO no padrão da referência do dono

  Comprar / Finalizar / Adicionar ao carrinho / Calcular frete: gradiente
  vertical (luz em cima, profundidade embaixo), fio claro de 1px, brilho
  superior interno e sombra de contato. A cor acompanha a paleta da loja
  (color-mix sobre --storefront-primary); navegador sem suporte mantém o
  fundo atual — progressive enhancement puro.
============================================================================ */

body.theme-storefront .btn-storefront-buy,
body.theme-storefront .btn-card-buy,
body.theme-storefront .btn-sp-buy-now,
body.theme-storefront .shipping-btn,
body.theme-storefront .sf-cm-submit,
body.theme-storefront .sp-cart-continue.is-buy {
    background-image: linear-gradient(180deg,
        color-mix(in srgb, var(--storefront-primary, #0866f5) 76%, #ffffff) 0%,
        var(--storefront-primary, #0866f5) 54%,
        color-mix(in srgb, var(--storefront-primary, #0866f5) 84%, #001b4d) 100%);
    border: 1px solid color-mix(in srgb, var(--storefront-primary, #0866f5) 58%, #ffffff);
    box-shadow: 0 2px 7px rgba(13, 27, 62, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    color: #fff;
}
body.theme-storefront .btn-storefront-buy:hover,
body.theme-storefront .btn-card-buy:hover,
body.theme-storefront .btn-sp-buy-now:hover,
body.theme-storefront .shipping-btn:hover,
body.theme-storefront .sf-cm-submit:hover {
    filter: brightness(1.06);
}
body.theme-storefront .btn-storefront-buy:active,
body.theme-storefront .btn-card-buy:active,
body.theme-storefront .btn-sp-buy-now:active,
body.theme-storefront .shipping-btn:active {
    filter: brightness(0.97);
}

/* v9.375 — ícones premium da tabbar (SVG do sprite da casa, currentColor). */body.theme-storefront .sp-ico { width: 22px; height: 22px; display: block; flex: none; }
body.theme-storefront .sp-burger .sp-ico { width: 24px; height: 24px; }
body.theme-storefront .storefront-search-btn .sp-ico { width: 20px; height: 20px; margin: 0 auto; }
body.theme-storefront .sp-action .sp-ico { width: 22px; height: 22px; }
body.theme-storefront .sf-act .sf-act-ico { width: 18px; height: 18px; display: block; margin: 0 auto; }
body.theme-storefront .btn-storefront-buy .sp-ico,
body.theme-storefront .btn-card-buy .sp-ico { width: 18px; height: 18px; display: inline-block; vertical-align: -3px; }
body.theme-storefront .sf-tab-item .sf-tab-ico,
body.theme-storefront .sf-tab-fab .sf-tab-ico { width: 22px; height: 22px; display: block; flex: none; }
body.theme-storefront .sf-tab-fab .sf-tab-ico { width: 24px; height: 24px; }
body.theme-storefront .sf-tab-item .position-relative .sf-tab-ico { display: block; }

/* v9.374 — varredura de cápsulas aninhadas: o chip de categoria e a pílula de
   parcelamento dentro dos cards, o container pill vazio atrás dos badges da
   PDP e o rótulo-pílula do balão de prova social viram texto/linha simples.
   (Varredura por tela: home, PDP, carrinho, checkout e conta.) */
body.theme-storefront .storefront-product-card .sp-card-cat,
body.theme-storefront .sp-card .card-installments,
body.theme-storefront .sp-pdp-badges,
body.theme-storefront .sp-gatilho-balao__rotulo {
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    min-height: 0;
    box-shadow: none;
}
@media (max-width: 575px) { body.theme-storefront .sp-safe-box { flex-direction: column; gap: 14px; padding: 18px; } body.theme-storefront .sp-safe-shield { width: 58px; height: 58px; } body.theme-storefront .sp-safe-shield svg { width: 34px; height: 34px; } body.theme-storefront .sp-safe-box b { font-size: 19px; } body.theme-storefront .sp-safe-txt { width: 100%; } body.theme-storefront .sp-safe-flags .payment-badges { gap: 5px; } body.theme-storefront .sp-safe-flags .payment-badge img { height: 13px; } }
/* v9.392 — telas de 320–359px: o checkout mantém as seis logos em UMA linha. */
@media (max-width: 359.98px) { body.theme-storefront .sp-safe-flags .payment-badges { gap: 4px; } body.theme-storefront .sp-safe-flags .payment-badge img { height: 11px; } }
/* v9.393 — 320px: a faixa de confiança não passa da borda (padding/gap enxutos). */
@media (max-width: 359.98px) { body.theme-storefront .sp-trust-item { padding-left: 4px; padding-right: 4px; gap: 8px; } }
/* v9.394 — MODO CLIENTE: faixa de retorno ao painel (impersonação) */
body.theme-storefront .sp-impersonation-banner { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; padding: 10px 16px; background: #0b1220; color: #e8eefc; font-size: 13.5px; font-weight: 600; text-align: center; border-bottom: 1px solid rgba(255, 255, 255, .12); }
body.theme-storefront .sp-impersonation-banner form { margin: 0; }
body.theme-storefront .sp-impersonation-banner button { border: 1px solid rgba(255, 255, 255, .4); background: #fff; color: #0b1220; border-radius: 8px; padding: 6px 12px; font-weight: 800; font-size: 12.5px; cursor: pointer; }
body.theme-storefront .sp-impersonation-banner button:hover { background: #e5e7eb; }

/* v9.398 — LOGIN COMPACTO + RECUPERAR SENHA + SAIR */
body.theme-storefront .sf-auth-modal { width: min(430px, calc(100vw - 32px)); }
body.theme-storefront .sf-auth-modal .sf-auth-body { padding: 22px; }
body.theme-storefront .sf-auth-modal .sf-af-title { font-size: 22px; margin-bottom: 4px; }
body.theme-storefront .sf-auth-modal .sf-af-sub { font-size: 13.5px; margin-bottom: 14px; }
body.theme-storefront .sf-auth-modal .sf-af-stack { margin-bottom: 14px; }
body.theme-storefront .sf-auth-modal .sf-af-stack label { margin-bottom: 5px; font-size: 13px; }
body.theme-storefront .sf-auth-modal .form-control,
body.theme-storefront .sf-auth-modal .form-select { height: 42px; font-size: 14px; }
body.theme-storefront .sf-auth-modal .sf-af-submit { height: 44px; font-size: 15px; }
body.theme-storefront .sf-auth-modal .sf-auth-tabs button { padding: 10px 12px; font-size: 14px; }
body.theme-storefront .sf-auth-page .checkout-step-card { max-width: 460px; margin: 0 auto; padding: 22px; }
body.theme-storefront .sf-auth-page .sf-af-title { font-size: 22px; }
body.theme-storefront .sf-af-forgot { margin: -6px 0 12px; text-align: right; font-size: 13px; }
body.theme-storefront .sf-af-forgot a { color: var(--sp-blue, #0d6efd); text-decoration: none; font-weight: 600; }
body.theme-storefront .sf-af-forgot a:hover { text-decoration: underline; }
body.theme-storefront .sp-action-logout { display: inline-flex; }
body.theme-storefront .sp-action-logout .sp-action { background: none; border: 0; cursor: pointer; }

/* v9.399 - carrossel de produtos da categoria (imagens reais do catalogo) */
.sf-cat-carousel { margin: 0 0 1.25rem; }
.sf-cat-carousel__track { display: flex; gap: .75rem; overflow-x: auto; padding: .25rem .25rem .75rem; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.sf-cat-carousel__item { flex: 0 0 150px; scroll-snap-align: start; text-decoration: none; color: inherit; background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 14px; padding: .5rem; transition: transform .15s ease, box-shadow .15s ease; }
.sf-cat-carousel__item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.sf-cat-carousel__media { display: block; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: #f7f7f7; }
.sf-cat-carousel__media img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sf-cat-carousel__name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .8rem; line-height: 1.25; margin-top: .45rem; min-height: 2em; }
@media (min-width: 768px) { .sf-cat-carousel__item { flex-basis: 170px; } }

/* v9.438 — MESMO acabamento tátil da Dash nos botões principais da frente.
   A receita (aro, relevo, tipografia e foco) é comum; o acento de cada ação
   continua sendo o da vitrine: azul do produto/login, verde de finalizar. */
body.theme-storefront .btn-storefront-buy,
body.theme-storefront .btn-card-buy,
body.theme-storefront .btn-sp-buy-now,
body.theme-storefront .shipping-btn,
body.theme-storefront .sf-cm-submit {
    --front-cta: var(--storefront-primary, var(--sp-blue, #0866f5));
}
body.theme-storefront .btn-finish-cart,
body.theme-storefront #checkout-form .ck-submit {
    --front-cta: #16a34a;
    --front-cta-rim: color-mix(in srgb, #16a34a 38%, #bbf7d0);
}
body.theme-storefront .sf-btn-primary {
    --front-cta: #2563eb;
    --front-cta-rim: color-mix(in srgb, #2563eb 40%, #bfdbfe);
}

body.theme-storefront .btn-storefront-buy,
body.theme-storefront .btn-card-buy,
body.theme-storefront .btn-sp-buy-now,
body.theme-storefront .shipping-btn,
body.theme-storefront .sf-cm-submit,
body.theme-storefront .btn-finish-cart,
body.theme-storefront #checkout-form .ck-submit,
body.theme-storefront .sf-btn-primary {
    min-height: 48px;
    padding-block: 11px;
    border: 2px solid var(--front-cta-rim, color-mix(in srgb, var(--front-cta) 40%, #a9ceff));
    border-radius: 14px;
    background-color: var(--front-cta);
    background-image: linear-gradient(180deg,
        color-mix(in srgb, var(--front-cta) 76%, #071a3d) 0%,
        var(--front-cta) 55%,
        color-mix(in srgb, var(--front-cta) 82%, #ffffff) 100%);
    color: #fff;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
    box-shadow:
        inset 0 1px 1px rgba(0, 0, 0, .50),
        inset 0 2px 6px rgba(0, 0, 0, .42),
        inset 0 -1px 0 rgba(255, 255, 255, .18),
        0 0 0 1px color-mix(in srgb, var(--front-cta) 22%, transparent),
        0 5px 14px color-mix(in srgb, var(--front-cta) 20%, transparent);
    transition: filter .15s ease, transform .15s ease, box-shadow .15s ease;
}
body.theme-storefront .btn-storefront-buy:hover:not(:disabled),
body.theme-storefront .btn-card-buy:hover:not(:disabled),
body.theme-storefront .btn-sp-buy-now:hover:not(:disabled),
body.theme-storefront .shipping-btn:hover:not(:disabled),
body.theme-storefront .sf-cm-submit:hover:not(:disabled),
body.theme-storefront .btn-finish-cart:hover,
body.theme-storefront #checkout-form .ck-submit:hover:not(:disabled),
body.theme-storefront .sf-btn-primary:hover:not(:disabled) {
    filter: brightness(1.06);
    color: #fff;
}
body.theme-storefront .btn-storefront-buy:active:not(:disabled),
body.theme-storefront .btn-card-buy:active:not(:disabled),
body.theme-storefront .btn-sp-buy-now:active:not(:disabled),
body.theme-storefront .shipping-btn:active:not(:disabled),
body.theme-storefront .sf-cm-submit:active:not(:disabled),
body.theme-storefront .btn-finish-cart:active,
body.theme-storefront #checkout-form .ck-submit:active:not(:disabled),
body.theme-storefront .sf-btn-primary:active:not(:disabled) {
    filter: brightness(.97);
    transform: translateY(1px);
    box-shadow: inset 0 2px 2px rgba(0, 0, 0, .62), inset 0 3px 8px rgba(0, 0, 0, .48), inset 0 -1px 0 rgba(255, 255, 255, .12);
}
body.theme-storefront .btn-storefront-buy:disabled,
body.theme-storefront .btn-card-buy:disabled,
body.theme-storefront .btn-sp-buy-now:disabled,
body.theme-storefront .shipping-btn:disabled,
body.theme-storefront .sf-cm-submit:disabled,
body.theme-storefront #checkout-form .ck-submit:disabled,
body.theme-storefront .sf-btn-primary:disabled {
    filter: grayscale(.25);
    opacity: .58;
    box-shadow: none;
    cursor: not-allowed;
}
body.theme-storefront .btn-storefront-buy:focus-visible,
body.theme-storefront .btn-card-buy:focus-visible,
body.theme-storefront .btn-sp-buy-now:focus-visible,
body.theme-storefront .shipping-btn:focus-visible,
body.theme-storefront .sf-cm-submit:focus-visible,
body.theme-storefront .btn-finish-cart:focus-visible,
body.theme-storefront #checkout-form .ck-submit:focus-visible,
body.theme-storefront .sf-btn-primary:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--front-cta) 36%, #ffffff);
    outline-offset: 3px;
}
body.theme-storefront .btn-storefront-buy svg,
body.theme-storefront .btn-card-buy svg,
body.theme-storefront .btn-sp-buy-now svg,
body.theme-storefront .btn-finish-cart svg,
body.theme-storefront #checkout-form .ck-submit svg,
body.theme-storefront .sf-btn-primary svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    display: block;
    stroke-width: 2.1;
}
@media (max-width: 575.98px) {
    body.theme-storefront .btn-storefront-buy,
    body.theme-storefront .btn-card-buy,
    body.theme-storefront .btn-sp-buy-now,
    body.theme-storefront .btn-finish-cart,
    body.theme-storefront #checkout-form .ck-submit,
    body.theme-storefront .sf-btn-primary {
        min-height: 48px;
        border-radius: 12px;
        font-size: 15px;
    }
}

/* PDP secundário conserva azul contornado; também recebe o poço e o aro Dash. */
body.theme-storefront .btn-sp-buy-now {
    min-height: 48px;
    height: auto;
    border: 2px solid color-mix(in srgb, var(--sp-blue, #0866f5) 38%, #b9d5ff);
    border-radius: 14px;
    background-color: #fff;
    background-image: linear-gradient(180deg, #ffffff 0%, color-mix(in srgb, var(--sp-blue-soft, #eaf2ff) 74%, #ffffff) 100%);
    color: var(--sp-blue, #0866f5);
    box-shadow: inset 0 1px 2px rgba(13, 27, 62, .14), inset 0 2px 6px rgba(13, 27, 62, .08), inset 0 -1px 0 rgba(255, 255, 255, .9), 0 0 0 1px rgba(8, 102, 245, .08);
}
body.theme-storefront .btn-sp-buy-now:hover:not(:disabled) {
    background-image: linear-gradient(180deg, #ffffff 0%, var(--sp-blue-soft, #eaf2ff) 100%);
    color: var(--sp-blue-dark, #174db5);
}
body.theme-storefront .btn-sp-buy-now:active:not(:disabled) {
    transform: translateY(1px);
    box-shadow: inset 0 2px 3px rgba(13, 27, 62, .2), inset 0 3px 8px rgba(13, 27, 62, .12);
}

/* Vence as medidas compactas antigas: fonte e toque seguem a régua da Dash. */
body.theme-storefront .sp-card .btn-card-buy,
body.theme-storefront .product-info-panel .btn-storefront-buy {
    min-height: 48px;
    height: auto;
    padding-inline: 14px;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
}

/* Lucide da moldura global: os tamanhos são explícitos, sem herdar em/em do texto. */
body.theme-storefront .sp-news-id > svg { width: 34px; height: 34px; flex: 0 0 34px; color: #9cc0ff; }
body.theme-storefront .sp-news-plane { width: 30px; height: 30px; flex: none; color: #7fb0ff; transform: rotate(-8deg); }
body.theme-storefront .sp-footer-list svg { width: 16px; height: 16px; margin-right: 8px; flex: none; color: #7fb0ff; vertical-align: middle; }
body.theme-storefront .sp-footer-seals svg { width: 16px; height: 16px; flex: none; color: #7fb0ff; }
body.theme-storefront .sp-footer-bottom > a svg { width: 15px; height: 15px; vertical-align: -3px; }

/* v9.439 — régua completa da área do cliente e checkout. */
body.theme-storefront .acc-layout { min-width: 0; }
body.theme-storefront .acc-main { min-width: 0; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body.theme-storefront .acc-main > .page-title,
body.theme-storefront .acc-main > h1.page-title { margin: 0 0 16px; color: #111c2e; font-size: 24px; line-height: 1.2; font-weight: 800; letter-spacing: -.025em; }
body.theme-storefront .acc-main .checkout-section,
body.theme-storefront .acc-main .acc-panel,
body.theme-storefront .acc-main .acc-order,
body.theme-storefront .acc-main .acc-coupon,
body.theme-storefront .acc-main .acc-thread,
body.theme-storefront .acc-main .acc-newmsg,
body.theme-storefront .acc-main .acc-store {
    min-width: 0;
    padding: 20px;
    margin: 0 0 16px;
    border: 1px solid #e2e8f1;
    border-radius: 16px;
    background: linear-gradient(165deg, #fff 0%, #f8fafd 100%);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 26px rgba(15, 23, 42, .055);
}
body.theme-storefront .acc-main .checkout-section-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
body.theme-storefront .acc-main .checkout-section-head > svg,
body.theme-storefront .acc-main .checkout-section-head > i {
    box-sizing: border-box; width: 42px; height: 42px; flex: 0 0 42px; padding: 10px;
    display: grid; place-items: center; border: 1px solid rgba(139, 189, 255, .72); border-radius: 12px;
    background: linear-gradient(180deg, #2f6fd6, #4f9bff); color: #fff;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .32), inset 0 -1px 0 rgba(255, 255, 255, .22), 0 4px 10px rgba(37, 99, 235, .16);
}
body.theme-storefront .acc-main .checkout-section-head h2,
body.theme-storefront .acc-main .acc-panel-head h2,
body.theme-storefront .acc-main .dash-card-head h2 { color: #111c2e; font-size: 16px; font-weight: 750; line-height: 1.25; letter-spacing: -.015em; }
body.theme-storefront .acc-main .checkout-section-head p { margin: 3px 0 0; color: #64748b; font-size: 13px; line-height: 1.45; }
body.theme-storefront .acc-main .form-label { display: block; margin-bottom: 6px; color: #344258; font-size: 13px; font-weight: 600; line-height: 1.3; }
body.theme-storefront .acc-main .form-control,
body.theme-storefront .acc-main .form-select,
body.theme-storefront .acc-main textarea,
body.theme-storefront .acc-main input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) {
    min-width: 0; min-height: 46px; border: 1px solid #d6deea; border-radius: 10px;
    background: #fff; color: #16202f; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 14px; line-height: 1.35; box-shadow: inset 0 1px 2px rgba(13, 27, 62, .08), inset 0 -1px 0 rgba(255,255,255,.9);
}
body.theme-storefront .acc-main textarea { min-height: 104px; padding: 11px 13px; }
body.theme-storefront .acc-main .form-control:focus,
body.theme-storefront .acc-main .form-select:focus,
body.theme-storefront .acc-main textarea:focus { border-color: var(--sp-blue, #0866f5); outline: 0; box-shadow: inset 0 1px 2px rgba(13,27,62,.06), 0 0 0 3px rgba(0,102,255,.14); }
body.theme-storefront .acc-main .form-text,
body.theme-storefront .acc-main .text-muted { color: #64748b; }
body.theme-storefront .acc-main .acc-tabs { gap: 7px; overflow: visible; }
body.theme-storefront .acc-main .acc-tabs a { min-height: 38px; padding: 7px 12px; border: 1px solid #dbe3ef; border-radius: 9px; background: #fff; color: #41516a; font: 600 13px/1.2 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body.theme-storefront .acc-main .acc-tabs a.active { border-color: color-mix(in srgb, var(--sp-blue, #0866f5) 38%, #fff); background: #edf4ff; color: var(--sp-blue-dark, #0052cc); box-shadow: inset 0 1px 2px rgba(13,27,62,.08); }
body.theme-storefront .acc-main .acc-tabs a span { border-radius: 6px; background: #e4ebf5; color: #475569; font: 700 11px/1.5 Inter, sans-serif; }
body.theme-storefront .acc-main .acc-tabs a.active span { background: rgba(37,99,235,.12); color: #174db5; }
body.theme-storefront .acc-main .acc-order header { align-items: flex-start; }
body.theme-storefront .acc-main .acc-order footer { border: 0; border-top: 1px solid #e8edf4; }
body.theme-storefront .acc-main .acc-order-actions { gap: 8px; }
body.theme-storefront .acc-main .acc-status-badge { display: inline-flex; align-items: center; min-height: 28px; padding: 4px 9px; border: 1px solid rgba(100,116,139,.16); border-radius: 8px; font: 700 11.5px/1.25 Inter, sans-serif; white-space: normal; }
body.theme-storefront .acc-main .acc-steps { gap: 2px; }
body.theme-storefront .acc-main .acc-step-dot { box-shadow: inset 0 1px 2px rgba(13,27,62,.08); }
body.theme-storefront .acc-main .acc-step-dot svg { width: 17px; height: 17px; display: block; }
body.theme-storefront .acc-main .acc-coupon-code { border-radius: 8px; font-family: Inter, sans-serif; letter-spacing: .025em; }
body.theme-storefront .acc-main .acc-empty { padding: 30px 18px; border: 1px dashed #d6deea; border-radius: 14px; background: #fbfcfe; text-align: center; }
body.theme-storefront .acc-main .acc-empty svg { display: block; margin: 0 auto 9px; color: #8ba2c5; }
body.theme-storefront .acc-main .acc-safe,
body.theme-storefront .acc-main .acc-track { display: flex; align-items: flex-start; gap: 7px; color: #64748b; font-size: 12px; line-height: 1.45; }
body.theme-storefront .acc-main .acc-safe svg,
body.theme-storefront .acc-main .acc-track svg { flex: 0 0 16px; width: 16px; height: 16px; }
body.theme-storefront .acc-main .acc-btn { min-height: 42px; padding: 8px 14px; border: 1px solid #d4deed; border-radius: 10px; background: #fff; color: var(--sp-blue-dark, #0052cc); font: 700 13px/1.2 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 2px 6px rgba(13,27,62,.08); }
body.theme-storefront .acc-main .acc-pagination { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 10px; margin: 14px 0 4px; padding: 12px; border: 1px solid #e2e8f1; border-radius: 13px; background: #fff; }
body.theme-storefront .acc-main .acc-pagination > span { display: grid; justify-items: center; color: #52627a; font-size: 12px; text-align: center; }
body.theme-storefront .acc-main .acc-pagination > span small { color: #8491a4; font-size: 11px; }
body.theme-storefront .acc-main .acc-pagination .acc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; text-decoration: none; white-space: nowrap; }
body.theme-storefront .acc-main .acc-pagination .acc-btn.is-disabled { color: #94a3b8; background: #f8fafc; box-shadow: none; cursor: default; }
body.theme-storefront .acc-main .acc-btn.is-primary { --front-cta: var(--sp-blue, #0866f5); min-height: 44px; padding: 10px 16px; border: 2px solid color-mix(in srgb, var(--front-cta) 40%, #b9d5ff); border-radius: 12px; background-color: var(--front-cta); background-image: linear-gradient(180deg, color-mix(in srgb,var(--front-cta) 76%,#071a3d),var(--front-cta) 55%,color-mix(in srgb,var(--front-cta) 82%,#fff)); color: #fff; box-shadow: inset 0 1px 1px rgba(0,0,0,.4), inset 0 2px 5px rgba(0,0,0,.25), inset 0 -1px 0 rgba(255,255,255,.2), 0 4px 12px rgba(0,102,255,.18); }
body.theme-storefront .acc-main .btn-primary { min-height: 44px; padding: 10px 16px; border: 2px solid color-mix(in srgb, var(--sp-blue, #0866f5) 40%, #b9d5ff); border-radius: 12px; background-color: var(--sp-blue, #0866f5); background-image: linear-gradient(180deg, color-mix(in srgb,var(--sp-blue, #0866f5) 76%,#071a3d),var(--sp-blue, #0866f5) 55%,color-mix(in srgb,var(--sp-blue, #0866f5) 82%,#fff)); color: #fff; font: 700 14px/1.2 Inter, sans-serif; box-shadow: inset 0 1px 1px rgba(0,0,0,.4), inset 0 2px 5px rgba(0,0,0,.25), inset 0 -1px 0 rgba(255,255,255,.2), 0 4px 12px rgba(0,102,255,.18); }
body.theme-storefront .acc-main .btn-outline-primary,
body.theme-storefront .acc-main .btn-outline-danger,
body.theme-storefront .acc-main .btn-outline-secondary { min-height: 40px; padding: 8px 12px; border-radius: 9px; font: 600 13px/1.2 Inter, sans-serif; }
body.theme-storefront .acc-main .table-responsive { max-width: 100%; border: 1px solid #e3e9f2; border-radius: 12px; background: #fff; }
body.theme-storefront .acc-main .table { margin-bottom: 0; font-size: 13px; }
body.theme-storefront .acc-main .table thead th { background: #f7f9fc; color: #43516a; font: 700 11px/1.3 Inter, sans-serif; letter-spacing: .035em; }
body.theme-storefront .acc-main .table td,
body.theme-storefront .acc-main .table th { padding: 10px 12px; vertical-align: middle; }
body.theme-storefront .acc-main .modal-content { overflow: hidden; border: 1px solid #e1e8f2; border-radius: 16px; background: linear-gradient(165deg, #fff, #f8fafd); box-shadow: 0 18px 48px rgba(15,23,42,.17); }
body.theme-storefront .acc-main .modal-header,
body.theme-storefront .acc-main .modal-footer { border-color: #e7edf5; padding: 16px 18px; }
body.theme-storefront .acc-main .modal-title { color: #111c2e; font: 750 17px/1.25 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body.theme-storefront .acc-main .modal-body { padding: 18px; }
body.theme-storefront .acc-main .av-form { display: grid; grid-template-columns: 96px minmax(0,1fr); align-items: start; gap: 18px; }
body.theme-storefront .acc-main .av-form-current { width: 96px; height: 96px; overflow: hidden; border: 1px solid #dbe4f0; border-radius: 16px; background: #f4f7fb; box-shadow: inset 0 1px 2px rgba(13,27,62,.08); }
body.theme-storefront .acc-main .av-form-current img,
body.theme-storefront .acc-main .av-form-current svg { display: block; width: 100%; height: 100%; object-fit: cover; }
body.theme-storefront .acc-main .av-form-body { min-width: 0; }
body.theme-storefront .acc-main .av-form .av-file { flex: 1 1 220px; min-width: 0; }
body.theme-storefront .acc-main .sf-pay { padding: 18px; border: 1px solid #e1e8f2; border-radius: 15px; background: linear-gradient(165deg,#fff,#f8fafd); box-shadow: 0 1px 2px rgba(15,23,42,.04),0 8px 22px rgba(15,23,42,.05); }
body.theme-storefront .acc-main svg.acc-lucide,
body.theme-storefront .acc-main .checkout-section-head > svg,
body.theme-storefront .acc-main .acc-btn svg,
body.theme-storefront .acc-main .acc-empty svg { flex: none; }
body.theme-storefront .acc-default-badge { display: inline-flex; align-items: center; margin-inline-start: 6px; padding: 4px 9px; border: 1px solid #c9dcfb; border-radius: 7px; background: #eef5ff; color: #1d4ed8; font: 700 11px/1.2 Inter, sans-serif; vertical-align: middle; }
body.theme-storefront .acc-address-empty { display: grid; justify-items: center; gap: 5px; margin-bottom: 14px; padding: 20px; border: 1px dashed #d6deea; border-radius: 13px; background: #fbfcfe; text-align: center; }
body.theme-storefront .acc-address-empty > svg { color: #6485b5; }
body.theme-storefront .acc-address-empty p { margin: 0; color: #344258; font: 700 13px/1.4 Inter, sans-serif; }
body.theme-storefront .acc-address-empty span { color: #64748b; font-size: 12px; }

/* PaymentPanel (pagar/trocar forma) segue o mesmo material dos CTAs da Dash. */
body.theme-storefront .sf-pay-btn:not(.is-ghost) {
    min-height: 46px;
    border: 2px solid color-mix(in srgb, var(--sf-accent, #2563eb) 38%, #b9d5ff);
    border-radius: 12px;
    background-color: var(--sf-accent, #2563eb);
    background-image: linear-gradient(180deg, color-mix(in srgb, var(--sf-accent, #2563eb) 76%, #071a3d), var(--sf-accent, #2563eb) 55%, color-mix(in srgb, var(--sf-accent, #2563eb) 82%, #fff));
    color: #fff;
    font: 700 14px/1.2 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.4), inset 0 2px 5px rgba(0,0,0,.25), inset 0 -1px 0 rgba(255,255,255,.2), 0 4px 12px color-mix(in srgb,var(--sf-accent,#2563eb) 20%,transparent);
}
body.theme-storefront .sf-pay-btn.is-ghost { min-height: 42px; border: 1px solid #cbd7e8; border-radius: 9px; background: #fff; color: var(--sf-accent, #2563eb); font: 600 13px/1.2 Inter, sans-serif; box-shadow: inset 0 1px 2px rgba(13,27,62,.06); }
body.theme-storefront .sf-pay-btn svg { flex: none; }

/* Checkout express: menos campos mortos, autofill completo e leitura direta. */
body.theme-storefront #checkout-form .ck-customer-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 12px;
    row-gap: 3px;
    padding: 12px 14px;
    border: 1px solid #e2eaf5;
    border-radius: 11px;
    background: #f7f9fc;
}
body.theme-storefront #checkout-form .ck-customer-name { min-width: 0; color: #1c293d; font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
body.theme-storefront #checkout-form .ck-customer-email { min-width: 0; color: #64748b; font-size: 12px; overflow-wrap: anywhere; }
body.theme-storefront #checkout-form .ck-customer-summary a { grid-column: 2; grid-row: 1 / span 2; color: #1d4ed8; font-size: 12px; font-weight: 650; white-space: nowrap; }
body.theme-storefront #checkout-form .ck-saved-address-note { margin: -2px 0 13px; color: #52647d; font-size: 12px; line-height: 1.4; }
body.theme-storefront #checkout-form .form-control:disabled,
body.theme-storefront #checkout-form .form-select:disabled { opacity: .62; }
body.theme-storefront #checkout-form .shipping-option > span:first-child { min-width: 0; }
body.theme-storefront #checkout-form .shipping-option > span:first-child > span { min-width: 0; overflow-wrap: anywhere; }
body.theme-storefront #checkout-form .shipping-option > b { font-variant-numeric: tabular-nums; }
body.theme-storefront #checkout-form .ck-summary { border-color: #dce6f3; box-shadow: 0 10px 28px rgba(15,23,42,.07); }
body.theme-storefront #checkout-form .ck-summary #summary-total { color: #12223a; font-variant-numeric: tabular-nums; }
body.theme-storefront #checkout-form .ck-summary .ck-item { min-width: 0; }
body.theme-storefront #checkout-form .ck-submit { font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: 0; }

@media (max-width: 359.98px) {
    body.theme-storefront #checkout-form .ck-customer-summary { grid-template-columns: minmax(0,1fr); }
    body.theme-storefront #checkout-form .ck-customer-summary a { grid-column: 1; grid-row: auto; justify-self: start; }
    body.theme-storefront #checkout-form .row.g-3 > .col-8,
    body.theme-storefront #checkout-form .row.g-3 > .col-7,
    body.theme-storefront #checkout-form .row.g-3 > .col-5,
    body.theme-storefront #checkout-form .row.g-3 > .col-4 { width: 100%; }
}

@media (max-width: 767.98px) {
    body.theme-storefront .acc-layout { padding: 0 12px calc(108px + env(safe-area-inset-bottom,0px)); }
    body.theme-storefront .acc-main > .page-title { font-size: 21px; margin-bottom: 13px; }
    body.theme-storefront .acc-main .checkout-section,
    body.theme-storefront .acc-main .acc-panel,
    body.theme-storefront .acc-main .acc-order,
    body.theme-storefront .acc-main .acc-coupon,
    body.theme-storefront .acc-main .acc-thread,
    body.theme-storefront .acc-main .acc-newmsg,
    body.theme-storefront .acc-main .acc-store { padding: 15px; margin-bottom: 12px; border-radius: 14px; }
    body.theme-storefront .acc-nav { grid-template-columns: repeat(2,minmax(0,1fr)); padding: 8px; gap: 5px; border-radius: 13px; }
    body.theme-storefront .acc-nav a,
    body.theme-storefront .acc-nav .account-nav-logout { min-width: 0; min-height: 42px; padding: 7px 8px; font-size: 12px; line-height: 1.2; }
    body.theme-storefront .acc-main .acc-tabs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
    body.theme-storefront .acc-main .acc-tabs a { justify-content: space-between; min-width: 0; padding: 7px 9px; font-size: 12px; }
    body.theme-storefront .acc-main .acc-order header,
    body.theme-storefront .acc-main .acc-order footer { align-items: flex-start; }
    body.theme-storefront .acc-main .acc-order footer { flex-direction: column; }
    body.theme-storefront .acc-main .acc-order-actions { width: 100%; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
    body.theme-storefront .acc-main .acc-order-actions > * { min-width: 0; }
    body.theme-storefront .acc-main .acc-steps { grid-template-columns: repeat(5,minmax(0,1fr)); }
    body.theme-storefront .acc-main .acc-step-label { font-size: 10px; line-height: 1.2; overflow-wrap: anywhere; }
    body.theme-storefront .acc-main .acc-step-hint { display: none; }
    body.theme-storefront .acc-main .acc-dl { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px 12px; }
    body.theme-storefront .acc-main .acc-threads { gap: 8px; }
    body.theme-storefront .acc-main .acc-thread-row { grid-template-columns: 36px minmax(0,1fr); gap: 9px; padding: 10px; }
    body.theme-storefront .acc-main .acc-thread-meta { grid-column: 1 / -1; grid-auto-flow: column; justify-content: space-between; justify-items: start; }
    body.theme-storefront .acc-main .acc-thread-body small { max-width: none; white-space: normal; overflow-wrap: anywhere; }
    body.theme-storefront .acc-main .acc-reply { grid-template-columns: 1fr; }
    body.theme-storefront .acc-main .acc-reply .acc-btn { width: 100%; }
    body.theme-storefront .acc-main .table { min-width: 560px; }
    body.theme-storefront .acc-main .table-responsive { overflow-x: auto; overscroll-behavior-inline: contain; }
    body.theme-storefront .acc-main .av-form { grid-template-columns: 1fr; justify-items: start; gap: 12px; }
    body.theme-storefront .acc-main .av-form-current { width: 72px; height: 72px; border-radius: 13px; }
    body.theme-storefront .acc-main .av-form-upload > .d-flex { align-items: stretch; }
    body.theme-storefront .acc-main .av-form-upload button,
    body.theme-storefront .acc-main .acc-newmsg-actions button { width: 100%; }
    body.theme-storefront .acc-main .acc-steps.is-compact .acc-step-label { font-size: 9.5px; }
}
@media (max-width: 359.98px) {
    body.theme-storefront .acc-layout { padding-inline: 8px; }
    body.theme-storefront .acc-nav { gap: 3px; padding: 6px; }
    body.theme-storefront .acc-nav a,
    body.theme-storefront .acc-nav .account-nav-logout { gap: 6px; padding-inline: 6px; font-size: 11px; }
    body.theme-storefront .acc-main .acc-dl { grid-template-columns: 1fr; }
}

/* Checkout e pós-compra: o mesmo cartão/ação em toda a jornada. */
body.theme-storefront #checkout-form .checkout-step-card,
body.theme-storefront .sf-order-confirmation .checkout-step-card {
    border: 1px solid #e2e8f1;
    border-radius: 16px;
    background: linear-gradient(165deg, #fff 0%, #f8fafd 100%);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 26px rgba(15, 23, 42, .055);
}
body.theme-storefront .sf-order-confirmation { max-width: 860px; }
body.theme-storefront .sf-order-confirmation h1 { margin: 8px 0 5px; color: #111c2e; font: 800 26px/1.2 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: -.025em; }
body.theme-storefront .sf-order-confirm-icon { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 10px; border: 1px solid rgba(139, 189, 255, .65); border-radius: 18px; background: linear-gradient(180deg, #2f6fd6, #4f9bff); color: #fff; box-shadow: inset 0 1px 1px rgba(0,0,0,.3), inset 0 -1px 0 rgba(255,255,255,.22), 0 8px 18px rgba(37,99,235,.18); }
body.theme-storefront .sf-order-confirmation .sf-order-confirm-icon svg { width: 38px; height: 38px; }
body.theme-storefront .sf-order-confirmation .btn-primary { min-height: 46px; padding: 10px 16px; border: 2px solid color-mix(in srgb, var(--sp-blue, #0866f5) 40%, #b9d5ff); border-radius: 12px; background-color: var(--sp-blue, #0866f5); background-image: linear-gradient(180deg, color-mix(in srgb,var(--sp-blue, #0866f5) 76%,#071a3d),var(--sp-blue, #0866f5) 55%,color-mix(in srgb,var(--sp-blue, #0866f5) 82%,#fff)); color: #fff; font: 700 14px/1.2 Inter, sans-serif; box-shadow: inset 0 1px 1px rgba(0,0,0,.4), inset 0 2px 5px rgba(0,0,0,.25), inset 0 -1px 0 rgba(255,255,255,.2), 0 4px 12px rgba(0,102,255,.18); }
body.theme-storefront .sf-order-confirmation .btn-outline-primary { min-height: 42px; border-radius: 10px; font: 600 13px/1.2 Inter, sans-serif; }

/* Lucide mantém a malha definida também dentro do painel de pagamento React. */
body.theme-storefront .sf-pay svg { display: inline-block; flex: 0 0 auto; vertical-align: middle; }
body.theme-storefront .sf-pay-box h3 svg { width: 20px; height: 20px; }
body.theme-storefront .sf-pay-btn svg { width: 18px; height: 18px; }
body.theme-storefront .sf-pay-ico svg { width: 22px; height: 22px; }
body.theme-storefront .sf-pay-ok > svg,
body.theme-storefront .sf-pay-off > svg { width: 30px; height: 30px; flex: 0 0 30px; }
body.theme-storefront .acc-lucide { flex: none; vertical-align: middle; }

@media (max-width: 575.98px) {
    body.theme-storefront .acc-main .checkout-section-head { gap: 10px; }
    body.theme-storefront .acc-main .checkout-section-head > svg,
    body.theme-storefront .acc-main .checkout-section-head > i { width: 38px; height: 38px; flex-basis: 38px; padding: 9px; border-radius: 11px; }
    body.theme-storefront .sf-order-confirmation { padding-inline: 12px; }
    body.theme-storefront .sf-order-confirmation .checkout-step-card { padding: 15px; }
    body.theme-storefront .sf-order-confirmation h1 { font-size: 22px; }
}

/* v9.440 — gavetas com descoberta rápida e confiança antes da finalização. */
body.theme-storefront .sf-menu-layer .sf-backdrop,
body.theme-storefront .sf-layer .sf-backdrop { background: rgba(8, 18, 38, .58); }
body.theme-storefront .sf-menu-drawer {
    width: min(420px, 94vw);
    border-right: 1px solid #dbe5f2;
    border-radius: 0 18px 18px 0;
    background: linear-gradient(180deg, #f6f9fe 0%, #fff 100%);
    box-shadow: 18px 0 48px rgba(8, 24, 54, .2);
}
body.theme-storefront .sf-menu-head {
    min-height: 78px;
    gap: 12px;
    padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 12px;
    background: linear-gradient(135deg, #0c5fdf 0%, #0752c8 56%, #123b88 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 8px 20px rgba(11,69,160,.17);
}
body.theme-storefront .sf-menu-head-copy { display: grid; min-width: 0; gap: 3px; }
body.theme-storefront .sf-menu-hi { gap: 10px; color: #fff; font: 750 17px/1.2 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body.theme-storefront .sf-menu-hi > svg { width: 34px; height: 34px; padding: 8px; flex: 0 0 34px; border: 1px solid rgba(255,255,255,.22); border-radius: 10px; background: rgba(255,255,255,.14); }
body.theme-storefront .sf-menu-hint { padding-left: 44px; color: rgba(255,255,255,.78); font-size: 11.5px; line-height: 1.3; }
body.theme-storefront .sf-menu-head-actions { flex: none; }
body.theme-storefront .sf-menu-head .sf-x { width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.2); border-radius: 12px; background: rgba(255,255,255,.12); color: #fff; box-shadow: none; }
body.theme-storefront .sf-menu-head .sf-x svg { width: 19px; height: 19px; }
body.theme-storefront .sf-menu-scroll { min-height: 0; padding: 10px 14px calc(18px + env(safe-area-inset-bottom, 0px)); overscroll-behavior: contain; scrollbar-gutter: stable; }
body.theme-storefront .sf-menu-search { position: sticky; top: 0; z-index: 2; margin: -2px -2px 8px; padding: 3px 2px 9px; background: linear-gradient(180deg, #f6f9fe 82%, rgba(246,249,254,0)); }
body.theme-storefront .sf-menu-search-field { display: grid; grid-template-columns: 20px minmax(0,1fr) 34px; align-items: center; gap: 8px; min-height: 48px; padding: 4px 5px 4px 12px; border: 1px solid #d6e0ed; border-radius: 12px; background: #fff; color: #71819a; box-shadow: inset 0 1px 2px rgba(13,27,62,.06), 0 3px 10px rgba(15,23,42,.045); }
body.theme-storefront .sf-menu-search-field > svg { width: 18px; height: 18px; }
body.theme-storefront .sf-menu-search-field input { min-width: 0; width: 100%; height: 38px; padding: 0; border: 0; outline: 0; background: transparent; color: #16243a; font: 500 13.5px/1.3 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; box-shadow: none; }
body.theme-storefront .sf-menu-search-field input::placeholder { color: #8492a8; opacity: 1; }
body.theme-storefront .sf-menu-search-field:focus-within { border-color: #4385ef; box-shadow: 0 0 0 3px rgba(37,99,235,.12), inset 0 1px 2px rgba(13,27,62,.04); }
body.theme-storefront .sf-menu-search-field button { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid #cfe0fb; border-radius: 9px; background: linear-gradient(180deg,#fff,#edf4ff); color: #1d5ecb; box-shadow: inset 0 1px 0 #fff, 0 1px 3px rgba(13,27,62,.08); }
body.theme-storefront .sf-menu-search-field button svg { width: 17px; height: 17px; }
body.theme-storefront .sf-menu-category-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 4px 5px 8px; color: #7b8aa0; font-size: 11px; }
body.theme-storefront .sf-menu-category-meta [data-sf-menu-count] { color: #425574; font-weight: 700; }
body.theme-storefront .sf-menu-list { display: grid; gap: 1px; }
body.theme-storefront .sf-menu-list a { min-height: 44px; padding: 8px 10px 8px 12px; border: 1px solid transparent; border-bottom-color: #e9eef5; border-radius: 9px; background: transparent; color: #1d2a40; font: 600 13.5px/1.3 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body.theme-storefront .sf-menu-list a:hover,
body.theme-storefront .sf-menu-list a:focus-visible { border-color: #dce8f8; background: #edf4ff; color: #174db5; outline-offset: 1px; }
body.theme-storefront .sf-menu-list a:active { background: #e3efff; }
body.theme-storefront .sf-menu-list a > span { min-width: 0; overflow-wrap: anywhere; }
body.theme-storefront .sf-menu-category-arrow { width: 16px; height: 16px; margin-left: auto; flex: 0 0 16px; color: #8da1bd; }
body.theme-storefront button.sp-sec-link { padding: 0; border: 0; background: transparent; font: inherit; cursor: pointer; }
body.theme-storefront .sf-menu-list summary { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 10px 8px 12px; border: 1px solid transparent; border-bottom-color: #e9eef5; border-radius: 9px; background: transparent; color: #1d2a40; font: 600 13.5px/1.3 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; cursor: pointer; list-style: none; }
body.theme-storefront .sf-menu-list summary::-webkit-details-marker { display: none; }
body.theme-storefront .sf-menu-list summary > span { min-width: 0; overflow-wrap: anywhere; }
body.theme-storefront .sf-menu-list summary:hover,
body.theme-storefront .sf-menu-list summary:focus-visible { border-color: #dce8f8; background: #edf4ff; color: #174db5; outline-offset: 1px; }
body.theme-storefront .sf-menu-branch[open] > summary { border-color: #dce8f8; background: #edf4ff; color: #174db5; }
body.theme-storefront .sf-menu-branch[open] > summary .sf-menu-category-arrow { transform: rotate(90deg); }
body.theme-storefront .sf-menu-sub { display: grid; gap: 1px; margin: 2px 0 5px; padding: 0 0 0 12px; list-style: none; }
body.theme-storefront .sf-menu-sub a,
body.theme-storefront .sf-menu-sub summary { min-height: 38px; padding: 7px 9px 7px 12px; border-bottom-color: #eef2f7; border-radius: 8px; font-size: 12.8px; font-weight: 600; }
body.theme-storefront .sf-menu-sub .sf-menu-sub-all { color: #1d5ecb; font-weight: 750; }
body.theme-storefront .sf-menu-more { margin-left: 4px; color: #8da1bd; font-size: 10.5px; font-weight: 700; }
body.theme-storefront .sf-menu-empty { margin: 8px 0 12px; padding: 14px; border: 1px dashed #d3deeb; border-radius: 11px; background: #fff; color: #60718b; font-size: 12.5px; line-height: 1.45; text-align: center; }
body.theme-storefront .sf-menu-section-title { margin-top: 13px; padding: 14px 5px 8px; border-top: 1px solid #e2e9f2; color: #536782; font-size: 10.5px; font-weight: 750; letter-spacing: .075em; }

body.theme-storefront .sf-drawer {
    width: min(460px, 100vw);
    border-left: 1px solid #dce5f0;
    background: linear-gradient(180deg, #fff 0%, #fbfcfe 100%);
    box-shadow: -20px 0 48px rgba(8,24,54,.2);
}
body.theme-storefront .sf-drawer-head { min-height: 78px; gap: 10px; padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 12px; background: linear-gradient(180deg,#fff,#f8fafd); }
body.theme-storefront .sf-drawer-title { display: flex; align-items: center; gap: 11px; min-width: 0; flex: 1; }
body.theme-storefront .sf-drawer-title-icon { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px; border: 1px solid #cfe0f7; border-radius: 12px; background: linear-gradient(180deg,#f7fbff,#eaf2ff); color: #1e5fca; box-shadow: inset 0 1px 0 #fff, 0 2px 5px rgba(13,27,62,.06); }
body.theme-storefront .sf-drawer-title-icon svg { display: block; width: 21px; height: 21px; }
body.theme-storefront .sf-drawer-title-copy { display: grid; min-width: 0; gap: 3px; }
body.theme-storefront .sf-drawer-head h2 { margin: 0; color: #14223a; font: 800 16px/1.2 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: -.015em; }
body.theme-storefront .sf-drawer-title-copy small { color: #74839a; font-size: 11px; line-height: 1.25; }
body.theme-storefront .sf-drawer-head > .sf-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 28px; padding: 0 8px; border: 1px solid #d4e2f5; border-radius: 8px; background: #edf4ff; color: #1c57b4; font: 750 12px/1 Inter, sans-serif; }
body.theme-storefront .sf-drawer-head > .sf-x { width: 42px; height: 42px; flex: 0 0 42px; border: 1px solid #e1e7f0; border-radius: 12px; background: #fff; color: #52627a; box-shadow: 0 2px 7px rgba(15,23,42,.06); }
body.theme-storefront .sf-lines { min-height: 0; padding: 14px 14px 18px; overscroll-behavior: contain; scrollbar-gutter: stable; }
body.theme-storefront .sf-line { grid-template-columns: 72px minmax(0,1fr) 36px; align-items: start; gap: 10px; margin: 0 0 10px; padding: 10px; border: 1px solid #e2e9f2; border-radius: 13px; background: linear-gradient(160deg,#fff,#f9fbfe); box-shadow: 0 1px 2px rgba(15,23,42,.035), 0 4px 12px rgba(15,23,42,.035); }
body.theme-storefront .sf-line:last-child { margin-bottom: 0; }
body.theme-storefront .sf-line-img { width: 72px; height: 72px; border: 1px solid #e6edf6; border-radius: 10px; background: #f4f7fb; color: #7890b0; }
body.theme-storefront .sf-line-img img { display: block; width: 100%; height: 100%; object-fit: contain; }
body.theme-storefront .sf-line-img-fallback { display: block; width: 28px; height: 28px; }
body.theme-storefront .sf-line-name { color: #1b293f; font-size: 13px; font-weight: 700; line-height: 1.35; }
body.theme-storefront .sf-line-var { color: #64748b; font-size: 11.5px; line-height: 1.3; }
body.theme-storefront .sf-line-unit { color: #77869c; font-size: 11px; line-height: 1.25; }
body.theme-storefront .sf-line-row { flex-wrap: wrap; gap: 7px; margin-top: 5px; padding-top: 2px; }
body.theme-storefront .sf-line-row strong { color: #13223b; font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
body.theme-storefront .sf-step { border-color: #dce5f0; border-radius: 9px; box-shadow: inset 0 1px 2px rgba(13,27,62,.045); }
body.theme-storefront .sf-step button { width: 34px; height: 36px; background: #f4f7fb; color: #33445f; font-size: 18px; }
body.theme-storefront .sf-step output { min-width: 30px; color: #24334b; font-size: 13px; }
body.theme-storefront .sf-trash { width: 36px; height: 36px; border: 1px solid #e5ebf3; background: #fff; color: #7f8da2; box-shadow: 0 1px 3px rgba(15,23,42,.05); }
body.theme-storefront .sf-trash:hover:not(:disabled) { border-color: #efc7cb; background: #fff3f3; color: #b42332; }
body.theme-storefront .sf-drawer-foot { gap: 9px; padding: 14px 16px calc(16px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid #e0e7f0; background: linear-gradient(180deg,#fff 0%,#f8fafd 100%); box-shadow: 0 -8px 20px rgba(15,23,42,.04); }
body.theme-storefront .sf-drawer-foot .sf-sum { color: #5e6f87; font-size: 13px; }
body.theme-storefront .sf-drawer-foot .sf-sum strong { color: #14233c; font-size: 19px; font-weight: 800; }
body.theme-storefront .sf-drawer-foot .sf-sum--pix strong { color: #14824f; }
body.theme-storefront .sf-drawer-foot > small { color: #708098; font-size: 11px; line-height: 1.35; }
body.theme-storefront .sf-drawer-trust { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border: 1px solid #dce9f7; border-radius: 10px; background: #f2f7fd; color: #526781; font-size: 11px; line-height: 1.4; }
body.theme-storefront .sf-drawer-trust svg { display: block; width: 16px; height: 16px; flex: 0 0 16px; color: #2672ca; }
body.theme-storefront .sf-drawer .sf-btn { min-height: 46px; height: auto; border-radius: 11px; font: 750 13.5px/1.2 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body.theme-storefront .sf-drawer .sf-btn-soft { border: 1px solid #dce4ef; background: #fff; color: #43536c; box-shadow: inset 0 1px 0 #fff, 0 1px 3px rgba(15,23,42,.04); }
body.theme-storefront .sf-drawer .sf-empty { padding: 24px 20px; }
body.theme-storefront .sf-drawer .sf-empty-ico { width: 54px; height: 54px; padding: 12px; border: 1px solid #dce8f6; border-radius: 15px; background: linear-gradient(180deg,#f7fbff,#edf4ff); color: #5e83b4; }

@media (max-width: 380px) {
    body.theme-storefront .sf-menu-drawer { width: min(360px, 94vw); }
    body.theme-storefront .sf-line { grid-template-columns: 60px minmax(0,1fr) 34px; gap: 8px; padding: 8px; }
    body.theme-storefront .sf-line-img { width: 60px; height: 60px; }
    body.theme-storefront .sf-line-row strong { font-size: 13px; }
    body.theme-storefront .sf-drawer-foot { padding-inline: 12px; }
}

body.theme-storefront .sf-ship-status { display: flex; align-items: flex-start; gap: 7px; margin: 8px 0 0; padding: 9px 11px; border: 1px solid #dce7f4; border-radius: 9px; background: #f6f9fd; color: #526781; font-size: 11.5px; line-height: 1.4; }
body.theme-storefront .sf-ship-status[hidden] { display: none; }
body.theme-storefront .sf-ship-status[data-state="success"] { border-color: #cfe9dc; background: #f1faf5; color: #276849; }
body.theme-storefront .sf-ship-status[data-state="error"] { border-color: #f0d2d2; background: #fff7f6; color: #9f3e3e; }
body.theme-storefront #cart-finish-link[aria-disabled="true"] { opacity: .66; cursor: progress; filter: saturate(.72); }
body.theme-storefront .ck-shipping-refresh { display: flex; align-items: flex-start; gap: 7px; margin: -3px 0 13px; padding: 9px 11px; border: 1px solid #dbe7f5; border-radius: 10px; background: #f3f8ff; color: #4e6582; font-size: 12px; line-height: 1.4; }
body.theme-storefront .ck-shipping-refresh svg { width: 15px; height: 15px; flex: 0 0 15px; color: #2873cf; }

/* Login premium: contraste de marca, foco no acesso e responsividade sem painel vazio. */
body.theme-storefront .sf-auth-wrap {
    width: 100%;
    max-width: none;
    padding: 24px 20px 38px;
    background: #f1f6ff;
    background-image: radial-gradient(ellipse at 15% 14%, rgba(56,128,255,.13), transparent 32%), radial-gradient(ellipse at 88% 78%, rgba(56,128,255,.08), transparent 28%), linear-gradient(180deg,#f6f9ff 0%,#eef4fd 100%);
}
body.theme-storefront .sf-auth-layout { width: min(100%, 1080px); margin: 16px auto 28px; }
body.theme-storefront .sf-auth-layout.is-login {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(390px, 440px);
    align-items: stretch;
    gap: clamp(22px, 4vw, 48px);
}
body.theme-storefront .sf-auth-layout.is-register { display: flex; justify-content: center; }
body.theme-storefront .sf-auth-story {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-width: 0;
     min-height: 520px;
     padding: clamp(32px, 4.2vw, 48px);
     border: 1px solid rgba(154,194,255,.34);
     border-radius: 26px;
    background: radial-gradient(circle at 85% 18%, rgba(84,157,255,.27), transparent 32%), linear-gradient(140deg,#0b1930 0%,#102c53 57%,#124887 100%);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 18px 45px rgba(16,48,96,.2);
}
body.theme-storefront .sf-auth-story::after { content: ''; position: absolute; z-index: -1; right: -90px; bottom: -130px; width: 330px; height: 330px; border: 1px solid rgba(165,204,255,.16); border-radius: 50%; box-shadow: 0 0 0 30px rgba(165,204,255,.035), 0 0 0 70px rgba(165,204,255,.025); pointer-events: none; }
body.theme-storefront .sf-auth-story-kicker { display: inline-flex; align-items: center; gap: 8px; color: #b7d4ff; font-size: 11px; font-weight: 750; letter-spacing: .12em; }
body.theme-storefront .sf-auth-story-kicker svg { width: 16px; height: 16px; }
body.theme-storefront .sf-auth-story-mark { display: grid; place-items: center; width: 64px; height: 64px; margin: 36px 0 22px; border: 1px solid rgba(180,211,255,.46); border-radius: 18px; background: linear-gradient(145deg,rgba(255,255,255,.2),rgba(98,158,245,.14)); color: #d3e6ff; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 9px 24px rgba(0,0,0,.14); }
body.theme-storefront .sf-auth-story-mark svg { width: 36px; height: 36px; }
body.theme-storefront .sf-auth-story h2 { max-width: 520px; margin: 0; color: #fff; font: 820 clamp(30px,3.1vw,40px)/1.08 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: -.04em; }
body.theme-storefront .sf-auth-story-lead { max-width: 490px; margin: 14px 0 26px; color: #cbdaf0; font-size: 15.5px; line-height: 1.58; }
body.theme-storefront .sf-auth-story-points { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
body.theme-storefront .sf-auth-story-points li { display: grid; grid-template-columns: 34px minmax(0,1fr); align-items: start; gap: 11px; padding: 13px 0; border-top: 1px solid rgba(203,220,244,.16); }
body.theme-storefront .sf-auth-story-number { padding-top: 1px; color: #85b8ff; font: 750 11px/1.4 Inter, sans-serif; font-variant-numeric: tabular-nums; }
body.theme-storefront .sf-auth-story-points li > span:last-child { display: grid; gap: 3px; }
body.theme-storefront .sf-auth-story-points b { color: #f5f8ff; font-size: 14px; font-weight: 750; }
body.theme-storefront .sf-auth-story-points small { color: #bfd0e7; font-size: 12.5px; line-height: 1.45; }
body.theme-storefront .sf-auth-story-foot { display: flex; align-items: flex-start; gap: 8px; margin: auto 0 0; padding-top: 18px; color: #a9bfdc; font-size: 11px; line-height: 1.45; }
body.theme-storefront .sf-auth-story-foot svg { width: 16px; height: 16px; flex: 0 0 16px; color: #81b7ff; }
body.theme-storefront .sf-auth-page.is-login { display: flex; align-items: center; justify-content: stretch; min-width: 0; margin: 0; }
body.theme-storefront .sf-auth-page.is-login .checkout-step-card {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 36px 34px 30px;
    border: 1px solid #dce6f2;
    border-radius: 22px;
    background: linear-gradient(160deg,#fff 0%,#fbfdff 100%);
    box-shadow: 0 2px 4px rgba(15,23,42,.035), 0 20px 48px rgba(29,65,117,.12);
}
body.theme-storefront .sf-auth-page.is-login .sf-login { width: 100%; max-width: 370px; margin: 0 auto; }
body.theme-storefront .sf-auth-page.is-login .sf-login-top { margin-bottom: 22px; text-align: left; }
body.theme-storefront .sf-auth-page.is-login .sf-login-badge { display: inline-grid; place-items: center; width: 48px; height: 48px; margin: 0 0 18px; border: 1px solid #a9c9f2; border-radius: 14px; background: linear-gradient(145deg,#e9f3ff,#d2e6ff); color: #1559b6; box-shadow: inset 0 1px 0 #fff, 0 4px 11px rgba(23,99,196,.12); }
body.theme-storefront .sf-auth-page.is-login .sf-login-badge svg { width: 25px; height: 25px; color: #1559b6; }
body.theme-storefront .sf-auth-page.is-login .sf-login-eyebrow { display: block; margin-bottom: 7px; color: #2867b7; font-size: 11px; font-weight: 850; letter-spacing: .13em; }
body.theme-storefront .sf-auth-page.is-login .sf-login-title { color: #14243c; font: 820 27px/1.14 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: -.035em; }
body.theme-storefront .sf-auth-page.is-login .sf-login-sub { margin-top: 7px; color: #64758d; font-size: 13.5px; line-height: 1.45; }
body.theme-storefront .sf-auth-page.is-login .sf-oauth { min-height: 46px; border-color: #d8e1ec; border-radius: 11px; font-size: 13.5px; box-shadow: 0 1px 2px rgba(15,23,42,.035); }
body.theme-storefront .sf-auth-page.is-login .sf-or { margin: 16px 0; color: #8290a5; font-size: 11.5px; }
body.theme-storefront .sf-auth-page.is-login .sf-field { margin-bottom: 15px; }
body.theme-storefront .sf-auth-page.is-login .sf-field > label { color: #35465f; font-size: 12.5px; font-weight: 700; }
body.theme-storefront .sf-auth-page.is-login .sf-field-box { min-height: 48px; padding: 0 12px; border-color: #d4dfed; border-radius: 11px; background: #fff; box-shadow: inset 0 1px 2px rgba(13,27,62,.045), 0 1px 1px rgba(255,255,255,.9); }
body.theme-storefront .sf-auth-page.is-login .sf-field-box:focus-within { border-color: #3980e4; box-shadow: 0 0 0 3px rgba(47,111,214,.14), inset 0 1px 2px rgba(13,27,62,.035); }
body.theme-storefront .sf-auth-page.is-login .sf-field-box input { min-height: 46px; color: #14243c; font-size: 15px; }
body.theme-storefront .sf-auth-page.is-login .sf-field-box input::placeholder { color: #9aa8bb; }
body.theme-storefront .sf-auth-page.is-login .sf-row-between { margin: 4px 0 18px; }
body.theme-storefront .sf-auth-page.is-login .sf-remember { color: #586983; font-size: 12px; }
body.theme-storefront .sf-auth-page.is-login .sf-forgot { color: #1d5fb9; font-size: 12px; font-weight: 700; }
body.theme-storefront .sf-auth-page.is-login .sf-btn-primary { min-height: 52px; border: 2px solid color-mix(in srgb,var(--sp-blue,#0866f5) 42%,#b9d5ff); border-radius: 13px; background-color: var(--sp-blue,#0866f5); background-image: linear-gradient(180deg,color-mix(in srgb,var(--sp-blue,#0866f5) 72%,#061b3c),var(--sp-blue,#0866f5) 58%,color-mix(in srgb,var(--sp-blue,#0866f5) 82%,#fff)); box-shadow: inset 0 1px 1px rgba(0,0,0,.34), inset 0 -1px 0 rgba(255,255,255,.22), 0 6px 15px rgba(18,89,188,.22); font: 780 15px/1.2 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body.theme-storefront .sf-auth-page.is-login .sf-btn-primary:hover:not(:disabled) { filter: brightness(1.045); }
body.theme-storefront .sf-auth-page.is-login .sf-btn-primary:focus-visible { outline: 3px solid rgba(47,111,214,.38); outline-offset: 3px; }
body.theme-storefront .sf-auth-page.is-login .sf-switch { margin-top: 18px; padding-top: 15px; border-top: 1px solid #edf1f6; color: #687990; font-size: 12.5px; }
body.theme-storefront .sf-auth-page.is-login .sf-switch a { color: #1d5fb9; font-weight: 750; }

@media (max-width: 991.98px) {
    body.theme-storefront .sf-auth-layout.is-login { grid-template-columns: minmax(0,1fr) minmax(350px,410px); gap: 22px; }
    body.theme-storefront .sf-auth-story { padding: 28px; }
    body.theme-storefront .sf-auth-story h2 { font-size: 29px; }
    body.theme-storefront .sf-auth-page.is-login .checkout-step-card { padding: 28px 24px 24px; }
}
@media (max-width: 767.98px) {
    body.theme-storefront .sf-auth-wrap { padding: 12px 12px 28px; background-image: radial-gradient(ellipse at 15% 14%,rgba(56,128,255,.11),transparent 32%),linear-gradient(180deg,#f4f8ff,#eef4fd); }
    body.theme-storefront .sf-auth-layout.is-login { grid-template-columns: minmax(0,1fr); gap: 12px; margin: 10px auto 20px; }
    body.theme-storefront .sf-auth-page.is-login { order: 1; }
    body.theme-storefront .sf-auth-story { order: 2; min-height: 0; padding: 17px 18px; border-radius: 16px; }
    body.theme-storefront .sf-auth-story-mark { display: none; }
    body.theme-storefront .sf-auth-story h2 { margin-top: 12px; font-size: 21px; }
    body.theme-storefront .sf-auth-story-lead { margin: 6px 0 0; font-size: 12.5px; line-height: 1.45; }
    body.theme-storefront .sf-auth-story-points,
    body.theme-storefront .sf-auth-story-foot { display: none; }
    body.theme-storefront .sf-auth-page.is-login .checkout-step-card { padding: 23px 20px 19px; border-radius: 17px; }
    body.theme-storefront .sf-auth-page.is-login .sf-login-top { margin-bottom: 18px; }
    body.theme-storefront .sf-auth-page.is-login .sf-login-badge { width: 38px; height: 38px; margin-bottom: 13px; border-radius: 11px; }
    body.theme-storefront .sf-auth-page.is-login .sf-login-title { font-size: 22px; }
    body.theme-storefront .sf-auth-page.is-login .sf-login-sub { font-size: 12.5px; }
    body.theme-storefront .sf-auth-page.is-login .sf-field-box { min-height: 48px; }
    body.theme-storefront .sf-auth-page.is-login .sf-field-box input { min-height: 46px; font-size: 16px; }
    body.theme-storefront .sf-auth-page.is-login .sf-row-between { gap: 10px; }
    body.theme-storefront .sf-auth-wrap .sf-auth-choice { margin-bottom: 18px; }
    body.theme-storefront .sf-auth-wrap .sf-auth-choice a { min-height: 68px; }
}
@media (max-width: 359.98px) {
    body.theme-storefront .sf-auth-wrap { padding-inline: 8px; }
    body.theme-storefront .sf-auth-page.is-login .checkout-step-card { padding: 20px 15px 17px; }
    body.theme-storefront .sf-auth-page.is-login .sf-row-between { align-items: flex-start; flex-direction: column; }
}

body.theme-storefront .sf-auth-choice { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; width: 100%; margin: 0 0 25px; }
body.theme-storefront .sf-auth-choice a { display: grid; grid-template-columns: 40px minmax(0,1fr) 16px; align-items: center; gap: 9px; min-width: 0; min-height: 82px; padding: 11px 10px; border: 1px solid #dce5f0; border-radius: 14px; background: linear-gradient(160deg,#fff,#f8faff); color: #465770; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; text-decoration: none; box-shadow: 0 3px 9px rgba(15,35,68,.055), inset 0 1px 0 #fff; transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease; }
body.theme-storefront .sf-auth-choice a:hover { border-color: #b8d0f0; background: #f7faff; color: #244a7e; }
body.theme-storefront .sf-auth-choice a.is-current { border-color: #8db8ed; background: linear-gradient(150deg,#f8fbff,#eaf3ff); color: #154f9f; box-shadow: inset 0 1px 0 #fff, 0 4px 12px rgba(31,95,180,.11); }
body.theme-storefront .sf-auth-choice-icon { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid #cbdcf1; border-radius: 12px; background: linear-gradient(145deg,#f5f9ff,#e5effd); color: #426b9f; box-shadow: inset 0 1px 0 #fff; }
body.theme-storefront .sf-auth-choice a.is-current .sf-auth-choice-icon { border-color: #c4dafa; background: linear-gradient(180deg,#fff,#e8f2ff); color: #1761bb; }
body.theme-storefront .sf-auth-choice-icon svg { width: 21px; height: 21px; }
body.theme-storefront .sf-auth-choice-copy { display: grid; min-width: 0; gap: 3px; }
body.theme-storefront .sf-auth-choice-copy b { color: inherit; font: 800 13.5px/1.2 Inter, sans-serif; white-space: nowrap; }
body.theme-storefront .sf-auth-choice-copy small { color: #77869b; font: 550 10.5px/1.28 Inter, sans-serif; overflow-wrap: anywhere; }
body.theme-storefront .sf-auth-choice-arrow { width: 16px; height: 16px; color: #879ab4; }
body.theme-storefront .sf-auth-choice a.is-current .sf-auth-choice-arrow { color: #2469bd; }
body.theme-storefront .sf-auth-choice a:focus-visible { outline: 3px solid rgba(47,111,214,.34); outline-offset: 2px; }
body.theme-storefront .sf-auth-wrap .sf-auth-page .sf-switch { display: none; }

/* ==========================================================================
   v9.466 — PRIME HD DA ÁREA DO CLIENTE
   Régua única para sidebar, título, abas, busca, cards de pedido, jornada,
   rodapé do pedido, botões, painéis, cupons, mensagens e formulários.
   Corrige também o rodapé que herdava 3px pretos do `border-style: solid`.
   ========================================================================== */

body.theme-storefront:has(.acc-layout) .acc-layout {
    max-width: 1180px;
    margin: 24px auto 48px;
    padding: 0 20px 96px;
    gap: 24px;
    grid-template-columns: 224px minmax(0, 1fr);
    align-items: start;
}

/* Sidebar */
body.theme-storefront:has(.acc-layout) .acc-nav {
    position: sticky;
    top: 98px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px;
    border: 1px solid #e3e9f2;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 24px rgba(15, 23, 42, .04);
}

body.theme-storefront:has(.acc-layout) .acc-nav a,
body.theme-storefront:has(.acc-layout) .acc-nav .account-nav-logout {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: #475569;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

body.theme-storefront:has(.acc-layout) .acc-nav a:hover {
    background: #f4f7fb;
    color: #0f172a;
}

body.theme-storefront:has(.acc-layout) .acc-nav a.active {
    background: #eef4ff;
    border-color: #dce8fb;
    color: #1d4ed8;
    font-weight: 700;
    box-shadow: inset 0 1px 2px rgba(13, 27, 62, .06);
}

body.theme-storefront:has(.acc-layout) .acc-nav .acc-ico {
    width: 22px;
    height: 22px;
    flex: none;
    opacity: .85;
    shape-rendering: geometricPrecision;
}

/* Tipografia de alta resolução: Inter variável, negritos firmes, itálico
   nos metadados e números tabulares. Contraste mínimo 4,5:1 no texto. */
body.theme-storefront:has(.acc-layout) :is(.acc-main, .acc-nav) {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-kerning: normal;
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

body.theme-storefront:has(.acc-layout) .acc-main {
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 13.5px;
    line-height: 1.55;
    color: #334155;
}

body.theme-storefront:has(.acc-layout) .acc-main :is(h1, h2, h3) { text-wrap: balance; }
body.theme-storefront:has(.acc-layout) .acc-main p { text-wrap: pretty; }

body.theme-storefront:has(.acc-layout) .acc-main :is(b, strong) {
    font-weight: 800;
    color: #0f172a;
}

body.theme-storefront:has(.acc-layout) .acc-main :is(em, .acc-italic) {
    font-style: italic;
    font-weight: 550;
    color: #475569;
}

/* Títulos na Poppins (a fonte de display da loja): contraste de família e
   peso 700 real, em vez de negrito sintetizado. */
body.theme-storefront:has(.acc-layout) :is(
    .acc-main .page-title,
    .acc-main h1.page-title,
    .acc-order header b,
    .dash-tile b,
    .dash-card-head h2,
    .acc-panel-head h2,
    .acc-main h2,
    .acc-main h3
) {
    font-family: Poppins, Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-weight: 700;
    letter-spacing: -.02em;
}

body.theme-storefront:has(.acc-layout) .acc-order header .text-muted {
    font-style: italic;
    font-weight: 600;
    letter-spacing: .01em;
}

body.theme-storefront:has(.acc-layout) :is(.acc-order footer strong, .acc-order .acc-money, .acc-coupon strong, .acc-step-label) {
    font-variant-numeric: tabular-nums;
}

body.theme-storefront:has(.acc-layout) .acc-main :is(.text-muted, .acc-sub) { color: #64748b; }

body.theme-storefront:has(.acc-layout) .acc-main .acc-step-dot svg {
    width: 20px;
    height: 20px;
    display: block;
    shape-rendering: geometricPrecision;
}

body.theme-storefront:has(.acc-layout) .acc-timeline-dot svg { shape-rendering: geometricPrecision; }

body.theme-storefront:has(.acc-layout) .acc-steps .is-todo .acc-step-label { color: #64748b; }

body.theme-storefront:has(.acc-layout) .acc-nav form {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #edf1f6;
}

body.theme-storefront:has(.acc-layout) .acc-nav .account-nav-logout {
    width: 100%;
    justify-content: flex-start;
    color: #b91c1c;
}

/* Título e abas */
body.theme-storefront:has(.acc-layout) .acc-main > .page-title,
body.theme-storefront:has(.acc-layout) .acc-main > h1.page-title {
    margin: 0 0 16px;
    color: #0f172a;
    font-size: 26px;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -.03em;
}

body.theme-storefront:has(.acc-layout) .acc-toolbar {
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

body.theme-storefront:has(.acc-layout) .acc-tabs {
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
}

body.theme-storefront:has(.acc-layout) .acc-tabs::-webkit-scrollbar { display: none; }

body.theme-storefront:has(.acc-layout) .acc-tabs a {
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid #dbe3ef;
    border-radius: 10px;
    background: #fff;
    color: #41516a;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 1px 1px rgba(15, 23, 42, .03);
}

body.theme-storefront:has(.acc-layout) .acc-tabs a.active {
    border-color: #cfe0ff;
    background: #eef4ff;
    color: #1d4ed8;
    box-shadow: inset 0 1px 2px rgba(13, 27, 62, .06);
}

body.theme-storefront:has(.acc-layout) .acc-tabs a span {
    min-width: 20px;
    padding: 1px 7px;
    border-radius: 6px;
    background: #e4ebf5;
    color: #475569;
    font-size: 11px;
    font-weight: 800;
}

body.theme-storefront:has(.acc-layout) .acc-tabs a.active span {
    background: rgba(37, 99, 235, .12);
    color: #174db5;
}

/* Busca */
body.theme-storefront:has(.acc-layout) .acc-search {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: auto;
}

body.theme-storefront:has(.acc-layout) .acc-search > svg {
    flex: none;
    width: 18px;
    height: 18px;
    color: #64748b;
}

body.theme-storefront:has(.acc-layout) .acc-search input {
    flex: 1 1 auto;
    min-width: 240px;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid #d6deea;
    border-radius: 10px;
    background: #fff;
    color: #16202f;
    font-size: 13px;
    box-shadow: inset 0 1px 2px rgba(13, 27, 62, .06);
    transition: border-color .15s ease, box-shadow .15s ease;
}

body.theme-storefront:has(.acc-layout) .acc-search input:focus {
    border-color: #0866f5;
    outline: 0;
    box-shadow: inset 0 1px 2px rgba(13, 27, 62, .05), 0 0 0 3px rgba(0, 102, 255, .14);
}

body.theme-storefront:has(.acc-layout) .acc-search i,
body.theme-storefront:has(.acc-layout) .acc-search svg {
    color: #64748b;
}

/* Cards de pedido, cupom, painel, mensagens e lojas */
body.theme-storefront:has(.acc-layout) .acc-order,
body.theme-storefront:has(.acc-layout) .acc-panel,
body.theme-storefront:has(.acc-layout) .acc-coupon,
body.theme-storefront:has(.acc-layout) .acc-thread,
body.theme-storefront:has(.acc-layout) .acc-newmsg,
body.theme-storefront:has(.acc-layout) .acc-store {
    padding: 18px;
    margin: 0 0 14px;
    border: 1px solid #e4eaf3;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 26px rgba(15, 23, 42, .045);
}

body.theme-storefront:has(.acc-layout) .acc-order {
    transition: border-color .15s ease, box-shadow .15s ease;
}

body.theme-storefront:has(.acc-layout) .acc-order:hover {
    border-color: #cfdcf0;
    box-shadow: 0 2px 4px rgba(15, 23, 42, .05), 0 14px 30px rgba(15, 23, 42, .06);
}

body.theme-storefront:has(.acc-layout) .acc-order header {
    align-items: flex-start;
    gap: 12px;
}

body.theme-storefront:has(.acc-layout) .acc-order header b {
    color: #0f172a;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -.01em;
}

body.theme-storefront:has(.acc-layout) .acc-order header .text-muted {
    color: #64748b;
    font-size: 12px;
}

body.theme-storefront:has(.acc-layout) .acc-status-badge {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 10px;
    border: 1px solid rgba(100, 116, 139, .16);
    border-radius: 8px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: .02em;
    white-space: normal;
}

body.theme-storefront:has(.acc-layout) .acc-order-items {
    margin: 6px 0 14px;
    color: #4b5563;
    font-size: 13px;
    line-height: 1.5;
}

/* Jornada do pedido */
body.theme-storefront:has(.acc-layout) .acc-steps { margin: 8px 0 2px; }

body.theme-storefront:has(.acc-layout) .acc-steps::before {
    top: 15px;
    height: 3px;
    background: #e3e9f2;
}

body.theme-storefront:has(.acc-layout) .acc-steps::after {
    top: 15px;
    height: 3px;
    background: linear-gradient(90deg, #0866f5, #3b82f6);
}

body.theme-storefront:has(.acc-layout) .acc-step-dot {
    width: 32px;
    height: 32px;
    border: 2px solid #dce4f0;
    background: #fff;
    color: #94a3b8;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    animation: none;
}

body.theme-storefront:has(.acc-layout) .acc-steps .is-done .acc-step-dot {
    background: #e8f7ef;
    border-color: #b7e4c9;
    color: #0d8a4f;
}

body.theme-storefront:has(.acc-layout) .acc-steps .is-current .acc-step-dot {
    border-color: #0866f5;
    color: #0866f5;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(8, 102, 245, .10);
    animation: none;
}

body.theme-storefront:has(.acc-layout) .acc-step-label {
    color: #334155;
    font-size: 12px;
    font-weight: 700;
}

body.theme-storefront:has(.acc-layout) .acc-steps .is-todo .acc-step-label {
    color: #64748b;
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   v9.467 — cores suaves: cápsulas, selos, ícones e cards
   Paleta de apoio (fundo suave + tinta escura) para não perder contraste.
   -------------------------------------------------------------------------- */

body.theme-storefront:has(.acc-layout) .acc-nav a .acc-ico {
    box-sizing: content-box;
    padding: 5px;
    border-radius: 9px;
    background: #eef4ff;
    color: #2563eb;
    opacity: 1;
}

body.theme-storefront:has(.acc-layout) .acc-nav a:nth-of-type(8n+2) .acc-ico { background: #e9f8ef; color: #0d7a43; }
body.theme-storefront:has(.acc-layout) .acc-nav a:nth-of-type(8n+3) .acc-ico { background: #fff7e7; color: #9a5b00; }
body.theme-storefront:has(.acc-layout) .acc-nav a:nth-of-type(8n+4) .acc-ico { background: #f4efff; color: #6d28d9; }
body.theme-storefront:has(.acc-layout) .acc-nav a:nth-of-type(8n+5) .acc-ico { background: #fff0f3; color: #b4233a; }
body.theme-storefront:has(.acc-layout) .acc-nav a:nth-of-type(8n+6) .acc-ico { background: #e8f7fb; color: #0e7490; }
body.theme-storefront:has(.acc-layout) .acc-nav a:nth-of-type(8n+7) .acc-ico { background: #eef0ff; color: #4338ca; }
body.theme-storefront:has(.acc-layout) .acc-nav a:nth-of-type(8n+8) .acc-ico { background: #f1f5f9; color: #475569; }

body.theme-storefront:has(.acc-layout) .acc-nav a.active .acc-ico {
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .07);
}

body.theme-storefront:has(.acc-layout) .acc-nav .account-nav-logout .acc-ico {
    box-sizing: content-box;
    padding: 5px;
    border-radius: 9px;
    background: #fff0f3;
    color: #b4233a;
    opacity: 1;
}

/* Selo do pedido: cápsula com ponto de cor */
body.theme-storefront:has(.acc-layout) .acc-status-badge {
    gap: 6px;
    padding: 5px 11px;
    border-radius: 999px;
}

body.theme-storefront:has(.acc-layout) .acc-status-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    flex: none;
    border-radius: 50%;
    background: currentColor;
    opacity: .85;
}

/* Card de pedido: tom suave pelo status + fio de cor à esquerda */
body.theme-storefront:has(.acc-layout) .acc-order { background: linear-gradient(180deg, #fff 0%, #fbfdff 100%); }
body.theme-storefront:has(.acc-layout) .acc-order:has(.bg-warning-subtle) { --acc-tone: #b45309; --acc-tone-soft: #fff7e7; }
body.theme-storefront:has(.acc-layout) .acc-order:has(.bg-danger-subtle) { --acc-tone: #b4233a; --acc-tone-soft: #fff0f3; }
body.theme-storefront:has(.acc-layout) .acc-order:has(.bg-success-subtle) { --acc-tone: #0d7a43; --acc-tone-soft: #e9f8ef; }
body.theme-storefront:has(.acc-layout) .acc-order:has(.bg-primary-subtle) { --acc-tone: #2563eb; --acc-tone-soft: #eef4ff; }
body.theme-storefront:has(.acc-layout) .acc-order:has(.bg-secondary-subtle) { --acc-tone: #475569; --acc-tone-soft: #f1f5f9; }

body.theme-storefront:has(.acc-layout) .acc-order {
    box-shadow:
        inset 3px 0 0 var(--acc-tone-soft, #e4eaf3),
        0 1px 2px rgba(15, 23, 42, .04),
        0 10px 26px rgba(15, 23, 42, .045);
}

/* Abas e chips: cápsulas macias */
body.theme-storefront:has(.acc-layout) .acc-tabs a:not(.active):hover {
    border-color: #cfe0ff;
    background: #f8fbff;
    color: #1d4ed8;
}

body.theme-storefront:has(.acc-layout) .acc-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border: 1px solid #dce8fb;
    border-radius: 999px;
    background: #eef4ff;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 700;
}

/* Botão principal com profundidade suave */
body.theme-storefront:has(.acc-layout) .acc-btn.is-primary {
    background: linear-gradient(180deg, #2f7cf6 0%, #0866f5 100%);
    box-shadow: 0 4px 12px rgba(8, 102, 245, .22);
}

/* Atalhos do resumo (dash-tiles) com paleta por card */
body.theme-storefront:has(.acc-layout) .dash-tile {
    --acc-tone: #2563eb;
    --acc-tone-soft: #eef4ff;
    background: linear-gradient(180deg, #fff 0%, #fbfdff 100%);
    box-shadow:
        inset 0 3px 0 color-mix(in srgb, var(--acc-tone) 16%, transparent),
        0 1px 2px rgba(15, 23, 42, .04);
}

body.theme-storefront:has(.acc-layout) .dash-tile:nth-child(8n+1) { --acc-tone: #2563eb; --acc-tone-soft: #eef4ff; }
body.theme-storefront:has(.acc-layout) .dash-tile:nth-child(8n+2) { --acc-tone: #0d7a43; --acc-tone-soft: #e9f8ef; }
body.theme-storefront:has(.acc-layout) .dash-tile:nth-child(8n+3) { --acc-tone: #9a5b00; --acc-tone-soft: #fff7e7; }
body.theme-storefront:has(.acc-layout) .dash-tile:nth-child(8n+4) { --acc-tone: #b4233a; --acc-tone-soft: #fff0f3; }
body.theme-storefront:has(.acc-layout) .dash-tile:nth-child(8n+5) { --acc-tone: #6d28d9; --acc-tone-soft: #f4efff; }
body.theme-storefront:has(.acc-layout) .dash-tile:nth-child(8n+6) { --acc-tone: #0e7490; --acc-tone-soft: #e8f7fb; }
body.theme-storefront:has(.acc-layout) .dash-tile:nth-child(8n+7) { --acc-tone: #4338ca; --acc-tone-soft: #eef0ff; }
body.theme-storefront:has(.acc-layout) .dash-tile:nth-child(8n+8) { --acc-tone: #475569; --acc-tone-soft: #f1f5f9; }

body.theme-storefront:has(.acc-layout) .dash-tile-ico {
    background: var(--acc-tone-soft);
    color: var(--acc-tone);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc-tone) 10%, transparent);
}

body.theme-storefront:has(.acc-layout) .dash-tile:hover {
    border-color: color-mix(in srgb, var(--acc-tone) 24%, #e6ebf3);
}

body.theme-storefront:has(.acc-layout) .dash-badge {
    padding: 4px 11px;
    border-radius: 999px;
}

body.theme-storefront:has(.acc-layout) .dash-badge.is-wait { background: #fff7e7; color: #9a5b00; }
body.theme-storefront:has(.acc-layout) .dash-badge.is-info { background: #eef4ff; color: #1d4ed8; }
body.theme-storefront:has(.acc-layout) .dash-badge.is-ok { background: #e9f8ef; color: #0d7a43; }
body.theme-storefront:has(.acc-layout) .dash-badge.is-off { background: #f1f5f9; color: #475569; }

body.theme-storefront:has(.acc-layout) .dash-card {
    background: linear-gradient(180deg, #fff 0%, #fbfdff 100%);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 24px rgba(15, 23, 42, .04);
}

body.theme-storefront:has(.acc-layout) .dash-cta {
    background: linear-gradient(180deg, #2f7cf6 0%, #0866f5 100%);
    box-shadow: 0 4px 12px rgba(8, 102, 245, .20);
}

/* Cupons: código em cápsula e fita de cor */
body.theme-storefront:has(.acc-layout) .acc-coupon {
    background: linear-gradient(180deg, #fff 0%, #f8fbff 100%);
    border-top: 3px solid #dce8fb;
}

body.theme-storefront:has(.acc-layout) .acc-coupon.is-free { border-top-color: #b7e4c9; }

body.theme-storefront:has(.acc-layout) .acc-coupon-code {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 999px;
    background: #eef4ff;
    color: #1d4ed8;
    font-weight: 800;
}

body.theme-storefront:has(.acc-layout) .acc-coupon-off {
    display: inline-flex;
    align-items: center;
    padding: 4px 9px;
    border-radius: 999px;
    background: #e9f8ef;
    color: #0d7a43;
    font-weight: 800;
}

/* Estado vazio com selo de ícone */
body.theme-storefront:has(.acc-layout) .acc-empty {
    background: linear-gradient(180deg, #fbfdff 0%, #f5f9ff 100%);
    border-color: #cfe0f5;
}

body.theme-storefront:has(.acc-layout) .acc-empty :is(svg, i) {
    display: block;
    width: 28px;
    height: 28px;
    margin: 0 auto 10px;
    padding: 11px;
    box-sizing: content-box;
    border-radius: 50%;
    background: #eef4ff;
    color: #2563eb;
}

body.theme-storefront:has(.acc-layout) .acc-panel-head h2 svg { color: #2563eb; }

body.theme-storefront:has(.acc-layout) .acc-step-hint { display: none; }

/* Rodapé do pedido: SEM os 3px pretos que o border-style herdava */
body.theme-storefront:has(.acc-layout) .acc-order footer {
    margin-top: 8px;
    padding-top: 12px;
    border: 0;
    border-top: 1px solid #e8edf4;
    align-items: center;
    gap: 10px;
}

body.theme-storefront:has(.acc-layout) .acc-order footer strong {
    color: #0f172a;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -.02em;
}

body.theme-storefront:has(.acc-layout) .acc-order-actions { gap: 8px; }

body.theme-storefront:has(.acc-layout) .acc-order-actions .acc-btn {
    min-height: 38px;
    padding: 0 14px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 700;
}

/* Botões e campos de toda a área */
body.theme-storefront:has(.acc-layout) .acc-btn {
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid #dbe3ef;
    border-radius: 10px;
    background: #fff;
    color: #1d4ed8;
    font-weight: 700;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

body.theme-storefront:has(.acc-layout) .acc-btn:hover {
    background: #f4f7fb;
    border-color: #c9d7ea;
}

body.theme-storefront:has(.acc-layout) .acc-btn.is-primary {
    border-color: #0866f5;
    background: #0866f5;
    color: #fff;
    box-shadow: 0 1px 2px rgba(8, 102, 245, .20);
}

body.theme-storefront:has(.acc-layout) .acc-main .form-control,
body.theme-storefront:has(.acc-layout) .acc-main .form-select,
body.theme-storefront:has(.acc-layout) .acc-main textarea {
    border: 1px solid #d6deea;
    border-radius: 10px;
    background: #fff;
    color: #16202f;
    font-size: 13px;
    box-shadow: inset 0 1px 2px rgba(13, 27, 62, .06);
}

body.theme-storefront:has(.acc-layout) .acc-main .form-control:focus,
body.theme-storefront:has(.acc-layout) .acc-main .form-select:focus,
body.theme-storefront:has(.acc-layout) .acc-main textarea:focus {
    border-color: #0866f5;
    outline: 0;
    box-shadow: inset 0 1px 2px rgba(13, 27, 62, .05), 0 0 0 3px rgba(0, 102, 255, .14);
}

body.theme-storefront:has(.acc-layout) .acc-panel-head h2 {
    color: #0f172a;
    font-size: 15px;
    font-weight: 750;
    letter-spacing: -.01em;
}

body.theme-storefront:has(.acc-layout) .acc-panel-head a {
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 700;
}

body.theme-storefront:has(.acc-layout) .acc-empty {
    padding: 42px 16px;
    color: #64748b;
}

body.theme-storefront:has(.acc-layout) .acc-empty svg,
body.theme-storefront:has(.acc-layout) .acc-empty i { color: #cbd5e1; }

body.theme-storefront:has(.acc-layout) .acc-pagination { gap: 8px; }

/* Foco visível na régua azul */
body.theme-storefront:has(.acc-layout) :is(.acc-nav a, .acc-tabs a, .acc-btn, .acc-search input):focus-visible {
    outline: 3px solid rgba(8, 102, 245, .22);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   v9.466 — acabamento fino e animações da linha do tempo
   Entrada escalonada dos passos, progresso desenhado da esquerda para a
   direita, pulso curto no passo atual e histórico com entrada suave.
   -------------------------------------------------------------------------- */

@keyframes acc-line-in {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

@keyframes acc-line-shimmer {
    from { background-position: 0 0; }
    to   { background-position: 200% 0; }
}

@keyframes acc-step-in {
    from { opacity: 0; transform: translateY(7px); }
    to   { opacity: 1; transform: none; }
}

@keyframes acc-check-in {
    from { opacity: 0; transform: scale(.45); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes acc-current-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(8, 102, 245, .10), 0 0 0 0 rgba(8, 102, 245, .16); }
    50%      { box-shadow: 0 0 0 6px rgba(8, 102, 245, .07), 0 0 0 12px rgba(8, 102, 245, 0); }
}

@keyframes acc-tl-in {
    from { opacity: 0; transform: translateX(-6px); }
    to   { opacity: 1; transform: none; }
}

body.theme-storefront:has(.acc-layout) .acc-steps::after {
    background: linear-gradient(90deg, #0866f5 0%, #5aa2ff 48%, #0866f5 100%);
    background-size: 200% 100%;
    box-shadow: 0 0 10px rgba(8, 102, 245, .25);
    transform-origin: left center;
    animation:
        acc-line-in .9s cubic-bezier(.22, .61, .36, 1) .12s both,
        acc-line-shimmer 3.6s linear 1.1s infinite;
}

body.theme-storefront:has(.acc-layout) .acc-steps li {
    animation: acc-step-in .5s cubic-bezier(.2, .8, .2, 1) both;
}

body.theme-storefront:has(.acc-layout) .acc-steps li:nth-child(1) { animation-delay: .12s; }
body.theme-storefront:has(.acc-layout) .acc-steps li:nth-child(2) { animation-delay: .20s; }
body.theme-storefront:has(.acc-layout) .acc-steps li:nth-child(3) { animation-delay: .28s; }
body.theme-storefront:has(.acc-layout) .acc-steps li:nth-child(4) { animation-delay: .36s; }
body.theme-storefront:has(.acc-layout) .acc-steps li:nth-child(5) { animation-delay: .44s; }

body.theme-storefront:has(.acc-layout) .acc-step-dot {
    transition: transform .18s ease, box-shadow .18s ease;
}

body.theme-storefront:has(.acc-layout) .acc-steps li:hover .acc-step-dot {
    transform: translateY(-1px) scale(1.035);
}

body.theme-storefront:has(.acc-layout) .acc-steps .is-done .acc-step-dot svg {
    animation: acc-check-in .32s cubic-bezier(.2, .8, .2, 1) .24s both;
}

body.theme-storefront:has(.acc-layout) .acc-steps .is-current .acc-step-dot {
    animation: acc-current-pulse 2.8s ease-in-out .7s infinite;
}

/* Histórico do pedido (eventos públicos) */
body.theme-storefront:has(.acc-layout) .acc-timeline-item {
    animation: acc-tl-in .45s cubic-bezier(.2, .8, .2, 1) both;
}

body.theme-storefront:has(.acc-layout) .acc-timeline-item:nth-child(1) { animation-delay: .05s; }
body.theme-storefront:has(.acc-layout) .acc-timeline-item:nth-child(2) { animation-delay: .11s; }
body.theme-storefront:has(.acc-layout) .acc-timeline-item:nth-child(3) { animation-delay: .17s; }
body.theme-storefront:has(.acc-layout) .acc-timeline-item:nth-child(4) { animation-delay: .23s; }
body.theme-storefront:has(.acc-layout) .acc-timeline-item:nth-child(5) { animation-delay: .29s; }
body.theme-storefront:has(.acc-layout) .acc-timeline-item:nth-child(6) { animation-delay: .35s; }

body.theme-storefront:has(.acc-layout) .acc-timeline-dot {
    transition: transform .18s ease;
}

body.theme-storefront:has(.acc-layout) .acc-timeline-item:hover .acc-timeline-dot {
    transform: scale(1.06);
}

body.theme-storefront:has(.acc-layout) .acc-timeline-item:last-child .acc-timeline-dot {
    animation: acc-current-pulse 2.8s ease-in-out 1s infinite;
}

@media (prefers-reduced-motion: reduce) {
    body.theme-storefront:has(.acc-layout) .acc-steps::after,
    body.theme-storefront:has(.acc-layout) .acc-steps li,
    body.theme-storefront:has(.acc-layout) .acc-step-dot,
    body.theme-storefront:has(.acc-layout) .acc-step-dot svg,
    body.theme-storefront:has(.acc-layout) .acc-timeline-item,
    body.theme-storefront:has(.acc-layout) .acc-timeline-dot {
        animation: none;
        transition: none;
    }
}

/* Celular e tablet */
@media (max-width: 991.98px) {
    body.theme-storefront:has(.acc-layout) .acc-layout {
        display: block;
        max-width: none;
        margin: 18px auto 32px;
        padding: 0 14px 104px;
    }

    body.theme-storefront:has(.acc-layout) .acc-nav {
        position: static;
        display: flex;
        flex-direction: row;
        gap: 6px;
        overflow-x: auto;
        padding: 8px;
        border-radius: 14px;
        scrollbar-width: none;
    }

    body.theme-storefront:has(.acc-layout) .acc-nav::-webkit-scrollbar { display: none; }

    body.theme-storefront:has(.acc-layout) .acc-nav a,
    body.theme-storefront:has(.acc-layout) .acc-nav .account-nav-logout {
        flex: 0 0 auto;
        min-height: 40px;
        padding: 0 13px;
        border-radius: 999px;
        white-space: nowrap;
        font-size: 12px;
    }

    body.theme-storefront:has(.acc-layout) .acc-nav .acc-ico { width: 20px; height: 20px; }

    body.theme-storefront:has(.acc-layout) .acc-nav form {
        flex: 0 0 auto;
        width: auto;
        margin: 0;
        padding: 0;
        border: 0;
    }

    body.theme-storefront:has(.acc-layout) .acc-nav .account-nav-logout { width: auto; }

    /* No celular o Prime pintava o ativo de azul cheio; a pílula volta ao
       tom suave do desktop (o mesmo azul de fundo + tinta). */
    body.theme-storefront:has(.acc-layout) .account-nav.acc-nav > a.active,
    body.theme-storefront:has(.acc-layout) .account-nav.acc-nav > a.is-active,
    body.theme-storefront:has(.acc-layout) .account-nav.acc-nav > a[aria-current='page'] {
        background: #eef4ff;
        border-color: #dce8fb;
        color: #1d4ed8;
        box-shadow: inset 0 1px 2px rgba(13, 27, 62, .06);
    }

    body.theme-storefront:has(.acc-layout) .account-nav.acc-nav > a.active span,
    body.theme-storefront:has(.acc-layout) .account-nav.acc-nav > a.is-active span,
    body.theme-storefront:has(.acc-layout) .account-nav.acc-nav > a[aria-current='page'] span {
        color: #1d4ed8;
    }

    body.theme-storefront:has(.acc-layout) .acc-main > .page-title,
    body.theme-storefront:has(.acc-layout) .acc-main > h1.page-title {
        font-size: 22px;
        margin-bottom: 12px;
    }

    body.theme-storefront:has(.acc-layout) .acc-toolbar {
        align-items: stretch;
        gap: 10px;
    }

    body.theme-storefront:has(.acc-layout) .acc-tabs {
        gap: 6px;
        flex-wrap: nowrap;
    }

    body.theme-storefront:has(.acc-layout) .acc-search { display: flex; width: 100%; }

    body.theme-storefront:has(.acc-layout) .acc-search input {
        width: 100%;
        min-width: 0;
    }

    body.theme-storefront:has(.acc-layout) .acc-order,
    body.theme-storefront:has(.acc-layout) .acc-panel,
    body.theme-storefront:has(.acc-layout) .acc-coupon,
    body.theme-storefront:has(.acc-layout) .acc-thread,
    body.theme-storefront:has(.acc-layout) .acc-newmsg,
    body.theme-storefront:has(.acc-layout) .acc-store {
        padding: 14px;
        border-radius: 14px;
    }

    body.theme-storefront:has(.acc-layout) .acc-order header b { font-size: 14px; }

    body.theme-storefront:has(.acc-layout) .acc-order footer {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    body.theme-storefront:has(.acc-layout) .acc-order-actions {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.theme-storefront:has(.acc-layout) .acc-order-actions .acc-btn {
        width: 100%;
        min-width: 0;
    }

    body.theme-storefront:has(.acc-layout) .acc-step-dot {
        width: 26px;
        height: 26px;
    }

    body.theme-storefront:has(.acc-layout) .acc-steps::before,
    body.theme-storefront:has(.acc-layout) .acc-steps::after { top: 12px; }

    body.theme-storefront:has(.acc-layout) .acc-step-label { font-size: 10px; }
}

@media (max-width: 480px) {
    body.theme-storefront:has(.acc-layout) .acc-order footer strong { font-size: 16px; }
    body.theme-storefront:has(.acc-layout) .acc-step-label { font-size: 9.5px; }
    body.theme-storefront:has(.acc-layout) .acc-order-actions { grid-template-columns: 1fr; }
}

/* ==========================================================================
   v9.469 — COMPROVANTE: área de envio em destaque (desktop e celular)
   O cliente entende em 3 passos que é AQUI que o comprovante é enviado.
   ========================================================================== */

body.theme-storefront:has(.acc-layout) .acc-receipt {
    position: relative;
    margin: 0 0 16px;
    padding: 20px;
    border: 1px solid #cfe0ff;
    border-radius: 18px;
    background: linear-gradient(180deg, #f5f9ff 0%, #ffffff 62%);
    box-shadow: 0 10px 30px rgba(8, 102, 245, .08);
    overflow: hidden;
    scroll-margin-top: 110px;
}

body.theme-storefront:has(.acc-layout) .acc-receipt::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, #0866f5, #5aa2ff);
}

body.theme-storefront:has(.acc-layout) .acc-receipt__head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 14px;
}

body.theme-storefront:has(.acc-layout) .acc-receipt__ico {
    width: 52px;
    height: 52px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: #eef4ff;
    color: #1d4ed8;
    box-shadow: inset 0 0 0 1px #dce8fb;
}

body.theme-storefront:has(.acc-layout) .acc-receipt__headtext { min-width: 0; }

body.theme-storefront:has(.acc-layout) .acc-receipt__kicker {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #1d4ed8;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

body.theme-storefront:has(.acc-layout) .acc-receipt h2 {
    margin: 2px 0 2px;
    color: #0f172a;
    font-family: Poppins, Inter, system-ui, sans-serif;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.02em;
}

body.theme-storefront:has(.acc-layout) .acc-receipt__headtext p {
    margin: 0;
    color: #64748b;
    font-size: 12.5px;
}

body.theme-storefront:has(.acc-layout) .acc-receipt__tag {
    margin-left: auto;
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border: 1px solid #dce8fb;
    border-radius: 999px;
    background: #fff;
    color: #1d4ed8;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

body.theme-storefront:has(.acc-layout) .acc-receipt__intro {
    margin: 0 0 14px;
    max-width: 72ch;
    color: #334155;
    font-size: 13.5px;
    line-height: 1.55;
}

body.theme-storefront:has(.acc-layout) .acc-receipt__steps {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

body.theme-storefront:has(.acc-layout) .acc-receipt__steps li {
    display: flex;
    gap: 9px;
    padding: 10px 11px;
    border: 1px solid #e3ecfb;
    border-radius: 12px;
    background: #fff;
}

body.theme-storefront:has(.acc-layout) .acc-receipt__steps li > span {
    width: 24px;
    height: 24px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #0866f5;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
}

body.theme-storefront:has(.acc-layout) .acc-receipt__steps b {
    display: block;
    color: #0f172a;
    font-size: 12.5px;
}

body.theme-storefront:has(.acc-layout) .acc-receipt__steps small {
    display: block;
    margin-top: 1px;
    color: #64748b;
    font-size: 11.5px;
    line-height: 1.4;
}

body.theme-storefront:has(.acc-layout) .acc-receipt__form {
    display: flex;
    align-items: stretch;
    gap: 10px;
    flex-wrap: wrap;
}

body.theme-storefront:has(.acc-layout) .acc-receipt__file {
    flex: 1 1 320px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    border: 1.5px dashed #b9cdf0;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
}

body.theme-storefront:has(.acc-layout) .acc-receipt__filelabel {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 700;
}

body.theme-storefront:has(.acc-layout) .acc-receipt__file input[type='file'] {
    width: 100%;
    color: #475569;
    font-size: 12px;
}

body.theme-storefront:has(.acc-layout) .acc-receipt__file input::file-selector-button {
    margin-right: 8px;
    padding: 8px 12px;
    border: 0;
    border-radius: 8px;
    background: #0866f5;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}

body.theme-storefront:has(.acc-layout) .acc-receipt__submit {
    min-height: 48px;
    padding: 0 22px;
    white-space: nowrap;
}

body.theme-storefront:has(.acc-layout) .acc-receipt__help {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 10px 0 0;
    color: #64748b;
    font-size: 11.5px;
}

body.theme-storefront:has(.acc-layout) .acc-receipt__done {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
    padding: 12px 14px;
    border: 1px solid #b7e4c9;
    border-radius: 12px;
    background: #e9f8ef;
}

body.theme-storefront:has(.acc-layout) .acc-receipt__doneico { color: #0d7a43; flex: none; }

body.theme-storefront:has(.acc-layout) .acc-receipt__done b {
    display: block;
    color: #0d7a43;
    font-size: 14px;
}

body.theme-storefront:has(.acc-layout) .acc-receipt__done p {
    margin: 2px 0 0;
    color: #166534;
    font-size: 12.5px;
}

body.theme-storefront:has(.acc-layout) .acc-btn.is-soft {
    border-color: #dce8fb;
    background: #eef4ff;
    color: #1d4ed8;
}

body.theme-storefront:has(.acc-layout) .acc-btn.is-soft:hover {
    border-color: #cfe0ff;
    background: #e3efff;
    color: #174db5;
}

body.theme-storefront:has(.acc-layout) .acc-receipt-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 16px;
    padding: 14px 16px;
    border: 1px solid #cfe0ff;
    border-radius: 14px;
    background: linear-gradient(180deg, #eef5ff, #f8fbff);
    box-shadow: 0 6px 18px rgba(8, 102, 245, .06);
}

body.theme-storefront:has(.acc-layout) .acc-receipt-banner__ico {
    width: 42px;
    height: 42px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #fff;
    color: #1d4ed8;
    box-shadow: inset 0 0 0 1px #dce8fb;
}

body.theme-storefront:has(.acc-layout) .acc-receipt-banner > div { min-width: 0; }

body.theme-storefront:has(.acc-layout) .acc-receipt-banner b {
    display: block;
    color: #0f172a;
    font-size: 13.5px;
}

body.theme-storefront:has(.acc-layout) .acc-receipt-banner span {
    display: block;
    color: #64748b;
    font-size: 12px;
}

body.theme-storefront:has(.acc-layout) .acc-receipt-banner .acc-btn {
    margin-left: auto;
    flex: none;
}

@media (max-width: 991.98px) {
    body.theme-storefront:has(.acc-layout) .acc-receipt {
        padding: 16px;
        border-radius: 16px;
    }

    body.theme-storefront:has(.acc-layout) .acc-receipt__head { gap: 11px; }

    body.theme-storefront:has(.acc-layout) .acc-receipt__ico {
        width: 44px;
        height: 44px;
        border-radius: 12px;
    }

    body.theme-storefront:has(.acc-layout) .acc-receipt h2 { font-size: 18px; }

    body.theme-storefront:has(.acc-layout) .acc-receipt__tag { display: none; }

    body.theme-storefront:has(.acc-layout) .acc-receipt__steps { grid-template-columns: 1fr; }

    body.theme-storefront:has(.acc-layout) .acc-receipt__form { flex-direction: column; }

    body.theme-storefront:has(.acc-layout) .acc-receipt__file { flex: 1 1 auto; }

    body.theme-storefront:has(.acc-layout) .acc-receipt__submit {
        width: 100%;
        justify-content: center;
    }

    body.theme-storefront:has(.acc-layout) .acc-receipt-banner {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    body.theme-storefront:has(.acc-layout) .acc-receipt-banner .acc-btn {
        width: 100%;
        margin-left: 0;
        justify-content: center;
    }
}