/* ============================================================
   site_v4.css
   ------------------------------------------------------------
   Estilos principais do site v4. Layout/cores/tipografia.
   As animações ficam em `site_v4_animacoes.css`.

   A cor primária do tema vem das variáveis CSS injetadas pelo
   includes/tema.php (--tema-primaria, --tema-primaria-rgb,
   --tema-secundaria etc.), permitindo trocar pelo painel admin.
   ============================================================ */

/* ============================================================
   VARIÁVEIS LOCAIS DO V4
   ------------------------------------------------------------
   Mantemos uma camada de aliases para isolar este tema.
   Se --tema-primaria não existir, caímos no azul padrão.
   ============================================================ */
:root {
    --v4-bg:             hsl(0, 0%, 97%);
    --v4-card:           #ffffff;
    --v4-foreground:     hsl(0, 0%, 12%);
    --v4-muted:          hsl(0, 0%, 95%);
    --v4-muted-fg:       hsl(0, 0%, 45%);
    --v4-border:         hsl(0, 0%, 90%);
    --v4-destructive:    #dc2626;

    /* Aliases dinâmicos (usam o tema do painel) */
    --v4-primary:        var(--tema-primaria, #114d85);
    --v4-primary-rgb:    var(--tema-primaria-rgb, 17, 77, 133);
    --v4-secondary:      var(--tema-secundaria, #0d3d6a);
    --v4-primary-fg:     #ffffff;

    /* Gradiente primário (usado em header top, botões etc.) */
    --v4-gradient: linear-gradient(135deg,
                    rgba(var(--v4-primary-rgb), 1),
                    rgba(var(--v4-primary-rgb), 0.78));

    /* Sombras */
    --v4-shadow-card:     0 2px 16px -4px rgba(0, 0, 0, 0.06);
    --v4-shadow-elevated: 0 8px 30px -8px rgba(0, 0, 0, 0.18);

    /* Raio padrão */
    --v4-radius: 0.75rem;
}

/* ============================================================
   RESET E BASE
   ============================================================ */
*, *::before, *::after {
    box-sizing: border-box;
}
.v4-body {
    margin: 0;
    background: var(--v4-bg);
    color: var(--v4-foreground);
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
.v4-body h1, .v4-body h2, .v4-body h3, .v4-body h4, .v4-body h5 {
    font-family: 'Outfit', sans-serif;
    line-height: 1.2;
    margin: 0;
}
.v4-body a {
    text-decoration: none;
    color: inherit;
}
.v4-body img { max-width: 100%; display: block; }
/* Reset de botões sem classe específica.
   Usamos :where() para zerar a especificidade desta regra (0,0,0) e
   evitar que ela sobrescreva o background/cor dos botões nomeados
   (.v4-btn-adicionar, .v4-btn-finalizar, .v4-btn-detalhe-adicionar etc.). */
:where(.v4-body button) {
    border: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
    color: inherit;
    padding: 0;
}

/* Container responsivo (mesmo padrão do projeto referência) */
.v4-container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Scrollbar invisível (categorias) */
.v4-scrollbar-hide::-webkit-scrollbar { display: none; }
.v4-scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* ============================================================
   HEADER
   ============================================================ */
.v4-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--v4-card);
    box-shadow: var(--v4-shadow-card);
}

/* Faixa superior (gradiente cor primária) */
.v4-header-top {
    background: var(--v4-gradient);
    padding: 0.5rem 0;
    color: var(--v4-primary-fg);
}
.v4-header-top .v4-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.v4-header-top-text {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 500;
}
.v4-header-top-text i { font-size: 0.75rem; }

/* Link "Entrar / Cadastrar" na faixa superior */
.v4-header-user-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    transition: opacity 0.2s ease;
}
.v4-header-user-link:hover { opacity: 0.85; color: #fff; }
.v4-header-user-link i { font-size: 0.75rem; }

/* Badge de status da loja */
.v4-loja-status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.65rem;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}
.v4-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
}
.v4-loja-fechado .v4-status-dot { background: #f87171; }

/* Linha principal do header */
.v4-header-main {
    padding: 0.75rem 0;
}
.v4-header-main .v4-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

/* Logo */
.v4-header-logo {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
    flex-shrink: 0;
}
.v4-header-logo-img {
    height: 2.6rem;
    width: auto;
    object-fit: contain;
    border-radius: 4px;
}
.v4-header-logo h1 {
    font-size: 1rem;
    font-weight: 900;
}
.v4-marca {
    color: var(--v4-primary);
    display: block;
}
.v4-submarca {
    display: block;
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--v4-muted-fg);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    max-width: 220px;
}

/* Busca desktop */
.v4-header-busca {
    flex: 1;
    max-width: 32rem;
    margin: 0 1rem;
    display: none;
}
.v4-busca-wrapper {
    position: relative;
    width: 100%;
}
.v4-busca-icone {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--v4-muted-fg);
    pointer-events: none;
}
.v4-campo-busca {
    width: 100%;
    padding: 0.625rem 1rem 0.625rem 2.5rem;
    border: 1px solid var(--v4-border);
    border-radius: 0.5rem;
    background: var(--v4-bg);
    color: var(--v4-foreground);
    font-size: 0.875rem;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    font-family: inherit;
}
.v4-campo-busca:focus {
    border-color: var(--v4-primary);
    box-shadow: 0 0 0 2px rgba(var(--v4-primary-rgb), 0.2);
}

/* Ícones (carrinho/instagram) */
.v4-header-acoes {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.v4-btn-icone {
    position: relative;
    padding: 0.5rem;
    border-radius: 0.5rem;
    color: var(--v4-foreground);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease;
}
.v4-btn-icone i { font-size: 1.35rem; }
.v4-btn-icone:hover { background: var(--v4-muted); }
.v4-btn-icone.v4-btn-instagram:hover { color: #e91e63; }
/* Carrinho: mesmo padrão de hover do Instagram, mas com a cor primária do tema */
.v4-btn-icone[href*="carrinho"]:hover { color: var(--v4-primary); }

/* Badge do carrinho */
.v4-badge-carrinho {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--v4-primary);
    color: var(--v4-primary-fg);
    font-size: 0.65rem;
    font-weight: 700;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Busca mobile (abaixo do header) */
.v4-header-busca-mobile {
    padding: 0 1rem 0.75rem;
    display: block;
}

/* ============================================================
   HERO BANNER (rotativo com fade)
   ------------------------------------------------------------
   Enquadramento igual ao site original:
   - Centralizado no container (max-width 1280px)
   - Cantos arredondados
   - Altura máxima limitada (mobile 200px, desktop 400px)
   - Fica abaixo do header (que é sticky), some ao rolar
   ============================================================ */
.v4-hero {
    width: 100%;
    max-width: 1280px;
    margin: 1.5rem auto 0;
    padding: 0 1rem;
    box-sizing: border-box;
}
.v4-hero-stage {
    position: relative;
    width: 100%;
    height: 200px;          /* altura mobile (igual à do projeto referência) */
    overflow: hidden;
    border-radius: 0.75rem; /* cantos arredondados */
    background: #f3f4f6;
}
/* Imagem do slide (preserva o enquadramento do arquivo original) */
.v4-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;       /* preenche sem distorcer (igual ao original) */
    object-position: center;
    display: block;
}
/* Overlay padrão (com gradiente escuro da cor primária) — usado
   quando o admin marcou "sombra_banner" = 1 para o banner. */
.v4-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right,
        rgba(var(--v4-primary-rgb), 0.82),
        rgba(var(--v4-primary-rgb), 0.25));
    display: flex;
    align-items: center;
    z-index: 2;
}
/* Sem sombra: imagem com cores originais. Mantém o texto legível
   adicionando uma sombra no próprio texto (text-shadow). */
.v4-hero-overlay.v4-hero-overlay-sem-sombra {
    background: transparent;
}
.v4-hero-overlay.v4-hero-overlay-sem-sombra .v4-hero-content h2,
.v4-hero-overlay.v4-hero-overlay-sem-sombra .v4-hero-content p {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
}
.v4-hero-content {
    max-width: 32rem;
    color: #fff;
    padding: 1rem 0;
}
.v4-hero-content h2 {
    font-size: 1.75rem;
    font-weight: 900;
    margin-bottom: 0.5rem;
}
.v4-hero-content p {
    font-size: 1rem;
    margin: 0;
    opacity: 0.92;
}

/* Dots do hero */
.v4-hero-dots {
    position: absolute;
    bottom: 14px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 6px;
    z-index: 2;
}
.v4-hero-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    border: none;
    padding: 0;
}
.v4-hero-dot.active {
    background: #fff;
    width: 24px;
    border-radius: 999px;
}

/* ============================================================
   CATEGORIAS — SELECT PREMIUM (com subcategorias aninhadas)
   No mobile o select ocupa a largura total; no desktop mantém
   uma largura máxima confortável (420px).
   ============================================================ */
.v4-categorias-section {
    padding: 1.5rem 0 1rem;
}
@media (max-width: 767px) {
    .v4-cat-select { max-width: none; width: 100%; }
}
.v4-categorias-section h3 {
    font-size: 1.2rem;
    font-weight: 900;
    margin-bottom: 0.8rem;
}

/* Container do select */
.v4-cat-select {
    position: relative;
    width: 100%;
    max-width: 420px;
}

/* Botão principal (campo "fechado") */
.v4-cat-select-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    background-color: #ffffff;
    border: 1px solid var(--v4-border);
    border-radius: 0.85rem;
    box-shadow: 0 4px 14px -8px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--v4-foreground);
    text-align: left;
    transition: border-color 0.2s ease, box-shadow 0.2s ease,
                background-color 0.2s ease;
}
.v4-cat-select-btn:hover {
    border-color: rgba(var(--v4-primary-rgb), 0.45);
    box-shadow: 0 6px 18px -10px rgba(var(--v4-primary-rgb), 0.35);
}
.v4-cat-select.is-open .v4-cat-select-btn {
    border-color: var(--v4-primary);
    box-shadow: 0 0 0 3px rgba(var(--v4-primary-rgb), 0.14);
}
.v4-cat-select-icone {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 0.6rem;
    background: linear-gradient(135deg,
                rgba(var(--v4-primary-rgb), 1),
                rgba(var(--v4-primary-rgb), 0.78));
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    flex-shrink: 0;
    box-shadow: 0 4px 10px -4px rgba(var(--v4-primary-rgb), 0.5);
}
.v4-cat-select-label {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.v4-cat-select-chevron {
    color: var(--v4-muted-fg);
    font-size: 0.75rem;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}
.v4-cat-select.is-open .v4-cat-select-chevron {
    transform: rotate(180deg);
    color: var(--v4-primary);
}

/* Dropdown */
.v4-cat-select-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    right: 0;
    background-color: #ffffff;
    border: 1px solid var(--v4-border);
    border-radius: 0.85rem;
    box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.18);
    max-height: 360px;
    overflow-y: auto;
    padding: 0.4rem;
    z-index: 50;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}
.v4-cat-select.is-open .v4-cat-select-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Custom scrollbar para Webkit */
.v4-cat-select-dropdown::-webkit-scrollbar { width: 6px; }
.v4-cat-select-dropdown::-webkit-scrollbar-thumb {
    background: rgba(var(--v4-primary-rgb), 0.25);
    border-radius: 999px;
}

/* Opções */
.v4-cat-option {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.65rem 0.8rem;
    background-color: transparent;
    border: none;
    border-radius: 0.6rem;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--v4-foreground);
    text-align: left;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.v4-cat-option:hover {
    background-color: rgba(var(--v4-primary-rgb), 0.08);
}
.v4-cat-option.is-active {
    background-color: rgba(var(--v4-primary-rgb), 1);
    color: #ffffff;
}
.v4-cat-option.is-active .v4-count { color: rgba(255, 255, 255, 0.85); }
.v4-cat-option-text {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.v4-cat-option-icon {
    font-size: 0.78rem;
    color: var(--v4-primary);
    width: 1rem;
    text-align: center;
    flex-shrink: 0;
}
.v4-cat-option.is-active .v4-cat-option-icon { color: #ffffff; }

/* Subcategorias aninhadas */
.v4-cat-option-sub {
    padding-left: 2rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--v4-muted-fg);
    position: relative;
}
.v4-cat-option-sub::before {
    content: '';
    position: absolute;
    left: 1.15rem;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(var(--v4-primary-rgb), 0.18);
}
.v4-cat-option-sub .v4-cat-option-icon {
    color: var(--v4-muted-fg);
    font-size: 0.7rem;
}
.v4-cat-option-sub.is-active {
    background-color: rgba(var(--v4-primary-rgb), 0.88);
    color: #ffffff;
}

.v4-cat-option .v4-count {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--v4-muted-fg);
    flex-shrink: 0;
}
.v4-cat-select-label .v4-count {
    font-size: 0.78rem;
    color: var(--v4-muted-fg);
    font-weight: 600;
    margin-left: 0.2rem;
}

/* ============================================================
   SEÇÃO DE PRODUTOS
   ============================================================ */
.v4-produtos-section {
    padding-bottom: 3rem;
}
.v4-produtos-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.1rem;
}
.v4-produtos-header h3 {
    font-size: 1.2rem;
    font-weight: 900;
}
.v4-contagem {
    font-size: 0.8rem;
    color: var(--v4-muted-fg);
}

/* Grid responsivo */
.v4-produtos-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

/* ============================================================
   CARD DE PRODUTO
   ============================================================ */
.v4-produto-card {
    background: var(--v4-card);
    border-radius: var(--v4-radius);
    box-shadow: var(--v4-shadow-card);
    border: 1px solid rgba(0, 0, 0, 0.05);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.v4-produto-card:hover {
    box-shadow: var(--v4-shadow-elevated);
}
.v4-produto-card.is-out {
    opacity: 0.78;
}

.v4-produto-img-link {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    background: var(--v4-muted);
}
.v4-produto-img-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Badges sobre a imagem */
.v4-produto-badge-marca {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    padding: 0.2rem 0.55rem;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.v4-produto-badge-promo {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: var(--v4-destructive);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 0.2rem 0.6rem;
    border-radius: 9999px;
}
.v4-produto-badge-out {
    position: absolute;
    bottom: 0.5rem;
    left: 0.5rem;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.2rem 0.55rem;
    border-radius: 6px;
    text-transform: uppercase;
}

/* Corpo do card */
.v4-produto-body {
    padding: 0.85rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.v4-produto-nome {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    height: 2.65rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.v4-produto-nome-link:hover .v4-produto-nome { color: var(--v4-primary); }

.v4-produto-footer { margin-top: auto; }

/* Preços */
.v4-produto-precos {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.65rem;
}
.v4-produto-preco {
    font-size: 1.3rem;
    font-weight: 900;
    color: var(--v4-primary);
    margin: 0;
}
.v4-produto-preco-antigo {
    font-size: 0.8rem;
    color: var(--v4-muted-fg);
    text-decoration: line-through;
}

/* Controle de quantidade */
.v4-qtd-wrapper {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.6rem;
}
.v4-qtd-controle {
    display: inline-flex;
    align-items: center;
    background: var(--v4-muted);
    border-radius: 0.5rem;
    padding: 0.2rem;
}
.v4-qtd-btn {
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 0.35rem;
    background-color: transparent;
    color: hsl(0, 0%, 12%);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: background-color 0.15s ease;
}
.v4-qtd-btn:hover:not(:disabled) { background-color: #ffffff; }
.v4-qtd-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.v4-qtd-valor {
    width: 2.25rem;
    text-align: center;
    font-weight: 700;
    font-size: 0.875rem;
}

/* Botões de ação */
.v4-produto-acoes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}
.v4-btn-visualizar,
.v4-btn-adicionar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.55rem 0.6rem;
    border: none;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.78rem;
    cursor: pointer;
    line-height: 1.2;
    transition: opacity 0.2s ease, background-color 0.2s ease;
}
.v4-btn-visualizar {
    background-color: hsl(0, 0%, 95%);
    color: hsl(0, 0%, 12%);
}
.v4-btn-visualizar:hover { background-color: hsl(0, 0%, 90%); }
.v4-btn-adicionar {
    background-color: rgba(var(--v4-primary-rgb), 1);
    color: #ffffff;
}
.v4-btn-adicionar:hover {
    opacity: 0.92;
    color: #ffffff;
}
.v4-btn-adicionar i,
.v4-btn-visualizar i { font-size: 0.85rem; }

/* Alinha altura entre Visualizar e Adicionar */
.v4-produto-acoes { align-items: stretch; }
.v4-btn-visualizar,
.v4-btn-adicionar { min-height: 2.3rem; }

/* Mobile: botão "Visualizar" mostra apenas o ícone (mantém a mesma altura
   do botão Adicionar; reduz a largura para parecer um botão de ícone). */
@media (max-width: 767px) {
    .v4-produto-acoes {
        grid-template-columns: auto 1fr;
        gap: 0.45rem;
    }
    .v4-btn-visualizar {
        width: 2.3rem;
        padding: 0;
        gap: 0;
    }
    .v4-btn-visualizar-texto { display: none; }
    .v4-btn-visualizar i { font-size: 0.95rem; }
}

/* Vazio */
.v4-produtos-vazio {
    grid-column: 1 / -1;
    text-align: center;
    padding: 4.5rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}
.v4-vazio-icone {
    width: 5.5rem;
    height: 5.5rem;
    background: rgba(var(--v4-primary-rgb), 0.08);
    color: rgba(var(--v4-primary-rgb), 0.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
}
.v4-produtos-vazio h4 {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--v4-foreground);
}

/* ============================================================
   LOADING
   ============================================================ */
.v4-loading-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6rem 0;
    gap: 1rem;
}
.v4-spinner {
    position: relative;
    width: 3.25rem;
    height: 3.25rem;
}
.v4-spinner::before,
.v4-spinner::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid transparent;
}
.v4-spinner::before {
    border-top-color: var(--v4-primary);
    border-left-color: var(--v4-primary);
}
.v4-spinner::after {
    border-bottom-color: rgba(var(--v4-primary-rgb), 0.2);
    border-right-color: rgba(var(--v4-primary-rgb), 0.2);
}
.v4-loading-wrapper p {
    color: var(--v4-foreground);
    font-weight: 700;
    font-family: 'Outfit', sans-serif;
    margin: 0;
}

/* ============================================================
   PAGINAÇÃO
   ============================================================ */
.v4-paginacao {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 2rem;
}
.v4-paginacao-btn {
    padding: 0.5rem 0.95rem;
    border-radius: 0.5rem;
    border: 1px solid var(--v4-border);
    background: var(--v4-card);
    color: var(--v4-foreground);
    font-size: 0.85rem;
    font-weight: 500;
    min-width: 2.5rem;
}
.v4-paginacao-btn:hover:not(:disabled):not(.active) {
    background: var(--v4-muted);
}
.v4-paginacao-btn.active {
    background: var(--v4-primary);
    color: var(--v4-primary-fg);
    border-color: var(--v4-primary);
}
.v4-paginacao-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.v4-paginacao-dots {
    display: flex;
    align-items: center;
    padding: 0 0.4rem;
    color: var(--v4-muted-fg);
    font-weight: 700;
}

/* ============================================================
   RODAPÉ
   ============================================================ */
.v4-rodape {
    background: hsl(0, 0%, 12%);
    color: #fff;
    margin-top: 3rem;
}
.v4-rodape-conteudo {
    padding: 3rem 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}
.v4-rodape h4 {
    font-size: 1.05rem;
    font-weight: 900;
    margin-bottom: 0.75rem;
}
.v4-rodape h5 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.6rem;
}
.v4-rodape p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.88rem;
    margin: 0;
}
.v4-rodape-contato-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.88rem;
}
.v4-rodape-contato-item i {
    color: var(--v4-primary);
    font-size: 1rem;
    flex-shrink: 0;
    width: 18px;
    text-align: center;
}

.v4-rodape-instagram {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    color: var(--v4-primary);
    font-weight: 700;
    font-size: 0.85rem;
}
.v4-rodape-instagram-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: rgba(var(--v4-primary-rgb), 0.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.v4-rodape-instagram:hover { opacity: 0.85; }

.v4-rodape-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1rem 0;
    text-align: center;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.45);
}

/* ============================================================
   BOTÃO FLUTUANTE WHATSAPP
   ------------------------------------------------------------
   Mesmo posicionamento e comportamento do projeto original:
   - Float no canto inferior direito (fixed)
   - Tooltip "Precisa de Ajuda?" aparece no hover (fade-in)
   - Anel pulsante ao redor do botão chamando atenção
   - Hover: scale 1.1 com easing elástico (cubic-bezier)
   ============================================================ */
.v4-whatsapp-float {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    pointer-events: none;             /* só os filhos interceptam clique */
}
.v4-whatsapp-float * { pointer-events: auto; }

.v4-whatsapp-tooltip {
    background: var(--v4-card);
    color: var(--v4-foreground);
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    box-shadow: var(--v4-shadow-elevated);
    white-space: nowrap;
}

.v4-whatsapp-btn {
    position: relative;
    width: 3.5rem;
    height: 3.5rem;
    background: hsl(142, 70%, 45%);    /* mesmo verde do original */
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff !important;            /* força branco desde a primeira pintura */
    box-shadow: var(--v4-shadow-elevated);
    font-size: 1.75rem;
    /* Entrada com bounce ao montar a página */
    animation: v4WppBounceIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.v4-whatsapp-btn:hover,
.v4-whatsapp-btn:focus,
.v4-whatsapp-btn:active { color: #fff !important; }
/* Ícone explicitamente branco para não herdar cor de regras globais
   (ex.: .v4-body a { color: inherit; transition: color }). */
.v4-whatsapp-btn i { color: #fff !important; transition: none !important; }

/* Anel pulsante ao redor do botão (efeito "ping") */
.v4-whatsapp-ping {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: hsl(142, 70%, 45%);
    opacity: 0.65;
    z-index: -1;                       /* fica atrás do botão */
    animation: v4WppPing 1.8s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* ============================================================
   PÁGINA DE DETALHE DO PRODUTO
   ============================================================ */
.v4-produto-page {
    padding: 1.5rem 0 3rem;
}
.v4-voltar-wrap { margin-bottom: 1rem; }
.v4-btn-voltar,
.v4-carrinho-voltar {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--v4-muted-fg);
    font-weight: 600;
    font-size: 0.9rem;
}
.v4-btn-voltar:hover,
.v4-carrinho-voltar:hover { color: var(--v4-primary); }

.v4-produto-detalhe {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    background: var(--v4-card);
    border-radius: var(--v4-radius);
    padding: 1.25rem;
    box-shadow: var(--v4-shadow-card);
}

/* Galeria */
.v4-detalhe-galeria { width: 100%; }
.v4-detalhe-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: var(--v4-muted);
    border-radius: var(--v4-radius);
    overflow: hidden;
}
.v4-detalhe-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.v4-detalhe-img.active {
    position: relative;
    inset: auto;
}
.v4-detalhe-badge-promo {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: var(--v4-destructive);
    color: #fff;
    padding: 0.3rem 0.7rem;
    border-radius: 9999px;
    font-size: 0.8rem;
    font-weight: 800;
    z-index: 3;
}
.v4-detalhe-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
}
.v4-detalhe-prev { left: 0.75rem; }
.v4-detalhe-next { right: 0.75rem; }

.v4-detalhe-thumbs {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
    overflow-x: auto;
}
.v4-detalhe-thumb {
    flex-shrink: 0;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 0.5rem;
    overflow: hidden;
    border: 2px solid transparent;
    padding: 0;
    background: var(--v4-muted);
}
.v4-detalhe-thumb img { width: 100%; height: 100%; object-fit: cover; }
.v4-detalhe-thumb.active { border-color: var(--v4-primary); }

/* Info */
.v4-detalhe-info { display: flex; flex-direction: column; }
.v4-detalhe-categoria {
    display: inline-block;
    background: rgba(var(--v4-primary-rgb), 0.1);
    color: var(--v4-primary);
    padding: 0.2rem 0.6rem;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
    width: fit-content;
}
.v4-detalhe-nome {
    font-size: 1.6rem;
    font-weight: 900;
    margin-bottom: 0.25rem;
}
.v4-detalhe-codigo {
    font-size: 0.75rem;
    color: var(--v4-muted-fg);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 1rem;
    display: block;
}
.v4-detalhe-descricao {
    margin-bottom: 1.25rem;
}
.v4-detalhe-descricao h5 {
    font-size: 1rem;
    font-weight: 800;
    margin-bottom: 0.4rem;
}
.v4-detalhe-descricao p {
    color: var(--v4-muted-fg);
    line-height: 1.7;
    font-size: 0.93rem;
    margin: 0;
}

.v4-detalhe-preco-bloco {
    background: var(--v4-muted);
    border-radius: var(--v4-radius);
    padding: 1rem 1.1rem;
    border: 1px solid var(--v4-border);
    margin-bottom: 1.25rem;
}
.v4-detalhe-preco-label {
    font-size: 0.75rem;
    color: var(--v4-muted-fg);
    display: block;
    margin-bottom: 0.3rem;
}
.v4-detalhe-preco-row {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
}
.v4-detalhe-preco {
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--v4-primary);
}
.v4-detalhe-preco-old {
    font-size: 0.95rem;
    color: var(--v4-muted-fg);
    text-decoration: line-through;
}

.v4-detalhe-out {
    background: rgba(220, 38, 38, 0.08);
    color: var(--v4-destructive);
    padding: 0.7rem 1rem;
    border-radius: 0.6rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.v4-detalhe-encomenda {
    position: relative;
    padding: 1.05rem;
    margin-bottom: 1.25rem;
    border: 1px solid rgba(var(--v4-primary-rgb), 0.18);
    border-radius: 0.9rem;
    background:
        linear-gradient(135deg, rgba(var(--v4-primary-rgb), 0.10), rgba(37, 211, 102, 0.10)),
        #ffffff;
    box-shadow: 0 16px 35px -28px rgba(var(--v4-primary-rgb), 0.70);
}
.v4-detalhe-encomenda-content {
    min-width: 0;
}
.v4-detalhe-encomenda-label {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-bottom: 0.35rem;
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    background: rgba(37, 211, 102, 0.14);
    color: #128c4a;
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.v4-detalhe-encomenda strong {
    display: block;
    color: var(--v4-foreground);
    font-size: 1rem;
    line-height: 1.35;
    margin-bottom: 0.25rem;
}
.v4-detalhe-encomenda p {
    color: var(--v4-muted-fg);
    font-size: 0.9rem;
    line-height: 1.55;
    margin: 0 0 0.85rem;
}
.v4-detalhe-encomenda-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.72rem 1rem;
    border-radius: 0.75rem;
    background: #25d366;
    color: #ffffff !important;
    font-size: 0.9rem;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 12px 22px -14px rgba(18, 140, 74, 0.85);
    transition: transform 0.18s ease, filter 0.18s ease, box-shadow 0.18s ease;
}
.v4-detalhe-encomenda-btn:hover,
.v4-detalhe-encomenda-btn:focus {
    color: #ffffff !important;
    filter: brightness(1.03);
    transform: scale(1.04);
    box-shadow: 0 16px 26px -15px rgba(18, 140, 74, 0.95);
}
.v4-detalhe-encomenda-btn i {
    color: #ffffff;
    font-size: 1.05rem;
}

.v4-detalhe-qtd-wrap {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.v4-detalhe-qtd-label {
    color: var(--v4-muted-fg);
    font-size: 0.85rem;
}

.v4-btn-detalhe-adicionar {
    width: 100%;
    padding: 0.95rem 1.5rem;
    background-image: linear-gradient(135deg,
                        rgba(var(--v4-primary-rgb), 1),
                        rgba(var(--v4-primary-rgb), 0.78));
    background-color: rgba(var(--v4-primary-rgb), 1);
    color: #ffffff;
    border: none;
    outline: none;
    border-radius: 0.75rem;
    font-family: 'Outfit', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    box-shadow: 0 4px 15px -5px rgba(var(--v4-primary-rgb), 0.45);
    cursor: pointer;
    white-space: nowrap;
}
.v4-btn-detalhe-adicionar:hover {
    filter: brightness(1.05);
    color: #ffffff;
}
.v4-btn-detalhe-adicionar i {
    color: #ffffff;
    font-size: 1.05rem;
}
.v4-btn-detalhe-adicionar:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Produtos relacionados */
.v4-relacionados {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--v4-border);
}
.v4-relacionados h3 {
    font-size: 1.25rem;
    font-weight: 900;
    margin-bottom: 1rem;
}

/* ============================================================
   PÁGINA DO CARRINHO
   ============================================================ */
.v4-carrinho-page {
    padding: 1.5rem 0 4rem;
    min-height: 70vh;
}
.v4-carrinho-titulo {
    font-size: 1.75rem;
    font-weight: 900;
    margin: 1rem 0 1.5rem;
}

.v4-carrinho-vazio {
    text-align: center;
    padding: 4rem 1rem;
}
.v4-carrinho-vazio-icone {
    width: 5rem;
    height: 5rem;
    background: var(--v4-muted);
    border-radius: 50%;
    margin: 0 auto 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--v4-muted-fg);
}
.v4-carrinho-vazio h2 {
    font-size: 1.4rem;
    font-weight: 900;
    margin-bottom: 0.5rem;
}
.v4-carrinho-vazio p {
    color: var(--v4-muted-fg);
    margin-bottom: 1.5rem;
}
.v4-carrinho-vazio-btn {
    display: inline-block;
    background: var(--v4-primary);
    color: var(--v4-primary-fg);
    padding: 0.75rem 2rem;
    border-radius: 9999px;
    font-weight: 700;
    box-shadow: 0 4px 18px -4px rgba(var(--v4-primary-rgb), 0.4);
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.v4-carrinho-vazio-btn:hover {
    transform: scale(1.04);
    opacity: 0.94;
    color: var(--v4-primary-fg);
}

.v4-carrinho-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

.v4-carrinho-itens-col {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.v4-carrinho-loading {
    display: flex;
    justify-content: center;
    padding: 3rem 0;
}

/* Item do carrinho */
.v4-carrinho-item {
    background: var(--v4-card);
    border: 1px solid var(--v4-border);
    border-radius: var(--v4-radius);
    padding: 0.85rem;
    display: flex;
    gap: 0.85rem;
    align-items: center;
}
.v4-carrinho-item-img {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 0.6rem;
    overflow: hidden;
    background: var(--v4-muted);
    flex-shrink: 0;
}
.v4-carrinho-item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.v4-carrinho-item-info {
    flex: 1;
    min-width: 0;
}
.v4-carrinho-item-nome {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 0.2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.v4-carrinho-item-preco {
    font-size: 0.85rem;
    color: var(--v4-primary);
    font-weight: 800;
    margin-bottom: 0.5rem;
}
.v4-carrinho-item-acoes {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
}
.v4-carrinho-item-subtotal {
    font-size: 0.9rem;
    font-weight: 800;
}
.v4-carrinho-item-remover {
    width: 2.1rem;
    height: 2.1rem;
    border: none;
    border-radius: 0.5rem;
    color: hsl(0, 0%, 45%);
    background-color: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.v4-carrinho-item-remover:hover {
    color: #dc2626;
    background-color: rgba(220, 38, 38, 0.08);
}

/* Resumo */
.v4-carrinho-resumo-card {
    background: var(--v4-card);
    border: 1px solid var(--v4-border);
    border-radius: var(--v4-radius);
    padding: 1.25rem;
    box-shadow: var(--v4-shadow-card);
    position: sticky;
    top: 5rem;
}
.v4-carrinho-resumo-titulo {
    font-size: 1.05rem;
    font-weight: 800;
    margin-bottom: 1rem;
}
.v4-carrinho-obs label {
    display: block;
    font-size: 0.78rem;
    color: var(--v4-muted-fg);
    font-weight: 600;
    margin-bottom: 0.35rem;
}
.v4-carrinho-obs textarea {
    width: 100%;
    border: 1px solid var(--v4-border);
    border-radius: 0.5rem;
    padding: 0.55rem 0.75rem;
    font-size: 0.85rem;
    font-family: inherit;
    resize: vertical;
    outline: none;
}
.v4-carrinho-obs textarea:focus {
    border-color: var(--v4-primary);
    box-shadow: 0 0 0 2px rgba(var(--v4-primary-rgb), 0.18);
}

.v4-carrinho-divider {
    height: 1px;
    background: var(--v4-border);
    margin: 0.85rem 0;
}

.v4-carrinho-totais {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 1.25rem;
}
.v4-carrinho-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--v4-muted-fg);
    font-size: 0.88rem;
}
.v4-carrinho-total-row.v4-destaque {
    color: var(--v4-foreground);
    font-weight: 700;
    font-size: 1.05rem;
    margin-top: 0.3rem;
}
.v4-carrinho-total-preco {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--v4-primary);
}

.v4-btn-finalizar {
    width: 100%;
    padding: 0.85rem 1rem;
    background-color: #22c55e;
    background-image: linear-gradient(135deg, #22c55e, #16a34a);
    color: #ffffff;
    border: none;
    border-radius: 0.75rem;
    font-size: 0.95rem;
    font-weight: 900;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    box-shadow: 0 4px 18px -4px rgba(34, 197, 94, 0.5);
    transition: transform 0.2s ease, opacity 0.2s ease, filter 0.2s ease;
}
.v4-btn-finalizar:hover:not(:disabled) {
    transform: scale(1.02);
    filter: brightness(1.05);
    color: #ffffff;
}
.v4-btn-finalizar:disabled { opacity: 0.5; cursor: not-allowed; }
.v4-btn-finalizar i { font-size: 1.2rem; color: #ffffff; }

/* ============================================================
   SEÇÕES DO SITE (modelos 01–07) — mesma posição do v2
   ============================================================ */
.v4-secoes-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    margin-top: 2.5rem;
}
.v4-secao { padding: 0; }
.v4-secao-destaque { color: var(--v4-primary); }

/* Carrossel comum (modelos 06 e 07) -------------------- */
.v4-secao-nav {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background-color: #ffffff;
    color: var(--v4-foreground);
    border: 1px solid var(--v4-border);
    box-shadow: 0 4px 14px -4px rgba(0,0,0,0.15);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.v4-secao-nav:hover:not(:disabled) { transform: scale(1.05); }
.v4-secao-nav:disabled { opacity: 0.35; cursor: not-allowed; }
.v4-secao-track {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0.5rem;
    flex: 1;
    padding: 0.25rem;
    scrollbar-width: none;
}
.v4-secao-track::-webkit-scrollbar { display: none; }
.v4-secao-slide {
    flex: 0 0 calc(50% - 0.5rem);
    scroll-snap-align: start;
    min-width: 0;
}
@media (min-width: 768px) {
    .v4-secao-slide { flex: 0 0 calc(33.333% - 0.667rem); }
}
@media (min-width: 1024px) {
    .v4-secao-slide { flex: 0 0 calc(25% - 0.75rem); }
}

/* ============================================================
   MODELO 01 — Banner full + grid + CTA "Ver Todos"
   ============================================================ */
.v4-secao01-banner {
    position: relative;
    width: 100%;
    aspect-ratio: 21 / 7;
    max-height: 380px;
    overflow: hidden;
    background: var(--v4-muted);
}
.v4-secao01-banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.v4-secao01-banner-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.18);
}
.v4-secao01-banner-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0,0,0,0.55), rgba(0,0,0,0) 60%);
}
.v4-secao01-banner-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1.5rem;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
.v4-secao01-banner-topo {
    display: inline-block;
    align-self: flex-start;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: rgba(var(--v4-primary-rgb), 0.9);
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    margin-bottom: 0.7rem;
}
.v4-secao01-banner-titulo {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.4rem, 4vw, 2.4rem);
    font-weight: 900;
    line-height: 1.1;
    margin: 0;
    max-width: 55%;
}
.v4-secao01-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin: 1.5rem 0 1.25rem;
}
.v4-secao01-titulo {
    font-family: 'Outfit', sans-serif;
    font-size: 1.4rem;
    font-weight: 900;
    margin: 0 0 0.2rem;
}
.v4-secao01-descricao {
    color: var(--v4-muted-fg);
    font-size: 0.9rem;
    margin: 0;
}
.v4-secao01-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--v4-primary);
    font-weight: 700;
    font-size: 0.9rem;
    white-space: nowrap;
}
.v4-secao01-cta:hover { opacity: 0.8; color: var(--v4-primary); }

/* ============================================================
   MODELO 02 — Faixa escura centralizada + pílula + grid
   ============================================================ */
.v4-secao02 {
    background: linear-gradient(135deg, hsl(0, 0%, 10%), hsl(0, 0%, 18%));
    color: #fff;
    padding: 3rem 0;
}
.v4-secao02-header {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 2rem;
}
.v4-secao02-pill {
    display: inline-block;
    background: rgba(var(--v4-primary-rgb), 0.9);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    margin-bottom: 1rem;
}
.v4-secao02-titulo {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    font-weight: 900;
    margin: 0 0 0.75rem;
    color: #fff;
}
.v4-secao02 .v4-secao-destaque { color: rgba(var(--v4-primary-rgb), 1); }
.v4-secao02-descricao {
    color: rgba(255,255,255,0.72);
    margin: 0 0 1.25rem;
    font-size: 0.95rem;
}
.v4-secao02-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(var(--v4-primary-rgb), 1);
    color: #fff;
    padding: 0.7rem 1.4rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.9rem;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.v4-secao02-cta:hover { opacity: 0.9; transform: translateY(-2px); color: #fff; }

/* ============================================================
   MODELO 03 — Asymmetrical Split (sidebar + grid)
   ============================================================ */
.v4-secao03 { padding: 2rem 0; }
.v4-secao03-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
.v4-secao03-sidebar-inner {
    background: var(--v4-card);
    border: 1px solid var(--v4-border);
    border-radius: var(--v4-radius);
    padding: 1.5rem;
    box-shadow: var(--v4-shadow-card);
}
.v4-secao03-barra {
    width: 40px;
    height: 4px;
    background: var(--v4-primary);
    border-radius: 4px;
    margin-bottom: 1rem;
}
.v4-secao03-titulo {
    font-family: 'Outfit', sans-serif;
    font-size: 1.5rem;
    font-weight: 900;
    margin: 0 0 0.5rem;
}
.v4-secao03-descricao {
    color: var(--v4-muted-fg);
    font-size: 0.9rem;
    margin: 0 0 1rem;
}
.v4-secao03-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--v4-primary);
    font-weight: 700;
    font-size: 0.88rem;
}
.v4-secao03-cta-icon {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: rgba(var(--v4-primary-rgb), 0.12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
@media (min-width: 992px) {
    .v4-secao03-layout {
        grid-template-columns: 280px 1fr;
        align-items: start;
    }
    .v4-secao03-sidebar { position: sticky; top: 5rem; }
}
.v4-secao03-grid { grid-template-columns: repeat(2, 1fr); }

/* ============================================================
   MODELO 04 — Modern Staggered Layout (texto bg + grid)
   ============================================================ */
.v4-secao04 {
    position: relative;
    padding: 2.5rem 0;
    overflow: hidden;
}
.v4-secao04-bg-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0.045;
    z-index: 0;
}
.v4-secao04-bg-text span {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(5rem, 18vw, 14rem);
    font-weight: 900;
    color: var(--v4-foreground);
    white-space: nowrap;
}
.v4-secao04-content { position: relative; z-index: 1; }
.v4-secao04-header {
    text-align: center;
    margin-bottom: 2rem;
}
.v4-secao04-titulo {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    font-weight: 900;
    margin: 0 0 0.5rem;
    color: var(--v4-foreground);
}
.v4-secao04-barra {
    width: 60px;
    height: 4px;
    background: var(--v4-primary);
    border-radius: 4px;
    margin: 0 auto 0.75rem;
}
.v4-secao04-descricao {
    color: var(--v4-muted-fg);
    font-size: 0.95rem;
    max-width: 520px;
    margin: 0 auto;
}
.v4-secao04-grid {
    grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 1024px) {
    .v4-secao04-grid { grid-template-columns: repeat(4, 1fr); }
}
.v4-secao04-cell-deslocado { transform: translateY(2rem); }
.v4-secao04-rodape {
    text-align: center;
    margin-top: 2.5rem;
}
.v4-secao04-cta {
    display: inline-block;
    background-color: rgba(var(--v4-primary-rgb), 1);
    color: #fff;
    padding: 0.8rem 2rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.92rem;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.v4-secao04-cta:hover { opacity: 0.92; transform: translateY(-2px); color: #fff; }

/* ============================================================
   MODELO 05 — Editorial Split (50/50 imagem + texto)
   ============================================================ */
.v4-secao05-layout {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 360px;
}
@media (min-width: 992px) { .v4-secao05-layout { grid-template-columns: 1fr 1fr; } }
.v4-secao05-imagem {
    position: relative;
    min-height: 280px;
    overflow: hidden;
}
.v4-secao05-imagem img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.v4-secao05-imagem-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0,0,0,0.25), rgba(0,0,0,0));
}
.v4-secao05-conteudo {
    background: linear-gradient(135deg, rgba(var(--v4-primary-rgb), 1), rgba(var(--v4-primary-rgb), 0.78));
    color: #fff;
    display: flex;
    align-items: center;
    padding: 2.5rem;
}
.v4-secao05-conteudo-inner { max-width: 480px; }
.v4-secao05-pretitulo {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    background: rgba(255,255,255,0.18);
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    margin-bottom: 1rem;
}
.v4-secao05-titulo {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 900;
    line-height: 1.05;
    margin: 0 0 1rem;
    color: #fff;
}
.v4-secao05-titulo-fade {
    color: rgba(255,255,255,0.55);
    font-style: italic;
}
.v4-secao05-descricao {
    color: rgba(255,255,255,0.85);
    font-size: 0.95rem;
    margin: 0 0 1.5rem;
    line-height: 1.55;
}
.v4-secao05-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: #fff;
    color: var(--v4-primary);
    padding: 0.75rem 1.5rem;
    border-radius: 999px;
    font-weight: 800;
    font-size: 0.92rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.v4-secao05-cta:hover {
    color: var(--v4-primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px -6px rgba(0,0,0,0.25);
}
.v4-secao05-cta-icon {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: rgba(var(--v4-primary-rgb), 0.12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ============================================================
   MODELO 06 — Banner full + carrossel
   ============================================================ */
.v4-secao06-banner-box { margin-bottom: 1.5rem; }
.v4-secao06-banner {
    position: relative;
    display: block;
    width: 100%;
    border-radius: var(--v4-radius);
    overflow: hidden;
    box-shadow: var(--v4-shadow-card);
    background: var(--v4-muted);
}
.v4-secao06-banner-img {
    width: 100%;
    height: auto;
    max-height: 340px;
    object-fit: cover;
    display: block;
}
.v4-secao06-banner-texto {
    position: absolute;
    left: 1.5rem;
    bottom: 1.5rem;
    background: rgba(0,0,0,0.55);
    color: #fff;
    padding: 0.6rem 1.1rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.9rem;
    backdrop-filter: blur(8px);
}
.v4-secao06-carousel {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ============================================================
   MODELO 07 — Banner lateral + carrossel
   ============================================================ */
.v4-secao07-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    align-items: stretch;
}
@media (min-width: 992px) {
    .v4-secao07-layout { grid-template-columns: 320px 1fr; }
}
.v4-secao07-banner {
    display: block;
    border-radius: var(--v4-radius);
    overflow: hidden;
    box-shadow: var(--v4-shadow-card);
    background: var(--v4-muted);
}
.v4-secao07-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.v4-secao07-carousel {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

@media (max-width: 767px) {
    .v4-secao01-banner { aspect-ratio: 16 / 9; }
    .v4-secao01-header { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
    .v4-secao05-conteudo { padding: 1.75rem 1.5rem; }
}

/* ============================================================
   RESPONSIVIDADE
   ============================================================ */
@media (min-width: 768px) {
    .v4-header-logo h1 { font-size: 1.2rem; }
    .v4-header-busca { display: flex; }
    .v4-header-busca-mobile { display: none; }
    .v4-hero-stage { height: 320px; }
    .v4-hero-content h2 { font-size: 2.5rem; }
    .v4-produtos-grid { grid-template-columns: repeat(3, 1fr); }
    .v4-rodape-conteudo { grid-template-columns: repeat(3, 1fr); }
    .v4-produto-detalhe { grid-template-columns: 1fr 1fr; padding: 2rem; }
    .v4-carrinho-grid { grid-template-columns: 1fr 360px; }
    .v4-carrinho-titulo { font-size: 2rem; }
    .v4-detalhe-nome { font-size: 2rem; }
}
@media (min-width: 1024px) {
    .v4-header-logo h1 { font-size: 1.35rem; }
    .v4-hero-stage { height: 400px; }
    .v4-produtos-grid { grid-template-columns: repeat(4, 1fr); }
    .v4-header-acoes { gap: 0.5rem; }
    .v4-carrinho-grid { grid-template-columns: 1fr 380px; }
}
@media (max-width: 480px) {
    .v4-produto-acoes { grid-template-columns: 1fr; }
    .v4-produto-nome { font-size: 0.95rem; height: 2.4rem; }
    .v4-produto-preco { font-size: 1.15rem; }
    .v4-detalhe-nome { font-size: 1.4rem; }
}