/* =====================================================================
   Camada das PRÉVIAS de tema  (slug: previews)
   ---------------------------------------------------------------------
   POR QUE ESTE ARQUIVO EXISTE
   ---------------------------
   As páginas de prévia (`app/Views/themes/*.php`) reproduzem, tela por
   tela, os mockups do dono em `core/temas/`. O CSS de cada tema
   (`patty-piercing.css`, `romano-atacado.css`, `nova-moda.css`) cobre o
   vocabulário do STOREFRONT — cabeçalho, grade, card, PDP, carrinho,
   checkout. Ele NÃO cobre composições que só existem no mockup da home:
   hero em duas colunas, tira de benefícios, ladrilho de categoria,
   faixa promocional, carrossel de círculos, tabela de carrinho, painel
   de filtros com contagem, comparativo de economia, tela de login,
   folha de identidade da marca.

   Este arquivo é SÓ isso: as composições da PRÉVIA. Ele não reescreve
   nenhuma regra do tema e não é carregado pelo storefront — só pelo
   `themes/layout.php`. O CSS dos temas fica intocado de propósito: outro
   agente está ligando os temas ao storefront real, e dois escritores no
   mesmo arquivo se sobrescrevem.

   REGRAS DESTE ARQUIVO
   --------------------
   1) Tudo vive sob `.store-theme-<slug>`. Nenhum seletor global.
   2) Prefixo `pv-` (preview). Nenhum nome colide com `pp-`, `ra-`, `nm-`
      ou `store-`.
   3) ZERO literal de cor, fonte, raio ou sombra: todo valor sai de uma
      custom property `--store-*` que o `ThemeRegistry` injeta no `<body>`.
      Trocar a paleta de uma loja continua sendo trocar os tokens.
   4) Zero dependência de rede: nenhuma webfont, nenhuma imagem, nenhuma
      folha externa. Formas decorativas são CSS puro (borda, gradiente,
      pseudo-elemento). Ícones vêm das Bootstrap Icons, já carregadas.
   5) Carregado DEPOIS do CSS do tema (ver `themes/layout.php`), então
      vence a cascata em especificidade igual — e onde a especificidade
      do tema é maior, o seletor aqui sobe junto (`.pp-hero.pv-hero-split`).

   ACESSIBILIDADE (WCAG 2.2 AA) — critério de aceite
   -------------------------------------------------
   - Nenhum par de contraste novo: fundo e texto saem sempre dos tokens do
     tema, e os pares aprovados estão documentados no arquivo de cada tema.
   - Alvos de toque ≥ 44px nas ações principais (`--pv-tap`).
   - Nenhuma informação só por cor: promoção/esgotado/etapa carregam TEXTO.
   - `prefers-reduced-motion` desliga transições.
   - A grade de 6 colunas e a tira de 5 itens colapsam em 1 coluna no
     celular — a prévia é vista no telefone por quem avalia.
   ===================================================================== */

/* ---------------------------------------------------------------------
   0. Base comum às três prévias
   --------------------------------------------------------------------- */

.store-theme-patty-piercing,
.store-theme-romano-atacado,
.store-theme-nova-moda {
    --pv-tap: 44px;
    --pv-gap: 22px;
    /* Cor do sobretítulo. Fica num token próprio porque cada tema tem um
       tom de contraste diferente aprovado para texto pequeno. */
    --pv-eyebrow: var(--store-primary);
    --pv-panel: var(--store-surface);
    --pv-panel-alt: var(--store-surface-alt);
}

.store-theme-nova-moda {
    --pv-eyebrow: var(--store-secondary);
}

/* Faixa de fundo alternado: separa as telas sem inventar cor. */
.pv-band--alt {
    background-color: var(--store-surface-alt);
    border-top: 1px solid var(--store-border);
    border-bottom: 1px solid var(--store-border);
}

/* Sobretítulo editorial: caixa alta, letras espaçadas, pouca tinta. */
.pv-eyebrow {
    display: block;
    margin: 0 0 10px;
    color: var(--pv-eyebrow);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.pv-lead {
    max-width: 62ch;
    margin: 0 0 1.2em;
    color: var(--store-text-muted);
}

.pv-note {
    margin: 14px 0 0;
    color: var(--store-text-muted);
    font-size: 0.84rem;
}

.pv-note--center {
    text-align: center;
}

/* Ocupa a largura toda. Precisa de escopo de tema porque é aplicado em
   cima de uma classe do tema (mesma especificidade, ordem decide). */
.store-theme-patty-piercing .pv-block,
.store-theme-romano-atacado .pv-block,
.store-theme-nova-moda .pv-block {
    display: flex;
    width: 100%;
}

/* Título de painel: mesmo título do tema, um degrau menor (o mockup usa
   esse tamanho dentro de cartão de resumo e de formulário). */
.pv-subtitle {
    font-size: 1.2rem;
    margin-bottom: 14px;
}

/* Cabeçalho de seção com o link "ver todos" à direita (padrão dos mockups). */
.pv-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px 20px;
    margin-bottom: 26px;
}

.pv-section-head > *,
.pv-section-head .pp-section__title,
.pv-section-head .nm-section__title,
.pv-section-head .pv-lead {
    margin-bottom: 0;
}

/* ---------------------------------------------------------------------
   1. Faixa de utilidades (topo): esquerda + direita
   --------------------------------------------------------------------- */

.pv-utilbar__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 22px;
    text-align: left;
}

.pv-utilbar__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pv-utilbar__item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.pv-utilbar__item + .pv-utilbar__item::before {
    content: "";
    width: 1px;
    height: 12px;
    margin-right: 4px;
    background-color: var(--store-border);
}

/* ---------------------------------------------------------------------
   2. Ação do cabeçalho com duas linhas (ícone + rótulo + apoio)
   --------------------------------------------------------------------- */

.pv-header-action {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: var(--pv-tap);
    padding: 4px 8px;
    border: 1px solid transparent;
    border-radius: var(--store-radius-sm);
    color: var(--store-text);
    text-decoration: none;
}

.pv-header-action:hover {
    background-color: var(--store-surface-alt);
    border-color: var(--store-border);
    color: var(--store-text);
}

.pv-header-action .bi {
    font-size: 1.2rem;
    color: var(--pv-eyebrow);
}

.pv-header-action__text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.pv-header-action__label {
    font-size: 0.82rem;
    font-weight: 700;
}

.pv-header-action__sub {
    color: var(--store-text-muted);
    font-size: 0.72rem;
}

@media (max-width: 900px) {
    .pv-header-action__text {
        display: none;
    }
}

/* ---------------------------------------------------------------------
   3. Hero em duas colunas (texto | mídia) — a composição da home
   --------------------------------------------------------------------- */

.pv-hero-split {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 44px;
    align-items: center;
    text-align: left;
}

.pv-hero-split__text {
    max-width: 620px;
}

.pv-hero-split .pv-hero-split__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-start;
}

.pv-hero-split__proof {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    margin: 26px 0 0;
    padding: 18px 0 0;
    border-top: 1px solid var(--store-border);
    list-style: none;
    color: var(--store-text-muted);
    font-size: 0.84rem;
}

.pv-hero-split__proof li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.pv-hero-split__proof .bi {
    color: var(--pv-eyebrow);
}

/* O título do hero do tema é centrado com largura máxima própria: aqui ele
   passa a alinhar à esquerda, sem perder o tamanho nem a família.
   A classe `pv-hero-split` vai no MESMO elemento que `pp-container` /
   `nm-container`, então o seletor sobe para vencer a cascata do tema. */
.pv-hero-split .pp-hero__title,
.pv-hero-split .nm-hero__title {
    max-width: 22ch;
    margin-left: 0;
    margin-right: 0;
}

.pv-hero-split .pp-hero__text,
.pv-hero-split .nm-hero__text {
    max-width: 52ch;
    margin-left: 0;
    margin-right: 0;
}

.pv-hero-split .pp-hero__actions,
.pv-hero-split .nm-hero__actions {
    justify-content: flex-start;
}

@media (max-width: 1080px) {
    .pv-hero-split {
        grid-template-columns: minmax(0, 1fr);
        gap: 30px;
    }

    .pv-hero-split__text {
        max-width: none;
    }

    .pv-hero-split .pp-hero__title,
    .pv-hero-split .nm-hero__title {
        max-width: none;
    }
}

/* Legenda sobre a mídia do hero (o "lettering" do mockup, em texto de
   verdade — não há webfont de manuscrito e não se inventa uma). */
.pv-hero__caption {
    position: relative;
    margin: 0;
}

.pv-overlay {
    position: absolute;
    right: 16px;
    bottom: 16px;
    max-width: 78%;
    margin: 0;
    padding: 14px 18px;
    border: 1px solid var(--store-border);
    border-radius: var(--store-radius);
    background-color: var(--store-surface);
    box-shadow: var(--store-shadow);
    color: var(--store-text);
    font-family: var(--store-font-display);
    font-size: 1rem;
    font-style: italic;
    line-height: 1.35;
}

/* Coluna estreita de texto ao lado da mídia (romano: "ARGOLAS QUE
   VALORIZAM CADA ESTILO."). */
.pv-vertical-caption {
    display: flex;
    align-items: center;
    margin: 0;
    padding-left: 20px;
    border-left: 2px solid var(--store-primary);
    color: var(--store-text);
    font-family: var(--store-font-display);
    font-size: 1.1rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    line-height: 1.3;
    text-transform: uppercase;
}

/* ---------------------------------------------------------------------
   4. Mídia de exemplo com proporção fixa
   --------------------------------------------------------------------- */

.pv-media {
    display: block;
    position: relative;
    margin: 0;
    border: 1px solid var(--store-border);
    border-radius: var(--store-radius-lg);
    background-color: var(--store-surface-alt);
    overflow: hidden;
}

.pv-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pv-media--1x1 { aspect-ratio: 1 / 1; }
.pv-media--4x3 { aspect-ratio: 4 / 3; }
.pv-media--3x4 { aspect-ratio: 3 / 4; }
.pv-media--16x9 { aspect-ratio: 16 / 9; }

/* ---------------------------------------------------------------------
   5. Tira de benefícios (ícone + título + apoio), 4 ou 5 colunas
   --------------------------------------------------------------------- */

.pv-strip-row {
    display: grid;
    gap: 24px 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pv-strip-row--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pv-strip-row--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.pv-strip-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.pv-feature {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pv-feature .bi {
    color: var(--pv-eyebrow);
    font-size: 1.4rem;
    line-height: 1;
}

.pv-feature__title {
    margin: 0;
    font-family: var(--store-font-display);
    font-size: 0.98rem;
    font-weight: 700;
}

.pv-feature__note {
    margin: 0;
    color: var(--store-text-muted);
    font-size: 0.82rem;
}

@media (max-width: 1080px) {
    .pv-strip-row--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pv-strip-row--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
    .pv-strip-row--5,
    .pv-strip-row--4,
    .pv-strip-row--3 { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------------
   6. Ladrilho de categoria ("Compre por categoria")
   --------------------------------------------------------------------- */

.pv-tiles {
    display: grid;
    gap: 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pv-tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pv-tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.pv-tile {
    display: flex;
    flex-direction: column;
    gap: 12px;
    color: inherit;
    text-decoration: none;
}

.pv-tile:hover {
    color: inherit;
}

.pv-tile .pv-media {
    transition: border-color 0.2s ease;
}

.pv-tile:hover .pv-media {
    border-color: var(--store-accent);
}

.pv-tile__label {
    font-family: var(--store-font-display);
    font-size: 1.02rem;
    font-weight: 700;
    text-align: center;
}

.pv-tile__note {
    display: block;
    margin-top: 2px;
    color: var(--store-text-muted);
    font-family: var(--store-font-sans);
    font-size: 0.78rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

@media (max-width: 1080px) {
    .pv-tiles--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
    .pv-tiles--4,
    .pv-tiles--3 { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------------
   7. Tira de círculos (romano: "COMPRE POR SEÇÃO OU COR")
   --------------------------------------------------------------------- */

.pv-circles {
    display: flex;
    gap: 18px;
    margin: 0;
    padding: 0 0 6px;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: thin;
}

.pv-circle {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    width: 104px;
    color: inherit;
    text-align: center;
    text-decoration: none;
}

.pv-circle__media {
    width: 96px;
    height: 96px;
    border: 1px solid var(--store-border);
    border-radius: 999px;
    background-color: var(--store-surface-alt);
    overflow: hidden;
}

.pv-circle__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pv-circle:hover .pv-circle__media {
    border-color: var(--store-primary);
}

.pv-circle__label {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ---------------------------------------------------------------------
   8. Grade de conteúdo em cartão (serviços, etapas, artigos)
   --------------------------------------------------------------------- */

.pv-cards {
    display: grid;
    gap: 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pv-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pv-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pv-cards--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.pv-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px;
    border: 1px solid var(--store-border);
    border-radius: var(--store-radius);
    background-color: var(--store-surface);
}

.pv-card__title {
    margin: 0;
    font-family: var(--store-font-display);
    font-size: 1.02rem;
    font-weight: 700;
}

.pv-card__text {
    margin: 0;
    color: var(--store-text-muted);
    font-size: 0.88rem;
}

/* Assinatura pequena sob o texto do cartão (romano: "Cliente de exemplo ·
   loja fictícia"). Herdado do texto: nunca dado real. */
.pv-card__meta {
    margin: auto 0 0;
    color: var(--store-text-muted);
    font-size: 0.76rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.pv-card__link {
    margin-top: auto;
    font-size: 0.84rem;
    font-weight: 700;
}

.pv-card__icon {
    color: var(--pv-eyebrow);
    font-size: 1.4rem;
    line-height: 1;
}

.pv-card .pv-media {
    border-radius: var(--store-radius-sm);
}

/* Ação no pé do card de produto (o mockup do catálogo tem "Adicionar ao
   carrinho" dentro do card, abaixo do preço). */
.pv-card__cta {
    padding: 0 20px 22px;
}

@media (max-width: 1080px) {
    .pv-cards--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pv-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pv-cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
    .pv-cards--5,
    .pv-cards--4,
    .pv-cards--3 { grid-template-columns: minmax(0, 1fr); }
}

/* Grade de produto de 6 e de 5 colunas — a densidade da home do mockup,
   que não é a mesma da listagem (4 colunas, essa vem do CSS do tema). */
.pv-grid-6,
.pv-grid-5 {
    display: grid;
    gap: 26px 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pv-grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.pv-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

@media (max-width: 1280px) {
    .pv-grid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1080px) {
    .pv-grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .pv-grid-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
    .pv-grid-6,
    .pv-grid-5 { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------------
   9. Faixa promocional (card cheio, texto claro sobre a cor do tema)
   --------------------------------------------------------------------- */

.pv-promo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
    gap: 30px;
    align-items: center;
    padding: 34px;
    border-radius: var(--store-radius-lg);
    background-color: var(--store-primary);
    color: var(--store-primary-contrast);
}

.pv-promo__title {
    margin: 0 0 0.4em;
    color: var(--store-primary-contrast);
    font-family: var(--store-font-display);
    font-size: 1.5rem;
    font-weight: 700;
}

.pv-promo__text {
    margin: 0 0 1.4em;
    color: var(--store-primary-contrast);
    opacity: 0.92;
}

.pv-promo .pv-media {
    border-color: transparent;
}

/* Respiro quando a faixa promocional vem logo abaixo de uma grade. */
.pv-promo--spaced {
    margin-top: 32px;
}

/* Sobre o fundo primário o contorno primário desapareceria: o botão aqui
   inverte o par, que é o mesmo par aprovado do tema. */
.pv-promo .pp-btn--primary,
.pv-promo .nm-btn--primary,
.pv-promo .ra-btn--primary {
    background-color: var(--store-primary-contrast);
    border-color: var(--store-primary-contrast);
    color: var(--store-primary);
}

.pv-promo .pp-btn--primary:hover,
.pv-promo .nm-btn--primary:hover,
.pv-promo .ra-btn--primary:hover {
    background-color: var(--store-accent);
    border-color: var(--store-accent);
    color: var(--store-text);
}

@media (max-width: 900px) {
    .pv-promo {
        grid-template-columns: minmax(0, 1fr);
        padding: 24px;
    }
}

/* ---------------------------------------------------------------------
   10. Duas colunas genéricas (mídia | texto), com inversão
   --------------------------------------------------------------------- */

.pv-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px;
    align-items: center;
}

.pv-split--media-left .pv-split__media {
    order: -1;
}

@media (max-width: 900px) {
    .pv-split {
        grid-template-columns: minmax(0, 1fr);
        gap: 26px;
    }

    .pv-split--media-left .pv-split__media {
        order: 0;
    }
}

/* ---------------------------------------------------------------------
   11. Lista de marcadores com ícone
   --------------------------------------------------------------------- */

.pv-bullets {
    display: grid;
    gap: 10px;
    margin: 0 0 1.2em;
    padding: 0;
    list-style: none;
}

.pv-bullets__item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.92rem;
}

.pv-bullets__item .bi {
    flex: 0 0 auto;
    margin-top: 3px;
    color: var(--pv-eyebrow);
}

/* ---------------------------------------------------------------------
   12. Avaliação em estrelas (sem número inventado: o texto vai no sr-only)
   --------------------------------------------------------------------- */

.pv-stars {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--store-accent);
    font-size: 0.95rem;
}

.pv-stars + .pv-stars-note {
    margin-left: 10px;
    color: var(--store-text-muted);
    font-size: 0.84rem;
}

/* ---------------------------------------------------------------------
   13. Migalhas (nova-moda não tem classe própria no CSS do tema)
   --------------------------------------------------------------------- */

.pv-crumbs {
    margin: 0 0 1rem;
    font-size: 0.84rem;
}

.pv-crumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pv-crumbs__item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--store-text-muted);
}

.pv-crumbs__item + .pv-crumbs__item::before {
    content: "/";
    color: var(--store-border);
}

.pv-crumbs__link {
    color: var(--store-text-muted);
}

/* ---------------------------------------------------------------------
   14. Tabela de dados (carrinho). Vira lista no celular, com o rótulo da
       coluna visível por `data-label` — a informação não depende da
       posição na tela.
   --------------------------------------------------------------------- */

.pv-table {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--store-surface);
    border: 1px solid var(--store-border);
    border-radius: var(--store-radius);
    overflow: hidden;
    font-size: 0.9rem;
}

.pv-table caption {
    padding: 12px 14px;
    color: var(--store-text-muted);
    font-size: 0.82rem;
    text-align: left;
}

.pv-table th,
.pv-table td {
    padding: 14px 12px;
    border-bottom: 1px solid var(--store-border);
    text-align: left;
    vertical-align: middle;
}

.pv-table thead th {
    background-color: var(--store-surface-alt);
    color: var(--store-text-muted);
    font-family: var(--store-font-sans);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.pv-table tbody tr:last-child td,
.pv-table tbody tr:last-child th {
    border-bottom: 0;
}

.pv-table__num {
    text-align: right;
    white-space: nowrap;
}

.pv-table__product {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 220px;
}

.pv-table__thumb {
    flex: 0 0 auto;
    width: 72px;
    height: 72px;
    border: 1px solid var(--store-border);
    border-radius: var(--store-radius-sm);
    background-color: var(--store-surface-alt);
    object-fit: cover;
}

.pv-table__name {
    display: block;
    margin: 0;
    font-family: var(--store-font-display);
    font-size: 1rem;
    font-weight: 700;
}

.pv-table__meta {
    display: block;
    margin: 2px 0 0;
    color: var(--store-text-muted);
    font-size: 0.82rem;
}

/* No resumo do pedido o nome e a variação vão um por linha, dentro de um
   `pp-cart__info` que o tema já define como flex. */
.pv-cart-summary .pp-cart__name,
.pv-cart-summary .pp-cart__unit {
    display: block;
}

.pv-table__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0;
}

@media (max-width: 900px) {
    .pv-table--stack thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .pv-table--stack tr {
        display: block;
        padding: 14px;
        border-bottom: 1px solid var(--store-border);
    }

    .pv-table--stack tr:last-child {
        border-bottom: 0;
    }

    .pv-table--stack td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 6px 0;
        border-bottom: 0;
    }

    .pv-table--stack td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        color: var(--store-text-muted);
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .pv-table--stack td[data-label=""]::before {
        content: none;
    }

    .pv-table--stack .pv-table__product {
        min-width: 0;
    }
}

/* ---------------------------------------------------------------------
   15. Painel lateral de filtros com contagem
   --------------------------------------------------------------------- */

.pv-filters {
    padding: 20px;
    border: 1px solid var(--store-border);
    border-radius: var(--store-radius);
    background-color: var(--store-surface);
}

.pv-filters__title {
    margin: 0 0 16px;
    font-family: var(--store-font-display);
    font-size: 1.05rem;
    font-weight: 700;
}

.pv-filters__group + .pv-filters__group {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--store-border);
}

.pv-filters__legend {
    display: block;
    margin: 0 0 10px;
    color: var(--store-text-muted);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.pv-check {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: var(--pv-tap);
    font-size: 0.9rem;
    cursor: pointer;
}

.pv-check input {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    accent-color: var(--store-primary);
}

.pv-check__count {
    margin-left: auto;
    color: var(--store-text-muted);
    font-size: 0.82rem;
}

.pv-range {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
}

.pv-range label {
    flex: 1 1 92px;
    min-width: 0;
}

.pv-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pv-swatch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--store-border);
    border-radius: 999px;
    background-color: var(--store-surface-alt);
    color: var(--store-text-muted);
    font-size: 0.7rem;
    font-weight: 700;
}

.pv-swatch--on {
    border: 2px solid var(--store-primary);
    color: var(--store-text);
}

/* Catálogo em duas colunas: filtros à esquerda, grade à direita. O romano
   já tem isso no CSS do tema (`.ra-layout`); o patty e a nova não têm, e
   é a composição que os mockups pedem. */
.pv-catalog {
    display: grid;
    grid-template-columns: 288px minmax(0, 1fr);
    gap: 34px;
    align-items: start;
}

/* Mesma grade, com a coluna estreita à direita (agendamento, resumo).
   Fica ANTES do `@media` de propósito: media query não soma
   especificidade, então quem vem depois no arquivo venceria dentro dela. */
.pv-catalog--aside-right {
    grid-template-columns: minmax(0, 1fr) 340px;
}

.pv-catalog__aside {
    position: sticky;
    top: 104px;
}

@media (max-width: 1080px) {
    .pv-catalog,
    .pv-catalog--aside-right {
        grid-template-columns: minmax(0, 1fr);
        gap: 26px;
    }

    .pv-catalog__aside {
        position: static;
    }
}

/* Galeria do produto com as miniaturas em COLUNA à esquerda da imagem
   principal — a composição do mockup. O CSS do tema põe as miniaturas
   abaixo, em linha. */
.pv-gallery {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

/* Escopo duplo: a classe do tema (`.pp-gallery__thumbs`) tem a mesma
   especificidade, e a ordem do arquivo é o que decide. */
.pv-gallery .pp-gallery__thumbs,
.pv-gallery .nm-gallery__thumbs,
.pv-gallery .ra-thumbs {
    flex-direction: column;
    margin: 0;
}

.pv-gallery .pp-gallery__thumbs > li,
.pv-gallery .nm-gallery__thumbs > li,
.pv-gallery .ra-thumbs > li {
    flex: 0 0 auto;
}

@media (max-width: 720px) {
    .pv-gallery {
        grid-template-columns: minmax(0, 1fr);
    }

    .pv-gallery .pp-gallery__thumbs,
    .pv-gallery .nm-gallery__thumbs,
    .pv-gallery .ra-thumbs {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

/* ---------------------------------------------------------------------
   16. Abas: a ativa é um `<span aria-current>` (não há JS na prévia);
       as demais são âncoras de verdade para a seção correspondente.
   --------------------------------------------------------------------- */

.pv-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 26px;
    margin: 0 0 4px;
    padding: 0;
    border-bottom: 1px solid var(--store-border);
    list-style: none;
}

.pv-tabs__item {
    display: inline-flex;
    align-items: center;
    min-height: var(--pv-tap);
    border-bottom: 2px solid transparent;
    color: var(--store-text-muted);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-decoration: none;
    text-transform: uppercase;
}

a.pv-tabs__item:hover {
    color: var(--store-text);
    border-bottom-color: var(--store-border);
}

.pv-tabs__item[aria-current] {
    border-bottom-color: var(--store-accent);
    color: var(--store-text);
}

/* ---------------------------------------------------------------------
   17. Perguntas frequentes sem JS (`<details>` nativo)
   --------------------------------------------------------------------- */

.pv-faq {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pv-faq__item {
    border: 1px solid var(--store-border);
    border-radius: var(--store-radius-sm);
    background-color: var(--store-surface);
}

.pv-faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 56px;
    padding: 14px 18px;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.pv-faq__q::-webkit-details-marker {
    display: none;
}

.pv-faq__q .bi {
    flex: 0 0 auto;
    color: var(--pv-eyebrow);
    transition: transform 0.2s ease;
}

.pv-faq__item[open] .pv-faq__q .bi {
    transform: rotate(45deg);
}

.pv-faq__a {
    margin: 0;
    padding: 0 18px 18px;
    color: var(--store-text-muted);
    font-size: 0.9rem;
}

/* ---------------------------------------------------------------------
   18. Etapas com apoio (patty/romano mostram sub-rótulo sob o número)
   --------------------------------------------------------------------- */

.pv-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 28px;
    margin: 0 0 34px;
    padding: 0;
    list-style: none;
}

.pv-steps__item {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--store-text-muted);
}

.pv-steps__index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border: 1px solid var(--store-border);
    border-radius: 999px;
    background-color: var(--store-surface);
    font-size: 0.86rem;
    font-weight: 700;
}

.pv-steps__text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.pv-steps__label {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.pv-steps__note {
    font-size: 0.76rem;
}

.pv-steps__item[aria-current] {
    color: var(--store-text);
}

.pv-steps__item[aria-current] .pv-steps__index {
    background-color: var(--store-primary);
    border-color: var(--store-primary);
    color: var(--store-primary-contrast);
}

.pv-steps__item.is-done .pv-steps__index {
    border-color: var(--store-success);
    color: var(--store-success);
}

/* ---------------------------------------------------------------------
   19. Grade de formulário e cartões de escolha (radio)
   --------------------------------------------------------------------- */

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

.pv-form-grid > .pv-form-grid__full {
    grid-column: 1 / -1;
}

.pv-form-grid--spaced {
    margin-top: 18px;
}

@media (max-width: 720px) {
    .pv-form-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.pv-radio-cards {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pv-radio-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pv-radio-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 720px) {
    .pv-radio-cards--2,
    .pv-radio-cards--3 { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------------
   20. Comparativo de economia (romano: "COMPARE E VEJA A ECONOMIA")
   --------------------------------------------------------------------- */

.pv-compare {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
}

.pv-compare__panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 24px;
    border: 1px solid var(--store-border);
    border-radius: var(--store-radius);
    background-color: var(--store-surface);
}

.pv-compare__panel--best {
    border-color: var(--store-primary);
    border-width: 2px;
}

.pv-compare__panel--saving {
    background-color: var(--store-secondary);
    color: var(--store-text);
    border-color: var(--store-secondary);
}

.pv-compare__title {
    margin: 0;
    font-family: var(--store-font-display);
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.pv-compare__lines {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.88rem;
}

.pv-compare__lines li {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 7px 0;
    border-bottom: 1px solid var(--store-border);
}

.pv-compare__lines li:last-child {
    border-bottom: 0;
}

.pv-compare__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    margin: auto 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--store-border);
    font-family: var(--store-font-display);
    font-size: 1.2rem;
    font-weight: 900;
}

.pv-compare__panel--best .pv-compare__total {
    color: var(--store-primary);
}

.pv-compare__panel--saving .pv-compare__total,
.pv-compare__panel--saving .pv-compare__title {
    color: var(--store-primary-contrast);
}

@media (max-width: 1080px) {
    .pv-compare {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------------------------------------------------------------------
   21. Folha de identidade da marca (romano, mockup 12_17_20 (1))
       O valor de cada amostra sai do TOKEN, nunca de um hex escrito à mão:
       a folha não pode divergir da paleta que o registro injeta.
   --------------------------------------------------------------------- */

.pv-logo-set {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pv-logo-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pv-logo-card__caption {
    color: var(--store-text-muted);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.pv-logo-card__art {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    aspect-ratio: 4 / 3;
    padding: 20px;
    border: 1px solid var(--store-border);
    border-radius: var(--store-radius);
    background-color: var(--store-surface);
    text-align: center;
}

.pv-logo-card__art--dark {
    background-color: var(--store-bg);
}

.pv-logo-card__art--light {
    background-color: var(--store-text);
}

.pv-logo-card__word {
    font-family: var(--store-font-display);
    font-size: 1.1rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.pv-logo-card__art--dark .pv-logo-card__word {
    color: var(--store-primary);
}

.pv-logo-card__art--light .pv-logo-card__word {
    color: var(--store-bg);
}

.pv-logo-card__sub {
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
}

.pv-logo-card__art--light .pv-logo-card__sub {
    color: color-mix(in srgb, var(--store-bg) 70%, transparent);
}

.pv-logo-card__art--dark .pv-logo-card__sub {
    color: var(--store-accent);
}

.pv-swatch-set {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pv-swatch-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    border: 1px solid var(--store-border);
    border-radius: var(--store-radius-sm);
    background-color: var(--store-surface);
}

.pv-swatch-card__chip {
    display: block;
    height: 56px;
    border: 1px solid var(--store-border);
    border-radius: var(--store-radius-sm);
}

.pv-swatch-card__name {
    font-size: 0.86rem;
    font-weight: 700;
}

.pv-swatch-card__token {
    color: var(--store-text-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.7rem;
    word-break: break-all;
}

.pv-swatch-card__role {
    color: var(--store-text-muted);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.pv-specimen {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 24px;
    padding: 24px;
    border: 1px solid var(--store-border);
    border-radius: var(--store-radius);
    background-color: var(--store-surface);
}

.pv-specimen__glyph {
    font-family: var(--store-font-display);
    font-size: 4rem;
    font-weight: 900;
    line-height: 1;
}

.pv-specimen__sample {
    margin: 0;
    font-family: var(--store-font-display);
    font-size: 1.1rem;
    font-weight: 900;
    line-height: 1.3;
    text-transform: uppercase;
}

.pv-specimen__meta {
    margin: 4px 0 0;
    color: var(--store-text-muted);
    font-size: 0.8rem;
}

.pv-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (max-width: 1080px) {
    .pv-logo-set { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pv-swatch-set { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
    .pv-logo-set { grid-template-columns: minmax(0, 1fr); }
    .pv-swatch-set { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------------
   22. Tela de acesso (romano: login) — cartão | painel de marca
   --------------------------------------------------------------------- */

.pv-auth {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 40px;
    align-items: center;
}

.pv-auth__card {
    padding: 32px;
    border: 1px solid var(--store-border);
    border-radius: var(--store-radius);
    background-color: var(--store-surface);
}

.pv-auth__brandline {
    margin: 0 0 18px;
    color: var(--store-text-muted);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    line-height: 1.6;
    text-transform: uppercase;
}

.pv-auth__title {
    margin: 0 0 6px;
    font-family: var(--store-font-display);
    font-size: 1.7rem;
    font-weight: 900;
}

.pv-auth__text {
    margin: 0 0 22px;
    color: var(--store-text-muted);
    font-size: 0.92rem;
}

.pv-auth__divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 20px 0;
    color: var(--store-text-muted);
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.pv-auth__divider::before,
.pv-auth__divider::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background-color: var(--store-border);
}

.pv-auth__foot {
    margin: 18px 0 0;
    color: var(--store-text-muted);
    font-size: 0.86rem;
}

.pv-auth__micro {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin: 26px 0 0;
    padding: 20px 0 0;
    border-top: 1px solid var(--store-border);
    list-style: none;
}

.pv-auth__micro li {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--store-text-muted);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1.5;
    text-transform: uppercase;
}

.pv-auth__micro .bi {
    color: var(--pv-eyebrow);
    font-size: 1.1rem;
}

@media (max-width: 1080px) {
    .pv-auth {
        grid-template-columns: minmax(0, 1fr);
        gap: 26px;
    }

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

@media (max-width: 620px) {
    .pv-auth__card {
        padding: 22px;
    }
}

/* ---------------------------------------------------------------------
   23. Selo de tela (índice das telas do mockup dentro da prévia)
   --------------------------------------------------------------------- */

.pv-screen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 14px 0;
    border-top: 2px solid var(--store-primary);
    color: var(--store-text-muted);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.pv-screen__index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    border-radius: 999px;
    background-color: var(--store-primary);
    color: var(--store-primary-contrast);
    font-size: 0.78rem;
    letter-spacing: 0.02em;
}

/* ---------------------------------------------------------------------
   24. Tira de marcas (romano: "ROMANO · TITÂNIO · CAST M · STEEL BOX ...")
       O mockup mostra nove ladrilhos separados por fio vertical, com o
       "VER TODAS AS MARCAS" à direita. Os nomes de terceiros do mockup NÃO
       entram: a prévia é pública e afirmar parceria com marca real seria
       inventar dado comercial. A composição é a mesma; o rótulo é de exemplo.
   --------------------------------------------------------------------- */

.pv-brands {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pv-brand {
    display: flex;
    flex: 1 1 118px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 74px;
    padding: 10px 14px;
    border-right: 1px solid var(--store-border);
    color: var(--store-text);
    text-align: center;
    text-decoration: none;
}

.pv-brand:last-child {
    border-right: 0;
}

.pv-brand .bi {
    color: var(--pv-eyebrow);
    font-size: 1.15rem;
}

.pv-brand__word {
    font-family: var(--store-font-display);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.pv-brand__sub {
    color: var(--store-text-muted);
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

@media (max-width: 900px) {
    .pv-brand {
        flex: 1 1 40%;
        border-bottom: 1px solid var(--store-border);
    }
}

/* ---------------------------------------------------------------------
   25. Fichas de filtro ativo com "×" e alternador de visão
       (romano, mockup 12_17_22 (4): "Zircônia ×  Aço Cirúrgico 316L × ...")
       Sem JS: o "×" é um `<a>` que volta à mesma tela sem a ficha. O
       alternador de visão é decorativo de propósito — está desabilitado,
       porque a prévia não troca de visão e um botão que não faz nada mente.
   --------------------------------------------------------------------- */

.pv-chip-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pv-chip__x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background-color: color-mix(in srgb, currentColor 18%, transparent);
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1;
}

.pv-viewtoggle {
    display: inline-flex;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pv-viewtoggle__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    border: 1px solid var(--store-border);
    border-radius: var(--store-radius-sm);
    background-color: var(--store-surface);
    color: var(--store-text-muted);
    cursor: not-allowed;
}

.pv-viewtoggle__btn--on {
    border-color: var(--store-primary);
    color: var(--store-primary);
}

/* ---------------------------------------------------------------------
   26. Cartão de kit (romano, mockup 12_17_23 (6), faixa "KITS ATACADO")
       Mídia cheia, selo sobre a imagem, título e apoio. Um degrau de
       densidade abaixo do card de produto: o kit se vende pela variedade,
       não pelo preço unitário.
   --------------------------------------------------------------------- */

.pv-kits {
    display: grid;
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.pv-kit {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--store-border);
    border-radius: var(--store-radius);
    background-color: var(--store-surface);
    overflow: hidden;
}

.pv-kit__media {
    position: relative;
    aspect-ratio: 1 / 1;
    background-color: var(--store-surface-alt);
    overflow: hidden;
}

.pv-kit__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pv-kit__badge {
    position: absolute;
    top: 10px;
    left: 10px;
    max-width: calc(100% - 20px);
}

.pv-kit__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 5px;
    padding: 14px;
}

.pv-kit__title {
    margin: 0;
    font-family: var(--store-font-display);
    font-size: 0.86rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.pv-kit__note {
    margin: 0;
    color: var(--store-text-muted);
    font-size: 0.78rem;
}

@media (max-width: 1280px) {
    .pv-kits { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
    .pv-kits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 420px) {
    .pv-kits { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------------
   27. Cartão de preço por kit (romano, mockup 12_17_23 (6), "Comprar Kit")
       "De R$ ... / Por apenas / R$ ... / Economize 40% / [Comprar Kit]".
   --------------------------------------------------------------------- */

.pv-plans {
    display: grid;
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pv-plan {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px;
    border: 1px solid var(--store-border);
    border-radius: var(--store-radius);
    background-color: var(--store-surface);
}

.pv-plan__qty {
    font-family: var(--store-font-display);
    font-size: 1.05rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.pv-plan__note {
    margin: 0;
    color: var(--store-text-muted);
    font-size: 0.8rem;
}

.pv-plan__was {
    margin: 6px 0 0;
    color: var(--store-text-muted);
    font-size: 0.82rem;
    text-decoration: line-through;
}

.pv-plan__now {
    margin: 0;
    font-family: var(--store-font-display);
    font-size: 1.9rem;
    font-weight: 900;
    line-height: 1.1;
}

.pv-plan__save {
    align-self: flex-start;
}

.pv-plan .ra-btn,
.pv-plan .pp-btn,
.pv-plan .nm-btn {
    margin-top: auto;
}

@media (max-width: 1080px) {
    .pv-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
    .pv-plans { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------------
   28. Prova social (romano, mockup 12_17_25 (9)): avatares + número +
       estrelas. Os avatares são os círculos de exemplo do `_placeholder`;
       o número de clientes do mockup NÃO entra (dado comercial inventado).
   --------------------------------------------------------------------- */

.pv-proof {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 24px 28px;
    border: 1px solid var(--store-border);
    border-radius: var(--store-radius);
    background-color: var(--store-surface-alt);
}

.pv-proof__group {
    display: flex;
    align-items: center;
    gap: 16px;
}

.pv-proof__avatars {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pv-proof__avatars li {
    width: 46px;
    height: 46px;
    border: 2px solid var(--store-surface-alt);
    border-radius: 999px;
    background-color: var(--store-surface);
    overflow: hidden;
}

.pv-proof__avatars li + li {
    margin-left: -14px;
}

.pv-proof__avatars img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pv-proof__count {
    font-family: var(--store-font-display);
    font-size: 1.6rem;
    font-weight: 900;
    line-height: 1;
}

.pv-proof__label {
    display: block;
    color: var(--store-text-muted);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    line-height: 1.5;
    text-transform: uppercase;
}

.pv-proof__side {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding-left: 24px;
    border-left: 1px solid var(--store-border);
}

.pv-proof__side p {
    margin: 0;
    color: var(--store-text-muted);
    font-size: 0.84rem;
}

@media (max-width: 720px) {
    .pv-proof__side {
        padding-left: 0;
        border-left: 0;
    }
}

/* ---------------------------------------------------------------------
   29. Barra de frete grátis (romano, mockup 12_17_24 (7)) e linha de
       estoque (mockup 12_17_22 (5): "Em estoque / 1.248 unidades").
   --------------------------------------------------------------------- */

.pv-shipbar {
    padding: 14px 16px;
    border-radius: var(--store-radius);
    background-color: var(--store-secondary);
    color: var(--store-text);
}

.pv-shipbar__top {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    font-size: 0.84rem;
}

.pv-shipbar__label {
    font-weight: 700;
}

.pv-shipbar__track {
    height: 6px;
    margin-top: 10px;
    border-radius: 999px;
    background-color: color-mix(in srgb, var(--store-text) 22%, transparent);
    overflow: hidden;
}

.pv-shipbar__fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background-color: var(--store-primary);
}

.pv-stock {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--store-success);
    font-size: 0.86rem;
    font-weight: 700;
}

.pv-stock__units {
    color: var(--store-text-muted);
    font-size: 0.8rem;
    font-weight: 400;
}

/* ---------------------------------------------------------------------
   30. Variação escolhida em lista (romano, mockup 12_17_24 (7):
       "Cor: Dourado / Espessura: 1,2mm / ...") e ações da linha do carrinho.
   --------------------------------------------------------------------- */

.pv-lines {
    display: grid;
    gap: 3px;
    margin: 8px 0 0;
    color: var(--store-text-muted);
    font-size: 0.8rem;
}

.pv-lines__row {
    display: flex;
    gap: 6px;
}

.pv-lines__key {
    min-width: 86px;
    color: var(--store-text-muted);
}

.pv-lines__val {
    color: var(--store-text);
}

.pv-row-actions {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pv-row-actions button,
.pv-row-actions a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    padding: 0 8px;
    border: 0;
    border-radius: var(--store-radius-sm);
    background-color: transparent;
    color: var(--store-text-muted);
    font: inherit;
    font-size: 0.78rem;
    text-decoration: none;
    cursor: pointer;
}

.pv-row-actions button:hover,
.pv-row-actions a:hover {
    background-color: var(--store-surface-alt);
    color: var(--store-text);
}

.pv-row-actions .bi {
    color: var(--pv-eyebrow);
}

/* ---------------------------------------------------------------------
   31. Tira de confiança com duas linhas (romano, mockup 12_17_25 (8):
       "Compra segura / Dados criptografados") e cartão de ajuda.
   --------------------------------------------------------------------- */

.pv-trust-row {
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pv-trust-row li {
    display: flex;
    gap: 10px;
    color: var(--store-text);
    font-size: 0.84rem;
}

.pv-trust-row .bi {
    flex: 0 0 auto;
    margin-top: 2px;
    color: var(--pv-eyebrow);
    font-size: 1.05rem;
}

.pv-trust-row strong {
    display: block;
    font-weight: 700;
}

.pv-trust-row span {
    color: var(--store-text-muted);
    font-size: 0.78rem;
}

.pv-help {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px;
    border: 1px solid var(--store-border);
    border-radius: var(--store-radius);
    background-color: var(--store-surface);
}

.pv-help__head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pv-help__head .bi {
    color: var(--store-success);
    font-size: 1.3rem;
}

.pv-help__title {
    margin: 0;
    font-family: var(--store-font-display);
    font-size: 0.92rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.pv-help__text {
    margin: 0;
    color: var(--store-text-muted);
    font-size: 0.84rem;
}

@media (max-width: 720px) {
    .pv-trust-row { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------------
   32. Ladrilho de 7 colunas (romano: "COMPRE POR REGIÃO DO CORPO")
       O mockup põe as sete regiões numa linha só. Abaixo de 1280 cai para
       4 e depois 2, em vez de espremer o rótulo até ficar ilegível.
   --------------------------------------------------------------------- */

.pv-tiles--7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }

@media (max-width: 1280px) {
    .pv-tiles--7 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .pv-tiles--7 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 420px) {
    .pv-tiles--7 { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------------
   33. Movimento reduzido
   --------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .pv-tile .pv-media,
    .pv-faq__q .bi {
        transition-duration: 0.001ms !important;
    }
}