/* ============================================================
   COMPONENTES — header, botões, cards, sacola, footer
   NÃO CONTÉM COR LITERAL. Só var(). Compartilhado.
   ============================================================ */

/* --- Header -------------------------------------------------- */
.topo {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--fundo) 93%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid color-mix(in srgb, var(--marca-escura) 14%, transparent);
}
.topo-interno {
  /* Menu a esquerda, logo no meio, acoes a direita — como a
     maquete do Stitch. space-between distribui os vaos por igual,
     entao a logo cai no centro optico do header. A ordem no HTML
     continua logo-primeiro (SEO/sem-CSS); quem reposiciona e o
     `order`. */
  max-width: 100%; margin: 0; padding: 14px 40px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
/* menu e acoes dividem o espaco em duas metades iguais — assim a
   logo, no meio, cai no centro real do header mesmo o menu sendo
   mais largo que os icones. */
.menu        { order: 1; flex: 1 1 0; }
.menu-toggle { order: 1; }
.logo        { order: 2; flex: none; }
.topo-acoes  { order: 3; flex: 1 1 0; justify-content: flex-end; }
.logo {
  display: flex; align-items: center; gap: 11px;
  color: var(--marca-escura); text-decoration: none;
  background: none; border: 0; cursor: pointer; padding: 0;
}

/* --- Acoes do topo: busca, favoritos, sacola ---------------- */
.topo-acoes { display: flex; align-items: center; gap: 4px; }

/* A lupa abre um campo que cresce da direita para a esquerda. O
   <form method=get> aponta para catalogo.html — funciona sem JS;
   o script so cuida do abre/fecha. */
.topo-busca { display: flex; align-items: center; }
.topo-busca input {
  width: 0; padding: 0; border: 0; opacity: 0; box-sizing: border-box;
  background: var(--superficie); color: var(--marca-escura);
  font-family: var(--fonte-ui); font-size: 13px; letter-spacing: 0;
  border-radius: var(--raio-controle);
  transition: width var(--mov-normal) var(--curva),
              opacity var(--mov-rapido) var(--curva),
              padding var(--mov-normal) var(--curva),
              margin var(--mov-normal) var(--curva);
}
.topo-busca.aberta input {
  width: 172px; padding: 9px 12px; margin-right: 4px; opacity: 1;
  border: 1px solid var(--borda-quente);
}
.topo-busca input::placeholder { color: var(--marca-taupe); }

.topo-icone {
  position: relative; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0;
  background: none; border: 0; cursor: pointer; line-height: 0;
  color: var(--marca-escura); border-radius: var(--raio-controle);
  transition: color var(--mov-rapido) var(--curva);
}
.topo-icone:hover { color: var(--marca-realce); }

/* Selo redondo com o numero. Some quando e zero — badge com "0"
   parece defeito. */
.topo-selo {
  position: absolute; top: 3px; right: 1px;
  min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--fonte-numero); font-size: 10px; line-height: 1;
  color: var(--fundo); background: var(--marca-vinho);
  border-radius: 999px;
}
.topo-selo[hidden] { display: none; }
.logo-flor { width: 34px; height: 34px; flex: none; }
.logo-flor .petalas { stroke: var(--marca-realce); }
.logo-flor .miolo   { fill: var(--marca-primaria); }
.logo-nome {
  font-family: var(--fonte-logo); font-weight: 300;
  font-size: 22px; letter-spacing: .06em; line-height: 1;
}
.menu {
  display: flex; gap: 30px; font-size: 12px; letter-spacing: .16em;
  text-transform: uppercase; margin-left: 8px;
}
.menu a { color: var(--marca-media); }
.menu a:hover { color: var(--marca-realce); }

/* Hamburguer — so aparece no mobile.

   Era o caractere ☰, que depende de a fonte ter o glifo: Montserrat
   nao tem, e o desenho ficava a merce do que o sistema emprestasse.
   Virou SVG, como a flor da marca — mesmo traço, mesma cor, em
   qualquer aparelho. */
.menu-toggle {
  display: none; background: none; border: 0; cursor: pointer;
  padding: 10px; color: var(--marca-escura);
  line-height: 0;
}

/* --- Botões -------------------------------------------------- */
/* Montserrat ja e larga: .16em de entreletra separava demais o
   rotulo. O sistema pede .08em no botao. */
.btn {
  font-family: var(--fonte-ui); font-size: 13px; font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase; border-radius: var(--raio-md);
  padding: 14px 28px; cursor: pointer; border: 1px solid transparent;
  transition: background var(--mov-normal) var(--curva),
              color var(--mov-normal) var(--curva),
              border-color var(--mov-normal) var(--curva);
}

/* Acao principal: ouro acetinado. O texto e escuro sobre o ouro
   porque ouro claro com texto claro nao passa contraste — e o
   dourado da marca e claro. */
.btn-solido {
  color: var(--marca-escura);
  background: linear-gradient(102deg, var(--marca-primaria-alt), var(--marca-primaria));
  border-color: var(--marca-primaria);
}
.btn-solido:hover {
  background: linear-gradient(102deg, var(--marca-primaria), var(--marca-primaria-alt));
}

/* Acao de prestigio: vinho. Guardada para o momento de converter —
   finalizar a sacola, campanha de temporada. Usar em tudo tira o
   peso que ela tem justamente por ser rara. */
.btn-vinho { color: var(--fundo); background: var(--marca-vinho); border-color: var(--marca-vinho); }
.btn-vinho:hover { background: var(--marca-vinho-fundo); border-color: var(--marca-vinho-fundo); }

/* Contorno editorial: preenche no hover, em vez de so clarear. */
.btn-contorno { color: var(--marca-escura); background: transparent; border-color: var(--marca-escura); }
.btn-contorno:hover { background: var(--marca-escura); color: var(--fundo); }

.btn-pequeno { font-size: 11.5px; padding: 12px 20px; }
.btn-largo { width: 100%; padding: 16px; }

/* Alvo de toque mínimo de 44px no mobile (WCAG) */
@media (max-width: 768px) {
  .btn { padding: 14px 24px; min-height: 44px; }
}

/* --- Card de produto ----------------------------------------- */
.card-moldura {
  background: var(--superficie); padding: 8px; border-radius: var(--raio-md);
  border: 1px solid var(--borda-quente);
  transition: border-color var(--mov-normal) var(--curva),
              box-shadow var(--mov-normal) var(--curva);
}
.card:hover .card-moldura {
  border-color: color-mix(in srgb, var(--marca-primaria) 45%, transparent);
  box-shadow: var(--sombra-ambiente);
}

.card-foto { position: relative; aspect-ratio: var(--proporcao-foto); overflow: hidden; }
.card-foto img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 400ms var(--curva), opacity var(--mov-normal) var(--curva);
}

/* Aproximacao curta ao passar o mouse. 1.03 e o suficiente para a
   peca "responder" ao olhar; mais que isso vira efeito, e efeito
   tira a atencao da roupa. */
.card:hover .card-foto img { transform: scale(1.03); }

/* A SEGUNDA foto do produto aparece no hover, sobre a primeira.
   Em vitrine de roupa, ver a peca por outro angulo vale mais que
   qualquer animação — e o catalogo ja tem duas fotos por peca.
   Quem navega por toque nao tem hover: la a segunda foto nunca
   aparece, e a primeira continua respondendo por tudo. */
.card-foto-2 { opacity: 0; }
.card:hover .card-foto-2 { opacity: 1; }
.card:hover .card-foto-1 { opacity: 0; }

.card-legenda { margin: 0 0 12px; font-size: 13px; color: var(--marca-suave); }

.badge {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  font-family: var(--fonte-ui); font-size: 10px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; line-height: 1;
  background: color-mix(in srgb, var(--marca-primaria) 15%, var(--fundo));
  color: var(--marca-media);
  border: 1px solid color-mix(in srgb, var(--marca-primaria) 40%, transparent);
  padding: 6px 10px; border-radius: var(--raio-sm);
}

/* Urgencia real — ultimas pecas — em vinho. Separado do selo de
   novidade de proposito: sao mensagens diferentes e nao podem ter
   a mesma cor, senao nenhuma das duas significa nada. */
.badge-urgente {
  background: color-mix(in srgb, var(--marca-vinho) 10%, var(--fundo));
  color: var(--marca-vinho);
  border-color: color-mix(in srgb, var(--marca-vinho) 30%, transparent);
}

/* --- Seletor de tamanho -------------------------------------- */
.tamanhos { display: flex; gap: 7px; margin-bottom: 14px; flex-wrap: wrap; }

/* O sistema pede 36px. No celular a pastilha volta a 44, porque
   alvo de toque menor que isso erra — e errar tamanho de roupa e
   o tipo de erro que vira troca. */
.tamanho {
  position: relative;
  width: 36px; height: 36px;
  font-family: var(--fonte-numero); font-size: 13px; font-weight: 500;
  letter-spacing: 0; border-radius: var(--raio-md); cursor: pointer;
  background: var(--superficie); color: var(--marca-media);
  border: 1px solid var(--borda-quente);
  transition: border-color var(--mov-rapido) var(--curva),
              color var(--mov-rapido) var(--curva),
              background var(--mov-rapido) var(--curva);
}
.tamanho:hover { border-color: var(--marca-mocha); color: var(--marca-escura); }

/* Selecionado em vinho, com fundo osso — nao invertido em escuro.
   Marca a escolha sem pesar no card inteiro. */
.tamanho[aria-pressed="true"] {
  background: var(--fundo); color: var(--marca-vinho);
  border-color: var(--marca-vinho); font-weight: 600;
}

/* Indisponivel fica NA TELA, riscado. Sumir com o tamanho faz a
   cliente procurar o que nao existe; riscado ela ve na hora. */
.tamanho[disabled],
.tamanho[aria-disabled="true"] {
  color: var(--marca-taupe); border-color: var(--borda-quente);
  cursor: not-allowed; opacity: .55;
}
.tamanho[disabled]::after,
.tamanho[aria-disabled="true"]::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top left,
    transparent calc(50% - .5px), var(--marca-taupe) calc(50% - .5px),
    var(--marca-taupe) calc(50% + .5px), transparent calc(50% + .5px));
}

@media (max-width: 768px) {
  .tamanho { width: 44px; height: 44px; }
}

/* --- Preço --------------------------------------------------- */
.preco-linha {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  border-top: 1px solid color-mix(in srgb, var(--marca-escura) 12%, transparent);
  padding-top: 14px;
}
.preco { font-size: 15px; color: var(--marca-escura); }
.preco-pix { font-size: 12px; color: var(--marca-suave); margin-top: 3px; }

/* --- Filtros ------------------------------------------------- */
.filtros { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 34px; }
.filtro {
  font-family: var(--fonte-ui); font-size: 12px; font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase; padding: 11px 22px; border-radius: var(--raio-md);
  cursor: pointer; background: var(--superficie); color: var(--marca-mocha);
  border: 1px solid var(--borda-quente);
  transition: border-color var(--mov-rapido) var(--curva),
              color var(--mov-rapido) var(--curva);
}
.filtro:hover { border-color: var(--marca-mocha); color: var(--marca-escura); }
.filtro[aria-pressed="true"] {
  background: var(--marca-escura); color: var(--fundo); border-color: var(--marca-escura);
}

/* --- Sacola lateral ------------------------------------------ */
/* Escurecido tingido de cacau, com desfoque leve: a atencao vai
   para a sacola sem a pagina virar um bloco cinza atras. */
.sacola-fundo {
  position: fixed; inset: 0; background: var(--scrim);
  backdrop-filter: blur(6px);
  z-index: 50; border: 0;
}
.sacola {
  position: fixed; top: 0; right: 0; width: min(420px, 100vw);
  height: 100%;
  height: 100dvh;   /* dvh acompanha a barra do Safari ao rolar */
  background: var(--fundo); z-index: 51; display: flex; flex-direction: column;
  box-shadow: -8px 0 40px color-mix(in srgb, var(--marca-escura) 18%, transparent);
}
.sacola-itens {
  flex: 1; overflow-y: auto; padding: 6px 28px;
  overscroll-behavior: contain;      /* nao rola a pagina atras */
  -webkit-overflow-scrolling: touch;
}
.sacola-item {
  display: grid; grid-template-columns: 64px 1fr auto; gap: 14px;
  padding: 18px 0; align-items: start;
  border-bottom: 1px solid color-mix(in srgb, var(--marca-escura) 10%, transparent);
}
.sacola-rodape {
  /* env(safe-area-inset-bottom): sem isto o botao Finalizar fica
     atras da barra de gestos do iPhone. E o botao de fechar venda. */
  padding: 24px 28px 30px;
  padding-bottom: max(30px, calc(env(safe-area-inset-bottom) + 16px));
  border-top: 1px solid color-mix(in srgb, var(--marca-escura) 14%, transparent);
}
.sacola-vazia { padding: 60px 28px; text-align: center; color: var(--marca-suave); }

/* --- Footer -------------------------------------------------- */
.rodape {
  background: var(--fundo-alt); margin-top: 40px;
  border-top: 1px solid color-mix(in srgb, var(--marca-escura) 14%, transparent);
}
.rodape-grade {
  max-width: 1280px; margin: 0 auto; padding: 60px 32px;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px;
}
@media (max-width: 768px) {
  .rodape-grade { grid-template-columns: 1fr 1fr; gap: 32px; padding: 44px 20px; }
}
@media (max-width: 480px) {
  .rodape-grade { grid-template-columns: 1fr; }
}

/* --- Utilitários --------------------------------------------- */
.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Controle de quantidade na sacola ------------------------ */
.controle-qtd { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.controle-qtd .tamanho { width: 32px; height: 32px; font-size: 15px; line-height: 1; }
.controle-qtd .num { min-width: 28px; text-align: center; }

.link-remover {
  margin-top: 8px; font-family: var(--fonte-ui); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--marca-detalhe);
  background: transparent; border: 0; padding: 0; cursor: pointer;
}
.link-remover:hover { color: var(--marca-realce); text-decoration: underline; }

.catalogo-vazio { grid-column: 1 / -1; padding: 40px 0; color: var(--marca-suave); }

#btn-finalizar:disabled { opacity: .45; cursor: not-allowed; }

/* --- Atalhos de categoria (estilo "stories") ---------------- */
.atalhos-cat {
  display: flex; justify-content: center; align-items: flex-start;
  gap: 14px; flex-wrap: wrap;
  padding: 18px var(--margem-lateral);
  background: var(--fundo-alt);
  border-bottom: 1px solid var(--borda-quente);
}
.atalho-cat {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 14px 6px 6px; border-radius: var(--raio-pastilha);
  background: var(--superficie); border: 1px solid var(--borda-quente);
  color: var(--marca-escura); text-decoration: none;
  transition: border-color var(--mov-rapido) var(--curva),
              background var(--mov-rapido) var(--curva);
}
.atalho-cat:hover { border-color: var(--marca-primaria); }
.atalho-cat-foto {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  overflow: hidden; background: var(--fundo-alt);
  border: 1px solid color-mix(in srgb, var(--marca-primaria) 40%, transparent);
  display: flex; align-items: center; justify-content: center;
}
.atalho-cat-foto img { width: 100%; height: 100%; object-fit: cover; }
.atalho-cat-foto-flor { color: var(--marca-primaria); }
.atalho-cat-foto-flor svg { width: 18px; height: 18px; }
.atalho-cat-nome {
  font-family: var(--fonte-ui); font-size: 11.5px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}
@media (max-width: 767px) {
  .atalhos-cat {
    justify-content: flex-start; flex-wrap: nowrap;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding: 14px var(--margem-lateral);
  }
  .atalhos-cat::-webkit-scrollbar { display: none; }
  .atalho-cat { flex: none; }
}

/* --- Hero ---------------------------------------------------- */
.hero {
  display: grid; grid-template-columns: 1.05fr 1fr; align-items: center;
  min-height: var(--hero-altura); background: var(--fundo-alt); overflow: hidden;
}
.hero-texto { padding: 96px 32px 96px 8vw; animation: yzRise .9s ease both; }
.hero-realce { font-style: italic; color: var(--marca-realce); }
.hero-sub { max-width: 33ch; font-size: 16.5px; line-height: 1.75; color: var(--marca-media); margin: 0 0 38px; }
.hero-acoes { display: flex; gap: 14px; flex-wrap: wrap; }

/* A foto ganha moldura: cantos, sombra e um respiro da borda —
   deixa de sangrar na margem e passa a "peca de vitrine", como
   Alo e Vuori fazem na home. */
.hero-foto {
  position: relative; align-self: stretch;
  margin: 26px 34px 26px 0; min-height: var(--hero-altura);
  border-radius: var(--raio-lg); overflow: hidden;
  box-shadow: var(--sombra-alta);
}
.hero-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Veu que sobe do rodape: sem ele, o cartao claro sobre foto clara
   perde o contorno. */
.hero-foto::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top,
    color-mix(in srgb, var(--marca-escura) 42%, transparent), transparent 46%);
}

/* Cartao flutuante no rodape da foto. */
.hero-tag {
  position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 2;
  display: flex; align-items: center; gap: 13px;
  background: color-mix(in srgb, var(--fundo) 90%, transparent);
  backdrop-filter: blur(8px);
  border: 1px solid var(--borda-quente); border-radius: var(--raio-md);
  padding: 12px 14px;
}
.hero-tag-flor { width: 26px; height: 26px; flex: none; color: var(--marca-primaria); }
.hero-tag-flor svg { display: block; width: 100%; height: 100%; }
.hero-tag-texto {
  display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0;
  font-size: 11.5px; line-height: 1.35; color: var(--marca-suave);
}
.hero-tag-texto strong {
  font-family: var(--fonte-ui); font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--marca-escura);
}
.hero-tag-btn {
  flex: none; white-space: nowrap;
  font-family: var(--fonte-ui); font-size: 10.5px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--fundo); background: var(--marca-escura);
  padding: 9px 14px; border-radius: var(--raio-controle);
  transition: background var(--mov-rapido) var(--curva);
}
.hero-tag-btn:hover { background: var(--marca-vinho); }
.hero-selos {
  display: grid; grid-template-columns: repeat(3, auto);
  justify-content: start; gap: 12px 34px;
  margin: 48px 0 0; padding: 24px 0 0; list-style: none;
  border-top: 1px solid var(--borda-quente);
  font-size: 11px; font-weight: 500; letter-spacing: .1em;
  text-transform: uppercase; color: var(--marca-suave);
}
/* Um ponto dourado no lugar do marcador: liga os seis itens como
   uma ficha so, sem o peso de uma bolinha de lista. */
.hero-selos li { display: flex; align-items: center; gap: 8px; }
.hero-selos li::before {
  content: ""; width: 4px; height: 4px; border-radius: 50%;
  background: var(--marca-primaria); flex: none;
}

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .hero-texto { padding: 56px 20px 40px; order: 2; }
  .hero-foto {
    min-height: 420px; order: 1; position: relative;
    margin: 0; border-radius: 0; box-shadow: none;
  }
  .hero-selos { grid-template-columns: repeat(2, auto); gap: 10px 24px; margin-top: 34px; }
}

@media (max-width: 560px) {
  .hero-tag { left: 12px; right: 12px; bottom: 12px; flex-wrap: wrap; gap: 10px; }
  .hero-tag-btn { width: 100%; text-align: center; }
}

/* --- Coleções ------------------------------------------------ */
.colecao { display: block; color: inherit; }
.colecao:hover .card-moldura { border-color: var(--marca-primaria); }
.titulo-colecao { font-family: var(--fonte-titulo); font-weight: 400; font-size: 26px; margin: 18px 0 6px; color: var(--marca-escura); }
.link-tudo { font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }

/* --- Faixa de oferta (cartao claro) -------------------------
   MESMO container do .concierge (largura, margem, raio, borda no
   mobile). O que diferencia e a cor: cupom = cartao CLARO com
   realce dourado, concierge = cartao VINHO. Um par claro/escuro
   de propósito, no lugar de dois slabs de cor colados. */
.faixa {
  margin: var(--espaco-4xl) auto 0;
  max-width: calc(var(--largura-max) - 2 * var(--margem-lateral));
  background: color-mix(in srgb, var(--marca-primaria) 12%, var(--fundo-alt));
  border: 1px solid color-mix(in srgb, var(--marca-primaria) 34%, transparent);
  border-radius: var(--raio-md);
  color: var(--marca-escura);
  padding: var(--espaco-3xl) var(--margem-lateral);
  text-align: center;
}
.faixa-eyebrow { color: var(--marca-mocha); margin: 0 0 12px; }
.faixa-titulo {
  font-family: var(--fonte-titulo); font-weight: 400;
  font-size: clamp(26px, 3.6vw, 42px); line-height: 1.2;
  letter-spacing: -.01em; margin: 0 0 12px; color: var(--marca-escura);
}
.faixa-sub {
  color: var(--marca-media); margin: 0 auto 24px; max-width: 34rem;
  font-size: 14.5px; line-height: 1.7;
}
.faixa-btn { background: var(--marca-primaria); color: var(--marca-escura); border-color: var(--marca-primaria); }
.faixa-btn:hover { background: var(--marca-primaria-alt); }
@media (max-width: 767px) {
  .faixa { border-radius: 0; padding: var(--espaco-2xl) var(--margem-lateral); }
}

/* --- História (colagem + texto) ---------------------------- */
.historia {
  display: grid; grid-template-columns: 1fr 1fr; gap: 60px;
  align-items: center; margin-top: 100px;
}
.historia-texto p { font-size: 16px; line-height: 1.8; color: var(--marca-media); margin: 0 0 18px; }
.titulo-historia {
  font-family: var(--fonte-titulo); font-weight: 300;
  font-size: clamp(28px, 3.8vw, 52px); line-height: 1.06; margin: 0 0 26px; color: var(--marca-escura);
}
.historia-fecho { font-style: italic; color: var(--marca-realce) !important; }
.historia-assinatura {
  display: flex; align-items: center; gap: 14px;
  font-size: 14px; color: var(--marca-suave) !important; margin-top: 30px !important;
}
.historia-flor { width: 40px; height: 40px; flex: none; color: var(--marca-primaria);
  display: flex; align-items: center; justify-content: center; }
.historia-flor svg { width: 24px; height: 24px; }

/* Colagem 2×2: foto + cartao numa coluna, cartao + foto na outra,
   a segunda coluna descida meia altura. */
.historia-colagem { display: grid; grid-template-columns: 1fr 1fr; gap: var(--espaco-md); }
.historia-col { display: flex; flex-direction: column; gap: var(--espaco-md); }
.historia-col-deslocada { padding-top: var(--espaco-2xl); }
.historia-foto {
  position: relative; aspect-ratio: 4/5; border-radius: var(--raio-md);
  overflow: hidden; background: var(--fundo-alt);
}
.historia-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.historia-cartao {
  background: var(--superficie); border: 1px solid var(--borda-quente);
  border-radius: var(--raio-md); padding: 20px 18px; text-align: center;
}
.historia-cartao-vinho {
  background: var(--marca-vinho); border-color: var(--marca-vinho);
}
.historia-cartao-forte {
  margin: 0 0 5px; font-family: var(--fonte-titulo); font-weight: 400;
  font-size: 24px; line-height: 1.1; color: var(--marca-escura);
}
.historia-cartao-vinho .historia-cartao-forte { color: var(--marca-primaria-alt); font-size: 18px; }
.historia-cartao-texto { margin: 0; font-size: 13px; color: var(--marca-suave); }
.historia-cartao-vinho .historia-cartao-texto { color: color-mix(in srgb, var(--fundo-alt) 78%, transparent); }

@media (max-width: 900px) {
  .historia { grid-template-columns: 1fr; gap: 32px; margin-top: 60px; }
  .historia-col-deslocada { padding-top: 0; }
}

/* ============================================================
   CONCIERGE — atendimento humano no WhatsApp
   ============================================================ */
.concierge {
  position: relative; overflow: hidden;
  margin: var(--espaco-4xl) auto 0;
  max-width: calc(var(--largura-max) - 2 * var(--margem-lateral));
  background: var(--marca-vinho); color: var(--fundo-alt);
  border-radius: var(--raio-md);
  padding: var(--espaco-3xl) var(--margem-lateral);
  text-align: center;
}
/* Flor gigante desbotada no canto — marca-d'agua. */
.concierge-marca {
  position: absolute; right: -60px; bottom: -70px;
  width: 300px; height: 300px; color: var(--marca-primaria-alt);
  opacity: .12; pointer-events: none;
}
.concierge-conteudo { position: relative; z-index: 1; max-width: 46rem; margin: 0 auto; }
.concierge-selo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; margin-bottom: 14px;
  border-radius: 50%; color: var(--marca-primaria-alt);
  background: color-mix(in srgb, var(--marca-primaria-alt) 14%, transparent);
}
.concierge-selo svg { width: 24px; height: 24px; }
.concierge-eyebrow { color: var(--marca-primaria-alt); margin: 0 0 14px; }
.concierge-frase {
  margin: 0 0 16px; font-family: var(--fonte-titulo); font-weight: 400;
  font-size: clamp(24px, 3.4vw, 38px); line-height: 1.28;
  letter-spacing: -.01em; color: var(--fundo-alt);
}
.concierge-texto {
  margin: 0 auto var(--espaco-xl); max-width: 34rem;
  font-size: 14.5px; line-height: 1.7;
  color: color-mix(in srgb, var(--fundo-alt) 80%, transparent);
}
.concierge-btn {
  background: var(--marca-primaria); color: var(--marca-escura);
  border-color: var(--marca-primaria);
}
.concierge-btn:hover { background: var(--marca-primaria-alt); border-color: var(--marca-primaria-alt); }
@media (max-width: 767px) {
  .concierge { border-radius: 0; padding: var(--espaco-2xl) var(--margem-lateral); }
}

/* --- Newsletter ---------------------------------------------- */
.newsletter { text-align: center; margin-top: 100px; }
.titulo-newsletter { font-family: var(--fonte-titulo); font-weight: 300; font-size: clamp(28px, 4vw, 40px); margin: 0 0 12px; }
.newsletter-form { display: flex; gap: 12px; max-width: 480px; margin: 26px auto 0; }
.newsletter-form input {
  flex: 1; font-family: var(--fonte-corpo); font-size: 16px; color: var(--marca-escura);
  background: transparent; padding: 14px 18px; border-radius: var(--raio-md);
  border: 1px solid color-mix(in srgb, var(--marca-escura) 22%, transparent);
}
@media (max-width: 560px) { .newsletter-form { flex-direction: column; } }

/* --- Rodapé -------------------------------------------------- */
.rodape-titulo { font-family: var(--fonte-ui); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--marca-suave); margin: 0 0 16px; }
.rodape-lista { list-style: none; padding: 0; margin: 0; font-size: 14px; line-height: 2.1; color: var(--marca-media); }
.rodape-lista a { color: var(--marca-media); }
.rodape-lista a:hover { color: var(--marca-realce); }
.rodape-base {
  max-width: 1280px; margin: 0 auto; padding: 22px 32px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-size: 12px; color: var(--marca-suave);
  border-top: 1px solid color-mix(in srgb, var(--marca-escura) 12%, transparent);
}

.rodape-legal { font-size: 12px; color: var(--marca-suave); margin: 14px 0 0; }

/* Pagamento e seguranca: pastilhas de texto, sem logo de bandeira
   ate o meio de pagamento estar de fato ligado. */
.rodape-confianca {
  max-width: 1280px; margin: 0 auto; padding: 26px 32px 28px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px 40px;
  border-top: 1px solid color-mix(in srgb, var(--marca-escura) 12%, transparent);
}
.rodape-pastilhas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.rodape-pastilha {
  font-family: var(--fonte-ui); font-size: 12px; color: var(--marca-media);
  padding: 6px 12px; border-radius: var(--raio-pastilha);
  background: var(--superficie); border: 1px solid var(--borda-quente);
}

/* WhatsApp de suporte, canto inferior direito. Some quando uma
   gaveta abre (body.gaveta-aberta, ver travarRolagem). */
.zap-flutuante {
  position: fixed; right: 20px; bottom: 20px; z-index: 40;
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 12px 16px 12px 14px; border-radius: 999px;
  font-family: var(--fonte-ui); font-size: 13px; font-weight: 500;
  color: var(--fundo); background: var(--marca-escura);
  border: 1px solid color-mix(in srgb, var(--marca-primaria) 40%, transparent);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--marca-escura) 28%, transparent);
  transition: transform var(--mov-rapido) var(--curva), background var(--mov-rapido) var(--curva);
}
.zap-flutuante:hover { transform: translateY(-2px); background: var(--marca-vinho); }
.zap-flutuante svg { width: 20px; height: 20px; display: block; }
.gaveta-aberta .zap-flutuante { display: none; }

@media (max-width: 767px) {
  .rodape-confianca { grid-template-columns: 1fr; padding: 22px 20px; }
  .zap-flutuante { right: 14px; bottom: 14px; padding: 12px; }
  .zap-flutuante span { display: none; }   /* so o icone no celular */
}

/* --- Sacola: topo e linhas ----------------------------------- */
.sacola-topo {
  display: flex; align-items: center; justify-content: space-between;
  padding: 24px 28px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--marca-escura) 14%, transparent);
}
.sacola-linha { display: flex; justify-content: space-between; font-size: 14px; color: var(--marca-suave); margin-bottom: 8px; }
.sacola-frete { font-size: 13px; color: var(--marca-detalhe); margin: 0 0 20px; }
.sacola-nota { font-size: 11.5px; color: var(--marca-suave); text-align: center; margin: 12px 0 0; }

/* --- Menu mobile --------------------------------------------- */
@media (max-width: 768px) {
  /* Sem espaco para centrar a logo: volta a fileira simples —
     hamburguer a ESQUERDA (onde a mao alcanca e onde toda loja o
     poe), logo em seguida, favoritos e sacola no canto oposto. */
  .topo { position: relative; }
  .topo-interno {
    display: flex; align-items: center; gap: 8px;
    padding: 14px 16px; flex-wrap: nowrap;
  }
  .menu-toggle { display: block; order: -1; flex: none; }
  .logo { order: 0; min-width: 0; margin-right: auto; }
  .topo-acoes { order: 1; }

  .menu {
    order: 2;
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0; background: var(--fundo);
    border-bottom: 1px solid color-mix(in srgb, var(--marca-escura) 14%, transparent);
    padding: 8px 20px 16px;
  }
  body.menu-aberto .menu { display: flex; }
  .menu a { padding: 14px 0; border-bottom: 1px solid color-mix(in srgb, var(--marca-escura) 8%, transparent); }

  .logo-flor { width: 26px; height: 26px; }
  .logo-nome { font-size: 18px; letter-spacing: .06em; }

  /* Em 390px nao ha largura para o campo crescer entre os icones:
     aberto, ele desce em faixa inteira abaixo do topo, como o menu. */
  .topo-icone { width: 38px; height: 38px; }
  .topo-busca.aberta input {
    position: absolute; top: 100%; left: 0; right: 0;
    width: auto; margin: 0; padding: 13px 16px;
    border: 0; border-bottom: 1px solid var(--borda-quente);
    border-radius: 0; z-index: 5;
  }
}

/* ============================================================
   MODAL — guia de medidas (injetado por js/loja.js)
   ============================================================ */
.modal {
  position: fixed; z-index: 60;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px);
  display: flex; flex-direction: column;
  background: var(--fundo); border-radius: var(--raio-lg);
  box-shadow: 0 20px 60px color-mix(in srgb, var(--marca-escura) 26%, transparent);
}
.modal-topo {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 26px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--marca-escura) 14%, transparent);
}
.modal-corpo {
  padding: 20px 26px 28px;
  padding-bottom: max(28px, calc(env(safe-area-inset-bottom) + 16px));
  overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.tabela-scroll { overflow-x: auto; margin-top: 18px; }
.tabela-medidas { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela-medidas th, .tabela-medidas td {
  padding: 11px 10px; text-align: left;
  border-bottom: 1px solid color-mix(in srgb, var(--marca-escura) 10%, transparent);
}
.tabela-medidas thead th {
  font-family: var(--fonte-ui); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--marca-suave); font-weight: 400;
}
.tabela-medidas tbody th { font-family: var(--fonte-ui); color: var(--marca-escura); font-weight: 600; }
.tabela-medidas td { color: var(--marca-media); white-space: nowrap; }

.lista-medir { margin: 12px 0 0; padding-left: 18px; font-size: 14px; line-height: 1.9; color: var(--marca-media); }

.link-medidas {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--fonte-ui); font-size: 11.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--marca-detalhe);
  text-decoration: underline; text-underline-offset: 4px;
}
.link-medidas:hover { color: var(--marca-realce); }
.link-rodape {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: inherit; font-size: 14px; color: var(--marca-media); text-align: left;
}
.link-rodape:hover { color: var(--marca-realce); }

.catalogo-acoes { display: flex; align-items: baseline; gap: 18px; }

/* ============================================================
   PÁGINA DE PRODUTO
   ============================================================ */
.migalhas { font-size: 12px; color: var(--marca-suave); margin-bottom: 28px; }
.migalhas a { color: var(--marca-suave); }
.migalhas a:hover { color: var(--marca-realce); }

.pdp { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: start; }

.pdp-galeria { display: grid; grid-template-columns: 76px 1fr; gap: 14px; }
.pdp-miniaturas { display: flex; flex-direction: column; gap: 10px; }
.pdp-mini {
  padding: 0; cursor: pointer; background: none; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--marca-escura) 14%, transparent);
  border-radius: var(--raio-md); aspect-ratio: var(--proporcao-foto);
}
.pdp-mini img { width: 100%; height: 100%; object-fit: cover; }
.pdp-mini[aria-pressed="true"] { border-color: var(--marca-primaria); border-width: 2px; }

.pdp-foto-principal {
  position: relative; aspect-ratio: var(--proporcao-foto);
  background: var(--superficie); border-radius: var(--raio-md); overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--marca-escura) 12%, transparent);
}
.pdp-foto-principal img { width: 100%; height: 100%; object-fit: cover; }

.titulo-pdp {
  font-family: var(--fonte-titulo); font-weight: 300;
  font-size: clamp(30px, 3.6vw, 46px); line-height: 1.08; margin: 6px 0 8px;
  color: var(--marca-escura);
}
.pdp-preco { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-top: 22px; }
.pdp-preco-valor { font-size: 27px; color: var(--marca-escura); }
.pdp-preco-pix { font-size: 14px; color: var(--marca-detalhe); }
.pdp-parcela { font-size: 13px; color: var(--marca-suave); margin: 5px 0 28px; }

.pdp-tamanhos-topo {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin-bottom: 10px;
}
.pdp-tamanho { width: 52px; height: 46px; }
.pdp-aviso { font-size: 13px; color: var(--marca-realce); margin: 0 0 12px; }

/* "Recomendamos o M para voce" — abaixo dos tamanhos. */
.pdp-recomendacao {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font-size: 13.5px; color: var(--marca-media); margin: 2px 0 14px;
}
.pdp-recomendacao strong { color: var(--marca-escura); font-weight: 600; }
.pdp-recomendacao em { font-style: normal; color: var(--marca-suave); font-size: 12.5px; }

/* --- Qual e o meu tamanho? (dentro do modal de medidas) -------- */
.medidas-form {
  padding: 18px 18px 16px; margin-bottom: 8px;
  background: color-mix(in srgb, var(--marca-primaria) 10%, var(--fundo-alt));
  border: 1px solid color-mix(in srgb, var(--marca-primaria) 30%, transparent);
  border-radius: var(--raio-md);
}
.medidas-campos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.medidas-campos-2 { grid-template-columns: repeat(2, 1fr); }
.medidas-campos .ident-campo input { padding: 10px 12px; width: 100%; box-sizing: border-box; }
.medidas-ou {
  font-family: var(--fonte-ui); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--marca-suave); text-align: center; margin: 12px 0 8px;
}
.medidas-acoes { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 4px; }
.medidas-resultado:not(:empty) {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--marca-primaria) 30%, transparent);
}
.medidas-resultado-titulo { font-size: 16px; color: var(--marca-escura); margin: 0 0 6px; }
.medidas-resultado-titulo strong { font-size: 24px; font-weight: 600; margin-left: 4px; }
.medidas-resultado .card-legenda { margin: 4px 0 0; }

@media (max-width: 480px) {
  .medidas-campos { grid-template-columns: 1fr 1fr; }
  .medidas-campos-2 { grid-template-columns: 1fr 1fr; }
}

/* "Adicionar a sacola" ocupa a linha; o coracao e um quadrado ao
   lado, mesma altura. */
.pdp-comprar { display: flex; gap: 10px; align-items: stretch; }
.pdp-fav {
  flex: none; width: 52px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--marca-mocha);
  background: var(--superficie); border: 1px solid var(--borda-quente);
  border-radius: var(--raio-controle);
  transition: color var(--mov-rapido) var(--curva),
              border-color var(--mov-rapido) var(--curva);
}
.pdp-fav:hover { color: var(--marca-vinho); border-color: var(--marca-vinho); }
.pdp-fav svg { display: block; }
.pdp-fav svg path { fill: none; }
.pdp-fav.ativo { color: var(--marca-vinho); border-color: var(--marca-vinho); }
.pdp-fav.ativo svg path { fill: currentColor; }

.pdp-descricao { font-size: 15.5px; line-height: 1.8; color: var(--marca-media); margin: 30px 0 0; }

.pdp-ficha {
  margin: 26px 0 22px; padding-top: 22px;
  border-top: 1px solid color-mix(in srgb, var(--marca-escura) 12%, transparent);
}
.pdp-ficha dt {
  font-family: var(--fonte-ui); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--marca-suave); margin-top: 16px;
}
.pdp-ficha dt:first-child { margin-top: 0; }
.pdp-ficha dd { margin: 5px 0 0; font-size: 14.5px; line-height: 1.7; color: var(--marca-media); }

.produto-erro { text-align: center; padding: 80px 0; }

/* Tamanho por parte (conjunto): uma linha de botoes por peca, com
   o nome da peca em cima. Peca unica nao tem rotulo. */
.pdp-parte { margin-bottom: 12px; }
.pdp-parte-rotulo {
  display: block; font-family: var(--fonte-ui); font-size: 12px;
  color: var(--marca-media); margin-bottom: 6px;
}
.pdp-parte .tamanhos { margin-bottom: 0; }

/* Quantidade entra na mesma linha do botao de compra, com a mesma
   altura do coracao. */
.pdp-qtd {
  margin-top: 0; flex: none; gap: 4px;
  border: 1px solid var(--borda-quente); border-radius: var(--raio-controle);
  background: var(--superficie); padding: 0 4px;
}
.pdp-qtd .tamanho { border: none; background: none; width: 34px; height: 44px; }
.pdp-qtd .num { min-width: 24px; }

/* Secoes abaixo do produto: medidas, avaliacoes, relacionados. */
.pdp-secao { padding-top: 64px; }
.pdp-secao-intro { max-width: 60ch; margin: -8px 0 4px; }
.pdp-secao .tabela-scroll { margin-top: 14px; }

.pdp-avaliacoes { max-width: 60ch; }
.pdp-nota { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.pdp-nota-valor { font-size: 40px; color: var(--marca-escura); line-height: 1; }
.pdp-nota-estrelas { color: var(--marca-primaria); letter-spacing: .1em; font-size: 16px; }
.pdp-nota-legenda { font-size: 13px; color: var(--marca-suave); }

/* --- Trilho: grade que rola de lado, com setas ------------------
   scroll-snap faz o card parar na borda; as setas so empurram uma
   janela (ver loja.js). Sem biblioteca. Serve para "Combina com" e,
   depois, para a aba de colecoes. */
.trilho-janela { position: relative; }
.trilho {
  display: flex; gap: 20px; overflow-x: auto;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  padding: 4px 0 8px; margin: 0 -4px; padding-left: 4px;
}
.trilho::-webkit-scrollbar { display: none; }
.trilho-item {
  flex: 0 0 calc((100% - 3 * 20px) / 4);
  scroll-snap-align: start;
}
.trilho-item .preco { margin-top: 6px; }
.preco-pix-mini { font-size: 12px; color: var(--marca-detalhe); }

.trilho-seta {
  position: absolute; top: 34%; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--marca-escura); background: var(--fundo);
  border: 1px solid var(--borda-quente);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--marca-escura) 14%, transparent);
  transition: color var(--mov-rapido) var(--curva), border-color var(--mov-rapido) var(--curva);
}
.trilho-seta:hover { color: var(--marca-realce); border-color: var(--marca-primaria); }
.trilho-seta-ant { left: -20px; }
.trilho-seta-prox { right: -20px; }

.card-link { display: block; color: inherit; }
.card-link:hover .card-moldura { border-color: var(--marca-primaria); }
.card-link:hover .titulo-card { color: var(--marca-realce); }

@media (max-width: 1100px) {
  .trilho-item { flex-basis: calc((100% - 2 * 20px) / 3); }
}
@media (max-width: 900px) {
  .pdp { grid-template-columns: 1fr; gap: 30px; }
  .trilho-seta { display: none; }   /* no toque, o dedo rola */
  .trilho-item { flex-basis: calc((100% - 20px) / 2.3); }
}
@media (max-width: 600px) {
  .pdp-galeria { grid-template-columns: 1fr; }
  .pdp-miniaturas { flex-direction: row; overflow-x: auto; order: 2; }
  .pdp-mini { width: 68px; flex: 0 0 auto; }
  .pdp-comprar { flex-wrap: wrap; }
  .pdp-qtd { order: 1; }
  .pdp-fav { order: 2; }
  .pdp-comprar .btn-largo { order: 3; width: 100%; }
  .pdp-secao { padding-top: 48px; }
  .trilho { gap: 14px; }
  .trilho-item { flex-basis: calc((100% - 14px) / 1.6); }
  .modal { width: 100vw; max-height: 88dvh; top: auto; bottom: 0;
           transform: none; left: 0; border-radius: var(--raio-lg) var(--raio-lg) 0 0; }
}

/* ============================================================
   PÁGINA DE POLÍTICAS
   ============================================================ */
.politicas-indice {
  display: flex; gap: 22px; flex-wrap: wrap; margin: 22px 0 42px;
  padding-bottom: 18px;
  border-bottom: 1px solid color-mix(in srgb, var(--marca-escura) 14%, transparent);
  font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
}

.politica { max-width: 68ch; margin: 0 0 54px; }
.politica h3 {
  font-family: var(--fonte-ui); font-size: 11.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--marca-suave);
  margin: 30px 0 10px;
}
.politica > h2 + h3 { margin-top: 22px; }
.politica p,
.politica li { font-size: 15.5px; line-height: 1.8; color: var(--marca-media); }
.politica p { margin: 0 0 14px; }
.politica ul { margin: 0 0 14px; padding-left: 20px; }
.politica li { margin-bottom: 8px; }
.politica strong { color: var(--marca-escura); }

.politicas-rodape {
  margin-top: 50px; padding-top: 22px;
  border-top: 1px solid color-mix(in srgb, var(--marca-escura) 12%, transparent);
  font-size: 13px; color: var(--marca-suave); line-height: 1.7;
}

/* Âncora não pode parar debaixo do header fixo */
.politica { scroll-margin-top: 90px; }

/* ============================================================
   CAMADA DE INTERAÇÃO — como a loja responde ao toque
   ------------------------------------------------------------
   Antes desta camada a loja tinha UMA transição em todo o CSS:
   cada hover trocava de cor num piscar. O que muda aqui é só
   comportamento — forma de controle, foco, e movimento curto que
   confirma a ação. Nenhuma cor nova: tudo sai dos tokens.

   Movimento, raio e sombra vêm de tema.css, os mesmos que o
   painel usa. Site e admin reagem igual.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto !important; }
}

/* O menu leva a âncoras na mesma página: o salto seco perde o
   leitor, a rolagem suave mantém a noção de onde ele está. */
html { scroll-behavior: smooth; }

/* --- Foco visível ------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: none;
  box-shadow: var(--foco);
  border-radius: var(--raio-controle);
}

/* --- Botões ------------------------------------------------- */
.btn {
  border-radius: var(--raio-controle);
  box-shadow: var(--sombra-controle);
  transition: background var(--mov-rapido) var(--curva),
              color var(--mov-rapido) var(--curva),
              border-color var(--mov-rapido) var(--curva),
              transform var(--mov-rapido) var(--curva),
              box-shadow var(--mov-rapido) var(--curva);
}

.btn:hover { box-shadow: var(--sombra-flutuante); }
.btn:active { transform: translateY(.5px); box-shadow: none; }

/* --- Menu: sublinhado que cresce a partir do centro ---------- */
.menu a {
  position: relative;
  transition: color var(--mov-rapido) var(--curva);
}

.menu a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -5px;
  height: 1px;
  background: var(--marca-primaria);
  transform: scaleX(0);
  transition: transform var(--mov-normal) var(--curva);
}

.menu a:hover::after { transform: scaleX(1); }

/* --- Card de produto ---------------------------------------- */
.card-moldura {
  transition: border-color var(--mov-normal) var(--curva),
              box-shadow var(--mov-normal) var(--curva),
              transform var(--mov-normal) var(--curva);
}

.card-link:hover .card-moldura,
.colecao:hover .card-moldura {
  box-shadow: var(--sombra-flutuante);
  transform: translateY(-2px);
}

/* A foto cresce dentro da moldura, que já tem overflow escondido:
   a imagem se aproxima sem que o card mude de tamanho. */
.card-foto img,
.historia-foto img,
.hero-foto img {
  transition: transform var(--mov-lento) var(--curva);
}

.card-link:hover .card-foto img,
.colecao:hover .card-foto img { transform: scale(1.045); }

.titulo-card { transition: color var(--mov-rapido) var(--curva); }

/* --- Filtros, tamanhos e miniaturas -------------------------- */
.filtro,
.tamanho,
.pdp-mini {
  transition: background var(--mov-rapido) var(--curva),
              border-color var(--mov-rapido) var(--curva),
              color var(--mov-rapido) var(--curva),
              transform var(--mov-rapido) var(--curva);
}

.filtro:active,
.tamanho:active,
.pdp-mini:active { transform: translateY(.5px); }

.filtro, .tamanho { border-radius: var(--raio-controle); }

/* --- Links de texto ------------------------------------------ */
.rodape-lista a,
.link-rodape,
.link-medidas,
.link-remover,
.migalhas a { transition: color var(--mov-rapido) var(--curva); }

/* --- Sacola e modal: entrada -------------------------------- */
/* Só a entrada é animada. A saída acontece na hora, porque o
   elemento volta a `hidden` — animar isso exigiria segurar o
   fechamento no JS, e não vale o custo. */
.sacola:not([hidden]) {
  animation: yzEntraDireita var(--mov-normal) var(--curva);
}

.sacola-fundo:not([hidden]) {
  animation: yzSurge var(--mov-normal) var(--curva);
}

.modal:not([hidden]) {
  animation: yzModalEntra var(--mov-normal) var(--curva);
}

.modal { box-shadow: var(--sombra-alta); }

@keyframes yzEntraDireita {
  from { transform: translateX(28px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

@keyframes yzSurge {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Escala parte de 96%: o cartão "chega" em vez de aparecer. O
   translate do centro precisa ser repetido, senão a animação
   sobrescreve o posicionamento do modal. */
@keyframes yzModalEntra {
  from { transform: translate(-50%, -50%) scale(.96); opacity: 0; }
  to   { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

/* ============================================================
   IDENTIFICAÇÃO NO CHECKOUT
   ------------------------------------------------------------
   Vive dentro da sacola, no lugar da lista de itens. Nada de
   página nova: sair do fluxo para preencher formulário é onde
   se perde venda.
   ============================================================ */
.ident {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 8px 0 24px;
}

.ident-titulo {
  font-family: var(--fonte-titulo);
  font-weight: 300;
  font-size: 21px;
  margin: 0;
}

.ident-legenda {
  margin: -8px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--marca-suave);
}

.ident-campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--fonte-ui);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--marca-suave);
}

.ident-campo input,
.ident-campo select {
  font-family: var(--fonte-corpo);
  font-size: 16px;   /* 16px evita o zoom automático do iOS ao focar */
  letter-spacing: 0;
  text-transform: none;
  color: var(--marca-escura);
  background: var(--superficie);
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--marca-escura) 20%, transparent);
  border-radius: var(--raio-controle);
  transition: border-color var(--mov-rapido) var(--curva),
              box-shadow var(--mov-rapido) var(--curva);
}

.ident-campo input:focus,
.ident-campo select:focus {
  outline: none;
  border-color: var(--marca-primaria);
  box-shadow: var(--foco);
}

/* A isca de robô precisa sumir da tela sem sumir do formulário:
   display:none faria o robô ignorá-la também. */
.ident-isca {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.ident-aceite {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--marca-media);
}

.ident-aceite input {
  margin-top: 2px;
  width: 17px;
  height: 17px;
  flex: none;
  accent-color: var(--marca-primaria);
}

.ident-aceite a { color: var(--marca-realce); text-decoration: underline; }

.ident-erro {
  min-height: 1.2em;
  margin: 0;
  font-size: 13px;
  color: #A8402C;
}

.ident-voltar {
  align-self: center;
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 13px;
}


/* ============================================================
   BARRA DE ANUNCIO
   ------------------------------------------------------------
   Quatro vantagens, uma por vez, em rodizio de CSS puro. Sem JS:
   a barra e a primeira coisa que pinta na tela e nao pode esperar
   script. A pista tem 4 itens de 38px e anda de 38 em 38.
   ============================================================ */
.anuncio {
  background: var(--marca-escura); color: var(--fundo);
  overflow: hidden; height: 38px;
}
.anuncio-pista {
  display: flex; flex-direction: column; margin: 0; padding: 0;
  list-style: none;
  animation: anuncio-gira 12s infinite;
}
/* Fluxo inline, NAO flex. Em container flex o texto solto e o
   <span class="num"> viram dois itens separados, e o espaco entre
   eles e descartado: saia "ACIMA DER$ 299". line-height igual a
   altura centraliza sem precisar de flex. */
.anuncio-pista li {
  height: 38px; line-height: 38px;
  font-family: var(--fonte-ui); font-size: 11.5px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; text-align: center;
  padding: 0 var(--margem-lateral);
}
.anuncio .num { color: var(--marca-primaria-alt); }

/* Tres frases: cada uma para 3s e desliza em 1s. O ultimo passo
   volta ao topo, entao o ciclo fecha sem salto. */
@keyframes anuncio-gira {
   0%,25% { transform: translateY(0); }
  33%,58% { transform: translateY(-38px); }
  66%,91% { transform: translateY(-76px); }
    100%  { transform: translateY(-114px); }
}

/* Quem pediu menos movimento ve as quatro paradas, lado a lado.
   A informacao e util demais para simplesmente sumir. */
@media (prefers-reduced-motion: reduce) {
  .anuncio { height: auto; }
  .anuncio-pista {
    flex-direction: row; flex-wrap: wrap; justify-content: center;
    animation: none;
  }
  .anuncio-pista li { height: auto; line-height: 1.4; padding: 10px 18px; }
  /* Sem rodizio nao ha loop para fechar: a copia da primeira
     mensagem so apareceria repetida no fim da fila. */
  .anuncio-pista li[aria-hidden] { display: none; }
}

/* ============================================================
   PILARES - as quatro objecoes antes da compra
   ============================================================ */
.pilares {
  max-width: var(--largura-max); margin: 0 auto;
  padding: var(--espaco-3xl) var(--margem-lateral) 0;
}
.pilares-grade {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--espaco-xl); margin: 0; padding: var(--espaco-xl) 0;
  list-style: none;
  border-top: 1px solid var(--borda-quente);
  border-bottom: 1px solid var(--borda-quente);
}
.pilar-icone { width: 26px; height: 26px; color: var(--marca-primaria); display: block; }
.pilar-titulo {
  font-family: var(--fonte-titulo); font-weight: 500; font-size: 18px;
  margin: 14px 0 5px; color: var(--marca-escura);
}
.pilar-texto { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--marca-suave); }

/* ============================================================
   COMPRE POR USO
   ------------------------------------------------------------
   Nao e o card de produto: aqui a foto e alta e o texto explica
   PARA QUE serve a categoria. O card de produto responde "qual
   peca"; este responde "por onde eu comeco".
   ============================================================ */
.grade-uso {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--espaco-xl);
}
/* A .uso E a moldura: foto ao fundo, todo o texto por cima, sobre
   um veu que sobe do rodape. Sem o veu, texto claro sobre foto
   clara some em metade das fotos — e a foto vai trocar. */
.uso {
  position: relative; display: block; color: inherit; text-decoration: none;
  aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: var(--raio-md); background: var(--fundo-alt);
}
.uso > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--mov-lento) var(--curva);
}
.uso:hover > img { transform: scale(1.04); }
.uso::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top,
    color-mix(in srgb, var(--marca-escura) 90%, transparent) 0%,
    color-mix(in srgb, var(--marca-escura) 55%, transparent) 30%,
    transparent 58%);
}
.uso-conteudo {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: 24px 22px 26px; color: #fff;
}
.uso-eyebrow {
  display: block; margin-bottom: 12px;
  font-family: var(--fonte-ui); font-size: 10.5px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--marca-primaria-alt);
}
.uso-titulo {
  font-family: var(--fonte-titulo); font-weight: 400; font-size: 28px;
  letter-spacing: -.015em; margin: 0 0 6px; color: #fff;
}
.uso-texto {
  margin: 0 0 14px; font-size: 14px; line-height: 1.55;
  color: color-mix(in srgb, #fff 82%, transparent); max-width: 42ch;
}
.uso-link {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--fonte-ui); font-size: 11.5px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: #fff;
}
.uso-link svg { transition: transform var(--mov-normal) var(--curva); }
.uso:hover .uso-link svg { transform: translateX(4px); }

/* ============================================================
   PROVA - depoimento com medida do corpo
   ============================================================ */
.prova-grade {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--espaco-xl); margin: 0; padding: 0; list-style: none;
}
/* Cabecalho da secao com a nota agregada a direita. */
.prova-cabecalho { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--espaco-md); flex-wrap: wrap; }
.prova-agregado {
  margin: 0; display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--fonte-ui); font-size: 12.5px; color: var(--marca-mocha);
}
.prova-agregado .prova-estrelas { color: var(--marca-primaria); letter-spacing: .12em; }
.prova-agregado .num { color: var(--marca-escura); font-weight: 600; }
.prova-agregado-conta { color: var(--marca-taupe); }

.depo {
  background: var(--superficie); border: 1px solid var(--borda-quente);
  border-radius: var(--raio-md); padding: var(--espaco-lg);
  display: flex; flex-direction: column; gap: 14px;
}
.depo-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.depo-nota { margin: 0; color: var(--marca-primaria); font-size: 14px; letter-spacing: .18em; }
.depo-selo {
  font-family: var(--fonte-ui); font-size: 9.5px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--marca-mocha);
  background: color-mix(in srgb, var(--marca-primaria) 12%, var(--fundo));
  border: 1px solid color-mix(in srgb, var(--marca-primaria) 28%, transparent);
  border-radius: var(--raio-pastilha); padding: 4px 9px; white-space: nowrap;
}
.depo-texto {
  margin: 0; font-family: var(--fonte-titulo); font-size: 19px;
  line-height: 1.5; color: var(--marca-escura);
}
/* margin-top:auto alinha a assinatura no rodape do cartao mesmo
   quando um depoimento e mais curto que o vizinho. */
.depo-quem {
  margin: auto 0 0; display: flex; align-items: center; gap: 12px;
  font-size: 12.5px; color: var(--marca-suave);
  padding-top: 14px; border-top: 1px solid var(--borda-quente);
}
.depo-avatar {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--fonte-titulo); font-size: 14px; font-weight: 500;
  color: var(--marca-escura);
  background: color-mix(in srgb, var(--marca-primaria) 16%, var(--fundo));
}
.depo-quem-linhas { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.depo-quem strong { color: var(--marca-escura); font-weight: 600; }
.depo-corpo { color: var(--marca-mocha); }
.depo-local { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--marca-taupe); }

/* ============================================================
   ORIGEM - faixa em vinho, contraste de prestigio
   ============================================================ */
.origem {
  /* Alinha com o CONTEUDO das secoes, nao com a borda da pagina:
     .secao tem largura-max mais o padding lateral, entao usar
     largura-max aqui deixaria a faixa mais larga que o texto. */
  margin: var(--espaco-4xl) auto 0;
  max-width: calc(var(--largura-max) - 2 * var(--margem-lateral));
  background: var(--marca-vinho); color: var(--fundo);
  display: flex; align-items: center; justify-content: center;
  gap: var(--espaco-3xl); padding: var(--espaco-2xl) var(--margem-lateral);
  border-radius: var(--raio-md); text-align: center;
}
.origem-fio { width: 1px; align-self: stretch; background: rgba(248,245,238,.22); }
.origem-numero {
  margin: 0 0 6px; font-family: var(--fonte-titulo); font-weight: 400;
  font-size: 34px; line-height: 1.1; color: var(--marca-primaria-alt);
}
.origem-texto { margin: 0; font-size: 13.5px; color: rgba(248,245,238,.78); max-width: 30ch; }

/* --- Tablet -------------------------------------------------- */
@media (max-width: 1023px) {
  .pilares-grade { grid-template-columns: repeat(2, 1fr); gap: var(--espaco-lg); }
  .grade-uso, .prova-grade { grid-template-columns: 1fr 1fr; }
  /* Tres cartoes em duas colunas deixam o ultimo sozinho: ele
     ocupa a linha inteira em vez de ficar meia largura orfa. */
  .grade-uso .uso:last-child, .prova-grade .depo:last-child { grid-column: 1 / -1; }
  .grade-uso .uso:last-child { aspect-ratio: 16 / 9; }
}

/* --- Celular ------------------------------------------------- */
@media (max-width: 767px) {
  .pilares-grade { grid-template-columns: 1fr 1fr; }
  .grade-uso, .prova-grade { grid-template-columns: 1fr; }
  .grade-uso .uso:last-child { aspect-ratio: 4 / 5; }
  .uso-titulo { font-size: 24px; }
  .origem { flex-direction: column; gap: var(--espaco-lg); border-radius: 0; }
  .origem-fio { width: 60%; height: 1px; align-self: center; }
}


/* ============================================================
   CATALOGO - abertura editorial
   ------------------------------------------------------------
   A cliente chega aqui vinda da home, ja convencida da marca. A
   abertura confirma onde ela esta e entrega o que o hero da home
   deliberadamente nao entregou: a ficha e o preco logo abaixo.
   ============================================================ */
.cat-abertura {
  background: var(--fundo-alt);
  padding: var(--espaco-3xl) var(--margem-lateral);
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
  border-bottom: 1px solid var(--borda-quente);
}
.flor-marca { width: 30px; height: 30px; color: var(--marca-primaria); margin-bottom: 18px; }
.cat-abertura .eyebrow { margin: 0 0 12px; }
.cat-titulo {
  font-family: var(--fonte-titulo); font-weight: 400;
  font-size: clamp(34px, 4.6vw, 52px); line-height: 1.06;
  letter-spacing: -.02em; margin: 0 0 16px; color: var(--marca-escura);
  text-wrap: balance;
}
.cat-linha-fina {
  font-family: var(--fonte-titulo); font-style: italic;
  font-size: 19px; line-height: 1.5; color: var(--marca-media);
  max-width: 34ch; margin: 0 0 26px;
}
.cat-selos {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px; margin: 0; padding: 0; list-style: none;
}
.cat-selos li {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--superficie); border: 1px solid var(--borda-quente);
  border-radius: var(--raio-pastilha); padding: 7px 14px;
  font-size: 12.5px; color: var(--marca-media);
}
.cat-selos svg { color: var(--marca-primaria); flex: none; }

/* ============================================================
   CATALOGO - barra de filtros
   ------------------------------------------------------------
   Gruda abaixo do topo ao rolar. Numa grade longa, ter de voltar
   ao inicio da pagina para trocar de categoria e o que faz a
   cliente desistir de procurar.
   ============================================================ */
.cat-barra {
  position: sticky; top: 57px; z-index: 30;
  background: color-mix(in srgb, var(--fundo) 94%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--borda-quente);
}
.cat-barra-interna {
  max-width: var(--largura-max); margin: 0 auto;
  padding: 12px var(--margem-lateral);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--espaco-md); flex-wrap: wrap;
}
.cat-ferramentas { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Todo controle da barra tem a MESMA altura. Pastilha de
   categoria, busca, tamanho, ordem e guia sao a mesma familia de
   controle: alturas diferentes na mesma fileira leem como
   desalinhamento, mesmo estando centradas. */
.cat-barra .filtro,
.cat-barra .campo-busca,
.cat-barra .campo-ordem,
.cat-barra .filtro-tamanho,
.cat-barra .btn-medidas {
  min-height: 38px; box-sizing: border-box;
}

/* Pastilha de categoria: a ativa inverte, e o contador vive
   dentro dela. Contador fora da pastilha vira uma segunda coisa
   para o olho procurar. */
.filtros { display: flex; gap: 8px; flex-wrap: wrap; }
.filtro { display: inline-flex; align-items: center; gap: 8px; border-radius: var(--raio-pastilha); }
.filtro[aria-pressed="true"] {
  background: var(--marca-escura); color: var(--fundo); border-color: var(--marca-escura);
}
.filtro-conta {
  font-size: 10.5px; letter-spacing: 0; padding: 2px 6px;
  border-radius: 999px; background: color-mix(in srgb, var(--marca-escura) 8%, transparent);
  color: var(--marca-mocha);
}
.filtro[aria-pressed="true"] .filtro-conta {
  background: rgba(248,245,238,.18); color: var(--fundo);
}

.campo-busca, .campo-ordem {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--superficie); border: 1px solid var(--borda-quente);
  border-radius: var(--raio-pastilha); padding: 7px 12px;
  color: var(--marca-taupe);
}
.campo-busca:focus-within, .campo-ordem:focus-within { box-shadow: var(--foco); }
.campo-busca input, .campo-ordem select {
  border: 0; background: transparent; outline: none;
  font-family: var(--fonte-ui); font-size: 12.5px; color: var(--marca-escura);
}
.campo-busca input { width: 108px; }
.campo-busca input::placeholder { color: var(--marca-taupe); }
.campo-ordem select { cursor: pointer; }

.filtro-tamanho {
  display: inline-flex; align-items: center; gap: 3px;
  background: var(--superficie); border: 1px solid var(--borda-quente);
  border-radius: var(--raio-pastilha); padding: 4px 6px;
}
.filtro-tamanho-rotulo {
  font-family: var(--fonte-ui); font-size: 10px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--marca-taupe); padding: 0 5px;
}
.tam-chip {
  border: 0; background: transparent; cursor: pointer;
  font-family: var(--fonte-numero); font-size: 11.5px;
  min-width: 26px; height: 24px; padding: 0 6px;
  border-radius: 999px; color: var(--marca-media);
  transition: background var(--mov-rapido) var(--curva), color var(--mov-rapido) var(--curva);
}
.tam-chip:hover { background: color-mix(in srgb, var(--marca-primaria) 22%, transparent); }
.tam-chip[aria-pressed="true"] { background: var(--marca-escura); color: var(--fundo); }

.btn-medidas {
  display: inline-flex; align-items: center; gap: 7px;
  background: color-mix(in srgb, var(--marca-primaria) 14%, var(--fundo));
  border: 1px solid color-mix(in srgb, var(--marca-primaria) 34%, transparent);
  border-radius: var(--raio-pastilha); padding: 7px 13px; cursor: pointer;
  font-family: var(--fonte-ui); font-size: 12px; font-weight: 500;
  color: var(--marca-escura);
}
.btn-medidas:hover { background: color-mix(in srgb, var(--marca-primaria) 26%, var(--fundo)); }
.btn-medidas svg { color: var(--marca-mocha); flex: none; }

/* --- Linha de estado sobre a grade --------------------------- */
.cat-estado {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--espaco-md); flex-wrap: wrap; margin-bottom: var(--espaco-lg);
  padding-bottom: var(--espaco-sm); border-bottom: 1px solid var(--borda-quente);
}
.cat-estado-titulo {
  margin: 0; font-family: var(--fonte-titulo); font-size: 25px;
  color: var(--marca-escura);
}
.cat-estado-conta { font-family: var(--fonte-numero); font-size: 13.5px; color: var(--marca-taupe); }
.cat-estado-nota {
  margin: 0; display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--fonte-ui); font-size: 10.5px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--marca-mocha);
}
.cat-estado-nota .ponto {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--marca-primaria); flex: none;
}

/* ============================================================
   CARD DO CATALOGO
   ------------------------------------------------------------
   Mais denso que o da vitrine, de proposito: a vitrine convida, o
   catalogo faz COMPARAR. Familia, nota, cor, preco de tabela e
   parcela existem para a peca poder ser pesada contra a vizinha.
   ============================================================ */
.produto-rico {
  background: var(--superficie); border: 1px solid var(--borda-quente);
  border-radius: var(--raio-lg); padding: var(--espaco-sm);
  display: flex; flex-direction: column;
  transition: border-color var(--mov-normal) var(--curva),
              box-shadow var(--mov-normal) var(--curva);
}
.produto-rico:hover {
  border-color: color-mix(in srgb, var(--marca-primaria) 45%, transparent);
  box-shadow: var(--sombra-ambiente);
}
.produto-rico .card-moldura { background: none; border: 0; padding: 0; }

/* Os dois selos empilham no canto da foto. */
.badges { position: absolute; top: 12px; left: 12px; z-index: 2; display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.badges .badge { position: static; }

/* Coracao no canto oposto ao dos selos. Vazado por padrao;
   preenchido em vinho quando a peca esta nos favoritos. Vive
   dentro do <a> do card — o loja.js chama preventDefault. */
.card-fav {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; border: 0; cursor: pointer;
  border-radius: 999px; color: var(--marca-mocha);
  background: color-mix(in srgb, var(--fundo) 82%, transparent);
  backdrop-filter: blur(4px);
  transition: color var(--mov-rapido) var(--curva),
              transform var(--mov-rapido) var(--curva);
}
.card-fav:hover { color: var(--marca-vinho); }
.card-fav:active { transform: scale(.9); }
.card-fav svg { display: block; }
.card-fav svg path { fill: none; }
.card-fav.ativo { color: var(--marca-vinho); }
.card-fav.ativo svg path { fill: currentColor; }

/* Acoes de cada peca dentro da gaveta de favoritos. */
.favorito-acoes {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 8px; margin-top: 10px;
}
.badge-cor {
  background: color-mix(in srgb, var(--superficie) 88%, transparent);
  color: var(--marca-media); border-color: var(--borda-quente);
  backdrop-filter: blur(4px); letter-spacing: .06em; text-transform: none;
  font-size: 10.5px;
}

.card-familia {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin: 16px 0 5px;
  font-family: var(--fonte-ui); font-size: 10px; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase; color: var(--marca-mocha);
}
.card-nota {
  display: inline-flex; align-items: center; gap: 3px;
  color: var(--marca-primaria); letter-spacing: 0; flex: none;
}
.card-nota .num { color: var(--marca-escura); font-size: 11.5px; }
.produto-rico .titulo-card { margin: 0 0 4px; }

/* A legenda vira uma linha so: nome e preco tem de ficar na mesma
   altura de um card para o outro, senao a coluna deixa de ser
   comparavel - que e a unica funcao dela aqui. */
.produto-rico .card-legenda {
  margin: 0 0 14px;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* margin-top:auto encosta preco e botoes no rodape do card,
   alinhados entre si mesmo com nomes de uma ou duas linhas. */
.preco-bloco {
  margin-top: auto;
  background: color-mix(in srgb, var(--fundo-alt) 60%, transparent);
  border-radius: var(--raio-md); padding: 10px 12px; margin-bottom: 12px;
}
.preco-topo { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.preco-de {
  font-size: 12px; color: var(--marca-taupe); text-decoration: line-through;
}
.preco-parcela { font-size: 11.5px; color: var(--marca-suave); margin-top: 3px; }
.produto-rico .preco-pix { color: var(--marca-vinho); font-size: 12.5px; }

/* Pix como pastilha: a vantagem que converte, com peso proprio. */
.preco-pix-pill {
  display: inline-block; margin-top: 6px;
  font-size: 11.5px; font-weight: 500; letter-spacing: .02em;
  color: var(--marca-vinho);
  background: color-mix(in srgb, var(--marca-vinho) 10%, var(--fundo));
  border: 1px solid color-mix(in srgb, var(--marca-vinho) 22%, transparent);
  border-radius: var(--raio-pastilha); padding: 3px 9px;
}

.tamanhos-rotulo {
  display: block; margin: 2px 0 8px;
  font-family: var(--fonte-ui); font-size: 10px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--marca-taupe);
}

.card-acoes { display: flex; gap: 8px; }
.card-acoes .btn { flex: 1; padding: 11px 10px; }

/* Cards ricos: os dois botoes empilhados, largura cheia, com icone —
   como Alo/Vuori. */
.card-acoes-pilha { flex-direction: column; gap: 8px; }
.card-acoes-pilha .btn { width: 100%; }
.btn-com-icone {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-com-icone svg { flex: none; }

/* --- Grade vazia --------------------------------------------- */
.catalogo-vazio { grid-column: 1 / -1; }
.link-limpar {
  border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; color: var(--marca-detalhe); text-decoration: underline;
  text-underline-offset: 3px;
}
.link-limpar:hover { color: var(--marca-escura); }

/* Categoria e ferramentas cabem na MESMA linha ate 1200px. Em
   duas linhas a barra rouba 60px do alto da grade, e como ela
   gruda ao rolar esse custo se paga em toda a pagina. */
@media (min-width: 1200px) {
  .cat-barra-interna,
  .cat-ferramentas,
  .cat-barra .filtros { flex-wrap: nowrap; }
  .cat-barra .filtro { white-space: nowrap; padding: 11px 16px; }
  /* Aperto medido para as duas metades caberem lado a lado em
     1440px, que e a tela mais comum do Douglas. Abaixo de 1200 a
     regra nao vale e a barra volta a empilhar. */
  .cat-barra-interna { gap: 12px; }
  .cat-ferramentas { gap: 7px; }
  .campo-busca, .campo-ordem { padding: 7px 10px; }
  .campo-busca input { width: 62px; }
  .filtro-tamanho-rotulo { padding: 0 3px; }
  .tam-chip { min-width: 23px; padding: 0 4px; }
  .btn-medidas { padding: 7px 11px; }
}

/* --- Tablet -------------------------------------------------- */
@media (max-width: 1023px) {
  .cat-barra-interna { flex-direction: column; align-items: stretch; }
  /* Categorias rolam de lado em vez de quebrarem em duas fileiras:
     duas fileiras empurram a grade para fora da tela. */
  .filtros { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
  .filtros::-webkit-scrollbar { display: none; }
  .filtro { white-space: nowrap; flex: none; }
  .cat-ferramentas { justify-content: space-between; }
  .campo-busca { flex: 1; }
  .campo-busca input { width: 100%; }
}

/* --- Celular ------------------------------------------------- */
@media (max-width: 767px) {
  .cat-abertura { padding: var(--espaco-2xl) var(--margem-lateral); }
  .cat-linha-fina { font-size: 17px; }
  .cat-barra { top: 53px; }
  /* Alvo de toque: 24px de chip erra o dedo. */
  .tam-chip { min-width: 32px; height: 30px; }
  .filtro-tamanho { order: 3; width: 100%; justify-content: space-between; }
  .card-acoes { flex-direction: column; }
}