/* ============================================================
   AMOR ENTRE LINHAS — folha de estilo da loja

   Mobile-first, com a mesma escada de breakpoints do iafirstbrasil:

     base    ate 479px   celular pequeno
     480px   celular grande
     580px   duas colunas
     680px   tablet em pe
     900px   cabecalho de desktop, produto em duas colunas
     1024px  vitrine em 4 colunas
     1300px  container no maximo

   Nada de tamanho de fonte fixo: tudo vem da escala fluida de tokens.css,
   que interpola entre um piso legivel no celular e o teto definido no painel.
   ============================================================ */

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

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

body {
    margin: 0;
    font-family: var(--body-font);
    font-size: var(--font-base-fluid);
    color: var(--main-foreground);
    background: var(--main-background);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    /* Nenhuma pagina deve rolar na horizontal: uma faixa full-bleed ou um
       grid que estoure a largura vira barra de rolagem no celular. */
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--heading-font);
    font-weight: var(--title-font-weight);
    text-transform: none;
    margin: 0 0 .5em;
    line-height: 1.2;
    /* Titulo longo sem espaco (um nome de produto colado) nao pode furar a
       caixa no celular. */
    overflow-wrap: break-word;
}

h1 { font-size: var(--h1-fluid); }
h2 { font-size: var(--h2-fluid); }
h3 { font-size: var(--h3-fluid); }
h4 { font-size: var(--h4-fluid); }
h5 { font-size: var(--h5-fluid); }
h6 { font-size: var(--h6-fluid); }

p { margin: 0 0 1em; }
a { color: inherit; text-decoration: none; transition: color .2s ease; }
img { max-width: 100%; display: block; }
button { font-family: inherit; }

/* Campo de formulario com fonte abaixo de 16px faz o Safari do iPhone dar
   zoom sozinho ao focar, e a pagina fica desalinhada depois. */
input, select, textarea { font-size: max(16px, var(--font-base-fluid)); }

/* Foco visivel para navegacao por teclado. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 2000;
    background: var(--main-foreground); color: #fff; padding: 10px 16px;
}
.skip-link:focus { left: 8px; top: 8px; }

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

/* ── Container e grid ──────────────────────────────────────── */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--gutter-container);
}

/* ── O RESPIRO VERTICAL NAO PODE ZERAR O LATERAL ────────────
   As tres regras usavam o atalho `padding`, que escreve os QUATRO lados. Nos
   elementos que sao so faixa (`<section class="section">` com um `.container`
   dentro) isso nao muda nada, porque a lateral deles ja era zero. Mas a area
   da cliente empilha as duas classes no mesmo elemento
   (`<div class="container section">`), e ali o atalho apagava o
   `padding: 0 var(--gutter-container)` do `.container`: o conteudo encostava
   nas duas bordas da tela e as linhas do menu da conta saiam cortadas no
   celular.

   `padding-block` mexe so no eixo vertical, entao a lateral continua sendo a
   que cada elemento ja tinha, seja o gutter do container, seja zero. */
.section { padding-block: var(--section-distance); }
.section--tight { padding-block: clamp(20px, 4vw, 30px); }
.section--loose { padding-block: clamp(32px, 6vw, 60px); }

.section-head { text-align: center; margin-bottom: clamp(20px, 3vw, 28px); }
.section-head h2 { font-size: var(--h3-fluid); margin-bottom: 4px; }
.section-head p { font-size: var(--font-small); color: rgba(0, 0, 0, .6); margin: 0; }

/* "Ver todos", embaixo do subtitulo da vitrine.

   Discreto de proposito: quem rola a home veio ver as pecas escolhidas, e este
   e o passo seguinte, nao o principal. Um botao cheio aqui competiria com o
   proprio carrossel logo abaixo. */
.section-head__todos {
    display: inline-block; margin-top: 8px;
    font-size: var(--font-small); color: var(--accent-color);
    text-decoration: underline; text-underline-offset: 3px;
}

/* Qualquer tabela larga rola dentro da propria caixa em vez de empurrar a
   pagina inteira. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── Aviso do modo manutencao ───────────────────────────────
   So aparece para quem passou pelo modo manutencao (painel logado ou link de
   previa): lembra que os visitantes estao vendo a pagina de aviso. */
.aviso-manutencao {
    background: var(--main-foreground); color: var(--main-background);
    font-size: var(--font-small); line-height: 1.5; text-align: center;
    padding: 8px var(--gutter-container);
}
.aviso-manutencao code { font-size: inherit; font-weight: 600; }

/* ── Imagens e placeholders ────────────────────────────────── */
.img-fit { width: 100%; height: 100%; object-fit: cover; }

/* Espaco reservado enquanto a URL do Backblaze nao foi colada no painel. */
.img-placeholder {
    width: 100%;
    background:
        repeating-linear-gradient(45deg,
            rgba(171, 151, 127, .07) 0 10px,
            rgba(171, 151, 127, .13) 10px 20px);
    border: 1px dashed rgba(20, 20, 19, .35);
    display: flex; align-items: center; justify-content: center;
    position: relative;
}
.img-placeholder span {
    width: 28px; height: 28px; border-radius: 50%;
    border: 1px solid rgba(20, 20, 19, .4);
    position: relative;
}
.img-placeholder span::after {
    content: ""; position: absolute; inset: 0; margin: auto;
    width: 12px; height: 1px; background: rgba(20, 20, 19, .4);
}
.img-placeholder--1x1 { aspect-ratio: 1 / 1; }
.img-placeholder--3x4 { aspect-ratio: var(--product-image-ratio); }
.img-placeholder--4x3 { aspect-ratio: 4 / 3; }
.img-placeholder--16x5 { aspect-ratio: 16 / 5; }
.img-placeholder--hero { aspect-ratio: 16 / 5; min-height: 100%; }
.img-placeholder--full { height: 100%; aspect-ratio: auto; }

/* Quando a caixa em volta ja tem a proporcao certa (card de produto, banner
   de categoria, galeria...), o reservado preenche a caixa em vez de impor a
   propria proporcao — senao um card 3:4 com reservado 1:1 abriria uma faixa
   vazia embaixo, e cada mudanca de proporcao no painel exigiria trocar
   tambem o modificador na view. */
.hero__media .img-placeholder,
.promo-banner__media .img-placeholder,
.thin-banner__media .img-placeholder,
.category-card .img-placeholder,
.gallery-item .img-placeholder,
.product-card__media .img-placeholder,
.product-gallery__main .img-placeholder,
.product-gallery__thumb .img-placeholder,
.cart-item__media .img-placeholder,
.swatch-grid__thumb .img-placeholder,
.portrait-block__photo .img-placeholder {
    height: 100%;
    aspect-ratio: auto;
}

/*
 * Icone trocado por imagem no painel.
 *
 * `contain` e nao `cover`: a arte tem de caber INTEIRA na caixa quadrada. Com
 * `cover`, um icone retangular teria as bordas cortadas — e num icone o que
 * fica de fora costuma ser justamente o que o identifica.
 *
 * As medidas vem dos atributos width/height do proprio <img>, iguais as do SVG
 * que ele substitui, entao trocar desenho por imagem nao mexe no layout.
 */
.icone-img { object-fit: contain; display: inline-block; vertical-align: middle; }

/* ── Botoes ────────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 46px; padding: 12px 22px;
    border: none; border-radius: var(--border-radius);
    font-size: var(--font-base-fluid); font-family: var(--body-font);
    cursor: pointer; text-align: center;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.btn-primary { background: var(--button-background); color: var(--button-foreground); }
.btn-primary:hover:not(:disabled) { background: var(--button-hover); color: var(--button-foreground); }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; }

.btn-outline {
    background: transparent; color: #fff;
    border: 1px solid var(--accent-color);
}
.btn-outline:hover { background: var(--accent-color); color: #fff; }

.btn-outline-dark {
    background: transparent; color: var(--main-foreground);
    border: 1px solid var(--accent-color);
}
.btn-outline-dark:hover { background: var(--accent-color); color: #fff; }

.btn-uppercase { text-transform: uppercase; letter-spacing: .08em; font-size: var(--font-small); }
.btn-block { width: 100%; }
.btn-sm { min-height: 38px; padding: 8px 16px; font-size: var(--font-small); }

/* ── Etiquetas ─────────────────────────────────────────────── */
.label {
    display: inline-block; padding: 4px 8px;
    background: var(--label-background); color: var(--label-foreground);
    font-size: var(--font-smallest); border-radius: var(--border-radius);
    line-height: 1.3;
}

/* ============================================================
   CABECALHO
   No celular: uma linha so (menu, logo, acoes) e a busca dentro do drawer.
   A partir de 900px entram o topbar e a barra de navegacao.
   ============================================================ */
.site-header {
    position: sticky; top: 0; z-index: 1040;
    background: var(--header-background);
    color: var(--header-foreground);
}

/* A faixa fina de contato saiu do cabecalho. `.topbar-social` ficou: ela e
   quem desenha os icones das redes no rodape da gaveta do celular, que
   continua existindo. O nome vem de la, e trocar por trocar renomearia uma
   classe em uso sem ganho nenhum. */
.topbar-social { display: flex; align-items: center; gap: 14px; }
.topbar-social a { display: inline-flex; color: var(--topbar-foreground); opacity: .85; }
.topbar-social a:hover { opacity: 1; }

/* NO CELULAR, UMA FAIXA SO: menu e lupa na esquerda, logo no meio, conta e
   sacola na direita, como na loja de referencia que a dona escolheu.

   ALTURA DA FAIXA E ALTURA DA LOGO SAO AJUSTES SEPARADOS. A faixa tem
   `height` fixa, vinda do painel (--header-height-mobile), e a logo tem a
   dela (--logo-height-mobile). Aumentar a logo nao engorda o cabecalho: se
   ela passar da altura da faixa, transborda para cima e para baixo, o que e
   justamente o que se quer quando a imagem tem margem transparente em volta
   do desenho.

   A LARGURA TAMBEM LIMITA. Numa tela de 390px sobram ~210px entre as duas
   laterais (ver o bloco "max-width: 899px" mais abaixo); a logo da marca, 2,4
   vezes mais larga que alta, para de crescer por volta de 87px de altura.
   Passando disso, `max-width` segura a caixa e `object-fit: contain` desenha a
   logo inteira dentro dela, sem cortar.

   O tamanho e um so o tempo todo, inclusive rolando. Havia um modo compacto
   que encolhia o cabecalho depois de 40px de rolagem, e ele saiu a pedido da
   loja. */
.header-logo-row {
    /* Piso IGUAL nas duas laterais. Sem ele, `1fr` nao garante colunas do
       mesmo tamanho: quando o espaco aperta, cada faixa de fr para de encolher
       no minimo do proprio conteudo, e a esquerda desceria mais que a direita,
       tirando a logo do centro.

       94px = 2 icones de 40px + 14px de intervalo, a lateral mais larga. */
    --header-lateral: 94px;

    display: grid;
    grid-template-areas: "menu logo acoes";
    grid-template-columns:
        minmax(var(--header-lateral), 1fr)
        minmax(0, auto)
        minmax(var(--header-lateral), 1fr);
    /* A linha do grid e a altura da faixa, e nao a do item mais alto. Sem
       isto, uma logo maior que a faixa esticava a linha para fora dela e os
       icones desciam junto, descentrados; assim so a logo passa da borda, e
       por igual em cima e embaixo. */
    grid-template-rows: minmax(0, 1fr);
    align-items: center;
    column-gap: 8px;
    height: var(--header-height-mobile);
    padding: 0;
}

.header-logo {
    grid-area: logo;
    justify-self: center;
    display: inline-flex; align-items: center;
    max-width: 100%; min-width: 0;
}
.header-logo img {
    height: var(--logo-height-mobile);
    width: auto; max-width: min(var(--logo-max-width), 100%);
    object-fit: contain;
}
.header-logo .logo-fallback {
    font-family: var(--script-font);
    font-size: clamp(17px, 4.8vw, 34px); line-height: 1.1;
    color: var(--header-foreground); white-space: nowrap;
    /* min-width: 0 e o que permite o corte com reticencias: como item de
       flex, o padrao `min-width: auto` o impediria de encolher abaixo do
       texto, e ele vazaria da coluna em vez de encurtar. */
    min-width: 0; overflow: hidden; text-overflow: ellipsis;
}

/* A busca do cabecalho so existe no desktop; no celular ela mora no drawer,
   onde tem a largura inteira em vez de disputar espaco com a logo. */
.header-search { grid-area: busca; display: none; width: min(100%, 300px); }
.header-search form { display: flex; align-items: center; gap: 6px; }
.header-search input {
    width: 100%; border: none; border-bottom: 1px solid rgba(0, 0, 0, .25);
    background: transparent; padding: 6px 2px; font-size: var(--font-small);
    font-family: var(--body-font); color: var(--header-foreground); outline: none;
}
.header-search input::placeholder { color: rgba(0, 0, 0, .45); }
.header-search input:focus { border-bottom-color: var(--main-foreground); }
.header-search button {
    background: none; border: none; cursor: pointer; padding: 4px; color: inherit;
    display: inline-flex;
}

.header-actions { grid-area: acoes; display: flex; align-items: center; gap: 14px; justify-self: end; }
.header-search { justify-self: start; }
.header-actions a {
    display: inline-flex; align-items: center; justify-content: center;
    position: relative; color: inherit;
    /* Alvo de toque confortavel sem inflar a altura da linha. */
    min-width: 40px; min-height: 40px;
}

.cart-badge {
    position: absolute; top: 2px; right: 0;
    background: var(--header-badge-background); color: var(--header-badge-foreground);
    border-radius: 50%; font-size: 10px; font-weight: 700;
    width: 16px; height: 16px;
    display: flex; align-items: center; justify-content: center;
}

/* `min-height`, e nao `height`: com o numero de categorias do menu configuravel,
   os itens podem quebrar para uma segunda linha, e a altura fixa os fazia
   transbordar por cima do conteudo de baixo. Com o padrao de fabrica (tres
   categorias) nada quebra e a barra mede exatamente o mesmo de antes. */
.header-nav {
    min-height: var(--nav-row-height);
    display: none;
    border-top: 1px solid rgba(0, 0, 0, .1);
    background: var(--nav-desktop-background);
}
.header-nav ul {
    list-style: none; margin: 0; padding: 0;
    display: flex; align-items: center; justify-content: center;
    /* O `gap` do flex vale nos dois eixos, entao a segunda linha ja nasce
       espacada da primeira: nao ha padding vertical a acrescentar.

       O `- 1px` desconta a borda de cima da barra. A regra anterior era
       `height: 100%` dentro de uma barra de altura fixa, o que dava 46px; sem o
       desconto, a barra inteira cresceria um pixel com o menu de fabrica, e a
       ideia aqui e que nada mude enquanto ninguem aumentar o numero. */
    gap: clamp(16px, 2.6vw, 34px);
    min-height: calc(var(--nav-row-height) - 1px);
    flex-wrap: wrap;
}
.header-nav a {
    font-size: var(--font-nav); color: var(--nav-desktop-foreground);
    letter-spacing: .02em; position: relative; padding: 4px 0;
    white-space: nowrap;
}
.header-nav a::after {
    content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
    background: currentColor; transition: width .25s ease;
}
.header-nav a:hover::after, .header-nav a.ativo::after { width: 100%; }

/* Menu e lupa dividem a coluna da esquerda, como os dois icones da direita
   dividem a de la. A caixa e que ocupa a area do grid: dois elementos na
   mesma area do grid ficariam um por cima do outro. */
.header-esquerda {
    grid-area: menu;
    justify-self: start;
    display: flex; align-items: center; gap: 14px;
    margin-left: -8px;
}

.burger {
    background: none; border: none; padding: 8px; cursor: pointer;
    color: inherit; display: inline-flex; align-items: center; justify-content: center;
    min-width: 40px; min-height: 40px;
}

/* NO CELULAR, A LARGURA E O QUE DECIDE O TAMANHO DA LOGO.

   Ela fica entre as duas laterais, e passando dessa largura a altura pedida
   no painel deixava de fazer efeito: com 94px reservados de cada lado e 8px
   de intervalo, sobravam 154px numa tela de 390px, e a logo da marca (2,4 de
   largura para 1 de altura) parava nos 64px de altura. Diminuir no painel
   funcionava; aumentar nao mudava nada.

   Aqui os icones se juntam como na loja de referencia (2px entre um e outro,
   alvo de toque de 40px mantido) e as duas pontas avancam 8px sobre a margem
   da pagina, como o botao de menu ja fazia. A lateral cai para 74px e o
   intervalo sai: a logo ganha 210px de largura em 390px, o que da ~87px de
   altura a ela. So no celular: o computador segue com 94px e 14px. */
@media (max-width: 899px) {
    .header-logo-row { --header-lateral: 74px; column-gap: 0; }
    .header-esquerda, .header-actions { gap: 2px; }
    .header-actions { margin-right: -8px; }
}

/* Drawer mobile */
.drawer {
    position: fixed; inset: 0 auto 0 0; width: min(340px, 88vw);
    background: var(--header-background); z-index: 1060;
    transform: translateX(-100%); transition: transform .3s ease;
    display: flex; flex-direction: column; padding: 18px;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.drawer[data-open="true"] { transform: translateX(0); }
.drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.drawer__head .logo-fallback {
    font-family: var(--script-font); font-size: 26px; line-height: 1.1;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.drawer__search { margin-bottom: 14px; }
.drawer__search form {
    display: flex; align-items: center; gap: 8px;
    border: 1px solid rgba(0, 0, 0, .18); border-radius: var(--border-radius);
    padding: 4px 10px;
}
.drawer__search input {
    flex: 1; min-width: 0; border: none; background: transparent;
    padding: 8px 0; font-family: var(--body-font); color: inherit; outline: none;
}
.drawer__search button {
    background: none; border: none; cursor: pointer; color: inherit;
    display: inline-flex; padding: 4px;
}
.drawer nav ul { list-style: none; margin: 0; padding: 0; }
.drawer nav li { border-bottom: 1px solid rgba(0, 0, 0, .08); }
.drawer nav a { display: block; padding: 14px 0; font-size: var(--font-big-fluid); }
.drawer__footer { margin-top: auto; padding-top: 20px; font-size: var(--font-small); }

/* Os grupos "Minha conta" e "Atendimento" dentro da gaveta do celular. */
.drawer__grupo { list-style: none; margin: 20px 0 0; padding: 0; }
.drawer__grupo-titulo {
    /* display: block porque o titulo tanto e <li> numa lista quanto <span>
       num bloco: sem isto, o do bloco ficaria na mesma linha do conteudo. */
    display: block;
    font-size: var(--font-small); text-transform: uppercase;
    letter-spacing: .06em; color: rgba(0, 0, 0, .5); padding-bottom: 6px;
}
.drawer__grupo a { display: block; padding: 11px 0; font-size: var(--font-base-fluid); }
.drawer__sair {
    background: none; border: none; cursor: pointer; color: inherit;
    font-family: var(--body-font); font-size: var(--font-base-fluid);
    padding: 11px 0; text-align: left; width: 100%;
}

.overlay {
    position: fixed; inset: 0; background: rgba(0, 0, 0, .45);
    z-index: 1050; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease;
}
.overlay[data-open="true"] { opacity: 1; visibility: visible; }

/* ============================================================
   BANNER PRINCIPAL — carrossel de imagens

   A arte ja traz titulo e botao desenhados dentro. Tres consequencias:

   1. A ALTURA E DO PAINEL, E VALE PARA TODOS OS SLIDES. A caixa tem a altura
      de --hero-height (computador) / --hero-height-mobile (celular), e cada
      slide ocupa 100% dela. Trocar o numero no painel muda o banner inteiro de
      uma vez, entao um slide nunca fica mais alto que o vizinho e a pagina nao
      "pula" a cada troca.

      Uma versao anterior usava aspect-ratio no lugar da altura. Ficava bonito,
      mas tornava os dois campos do painel decorativos: a dona da loja trocava o
      numero e nada acontecia na tela. Controle que nao controla nada e pior do
      que controle nenhum.

   2. QUEM DECIDE O RECORTE E O PAINEL. --hero-fit e "cover" (preenche a caixa,
      podendo cortar as bordas) ou "contain" (mostra a arte inteira, podendo
      sobrar faixa nas laterais). Com texto desenhado ate a margem, "contain"
      garante que nenhuma palavra some; com arte que sangra, "cover" fecha
      melhor. As duas escolhas sao legitimas — e nao e o CSS que sabe qual.

   3. A PECA INTEIRA E O BOTAO. O botao esta na imagem, entao o clique nao pode
      ficar preso a um retangulo menor. Slide com link e um <a> que cobre tudo;
      sem link e um <div>, sem cursor de mao.
   ============================================================ */
.hero-slider {
    position: relative;
    overflow: hidden;
    height: var(--hero-height-mobile);
    background: rgba(0, 0, 0, .04);
    /* O dedo para o lado e do carrossel; para cima e para baixo continua
       rolando a pagina. Sem esta linha o navegador tratava o gesto horizontal
       como rolagem dele tambem, e o banner passava de slide arrastando a
       pagina junto. */
    touch-action: pan-y;
}

/* O arrasto nativo do navegador nao entra aqui: puxar a arte move o banner,
   e nao a miniatura fantasma com o endereco do slide. */
.hero-slide,
.hero-slide img,
.hero-slide picture { -webkit-user-drag: none; }

/* Enquanto a mao arrasta: cursor de "segurando" e nada de pintar texto. */
.hero-slider.esta-arrastando { cursor: grabbing; user-select: none; }

.hero-slider__trilho {
    display: flex;
    height: 100%;
    /* A troca de slide move a trilha. transform anima na placa de video, sem
       recalcular o layout a cada quadro. */
    transition: transform .5s cubic-bezier(.4, 0, .2, 1);
    will-change: transform;
}

.hero-slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
}
.hero-slide picture,
.hero-slide img,
.hero-slide .img-placeholder { width: 100%; height: 100%; display: block; }
/* O recorte vem do painel; cover e a rede de seguranca se o token faltar. */
.hero-slide img { object-fit: var(--hero-fit, cover); }
/* Sem foto cadastrada o marcador ocupa a caixa toda, e nao uma faixa 16/5
   solta no meio dela. */
.hero-slide .img-placeholder--hero { aspect-ratio: auto; }

/* ── Banner que acompanha a arte ───────────────────────────────
   A altura vem da proporcao da imagem, e nao de um numero em pixels: assim a
   arte aparece inteira em qualquer largura de tela, sem corte e sem faixa
   sobrando. E o que a loja de referencia faz (la a proporcao vai no proprio
   slide, calculada da arte de 3600x1400).

   O ponto de partida e a proporcao que o painel pede em cada tela; o hero.js
   troca pela proporcao real assim que a imagem carrega. */
/* A classe repetida no seletor vence a altura em pixels de .hero-slider, que
   e declarada depois neste arquivo, dentro do bloco de computador. */
.hero-slider.hero-slider--proporcao {
    height: auto;
    aspect-ratio: var(--hero-proporcao-mobile, 1080 / 1350);
}
.hero-slider--proporcao .hero-slide img {
    /* Com a caixa no formato da arte, "contain" nunca deixa faixa: e so a
       garantia de que nada e cortado se a arte vier em outro tamanho. */
    object-fit: contain;
}

@media (min-width: 768px) {
    .hero-slider.hero-slider--proporcao { aspect-ratio: var(--hero-proporcao, 1920 / 760); }
}

/* Sem animacao para quem pediu menos movimento no sistema. */
@media (prefers-reduced-motion: reduce) {
    .hero-slider__trilho { transition: none; }
}

/* ── Setas ──────────────────────────────────────────────────
   Circulo claro translucido, como na referencia: visivel sobre foto clara e
   sobre foto escura, sem competir com a arte.

   SO NO COMPUTADOR. No celular o gesto e o dedo: arrastar de lado ja troca de
   slide, e os pontos embaixo dizem onde a pessoa esta. Dois circulos por cima
   da arte roubariam espaco justo onde a imagem tem texto desenhado — e ainda
   ficariam debaixo do polegar de quem so queria rolar a pagina. */
.hero-slider__seta {
    position: absolute; top: 50%; transform: translateY(-50%);
    /* Acima da coluna de redes sociais (1050): ver a nota das medidas
       laterais, logo abaixo. */
    z-index: 1051;
    width: 44px; height: 44px; border-radius: 50%;
    border: none; padding: 0;
    display: none; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .82);
    color: var(--main-foreground);
    box-shadow: 0 1px 6px rgba(0, 0, 0, .18);
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}
.hero-slider__seta:hover { background: #fff; }
.hero-slider__seta:active { transform: translateY(-50%) scale(.94); }
/* Quase encostadas na borda, como na loja de referencia: no meio da arte elas
   competiam com o desenho do banner, que ja tem titulo e botao dentro.

   A coluna flutuante de redes sociais ocupa os mesmos 68px da direita e, em
   tela baixa com muitas redes, a pilha sobe ate a altura das setas. Por isso a
   seta passa por cima dela: antes acontecia o contrario, e em 1280x720 o
   clique na seta abria o Pinterest em vez de passar o slide. As duas medidas
   andam juntas para o banner nao ficar torto. */
.hero-slider__seta--anterior { left: 20px; }
.hero-slider__seta--proximo { right: 20px; }

/* No celular, as mesmas setas pequenas e discretas das vitrines: um circulo
   meio transparente perto da borda, no meio da arte, com a area de toque maior
   que o desenho. So para avisar que ha mais de uma imagem; quem passa e o dedo
   ou o proprio banner, a cada 3 segundos. */
@media (max-width: 679px) {
    .hero-slider__seta {
        display: flex; width: 28px; height: 28px;
        background: rgba(255, 255, 255, .6); box-shadow: none;
        color: rgba(0, 0, 0, .7);
    }
    .hero-slider__seta svg { width: 14px; height: 14px; }
    .hero-slider__seta::after { content: ""; position: absolute; inset: -8px; }
    .hero-slider__seta--anterior { left: 8px; }
    .hero-slider__seta--proximo { right: 8px; }
}

/* ── Pontos ─────────────────────────────────────────────────
   Dizem quantos slides existem e onde a pessoa esta. Sem eles o carrossel
   parece a pagina se mexendo sozinha. */
.hero-slider__pontos {
    position: absolute; left: 0; right: 0; bottom: 14px;
    z-index: 2;
    display: flex; justify-content: center; gap: 8px;
}
.hero-slider__ponto {
    width: 9px; height: 9px; border-radius: 50%;
    border: none; padding: 0; cursor: pointer;
    background: rgba(255, 255, 255, .55);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
    transition: background .2s ease, transform .2s ease;
}
.hero-slider__ponto.esta-ativo { background: #fff; transform: scale(1.25); }

/* Slide unico nao e carrossel: nada de setas, pontos ou promessa de movimento. */
.hero-slider--unico .hero-slider__seta,
.hero-slider--unico .hero-slider__pontos { display: none; }

.hero__content {
    position: relative; z-index: 2; color: #fff;
    padding: clamp(40px, 9vw, 64px) var(--gutter-container); max-width: 760px;
}
.hero__title {
    font-family: var(--script-font);
    font-size: var(--hero-title);
    line-height: 1.05; margin: 0 0 10px; font-weight: 400; color: #fff;
}
.hero__subtitle {
    font-size: var(--font-big-fluid); margin: 0 0 22px;
    color: rgba(255, 255, 255, .92);
}

/* ============================================================
   FAIXA DE BENEFICIOS

   No celular sao dois por linha, com o icone em cima e o texto centrado — e
   o arranjo que as lojas de moda usam nesta faixa. Empilhados um sob o outro
   os quatro itens ocupavam uma tela inteira de altura antes de a vitrine
   comecar. A partir de 680px o icone volta para o lado do texto.
   ============================================================ */
.benefits { background: var(--banner-services-background); }
.benefits .container {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(18px, 5vw, 26px) 12px;
    align-items: start;
    padding-top: 26px; padding-bottom: 26px;
}
.benefit {
    display: flex; flex-direction: column; align-items: center;
    gap: 8px; text-align: center; min-width: 0;
}
.benefit svg,
.benefit .icone-img { flex-shrink: 0; opacity: .85; }
.benefit__title { font-size: var(--h6-fluid); font-weight: 600; line-height: 1.25; }
.benefit__text { font-size: var(--font-small); color: rgba(0, 0, 0, .65); }

/* ============================================================
   BANNERS DE CATEGORIA
   ============================================================ */
.category-banners { display: grid; grid-template-columns: 1fr; gap: var(--gutter); }

.category-card {
    position: relative; overflow: hidden; border-radius: 0;
    aspect-ratio: var(--category-image-ratio);
    display: block;
}
.category-card img, .category-card .img-placeholder {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .4s ease;
}
.category-card:hover img { transform: scale(1.05); }
.category-card__overlay {
    position: absolute; left: 0; right: 0; bottom: 0; height: 55%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .6) 60%);
    display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
    text-align: center; padding: clamp(14px, 3vw, 24px); color: #fff; gap: 8px;
}
.category-card__script {
    font-family: var(--script-font); font-size: var(--script-display);
    line-height: 1; font-weight: 400;
}
.category-card__tagline { font-size: var(--font-small); color: rgba(255, 255, 255, .9); margin: 0 0 6px; }

/* ============================================================
   CARROSSEL — setas fora dos cards, loop sem autoplay
   ============================================================ */
.carousel { position: relative; }
/* touch-action: pan-y entrega a rolagem vertical ao navegador e deixa o
   horizontal para o carrossel: e o que faz o arrasto responder na hora, em vez
   de esperar o navegador decidir de quem e o gesto. */
/* ── O `overflow: hidden` COMIA A ULTIMA LINHA DE PIXELS ─────
   O recorte e obrigatorio: e ele que esconde os slides vizinhos. So que a
   altura do trilho e a do card mais alto, e o card termina numa fracao de
   pixel (651,563 na largura em que a loja reparou). O navegador arredonda o
   recorte para o pixel do aparelho, e a borda de baixo do ultimo elemento —
   o botao do WhatsApp, que encosta no fim do card — fica do lado de fora.
   Em outras larguras a fracao cai para o outro lado e o botao aparece
   inteiro, e por isso o defeito parecia so de "tela grande".

   Dois pixels de folga tiram o conteudo de cima da linha do corte. Nao
   afastam nada que se veja, e nenhum dos dois carrosseis da loja encosta
   conteudo no fundo de proposito. */
.carousel__viewport { overflow: hidden; touch-action: pan-y; padding-bottom: 2px; }

/* O arrasto nativo do navegador nao entra aqui: puxar a foto de uma peca
   move o carrossel, e nao a miniatura fantasma com o endereco do produto. */
.carousel__viewport img,
.carousel__viewport a { -webkit-user-drag: none; }

/* Enquanto a mao arrasta: cursor de "segurando" e nada de pintar texto. */
.carousel__viewport.esta-arrastando { cursor: grabbing; user-select: none; }
.carousel__track {
    display: flex; gap: var(--gutter);
    /* .4s ease dava a impressao de lentidao a cada seta. A curva de saida
       rapida chega quase junto com o clique e ainda desacelera no fim. */
    transition: transform .28s cubic-bezier(.22, .61, .36, 1);
    will-change: transform;
}
.carousel__slide { flex: 0 0 calc((100% - var(--gutter)) / 2); min-width: 0; }

.carousel__arrow {
    /* No meio da foto do card: o carousel.js mede e poe em --seta-topo. */
    position: absolute; top: var(--seta-topo, 50%); transform: translateY(-50%);
    width: 38px; height: 38px; border-radius: 50%;
    background: rgba(255, 255, 255, .9); border: 1px solid rgba(0, 0, 0, .1);
    display: none; align-items: center; justify-content: center;
    cursor: pointer; z-index: 3; color: var(--main-foreground);
    transition: background .2s ease;
}
.carousel__arrow:hover { background: #fff; }
/* Na ponta da lista a seta continua no lugar: some so a setinha de dentro.

   Apagar o botao inteiro (era opacity .35) fazia um circulo branco a 35% num
   fundo claro, ou seja, nada: a seta parecia ter sumido da vitrine. O circulo
   fica, o desenho clareia, e o cursor deixa de ser de mao. */
.carousel__arrow[disabled] {
    cursor: default; color: rgba(0, 0, 0, .25);
    background: rgba(255, 255, 255, .75);
}
.carousel__arrow[disabled]:hover { background: rgba(255, 255, 255, .75); }
.carousel__arrow--prev { left: -19px; }
.carousel__arrow--next { right: -19px; }

/* NO CELULAR AS SETAS EXISTEM, PEQUENAS E DISCRETAS.

   Quem passa e o dedo, mas sem nenhuma seta a pessoa nao percebe que a
   fileira continua para o lado. Aqui elas sao um circulo pequeno e meio
   transparente, encostado na borda da foto; a area de toque e maior do que
   o desenho (o ::after), para o dedo nao errar. Na ponta da lista a seta
   daquele lado some, em vez de ficar apagada: no inicio so aparece a da
   direita, que e justamente o convite para passar. */
@media (max-width: 679px) {
    .carousel__arrow {
        display: flex; width: 26px; height: 26px;
        background: rgba(255, 255, 255, .72); border-color: rgba(0, 0, 0, .06);
        color: rgba(0, 0, 0, .7);
    }
    .carousel__arrow svg { width: 13px; height: 13px; }
    .carousel__arrow::after { content: ""; position: absolute; inset: -9px; }
    .carousel__arrow--prev { left: -10px; }
    .carousel__arrow--next { right: -10px; }
    .carousel__arrow[disabled] { visibility: hidden; }
}

.carousel__dots { display: flex; justify-content: center; gap: 6px; margin-top: 18px; flex-wrap: wrap; }
.carousel__dot {
    width: 7px; height: 7px; border-radius: 50%; border: none; padding: 0;
    background: rgba(0, 0, 0, .2); cursor: pointer; transition: background .2s ease;
}
.carousel__dot[aria-current="true"] { background: var(--accent-color); }

/* ============================================================
   CARD DE PRODUTO — sem borda, sem radius
   ============================================================ */
.product-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gutter);
}

.product-card { position: relative; min-width: 0; }

.product-card__media {
    position: relative; aspect-ratio: var(--product-image-ratio);
    overflow: hidden; display: block;
    background: rgba(0, 0, 0, .03);
}
.product-card__media img {
    width: 100%; height: 100%; object-fit: cover;
    transition: opacity .3s ease, transform .4s ease;
}
.product-card__media .img-secondary {
    position: absolute; inset: 0; opacity: 0;
}
.product-card:hover .img-secondary { opacity: 1; }
.product-card:hover .img-primary { opacity: 0; }

/* ── COR ESCOLHIDA VENCE A FOTO DE PASSAGEM ─────────────────
   Para clicar numa bolinha de cor e preciso estar com o ponteiro sobre o card,
   e nesse instante a regra acima ja trocou a foto principal pela de passagem.
   O clique mudava o src da foto principal, que estava INVISIVEL: a cor
   trocava e a tela nao mudava nada. Do lado de quem clica, bolinha quebrada.

   Com uma cor escolhida, a alternancia de passagem sai de cena: a foto que
   fica e a da cor pedida, que e a unica que a pessoa quis ver. Clicar de novo
   na mesma cor devolve o card ao comportamento normal. */
.product-card.esta-com-cor .img-secondary { opacity: 0; }
.product-card.esta-com-cor .img-primary { opacity: 1; }

/* ── A FOTO DA COR E UMA CAMADA, E NAO UM `src` TROCADO ─────
   Cada cor ganha o seu <img>, empilhado aqui dentro e baixado no primeiro
   sinal de interesse na peca. Trocar de cor passou a ser trocar qual camada
   esta visivel: sem download no meio do clique, e sem depender de o bucket
   mandar guardar o arquivo. A foto base continua pintada por baixo, entao uma
   foto com transparencia nao abre buraco no card.

   Sem z-index de proposito: a etiqueta ("Lançamento") e o selo de esgotado tem
   z-index 2 e continuam por cima. */
.product-card__media .img-cor {
    position: absolute; inset: 0; opacity: 0;
    /* ── A TROCA E UM CORTE, E NAO UMA DISSOLVENCIA ─────────
       A regra geral de `.product-card__media img` anima a opacidade em 0,3s,
       e ela pegava tambem estas camadas. Numa troca de cor as duas transicoes
       corriam juntas: a que saia descia de 1 a 0 enquanto a que entrava subia
       de 0 a 1, e no meio do caminho NENHUMA das duas cobria a moldura. O que
       aparecia no buraco era a foto principal, que continua pintada por baixo
       (`.esta-com-cor .img-primary { opacity: 1 }`) para foto com
       transparencia nao abrir vazio no card. Medido no Chromium: a 120ms da
       troca, a camada que sai estava em 0,33 e a que entra em 0,67, e cerca de
       um quinto do que se via era a foto principal. Do lado de quem clica, a
       foto original piscava entre uma cor e outra.

       Sem transicao as duas trocas acontecem no mesmo quadro: uma camada
       opaca substitui a outra, sem nenhum instante com as duas pela metade. As
       fotos ja vem baixadas desde o primeiro sinal de interesse na peca, entao
       nao ha o que esperar; quando a de uma cor ainda estiver a caminho, quem
       avisa continua sendo `.esta-trocando-cor`. */
    transition: none;
}
.product-card.esta-com-cor .img-cor.esta-visivel { opacity: 1; }
/* Sem foto de troca, o zoom leve substitui a alternancia. */
.product-card__media:not(:has(.img-secondary)):hover img { transform: scale(1.04); }

/* ── A FOTO DA COR AINDA ESTA A CAMINHO ─────────────────────
   So aparece quando a espera passa de 150ms, ou seja, quando o arquivo nao
   estava no cache. Sem isto o card fica exatamente igual durante o download e
   quem clicou conclui que a bolinha nao funcionou — e clica em outra, o que
   recomeca a espera. A foto antiga continua visivel por baixo: apaga-la
   deixaria um buraco no lugar da peca. */
.product-card.esta-trocando-cor .product-card__media { opacity: .55; }
.product-card.esta-trocando-cor .product-card__media::after {
    content: ''; position: absolute; inset: 0; z-index: 3;
    background: linear-gradient(90deg,
        transparent 0%, rgba(255, 255, 255, .45) 50%, transparent 100%);
    background-size: 200% 100%;
    animation: cor-carregando 1s linear infinite;
}
@keyframes cor-carregando {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}
/* Movimento infinito e o que esta preferencia pede para evitar: sem ele fica
   so o escurecimento, que ja diz que a peca esta ocupada. */
@media (prefers-reduced-motion: reduce) {
    .product-card.esta-trocando-cor .product-card__media::after { animation: none; }
}

.product-card__label {
    position: absolute; top: 8px; left: 8px; z-index: 2;
    /* `--label-foreground` e nao `#fff`: a cor da letra e um campo do painel
       ("Letra da etiqueta", em Tema e cores) que esta tarjinha vinha
       ignorando. O padrao do token e branco, entao nada muda em quem nunca
       mexeu nele. */
    background: var(--label-background); color: var(--label-foreground);
    font-size: var(--font-smallest); padding: 4px 8px; border-radius: var(--border-radius);
}

/* O DESCONTO DEIXOU DE DISPUTAR LUGAR COM A ETIQUETA.

   Os dois moravam no mesmo canto, e por isso um excluia o outro: a peca com
   etiqueta propria ("Novidade", "Feito a mao") perdia o "-35% OFF" justamente
   quando ele mais vende. Cada um no seu canto, os dois aparecem e nenhum
   cobre o outro.

   REDONDO, e nao tarjinha: a etiqueta da esquerda ja e um retangulo, e dois
   retangulos iguais em cantos opostos da mesma foto se leem como um par de
   rotulos. A medalha diz outra coisa, e e a forma que a cliente reconhece de
   qualquer loja como "esta em promocao".

   AS CORES SAO AS DO PAINEL, as mesmas da etiqueta: quem muda "Fundo da
   etiqueta na foto" em Tema e cores muda os dois de uma vez, e nenhum dos dois
   precisa ser lembrado separadamente. */
.product-card__off {
    position: absolute; top: 10px; right: 10px; z-index: 2;
    width: 42px; height: 42px; border-radius: 50%;
    background: var(--label-background); color: var(--label-foreground);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    font-size: var(--font-smallest); line-height: 1.05; font-weight: 700;
    text-align: center;
}
.product-card__out {
    position: absolute; inset: 0; z-index: 2;
    background: rgba(255, 255, 255, .72);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--font-small); letter-spacing: .06em; text-transform: uppercase;
}

/* O que falta escolher. Mesmo tom do .alert-error, para nao introduzir um
   vermelho estranho a paleta. */
.variacoes-erro {
    margin: 10px 0 0; font-size: var(--font-small); color: #8f2f2b; font-weight: 500;
}

/* ── O card centralizado ────────────────────────────────────
   Nome logo abaixo da foto e tudo no eixo do meio, como nas lojas de moda que
   servem de referencia. O texto a esquerda deixava cada card com um ponto de
   leitura diferente quando os nomes tinham comprimentos diferentes; centralizado,
   a fileira inteira le como uma so. */
.product-card { text-align: center; }
.product-card__swatches {
    display: flex; gap: 5px; margin: 10px 0 6px; flex-wrap: wrap;
    justify-content: center;
}
.swatch {
    width: 14px; height: 14px; border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, .18); display: inline-block;
}

.product-card__name {
    font-size: var(--font-base-fluid); color: var(--main-foreground);
    /* Colado na foto: e a legenda dela, nao um paragrafo solto. O respiro que
       havia antes vinha das bolinhas de cor, e some nas pecas sem cor. */
    margin: 10px 0 4px; font-weight: 400; line-height: 1.35;
    overflow-wrap: break-word;
}
/* Com bolinhas de cor, quem ja deu o respiro foi elas. */
.product-card__swatches + .product-card__name { margin-top: 0; }
.product-card__compare {
    font-size: var(--font-small); color: rgba(0, 0, 0, .45);
    text-decoration: line-through; margin-right: 6px;
}
.product-card__price { font-size: var(--font-base-fluid); color: var(--main-foreground); margin: 0; }
.product-card__price-pix {
    font-size: var(--font-base-fluid); font-weight: 600; color: var(--accent-color); margin: 2px 0 0;
}
.product-card__installments { font-size: var(--font-small); color: rgba(0, 0, 0, .6); margin: 2px 0 0; }

/* ============================================================
   FAIXA ROLANTE (marquee) — componente unico

   Usado pela barra de avisos do topo e pela faixa da home. O laco e continuo:
   o que sai pela esquerda reaparece pela direita sem emenda.

   Como o loop fecha sem salto: a lista de frases e renderizada DUAS vezes,
   em dois grupos identicos, e a animacao desloca a trilha em exatamente -50%
   — ou seja, a largura de um grupo. No instante em que o primeiro grupo
   termina de sair, o segundo esta na posicao inicial do primeiro, e o salto
   de volta a 0% e invisivel.

   Cada grupo tem `min-width: 100%` do proprio viewport da faixa: com poucas
   frases o grupo ainda cobre a tela inteira, entao nao abre buraco entre uma
   volta e outra. As frases se espalham com space-around dentro do grupo.
   ============================================================ */
.marquee {
    --marquee-duration: 32s;
    position: relative;
    overflow: hidden;
    display: flex; align-items: center;
}
.marquee__track {
    display: flex;
    width: max-content;
    animation: marquee var(--marquee-duration) linear infinite;
}
.marquee__group {
    display: flex; align-items: center;
    flex-shrink: 0;
    /* 100vw e nao 100%: dentro de uma trilha `width: max-content` a
       porcentagem seria circular. A faixa tem overflow:hidden, entao um grupo
       mais largo que o container fica contido. */
    min-width: 100vw;
    justify-content: space-around;
}
.marquee__item {
    display: inline-flex; align-items: center; gap: clamp(18px, 4vw, 34px);
    padding: 0 clamp(14px, 3vw, 28px);
    white-space: nowrap;
    letter-spacing: .04em;
}
/* Separador entre uma frase e a proxima. */
.marquee__item::after { content: "✦"; opacity: .5; font-size: .8em; }

@keyframes marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ── Barra de avisos, no topo de tudo ───────────────────────── */
.announce-bar {
    background: var(--announce-background); color: var(--announce-foreground);
    min-height: var(--announce-height);
    font-size: var(--font-medium);
    text-transform: uppercase; letter-spacing: .1em;
}
.announce-bar .marquee__item { gap: clamp(24px, 5vw, 48px); }

/* ── Faixa rolante da home ──────────────────────────────────── */
.marquee-bar {
    background: var(--welcome-background); color: var(--welcome-foreground);
    min-height: 58px;
    font-size: var(--font-base-fluid);
}

/* Sem movimento para quem pediu menos animacao no sistema: a faixa vira uma
   linha estatica com as frases, em vez de sumir.

   As copias saem de cena pelo aria-hidden, que ja marca exatamente o que e
   repeticao: sobra um unico ciclo de frases, na mesma altura de uma linha. */
@media (prefers-reduced-motion: reduce) {
    .marquee__track { animation: none; width: 100%; }
    .marquee__group + .marquee__group { display: none; }
    .marquee__group { min-width: 0; flex: 1; flex-wrap: wrap; justify-content: center; }
    .marquee__item[aria-hidden="true"] { display: none; }
    .marquee__item { white-space: normal; }
    .carousel__track { transition: none; }
    * { scroll-behavior: auto !important; }
}

/* ============================================================
   GRADE DE AMOSTRAS DE COR
   ============================================================ */
.swatch-grid {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
}
.swatch-grid__item { width: 60px; text-align: center; }
.swatch-grid__thumb {
    width: 60px; height: 100px; overflow: hidden; background: rgba(0, 0, 0, .04);
}
.swatch-grid__thumb img { width: 100%; height: 100%; object-fit: cover; }
.swatch-grid__label { font-size: var(--font-smallest); margin-top: 6px; display: block; }

/* ============================================================
   BANNERS PROMOCIONAIS
   ============================================================ */
.promo-banner {
    position: relative; min-height: clamp(320px, 52vw, 486px); overflow: hidden;
    display: flex; align-items: center; justify-content: center; text-align: center;
}
.promo-banner__media { position: absolute; inset: 0; }
.promo-banner__media img { width: 100%; height: 100%; object-fit: cover; }
.promo-banner__media .img-placeholder { height: 100%; }
.promo-banner::after {
    content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .35);
}
.promo-banner__content {
    position: relative; z-index: 2; color: #fff;
    padding: clamp(28px, 6vw, 40px) var(--gutter-container); max-width: 700px;
}
.promo-banner__title { font-size: var(--h2-fluid); color: #fff; margin-bottom: 8px; }
.promo-banner__subtitle { font-size: var(--font-big-fluid); color: rgba(255, 255, 255, .9); margin-bottom: 20px; }

.thin-banner {
    position: relative; min-height: 64px; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    padding: 12px var(--gutter-container);
}
.thin-banner__media { position: absolute; inset: 0; }
.thin-banner__media img { width: 100%; height: 100%; object-fit: cover; }
.thin-banner::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .35); }
.thin-banner__text {
    position: relative; z-index: 2; color: #fff; text-align: center;
    font-size: var(--font-small); letter-spacing: .06em; text-transform: uppercase;
}

/* ============================================================
   DEPOIMENTOS
   ============================================================ */
.testimonials__title {
    text-align: center; text-transform: uppercase; letter-spacing: .1em;
    font-size: var(--h3-fluid); margin-bottom: clamp(20px, 3vw, 30px);
}
.testimonial-card {
    background: rgba(255, 255, 255, .45); padding: clamp(18px, 3vw, 26px) clamp(16px, 2.6vw, 22px);
    border-radius: var(--border-radius); height: 100%;
    display: flex; flex-direction: column; gap: 10px;
}
.testimonial-card__stars { color: var(--accent-color); letter-spacing: .12em; font-size: var(--font-small); }
.testimonial-card__text { font-size: var(--font-base-fluid); font-style: italic; margin: 0; flex: 1; }
.testimonial-card__author { font-size: var(--font-small); font-weight: 600; margin: 0; }
.testimonial-card__city { font-size: var(--font-smallest); color: rgba(0, 0, 0, .55); }

/* ============================================================
   GALERIA — carrossel com o tamanho das vitrines
   A largura de cada card e a do .carousel__slide (2 / 3 / 4 por vez) e a
   proporcao e a da foto de produto: a loja pediu que a galeria tivesse o
   mesmo tamanho de "Mais vendidos". Titulo e descricao ficam embaixo,
   centralizados como o nome da peca no card.
   ============================================================ */
.gallery-item {
    position: relative; aspect-ratio: var(--product-image-ratio);
    overflow: hidden; display: block;
    background: rgba(0, 0, 0, .03);
}
.gallery-item img, .gallery-item video { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.gallery-item:hover img { transform: scale(1.04); }
.gallery-item__caption {
    position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(10px, 2vw, 16px);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .6));
    color: #fff; font-size: var(--font-small); text-align: center;
}
.gallery-item__play {
    position: absolute; inset: 0; margin: auto; width: 54px; height: 54px;
    border-radius: 50%; background: rgba(255, 255, 255, .85);
    display: flex; align-items: center; justify-content: center; color: var(--main-foreground);
}

.galeria-card { text-align: center; min-width: 0; }
/* Mesma letra e mesmo respiro do nome da peca no card de produto. */
.galeria-card__titulo {
    font-size: var(--font-base-fluid); color: var(--main-foreground);
    margin: 10px 0 4px; font-weight: 400; line-height: 1.35;
    overflow-wrap: break-word;
}
.galeria-card__titulo a { color: inherit; }
.galeria-card__descricao {
    font-size: var(--font-small); color: rgba(0, 0, 0, .65);
    margin: 0; line-height: 1.5; overflow-wrap: break-word;
}

/* Com menos itens do que cabem na tela, a fileira fica no meio em vez de
   encostada na esquerda. O carousel.js poe a classe quando tudo cabe. */
.galeria-carrossel.carousel--cabe .carousel__track { justify-content: center; }

/*
 * A COLUNA COM VIDEO E ILUSTRACAO, NAO PLAYER.
 *
 * `pointer-events: none` no video faz o clique atravessar para o <a> da
 * coluna, quando ela tem link. Sem isto o navegador oferece o menu dele
 * (baixar video, velocidade, tela cheia) em cima da peca, e o clique nao
 * chega ao link nenhum.
 */
.gallery-item--video video { pointer-events: none; }
/* Fundo escuro so enquanto o arquivo nao pintou o primeiro quadro: melhor do
   que a cor do papel aparecendo por baixo de um video ainda transparente. */
.gallery-item--video { background: #111; }
/* O zoom do hover e da foto. No video ele brigaria com o movimento da
   propria cena, e a peca ficaria tremendo no meio do gesto. */
.gallery-item--video:hover video { transform: none; }

/* ============================================================
   NEWSLETTER + RODAPE
   ============================================================ */
/* Um respiro antes do rodape.
   A ultima secao da pagina encostava no bloco escuro, e a vitrine parecia
   continuar dentro do rodape. O espaco separa o conteudo do fim da pagina. */
.site-footer { background: var(--footer-background); color: var(--footer-foreground); margin-top: clamp(36px, 6vw, 72px); }
.site-footer a { color: var(--footer-fg-80); }
.site-footer a:hover { color: var(--footer-foreground); }

.newsletter {
    padding: clamp(32px, 5vw, 44px) 0 clamp(26px, 4vw, 34px);
    border-bottom: 1px solid var(--footer-fg-20); text-align: center;
}
.newsletter h2 { font-size: var(--h3-fluid); color: var(--footer-foreground); margin-bottom: 6px; }
.newsletter p { font-size: var(--font-small); color: var(--footer-fg-80); margin-bottom: 20px; }
/* No celular o campo e o botao empilham: lado a lado, o botao espremeria o
   e-mail a ponto de nao caber o texto digitado. */
.newsletter form {
    display: flex; flex-direction: column; gap: 12px;
    max-width: 460px; margin: 0 auto;
}
.newsletter input[type="email"] {
    flex: 1; min-width: 0; background: transparent; border: none;
    border-bottom: 1px solid var(--footer-fg-20);
    padding: 10px 2px; color: var(--footer-foreground);
    font-family: var(--body-font); outline: none;
}
.newsletter input[type="email"]::placeholder { color: var(--footer-fg-60); }
.newsletter input[type="email"]:focus { border-bottom-color: var(--footer-foreground); }

.footer-body { padding: clamp(28px, 5vw, 40px) 0 30px; }
.footer-cols { display: grid; grid-template-columns: 1fr; gap: 8px; }
.footer-col h3 {
    font-size: var(--font-small); text-transform: uppercase; letter-spacing: .08em;
    color: var(--footer-foreground); margin-bottom: 14px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 9px; font-size: var(--font-small); }
.footer-col li a { display: inline-block; padding: 3px 0; }

/* No mobile as colunas viram acordeao. */
.footer-col__toggle {
    display: flex; width: 100%; align-items: center; justify-content: space-between;
    background: none; border: none; padding: 15px 0; cursor: pointer;
    color: var(--footer-foreground); font-family: var(--body-font);
    font-size: var(--font-small); text-transform: uppercase; letter-spacing: .08em;
    border-bottom: 1px solid var(--footer-fg-10);
}
.footer-col__panel { display: none; padding: 12px 0; }
.footer-col[data-open="true"] .footer-col__panel { display: block; }
.footer-col__toggle svg { transition: transform .2s ease; flex-shrink: 0; }
.footer-col[data-open="true"] .footer-col__toggle svg { transform: rotate(180deg); }
/* O <h3> repete o rotulo do botao do acordeao; no celular so o botao aparece. */
.footer-col__panel h3 { display: none; }

/* A coluna dos selos e a unica que nao e acordeao: no celular ela vem logo
   depois da linha do ultimo botao, e encostava nela. */
.footer-col--selos { padding-top: 18px; }

/* Os selos viraram coluna: sem linha por cima e sem faixa propria, porque
   agora eles moram dentro da grade junto com os links. */
.footer-seals {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.footer-seals img { height: var(--seal-height); width: auto; }
/* O titulo do segundo grupo de selos precisa de ar em cima; o do primeiro nao,
   que ele ja abre a coluna. */
.footer-seals__titulo-2 { margin-top: 18px; }

/* ── FAIXA FINAL ───────────────────────────────────────────────
   Copyright e assinatura de quem fez o site. Cor propria, branca de fabrica:
   e a quebra que faz o fim da pagina parecer fim, em vez de o rodape sumir na
   borda do navegador. Centralizada nas duas larguras, como nas lojas grandes.
   ------------------------------------------------------------ */
.footer-final {
    background: var(--credit-background);
    color: var(--credit-foreground);
    /* A altura da tira sai daqui, e o painel manda neste numero. Sem um teto
       escrito no CSS: quem quiser a faixa larga poe 24px, quem quiser o
       minimo poe 0px e sobram so as duas linhas de texto. */
    padding: var(--credit-padding) 0;
    text-align: center;
}
.footer-final .container {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.footer-final__copy {
    margin: 0; font-size: var(--font-medium); color: var(--credit-foreground);
    line-height: 1.5;
}
/* A assinatura e um link so, com o texto em cima e a logo embaixo. Empilhados
   dentro do proprio <a> para a area clicavel cobrir os dois: quem mira a logo
   pequena no celular erra o alvo se so ela responder ao toque. */
/* A cor vem qualificada com .site-footer porque `.site-footer a` pinta todo
   link do rodape com a cor CLARA do rodape escuro, e aqui o fundo e branco:
   sem isto a assinatura fica branca sobre branco, invisivel. */
/* `flex-direction` vem do painel: ao lado do texto a faixa fica com duas
   linhas; embaixo, com tres. As duas opcoes do campo sao literalmente `row` e
   `column`, entao o valor escolhido entra aqui sem tabela de conversao no
   meio. */
.site-footer .footer-final__credito {
    display: inline-flex; flex-direction: var(--credit-layout); align-items: center; gap: 5px;
    color: var(--credit-foreground); text-decoration: none;
    padding: 2px 8px; border-radius: 6px;
}
.site-footer .footer-final__credito:hover { color: var(--credit-foreground); opacity: .7; }
.footer-final__credito-texto {
    font-size: var(--font-medium); letter-spacing: .04em; line-height: 1.5;
}
.footer-final__credito img {
    height: var(--credit-logo-height); width: auto; display: block;
}

/* ── Barra flutuante de redes sociais ──────────────────────────
   Empilhada no canto inferior direito, cada rede na propria cor de marca.
   So aparecem as redes preenchidas no painel — a coluna encolhe sozinha.
   ------------------------------------------------------------ */
.social-fab {
    position: fixed; right: 16px; bottom: 16px; z-index: 1050;
    display: flex; flex-direction: column; gap: 10px;
}

.social-fab__item {
    width: 48px; height: 48px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
    color: #fff;
    transition: transform .2s ease;
}
.social-fab__item:hover { transform: scale(1.07); color: #fff; }

/* As cores oficiais de cada rede. Reconhecer de relance vale mais do que
   uniformizar com a paleta da loja: um circulo bege nao diz "Instagram". */
.social-fab__item--whatsapp  { background: var(--whatsapp); }
.social-fab__item--facebook  { background: #1877f2; }
.social-fab__item--tiktok    { background: #010101; }
.social-fab__item--youtube   { background: #ff0000; }
.social-fab__item--pinterest { background: #e60023; }
/* O Instagram nao tem cor chapada: a marca e o degrade. */
.social-fab__item--instagram {
    background: radial-gradient(circle at 30% 107%,
        #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}

/* Icone trocado por imagem no painel: a arte ja vem com a propria cor, entao o
   circulo colorido atras viraria uma moldura indesejada. */
.social-fab__item:has(.icone-img) { background: none; box-shadow: none; }
.social-fab__item:has(.icone-img) .icone-img { width: 48px; height: 48px; }

/* O WhatsApp pisca; as outras redes ficam quietas.
   ------------------------------------------------------------
   O anel que expande e some chama o olho sem cobrir nada: ele vive num
   ::after atras do botao, entao nunca rouba o clique. O botao em si so
   respira de leve — piscar o icone inteiro cansaria em pagina longa.
   Quem pediu menos animacao no sistema nao ve nem uma coisa nem outra. */
.social-fab__item--whatsapp { position: relative; animation: fab-respira 2.4s ease-in-out infinite; }

.social-fab__item--whatsapp::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    background: var(--whatsapp); z-index: -1;
    animation: fab-anel 2.4s ease-out infinite;
}

@keyframes fab-anel {
    0%   { transform: scale(1);   opacity: .55; }
    70%  { transform: scale(1.6); opacity: 0; }
    100% { transform: scale(1.6); opacity: 0; }
}

@keyframes fab-respira {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
    .social-fab__item--whatsapp,
    .social-fab__item--whatsapp::after { animation: none; }
    .social-fab__item--whatsapp::after { opacity: 0; }
}

/* ============================================================
   BREADCRUMB
   ============================================================ */
.breadcrumb {
    font-size: var(--font-small); color: rgba(0, 0, 0, .6);
    padding: 18px 0 10px; display: flex; flex-wrap: wrap; gap: 6px;
}
.breadcrumb a:hover { color: var(--accent-color); }
.breadcrumb span[aria-current] { color: var(--main-foreground); }

/* ============================================================
   PAGINA DE CATEGORIA
   ============================================================ */
.category-head h1 { font-size: var(--h1-fluid); margin-bottom: 6px; }
.category-head p { font-size: var(--font-base-fluid); color: rgba(0, 0, 0, .7); max-width: 640px; }

.listing-bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; padding: 14px 0; margin: 18px 0 24px;
    border-top: 1px solid rgba(0, 0, 0, .1); border-bottom: 1px solid rgba(0, 0, 0, .1);
    font-size: var(--font-small);
}
.listing-bar select {
    border: 1px solid rgba(0, 0, 0, .18); background: transparent; border-radius: var(--border-radius);
    padding: 9px 10px; font-family: var(--body-font); cursor: pointer; max-width: 100%;
}

.filter-panel {
    position: fixed; top: 0; right: 0; bottom: 0; width: min(380px, 92vw);
    background: var(--main-background); z-index: 1060; padding: 20px;
    transform: translateX(100%); transition: transform .3s ease;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.filter-panel[data-open="true"] { transform: translateX(0); }
.filter-panel__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }

.accordion { border-bottom: 1px solid rgba(0, 0, 0, .1); }
.accordion__toggle {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    background: none; border: none; padding: 15px 0; cursor: pointer;
    font-family: var(--body-font); font-size: var(--font-base-fluid); color: inherit; text-align: left;
}
.accordion__toggle svg { transition: transform .2s ease; flex-shrink: 0; }
.accordion[data-open="true"] .accordion__toggle svg { transform: rotate(180deg); }
.accordion__panel { display: none; padding-bottom: 15px; }
.accordion[data-open="true"] .accordion__panel { display: block; }

.filter-option {
    display: flex; align-items: center; gap: 9px; padding: 8px 0;
    font-size: var(--font-small); cursor: pointer;
}
.filter-option input { accent-color: var(--accent-color); width: 18px; height: 18px; flex-shrink: 0; }
.filter-option .count { color: rgba(0, 0, 0, .5); margin-left: auto; }

.pagination { display: flex; justify-content: center; gap: 6px; margin: 40px 0 10px; flex-wrap: wrap; }
.pagination a, .pagination span {
    min-width: 44px; height: 44px; padding: 0 10px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid rgba(0, 0, 0, .15); border-radius: var(--border-radius);
    font-size: var(--font-small); transition: background .2s ease, color .2s ease;
}
.pagination a:hover { background: var(--accent-color); border-color: var(--accent-color); color: #fff; }
.pagination [aria-current="page"] { background: var(--accent-color); border-color: var(--accent-color); color: #fff; }

.empty-state { text-align: center; padding: clamp(40px, 8vw, 60px) 20px; color: rgba(0, 0, 0, .6); }

/* ============================================================
   PAGINA DE PRODUTO
   ============================================================ */
.product-layout { display: grid; grid-template-columns: 1fr; gap: 26px; }

.product-gallery { display: grid; grid-template-columns: 1fr; gap: 12px; min-width: 0; }
/* PRODUTO COM UMA FOTO SO (OU NENHUMA) NAO TEM COLUNA DE MINIATURAS, em tela
   nenhuma.

   A regra ficava dentro do bloco de 1024px e com o mesmo peso da que abre a
   coluna. O bloco de 1100px, escrito depois, abria a coluna de novo (90px) e
   vencia pela ordem: acima de 1100px a foto unica caia nessa faixa estreita e
   aparecia como uma miniatura no canto, com o espaco da foto grande vazio. No
   celular e entre 1024px e 1099px ela aparecia certa, e por isso o defeito so
   se via no computador. Com as duas classes juntas a regra pesa mais que a de
   qualquer largura de tela, e nenhum bloco escrito depois a desfaz. */
.product-gallery.product-gallery--single { grid-template-columns: minmax(0, 1fr); }
.product-gallery__main {
    position: relative;
    aspect-ratio: var(--product-image-ratio); overflow: hidden; background: rgba(0, 0, 0, .03);
}
.product-gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.product-gallery__main .img-placeholder { height: 100%; aspect-ratio: auto; }

/* A faixa de fotos.

   Uma foto por quadro, sempre. `touch-action: pan-y` entrega o gesto vertical
   a pagina e guarda o horizontal para a galeria: sem ele, arrastar de lado
   rolava a pagina junto e a foto tremia no meio do caminho. */
.product-gallery__viewport { width: 100%; height: 100%; overflow: hidden; touch-action: pan-y; }
.product-gallery__track {
    display: flex; height: 100%;
    transition: transform .35s ease;
    will-change: transform;
}
.product-gallery__slide { flex: 0 0 100%; height: 100%; min-width: 0; }

/* As setas, no mesmo desenho das dos carrosseis da home: circulo claro e
   discreto, na cor do site. A diferenca e a posicao — la elas ficam FORA dos
   cards, aqui ficam dentro da foto, no meio da altura, que e onde a mao
   procura numa galeria. */
.product-gallery__arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 38px; height: 38px; border-radius: 50%;
    background: rgba(255, 255, 255, .9); border: 1px solid rgba(0, 0, 0, .1);
    display: none; align-items: center; justify-content: center;
    cursor: pointer; z-index: 3; color: var(--main-foreground);
    transition: background .2s ease;
}
.product-gallery__arrow:hover { background: #fff; }
/* Na ponta o circulo fica e o desenho clareia, como no carrossel: apagar o
   botao inteiro faria a seta parecer ter sumido da pagina. */
.product-gallery__arrow[disabled] {
    cursor: default; color: rgba(0, 0, 0, .25);
    background: rgba(255, 255, 255, .75);
}
.product-gallery__arrow[disabled]:hover { background: rgba(255, 255, 255, .75); }
.product-gallery__arrow--prev { left: 12px; }
.product-gallery__arrow--next { right: 12px; }
.product-gallery__thumbs {
    display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
}
.product-gallery__thumb {
    flex: 0 0 68px; aspect-ratio: var(--product-image-ratio); overflow: hidden; cursor: pointer;
    border: 1px solid transparent; background: rgba(0, 0, 0, .03); padding: 0;
}
.product-gallery__thumb[aria-current="true"] { border-color: var(--accent-color); }
.product-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }

/* A FOTO PRINCIPAL TEM TAMANHO MAXIMO, e a pagina fica centralizada.

   Ela ocupava toda a largura que sobrava ao lado da coluna de compra: num
   computador comum, uns 630x840px, mais alta que a tela. Agora, como na loja
   de referencia, ela para em 470px de largura no computador (uns 627px de
   altura em 3:4, inteira na tela) e em 520px no tablet; no celular continua
   na largura da tela. As fotos enviadas (1200x1600) nao mudam: o navegador so
   as mostra menores.

   `width: 100%` com `margin-inline: auto`, e nao `justify-self: center`: no
   grid, centralizar pelo `justify-self` encolhe a galeria ao conteudo, e a
   coluna `minmax(0, 1fr)` da foto ficaria com largura zero. */
@media (min-width: 600px) {
    .product-gallery { width: 100%; max-width: 520px; margin-inline: auto; }
}

.product-buy { min-width: 0; }
.product-buy h1 { font-size: var(--h2-fluid); margin-bottom: 12px; }
.product-price-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.product-compare { font-size: var(--font-base-fluid); color: rgba(0, 0, 0, .45); text-decoration: line-through; }
/* O selo da pagina do produto continua tarjinha: ali ele mora numa linha de
   texto, acima do preco, e nao sobre a foto. Um circulo no meio de um
   paragrafo empurraria a linha inteira para baixo. */
.product-off { background: var(--label-background); color: var(--label-foreground); font-size: var(--font-smallest); padding: 3px 7px; border-radius: var(--border-radius); }
.product-price { font-size: var(--font-huge-fluid); font-weight: 600; margin: 0; }
.product-price-pix { font-size: var(--font-big-fluid); font-weight: 600; color: var(--accent-color); margin: 2px 0 0; }
.product-installments { font-size: var(--font-base-fluid); font-weight: 700; margin: 2px 0 0; }

.product-block { margin-top: 22px; }
.product-block__label {
    font-size: var(--font-small); text-transform: uppercase; letter-spacing: .06em;
    color: rgba(0, 0, 0, .6); margin-bottom: 9px; display: block;
}

/* ── A FILEIRA DE CORES ──────────────────────────────────────

   `row-gap` maior que o `column-gap`: cada opcao pode levar a legenda
   "Esgotado" embaixo da bolinha, e com as cores quebrando em duas linhas os
   10px de antes deixavam a palavra de cima encostada na bolinha de baixo.

   `align-items: flex-start` porque a legenda so existe na opcao esgotada: sem
   ela, as bolinhas com estoque esticariam junto e a fileira ficaria torta. */
.color-options {
    display: flex; flex-wrap: wrap;
    column-gap: 10px; row-gap: 16px;
    align-items: flex-start;
}
.color-option {
    position: relative;
    display: inline-flex; flex-direction: column; align-items: center; gap: 5px;
}
.color-option input { position: absolute; opacity: 0; width: 0; height: 0; }

/* A BOLINHA TEM CLASSE PROPRIA, e isto nao e organizacao: era
   `.color-option span`, ou seja, QUALQUER span dentro da opcao virava um
   circulo de 42px com borda. O `.color-option__esgotado` tentava desfazer
   isso, mas perdia por especificidade (0,1,0 contra 0,1,1), entao a legenda
   era desenhada como circulo e o texto transbordava no topo dele — a bolinha
   vazia que aparecia embaixo da palavra. Mirando a classe, nenhum span novo
   dentro da opcao cai nessa armadilha. */
.color-option__bolinha {
    width: 42px; height: 42px; border-radius: 50%; display: block;
    border: 1px solid rgba(0, 0, 0, .18); cursor: pointer;
    transition: box-shadow .2s ease;
}
.color-option input:checked + .color-option__bolinha {
    box-shadow: 0 0 0 2px var(--main-background), 0 0 0 3px var(--accent-color);
}
.color-option input:disabled + .color-option__bolinha { opacity: .35; cursor: not-allowed; }
/* Cor esgotada que se escolhe para ver a foto: esmaecida como a bloqueada,
   mas clicavel. Escolhida, ganha o anel normal por cima do esmaecido. */
.color-option input[data-esgotado] + .color-option__bolinha { opacity: .35; }
.color-option input[data-esgotado]:checked + .color-option__bolinha { opacity: .6; }
.color-option input:focus-visible + .color-option__bolinha {
    outline: 2px solid var(--accent-color); outline-offset: 3px;
}

/* "Esgotado" embaixo da bolinha.

   A cor sem estoque ja nascia desabilitada e esmaecida, e so. Quem chega na
   pagina clica, nada acontece, e a leitura natural e "o site esta com defeito".
   A palavra resolve isso onde o problema aparece. */
.color-option__esgotado {
    display: block; cursor: not-allowed;
    font-size: var(--font-smallest); line-height: 1.1;
    /* O mesmo vermelho fechado do aviso de estoque, e pelo mesmo motivo: o
       --danger da paleta serve para bordas e selos, mas em texto deste tamanho
       fica ilegivel. */
    color: #a4413e; text-align: center; white-space: nowrap;
}

.stock-note { font-size: var(--font-small); color: var(--accent-color); margin-top: 10px; }
.stock-note--out { color: var(--danger); }

.buy-row { display: flex; gap: 12px; align-items: stretch; margin-top: 18px; flex-wrap: wrap; }
/* Com o stepper ao lado, o botao ocupa o resto da linha em vez de quebrar
   sozinho para a linha de baixo. */
.buy-row .btn { flex: 1 1 200px; }

.stepper {
    display: inline-flex; align-items: center;
    border: 1px solid rgba(0, 0, 0, .18); border-radius: var(--border-radius);
    height: 46px; overflow: hidden; flex-shrink: 0;
}
.stepper button {
    width: 42px; height: 100%; background: none; border: none; cursor: pointer;
    font-size: var(--font-big-fluid); color: inherit; line-height: 1;
}
.stepper input {
    width: 46px; height: 100%; border: none; text-align: center;
    font-family: var(--body-font); background: transparent;
    -moz-appearance: textfield; outline: none;
}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ── Aviso de estoque ──────────────────────────────────────────
   A frase que diz quantas pecas existem quando alguem pede mais do que tem.
   Ocupa a linha inteira para cair embaixo do controle, e nao ao lado dele,
   dentro das linhas em flex onde o stepper mora. */
.estoque-aviso {
    flex: 1 0 100%; width: 100%; margin: 8px 0 0;
    font-size: var(--font-small); line-height: 1.35;
    /* Um tom mais fechado que o --danger da paleta: o vermelho claro dela
       serve para bordas e selos, mas em texto pequeno fica ilegivel. */
    color: #a4413e;
}
.carrinho-qtd { display: inline-block; }

.shipping-box { margin-top: 14px; }
.shipping-form { display: flex; gap: 8px; flex-wrap: wrap; }
.shipping-form input {
    flex: 1 1 150px; min-width: 0;
    border: 1px solid rgba(0, 0, 0, .18); border-radius: var(--border-radius);
    padding: 11px 12px; font-family: var(--body-font); outline: none;
}
.shipping-result { margin-top: 12px; font-size: var(--font-small); }
.shipping-option {
    display: flex; justify-content: space-between; gap: 10px; padding: 9px 0;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.shipping-result .frete-aviso { margin: 4px 0 6px; }

.spec-table { width: 100%; border-collapse: collapse; font-size: var(--font-base-fluid); }
.spec-table th, .spec-table td {
    text-align: left; padding: 11px 0; border-bottom: 1px solid rgba(0, 0, 0, .1); vertical-align: top;
}
.spec-table th { width: 40%; font-weight: 600; }

.prose { font-size: var(--font-base-fluid); line-height: 1.75; overflow-wrap: break-word; }
.prose h2 { font-size: var(--h4-fluid); margin-top: 1.4em; }
.prose h3 { font-size: var(--h5-fluid); margin-top: 1.2em; }
.prose ul, .prose ol { padding-left: 20px; margin-bottom: 1em; }
.prose li { margin-bottom: .4em; }
.prose a { color: var(--accent-color); text-decoration: underline; }
.prose img { height: auto; margin: 1em 0; }
.prose table { display: block; overflow-x: auto; max-width: 100%; }

/* ============================================================
   PAGINA INSTITUCIONAL
   ============================================================ */
.page-institutional { max-width: 760px; margin: 0 auto; }
.page-institutional h1 { font-size: var(--h1-fluid); margin-bottom: 8px; }
.page-institutional .subtitle {
    font-style: italic; font-size: var(--font-big-fluid);
    color: rgba(0, 0, 0, .7); margin-bottom: 28px;
}

.portrait-block {
    display: grid; grid-template-columns: 1fr; gap: 20px;
    align-items: center; margin-top: clamp(28px, 5vw, 40px);
}
.portrait-block__photo {
    width: min(var(--portrait-width), 100%);
    aspect-ratio: var(--portrait-image-ratio); overflow: hidden;
}
.portrait-block__photo img { width: 100%; height: 100%; object-fit: cover; }
.portrait-block__name {
    font-family: var(--script-font); font-size: var(--script-display);
    line-height: 1.1; margin-bottom: 6px;
}
.portrait-block__caption { font-style: italic; font-size: var(--font-base-fluid); color: rgba(0, 0, 0, .75); }

/* ============================================================
   FORMULARIOS, ALERTAS E TABELAS (conta, carrinho, checkout)
   ============================================================ */
.form-card {
    background: rgba(255, 255, 255, .5); padding: clamp(20px, 4vw, 28px) clamp(16px, 3.4vw, 24px);
    border-radius: var(--border-radius); max-width: 460px; margin: 0 auto;
}
.form-card--wide { max-width: 760px; }

.field { margin-bottom: 16px; min-width: 0; }
.field label {
    display: block; font-size: var(--font-small); font-weight: 600;
    margin-bottom: 6px; color: rgba(0, 0, 0, .75);
}
.field input, .field select, .field textarea {
    width: 100%; border: 1px solid rgba(0, 0, 0, .18); border-radius: var(--border-radius);
    padding: 12px; font-family: var(--body-font);
    background: #fff; color: var(--main-foreground); outline: none;
    transition: border-color .2s ease;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent-color); }
.field textarea { min-height: 120px; resize: vertical; }
.field .hint { font-size: var(--font-medium); color: rgba(0, 0, 0, .55); margin-top: 5px; display: block; }
.field-row { display: grid; grid-template-columns: 1fr; gap: 0 12px; }

/* Campo reprovado pela validacao do navegador ou pelo servidor. */
.field input[aria-invalid="true"],
.field select[aria-invalid="true"] { border-color: var(--danger); }
.field .erro-campo { font-size: var(--font-medium); color: #8f2f2b; margin-top: 5px; display: block; }
.obrigatorio { color: var(--danger); }

.alert {
    padding: 12px 15px; border-radius: var(--border-radius);
    font-size: var(--font-small); margin-bottom: 18px; border: 1px solid;
}
.alert-success { background: rgba(75, 185, 140, .12); border-color: rgba(75, 185, 140, .4); color: #1f6b4f; }
.alert-error { background: rgba(221, 119, 116, .12); border-color: rgba(221, 119, 116, .45); color: #8f2f2b; }
.alert-info { background: rgba(171, 151, 127, .12); border-color: rgba(171, 151, 127, .4); color: #675B4C; }
.alert ul { margin: 6px 0 0; padding-left: 18px; }

.data-table { width: 100%; border-collapse: collapse; font-size: var(--font-small); min-width: 520px; }
.data-table th {
    text-align: left; padding: 12px 10px; font-size: var(--font-medium);
    text-transform: uppercase; letter-spacing: .05em; color: rgba(0, 0, 0, .55);
    border-bottom: 1px solid rgba(0, 0, 0, .12); white-space: nowrap;
}
.data-table td { padding: 14px 10px; border-bottom: 1px solid rgba(0, 0, 0, .08); vertical-align: middle; }

.status-pill {
    display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 50px;
    font-size: var(--font-smallest); font-weight: 600; white-space: nowrap;
}
.status-pending_payment { background: rgba(220, 143, 56, .18); color: #8a5510; }
.status-paid { background: rgba(75, 185, 140, .18); color: #1f6b4f; }
.status-processing { background: rgba(171, 151, 127, .18); color: #675B4C; }
.status-shipped { background: rgba(20, 20, 19, .18); color: #141413; }
.status-delivered { background: rgba(75, 185, 140, .25); color: #17513c; }
/*
 * Pagamento expirado tem cor propria, entre o "aguardando" e o "cancelado".
 *
 * Nao pode parecer cancelado — o pedido continua vivo e pagavel — nem
 * pendente, que sugeriria que ainda ha um pagamento em aberto. E um estado de
 * atencao: precisa de uma acao da cliente para virar venda.
 */
.status-payment_expired { background: rgba(221, 119, 116, .12); color: #8f2f2b; }
.status-canceled, .status-refunded { background: rgba(221, 119, 116, .18); color: #8f2f2b; }

.summary-line { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; font-size: var(--font-small); }
/* ── O FRETE ESCOLHIDO, COM NOME E PRAZO ────────────────────
   As outras linhas do resumo sao rotulo a esquerda e valor a direita, numa
   linha so. Esta empilha quatro coisas do lado esquerdo (Frete, a
   transportadora, o prazo dela e o aviso de postagem), entao o valor precisa
   de `align-items: flex-start` para acompanhar a PRIMEIRA linha em vez de
   flutuar no meio do bloco. */
.summary-line--frete { align-items: flex-start; }
.summary-frete { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.summary-frete__nome { font-weight: 500; }
.summary-frete__prazo { color: rgba(0, 0, 0, .6); font-size: var(--font-smallest); }

/* O aviso de que o prazo da transportadora so comeca depois da postagem. Sai
   na lista de envios e aqui no resumo, com a mesma cara nos dois lugares. */
.prazo-postagem,
.summary-frete__postagem {
    display: block; margin-top: 2px;
    font-size: var(--font-smallest); color: var(--accent-color);
}
/* A frase propria de uma opcao de envio: o horario da entrega local. */
.frete-aviso {
    display: block; margin-top: 2px;
    font-size: var(--font-smallest); color: rgba(0, 0, 0, .6);
}
/* O nome do envio na ficha do pedido, embaixo da palavra "Frete". Bloco, e
   nao texto corrido, para "Grátis" a direita continuar alinhado com a primeira
   linha em vez de descer junto com o nome da transportadora. */
.summary-frete__envio {
    display: block; margin-top: 2px;
    font-size: var(--font-smallest); color: rgba(0, 0, 0, .6);
}

.summary-line--total {
    border-top: 1px solid rgba(0, 0, 0, .12); margin-top: 8px; padding-top: 14px;
    font-size: var(--font-big-fluid); font-weight: 600;
}

/* ── COMO O PEDIDO FOI PAGO, na ficha da cliente ─────────────
   Separado do resumo de valores por uma borda: as linhas de cima somam ate o
   total, e estas respondem outra pergunta, a de como aquele total foi pago. */
.pedido-pagamento {
    margin-top: 16px; padding-top: 14px;
    border-top: 1px solid rgba(0, 0, 0, .12);
}
.pedido-pagamento__titulo {
    font-size: var(--font-small); font-weight: 600;
    margin: 0 0 4px; text-transform: uppercase; letter-spacing: .04em;
    color: rgba(0, 0, 0, .55);
}
.pedido-pagamento__aviso {
    margin: 8px 0 0; font-size: var(--font-smallest);
    color: var(--accent-color); line-height: 1.5;
}

/* ── FILTROS DA LISTA DE PEDIDOS DA CLIENTE ──────────────────
   `<details>` nativo: recolhido por padrao, aberto por quem quer filtrar, e
   funciona sem JavaScript. */
.pedido-filtros {
    border: 1px solid rgba(0, 0, 0, .12); border-radius: var(--border-radius);
    margin-bottom: 20px; background: #fff;
}
.pedido-filtros__abrir {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 14px 16px; cursor: pointer; font-size: var(--font-small);
    list-style: none; user-select: none;
}
/* O triangulo do proprio navegador sai nos dois motores: no Safari ele so
   responde a este pseudo-elemento, e sem os dois sobrariam duas setas. */
.pedido-filtros__abrir::-webkit-details-marker { display: none; }
.pedido-filtros__abrir::marker { content: ""; }
.pedido-filtros__abrir svg { flex-shrink: 0; transition: transform .2s ease; }
.pedido-filtros[open] .pedido-filtros__abrir svg { transform: rotate(180deg); }

.pedido-filtros__rotulo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* O que esta filtrando, para a lista curta nunca ficar sem explicacao na tela. */
.pedido-filtros__marca {
    font-size: var(--font-smallest); color: var(--accent-color);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.pedido-filtros__campos {
    display: grid; gap: 12px; padding: 0 16px 16px;
    border-top: 1px solid rgba(0, 0, 0, .08); padding-top: 14px;
}
/* `.field` traz margem de baixo, que aqui brigaria com o `gap` da grade. */
.pedido-filtros__campos .field { margin-bottom: 0; }

/*
 * O CAMPO DE DATA NO IPHONE.
 *
 * Com a aparencia nativa ligada, o Safari do iOS ignora a largura declarada e
 * dimensiona o campo pelo texto da data: "16 de set. de 2026" nao cabia na
 * coluna e o campo passava por cima da borda da caixa, o que na tela parecia
 * um defeito de layout. `appearance: none` devolve o controle ao CSS, e o
 * `min-width: 0` permite que ele encolha abaixo do proprio conteudo, que e o
 * que o padrao `auto` impedia.
 *
 * A altura minima e a mesma dos outros campos porque, sem a aparencia nativa,
 * o campo de data do iOS encolhe para a altura do texto e fica menor que o
 * alvo de toque confortavel.
 */
.pedido-filtros input[type="date"] {
    -webkit-appearance: none; appearance: none;
    min-width: 0; max-width: 100%;
    min-height: 46px; text-align: left;
}
/* Sem isto o iOS empurra o icone do calendario para fora da caixa. */
.pedido-filtros input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.pedido-filtros input[type="date"]::-webkit-calendar-picker-indicator { margin-inline-start: auto; }

.pedido-filtros__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* As duas datas dividem a linha assim que houver largura para elas: sao campos
   curtos, e empilhados os tres deixam o formulario mais alto que a lista que
   ele filtra.

   O piso e 480px, e nao a largura em que elas matematicamente caberiam: no
   iPhone o campo escreve a data por extenso ("16 de set. de 2026"), bem mais
   larga que o `dd/mm/aaaa` do Android e do computador. Dividir a linha ja num
   celular comum apertaria justamente o texto mais comprido, entao ate 480px
   os tres campos ficam empilhados, cada um com a largura inteira. */
@media (min-width: 480px) {
    .pedido-filtros__campos { grid-template-columns: 1fr 1fr; }
    .pedido-filtros__campos .field:first-child { grid-column: 1 / -1; }
    .pedido-filtros__acoes { grid-column: 1 / -1; }
}

@media (min-width: 760px) {
    .pedido-filtros__campos { grid-template-columns: 1.4fr 1fr 1fr auto; align-items: end; }
    .pedido-filtros__campos .field:first-child { grid-column: auto; }
    .pedido-filtros__acoes { grid-column: auto; }
}

/* A paginacao da conta. A do painel mora no admin.css, com os tokens de la:
   sao duas telas com paletas diferentes, e nao um estilo repetido. */
.paginacao {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 12px; margin-top: 24px;
}
.paginacao__conta { font-size: var(--font-small); color: rgba(0, 0, 0, .6); }
.paginacao__total { color: rgba(0, 0, 0, .45); }
.paginacao [aria-disabled="true"] { opacity: .45; pointer-events: none; }

.cart-layout { display: grid; grid-template-columns: 1fr; gap: 26px; align-items: start; }
.cart-item {
    display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px;
    padding: 16px 0; border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.cart-item__media { aspect-ratio: 1 / 1; overflow: hidden; background: rgba(0, 0, 0, .04); }
.cart-item__media img { width: 100%; height: 100%; object-fit: cover; }

/*
 * Peca esgotada guardada no carrinho.
 *
 * Recuada, nao apagada: a peca continua ali de proposito, porque muita gente
 * usa o carrinho como lista de desejo. A foto perde a cor para dizer "isto nao
 * entra na compra de agora" sem esconder o que a pessoa escolheu.
 *
 * A opacidade fica em 0.55 e nao mais baixa porque o texto do aviso precisa
 * continuar legivel — e justamente ele que explica o que houve.
 */
.cart-item--esgotado .cart-item__media { filter: grayscale(1); opacity: .55; }
.cart-item--esgotado h2 a { color: rgba(0, 0, 0, .55); }

.cart-item__aviso {
    font-size: var(--font-small);
    line-height: 1.45;
    margin: 8px 0 10px;
    padding: 8px 10px;
    border-left: 3px solid var(--accent-color);
    background: rgba(0, 0, 0, .03);
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
}
.cart-item--esgotado .cart-item__aviso { border-left-color: var(--danger); }
.cart-summary {
    background: rgba(255, 255, 255, .5); padding: clamp(16px, 3vw, 22px);
    border-radius: var(--border-radius);
}

/* Os botoes de apoio do cartao de e-mail. Cada um e um <form> proprio, porque
   postam para rotas diferentes e formulario dentro de formulario nao existe em
   HTML; a flex os devolve a uma linha so, que quebra sozinha no celular. */
.email-acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

.account-layout { display: grid; grid-template-columns: 1fr; gap: 26px; align-items: start; }

/* CARTAO DE ENDERECO (Minha conta > Enderecos).

   Os botoes ficavam num flex com quebra de linha: cada cartao decidia sozinho,
   pelo tamanho do proprio texto, se Editar e Remover cabiam ao lado ou iam
   para baixo. Num celular os tres cartoes saiam cada um de um jeito. Agora e
   uma regra so: no celular os botoes vao sempre embaixo, alinhados a esquerda;
   a partir de 600px ficam sempre a direita, no topo do cartao. */
.endereco-card {
    border: 1px solid rgba(0, 0, 0, .12); border-radius: var(--border-radius);
    padding: 16px; margin-bottom: 12px;
    display: flex; flex-direction: column; gap: 12px;
}
.endereco-card__texto { line-height: 1.8; min-width: 0; overflow-wrap: break-word; }
.endereco-card__acoes { display: flex; gap: 8px; align-items: flex-start; flex-shrink: 0; }
@media (min-width: 600px) {
    .endereco-card { flex-direction: row; justify-content: space-between; align-items: flex-start; }
}
/* O formulario de endereco fica abaixo do cabecalho fixo ao chegar pela ancora. */
.endereco-form { scroll-margin-top: 140px; }
.account-nav { list-style: none; margin: 0; padding: 0; }
.account-nav li { border-bottom: 1px solid rgba(0, 0, 0, .08); }
.account-nav a { display: block; padding: 14px 0; font-size: var(--font-small); }
.account-nav a.ativo { color: var(--accent-color); font-weight: 600; }

.checkout-steps { display: flex; gap: 10px; margin-bottom: 26px; flex-wrap: wrap; font-size: var(--font-small); }
.checkout-step { display: flex; align-items: center; gap: 7px; color: rgba(0, 0, 0, .45); }
.checkout-step[aria-current="step"] { color: var(--main-foreground); font-weight: 600; }
.checkout-step__num {
    width: 22px; height: 22px; border-radius: 50%; display: inline-flex;
    align-items: center; justify-content: center; font-size: var(--font-smallest);
    border: 1px solid currentColor; flex-shrink: 0;
}
/* Cartao clicavel de endereco / forma de envio no checkout. */
.opcao-cartao {
    display: flex; align-items: flex-start; gap: 10px; padding: 14px;
    border: 1px solid rgba(0, 0, 0, .12); border-radius: var(--border-radius);
    margin-bottom: 10px; cursor: pointer; font-size: var(--font-small);
}
.opcao-cartao:has(input:checked) { border-color: var(--accent-color); background: rgba(171, 151, 127, .07); }
/* ── O LUGAR DO PRECO, QUANDO NAO HA PRECO ──────────────────
   Substitui o valor na opcao que o frete gratis cobre. Em maiuscula pela
   folha, e nao no texto: o leitor de tela continua lendo a frase normal.
   `white-space: nowrap` porque "Frete gratis" e mais largo que "R$ 33,61" e a
   quebra no meio, no celular, deixava "GRATIS" sozinho numa segunda linha. */
.opcao-cartao__gratis {
    color: var(--success); text-transform: uppercase;
    font-size: var(--font-smallest); letter-spacing: .04em; white-space: nowrap;
}
.opcao-cartao input { accent-color: var(--accent-color); width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; }
.opcao-cartao__corpo { flex: 1; min-width: 0; }

/* ============================================================
   480px — celular grande
   ============================================================ */
@media (min-width: 480px) {
    .newsletter form { flex-direction: row; align-items: flex-end; gap: 10px; }
    .cart-item { grid-template-columns: 92px minmax(0, 1fr); }
    .field-row--2 { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   580px — duas colunas
   ============================================================ */
@media (min-width: 580px) {
    .category-banners { grid-template-columns: repeat(2, 1fr); }
    .field-row--cep { grid-template-columns: 150px minmax(0, 1fr); }
    /* Quatro blocos em duas colunas fecham duas linhas cheias, sem sobra. */
    .footer-cols { grid-template-columns: repeat(2, 1fr); gap: 8px 30px; }
}

/* ============================================================
   680px — tablet em pe
   ============================================================ */
@media (min-width: 680px) {
    .benefits .container { gap: 22px 26px; align-items: center; }
    .benefit { flex-direction: row; align-items: center; gap: 12px; text-align: left; }

    /* A partir do tablet em pe entra a arte larga: 1920x760, e com ela a
       altura de computador do painel. Mesmo ponto em que picture_tag passa a
       servir o arquivo grande, entao altura e arquivo trocam juntos. */
    .hero-slider { height: var(--hero-height); }

    /* As setas so existem daqui para cima — no celular quem passa e o dedo. */
    .hero-slider__seta { display: flex; width: 48px; height: 48px; }
    .hero-slider__seta--anterior { left: 20px; }
    .hero-slider__seta--proximo { right: 20px; }

    .product-grid { grid-template-columns: repeat(3, 1fr); }
    .carousel__slide { flex: 0 0 calc((100% - (2 * var(--gutter))) / 3); }
    .carousel__arrow { display: flex; }
    /* No celular quem passa a foto e o dedo; a seta so aparece onde ha mouse,
       no mesmo ponto em que as do carrossel aparecem. */
    .product-gallery__arrow { display: flex; }
    /* A medalha cresce junto com a foto. No celular sao dois cards por linha, e
       o mesmo circulo de 48px comeria um quarto da largura da peca. */
    .product-card__off { width: 48px; height: 48px; top: 12px; right: 12px; }
    .field-row--3 { grid-template-columns: repeat(3, 1fr); }
    .cart-item { grid-template-columns: 100px minmax(0, 1fr) auto; }
    .portrait-block { grid-template-columns: var(--portrait-width) minmax(0, 1fr); gap: 30px; }
    .swatch-grid { gap: 18px; }
    .social-fab { right: 20px; bottom: 20px; }
}

/* ============================================================
   900px — cabecalho de desktop e produto em duas colunas
   ============================================================ */
@media (min-width: 900px) {
    .header-nav { display: block; }
    .header-search { display: block; }
    /* No computador a busca e o campo aberto no cabecalho: nem menu de gaveta
       nem atalho de lupa. A caixa toda sai, senao o grid a colocaria numa
       linha nova (a area "menu" nao existe neste desenho). */
    .header-esquerda { display: none; }
    .burger { display: none; }
    .drawer__search { display: none; }

    /* Mesmo desenho de antes no computador. A altura e que deixou de sair
       da logo (era "logo + 22px") e passou a ter campo proprio no painel,
       --header-height: aumentar a logo nao engorda mais a faixa. O padrao de
       126px e exatamente o que ela media com a logo de fabrica (104px). */
    .header-logo-row {
        grid-template-areas: "busca logo acoes";
        height: var(--header-height);
    }
    .header-logo img { height: var(--logo-height); }

    .benefits .container { grid-template-columns: repeat(4, 1fr); gap: 24px; }
    .category-banners { grid-template-columns: repeat(3, 1fr); }
    /* CINCO COLUNAS, E A DOS SELOS POR ULTIMO.
       No HTML os selos vem logo depois de Contato, porque no celular a pilha
       segue a ordem do codigo e e ali que a lojista quer ve-los. Aqui a grade
       reordena: Acompanhe assume o quarto lugar e os selos vao para a ponta
       direita, junto do resto do bloco da direita. As duas ultimas colunas sao
       mais largas porque uma carrega um paragrafo e a outra uma fileira de
       bandeirinhas; 1fr para as cinco espremeria as duas. */
    /* A coluna dos selos e a ultima e a mais larga: as outras tres carregam
       uma lista de links, e ela uma fileira de seis bandeirinhas que, apertada
       numa faixa igual as demais, quebraria em duas linhas. */
    .footer-cols { grid-template-columns: 1fr 1fr 1fr 1.7fr; gap: 30px; }
    /* Sem selo nenhum cadastrado a coluna nao existe, e a quarta faixa
       deixaria um vao na direita. `:has()` e o mesmo recurso que a escolha de
       cartao ja usa nesta folha. */
    .footer-cols:not(:has(.footer-col--selos)) { grid-template-columns: repeat(3, 1fr); }
    .footer-col__toggle { display: none; }
    .footer-col__panel { display: block; padding: 0; }
    .footer-col__panel h3 { display: block; }
    /* No computador as colunas sao lado a lado e o respiro de cima do celular
       viraria um degrau entre elas. */
    .footer-col--selos { padding-top: 0; }

    .product-layout {
        grid-template-columns: minmax(0, 470px) minmax(0, 400px); gap: 40px;
        justify-content: center;
    }

    .cart-layout { grid-template-columns: minmax(0, 1fr) 320px; }
    .account-layout { grid-template-columns: 210px minmax(0, 1fr); }
}

/* ============================================================
   1024px — vitrine em 4 colunas
   ============================================================ */
@media (min-width: 1024px) {
    .product-grid { grid-template-columns: repeat(4, 1fr); }
    .carousel__slide { flex: 0 0 calc((100% - (3 * var(--gutter))) / 4); }

    /* So aqui a coluna de miniaturas cabe sem espremer a foto principal:
       abaixo disso elas continuam numa tira rolavel embaixo da imagem. */
    .product-gallery {
        grid-template-columns: 80px minmax(0, 1fr); align-items: start; max-width: none;
    }
    /* Foto unica, sem a coluna de miniaturas: o mesmo teto da foto ao lado
       delas, e nao a coluna inteira. */
    .product-gallery.product-gallery--single { max-width: 470px; }
    /* `hidden`, e nao `visible`, e a diferenca some uma barra de rolagem.

       Pela regra do CSS, quando um eixo e `visible` e o outro nao, o `visible`
       VIRA `auto`. Com `overflow-y: auto` ao lado, o `overflow-x: visible`
       daqui computava como `auto` e o navegador desenhava uma barra horizontal
       embaixo das miniaturas — a coluna tem 84px e a propria barra vertical ja
       come alguns deles, entao sempre havia um fio de conteudo "sobrando".

       As miniaturas sao uma coluna: para os lados nao ha o que rolar. */
    .product-gallery__thumbs {
        flex-direction: column; overflow-x: hidden;
        max-height: 620px; overflow-y: auto;
    }
    .product-gallery__thumb { flex: 0 0 auto; width: 80px; }

    /* 80px de miniaturas + 12px + 470px de foto = 562px. */
    .product-layout {
        grid-template-columns: minmax(0, 562px) minmax(0, 460px); gap: 56px;
        justify-content: center;
    }
    .cart-layout { grid-template-columns: minmax(0, 1fr) 340px; }
    .account-layout { grid-template-columns: 220px minmax(0, 1fr); }
}

/* ============================================================
   1100px
   ============================================================ */
@media (min-width: 1100px) {
    .header-search { flex-basis: 300px; }
}

/* ============================================================
   Impressao — recibos de pedido saem legiveis
   ============================================================ */
@media print {
    .site-header, .site-footer, .social-fab, .drawer, .cart-drawer, .overlay,
    .breadcrumb, .carousel__arrow, .btn { display: none !important; }
    body { background: #fff; color: #000; }
    .container { max-width: none; padding: 0; }
}

/* ============================================================
   BLOCO DE PRECO — Pix e parcelas, com icone em cada linha
   ============================================================ */
.preco-bloco { margin: 6px 0 0; }
.preco-bloco__prefixo {
    display: block; font-size: var(--font-small); color: rgba(0, 0, 0, .55);
}
.preco-bloco__valor {
    font-size: var(--font-big-fluid); font-weight: 700; margin: 0;
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
/* AS DUAS CENTRALIZAM DE FORMAS DIFERENTES, e juntar as duas quebra uma.
   O valor continua sendo flex (o preco cheio e o riscado ficam lado a lado, na
   mesma linha de base), e flex nao obedece a `text-align`: quem o centraliza e
   o eixo principal. A linha da parcela virou paragrafo, e ai e `text-align` que
   vale. Ja foram um seletor so, com `text-align` para os dois: o preco foi
   parar encostado na borda esquerda do card. */
.product-card .preco-bloco__valor { justify-content: center; }
.product-card .preco-bloco__linha { text-align: center; }
.preco-bloco--produto .preco-bloco__valor { font-size: var(--h4-fluid); }
.preco-bloco__comparar {
    font-size: var(--font-small); font-weight: 400;
    color: rgba(0, 0, 0, .45); text-decoration: line-through;
}
/* ── O ICONE ANDA COM O TEXTO ───────────────────────────────
   Isto era um flex, e num card de texto centralizado o resultado ficava
   estranho: o <span> do texto ocupava a largura que sobrava e centralizava as
   proprias linhas dentro dela, entao o icone ficava encostado na borda
   esquerda e a frase flutuava no meio, longe dele.

   Como paragrafo, o icone e apenas a primeira coisa da linha: ele acompanha a
   primeira palavra, a frase quebra normalmente e o conjunto centraliza junto,
   que e o que se espera de um card centralizado. */
.preco-bloco__linha {
    margin: 3px 0 0;
    font-size: var(--font-small); color: rgba(0, 0, 0, .68);
}
.preco-bloco__linha svg, .preco-bloco__linha .icone-img {
    /* -1px, medido: a -2px o icone descia abaixo do meio otico do texto, e a 0
       subia acima dele. O vao e so este margin: o `trim()` na view tirou as
       quebras de linha que o partial do icone devolvia e que viravam mais um
       espaco aqui. */
    display: inline-block; vertical-align: -1px; margin-right: 5px;
}
.preco-bloco__linha--pix { color: var(--accent-color); }
.preco-bloco__linha--pix strong { font-weight: 700; }

/* ============================================================
   CARD — botoes de acao e caixinha de compra rapida
   ============================================================ */
/* O card e uma coluna que estica ate a altura da linha, e as acoes vao para o
   fim dela.
   ------------------------------------------------------------
   Sem isto, o nome do produto manda no layout: um titulo que quebra em duas
   linhas, ou uma peca sem a linha do Pix, empurrava o botao para cima ou para
   baixo e a fileira ficava com os "Comprar" em alturas diferentes. Com
   margin-top:auto nas acoes, o espaco sobrando fica ANTES dos botoes, e eles
   encostam na mesma linha de base em todos os cards. */
.product-card { position: relative; display: flex; flex-direction: column; height: 100%; }

.product-card__acoes {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    margin-top: auto; padding-top: 10px;
}

/* O "comprar" usa o botao padrao da loja. Ele e o unico da vitrine que conclui
   alguma coisa, mas quem o destaca e o peso do bloco cheio de cor, nao uma cor
   estranha a marca. */
.btn-comprar {
    background: var(--button-background); color: var(--button-foreground);
    border: 1px solid var(--button-background);
    width: 100%; justify-content: center;
}
.btn-comprar:hover:not(:disabled) {
    background: var(--button-hover); border-color: var(--button-hover);
    color: var(--button-foreground);
}
.btn-comprar:disabled { opacity: .5; cursor: not-allowed; }

/* Mesma largura do "Comprar", so mais baixo e com a letra menor: e um convite a
   tirar duvida, e nao a acao principal do card. Encolher a largura desalinhava
   a base dos cards da fileira. */
.btn-whats {
    background: transparent; color: var(--whatsapp); border: 1px solid var(--whatsapp);
    width: 100%; justify-content: center; gap: 6px;
    min-height: 34px; padding: 6px 12px;
    font-size: var(--font-smallest); line-height: 1.2;
}
.btn-whats:hover { background: var(--whatsapp); color: #fff; }

/* Checkout sem cotacao: "Tentar de novo" e o WhatsApp lado a lado, do mesmo
   tamanho. Aqui o WhatsApp e uma das duas saidas da tela, e nao o convite
   discreto do card de produto, entao volta ao tamanho de botao normal. */
.frete-indisponivel__acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.frete-indisponivel .btn-whats {
    width: auto; min-height: 46px; padding: 12px 22px; font-size: var(--font-base-fluid);
}

/* A caixinha cobre o rodape do card, como no desenho aprovado: a foto continua
   visivel atras, entao ninguem perde de vista a peca que esta escolhendo. */
.compra-rapida {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
    background: var(--main-background, #fff);
    border: 1px solid rgba(0, 0, 0, .12); border-radius: var(--border-radius);
    box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
    padding: 16px 14px 14px;
}
.compra-rapida__fechar {
    position: absolute; top: 6px; right: 6px;
    background: none; border: none; cursor: pointer; color: inherit;
    display: inline-flex; padding: 4px;
}
.compra-rapida__titulo {
    display: block; text-align: center; font-size: var(--font-small);
    color: rgba(0, 0, 0, .6); margin-bottom: 8px;
}
.compra-rapida .color-options { justify-content: center; margin-bottom: 12px; }

/* Quantidade em cima, "Comprar" embaixo, um debaixo do outro e ocupando a
   caixa inteira, como na loja de referencia.

   Lado a lado nao cabia: o card do celular deixa pouco mais de 140px para a
   linha, o seletor sozinho ja pede 132px, e o "Comprar" escapava para fora
   do card, por cima da peca vizinha. */
.compra-rapida__linha {
    display: flex; flex-direction: column; align-items: stretch; gap: 8px;
}
.compra-rapida__linha .stepper { width: 100%; }
/* O campo toma a sobra, entao o numero fica no meio e o menos e o mais nas
   pontas, como no desenho da referencia. */
.compra-rapida__linha .stepper input { flex: 1; width: auto; }
.compra-rapida__linha .btn-comprar { width: 100%; }

/* ============================================================
   BARRA DE FRETE GRATIS
   ============================================================ */
.frete-barra { margin: 14px 0; font-size: var(--font-small); }
.frete-barra__texto { margin: 0; font-weight: 600; }
.frete-barra__chamada { margin: 2px 0 8px; color: rgba(0, 0, 0, .65); }
/* Onde o frete gratis vale. Menor que a promessa e acima da barra: e ressalva,
   nao chamada, mas precisa ser lida antes de a pessoa contar com o desconto. */
.frete-barra__regiao {
    margin: 0 0 8px; font-size: var(--font-smallest); color: rgba(0, 0, 0, .55);
}
.frete-barra__trilho {
    height: 8px; border-radius: 999px; overflow: hidden;
    background: rgba(0, 0, 0, .1);
}
/* Verde aqui e proposital, e a unica excecao a paleta da loja: a barra mede
   progresso rumo a um ganho, e verde e o que todo mundo le como "avancando". */
.frete-barra__preenchimento {
    display: block; height: 100%; border-radius: 999px;
    background: var(--success); transition: width .35s ease;
}
.frete-barra--conquistado .frete-barra__texto { color: var(--success); }
.frete-barra__alvo {
    margin: 5px 0 0; text-align: right;
    font-size: var(--font-smallest); color: rgba(0, 0, 0, .55);
}
.frete-barra--compacta { margin: 0 0 14px; }

/* ============================================================
   VARIACOES — cor e tamanho
   ============================================================ */

/* Lista completa de combinacoes: e o que aparece sem JavaScript. */
.variacoes__combinacoes { display: flex; flex-wrap: wrap; gap: 6px; }
.variacoes__combinacao {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    border: 1px solid rgba(0, 0, 0, .18); border-radius: var(--border-radius);
    padding: 6px 10px; font-size: var(--font-small);
}
.variacoes__combinacao input { position: absolute; opacity: 0; pointer-events: none; }
.variacoes__combinacao:has(input:checked) {
    border-color: var(--accent-color); background: rgba(171, 151, 127, .12);
}
.variacoes__combinacao:has(input:disabled) { opacity: .4; cursor: not-allowed; }
.variacoes__combinacao-cor {
    width: 13px; height: 13px; border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, .18);
}

.tamanho-options { display: flex; flex-wrap: wrap; gap: 6px; }
.tamanho-option { cursor: pointer; }
.tamanho-option input { position: absolute; opacity: 0; pointer-events: none; }
.tamanho-option span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 42px; min-height: 34px; padding: 4px 10px;
    border: 1px solid rgba(0, 0, 0, .2); border-radius: var(--border-radius);
    font-size: var(--font-small);
}
.tamanho-option:has(input:checked) span {
    border-color: var(--main-foreground); background: var(--main-foreground); color: #fff;
}
.tamanho-option:has(input:focus-visible) span { outline: 2px solid var(--accent-color); outline-offset: 2px; }
/* Tamanho que a cor escolhida nao tem: continua legivel, mas riscado, para a
   pessoa entender que existe na loja e nao naquela cor. */
.tamanho-option.esta-esgotado span {
    opacity: .4; cursor: not-allowed; text-decoration: line-through;
}

/* ============================================================
   BOLINHAS DE COR DO CARD
   ============================================================ */
.product-card__swatches .swatch {
    padding: 0; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease;
}
.product-card__swatches .swatch:hover { transform: scale(1.2); }
.product-card__swatches .swatch[aria-pressed="true"] {
    box-shadow: 0 0 0 2px var(--main-background, #fff), 0 0 0 3px var(--main-foreground);
}
.product-card__swatches .swatch:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 3px; }

/* ============================================================
   QUANTIDADE DENTRO DA GAVETA
   ============================================================ */
.cart-drawer__stepper {
    display: inline-flex; align-items: center; margin-top: 6px;
    border: 1px solid rgba(0, 0, 0, .18); border-radius: var(--border-radius);
    overflow: hidden; width: max-content;
}
.cart-drawer__stepper button {
    width: 28px; height: 28px; border: none; background: none; cursor: pointer;
    color: inherit; font-size: 15px; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
}
.cart-drawer__stepper button:hover { background: rgba(0, 0, 0, .06); }
.cart-drawer__stepper input {
    width: 34px; height: 28px; border: none; text-align: center;
    font-family: var(--body-font); font-size: var(--font-small);
    background: transparent; color: inherit; -moz-appearance: textfield;
}
.cart-drawer__stepper input::-webkit-outer-spin-button,
.cart-drawer__stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ============================================================
   GAVETA DO CARRINHO
   ============================================================ */
.cart-drawer {
    position: fixed; inset: 0 0 0 auto; width: min(400px, 92vw);
    background: var(--main-background, #fff); z-index: 1060;
    transform: translateX(100%); transition: transform .3s ease;
    display: flex; flex-direction: column;
    box-shadow: -8px 0 30px rgba(0, 0, 0, .16);
}
.cart-drawer[data-open="true"] { transform: translateX(0); }

.cart-drawer__head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 16px 18px; border-bottom: 1px solid rgba(0, 0, 0, .1);
}
/* O botao de voltar diz o que faz. Um X sozinho, no meio de uma compra, deixa
   a duvida de estar cancelando alguma coisa. */
.cart-drawer__voltar {
    display: inline-flex; align-items: center; gap: 6px;
    background: none; border: none; cursor: pointer; color: inherit;
    font-family: var(--body-font); font-size: var(--font-small); padding: 4px 0;
}
.cart-drawer__voltar:hover { text-decoration: underline; }
.cart-drawer__titulo { font-weight: 600; font-size: var(--font-small); }

.cart-drawer__corpo { flex: 1; overflow-y: auto; padding: 16px 18px; }
.cart-drawer__vazio { color: rgba(0, 0, 0, .6); font-size: var(--font-small); }
.cart-drawer__lista { list-style: none; margin: 0; padding: 0; }

.cart-drawer__item {
    display: grid; grid-template-columns: 64px minmax(0, 1fr) auto;
    gap: 10px; align-items: start;
    padding: 12px 0; border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.cart-drawer__foto { display: block; width: 64px; }
.cart-drawer__dados { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cart-drawer__nome { font-size: var(--font-small); line-height: 1.3; }
.cart-drawer__cor, .cart-drawer__preco { font-size: var(--font-small); }
.cart-drawer__cor { color: rgba(0, 0, 0, .55); }
.cart-drawer__preco { font-weight: 600; }
.cart-drawer__qtd {
    min-width: 26px; height: 26px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--accent-color); color: #fff; font-size: var(--font-small);
}
.cart-drawer__remover {
    background: none; border: none; cursor: pointer; color: rgba(0, 0, 0, .45);
    display: inline-flex; padding: 4px;
}
.cart-drawer__remover:hover { color: var(--main-foreground); }

.cart-drawer__rodape {
    padding: 16px 18px; border-top: 1px solid rgba(0, 0, 0, .1);
}
.cart-drawer__total {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 12px; font-size: var(--font-base-fluid);
}
.cart-drawer__continuar {
    display: block; width: 100%; margin-top: 8px;
    background: none; border: none; cursor: pointer; color: inherit;
    font-family: var(--body-font); font-size: var(--font-small);
    text-decoration: underline; padding: 8px 0;
}

/* ============================================================
   CABECALHO — menus "Atendimento" e "Minha conta"
   ============================================================ */
.header-menu-acao { position: relative; }

.header-menu-acao__gatilho {
    display: flex; align-items: center; gap: 8px;
    background: none; border: none; cursor: pointer; color: inherit;
    font-family: var(--body-font); padding: 4px 2px; text-align: left;
}
.header-menu-acao__textos { display: flex; flex-direction: column; line-height: 1.15; }
/* A chamada e menor e mais apagada que o rotulo: ela convida, o rotulo nomeia. */
/* A chamada pequena ("Precisa de ajuda?") e a mesma cor do cabecalho, mais
   clara: fixa em cinza, ela nao acompanhava a cor escolhida no painel. */
.header-menu-acao__cta { font-size: 11px; color: inherit; opacity: .7; }
.header-menu-acao__rotulo { font-size: var(--font-small); font-weight: 600; }

.header-menu-acao__painel {
    position: absolute; top: 100%; right: 0; z-index: 1040;
    /* Acompanha o conteudo ate um teto: um e-mail comprido quebrava no meio
       de uma palavra dentro dos 250px fixos. */
    width: max-content; min-width: 250px;
    max-width: min(340px, calc(100vw - 24px));
    padding: 14px;
    background: var(--header-background, #fff);
    border: 1px solid rgba(0, 0, 0, .1); border-radius: var(--border-radius);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .14);
    opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}
/* Abre no mouse E no teclado: focus-within cobre quem navega com Tab, que de
   outro modo alcancaria os links sem nunca ver o painel. */
.header-menu-acao:hover .header-menu-acao__painel,
.header-menu-acao:focus-within .header-menu-acao__painel {
    opacity: 1; visibility: visible; transform: translateY(0);
}

.header-menu-acao__painel p { margin: 0 0 8px; font-size: var(--font-small); }
.header-menu-acao__painel a,
.header-menu-acao__painel button[type="submit"] {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 0; font-size: var(--font-small);
    background: none; border: none; cursor: pointer; color: inherit;
    font-family: var(--body-font); width: 100%; text-align: left;
}
.header-menu-acao__painel a:hover,
.header-menu-acao__painel button[type="submit"]:hover { text-decoration: underline; }
.header-menu-acao__destaque { font-weight: 600; }
.header-menu-acao__separador {
    border: none; border-top: 1px solid rgba(0, 0, 0, .1); margin: 8px 0;
}

/* ── Conteudo do menu Atendimento ──────────────────────────────
   O desenho e o da loja de referencia: cada canal em duas linhas, o rotulo
   com o icone em cima ("Whatsapp:", "E-mail:") e o valor embaixo, mais o
   campo de codigo de rastreio com a seta. As cores sao as do painel desta
   loja, e nao as da referencia: o traco e emprestado, a identidade nao. */
.atendimento .atendimento__item { padding: 10px 0; }
.atendimento .atendimento__item + .atendimento__item {
    border-top: 1px solid rgba(0, 0, 0, .1);
}
.atendimento .atendimento__item a {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    padding: 0; width: 100%;
}
.atendimento__rotulo {
    display: flex; align-items: center; gap: 6px;
    font-size: var(--font-smallest); color: rgba(0, 0, 0, .6);
}
.atendimento__valor {
    font-size: var(--font-small); font-weight: 600; color: inherit;
    word-break: break-word;
}
.atendimento__item--simples a { font-size: var(--font-small); }

/* O campo de rastreio: caixa de uma linha com a seta encostada na direita,
   as duas dentro da mesma borda. */
.atendimento__forma {
    display: flex; align-items: center; margin-top: 8px;
    border: 1px solid rgba(0, 0, 0, .18); border-radius: var(--border-radius);
    background: var(--main-background, #fff); overflow: hidden;
}
.atendimento__forma input {
    flex: 1; min-width: 0; border: none; background: transparent;
    padding: 9px 10px; font-family: var(--body-font);
    font-size: var(--font-small); color: inherit; outline: none;
}
/* A classe do bloco entra no seletor de proposito: o painel do cabecalho da
   width: 100% a qualquer botao de enviar dentro dele, e a seta esticada
   empurrava o campo de texto para um canto. */
.atendimento .atendimento__forma button {
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 38px; width: 38px; min-height: 36px; padding: 0;
    border: none; background: none; cursor: pointer; color: inherit;
}
.atendimento__forma:focus-within { border-color: var(--main-foreground); }
.atendimento .atendimento__forma button:hover { background: rgba(0, 0, 0, .06); }

/* Na gaveta do celular o mesmo bloco aparece aberto, sem a moldura do menu
   suspenso: ali ele ja esta dentro de uma. */
.atendimento--gaveta { display: block; }
.atendimento--gaveta .atendimento__item { padding: 9px 0; }

/* Abaixo de 900px nao ha espaco para dois menus com texto ao lado da logo.

   Some o texto, e nao o icone: escondendo os dois blocos inteiros o cabecalho
   do celular ficava so com a sacola, e quem procurava a conta nao achava onde
   entrar. Fica o boneco da conta ao lado da sacola, como na loja de
   referencia; atendimento continua so na gaveta, onde ja esta escrito por
   extenso, para nao empilhar tres icones numa tela de 360px. */
@media (max-width: 899px) {
    .header-menu-acao--atendimento { display: none; }

    .header-menu-acao__textos { display: none; }

    .header-menu-acao__gatilho {
        display: inline-flex; align-items: center; justify-content: center;
        min-width: 40px; min-height: 40px;
    }

    /* O painel que abre no passar do mouse nao faz sentido no toque: ali o
       primeiro toque ja e o clique que leva para a conta. */
    .header-menu-acao__painel { display: none; }
}

/* ============================================================
   CHECKOUT — blocos de conferencia
   ============================================================ */

/* O atributo hidden precisa vencer os display das classes.
   Sem isto, um .summary-line[hidden] continuaria aparecendo, porque
   `display: flex` na classe ganha do `display: none` do navegador. */
[hidden] { display: none !important; }

.conferencia {
    border: 1px solid rgba(0, 0, 0, .12); border-radius: var(--border-radius);
    padding: 14px 16px; margin-bottom: 12px;
}
.conferencia__head {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
/* Cinza ate o passo ser preenchido, verde depois.
   Todos verdes desde o inicio nao diziam nada: a cor virava enfeite em vez de
   sinal de progresso, e a pessoa nao tinha como ver onde parou. */
.conferencia__num {
    width: 24px; height: 24px; border-radius: 6px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, .22); color: #fff;
    font-size: var(--font-small); font-weight: 700;
    transition: background .2s ease;
}
.conferencia__num--feito { background: var(--success); }
.conferencia__titulo { font-size: var(--font-base-fluid); margin: 0; flex: 1; }
/* O resumo do passo, na linha do cabecalho. O do endereco passou a levar
   cidade e UF junto do CEP, entao o teto subiu: em 45% "94820-490 ·
   alvorada/RS" era cortado logo depois do CEP no celular, justamente na parte
   que foi acrescentada para identificar o endereco. O titulo ao lado e
   `flex: 1` e cede o espaco; a reticencia continua de pe para o nome de
   transportadora comprido. */
.conferencia__valor {
    font-size: var(--font-small); color: rgba(0, 0, 0, .6);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%;
}
.conferencia__editar {
    background: none; border: none; cursor: pointer; color: inherit;
    font-family: var(--body-font); font-size: var(--font-small);
    text-decoration: underline; padding: 4px;
}
.conferencia__detalhe {
    margin: 8px 0 0; font-size: var(--font-small); color: rgba(0, 0, 0, .65);
}
/* O acordeao dentro do bloco nao repete a borda de baixo do componente base. */
.conferencia.accordion { border-bottom: 1px solid rgba(0, 0, 0, .12); }
.conferencia .accordion__panel { padding: 14px 0 0; }

.checkout-status {
    margin: 0 0 10px; font-size: var(--font-small); color: rgba(0, 0, 0, .6);
}
/* ── "Efetuando pagamento...", embaixo do botao de finalizar ─
   O irmao de cima acompanha a cotacao do frete e vive dentro do bloco de
   envio; este fica na coluna do total, logo apos o botao, e por isso respira
   para cima em vez de para baixo. Centralizado para ler como legenda do botao,
   e nao como mais uma linha do resumo. */
.checkout-status--pagando {
    margin: 10px 0 0; text-align: center; color: var(--main-foreground);
}
/* A recusa repetida junto do botao. A de cima ja separa dos campos do cartao;
   esta separa do botao, e centraliza pelo mesmo motivo. */
.pagamento-erro--botao { text-align: center; margin: 10px 0 0; }

.cart-summary__head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 10px; margin-bottom: 10px;
}

.cupom-caixa { margin: 10px 0; }
.cupom-caixa .accordion__toggle {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; width: 100%; font-size: var(--font-small);
}
.cupom-caixa__acao { color: var(--accent-color); text-decoration: underline; }

/* O "continuar comprando" do alto do carrinho: seta a esquerda, texto ao lado. */
.voltar-comprando {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: var(--font-small); margin: 4px 0 14px;
}
.voltar-comprando:hover { text-decoration: underline; }

/* ── Escolha do meio de pagamento, no checkout ──────────────
   Cada opcao e um <label> inteiro clicavel: no celular, acertar so o circulo do
   radio e o tipo de mira que faz a pessoa desistir. */
.pagamento-opcoes { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }

.pagamento-opcao {
    display: block; cursor: pointer;
    border: 1px solid rgba(0, 0, 0, .16); border-radius: var(--border-radius);
    padding: 14px 16px;
}
.pagamento-opcao:has(input:checked) {
    border-color: var(--main-foreground);
    box-shadow: inset 0 0 0 1px var(--main-foreground);
}

/* O <label> e so o cabecalho; o painel e irmao dele. Envolver o painel tambem
   punha <label> dentro de <label>, e ai o navegador deixava de marcar o radio
   no clique — a opcao do cartao simplesmente nao selecionava. */
.pagamento-opcao__cabeca {
    display: flex; align-items: center; gap: 10px; cursor: pointer; min-width: 0;
}
.pagamento-opcao__cabeca input[type="radio"] { margin: 0; flex: 0 0 auto; }
.pagamento-opcao__nome { font-weight: 500; flex: 1; }
.pagamento-opcao__nota {
    font-size: var(--font-small); color: rgba(0, 0, 0, .55); text-align: right;
}

/* SEM JavaScript os dois paineis ficam abertos: quem nao tem script precisa ler
   o aviso do cartao antes de escolher. Com script, so o marcado abre — a classe
   `esta-aberta` e posta pelo checkout.js. */
.pagamento-opcao__corpo {
    display: block; margin-top: 12px; padding-left: 26px;
    font-size: var(--font-small); line-height: 1.5; color: rgba(0, 0, 0, .7);
}
[data-pagamento-opcoes][data-com-js] .pagamento-opcao__corpo { display: none; }
[data-pagamento-opcoes][data-com-js] .pagamento-opcao.esta-aberta .pagamento-opcao__corpo { display: block; }

.pagamento-opcao__aviso {
    display: block; margin-top: 10px; padding: 10px 12px;
    background: rgba(171, 151, 127, .12); border-radius: var(--border-radius);
    font-size: var(--font-smallest); line-height: 1.5;
}

/* Os campos do cartao reaproveitam .pagamento-campo da tela de pagamento. Aqui
   eles sao <span> (nao da para aninhar <div> dentro de <label>), e span nasce
   inline — sem forcar block, `height` e `width` nao valem e as caixas dos
   iframes crescem sem limite. */
.pagamento-opcao .pagamento-campo,
.pagamento-opcao .pagamento-campo__caixa,
.pagamento-opcao .pagamento-campo-par,
.pagamento-opcao .pagamento-erro { display: block; }
.pagamento-opcao .pagamento-campo-par { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pagamento-opcao .pagamento-campo label { cursor: pointer; }

@media (max-width: 480px) {
    .pagamento-opcao .pagamento-campo-par { grid-template-columns: 1fr; gap: 0; }
}

/* ── Rastreio na pagina do pedido ───────────────────────────
   O codigo precisa poder ser copiado a mao: em algumas transportadoras a
   pessoa vai ter de cola-lo num formulario de busca. Por isso `user-select`
   explicito e fonte monoespacada — codigo de rastreio misturando O e 0 lido de
   um texto proporcional e erro na certa. */
.rastreio__codigo { margin: 0; }
.rastreio__valor {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: .04em; user-select: all;
}
.rastreio__servico {
    margin: 4px 0 0; font-size: var(--font-small); opacity: .8;
}
.rastreio__acoes {
    display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0;
}

/* ── Painel de produtos do checkout ─────────────────────────
   A mesma peca que o carrinho mostra, num espaco bem menor: a coluna do resumo
   tem cerca de um terco da largura. Por isso a foto encolhe para 56px e o
   stepper ganha uma versao mini — o de 46px de altura empurraria o preco para
   fora da linha. */
.resumo-itens { list-style: none; margin: 0; padding: 0; }
.resumo-item {
    /* Foto, corpo, preco e o "x". A quarta coluna e do tamanho do botao: o
       preco continua colado a direita do texto, e nao empurrado pelo icone. */
    display: grid; grid-template-columns: 56px minmax(0, 1fr) auto auto;
    gap: 10px; align-items: start;
    padding: 12px 0; border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.resumo-item:last-child { border-bottom: none; }

.resumo-item__foto {
    display: block; aspect-ratio: 1 / 1; overflow: hidden;
    border-radius: var(--border-radius); background: rgba(0, 0, 0, .04);
}
.resumo-item__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.resumo-item__foto .img-placeholder { width: 100%; height: 100%; }

.resumo-item__nome {
    display: block; font-size: var(--font-small); line-height: 1.35;
    font-weight: 500;
}
.resumo-item__nome:hover { text-decoration: underline; }

.resumo-item__variacao {
    display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
    margin: 3px 0 0; font-size: var(--font-smallest); color: rgba(0, 0, 0, .55);
}

.resumo-item__preco {
    font-size: var(--font-small); font-weight: 600; white-space: nowrap;
}

.resumo-item__qtd { margin-top: 8px; }

/* O mesmo "x" discreto da gaveta: presente sem competir com o "Finalizar". */
.resumo-item__remover-forma { display: flex; }
.resumo-item__remover {
    background: none; border: none; cursor: pointer; color: rgba(0, 0, 0, .45);
    display: inline-flex; padding: 2px; line-height: 1;
}
.resumo-item__remover:hover { color: var(--main-foreground); }

/* Versao estreita do stepper, so para esta coluna. */
.stepper--mini { height: 34px; }
.stepper--mini button { width: 30px; font-size: var(--font-normal); }
.stepper--mini input { width: 34px; font-size: var(--font-small); }

/* A peca esgotada continua visivel, marcada — some-la em silencio deixaria a
   pessoa sem entender por que o total mudou. */
.resumo-item--esgotado .resumo-item__foto { filter: grayscale(1); opacity: .55; }
.resumo-item--esgotado .resumo-item__nome { color: rgba(0, 0, 0, .55); }
.resumo-item__aviso {
    margin: 4px 0 0; font-size: var(--font-smallest); color: #8f2f2b;
}

/* Enquanto o frete e o total sao recalculados, a coluna inteira espera. Sem
   isto, dois cliques rapidos no "+" deixariam a tela mostrando um total que ja
   nao corresponde ao que o servidor gravou. */
.cart-summary[aria-busy="true"] { opacity: .6; pointer-events: none; }

/* ============================================================
   TELA DE PAGAMENTO — Pix e cartao na propria loja
   ============================================================ */
.pagamento-bloco {
    border: 1px solid rgba(0, 0, 0, .12); border-radius: var(--border-radius);
    padding: 22px; margin: 18px 0; text-align: center;
}
.pagamento-bloco__titulo {
    font-size: var(--font-big-fluid); margin: 0 0 6px;
}
.pagamento-bloco__dica {
    font-size: var(--font-small); color: rgba(0, 0, 0, .65);
    margin: 8px auto 0; max-width: 46ch; line-height: 1.5;
}

/* O QR precisa de fundo branco mesmo num tema escuro: leitor de banco nao le
   codigo invertido. O padding e a "zona quieta" que a especificacao do QR pede
   — sem ela, a camera erra a leitura em telas pequenas. */
.pagamento-qr {
    display: block; margin: 16px auto; background: #fff; padding: 10px;
    border-radius: var(--border-radius); width: 260px; height: auto;
    max-width: 100%;
}

/* Codigo copia e cola: o campo ocupa a linha e o botao encosta nele. */
.pagamento-copia {
    display: flex; align-items: center; gap: 6px; margin-top: 12px;
    border: 1px solid rgba(0, 0, 0, .18); border-radius: var(--border-radius);
    overflow: hidden; background: var(--main-background, #fff);
}
.pagamento-copia input {
    flex: 1; min-width: 0; border: none; background: transparent;
    padding: 10px; font-family: var(--body-font); font-size: var(--font-smallest);
    color: inherit; outline: none;
    /* O codigo do Pix nao tem espacos: sem isto ele estoura a caixa no celular. */
    text-overflow: ellipsis;
}
.pagamento-copia button {
    flex: 0 0 auto; border: none; cursor: pointer; padding: 10px 14px;
    background: rgba(0, 0, 0, .06); color: inherit;
    font-family: var(--body-font); font-size: var(--font-small);
}
.pagamento-copia button:hover { background: rgba(0, 0, 0, .1); }
.pagamento-copia:focus-within { border-color: var(--main-foreground); }

/* ── Campos do cartao ───────────────────────────────────────
   Numero, validade e codigo de seguranca sao IFRAMES do Mercado Pago. Nao da
   para estiliza-los por dentro daqui — e e essa fronteira que mantem os dados
   fora do alcance da loja. O que se estiliza e a caixa em volta, para o campo
   de fora parecer com os campos do resto do site. */
.pagamento-campo { text-align: left; margin-top: 14px; }
.pagamento-campo label {
    display: block; font-size: var(--font-small); margin-bottom: 5px;
}
.pagamento-campo__caixa,
.pagamento-campo input,
.pagamento-campo select {
    width: 100%; box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, .18); border-radius: var(--border-radius);
    background: var(--main-background, #fff); color: inherit;
    font-family: var(--body-font); font-size: var(--font-small);
    padding: 10px;
}
/* O iframe entra com altura zero ate o SDK montar: sem uma altura fixa, a
   pagina daria um salto de layout no meio da digitacao. */
.pagamento-campo__caixa { height: 42px; padding: 0 10px; }
/* Fundo transparente: o iframe pinta o proprio branco por padrao, e num
   tema escuro isso desenharia tres retangulos claros no meio da tela. */
.pagamento-campo__caixa iframe {
    width: 100%; height: 100%; border: 0; display: block; background: transparent;
}
.pagamento-campo__caixa:focus-within,
.pagamento-campo input:focus,
.pagamento-campo select:focus { border-color: var(--main-foreground); outline: none; }

/* Validade e codigo de seguranca dividem a linha; no celular, uma embaixo da
   outra, porque lado a lado cada campo fica estreito demais para digitar. */
.pagamento-campo-par { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 420px) {
    .pagamento-campo-par { grid-template-columns: 1fr; gap: 0; }
}

.pagamento-erro {
    text-align: left; margin: 12px 0 0; font-size: var(--font-small);
    /* O mesmo tom de .alert-error, para o aviso do cartao nao introduzir
       um vermelho estranho a paleta da loja. */
    color: #8f2f2b;
}

/* Na hora de pagar, a coluna flutuante de redes sociais sai de cena.

   Ela fica encostada na direita e, no celular, cobre o botao de copiar o
   codigo do Pix — justamente o controle de que a pessoa precisa naquele
   segundo. Fora isso, oferecer Instagram a quem esta com o aplicativo do
   banco aberto so tira a atencao do que falta terminar. */
.esta-pagando .social-fab { display: none; }

/* ============================================================
   A CONTA: CARTAO DE PEDIDO, ESTEIRA DE ANDAMENTO E MINIATURAS

   A lista de pedidos era uma tabela de codigos. Ninguem decora o codigo do
   proprio pedido: quem volta aqui procura "aquele colar preto" e reconhece
   pela foto em menos tempo do que leva para ler uma linha. E a situacao, que
   antes era uma palavra numa etiqueta, virou uma esteira: quem pergunta "cade
   a minha compra?" quer o caminho, e nao o nome do estado.
   ============================================================ */
.pedido-lista { display: grid; gap: 16px; }

.pedido-cartao {
    border: 1px solid rgba(0, 0, 0, .1); border-radius: var(--border-radius);
    padding: 18px 20px; background: var(--main-background);
    /* A faixa da esquerda e o sinal que se le antes de qualquer texto. */
    border-left: 4px solid rgba(0, 0, 0, .18);
}
.pedido-cartao--paid,
.pedido-cartao--processing,
.pedido-cartao--shipped,
.pedido-cartao--delivered { border-left-color: var(--success, #2d7a56); }
.pedido-cartao--pending_payment,
.pedido-cartao--payment_expired { border-left-color: #b57614; }
.pedido-cartao--canceled,
.pedido-cartao--refunded { border-left-color: #c0453f; }

.pedido-cartao__topo {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 16px; flex-wrap: wrap;
}
/* A situacao em cor, e nao em cinza: "PAGAMENTO EXPIRADO" em cinza le como
   mais um rotulo, e e o unico estado desta lista que pede uma acao. As cores
   sao as mesmas das etiquetas da pagina do pedido, para as duas telas nao
   contarem a mesma coisa de dois jeitos. */
.pedido-cartao__situacao {
    font-size: var(--font-smallest); text-transform: uppercase;
    letter-spacing: .08em; color: rgba(0, 0, 0, .6); font-weight: 600;
}
.pedido-cartao--paid .pedido-cartao__situacao,
.pedido-cartao--processing .pedido-cartao__situacao,
.pedido-cartao--shipped .pedido-cartao__situacao,
.pedido-cartao--delivered .pedido-cartao__situacao { color: #1f6b4f; }
.pedido-cartao--pending_payment .pedido-cartao__situacao { color: #8a5510; }
.pedido-cartao--payment_expired .pedido-cartao__situacao,
.pedido-cartao--canceled .pedido-cartao__situacao,
.pedido-cartao--refunded .pedido-cartao__situacao { color: #8f2f2b; }
.pedido-cartao__codigo {
    margin: 2px 0 0; font-size: var(--h5-fluid); font-weight: 600; line-height: 1.2;
}
.pedido-cartao__valores { text-align: right; }
.pedido-cartao__data { display: block; font-size: var(--font-smallest); color: rgba(0, 0, 0, .55); }
.pedido-cartao__total { font-size: var(--h5-fluid); }
.pedido-cartao__encerrado {
    margin-top: 12px; font-size: var(--font-small); color: rgba(0, 0, 0, .6);
}

.pedido-cartao__baixo {
    display: flex; justify-content: space-between; align-items: center;
    gap: 16px; flex-wrap: wrap; margin-top: 16px;
}
.pedido-cartao__acoes { display: flex; gap: 10px; flex-wrap: wrap; margin-left: auto; }

/* ── As fotos das pecas ─────────────────────────────────── */
/* A etiqueta da quantidade sobra na quina, e por isso a peca NAO corta: quem
   corta e a caixa da foto, aqui dentro. Com o corte na peca, a etiqueta era
   cortada junto e ficava presa dentro do quadrado. A folga de 6px no topo e na
   direita e o espaco em que ela sobra sem encostar na peca vizinha. */
.miniaturas { display: flex; gap: 8px; flex-wrap: wrap; padding: 6px 6px 0 0; }
.miniaturas__peca {
    position: relative; width: 52px; height: 52px; flex: 0 0 52px;
}
.miniaturas__foto {
    display: block; width: 100%; height: 100%;
    border-radius: var(--border-radius); overflow: hidden;
    background: rgba(0, 0, 0, .05);
}
.miniaturas__peca img { width: 100%; height: 100%; object-fit: cover; display: block; }
.miniaturas__peca .img-placeholder { width: 100%; height: 100%; aspect-ratio: auto; }
/* A quantidade so aparece acima de 1: um "1" em cada foto seria ruido em todo
   pedido comum. */
.miniaturas__qtd {
    position: absolute; top: -6px; right: -6px; z-index: 1;
    min-width: 20px; height: 20px; padding: 0 5px;
    border-radius: 10px; background: var(--label-background, #222);
    /* A borda da cor do fundo separa a etiqueta da foto de tras quando as duas
       tem tom parecido. */
    box-shadow: 0 0 0 2px var(--main-background, #fff);
    color: #fff; font-size: 11px; line-height: 20px; text-align: center; font-weight: 600;
}
.miniaturas__mais {
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, .78); color: #fff;
    font-size: var(--font-small); font-weight: 600;
}

/* ── A esteira do andamento ─────────────────────────────── */
.andamento {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 4px; margin: 22px 0 6px; padding: 0; list-style: none;
}
.andamento__passo {
    position: relative; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
}
/* A linha que liga um passo ao seguinte nasce do proprio passo, e nao de um
   elemento a parte: assim ela acompanha a largura de cada coluna sozinha. */
.andamento__passo::before {
    content: ''; position: absolute; top: 21px; left: 50%; width: 100%; height: 3px;
    background: rgba(0, 0, 0, .12);
}
.andamento__passo:last-child::before { display: none; }
.andamento__passo.esta-feito::before { background: var(--success, #2d7a56); }

.andamento__bola {
    position: relative; z-index: 1;
    width: 44px; height: 44px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, .08); color: rgba(0, 0, 0, .45);
}
.andamento__passo.esta-feito .andamento__bola { background: var(--success, #2d7a56); color: #fff; }
/* O passo ATUAL fica marcado sem ficar "aceso": ele ainda nao aconteceu, e
   pinta-lo de verde diria que aconteceu. */
.andamento__passo.esta-agora .andamento__bola {
    background: var(--main-background); color: var(--main-foreground);
    box-shadow: 0 0 0 3px var(--success, #2d7a56) inset;
}
.andamento__titulo {
    font-size: var(--font-smallest); line-height: 1.3; color: rgba(0, 0, 0, .7);
    max-width: 12ch;
}
.andamento__passo.esta-agora .andamento__titulo { font-weight: 600; color: var(--main-foreground); }
.andamento__data { font-size: var(--font-smallest); color: rgba(0, 0, 0, .5); }

/* No celular a esteira vira vertical: quatro colunas de 80px espremem o texto
   em uma palavra por linha, e a esteira deixa de ser legivel justamente na
   tela em que ela e mais usada. */
@media (max-width: 560px) {
    .andamento { grid-template-columns: 1fr; gap: 14px; text-align: left; }
    .andamento__passo { flex-direction: row; align-items: center; gap: 10px; text-align: left; }
    .andamento__passo::before {
        top: 44px; left: 21px; width: 3px; height: 100%;
    }
    .andamento__titulo { max-width: none; }
    .andamento__data { margin-left: auto; }
}