/* =========================================================
   Design tokens
   ========================================================= */
:root {
  --wine: #3a070f;
  --wine-2: #210408;
  --gold: #c6a35a;
  --gold-light: #e3cb91;
  --cream: #f2eadb;
  --ink: #211713;
  --muted: #72675e;
  --line: rgba(56,36,27,.18);
}


/* =========================================================
   Reset e base
   ========================================================= */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: Manrope,sans-serif;
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 99;
  pointer-events: none;
  opacity: .08;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
}


/* =========================================================
   Foco visível
   =========================================================
   Anel único para navegação por teclado. :focus-visible não
   dispara no clique de mouse, então não polui o visual.
   Dourado sobre fundo escuro (7:1) e vinho sobre fundo claro
   (>10:1); dourado sobre creme daria só 2:1 e reprovaria no
   mínimo de 3:1 da WCAG 1.4.11. */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.catalog :focus-visible,
.contact :focus-visible {
  outline-color: var(--wine);
}


/* =========================================================
   Cabeçalho / navegação
   ========================================================= */
.topbar {
  height: 92px;
  padding: 0 5vw;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  background: var(--wine-2);
  border-bottom: 1px solid rgba(198,163,90,.35);
  position: absolute;
  z-index: 10;
  width: 100%;
  color: #fff;
}

/* O arquivo do logo ja e quadrado, com a marca ocupando 91% da altura e o
   resto de margem — o mesmo enquadramento que o SVG antigo mostrava depois
   do corte (ver logo_do_site em tools/gerar-icones.py). O cover fica como
   rede: se o arquivo for trocado por um que nao seja quadrado, ele corta em
   vez de deformar.

   A altura da caixa manda no tamanho: 80px aqui devolve os mesmos ~73px de
   marca que o logo anterior tinha, dentro da barra de 92px. */
.brand img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  /* O SVG ja vem com fundo transparente, entao o screen nao existe mais para
     matar fundo escuro como no webp antigo — ele so devolve brilho ao
     dourado, que vem meio transparente da exportacao. */
  mix-blend-mode: screen;
}

.topbar nav {
  display: flex;
  gap: 2.4rem;
}

.topbar a {
  color: #ebdec8;
  text-decoration: none;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.topbar nav a {
  position: relative;
}

.topbar nav a:after {
  content: "";
  position: absolute;
  height: 1px;
  inset: auto 50% -8px;
  background: var(--gold);
  transition: .25s;
}

.topbar nav a:hover:after,
.topbar nav a:focus-visible:after {
  inset-inline: 0;
}

.menu-link {
  justify-self: end;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 6px;
}

.menu-link span {
  color: var(--gold);
  margin-left: 8px;
}


/* =========================================================
   Hero
   ========================================================= */
.hero {
  min-height: 770px;
  padding: 150px 8vw 70px;
  background: radial-gradient(circle at 74% 47%,#5b1420 0,transparent 28%),linear-gradient(128deg,var(--wine-2),var(--wine) 62%,#28060b);
  color: #f6edde;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.hero:before {
  content: "";
  position: absolute;
  width: 45vw;
  height: 45vw;
  border: 1px solid rgba(198,163,90,.16);
  border-radius: 50%;
  right: -20vw;
  top: 16%;
}

.eyebrow {
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .28em;
  color: var(--gold-light);
  font-weight: 600;
}

/* "A carta" sao duas palavras e continua no tamanho de vitrine. O h1 do hero
   saiu junto desta regra quando a frase cresceu: com uma linha e meia de
   texto, 7rem viraria um paredao de cinco linhas e empurraria o botao para
   fora da primeira tela. */
.catalog h2 {
  font: 500 clamp(4rem,7vw,7rem)/.83 "Cormorant Garamond",serif;
  letter-spacing: -.045em;
  margin: 2rem 0;
  color: #f8efe0;
}

/* Entrelinha 1.06, e nao .83: naquele aperto as descidas do "ç" e do "g"
   encostavam na linha de baixo, o que nao acontecia com duas linhas. */
.hero h1 {
  font: 500 clamp(2.1rem,3.4vw,3.6rem)/1.06 "Cormorant Garamond",serif;
  letter-spacing: -.02em;
  margin: 1.6rem 0;
  color: #f8efe0;
  max-width: 17ch;
}

.hero h1 em {
  font-weight: 500;
  color: var(--gold-light);
}

.intro {
  color: #cfbdb2;
  max-width: 480px;
  line-height: 1.8;
  font-size: .93rem;
}

.gold-button {
  display: inline-block;
  margin-top: 2.3rem;
  color: #29140c;
  background: var(--gold-light);
  text-decoration: none;
  padding: 16px 25px;
  font-size: .7rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  transition: transform .2s,background .2s;
}

.gold-button:hover {
  transform: translateY(-3px);
  background: #f0d99e;
}

.hero-art {
  height: 500px;
  position: relative;
  display: grid;
  place-items: center;
}

.halo {
  position: absolute;
  width: 385px;
  height: 385px;
  border: 1px solid rgba(226,199,136,.25);
  border-radius: 50%;
  box-shadow: 0 0 0 55px rgba(198,163,90,.025),0 0 0 110px rgba(198,163,90,.018);
}


/* =========================================================
   Garrafa desenhada em CSS (usada no hero e nos cards)
   ========================================================= */
.bottle {
  width: 88px;
  height: 320px;
  background: linear-gradient(90deg,#15120c,#37331d 38%,#14130c 75%);
  border-radius: 14px 14px 20px 20px;
  position: relative;
  filter: drop-shadow(28px 28px 25px rgba(0,0,0,.38));
  z-index: 2;
}

.bottle:before {
  content: "";
  position: absolute;
  width: 37px;
  height: 86px;
  left: 25px;
  top: -80px;
  background: linear-gradient(90deg,#16130d,#3d3820 45%,#12110b);
  border-radius: 5px 5px 2px 2px;
}

.bottle:after {
  content: "";
  position: absolute;
  width: 43px;
  height: 10px;
  left: 22px;
  top: -83px;
  border-radius: 3px;
  background: var(--gold);
}

.bottle i {
  position: absolute;
  inset: 125px 8px 55px;
  background: #e7dfca;
  border: 3px double #a17a36;
}

.bottle b {
  position: absolute;
  z-index: 2;
  top: 160px;
  left: 0;
  width: 100%;
  text-align: center;
  color: #5a421b;
  font: 600 1rem "Cormorant Garamond";
  letter-spacing: .15em;
}

.bottle small {
  font: 500 .4rem Manrope;
  letter-spacing: .14em;
}


/* =========================================================
   Hero: carrossel de destaques
   =========================================================
   Entra no lugar da garrafa desenhada quando a planilha traz
   rotulos com Destaque. As fotos sao garrafas recortadas, com
   fundo transparente, entao a troca e so de conteudo: o halo,
   a linha e o ano ficam onde estavam. */
.hero-carousel {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
}

/* Altura fixa: e ela que segura o lugar enquanto as fotos
   chegam e no cruzamento de uma para a outra. Sem isso cada
   garrafa, que tem altura propria, empurraria o layout. */
.hero-slides {
  position: relative;
  width: 260px;
  /* 400px deixa o nome terminar acima da linha dourada mesmo quando ele
     ocupa duas linhas, que e o caso de rotulo comprido. */
  height: 400px;
}

.hero-slide {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  justify-items: center;
  align-items: end;
  gap: 18px;
  text-decoration: none;
  opacity: 0;
  transition: opacity .8s ease;
}

.hero-slide.is-active {
  opacity: 1;
}

/* max-height, nao height: garrafa e uma foto estreita e alta,
   mas a biblioteca tem uma ou outra quadrada. O teto nas duas
   direcoes impede que a fora do padrao apareca gigante. */
.hero-slide img {
  max-height: 340px;
  max-width: 100%;
  width: auto;
  height: auto;
  /* A mesma sombra da garrafa desenhada, para a foto pousar na
     cena em vez de flutuar recortada. */
  filter: drop-shadow(24px 26px 24px rgba(0,0,0,.42));
}

.hero-slide-name {
  font: 500 .95rem "Cormorant Garamond",serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-align: center;
  color: var(--gold-light);
}

.hero-arrow {
  position: absolute;
  top: 42%;
  width: 44px;  /* alvo de toque, ainda que o simbolo seja pequeno */
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(198,163,90,.3);
  border-radius: 50%;
  background: transparent;
  color: var(--gold-light);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}

.hero-arrow:hover {
  background: rgba(198,163,90,.14);
  border-color: rgba(198,163,90,.6);
}

.hero-prev { left: 0; }
.hero-next { right: 0; }

/* Sem transicao para quem pediu menos movimento: as setas
   continuam trocando o rotulo, mas na hora, sem travessia. */
@media (prefers-reduced-motion: reduce) {
  .hero-slide {
    transition: none;
  }
}


/* =========================================================
   Hero: detalhes decorativos
   ========================================================= */
.year {
  position: absolute;
  right: 4%;
  top: 12%;
  font: 500 1rem/1.05 "Cormorant Garamond";
  color: var(--gold);
  letter-spacing: .2em;
}

.wine-line {
  width: 270px;
  height: 1px;
  position: absolute;
  background: linear-gradient(90deg,transparent,var(--gold),transparent);
  bottom: 28px;
}

.hero-art p {
  position: absolute;
  left: 0;
  bottom: 14px;
  text-transform: uppercase;
  font-size: .62rem;
  line-height: 1.6;
  letter-spacing: .22em;
  color: #b99e72;
}

.side-note {
  position: absolute;
  right: -55px;
  bottom: 125px;
  transform: rotate(-90deg);
  font-size: .62rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #a79486;
}


/* =========================================================
   Catálogo: cabeçalho, busca e filtros
   ========================================================= */
.catalog {
  padding: 110px 7vw 130px;
}

.catalog-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
}

.eyebrow.dark {
  color: #7f652e;
}

.catalog h2 {
  margin: 1rem 0 0;
  color: var(--wine);
  font-size: clamp(4rem,7vw,6.5rem);
}

.catalog-head>p {
  width: 320px;
  color: var(--muted);
  font-size: .85rem;
  line-height: 1.7;
}

.tools {
  margin-top: 60px;
  border-block: 1px solid var(--line);
  padding: 18px 0;
  display: flex;
  justify-content: space-between;
  gap: 2rem;
}

.search {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 300px;
}

.search span {
  font: 2rem "Cormorant Garamond";
}

.search input {
  border: 0;
  background: transparent;
  width: 100%;
  font: 500 .78rem Manrope;
  color: var(--ink);
}

.filters {
  display: flex;
  gap: 6px;
  overflow: auto;
}

.filters button {
  border: 0;
  background: transparent;
  padding: 10px 15px;
  text-transform: uppercase;
  letter-spacing: .12em;
  font: 600 .64rem Manrope;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
}

.filters button.active {
  background: var(--wine);
  color: #f7ebd7;
}

/* A contagem e a ordenação dividem a mesma linha: as duas falam do conjunto
   que está na tela, enquanto a barra de cima é quem monta esse conjunto. */
.result-bar {
  margin: 24px 0 35px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.result-count {
  margin: 0;
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

.sort {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Select nativo, de propósito: no celular ele abre a roda do sistema, que é
   mais fácil de acertar com o polegar do que qualquer lista que eu desenhasse
   — e não custa JS nenhum. Só o cromo padrão sai do caminho. */
.sort select {
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  padding: 4px 22px 4px 4px;
  font: 600 .64rem Manrope;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--wine);
  cursor: pointer;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--wine) 50%),
                    linear-gradient(135deg, var(--wine) 50%, transparent 50%);
  background-size: 5px 5px, 5px 5px;
  background-position: right 9px center, right 4px center;
  background-repeat: no-repeat;
}

.sort select:focus-visible {
  outline: 2px solid var(--wine);
  outline-offset: 2px;
}


/* =========================================================
   Catálogo: grade e cards
   ========================================================= */
.wine-grid {
  display: grid;
  grid-template-columns: repeat(12,1fr);
  gap: 24px;
}

.wine-card {
  grid-column: span 4;
  min-height: 520px;
  background: #e9dfcc;
  border: 1px solid var(--line);
  position: relative;
  padding: 30px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: reveal .55s both;
}

/* A coluna do meio ja desceu 35px aqui, como zigzag editorial. Saiu: com a
   carta cheia o efeito nao lia como composicao, lia como card torto — foi
   assim que ele descreveu, duas vezes. Numa grade de tres colunas com foto,
   titulo e preco na mesma altura, o alinhamento e o que deixa comparar os
   rotulos; o deslocamento so atrapalhava essa leitura. */

.wine-card:before {
  content: attr(data-number);
  font: italic 1rem "Cormorant Garamond";
  color: #6f604b;
}

.wine-card .visual {
  height: 255px;
  display: grid;
  place-items: center;
  position: relative;
}

.mini-bottle {
  transform: scale(.58);
  transform-origin: center;
  filter: drop-shadow(20px 22px 15px rgba(39,26,16,.22));
}

.wine-card:hover .mini-bottle {
  transform: scale(.61) rotate(-2deg);
  transition: .35s;
}

/* Foto do rótulo vinda do bucket. A altura do .visual é fixa, então a imagem
   não causa layout shift mesmo sem width/height conhecidos. */
.visual img {
  /* Caixa definida, via absoluto sobre o .visual (que e position:relative).
     Nao usar width/height auto: o <img> renderizaria 0x0 enquanto a foto nao
     chega e o lazy loading do Chrome nunca dispara para elemento de tamanho
     zero. E nao basta height:100%: como .visual e grid com place-items:center,
     a altura da area fica indefinida, o percentual cai para auto e a imagem
     assume o tamanho intrinseco, estourando o card.
     object-fit:contain preserva a proporcao dentro da caixa. */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(18px 20px 16px rgba(39,26,16,.22));
  transition: transform .35s;
}

.wine-card:hover .visual img {
  transform: scale(1.04) rotate(-1deg);
}

/* A margem separa o titulo da foto. O .visual tem altura fixa e a imagem usa
   object-fit:contain, entao garrafa alta encosta na borda de baixo da caixa;
   e o hover aplica scale(1.04), que empurra mais uns 5px para fora. Sem esta
   margem o nome do rotulo fica colado na foto, e sobreposto no hover.
   O card e flex column sem gap: o espacamento vem das margens dos filhos. */
/* Duas linhas reservadas para o titulo, mesmo quando ele ocupa uma.
   Os nomes da carta alternam entre uma e duas linhas ("Barolo DOC" contra
   "Vinho Branco Langhe DOC Arneis"), e sem a reserva o produtor, a origem e
   a ficha tecnica comecam em alturas diferentes em cada card da mesma
   linha. Com ela, os quatro blocos de texto se alinham e da para comparar
   dois rotulos passando o olho na horizontal. */
.wine-card h3 {
  font: 600 1.7rem/1 "Cormorant Garamond";
  margin: 18px 0 0;
  min-height: 2em;
  color: var(--wine);
}

.origin {
  font-size: .62rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #715f46;
  margin: 9px 0 6px;
}

.producer {
  font: italic 1.05rem "Cormorant Garamond";
  color: #785e33;
  margin: 6px 0 0;
}

.specs {
  font-size: .6rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #6d6053;
  margin: 0 0 14px;
}

.notes {
  font: italic 1rem/1.45 "Cormorant Garamond";
  color: #655c55;
  margin: 0;
}

/* Estoque restante. Discreto: é informação de apoio, não argumento de venda.
   Vira destaque só na última unidade, onde a urgência é real. */
.stock {
  margin: 10px 0 0;
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #6d6053;
}

/* Botão travado no estoque máximo: apagado e sem cursor de clique, para a
   pessoa entender que acabou em vez de achar que o site quebrou. */
.order-stepper button[disabled] {
  opacity: .35;
  cursor: not-allowed;
}

.meta {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: end;
}

/* Sem a coluna "Uva" (alimentos), o preço sozinho iria para a esquerda;
   o auto mantém ele à direita como nos cards de vinho. */
.meta > div:last-child {
  margin-left: auto;
}

.meta span {
  display: block;
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #6d6053;
}

/* Preço e uva dividem a mesma linha, e sempre foram a mesma fonte — o que os
   fazia parecer de famílias diferentes eram os algarismos: a Cormorant usa
   numeral antigo por padrão, com 1 na altura de x e 4 e 9 descendo abaixo da
   linha de base. Ao lado de "Barbera e Nebbiolo" isso lê como outro tipo, e
   num preço lê como outro tamanho. `lining-nums` pede os algarismos de caixa
   alta da própria fonte: mesma Cormorant, alinhada com as maiúsculas. */
.meta strong {
  font: 600 1.35rem "Cormorant Garamond";
  font-variant-numeric: lining-nums;
  color: var(--wine);
}

.type {
  writing-mode: vertical-rl;
  text-transform: uppercase;
  font-size: .6rem;
  letter-spacing: .2em;
  position: absolute;
  right: 14px;
  top: 30px;
  color: #6f604c;
}


/* =========================================================
   Estado vazio
   ========================================================= */
.empty {
  text-align: center;
  padding: 80px 20px;
  border: 1px solid var(--line);
}

.empty span {
  font: 500 2.2rem "Cormorant Garamond";
}

.empty p {
  color: var(--muted);
  font-size: .8rem;
}


/* =========================================================
   Citação de fechamento
   ========================================================= */
.experience {
  background: var(--wine);
  color: #f0e3cf;
  text-align: center;
  padding: 100px 20px;
}

.experience blockquote {
  font: italic 500 clamp(1.7rem,3vw,2.2rem)/1.05 "Cormorant Garamond";
  max-width: 1500px;
  margin: 35px auto;
}

.experience a {
  color: var(--gold-light);
  font-size: .65rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-underline-offset: 8px;
}


/* =========================================================
   Contato
   =========================================================
   Fundo areia: com a faixa do manifesto fora do ar, é o único
   respiro claro depois do catálogo, e é o que impede a sequência
   de três blocos escuros (.experience -> contato -> footer). */
.contact {
  background: #d9caad;
  padding: 110px 8vw;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 70px;
  align-items: center;
  border-top: 1px solid var(--line);
}

/* .eyebrow.dark foi calibrado para o creme (#f2eadb) e renderia só 3,42:1
   sobre o areia. Este tom dá 4,60:1. */
.contact-eyebrow {
  color: #685226;
}

.contact h2 {
  font: 500 clamp(2.6rem,5vw,4.4rem)/.95 "Cormorant Garamond",serif;
  letter-spacing: -.035em;
  margin: 1.1rem 0 1.5rem;
  color: var(--wine);
}

.contact h2 em {
  font-weight: 500;
  color: #7a5c22;
}

.contact-lead {
  color: #5c5044;
  max-width: 460px;
  line-height: 1.8;
  font-size: .93rem;
  margin: 0;
}

.contact-action {
  justify-self: end;
  text-align: right;
}

.whatsapp-button {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  background: var(--wine);
  color: #f7ebd7;
  text-decoration: none;
  padding: 19px 32px;
  font-size: .72rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  transition: transform .2s,background .2s;
}

.whatsapp-button:hover {
  transform: translateY(-3px);
  background: #500f1a;
}

.whatsapp-button svg {
  width: 19px;
  height: 19px;
  fill: currentColor;
  flex-shrink: 0;
}

.contact-note {
  color: #61533f;
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 20px 0 0;
}

/* =========================================================
   Rodapé
   ========================================================= */
footer {
  background: var(--wine-2);
  color: #d5c4ac;
  padding: 75px 7vw 30px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}

/* Mesma caixa quadrada do cabecalho (ver .brand img). 200px devolve os
   ~182px de marca que o logo anterior tinha aqui — e e o maior uso do
   arquivo, o que define os 400px em que ele e gerado. */
footer img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  mix-blend-mode: screen;
}

footer>p {
  font: italic 2.2rem/1.1 "Cormorant Garamond";
  justify-self: end;
}

footer>div {
  grid-column: 1/-1;
  border-top: 1px solid rgba(198,163,90,.25);
  padding-top: 25px;
  margin-top: 45px;
  display: flex;
  justify-content: space-between;
  text-transform: uppercase;
  font-size: .6rem;
  letter-spacing: .16em;
}


/* =========================================================
   Animações
   ========================================================= */
@keyframes reveal {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
  }
}


/* =========================================================
   Responsivo
   ========================================================= */
@media (max-width:900px) {
  .topbar {
    grid-template-columns: 1fr 1fr;
  }
  .topbar nav {
    display: none;
  }
  .hero {
    grid-template-columns: 1fr;
    min-height: 900px;
    padding-top: 135px;
  }
  .hero-copy {
    z-index: 3;
  }
  .hero-art {
    height: 370px;
    margin-top: 45px;
  }
  .halo {
    width: 290px;
    height: 290px;
  }
  .hero-bottle {
    transform: scale(.78);
  }
  /* Encolhe junto com a garrafa que ele substitui — inclusive as
     setas, que sao filhas e por isso acompanham a escala. */
  .hero-carousel {
    transform: scale(.78);
  }
  .wine-card {
    grid-column: span 6;
  }
  .contact {
    grid-template-columns: 1fr;
    gap: 45px;
    padding: 90px 8vw;
  }
  .contact-action {
    justify-self: start;
    text-align: left;
  }
  .tools {
    display: block;
  }
  .filters {
    margin-top: 15px;
  }
  .catalog-head>p {
    display: none;
  }
}

@media (max-width:600px) {
  .topbar {
    height: 78px;
  }
  .brand img {
    width: 66px;
    height: 66px;
  }
  .menu-link {
    font-size: .62rem!important;
  }
  .hero {
    padding: 120px 6vw 55px;
    min-height: 820px;
  }
  .hero h1 {
    font-size: 2.1rem;
    max-width: none;
  }
  .hero-art {
    height: 320px;
  }
  .hero-art p,
  .year {
    display: none;
  }
  .hero-carousel {
    transform: scale(.66);
  }
  .catalog {
    padding: 80px 5vw 100px;
  }
  .contact {
    padding: 70px 6vw;
  }
  .whatsapp-button {
    width: 100%;
    justify-content: center;
  }
  .wine-card {
    grid-column: span 12;
    min-height: 480px;
  }
  .search {
    min-width: 0;
  }
  .filters button {
    padding: 10px;
  }
  .catalog h2 {
    font-size: 4.2rem;
  }
  footer {
    grid-template-columns: 1fr;
  }
  footer>p {
    justify-self: start;
    font-size: 1.8rem;
    margin-top: 35px;
  }
}



/* =========================================================
   Pedido: controle no card e barra do rodapé
   =========================================================
   Nada aqui fala com servidor. O pedido vive no navegador e
   vira uma mensagem de WhatsApp na hora de enviar. */

/* Texto só para leitor de tela: some da vista sem sair da
   árvore de acessibilidade. display:none o esconderia dos
   dois, e o botão ficaria sem dizer o que faz. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Controle dentro do card ---------- */
.order-control {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 44px;
}

.order-add {
  flex: 1;
  border: 1px solid var(--wine);
  background: transparent;
  color: var(--wine);
  font-family: inherit;
  font-size: .62rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  padding: 14px 18px;
  cursor: pointer;
  transition: background .2s, color .2s;
}

.order-add:hover {
  background: var(--wine);
  color: var(--cream);
}

.order-added {
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #6d6053;
}

/* ---------- Stepper (− 2 +) ---------- */
.order-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--wine);
}

.order-stepper button {
  width: 42px;
  height: 42px;
  border: 0;
  background: transparent;
  color: var(--wine);
  font: 600 1.1rem/1 Manrope, sans-serif;
  cursor: pointer;
  transition: background .2s, color .2s;
}

.order-stepper button:hover {
  background: var(--wine);
  color: var(--cream);
}

.order-stepper b {
  min-width: 38px;
  text-align: center;
  font: 600 1.15rem "Cormorant Garamond";
  color: var(--wine);
}

/* ---------- Barra do rodapé ---------- */
.order-bar {
  position: fixed;
  z-index: 100; /* acima do .grain, que é 99 */
  inset: auto 0 0 0;
  background: var(--wine-2);
  border-top: 1px solid rgba(198,163,90,.35);
  color: var(--cream);
  animation: subir .25s ease-out;
}

.order-bar[hidden] {
  display: none;
}

@keyframes subir {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

/* A barra é fixa e cobriria o fim do rodapé. Só reserva o espaço
   quando ela existe — daí o :has, em vez de padding permanente. */
body:has(.order-bar:not([hidden])) footer {
  padding-bottom: 130px;
}

.order-summary {
  padding: 16px 5vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.order-toggle {
  display: flex;
  align-items: baseline;
  gap: 16px;
  border: 0;
  background: transparent;
  color: inherit;
  font-family: inherit;
  cursor: pointer;
  padding: 6px 0;
}

.order-count {
  font-size: .62rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #cfbdb2;
}

.order-total {
  font: 600 1.5rem "Cormorant Garamond";
  /* Mesmo motivo do preço no card (ver .meta strong): é o mesmo número. */
  font-variant-numeric: lining-nums;
  color: var(--gold-light);
}

.order-caret {
  width: 0;
  height: 0;
  align-self: center;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--gold);
  transition: transform .2s;
}

.order-toggle[aria-expanded="true"] .order-caret {
  transform: rotate(180deg);
}

.order-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}

.order-clear {
  border: 0;
  background: transparent;
  color: #a4938a;
  font-family: inherit;
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 10px 4px;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.order-clear:hover {
  color: var(--cream);
}

/* Sobrescreve o .whatsapp-button: na barra ele precisa ser mais
   discreto que o da seção de contato, que é uma chamada isolada. */
.order-send {
  background: var(--gold-light);
  color: #29140c;
  padding: 15px 26px;
}

.order-send:hover {
  background: #f0d99e;
}

/* ---------- Lista expansível ---------- */
.order-items {
  max-height: 46vh;
  overflow-y: auto;
  border-bottom: 1px solid rgba(198,163,90,.2);
  padding: 6px 5vw;
}

.order-items[hidden] {
  display: none;
}

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

.order-item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 18px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(242,234,219,.08);
}

.order-item:last-child {
  border-bottom: 0;
}

.order-item-name {
  font: 500 1.1rem "Cormorant Garamond";
}

.order-item-price {
  font-size: .68rem;
  letter-spacing: .08em;
  color: #a4938a;
  white-space: nowrap;
}

/* Na barra escura o stepper inverte: borda e texto dourados. */
.order-items .order-stepper {
  border-color: rgba(198,163,90,.45);
}

.order-items .order-stepper button {
  width: 36px;
  height: 36px;
  color: var(--gold-light);
}

.order-items .order-stepper button:hover {
  background: var(--gold-light);
  color: #29140c;
}

.order-items .order-stepper b {
  min-width: 32px;
  font-size: 1rem;
  color: var(--cream);
}

@media (max-width:600px) {
  .order-summary {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 14px 6vw;
  }
  .order-toggle {
    justify-content: space-between;
  }
  .order-actions {
    justify-content: space-between;
  }
  .order-send {
    flex: 1;
    justify-content: center;
  }
  .order-items {
    max-height: 38vh;
    padding: 6px 6vw;
  }
  .order-item {
    grid-template-columns: 1fr auto;
    row-gap: 10px;
  }
  .order-item-name {
    grid-column: 1 / -1;
  }
  body:has(.order-bar:not([hidden])) footer {
    padding-bottom: 180px;
  }
}

/* Quem pediu menos movimento não precisa ver a barra subir. */
@media (prefers-reduced-motion: reduce) {
  .order-bar {
    animation: none;
  }
}


/* =========================================================
   Verificação de idade
   =========================================================
   Cobre a página até a pessoa confirmar que é maior de 18.
   O estado vem do <html data-idade>, escrito pelo script do
   <head> antes do primeiro pixel — quem já confirmou não vê
   nada piscar, e sem JavaScript nenhum o aviso fica de pé. */
html:not([data-idade="ok"]) body {
  overflow: hidden;
}

.age-gate {
  position: fixed;
  inset: 0;
  z-index: 200; /* acima da barra do pedido (100) e do .grain (99) */
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(33,4,8,.9);
  /* O desfoque é enfeite: o fundo opaco já esconde a carta em
     quem não suporta backdrop-filter. */
  backdrop-filter: blur(6px);
}

html[data-idade="ok"] .age-gate {
  display: none;
}

.age-gate-card {
  width: min(420px,100%);
  padding: 34px 30px 30px;
  background: var(--cream);
  border-top: 3px solid var(--gold);
  box-shadow: 0 30px 70px rgba(0,0,0,.45);
  text-align: center;
  animation: age-gate-entra .35s ease-out both;
}

@keyframes age-gate-entra {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

.age-gate-card h2 {
  margin: 0 0 .7rem;
  font: 600 1.9rem/1.1 "Cormorant Garamond",serif;
  letter-spacing: -.02em;
  color: var(--wine);
}

.age-gate-aviso {
  margin: 0 0 22px;
  font-size: .9rem;
  line-height: 1.6;
  color: #5c5044;
}

.age-gate-pergunta {
  margin: 0 0 20px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: .85rem;
  line-height: 1.6;
  color: var(--muted);
}

.age-gate-aviso strong,
.age-gate-pergunta strong {
  color: var(--wine);
}

.age-gate-actions {
  display: flex;
  justify-content: center;
  gap: 14px;
}

/* Mesma dupla do resto do site: ação principal preenchida em
   vinho, alternativa só contornada. */
.age-gate-actions button {
  min-width: 104px;
  min-height: 44px; /* alvo de toque confortável */
  padding: 12px 26px;
  border: 1px solid var(--wine);
  font-family: inherit;
  font-size: .68rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s, color .2s;
}

.age-gate-actions .age-yes {
  background: var(--wine);
  color: var(--cream);
}

.age-gate-actions .age-yes:hover {
  background: var(--wine-2);
}

.age-gate-actions .age-no {
  background: transparent;
  color: var(--wine);
}

.age-gate-actions .age-no:hover {
  background: var(--wine);
  color: var(--cream);
}

@media (max-width:600px) {
  .age-gate-card {
    padding: 28px 22px 24px;
  }
  .age-gate-actions button {
    flex: 1;
    min-width: 0;
    padding: 12px 10px;
  }
}

/* Quem pediu menos movimento não precisa ver o aviso subir. */
@media (prefers-reduced-motion: reduce) {
  .age-gate-card {
    animation: none;
  }
}