/*
 * Theme Name:  Conceito Store Child
 * Theme URI:   https://conceitostore.com
 * Description: Tema filho do Storefront — identidade visual inspirada na Brooksfield.
 *              Paleta, tipografia e componentes WooCommerce prontos para uso.
 * Author:      Conceito Store
 * Author URI:  https://conceitostore.com
 * Template:    storefront
 * Version:     3.16.1
 * License:     GNU General Public License v2 or later
 * Text Domain: brooksfield-child
 */

/* =============================================================================
   TOKENS DE DESIGN
   Ajuste estas variáveis para mudar toda a identidade visual do site.
   ============================================================================= */
:root {
    /* --- Paleta principal (Brooksfield: verde escuro + branco) ---
       Substitua --color-primary pela cor principal da sua marca */
    --color-primary:       #183029;   /* verde escuro — cor dominante */
    --color-primary-dark:  #0f1e18;   /* hover / estados ativos */
    --color-primary-light: #2a4d3c;   /* variação mais clara */
    --color-accent:        #c8a96e;   /* dourado/âmbar — use para destaques/sale */
    /* NOTA: o --color-accent tem só 2,24:1 sobre branco (mínimo legível para
       texto é 4,5:1). Ele serve como FUNDO de botão/badge, ou como texto
       sobre o verde escuro (6,26:1) — como nos títulos da seção de kits.
       Para texto dourado sobre fundo claro não há tom bom: já testamos, e o
       mais claro que passa (#927035) ficou escuro demais visualmente. */

    /* --- Neutros --- */
    --color-white:         #ffffff;
    --color-bg:            #ffffff;
    --color-bg-alt:        #f5f5f5;   /* footer, seções alternadas */
    --color-border:        #e5e5e5;
    --color-gray-light:    #efefef;
    --color-gray-mid:      #c4c4c4;
    --color-gray-dark:     #24282b;

    /* --- Texto --- */
    --color-text:          #183029;   /* mesmo que primary — texto principal */
    --color-text-muted:    #6b7b74;
    --color-text-on-dark:  #ffffff;

    /* --- Tipografia ---
       A Brooksfield usa Open Sans (corpo) + LatoWidde (títulos/nav, variante wide do Lato).
       Substitua pelas fontes da sua marca se necessário. */
    --font-body:           'Open Sans', 'Helvetica Neue', Arial, sans-serif;
    --font-heading:        'Lato', 'Open Sans', sans-serif;  /* LatoWidde via Google Fonts */

    --font-size-xs:        11px;
    --font-size-sm:        13px;
    --font-size-base:      14px;
    --font-size-md:        16px;
    --font-size-lg:        18px;
    --font-size-xl:        24px;
    --font-size-2xl:       32px;
    --font-size-3xl:       42px;

    --font-weight-regular:  400;
    --font-weight-medium:   500;
    --font-weight-semibold: 600;
    --font-weight-bold:     700;

    --line-height-body:    1.6;
    --line-height-heading: 1.2;
    --letter-spacing-nav:  1.5px;
    --letter-spacing-wide: 2px;

    /* --- Espaçamentos (base 8px) --- */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;
    /* --space-14 estava faltando aqui: .reviews-section e .hp-products-section
       usavam var(--space-14) pro padding vertical, mas como o token nunca
       existiu, o navegador invalida o padding inteiro e ele vira 0 — as duas
       seções ficavam coladas nas vizinhas (as bolinhas do carrossel de
       avaliações pareciam "cortadas" por isso, não por overflow). */
    --space-14: 56px;
    --space-16: 64px;

    /* --- Bordas e sombras --- */
    --border-radius-sm:  2px;   /* botões (mínimo, estilo elegante) */
    --border-radius-md:  4px;
    --border-radius-lg:  8px;
    --border-color:      var(--color-border);

    --shadow-sm:  0 1px 3px rgba(0,0,0,.08);
    --shadow-md:  0 4px 16px rgba(0,0,0,.10);
    --shadow-lg:  0 8px 32px rgba(0,0,0,.14);

    /* --- Layout --- */
    --container-max:  1280px;
    --header-height:  76px;  /* logo + nav; ajuste conforme logo */
    --topbar-height:  32px;

    /* --- Transições --- */
    --transition-fast:   150ms ease;
    --transition-normal: 250ms ease;
}

/* =============================================================================
   RESET / BASE
   ============================================================================= */
*,
*::before,
*::after {
    box-sizing: border-box;
}

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

body {
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-body);
    color: var(--color-text);
    background-color: var(--color-bg);
    margin: 0;
    padding: 0;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-primary-dark);
}

/* =============================================================================
   TIPOGRAFIA
   ============================================================================= */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-heading);
    color: var(--color-text);
    margin: 0 0 var(--space-4);
    letter-spacing: 0.5px;
}

h1 { font-size: var(--font-size-3xl); }
h2 { font-size: var(--font-size-2xl); }
h3 { font-size: var(--font-size-xl); }
h4 { font-size: var(--font-size-lg); }
h5 { font-size: var(--font-size-md); }
h6 { font-size: var(--font-size-base); }

p {
    margin: 0 0 var(--space-4);
}

/* =============================================================================
   CONTAINER
   ============================================================================= */
.container,
.site-header .col-full,
.site-main .col-full,
.site-footer .col-full {
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-6);
    padding-right: var(--space-6);
    width: 100%;
}

/* =============================================================================
   TOPBAR — barra superior de aviso
   ============================================================================= */
.site-topbar {
    background-color: var(--color-primary);
    color: var(--color-text-on-dark);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    text-align: center;
    height: var(--topbar-height);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--space-6);
    position: relative;
    z-index: 100;
}

/* Substitua o texto do aviso no header.php */
.site-topbar a {
    color: var(--color-text-on-dark);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.site-topbar__close {
    position: absolute;
    right: var(--space-6);
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--color-text-on-dark);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    opacity: .7;
    padding: var(--space-1);
    transition: opacity var(--transition-fast);
}

.site-topbar__close:hover {
    opacity: 1;
}

/* =============================================================================
   HEADER PRINCIPAL
   ============================================================================= */
.site-header {
    background-color: var(--color-white);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 200;
    /* Zera o padding/margin em em que o Storefront aplica em .site-header
       (2.617924em / 4.235801em), que abrem um vão entre header e menu. */
    padding-top: 0;
    margin-bottom: 0;
    /* Se topbar não for sticky, remova position:sticky daqui */
}

/* O Storefront ainda aplica margin-bottom via .home.blog .site-header, que tem
   especificidade [0,3,0] e vence a regra acima. Igualamos a especificidade;
   como o style.css do filho carrega depois, esta vence no desempate. */
.home.blog .site-header,
.home.page .site-header {
    margin-bottom: 0;
}

/* =============================================================================
   NEUTRALIZAÇÃO DO STOREFRONT
   O tema filho reusa nomes de classe do pai e escreve espaçamento em px.
   O Storefront escreve em em (1.618em, 2.617924em...), que vazam como px
   quebrados. Zeramos onde o layout do filho já controla o espaçamento.
   ============================================================================= */
.site-main,
.content-area {
    margin-bottom: 0;
}

/* Storefront aplica margin-bottom nos <form>; nossos formulários já têm
   espaçamento próprio via os componentes que os envolvem. */
.newsletter-section__form,
.footer-newsletter,
.search-overlay form,
.mobile-menu form {
    margin-bottom: 0;
}

/* Linha de navegação — logo + ícones */
.site-header__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    height: var(--header-height);
    gap: var(--space-4);
}

/* Logo — centralizado via grid
   Substitua o conteúdo do logo em header.php */
.site-header__logo {
    grid-column: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.site-header__logo a {
    display: block;
    line-height: 1;
}

.site-header__logo img {
    /* Substitua a largura máxima conforme o tamanho do logotipo */
    max-height: 40px;
    width: auto;
}

/* Texto do logo quando não há imagem */
.site-header__logo-text {
    font-family: var(--font-heading);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    color: var(--color-primary);
}

/* Ícones à direita (busca, conta, favoritos, sacola) */
.site-header__icons {
    grid-column: 3;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-4);
}

.site-header__icons a,
.site-header__icons button {
    background: none;
    border: none;
    color: var(--color-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    position: relative;
    transition: color var(--transition-fast);
    text-decoration: none;
}

.site-header__icons a:hover,
.site-header__icons button:hover {
    color: var(--color-primary-dark);
}

.site-header__icons svg {
    width: 22px;
    height: 22px;
    stroke-width: 1.5;
}

/* Badge de quantidade no carrinho */
.cart-count {
    position: absolute;
    top: 2px;
    right: 2px;
    background-color: var(--color-accent);
    color: var(--color-white);
    font-size: 9px;
    font-weight: var(--font-weight-bold);
    min-width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Carrinho zerado: o elemento continua no HTML para o WooCommerce ter o que
   substituir na primeira adição, mas não aparece. */
.cart-count--empty {
    display: none;
}

/* Espaço à esquerda (mobile: hamburger) */
.site-header__left {
    grid-column: 1;
    display: flex;
    align-items: center;
}

/* =============================================================================
   NAVEGAÇÃO PRINCIPAL
   ============================================================================= */
.site-nav {
    background-color: var(--color-white);
    border-top: 1px solid var(--color-border);
}

.site-nav__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
}

.site-nav__menu {
    display: flex;
    align-items: stretch;
    list-style: none;
    margin: 0;
    padding: 0;
    height: 100%;
}

.site-nav__menu > li {
    display: flex;
    align-items: center;
    position: relative;
    height: 100%;
}

.site-nav__menu > li > a {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 var(--space-4);
    font-family: var(--font-heading);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-nav);
    text-transform: uppercase;
    color: var(--color-text);
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.site-nav__menu > li > a:hover,
.site-nav__menu > li.current-menu-item > a,
.site-nav__menu > li.current-menu-ancestor > a {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

/* Item especial "SALE" */
.site-nav__menu > li.sale-item > a,
.site-nav__menu > li.menu-item-sale > a {
    color: var(--color-accent);   /* dourado/vermelho para sale — ajuste conforme marca */
}

/* =============================================================================
   DROPDOWN — submenu mega menu
   ============================================================================= */
.site-nav__menu > li > ul,
.site-nav__menu > li .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-top: 2px solid var(--color-primary);
    box-shadow: var(--shadow-md);
    min-width: 200px;
    list-style: none;
    margin: 0;
    padding: var(--space-2) 0;
    z-index: 300;
}

.site-nav__menu > li:hover > ul,
.site-nav__menu > li:focus-within > ul {
    display: block;
}

.site-nav__menu > li > ul a,
.site-nav__menu .sub-menu a {
    display: block;
    padding: var(--space-2) var(--space-5);
    font-size: var(--font-size-sm);
    color: var(--color-text);
    transition: background-color var(--transition-fast), color var(--transition-fast);
    white-space: nowrap;
}

.site-nav__menu > li > ul a:hover,
.site-nav__menu .sub-menu a:hover {
    background-color: var(--color-bg-alt);
    color: var(--color-primary);
}

/* =============================================================================
   BOTÕES
   ============================================================================= */
.button,
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.woocommerce .button,
.woocommerce a.button {
    background-color: var(--color-primary);
    color: var(--color-text-on-dark);
    border: 2px solid var(--color-primary);
    border-radius: var(--border-radius-sm);
    font-family: var(--font-heading);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-nav);
    text-transform: uppercase;
    padding: var(--space-3) var(--space-8);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    transition:
        background-color var(--transition-fast),
        color var(--transition-fast),
        border-color var(--transition-fast);
    text-decoration: none;
    line-height: 1;
    min-height: 44px;
}

.button:hover,
button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
.woocommerce .button:hover,
.woocommerce a.button:hover {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: var(--color-text-on-dark);
}

/* -----------------------------------------------------------------------------
   BOTÕES SEM FUNDO — CORREÇÃO DO HOVER

   ARMADILHA: a regra logo acima pinta QUALQUER <button> de escuro no hover.
   Os botões que zeram o fundo (`background: none`) têm seletor mais
   específico, mas as regras :hover deles só declaravam `color`. E o que não é
   declarado não sobrescreve nada — então o fundo escuro global passava por
   cima, e abas, "Guia de tamanhos" e os ícones do cabeçalho viravam blocos
   pretos ao passar o mouse.

   Especificidade maior não basta: é preciso REDECLARAR a propriedade.
   Todo botão transparente novo precisa entrar nesta lista.
   ----------------------------------------------------------------------------- */
.product-tabs__btn:hover,
.product-tabs__btn:focus-visible,
.product-tabs__btn.is-active,
.product-form__size-guide:hover,
.product-form__size-guide:focus-visible,
.archive-toolbar__filter-btn:hover,
.archive-toolbar__filter-btn:focus-visible,
.site-topbar__close:hover,
.site-topbar__close:focus-visible,
.site-header__icons button:hover,
.site-header__icons button:focus-visible {
    background-color: transparent;
}

/* Botão secundário / outline */
.button--outline,
.woocommerce a.button.alt {
    background-color: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.button--outline:hover,
.woocommerce a.button.alt:hover {
    background-color: var(--color-primary);
    color: var(--color-text-on-dark);
}

/* =============================================================================
   WOOCOMMERCE — PRODUTOS
   ============================================================================= */

/* Grid de produtos */
.woocommerce ul.products {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
    list-style: none;
    margin: 0;
    padding: 0;
}

.woocommerce ul.products li.product {
    position: relative;
}

/* Imagem do produto */
.woocommerce ul.products li.product .woocommerce-loop-product__link img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    transition: transform var(--transition-normal);
}

.woocommerce ul.products li.product:hover img {
    transform: scale(1.03);
}

/* Overflow para o efeito de zoom */
.woocommerce ul.products li.product a:first-child {
    display: block;
    overflow: hidden;
}

/* Nome do produto */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.5px;
    margin: var(--space-3) 0 var(--space-1);
    color: var(--color-text);
}

/* Preço */
.woocommerce ul.products li.product .price {
    font-size: var(--font-size-sm);
    color: var(--color-text);
    font-weight: var(--font-weight-regular);
}

.woocommerce ul.products li.product .price del {
    color: var(--color-gray-mid);
    font-size: var(--font-size-xs);
}

.woocommerce ul.products li.product .price ins {
    text-decoration: none;
    font-weight: var(--font-weight-bold);
}

/* Badge de desconto / novidade */
.woocommerce ul.products li.product .onsale {
    background-color: var(--color-primary);
    color: var(--color-white);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--border-radius-sm);
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    z-index: 1;
}

/* Botão adicionar ao carrinho */
.woocommerce ul.products li.product .add_to_cart_button {
    width: 100%;
    margin-top: var(--space-3);
    font-size: var(--font-size-xs);
    padding: var(--space-2) var(--space-4);
}

/* =============================================================================
   WOOCOMMERCE — PÁGINA DO PRODUTO
   ============================================================================= */
.woocommerce div.product .product_title {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--space-4);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
    font-size: var(--font-size-xl);
    color: var(--color-primary);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--space-5);
}

/* Abas de produto */
.woocommerce div.product .woocommerce-tabs ul.tabs {
    border-bottom: 2px solid var(--color-border);
    padding: 0;
    margin-bottom: var(--space-6);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-nav);
    text-transform: uppercase;
    color: var(--color-text-muted);
    padding: var(--space-3) var(--space-5);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: var(--color-primary);
    border-bottom: 2px solid var(--color-primary);
}

/* =============================================================================
   WOOCOMMERCE — CARRINHO E CHECKOUT
   ============================================================================= */
.woocommerce table.shop_table {
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    overflow: hidden;
}

.woocommerce table.shop_table th {
    background-color: var(--color-bg-alt);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-nav);
    text-transform: uppercase;
    color: var(--color-text-muted);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

.woocommerce table.shop_table td {
    padding: var(--space-4);
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}

/* =============================================================================
   FORMULÁRIOS
   ============================================================================= */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
textarea,
select,
.woocommerce-Input {
    width: 100%;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    color: var(--color-text);
    background-color: var(--color-white);
    transition: border-color var(--transition-fast);
    min-height: 44px;
    outline: none;
}

/* =============================================================================
   16px NOS CAMPOS EM TELA PEQUENA — trava o zoom automático do iOS

   O Safari do iOS amplia a página inteira ao focar um campo cuja fonte é
   MENOR que 16px, e não desfaz depois: o site fica preso ampliado e boa
   parte das pessoas não sabe voltar. O Chrome no Android não faz isso, então
   o problema passa despercebido em teste.

   16px é o limiar exato do Safari — não é um número escolhido por estética.
   Abaixo disso o zoom volta.

   NÃO usar `user-scalable=no` no <meta viewport> como atalho: resolveria o
   sintoma, mas tiraria a pinça para ampliar do site inteiro, o que penaliza
   quem tem baixa visão. E o iOS moderno ignora essa instrução em vários
   casos, então nem seria confiável.

   O !important é deliberado: esta regra precisa vencer QUALQUER estilo de
   campo específico (como .product-shipping-sim__input, com 13px) e continuar
   valendo para campos que ainda serão criados. É correção de comportamento
   do navegador, não preferência visual — não deve ser derrubada por
   descuido.
   ============================================================================= */
@media ( max-width: 1024px ) {
    input[type="text"],
    input[type="email"],
    input[type="url"],
    input[type="password"],
    input[type="search"],
    input[type="number"],
    input[type="tel"],
    input[type="date"],
    textarea,
    select,
    .woocommerce-Input {
        font-size: 16px !important;
    }
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(24, 48, 41, 0.12);
}

label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-1);
    color: var(--color-text);
}

/* =============================================================================
   FOOTER
   ============================================================================= */
.site-footer {
    background-color: var(--color-bg-alt);
    border-top: 1px solid var(--color-border);
    padding: var(--space-12) 0 var(--space-6);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.site-footer a {
    color: var(--color-text);
    transition: color var(--transition-fast);
}

.site-footer a:hover {
    color: var(--color-primary);
}

.site-footer__widgets {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-8);
    margin-bottom: var(--space-10);
}

.site-footer__bottom {
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
}

/* =============================================================================
   NOTIFICAÇÕES WOOCOMMERCE
   ============================================================================= */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    border-radius: var(--border-radius-md);
    padding: var(--space-4) var(--space-5);
    font-size: var(--font-size-sm);
    border-left-width: 4px;
    border-left-style: solid;
    margin-bottom: var(--space-5);
}

.woocommerce-message {
    background-color: #edf7f0;
    border-color: #4caf50;
    color: #1e4d2b;
}

.woocommerce-info {
    background-color: #e8f4fd;
    border-color: #2196f3;
    color: #0d3a5c;
}

.woocommerce-error {
    background-color: #fdecea;
    border-color: #f44336;
    color: #5c1110;
}

/* Caixa dos avisos impressos pelo bf_avisos_woocommerce() (functions.php).
   Só existe no HTML quando há aviso, então a margem não sobra em página
   limpa. A margem inferior de cada aviso já vem da regra acima. */
.wc-avisos {
    padding-top: var(--space-6);
}

/* Dentro de um container o respiro de cima vira margem de baixo: ali o aviso
   fica entre o breadcrumb e o produto, e não no topo da página. */
.single-product-layout .wc-avisos {
    padding-top: 0;
}

/* =============================================================================
   BREADCRUMB
   ============================================================================= */
.woocommerce-breadcrumb {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    letter-spacing: 0.5px;
    margin-bottom: var(--space-6);
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--color-border);
}

.woocommerce-breadcrumb a {
    color: var(--color-text-muted);
}

.woocommerce-breadcrumb a:hover {
    color: var(--color-primary);
}

/* =============================================================================
   BUSCA
   ============================================================================= */
.search-form {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.search-form input[type="search"] {
    flex: 1;
}

/* Overlay de busca */
.search-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, .5);
    z-index: 500;
    align-items: flex-start;
    justify-content: center;
    padding-top: 120px;
}

.search-overlay.is-open {
    display: flex;
}

.search-overlay__box {
    background: var(--color-white);
    padding: var(--space-6);
    width: 100%;
    max-width: 640px;
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-lg);
}

.search-overlay__box input[type="search"] {
    font-size: var(--font-size-lg);
    border: none;
    border-bottom: 2px solid var(--color-primary);
    border-radius: 0;
    padding-left: 0;
}

/* =============================================================================
   HAMBURGER — MOBILE
   ============================================================================= */
.hamburger {
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-2);
    display: none;
    flex-direction: column;
    gap: 5px;
}

.hamburger__line {
    display: block;
    width: 24px;
    height: 1.5px;
    background-color: var(--color-primary);
    transition: transform var(--transition-normal), opacity var(--transition-normal);
}

/* O drawer mobile e seu overlay só existem no breakpoint mobile.
   Sem esta regra base eles caem no fluxo normal do documento no desktop. */
.mobile-menu,
.mobile-menu__overlay {
    display: none;
}

/* A regra global de <button> tem um :hover que pinta o fundo de verde escuro.
   Botões de ícone precisam anular isso, senão o hambúrguer vira um quadrado
   verde ao toque e o dot do carrossel muda de cor sem motivo. */
.hamburger:hover,
.hamburger:focus,
.mobile-menu__close:hover,
.mobile-menu__close:focus,
.carousel__dot:hover {
    background-color: transparent;
    border-color: transparent;
}

.carousel__dot:hover {
    background-color: var(--color-primary);
}

/* Botão de fechar do drawer. Sem regra própria ele herda a regra global de
   <button> e vira uma pílula verde de 88x48 com o X dentro. */
.mobile-menu__close {
    width: 44px;
    height: 44px;
    min-height: 0;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    color: var(--color-primary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mobile-menu__close svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

/* Interior do drawer. Nenhuma destas classes tinha regra no tema original,
   então o menu abria com marca, busca e links em texto corrido. */
.mobile-menu__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--space-5);
}

.mobile-menu__brand {
    font-family: var(--font-heading);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-heading);
    text-transform: uppercase;
    color: var(--color-primary);
}

.mobile-menu__search {
    margin-bottom: var(--space-5);
}

.mobile-menu__search form {
    display: flex;
    gap: var(--space-2);
}

.mobile-menu__search input[type="search"],
.mobile-menu__search input[type="text"] {
    flex: 1 1 auto;
    min-width: 0;
}

.mobile-menu__search button,
.mobile-menu__search input[type="submit"] {
    flex-shrink: 0;
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-xs);
}

.mobile-menu__list {
    list-style: none;
    margin: 0 0 var(--space-6);
    padding: 0;
}

.mobile-menu__list li {
    border-bottom: 1px solid var(--color-border);
}

.mobile-menu__list a {
    display: block;
    padding: var(--space-4) 0;
    font-family: var(--font-heading);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-nav);
    text-transform: uppercase;
    color: var(--color-primary);
    text-decoration: none;
}

.mobile-menu__list a:hover {
    color: var(--color-primary-light);
}

.mobile-menu__list .menu-item-sale a {
    color: var(--color-accent);
}

.mobile-menu__footer {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border);
}

.mobile-menu__footer a {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    text-decoration: none;
}

.mobile-menu__footer a:hover {
    color: var(--color-primary);
}

/* =============================================================================
   RESPONSIVO
   ============================================================================= */

/* Tablet */
@media (max-width: 1024px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(3, 1fr);
    }

    .site-footer__widgets {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile grande */
@media (max-width: 768px) {
    :root {
        --header-height: 64px;
        --topbar-height: 32px;
        --font-size-3xl: 28px;
        --font-size-2xl: 22px;
    }

    /* As colunas somavam mais que o container (hambúrguer 40 + logo 139 +
       ícones 208 + gaps 32 = 419 em 358 disponíveis), empurrando o ícone da
       sacola para fora da tela e criando scroll horizontal. minmax(0,1fr)
       permite que a coluna do logo encolha abaixo do próprio min-content. */
    .site-header__inner {
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: var(--space-2);
    }

    .site-header__logo {
        grid-column: 2;
        justify-content: center;
        min-width: 0;
    }

    .site-header__logo-text {
        font-size: 18px;
    }

    .site-header__icons {
        gap: var(--space-1);
    }

    /* Nav principal some no mobile */
    .site-nav {
        display: none;
    }

    /* Hamburger aparece */
    .hamburger {
        display: flex;
    }

    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-3);
    }

    .site-footer__widgets {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }

    .site-footer__bottom {
        flex-direction: column;
        text-align: center;
    }

    /* Menu mobile: drawer lateral (ative via JS) */
    .mobile-menu {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 85%;
        max-width: 320px;
        height: 100vh;
        background: var(--color-white);
        box-shadow: var(--shadow-lg);
        transform: translateX(-100%);
        transition: transform var(--transition-normal);
        z-index: 600;
        overflow-y: auto;
        padding: var(--space-6);
    }

    .mobile-menu.is-open {
        transform: translateX(0);
    }

    .mobile-menu__overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.5);
        z-index: 599;
    }

    .mobile-menu__overlay.is-open {
        display: block;
    }
}

/* Mobile pequeno */
@media (max-width: 480px) {
    :root {
        --space-6: 16px;
    }

    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-2);
    }
}

/* =============================================================================
   STOREFRONT — OVERRIDES
   Sobrescrevendo cores e fontes padrão do tema pai Storefront.
   ============================================================================= */

/* Remove o header padrão do Storefront para usar o nosso */
.storefront-handheld-footer-bar {
    background-color: var(--color-primary) !important;
}

.storefront-handheld-footer-bar ul li > a,
.storefront-handheld-footer-bar ul li > button {
    color: var(--color-white) !important;
}

/* Ajuste de cores nas estrelas de avaliação */
.star-rating span::before,
.woocommerce .star-rating span::before {
    color: var(--color-accent);
}

/* =============================================================================
   UTILITÁRIOS
   ============================================================================= */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

.text-center { text-align: center; }
.text-uppercase { text-transform: uppercase; letter-spacing: var(--letter-spacing-nav); }

/* =============================================================================
   HOMEPAGE — SEÇÕES GERAIS
   ============================================================================= */

/* Cabeçalho de seção (título + link "Ver todos") */
.section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: var(--space-8);
    gap: var(--space-4);
}

.section-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    margin: 0;
}

.section-header__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-nav);
    text-transform: uppercase;
    color: var(--color-text-muted);
    transition: color var(--transition-fast);
    white-space: nowrap;
}

.section-header__link:hover {
    color: var(--color-primary);
}

/* =============================================================================
   HERO BANNER
   ============================================================================= */
.hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;   /* texto alinhado à esquerda por padrão */
    min-height: 90vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

/* Overlay escuro sobre a imagem para legibilidade do texto
   Ajuste a opacidade (.4) conforme o contraste da imagem real */
.hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(0, 0, 0, 0.55) 0%,
        rgba(0, 0, 0, 0.20) 60%,
        rgba(0, 0, 0, 0.00) 100%
    );
    pointer-events: none;
}

.hero__content {
    position: relative;
    z-index: 1;
    max-width: var(--container-max);
    width: 100%;
    margin: 0 auto;
    padding: var(--space-16) var(--space-6);
    max-width: 560px;
    margin-left: calc( ( 100% - var(--container-max) ) / 2 + var(--space-6) );
}

.hero__eyebrow {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: var(--space-3);
}

.hero__title {
    font-size: clamp( 2.2rem, 5vw, 4rem );
    font-weight: var(--font-weight-bold);
    line-height: 1.05;
    color: var(--color-white);
    margin-bottom: var(--space-5);
    letter-spacing: 1px;
}

.hero__subtitle {
    font-size: var(--font-size-md);
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: var(--space-8);
    line-height: 1.5;
}

.hero__cta {
    background-color: var(--color-white);
    color: var(--color-primary);
    border-color: var(--color-white);
    padding: var(--space-4) var(--space-10);
}

.hero__cta:hover {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-white);
}

/* =============================================================================
   CARROSSEL DE CATEGORIAS
   ============================================================================= */
.categories-carousel {
    padding: var(--space-16) 0;
    overflow: hidden;
}

.categories-carousel .section-header {
    padding: 0 var(--space-6);
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
}

/* Track wrapper — permite scroll horizontal e esconde scrollbar nativa */
.carousel__track-wrapper {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;       /* Firefox */
    cursor: grab;
    padding: var(--space-8) var(--space-6);  /* espaço para a escala do card central */
}

.carousel__track-wrapper::-webkit-scrollbar {
    display: none;               /* Chrome / Safari */
}

.carousel__track-wrapper:active {
    cursor: grabbing;
}

/* Track em flex — padding lateral para o primeiro/último card ficarem centralizáveis */
.carousel__track {
    display: flex;
    gap: var(--space-5);
    list-style: none;
    margin: 0;
    padding: 0;
    width: max-content;
}

/* Cada item do carrossel */
.carousel__item {
    flex: 0 0 auto;
    width: 280px;
    scroll-snap-align: center;
    transform-origin: bottom center;
    will-change: transform, opacity;
}

/* Card de categoria */
.category-card {
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    background: var(--color-white);
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border);
}

.category-card__media,
.category-card__media-link {
    display: block;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    position: relative;
    background-color: var(--color-gray-light);
}

.category-card__media img,
.category-card__media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-normal);
    display: block;
}

.carousel__item:hover .category-card__media img,
.carousel__item:hover .category-card__media video {
    transform: scale(1.04);
}

.category-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( to top, rgba(0,0,0,.35) 0%, transparent 60% );
    pointer-events: none;
}

/* Placeholder quando não há mídia cadastrada */
.category-card__placeholder {
    width: 100%;
    height: 100%;
    background-color: var(--color-gray-light);
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 3 / 4;
}

.category-card__body {
    padding: var(--space-4) var(--space-5) var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    flex: 1;
}

.category-card__title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-nav);
    text-transform: uppercase;
    margin: 0;
}

.category-card__title a {
    color: var(--color-text);
    text-decoration: none;
}

.category-card__btn {
    font-size: var(--font-size-xs);
    padding: var(--space-2) var(--space-4);
    min-height: 36px;
    align-self: flex-start;
}

/* Setas de navegação */
.carousel__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    /* A regra global de <button> aplica padding 12/32 e min-height 44px. Com
       box-sizing:border-box isso empurra a largura para 66px (64 de padding +
       2 de borda), achata o círculo e zera o content box, fazendo o SVG
       interno encolher para width:0 — a seta some. */
    padding: 0;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-fast), background-color var(--transition-fast);
    color: var(--color-primary);
}

.carousel__arrow:hover {
    box-shadow: var(--shadow-md);
    background-color: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}

.carousel__arrow:disabled,
.carousel__arrow[aria-disabled="true"] {
    opacity: .35;
    pointer-events: none;
}

.carousel__arrow svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;   /* flex item não pode encolher se o botão apertar */
}

.carousel__arrow--prev {
    left: var(--space-3);
}

.carousel__arrow--next {
    right: var(--space-3);
}

/* Posiciona o container do carrossel relativamente para as setas */
.carousel {
    position: relative;
}

/* Dots */
.carousel__dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-5);
    padding: 0 var(--space-6);
}

.carousel__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    border: none;
    background-color: var(--color-gray-mid);
    cursor: pointer;
    padding: 0;
    /* Sem isso o min-height:44px da regra global de <button> transforma o
       ponto de 6px numa fatia vertical de 6x44. */
    min-height: 0;
    flex-shrink: 0;
    transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.carousel__dot.is-active {
    background-color: var(--color-primary);
    transform: scale(1.5);
}

/* =============================================================================
   BADGES SOBRE A FOTO — "Oferta" e "Esgotado" na página de produto

   Esta seção se chamava GRID DE LANÇAMENTOS e vestia .products-grid /
   .product-card, removidos na v3.10.0 junto com o carrinho antigo — eram o
   último uso daquele markup. As duas regras de .new-arrivals foram embora
   com eles: nenhum template do tema usa essa classe (os lançamentos da home
   são .launches-carousel). Sobraram os badges, que single-product.php usa.
   ============================================================================= */
.badge {
    display: inline-block;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 3px var(--space-2);
    border-radius: var(--border-radius-sm);
    line-height: 1.4;
}

/* Vermelho, igual ao badge "Oferta" dos cards (.hp-product-card__badge--sale).
   Era verde da marca e destoava: o mesmo rótulo aparecia em duas cores
   diferentes na mesma página. */
.badge--sale {
    background-color: #d0021b;
    color: var(--color-white);
}

/* Esgotado — cinza escuro. A regra faltava: .badge sozinha não pinta fundo,
   então o "Esgotado" de single-product.php:144 saía como texto solto sobre a
   foto. Apareceu ao remover o bloco .product-card, que ocupava estas linhas. */
.badge--out {
    background-color: var(--color-gray-dark);
    color: var(--color-white);
}

/* .badge--new removido: a tag "Novo" saiu do site inteiro. */

/* =============================================================================
   SEÇÃO EDITORIAL
   ============================================================================= */
.editorial {
    padding: var(--space-16) 0;
    background-color: var(--color-bg-alt);
}

/* Grid 50/50 */
.editorial__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 600px;
    max-width: var(--container-max);
    margin: 0 auto;
}

/* Coluna da imagem */
.editorial__media {
    overflow: hidden;
}

.editorial__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 600ms ease;
}

.editorial:hover .editorial__media img {
    transform: scale(1.02);
}

/* Placeholder da imagem editorial */
.editorial__placeholder {
    width: 100%;
    height: 100%;
    min-height: 500px;
    background-color: var(--color-gray-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

/* Coluna de texto */
.editorial__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-12) var(--space-12);
    background-color: var(--color-white);
}

.editorial__eyebrow {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: var(--space-4);
}

.editorial__title {
    font-size: clamp( 1.6rem, 3vw, 2.6rem );
    font-weight: var(--font-weight-bold);
    line-height: 1.15;
    margin-bottom: var(--space-6);
    letter-spacing: 0.5px;
}

.editorial__text {
    font-size: var(--font-size-base);
    line-height: var(--line-height-body);
    color: var(--color-text-muted);
    margin-bottom: var(--space-8);
    max-width: 440px;
}

.editorial__cta {
    align-self: flex-start;
}

/* =============================================================================
   MARCAS PARCEIRAS
   ============================================================================= */
.brands {
    padding: var(--space-12) 0;
    border-top: 1px solid var(--color-border);
    background-color: var(--color-white);
}

.brands__label {
    text-align: center;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: var(--space-8);
}

.brands__list {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-8) var(--space-12);
    list-style: none;
    margin: 0;
    padding: 0;
}

.brands__link {
    display: block;
    opacity: .55;
    transition: opacity var(--transition-fast);
    text-decoration: none;
}

.brands__link:hover {
    opacity: 1;
}

.brands__logo {
    max-height: 36px;
    max-width: 120px;
    width: auto;
    object-fit: contain;
    /* Remove cor da imagem — exibe apenas em escala de cinza para uniformidade */
    filter: grayscale(100%);
    transition: filter var(--transition-fast);
}

.brands__link:hover .brands__logo {
    filter: grayscale(0%);
}

/* Texto placeholder quando não há logo */
.brands__placeholder {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-nav);
    text-transform: uppercase;
    color: var(--color-text-muted);
}

/* =============================================================================
   RESPONSIVO — HOMEPAGE
   ============================================================================= */
@media ( max-width: 1024px ) {
    .carousel__item {
        width: 240px;
    }
}

@media ( max-width: 768px ) {
    .hero {
        min-height: 70vh;
        align-items: flex-end;
    }

    .hero__overlay {
        background: linear-gradient( to top, rgba(0,0,0,.65) 0%, rgba(0,0,0,.2) 100% );
    }

    .hero__content {
        margin-left: 0;
        padding: var(--space-10) var(--space-6);
        max-width: 100%;
    }

    /* Editorial empilhado em mobile */
    .editorial__grid {
        grid-template-columns: 1fr;
    }

    .editorial__media {
        min-height: 320px;
    }

    .editorial__content {
        padding: var(--space-8) var(--space-6);
    }

    .editorial__text {
        max-width: 100%;
    }

    .carousel__item {
        width: 200px;
    }

    .carousel__arrow {
        display: none;   /* setas somem no mobile — usa swipe */
    }

    .brands__list {
        gap: var(--space-6) var(--space-8);
    }
}

@media ( max-width: 480px ) {
    .section-title {
        font-size: var(--font-size-lg);
    }

    .hero__title {
        font-size: 1.8rem;
    }

    .carousel__item {
        width: 180px;
    }
}

/* =============================================================================
   ARCHIVE — LISTAGEM DE PRODUTOS
   ============================================================================= */

/* Breadcrumb */
.archive-breadcrumb {
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--color-border);
}

.woocommerce-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    letter-spacing: 0.4px;
    margin: 0;
}

.woocommerce-breadcrumb a {
    color: var(--color-text-muted);
}

.woocommerce-breadcrumb a:hover {
    color: var(--color-primary);
}

.breadcrumb-sep {
    color: var(--color-gray-mid);
    font-size: 10px;
}

/* Cabeçalho de categoria */
.archive-header {
    padding: var(--space-10) 0;
    border-bottom: 1px solid var(--color-border);
    background-color: var(--color-bg-alt);
}

.archive-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
}

.archive-header__title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    margin: 0 0 var(--space-3);
}

.archive-header__desc {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    max-width: 560px;
    line-height: var(--line-height-body);
}

.archive-header__desc p {
    margin: 0;
}

.archive-header__image {
    width: 160px;
    height: 120px;
    border-radius: var(--border-radius-md);
    overflow: hidden;
    flex-shrink: 0;
}

.archive-header__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Corpo: grid sidebar + conteúdo */
.archive-body {
    padding: var(--space-8) 0 var(--space-16);
}

.archive-body__grid {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: var(--space-8);
    align-items: start;
}

/* Sidebar */
.archive-sidebar {
    position: sticky;
    top: calc( var(--header-height) + var(--topbar-height) + var(--space-4) );
    max-height: calc( 100vh - var(--header-height) - var(--topbar-height) - var(--space-8) );
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--color-gray-mid) transparent;
}

.archive-sidebar__header {
    display: none;   /* visível apenas no mobile */
}

.archive-sidebar .widget {
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--color-border);
}

.archive-sidebar .widget:last-child {
    border-bottom: none;
}

.archive-sidebar .widget-title {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-nav);
    text-transform: uppercase;
    margin: 0 0 var(--space-4);
    color: var(--color-text);
}

.archive-sidebar .woocommerce-widget-layered-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.archive-sidebar .woocommerce-widget-layered-nav-list a {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    transition: color var(--transition-fast);
}

.archive-sidebar .woocommerce-widget-layered-nav-list a:hover,
.archive-sidebar .woocommerce-widget-layered-nav-list .chosen a {
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
}

.archive-sidebar__empty {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    line-height: 1.5;
}

.archive-sidebar__clear {
    display: inline-block;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-nav);
    text-transform: uppercase;
    color: var(--color-text-muted);
    text-decoration: underline;
    margin-top: var(--space-4);
    transition: color var(--transition-fast);
}

.archive-sidebar__clear:hover {
    color: var(--color-primary);
}

/* Toolbar */
.archive-toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border);
    flex-wrap: wrap;
}

.archive-toolbar__filter-btn {
    display: none;   /* botão mobile — aparece em < 768px */
    align-items: center;
    gap: var(--space-2);
    background: none;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-nav);
    text-transform: uppercase;
    color: var(--color-text);
    padding: var(--space-2) var(--space-4);
    cursor: pointer;
    min-height: 36px;
    transition: border-color var(--transition-fast), color var(--transition-fast);
}

.archive-toolbar__filter-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.archive-toolbar__count {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin: 0;
    flex: 1;
}

.archive-toolbar__sort {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-left: auto;
}

.archive-toolbar__select {
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-nav);
    text-transform: uppercase;
    color: var(--color-text);
    background-color: var(--color-white);
    padding: var(--space-2) var(--space-4) var(--space-2) var(--space-3);
    cursor: pointer;
    min-height: 36px;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23183029' stroke-width='1.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-2) center;
    background-size: 16px;
    padding-right: var(--space-8);
}

.archive-toolbar__select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(24, 48, 41, .12);
}

/* Grid na página de arquivo */
.archive-products-grid {
    grid-template-columns: repeat(4, 1fr);
}

/* Paginação */
.archive-pagination {
    margin-top: var(--space-12);
    display: flex;
    justify-content: center;
}

.archive-pagination .page-numbers {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    list-style: none;
    margin: 0;
    padding: 0;
}

.archive-pagination .page-numbers li a,
.archive-pagination .page-numbers li span {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-width: 40px;
    height: 40px;
    padding: 0 var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
    transition: border-color var(--transition-fast), color var(--transition-fast), background-color var(--transition-fast);
    text-decoration: none;
}

.archive-pagination .page-numbers li a:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.archive-pagination .page-numbers li span.current {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

/* Estado vazio */
.archive-empty {
    padding: var(--space-16) 0;
    text-align: center;
    color: var(--color-text-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
}

.archive-empty svg {
    color: var(--color-gray-mid);
}

.archive-empty h2 {
    font-size: var(--font-size-xl);
    margin: 0;
}

.archive-empty p {
    margin: 0;
    font-size: var(--font-size-sm);
}

/* =============================================================================
   PRODUTO INDIVIDUAL — single-product.php
   ============================================================================= */

.single-product-layout {
    padding-bottom: var(--space-16);
}

/* Respiro nas laterais. O .container global tem 1280px e só 24px de padding
   — numa tela de 1366 isso deixa ~40px de margem e o produto encosta nas
   bordas. Aqui a faixa é mais estreita e o padding maior, para a página de
   produto respirar. Escopado: não mexe no resto do site. */
.single-product-layout > .container {
    max-width: 1040px;
    padding-left: var(--space-8);
    padding-right: var(--space-8);
}

/* =============================================================================
   COMPACTAÇÃO VERTICAL DA PÁGINA DE PRODUTO
   O "Adicionar ao carrinho" nascia ~310px abaixo da dobra num monitor de
   900px, obrigando a rolar antes de ver como comprar. Nada aqui remove
   elemento: é só redução de respiro vertical, e o ganho vem da soma.
   Medido antes: 435px acima do produto + 700px até o botão = 1135px.
   ============================================================================= */
body.single-product .brands-marquee-section {
    padding: 7px 0;
    margin-top: 0;
}

body.single-product .benefits-bar {
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
}

/* O breadcrumb era o maior desperdício isolado da página: 68px de altura
   mais 32px de margem, 100px no total, para uma linha de texto. */
.single-product-layout .single-breadcrumb {
    padding: var(--space-2) 0;
    margin-bottom: var(--space-3);
    line-height: 1.2;
}

/* O Storefront dá padding 16px em cima e embaixo do próprio <nav> do
   breadcrumb, dentro do nosso wrapper que já tem o seu. Eram 32px
   duplicados escondidos numa linha de texto. */
.single-product-layout .woocommerce-breadcrumb {
    padding: 0;
    margin: 0;
}

.single-product-layout .product-info__cats {
    margin-bottom: var(--space-2);
}

.single-product-layout .product-info__title {
    font-size: 26px;
    margin-bottom: var(--space-2);
}

.single-product-layout .product-info__price {
    margin-bottom: var(--space-1);
}

.single-product-layout .product-info__installment {
    margin-top: var(--space-1);
}

.single-product-layout .product-info__pix {
    margin-top: var(--space-2);
    padding: var(--space-1) var(--space-3);
}

.single-product-layout .product-info__divider {
    margin: var(--space-3) 0;
}

.single-product-layout .product-form__row {
    margin-bottom: var(--space-2);
}

.single-product-layout .product-form__attr-label {
    margin-bottom: var(--space-1);
}

.single-product-layout .product-form__qty {
    margin-bottom: var(--space-3);
}

.single-product-layout .product-form__actions {
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

/* Amostras de cor e botões de tamanho um pouco menores: cada linha dessas
   aparece uma vez, mas as três somadas custavam 172px de altura. */
.single-product-layout .color-swatch__circle {
    width: 28px;
    height: 28px;
}

.single-product-layout .size-btn__label {
    min-width: 42px;
    height: 36px;
}

.single-product-layout .product-form__qty .quantity input[type="number"],
.single-product-layout .qty-btn {
    height: 36px;
    min-height: 36px;
}

.single-product-layout .product-info__title {
    font-size: 24px;
}

/* Padding vertical menor: os 16px herdados da regra global de botão somavam
   à min-height e deixavam os dois botões mais altos do que o pedido. */
.single-product-layout .product-form__actions .product-form__buy-now {
    min-height: 50px;
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
}

.single-product-layout .product-form__actions .product-form__add-to-cart {
    min-height: 46px;
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
}

.single-product-layout .product-info__divider {
    margin: var(--space-2) 0;
}

.single-product-layout .product-shipping-sim {
    padding: var(--space-4) 0 0;
}

/* =============================================================================
   BARRA DE COMPRA FIXA
   Só aparece quando o botão real sai da tela (ver single-product.js). Resolve
   o caso do notebook de 768px, onde nem 300px de compactação bastavam para o
   botão nascer acima da dobra.
   ============================================================================= */
.buy-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    background-color: rgba(255, 255, 255, .97);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -4px 16px rgba(24, 48, 41, .10);
    /* Entra deslizando; `hidden` cuida de tirá-la do fluxo e da leitura de
       tela, então a transição só existe enquanto ela está presente. */
    transform: translateY(100%);
    transition: transform var(--transition-fast);
}

.buy-bar.is-visible {
    transform: translateY(0);
}

/* `hidden` sozinho perde para o display:flex do inner em alguns navegadores. */
.buy-bar[hidden] {
    display: none;
}

.buy-bar__inner {
    max-width: 1040px;
    margin: 0 auto;
    padding: var(--space-2) var(--space-8);
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.buy-bar__img {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: var(--border-radius-sm);
    flex-shrink: 0;
}

.buy-bar__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;          /* deixa o nome truncar em vez de esticar a barra */
    flex: 1 1 auto;
}

.buy-bar__name {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.buy-bar__price {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
}

.buy-bar__price .woocommerce-Price-amount {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}

/* Pai no seletor: sem isso a regra global `.woocommerce .button` (0,2,0)
   vence e o botão volta ao verde da marca. */
.buy-bar__inner .buy-bar__btn {
    flex: 0 0 auto;
    background-color: #0f9d3a;
    border-color: #0f9d3a;
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: .2px;
    min-height: 44px;
    padding: var(--space-3) var(--space-8);
}

.buy-bar__inner .buy-bar__btn:hover,
.buy-bar__inner .buy-bar__btn:focus-visible {
    background-color: #0c8531;
    border-color: #0c8531;
    color: #ffffff;
}

@media ( max-width: 600px ) {
    .buy-bar__inner {
        padding: var(--space-2) var(--space-4);
        gap: var(--space-3);
    }

    /* Na largura de celular a miniatura e o nome roubam espaço do botão,
       que é a única coisa aqui que precisa ser tocável. */
    .buy-bar__img,
    .buy-bar__name {
        display: none;
    }

    .buy-bar__inner .buy-bar__btn {
        flex: 1 1 auto;
    }
}

/* --- Quantidade com − / + ---------------------------------------------------
   Os botões vêm dos hooks do WooCommerce (ver functions.php). Zerar padding e
   min-height é obrigatório: são <button> e herdam a regra global de botão,
   que os transformaria em pílulas de 44px de altura. */
.product-form__qty .quantity {
    display: inline-flex;
    align-items: stretch;
    gap: 0;
    margin-bottom: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    overflow: hidden;
}

.qty-btn {
    flex: 0 0 40px;
    width: 40px;
    min-height: 0;
    padding: 0;
    background-color: transparent;
    border: none;
    border-radius: 0;
    color: var(--color-text);
    font-size: 17px;
    font-weight: var(--font-weight-bold);
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.qty-btn:hover,
.qty-btn:focus-visible {
    background-color: var(--color-gray-light);
    color: var(--color-primary);
}

.product-form__qty .quantity input[type="number"] {
    width: 52px;
    min-height: 40px;
    height: 40px;
    text-align: center;
    border: none;
    border-left: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
    border-radius: 0;
    /* Esconde as setinhas nativas: os − / + substituem elas. */
    -moz-appearance: textfield;
    appearance: textfield;
}

.product-form__qty .quantity input[type="number"]::-webkit-outer-spin-button,
.product-form__qty .quantity input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.single-breadcrumb {
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--space-8);
}

/* Grid: galeria + info */
.product-detail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
    margin-bottom: var(--space-16);
    align-items: start;
}

/* ---- GALERIA ---- */
/* Miniaturas em tira horizontal ABAIXO da imagem principal.
   Chegaram a ficar em coluna à esquerda, mas a Milena preferiu embaixo. */
.product-gallery {
    position: sticky;
    top: calc( var(--header-height) + var(--topbar-height) + var(--space-4) );
}

.product-gallery__main {
    position: relative;
    overflow: hidden;
    border-radius: var(--border-radius-md);
    background-color: var(--color-gray-light);
    margin-bottom: var(--space-3);
}

.product-gallery__main img,
.product-gallery__main-img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    display: block;
    transition: opacity 200ms ease;
}

.product-gallery__no-image {
    width: 100%;
    aspect-ratio: 3 / 4;
    background-color: var(--color-gray-light);
}

.product-gallery__badges {
    position: absolute;
    top: var(--space-4);
    left: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    z-index: 1;
}

/* --- Ações sobre a imagem: compartilhar, favoritar e % OFF ------------------
   Coluna no canto oposto aos badges, para os dois grupos não se encavalarem. */
.product-gallery__actions {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    z-index: 1;
}

/* ARMADILHA CONHECIDA DESTE TEMA — botão de ícone.
   A regra global de `button`/`.button` impõe `padding: 12px 32px` e
   `min-height: 44px`. Sem zerar os dois, o círculo vira uma pílula; e sem
   `flex-shrink: 0` o SVG (flex item dentro de content-box zerada) encolhe
   para width 0, virando um botão sem ícone nenhum.
   Todo botão de ícone daqui precisa das duas coisas. */
.product-gallery__action {
    width: 38px;
    height: 38px;
    min-height: 0;
    padding: 0;
    flex: 0 0 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, .92);
    color: var(--color-primary);
    border: 1px solid var(--color-border);
    border-radius: 50%;
    cursor: pointer;
    transition: color var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast);
}

.product-gallery__action:hover,
.product-gallery__action:focus-visible {
    background-color: var(--color-white);
    color: var(--color-primary-dark);
    border-color: var(--color-primary);
}

/* Pelo mesmo motivo do padding: sem travar o shrink o SVG vai a width 0. */
.product-gallery__action svg {
    flex-shrink: 0;
}

/* Confirmação do "link copiado" — o texto real fica no aria-label, trocado
   pelo JS; aqui só o retorno visual de que algo aconteceu. */
.product-gallery__action.is-done {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

/* Mesmo verde do badge dos cards (#2E9E44), para o "% OFF" ser a mesma coisa
   na foto grande e nos cards logo abaixo. O tamanho maior é mantido. */
.product-gallery__discount {
    margin-top: var(--space-1);
    padding: var(--space-3) var(--space-3);
    min-width: 54px;
    background-color: #2e9e44;
    color: #fff;
    font-size: 14px;
    font-weight: var(--font-weight-bold);
    line-height: 1.15;
    text-align: center;
    letter-spacing: .5px;
    border-radius: var(--border-radius-md);
}

/* Miniaturas */
/* Ancora das setas. Elas precisam de um pai posicionado que não role junto
   com as miniaturas — se ficassem dentro da tira, sairiam de vista. */
.product-gallery__thumbs-wrap {
    position: relative;
    margin-top: var(--space-2);
}

.product-gallery__thumbs {
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: var(--space-1);
}

/* Setas de navegação SOBRE a imagem grande.
   Ficavam na tira de miniaturas, onde cobriam a primeira e a última — e o
   lugar contradizia a função, já que elas trocam a foto principal.
   Sempre visíveis, não só no hover: em tela de toque não existe hover e elas
   sumiriam justamente onde são mais úteis. */
.product-gallery__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    /* Zerar padding e min-height é obrigatório em botão de ícone neste tema
       — ver a nota em .product-gallery__action. */
    width: 40px;
    height: 40px;
    min-height: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, .92);
    color: var(--color-primary);
    border: 1px solid rgba(24, 48, 41, .10);
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(24, 48, 41, .18);
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.product-gallery__nav svg {
    flex-shrink: 0;
}

.product-gallery__nav:hover,
.product-gallery__nav:focus-visible {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

.product-gallery__nav[hidden] {
    display: none;
}

.product-gallery__nav--prev {
    left: var(--space-3);
}

.product-gallery__nav--next {
    right: var(--space-3);
}

@media ( max-width: 600px ) {
    /* Um pouco menores e mais próximas da borda: a foto é mais estreita e as
       setas não podem comer o produto. */
    .product-gallery__nav {
        width: 36px;
        height: 36px;
    }

    .product-gallery__nav--prev {
        left: var(--space-2);
    }

    .product-gallery__nav--next {
        right: var(--space-2);
    }
}

.product-gallery__thumbs::-webkit-scrollbar {
    display: none;
}

.product-gallery__thumb {
    flex: 0 0 auto;
    width: 72px;
    height: 96px;
    border: 2px solid transparent;
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    padding: 0;
    cursor: pointer;
    background: var(--color-gray-light);
    transition: border-color var(--transition-fast);
}

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

.product-gallery__thumb.is-active,
.product-gallery__thumb:hover {
    border-color: var(--color-primary);
}

/* ---- INFORMAÇÕES ---- */
.product-info {
    padding-top: var(--space-2);
}

.product-info__cats {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-nav);
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin: 0 0 var(--space-3);
}

.product-info__cats a {
    color: var(--color-text-muted);
}

.product-info__cats a:hover {
    color: var(--color-primary);
}

.product-info__title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    line-height: 1.15;
    margin: 0 0 var(--space-2);
}

/* A referência (SKU) e o resumo curto saíram da coluna do produto; o SKU
   virou só um <meta> para schema.org. Regras removidas junto para não
   sobrar CSS apontando para classe que não existe mais. */

/* Avaliação */
.product-info__rating {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.product-info__rating-link {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    text-decoration: underline;
}

/* Preço */
/* Preço em duas linhas, igual ao card da home: cheio riscado em cima,
   com desconto embaixo. Empilhado, e não lado a lado, porque é assim que a
   pessoa lê "era X, agora Y" sem precisar comparar horizontalmente. */
.product-info__price {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
    margin-bottom: var(--space-2);
}

.product-info__price-old {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-muted);
    text-decoration: line-through;
    line-height: 1.2;
}

.product-info__price-now {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    line-height: 1;
}

/* wc_price() embrulha o valor num <span>; sem herdar, ele volta ao tamanho
   base e o preço "grande" não fica grande. */
.product-info__price-now .woocommerce-Price-amount {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}

.product-info__price-old .woocommerce-Price-amount {
    font-size: inherit;
    color: inherit;
}

.product-info__installment {
    margin: var(--space-2) 0 0;
    font-size: var(--font-size-md);   /* 16px — --base é 14px e não subia nada */
    color: var(--color-text);
}

/* O PIX ganha fundo porque é a informação que faz a pessoa escolher pagar
   à vista — no mockup ela vem destacada, e sem o fundo ela some no meio
   das outras linhas de texto miúdo. */
.product-info__pix {
    display: inline-block;
    margin: var(--space-2) 0 0;
    padding: var(--space-2) var(--space-4);
    background-color: var(--color-gray-light);
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
}

.product-info__pix .woocommerce-Price-amount {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}


.product-info__divider {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: var(--space-5) 0;
}

/* ---- FORMULÁRIO DO PRODUTO ---- */
.product-form__row {
    margin-bottom: var(--space-5);
}

.product-form__attr-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-nav);
    text-transform: uppercase;
    margin-bottom: var(--space-3);
    color: var(--color-text);
}

/* Link "Guia de tamanhos" dentro do label */
.product-form__size-guide {
    background: none;
    border: none;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-regular);
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text-muted);
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
    transition: color var(--transition-fast);
}

.product-form__size-guide:hover {
    color: var(--color-primary);
}

/* Botões de tamanho */
.product-form__size-btns {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.size-btn {
    display: block;
    cursor: pointer;
}

.size-btn__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.size-btn__label {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 var(--space-3);
    border: 1.5px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.5px;
    color: var(--color-text);
    transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
    user-select: none;
}

.size-btn:hover .size-btn__label {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.size-btn__input:checked + .size-btn__label {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

.size-btn__input:focus-visible + .size-btn__label {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Amostras de cor */
.product-form__color-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.color-swatch {
    cursor: pointer;
}

.color-swatch__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.color-swatch__circle {
    display: block;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid transparent;
    outline: 2px solid transparent;
    outline-offset: 2px;
    transition: outline-color var(--transition-fast);
}

.color-swatch__input:checked + .color-swatch__circle {
    outline-color: var(--color-primary);
}

.color-swatch__input:focus-visible + .color-swatch__circle {
    outline-color: var(--color-primary);
}

/* Select estilizado (atributos genéricos) */
.product-form__select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23183029' stroke-width='1.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    background-size: 16px;
    padding-right: var(--space-10);
    cursor: pointer;
}

/* Quantidade */
/* Bloco da quantidade: rótulo "Unidades" em cima, campo embaixo — mesma
   estrutura de cor e tamanho, para as três escolhas se lerem igual. */
.product-form__qty {
    margin-bottom: var(--space-5);
}

.product-form__qty .quantity {
    margin-bottom: 0;
}

.quantity {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
}

.quantity label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-nav);
    text-transform: uppercase;
    margin: 0;
}

.quantity input[type="number"] {
    width: 72px;
    text-align: center;
}

/* Ações: adicionar ao carrinho + favoritar */
/* Botões empilhados, não lado a lado: "Comprar agora" precisa da largura
   inteira para ser o elemento mais óbvio da página. */
.product-form__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    align-items: stretch;
    margin-bottom: var(--space-5);
}

/* Botão principal — verde vivo de compra (#2E9E44, o mesmo do badge "% OFF"
   da home). O #1E7A32 anterior era mais legível no papel mas saía apagado na
   tela, sem chamar atenção nenhuma para o botão mais importante da página.

   O texto branco sobre este verde dá 3,45:1, abaixo dos 4,5:1 exigidos para
   texto normal — POR ISSO o font-size é 19px em negrito. A partir de 18,66px
   em negrito a norma trata como "texto grande" e o mínimo cai para 3:1, que
   este par cumpre. Se alguém reduzir esta fonte, o botão passa a reprovar em
   contraste: reduza o tamanho só trocando o verde por um mais fechado. */
/* O seletor precisa do pai. A regra base da linha ~484 agrupa `.woocommerce
   .button`, que tem especificidade 0,2,0 — mais que qualquer classe única.
   Estilo de botão com uma classe só é silenciosamente ignorado neste tema:
   foi o que aconteceu na primeira versão desta regra, que saiu verde-marca
   em vez de verde-compra. Vale para todo botão daqui pra frente. */
.product-form__actions .product-form__buy-now {
    width: 100%;
    background-color: #0f9d3a;
    color: #ffffff;
    border-color: #0f9d3a;
    font-size: 19px;          /* ver nota acima — não reduzir sem trocar o verde */
    font-weight: 700;
    text-transform: none;     /* caixa alta a 19px estoura a largura no celular */
    padding: var(--space-4) var(--space-6);
    min-height: 58px;
    letter-spacing: .2px;
}

.product-form__actions .product-form__buy-now:hover,
.product-form__actions .product-form__buy-now:focus-visible {
    background-color: #0c8531;
    border-color: #0c8531;
    color: #ffffff;
}

/* Dois estados diferentes que antes dividiam a mesma regra:

   [disabled] (atributo) = produto esgotado. Não há o que fazer, então
   continua apagado e sem resposta ao clique.

   .disabled (classe) = o WooCommerce marca assim quando falta escolher cor
   ou tamanho. A Milena pediu que aqui o botão fique sólido. Ele PRECISA
   continuar clicável: o JS usa o clique para destacar o seletor que falta.
   Com pointer-events:none o botão ficaria bonito e completamente morto. */
.product-form__actions .product-form__buy-now[disabled],
.product-form__actions .product-form__add-to-cart[disabled] {
    opacity: .5;
    cursor: not-allowed;
    pointer-events: none;
}

/* O !important aqui não é preguiça: o Storefront declara
   `button.disabled { opacity: .5 !important }` no style.css do tema pai, e
   only !important vence !important. Sem ele o botão continua translúcido por
   mais específico que seja o seletor — foi exatamente o que aconteceu na
   primeira tentativa desta regra. */
.product-form__actions .product-form__buy-now.disabled:not([disabled]),
.product-form__actions .product-form__add-to-cart.disabled:not([disabled]) {
    opacity: 1 !important;
    cursor: pointer;
    pointer-events: auto;
}

/* Destaque do seletor que falta preencher, aplicado pelo JS no clique. */
.product-form__attr.is-missing .product-form__attr-label {
    color: #b3261e;
}

.product-form__attr.is-missing .size-btn__label,
.product-form__attr.is-missing .color-swatch__circle {
    box-shadow: 0 0 0 2px #b3261e;
}

.product-form__missing-msg {
    margin: var(--space-2) 0 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: #b3261e;
}

/* Botão secundário — contorno, para não competir com o "Comprar agora".
   Mesmo motivo do seletor com pai: ver a nota no .product-form__buy-now. */
/* Secundário, mas na MESMA família do "Comprar agora" — verde sobre verde
   clarinho, como o mockup faz com azul sobre azul clarinho. O verde escuro
   da marca que estava aqui antes lia como texto comum, não como ação. */
.product-form__actions .product-form__add-to-cart {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    background-color: rgba(46, 158, 68, .10);
    color: #1a6e2d;
    border: 1px solid rgba(46, 158, 68, .35);
    font-size: 16px;
    font-weight: var(--font-weight-bold);
    text-transform: none;
    padding: var(--space-4) var(--space-6);
    min-height: 54px;
    letter-spacing: .2px;
}

.product-form__actions .product-form__add-to-cart:hover,
.product-form__actions .product-form__add-to-cart:focus-visible {
    background-color: rgba(46, 158, 68, .18);
    border-color: rgba(46, 158, 68, .55);
    color: #14561f;
}

/* Sem isto o SVG encolhe para width 0 dentro do flex — ver a nota sobre
   botões de ícone em .product-gallery__action. */
.product-form__add-to-cart svg {
    flex-shrink: 0;
}

/* --- Simulador de frete ----------------------------------------------------
   Visual apenas: não há consulta de CEP enquanto as zonas de entrega não
   estiverem configuradas no WooCommerce. Ver a nota no single-product.php. */
.product-shipping-sim {
    padding: var(--space-5) 0;
    border-top: 1px solid var(--color-border);
    margin-top: var(--space-2);
}

.product-shipping-sim__label {
    display: block;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-nav);
    text-transform: uppercase;
    color: var(--color-text);
    margin-bottom: var(--space-3);
}

.product-shipping-sim__row {
    display: flex;
    gap: var(--space-2);
}

.product-shipping-sim__input {
    /* minmax do flex: sem min-width 0 o input impõe seu tamanho intrínseco e
       empurra o botão para fora da coluna em telas estreitas. */
    flex: 1 1 auto;
    min-width: 0;
    height: 46px;
    padding: 0 var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-sm);
    color: var(--color-text);
    background-color: var(--color-white);
}

.product-shipping-sim__input:focus {
    outline: none;
    border-color: var(--color-primary);
}

/* Pai no seletor pelo mesmo motivo do .product-form__buy-now. */
.product-shipping-sim__row .product-shipping-sim__btn {
    flex: 0 0 auto;
    min-height: 46px;
    height: 46px;
    padding: 0 var(--space-6);
    font-size: var(--font-size-xs);
    letter-spacing: var(--letter-spacing-nav);
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #ffffff;
}

/* -----------------------------------------------------------------------------
   VÍDEO DO PRODUTO

   Ocupa a área da foto grande, por cima dela. `hidden` no HTML resolve o
   estado inicial; aqui só o `display` que o atributo pede quando o elemento
   volta, já que a regra de layout abaixo o tornaria visível de novo.
   ----------------------------------------------------------------------------- */
.product-gallery__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #000;
    z-index: 3;
    border-radius: inherit;
}

.product-gallery__video[hidden] {
    display: none;
}

/* Miniatura do vídeo: mesma caixa das outras, com o selo de play por cima. */
.product-gallery__thumb--video {
    position: relative;
}

.product-gallery__thumb-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(0, 0, 0, .35);
    transition: background var(--transition-fast);
}

.product-gallery__thumb--video:hover .product-gallery__thumb-play,
.product-gallery__thumb--video.is-active .product-gallery__thumb-play {
    background: rgba(0, 0, 0, .15);
}

/* =============================================================================
   POP-UP "PRODUTO ADICIONADO AO CARRINHO"

   Estrutura vem do functions.php e nasce com `hidden`; o JS só remove o
   atributo. Por isso o estado fechado é o atributo, não uma classe — sem JS o
   pop-up nunca aparece, em vez de aparecer e não fechar.
   ============================================================================= */
.cart-popup[hidden] {
    display: none;
}

.cart-popup {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-5);
}

.cart-popup__veil {
    position: absolute;
    inset: 0;
    background: rgba( 24, 48, 41, .55 );   /* o verde da marca, não preto puro */
    backdrop-filter: blur( 2px );
}

.cart-popup__box {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 440px;
    background: var(--color-white);
    border-radius: var(--border-radius-lg);
    padding: var(--space-10) var(--space-8) var(--space-8);
    text-align: center;
    box-shadow: 0 24px 60px rgba( 0, 0, 0, .22 );
    /* Espaço no topo para o selo verde, que fica meio para fora da caixa. */
    margin-top: 30px;
}

/* Selo de confirmação, metade para fora da caixa — é o que dá o "deu certo"
   antes mesmo de ler o texto. */
.cart-popup__check {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX( -50% );
    width: 60px;
    height: 60px;
    border-radius: 50%;
    /* Verde escuro da marca, o mesmo do título logo abaixo — a pedido da
       Milena. Era o verde-compra #0f9d3a, que competia com o botão. */
    background: var(--color-primary);
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 4px solid var(--color-white);
    box-shadow: 0 4px 14px rgba( 24, 48, 41, .35 );
}

/* Botão sem fundo: a regra global pinta QUALQUER <button> de escuro no hover.
   Sem redeclarar o fundo aqui, o × viraria um quadrado preto. */
.cart-popup__box .cart-popup__close {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    width: 32px;
    height: 32px;
    min-height: 0;
    padding: 0;
    background: none;
    border: none;
    border-radius: 50%;
    color: var(--color-gray-mid);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cart-popup__box .cart-popup__close:hover,
.cart-popup__box .cart-popup__close:focus-visible {
    background: var(--color-bg-alt);
    color: var(--color-text);
}

.cart-popup__title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-nav);
    text-transform: uppercase;
    color: var(--color-primary);
    margin: 0 0 var(--space-2);
    line-height: 1.3;
}

.cart-popup__sub {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin: 0 0 var(--space-6);
}

.cart-popup__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}

/* `.button` no seletor leva a (0,3,0). A regra base agrupa `.woocommerce
   a.button`, que é (0,2,1) e atropelaria duas classes — é a mesma armadilha
   que deixou o botão do carrinho sem efeito por nove versões. */
.cart-popup__actions .button.cart-popup__btn {
    width: 100%;
    min-height: 48px;
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-xs);
    letter-spacing: var(--letter-spacing-nav);
}

.cart-popup__actions .button.cart-popup__btn--ghost {
    background: var(--color-white);
    color: var(--color-primary);
    border-color: var(--color-border);
}

.cart-popup__actions .button.cart-popup__btn--ghost:hover,
.cart-popup__actions .button.cart-popup__btn--ghost:focus-visible {
    background: var(--color-bg-alt);
    color: var(--color-primary);
    border-color: var(--color-primary);
}

/* Mesmo verde do "Comprar agora" e do "Finalizar compra" do carrinho: é a cor
   de avançar na compra em todo o site. */
.cart-popup__actions .button.cart-popup__btn--go {
    background-color: #0f9d3a;
    border-color: #0f9d3a;
    color: var(--color-white);
}

.cart-popup__actions .button.cart-popup__btn--go:hover,
.cart-popup__actions .button.cart-popup__btn--go:focus-visible {
    background-color: #0c8531;
    border-color: #0c8531;
    color: var(--color-white);
}

/* Trava a rolagem do fundo enquanto o pop-up está aberto, como o menu mobile. */
body.has-cart-popup {
    overflow: hidden;
}

@media ( max-width: 480px ) {
    /* Dois botões lado a lado a 375px dão ~140px cada, e "FINALIZAR COMPRA"
       em caixa alta não cabe: quebra em duas linhas. Empilhados, cada um fica
       com a largura inteira, e o principal vem primeiro. */
    .cart-popup__actions {
        grid-template-columns: 1fr;
    }

    .cart-popup__actions .button.cart-popup__btn--go {
        order: -1;
    }

    .cart-popup__box {
        padding: var(--space-10) var(--space-5) var(--space-6);
    }
}

/* =============================================================================
   LIGHTBOX DA GALERIA DO PRODUTO
   Próprio, sem biblioteca: o PhotoSwipe do WooCommerce carrega na página mas
   se prende a `.woocommerce-product-gallery`, markup que a galeria
   customizada deste tema não usa. Ver assets/js/single-product.js.
   ============================================================================= */
.pl-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    padding: var(--space-8);
    background-color: rgba(15, 30, 24, .93);
}

.pl-lightbox.is-open {
    display: flex;
}

.pl-lightbox__img {
    max-width: min(88vw, 900px);
    max-height: 88vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--border-radius-sm);
}

/* Zerar padding e min-height: são <button> e herdam a regra global, que os
   transformaria em pílulas. Mesma armadilha de .product-gallery__action. */
.pl-lightbox__nav,
.pl-lightbox__fechar {
    min-height: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, .12);
    border: none;
    color: #fff;
    cursor: pointer;
    line-height: 1;
    transition: background-color var(--transition-fast);
}

.pl-lightbox__nav:hover,
.pl-lightbox__fechar:hover,
.pl-lightbox__nav:focus-visible,
.pl-lightbox__fechar:focus-visible {
    background-color: rgba(255, 255, 255, .24);
    color: #fff;
}

.pl-lightbox__nav {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    font-size: 30px;
}

.pl-lightbox__fechar {
    position: absolute;
    top: var(--space-5);
    right: var(--space-5);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    font-size: 26px;
}

.pl-lightbox__contador {
    position: absolute;
    bottom: var(--space-6);
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, .8);
    font-size: var(--font-size-sm);
    letter-spacing: .5px;
}

/* Afordância: sem isto nada indica que a foto abre — foi o motivo de a
   Milena achar que o clique não funcionava. */
.product-gallery__main-img {
    cursor: zoom-in;
}

@media ( max-width: 768px ) {
    .pl-lightbox {
        padding: var(--space-4);
        gap: var(--space-2);
    }

    .pl-lightbox__nav {
        flex: 0 0 38px;
        width: 38px;
        height: 38px;
        font-size: 24px;
    }

    .pl-lightbox__img {
        max-width: 78vw;
    }
}

/* --- Diferenciais da marca (abaixo do simulador de frete) -------------------
   Chip num véu do VERDE da marca com o ícone em verde escuro. O verde é a
   cor dominante do site (cabeçalho, botões, rodapé, seção de kits), então é
   ele que faz o bloco pertencer à página. Chegou a ser um véu dourado, mas
   o dourado aqui é cor de destaque — usado num elemento de apoio, competia
   com o preço e o botão de compra logo acima. */
.product-usps {
    list-style: none;
    margin: var(--space-5) 0 0;
    padding: var(--space-5) 0 0;
    border-top: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.product-usps__item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
}

.product-usps__icon {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(24, 48, 41, .07);
    color: var(--color-primary);
    border-radius: var(--border-radius-md);
}

/* Sem isto o SVG encolhe para width 0 dentro do flex — ver a nota sobre
   botões de ícone em .product-gallery__action. */
.product-usps__icon svg {
    flex-shrink: 0;
}

.product-usps__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    /* Deixa o texto quebrar em vez de esticar a coluna do produto. */
    min-width: 0;
}

.product-usps__text strong {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    line-height: 1.3;
}

.product-usps__text span {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    line-height: 1.45;
}

.product-shipping-sim__help {
    margin: var(--space-3) 0 0;
    font-size: var(--font-size-xs);
    line-height: 1.5;
    color: var(--color-text-muted);
}

/* ---- ABAS ---- */
.product-tabs {
    border-top: 1px solid var(--color-border);
    margin-bottom: var(--space-16);
    padding-top: var(--space-1);
}

.product-tabs__nav {
    display: flex;
    border-bottom: 1px solid var(--color-border);
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.product-tabs__nav::-webkit-scrollbar {
    display: none;
}


.product-tabs__btn {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: var(--space-4) var(--space-5);
    font-family: var(--font-heading);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-nav);
    text-transform: uppercase;
    color: var(--color-text-muted);
    cursor: pointer;
    white-space: nowrap;
    margin-bottom: -1px;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.product-tabs__btn.is-active,
.product-tabs__btn:hover {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

/* No celular as 4 abas somam 593px num espaço de 311px: metade ficava fora
   da tela e só aparecia arrastando o dedo, sem nada indicando que havia
   mais. Aqui elas quebram em duas linhas e todas ficam visíveis de uma vez.
   Boa parte do estouro era padding — 20px de cada lado em 4 abas = 160px.

   Este bloco precisa vir DEPOIS das regras de .product-tabs__btn acima: a
   especificidade é igual, então quem decide é a ordem no arquivo. Na
   primeira tentativa ele estava antes e só o flex-basis pegava; padding e
   white-space continuavam vindo da regra base. */
@media ( max-width: 600px ) {
    .product-tabs__nav {
        flex-wrap: wrap;
        overflow-x: visible;
    }

    .product-tabs__btn {
        /* 50% menos 1px de borda: exatamente duas por linha, larguras iguais. */
        flex: 1 1 calc( 50% - 1px );
        /* min-width:auto (padrão do flex) faria o item nunca encolher abaixo
           do texto sem quebra — cada aba ocuparia a linha inteira. */
        min-width: 0;
        white-space: normal;
        padding: var(--space-3) var(--space-2);
        text-align: center;
    }
}

.product-tabs__panel {
    padding: var(--space-8) 0;
}

.product-tabs__panel:focus {
    outline: none;
}

.product-tabs__content {
    max-width: 720px;
    font-size: var(--font-size-base);
    line-height: var(--line-height-body);
    color: var(--color-text-muted);
}

/* --- Tabelas dentro das abas (guia de tamanhos) ---------------------------
   A tabela de medidas tinha 363px num painel de 311px no celular: era
   cortada e não havia como rolar, porque nenhum ancestral tinha overflow.

   Duas medidas, nesta ordem de prioridade:
   1. Apertar as células no celular, para caber sem rolagem nenhuma.
   2. overflow-x no contêiner como reserva — guia com mais colunas ainda
      poderá ser arrastada em vez de sumir.
   Em conteúdo de texto puro o overflow-x não muda nada: não há o que rolar. */
.product-tabs__content {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.product-tabs__content table {
    width: 100%;
    border-collapse: collapse;
}

@media ( max-width: 600px ) {
    .product-tabs__content table {
        font-size: var(--font-size-xs);
    }

    .product-tabs__content th,
    .product-tabs__content td {
        padding: var(--space-2) var(--space-1);
    }
}

.product-tabs__content p {
    margin-bottom: var(--space-4);
}

.product-tabs__empty,
.product-tabs__intro {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-5);
}

/* Tabela de tamanhos */
.size-table {
    border-collapse: collapse;
    width: 100%;
    max-width: 560px;
    font-size: var(--font-size-sm);
}

.size-table th,
.size-table td {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}

.size-table th {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-nav);
    text-transform: uppercase;
    color: var(--color-text);
    background-color: var(--color-bg-alt);
}

.size-table tr:last-child td {
    border-bottom: none;
}

/* Produtos relacionados */
.related-products {
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-10);
}

/* 4 colunas: a seção traz 8 produtos, fechando duas linhas de 4.

   O seletor precisa do pai: a lista carrega também a classe
   .hp-products-grid (para herdar o card da home), e sem o pai as duas
   regras empatam em especificidade e o resultado vira ordem de arquivo. */
.related-products .related-products__grid,
.related-products .hp-products-grid {
    grid-template-columns: repeat(4, 1fr);
}

/* 2 colunas no celular. Precisa repetir o seletor com o pai: a regra de 4
   colunas acima tem duas classes e vencia as regras móveis do tema, que têm
   só uma — o resultado eram 8 cards de 93px numa tela de 375px. */
@media ( max-width: 768px ) {
    .related-products .related-products__grid,
    .related-products .hp-products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* (O estilo do botão dos cards fica junto com .hp-product-card__hover-btn, lá em
   cima — não duplique aqui.) */

/* =============================================================================
   RESPONSIVO — ARCHIVE + SINGLE
   ============================================================================= */
@media ( max-width: 1024px ) {
    .archive-body__grid {
        grid-template-columns: 200px 1fr;
        gap: var(--space-6);
    }

    .archive-products-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .product-detail {
        gap: var(--space-8);
    }

    .related-products__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media ( max-width: 768px ) {
    /* Archive: sidebar via drawer */
    .archive-body__grid {
        grid-template-columns: 1fr;
    }

    .archive-toolbar__filter-btn {
        display: inline-flex;
    }

    .archive-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: 85%;
        max-width: 300px;
        height: 100vh;
        max-height: 100vh;
        background: var(--color-white);
        z-index: 600;
        padding: var(--space-6);
        transform: translateX(-100%);
        transition: transform var(--transition-normal);
        box-shadow: var(--shadow-lg);
    }

    .archive-sidebar.is-open {
        transform: translateX(0);
    }

    .archive-sidebar__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: var(--space-6);
        padding-bottom: var(--space-4);
        border-bottom: 1px solid var(--color-border);
    }

    .archive-sidebar__title {
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-bold);
        letter-spacing: var(--letter-spacing-nav);
        text-transform: uppercase;
    }

    .archive-sidebar__close {
        background: none;
        border: none;
        cursor: pointer;
        color: var(--color-text);
        padding: var(--space-1);
    }

    .archive-sidebar__overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.5);
        z-index: 599;
    }

    .archive-sidebar__overlay.is-open {
        display: block;
    }

    .archive-products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-3);
    }

    /* Single: galeria empilha */
    .product-detail {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }

    .product-gallery {
        position: static;
    }

    .product-info__title {
        font-size: var(--font-size-xl);
    }

    .product-info__price {
        font-size: var(--font-size-xl);
    }

    .related-products__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .archive-header__image {
        display: none;
    }
}

@media ( max-width: 480px ) {
    .archive-products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-2);
    }

    .product-form__size-btns {
        gap: var(--space-1);
    }

    .size-btn__label {
        min-width: 40px;
        height: 40px;
    }

    .product-form__actions {
        flex-direction: column;
    }

    .related-products__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* =============================================================================
   HOMEPAGE — front-page.php
   ============================================================================= */

/* --- Topbar marquee animado ---------------------------------------- */
@keyframes topbar-marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.site-topbar {
    position: relative;
    overflow: hidden;
    height: 34px;
    display: flex;
    align-items: center;
}

.site-topbar__marquee {
    flex: 1;
    overflow: hidden;
    height: 100%;
    display: flex;
    align-items: center;
}

.site-topbar__marquee-track {
    display: flex;
    white-space: nowrap;
    animation: topbar-marquee 24s linear infinite;
    will-change: transform;
}

.site-topbar__marquee-track span {
    display: inline-block;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
    padding-right: 0;
}

.site-topbar__marquee-track:hover {
    animation-play-state: paused;
}

.site-topbar__close {
    flex-shrink: 0;
    margin-left: var(--space-3);
    margin-right: var(--space-2);
    background: none;
    border: none;
    color: rgba(255,255,255,.7);
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    transition: color .2s;
}
.site-topbar__close:hover { color: #fff; }

/* --- Section titles ------------------------------------------------ */
.section-title {
    font-family: var(--font-heading);
    font-size: clamp(1.1rem, 2.5vw, 1.5rem);
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin: 0 0 var(--space-6);
}

.section-title--centered {
    text-align: center;
}

/* --- Hero Carousel ------------------------------------------------- */
.hero-carousel-section {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #111;
}

.hero-carousel {
    position: relative;
}

/* O JS rola o .carousel__track-wrapper, então é ele que precisa ser o container
   de scroll. A versão anterior punha overflow-x:auto no track e overflow:hidden
   no wrapper, criando um segundo scroller que o JS nunca tocava. */
.hero-carousel .carousel__track-wrapper {
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0;              /* o hero é full-bleed; o padding da regra base
                                (32px 24px) abriria uma faixa em volta */
}

.hero-carousel .carousel__track {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;                  /* zera o gap de 20px da regra base */
    overflow: visible;
    /* A regra base usa width:max-content. Com largura indefinida o
       flex-basis:100% dos slides não resolve e eles caem no width:280px de
       .carousel__item — era isso que deixava o banner do tamanho de um card. */
    width: 100%;
}

.hero-carousel__slide {
    flex: 0 0 100%;
    width: 100%;             /* sobrescreve o width:280px de .carousel__item */
    scroll-snap-align: start;
}

.hero-carousel__link {
    display: block;
    width: 100%;
    line-height: 0;
}

.hero-carousel__img {
    width: 100%;
    height: clamp(260px, 50vw, 640px);
    object-fit: cover;
    display: block;
}

.hero-carousel__placeholder {
    width: 100%;
    height: clamp(260px, 50vw, 640px);
    background: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-carousel__placeholder span {
    font-family: var(--font-heading);
    font-size: clamp(3rem, 10vw, 8rem);
    font-weight: 900;
    letter-spacing: 0.1em;
    color: rgba(255,255,255,.18);
    text-transform: uppercase;
}

/* Setas do hero */
.hero-carousel__arrow,
.hero-carousel .carousel__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    background: rgba(255,255,255,.85);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: background .2s, opacity .2s;
    color: var(--color-primary);
    box-shadow: 0 2px 8px rgba(0,0,0,.2);
}

.hero-carousel__arrow:hover,
.hero-carousel .carousel__arrow:hover {
    background: #fff;
}

.hero-carousel .carousel__arrow--prev { left: var(--space-4); }
.hero-carousel .carousel__arrow--next { right: var(--space-4); }

/* Dots do hero */
.hero-carousel .carousel__dots {
    position: absolute;
    bottom: var(--space-4);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: var(--space-2);
    z-index: 10;
}

.hero-carousel .carousel__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,.5);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background .2s, transform .2s;
}

.hero-carousel .carousel__dot[aria-current="step"],
.hero-carousel .carousel__dot.is-active {
    background: #fff;
    transform: scale(1.3);
}

/* --- Barra de benefícios ------------------------------------------- */
.benefits-bar {
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-4) 0;
    background: #fff;
}

.benefits-bar__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
}

.benefits-bar__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    justify-content: center;
}

.benefits-bar__icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.benefits-bar__icon svg {
    width: 36px;
    height: 36px;
}

.benefits-bar__text {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.benefits-bar__text strong {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-primary);
}

.benefits-bar__text span {
    font-size: 11px;
    color: var(--color-text-muted);
}

/* --- Carrossel de categorias --------------------------------------- */
.categories-section {
    padding: var(--space-12) 0 var(--space-12);
    background: #fff;
}

.categories-carousel {
    position: relative;
    margin-top: 0;
    padding: 0;
    /* Uma regra antiga (linha ~1293) deixa overflow:hidden aqui — o scroll
       horizontal já é cortado pelo .carousel__track-wrapper, então isso só
       servia pra cortar a bolinha ativa do carrossel por baixo. */
    overflow: visible;
}

.categories-carousel .carousel__track-wrapper {
    /* overflow-x:auto (e não hidden) é o que libera arrastar com o dedo. Com
       `hidden` o elemento continua rolando por JS — era por isso que as setas
       funcionavam e o dedo não: o navegador aceita scrollLeft programático
       mas recusa o gesto do usuário. A scrollbar já é escondida pela regra
       base .carousel__track-wrapper. */
    overflow-x: auto;
    overflow-y: hidden;
    padding: var(--space-2) 0 var(--space-4);
}

.categories-carousel .carousel__track {
    display: flex;
    gap: var(--space-3);
    list-style: none;
    /* Herdava width:max-content de uma regra antiga (.carousel__track base)
       que nunca foi zerada aqui — sem margem automática, o track só tinha o
       tamanho do conteúdo e ficava colado na esquerda em vez de centralizar
       quando os cards não preenchem a largura toda. Com scroll (conteúdo
       mais largo que o wrapper) a margem automática vira 0 sozinha, então
       isso não atrapalha o scroll normal. */
    margin: 0 auto;
    padding: 0 var(--space-8);
    /* Sem overflow-x nem scroll-snap-type aqui, de propósito. O track tem
       width:max-content, então nunca teve o que rolar — mas, por ser um
       scroll container, ele capturava o scroll-snap-align dos itens e os
       tirava do wrapper, que é quem de fato rola. Scroll, snap e ocultação
       da scrollbar ficam todos no .carousel__track-wrapper. */
}

.categories-carousel .carousel__track::-webkit-scrollbar { display: none; }

.categories-carousel .carousel__item {
    flex: 0 0 180px;
    scroll-snap-align: center;
}

/* Category card — proporcão 2:3, arredondado */
.category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    gap: var(--space-3);
}

.category-card__media {
    width: 100%;
    aspect-ratio: 2 / 3;
    border-radius: 12px;
    overflow: hidden;
    background: var(--color-bg-alt);
    position: relative;
}

/* CTA "Ver produtos" — some bem discreto, escorrega pra cima no hover */
.category-card__cta {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: var(--space-3) var(--space-2);
    background: rgba(24, 48, 41, 0.92);
    color: var(--color-white);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: center;
    opacity: 0;
    transform: translateY(100%);
    transition: opacity .25s ease, transform .25s ease;
    pointer-events: none;
}

.category-card:hover .category-card__cta,
.category-card:focus-visible .category-card__cta {
    opacity: 1;
    transform: translateY(0);
}

.category-card__media img,
.category-card__media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}

.category-card:hover .category-card__media img,
.category-card:hover .category-card__media video {
    transform: scale(1.04);
}

.category-card__placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(160deg, var(--color-primary) 0%, #2a4d3e 100%);
}

.category-card__name {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-primary);
    text-align: center;
    text-decoration: none;
}

/* Setas do carrossel de categorias */
.categories-carousel .carousel__arrow {
    top: 40%;
    width: 36px;
    height: 36px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0,0,0,.1);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    cursor: pointer;
    transform: translateY(-50%);
    z-index: 10;
    transition: background .2s, box-shadow .2s;
}

.categories-carousel .carousel__arrow:hover {
    background: var(--color-primary);
    color: #fff;
}

.categories-carousel .carousel__arrow--prev { left: var(--space-2); }
.categories-carousel .carousel__arrow--next { right: var(--space-2); }

.categories-carousel .carousel__dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: var(--space-4);
}

.categories-carousel .carousel__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-border);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background .2s, transform .2s;
}

.categories-carousel .carousel__dot[aria-current="step"],
.categories-carousel .carousel__dot.is-active {
    background: var(--color-primary);
    transform: scale(1.4);
}

/* --- Marcas — marquee CSS ------------------------------------------ */
@keyframes brands-marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.brands-marquee-section {
    background: var(--color-primary);
    padding: var(--space-4) 0;
    margin-top: var(--space-8);
    overflow: hidden;
}

.brands-marquee__outer {
    overflow: hidden;
    position: relative;
}

.brands-marquee__track {
    display: flex;
    align-items: center;
    /* width: max-content é obrigatório aqui. Sem ele o track é um flex block
       e herda a largura do pai (375px no celular), fazendo o translateX(-50%)
       do keyframe render só ~188px em vez dos ~2000px de um conjunto — o
       marquee rastejava e voltava ao início com 14 das 15 marcas nunca
       tendo aparecido. O -50% se mede sobre o próprio elemento, não sobre
       o conteúdo que transborda dele. */
    width: max-content;
    /* Espaçamento via margin-right no item, e não `gap`: com gap, 30 itens
       têm 29 intervalos, então metade da largura não corresponde a um
       conjunto inteiro e o loop dava um salto de meio intervalo por volta.
       Com margin cada item mede (logo + espaço), e metade de 30 é
       exatamente 15 — o conjunto duplicado fecha certinho. */
    white-space: nowrap;
    animation: brands-marquee 26s linear infinite;
    will-change: transform;
}

.brands-marquee__track:hover {
    animation-play-state: paused;
}

/* No celular cabem ~3 marcas na tela contra ~8 no desktop, então encurtar um
   pouco a volta compensa a sensação de fila parada — mas só um pouco: o
   track anda ~2005px por volta, então a duração vira velocidade direta
   (2005 ÷ segundos = px/s). Histórico do ajuste: 18s = 111 px/s (rápido
   demais), 24s = 84 px/s, 30s = 67 px/s (escolhido). Aumente para
   desacelerar. */
@media ( max-width: 768px ) {
    .brands-marquee__track {
        animation-duration: 30s;
    }
}

.brands-marquee__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    flex-shrink: 0;
    margin-right: var(--space-12);   /* ver nota no .brands-marquee__track */
    opacity: .75;
    transition: opacity .3s;
    /* Logos vêm em cores variadas; brightness(0)+invert(1) reduz qualquer um
       a um silhueta branca sólida, pra ficarem uniformes no fundo verde. */
    filter: brightness(0) invert(1);
}

.brands-marquee__item:hover {
    opacity: 1;
}

.brands-marquee__logo {
    height: 20px;
    width: auto;
    display: block;
}

/* Alguns logos (Ralph Lauren, Hugo Boss, Nike, Acostamento) têm traço fino ou
   bastante espaço vazio dentro da própria arte — na mesma altura de 26px eles
   pareciam bem menores que os logos "cheios" ao lado. Compensa com uma altura
   maior só pra esses. */
.brands-marquee__logo--lg {
    height: 30px;
}

.brands-marquee__placeholder {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-white);
}

/* --- Monte seu kit — carrossel de produtos -------------------------- */
.kits-section {
    background: var(--color-primary);
    padding: var(--space-10) 0 var(--space-12);
    /* Marcas (acima) também é verde — sem essa margem os dois blocos verdes
       se fundem em um só. Embaixo, separa do fundo branco de Mais Vendidos. */
    margin: var(--space-10) 0;
}

/* Fundo verde escuro: nome e preço do card (herdados de .hp-product-card,
   pensados pra fundo branco) precisam virar branco aqui, senão o texto
   escuro some em cima do verde. */
.kits-section .section-title {
    color: var(--color-white);
}

/* Título dourado só aqui. Funciona nesta seção porque o fundo é o verde
   escuro (6,26:1); o mesmo #c8a96e sobre o branco do grid comum daria
   2,24:1 e foi descartado por ilegibilidade. Hover inverte para branco. */
.kits-section .hp-product-card__name a {
    color: var(--color-accent);
}

.kits-section .hp-product-card__name a:hover {
    color: var(--color-white);
}

.kits-section .hp-product-card__price {
    color: var(--color-white);
}

.kits-section .hp-product-card__price-old,
.kits-section .hp-product-card__price del {
    color: rgba(255, 255, 255, .6);
}

.kits-section .hp-product-card__installment {
    color: rgba(255, 255, 255, .7);
}

.kits-section .hp-product-card__installment-note {
    color: rgba(255, 255, 255, .85);
}

/* O badge verde já contrasta com o fundo verde escuro do card de kit, mas
   ganha um contorno bem sutil pra não se misturar com a arte da foto.
   (Só o contorno é definido aqui — a cor vem da regra base.) */
.kits-section .hp-product-card__discount-badge {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .25);
}

.kits-carousel {
    position: relative;
}

.kits-carousel .carousel__track-wrapper {
    /* auto, não hidden — hidden bloqueia o arraste com o dedo (ver nota em
       .categories-carousel .carousel__track-wrapper). */
    overflow-x: auto;
    overflow-y: hidden;
    padding: var(--space-2) 0 var(--space-4);
}

.kits-carousel .carousel__track {
    display: flex;
    gap: var(--space-2);
    list-style: none;
    margin: 0;
    padding: 0 var(--space-8);
    /* Sem overflow-x nem scroll-snap-type aqui, de propósito. O track tem
       width:max-content, então nunca teve o que rolar — mas, por ser um
       scroll container, ele capturava o scroll-snap-align dos itens e os
       tirava do wrapper, que é quem de fato rola. Scroll, snap e ocultação
       da scrollbar ficam todos no .carousel__track-wrapper. */
}

.kits-carousel .carousel__track::-webkit-scrollbar { display: none; }

.kits-carousel .carousel__item {
    flex: 0 0 280px;
    scroll-snap-align: center;
}

/* .kit-card reaproveita a estrutura do .hp-product-card (imagem + info +
   preço) — só troca o botão de hover por um CTA branco em vez do padrão
   verde de "adicionar ao carrinho". */
/* Especificidade dobrada de propósito: .hp-product-card__media (mais abaixo
   no arquivo) também define "background" — mesma força de seletor, e a
   regra que vem depois no arquivo vence. Isso apagava esse degradê e
   deixava o fundo #f5f5f5 (quase branco) do card genérico aparecer atrás
   da foto sem fundo. Combinando as duas classes no seletor, essa regra
   passa a valer sempre, não importa a ordem no arquivo. */
.hp-product-card__media.kit-card__media {
    aspect-ratio: 2 / 3;
    border-radius: var(--border-radius-lg);
    /* As fotos vêm sem fundo (PNG/WebP transparente) — isso aqui é o que
       aparece através da parte transparente, atrás da roupa. É o ÚNICO
       lugar com o efeito de vidro: claro (contrasta com o verde escuro da
       seção) e translúcido, sem nenhum blur/tingimento em cima da própria
       foto — a roupa fica limpa e nítida, sem véu por cima. */
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.2) 100%);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.kit-card__placeholder {
    width: 100%;
    height: 100%;
    background: var(--color-gray-light);
}

/* Texto solto sobre o fundo de vidro (que já é claro) — sem caixa própria,
   cor escura pro contraste, já que agora o fundo é claro, não escuro. */
.kit-card__title {
    position: absolute;
    top: var(--space-5);
    left: var(--space-3);
    right: var(--space-3);
    z-index: 2;
    text-align: center;
    font-family: var(--font-heading);
    font-size: 21px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-primary);
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.4);
}

/* O badge de desconto usa a posição padrão (top-left) em Mais Vendidos e
   Lançamentos, mas nas fotos de kit esse canto tem o "MONTE SEU KIT" escrito
   na própria arte — o badge ficava em cima do texto. Move só aqui pro
   rodapé, onde a foto sempre tem fundo liso. */
.kit-card__media .hp-product-card__badge {
    top: auto;
    left: var(--space-3);
    bottom: var(--space-3);
    font-size: 14px;
    padding: 6px 12px;
}

/* CTA branco "Comprar agora" — mesmo comportamento do botão de hover do
   card de produto (.hp-product-card__hover-btn), só que branco: a foto do
   kit já tem fundo verde na própria arte, então o branco contrasta melhor
   que o verde da marca em cima dela. */
.kit-card__cta {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: var(--space-3) var(--space-2);
    background: rgba(255, 255, 255, .96);
    color: var(--color-primary);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    opacity: 0;
    transform: translateY(100%);
    transition: opacity .25s ease, transform .25s ease;
    z-index: 3;
}

.kit-card:hover .kit-card__cta,
.kit-card:focus-within .kit-card__cta {
    opacity: 1;
    transform: translateY(0);
}

/* Setas do carrossel de kits */
.kits-carousel .carousel__arrow {
    top: 45%;
    width: 36px;
    height: 36px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    cursor: pointer;
    transform: translateY(-50%);
    z-index: 10;
    transition: background .2s, color .2s;
}

.kits-carousel .carousel__arrow:hover {
    background: var(--color-accent);
    color: var(--color-primary);
}

.kits-carousel .carousel__arrow--prev { left: var(--space-2); }
.kits-carousel .carousel__arrow--next { right: var(--space-2); }

.kits-carousel .carousel__dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: var(--space-4);
}

.kits-carousel .carousel__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .3);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background .2s, transform .2s;
}

.kits-carousel .carousel__dot[aria-current="step"],
.kits-carousel .carousel__dot.is-active {
    background: var(--color-white);
    transform: scale(1.4);
}

/* --- Card de produto (homepage — compartilhado entre grids e carrosseis) */
.hp-products-section {
    padding: var(--space-14) 0;
    background: #fff;
}

.hp-launches-section {
    padding: var(--space-12) 0;
    background: var(--color-bg-alt);
}

.hp-products-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-8) var(--space-6);
}

.hp-product-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.hp-product-card__media {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    background: var(--color-bg-alt);
    aspect-ratio: 3 / 4;
}

.hp-product-card__img-link {
    display: block;
    width: 100%;
    height: 100%;
}

.hp-product-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}

.hp-product-card:hover .hp-product-card__media img {
    transform: scale(1.04);
}

.hp-product-card__no-img {
    width: 100%;
    height: 100%;
    background: linear-gradient(160deg, #e8e3da 0%, #d8d3ca 100%);
}

/* Coração */
.hp-product-card__wishlist {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    width: 32px;
    height: 32px;
    background: rgba(255,255,255,.85);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    text-decoration: none;
    z-index: 2;
    transition: background .2s, color .2s, transform .2s;
    backdrop-filter: blur(4px);
}

.hp-product-card__wishlist svg {
    width: 16px;
    height: 16px;
}

.hp-product-card__wishlist:hover {
    background: var(--color-primary);
    color: #fff;
    transform: scale(1.1);
}

/* Badge */
.hp-product-card__badge {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 2px;
    z-index: 2;
    line-height: 1.4;
}

.hp-product-card__badge--sale {
    background: #d0021b;
    color: #fff;
}

/* .hp-product-card__badge--new removido junto com a tag "Novo". */

/* Botão hover */
.hp-product-card__hover-btn {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--color-primary);
    transform: translateY(100%);
    transition: transform .3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    z-index: 3;
}

.hp-product-card:hover .hp-product-card__hover-btn {
    transform: translateY(0);
}

/* --- Botão de compra "solto" dentro da foto -------------------------------
   Na regra base o verde está na FAIXA, que gruda nas bordas (left/right/
   bottom: 0) e ocupa a largura toda; o botão interno é transparente.
   Aqui a lógica se inverte: a faixa fica transparente e ganha respiro, e o
   verde passa para o botão — que então aparece destacado, com a foto
   visível em volta.

   Vale só nas vitrines de PRODUTO: "Mais vendidos" da home, listagem de
   loja/categoria e "Produtos em destaque para você" (que carrega também a
   classe .hp-products-grid).

   Compre por Categoria, Kits com desconto e Lançamentos ficam DE FORA por
   decisão da Milena — por isso o escopo por container, em vez de alterar a
   regra base. Eles usam .category-card__cta, .kits-carousel e
   .launches-carousel__track, que não casam com estes seletores. */
.hp-products-grid .hp-product-card__hover-btn,
.archive-products-grid .hp-product-card__hover-btn,
.cart-carousel .hp-product-card__hover-btn {
    background: transparent;
    height: auto;
    padding: var(--space-3);
}

/* O !important repete o da regra base, que força `background: none` e
   `height: 100%` no elemento interno — sem repetir, o verde não aplica. */
.hp-products-grid .hp-product-card__hover-btn .button,
.hp-products-grid .hp-product-card__hover-btn a,
.hp-products-grid .hp-product-card__hover-btn button,
.archive-products-grid .hp-product-card__hover-btn .button,
.archive-products-grid .hp-product-card__hover-btn a,
.archive-products-grid .hp-product-card__hover-btn button,
.cart-carousel .hp-product-card__hover-btn .button,
.cart-carousel .hp-product-card__hover-btn a,
.cart-carousel .hp-product-card__hover-btn button {
    background: var(--color-primary) !important;
    border-radius: var(--border-radius-sm) !important;
    height: 42px !important;
    /* O rótulo é curto e fixo — nunca deve virar duas linhas. */
    white-space: nowrap !important;
}

/* Num card de 164px (2 colunas a 375px) "COMPRAR AGORA" pede 114px e só
   sobravam 108: o texto quebrava com "COMPRAR" em cima de "AGORA".
   O padding interno de 16px de cada lado era o que faltava — reduzido aqui,
   junto de um espaçamento de letra menor, sobram ~124px. */
@media ( max-width: 600px ) {
    .hp-products-grid .hp-product-card__hover-btn .button,
    .hp-products-grid .hp-product-card__hover-btn a,
    .hp-products-grid .hp-product-card__hover-btn button,
    .archive-products-grid .hp-product-card__hover-btn .button,
    .archive-products-grid .hp-product-card__hover-btn a,
    .archive-products-grid .hp-product-card__hover-btn button,
    .cart-carousel .hp-product-card__hover-btn .button,
    .cart-carousel .hp-product-card__hover-btn a,
    .cart-carousel .hp-product-card__hover-btn button {
        padding: 0 var(--space-2) !important;
        letter-spacing: .06em !important;
    }
}

/* Em tela de toque o botão aparece enquanto o dedo passa sobre o card —
   mesmo comportamento dos carrosséis, onde isso acontece sozinho porque o
   arrasto horizontal faz o navegador aplicar hover emulado no card sob o
   dedo. Na grade a rolagem é vertical e o navegador SUPRIME o hover durante
   o scroll, então o card nunca acendia. A classe é posta pelo JS
   (assets/js/main.js) a partir do toque.
   Não é "sempre visível": some assim que o dedo sai do card. */
.hp-products-grid .hp-product-card.is-touched .hp-product-card__hover-btn,
.archive-products-grid .hp-product-card.is-touched .hp-product-card__hover-btn {
    transform: translateY(0);
}


.hp-product-card__hover-btn .button,
.hp-product-card__hover-btn a,
.hp-product-card__hover-btn button {
    background: none !important;
    border: none !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    padding: 0 var(--space-4) !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    cursor: pointer !important;
}

/* Info do produto */
.hp-product-card__info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hp-product-card__name {
    font-size: 16px;
    font-weight: 900;
    margin: 0;
    line-height: 1.3;
}

.hp-product-card__name a {
    color: var(--color-text);
    text-decoration: none;
    transition: color .2s;
    /* O Storefront declara `h1 a … h6 a { font-weight: 300 }` no style.css do
       tema pai. Como o texto do card mora DENTRO do <a>, era esse 300 que ia
       pra tela: o peso do <h3> nunca chegava a ser desenhado, porque o <a>
       tem declaração própria e portanto não herda. Sem este `inherit` o
       título fica fino por mais que se aumente o font-weight do <h3>. */
    font-weight: inherit;
}

.hp-product-card__name a:hover { color: var(--color-primary); }

.hp-product-card__pricing {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.hp-product-card__price-old {
    font-size: 12px;
    color: var(--color-text-muted);
    text-decoration: line-through;
}

/* Selo verde de desconto ao lado do preço riscado. */
/* Verde #2E9E44 — o tom original, mantido a pedido da Milena. Chegou a ser
   âmbar por uma rodada; só o TAMANHO daquela versão foi preservado.
   Nota de contraste: branco sobre este verde dá 3,45:1, abaixo dos 4,5:1
   recomendados para texto pequeno. É escolha consciente de cor da marca. */
.hp-product-card__discount-badge {
    background: #2e9e44;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    padding: 4px 9px;
    border-radius: 4px;
    line-height: 1.3;
    white-space: nowrap;
}

.hp-product-card__price {
    font-size: 23px;
    font-weight: 700;
    color: var(--color-primary);
}

/* remove WooCommerce inner markup extra */
.hp-product-card__price .woocommerce-Price-amount { font-size: inherit; font-weight: inherit; color: inherit; }
.hp-product-card__price ins { text-decoration: none; }
.hp-product-card__price del { color: var(--color-text-muted); font-size: 12px; font-weight: 400; margin-right: 2px; }

.hp-product-card__installment {
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 400;
    color: var(--color-text);
    margin: 0;
}

.hp-product-card__installment-note {
    font-family: var(--font-heading);
    color: var(--color-primary);
    font-weight: 400;
    font-size: 10px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* --- Lançamentos carousel ------------------------------------------ */
.launches-carousel {
    position: relative;
    margin-top: var(--space-6);
}

.launches-carousel .carousel__track-wrapper {
    /* auto, não hidden — hidden bloqueia o arraste com o dedo (ver nota em
       .categories-carousel .carousel__track-wrapper). */
    overflow-x: auto;
    overflow-y: hidden;
    padding: var(--space-2) 0 var(--space-4);
}

.launches-carousel__track.carousel__track {
    display: flex;
    gap: var(--space-4);
    list-style: none;
    margin: 0;
    padding: 0 var(--space-8);
    /* Sem overflow-x nem scroll-snap-type aqui, de propósito. O track tem
       width:max-content, então nunca teve o que rolar — mas, por ser um
       scroll container, ele capturava o scroll-snap-align dos itens e os
       tirava do wrapper, que é quem de fato rola. Scroll, snap e ocultação
       da scrollbar ficam todos no .carousel__track-wrapper. */
}

.launches-carousel__track::-webkit-scrollbar { display: none; }

.launches-carousel .carousel__item {
    flex: 0 0 220px;
    scroll-snap-align: start;
}

.launches-carousel .carousel__arrow,
.launches-carousel__arrow {
    top: 40%;
    width: 36px;
    height: 36px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0,0,0,.1);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    cursor: pointer;
    transform: translateY(-50%);
    z-index: 10;
    transition: background .2s, box-shadow .2s;
}

.launches-carousel .carousel__arrow:hover {
    background: var(--color-primary);
    color: #fff;
}

.launches-carousel .carousel__arrow--prev { left: var(--space-2); }
.launches-carousel .carousel__arrow--next { right: var(--space-2); }

.launches-carousel .carousel__dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: var(--space-4);
}

.launches-carousel .carousel__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-border);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background .2s, transform .2s;
}

.launches-carousel .carousel__dot[aria-current="step"],
.launches-carousel .carousel__dot.is-active {
    background: var(--color-primary);
    transform: scale(1.4);
}

/* --- Avaliações ---------------------------------------------------- */
.reviews-section {
    padding: var(--space-14) 0;
    background: #fafaf8;
}

.reviews-carousel {
    position: relative;
    margin-top: var(--space-6);
}

.reviews-carousel .carousel__track-wrapper {
    /* auto, não hidden — hidden bloqueia o arraste com o dedo (ver nota em
       .categories-carousel .carousel__track-wrapper). */
    overflow-x: auto;
    overflow-y: hidden;
    padding: var(--space-2) var(--space-8);
}

.reviews-carousel__track.carousel__track {
    display: flex;
    gap: var(--space-6);
    list-style: none;
    margin: 0;
    padding: 0;
    /* Sem overflow-x nem scroll-snap-type aqui, de propósito. O track tem
       width:max-content, então nunca teve o que rolar — mas, por ser um
       scroll container, ele capturava o scroll-snap-align dos itens e os
       tirava do wrapper, que é quem de fato rola. Scroll, snap e ocultação
       da scrollbar ficam todos no .carousel__track-wrapper. */
}

.reviews-carousel__track::-webkit-scrollbar { display: none; }

.reviews-carousel .carousel__item {
    flex: 0 0 300px;
    scroll-snap-align: center;
}

.review-card {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    height: 100%;
}

.review-card__stars {
    display: flex;
    gap: 3px;
}

.review-card__stars svg {
    width: 16px;
    height: 16px;
}

.review-card__text {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-text);
    flex: 1;
}

.review-card__text p { margin: 0; }

.review-card__author {
    font-size: 13px;
    font-weight: 600;
    font-style: normal;
    color: var(--color-primary);
    letter-spacing: 0.05em;
}

.reviews-carousel .carousel__arrow {
    top: 50%;
    width: 36px;
    height: 36px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0,0,0,.1);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    cursor: pointer;
    transform: translateY(-50%);
    z-index: 10;
    transition: background .2s;
}

.reviews-carousel .carousel__arrow:hover {
    background: var(--color-primary);
    color: #fff;
}

.reviews-carousel .carousel__arrow--prev { left: 0; }
.reviews-carousel .carousel__arrow--next { right: 0; }

.reviews-carousel .carousel__dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: var(--space-6);
}

.reviews-carousel .carousel__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-border);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background .2s, transform .2s;
}

.reviews-carousel .carousel__dot[aria-current="step"],
.reviews-carousel .carousel__dot.is-active {
    background: var(--color-primary);
    transform: scale(1.4);
}

/* --- Newsletter ---------------------------------------------------- */
.newsletter-section {
    background: var(--color-primary);
    padding: var(--space-10) 0;
}

.newsletter-section__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
    align-items: center;
}

.newsletter-section__title {
    font-family: var(--font-heading);
    font-size: clamp(1.2rem, 2.5vw, 1.8rem);
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #fff;
    margin: 0 0 var(--space-2);
}

.newsletter-section__subtitle {
    font-size: 14px;
    color: rgba(255,255,255,.7);
    margin: 0;
}

.newsletter-section__field-wrap {
    display: flex;
    gap: 0;
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
}

.newsletter-section__input {
    flex: 1;
    border: none;
    padding: var(--space-3) var(--space-4);
    font-size: 14px;
    font-family: var(--font-body);
    color: var(--color-text);
    background: transparent;
    outline: none;
}

.newsletter-section__input::placeholder { color: var(--color-text-muted); }

.newsletter-section__btn {
    background: var(--color-accent);
    color: var(--color-primary);
    border: none;
    padding: var(--space-3) var(--space-5);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    font-family: var(--font-body);
    transition: background .2s;
    white-space: nowrap;
}

.newsletter-section__btn:hover { background: #b8954e; }

.newsletter-section__consent {
    font-size: 11px;
    color: rgba(255,255,255,.5);
    margin: var(--space-2) 0 0;
}

/* --- Homepage responsive ------------------------------------------- */
@media ( max-width: 1024px ) {
    .hp-products-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-6) var(--space-5);
    }

    .newsletter-section__inner {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .benefits-bar__list {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-4);
    }
}

@media ( max-width: 768px ) {
    .hp-products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-6) var(--space-5);
    }

    .categories-carousel .carousel__item {
        flex: 0 0 140px;
    }

    .kits-carousel .carousel__item {
        flex: 0 0 220px;
    }

    .launches-carousel .carousel__item {
        flex: 0 0 180px;
    }

    .reviews-carousel .carousel__item {
        flex: 0 0 260px;
    }

    .hero-carousel__arrow,
    .hero-carousel .carousel__arrow {
        width: 36px;
        height: 36px;
    }
}

@media ( max-width: 480px ) {
    .benefits-bar__list {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-3);
    }

    .benefits-bar__text strong { font-size: 11px; }

    .hp-products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-5) var(--space-4);
    }

    .categories-carousel .carousel__item {
        flex: 0 0 130px;
    }

    .kits-carousel .carousel__item {
        flex: 0 0 190px;
    }

    /* Em 190px de largura, "MONTE SEU KIT" a 21px quebrava em 3 linhas e
       tomava conta de boa parte do card — só reduz o tamanho aqui. */
    .kit-card__title {
        font-size: 15px;
    }

    .launches-carousel .carousel__item {
        flex: 0 0 160px;
    }

    .hero-carousel__arrow,
    .hero-carousel .carousel__arrow {
        display: none;
    }

    .newsletter-section { padding: var(--space-10) 0; }
    .newsletter-section__field-wrap { flex-direction: column; }
    .newsletter-section__btn { border-radius: 0 0 4px 4px; }
}

/* =============================================================================
   PÁGINA DE CATEGORIA — archive-product.php
   ============================================================================= */

/* --- Layout geral da página ---------------------------------------- */
.archive-page {
    background: #fff;
}

/* --- Seção do carrossel de subcategorias ----------------------------- */
.archive-cat-section {
    padding-top: 40px;
    padding-bottom: 8px;
}

/* --- Título "CONHEÇA TODOS OS MODELOS ABAIXO" ----------------------- */
.archive-models-section {
    padding: 48px 0 64px;
}

.archive-models-title {
    margin-bottom: 28px;
}

/* --- Barra de filtros: pills + select ------------------------------- */
.archive-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: 32px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--color-border);
}

/* Em /loja/ não há subcategoria, então a fileira de pills não é impressa e o
   select fica sozinho na barra. Com `space-between` e um filho só, ele iria
   para a ESQUERDA — a margem automática o mantém encostado à direita, com ou
   sem as pills ao lado. */
.archive-filter-bar > .archive-sort-form {
    margin-left: auto;
}

/* Pills de subcategoria */
.archive-filter-pills {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    flex: 1;
}

.archive-filter-pill {
    display: inline-flex;
    align-items: center;
    padding: 7px 16px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--color-text);
    text-decoration: none;
    white-space: nowrap;
    transition: border-color .2s, background .2s, color .2s;
    background: #fff;
}

.archive-filter-pill:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: rgba(24, 48, 41, .04);
}

.archive-filter-pill--active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.archive-filter-pill--active:hover {
    background: var(--color-primary);
    color: #fff;
}

/* Select de ordenação */
.archive-sort-form {
    flex-shrink: 0;
}

.archive-sort-select {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: 8px 32px 8px 14px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--color-primary);
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23183029' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 10px center;
    cursor: pointer;
    outline: none;
    transition: border-color .2s;
}

.archive-sort-select:hover,
.archive-sort-select:focus {
    border-color: var(--color-primary);
}

/* --- Grid de produtos da categoria (reaproveita hp-product-card) ---- */
.archive-products-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px 16px;
}

/* --- Paginação numerada -------------------------------------------- */
.archive-pagination {
    margin-top: 48px;
    display: flex;
    justify-content: center;
}

.archive-pagination .page-numbers {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.archive-pagination .page-numbers li {
    display: flex;
}

.archive-pagination .page-numbers a,
.archive-pagination .page-numbers span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 4px;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
    transition: background .2s, border-color .2s, color .2s;
    background: #fff;
}

.archive-pagination .page-numbers a:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.archive-pagination .page-numbers span.current {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.archive-pagination .page-numbers .dots {
    border: none;
    background: none;
    color: var(--color-text-muted);
}

/* --- Estado vazio --------------------------------------------------- */
.archive-empty {
    text-align: center;
    padding: var(--space-16) 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    color: var(--color-text-muted);
}

.archive-empty h2 {
    font-size: var(--font-size-xl);
    color: var(--color-primary);
}

.archive-empty p {
    font-size: var(--font-size-sm);
    max-width: 340px;
}

/* --- Responsivo da categoria --------------------------------------- */
@media ( max-width: 1024px ) {
    .archive-products-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 22px 12px;
    }
}

@media ( max-width: 768px ) {
    .archive-filter-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
    }

    .archive-filter-pills {
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-bottom: 4px;
        max-width: 100%;
    }

    .archive-filter-pills::-webkit-scrollbar { display: none; }

    .archive-sort-form {
        width: 100%;
    }

    .archive-sort-select {
        width: 100%;
    }

    .archive-products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px 10px;
    }
}

@media ( max-width: 480px ) {
    .archive-products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px 8px;
    }

    .archive-models-section {
        padding: 32px 0 48px;
    }
}

/* =============================================================================
   CARRINHO — cart.php

   Layout da referência da Brooksfield aprovada pela Milena: barra de frete
   grátis no topo, itens à esquerda, resumo em painel cinza à direita e vitrine
   de sugestões embaixo.

   Esta seção foi reescrita do zero na v3.10.0. A anterior estilizava um
   template que nunca chegou a rodar — a página do carrinho usava o bloco do
   Gutenberg, então nada daqui aparecia na tela.
   ============================================================================= */
.cart-page {
    padding: 0 0 var(--space-16);
}

/* O .page-layout do page.php já reserva 64px em cima. Somado ao respiro do
   carrinho sobrava um vão enorme antes do breadcrumb. */
.woocommerce-cart .page-layout {
    padding-top: var(--space-6);
}

/* Centralizado e sem a borda inferior que ele tem no resto do site: aqui o
   breadcrumb encosta no título, e a linha separava os dois. */
.cart-page__breadcrumb .woocommerce-breadcrumb {
    text-align: center;
    border-bottom: none;
    padding: 0;
    margin-bottom: var(--space-4);
}

.cart-page__breadcrumb .breadcrumb-sep {
    margin: 0 var(--space-2);
}

.cart-page__title {
    text-align: center;
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    margin: 0 0 var(--space-8);
}

/* -----------------------------------------------------------------------------
   BARRA DE FRETE GRÁTIS
   O valor mínimo vem de Personalizar > Loja. Ver a nota no cart.php: é aviso,
   não regra — nenhuma zona de entrega concede o frete hoje.
----------------------------------------------------------------------------- */
.cart-freeship {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: var(--space-4) var(--space-6) var(--space-5);
    margin-bottom: var(--space-8);
}

.cart-freeship__msg {
    margin: 0 0 var(--space-4);
    text-align: center;
    font-size: var(--font-size-sm);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text);
}

.cart-freeship__msg strong {
    font-weight: var(--font-weight-bold);
}

.cart-freeship__track {
    position: relative;
    height: 6px;
    border-radius: 999px;
    background-color: var(--color-gray-light);
}

.cart-freeship__fill {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    display: block;
    border-radius: 999px;
    background-color: var(--color-primary);
    transition: width var(--transition-normal);
}

/* Bolinha na ponta, como na referência. Fica ancorada na borda direita do
   preenchimento (e não da trilha) para andar junto com o progresso. */
.cart-freeship__knob {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate( 50%, -50% );
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: var(--color-primary);
}

/* -----------------------------------------------------------------------------
   ESTRUTURA
----------------------------------------------------------------------------- */
/* minmax(0,1fr) e não 1fr: `1fr` equivale a minmax(auto,1fr) e deixa o
   min-content dos nomes de produto inflarem a coluna, esmagando o resumo. */
.cart-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: var(--space-10);
    align-items: start;
}

/* -----------------------------------------------------------------------------
   ITENS
----------------------------------------------------------------------------- */
/* [foto] [nome + variação] [quantidade] [valor] [lixeira] */
.cart-items__head,
.cart-item {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr) 132px 110px 40px;
    gap: var(--space-4);
    align-items: center;
}

.cart-items__head {
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-nav);
    text-transform: uppercase;
    color: var(--color-text);
}

/* "PRODUTOS" alinha com o NOME, não com a foto — como na referência. Por isso
   o cabeçalho tem três rótulos num grid de cinco colunas: as posições vêm
   daqui, não da ordem no HTML. */
.cart-items__head span:nth-child(1) { grid-column: 2; }
.cart-items__head span:nth-child(2) { grid-column: 3; text-align: center; }
.cart-items__head span:nth-child(3) { grid-column: 4; text-align: center; }

.cart-items {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cart-item {
    padding: var(--space-5) 0;
    border-bottom: 1px solid var(--color-border);
}

.cart-item__media img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: var(--border-radius-md);
    background-color: var(--color-gray-light);
}

.cart-item__info {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.cart-item__name {
    margin: 0;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-regular);
    line-height: 1.35;
}

.cart-item__name a {
    color: var(--color-text);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.cart-item__name a:hover {
    color: var(--color-primary-light);
}

/* <dl class="cart-item__attrs">, montada no cart.php: um <dt> por atributo
   ("Cor:", "Tamanho:") com o valor no <dd>. O grid de duas colunas põe cada
   par na sua linha, com o rótulo em negrito, como na referência.

   Montada à mão e não por wc_get_formatted_cart_item_data(): aquela função
   omite todo atributo que já apareça no título, e o título de uma variação
   traz todos eles. Ver a nota no cart.php. */
.cart-item__attrs {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0 var(--space-1);
    margin: var(--space-1) 0 0;
    font-size: var(--font-size-sm);
    color: var(--color-text);
}

.cart-item__attrs dt {
    margin: 0;
    font-weight: var(--font-weight-bold);
}

.cart-item__attrs dd {
    margin: 0;
}

/* Preço unitário: só no celular, onde não sobra largura para uma coluna. */
.cart-item__unit {
    display: none;
}

/* ---- quantidade ---- */
.cart-item__qty {
    display: flex;
    justify-content: center;
}

.cart-item__qty .quantity {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
}

/* Quadrados verdes cheios, diferente da página de produto — lá os − / + são
   transparentes dentro de uma caixa com borda. O seletor leva o pai para
   vencer o `.qty-btn` daquela tela, que tem uma classe só. */
.cart-item__qty .qty-btn {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    min-height: 34px;
    padding: 0;
    border: none;
    border-radius: var(--border-radius-md);
    background-color: var(--color-primary);
    color: var(--color-white);
    font-size: 18px;
    font-weight: var(--font-weight-bold);
    line-height: 1;
}

/* Redeclarado por inteiro: o :hover global de button troca só background-color
   e color, e o que não é declarado não sobrescreve — sem isto o botão herdava
   o cinza-claro do .qty-btn:hover da página de produto. */
.cart-item__qty .qty-btn:hover,
.cart-item__qty .qty-btn:focus-visible {
    background-color: var(--color-primary-dark);
    color: var(--color-white);
}

.cart-item__qty .quantity input[type="number"] {
    width: 42px;
    height: 34px;
    min-height: 34px;
    padding: 0;
    text-align: center;
    border: none;
    background: transparent;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    /* Esconde as setinhas nativas: os − / + substituem elas. */
    -moz-appearance: textfield;
    appearance: textfield;
}

.cart-item__qty .quantity input[type="number"]::-webkit-outer-spin-button,
.cart-item__qty .quantity input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.cart-item__qty-fixed {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
}

/* ---- valor e remover ---- */
.cart-item__total {
    text-align: center;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    white-space: nowrap;
}

.cart-item__remove {
    display: flex;
    justify-content: flex-end;
}

.cart-item__remove-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--color-text-muted);
    border-radius: 50%;
    transition: color var(--transition-fast), background-color var(--transition-fast);
}

.cart-item__remove-btn:hover {
    color: #c0392b;
    background-color: #fdecea;
}

/* ---- atualização automática ---- */
/* O botão existe só para levar o par name/value `update_cart` no POST (ver a
   nota no cart.php). Fora da tela em vez de display:none, para continuar
   submetível pelo Enter no campo de quantidade. */
.cart-form__update-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect( 0 0 0 0 );
    clip-path: inset( 50% );
    white-space: nowrap;
    border: 0;
    min-height: 0;
}

/* Sinal de que o recálculo está a caminho: sem isso o clique no + fica um
   segundo inteiro sem resposta nenhuma. */
.js-cart-form.is-updating .cart-items {
    opacity: 0.55;
    pointer-events: none;
    transition: opacity var(--transition-fast);
}

.cart-back {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-5);
    font-size: var(--font-size-sm);
    color: var(--color-text);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.cart-back:hover {
    color: var(--color-primary-light);
}

/* -----------------------------------------------------------------------------
   RESUMO
----------------------------------------------------------------------------- */
.cart-aside {
    position: sticky;
    top: calc( var(--header-height) + var(--space-4) );
}

/* 12px de canto: os tokens do tema param em 8px (--border-radius-lg), e a
   referência pede um painel visivelmente mais arredondado que os botões. */
.cart-aside__box {
    background-color: var(--color-bg-alt);
    border-radius: 12px;
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* --color-border (#e5e5e5) some sobre o cinza do painel. */
.cart-aside__divider {
    border-top: 1px solid #dadada;
}

/* ---- cupom e CEP ---- */
/* Os dois blocos são a mesma coisa: rótulo em caixa alta, campo colado num
   botão à direita. O cupom já foi uma sanfona fechada, como na referência —
   a Milena pediu o campo aberto, igual ao do CEP. */
.cart-coupon__label,
.cart-cep__label {
    display: block;
    margin-bottom: var(--space-2);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-nav);
    text-transform: uppercase;
}

.cart-coupon__row,
.cart-cep__row {
    display: flex;
}

.cart-coupon__input,
.cart-cep__input {
    flex: 1;
    min-width: 0;
    min-height: 42px;
    border: 1px solid var(--color-border);
    border-right: none;
    border-radius: var(--border-radius-md) 0 0 var(--border-radius-md);
    background-color: var(--color-white);
    font-size: var(--font-size-sm);
    letter-spacing: var(--letter-spacing-nav);
}

.cart-coupon__input {
    text-transform: uppercase;
}

/* Os dois botões colam no campo à esquerda, então perdem o canto daquele lado.
   `.button` no seletor pelo mesmo motivo do botão de finalizar, logo abaixo:
   leva a (0,3,0) e vence a regra base sem depender da ordem no arquivo. */
.cart-aside__box .button.cart-coupon__btn,
.cart-aside__box .button.cart-cep__btn {
    flex-shrink: 0;
    min-height: 42px;
    padding: 0 var(--space-5);
    font-size: var(--font-size-xs);
    border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0;
}

.cart-coupon__applied {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.cart-coupon__tag {
    display: inline-flex;
    align-items: center;
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    padding: var(--space-1) var(--space-3);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-nav);
}

.cart-coupon__remove {
    color: var(--color-text-muted);
    font-size: 16px;
    line-height: 1;
    text-decoration: none;
    transition: color var(--transition-fast);
}

.cart-coupon__remove:hover {
    color: #c0392b;
}

/* ---- CEP ---- */
/* (o rótulo e a linha do campo estão agrupados com os do cupom, acima) */
.cart-cep__help {
    margin: var(--space-2) 0 0;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.cart-cep__forgot {
    display: inline-block;
    margin-top: var(--space-2);
    font-size: var(--font-size-xs);
    font-style: italic;
    text-decoration: underline;
    color: var(--color-text);
}

.cart-cep__forgot:hover {
    color: var(--color-primary-light);
}

/* ---- totais ---- */
.cart-totals {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.cart-totals__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    font-size: var(--font-size-sm);
}

.cart-totals__row > span:first-child {
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-nav);
    text-transform: uppercase;
}

.cart-totals__row--discount,
.cart-totals__row--free > span:last-child {
    color: #2e7d32;
}

.cart-totals__row--free > span:last-child {
    font-weight: var(--font-weight-bold);
}

.cart-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
}

.cart-total__label {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-nav);
    text-transform: uppercase;
}

.cart-total__value {
    font-size: 26px;
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    white-space: nowrap;
}

/* wc_cart_totals_order_total_html() imprime <strong> com o <span> de preço
   dentro, e às vezes um <small> de impostos. Neutraliza os três para o valor
   sair no tamanho definido acima. */
.cart-total__value strong,
.cart-total__value .woocommerce-Price-amount {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}

.cart-total__value small {
    display: none;
}

.cart-total__terms {
    margin: 0;
    text-align: right;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    line-height: 1.7;
}

/* Mesmo verde do "Comprar agora" da página de produto (#0f9d3a), a pedido da
   Milena — era o verde-marca (--color-primary), que fazia o botão mais
   importante do carrinho parecer mais discreto que o da página de produto.

   O TAMANHO DA FONTE VEM JUNTO, e não é escolha estética: branco sobre este
   verde dá 3,45:1, abaixo dos 4,5:1 que a norma exige para texto normal. A
   partir de 18,66px em negrito passa a valer o limite de "texto grande", 3:1,
   que este par cumpre. Aos 13px de antes o botão reprovaria em contraste.
   É a mesma amarração da regra do .product-form__buy-now — quem reduzir esta
   fonte precisa fechar o verde junto.

   `text-transform: none` pela mesma razão que na página de produto: caixa alta
   a 19px estoura a largura do botão no celular e quebra em duas linhas.

   ARMADILHA DE ESPECIFICIDADE, versão forte. A regra base da linha ~484 não
   agrupa só `.woocommerce .button` (0,2,0): agrupa também
   `.woocommerce a.button` (0,2,1). Este botão é um <a class="button">, então é
   a segunda que casa — e (0,2,1) atropela `.cart-aside__box .cart-checkout-btn`
   (0,2,0) por mais que venha antes no arquivo.

   Descoberto em 2026-08-24: a regra deste botão NUNCA aplicou desde que foi
   escrita. Passou despercebida porque a cor original era var(--color-primary),
   exatamente o que a regra base já pintava — só ao trocar para o verde-compra
   é que ficou visível que nada mudava. O min-height de 52px também nunca valeu:
   o botão saía com os 44px da base.

   Por isso `.button` no seletor, levando a (0,3,0): vence sem depender da
   ordem no arquivo. Qualquer <a class="button"> daqui pra frente precisa
   disso — duas classes não bastam. */
.cart-aside__box .button.cart-checkout-btn {
    width: 100%;
    min-height: 56px;
    background-color: #0f9d3a;
    border-color: #0f9d3a;
    color: #ffffff;
    font-size: 19px;          /* ver nota acima — não reduzir sem fechar o verde */
    font-weight: 700;
    text-transform: none;
    letter-spacing: .2px;
}

.cart-aside__box .button.cart-checkout-btn:hover,
.cart-aside__box .button.cart-checkout-btn:focus-visible {
    background-color: #0c8531;
    border-color: #0c8531;
    color: #ffffff;
}

/* -----------------------------------------------------------------------------
   CARRINHO VAZIO
----------------------------------------------------------------------------- */
.cart-empty {
    padding: var(--space-16) 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    color: var(--color-text-muted);
}

.cart-empty svg {
    color: var(--color-gray-mid);
}

.cart-empty h2 {
    font-size: var(--font-size-xl);
    color: var(--color-text);
    margin: 0;
}

.cart-empty p {
    margin: 0;
}

.cart-empty .cart-empty__btn {
    margin-top: var(--space-2);
}

/* -----------------------------------------------------------------------------
   ADICIONE JUNTO NO CARRINHO
   A <ul> carrega .hp-products-grid: é por essa classe que o CSS dos cards
   escopa o botão "Comprar agora" solto sobre a foto. Sem ela o botão vira a
   faixa verde de largura cheia, diferente da home e da listagem.
----------------------------------------------------------------------------- */
.cart-suggestions {
    margin-top: var(--space-16);
}

.cart-suggestions__title {
    text-align: center;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-regular);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    margin: 0 0 var(--space-4);
}

/* O carrossel reaproveita .launches-carousel inteiro (comportamento, medidas,
   setas e dots). .cart-carousel existe só para o que o carrinho pede
   diferente da home. */
.cart-carousel {
    margin-top: 0;
}

/* A folga vertical enorme do carrossel da home (40px em cima, 64px embaixo)
   foi criada para o card não bater no recorte quando cresce pela escala. Aqui
   a escala está desligada e essa folga deixaria um vão antes do rodapé.
   Três classes (0,3,0) para vencer a regra da home, que tem duas. */
.cart-suggestions .launches-carousel .carousel__track-wrapper {
    padding-top: var(--space-2);
    padding-bottom: var(--space-4);
}

/* Quando as sugestões cabem todas na tela não há o que rolar: setas e
   pontinhos viram enfeite morto. A classe é posta pelo main.js, que compara a
   largura do track com a do wrapper — contagem de cards não serve, porque
   quantos cabem depende do tamanho da tela. */
.cart-carousel.has-no-overflow .carousel__arrow,
.cart-carousel.has-no-overflow .carousel__dots {
    display: none;
}

/* Sem rolagem, dois cards encostados na esquerda deixavam a faixa toda vazia
   à direita. Centralizados, leem como uma fileira curta e proposital. */
.cart-carousel.has-no-overflow .carousel__track {
    width: 100%;
    justify-content: center;
}

/* -----------------------------------------------------------------------------
   RESPONSIVO — CARRINHO
----------------------------------------------------------------------------- */
@media ( max-width: 1024px ) {
    .cart-grid {
        grid-template-columns: minmax(0, 1fr) 320px;
        gap: var(--space-6);
    }

    .cart-items__head,
    .cart-item {
        grid-template-columns: 96px minmax(0, 1fr) 118px 96px 36px;
    }
}

@media ( max-width: 860px ) {
    .cart-grid {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    .cart-aside {
        position: static;
    }
}

@media ( max-width: 600px ) {
    .cart-page__title {
        font-size: var(--font-size-xl);
    }

    .cart-freeship {
        padding: var(--space-3) var(--space-4) var(--space-4);
    }

    .cart-items__head {
        display: none;
    }

    /* Duas linhas: foto ocupando as duas à esquerda, nome e lixeira em cima,
       quantidade e valor embaixo. A terceira coluna é `auto` para caber o
       preço — fixada em 36px (a largura da lixeira) o valor quebraria. */
    .cart-item {
        grid-template-columns: 92px minmax(0, 1fr) auto;
        gap: var(--space-3) var(--space-4);
        align-items: start;
    }

    .cart-item__media  { grid-column: 1; grid-row: 1 / 3; }
    .cart-item__info   { grid-column: 2; grid-row: 1; }
    .cart-item__remove { grid-column: 3; grid-row: 1; }

    .cart-item__qty {
        grid-column: 2;
        grid-row: 2;
        justify-content: flex-start;
        align-self: center;
    }

    .cart-item__total {
        grid-column: 3;
        grid-row: 2;
        text-align: right;
        align-self: center;
    }

    /* Sem a coluna de preço unitário no cabeçalho, o total do item sozinho não
       diz quanto custa UMA peça. */
    .cart-item__unit {
        display: block;
        margin: var(--space-1) 0 0;
        font-size: var(--font-size-sm);
        color: var(--color-text-muted);
    }

    .cart-aside__box {
        padding: var(--space-5);
    }

    .cart-suggestions__title {
        font-size: var(--font-size-lg);
    }
}

/* =============================================================================
   CHECKOUT — form-checkout.php
   ============================================================================= */
.checkout-layout {
    padding: var(--space-8) 0 var(--space-16);
}

.checkout-layout__title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    margin-bottom: var(--space-6);
}

/* Indicador de etapas */
.checkout-steps {
    margin-bottom: var(--space-8);
}

.checkout-steps__list {
    display: flex;
    align-items: center;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 480px;
}

.checkout-steps__item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-nav);
    text-transform: uppercase;
    color: var(--color-gray-mid);
    flex: 1;
    position: relative;
}

.checkout-steps__item::after {
    content: '';
    display: block;
    flex: 1;
    height: 1px;
    background: var(--color-border);
    margin: 0 var(--space-3);
}

.checkout-steps__item:last-child::after {
    display: none;
}

.checkout-steps__num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1.5px solid var(--color-gray-mid);
    font-size: var(--font-size-xs);
    flex-shrink: 0;
}

.checkout-steps__item--done .checkout-steps__num {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

.checkout-steps__item--done {
    color: var(--color-primary);
}

.checkout-steps__item--active .checkout-steps__num {
    border-color: var(--color-primary);
    color: var(--color-primary);
    font-weight: var(--font-weight-bold);
}

.checkout-steps__item--active {
    color: var(--color-primary);
}

/* Body: 2 colunas */
.checkout-body {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: var(--space-10);
    align-items: start;
}

/* Aviso de login */
.checkout-login-notice {
    background-color: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    padding: var(--space-4) var(--space-5);
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-6);
}

.checkout-login-notice p {
    margin: 0;
}

.checkout-login-notice__link {
    color: var(--color-primary);
    text-decoration: underline;
}

/* Seções do formulário */
.checkout-section {
    margin-bottom: var(--space-8);
    padding-bottom: var(--space-8);
    border-bottom: 1px solid var(--color-border);
}

.checkout-section:last-child {
    border-bottom: none;
}

.checkout-section__title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-nav);
    text-transform: uppercase;
    margin: 0 0 var(--space-6);
}

.checkout-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
    flex-wrap: wrap;
}

.checkout-section__header .checkout-section__title {
    margin: 0;
}

.checkout-section__toggle {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    color: var(--color-text-muted);
}

.checkout-section__toggle input[type="checkbox"] {
    width: auto;
    min-height: auto;
}

/* Campos agrupados */
.checkout-fields {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.checkout-fields__row {
    display: grid;
    gap: var(--space-4);
}

.checkout-fields__row--2col {
    grid-template-columns: 1fr 1fr;
}

.checkout-fields__row--cep {
    grid-template-columns: 1fr;
    max-width: 300px;
}

.checkout-fields__cep-help {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin: 0;
}

.checkout-fields__cep-help a {
    color: var(--color-text-muted);
    text-decoration: underline;
}

/* Override do campo gerado pelo WooCommerce */
.checkout-field,
.checkout-field .form-row,
.woocommerce-checkout .form-row {
    margin: 0;
    padding: 0;
}

.checkout-field .form-row label,
.woocommerce-checkout .form-row label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.3px;
    text-transform: none;
    margin-bottom: var(--space-1);
    display: block;
}

.checkout-field .form-row input,
.checkout-field .form-row select,
.checkout-field .form-row textarea,
.woocommerce-checkout .form-row input,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea {
    min-height: 44px;
    font-size: var(--font-size-base);
}

/* Gateways de pagamento */
.checkout-payment-gateway {
    border: 1.5px solid var(--color-border);
    border-radius: var(--border-radius-md);
    overflow: hidden;
    margin-bottom: var(--space-3);
    transition: border-color var(--transition-fast);
}

.checkout-payment-gateway.is-active {
    border-color: var(--color-primary);
}

.checkout-payment-gateway__label {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    cursor: pointer;
    background-color: var(--color-white);
}

.checkout-payment-gateway__radio {
    width: auto;
    min-height: auto;
    flex-shrink: 0;
    accent-color: var(--color-primary);
}

.checkout-payment-gateway__name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    flex: 1;
}

.checkout-payment-gateway__content {
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--color-border);
    background-color: var(--color-bg-alt);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.checkout-payment-gateway__desc {
    margin: 0 0 var(--space-3);
}

.checkout-no-payment {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

/* ---- RESUMO STICKY ---- */
.checkout-summary {
    position: sticky;
    top: calc( var(--header-height) + var(--topbar-height) + var(--space-4) );
}

.checkout-summary__inner {
    background-color: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    padding: var(--space-6);
}

.checkout-summary__title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-nav);
    text-transform: uppercase;
    margin: 0 0 var(--space-5);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

/* Lista de itens no resumo */
.checkout-summary__items {
    list-style: none;
    margin: 0 0 var(--space-4);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.checkout-summary__item {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: var(--space-3);
    align-items: start;
}

.checkout-summary__item-img {
    position: relative;
    width: 64px;
}

.checkout-summary__item-img img {
    width: 64px;
    height: 84px;
    object-fit: cover;
    border-radius: var(--border-radius-sm);
    display: block;
}

.checkout-summary__item-qty {
    position: absolute;
    top: -6px;
    right: -6px;
    background-color: var(--color-primary);
    color: var(--color-white);
    font-size: 10px;
    font-weight: var(--font-weight-bold);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.checkout-summary__item-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.checkout-summary__item-name {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    line-height: 1.3;
    color: var(--color-text);
}

/* Variações no resumo */
.checkout-summary__item .wc-item-meta {
    font-size: 10px;
    color: var(--color-text-muted);
    margin: 0;
}

.checkout-summary__item-price {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    white-space: nowrap;
}

.checkout-summary__divider {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: var(--space-4) 0;
}

.checkout-summary__totals {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.checkout-summary__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--font-size-sm);
    gap: var(--space-2);
}

.checkout-summary__row--discount {
    color: #2e7d32;
}

.checkout-summary__row--total {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
}

/* Botão confirmar pedido */
.checkout-summary__submit {
    margin-top: var(--space-5);
}

.checkout-summary__btn {
    width: 100%;
    background-color: #183029;
    color: #ffffff;
    border-color: #183029;
    min-height: 52px;
    font-size: var(--font-size-sm);
    letter-spacing: var(--letter-spacing-nav);
}

.checkout-summary__btn:hover {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: #ffffff;
}

.checkout-summary__security {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    justify-content: center;
    margin-top: var(--space-4);
}

/* =============================================================================
   FOOTER
   ============================================================================= */
.site-footer {
    background-color: #f5f5f5;
    border-top: 1px solid var(--color-border);
    padding: var(--space-12) 0 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* 4 colunas de widgets */
.site-footer__widgets {
    display: grid;
    /* A coluna da logo era 1.4fr — bem mais larga que a logo em si, e essa
       sobra empurrava as colunas de link pra longe dela. Fixando uma largura
       que cabe só a logo, as outras colunas puxam pra mais perto. */
    grid-template-columns: minmax(160px, 200px) 1fr 1.2fr 1.3fr;
    gap: var(--space-8);
    padding-bottom: var(--space-10);
}

/* Coluna de brand — só a logo agora, então centraliza verticalmente na
   altura da linha (as outras colunas têm mais conteúdo e ficam mais altas,
   o que empurrava a logo sozinha lá pro topo). */
.site-footer__col--brand {
    display: flex;
    align-items: center;
}

.footer-brand {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.footer-brand__name {
    font-family: var(--font-heading);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    color: var(--color-primary);
    text-decoration: none;
}

.footer-brand img {
    max-height: 64px;
    width: auto;
}

.footer-brand__desc {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-body);
    color: var(--color-text-muted);
    margin: 0;
    max-width: 260px;
}

/* Redes sociais */
.footer-social {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.footer-social__link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    color: var(--color-text-muted);
    text-decoration: none;
    transition: border-color var(--transition-fast), color var(--transition-fast), background-color var(--transition-fast);
}

.footer-social__link:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background-color: rgba(24, 48, 41, .06);
}

/* Título das colunas */
.site-footer__col-title {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-nav);
    text-transform: uppercase;
    color: var(--color-text);
    margin: 0 0 var(--space-4);
}

.site-footer__col-title--sub {
    margin-top: var(--space-6);
}

.site-footer__col-desc {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-body);
    color: var(--color-text-muted);
    margin: 0 0 var(--space-4);
}

/* Navegação do footer */
.footer-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.footer-nav__list a {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.footer-nav__list a:hover {
    color: var(--color-primary);
}

/* Contato */
.footer-contact__link {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.footer-contact__link:hover {
    color: var(--color-primary);
}

.footer-contact__hours {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    line-height: var(--line-height-body);
}

/* Newsletter */
.footer-newsletter {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.footer-newsletter__group {
    display: flex;
    gap: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    transition: border-color var(--transition-fast);
}

.footer-newsletter__group:focus-within {
    border-color: var(--color-primary);
}

.footer-newsletter__input {
    flex: 1;
    border: none;
    border-radius: 0;
    min-height: 44px;
    font-size: var(--font-size-sm);
    padding: var(--space-2) var(--space-4);
    background-color: var(--color-white);
}

.footer-newsletter__input:focus {
    outline: none;
    box-shadow: none;
    border-color: transparent;
}

.footer-newsletter__btn {
    background-color: var(--color-primary);
    color: var(--color-white);
    border: none;
    border-radius: 0;
    padding: 0 var(--space-4);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    transition: background-color var(--transition-fast);
}

.footer-newsletter__btn:hover {
    background-color: var(--color-primary-dark);
}

.footer-newsletter__consent {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.4;
}

/* Barra inferior — selos de garantia, depois pagamento, depois copyright,
   cada um na sua própria linha (pedido explícito: layout empilhado, não
   lado a lado). */
.site-footer__bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5) 0 var(--space-6);
    /* Zera o border-top de uma regra mais antiga (linha ~753) que nunca foi
       limpa — junto com o border-bottom do .site-footer__widgets logo
       acima, formava duas linhas bem próximas uma da outra. */
    border-top: none;
}

.site-footer__trust-seals {
    max-width: 280px;
    width: 100%;
    height: auto;
    display: block;
    margin-top: var(--space-5);
}

.site-footer__copy {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.site-footer__bottom-sep {
    color: var(--color-gray-mid);
}

.site-footer__copy a {
    color: var(--color-text-muted);
    text-decoration: underline;
}

.site-footer__copy a:hover {
    color: var(--color-primary);
}

/* Selos de pagamento */
.site-footer__payments {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    margin-top: var(--space-3);
}

/* A coluna do rodapé é estreita demais pra 6 selos de 50px lado a lado — o
   boleto sempre quebrava pra segunda linha. Encolhe só aqui pra caber tudo
   numa fileira só, como pedido. */
.site-footer__payments .payment-badge {
    width: 38px;
    height: 24px;
    flex-shrink: 0;
}

.payment-badge {
    display: block;
    border-radius: 4px;
    opacity: .8;
    transition: opacity var(--transition-fast);
}

.payment-badge:hover {
    opacity: 1;
}

.payment-badge--text {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.3px;
    white-space: nowrap;
}

/* =============================================================================
   RESPONSIVO — CARRINHO, CHECKOUT E FOOTER
   ============================================================================= */
@media ( max-width: 1024px ) {
    .checkout-body {
        grid-template-columns: 1fr 320px;
    }

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

@media ( max-width: 768px ) {
    /* Checkout: empilhar */
    .checkout-body {
        grid-template-columns: 1fr;
    }

    .checkout-summary {
        position: static;
        order: -1;   /* resumo aparece antes do formulário no mobile */
    }

    .checkout-fields__row--2col {
        grid-template-columns: 1fr;
    }

    .checkout-steps__label {
        display: none;   /* esconde rótulos das etapas em telas pequenas */
    }

    /* Footer: mantém as listas de links lado a lado no mobile — pedido
       explícito pra não empilhar tudo verticalmente.

       minmax(0, 1fr) em vez de 1fr: `1fr` equivale a minmax(auto, 1fr), e o
       min-content do campo de e-mail da newsletter inflava a coluna da
       direita pra 248px, esmagando a esquerda pra 96px. Era por isso que
       "Seg–Sex: 9h às 18h", "Prazo de entrega" e "Trocas e devoluções"
       quebravam no meio da frase. Com minmax(0,…) as duas ficam iguais. */
    .site-footer__widgets {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-6) var(--space-4);
    }

    /* Logo e newsletter passam a ocupar a linha inteira. A logo sozinha numa
       célula tão alta quanto a lista de categorias deixava um vazio enorme
       embaixo dela, e o campo de e-mail não cabe em meia largura. Lado a
       lado sobram só as duas listas de links, que é o que importa ali. */
    .site-footer__widgets > .site-footer__col--brand,
    .site-footer__widgets > .site-footer__col:nth-child(4) {
        grid-column: 1 / -1;
    }

    /* Logo centralizada na largura inteira e com respiro antes das listas de
       links — encostada nelas ela lia como se fizesse parte da primeira
       coluna, em vez de assinar o rodapé. */
    .site-footer__widgets > .site-footer__col--brand {
        justify-content: center;
        margin-bottom: var(--space-8);
    }

    .site-footer__col--brand {
        align-items: flex-start;
    }

    .footer-brand__desc {
        max-width: 100%;
    }

    /* Sem isto o input reimpõe seu min-content e estoura a coluna de novo. */
    .footer-newsletter__input {
        min-width: 0;
    }

    .site-footer__bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-4);
    }
}

@media ( max-width: 480px ) {
    .site-footer__payments {
        gap: var(--space-1);
    }
}

/* =============================================================================
   PÁGINAS DE CONTEÚDO (page.php, single.php, index.php, 404.php)
   Templates que antes caíam no Storefront e renderizavam sem container.
   ============================================================================= */
.page-layout {
    padding: var(--space-16) 0;
}

.page-article__header {
    margin-bottom: var(--space-10);
    text-align: center;
}

.page-article__title {
    font-family: var(--font-heading);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-light);
    letter-spacing: var(--letter-spacing-heading);
    color: var(--color-primary);
    margin: 0;
}

.page-article__meta {
    margin-top: var(--space-3);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.page-article__media {
    margin: 0 0 var(--space-10);
}

.page-article__media img {
    width: 100%;
    height: auto;
    display: block;
}

/* Corpo de texto legível: coluna estreita e centralizada. */
.page-article__content {
    max-width: 68ch;
    margin: 0 auto;
    color: var(--color-text);
    line-height: 1.75;
}

.page-article__content > * + * {
    margin-top: var(--space-5);
}

.page-article__content h2,
.page-article__content h3 {
    font-family: var(--font-heading);
    color: var(--color-primary);
    margin-top: var(--space-10);
    margin-bottom: var(--space-4);
}

.page-article__content ul,
.page-article__content ol {
    padding-left: var(--space-6);
}

.page-article__content li + li {
    margin-top: var(--space-2);
}

.page-article__content a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Formulários do WooCommerce dentro de páginas (Minha Conta, etc.) não devem
   esticar até a borda: o Storefront deixa os inputs em 100% do viewport. */
.page-layout .woocommerce-account .woocommerce,
.page-layout .woocommerce-form-login,
.page-layout .woocommerce-form-register {
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

.page-layout .woocommerce-MyAccount-navigation,
.page-layout .woocommerce-MyAccount-content {
    max-width: none;
}

/* --- 404 ------------------------------------------------------------------ */
.page-404 {
    text-align: center;
    max-width: 560px;
    margin: 0 auto;
}

.page-404__code {
    font-family: var(--font-heading);
    font-size: 96px;
    line-height: 1;
    font-weight: var(--font-weight-light);
    color: var(--color-gray-mid);
    margin: 0 0 var(--space-4);
}

.page-404__title {
    font-family: var(--font-heading);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-light);
    letter-spacing: var(--letter-spacing-heading);
    color: var(--color-primary);
    margin: 0 0 var(--space-4);
}

.page-404__text {
    color: var(--color-text-muted);
    margin: 0 0 var(--space-8);
}

.page-404__search {
    margin: 0 auto var(--space-8);
    max-width: 420px;
}

.page-404__actions {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
    flex-wrap: wrap;
}

/* --- Listagem de posts ---------------------------------------------------- */
.post-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-10) var(--space-6);
}

.post-card__media img {
    width: 100%;
    height: auto;
    display: block;
}

.post-card__title {
    font-family: var(--font-heading);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-normal);
    margin: var(--space-4) 0 var(--space-2);
}

.post-card__title a {
    color: var(--color-primary);
    text-decoration: none;
}

.post-card__title a:hover {
    color: var(--color-primary-light);
}

.post-card__meta {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-nav);
    margin: 0 0 var(--space-3);
}

.post-card__excerpt {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    line-height: 1.7;
}

@media (max-width: 1024px) {
    .post-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .page-layout {
        padding: var(--space-10) 0;
    }

    .post-list {
        grid-template-columns: 1fr;
    }

    .page-404__code {
        font-size: 64px;
    }
}


/* =============================================================================
   AJUSTES v1.3.0 — recorte dos carrosséis, cantos e menu

   Três problemas que apareceram quando a loja ganhou conteúdo real.
   ============================================================================= */

/* --- 1. Cards cortados nos carrosséis ---------------------------------------
   O carousel.js escala o card central em 1.08 com transform-origin bottom
   center e aplica sombra de 48px de blur. Os wrappers tinham 8px de folga em
   cima: o card crescia 26px para cima e batia no overflow:hidden — era o corte
   que aparecia em LANÇAMENTOS e AVALIAÇÕES. Não dá para trocar por
   overflow-y:visible (com overflow-x:auto o CSS força auto nos dois eixos),
   então a folga vira padding. */
.launches-carousel .carousel__track-wrapper {
    padding-top: var(--space-10);
    padding-bottom: var(--space-16);
}

/* Categorias não usa mais o efeito de escala (data-effect="none"), então não
   precisa da folga grande acima — só o respiro padrão. */
.categories-carousel .carousel__track-wrapper {
    padding-top: var(--space-2);
    padding-bottom: var(--space-4);
}

.reviews-carousel .carousel__track-wrapper {
    padding-top: var(--space-8);
    padding-bottom: var(--space-12);
}

/* --- 2. Cantos arredondados -------------------------------------------------
   .category-card e o card de avaliação já usavam --border-radius-lg; o card de
   produto estava em 4px e o slide do hero em 0. Agora os quatro seguem o mesmo
   raio, senão a mesma página mistura card redondo e card quadrado. */
.hp-product-card__media {
    border-radius: var(--border-radius-lg);
}

/* O hero fica sem raio de propósito: ele é full-bleed, então os cantos
   arredondados cairiam exatamente nos cantos da janela e leriam como falha de
   renderização, não como acabamento. O arredondamento vale para os cards. */

/* A altura era clamp(260px, 50vw, 640px). Numa janela de 1280 isso dá 640px de
   altura para um banner de proporção 1920x700 — com object-fit:cover o
   navegador escalava pela altura e cortava 238px de cada lado, comendo o texto
   do banner. Agora a altura acompanha a proporção real da arte. */
.hero-carousel__img {
    /* Altura amarrada ao que sobra da tela (100vh menos topbar + header + nav
       + barra de benefícios, ~260px), não à largura — assim o header, o
       banner e a barra de benefícios sempre cabem juntos na primeira tela,
       sem precisar rolar. */
    height: clamp(240px, calc(100vh - 230px), 480px);
    /* Só corta em telas estreitas, e aí corta a foto — nunca o texto. */
    object-position: left center;
}

/* O vídeo herda o raio do .category-card (que já tem overflow:hidden), mas
   Safari vaza o canto de elementos de mídia em container arredondado. */
.category-card__media video,
.category-card__media img {
    border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
}

/* --- 3. Menu principal ------------------------------------------------------
   Com as categorias reais o menu passou de 1400px numa janela de 1280 e
   empurrava a página inteira (barra de rolagem horizontal). Os rótulos foram
   encurtados no próprio menu; aqui fica a folga para janelas estreitas.
   Sem overflow-x — cortaria os dropdowns de subcategoria. */
.site-nav__inner {
    max-width: 100%;
}

/* Segunda rodada do mesmo aperto (2026-08-24): com as 10 categorias da
   estrutura definitiva no ar, o menu voltou a passar do container — 1516px em
   1265px. Encurtar rótulo resolveu a maior parte ("Jaquetas e Corta Vento" e
   "Suéter e Blusas Manga Longa" viraram "Jaquetas" e "Suéter e Blusas" NO
   MENU; a categoria mantém o nome inteiro), mas sobrava folga de só 9px.

   O padding é o que resta para cortar sem mexer em mais nomes: 4px a menos de
   cada lado, em 11 itens, devolvem 88px. Mudar o font-size afetaria a leitura;
   o espaçamento entre letras é o que dá o ar de vitrine e fica como está. */
.site-nav__menu > li > a {
    padding: 0 var(--space-3);
}

@media (max-width: 1200px) {
    .site-nav__menu > li > a {
        padding: 0 var(--space-3);
        letter-spacing: .08em;
    }
}

/* =============================================================================
   PÁGINA DE PRODUTO — coluna de compra empurrada para fora da tela

   Sintoma: a foto principal ocupava a página inteira e não havia título, preço
   nem botão de comprar. Eles existiam no HTML, mas em x=1664 numa janela de
   1440 — fora da tela.

   Causa: `.product-detail` é `grid-template-columns: 1fr 1fr`, e item de grid
   nasce com `min-width: auto` — ou seja, não encolhe abaixo do min-content do
   conteúdo. A tira de miniaturas é um flex nowrap: o min-content dela é a SOMA
   das miniaturas. Com 19 fotos (Jaqueta Sport) isso dá 1512px, então a primeira
   coluna virou 1512px e empurrou a segunda para fora.

   O `overflow-x: auto` que a tira já tinha não resolve: ele permite rolar, mas
   não reduz o min-content que o elemento reporta ao pai.

   Por isso só apareceu agora — antes da carga real nenhum produto tinha foto
   suficiente para estourar a coluna. É o mesmo `minmax(0, 1fr)` que já foi
   preciso no grid do cabeçalho.
   ============================================================================= */
/* Só a partir de 769px: abaixo disso o tema empilha a galeria com
   `grid-template-columns: 1fr`, e como este bloco vem depois no arquivo ele
   venceria o media query e deixaria duas colunas de ~170px no celular. */
@media (min-width: 769px) {
    /* O minmax(0, …) é o que evita o estouro descrito acima. Com as
       miniaturas de volta em tira horizontal, esse risco está ATIVO —
       não troque por `1fr` puro. */
    .product-detail {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

.product-detail > * {
    min-width: 0;
}

/* A tira de miniaturas rola dentro da própria coluna, sem esticar o layout. */
.product-gallery__thumbs {
    max-width: 100%;
}

/* A foto é 3:4, então a ALTURA é sempre 1,33× a largura — e era ela que não
   cabia: 464px de largura viravam 619px de altura, mais do que sobra na tela
   depois de cabeçalho, faixa de benefícios e breadcrumb.

   Em vez de um número fixo (que resolveria num monitor e quebraria noutro),
   a largura acompanha a altura disponível:
     (100vh - 300px)  = espaço vertical restante, descontado o que vem acima
     × 0.75           = converte altura em largura na proporção 3:4
   O clamp segura os extremos: nunca menor que 340px (ilegível) nem maior que
   460px (volta a não caber em monitor de notebook).

   Efeito prático: em tela alta fica praticamente do tamanho de antes; em tela
   baixa ou com zoom do navegador aumentado, encolhe sozinha. */
.product-gallery__main {
    max-width: clamp( 300px, calc( ( 100vh - 300px ) * 0.75 ), 460px );
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 1024px) {
    .product-gallery__main {
        max-width: none;
    }
}

/* O favoritar da página de produto saiu daqui: ele migrou para cima da imagem
   (.product-gallery__action), onde não disputa espaço com o "Comprar agora".
   A lição sobre botões de ícone deste tema foi para lá junto. */

/* --- Botões de tamanho ------------------------------------------------------
   Os produtos passaram a ser variáveis por tamanho, então este seletor deixou
   de ser decorativo: é ele que define o que entra no carrinho. */
.product-form__size-btns {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.size-btn__input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.size-btn__label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    height: 44px;
    padding: 0 var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    font-family: var(--font-heading);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: .04em;
    cursor: pointer;
    transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
}

.size-btn__label:hover {
    border-color: var(--color-primary);
}

.size-btn__input:checked + .size-btn__label {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-on-dark);
}

.size-btn__input:focus-visible + .size-btn__label {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* =============================================================================
   CARROSSEL DE AVALIAÇÕES — cards desiguais e colados nas setas

   Três problemas no mesmo lugar:

   1. Tamanhos diferentes. O carousel.js escalava os cards (1,08 / 0,95 / 0,88),
      então três larguras apareciam lado a lado — 311, 298 e 271px. Resolvido
      no template com data-effect="none"; aqui só garantimos altura igual.

   2. Alturas irregulares. Depoimentos têm textos de tamanhos diferentes e o
      card usava height:100% sem um item esticado para preencher. Com
      align-items:stretch todos acompanham o mais alto.

   3. Cards por baixo das setas. As setas ficavam em left:0 / right:0, coladas
      na borda da janela, e o primeiro card começava em x=27 — passava por
      baixo. Agora as setas recuam e o wrapper abre espaço para elas.
   ============================================================================= */
.reviews-carousel .carousel__track {
    align-items: stretch;
}

.reviews-carousel .carousel__item {
    display: flex;
}

.reviews-carousel .review-card {
    width: 100%;
}

.reviews-carousel .carousel__track-wrapper {
    /* espaço lateral suficiente para o card nunca encostar na seta (36px + folga) */
    padding-inline: var(--space-16);
}

.reviews-carousel .carousel__arrow--prev { left: var(--space-4); }
.reviews-carousel .carousel__arrow--next { right: var(--space-4); }

@media (max-width: 768px) {
    .reviews-carousel .carousel__track-wrapper {
        padding-inline: var(--space-10);
    }

    .reviews-carousel .carousel__arrow--prev { left: var(--space-1); }
    .reviews-carousel .carousel__arrow--next { right: var(--space-1); }
}

/* =============================================================================
   AMOSTRAS DE COR — página de produto

   A cor vem de conceito_cor_css() em functions.php. Aqui só a geometria: a
   bolinha precisa de contorno próprio, senão Off White e Branco somem no fundo
   branco do card, e a selecionada precisa de um anel que se leia em qualquer
   cor — por isso o anel é externo (box-shadow), não borda.
   ============================================================================= */
.product-form__color-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
}

.color-swatch {
    cursor: pointer;
    line-height: 0;
}

.color-swatch__input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.color-swatch__circle {
    display: block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, .18);
    box-shadow: 0 0 0 0 transparent;
    transition: box-shadow var(--transition-fast);
}

.color-swatch__input:checked + .color-swatch__circle {
    box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-primary);
}

.color-swatch__input:focus-visible + .color-swatch__circle {
    box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-accent);
}

/* -----------------------------------------------------------------------------
   NOME DA COR AO PASSAR O MOUSE

   Substitui o `title` nativo, que só aparece depois de ~1s parado — passando o
   mouse por uma fileira de bolinhas, ninguém espera tanto e o nome nunca era
   visto. Este surge na hora.

   Só no ponteiro com hover de verdade: em tela de toque não existe passar o
   mouse, e o tooltip ficaria presente depois do toque, tapando a bolinha
   seguinte.
   ----------------------------------------------------------------------------- */
@media ( hover: hover ) {

    .color-swatch {
        position: relative;
    }

    .color-swatch::after {
        content: attr(data-cor);
        position: absolute;
        top: calc( 100% + 8px );
        left: 50%;
        transform: translateX( -50% );
        background: var(--color-primary);
        color: var(--color-text-on-dark);
        font-size: var(--font-size-xs);
        line-height: 1;
        letter-spacing: .3px;
        padding: 6px 9px;
        border-radius: var(--border-radius-md);
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--transition-fast);
        z-index: 5;
    }

    .color-swatch:hover::after,
    .color-swatch:focus-within::after {
        opacity: 1;
    }
}

/* Cor sem correspondência no mapa: mostra o nome, nunca uma bolinha vazia.
   Com o mapa completo isso não acontece no catálogo atual — a regra fica para
   quando entrar uma cor nova ainda não mapeada, e serve de aviso de que ela
   precisa entrar em conceito_cor_css(). */
.color-swatch--sem-cor .color-swatch__name {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-sm);
    line-height: 1;
}

.color-swatch--sem-cor .color-swatch__input:checked + .color-swatch__name {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-on-dark);
}