/* =============================================================
   Tema "Prisma" (estrutura `premium`) — a folha INTEIRA.

   O `style.css` do clássico NÃO carrega junto (ver
   views/partials/theme-assets.php): este arquivo traz o próprio reset e o
   próprio tudo, inclusive os utilitários que o JS compartilhado assume
   existir (`.hidden`, `.mobile-hide`, `.skeleton`, `.toast-stack`…) e as
   classes que só existem em runtime, montadas por JS, que não aparecem em
   partial nenhum para você ler (ver THEME_PLAYBOOK §4.6b).

   A LINGUAGEM VISUAL, em uma frase: branco frio com muita folga, display
   preto e apertado, fio de 1px no lugar de sombra, foto grande — e cada
   bloco entra na tela ao rolar.

   Três decisões que explicam quase todo o resto:

   1. **Fio, não sombra.** Separação é sempre 1px de `--pr-line`. Sombra
      aparece só onde algo de fato flutua sobre o conteúdo (mega-menu,
      mini-carrinho, modal). Isso é o que dá a leitura de "vitrine
      medida" em vez de "cartão empilhado".
   2. **Canto reto no que é conteúdo, canto macio no que é controle.** O
      cartão de produto, a célula da grade e o painel não têm raio; botão,
      campo e selo têm. A tensão entre os dois é proposital: a mercadoria
      parece exposta, a interface parece tocável.
   3. **A cor é da loja, e ela aparece em SUPERFÍCIE, não só no botão.**
      Selo do hero, botão de compra que surge no card, preço e link, fio
      de estado ativo, faixa da newsletter e as marcações do checkout. Uma
      loja com primária vermelha e outra com primária azul têm que parecer
      lojas diferentes, não a mesma loja com um botão trocado.

   Ordem do arquivo (a mesma do §4.4 do playbook):
   reset · tokens · tipografia e utilitários · botões/campos · cabeçalho ·
   menu mobile · hero · seção e grade · card · produto · listagem e filtro ·
   carrinho · checkout · conta · entrar/criar conta · rodapé e barra
   inferior · toast/modal/skeleton.
   ============================================================= */

/* ============================== 1. RESET ============================== */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd, ul, ol {
    margin: 0;
    padding: 0;
}

ul, ol { list-style: none; }

/* Rede de segurança do §6.1: sem o `style.css` embaixo, uma <img> sem
   regra assume o tamanho natural do arquivo — foi assim que a home de um
   tema irmão abriu com 36.000px de altura na primeira carga. */
img, svg, video, canvas, iframe {
    display: block;
    max-width: 100%;
}
img { height: auto; }

button, input, select, textarea {
    font: inherit;
    color: inherit;
    margin: 0;
}

button { background: none; border: 0; cursor: pointer; }

a { color: inherit; text-decoration: none; }

table { border-collapse: collapse; width: 100%; }

/* ============================== 2. TOKENS ============================== */

:root {
    /* --- Paleta da loja (white-label) ---------------------------------
       `core/ThemeColors.js` sobrescreve estas quatro em `documentElement`
       assim que o bootstrap da página roda. Os valores aqui são o que a
       primeira pintura usa: um grafite neutro, que é o pior caso decente
       se o JS demorar ou falhar. */
    --primary-color: #16181d;
    --secondary-color: #16181d;
    --secondary-dark-color: #0c0e12;
    --on-primary: #ffffff;
    --on-brand: #ffffff;

    /* A cor da marca como TEXTO não passa contraste sozinha (§6.24): uma
       primária clara vira preço ilegível sobre painel branco. Botão e selo
       seguem na primária crua (com `--on-primary` por cima, calculado);
       texto usa esta variante escurecida. */
    --pr-brand-text: color-mix(in srgb, var(--primary-color) 74%, #000);
    --pr-brand-wash: color-mix(in srgb, var(--primary-color) 8%, #fff);
    --pr-brand-line: color-mix(in srgb, var(--primary-color) 32%, #fff);

    /* --- Tinta e papel ------------------------------------------------ */
    --pr-ink: #0a0c10;
    --pr-ink-2: #575f6b;
    /* 5.20:1 sobre branco e 4.70:1 sobre `--pr-surface`, que é onde ele
       mais aparece (rótulo de painel da conta). Começou em #8b939f — o
       cinza "bonito" de rótulo, que dá 3.10:1 e reprova a varredura do
       §7.3 em texto de 12px. Escurecido até passar nas DUAS superfícies,
       e não só no branco. */
    --pr-ink-3: #676e79;
    --pr-paper: #ffffff;
    --pr-surface: #f4f5f7;
    --pr-surface-2: #eceef2;
    --pr-night: #0c0e12;
    --pr-night-2: #1a1d23;
    --pr-line: #e4e7eb;
    --pr-line-2: #d2d7de;
    --pr-danger: #c0322b;
    --pr-success: #1f7a4d;

    /* --- Medidas ------------------------------------------------------ */
    --pr-container: 1320px;
    --pr-gutter: 20px;
    /* 8/12 e não 6/10: medidos na referência (Woodstock) — botão, campo e
       cartão de foto lá têm canto ~8px, painel ~12px. O tema continua com
       canto reto na GRADE de produtos (o fio), mas tudo que é foto solta,
       painel ou controle acompanha a referência. */
    --pr-r-sm: 8px;
    --pr-r-md: 12px;
    --pr-r-pill: 999px;

    /* Vermelho de OFERTA — convenção de varejo da referência: preço
       promocional e selo de desconto são vermelhos, o preço normal é
       tinta. A cor da loja segue nos controles e superfícies. */
    --pr-sale: #e02b2b;
    --pr-sale-wash: #fdecec;

    /* --- Movimento ----------------------------------------------------
       `--pr-anim` chega do manifest, impressa pelo head.php do tema (0 ou
       1). Ela multiplica deslocamento e duração, então desligar o controle
       no painel zera o efeito sem precisar de uma segunda folha. */
    --pr-anim: 1;
    --pr-ease: cubic-bezier(.22, .61, .36, 1);
    --pr-dur: .55s;

    /* --- Tokens do manifest (default se o head não imprimir) ---------- */
    --pr-grid-colunas: 4;
    --pr-ratio-foto: 1 / 1;

    /* Altura do cabeçalho fixo — a barra de departamentos entra por cima
       via `scroll-margin` das âncoras. */
    --pr-header-h: 76px;

    --pr-shadow-pop: 0 24px 60px -24px rgba(10, 12, 16, .28), 0 2px 8px rgba(10, 12, 16, .06);
}

/* ==================== 3. TIPOGRAFIA E UTILITÁRIOS ==================== */

body {
    background: var(--pr-paper);
    color: var(--pr-ink);
    font-family: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 15px;
    line-height: 1.6;
    font-feature-settings: 'ss01', 'cv01';
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-weight: 800;
    letter-spacing: -.022em;
    line-height: 1.08;
    color: var(--pr-ink);
}

/* A escala tipográfica do tema é curta de propósito: um display enorme, um
   título de seção, e depois interface. O que separa hierarquia aqui é
   PESO e ESPAÇO, não seis tamanhos intermediários. */
.pr-display {
    font-size: clamp(2.15rem, 5.4vw, 4.25rem);
    font-weight: 800;
    letter-spacing: -.038em;
    line-height: .98;
}

.mini-text,
.pr-micro {
    font-size: 12px;
    line-height: 1.45;
    color: var(--pr-ink-3);
}

.pr-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--pr-ink-3);
}

strong, b { font-weight: 700; }

/* --- Estrutura de página -------------------------------------------- */

.container {
    width: 100%;
    max-width: var(--pr-container);
    margin: 0 auto;
    padding: 0 var(--pr-gutter);
}

.wrapper { width: 100%; }

.flexitem { display: flex; align-items: center; }
.flexcol { display: flex; flex-direction: column; }
.flexwrap { display: flex; flex-wrap: wrap; }
.flexcenter { display: flex; align-items: center; justify-content: center; }

/* --- Utilitários que o JS compartilhado assume existir (§4.4) --------
   Sem eles a loja quebra de formas silenciosas: o que o JS "esconde"
   aparece, o placeholder fica invisível, os slides deitam lado a lado. */

.hidden { display: none !important; }

[hidden] { display: none !important; }

/* O par visível-em-uma-largura-só. Repare que NÃO existe regra de
   `display` para `.mobile-hide` fora do media query: `display: initial`
   vale `inline`, e uma faixa que deveria ser bloco vira caixa inline —
   o fundo escuro do topo passa a pintar só atrás do texto, sem altura.
   Medido aqui, na primeira carga do tema.

   Também não há `!important`: o esconder de celular mora no media query,
   depois deste ponto do arquivo, e regras de área de toque vêm DEPOIS
   dele lá dentro. É a proteção contra o §6.7 — dar `display: inline-flex`
   ao botão de menu com especificidade maior que `.desktop-hide` traz ele
   de volta no computador e quebra o cabeçalho em duas linhas. */
.desktop-hide { display: none; }

/* Swiper: o tema não usa carrossel no hero, mas a galeria do produto usa,
   e o CSS da biblioteca vem por CDN. Estas três são a rede de segurança
   para o instante entre o HTML e o JS. */
.swiper { overflow: hidden; position: relative; }
.swiper-wrapper { display: flex; }
.swiper-slide { flex: 0 0 100%; min-width: 0; }

/* Caixa de foto: recorta a imagem sem deformar. O `a { display:block }`
   está aqui por causa do §6.18 — um anchor inline entre a caixa e a foto
   faz `height:100%` resolver contra altura automática e a imagem sai
   miúda dentro da moldura. */
.object-cover { position: relative; overflow: hidden; }
.object-cover a { display: block; width: 100%; height: 100%; }
.object-cover img { width: 100%; height: 100%; object-fit: cover; }

.pr-line-rule {
    flex: 1;
    height: 1px;
    background: var(--pr-line);
    min-width: 16px;
}

/* --- Entrada animada -------------------------------------------------
   A assinatura do tema. Três regras e nada mais:

   1. O estado inicial só existe quando `html.pr-reveal` está presente, e
      quem põe essa classe é um script de UMA LINHA no head.php do tema.
      Se o JS do tema não rodar (erro, bloqueio, navegador antigo), a
      classe nunca chega e a loja abre visível — degradação graciosa é
      requisito, não polimento.
   2. `--pr-anim` vem do manifest: com o controle desligado o head imprime
      0, o deslocamento vira 0px e a transição some.
   3. `prefers-reduced-motion` desliga tudo, independente do manifest.
      Acessibilidade não é preferência de revendedor. */
.pr-reveal [data-reveal] {
    opacity: 0;
    transform: translateY(calc(var(--pr-anim) * 22px));
    transition:
        opacity calc(var(--pr-dur) * var(--pr-anim)) var(--pr-ease) var(--pr-delay, 0s),
        transform calc(var(--pr-dur) * var(--pr-anim)) var(--pr-ease) var(--pr-delay, 0s);
    will-change: opacity, transform;
}

/* `will-change: auto` depois de revelado, e não é higiene: will-change
   cria stacking context, e a barra de filtros (que é um [data-reveal])
   passava a pintar ATRÁS da grade vinda depois no DOM — o painel do
   dropdown abria escondido embaixo dos cards. */
.pr-reveal [data-reveal].pr-in {
    opacity: 1;
    transform: none;
    will-change: auto;
}

/* Item de grade entra em cascata: o índice é escrito pelo JS de
   apresentação do tema como `--pr-i`, e o atraso é derivado dele. O teto
   de 10 evita que o 40º card de uma busca "Tudo" leve 4 segundos. */
[data-reveal-stagger] > * { --pr-delay: calc(min(var(--pr-i, 0), 10) * 55ms); }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    .pr-reveal [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
}

/* --- Alvo de toque em link DENTRO de texto ---------------------------
   Link inline tem a altura da caixa de fonte (16px em 14px de texto), e a
   varredura do §7.3 pede 22. `min-height` não resolve — inline ignora. O
   que resolve é padding vertical: ele entra no retângulo de clique sem
   empurrar a linha de baixo. Vale para o nome do produto no card, no
   mini-carrinho, na tabela do carrinho e nos links do bloco de avaliação. */
.pr-card__title a,
.pr-offer__body h3 a,
.mini-cart .item-content p a,
#cart-table .content strong a,
.reviews .review-form p a,
.toggle-form a { padding-block: 4px; }

/* --- Foco visível ---------------------------------------------------- */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--pr-brand-text);
    outline-offset: 2px;
    border-radius: 3px;
}

/* ==================== 4. BOTÕES, CAMPOS, CONTROLES ==================== */

/* `.primary-button`, `.secondary-button` e `.light-button` vêm dos
   partials compartilhados; `.btn`, `.btn-secondary` e `.btn-sm` são
   montados por `profile/index.js` em runtime (§4.6b) e precisam de estilo
   aqui ou o botão "Ver detalhes" de um pedido nasce sem nada. */
.primary-button,
.secondary-button,
.light-button,
.btn,
button[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 22px;
    border: 1px solid transparent;
    border-radius: var(--pr-r-sm);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -.005em;
    text-align: center;
    cursor: pointer;
    transition: background-color .18s var(--pr-ease), color .18s var(--pr-ease),
                border-color .18s var(--pr-ease), transform .18s var(--pr-ease);
}

/* FILL no hover, como os botões da referência: uma camada da cor de
   destino desliza da esquerda (background-size 0% → 100%). É só
   background — nada de pseudo-elemento, então funciona igual em <a>,
   <button> e nos botões que o JS monta em runtime. */
.primary-button,
.btn,
button[type="submit"] {
    background:
        linear-gradient(color-mix(in srgb, var(--primary-color) 74%, #000), color-mix(in srgb, var(--primary-color) 74%, #000)) no-repeat left center / 0% 100%,
        var(--primary-color);
    color: var(--on-primary);
    transition: background-size .32s var(--pr-ease), color .18s var(--pr-ease),
                border-color .18s var(--pr-ease), transform .18s var(--pr-ease);
}

.primary-button:hover,
.btn:hover,
button[type="submit"]:hover {
    background-size: 100% 100%, auto;
}

.secondary-button,
.btn-secondary,
.light-button {
    background:
        linear-gradient(var(--pr-ink), var(--pr-ink)) no-repeat left center / 0% 100%,
        var(--pr-paper);
    color: var(--pr-ink);
    border-color: var(--pr-line-2);
    transition: background-size .32s var(--pr-ease), color .18s var(--pr-ease),
                border-color .18s var(--pr-ease), transform .18s var(--pr-ease);
}

.secondary-button:hover,
.btn-secondary:hover,
.light-button:hover {
    background-size: 100% 100%, auto;
    border-color: var(--pr-ink);
    color: #fff;
}

.btn-sm {
    min-height: 34px;
    padding: 0 12px;
    font-size: 12.5px;
    border-radius: var(--pr-r-sm);
}

.btn-danger,
.btn-modal-danger {
    background: var(--pr-danger);
    color: #fff;
    border-color: transparent;
}

button:disabled,
.primary-button:disabled { opacity: .5; cursor: not-allowed; }

/* Link "Ver todos" das seções: pílula de fio, não texto solto — ele
   precisa competir com um título de 40px ao lado. */
.view-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    border: 1px solid var(--pr-line-2);
    border-radius: var(--pr-r-pill);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    transition: border-color .18s var(--pr-ease), color .18s var(--pr-ease);
}

.view-all:hover {
    border-color: var(--pr-brand-text);
    color: var(--pr-brand-text);
}

/* --- Campos ---------------------------------------------------------- */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="mail"],
select,
textarea {
    width: 100%;
    min-height: 46px;
    padding: 10px 14px;
    background: var(--pr-paper);
    border: 1px solid var(--pr-line-2);
    border-radius: var(--pr-r-sm);
    font-size: 14.5px;
    color: var(--pr-ink);
    transition: border-color .16s var(--pr-ease), box-shadow .16s var(--pr-ease);
}

textarea { min-height: 104px; resize: vertical; line-height: 1.55; }

input::placeholder, textarea::placeholder { color: var(--pr-ink-3); }

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--pr-brand-wash);
}

input:disabled,
select:disabled { background: var(--pr-surface); color: var(--pr-ink-3); }

select {
    appearance: none;
    padding-right: 38px;
    background-image: linear-gradient(45deg, transparent 50%, var(--pr-ink-2) 50%),
                      linear-gradient(135deg, var(--pr-ink-2) 50%, transparent 50%);
    background-position: calc(100% - 19px) 21px, calc(100% - 14px) 21px;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

label { font-size: 13px; font-weight: 600; color: var(--pr-ink-2); }

/* --- Grade de formulário ---------------------------------------------
   `grid-column: 1 / -1` e nunca `span 2` (§6.21): num celular a grade tem
   uma coluna só, e `span 2` faz o navegador INVENTAR uma segunda coluna de
   largura zero — medido no formulário de cartão, onde "Vencimento" nascia
   com 0px e o rótulo do campo seguinte caía por cima. */
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.form-field,
.form-group { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.form-field.span-2,
.form-group-full,
.form-subgrid { grid-column: 1 / -1; }

.form-subgrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.form-group-inline {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.form-actions { margin-top: 20px; display: flex; gap: 12px; }

/* Interruptor (isento de inscrição estadual, endereço principal) */
.switch {
    position: relative;
    display: inline-block;
    flex: none;
    width: 46px;
    height: 26px;
}

.switch input { position: absolute; opacity: 0; width: 0; height: 0; }

.switch .slider {
    position: absolute;
    inset: 0;
    background: var(--pr-line-2);
    border-radius: var(--pr-r-pill);
    transition: background-color .2s var(--pr-ease);
}

.switch .slider::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(10, 12, 16, .3);
    transition: transform .2s var(--pr-ease);
}

.switch input:checked + .slider { background: var(--primary-color); }
.switch input:checked + .slider::before { transform: translateX(20px); }

/* Caixa de marcar do checkout inline */
.checkset { display: flex; align-items: center; gap: 10px; font-weight: 500; color: var(--pr-ink); }
.checkset input[type="checkbox"] { width: 18px; height: 18px; min-height: 0; accent-color: var(--primary-color); }

/* Stepper de quantidade — `.qty-control` com `.minus`/`.plus` em volta do
   input é contrato (Contract.js), e a ORDEM dos três também: o
   PurchaseButton anda por irmão anterior/seguinte. */
.qty-control {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--pr-line-2);
    border-radius: var(--pr-r-sm);
    overflow: hidden;
    background: var(--pr-paper);
}

.qty-control button {
    width: 40px;
    height: 44px;
    font-size: 17px;
    font-weight: 600;
    color: var(--pr-ink-2);
    transition: background-color .15s var(--pr-ease), color .15s var(--pr-ease);
}

.qty-control button:hover { background: var(--pr-surface); color: var(--pr-ink); }

.qty-control input {
    width: 52px;
    min-height: 44px;
    padding: 0;
    text-align: center;
    border: 0;
    border-left: 1px solid var(--pr-line);
    border-right: 1px solid var(--pr-line);
    border-radius: 0;
    font-weight: 700;
    font-size: 14px;
}

.qty-control input:focus { box-shadow: none; }

/* Selos */
.pr-badge,
.cashback-badge,
.item-unit-tag,
.option-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: var(--pr-r-pill);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.5;
}

.cashback-badge {
    background: var(--pr-brand-wash);
    color: var(--pr-brand-text);
    border: 1px solid var(--pr-brand-line);
}

.item-unit-tag {
    background: var(--pr-surface);
    color: var(--pr-ink-2);
    border: 1px solid var(--pr-line);
}

.free-shipping { color: var(--pr-success); font-weight: 600; }
.stock-danger { color: var(--pr-ink-2); }
.login-required { font-size: 13px; font-weight: 600; color: var(--pr-ink-3); }

/* Estrelas: o markup é só `<div class="stars" data-rating="N">` — o
   desenho é todo do tema. Glifo de verdade, e não uma barra recortada por
   máscara: a máscara desenhava cinco RETÂNGULOS, que na vitrine liam como
   gráfico de barras em vez de avaliação. */
.stars {
    --pr-stars: 0;
    position: relative;
    display: inline-block;
    font-size: 13px;
    line-height: 1;
    letter-spacing: 1px;
    white-space: nowrap;
    color: var(--pr-line-2);
}

.stars::before { content: '★★★★★'; }

.stars::after {
    content: '★★★★★';
    position: absolute;
    top: 0;
    left: 0;
    width: calc(var(--pr-stars) * 20%);
    overflow: hidden;
    color: #e8a13a;
}

.stars[data-rating="1"] { --pr-stars: 1; }
.stars[data-rating="2"] { --pr-stars: 2; }
.stars[data-rating="3"] { --pr-stars: 3; }
.stars[data-rating="4"] { --pr-stars: 4; }
.stars[data-rating="5"] { --pr-stars: 5; }

/* ==================== 5. TOAST, MODAL, ESQUELETO ==================== */
/* Montados por `core/Toast.js` e `core/Modal.js` — não existem em partial
   nenhum, e sem estas regras aparecem como texto solto no topo da página
   (§4.6b). */

.toast-stack {
    position: fixed;
    z-index: 1200;
    top: 18px;
    right: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: min(360px, calc(100vw - 36px));
    pointer-events: none;
}

/* `.toast-visible` é o estado, e o Toast.js espera `transitionend` para
   tirar o nó do DOM — por isso a entrada e a saída são TRANSIÇÃO e não
   animação de entrada. Com `transition: none` o evento nunca dispara e o
   módulo só remove o toast pelo desempate de 300ms. */
.toast {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px 15px;
    background: var(--pr-night);
    color: #fff;
    border-radius: var(--pr-r-md);
    box-shadow: var(--pr-shadow-pop);
    font-size: 14px;
    line-height: 1.45;
    pointer-events: auto;
    opacity: 0;
    transform: translateX(18px);
    transition: opacity .24s var(--pr-ease), transform .24s var(--pr-ease);
}

.toast-visible { opacity: 1; transform: none; }

.toast i { font-size: 17px; line-height: 1.3; flex: none; }
.toast-success { background: var(--pr-success); }
.toast-error { background: var(--pr-danger); }
.toast-warning { background: #8a5a00; }

.app-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(10, 12, 16, .55);
    opacity: 0;
    transition: opacity .22s var(--pr-ease);
}

/* Mesma história do toast: `.modal-visible` é o estado e o Modal.js
   desmonta no `transitionend`. */
.modal-visible { opacity: 1; }

.modal-dialog {
    width: min(560px, 100%);
    max-height: min(86vh, 760px);
    display: flex;
    flex-direction: column;
    background: var(--pr-paper);
    border-radius: var(--pr-r-md);
    box-shadow: var(--pr-shadow-pop);
    overflow: hidden;
    transform: translateY(14px) scale(.985);
    transition: transform .22s var(--pr-ease);
}

.modal-visible .modal-dialog { transform: none; }

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--pr-line);
}

.modal-title { font-size: 17px; font-weight: 800; }

.modal-header button,
.modal-close {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--pr-r-sm);
    color: var(--pr-ink-2);
    font-size: 20px;
}

.modal-header button:hover { background: var(--pr-surface); color: var(--pr-ink); }

.modal-body { padding: 22px; overflow-y: auto; }

/* Rodapé com os dois botões separados — sem `gap` eles saem colados
   ("CancelarSalvar"), que foi exatamente o sintoma num tema irmão. */
.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 22px;
    border-top: 1px solid var(--pr-line);
    background: var(--pr-surface);
}

.btn-modal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 42px;
    padding: 0 18px;
    border: 1px solid var(--pr-line-2);
    border-radius: var(--pr-r-sm);
    background: var(--pr-paper);
    font-size: 14px;
    font-weight: 700;
}

.btn-modal-primary { background: var(--primary-color); color: var(--on-primary); border-color: transparent; }
.btn-modal-secondary { background: var(--pr-paper); color: var(--pr-ink); }
.btn-modal-danger { background: var(--pr-danger); color: #fff; border-color: transparent; }

.skeleton {
    background: linear-gradient(100deg, var(--pr-surface) 30%, var(--pr-surface-2) 50%, var(--pr-surface) 70%);
    background-size: 220% 100%;
    border-radius: var(--pr-r-sm);
    animation: pr-skeleton 1.3s linear infinite;
}

.skeleton-card { height: 92px; margin-bottom: 12px; }

@keyframes pr-skeleton {
    from { background-position: 180% 0; }
    to { background-position: -20% 0; }
}

/* Spinner compartilhado (frete no carrinho, `#loader`) */
.spinner {
    width: 26px;
    height: 26px;
    margin: 14px auto;
    border: 2px solid var(--pr-line-2);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: pr-spin .7s linear infinite;
}

@keyframes pr-spin { to { transform: rotate(360deg); } }

/* Estado vazio, usado em várias telas */
.empty-state,
.empty-address,
.cart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 40px 20px;
    border: 1px dashed var(--pr-line-2);
    border-radius: var(--pr-r-md);
    text-align: center;
    color: var(--pr-ink-2);
    font-size: 14px;
}

.empty-state i,
.empty-address i,
.cart-empty i { font-size: 26px; color: var(--pr-ink-3); }

/* ========================== 6. CABEÇALHO ========================== */

.site { position: relative; overflow-x: clip; }

/* Faixa de utilidade: quase-preta, texto miúdo. É a moldura que faz o
   branco do cabeçalho parecer branco de verdade. */
.header-top {
    background: var(--pr-night);
    color: #aab0b8;
    font-size: 12px;
}

.header-top .wrapper {
    justify-content: space-between;
    gap: 16px;
    min-height: 38px;
    flex-wrap: wrap;
}

.header-top ul { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.header-top li { display: flex; align-items: center; }

/* `inline-flex` + altura mínima: sem isso o link de 12px tem 19px de
   caixa, e a varredura do §7.3 pede 22px de alvo em link de navegação.
   A faixa não muda de altura — o `min-height` cabe dentro dos 38px. */
.header-top a,
.header-top li {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    color: #aab0b8;
    transition: color .16s var(--pr-ease);
}

.header-top li { color: inherit; }

.header-top a:hover { color: #fff; }

.pr-topbar-note { display: inline-flex; align-items: center; gap: 7px; letter-spacing: .01em; }
.pr-topbar-note i { color: var(--pr-brand-line); font-size: 14px; }

/* --- Barra principal (fixa) ------------------------------------------
   `position: sticky` também é o que ancora o mega-menu de largura total:
   elemento posicionado vira o bloco de contenção do `.mega` (§6.15). */
.header-nav {
    position: sticky;
    top: 0;
    z-index: 60;
    background: var(--pr-paper);
    border-bottom: 1px solid var(--pr-line);
}

.header-nav .wrapper {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 26px;
    min-height: var(--pr-header-h);
}

.header-nav .left { min-width: 0; gap: 0; }

.logo { display: flex; align-items: center; }
.logo img { max-height: 44px; width: auto; object-fit: contain; }

/* Loja sem logotipo cadastrado: o SiteChrome troca a <img> vazia por
   `span.logo-text` com o nome do negócio (§ initLogoFallback). */
.logo-text {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.03em;
    white-space: nowrap;
}

/* --- Campo de busca do cabeçalho ------------------------------------- */
.pr-search { position: relative; width: 100%; }

.header-nav form.search,
.search-bottom form.search,
.pix-copy {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    background: var(--pr-surface);
    border: 1px solid transparent;
    border-radius: var(--pr-r-md);
    transition: border-color .16s var(--pr-ease), background-color .16s var(--pr-ease);
}

.header-nav form.search:focus-within,
.search-bottom form.search:focus-within {
    background: var(--pr-paper);
    border-color: var(--pr-ink);
}

.header-nav form.search .icon-large,
.search-bottom form.search .icon-large,
.pix-copy .icon-large {
    display: flex;
    align-items: center;
    padding: 0 6px 0 14px;
    font-size: 18px;
    color: var(--pr-ink-3);
}

.header-nav form.search input,
.search-bottom form.search input,
.pix-copy input {
    flex: 1;
    min-width: 0;
    min-height: 46px;
    padding: 0 8px;
    background: transparent;
    border: 0;
    font-size: 14.5px;
}

.header-nav form.search input:focus,
.search-bottom form.search input:focus,
.pix-copy input:focus { box-shadow: none; }

/* Filho DIRETO: o `HeaderSearch.js` pendura o menu de histórico DENTRO do
   próprio `<form>`, e cada item dele é um `<button>` — com seletor de
   descendente, o histórico inteiro herdava a pílula preta do "Buscar".
   Medido no overlay de busca do celular. */
.header-nav form.search > button,
.search-bottom form.search > button,
.pix-copy > button {
    flex: none;
    margin: 4px;
    min-height: 38px;
    padding: 0 18px;
    background: var(--pr-ink);
    color: #fff;
    border-radius: var(--pr-r-sm);
    font-size: 13.5px;
    font-weight: 700;
}

.header-nav form.search > button:hover,
.pix-copy > button:hover { background: var(--primary-color); color: var(--on-primary); }

/* --- Ações do cabeçalho (favoritos, carrinho) ------------------------
   Filho DIRETO, e não descendente: o mini-carrinho mora dentro de
   `.right`, e um `.header-nav .right ul { display: flex }` alcançava
   também o `ul.products.mini` lá dentro — os itens do carrinho deitavam
   lado a lado e vazavam do painel. Medido na primeira abertura do
   mini-carrinho com dois itens. */
.header-nav .right > ul { display: flex; align-items: center; gap: 6px; }

.header-nav .right > ul > li > a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 48px;
    padding: 0 12px;
    border-radius: var(--pr-r-sm);
    transition: background-color .16s var(--pr-ease);
}

.header-nav .right > ul > li > a:hover { background: var(--pr-surface); }

.icon-large { position: relative; display: inline-flex; font-size: 21px; line-height: 1; }
.icon-small { display: inline-flex; align-items: center; font-size: 15px; }

/* Contador que o CartFx pulsa (`.bump`) — o aninhamento
   `.fly-item > .item-number` é contrato do módulo. */
.fly-item {
    position: absolute;
    top: -7px;
    right: -9px;
}

.item-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--primary-color);
    color: var(--on-primary);
    border-radius: var(--pr-r-pill);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.item-number.bump { animation: pr-bump .42s var(--pr-ease); }

@keyframes pr-bump {
    0% { transform: scale(1); }
    35% { transform: scale(1.45); }
    100% { transform: scale(1); }
}

/* A bolinha que voa do produto até o carrinho (shared/CartFx.js). O
   módulo escreve posição e transform inline; o que falta é o `fixed` e a
   transição — sem eles ela aparece parada no canto. */
.cart-fly-dot {
    position: fixed;
    z-index: 900;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--pr-paper);
    border: 1px solid var(--pr-line);
    box-shadow: var(--pr-shadow-pop);
    pointer-events: none;
    transition: transform .7s var(--pr-ease), opacity .7s var(--pr-ease);
}

.cart-fly-dot img { width: 100%; height: 100%; object-fit: cover; }

.iscart .icon-text { display: flex; flex-direction: column; line-height: 1.2; }
.iscart .mini-text { font-size: 11px; color: var(--pr-ink-3); }
.iscart .cart-total { font-size: 13.5px; font-weight: 700; }

/* --- Mini-carrinho ---------------------------------------------------
   Painel flutuante à direita. `.show` é a classe do SiteChrome. */
.iscart { position: relative; }

/* GAVETA lateral, não dropdown — o arranjo da referência: painel de
   altura inteira entrando pela direita, com o resto da tela escurecendo.
   O véu é o truque do box-shadow com spread de 100vmax: escurece a página
   sem elemento extra E sem bloquear o clique fora, que é como o
   SiteChrome fecha o painel. */
.mini-cart {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 260;
    width: min(400px, calc(100vw - 24px));
    background: var(--pr-paper);
    border-left: 1px solid var(--pr-line);
    visibility: hidden;
    transform: translateX(103%);
    transition: transform .32s var(--pr-ease), visibility .32s, box-shadow .32s var(--pr-ease);
}

.mini-cart.show {
    visibility: visible;
    transform: none;
    box-shadow: 0 0 0 100vmax rgba(10, 12, 16, .45), -24px 0 60px rgba(10, 12, 16, .18);
}

.mini-cart .content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.mini-cart .cart-head {
    flex: none;
    padding: 20px 22px;
    border-bottom: 1px solid var(--pr-line);
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.02em;
}

/* O corpo é quem rola; cabeça e rodapé ficam fixos, como na referência. */
.mini-cart .cart-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }

.mini-cart .products.mini { padding: 6px 0; }

.mini-cart .products.mini li.item {
    position: relative;
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) 26px;
    align-items: center;
    gap: 14px;
    padding: 14px 22px;
}

.mini-cart .products.mini li.item + li.item { border-top: 1px solid var(--pr-line); }

.mini-cart .thumbnail {
    aspect-ratio: 1 / 1;
    background: var(--pr-paper);
    border: 1px solid var(--pr-line);
    border-radius: var(--pr-r-sm);
    overflow: hidden;
}

.mini-cart .thumbnail img { object-fit: contain; padding: 5px; }

/* `align-items: flex-start` para o selo de unidade não esticar na largura
   da coluna — `span` dentro de flex-column estica por padrão. */
.mini-cart .item-content { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }

.mini-cart .item-content p {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mini-cart .item-content p { font-size: 13.5px; }

.mini-cart .item-content .price {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--pr-ink);
}

/* Dentro do mini-carrinho `.fly-item` é só o "x2" ao lado do preço — não
   é o contador do cabeçalho, e não pode herdar o posicionamento dele. */
.mini-cart .fly-item {
    position: static;
    font-size: 12px;
    font-weight: 600;
    color: var(--pr-ink-3);
}

.mini-cart .item-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: var(--pr-r-sm);
    color: var(--pr-ink-3);
    font-size: 16px;
}

.mini-cart .item-remove:hover { background: var(--pr-surface); color: var(--pr-danger); }

.mini-cart .cart-footer { flex: none; padding: 18px 22px calc(18px + env(safe-area-inset-bottom)); border-top: 1px solid var(--pr-line); }

.mini-cart .subtotal {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 12px;
    font-size: 13px;
    color: var(--pr-ink-2);
}

.mini-cart .subtotal p:first-child { font-size: 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--pr-ink); }
.mini-cart .subtotal strong { font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--pr-ink); }

.mini-cart .actions { display: grid; gap: 9px; }
.mini-cart .actions .secondary-button { border-color: var(--primary-color); color: var(--pr-brand-text); }
.mini-cart .actions .secondary-button:hover { background: var(--pr-brand-wash); }

/* --- Navegação de categorias (segunda linha) ------------------------- */
.pr-nav-row { border-top: 1px solid var(--pr-line); }

.header-nav nav > ul {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.header-nav nav > ul > li > a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 46px;
    padding: 0 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--pr-ink-2);
    transition: color .16s var(--pr-ease);
}

/* O fio ancora no próprio <a>. O <li> fica ESTÁTICO de propósito: um `li`
   posicionado vira o bloco de contenção do `.mega` e o painel de largura
   total passa a medir a largura do item (§6.15). */
.header-nav nav > ul > li > a::after {
    content: '';
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 10px;
    height: 2px;
    background: var(--primary-color);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .22s var(--pr-ease);
}

.header-nav nav > ul > li > a:hover { color: var(--pr-ink); }
.header-nav nav > ul > li > a:hover::after { transform: scaleX(1); }

/* --- Mega-menu -------------------------------------------------------- */
.header-nav .mega {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 70;
    background: var(--pr-paper);
    border-top: 1px solid var(--pr-line);
    box-shadow: var(--pr-shadow-pop);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .2s var(--pr-ease), transform .2s var(--pr-ease), visibility .2s;
}

.header-nav .has-child:hover > .mega,
.header-nav .has-child:focus-within > .mega { opacity: 1; visibility: visible; transform: none; }

.header-nav .mega .wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 26px 30px;
    padding: 30px 0 34px;
}

.header-nav .mega .flexcol { min-width: 0; }
.header-nav .mega h4 { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--pr-ink-3); margin-bottom: 10px; }
.header-nav .mega ul { display: flex; flex-direction: column; gap: 3px; }
.header-nav .mega ul a { display: inline-flex; align-items: center; min-height: 24px; font-size: 14px; color: var(--pr-ink-2); }
.header-nav .mega ul a:hover { color: var(--pr-brand-text); }
.header-nav .mega .row > img { margin-top: 12px; border-radius: var(--pr-r-sm); }

/* O produto sorteado do mega-menu: cartão de destaque no fim da grade. */
.header-nav .mega .flexcol.products .row {
    padding: 16px;
    background: var(--pr-surface);
    border-radius: var(--pr-r-md);
}

.header-nav .mega .media { display: flex; flex-direction: column; gap: 12px; }
.header-nav .mega .thumbnail { aspect-ratio: 4 / 3; background: var(--pr-paper); border-radius: var(--pr-r-sm); }
.header-nav .mega .thumbnail img { object-fit: contain; padding: 8px; }
.header-nav .mega .text-content h4 { margin-bottom: 8px; }
.header-nav .mega .primary-button { min-height: 40px; width: 100%; }

/* --- Histórico de busca (shared/HeaderSearch.js) ---------------------
   Sem estas regras os botões do histórico FLUEM INLINE dentro do form de
   busca, empurrando o campo (§4.6b). */
.search-select-box { position: relative; }

.select-box-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 90;
    display: none;
    padding: 6px;
    background: var(--pr-paper);
    border: 1px solid var(--pr-line);
    border-radius: var(--pr-r-md);
    box-shadow: var(--pr-shadow-pop);
}

.search-select-box-open .select-box-menu { display: block; }

.select-box-option,
.select-box-footer {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 9px 11px;
    border-radius: var(--pr-r-sm);
    font-size: 14px;
    text-align: left;
    color: var(--pr-ink-2);
}

.select-box-option:hover,
.select-box-footer:hover { background: var(--pr-surface); color: var(--pr-ink); }

.select-box-option .option-icon { color: var(--pr-ink-3); font-size: 16px; }
.select-box-option .option-body { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.select-box-footer {
    margin-top: 4px;
    border-top: 1px solid var(--pr-line);
    border-radius: 0 0 var(--pr-r-sm) var(--pr-r-sm);
    font-size: 12.5px;
    color: var(--pr-ink-3);
}

/* ====================== 7. MENU MOBILE E OVERLAYS ====================== */

.trigger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-left: -8px;
    border-radius: var(--pr-r-sm);
    font-size: 22px;
}

.site-off {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 200;
    width: min(340px, 88vw);
    transform: translateX(-102%);
    transition: transform .32s var(--pr-ease);
    visibility: hidden;
}

.showmenu .site-off { transform: none; visibility: visible; }

.off-canvas {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--pr-paper);
    border-right: 1px solid var(--pr-line);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.canvas-head {
    position: sticky;
    top: 0;
    z-index: 2;
    /* `space-between`: a gaveta do premium tem a marca à esquerda (ver
       views/themes/premium/partials/off-canvas.php) e o fechar à direita.
       Com `flex-end`, os dois se empilhavam no canto e o "×" comia o fim
       do logotipo. */
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    background: var(--pr-paper);
    border-bottom: 1px solid var(--pr-line);
}

/* O logotipo cede espaço; o botão de fechar, nunca. */
.pr-canvas__logo { min-width: 0; }
.pr-canvas__logo img { max-height: 30px; width: auto; object-fit: contain; }
.canvas-head .t-close { flex: none; }

.t-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--pr-r-sm);
    background: var(--pr-surface);
    font-size: 20px;
}

/* O drawer recebe uma CÓPIA do nav do cabeçalho e da faixa de utilidade
   (SiteChrome clona os dois). Toda regra de navegação precisa de resposta
   nos DOIS contextos — foi assim que um tema irmão abriu o drawer só com
   "Entrar/Criar conta": o `ul` clonado continuava `display:none` (§6.14). */
/* `align-items: stretch` explícito: o `ul` clonado traz a classe
   `.flexitem` do cabeçalho, que centraliza — e no drawer isso deixava
   todo item de menu centrado, como se fosse um rodapé. O clone herda as
   classes do original, então toda regra de navegação precisa de resposta
   nos dois contextos (§6.14). */
.off-canvas nav > ul,
.off-canvas .thetop-nav ul,
.off-canvas .thetop-nav .wrapper,
.off-canvas .departments ul {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.off-canvas nav > ul > li,
.off-canvas .thetop-nav li { border-bottom: 1px solid var(--pr-line); }

.off-canvas nav > ul > li > a,
.off-canvas .thetop-nav li > a,
.off-canvas .thetop-nav li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 18px;
    font-size: 15px;
    font-weight: 600;
}

.off-canvas .thetop-nav {
    margin-top: 6px;
    border-top: 1px solid var(--pr-line);
    background: var(--pr-surface);
}

.off-canvas .thetop-nav li { font-weight: 500; color: var(--pr-ink-2); }
.off-canvas .thetop-nav .left ul li:empty { display: none; }

/* A faixa do topo entra na gaveta como CÓPIA CRUA do cabeçalho (SiteChrome
   copia o innerHTML de `.header-top .wrapper`), e lá dentro ela é uma linha
   com dois blocos, `.left` e `.right`, cada um com o seu `ul`. Sem as
   regras abaixo os dois blocos continuavam se comportando como linha: item
   centralizado, recuo diferente de vizinho para vizinho e altura dobrada
   onde o `li` tem `a` dentro (padding no pai E no filho). Era a "sidebar
   quebrada" relatada com print no celular, 2026-08-11. */
.off-canvas .thetop-nav .wrapper,
.off-canvas .thetop-nav .left,
.off-canvas .thetop-nav .right {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 0;
    padding: 0;
    margin: 0;
}

/* O `li` só desenha o retângulo quando NÃO tem link dentro; com link, quem
   recebe o padding é o `a`, senão a altura soma duas vezes. */
.off-canvas .thetop-nav li:has(> a) { padding: 0; }

.off-canvas .thetop-nav li,
.off-canvas .thetop-nav li > a {
    justify-content: flex-start;
    text-align: left;
    font-size: 14px;
}

/* Ícone decorativo do selo ("compra protegida") sem alinhamento próprio
   ficava empurrando o texto para o meio da gaveta. */
.off-canvas .thetop-nav li i { flex: none; font-size: 16px; }

.off-canvas .icon-small { transition: transform .2s var(--pr-ease); }
.off-canvas .has-child.expand > a .icon-small { transform: rotate(180deg); }

/* O `.mega` clonado é um DIV (não o `ul` do acordeão): a regra de
   fechado/aberto precisa mirar o próprio `.mega`, senão o submenu
   "expande para lugar nenhum". */
.off-canvas .mega {
    display: none;
    padding: 4px 18px 14px;
    background: var(--pr-surface);
}

.off-canvas .has-child.expand > .mega { display: block; }

.off-canvas .mega .wrapper { display: flex; flex-direction: column; gap: 14px; padding: 0; }
.off-canvas .mega h4 { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--pr-ink-3); margin-bottom: 6px; }
.off-canvas .mega ul { gap: 4px; }
.off-canvas .mega ul li { border: 0; }
.off-canvas .mega ul a { display: block; padding: 6px 0; font-size: 14px; font-weight: 500; color: var(--pr-ink-2); }
.off-canvas .mega img,
.off-canvas .mega .flexcol.products { display: none; }

/* Cortina única para drawer e busca */
.overlay {
    position: fixed;
    inset: 0;
    z-index: 150;
    background: rgba(10, 12, 16, .5);
    opacity: 0;
    visibility: hidden;
    transition: opacity .28s var(--pr-ease), visibility .28s;
}

.showmenu .overlay,
.showsearch .overlay { opacity: 1; visibility: visible; }

/* --- Busca do celular (overlay) --------------------------------------
   O partial é emitido como último filho do `.site` porque no arranjo
   padrão ele é overlay — `position: fixed` não liga para a posição no DOM
   (§6.20). Na página de listagem o JS de apresentação do tema move o nó
   para baixo do cabeçalho e acrescenta `--inline`. */
.search-bottom {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 210;
    padding: 14px 0;
    background: var(--pr-paper);
    border-bottom: 1px solid var(--pr-line);
    transform: translateY(-102%);
    transition: transform .3s var(--pr-ease);
}

.showsearch .search-bottom { transform: none; }

.search-bottom .search-close {
    order: 3;
    flex: none;
    width: 40px;
    height: 40px;
    margin-right: 4px;
    background: transparent;
}

.search-bottom--inline {
    position: static;
    transform: none;
    padding: 0;
    border: 0;
    background: transparent;
}

.search-bottom--inline .search-close { display: none; }

/* --- Barra inferior do celular --------------------------------------- */
.menu-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 120;
    background: var(--pr-paper);
    border-top: 1px solid var(--pr-line);
    padding-bottom: env(safe-area-inset-bottom);
}

.menu-bottom nav > ul { display: flex; }

.menu-bottom li { flex: 1; }

.menu-bottom li > a {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 56px;
    padding: 6px 2px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--pr-ink-2);
}

.menu-bottom li > a i { font-size: 20px; transition: transform .16s var(--pr-ease); }

/* A barra inferior é o principal controle de navegação no celular e só
   tinha troca de cor no `:active` -- no toque real isso passa despercebido,
   e não havia nenhum sinal de foco por teclado nem de "onde eu estou".
   Três respostas, sem animar propriedade de layout:
   toque   -> ícone afunda e o alvo escurece;
   teclado -> anel de foco visível;
   página  -> item da página atual em destaque, via `aria-current`. */
.menu-bottom li > a {
    -webkit-tap-highlight-color: transparent;
    transition: color .16s var(--pr-ease), background-color .16s var(--pr-ease);
}

.menu-bottom li > a:hover { color: var(--pr-ink); }

.menu-bottom li > a:active {
    color: var(--pr-brand-text);
    background: var(--pr-surface);
}

.menu-bottom li > a:active i { transform: scale(.88); }

.menu-bottom li > a:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: -3px;
    border-radius: var(--pr-r-sm);
}

/* Marcação de "página atual" ficou de fora: o partial compartilhado não
   emite `aria-current` em item nenhum, e regra de CSS para um atributo que
   ninguém escreve é peso morto que o próximo leitor tenta entender. Quando
   o markup passar a marcar, o destaque entra aqui. */
.menu-bottom .fly-item { top: 4px; right: 50%; margin-right: -22px; }

/* --- Preloader e banner de frete ------------------------------------- */
#preloader {
    position: fixed;
    inset: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pr-paper);
    opacity: 1;
    transition: opacity .4s var(--pr-ease);
}

#preloader.is-done { opacity: 0; pointer-events: none; }

.preloader-inner { display: flex; flex-direction: column; align-items: center; gap: 16px; }

.preloader-name {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--pr-ink-2);
}

.preloader-bar { display: block; width: 128px; height: 2px; background: var(--pr-line); overflow: hidden; }

.preloader-bar span {
    display: block;
    width: 40%;
    height: 100%;
    background: var(--primary-color);
    animation: pr-preload 1.1s var(--pr-ease) infinite;
}

@keyframes pr-preload {
    from { transform: translateX(-100%); }
    to { transform: translateX(320%); }
}

.notification {
    position: fixed;
    left: 50%;
    bottom: 22px;
    z-index: 130;
    transform: translateX(-50%);
    width: min(420px, calc(100vw - 32px));
    padding: 13px 16px;
    background: var(--pr-night);
    color: #fff;
    border-radius: var(--pr-r-md);
    box-shadow: var(--pr-shadow-pop);
    transition: opacity .4s var(--pr-ease);
}

.notification-title { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; }
.notification .progress-bar { margin-top: 9px; height: 3px; background: rgba(255, 255, 255, .2); border-radius: var(--pr-r-pill); overflow: hidden; }
.notification .progress { height: 100%; background: #fff; border-radius: inherit; transition: width .5s var(--pr-ease); }

/* ============================== 8. HERO ============================== */

.pr-hero { position: relative; }

/* --- Slider (referência: setas + bolinhas + pausa numa barra central) --- */
.pr-hero__slider { position: relative; overflow: hidden; }

.pr-hero__controls {
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 8px;
    background: var(--pr-paper);
    border-radius: var(--pr-r-pill);
    box-shadow: 0 8px 26px rgba(10, 12, 16, .22);
}

.pr-hero__arrow,
.pr-hero__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    font-size: 19px;
    color: var(--pr-ink-2);
    transition: background-color .16s var(--pr-ease), color .16s var(--pr-ease);
}

.pr-hero__arrow:hover,
.pr-hero__toggle:hover { background: var(--pr-surface); color: var(--pr-ink); }

.pr-hero__dots { display: flex; align-items: center; gap: 6px; padding: 0 6px; }

.pr-hero__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--pr-line-2);
    cursor: pointer;
    transition: background-color .16s var(--pr-ease), transform .16s var(--pr-ease);
}

.pr-hero__dot--on { background: var(--pr-ink); transform: scale(1.25); }

/* Pausa/retoma: dois ícones no botão, o CSS mostra um por vez. */
.pr-hero__toggle .ri-play-mini-line { display: none; }
.pr-hero__toggle--pausado .ri-pause-mini-line { display: none; }
.pr-hero__toggle--pausado .ri-play-mini-line { display: inline-flex; }

/* Entrada do texto a cada troca de slide: selo, título e botão sobem em
   sequência quando o slide vira o ativo — a animação reinicia porque o
   seletor só casa com `.swiper-slide-active`. Com um banner (--static)
   nada disso existe e o texto nasce visível. */
.pr-hero__slider:not(.pr-hero__slider--static) .swiper-slide .pr-hero__content > * {
    opacity: 0;
    transform: translateY(22px);
}

.pr-hero__slider:not(.pr-hero__slider--static) .swiper-slide-active .pr-hero__content > * {
    animation: pr-hero-entra .65s var(--pr-ease) forwards;
}

.pr-hero__slider:not(.pr-hero__slider--static) .swiper-slide-active .pr-hero__content > :nth-child(1) { animation-delay: .12s; }
.pr-hero__slider:not(.pr-hero__slider--static) .swiper-slide-active .pr-hero__content > :nth-child(2) { animation-delay: .26s; }
.pr-hero__slider:not(.pr-hero__slider--static) .swiper-slide-active .pr-hero__content > :nth-child(3) { animation-delay: .4s; }

@keyframes pr-hero-entra {
    to { opacity: 1; transform: none; }
}

/* A foto entra com um zoom lento (Ken Burns discreto). */
.pr-hero__slider:not(.pr-hero__slider--static) .swiper-slide .pr-hero__media img {
    transform: scale(1.07);
    transition: transform 6.5s linear;
}

.pr-hero__slider:not(.pr-hero__slider--static) .swiper-slide-active .pr-hero__media img { transform: scale(1); }

.pr-hero__main {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: clamp(420px, 62vh, 640px);
    background: var(--pr-surface-2);
    overflow: hidden;
}

.pr-hero__media { position: absolute; inset: 0; }
.pr-hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* Véu em degradê da esquerda: o texto do lojista tem que ser legível sobre
   QUALQUER foto que ele suba, inclusive uma clara e cheia de detalhe. */
.pr-hero__main::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(8, 10, 13, .82) 0%, rgba(8, 10, 13, .55) 42%, rgba(8, 10, 13, .08) 78%);
}

.pr-hero__main > .container { position: relative; z-index: 2; padding-block: 56px; }

.pr-hero__content { max-width: 640px; color: #fff; }

/* Pílula de campanha no vermelho-salmão da referência ("NEW ARRIVALS"):
   é selo de campanha, mesma família do selo de desconto — a cor da loja
   fica no CTA logo abaixo, e os dois não brigam. */
.pr-hero__badge {
    display: inline-flex;
    align-items: center;
    margin-bottom: 18px;
    padding: 7px 15px;
    background: #f47367;
    color: #fff;
    border-radius: var(--pr-r-pill);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.pr-hero__title { color: #fff; text-wrap: balance; }
.pr-hero__title span { display: block; }
.pr-hero__title .pr-hero__title-2 { color: rgba(255, 255, 255, .72); }

.pr-hero__cta-row { margin-top: 26px; }
.pr-hero__cta { min-height: 52px; padding: 0 28px; font-size: 15px; }
.pr-hero__cta i { font-size: 17px; transition: transform .2s var(--pr-ease); }
.pr-hero__cta:hover i { transform: translateX(3px); }

/* Faixa de banners secundários: eles existem, então aparecem — não ficam
   escondidos atrás de uma bolinha de carrossel. */
/* Banners secundários como CARTÕES DE IMAGEM, no formato dos banners
   promocionais da referência: foto cobrindo o cartão, véu escurecendo de
   baixo, texto branco sobreposto e zoom suave no hover. `auto-fit` para
   um banner só ocupar a linha inteira em vez de deixar um buraco (§6.23). */
.pr-hero__strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 18px;
    padding-top: 18px;
}

.pr-hero__card {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 216px;
    border-radius: var(--pr-r-md);
    overflow: hidden;
    background: var(--pr-surface-2);
    isolation: isolate;
}

.pr-hero__card-media { position: absolute; inset: 0; z-index: -2; }
.pr-hero__card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--pr-ease); }
.pr-hero__card:hover .pr-hero__card-media img { transform: scale(1.05); }

.pr-hero__card::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to top, rgba(8, 10, 13, .74) 0%, rgba(8, 10, 13, .2) 55%, rgba(8, 10, 13, 0) 80%);
}

.pr-hero__card-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: 20px;
    color: #fff;
}

.pr-hero__card-text .pr-eyebrow { color: rgba(255, 255, 255, .92); }
.pr-hero__card-text strong { font-size: 21px; font-weight: 800; letter-spacing: -.025em; line-height: 1.12; }

.pr-hero__card-link {
    margin-top: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.pr-hero__card:hover .pr-hero__card-link i { transform: translateX(3px); }
.pr-hero__card-link i { transition: transform .2s var(--pr-ease); }

/* ======================= 9. SEÇÃO, GRADE, TRILHO ======================= */

.pr-section { padding: clamp(44px, 6vw, 76px) 0; }
.pr-section + .pr-section { padding-top: 0; }

.pr-sectop {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 28px;
}

.pr-sectop h2 {
    font-size: clamp(1.5rem, 3.2vw, 2.35rem);
    letter-spacing: -.032em;
    white-space: nowrap;
}

/* --- Grade de produtos ----------------------------------------------
   Linhas RETAS e finas dividindo as células, como na referência — borda
   na própria célula, não box-shadow: os dois offsets do shadow se
   cruzavam nas esquinas e desenhavam uma estrelinha em cada encontro de
   quatro cards. O contêiner segue branco (§6.23): última linha
   incompleta fica branca e some. Canto de 8px, um ponto abaixo do
   painel, medido na referência. */
.pr-grid {
    display: grid;
    grid-template-columns: repeat(var(--pr-grid-colunas), minmax(0, 1fr));
    background: var(--pr-paper);
    border: 1px solid var(--pr-line);
    border-radius: var(--pr-r-sm);
    /* visível, não hidden: o card do hover SALTA da grade (escala além da
       célula), e overflow hidden decapitava o salto. O fio agora é borda
       da célula, então não há mais o que recortar. */
    overflow: visible;
}

.pr-grid > * {
    display: flex;
    min-width: 0;
    border-right: 1px solid var(--pr-line);
    border-bottom: 1px solid var(--pr-line);
}

.pr-grid > * > .pr-card { width: 100%; }

/* --- Trilho horizontal -------------------------------------------------
   Como na referência: os cards moram num CONTÊINER de fio, separados por
   linhas retas (não são cartões soltos), a scrollbar não aparece (as
   setas e o arrasto navegam) e o card do hover SALTA do trilho — escala
   com sombra ampla e canto macio, por cima dos vizinhos. O respiro
   vertical do `.pr-railbox` é o espaço que o salto usa: um contêiner de
   rolagem recorta o que passa da borda, então a folga tem que existir
   DENTRO dele. */
.pr-railbox {
    background: var(--pr-paper);
    border: 1px solid var(--pr-line);
    border-radius: var(--pr-r-sm);
    overflow: hidden;
}

.pr-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(230px, calc(100% / 4));
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.pr-rail::-webkit-scrollbar { display: none; }

/* No computador o trilho NÃO é um contêiner de rolagem: ele anda por
   transform (rail.js) e o contêiner recorta só no eixo X — `clip` não
   força o Y, então o card do hover VAZA por cima e por baixo da borda,
   como na referência. Sem respiro interno: os cards encostam nas bordas
   e o salto acontece para FORA, não dentro de uma margem. No toque
   (sem hover) a rolagem nativa continua. */
@media (min-width: 901px) and (hover: hover) {
    .pr-railbox { overflow-x: clip; overflow-y: visible; }

    .pr-rail {
        overflow: visible;
        scroll-snap-type: none;
        transition: transform .45s var(--pr-ease);
    }
}

.pr-rail > * { scroll-snap-align: start; }

.pr-rail > * + * { border-left: 1px solid var(--pr-line); }

.pr-rail .pr-card {
    height: 100%;
    transition: box-shadow .22s var(--pr-ease), transform .22s var(--pr-ease), border-radius .22s var(--pr-ease);
}

.pr-rail .pr-card:hover,
.pr-rail .pr-card:focus-within {
    transform: scale(1.045);
    background: var(--pr-paper);
}

.pr-rail__nav { display: flex; gap: 8px; }

.pr-rail__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--pr-line-2);
    border-radius: 50%;
    font-size: 19px;
    color: var(--pr-ink-2);
    transition: border-color .16s var(--pr-ease), color .16s var(--pr-ease), background-color .16s var(--pr-ease);
}

.pr-rail__btn:hover:not(:disabled) { border-color: var(--pr-ink); color: var(--pr-ink); }
.pr-rail__btn:disabled { opacity: .35; cursor: default; }

/* --- Cartão de oferta (primeiro item do trilho) ----------------------- */
.pr-offer {
    display: grid;
    grid-template-rows: auto 1fr;
    background: var(--pr-paper);
}

.pr-offer__media { aspect-ratio: 16 / 10; background: var(--pr-surface); }
.pr-offer__media img { object-fit: contain; padding: 14px; }
.pr-offer__body { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px 18px; }

.pr-offer__body h3 {
    font-size: 16px;
    line-height: 1.42;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pr-offer__price .current { font-size: 21px; font-weight: 800; color: var(--pr-ink); }
.pr-offer__price:has(.normal) .current { color: var(--pr-sale); }
.pr-offer__price .normal { margin-left: 7px; text-decoration: line-through; color: var(--pr-ink-3); }

.pr-offer__clock { margin-top: auto; }
.pr-offer__clock ul { display: flex; gap: 6px; margin-top: 6px; }

.pr-offer__clock li {
    position: relative;
    flex: 1;
    padding: 7px 4px 18px;
    background: var(--pr-surface);
    border-radius: var(--pr-r-sm);
    font-size: 17px;
    font-weight: 800;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.pr-offer__clock li::after {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 5px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--pr-ink-3);
}

.pr-offer__clock li#days::after { content: 'dias'; }
.pr-offer__clock li#hours::after { content: 'hrs'; }
.pr-offer__clock li#minutes::after { content: 'min'; }
.pr-offer__clock li#seconds::after { content: 'seg'; }

.pr-offer .primary-button { width: 100%; }

/* --- Categorias em cartão de foto ------------------------------------- */
.pr-collections__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.pr-collection {
    position: relative;
    display: block;
    aspect-ratio: 5 / 4;
    border-radius: var(--pr-r-md);
    overflow: hidden;
    background: var(--pr-surface);
    isolation: isolate;
}

.pr-collection__media { position: absolute; inset: 0; }

.pr-collection__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s var(--pr-ease);
}

.pr-collection:hover .pr-collection__media img { transform: scale(1.05); }

.pr-collection__media--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pr-surface-2);
    color: var(--pr-ink-3);
    font-size: 64px;
    font-weight: 800;
}

.pr-collection::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(8, 10, 13, .78) 0%, rgba(8, 10, 13, .25) 45%, rgba(8, 10, 13, 0) 75%);
}

.pr-collection__text {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 18px;
    color: #fff;
}

.pr-collection__text strong { font-size: 19px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.pr-collection__text span { font-size: 12px; color: rgba(255, 255, 255, .74); }

/* --- Categoria mais vendida (vitrine + banner lateral) ----------------- */

/* O texto-fantasma acima do título, como o "Top cellphones" da
   referência: enorme, quase invisível, pura ambientação. */
.pr-topcat { --pr-ghost: clamp(2.2rem, 5vw, 4.2rem); }

/* `.pr-section + .pr-section` zera o topo, e o fantasma é a primeira
   coisa da seção — sem este respiro ele encosta no conteúdo da seção
   anterior. */
.pr-section.pr-topcat { padding-top: clamp(28px, 4vw, 52px); }

.pr-topcat .pr-sectop {
    position: relative;
    /* O espaço do fantasma, reservado. Ele é mais ALTO que a linha do
       título, então ancorá-lo por baixo (o que este bloco fazia) jogava
       as letras para dentro do <h2> e do botão "Ver a categoria" — e o
       excedente ainda sangrava para cima, sobre a seção anterior.
       Ancorado no topo com o espaço reservado aqui, ele vira o que sempre
       quis ser: uma faixa de ambientação ACIMA do título. O fator é
       pouco menor que 1 de propósito: o que sobra da caixa da linha
       acima das maiúsculas é vazio, e descontá-lo tira uma folga que
       pareceria buraco. */
    padding-top: calc(var(--pr-ghost) * .95);
}

.pr-topcat__ghost {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    max-width: 100%;
    overflow: hidden;
    font-size: var(--pr-ghost);
    line-height: 1;
    font-weight: 800;
    letter-spacing: -.04em;
    white-space: nowrap;
    color: var(--pr-ink);
    opacity: .05;
    pointer-events: none;
}

.pr-topcat__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 38%);
    gap: 18px;
    align-items: stretch;
}

/* Dois cards por vez no trilho da categoria — a coluna é mais estreita
   que a seção inteira. */
.pr-topcat__body .pr-rail {
    grid-auto-columns: minmax(220px, calc(100% / 2));
}

.pr-topcat__banner { min-height: 360px; }

@media (max-width: 980px) {
    .pr-topcat__body { grid-template-columns: minmax(0, 1fr); }
    .pr-topcat__banner { min-height: 210px; }
}

/* --- Faixa de marcas --------------------------------------------------- */
.pr-brands__inner {
    display: flex;
    align-items: center;
    gap: 26px;
    padding: 22px 0;
    border-top: 1px solid var(--pr-line);
    border-bottom: 1px solid var(--pr-line);
}

.pr-brands__inner > .pr-eyebrow { flex: none; }

.pr-brands__rail {
    display: flex;
    align-items: center;
    gap: 34px;
    overflow-x: auto;
    scrollbar-width: none;
}

.pr-brands__rail::-webkit-scrollbar { display: none; }

.pr-brands__item { flex: none; }

.pr-brands__item img {
    height: 34px;
    width: auto;
    max-width: 130px;
    object-fit: contain;
    filter: grayscale(1);
    opacity: .55;
    transition: filter .2s var(--pr-ease), opacity .2s var(--pr-ease);
}

.pr-brands__item a:hover img { filter: none; opacity: 1; }

/* ======================== 10. CARD DE PRODUTO ======================== */

/* No REPOUSO o card é reto e ocupa a célula inteira, colado nas
   divisórias — como a grade do explorar. O canto macio existe só no
   salto do hover: é o que faz o card parecer que DESGRUDA da lista. */
.pr-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--pr-paper);
    border-radius: 0;
    transition: box-shadow .22s var(--pr-ease), border-radius .22s var(--pr-ease);
}

/* O card SALTA no hover, como na referência: escala, sombra ampla e
   canto macio, vindo À FRENTE da lista. `z-index` para passar por cima
   dos vizinhos de fio. O transform só entra na grade e no trilho (regras
   escopadas) — aqui fica o que é comum. */
.pr-card:hover,
.pr-card:focus-within {
    z-index: 3;
    border-radius: var(--pr-r-md);
    box-shadow: var(--pr-shadow-pop);
}

.pr-grid .pr-card { transition: box-shadow .22s var(--pr-ease), transform .22s var(--pr-ease), border-radius .22s var(--pr-ease); }

.pr-grid .pr-card:hover,
.pr-grid .pr-card:focus-within {
    transform: scale(1.05);
    background: var(--pr-paper);
}

.pr-card__media {
    position: relative;
    padding: 14px;
}

.pr-card__thumb {
    aspect-ratio: var(--pr-ratio-foto);
    background: var(--pr-paper);
}

.pr-card__thumb img {
    object-fit: contain;
    transition: transform .5s var(--pr-ease);
}

.pr-card:hover .pr-card__thumb img { transform: scale(1.04); }

.pr-card__tags {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.pr-tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: var(--pr-r-pill);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.5;
}

/* Selo de desconto como na referência: pílula clara com texto vermelho,
   não um bloco cheio — o card fica leve e o vermelho sinaliza sozinho. */
.pr-tag--sale { background: var(--pr-sale-wash); color: var(--pr-sale); border: 1px solid color-mix(in srgb, var(--pr-sale) 24%, #fff); }
.pr-tag--ship { background: var(--pr-paper); color: var(--pr-success); border: 1px solid currentColor; }

/* Escopado em `.pr-card__fav` e não em `.favorite-btn` puro: a mesma
   classe é o link "Favoritos" da página de produto, e posicionar absoluto
   sem escopo arranca aquele link do lugar (§6.6). */
.pr-card__fav {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--pr-paper);
    border: 1px solid var(--pr-line);
    border-radius: 50%;
    font-size: 17px;
    color: var(--pr-ink-2);
    cursor: pointer;
    transition: color .16s var(--pr-ease), border-color .16s var(--pr-ease);
}

.pr-card__fav:hover { color: var(--pr-danger); border-color: currentColor; }
.pr-card__fav .ri-heart-fill { color: var(--pr-danger); }

/* O bloco de compra flutua sobre a foto e só aparece no hover — a altura
   do card não muda, então a grade não pula quando o mouse passa. O
   arranjo é o da referência: botão de sacola quadrado no canto
   inferior-esquerdo da foto, olho de ver produto centrado sobre ela. */
.pr-card__buy {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 14px;
    z-index: 3;
    display: flex;
    gap: 8px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .22s var(--pr-ease), transform .22s var(--pr-ease);
}

.pr-card:hover .pr-card__buy,
.pr-card:focus-within .pr-card__buy { opacity: 1; transform: none; }

/* Olho de quick-view: círculo branco no meio da foto, como o da
   referência. Só existe onde existe hover — no toque ele seria redundante
   com o clique na própria foto. */
.pr-card__quick {
    position: absolute;
    left: 50%;
    top: 38%;
    z-index: 3;
    display: none;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-left: -21px;
    background: var(--pr-paper);
    border: 1px solid var(--pr-line);
    border-radius: 50%;
    box-shadow: 0 4px 14px rgba(10, 12, 16, .16);
    font-size: 18px;
    color: var(--pr-ink);
    opacity: 0;
    transform: translateY(8px) scale(.9);
    transition: opacity .22s var(--pr-ease), transform .22s var(--pr-ease);
}

.pr-card__quick:hover { color: var(--pr-brand-text); border-color: currentColor; }

@media (hover: hover) {
    .pr-card__quick { display: inline-flex; }

    .pr-card:hover .pr-card__quick,
    .pr-card:focus-within .pr-card__quick { opacity: 1; transform: none; }
}

.pr-card__buy .purchase-quantity {
    display: flex;
    align-items: center;
    flex: none;
    background: var(--pr-paper);
    border: 1px solid var(--pr-line-2);
    border-radius: var(--pr-r-sm);
    overflow: hidden;
}

.pr-card__buy .purchase-quantity-btn {
    width: 30px;
    height: 42px;
    font-size: 15px;
    font-weight: 600;
    color: var(--pr-ink-2);
}

.pr-card__buy .purchase-quantity-btn:hover { background: var(--pr-surface); color: var(--pr-ink); }

.pr-card__buy .purchase-quantity-input {
    width: 38px;
    min-height: 42px;
    padding: 0;
    border: 0;
    border-radius: 0;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    -moz-appearance: textfield;
}

.pr-card__buy .purchase-quantity-input::-webkit-outer-spin-button,
.pr-card__buy .purchase-quantity-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pr-card__buy .purchase-quantity-input:focus { box-shadow: none; }

.pr-card__buy .purchase-btn {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 44px;
    min-height: 44px;
    padding: 0;
    background: var(--primary-color);
    color: var(--on-primary);
    border-radius: var(--pr-r-sm);
    font-size: 13.5px;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--primary-color) 34%, transparent);
    transition: background-color .18s var(--pr-ease);
}

.pr-card__buy .purchase-btn .purchase-btn-icon { font-size: 18px; }

/* No computador o botão é o quadrado com o ícone, como na referência; o
   rótulo "Comprar" fica para o toque. `font-size: 0` e não `display:
   none` no span: o flashButtonSuccess (CartFx) troca o innerHTML por
   ✓ + texto cru, e texto cru não tem span para esconder — com font-size
   zero no botão e tamanho explícito no ícone, a confirmação vira só o
   ✓ pulsando, que é o que cabe num quadrado de 44px. */
@media (hover: hover) {
    /* gap: 0 junto do font-size: 0 — o nó de texto zerado ainda é um item
       de flex, e o gap de 8px entre ele e o ícone descentralizava a
       sacola dentro do quadrado. */
    .pr-card__buy .purchase-btn { font-size: 0; gap: 0; }
    .pr-card__buy .purchase-btn i { font-size: 18px; }
}

.pr-card__buy .purchase-btn.btn-added { animation: pr-pop .5s var(--pr-ease); }

@keyframes pr-pop {
    0% { transform: scale(1); }
    45% { transform: scale(1.22); }
    100% { transform: scale(1); }
}

@media (hover: none) {
    .pr-card__buy .purchase-btn { flex: 1; width: auto; padding: 0 14px; box-shadow: none; }
}

.pr-card__buy .purchase-btn:hover { background: color-mix(in srgb, var(--primary-color) 84%, #000); }

/* Estado do `flashButtonSuccess` (shared/CartFx.js): o módulo troca o
   innerHTML por um ✓ e devolve depois de 1,4s. */
.btn-added { background: var(--pr-success) !important; color: #fff !important; }

.pr-card__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 18px 20px;
}

/* Categoria em cima do título, como o "Woodstock Electronics" da
   referência: miúda, cinza, capitalizada pelo view-model. */
.pr-card__cat { font-size: 11.5px; line-height: 1.3; color: var(--pr-ink-3); }

/* Swatches de variação — miniaturas redondas, decorativas. */
.pr-card__swatches { display: flex; align-items: center; gap: 5px; min-height: 16px; }

.pr-swatch {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid var(--pr-line-2);
    background: var(--pr-surface-2) center / cover no-repeat;
}

.pr-swatch--mais {
    width: auto;
    min-width: 16px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--pr-r-pill);
    background: var(--pr-surface);
    font-size: 9.5px;
    font-weight: 700;
    color: var(--pr-ink-2);
}

/* `line-height: 1.55` não é escolha estética: com 1.35 a linha do título
   dá 18px de altura, e o link do nome do produto reprovava o alvo de
   toque de 22px da varredura. Subir a entrelinha resolve sem transformar
   o `<a>` em inline-block, que quebraria o `-webkit-line-clamp` do h3. */
.pr-card__title {
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 3.1em;
}

.pr-card__title a:hover { color: var(--pr-brand-text); }

.pr-card__rating { display: flex; align-items: center; gap: 7px; }

.pr-card__price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: auto; }

/* Preço na convenção da referência: MINIMALISTA — corpo de texto, peso
   médio, tinta; vermelho só quando é promoção (o riscado ao lado conta a
   história). A cor da loja fica nos controles, não no número. */
.pr-card__price .current { font-size: 15px; font-weight: 600; color: var(--pr-ink); }
.pr-card__price:has(.normal) .current { color: var(--pr-sale); }
.pr-card__price .normal { text-decoration: line-through; color: var(--pr-ink-3); }

.pr-card__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; }

.pr-card__summary {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Onde não existe hover (celular, tablet), o botão de compra nasce visível
   e ocupa lugar próprio — nunca escondido atrás de um estado que aquele
   aparelho não consegue produzir. */
@media (hover: none) {
    .pr-card__buy {
        position: static;
        opacity: 1;
        transform: none;
        margin-top: 12px;
    }
}

/* ======================= 11. PÁGINA DE PRODUTO ======================= */

.breadcrumb { padding: 18px 0 14px; }
.breadcrumb ul { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12.5px; color: var(--pr-ink-3); }
.breadcrumb li { display: inline-flex; align-items: center; min-height: 24px; }
.breadcrumb li + li::before { content: '/'; margin-right: 8px; color: var(--pr-line-2); }
.breadcrumb a { display: inline-flex; align-items: center; min-height: 24px; }
.breadcrumb a:hover { color: var(--pr-ink); }

.pr-product { padding-bottom: clamp(40px, 5vw, 64px); }

.pr-product__top {
    display: grid;
    grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
    gap: clamp(24px, 3.4vw, 52px);
    align-items: start;
}

/* --- Galeria (markup compartilhado, dois Swipers ligados) ------------- */
.pr-product__gallery .item { position: relative; }

.pr-product__gallery .price {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 3;
}

.pr-product__gallery .discount {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 12px;
    background: var(--primary-color);
    color: var(--on-primary);
    border-radius: var(--pr-r-pill);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.15;
    text-align: center;
}

.big-image {
    position: relative;
    border: 1px solid var(--pr-line);
    background: var(--pr-paper);
    overflow: hidden;
}

/* 4:3 e não 1:1: com `contain` (que é o certo para produto fotografado de
   frente), foto paisagem numa moldura quadrada deixa duas faixas vazias
   altas — medido no catálogo da loja de teste, onde as fotos são 700×394. */
.big-image .image-show { aspect-ratio: 4 / 3; }

.big-image .image-show a,
.big-image .image-show img {
    display: block;
    width: 100%;
    height: 100%;
}

.big-image .image-show img { object-fit: contain; padding: clamp(16px, 3vw, 42px); }

/* Produto sem foto recebe o placeholder compartilhado
   (`sin_imagen.png`, posto pelo bootstrap ou pelo SiteChrome). Ele é um
   ícone, não uma foto: em tamanho cheio numa moldura de 4:3 vira um
   cartaz de "sem imagem" do tamanho da tela. Reduzido e apagado, ele lê
   como o que é — ausência, não erro. */
.big-image .image-show img[src$="sin_imagen.png"],
.pr-card__thumb img[src$="sin_imagen.png"],
.pr-collection img[src$="sin_imagen.png"] {
    padding: 26%;
    opacity: .45;
}

.big-image .swiper-button-next,
.big-image .swiper-button-prev {
    position: absolute;
    top: 50%;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-top: -21px;
    background: var(--pr-paper);
    border: 1px solid var(--pr-line-2);
    border-radius: 50%;
    cursor: pointer;
    transition: border-color .16s var(--pr-ease), opacity .16s var(--pr-ease);
}

.big-image .swiper-button-prev { left: 14px; }
.big-image .swiper-button-next { right: 14px; }
.big-image .swiper-button-next:hover,
.big-image .swiper-button-prev:hover { border-color: var(--pr-ink); }
.big-image .swiper-button-disabled { opacity: .35; }

/* As setas do Swiper vêm sem glifo (o CSS da lib desenha por ::after com
   a fonte dela). Aqui o glifo é do tema, para não depender disso. */
.big-image .swiper-button-prev::after,
.big-image .swiper-button-next::after {
    font-family: inherit;
    font-size: 17px;
    font-weight: 700;
    color: var(--pr-ink);
}

.big-image .swiper-button-prev::after { content: '‹'; }
.big-image .swiper-button-next::after { content: '›'; }

.small-image { margin-top: 12px; overflow: hidden; }
.small-image .small-image-wrapper { display: flex; gap: 10px; }

.small-image .thumbnail-show {
    flex: 0 0 84px;
    width: 84px;
    aspect-ratio: 1 / 1;
    border: 1px solid var(--pr-line);
    cursor: pointer;
    transition: border-color .16s var(--pr-ease);
}

/* O anchor entre a caixa e a foto é inline: sem `display:block` a
   porcentagem de altura resolve contra altura automática e a miniatura
   sai no tamanho natural (§6.18). */
.small-image .thumbnail-show a { display: block; width: 100%; height: 100%; }
.small-image .thumbnail-show img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.small-image .swiper-slide-thumb-active { border-color: var(--pr-ink); }

/* --- Coluna de compra ------------------------------------------------- */
.pr-product__buy { position: sticky; top: calc(var(--pr-header-h) + 16px); }

.pr-buybox { display: flex; flex-direction: column; gap: 14px; }

.pr-buybox h1 {
    font-size: clamp(1.5rem, 2.6vw, 2.1rem);
    letter-spacing: -.03em;
    line-height: 1.12;
    text-wrap: balance;
}

.pr-buybox > .pr-eyebrow { margin-bottom: -8px; }

.pr-buybox .rating { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pr-buybox .rating a { display: inline-flex; align-items: center; min-height: 24px; font-size: 12.5px; color: var(--pr-ink-3); }
.pr-buybox .rating a:hover { color: var(--pr-brand-text); }
.pr-buybox .rating .add-review { color: var(--pr-brand-text); font-weight: 600; }

/* O selo é `span` dentro de uma coluna flex: sem isto ele estica na
   largura inteira da coluna e vira uma faixa. */
.pr-buybox .cashback-badge { align-self: flex-start; }

.pr-buybox .price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }

.pr-buybox .price .current {
    font-size: clamp(1.75rem, 3.4vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -.035em;
    color: var(--pr-ink);
}

.pr-buybox .price:has(.normal) .current { color: var(--pr-sale); }

.pr-buybox .price .normal { font-size: 15px; text-decoration: line-through; color: var(--pr-ink-3); }
.pr-buybox .price .login-required { font-size: 16px; }

.stock-sku {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--pr-line);
    font-size: 12.5px;
    color: var(--pr-ink-3);
}

.stock-sku .available {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    color: var(--pr-success);
}

.stock-sku .available::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

/* --- Unidades de medida ----------------------------------------------- */
.sizes.unit-measures > p { font-size: 13px; font-weight: 700; margin-bottom: 8px; }

.unit-carousel { position: relative; display: flex; align-items: center; gap: 8px; }

.unit-track {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    padding: 2px;
}

.unit-track::-webkit-scrollbar { display: none; }

.unit-card {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 118px;
    padding: 11px 13px;
    border: 1px solid var(--pr-line-2);
    border-radius: var(--pr-r-sm);
    cursor: pointer;
    scroll-snap-align: start;
    transition: border-color .16s var(--pr-ease), background-color .16s var(--pr-ease);
}

.unit-card input { position: absolute; opacity: 0; pointer-events: none; }
.unit-card:hover { border-color: var(--pr-ink-2); }

.unit-card:has(input:checked) {
    border-color: var(--primary-color);
    background: var(--pr-brand-wash);
    box-shadow: inset 0 0 0 1px var(--primary-color);
}

.unit-name { font-size: 13px; font-weight: 700; }
.unit-price { font-size: 13px; color: var(--pr-brand-text); font-weight: 700; }
.unit-contains { font-size: 11px; color: var(--pr-ink-3); }

.unit-check { display: none; }
.unit-card:has(input:checked) .unit-check {
    position: absolute;
    top: 8px;
    right: 8px;
    display: inline-flex;
    font-size: 13px;
    color: var(--primary-color);
}

.unit-discount-badge {
    position: absolute;
    top: -8px;
    left: 10px;
    padding: 1px 7px;
    background: var(--pr-success);
    color: #fff;
    border-radius: var(--pr-r-pill);
    font-size: 10.5px;
    font-weight: 700;
}

.unit-nav {
    flex: none;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--pr-line-2);
    border-radius: 50%;
    color: var(--pr-ink-2);
}

.unit-nav:disabled { opacity: .3; }
.unit-carousel.no-overflow .unit-nav { display: none; }

.unit-savings-msg,
#unit-savings-msg {
    display: none;
    align-items: center;
    gap: 7px;
    margin-top: 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--pr-success);
}

#unit-savings-msg.visible { display: flex; }

/* --- Seletor de variação (VariationDropdown.js) -----------------------
   Estados conferidos no módulo: `.open` e `.has-selected` vão no `.select`
   — não no `#variation-select`, não no `li`. */
.select { position: relative; }

.select label { display: block; margin-bottom: 6px; }

/* O checkbox é o GATILHO nativo do dropdown (VariationDropdown.js escuta
   o `input` dele): ele precisa cobrir o #select-button e RECEBER o
   clique. A primeira versão o deixava com pointer-events: none e o
   seletor inteiro virava enfeite — abria só por JS. */
#variation-select { position: relative; }

.select #options-view-button {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 48px;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.select #select-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 48px;
    padding: 0 14px;
    background: var(--pr-paper);
    border: 1px solid var(--pr-line-2);
    border-radius: var(--pr-r-sm);
    font-size: 14.5px;
    cursor: pointer;
    transition: border-color .16s var(--pr-ease);
}

.select.open #select-button,
.select.has-selected #select-button { border-color: var(--pr-ink); }

.select #chevrons { display: flex; color: var(--pr-ink-3); }
.select #chevrons i:last-child,
.select.open #chevrons i:first-child { display: none; }
.select.open #chevrons i:last-child { display: block; }

.select #options {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    /* 120: acima do acordeão de detalhes E da barra inferior do celular —
       a lista abria por trás dos blocos seguintes da página. */
    z-index: 120;
    display: none;
    max-height: 300px;
    overflow-y: auto;
    /* rolagem CONTIDA (chegar no fim da lista não arrasta a página) e sem
       barra visível — a rolagem continua no dedo/roda. */
    overscroll-behavior: contain;
    scrollbar-width: none;
    padding: 6px;
    background: var(--pr-paper);
    border: 1px solid var(--pr-line);
    border-radius: var(--pr-r-md);
    box-shadow: var(--pr-shadow-pop);
}

.select #options::-webkit-scrollbar { display: none; }

.select.open #options { display: block; }

.select .option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--pr-r-sm);
    cursor: pointer;
}

.select .option:hover { background: var(--pr-surface); }
/* Mesmo caso do gatilho: o módulo escuta `click` no radio, então o radio
   estica sobre a linha inteira da opção e é ele quem recebe o clique. */
.select .option input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
}
.select .option img { flex: none; border-radius: var(--pr-r-sm); }
.select .option .label { flex: 1; font-size: 14px; }

/* `i` E `svg`: o markup traz `<i data-lucide="check">` e a biblioteca
   TROCA o `<i>` por um `<svg>` depois de carregar. Mirar só o `i` deixava
   o tique aparecendo em TODAS as opções, como se todas estivessem
   escolhidas. */
.select .option i,
.select .option svg { width: 17px; height: 17px; color: var(--primary-color); opacity: 0; }

.select .option:has(input:checked) { background: var(--pr-brand-wash); }
.select .option:has(input:checked) i,
.select .option:has(input:checked) svg { opacity: 1; }

/* --- Faixa de preço por quantidade ------------------------------------ */
.quantity-tiers {
    padding: 14px 16px;
    background: var(--pr-surface);
    border-radius: var(--pr-r-md);
}

.quantity-tiers-title { font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.quantity-tiers ul { display: flex; flex-direction: column; gap: 4px; }

.quantity-tiers li {
    padding: 6px 10px;
    border-radius: var(--pr-r-sm);
    font-size: 13px;
    color: var(--pr-ink-2);
    transition: background-color .16s var(--pr-ease);
}

.quantity-tiers li strong { color: var(--pr-ink); }

.quantity-tiers li.active {
    background: var(--pr-paper);
    color: var(--pr-ink);
    box-shadow: inset 0 0 0 1px var(--primary-color);
}

/* --- Contagem regressiva na coluna ------------------------------------ */
.pr-buybox .offer {
    padding: 12px 14px;
    border: 1px solid var(--pr-line);
    border-radius: var(--pr-r-md);
}

.pr-buybox .offer p { font-size: 12px; font-weight: 700; color: var(--pr-ink-2); margin-bottom: 8px; }
.pr-buybox .offer ul { display: flex; gap: 8px; }

.pr-buybox .offer li {
    min-width: 46px;
    padding: 6px 8px;
    background: var(--pr-surface);
    border-radius: var(--pr-r-sm);
    font-size: 16px;
    font-weight: 800;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* --- Ações ------------------------------------------------------------- */
.actions { display: flex; flex-direction: column; gap: 14px; }

.actions .qty-control { align-self: flex-start; }
.actions .qty-control .circle { border-radius: 0; }

.actions .qty-control input.animate-number { animation: pr-bump .3s var(--pr-ease); }

.actions .button-cart .primary-button {
    width: 100%;
    min-height: 54px;
    font-size: 15.5px;
}

.wish-share ul { display: flex; gap: 18px; }

.wish-share a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 26px;
    font-size: 13px;
    font-weight: 600;
    color: var(--pr-ink-2);
    cursor: pointer;
}

.wish-share a:hover { color: var(--pr-brand-text); }
.wish-share .icon-large { font-size: 17px; }
.wish-share .ri-heart-fill { color: var(--pr-danger); }

/* --- Compre junto e upsell -------------------------------------------- */
.buy-together,
.upsell {
    padding: 16px;
    border: 1px solid var(--pr-line);
    border-radius: var(--pr-r-md);
}

.buy-together-title,
.upsell-title {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 700;
}

.buy-together-items { display: flex; align-items: center; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.buy-together-card { flex: 0 0 120px; display: flex; flex-direction: column; gap: 5px; }
.buy-together-card .thumbnail { aspect-ratio: 1 / 1; background: var(--pr-surface); border-radius: var(--pr-r-sm); }
.buy-together-card .thumbnail img { object-fit: contain; padding: 6px; }

.buy-together-name {
    font-size: 12px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.buy-together-price { font-size: 12.5px; font-weight: 700; color: var(--pr-brand-text); }
.buy-together-price .normal { margin-left: 5px; font-weight: 500; text-decoration: line-through; color: var(--pr-ink-3); }
.buy-together-plus { flex: none; color: var(--pr-ink-3); font-size: 15px; }

.buy-together-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--pr-line);
}

.buy-together-total { font-size: 13px; color: var(--pr-ink-2); }
.buy-together-total strong { font-size: 17px; color: var(--pr-ink); }

.upsell-items { display: flex; flex-direction: column; gap: 10px; }

.upsell-card {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
}

.upsell-card .thumbnail { aspect-ratio: 1 / 1; background: var(--pr-surface); border-radius: var(--pr-r-sm); }
.upsell-card .thumbnail img { object-fit: contain; padding: 5px; }
.upsell-card-content { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.upsell-name { font-size: 13px; font-weight: 600; line-height: 1.3; }
.upsell-price { font-size: 13px; font-weight: 700; color: var(--pr-brand-text); }
.upsell-add-btn { min-height: 38px; padding: 0 12px; font-size: 12.5px; }

/* --- Detalhes, informações e avaliações (largura inteira) ------------- */
.pr-product__detail { margin-top: clamp(36px, 5vw, 64px); }

.description.collapse > ul { border-top: 1px solid var(--pr-line); }

.description.collapse > ul > li { border-bottom: 1px solid var(--pr-line); }

.description.collapse > ul > li > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
    font-size: clamp(1.05rem, 1.6vw, 1.3rem);
    font-weight: 800;
    letter-spacing: -.02em;
    cursor: pointer;
}

.description.collapse > ul > li > a::after {
    content: '+';
    font-size: 22px;
    font-weight: 500;
    color: var(--pr-ink-3);
    transition: transform .2s var(--pr-ease);
}

.description.collapse > ul > li.expand > a::after { content: '−'; }

.description.collapse > ul > li > .content,
.description.collapse > ul > li > ul.content { display: none; padding: 0 0 26px; }
.description.collapse > ul > li.expand > .content,
.description.collapse > ul > li.expand > ul.content { display: block; }

.description .content p { max-width: 76ch; color: var(--pr-ink-2); }

.description ul.content li {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--pr-line);
    font-size: 14px;
}

.description ul.content li span:first-child { color: var(--pr-ink-3); }

.description table { font-size: 14px; }
.description table th,
.description table td { padding: 10px 14px; border: 1px solid var(--pr-line); text-align: left; }
.description table th { background: var(--pr-surface); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }

/* Avaliações. `.review-block` é a MESMA classe da linha rótulo|valor da
   revisão do checkout — por isso tudo aqui é escopado em `.reviews`
   (§6.22). Sem escopo, a grade de 110px do checkout espremeria a
   avaliação numa coluna de dez caracteres. */
.reviews h4 { font-size: 15px; margin-bottom: 14px; }

.reviews .review-block-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 16px 18px;
    background: var(--pr-surface);
    border-radius: var(--pr-r-md);
}

.reviews .review-block-head .flexitem { gap: 12px; }
.reviews .rate-sum { font-size: 30px; font-weight: 800; letter-spacing: -.03em; }

.reviews #reviews-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; margin: 20px 0; }

.reviews #reviews-list > .item {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 18px;
    border: 1px solid var(--pr-line);
    border-radius: var(--pr-r-md);
}

.reviews .person { font-size: 13.5px; font-weight: 700; }
.reviews .review-title p { font-weight: 600; }
.reviews .review-text p { font-size: 14px; color: var(--pr-ink-2); }

.reviews #review-form { max-width: 620px; padding-top: 8px; }
.reviews #review-form h4 { font-size: 17px; }
.reviews #review-form p { margin-bottom: 14px; }
.reviews #review-form label { display: block; margin-bottom: 6px; }

/* Estrelas clicáveis: a ordem no HTML é 5→1, então o irmão seguinte é a
   estrela MENOR — daí o `~` pintar da direita para a esquerda. */
.rate-this { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.rate-this input { position: absolute; opacity: 0; pointer-events: none; }
.rate-this label { font-size: 22px; color: var(--pr-line-2); cursor: pointer; transition: color .12s var(--pr-ease); }
.rate-this input:checked ~ label,
.rate-this label:hover,
.rate-this label:hover ~ label { color: #e8a13a; }

/* --- Botão flutuante de voltar (celular) ------------------------------ */
.mobile-return-button {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 100;
    display: none;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .2s var(--pr-ease), transform .2s var(--pr-ease);
}

.mobile-return-button.visible { opacity: 1; transform: none; }

.mobile-return-button a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background: var(--pr-paper);
    border: 1px solid var(--pr-line);
    border-radius: 50%;
    box-shadow: var(--pr-shadow-pop);
    font-size: 20px;
}

/* ==================== 12. LISTAGEM, FILTRO, BUSCA ==================== */

.pr-plp { padding-bottom: clamp(40px, 5vw, 64px); }

.pr-plp__head { padding-bottom: 26px; border-bottom: 1px solid var(--pr-line); }

.pr-plp__title {
    font-size: clamp(1.9rem, 4vw, 3rem);
    letter-spacing: -.035em;
    margin-bottom: 20px;
    text-wrap: balance;
}

/* O campo movido para a página (search-bottom--inline) só existe no
   CELULAR, onde a busca do cabeçalho está escondida. No computador os
   dois campos coexistiam e o `features/search` lê o do cabeçalho
   primeiro (#search-input-desktop) — digitar ou apagar no de baixo não
   mudava nada: dois campos de busca com um deles de enfeite é pior que
   um campo só. */
.pr-plp__search { max-width: 640px; }

@media (min-width: 901px) {
    .pr-plp__search { display: none; }
}

/* --- Barra de filtros (a da referência) --------------------------------
   Pílulas na horizontal; cada uma é um <details> cujo painel abre
   SUSPENSO logo abaixo. No celular a mesma estrutura vira a gaveta
   lateral de sempre e os <details> empilham. */
.pr-plp__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 18px 0;
}

.pr-plp__aside .filter {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.pr-filter__rotulo { font-size: 13px; color: var(--pr-ink-3); margin-right: 2px; }

details.pr-filter { position: relative; }

details.pr-filter > summary {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 0 14px;
    background: var(--pr-surface);
    border: 1px solid transparent;
    border-radius: var(--pr-r-sm);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color .16s var(--pr-ease), background-color .16s var(--pr-ease);
}

details.pr-filter > summary::-webkit-details-marker { display: none; }
details.pr-filter > summary:hover { border-color: var(--pr-line-2); }
details.pr-filter[open] > summary { background: var(--pr-paper); border-color: var(--pr-ink); }
details.pr-filter > summary i { font-size: 16px; color: var(--pr-ink-3); transition: transform .18s var(--pr-ease); }
details.pr-filter[open] > summary i { transform: rotate(180deg); }

.pr-filter__panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 70;
    width: 300px;
    padding: 14px;
    background: var(--pr-paper);
    border: 1px solid var(--pr-line);
    border-radius: var(--pr-r-md);
    box-shadow: var(--pr-shadow-pop);
}

.pr-plp__main { padding-top: 4px; }

.pr-filter__head { display: none; }

.filter-block ul {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 264px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
}

.filter-block ul::-webkit-scrollbar { display: none; }

.filter-block li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
}

.filter-block .filter-checkbox { position: absolute; opacity: 0; width: 0; height: 0; }

.filter-block label {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 24px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--pr-ink-2);
    cursor: pointer;
}

.filter-block label .checked {
    flex: none;
    width: 17px;
    height: 17px;
    border: 1px solid var(--pr-line-2);
    border-radius: 3px;
    background: var(--pr-paper);
    transition: background-color .14s var(--pr-ease), border-color .14s var(--pr-ease);
}

.filter-block .filter-checkbox:checked + label { color: var(--pr-ink); font-weight: 600; }

.filter-block .filter-checkbox:checked + label .checked {
    background: var(--primary-color) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5'/%3E%3C/svg%3E") center / 12px no-repeat;
    border-color: var(--primary-color);
}

.filter-block .filter-checkbox:focus-visible + label .checked { outline: 2px solid var(--pr-brand-text); outline-offset: 2px; }

.filter-block .count { font-size: 11.5px; color: var(--pr-ink-3); font-variant-numeric: tabular-nums; }

.byprice { display: flex; flex-direction: column; gap: 10px; }

input[type="range"] {
    width: 100%;
    height: 4px;
    padding: 0;
    min-height: 0;
    appearance: none;
    background: var(--pr-line-2);
    border: 0;
    border-radius: var(--pr-r-pill);
    cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--primary-color);
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(10, 12, 16, .3);
}

input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--primary-color);
    border: 2px solid #fff;
}

.price-range { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; }
.price-separator { color: var(--pr-ink-3); }

/* --- Barra de ferramentas da listagem --------------------------------- */
.pr-plp__toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.item-sortir,
.item-options,
.item-filter { position: relative; }

/* O `.item-perpage` diz a MESMA coisa que o `.item-options` ao lado
   ("10 itens por página" / "Mostrar 10 por página"). Fica no markup
   porque o Filters.js escreve nele junto com o outro — escondê-lo é
   barato e não quebra nada; tirá-lo do HTML quebraria. */
.item-perpage { display: none; }

.item-sortir > .label,
.item-options > .label,
.item-filter > .label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid var(--pr-line-2);
    border-radius: var(--pr-r-sm);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.item-sortir > .label:hover,
.item-options > .label:hover,
.item-filter > .label:hover { border-color: var(--pr-ink); }

.item-sortir ul,
.item-options ul {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 40;
    display: none;
    min-width: 190px;
    padding: 6px;
    background: var(--pr-paper);
    border: 1px solid var(--pr-line);
    border-radius: var(--pr-r-md);
    box-shadow: var(--pr-shadow-pop);
}

.item-sortir:hover ul,
.item-sortir:focus-within ul,
.item-options:hover ul,
.item-options:focus-within ul { display: block; }

.item-sortir li,
.item-options li {
    padding: 8px 11px;
    border-radius: var(--pr-r-sm);
    font-size: 13.5px;
    cursor: pointer;
}

.item-sortir li:hover,
.item-options li:hover { background: var(--pr-surface); }

/* `.active` é posto pelo features/search no `li` clicado — e o texto
   desse `li` é lido como valor de ordenação, não é só rótulo. */
.item-sortir li.active,
.item-options li.active { background: var(--pr-brand-wash); color: var(--pr-brand-text); font-weight: 700; }

/* --- Chips de filtro selecionado --------------------------------------
   O Filters.js cria `<span data-id>` SEM classe nenhuma dentro de
   `#selectedFiltersList`, e marca `.remove` 300ms antes de tirar o nó —
   sem regra para `.remove` o chip fica na tela como se o clique não
   tivesse feito nada. */
/* O `Filters.js` MOSTRA este bloco limpando o `style.display` (`= ''`) e
   o esconde com `'none'`. Ou seja: o padrão da folha não pode ser `none`,
   senão o chip nunca aparece — foi o que aconteceu aqui. Quem decide a
   visibilidade no estado neutro é o `:has()`: com pelo menos um chip que
   não está saindo, o bloco existe; sem nenhum, some. */
/* `margin-top` na FAIXA e não no campo: o bloco só existe quando há filtro
   escolhido (a regra `:has` logo abaixo), então uma folga presa ao campo de
   busca sobraria como buraco quando não há chip nenhum. Sem isto, a linha
   de chips encostava na barra de busca logo acima. */
#selectedFilters { display: none; margin-top: 16px; align-items: center; gap: 10px; flex-wrap: wrap; }
#selectedFilters:has(#selectedFiltersList span:not(.remove)) { display: flex; }
#selectedFilters h4 { font-size: 12px; color: var(--pr-ink-3); font-weight: 600; }
#selectedFiltersList { display: flex; flex-wrap: wrap; gap: 8px; }

#selectedFiltersList span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    background: var(--pr-surface);
    border: 1px solid var(--pr-line);
    border-radius: var(--pr-r-pill);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity .2s var(--pr-ease), transform .2s var(--pr-ease);
}

#selectedFiltersList span::after { content: '×'; font-size: 15px; color: var(--pr-ink-3); }
#selectedFiltersList span:hover { border-color: var(--pr-ink); }
#selectedFiltersList span.remove { opacity: 0; transform: scale(.9); }

/* --- Grade vazia, paginação ------------------------------------------- */
.search-empty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 64px 20px;
    text-align: center;
}

.search-empty i { font-size: 34px; color: var(--pr-ink-3); }
.search-empty h3 { font-size: 18px; }
.search-empty p { color: var(--pr-ink-2); }

.pr-grid > .skeleton-card { height: 320px; margin: 0; border-radius: 0; }

.load-more { margin-top: 28px; }

.pagination { display: flex; align-items: center; gap: 8px; }
.pagination ul { display: flex; align-items: center; gap: 6px; }

.pagination .btn1,
.pagination .btn2,
.pagination .link,
.page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--pr-line-2);
    border-radius: var(--pr-r-sm);
    background: var(--pr-paper);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .16s var(--pr-ease), background-color .16s var(--pr-ease);
}

.pagination .link:hover,
.pagination .btn1:hover,
.pagination .btn2:hover,
.page-btn:hover:not(:disabled) { border-color: var(--pr-ink); }

.pagination .link.active {
    background: var(--pr-ink);
    border-color: var(--pr-ink);
    color: #fff;
}

.pagination .ellipsis {
    display: inline-flex;
    align-items: flex-end;
    height: 40px;
    padding: 0 4px;
    color: var(--pr-ink-3);
}

.page-btn:disabled { opacity: .4; cursor: default; }

/* ============================ 13. CARRINHO ============================ */

.single-cart { padding: 26px 0 clamp(40px, 5vw, 64px); }

.page-title h1 {
    font-size: clamp(1.9rem, 4vw, 2.9rem);
    letter-spacing: -.035em;
    margin-bottom: 24px;
}

.products.one.cart > .flexwrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 350px;
    gap: clamp(20px, 3vw, 40px);
    align-items: start;
}

#cart-table { font-size: 14px; }

#cart-table thead th {
    padding: 0 14px 12px;
    border-bottom: 1px solid var(--pr-line);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--pr-ink-3);
    text-align: left;
}

#cart-table tbody td {
    padding: 18px 14px;
    border-bottom: 1px solid var(--pr-line);
    vertical-align: middle;
}

#cart-table tbody td:first-child { padding-left: 0; }
#cart-table tbody td:last-child { padding-right: 0; text-align: right; }

#cart-table td.flexitem { display: flex; align-items: center; gap: 14px; }

#cart-table .thumbnail {
    flex: none;
    width: 78px;
    aspect-ratio: 1 / 1;
    background: var(--pr-surface);
    border-radius: var(--pr-r-sm);
    overflow: hidden;
}

#cart-table .thumbnail img { object-fit: contain; padding: 6px; }
#cart-table .content { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
#cart-table .content strong { font-size: 14.5px; font-weight: 600; }
#cart-table .content p { font-size: 12.5px; color: var(--pr-ink-3); }

.item-remove-grid {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--pr-r-sm);
    color: var(--pr-ink-3);
    font-size: 17px;
}

.item-remove-grid:hover { background: var(--pr-surface); color: var(--pr-danger); }

.cart-empty { margin: 20px 0; }

/* --- Resumo do carrinho ------------------------------------------------ */
.cart-summary.styled {
    position: sticky;
    top: calc(var(--pr-header-h) + 16px);
    border: 1px solid var(--pr-line);
    border-radius: var(--pr-r-md);
    overflow: hidden;
}

.cart-summary .item > * { padding: 18px; }
.cart-summary .item > * + * { border-top: 1px solid var(--pr-line); }

/* Barra de progresso do frete grátis (montada por
   scripts/themes/premium/carrinho.js). Verde ao completar. */
.pr-frete { display: flex; flex-direction: column; gap: 9px; }

.pr-frete__texto {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: var(--pr-ink-2);
}

.pr-frete__texto i { font-size: 16px; color: var(--pr-brand-text); }
.pr-frete--ganhou .pr-frete__texto i { color: var(--pr-success); }

.pr-frete__trilha {
    height: 6px;
    background: var(--pr-surface-2);
    border-radius: var(--pr-r-pill);
    overflow: hidden;
}

.pr-frete__barra {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--primary-color), color-mix(in srgb, var(--primary-color) 60%, #7cd6a1));
    border-radius: inherit;
    transition: width .5s var(--pr-ease);
}

.pr-frete--ganhou .pr-frete__barra { background: var(--pr-success); }

/* Na gaveta do mini-carrinho a barra fica acima do subtotal, com o fio
   separando do resto do rodapé. */
.pr-frete--mini {
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--pr-line);
}

.pr-frete--mini .pr-frete__texto { font-size: 12.5px; }

.coupon { display: flex; flex-wrap: wrap; gap: 8px; }
.coupon input { flex: 1; min-width: 140px; }
.coupon button { min-height: 46px; padding: 0 18px; background: var(--pr-ink); color: #fff; border-radius: var(--pr-r-sm); font-weight: 700; font-size: 13.5px; }
.coupon button:hover { background: var(--primary-color); color: var(--on-primary); }
.coupon span { flex-basis: 100%; font-size: 12.5px; }

/* Acordeão do frete estimado (`.collapse` + `.has-child.expand`) */
.shipping-rate .has-child > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.shipping-rate .has-child > a::after { content: '+'; font-size: 18px; color: var(--pr-ink-3); }
.shipping-rate .has-child.expand > a::after { content: '−'; }
.shipping-rate .has-child > .content { display: none; padding-top: 14px; }
.shipping-rate .has-child.expand > .content { display: block; }
.shipping-rate .countries,
.shipping-rate .states,
.shipping-rate .postal-code { margin-bottom: 12px; }
.shipping-rate label { display: block; margin-bottom: 5px; }

/* `#calculateFreight` é um `<button type="button">` SEM classe nenhuma no
   partial compartilhado — fora da lista de botões do tema, ele saía como
   texto solto embaixo do CEP. */
#calculateFreight {
    width: 100%;
    min-height: 46px;
    margin-top: 4px;
    border: 1px solid var(--pr-line-2);
    border-radius: var(--pr-r-sm);
    background: var(--pr-paper);
    font-size: 13.5px;
    font-weight: 700;
}

#calculateFreight:hover { border-color: var(--pr-ink); background: var(--pr-surface); }

.cart-total table { font-size: 14px; }
.cart-total th,
.cart-total td { padding: 7px 0; text-align: left; font-weight: 500; color: var(--pr-ink-2); }
.cart-total td { text-align: right; color: var(--pr-ink); }

.cart-total .grand-total th,
.cart-total .grand-total td {
    padding-top: 14px;
    border-top: 1px solid var(--pr-line);
    font-size: 16px;
    font-weight: 800;
    color: var(--pr-ink);
}

.cart-total .grand-total strong { font-size: 21px; letter-spacing: -.03em; }
.cart-total .secondary-button { width: 100%; margin-top: 16px; background: var(--primary-color); color: var(--on-primary); border-color: transparent; }
.cart-total .secondary-button:hover { background: color-mix(in srgb, var(--primary-color) 84%, #000); border-color: transparent; }

/* --- Opções de frete montadas pelo JS (carrinho) ----------------------
   Aqui NÃO existe classe de estado: a seleção é o `:checked` do radio
   escondido dentro de `.delivery-option`. Sem uma regra que reaja a ele,
   escolher o frete não marca nada na tela. */
.freight-options + .freight-options { margin-top: 8px; }

.delivery-option {
    display: block;
    padding: 12px 14px;
    border: 1px solid var(--pr-line-2);
    border-radius: var(--pr-r-sm);
    cursor: pointer;
    transition: border-color .16s var(--pr-ease), background-color .16s var(--pr-ease);
}

.delivery-option:hover { border-color: var(--pr-ink-2); }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.delivery-option:has(input:checked) {
    border-color: var(--primary-color);
    background: var(--pr-brand-wash);
    box-shadow: inset 0 0 0 1px var(--primary-color);
}

.freight-info { display: flex; align-items: center; gap: 12px; }

/* Logo de transportadora sem caixa abre no tamanho natural do arquivo. */
.delivery-image {
    flex: none;
    width: 42px;
    height: 30px;
    object-fit: contain;
}

.freight-info h3 { font-size: 13.5px; font-weight: 700; }
.freight-info p { font-size: 12.5px; color: var(--pr-ink-2); }

.freight-error {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 14px;
    background: color-mix(in srgb, var(--pr-danger) 8%, #fff);
    border: 1px solid color-mix(in srgb, var(--pr-danger) 26%, #fff);
    border-radius: var(--pr-r-sm);
    font-size: 13px;
    color: var(--pr-danger);
}

.skeleton-freight { height: 62px; margin-bottom: 8px; }

/* --- Upsell do carrinho ------------------------------------------------ */
.cart-upsell {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
    padding: 14px;
    border: 1px dashed var(--pr-line-2);
    border-radius: var(--pr-r-md);
}

.cart-upsell .thumbnail { aspect-ratio: 1 / 1; background: var(--pr-surface); border-radius: var(--pr-r-sm); }
.cart-upsell .thumbnail img { object-fit: contain; padding: 5px; }
.cart-upsell-content { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cart-upsell-label { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pr-ink-3); }
.cart-upsell-name { font-size: 14px; font-weight: 600; }
.cart-upsell-price { font-size: 13.5px; font-weight: 700; color: var(--pr-brand-text); }

/* ============================ 14. CHECKOUT ============================ */

.page-checkout main { padding-bottom: clamp(40px, 5vw, 64px); }

.checkout.flexwrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 366px;
    gap: clamp(20px, 3vw, 40px);
    align-items: start;
    padding-top: 26px;
}

.checkout .item.left.styled {
    padding: clamp(18px, 2.4vw, 30px);
    border: 1px solid var(--pr-line);
    border-radius: var(--pr-r-md);
}

/* --- Stepper -----------------------------------------------------------
   O `Wizard.js` só troca classe (`.active`, `.done`) — quem decide se o
   passo concluído mostra número ou símbolo é este arquivo. Aqui o dígito
   fica sempre, e o que separa concluído de atual é o anel. */
.wizard-stepper {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 28px;
}

.wz-step { display: flex; align-items: center; gap: 9px; }

/* `--pr-ink-2` e não `--pr-ink-3`: o dígito do passo ainda-não-visitado
   fica sobre `--pr-surface-2`, e ali o cinza de rótulo dá 3.95:1 — abaixo
   dos 4.5 exigidos para texto pequeno. */
.wz-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: var(--pr-surface-2);
    color: var(--pr-ink-2);
    border-radius: 50%;
    font-size: 13px;
    font-weight: 800;
}

.wz-label { font-size: 13px; font-weight: 600; color: var(--pr-ink-3); white-space: nowrap; }

.wz-step.done .wz-dot { background: var(--pr-ink); color: #fff; }
.wz-step.done .wz-label { color: var(--pr-ink-2); }

.wz-step.active .wz-dot {
    background: var(--primary-color);
    color: var(--on-primary);
    box-shadow: 0 0 0 4px var(--pr-brand-wash);
}

.wz-step.active .wz-label { color: var(--pr-ink); font-weight: 700; }

.wz-line { flex: 1; height: 1px; background: var(--pr-line-2); }
.wz-line.done { background: var(--pr-ink); }

/* --- Passos ------------------------------------------------------------ */
.wizard-pane { display: none; }
.wizard-pane.on { display: block; }

.wizard-pane > h1 {
    font-size: clamp(1.4rem, 2.6vw, 1.9rem);
    letter-spacing: -.03em;
    margin-bottom: 6px;
}

.wz-sub { color: var(--pr-ink-2); margin-bottom: 20px; }

.wizard-actions {
    display: flex;
    gap: 10px;
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid var(--pr-line);
}

.wizard-actions .primary-button,
.wizard-actions .secondary-button { flex: 1; min-height: 50px; }
.wizard-actions .wz-full { width: 100%; }

.guest-register { margin-bottom: 22px; }
.guest-register-hint { margin-bottom: 14px; color: var(--pr-ink-2); }
.guest-register .primary-button { width: 100%; margin-top: 16px; }
.guest-register-login { margin-top: 12px; font-size: 13px; color: var(--pr-ink-2); }
.guest-register-login a { color: var(--pr-brand-text); font-weight: 700; }

/* --- Endereços --------------------------------------------------------- */
.address-cards { display: grid; gap: 10px; }

.address-option {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--pr-line-2);
    border-radius: var(--pr-r-sm);
    cursor: pointer;
    transition: border-color .16s var(--pr-ease), background-color .16s var(--pr-ease);
}

.address-option:hover { border-color: var(--pr-ink-2); }

/* `.selected` — conferido em AddressInline.js/FreightCalculator.js. Não é
   `.active`, não é `.on`: com o nome errado, clicar parece não fazer nada
   (§6.5). */
.address-option.selected {
    border-color: var(--primary-color);
    background: var(--pr-brand-wash);
    box-shadow: inset 0 0 0 1px var(--primary-color);
}

.address-option .option-icon { font-size: 20px; color: var(--pr-ink-2); }
.address-option.selected .option-icon { color: var(--pr-brand-text); }

.option-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.option-body strong { font-size: 14px; }
.option-body span { font-size: 13px; color: var(--pr-ink-2); }
.option-body .mini-text { font-size: 12px; }

.option-tag {
    margin-left: 6px;
    padding: 1px 8px;
    background: var(--pr-surface-2);
    border-radius: var(--pr-r-pill);
    font-size: 10.5px;
    font-weight: 700;
    color: var(--pr-ink-2);
}

.option-edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--pr-r-sm);
    color: var(--pr-ink-3);
    font-size: 16px;
}

.option-edit:hover { background: var(--pr-paper); color: var(--pr-ink); }

.addr-add {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 12px;
    padding: 10px 14px;
    border: 1px dashed var(--pr-line-2);
    border-radius: var(--pr-r-sm);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--pr-ink-2);
}

.addr-add:hover { border-color: var(--pr-ink); color: var(--pr-ink); }

.addr-inline-form {
    margin-top: 16px;
    padding: 18px;
    background: var(--pr-surface);
    border-radius: var(--pr-r-md);
}

.addr-inline-form h3 { font-size: 15px; margin-bottom: 14px; }
.addr-inline-form .wizard-actions { border-top: 0; padding-top: 0; margin-top: 18px; }
.addr-cep-row { display: flex; gap: 8px; }
.addr-cep-row .light-button { flex: none; width: 46px; min-height: 46px; padding: 0; }
.addr-primary-check { padding-top: 4px; }

.checkout-observations { display: block; margin-top: 22px; }
.checkout-observations label { display: block; margin-bottom: 6px; }

/* --- Modos de envio (checkout) ----------------------------------------- */
.shipping-methods { margin-top: 24px; }
.shipping-methods h2 { font-size: 15px; margin-bottom: 12px; }

.freight-pills { display: grid; gap: 10px; }

.freight-pill {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: 1px solid var(--pr-line-2);
    border-radius: var(--pr-r-sm);
    cursor: pointer;
    transition: border-color .16s var(--pr-ease), background-color .16s var(--pr-ease);
}

.freight-pill:hover { border-color: var(--pr-ink-2); }

.freight-pill.selected {
    border-color: var(--primary-color);
    background: var(--pr-brand-wash);
    box-shadow: inset 0 0 0 1px var(--primary-color);
}

/* Logo da transportadora: sem caixa com `object-fit: contain` ela abre no
   tamanho natural do arquivo e empurra a linha inteira. */
.freight-pill .option-icon-img {
    flex: none;
    width: 40px;
    height: 28px;
    object-fit: contain;
}

.freight-pill .option-icon { font-size: 19px; color: var(--pr-ink-2); }
.freight-pill .option-price { font-size: 14px; font-weight: 800; white-space: nowrap; }
.freight-pill .option-price.free { color: var(--pr-success); }

/* --- Acordeão de pagamento --------------------------------------------- */
.pay-accordion { display: grid; gap: 10px; }

.pay-item {
    border: 1px solid var(--pr-line-2);
    border-radius: var(--pr-r-sm);
    overflow: hidden;
    transition: border-color .16s var(--pr-ease);
}

.pay-item.selected { border-color: var(--primary-color); box-shadow: inset 0 0 0 1px var(--primary-color); }

.pay-head {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 15px 16px;
    text-align: left;
}

.pay-ico { display: inline-flex; font-size: 21px; color: var(--pr-ink-2); }
.pay-item.selected .pay-ico { color: var(--pr-brand-text); }
.pay-txt { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.pay-txt strong { font-size: 14.5px; }
.pay-txt small { font-size: 12.5px; color: var(--pr-ink-3); }

.pay-badge {
    padding: 3px 9px;
    background: var(--pr-surface-2);
    border-radius: var(--pr-r-pill);
    font-size: 11px;
    font-weight: 700;
    color: var(--pr-ink-2);
    white-space: nowrap;
}

.pay-arrow { color: var(--pr-ink-3); font-size: 18px; transition: transform .2s var(--pr-ease); }
.pay-item.selected .pay-arrow { transform: rotate(90deg); }

.pay-body { display: none; padding: 0 16px 18px; }
.pay-item.selected .pay-body { display: block; }

.pay-hint { display: flex; align-items: flex-start; gap: 7px; font-size: 12.5px; color: var(--pr-ink-2); }

.card-type-toggle { display: inline-flex; gap: 6px; margin-bottom: 16px; padding: 4px; background: var(--pr-surface); border-radius: var(--pr-r-sm); }

.card-type-option {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border-radius: var(--pr-r-sm);
    font-size: 13px;
    font-weight: 600;
    color: var(--pr-ink-2);
}

.card-type-option.active { background: var(--pr-paper); color: var(--pr-ink); box-shadow: 0 1px 3px rgba(10, 12, 16, .12); }

.card-inline-form { margin-bottom: 14px; }

/* O SDK do Mercado Pago injeta um <iframe> dentro de cada um destes divs.
   Elemento que vem de fora chega SEM estilo nenhum do tema, e iframe sem
   altura são 150px — cada campo de cartão viraria um painel. */
.container-checkout {
    height: 46px;
    padding: 0 12px;
    background: var(--pr-paper);
    border: 1px solid var(--pr-line-2);
    border-radius: var(--pr-r-sm);
    overflow: hidden;
}

.container-checkout iframe { width: 100%; height: 100%; border: 0; }

progress.progress-bar { width: 100%; height: 4px; margin-top: 10px; border: 0; }

/* --- Revisão -----------------------------------------------------------
   Escopado em `.wizard-pane`: `.review-block` também é o contêiner das
   avaliações da página de produto, e a grade de duas colunas escrita aqui
   espremeria aquele texto numa tira (§6.22). */
.wizard-pane .review-block {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--pr-line);
    font-size: 14px;
}

.wizard-pane .review-block b { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--pr-ink-3); }

/* --- Resumo do pedido --------------------------------------------------- */
.checkout .item.right > h2 { font-size: 15px; margin-bottom: 12px; }

.summary-order {
    position: sticky;
    top: calc(var(--pr-header-h) + 16px);
    border: 1px solid var(--pr-line);
    border-radius: var(--pr-r-md);
    overflow: hidden;
}

.summary-order > * { padding: 18px; }
.summary-order > * + * { border-top: 1px solid var(--pr-line); }

.benefits-box h3 { display: flex; align-items: center; gap: 7px; font-size: 13.5px; margin-bottom: 12px; }
.benefit-toggle { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; cursor: pointer; }
.benefit-toggle input { width: 18px; height: 18px; min-height: 0; margin-top: 2px; accent-color: var(--primary-color); }
.benefit-toggle span { display: flex; flex-direction: column; font-size: 13.5px; font-weight: 600; }
.benefit-toggle small { font-size: 12px; font-weight: 400; color: var(--pr-ink-3); }

.summary-totals ul { display: flex; flex-direction: column; gap: 9px; }

.summary-totals li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 13.5px;
    color: var(--pr-ink-2);
}

.summary-totals li:last-child {
    padding-top: 12px;
    border-top: 1px solid var(--pr-line);
    font-size: 15px;
    color: var(--pr-ink);
}

.summary-totals li:last-child strong { font-size: 21px; font-weight: 800; letter-spacing: -.03em; }

.summary-shipping-label { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.summary-carrier { display: inline-flex; align-items: center; gap: 6px; }
.summary-carrier-logo { width: 24px; height: 16px; object-fit: contain; }
.summary-carrier-info { display: inline-flex; flex-direction: column; }
.summary-carrier-info em { font-style: normal; color: var(--pr-ink-3); }

.summary-order .products.mini { display: flex; flex-direction: column; gap: 12px; max-height: 320px; overflow-y: auto; }

.summary-order .products.mini li.item {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
}

.summary-order .thumbnail { aspect-ratio: 1 / 1; background: var(--pr-surface); border-radius: var(--pr-r-sm); overflow: hidden; }
.summary-order .thumbnail img { object-fit: contain; padding: 4px; }
.summary-order .item-content p { font-size: 13px; line-height: 1.35; }
.summary-order .item-content .price { display: flex; gap: 8px; font-size: 12.5px; color: var(--pr-ink-3); }

/* --- Combobox do checkout (select-box) ---------------------------------- */
.select-box { position: relative; }

.select-box-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-height: 46px;
    padding: 0 14px;
    border: 1px solid var(--pr-line-2);
    border-radius: var(--pr-r-sm);
    text-align: left;
    font-size: 14px;
}

.select-box.open .select-box-toggle { border-color: var(--pr-ink); }
.select-box-label { color: var(--pr-ink-3); }
.select-box-label.has-value { color: var(--pr-ink); font-weight: 600; }
.select-box .select-box-menu { display: none; }
.select-box.open .select-box-menu { display: block; }

/* --- Tela do Pix -------------------------------------------------------- */
.pix-inline { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
.pix-inline h1 { text-align: center; }
.pix-inline .wz-sub { margin-bottom: 0; }

.pix-qr {
    width: 232px;
    height: 232px;
    padding: 12px;
    background: var(--pr-paper);
    border: 1px solid var(--pr-line);
    border-radius: var(--pr-r-md);
}

.pix-qr img { width: 100%; height: 100%; object-fit: contain; }

/* Cinto e suspensório: o container já nasce `hidden` e o CheckoutForm
   remove a classe ao receber a imagem, mas src vazio nunca deve desenhar
   ícone de imagem quebrada. */
.pix-qr img[src=""] { visibility: hidden; }

.pix-copy { max-width: 460px; }

.pix-waiting {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--pr-surface);
    border-radius: var(--pr-r-pill);
    font-size: 13px;
    color: var(--pr-ink-2);
}

.pix-spinner {
    flex: none;
    width: 16px;
    height: 16px;
    border: 2px solid var(--pr-line-2);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: pr-spin .7s linear infinite;
}

/* --- Status do cartão --------------------------------------------------
   O `index.js` do checkout SOBRESCREVE `className` inteiro deste bloco
   (`card-status`, `card-status is-success`, `card-status is-error`) —
   nenhuma outra classe do tema sobrevive aqui. */
.card-status { display: flex; flex-direction: column; gap: 18px; padding: 20px 0; text-align: center; }
.card-status .pix-waiting { flex-direction: column; border-radius: var(--pr-r-md); padding: 26px; }
.card-status h2 { font-size: 19px; }
.card-status p { color: var(--pr-ink-2); }
.card-status.is-success .pix-waiting { background: color-mix(in srgb, var(--pr-success) 10%, #fff); }
.card-status.is-success .pix-spinner { display: none; }
.card-status.is-error .pix-waiting { background: color-mix(in srgb, var(--pr-danger) 8%, #fff); }
.card-status.is-error .pix-spinner { display: none; }

/* --- Overlay de "Concluir compra" ---------------------------------------
   O markup existe em pages/checkout.php e o estilo dele morava só no
   style.css do clássico: sem regra aqui, o overlay é invisível e a compra
   parece travada no clique. */
#loader1 {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .86);
    backdrop-filter: blur(3px);
}

.loader-circle1 {
    width: 54px;
    height: 54px;
    border: 3px solid var(--pr-line-2);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: pr-spin .8s linear infinite;
}

/* O texto fica no OVERLAY, não no círculo: pseudo-elemento de um elemento
   que gira gira junto. */
#loader1::after {
    content: 'Processando seu pedido…';
    position: absolute;
    top: calc(50% + 46px);
    left: 0;
    right: 0;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--pr-ink-2);
}

/* ============================== 15. CONTA ============================== */
/* `profile.php` é monolito: o <body> dele é a própria página, sem `.site`
   e sem cabeçalho de loja. Quase tudo aqui é montado por JS depois de
   falar com a API — a bancada de render mostra só o esqueleto, e é por
   isso que esta seção cobre nome por nome o que os módulos criam. */

body:has(.profile-header) { background: var(--pr-surface); }

.profile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 26px;
    padding: 22px;
    background: var(--pr-paper);
    border: 1px solid var(--pr-line);
    border-radius: var(--pr-r-md);
}

.profile-info { display: flex; align-items: center; gap: 16px; min-width: 0; }

.profile-image {
    width: 66px;
    height: 66px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--pr-surface);
    cursor: pointer;
}

.profile-details h1 { font-size: clamp(1.2rem, 2.4vw, 1.6rem); letter-spacing: -.03em; }
.profile-details p { font-size: 13.5px; color: var(--pr-ink-3); }

.identity-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }

.chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    background: var(--pr-surface);
    border: 1px solid var(--pr-line);
    border-radius: var(--pr-r-pill);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--pr-ink-2);
}

.profile-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.wa-btn,
#logoutBtn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 42px;
    padding: 0 16px;
    border: 1px solid var(--pr-line-2);
    border-radius: var(--pr-r-sm);
    background: var(--pr-paper);
    font-size: 13.5px;
    font-weight: 600;
}

.wa-btn:hover { border-color: var(--pr-success); color: var(--pr-success); }
#logoutBtn:hover { border-color: var(--pr-danger); color: var(--pr-danger); }

.wallet-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin: 14px 0;
}

.wallet-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--pr-paper);
    border: 1px solid var(--pr-line);
    border-radius: var(--pr-r-md);
    text-align: left;
    transition: border-color .16s var(--pr-ease);
}

.wallet-card:hover { border-color: var(--pr-ink); }
.wallet-card > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.wallet-card small { font-size: 11.5px; color: var(--pr-ink-3); }
.wallet-card b { font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.wallet-hint { font-size: 11px; font-style: normal; color: var(--pr-ink-3); }

.wallet-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--pr-r-sm);
    background: var(--pr-surface);
    font-size: 19px;
    color: var(--pr-ink-2);
}

.wallet-icon-cash { background: var(--pr-brand-wash); color: var(--pr-brand-text); }

.profile-content {
    display: grid;
    grid-template-columns: 236px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
    padding-bottom: 40px;
}

.profile-content .sidebar {
    position: sticky;
    top: 18px;
    padding: 10px;
    background: var(--pr-paper);
    border: 1px solid var(--pr-line);
    border-radius: var(--pr-r-md);
}

.nav-menu { display: flex; flex-direction: column; gap: 2px; }

/* Item ativo é uma pílula de TINTA cheia — sem a barrinha colorida na
   borda, que lia como template genérico. O hover usa o mesmo fill que os
   botões: a superfície desliza da esquerda. */
.nav-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 13px;
    border-radius: var(--pr-r-sm);
    font-size: 14px;
    font-weight: 600;
    color: var(--pr-ink-2);
    background: linear-gradient(var(--pr-surface), var(--pr-surface)) no-repeat left center / 0% 100%;
    transition: background-size .28s var(--pr-ease), color .14s var(--pr-ease);
}

.nav-menu a i { font-size: 17px; }
.nav-menu a:hover { background-size: 100% 100%; color: var(--pr-ink); }

.nav-menu a.active {
    background: var(--pr-ink);
    color: #fff;
}

.main-content > div { display: flex; flex-direction: column; gap: 18px; }

.main-content > div > h2 {
    font-size: clamp(1.15rem, 2.2vw, 1.5rem);
    letter-spacing: -.03em;
    margin-bottom: 2px;
}

/* Paginação e rodapés de seção respiram em relação ao painel de cima. */
.main-content #paginationControls,
.main-content .pagination { margin-top: 4px; }

.overview-panel,
.main-content #accountForm,
.address-list,
.orders,
.favorites-list,
#referralPanel > * {
    padding: 18px;
    background: var(--pr-paper);
    border: 1px solid var(--pr-line);
    border-radius: var(--pr-r-md);
}

.overview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.overview-head h2 { font-size: 15px; }

dl.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 20px; }
dl.facts > div { display: flex; flex-direction: column; gap: 2px; }
dl.facts dt { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--pr-ink-3); }
dl.facts dd { font-size: 14px; font-weight: 600; }
.facts-ok { color: var(--pr-success); }

.overview-addresses,
.overview-orders { display: grid; gap: 8px; }

.overview-address,
.overview-order {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--pr-line);
    border-radius: var(--pr-r-sm);
    text-align: left;
    font-size: 13.5px;
    transition: border-color .16s var(--pr-ease);
}

.overview-address:hover,
.overview-order:hover { border-color: var(--pr-ink); }
.overview-address.main { border-color: var(--primary-color); }
.overview-address b { display: inline-flex; align-items: center; gap: 6px; }
.overview-address p { color: var(--pr-ink-2); }

.overview-address-tag {
    padding: 2px 8px;
    background: var(--pr-brand-wash);
    color: var(--pr-brand-text);
    border-radius: var(--pr-r-pill);
    font-size: 10.5px;
    font-weight: 700;
}

.overview-order-info { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.overview-order-info small { font-size: 12px; color: var(--pr-ink-3); }
.overview-order-total { font-weight: 800; }

/* --- Endereços (AddressModal.js) --------------------------------------- */
#addAddressBtn {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 42px;
    padding: 0 16px;
    background: var(--primary-color);
    color: var(--on-primary);
    border-radius: var(--pr-r-sm);
    font-size: 13.5px;
    font-weight: 700;
}

.address-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }

/* Coluna, não linha: com os dois botões ROTULADOS (o módulo escreve
   "Editar" e "Excluir" ao lado do ícone), conteúdo e ações não cabem lado
   a lado num card de 260px — e o endereço com rua comprida empurrava os
   botões para cima do card vizinho. */
.address-item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--pr-line);
    border-radius: var(--pr-r-sm);
}

.address-item-content { min-width: 0; font-size: 13.5px; color: var(--pr-ink-2); line-height: 1.5; }
.address-item-content strong { display: block; color: var(--pr-ink); font-size: 14px; }

.address-item-actions { display: flex; gap: 6px; }

/* Largura automática, e não um quadrado de ícone: o `AddressModal.js`
   monta `<button class="edit"><i …></i> Editar</button>` — com rótulo.
   Fixar 34×34 fazia o texto vazar por cima do card vizinho. Medido na
   conta com sessão real; a bancada de render não mostra este bloco
   porque ele só existe depois da resposta da API (§6.12). */
.address-item-actions button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 11px;
    border: 1px solid var(--pr-line-2);
    border-radius: var(--pr-r-sm);
    color: var(--pr-ink-2);
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
}

.address-item-actions button i { font-size: 15px; }

.address-item-actions .edit:hover { border-color: var(--pr-ink); color: var(--pr-ink); }
.address-item-actions .delete:hover { border-color: var(--pr-danger); color: var(--pr-danger); }

.address-form-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.cep-group { display: flex; gap: 8px; }

.cep-group button {
    flex: none;
    width: 46px;
    min-height: 46px;
    border: 1px solid var(--pr-line-2);
    border-radius: var(--pr-r-sm);
    color: var(--pr-ink-2);
}

/* --- Pedidos (features/orders) ------------------------------------------ */
.orders { display: flex; flex-direction: column; gap: 10px; }

.order-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 14px 16px;
    border: 1px solid var(--pr-line);
    border-radius: var(--pr-r-sm);
}

.order-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.order-info h3 { font-size: 14.5px; }
.order-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--pr-ink-3); }
.order-meta span { display: inline-flex; align-items: center; gap: 5px; }

.order-status {
    display: inline-flex;
    align-items: center;
    padding: 4px 11px;
    border-radius: var(--pr-r-pill);
    font-size: 11.5px;
    font-weight: 700;
    background: var(--pr-surface-2);
    color: var(--pr-ink-2);
    white-space: nowrap;
}

.status-pending { background: #fdf0d5; color: #8a5a00; }
.status-processing { background: #e2ecfb; color: #1a4f96; }
.status-completed,
.status-delivered { background: #dff3e7; color: var(--pr-success); }
.status-canceled { background: #fbe3e1; color: var(--pr-danger); }
.status-refunded { background: #ece7fb; color: #5b3fa6; }
.status-undefined { background: var(--pr-surface-2); color: var(--pr-ink-2); }

.order-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.order-amount { font-size: 16px; font-weight: 800; letter-spacing: -.02em; }

#paginationControls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 6px;
}

#paginationControls button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid var(--pr-line-2);
    border-radius: var(--pr-r-sm);
    background: var(--pr-paper);
    font-size: 13px;
    font-weight: 600;
}

#paginationControls button:disabled { opacity: .4; cursor: default; }
#pageIndicatorOrders,
#pageIndicatorFavorites,
#pageFavIndicator { font-size: 13px; color: var(--pr-ink-3); }

/* --- Detalhe do pedido (dentro do modal) --------------------------------- */
.order-details { display: flex; flex-direction: column; gap: 18px; }
.order-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.order-detail-date { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--pr-ink-3); }
.order-detail-items { display: flex; flex-direction: column; gap: 12px; }

.order-item-detail { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; }

.order-item-image {
    width: 56px;
    height: 56px;
    object-fit: contain;
    padding: 4px;
    background: var(--pr-surface);
    border-radius: var(--pr-r-sm);
}

.order-item-info { min-width: 0; }
.order-item-info h4 { font-size: 13.5px; }
.order-item-info p { font-size: 12.5px; color: var(--pr-ink-3); }
.order-item-price { font-weight: 700; white-space: nowrap; }

.order-summary { display: flex; flex-direction: column; gap: 7px; padding-top: 14px; border-top: 1px solid var(--pr-line); }
.order-summary-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; color: var(--pr-ink-2); }
.order-summary-total { font-size: 16px; font-weight: 800; color: var(--pr-ink); }

.tracking-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 14px;
    background: var(--pr-surface);
    border-radius: var(--pr-r-sm);
}

.tracking-info-text { display: flex; flex-direction: column; min-width: 0; }
.tracking-info-label { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--pr-ink-3); }

.timeline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.timeline-step { display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; }

.timeline-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--pr-line-2);
    border-radius: 50%;
    color: var(--pr-ink-3);
    font-size: 17px;
}

.timeline-step.active .timeline-icon { background: var(--primary-color); border-color: transparent; color: var(--on-primary); }
.timeline-text { font-size: 11.5px; color: var(--pr-ink-3); }
.timeline-step.active .timeline-text { color: var(--pr-ink); font-weight: 600; }

/* --- Favoritos ---------------------------------------------------------- */
.favorites-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }

.favorite-item {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--pr-line);
    border-radius: var(--pr-r-sm);
}

.favorite-item img { width: 64px; height: 64px; object-fit: contain; background: var(--pr-surface); border-radius: var(--pr-r-sm); padding: 4px; }
.favorite-info { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.favorite-info h3 { font-size: 13.5px; line-height: 1.3; }
.favorite-price { font-size: 14px; font-weight: 800; color: var(--pr-brand-text); }
.favorite-stock-warning { font-size: 11.5px; font-weight: 600; color: var(--pr-danger); }

/* --- Indique um amigo ----------------------------------------------------- */
.referral-panel { display: flex; flex-direction: column; gap: 14px; }
.referral-explainer { font-size: 14px; color: var(--pr-ink-2); }
.referral-link-row { display: flex; gap: 8px; }
.referral-link-row input { flex: 1; min-width: 0; }
.referral-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }

.referral-stat {
    display: flex;
    flex-direction: column;
    padding: 14px;
    background: var(--pr-surface);
    border-radius: var(--pr-r-sm);
}

.referral-stat b { font-size: 22px; font-weight: 800; letter-spacing: -.03em; }
.referral-stat span { font-size: 12px; color: var(--pr-ink-3); }

/* --- Formulário de dados da conta ---------------------------------------- */
#accountForm .form-actions button { min-width: 180px; }

/* ====================== 16. ENTRAR / CRIAR CONTA ====================== */
/* `login.php` também é monolito: o <body> é a tela inteira, sem chrome de
   loja. O partial `auth/layout` deste tema desenha a moldura. */

.pr-auth {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: 100vh;
    background: var(--pr-paper);
}

.pr-auth__aside {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 40px;
    padding: 44px;
    background: var(--pr-night);
    color: #fff;
    overflow: hidden;
    isolation: isolate;
}

.pr-auth__aside-media { position: absolute; inset: 0; z-index: -2; }
.pr-auth__aside-media img { width: 100%; height: 100%; object-fit: cover; opacity: .42; }

.pr-auth__aside::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(160deg, rgba(8, 10, 13, .55), rgba(8, 10, 13, .92));
}

/* Mesmo chip branco do rodapé, e pela mesma razão: logotipo de loja chega
   com fundo branco ou com traço escuro, e os dois casos precisam funcionar
   sobre um painel escuro. Sem o chip, o primeiro vira um retângulo branco
   solto e o segundo some. */
.pr-auth__logo {
    align-self: flex-start;
    padding: 9px 13px;
    background: #fff;
    border-radius: var(--pr-r-sm);
}

.pr-auth__logo img { max-height: 34px; width: auto; object-fit: contain; }
.pr-auth__logo .logo-text { color: var(--pr-ink); }

.pr-auth__pitch h2 {
    color: #fff;
    font-size: clamp(1.7rem, 3vw, 2.6rem);
    letter-spacing: -.035em;
    text-wrap: balance;
}

.pr-auth__pitch p { margin-top: 12px; max-width: 42ch; color: #aab0b8; }

.pr-auth__list { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.pr-auth__list li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: rgba(255, 255, 255, .8); }
.pr-auth__list i { color: var(--pr-brand-line); font-size: 17px; }

/* O "voltar para a loja" herda `.mini-text`, que é cinza de rótulo feito
   para fundo claro — sobre o painel escuro dava 3.76:1. */
.pr-auth__aside .mini-text { color: #b3b9c1; }

.pr-auth__aside a.mini-text {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
}

.pr-auth__aside a.mini-text:hover { color: #fff; }

.pr-auth__main { display: flex; align-items: center; justify-content: center; padding: 44px 24px; }

.pr-auth__main .container { max-width: 420px; padding: 0; }

.pr-auth__main h1 {
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    letter-spacing: -.035em;
    margin-bottom: 22px;
}

#authForm { display: flex; flex-direction: column; gap: 14px; }
#authForm .form-group { display: flex; flex-direction: column; gap: 6px; }
#authForm button[type="submit"] { width: 100%; min-height: 50px; margin-top: 6px; }

.toggle-form { margin-top: 14px; font-size: 13.5px; color: var(--pr-ink-2); text-align: center; }
.toggle-form a { color: var(--pr-brand-text); font-weight: 700; }
#authForm .toggle-form { margin-top: 0; text-align: right; }

/* ======================= 17. RODAPÉ E NEWSLETTER ======================= */

.pr-newsletter {
    padding: clamp(38px, 5vw, 60px) 0;
    background:
        radial-gradient(90% 160% at 85% 0%, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, 0) 55%),
        radial-gradient(70% 140% at 8% 100%, rgba(0, 0, 0, .22) 0%, rgba(0, 0, 0, 0) 60%),
        var(--secondary-dark-color, var(--primary-color));
    color: var(--on-brand);
}

.pr-newsletter .box {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 460px);
    align-items: center;
    gap: 26px;
}

.pr-newsletter h3 { color: inherit; font-size: clamp(1.35rem, 2.6vw, 2rem); letter-spacing: -.03em; }
.pr-newsletter p { margin-top: 6px; opacity: .78; }

.pr-newsletter form.search {
    display: flex;
    align-items: center;
    background: var(--pr-paper);
    border-radius: var(--pr-r-md);
    overflow: hidden;
}

.pr-newsletter form.search .icon-large { padding: 0 4px 0 14px; color: var(--pr-ink-3); font-size: 18px; }
.pr-newsletter form.search input { flex: 1; min-width: 0; min-height: 52px; padding: 0 10px; border: 0; background: transparent; }
.pr-newsletter form.search input:focus { box-shadow: none; }
.pr-newsletter form.search button { flex: none; margin: 5px; min-height: 42px; padding: 0 20px; background: var(--pr-ink); color: #fff; border-radius: var(--pr-r-sm); font-weight: 700; font-size: 13.5px; }

.pr-footer__links {
    padding: clamp(38px, 5vw, 58px) 0 30px;
    background: var(--pr-night);
    color: #a8aeb6;
}

.pr-footer__links .flexwrap {
    display: grid;
    grid-template-columns: 1.4fr repeat(3, 1fr);
    gap: 30px;
}

.pr-footer__brand { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }

/* Chip branco em vez de filtro. `brightness(0) invert(1)` pinta TODO pixel
   de branco — logotipo com fundo branco vira um retângulo branco sólido, e
   logotipo escuro sobre transparente some no rodapé escuro. O chip funciona
   com os dois casos, que é o que uma loja white-label precisa. */
.pr-footer__brand .logo {
    padding: 8px 12px;
    background: #fff;
    border-radius: var(--pr-r-sm);
}

.pr-footer__brand .logo img { max-height: 30px; width: auto; object-fit: contain; }
.pr-footer__brand .logo-text { color: var(--pr-ink); }
.pr-footer__brand .mini-text { color: #9199a2; }

.pr-footer__wa {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: var(--pr-r-sm);
    font-size: 13px;
    font-weight: 600;
    color: #fff;
}

.pr-footer__wa:hover { border-color: #fff; }

.pr-footer__links h4 {
    margin-bottom: 14px;
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.pr-footer__links ul { display: flex; flex-direction: column; gap: 5px; }

/* Mesma regra de alvo de toque da faixa do topo: link de 13px tem 20px de
   caixa, e a varredura pede 22. O `gap` da lista encolheu junto para o
   bloco não crescer. */
.pr-footer__links a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    font-size: 13.5px;
    transition: color .16s var(--pr-ease);
}
.pr-footer__links a:hover { color: #fff; }

.pr-footer__bar { background: var(--pr-night); border-top: 1px solid rgba(255, 255, 255, .1); }

.pr-footer__bar .wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 18px 0;
}

.pr-footer__bar .mini-text { color: #8d939b; }
.pr-footer__bar .socials ul { display: flex; gap: 6px; }

.pr-footer__bar .socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 50%;
    color: #b3b9c1;
    font-size: 16px;
    transition: border-color .16s var(--pr-ease), color .16s var(--pr-ease);
}

.pr-footer__bar .socials a:hover { border-color: #fff; color: #fff; }

/* ============== 17b. INFORMAÇÕES DA EMPRESA E TROCAS ==============
   Duas páginas que passam pelo `View::useStructure` e portanto vestem o
   tema, mas não aparecem na lista de 7 do §7.1 — e cujo miolo é markup
   próprio, não partial. Sem estas regras elas herdavam só o cabeçalho e o
   rodapé, com o conteúdo cru no meio. */

.info-section,
.exchange-policy-section {
    padding: 22px;
    border: 1px solid var(--pr-line);
    border-radius: var(--pr-r-md);
    margin-bottom: 18px;
}

.info-section-head,
.map-head,
.exchange-policy-section h2 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 16px;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -.02em;
}

.company-info-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px 24px; }

.company-info-list li {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--pr-line);
    font-size: 14px;
}

.info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: var(--pr-surface);
    border-radius: var(--pr-r-sm);
    font-size: 17px;
    color: var(--pr-ink-2);
}

.info-content { display: flex; flex-direction: column; min-width: 0; }
.info-content strong { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--pr-ink-3); font-weight: 700; }

/* iframe sem CSS são 150px de altura — o mapa virava um selo (§6.19). */
.map-frame {
    aspect-ratio: 16 / 7;
    border-radius: var(--pr-r-md);
    overflow: hidden;
    border: 1px solid var(--pr-line);
}

.map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

.exchange-policy-content { max-width: 78ch; }
.exchange-policy-section-body { color: var(--pr-ink-2); }
.exchange-policy-section-body p + p { margin-top: 12px; }
.exchange-policy-section-body ul { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.exchange-policy-section-body li { padding-left: 18px; position: relative; }
.exchange-policy-section-body li::before { content: ''; position: absolute; left: 0; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--primary-color); }

/* ============ 18. BLOCOS DE RUNTIME SEM PARTIAL (compartilhados) ============ */

/* Modal de compartilhar (shared/Navigation.js) */
.share-modal { display: flex; flex-direction: column; gap: 16px; }
.share-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px; }

.share-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 14px 8px;
    border: 1px solid var(--pr-line);
    border-radius: var(--pr-r-sm);
    font-size: 12px;
    font-weight: 600;
    color: var(--pr-ink-2);
}

.share-item i { font-size: 21px; }
.share-item:hover { border-color: var(--pr-ink); color: var(--pr-ink); }
.share-whatsapp:hover { color: var(--pr-success); border-color: currentColor; }
.share-copy { display: flex; gap: 8px; }
.share-copy input { flex: 1; min-width: 0; }
.share-copy button { flex: none; min-height: 46px; padding: 0 16px; background: var(--pr-ink); color: #fff; border-radius: var(--pr-r-sm); font-weight: 700; font-size: 13px; }

/* Modal "Selecione uma variação" (features/cart/VariationModal.js) —
   markup 100%% de runtime: sem estas regras a foto da variação abre no
   tamanho natural do arquivo dentro do modal. Estado `.selected` no
   `.variation-option`, conferido no módulo. */
.variation-picker { display: flex; flex-direction: column; gap: 8px; }
.variation-hint { margin-bottom: 4px; }

.variation-option {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--pr-line-2);
    border-radius: var(--pr-r-sm);
    cursor: pointer;
    transition: border-color .16s var(--pr-ease), background-color .16s var(--pr-ease);
}

.variation-option:hover { border-color: var(--pr-ink-2); }

.variation-option.selected {
    border-color: var(--primary-color);
    background: var(--pr-brand-wash);
    box-shadow: inset 0 0 0 1px var(--primary-color);
}

.variation-option img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: var(--pr-r-sm);
    background: var(--pr-surface);
}

.variation-body { min-width: 0; }
.variation-body strong { font-size: 14px; font-weight: 600; }
.variation-price { font-size: 14px; font-weight: 700; white-space: nowrap; }

/* `fadeIn` é exigido por nome pelo visual de cartão do pagamento
   (payment/CreditCardVisual.js escreve `style.animation = 'fadeIn …'`). */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Mensagem de resultado da redefinição de senha */
#resultMessage { padding: 12px 14px; border-radius: var(--pr-r-sm); font-size: 13.5px; }
#resultMessage.is-error { background: color-mix(in srgb, var(--pr-danger) 8%, #fff); color: var(--pr-danger); }
#resultMessage.is-success { background: color-mix(in srgb, var(--pr-success) 10%, #fff); color: var(--pr-success); }

/* ============================ 19. RESPONSIVO ============================
   Medido em 1360 / 1180 / 980 / 768 / 640 / 390 / 320. O 320 não está na
   lista obrigatória do §7.3 e mesmo assim entrou: é de graça e pega o que
   o 390 esconde — o stepper do checkout com os três rótulos, por exemplo,
   vazava e dava rolagem lateral na página inteira (§6.25). */

@media (max-width: 1180px) {
    :root { --pr-grid-colunas: 3; }

    .pr-collections__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .checkout.flexwrap { grid-template-columns: minmax(0, 1fr) 320px; }
    .products.one.cart > .flexwrap { grid-template-columns: minmax(0, 1fr) 310px; }
    .pr-rail { grid-auto-columns: minmax(220px, calc(100% / 3)); }
}

@media (max-width: 980px) {
    .pr-product__top { grid-template-columns: minmax(0, 1fr); }
    .pr-product__buy { position: static; }
    .pr-footer__links .flexwrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pr-newsletter .box { grid-template-columns: minmax(0, 1fr); }
    .profile-content { grid-template-columns: minmax(0, 1fr); }
    .profile-content .sidebar { position: static; }
    .nav-menu { flex-direction: row; flex-wrap: wrap; }
    .pr-auth { grid-template-columns: minmax(0, 1fr); }
    .pr-auth__aside { display: none; }

    .checkout.flexwrap,
    .products.one.cart > .flexwrap { grid-template-columns: minmax(0, 1fr); }

    .summary-order,
    .cart-summary.styled,
    .pr-plp__aside { position: static; }
}

/* --- Celular ------------------------------------------------------------
   O par `.mobile-hide`/`.desktop-hide` inverte AQUI, e as regras de área
   de toque vêm DEPOIS dele, dentro deste mesmo bloco. Fora daqui elas
   trariam o botão de menu de volta no computador (§6.7). */
@media (max-width: 900px) {
    .mobile-hide { display: none; }
    .desktop-hide { display: revert; }

    .trigger { display: inline-flex; }
    .menu-bottom { display: block; }
    .mobile-return-button { display: block; }

    body { padding-bottom: 62px; }

    .header-nav .wrapper {
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 10px;
        min-height: 62px;
    }

    :root { --pr-header-h: 62px; }

    .header-nav .left { justify-content: center; }
    .logo img { max-height: 34px; }
    .header-nav .right > ul > li > a { height: 42px; padding: 0 8px; }

    .pr-hero__main { min-height: 62vh; }
    /* Folga embaixo pro CTA não terminar debaixo da barra de controles do
       slider: ela é `position:absolute` centrada no rodapé do hero, e no
       desktop passa longe porque o texto ocupa só a metade esquerda. No
       celular a coluna é uma só, e o botão parava exatamente atrás da barra
       (relatado com print, 2026-08-11). */
    .pr-hero__main > .container { padding-block: 34px 72px; }
    .pr-hero__strip { grid-template-columns: minmax(0, 1fr); }

    /* A barra encolhe junto: 34px de alvo em cada controle numa tela de
       360px empurrava o pill para quase metade da largura. 30px continua
       acima do mínimo de toque confortável com o padding do pill. */
    .pr-hero__controls { bottom: 12px; gap: 2px; padding: 4px 6px; }
    .pr-hero__arrow,
    .pr-hero__toggle { width: 30px; height: 30px; font-size: 17px; }

    .pr-section { padding: 34px 0; }
    .pr-sectop { gap: 12px; }
    .pr-collections__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

    /* `min(78vw, 340px)` e não `minmax(0, 78%)`: dentro de um contêiner de
       rolagem a porcentagem resolve contra largura INDEFINIDA e vira
       `auto`, com piso zero — o card do trilho colapsava para 14px de
       largura, medido a 768px. `vw` é medida definida e não tem esse
       problema. */
    .pr-rail { grid-auto-columns: min(78vw, 340px); }

    /* A listagem vira uma coluna e o painel de filtro sai da página: ele
       aparece por cima quando o Filters.js põe `.show` no `.filter` — a
       classe vai no `.filter`, NÃO no `aside` que o envolve (§6.5). */
    .pr-plp__aside .filter {
        display: block;
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 220;
        width: min(330px, 90vw);
        padding: 16px;
        background: var(--pr-paper);
        border-right: 1px solid var(--pr-line);
        overflow-y: auto;
        transform: translateX(-102%);
        transition: transform .3s var(--pr-ease);
        visibility: hidden;
    }

    .pr-plp__aside .filter.show { transform: none; visibility: visible; box-shadow: var(--pr-shadow-pop); }

    details.pr-filter { position: static; }

    details.pr-filter > summary {
        width: 100%;
        justify-content: space-between;
        background: var(--pr-paper);
        border: 0;
        border-bottom: 1px solid var(--pr-line);
        border-radius: 0;
        min-height: 48px;
        padding: 0 2px;
        font-size: 14px;
    }

    .pr-filter__panel {
        position: static;
        width: auto;
        padding: 10px 2px 16px;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .pr-filter__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 14px;
        padding-bottom: 12px;
        border-bottom: 1px solid var(--pr-line);
        font-size: 15px;
    }

    .pr-filter__close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        border-radius: var(--pr-r-sm);
        background: var(--pr-surface);
        font-size: 18px;
    }

    .wizard-actions { flex-direction: column-reverse; }
    .wizard-actions .primary-button,
    .wizard-actions .secondary-button { width: 100%; }

    .pr-footer__links { padding-bottom: 20px; }
}

@media (max-width: 720px) {
    :root { --pr-grid-colunas: 2; }

    .pr-grid > * { min-width: 0; }
    .pr-card__body { padding: 0 12px 16px; }
    .pr-card__media { padding: 10px; }
    .pr-card__title { font-size: 13.5px; }
    .pr-card__price .current { font-size: 17px; }

    /* Tabela do carrinho vira bloco com rótulo. O markup NÃO muda: quem
       monta as linhas é `features/cart/CartTable.js`, compartilhado — um
       tema que trocasse a tabela por cards mudaria o carrinho de todos
       (§6.3). */
    #cart-table thead { display: none; }

    #cart-table tbody tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px 12px;
        padding: 16px 0;
        border-bottom: 1px solid var(--pr-line);
    }

    #cart-table tbody td { padding: 0; border: 0; }
    #cart-table tbody td:first-child { grid-column: 1 / -1; }
    #cart-table tbody td:nth-child(2),
    #cart-table tbody td:nth-child(4) { font-size: 13.5px; color: var(--pr-ink-2); }

    #cart-table tbody td:nth-child(2)::before { content: 'Preço: '; color: var(--pr-ink-3); }
    #cart-table tbody td:nth-child(4)::before { content: 'Subtotal: '; color: var(--pr-ink-3); }
    #cart-table tbody td:nth-child(4) { text-align: right; font-weight: 700; color: var(--pr-ink); }
    #cart-table tbody td:nth-child(3) { grid-row: 3; }
    #cart-table tbody td:last-child { grid-row: 3; text-align: right; }

    .description ul.content li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .reviews #reviews-list { grid-template-columns: minmax(0, 1fr); }
    .address-form-body { grid-template-columns: minmax(0, 1fr); }
    .timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .order-actions { width: 100%; justify-content: space-between; margin-left: 0; }
    .pr-hero__card { min-height: 176px; }
}

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

    .pr-footer__links .flexwrap { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .profile-header { flex-direction: column; align-items: flex-start; }
    .profile-actions { width: 100%; }
    .wa-btn, #logoutBtn { flex: 1; justify-content: center; }
    .pr-brands__inner { flex-direction: column; align-items: flex-start; gap: 14px; }
    .pr-brands__rail { width: 100%; }
}

/* Abaixo de 400px só o passo ATIVO mantém o nome: os três rótulos juntos
   ("Entrega — Pagamento — Revisão") vazavam 11px em 320px e davam rolagem
   lateral na página inteira do checkout. */
@media (max-width: 400px) {
    .wizard-stepper { gap: 6px; }
    .wz-step:not(.active) .wz-label { display: none; }
    .wz-dot { width: 27px; height: 27px; font-size: 12px; }
    .wizard-pane .review-block { grid-template-columns: minmax(0, 1fr); gap: 4px; }
    .container { padding: 0 14px; }
    .checkout .item.left.styled { padding: 14px; }
    .pr-collections__grid { grid-template-columns: minmax(0, 1fr); }
}

/* --- Impressão ----------------------------------------------------------
   Comprovante de pedido sai do navegador com alguma frequência. */
@media print {
    .header-top, .pr-nav-row, .menu-bottom, .search-bottom, .site-off,
    .pr-newsletter, .pr-footer__links, .overlay, .mini-cart { display: none !important; }

    body { padding-bottom: 0; }
    .pr-reveal [data-reveal] { opacity: 1 !important; transform: none !important; }
}