/* ==========================================================
   JOMINI STUDIO - Identidade Visual
   Cores: Preto (#000000) e Amarelo (#FFD700)
   Fonte: Black Ops One (Google Fonts)
   ========================================================== */

/* Black Ops One é carregada via <link> nos layouts (Google Fonts CDN com cache
   agressivo). Mantemos um fallback Arial no stack pra cobrir qualquer atraso
   de rede sem flash perceptível, já que os pesos/proporções são próximos. */

/* ------------------ Variáveis ------------------ */
:root {
    --color-black: #000000;
    --color-yellow: #FFD700;
    --color-yellow-dark: #e6c200;
    --color-gray-900: #0a0a0a;
    --color-gray-800: #1a1a1a;
    --color-gray-700: #2a2a2a;
    --color-gray-600: #3a3a3a;
    --color-gray-500: #6a6a6a;
    --color-gray-300: #bdbdbd;
    --color-gray-100: #f5f5f5;
    --color-white: #ffffff;
    --color-success: #22c55e;
    --color-error: #ef4444;

    --font-brand: 'Black Ops One', 'Impact', 'Arial Black', sans-serif;
    --font-body: 'Segoe UI', Tahoma, Geneva, Arial, sans-serif;

    --shadow-gold: 0 0 24px rgba(255, 215, 0, 0.3);
    --radius: 4px;
    --transition: 0.2s ease;
}

/* ------------------ Reset ------------------ */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, p, ul, ol { margin: 0; padding: 0; }
ul { list-style: none; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; transition: color var(--transition); }
button { cursor: pointer; font-family: inherit; }

body {
    font-family: var(--font-body);
    background: var(--color-black);
    color: var(--color-gray-100);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body.home-body {
    background:
        linear-gradient(rgba(0,0,0,0.82), rgba(0,0,0,0.92)),
        url('/images/bg-aviation.jpg') center top / cover no-repeat scroll,
        var(--color-black);
    background-attachment: scroll;
}

/* Aplicação da fonte de marca em títulos e CTAs.
   Black Ops One só tem 1 peso (400); o browser sintetizaria um "fake bold"
   nos h1-h4 (que herdam bold do user agent) — daí o font-weight: normal. */
h1, h2, h3, h4,
.logo, .logo-main, .btn-primary, .btn-outline,
.section-title, .admin-logo, .footer-logo {
    font-family: var(--font-brand);
    font-weight: normal;
    letter-spacing: 2px;
}

h1 { font-size: clamp(2rem, 4vw, 3rem); color: var(--color-yellow); }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); color: var(--color-yellow); }
h3 { font-size: 1.4rem; }

.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    width: 100%;
}

.site-main { flex: 1; padding: 32px 0; }

/* ------------------ Botões ------------------ */
.btn-primary, .btn-outline, .btn-ghost, .btn-secondary {
    display: inline-block;

    /* FUNDO TRANSPARENTE POR PADRAO.
     *
     * Sem esta linha, <button> herda o fundo cinza-claro que o navegador da a
     * botoes — e so a botoes. O mesmo .btn-ghost num <a> saia transparente e num
     * <button> saia branco, no meio de um painel preto.
     *
     * Ficou invisivel por muito tempo porque a maioria dos btn-ghost sao links.
     * Quem primeiro apareceu errado foram os botoes de formulario do marketplace.
     *
     * btn-primary e btn-outline definem o proprio fundo logo abaixo e nao mudam. */
    background: transparent;

    padding: 12px 28px;
    font-family: var(--font-brand);
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    border: 2px solid var(--color-yellow);
    border-radius: var(--radius);
    transition: background-color var(--transition), color var(--transition), border-color var(--transition);
    cursor: pointer;
    text-align: center;
}

.btn-primary {
    background: var(--color-yellow);
    color: var(--color-black);
}

.btn-primary:hover {
    background: var(--color-yellow-dark);
    box-shadow: var(--shadow-gold);
    transform: translateY(-2px);
}

.btn-outline {
    background: transparent;
    color: var(--color-yellow);
}

.btn-outline:hover {
    background: var(--color-yellow);
    color: var(--color-black);
}

.btn-ghost {
    border-color: transparent;
    color: var(--color-gray-300);
    padding: 8px 16px;
}

.btn-ghost:hover { color: var(--color-yellow); }

/* SECUNDARIO — a acao que acompanha, sem competir com a principal.
 *
 * Estava sendo usado em sete telas (aplicar cupom, cancelar edicao, consultar) e
 * NAO EXISTIA em CSS nenhum: esses botoes cairam inteiros no padrao do navegador
 * — fundo branco, borda cinza e fonte do sistema, no meio de um painel preto.
 *
 * Nao e amarelo porque nao e a acao principal da tela; nao e fantasma porque
 * precisa de borda para parecer clicavel ao lado de um campo. */
.btn-secondary {
    background: transparent;
    border-color: var(--color-gray-600);
    color: var(--color-gray-200);
}

.btn-secondary:hover {
    border-color: var(--color-yellow);
    color: var(--color-yellow);
}

.btn-danger {
    background: var(--color-error);
    color: var(--color-white);
    border: none;
    padding: 10px 20px;
    border-radius: var(--radius);
}

/* ------------------ Header ------------------ */
.site-header {
    background: var(--color-gray-900);
    border-bottom: 2px solid var(--color-yellow);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 20px rgba(0,0,0,0.8);
}

.header-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    flex-wrap: nowrap;
    min-width: 0;
}

.logo {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.logo-img {
    display: block;
    height: 56px;
    width: auto;
}

.logo-main {
    font-family: var(--font-brand);
    color: var(--color-yellow);
    font-size: 28px;
    letter-spacing: 4px;
}

.logo-sub {
    font-family: var(--font-brand);
    color: var(--color-white);
    font-size: 13px;
    letter-spacing: 6px;
}

.main-nav {
    display: flex;
    /* 12px -> 9px junto com a fonte menor abaixo: "KIT PARA MONTAR" e um item longo
       (15 caracteres em caixa alta) e estourou o orcamento de largura do header. */
    gap: 8px;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: nowrap;
    /* NAO usar "overflow: hidden" aqui como rede de seguranca: o .dropdown-menu
       de Categorias e position:absolute DENTRO deste container e seria recortado,
       sumindo da tela. (O comentario antigo sugeria esse overflow — por isso a
       declaracao havia sido removida.) O jeito certo de evitar sobreposicao e
       nao estourar o orcamento de largura: a barra tem ~1232px uteis (container
       limitado a 1280px), entao todo item novo no header precisa caber nisso —
       ver .search-form (encolhivel) e .track-order-link (so icone no desktop).

       E o orcamento REAL e menor que 1232px: quem usa a loja num notebook comum
       navega perto de 1100-1150px de viewport, que e onde a barra aperta primeiro.
       Foi assim que "KIT PARA MONTAR" espremeu o menu contra a busca. */
}

.main-nav > a,
.nav-dropdown > a {
    font-family: var(--font-brand);
    /* 13 -> 12px e 1.5 -> 1px de espacamento. O espacamento e o maior ganho aqui:
       em caixa alta ele se paga por caractere, e o menu tem ~51 deles — cortar
       0.5px devolve ~25px sozinho, sem mexer no tamanho da letra. */
    font-size: 11px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 8px 0;
    position: relative;
    white-space: nowrap;
}

.main-nav > a:hover,
.nav-dropdown > a:hover {
    color: var(--color-yellow);
}

.main-nav > a::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 0;
    height: 2px;
    background: var(--color-yellow);
    transition: width var(--transition);
}

.main-nav > a:hover::after { width: 100%; }

.nav-dropdown,
.user-menu {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--color-gray-900);
    border: 1px solid var(--color-yellow);
    min-width: 200px;
    padding: 8px 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition), visibility var(--transition);
    z-index: 50;
    pointer-events: none;
}

.nav-dropdown:hover > .dropdown-menu,
.user-menu:hover > .dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.dropdown-submenu {
    position: relative;
}

.dropdown-submenu > a {
    display: block;
    width: 100%;
}

.dropdown-submenu > a::after {
    content: '▸';
    float: right;
    margin-left: 8px;
}

.dropdown-submenu .sub-menu {
    top: 0;
    left: 100%;
    min-width: 220px;
    opacity: 0;
    visibility: hidden;
}

.dropdown-submenu > a:hover + .sub-menu,
.dropdown-submenu > a:focus + .sub-menu,
.dropdown-submenu .sub-menu:hover {
    opacity: 1;
    visibility: visible;
}

.dropdown-menu a {
    display: block;
    padding: 10px 16px;
    font-size: 14px;
}

.dropdown-menu a:hover {
    background: var(--color-yellow);
    color: var(--color-black);
}

.search-form {
    display: flex;
    background: var(--color-gray-800);
    border: 1px solid var(--color-gray-600);
    border-radius: var(--radius);
    overflow: hidden;
    /* Encolhe (0 1) em vez de ser rigido (0 0): quando o header aperta, a busca
       cede espaco antes de qualquer coisa vazar por cima. */
    flex: 0 1 auto;
    min-width: 0;
}

.search-form input {
    background: transparent;
    border: none;
    padding: 8px 12px;
    color: var(--color-white);
    /* 160 -> 130 -> 120px: cada item novo no header sai daqui. O campo encolhe,
       mas o placeholder "Buscar modelos..." ainda cabe inteiro — abaixo disso ele
       comeca a cortar, e ai o campo deixa de dizer para que serve. */
    width: 120px;
    min-width: 0;
    outline: none;
}

.search-form button {
    background: var(--color-yellow);
    color: var(--color-black);
    border: none;
    padding: 0 14px;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

/* Botões dentro do header: acompanham o tamanho do menu.
   Ficaram em 13px enquanto o menu caiu para 11px — o desequilíbrio aparecia como
   "CRIAR CONTA" por cima do carrinho, e ainda deixava a direita pesada demais ao
   lado de um menu miúdo. */
.header-actions > .btn-ghost {
    padding: 6px 10px;
    font-size: 11px;
}

.header-actions > .btn-primary {
    padding: 7px 13px;
    font-size: 11px;
    border-width: 1px;
}

.cart-icon {
    position: relative;
    font-size: 24px;
}

.cart-badge {
    position: absolute;
    top: -8px;
    right: -10px;
    background: var(--color-yellow);
    color: var(--color-black);
    font-size: 12px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 20px;
    text-align: center;
}

/* ------------------ Hero ------------------ */
.hero {
    background: linear-gradient(135deg, #000 0%, #1a1a1a 100%);
    padding: 80px 0;
    text-align: center;
    border-bottom: 2px solid var(--color-yellow);
    position: relative;
    overflow: hidden;
}

.hero-slider {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
}

/* Veu escuro sobre o slideshow. As fotos do hero variam MUITO de luminancia
   (ha modelo em fundo azul claro), entao nao existe cor de texto que funcione
   em todas: o certo e escurecer o fundo, nao clarear o texto. Fica no
   ::after do slider (z-index 0) — abaixo do .hero-content, acima das fotos —
   pra valer pro titulo, pela frase e pelos botoes de uma vez.
   Mais denso em cima e embaixo, onde o texto se concentra. */
.hero-slider::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.72) 0%,
        rgba(0, 0, 0, 0.55) 50%,
        rgba(0, 0, 0, 0.78) 100%);
    pointer-events: none;
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,215,0,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,215,0,0.05) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
}

.hero-content { position: relative; z-index: 1; }

.hero h1 {
    font-size: clamp(2.5rem, 6vw, 5rem);
    margin-bottom: 16px;
    text-transform: uppercase;
    color: var(--color-yellow);

    
    
}

.hero p {
    font-size: 1.25rem;
    color: var(--color-gray-300);
    margin-bottom: 32px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* Finalidade do site: faixa propria logo abaixo do hero, em fundo solido.
   Ficava dentro do hero antes e nao havia cor que sobrevivesse as fotos do
   slideshow (que vao de fundo escuro a azul claro). Fora da foto, o contraste
   deixa de depender de qual slide esta na tela. */
.site-purpose {
    background: var(--color-black, #000);
    /* Borda em CIMA agora: a secao fecha a pagina, entao a linha separa do
       conteudo anterior em vez de anunciar o proximo. */
    border-top: 1px solid rgba(255, 215, 0, 0.18);
    padding: 32px 0 40px;
    text-align: center;
}

.site-purpose__lead {
    /* ~62 caracteres por linha: acima disso o olho perde a proxima linha. */
    max-width: 62ch;
    margin: 0 auto 10px;
    font-size: clamp(1rem, 1.7vw, 1.2rem);
    line-height: 1.6;
    color: var(--color-yellow);
}

.site-purpose__note {
    max-width: 62ch;
    margin: 0 auto;
    font-size: clamp(0.85rem, 1.3vw, 0.98rem);
    line-height: 1.55;
    /* Recuado em relacao a linha de cima: e informacao secundaria. */
    color: var(--color-gray-300);
}

.hero-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ------------------ Sections ------------------ */
section { 
    padding: 48px 0; 
    content-visibility: auto;
}

.section-title {
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 40px;
    position: relative;
    padding-bottom: 16px;
}

.featured-section { margin-bottom: 56px; }

.featured-section .section-title {
    text-align: left;
    margin-bottom: 0;
}

.featured-section .section-title::after {
    left: 0;
    transform: none;
}

.featured-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 32px;
}

.featured-header .btn-ghost {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.85rem;
}

.section-title::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: var(--color-yellow);
}

/* ------------------ Cards de Categoria ------------------ */
.categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    contain: layout style paint;
}

.category-card {
    background: var(--color-gray-900);
    border: 1px solid var(--color-gray-700);
    padding: 32px 16px;
    text-align: center;
    transition: border-color var(--transition), transform var(--transition);
    border-radius: var(--radius);
    will-change: auto;
}

.category-card:hover {
    border-color: var(--color-yellow);
    transform: translateY(-2px);
}

.category-icon {
    display: block;
    font-size: 2.75rem;
    line-height: 1;
    margin-bottom: 14px;
    color: var(--color-yellow);
    transition: transform var(--transition);
}

.category-card:hover .category-icon {
    transform: scale(1.1);
}

.category-card h3 {
    color: var(--color-yellow);
    font-family: var(--font-brand);
    letter-spacing: 2px;
    font-size: 1.1rem;
}

.category-card .scales {
    color: var(--color-gray-500);
    font-size: 13px;
    margin-top: 8px;
}

/* ------------------ Cards de Produto ------------------ */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 24px;
    contain: layout style paint;
}

.product-card {
    background: var(--color-gray-900);
    border: 1px solid var(--color-gray-700);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color var(--transition), transform var(--transition);
    display: flex;
    flex-direction: column;
}

.product-card:hover {
    border-color: var(--color-yellow);
    transform: translateY(-2px);
    will-change: transform, border-color;
}

.product-image {
    aspect-ratio: 1;
    background: var(--color-gray-800);
    overflow: hidden;
    position: relative;
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s;
    will-change: transform;
}

.product-card:hover .product-image img {
    transform: scale(1.05);
}

.product-image-stack {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.product-image .product-image-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s;
    pointer-events: none;
}

.product-image .product-image-slide.is-active {
    opacity: 1;
}

.product-image .product-image-slide.is-placeholder {
    object-fit: contain;
    padding: 30px;
    background: var(--color-gray-900);
}

@media (prefers-reduced-motion: reduce) {
    .product-image .product-image-slide { transition: none; }
}

.product-discount-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--color-yellow);
    color: var(--color-black);
    font-family: var(--font-brand);
    font-size: 12px;
    letter-spacing: 1px;
    padding: 4px 10px;
    z-index: 2;
}

/* Carimbo de peca de parceiro.

   Fica na ESQUERDA porque a direita ja e do selo de desconto — as duas coisas
   podem existir na mesma peca, e sobrepostas nenhuma das duas se le.

   Discreto de proposito: e informacao de procedencia, nao chamariz. Um selo
   berrante faria a peca do parceiro parecer promocao. */
.product-seller-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(0, 0, 0, .72);
    backdrop-filter: blur(4px);
    color: #fff;
    font-size: 10px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: 3px;
    border: 1px solid rgba(255, 255, 255, .18);
    z-index: 2;
    pointer-events: none;
}

.product-seller-badge i {
    font-size: 11px;
    color: var(--color-yellow);
}

.product-info {
    padding: 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.product-scale {
    font-size: 12px;
    color: var(--color-yellow);
    letter-spacing: 2px;
    margin-bottom: 4px;
    text-transform: uppercase;
}

.product-name {
    font-size: 1rem;
    color: var(--color-white);
    margin-bottom: 12px;
    min-height: 48px;
}

.product-price {
    margin-top: auto;
}

.product-price .old-price {
    text-decoration: line-through;
    color: var(--color-gray-500);
    font-size: 14px;
}

.product-price .final-price {
    font-family: var(--font-brand);
    font-size: 1.5rem;
    color: var(--color-yellow);
    letter-spacing: 1px;
}

.product-card .btn-primary {
    margin-top: 12px;
    width: 100%;
    padding: 10px;
    font-size: 12px;
}

.home-body .product-card,
.home-body .product-card:hover,
.home-body .product-image img,
.home-body .product-image .product-image-slide {
    transition: none;
}

.home-body .product-card:hover,
.home-body .product-card:hover .product-image img {
    transform: none;
}

/* ------------------ Página de Produto ------------------ */
.product-detail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    padding: 32px 0;
}

@media (max-width: 768px) {
    .product-detail { grid-template-columns: 1fr; }
}

.product-gallery .main-image {
    border: 1px solid var(--color-gray-700);
    border-radius: var(--radius);
    overflow: hidden;
    position: relative;
}

.product-gallery .gallery-stack {
    position: relative;
    width: 100%;
}

.product-gallery .gallery-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity 0.7s ease;
    pointer-events: none;
}

.product-gallery .gallery-slide.is-active {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    max-height: 75vh;
    object-fit: contain;
    opacity: 1;
}

.product-gallery .thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.product-gallery .thumbs img {
    aspect-ratio: 1;
    object-fit: cover;
    border: 1px solid var(--color-gray-700);
    border-radius: 4px;
    cursor: pointer;
    transition: border-color 0.2s ease, transform 0.2s ease;
    width: 100%;
}

.product-gallery .thumbs img:hover {
    border-color: var(--color-yellow);
}

.product-gallery .thumbs img.is-active {
    border-color: var(--color-yellow);
    box-shadow: 0 0 0 1px var(--color-yellow);
}

.product-detail-info .scale-tag {
    display: inline-block;
    background: var(--color-yellow);
    color: var(--color-black);
    padding: 4px 12px;
    font-family: var(--font-brand);
    letter-spacing: 2px;
    font-size: 12px;
    margin-bottom: 16px;
}

.product-detail-info h1 {
    color: var(--color-white);
    margin-bottom: 16px;
}

.product-detail-info .price {
    font-family: var(--font-brand);
    font-size: 2.5rem;
    color: var(--color-yellow);
    margin: 24px 0;
}

.product-detail-info .description {
    color: var(--color-gray-300);
    margin-bottom: 24px;
    line-height: 1.8;
}

.product-specs {
    border-top: 1px solid var(--color-gray-700);
    padding-top: 16px;
    margin-top: 16px;
}

.product-specs dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 16px;
}

.product-specs dt {
    color: var(--color-gray-500);
    font-size: 14px;
}

.product-specs dd {
    color: var(--color-white);
    font-size: 14px;
}

.qty-selector {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 16px 0;
}

.qty-selector button {
    background: var(--color-gray-800);
    color: var(--color-yellow);
    border: 1px solid var(--color-gray-600);
    width: 40px;
    height: 40px;
    font-size: 18px;
    font-weight: bold;
}

.qty-selector input {
    width: 60px;
    height: 40px;
    text-align: center;
    background: var(--color-gray-900);
    color: var(--color-white);
    border: 1px solid var(--color-gray-600);
}

/* ------------------ Carrinho ------------------ */
.cart-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 32px;
}

@media (max-width: 768px) {
    .cart-grid { grid-template-columns: 1fr; }
}

.cart-items { background: var(--color-gray-900); border-radius: var(--radius); }

.cart-item {
    display: grid;
    grid-template-columns: 100px 1fr auto;
    gap: 16px;
    padding: 16px;
    border-bottom: 1px solid var(--color-gray-700);
}

.cart-item:last-child { border-bottom: none; }

.cart-item img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: var(--radius);
}

.cart-summary {
    background: var(--color-gray-900);
    border: 1px solid var(--color-yellow);
    border-radius: var(--radius);
    padding: 24px;
    height: fit-content;
    position: sticky;
    top: 100px;
}

.cart-summary h3 {
    color: var(--color-yellow);
    margin-bottom: 16px;
    font-family: var(--font-brand);
    letter-spacing: 2px;
}

.summary-line {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px dashed var(--color-gray-700);
}

.summary-total {
    display: flex;
    justify-content: space-between;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 2px solid var(--color-yellow);
    font-family: var(--font-brand);
    font-size: 1.5rem;
    color: var(--color-yellow);
}

/* ------------------ Endereços do cliente ------------------ */
.address-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.address-card {
    background: var(--color-gray-900);
    border: 1px solid var(--color-gray-700);
    border-radius: var(--radius);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: border-color var(--transition);
}

.address-card:hover { border-color: var(--color-gray-600); }

.address-card.is-default {
    border-color: var(--color-yellow);
    box-shadow: 0 0 0 1px var(--color-yellow) inset;
}

.address-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.address-card-head strong {
    font-family: var(--font-brand);
    color: var(--color-yellow);
    letter-spacing: 1px;
    font-size: 14px;
}

.address-line {
    margin: 0;
    color: var(--color-gray-100);
    font-size: 14px;
    line-height: 1.45;
}

.address-cep {
    color: var(--color-gray-500);
    font-size: 12px;
    letter-spacing: 1px;
    margin-top: 4px;
}

.address-actions {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed var(--color-gray-700);
}

.address-actions .btn-ghost {
    padding: 4px 8px;
    font-size: 13px;
}

/* ------------------ Formulários ------------------ */
.form-card {
    max-width: 500px;
    margin: 48px auto;
    background: var(--color-gray-900);
    border: 1px solid var(--color-gray-700);
    border-radius: var(--radius);
    padding: 40px;
}

.form-card h1 {
    text-align: center;
    margin-bottom: 32px;
    text-transform: uppercase;
}

.support-page-card {
    max-width: 920px;
}

.support-contact-form {
    max-width: 560px;
    margin: 0 auto;
}

.quote-guide {
    margin: 0 0 32px;
    padding: 24px;
    background: var(--color-gray-800);
    border: 1px solid var(--color-gray-700);
    border-radius: var(--radius);
}

.quote-guide h2 {
    margin: 0 0 10px;
    color: var(--color-yellow);
    font-size: 1.2rem;
    text-align: center;
    text-transform: uppercase;
}

.quote-guide-intro {
    max-width: 700px;
    margin: 0 auto 20px;
    color: var(--color-gray-300);
    line-height: 1.6;
    text-align: center;
}

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

.quote-guide-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    padding: 20px;
    background: var(--color-black);
    border: 1px solid var(--color-gray-700);
    border-radius: var(--radius);
}

.quote-guide-icon {
    color: var(--color-yellow);
    font-size: 1.5rem;
}

.quote-guide-card h3 {
    margin: 10px 0 12px;
    color: var(--color-white);
    font-size: 1rem;
    letter-spacing: 1.5px;
}

.quote-guide-card ol {
    margin: 0 0 20px;
    padding-left: 22px;
    color: var(--color-gray-300);
    line-height: 1.55;
}

.quote-guide-card li {
    margin-bottom: 8px;
}

.quote-guide-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: auto;
    text-align: center;
}

.form-group {
    margin-bottom: 20px;
}

.quote-type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}

.form-group label.quote-type-card {
    position: relative;
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 12px;
    align-items: flex-start;
    min-height: 104px;
    margin: 0;
    padding: 14px;
    background: var(--color-gray-900);
    border: 1px solid var(--color-gray-700);
    border-radius: 4px;
    color: var(--color-white);
    cursor: pointer;
    font-family: var(--font-body);
    letter-spacing: 0;
    text-transform: none;
    transition: border-color var(--transition), background-color var(--transition), box-shadow var(--transition);
}

.quote-type-card:hover,
.quote-type-card:has(.quote-type-input:focus-visible) {
    border-color: var(--color-gray-500);
}

.quote-type-card:has(.quote-type-input:checked) {
    border-color: var(--color-yellow);
    background: rgba(255, 215, 0, 0.07);
    box-shadow: 0 0 0 1px rgba(255, 215, 0, 0.16);
}

.quote-type-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.quote-type-marker {
    position: relative;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    border: 2px solid var(--color-gray-500);
    border-radius: 50%;
    background: var(--color-gray-800);
    transition: border-color var(--transition), background-color var(--transition);
}

.quote-type-input:checked + .quote-type-marker {
    border-color: var(--color-yellow);
    background: var(--color-yellow);
}

.quote-type-input:checked + .quote-type-marker::after {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: var(--color-black);
}

.quote-type-copy {
    min-width: 0;
}

.quote-type-title {
    display: block;
    color: var(--color-white);
    font-family: var(--font-brand);
    font-size: 13px;
    letter-spacing: 1px;
    line-height: 1.35;
    text-transform: uppercase;
}

.quote-type-hint {
    display: block;
    margin-top: 5px;
    color: var(--color-gray-400);
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.45;
    letter-spacing: 0;
    text-transform: none;
}

.file-picker {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 6px;
    background: var(--color-gray-800);
    border: 1px solid var(--color-gray-600);
    border-radius: var(--radius);
}

.form-group .file-picker-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

.form-group label.file-picker-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto;
    min-height: 30px;
    margin: 0;
    padding: 7px 10px;
    color: var(--color-black);
    background: var(--color-yellow);
    border: 1px solid var(--color-yellow);
    border-radius: 4px;
    cursor: pointer;
    font-family: var(--font-brand);
    font-size: 12px;
    letter-spacing: 1px;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

.file-picker:has(.file-picker-input:focus-visible) {
    border-color: var(--color-yellow);
    box-shadow: 0 0 0 2px rgba(255,215,0,0.2);
}

.file-picker-status {
    min-width: 0;
    color: var(--color-gray-300);
    font-size: 13px;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.form-group label {
    display: block;
    font-size: 13px;
    color: var(--color-yellow);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 6px;
    font-family: var(--font-brand);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    background: var(--color-gray-800);
    border: 1px solid var(--color-gray-600);
    color: var(--color-white);
    padding: 10px 12px;
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: 15px;
    transition: border-color var(--transition);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-yellow);
    box-shadow: 0 0 0 2px rgba(255,215,0,0.2);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.validation-summary-errors,
.field-validation-error {
    color: var(--color-error);
    font-size: 13px;
    margin-top: 4px;
}

.validation-summary-errors {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid var(--color-error);
    padding: 12px;
    border-radius: var(--radius);
    margin-bottom: 16px;
}

/* ------------------ Alerts ------------------ */
.alert {
    padding: 14px 20px;
    margin: 16px auto;
    border-radius: var(--radius);
    max-width: 1280px;
}

.alert-success {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid var(--color-success);
    color: var(--color-success);
}

.alert-error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid var(--color-error);
    color: var(--color-error);
}

.alert-warning {
    background: rgba(234, 179, 8, 0.1);
    border: 1px solid var(--color-yellow);
    color: var(--color-yellow);
}

/* ------------------ Checkout ------------------ */
.checkout-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 32px;
}

@media (max-width: 768px) {
    .checkout-grid { grid-template-columns: 1fr; }
}

.payment-methods {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.payment-method {
    border: 2px solid var(--color-gray-700);
    padding: 16px;
    border-radius: var(--radius);
    cursor: pointer;
    text-align: center;
    transition: border-color var(--transition), background-color var(--transition);
}

.payment-method.active,
.payment-method:hover {
    border-color: var(--color-yellow);
}

.payment-method .icon { font-size: 28px; margin-bottom: 8px; min-height: 52px; display: flex; align-items: center; justify-content: center; }
.payment-method .icon .carrier-logo { height: 52px; width: auto; max-width: 100%; display: block; }

.payment-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.payment-option {
    border: 2px solid var(--color-gray-700);
    padding: 16px;
    border-radius: var(--radius);
    cursor: pointer;
    text-align: center;
    transition: border-color var(--transition), background-color var(--transition);
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 130px;
    justify-content: center;
}

.payment-option.active,
.payment-option:hover {
    border-color: var(--color-yellow);
}

.payment-option .icon {
    font-family: var(--font-brand);
    color: var(--color-yellow);
    font-size: 24px;
    line-height: 1;
}

.payment-option small {
    color: var(--color-gray-500);
    font-size: 12px;
}

/* ------------------ Footer ------------------ */
.site-footer {
    background: var(--color-gray-900);
    border-top: 2px solid var(--color-yellow);
    padding: 48px 0 0;
    margin-top: 64px;
    color: var(--color-gray-300);
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 32px;
}

.footer-logo {
    color: var(--color-yellow);
    font-family: var(--font-brand);
    letter-spacing: 4px;
    margin-bottom: 12px;
}

.footer-logo-img {
    display: block;
    height: 64px;
    width: auto;
    margin-bottom: 12px;
}

.footer-grid h4 {
    color: var(--color-yellow);
    font-family: var(--font-brand);
    font-size: 14px;
    letter-spacing: 2px;
    margin-bottom: 12px;
    text-transform: uppercase;
}

.footer-grid a {
    display: block;
    padding: 4px 0;
    color: var(--color-gray-300);
    font-size: 14px;
}

.footer-grid a:hover { color: var(--color-yellow); }

.footer-bottom {
    padding: 24px;
    margin-top: 32px;
    border-top: 1px solid var(--color-gray-700);
    text-align: center;
    font-size: 13px;
    color: var(--color-gray-500);
}

/* ------------------ Policy / Legal pages ------------------ */
.policy-section {
    margin-bottom: 32px;
    color: var(--color-gray-300);
    line-height: 1.7;
}

.policy-section h2 {
    color: var(--color-yellow);
    font-size: 1.15rem;
    letter-spacing: 1.5px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-gray-700);
}

.policy-section p { margin-bottom: 12px; }

.policy-section ul {
    list-style: disc;
    padding-left: 24px;
    margin-bottom: 12px;
}

.policy-section li { margin-bottom: 6px; }

.policy-section strong { color: #fff; }

/* ------------------ Catálogo: barra de filtros ------------------ */
.catalog-filters {
    display: grid;
    grid-template-columns: minmax(180px, 1.4fr) repeat(5, minmax(120px, 1fr)) auto;
    align-items: stretch;
    gap: 12px;
    margin-bottom: 32px;
}

.catalog-filters input,
.catalog-filters select {
    padding: 10px;
    background: var(--color-gray-800);
    border: 1px solid var(--color-gray-600);
    color: #fff;
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: 14px;
}

.catalog-filters button {
    white-space: nowrap;
}

/* ------------------ Mobile menu (hambúrguer) ------------------ */
.nav-toggle {
    display: none;
    background: transparent;
    border: 1px solid var(--color-gray-600);
    color: var(--color-yellow);
    width: 44px;
    height: 44px;
    border-radius: var(--radius);
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: border-color var(--transition);
}

.nav-toggle:hover { border-color: var(--color-yellow); }

.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--color-yellow);
    border-radius: 2px;
    transition: transform var(--transition), opacity var(--transition);
}

.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before,
.nav-toggle-bars::after {
    content: '';
    position: absolute;
    left: 0;
}
.nav-toggle-bars::before { top: -7px; }
.nav-toggle-bars::after  { top:  7px; }

.header-inner.is-open .nav-toggle-bars { background: transparent; }
.header-inner.is-open .nav-toggle-bars::before { transform: translateY(7px) rotate(45deg); }
.header-inner.is-open .nav-toggle-bars::after  { transform: translateY(-7px) rotate(-45deg); }

/* ------------------ Responsive ------------------ */
/* Breakpoint do header subido de 1100px para 1280px: na faixa 1100-1280 a
   barra desktop nao cabe (logo + 6 itens de menu + busca + lang + login +
   register + cart = ~1200-1280px de conteudo). Trocar para layout mobile
   nessa faixa evita que itens do main-nav vazem por cima do search-form
   e do header-actions. */
@media (max-width: 1280px) {
    .header-inner {
        flex-wrap: wrap;
        align-items: center;
        gap: 12px;
        padding: 12px 16px;
    }

    .logo-img { height: 44px; }

    .nav-toggle { display: inline-flex; }

    /* "Display: contents" promove os filhos do .header-actions a flex items
       diretos do .header-inner, permitindo ordená-los e quebrá-los em linhas
       independentemente. No desktop a estrutura original (1 container) é mantida. */
    .header-actions { display: contents; }

    /* Carrinho na linha 1, à direita */
    .header-actions > .cart-icon {
        order: 2;
        margin-left: auto;
    }

    .search-form {
        order: 4;
        flex: 1 0 100%;
    }
    .search-form input { width: 100%; }

    /* Botões Entrar/Criar Conta dividem a linha 3 */
    .header-actions > .btn-ghost,
    .header-actions > .btn-primary {
        order: 5;
        flex: 1 1 0;
        text-align: center;
        padding: 10px 14px;
    }

    /* User menu (autenticado) ocupa linha cheia, dropdown vira inline */
    .header-actions > .user-menu {
        order: 5;
        flex: 1 0 100%;
        position: static;
    }
    .header-actions > .user-menu > .user-trigger {
        display: block;
        padding: 12px 16px;
        border: 1px solid var(--color-gray-700);
        border-radius: var(--radius);
        background: var(--color-gray-900);
        font-family: var(--font-brand);
        letter-spacing: 1px;
    }
    .header-actions > .user-menu > .dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        border: none;
        background: transparent;
        padding: 4px 0 0 16px;
        min-width: 0;
        display: none;
    }
    .header-actions > .user-menu.is-open > .dropdown-menu { display: block; }

    .main-nav {
        display: none;
        order: 6;
        flex: 1 0 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--color-gray-900);
        border: 1px solid var(--color-gray-700);
        border-radius: var(--radius);
        padding: 4px 0;
    }

    .header-inner.is-open .main-nav { display: flex; }

    .main-nav > a,
    .nav-dropdown > a {
        padding: 12px 16px;
        font-size: 13px;
    }

    .main-nav > a::after { display: none; }

    /* Dropdown "Categorias" inline em vez de flutuante */
    .nav-dropdown { position: static; width: 100%; }

    .nav-dropdown > .dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        border: none;
        background: transparent;
        padding: 0 0 8px 16px;
        min-width: 0;
        display: none;
    }

    .nav-dropdown.is-open > .dropdown-menu { display: block; }

    /* Submenus aninhados ficam ocultos no mobile (cliente acessa via página da categoria) */
    .dropdown-submenu .sub-menu { display: none !important; }
    .dropdown-submenu > a::after { content: ''; display: none; }

    .dropdown-menu a { padding: 10px 12px; }

    /* Conteúdo */
    .hero { padding: 48px 0; }
    .hero h1 { letter-spacing: 1px; }

    section { padding: 32px 0; }
    .site-main { padding: 16px 0; }
    .section-title { margin-bottom: 24px; }

    .categories-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .category-card { padding: 20px 12px; }
    .category-icon { font-size: 2rem; margin-bottom: 10px; }
    .category-card h3 { font-size: 1rem; letter-spacing: 1px; }

    .product-info { padding: 12px; }
    .product-name {
        min-height: 44px;
        font-size: 0.92rem;
        line-height: 1.35;
        margin-bottom: 8px;
        overflow-wrap: anywhere;
    }
    .product-scale {
        font-size: 10px;
        letter-spacing: 1.5px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .product-price .old-price { font-size: 12px; }
    .product-price .final-price {
        font-size: 1.2rem;
        letter-spacing: 0.5px;
        overflow-wrap: anywhere;
    }
    .product-card .btn-primary {
        padding: 9px 8px;
        font-size: 10px;
        letter-spacing: 1px;
    }
    .product-card-rating {
        min-height: 20px;
        font-size: 12px;
    }

    .form-card { padding: 24px; margin: 24px auto; }
    .quote-guide { padding: 18px; }
    .quote-guide-grid { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; }

    .cart-item {
        grid-template-columns: 80px 1fr;
        gap: 12px;
        padding: 12px;
    }
    .cart-item img { width: 80px; height: 80px; }
    .cart-summary {
        position: static;
        top: auto;
        padding: 20px;
    }

    .product-detail-info .price { font-size: 2rem; }
    .product-gallery .thumbs { grid-template-columns: repeat(4, 1fr); }

    .catalog-filters {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .catalog-filters input { grid-column: 1 / -1; }
    .catalog-filters .btn-primary,
    .catalog-filters button { grid-column: 1 / -1; }

    .payment-methods,
    .payment-options { grid-template-columns: 1fr; }

    .alert { margin: 12px 16px; }
}

@media (max-width: 480px) {
    .container { padding: 0 14px; }
    .logo-img { height: 38px; }

    .hero { padding: 36px 0; }
    .hero-actions { flex-direction: column; align-items: stretch; }
    .hero-actions .btn-primary,
    .hero-actions .btn-outline { width: 100%; }

    .btn-primary, .btn-outline {
        padding: 10px 18px;
        font-size: 12px;
        letter-spacing: 1.5px;
    }

    .categories-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .category-card {
        padding: 16px 8px;
        min-width: 0;
    }

    .category-card h3 {
        font-size: 0.86rem;
        overflow-wrap: anywhere;
    }

    .category-card .scales { font-size: 11px; }

    .product-detail-info .price { font-size: 1.75rem; }

    .file-picker {
        align-items: stretch;
        flex-direction: column;
    }

    .form-group label.file-picker-button {
        width: 100%;
    }

    .file-picker-status {
        white-space: normal;
    }

    .footer-grid { gap: 24px; }
}

@media (max-width: 360px) {
    .products-grid,
    .categories-grid {
        gap: 10px;
    }

    .product-info { padding: 10px; }
    .product-name { font-size: 0.85rem; }
    .product-price .final-price { font-size: 1.05rem; }
    .product-card .btn-primary { font-size: 9px; }
}

/* ------------------ Avaliações (estrelas) ------------------ */
.stars { color: var(--color-yellow); display: inline-flex; gap: 2px; line-height: 1; }
.stars i { font-style: normal; }

.rating-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0 4px;
    color: var(--color-gray-300);
    font-size: 14px;
}
.rating-inline:hover { color: var(--color-yellow); }
.rating-inline-text { color: var(--color-gray-300); }
.rating-inline-text.muted { color: var(--color-gray-500); font-style: italic; }

.product-card-rating {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--color-gray-500);
    margin-bottom: 6px;
    min-height: 16px;
}
.product-card-rating .stars { font-size: 13px; }

.reviews-section { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--color-gray-700); }

.reviews-summary {
    display: grid;
    grid-template-columns: minmax(160px, 220px) 1fr;
    gap: 32px;
    align-items: center;
    background: var(--color-gray-900);
    border: 1px solid var(--color-gray-700);
    border-radius: var(--radius);
    padding: 24px;
    margin-bottom: 24px;
}
.reviews-summary-score { text-align: center; }
.reviews-summary-number {
    font-family: var(--font-brand);
    color: var(--color-yellow);
    font-size: 56px;
    line-height: 1;
}
.reviews-summary-total { color: var(--color-gray-300); font-size: 13px; margin-top: 8px; }
.reviews-summary-bars { display: flex; flex-direction: column; gap: 6px; }
.reviews-bar-row {
    display: grid;
    grid-template-columns: 32px 1fr 32px;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--color-gray-300);
}
.reviews-bar-track {
    background: var(--color-gray-800);
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
}
.reviews-bar-fill {
    background: var(--color-yellow);
    height: 100%;
    transition: width 0.4s ease;
}
.reviews-bar-count { text-align: right; color: var(--color-gray-500); }

.review-form-wrapper {
    background: var(--color-gray-900);
    border: 1px solid var(--color-gray-700);
    border-radius: var(--radius);
    padding: 20px 24px;
    margin-bottom: 24px;
}
.review-form-title {
    font-family: var(--font-brand);
    color: var(--color-yellow);
    margin-bottom: 12px;
    letter-spacing: 1.5px;
    font-size: 1.05rem;
}
.review-form { display: flex; flex-direction: column; gap: 12px; }
.review-form textarea {
    background: var(--color-gray-800);
    border: 1px solid var(--color-gray-600);
    color: var(--color-gray-100);
    padding: 10px 12px;
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 14px;
    resize: vertical;
    min-height: 92px;
}
.review-form textarea:focus {
    outline: none;
    border-color: var(--color-yellow);
    box-shadow: 0 0 0 1px var(--color-yellow);
}

.review-stars-input { display: inline-flex; gap: 4px; }
.review-star {
    background: none;
    border: none;
    color: var(--color-gray-600);
    font-size: 28px;
    line-height: 1;
    padding: 2px;
    transition: color 0.15s, transform 0.15s;
}
.review-star:hover { transform: scale(1.1); }
.review-star.is-active,
.review-star.is-hover { color: var(--color-yellow); }

.review-form-actions { display: flex; justify-content: flex-end; }

.review-login-cta {
    background: var(--color-gray-900);
    border: 1px dashed var(--color-gray-600);
    border-radius: var(--radius);
    padding: 18px;
    text-align: center;
    margin-bottom: 24px;
}

.reviews-list { display: flex; flex-direction: column; gap: 14px; }
.reviews-empty { color: var(--color-gray-500); font-style: italic; }

.review-item {
    background: var(--color-gray-900);
    border: 1px solid var(--color-gray-700);
    border-radius: var(--radius);
    padding: 16px 20px;
}
.review-item-header {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.review-item-author { color: var(--color-yellow); font-family: var(--font-brand); letter-spacing: 1px; }
.review-item-date { color: var(--color-gray-500); font-size: 12px; margin-left: auto; }
.review-item-comment { color: var(--color-gray-100); white-space: pre-wrap; }
.review-delete-btn {
    background: none;
    border: none;
    color: var(--color-gray-500);
    padding: 4px 6px;
    font-size: 14px;
    border-radius: var(--radius);
    transition: color var(--transition), background var(--transition);
}
.review-delete-btn:hover { color: var(--color-error); background: rgba(239, 68, 68, 0.1); }

.cookie-consent {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 1000;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    align-items: center;
    max-width: 1080px;
    margin: 0 auto;
    padding: 16px;
    background: rgba(17, 17, 17, 0.98);
    border: 1px solid var(--color-gray-700);
    border-radius: var(--radius);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
}
.cookie-consent[hidden] { display: none; }
.cookie-consent__content {
    display: grid;
    gap: 6px;
    color: var(--color-gray-200);
}
.cookie-consent__content strong {
    color: var(--color-yellow);
    font-family: var(--font-brand);
    letter-spacing: 1px;
}
.cookie-consent__content p {
    margin: 0;
    color: var(--color-gray-300);
    font-size: 14px;
    line-height: 1.5;
}
.cookie-consent__content a {
    color: var(--color-yellow);
    font-size: 13px;
}
.cookie-consent__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

@media (max-width: 720px) {
    .reviews-summary { grid-template-columns: 1fr; gap: 20px; padding: 18px; }
    .reviews-summary-score { display: flex; align-items: center; gap: 14px; justify-content: flex-start; text-align: left; }
    .reviews-summary-number { font-size: 40px; }
    .reviews-summary-total { margin-top: 0; }
    .cookie-consent {
        grid-template-columns: 1fr;
        left: 10px;
        right: 10px;
        bottom: 10px;
    }
    .cookie-consent__actions {
        justify-content: stretch;
    }
    .cookie-consent__actions .btn-primary,
    .cookie-consent__actions .btn-ghost {
        flex: 1;
        justify-content: center;
    }
}

/* ================= Monte o seu pacote (Pack Builder) ================= */
.pack-progress-wrap {
    position: sticky;
    top: 12px;
    z-index: 20;
    background: var(--color-gray-900);
    border: 1px solid var(--color-gray-700);
    border-radius: 10px;
    padding: 14px 16px;
    margin: 20px 0 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

.pack-progress-head {
    display: flex;
    align-items: baseline;
    gap: 6px;
    color: var(--color-gray-300);
}

.pack-progress-head strong {
    font-family: var(--font-brand);
    font-size: 1.4rem;
    color: var(--color-yellow);
    letter-spacing: 1px;
}

.pack-progress-hint {
    margin-left: auto;
    font-size: 0.9rem;
    color: var(--color-gray-500);
}

.pack-progress-track {
    height: 12px;
    width: 100%;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.pack-progress-bar {
    height: 100%;
    width: 0;
    border-radius: inherit;
    background-color: var(--color-yellow);
    transition: width 0.25s ease, background-color 0.25s ease;
    /* Listras animadas enquanto enche. */
    background-image: linear-gradient(
        45deg,
        rgba(0, 0, 0, 0.18) 25%, transparent 25%,
        transparent 50%, rgba(0, 0, 0, 0.18) 50%,
        rgba(0, 0, 0, 0.18) 75%, transparent 75%, transparent);
    background-size: 1.2rem 1.2rem;
    animation: pack-progress-stripes 0.8s linear infinite;
}

/* Cheio = verde (pronto); passou do max = vermelho (alerta). */
.pack-progress-wrap.is-full .pack-progress-bar { background-color: var(--color-success); }
.pack-progress-wrap.is-over .pack-progress-bar { background-color: var(--color-error); }

@keyframes pack-progress-stripes {
    from { background-position: 0 0; }
    to { background-position: 1.2rem 0; }
}

@media (prefers-reduced-motion: reduce) {
    .pack-progress-bar { animation: none; }
}

.pack-progress-wrap .btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pack-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
}

.pack-card {
    background: var(--color-gray-900);
    border: 1px solid var(--color-gray-700);
    border-radius: 10px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pack-card img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 8px;
    background: #111;
}

.pack-card-name {
    color: var(--color-white);
    font-size: 0.95rem;
    line-height: 1.3;
    min-height: 2.5em;
}

.pack-card-stock {
    color: var(--color-gray-500);
    font-size: 0.8rem;
}

.pack-qty {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
}

.pack-qty input {
    flex: 1;
    width: 100%;
    text-align: center;
    padding: 6px;
    background: var(--color-gray-800);
    border: 1px solid var(--color-gray-600);
    color: #fff;
    border-radius: 6px;
}

.pack-qty-btn {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border-radius: 6px;
    border: 1px solid var(--color-yellow);
    background: transparent;
    color: var(--color-yellow);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

.pack-qty-btn:hover { background: var(--color-yellow); color: var(--color-black); }


/* ==========================================================================
   Login social (Google / Facebook) — telas de login e cadastro.
   ========================================================================== */
.external-login {
    margin-top: 24px;
}

/* Divisor "ou continue com": a linha e feita com ::before/::after para
   acompanhar a largura do card sem depender de largura fixa. */
.external-login__divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    color: var(--color-gray-500);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.external-login__divider::before,
.external-login__divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--color-gray-700);
}

.external-login__buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

/* Os DOIS botoes agora sao renderizados pelos SDKs oficiais (Google Identity
   Services e Facebook JS SDK), cada um com largura propria vinda do data-width.
   Aqui so garantimos que nenhum estoure o card em telas estreitas — estilizar
   por dentro nao e permitido pelas marcas nem sobreviveria a um update do SDK. */
.external-login__facebook {
    max-width: 100%;
}

/* Espaco reservado para os botoes dos SDKs (Google e Facebook).
   Os dois sao iframes que so aparecem depois que o script externo carrega
   (~1s medido). Sem altura reservada o bloco nasce com 0px e empurra o
   conteudo quando o botao surge; com ela o layout ja nasce estavel e a espera
   vira "carregando" em vez de "pulou".
   40px = altura do botao large dos dois SDKs. */
.external-login__slot {
    min-height: 40px;
    width: 100%;
    max-width: 320px;
    border-radius: 4px;
    /* Pulso discreto enquanto o iframe nao chega. Some sozinho quando o
       conteudo do SDK e inserido dentro do elemento. */
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.04) 25%,
        rgba(255, 255, 255, 0.08) 37%,
        rgba(255, 255, 255, 0.04) 63%);
    background-size: 400% 100%;
    animation: external-login-skeleton 1.4s ease infinite;
}

/* Assim que o SDK injeta o iframe, o elemento deixa de ser um "vazio
   aguardando" e o fundo sai de cena. */
.external-login__slot:has(iframe),
.external-login__slot:has(span) {
    background: none;
    animation: none;
}

@keyframes external-login-skeleton {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/* Quem prefere menos movimento fica so com o espaco reservado. */
@media (prefers-reduced-motion: reduce) {
    .external-login__slot { animation: none; }
}

.external-login__error {
    margin-top: 12px;
    text-align: center;
    font-size: 14px;
    color: var(--color-error, #e05252);
}

/* ==========================================================================
   Kits para montar
   --------------------------------------------------------------------------
   Card proprio, e nao o card de produto normal.

   O kit e a coisa mais diferente que a loja passou a vender: o cliente monta e
   pinta. Com a mesma aparencia dos outros, alguem compraria esperando peca
   acabada — e a devolucao sai mais cara do que esta diferenca visual.

   Por isso a secao tem borda tracejada (algo a montar), etiqueta explicita e
   um botao que diz "montar", nao "comprar".
   ========================================================================== */
.kits-section .kits-lead {
    color: var(--color-gray-400);
    font-size: 15px;
    line-height: 1.7;
    max-width: 720px;
    margin: -6px 0 24px;
}

.kit-card {
    display: flex;
    flex-direction: column;
    background: var(--color-black);
    border: 1px dashed var(--color-gray-600);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color var(--transition), transform var(--transition);
}

.kit-card:hover {
    border-color: var(--color-yellow);
    transform: translateY(-3px);
}

.kit-card-media {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    background: #0b0b0b;
}

.kit-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kit-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--color-yellow);
    color: #000;
    font-family: var(--font-brand);
    font-size: 10px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.kit-card-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    flex: 1;
}

.kit-card-title {
    margin: 0;
    font-size: 15px;
    line-height: 1.35;
}

.kit-card-title a {
    color: var(--color-white);
    text-decoration: none;
}

.kit-card-title a:hover { color: var(--color-yellow); }

.kit-card-price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    color: var(--color-yellow);
}

/* "a partir de" bem menor que o valor: o preco muda com a escala, e a frase e
   uma ressalva — nao pode competir com o numero. */
.kit-card-from {
    color: var(--color-gray-500);
    font-size: 11px;
    letter-spacing: .5px;
    text-transform: lowercase;
}

.kit-card-price strong { font-size: 1.15rem; }

.kit-card-cta {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px 12px;
    border: 1px solid var(--color-yellow);
    border-radius: 8px;
    color: var(--color-yellow);
    font-size: 13px;
    text-decoration: none;
    transition: background var(--transition), color var(--transition);
}

.kit-card-cta:hover {
    background: var(--color-yellow);
    color: #000;
}

.kit-card-note {
    color: var(--color-gray-600);
    font-size: 11px;
    text-align: center;
}

/* Construtor de pedido de kits: no celular as duas colunas viram uma, e a lista do
   pedido para de ser sticky — grudada, ela cobriria o formulário numa tela baixa. */
@media (max-width: 860px) {
    .kit-builder {
        grid-template-columns: 1fr !important;
    }

    .kit-builder > aside {
        position: static !important;
    }
}

/* Selo de prévia no card do kit.
   Fica na IMAGEM e não no rodapé do card: é a imagem que promete algo, e é olhando
   para ela que o cliente forma a expectativa. Discreto de propósito — o aviso completo
   está na página do kit e no configurador. */
.kit-previa-selo {
    position: absolute;
    left: 8px;
    bottom: 8px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .72);
    border: 1px solid rgba(255, 255, 255, .18);
    color: var(--color-gray-300);
    font-size: 10px;
    letter-spacing: .5px;
    text-transform: uppercase;
    pointer-events: none;
}

/* Vitrines com rodizio: quatro vagas que trocam de card com um fade.

   Por ATRIBUTO, e nao por classe: a mesma regra serve o card de kit e o card de
   produto. Nasceu so nos kits e hoje vale para ofertas, marketplace e destaques.

   Nada desliza. O movimento lateral puxa o olho e atrapalha quem está lendo outro card;
   um fade curto avisa que mudou sem exigir atenção. */
[data-shuffle-slot] {
    /* GRID em vez de position:absolute para empilhar os cards.
       Com grid-area 1/1 todos ocupam a mesma célula, e a vaga ganha sozinha a altura do
       mais alto — sem medir nada no JS. Com posicionamento absoluto a vaga colapsaria e
       eu teria que fixar uma altura, que quebraria no primeiro título de duas linhas. */
    display: grid;
    min-width: 0;
}

[data-shuffle-slot] > [data-shuffle-face] {
    grid-area: 1 / 1;

    opacity: 0;
    /* visibility junto da opacidade tira o card oculto da ordem de TAB. Só opacity
       deixaria o teclado parar num card invisível — e o foco sumiria da tela. */
    visibility: hidden;

    /* 1,1s com ease-in-out: a dissolução precisa ser lenta o bastante para o olho não
       registrar o instante da troca. Em meio segundo o card "pisca" e chama atenção —
       o oposto do que uma vitrine de fundo deve fazer.

       O ease-in-out importa tanto quanto a duração: com transição linear o começo e o
       fim são abruptos mesmo num tempo longo. */
    transition: opacity 1.1s ease-in-out, visibility 0s linear 1.1s;
}

[data-shuffle-slot] > [data-shuffle-face].is-visible {
    opacity: 1;
    visibility: visible;
    /* Ao aparecer, a visibilidade muda na hora; só a opacidade é animada. */
    transition: opacity 1.1s ease-in-out, visibility 0s;
}

/* Quem pediu menos movimento no sistema recebe a vitrine parada: sem fade e sem troca
   automática (o script também não agenda nada — ver a home). */
@media (prefers-reduced-motion: reduce) {
    [data-shuffle-slot] > [data-shuffle-face] { transition: none; }
}

/* Quem vende a peca, no detalhe do produto.

   Contido de proposito: fica entre o preco e a descricao, e um cartao chamativo
   ali competiria com o proprio preco pela atencao. */
.product-seller-box {
    margin: 18px 0 4px;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-left: 3px solid var(--color-yellow);
    border-radius: 6px;
    background: rgba(255, 255, 255, .03);
}

.product-seller-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    color: var(--color-gray-100);
}

.product-seller-head i {
    color: var(--color-yellow);
}

.product-seller-facts {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
}

.product-seller-facts li {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--color-gray-300);
}

.product-seller-facts i {
    font-size: 13px;
    color: var(--color-gray-500);
}

.product-seller-note {
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.7;
    color: var(--color-gray-500);
}

/* ------------------ Simular frete (página do produto) ------------------
 *
 * Fica entre o preço e o botão de comprar: é informação que entra na decisão.
 * Contido de propósito — um bloco chamativo aqui competiria com o próprio preço. */
.shipping-sim {
    margin: 18px 0;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 6px;
    background: rgba(255, 255, 255, .02);
}

.shipping-sim-title {
    display: block;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-gray-400);
    margin-bottom: 10px;
}

.shipping-sim-title i { color: var(--color-yellow); }

.shipping-sim-form {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.shipping-sim-form input {
    flex: 1;
    min-width: 130px;
    max-width: 180px;
    padding: 9px 12px;
    background: var(--color-black);
    border: 1px solid var(--color-gray-600);
    border-radius: var(--radius);
    color: var(--color-white);
    font-size: 14px;
    letter-spacing: 1px;
}

.shipping-sim-form input:focus {
    outline: none;
    border-color: var(--color-yellow);
}

.shipping-sim-form button { padding: 9px 18px; font-size: 13px; }

.shipping-sim-list {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Serviço à esquerda, prazo no meio, preço encostado à direita: a coluna de
 * preços alinhada é o que deixa comparar as opções de relance. */
.shipping-sim-list li {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: 13.5px;
    color: var(--color-gray-300);
}

.shipping-sim-list em {
    font-style: normal;
    font-size: 12px;
    color: var(--color-gray-500);
}

.shipping-sim-list strong {
    margin-left: auto;
    color: var(--color-yellow);
    font-variant-numeric: tabular-nums;
}

.shipping-sim-msg { margin: 8px 0 0; font-size: 13px; color: var(--color-gray-400); }
.shipping-sim-error { margin: 8px 0 0; font-size: 13px; color: var(--color-error); }

.shipping-sim-note {
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.7;
    color: var(--color-gray-500);
}

/* ============================================================================
   PAINEL DE PARTIDAS — a identidade da VITRINE.
   ============================================================================

   Nasceu no carrossel do Instagram e virou a cara da loja: ambar sobre preto ja
   era a paleta da marca, e e a mesma do painel de aeroporto de verdade — nao foi
   adaptacao, foi reconhecer que era o mesmo par.

   Escopado em .area-loja (ver _Layout): a area do cliente tem a etiqueta de
   bagagem e o admin tem a prancha. Sem o escopo, um restyle da vitrine repintaria
   as outras duas por acidente.

   O que faz um painel parecer um painel: rotulo pequeno em MONO com muito
   espacamento, regua ambar sob o cabecalho, e as linhas de dado separadas por um
   fio fino. Nao e enfeite — e a hierarquia que deixa ler uma tabela de relance. */

.area-loja {
    --fonte-painel: "Courier New", ui-monospace, monospace;
}

/* CABECALHO DE SECAO vira cabecalho de painel.
   Pequeno e em mono, e nao grande e display: no painel de verdade o titulo e a
   MENOR coisa da tela — quem tem de gritar e o dado. */
.area-loja .section-title {
    font-family: var(--fonte-painel);
    font-size: clamp(0.82rem, 1.4vw, 0.95rem);
    font-weight: 700;
    letter-spacing: 5px;
    color: var(--color-yellow);
    text-align: left;
    text-transform: uppercase;
    padding-bottom: 12px;
    margin-bottom: 26px;
    border-bottom: 1.5px solid rgba(255, 215, 0, 0.45);
}

/* O tracinho central antigo some: a regua do cabecalho ja faz esse papel, e os
   dois juntos viram duas linhas empilhadas sem motivo. */
.area-loja .section-title::after { display: none; }

/* FICHA TECNICA vira as linhas do painel: rotulo em mono miudo, valor grande, e
   o fio fino separando. */
.area-loja .product-specs dl {
    grid-template-columns: minmax(120px, 200px) 1fr;
    gap: 0 20px;
}

.area-loja .product-specs dt,
.area-loja .product-specs dd {
    padding: 12px 0;
    border-bottom: 1px solid #242424;
}

.area-loja .product-specs dt {
    font-family: var(--fonte-painel);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--color-gray-500);
    align-self: center;
}

.area-loja .product-specs dd {
    font-family: var(--fonte-painel);
    font-size: 17px;
    font-weight: 700;
    color: var(--color-white);
    /* Numero de tabela alinha em coluna; sem isto o "1" estreito desalinha a
       leitura de cima para baixo. */
    font-variant-numeric: tabular-nums;
}

/* PRECO no card: mono ambar, alinhado como numero de painel. */
.area-loja .product-price .final-price {
    font-family: var(--fonte-painel);
    font-weight: 700;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}

/* ---- AS PAS (split-flap) ----

   Uma pa por caractere, com o vinco no meio. E o gesto mais forte da identidade,
   e por isso ele e RARO: so no preco do detalhe do produto.

   Preco inteiro em pas numa lista de vinte cards vira parede e atrasa a leitura —
   o cliente esta comparando numeros, nao admirando tipografia. Um lugar so, onde
   o olho ja para. */
.flap-grupo {
    display: inline-flex;
    gap: 4px;
    align-items: stretch;
}

.flap {
    position: relative;
    min-width: 0.72em;
    padding: 0.10em 0.12em;
    background: #141414;
    border: 1px solid #2E2E2E;
    border-radius: 3px;
    text-align: center;
    font-family: var(--fonte-painel);
    font-weight: 700;
    color: var(--color-yellow);
    font-variant-numeric: tabular-nums;
}

/* O VINCO: a dobra que divide a pa ao meio. E o detalhe que faz o olho reconhecer
   o painel; sem ele sao so quadradinhos escuros. */
.flap::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    border-top: 2px solid #0A0A0A;
}

/* Espaco entre grupos (o "R$" e o numero) e um vao, e nao uma pa vazia. */
.flap-vao {
    display: inline-block;
    width: 0.34em;
}

@media (max-width: 600px) {
    .area-loja .product-specs dl { grid-template-columns: 1fr; }
    .area-loja .product-specs dt { border-bottom: none; padding-bottom: 0; }
}

/* ---- PAINEL DE PARTIDAS: o resto da vitrine ----

   Carrinho, checkout, kit e pacote. As mesmas tres coisas do detalhe: rotulo
   pequeno em mono, valor em numero tabular, e o fio fino separando as linhas. */

/* Linhas de resumo (carrinho, checkout, pacote) viram linhas de painel. */
.area-loja .summary-line,
.area-loja .summary-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 11px 0;
    border-bottom: 1px solid #242424;
    font-family: var(--fonte-painel);
    font-variant-numeric: tabular-nums;
}

.area-loja .summary-line > :first-child {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--color-gray-500);
}

.area-loja .summary-line > :last-child {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-white);
}

/* O TOTAL e a ultima linha do painel: sem fio embaixo, e em ambar. */
.area-loja .summary-total {
    border-bottom: none;
    border-top: 1.5px solid rgba(255, 215, 0, 0.45);
    margin-top: 6px;
    padding-top: 16px;
}

.area-loja .summary-total > :first-child {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--color-gray-400);
}

.area-loja .summary-total > :last-child {
    font-size: 26px;
    font-weight: 700;
    color: var(--color-yellow);
}

/* Rotulo de formulario tambem e rotulo de painel. Vale para o checkout inteiro,
   que e onde o cliente mais le campo. */
.area-loja .form-group > label {
    font-family: var(--fonte-painel);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--color-gray-500);
}

/* Item do carrinho: o fio fino no lugar da borda cheia. */
.area-loja .cart-item {
    border-bottom: 1px solid #242424;
}

/* ============================================================================
   ETIQUETA DE BAGAGEM — a identidade da AREA DO CLIENTE.
   ============================================================================

   Combina com a pergunta que se faz aqui: "onde esta a minha peca". A etiqueta e
   o objeto que acompanha a bagagem — ilhos, faixa listrada, tira presa.

   Feita so com ::before e ::after do cartao que ja existia: nenhuma view precisou
   ganhar marcacao para a identidade aparecer. */

.area-cliente {
    --fonte-etiqueta: "Courier New", ui-monospace, monospace;
}

.area-cliente .form-card {
    position: relative;
    border: 2px solid rgba(255, 215, 0, 0.55);
    border-radius: 18px;
    /* Espaco para a faixa e o ilhos, que sao desenhados por cima. */
    padding-top: 62px;
}

/* A FAIXA DIAGONAL, listrada — o que se reconhece numa etiqueta de longe. */
.area-cliente .form-card::before {
    content: "";
    position: absolute;
    top: 34px;
    left: 16px;
    right: 16px;
    height: 16px;
    border-radius: 3px;
    background: repeating-linear-gradient(
        -45deg,
        var(--color-yellow) 0 10px,
        #141414 10px 20px);
    opacity: 0.9;
}

/* O ILHOS: o furo por onde passa a alca. */
.area-cliente .form-card::after {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-black, #0A0A0A);
    box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.7);
}

.area-cliente .section-title {
    font-family: var(--fonte-etiqueta);
    font-size: clamp(0.82rem, 1.4vw, 0.95rem);
    font-weight: 700;
    letter-spacing: 5px;
    text-align: left;
    text-transform: uppercase;
    color: var(--color-yellow);
}

.area-cliente .section-title::after { display: none; }

/* Dado de etiqueta: rotulo miudo em mono, valor destacado — igual ao campo
   impresso num bilhete. */
.area-cliente .form-group > label,
.area-cliente .summary-line > :first-child {
    font-family: var(--fonte-etiqueta);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--color-gray-500);
}

.area-cliente .summary-line {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    /* Tracejado, e nao fio cheio: e o picote da etiqueta. */
    border-bottom: 1px dashed rgba(255, 215, 0, 0.28);
    font-family: var(--fonte-etiqueta);
    font-variant-numeric: tabular-nums;
}

/* ---- O CARD DE PRODUTO COMO LINHA DO PAINEL ----

   O card ja tinha a forma certa e ninguem tinha reparado: codigo pequeno em cima
   (a escala), o nome no meio, o valor embaixo. E exatamente a leitura de uma linha
   de painel de partidas — voo, destino, horario.

   Faltava so a tipografia dizer isso. Nenhuma marcacao mudou.

   Esta e a tela onde o cliente MAIS navega, e ela tinha ficado de fora da primeira
   fatia: o catalogo nao usa .section-title, entao nenhuma regra pegava nele. So
   apareceu quando fui buscar a pagina em producao. */

/* A ESCALA vira o codigo do voo: mono, ambar, com a regua fina embaixo. */
.area-loja .product-scale {
    font-family: var(--fonte-painel);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 4px;
    padding-bottom: 8px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(255, 215, 0, 0.28);
}

/* Ha categoria SEM escala (decal, base, acessorio), e ali o campo vem vazio. Sem
   isto sobraria uma regua ambar solta em cima do nome, anunciando um dado que a
   peca nao tem. */
.area-loja .product-scale:empty {
    display: none;
}

/* O NOME e o destino da linha. Mono, porque e o que faz o conjunto ler como
   painel — mas em caixa normal e sem espacamento extra: nome de peca e longo
   ("Boeing 737-800 GOL"), e maiuscula espacada quebraria em tres linhas. */
.area-loja .product-name {
    font-family: var(--fonte-painel);
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: 0;
}

/* A nota fica discreta: no painel ela e informacao de rodape, nao manchete. */
.area-loja .product-card-rating {
    font-family: var(--fonte-painel);
    font-size: 11px;
    letter-spacing: 1px;
}

/* O VALOR fecha a linha, separado por uma regua — como o horario fecha a linha do
   painel. */
.area-loja .product-price {
    padding-top: 10px;
    border-top: 1px solid #242424;
}

.area-loja .product-price .old-price {
    font-family: var(--fonte-painel);
    font-variant-numeric: tabular-nums;
}

.area-loja .product-price .final-price {
    font-size: 1.35rem;
}

/* O CARD como modulo do painel: canto reto e fio ambar ao passar o mouse. Painel
   de aeroporto nao tem canto arredondado — e uma grade de modulos encaixados. */
.area-loja .product-card {
    border-radius: 4px;
    background: #101010;
}

.area-loja .product-card:hover {
    border-color: rgba(255, 215, 0, 0.5);
}

/* O botao de comprar tambem entra no idioma: mono espacado, como a chamada de
   embarque. */
.area-loja .product-card .btn-primary {
    font-family: var(--fonte-painel);
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* O CABECALHO DO CATALOGO e o painel de chegada da loja.

   Esta pagina nao usa .section-title — o titulo dela e um <h1> solto, e foi por
   isso que a primeira fatia passou por ela sem tocar em nada. Aqui a regra vai
   pelo ELEMENTO, e nao pela classe que a pagina nao tem. */
.area-loja .catalog-filters {
    font-family: var(--fonte-painel);
}

.area-loja .catalog-filters label,
.area-loja .catalog-filters legend {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--color-gray-500);
}

/* O h1 da vitrine vira cabecalho de painel — mesma regua ambar das secoes da
   home, para o catalogo nao parecer outra loja. */
/* O HERO FICA DE FORA.
   
   Este seletor nasceu para o titulo do CATALOGO, que e um <h1> sem classe. Mas o
   hero da home tambem e um .container > h1 — e a regra encolheu o nome da marca
   para o tamanho de um rotulo de painel.
   
   No hero o certo e o oposto: ali e a MARCA, e nao uma linha de painel. */
.area-loja main > .container:not(.hero-content) > h1:first-child,
.area-loja .container:not(.hero-content) > h1:first-child {
    font-family: var(--fonte-painel);
    font-size: clamp(1rem, 1.8vw, 1.25rem);
    font-weight: 700;
    letter-spacing: 6px;
    text-transform: uppercase;
    color: var(--color-yellow);
    padding-bottom: 14px;
    border-bottom: 1.5px solid rgba(255, 215, 0, 0.45);
}

/* ---- O BLOCO DE TEXTO DO CARD, igual ao card do carrossel ----

   Pas no identificador, linhas em mono embaixo, faixa degrade fechando. A foto
   nao mudou: o pedido era so a parte de texto. */

/* AS PAS DO CARD sao menores que as do detalhe — sao dezenas na tela, e no
   tamanho do detalhe virariam parede. */
.area-loja .product-flaps {
    display: block;
    margin-bottom: 10px;
    font-size: 1.05rem;
    line-height: 1;
    color: var(--color-yellow);
    text-decoration: none;
}

.area-loja .product-flaps .flap-grupo {
    /* Quebra em vez de estourar o card: nome de tres palavras existe. */
    flex-wrap: wrap;
    gap: 3px;
    row-gap: 3px;
}

.area-loja .product-flaps .flap {
    min-width: 0.86em;
    padding: 0.16em 0.10em;
}

/* Sem JS as pas nao sao montadas, e o identificador continua sendo texto — mono,
   ambar, legivel. A identidade e a roupa; o dado nunca depende dela. */
.area-loja .product-flaps {
    font-family: var(--fonte-painel);
    font-weight: 700;
    letter-spacing: 2px;
}

/* O NOME COMPLETO desce de posto: com o identificador em pas acima, ele vira a
   linha de apoio. */
.area-loja .product-name {
    font-size: 0.82rem;
    color: var(--color-gray-300);
    min-height: 0;
    margin-bottom: 8px;
}

/* AS LINHAS DE DADO — prefixo, escala, procedencia. Mono miudo e espacado, como
   no rodape do card do carrossel. */
.area-loja .product-dados,
.area-loja .product-procedencia {
    font-family: var(--fonte-painel);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 2.5px;
    color: var(--color-gray-500);
    line-height: 1.9;
}

.area-loja .product-procedencia {
    color: var(--color-gray-600, #6b7280);
}

/* A FAIXA DEGRADE que fecha o bloco, como a do card do Instagram. */
.area-loja .product-faixa {
    display: block;
    height: 4px;
    margin: 12px 0 10px;
    border-radius: 2px;
    background: linear-gradient(
        to right,
        transparent 0%,
        #143E78 25%,
        #1E5BA8 50%,
        #3D7BC9 75%,
        transparent 100%);
    opacity: 0.85;
}

/* A escala ja aparece na linha de dados; no topo ela ficava dita duas vezes. */
.area-loja .product-scale {
    display: none;
}

/* ---- A VIRADA DA PLACA ----

   A pa e a moldura parada, com o vinco. Quem gira e a FACE dentro dela: a placa
   cai ate o meio, o caractere troca escondido, e a proxima sobe. Duas meias
   viradas fazem uma pa completa.

   A cascata vem do JS, que atrasa cada pa um pouco mais que a anterior — a ultima
   ainda esta girando quando a primeira ja parou. */

.flap {
    /* Perspectiva curta: a placa e pequena e proxima, e uma perspectiva longa
       deixaria a queda chapada, sem a sensacao de peca fisica caindo. */
    perspective: 90px;
    overflow: hidden;
}

.flap-face {
    display: block;
    transform-origin: center center;
    backface-visibility: hidden;
    will-change: transform;
}

/* A placa CAI: some para baixo girando no proprio eixo. */
.flap-face.caindo {
    transform: rotateX(-90deg);
    transition: transform 70ms ease-in;
}

/* A proxima SOBE: entra vindo de cima, ja com o caractere novo. Sem transicao no
   instante em que ela e posicionada, senao ela apareceria girando de volta. */
.flap-face.subindo {
    animation: flap-subindo 70ms ease-out;
}

@keyframes flap-subindo {
    from { transform: rotateX(90deg); }
    to   { transform: rotateX(0deg); }
}

/* SO ONDE HA TEXTO.
   Pa sem caractere nao desenha moldura, fundo nem vinco: um quadradinho vazio no
   meio da linha anuncia um dado que nao existe. */
.flap:empty,
.flap:has(.flap-face:empty) {
    background: none;
    border-color: transparent;
}

.flap:empty::after,
.flap:has(.flap-face:empty)::after {
    display: none;
}

/* E o alvo inteiro some quando nao sobrou pa nenhuma. */
[data-flap]:empty {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .flap-face.caindo,
    .flap-face.subindo {
        transition: none;
        animation: none;
        transform: none;
    }
}

/* ---- CARDS DA MESMA ALTURA, com ou sem pas ----

   Nem toda peca tem modelo curto o bastante para as pas, e a que nao tem ficava
   com o bloco de texto mais baixo — o botao subia e a linha inteira desalinhava.
   Aparecia com o MD-82 no meio de tres Boeing.

   A vaga estica a face, a face estica o card, e o preco desce sozinho ate o fim.
   Assim o botao fica na mesma altura em toda a linha, tenha pa ou nao. */

[data-shuffle-slot] {
    align-items: stretch;
}

[data-shuffle-slot] > [data-shuffle-face] {
    display: flex;
}

[data-shuffle-slot] > [data-shuffle-face] > .product-card {
    width: 100%;
}

.area-loja .product-info {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* O bloco do valor desce ate o fim do card: e ele que encosta o botao na base. */
.area-loja .product-price {
    margin-top: auto;
}

/* ---- O CARD DE KIT no idioma do painel ----

   Ele tinha marcacao propria (.kit-card-*) e ficou de fora quando o resto da
   vitrine mudou: no meio de quatro cards de painel, sobrava um em outra fonte. */

.area-loja .kit-card-title {
    font-family: var(--fonte-painel);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0;
    margin-bottom: 6px;
}

.area-loja .kit-card-title a {
    color: var(--color-gray-300);
}

.area-loja .kit-card-price {
    padding-top: 10px;
    border-top: 1px solid #242424;
    font-family: var(--fonte-painel);
    font-variant-numeric: tabular-nums;
}

.area-loja .kit-card-from {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--color-gray-500);
}

.area-loja .kit-card-cta,
.area-loja .kit-badge {
    font-family: var(--fonte-painel);
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.area-loja .kit-card-note,
.area-loja .kit-previa-selo {
    font-family: var(--fonte-painel);
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* O corpo do kit tambem empurra o preco para o fim, para os quatro botoes
   ficarem na mesma altura. */
.area-loja .kit-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.area-loja .kit-card-price {
    margin-top: auto;
}

/* ---- CARDS PADRONIZADOS ----

   Nao basta o card ter a mesma ALTURA: se o que esta dentro varia, cada bloco cai
   numa altura diferente e a linha parece desalinhada mesmo com os cards do mesmo
   tamanho. Foi o que aconteceu — "Beechcraft King Air C90 (azul/branco)" ocupa
   duas linhas e "Bombardier Challanger 300" uma, entao a escala, a procedencia e o
   preco de cada card ficavam em alturas diferentes.

   As partes que variam RESERVAM o espaco do pior caso. Assim escala, procedencia,
   preco e botao ficam na mesma linha em toda a fileira. */

/* As pas: uma linha reservada. Modelo que passa de uma linha empurra o resto, mas
   e raro — o teto de 18 caracteres existe para isso. */
.area-loja .product-flaps {
    min-height: 2.1em;
}

/* O NOME: duas linhas reservadas, que e o caso comum de nome de peca
   ("Beechcraft King Air C90 (azul/branco)"). Eu tinha ZERADO o min-height dele ao
   virar linha de apoio, e foi dai que veio o desalinhamento. */
.area-loja .product-name {
    min-height: 2.4rem;
    display: block;
}

/* Dado e procedencia sao uma linha cada, sempre. Peca sem prefixo nem escala nao
   renderiza a linha — entao o espaco dela fica reservado aqui, e nao no elemento. */
.area-loja .product-dados,
.area-loja .product-procedencia {
    min-height: 1.9em;
}

/* A nota tambem: card com avaliacao ao lado de card sem avaliacao empurrava o
   preco de um so. */
.area-loja .product-card-rating {
    min-height: 1.6em;
}

/* O CARD estica ate a altura da fileira, dentro e fora do rodizio: no catalogo os
   cards sao filhos diretos da grade. */
.area-loja .products-grid > .product-card,
[data-shuffle-slot] > [data-shuffle-face] > .product-card {
    height: 100%;
}

/* O mesmo para o card de kit. */
.area-loja .kit-card-title {
    min-height: 2.4rem;
    display: block;
}

/* O que NAO gira no preco: o "R$" e os espacos. Fica como texto comum, no mesmo
   tom da placa, para ler como uma coisa so — e nao como um rotulo separado. */
.flap-fixo {
    display: inline-block;
    font-family: var(--fonte-painel);
    font-weight: 700;
    color: var(--color-yellow);
    /* Um respiro depois do "R$", que sem isto encosta na primeira placa. */
    margin-right: 0.18em;
}

/* As placas do preco sao um pouco mais estreitas que as do nome: digito ocupa
   menos que letra, e no mesmo tamanho o preco ficaria largo demais no card. */
.area-loja .final-price .flap,
.area-loja .kit-card-price .flap {
    min-width: 0.74em;
    padding: 0.12em 0.08em;
}

/* ---- O PRECO EM BRANCO ----

   A placa do preco fica branca; o ambar continua no identificador. Com os dois em
   ambar, o card tinha duas manchetes disputando o olho — e a peca e a manchete, o
   preco e a resposta. */
.area-loja .final-price .flap,
.area-loja .final-price .flap-fixo,
.area-loja .kit-card-price .flap,
.area-loja .kit-card-price .flap-fixo,
.area-loja .price .flap,
.area-loja .price .flap-fixo {
    color: var(--color-white);
}

/* Sem JS as pas nao sao montadas e o preco continua sendo texto — ele tambem
   branco, senao a pagina mudaria de cor conforme o script carregasse ou nao. */
.area-loja .final-price,
.area-loja .kit-card-price strong,
.area-loja .price {
    color: var(--color-white);
}

/* ---- A FOTO INTEIRA, e a margem preenchida pelo proprio fundo ----

   Os cards cortavam a peca: com object-fit:cover, a foto e ampliada ate encher o
   quadrado e o que sobra sai fora — asa e cauda ficavam de fora, que e o pior
   lugar para cortar um aviao.

   Agora a foto aparece inteira (contain) e a sobra e preenchida pela PROPRIA foto,
   ampliada e borrada atras. Cor fixa nao serviria: medi as fotos de producao e o
   fundo e #3B9FED na maioria, mas ha #34475E e ha peca fotografada no asfalto —
   um azul chumbado deixaria justamente essas com moldura errada. */

.area-loja .product-image-stack::before,
.area-loja .kit-card-media::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--fundo-da-foto);
    background-size: cover;
    background-position: center;
    /* Ampliar antes de borrar: sem isso o desfoque puxa a borda transparente para
       dentro e aparece um halo claro em volta. */
    transform: scale(1.3);
    filter: blur(24px) saturate(1.1);
    z-index: 0;
}

/* NAO MEXER NO position DOS SLIDES.
   
   Eles sao position:absolute empilhados na mesma celula — e assim que o slideshow
   do card troca de foto. Uma versao disto os trocou para relative so para ficarem
   acima do fundo borrado, e o empilhamento desmontou: nos "produtos relacionados"
   sobrava so o borrao, sem foto.
   
   z-index ja funciona em elemento absoluto. O position nunca precisou mudar. */
/* DOIS ELEMENTOS DIFERENTES, DUAS REGRAS.
   
   Eles estavam juntos e nao podiam estar: o slide do produto ja e
   position:absolute (e assim que o slideshow empilha as fotos), e a imagem do kit
   e ESTATICA, em fluxo.
   
   z-index nao faz nada em elemento nao posicionado. Tratando os dois igual, ou o
   produto perdia o empilhamento, ou o kit nascia borrado — porque o fundo borrado
   e absoluto e pinta por cima do que esta em fluxo. Aconteceram os dois, um em
   cada versao. */
.area-loja .product-image .product-image-slide {
    object-fit: contain;
    z-index: 1;
}

/* A FOTO DO KIT usa o MESMO mecanismo do slideshow do card de produto: slides
   empilhados trocando is-active, com o fade no CSS.

   Antes era imagem estatica, e a troca do rodizio precisava de uma camada PARALELA
   — que brigou com estas regras em tudo: perdia o absolute e caia embaixo do
   texto, perdia o object-fit e entrava ampliada. Reusando o mecanismo, o slide
   novo e um slide como qualquer outro e nao ha o que brigar. */
.area-loja .kit-card-media .kit-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity 1.6s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
    pointer-events: none;
}

.area-loja .kit-card-media .kit-slide.is-active {
    opacity: 1;
}

/* O selo e o carimbo continuam por cima de tudo. */
.area-loja .kit-badge,
.area-loja .kit-previa-selo,
.area-loja .product-seller-badge,
.area-loja .product-discount-badge {
    z-index: 2;
}

/* ---- A FOTO DISSOLVENDO NO CARD ----

   Era o que faltava para a foto e o texto lerem como uma peca so: sem isso a
   imagem termina numa linha dura contra o preto, e o card parece dois pedacos
   colados.

   O degrade sai do proprio fundo (transparente) e chega no preto do bloco de
   texto. Fica ACIMA da foto e ABAIXO dos selos — carimbo de parceiro, desconto e
   "monte voce mesmo" continuam legiveis por cima. */

.area-loja .main-image::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 38%;
    background: linear-gradient(to bottom, rgba(16, 16, 16, 0) 0%, rgba(16, 16, 16, 0.75) 62%, #101010 100%);
    pointer-events: none;
    z-index: 2;
}

.area-loja .kit-badge,
.area-loja .kit-previa-selo,
.area-loja .product-seller-badge,
.area-loja .product-discount-badge {
    z-index: 3;
}

/* ---- O MESMO FUNDO BORRADO NOS OUTROS LUGARES ----

   Detalhe do produto, carrinho e o montador de pacote: em todos a foto aparece
   inteira, e a margem que sobra e preenchida pela propria foto. */

.area-loja .main-image {
    position: relative;
    overflow: hidden;
}

.area-loja .main-image::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--fundo-da-foto);
    background-size: cover;
    background-position: center;
    /* Ampliar antes de borrar: sem isso o desfoque puxa a borda para dentro e
       aparece um halo claro em volta. */
    transform: scale(1.3);
    filter: blur(30px) saturate(1.1);
    z-index: 0;
}

/* SO O z-index. O position da galeria e deliberado e nao pode ser tocado:

   o slide ATIVO e relative (e ele que da altura ao quadro) e os INATIVOS sao
   absolute e escondidos. Uma versao disto forcou todos a relative — os escondidos
   entraram no fluxo, a coluna virou a soma de todas as fotos e o borrao do fundo
   tomou conta da tela.

   .gallery-stack ja e relative na regra base; nao precisa aparecer aqui. */
.area-loja .product-gallery .gallery-slide {
    z-index: 1;
}

/* No carrinho e no pacote a miniatura tambem para de cortar. */
.area-loja .cart-item img,
.area-loja .pack-card img {
    object-fit: contain;
    background-image: var(--fundo-da-foto);
    background-size: cover;
    background-position: center;
}

.area-loja .product-gallery .thumbs img {
    object-fit: contain;
}

/* ---- O MENU DO CLIENTE COMO ETIQUETA ----

   O dropdown do header e a porta da area do cliente, e agora ele anuncia isso: a
   mesma etiqueta de bagagem das telas que ele abre.

   NAO fica escopado em .area-cliente de proposito — o menu aparece em toda pagina
   da loja, e ele pertence ao cliente onde quer que esteja. Escopar faria a porta
   mudar de cara conforme o comodo em que a pessoa esta. */

.user-menu .dropdown-menu {
    /* NAO mexer no position: ele e absolute com top:100% e e o que faz o menu
       flutuar. Uma versao disto o forcou para relative, o dropdown entrou no fluxo
       e desmontou o cabecalho inteiro. Absolute ja e contexto para o ::before. */
    border: 2px solid rgba(255, 215, 0, 0.55);
    border-radius: 14px;
    /* Espaco para a faixa listrada do topo. */
    padding-top: 26px;
    overflow: hidden;
}

/* A FAIXA DIAGONAL da etiqueta, em miniatura. */
.user-menu .dropdown-menu::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 12px;
    background: repeating-linear-gradient(
        -45deg,
        var(--color-yellow) 0 8px,
        #141414 8px 16px);
    opacity: 0.9;
}

.user-menu .dropdown-menu > a {
    font-family: "Courier New", ui-monospace, monospace;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    /* Tracejado e o picote da etiqueta — o mesmo separador das telas do cliente. */
    border-bottom: 1px dashed rgba(255, 215, 0, 0.22);
}

.user-menu .dropdown-menu > a:last-child {
    border-bottom: none;
}

/* ---- A ETIQUETA NAS TELAS QUE O MENU ABRE ----

   O cartao ja virava etiqueta; faltavam as telas que nao usam .form-card — a lista
   de pedidos, os avisos e os pedidos sob medida. O picote e o rotulo em mono valem
   para toda a area. */

.area-cliente .container > h1,
.area-cliente .container > h2 {
    font-family: var(--fonte-etiqueta);
    font-size: clamp(1rem, 1.8vw, 1.2rem);
    font-weight: 700;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--color-yellow);
    padding-bottom: 12px;
    border-bottom: 1px dashed rgba(255, 215, 0, 0.35);
}

/* Numero de pedido, valor e data alinham em coluna: e uma lista que se compara de
   cima para baixo. */
.area-cliente table,
.area-cliente .order-row,
.area-cliente .summary-line {
    font-variant-numeric: tabular-nums;
}

.area-cliente table th {
    font-family: var(--fonte-etiqueta);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--color-gray-500);
}

.area-cliente table td {
    border-bottom: 1px dashed rgba(255, 215, 0, 0.18);
}

/* ============================================================================
   CARTA AERONAUTICA — a identidade do PAINEL DO PARCEIRO.
   ============================================================================

   A quarta leitura, e a que faltava. O parceiro nao esta comprando (painel de
   partidas) nem acompanhando a propria encomenda (etiqueta): ele NAVEGA — os
   anuncios dele, as vendas, o que a loja pediu para ajustar.

   As telas do parceiro quase nao tem classe: sao montadas com estilo inline. Entao
   a carta se apoia nos ELEMENTOS, e nao disputa o que ja esta inline — brigar por
   especificidade com atributo style e briga perdida, e o resultado seria metade da
   tela obedecendo. */

.area-vendedor {
    --fonte-carta: "Courier New", ui-monospace, monospace;
    --tinta-carta: rgba(255, 215, 0, 0.4);
}

/* A REGUA DE COORDENADAS na moldura da pagina — o que faz uma folha parecer carta.
   Os tiques sao gradiente repetido: sao dezenas, e cada um como elemento seria
   marcacao inutil em toda tela do parceiro. */
.area-vendedor main > .container {
    position: relative;
}

.area-vendedor main > .container::before {
    content: "";
    position: absolute;
    /* FORA da coluna, e nao na borda dela: as telas do parceiro zeram o padding
       lateral no proprio HTML, entao em -10px 0 a linha do quadro cruzava as
       palavras. Estilo inline vence CSS; afastar resolve sem disputar com ele. */
    inset: -10px -26px;
    border: 1px solid var(--tinta-carta);
    pointer-events: none;
    background:
        repeating-linear-gradient(to right,
            var(--tinta-carta) 0 1px, transparent 1px 54px) top    / 100% 7px no-repeat,
        repeating-linear-gradient(to right,
            var(--tinta-carta) 0 1px, transparent 1px 54px) bottom / 100% 7px no-repeat,
        repeating-linear-gradient(to bottom,
            var(--tinta-carta) 0 1px, transparent 1px 54px) left   / 7px 100% no-repeat,
        repeating-linear-gradient(to bottom,
            var(--tinta-carta) 0 1px, transparent 1px 54px) right  / 7px 100% no-repeat;
}

/* A ROSA DOS VENTOS, de marca d'agua no canto. E a assinatura da carta.
   Os tiques de grau saem de um gradiente conico recortado em anel — desenhar 36
   traços a mao seria trinta e seis elementos por tela. */
/* A rosa vira elemento proprio (ver _Layout): anel de tiques sozinho fica cru. */
.area-vendedor .rosa-dos-ventos {
    position: absolute;
    right: 8px;
    top: 96px;
    width: 118px;
    height: 118px;
    border-radius: 50%;
    border: 1px solid var(--tinta-carta);
    pointer-events: none;
    opacity: 0.75;
    z-index: 0;

    /* O ANEL DE TIQUES: o miolo e tampado por um radial desenhado POR CIMA do
       conico. Uma versao anterior recortava com mask-image e a rosa saia vazia. */
    background:
        radial-gradient(circle, #0A0A0A 0 60%, transparent 61%),
        repeating-conic-gradient(
            from 0deg,
            var(--tinta-carta) 0deg 1.2deg,
            transparent 1.2deg 10deg);
}

/* A AGULHA: cheia para o norte, vazada para o sul — como a do carrossel. */
.area-vendedor .rosa-agulha {
    position: absolute;
    left: 50%;
    top: 18%;
    width: 16px;
    height: 64%;
    transform: translateX(-50%);
    background: linear-gradient(
        to bottom,
        var(--color-yellow) 0 50%,
        rgba(255, 215, 0, 0.18) 50% 100%);
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.area-vendedor .rosa-ponto {
    position: absolute;
    font-family: var(--fonte-carta);
    font-size: 11px;
    font-weight: 700;
    color: var(--color-yellow);
    line-height: 1;
}

.area-vendedor .rosa-n { top: -14px; left: 50%; transform: translateX(-50%); }
.area-vendedor .rosa-s { bottom: -14px; left: 50%; transform: translateX(-50%); }
.area-vendedor .rosa-l { right: -14px; top: 50%; transform: translateY(-50%); }
.area-vendedor .rosa-o { left: -14px; top: 50%; transform: translateY(-50%); }

/* O container precisa ser referencia para ela. */
.area-vendedor main {
    position: relative;
}


.area-vendedor h1 {
    padding-bottom: 12px;
    border-bottom: 1px dashed var(--tinta-carta);
}

/* Rotulo e dado em mono, e numero de tabela: o parceiro passa o dia comparando
   valor de venda em coluna. */
.area-vendedor label,
.area-vendedor th {
    font-family: var(--fonte-carta);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
}

.area-vendedor td,
.area-vendedor strong {
    font-variant-numeric: tabular-nums;
}

/* O botao tambem entra no idioma. */
.area-vendedor .btn-primary,
.area-vendedor .btn-ghost,
.area-vendedor .btn-outline {
    font-family: var(--fonte-carta);
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* Em tela estreita a moldura e a rosa somem: ali elas comem espaco util que o
   parceiro nao tem de sobra. */
@media (max-width: 900px) {
    .area-vendedor main > .container::before,
    .area-vendedor main > .container::after { display: none; }
}

/* ---- O FUNDO DESCE PELO CARD INTEIRO ----

   A foto ficava azul e o corpo do card, preto chapado: dois pedacos colados. Agora
   o fundo borrado da propria foto cobre o card todo e um degrade escurece de cima
   para baixo — as placas ficam SOBRE esse degrade, e a peca e o texto leem como
   uma coisa so.

   E o mesmo fundo, e nao uma cor azul chumbada: medi as fotos de producao e o
   estudio e #3B9FED na maioria, mas ha peca em #34475E e ha peca no asfalto. Cor
   fixa deixaria essas com moldura errada. */

.area-loja .product-card,
.area-loja .kit-card {
    position: relative;
    isolation: isolate;
}

.area-loja .product-card::before,
.area-loja .kit-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--fundo-da-foto);
    background-size: cover;
    background-position: center top;
    filter: blur(38px) saturate(1.25);
    transform: scale(1.35);
    z-index: -2;
}

/* O ESCURECIMENTO. Sem ele o texto cai sobre o azul cheio e some; com ele, o card
   vai do azul da foto ao preto do rodape. */
.area-loja .product-card::after,
.area-loja .kit-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(10, 10, 10, 0.10) 0%,
        rgba(10, 10, 10, 0.55) 42%,
        rgba(10, 10, 10, 0.88) 72%,
        #0A0A0A 100%);
    z-index: -1;
}

/* O corpo do card fica transparente para o degrade aparecer — antes ele era preto
   chapado e cobria tudo. */
.area-loja .product-card,
.area-loja .kit-card,
.area-loja .product-info,
.area-loja .kit-card-body {
    background: transparent;
}

/* As placas ganham um fundo proprio um pouco mais escuro que o degrade, senao elas
   somem no azul claro do topo. */
.area-loja .product-flaps .flap {
    background: rgba(10, 10, 10, 0.78);
}

/* DUAS LINHAS DE PLACA. O teto subiu de 18 para 26 caracteres para 17 pecas
   deixarem de ficar mudas, e nesse tamanho a placa quebra. A altura das duas fica
   reservada para a fileira nao desalinhar. */
.area-loja .product-flaps {
    min-height: 4.4em;
}

/* ---- MAIS ALTURA PARA A IMAGEM, E MENOS SOMBRA SOBRE ELA ----

   A area da foto era um QUADRADO (aspect-ratio: 1). Cabia bem para miniatura, mas
   decal e uma cartela ALTA: com a foto inteira dentro do quadrado ela encolhia, e
   o degrade de baixo — que existe para a foto dissolver no texto — cobria a
   legenda impressa no pe da cartela.

   Mais alto resolve os dois de uma vez: a cartela ocupa mais e o rodape dela sai
   de baixo da sombra. */
.area-loja .product-image,
.area-loja .kit-card-media {
    aspect-ratio: 4 / 5;
}

/* E a sombra encurta: 38% comia quase dois quintos da imagem. O degrade continua
   fazendo a transicao para o texto, so que sem invadir o conteudo da foto. */
/* NO CARD NAO HA MAIS SOMBRA SOBRE A FOTO.
   
   Eram DUAS sombras fazendo o mesmo trabalho: esta, sobre a foto, e a do card
   inteiro que veio depois. A de cima terminava em preto opaco bem na borda da
   imagem e virava uma BARRA PRETA por cima do selo — cobria o "previa
   ilustrativa" e o pe das cartelas de decal.
   
   A do card continua fazendo a transicao do azul ao preto; ela e a que voce
   gostou, e nao esta. */
.area-loja .main-image::after {
    height: 22%;
    background: linear-gradient(to bottom, rgba(10, 10, 10, 0) 0%, rgba(10, 10, 10, 0.72) 55%, #0A0A0A 100%);
}


/* O link do painel do parceiro no rodape: destacado do resto da coluna, porque
   nao e um link de ajuda — e a porta da area de trabalho dele. */
.footer-parceiro {
    color: var(--color-yellow);
    margin-top: 6px;
}