/* ══════════════════════════════════════════════════════════════
   Alma Duo Concept — layout das telas da loja
   (o design system compartilhado está em styles.css)
   ══════════════════════════════════════════════════════════════ */

/* ── Hero ──────────────────────────────────────────────────── */
.hero{
  position:relative; min-height:560px; display:flex; align-items:center;
  background:var(--champagne-100); overflow:hidden;
}
/* Fundo em tecido: taupe na esquerda, abrindo em rosé e blush para a
   direita. O véu escuro do primeiro gradiente é o que segura a leitura do
   texto creme — sem ele o contraste do parágrafo cai para ~2,3:1.
   As paradas são em PIXELS, não em %, de propósito: a coluna de texto tem
   largura fixa (520px o título, 420px o parágrafo), então o véu precisa
   acompanhar o texto e não a largura da tela. Em % ele clareava cedo demais
   em telas estreitas e o fim das linhas sumia.
   Para usar uma foto de campanha, troque só a camada de baixo por url(...)
   e mantenha o véu. */
.hero-fundo{
  position:absolute; inset:0;
  background:
    linear-gradient(94deg,
      rgba(56,48,40,.82) 0px,
      rgba(56,48,40,.74) 420px,
      rgba(56,48,40,.30) 760px,
      rgba(56,48,40,0)   1080px),
    linear-gradient(102deg,
      var(--taupe-400)     0%,
      var(--taupe-200)    28%,
      var(--rose-200)     54%,
      var(--champagne-100) 80%,
      var(--champagne-50) 100%);
}
/* Pregas de seda: duas tramas verticais de períodos diferentes, para as
   dobras não caírem num intervalo mecânico. Aparecem só do meio para a
   direita, onde não disputam com o texto. */
.hero-fundo::after{
  content:""; position:absolute; inset:0;
  background:
    repeating-linear-gradient(93deg,
      rgba(255,255,255,0)   0px,
      rgba(255,255,255,.10) 52px,
      rgba(255,255,255,0)   104px),
    repeating-linear-gradient(97deg,
      rgba(139,128,114,0)   0px,
      rgba(139,128,114,.13) 87px,
      rgba(139,128,114,0)   174px);
  mask-image:linear-gradient(96deg, transparent 260px, #000 720px);
  -webkit-mask-image:linear-gradient(96deg, transparent 260px, #000 720px);
}
/* ── A peça que ocupa o lado direito da hero ────────────────
   As fotos do catálogo são sobre cetim marrom — a mesma paleta do fundo.
   A máscara dissolve a borda esquerda da foto no tecido, então as duas
   viram uma imagem só em vez de foto colada sobre gradiente. */
.hero-figura{
  position:absolute; top:0; right:0; bottom:0; width:56%;
  display:block; overflow:hidden; color:inherit;
  mask-image:linear-gradient(to right, transparent 0, #000 42%);
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 42%);
}
.hero-figura img{
  width:100%; height:100%; object-fit:cover; object-position:center 42%;
  transition:transform var(--dur-slow) var(--ease-silk);
}
.hero-figura:hover img{transform:scale(1.03)}

.hero-figura-nota{
  position:absolute; right:var(--page-inset); bottom:var(--space-8);
  display:flex; flex-direction:column; gap:4px; text-align:right;
  padding:var(--space-4) var(--space-5);
  background:rgba(13,13,13,.42); backdrop-filter:blur(6px);
  border:1px solid var(--border-on-dark); border-radius:var(--radius-xs);
  transition:var(--transition-base);
}
.hero-figura:hover .hero-figura-nota{border-color:var(--border-gold-soft)}
.hero-figura-nota b{
  font:var(--type-title); font-size:19px; font-weight:500;
  color:var(--champagne-50);
}
.hero-figura-nota > span:last-child{font:var(--type-body-s); color:var(--gold-300)}

/* Com a foto ocupando a direita, o texto não deve invadir a área dela. */
.hero.com-figura .hero-conteudo > *{max-width:min(520px, 46%)}
.hero.com-figura .hero-acoes{max-width:none}

.hero-conteudo{position:relative; padding-block:var(--space-9); width:100%}
.hero-conteudo > *{max-width:520px}
.hero-titulo{
  font:var(--type-hero); letter-spacing:var(--tracking-display);
  color:var(--champagne-50); margin-top:var(--space-5);
}
.hero-conteudo .eyebrow{color:var(--champagne-100)}
.hero-conteudo .ornament{width:200px; margin-top:var(--space-5)}
.hero-texto{
  font:var(--type-body-l); color:var(--champagne-50);
  margin-top:var(--space-5); max-width:420px;
}
/* Sobre tecido claro o contorno de 18% some: o botão secundário precisa de
   borda mais firme do que a do rodapé preto. */
.hero-acoes{display:flex; gap:var(--space-4); margin-top:var(--space-7); flex-wrap:wrap; max-width:none}
.hero-acoes .btn-on-dark{border-color:rgba(251,246,239,.55); color:var(--champagne-50)}
.hero-acoes .btn-on-dark:hover{border-color:var(--gold-300); color:var(--gold-100)}

/* ── Faixa de valores ──────────────────────────────────────── */
.valores{background:var(--surface-sunken); padding-block:var(--space-7)}
.valor{display:flex; gap:var(--space-3)}
.valor-ico{color:var(--gold-600); margin-top:3px; width:20px; height:20px}
.valor .muted{margin-top:6px}

/* ── Editorial ─────────────────────────────────────────────── */
.editorial{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--space-9);
  align-items:center; padding-block:var(--section-y);
}
.editorial-foto{aspect-ratio:4/5; width:100%; height:auto; object-fit:cover}

/* Nossa história: a foto abre o texto, em formato editorial largo. */
.foto-historia{
  /* Quadrada de propósito: o arquivo é 1:1 e mostra as duas de corpo
     inteiro — qualquer recorte panorâmico corta os pés. Aqui não há corte.
     height:auto é obrigatório: sem ele o atributo height="1200" do <img>
     vence e o aspect-ratio nunca entra em jogo. */
  width:100%; height:auto; aspect-ratio:1/1; object-fit:cover;
  margin-top:var(--space-7);
}

/* ── Newsletter ────────────────────────────────────────────── */
.newsletter{background:var(--gradient-silk)}
.news-form{
  display:flex; gap:var(--space-3); margin:var(--space-6) auto 0;
  max-width:460px; align-items:center;
}
.news-form .input{flex:1}

.grupo-acao{display:flex; flex-direction:column; align-items:center; gap:var(--space-4); margin-top:var(--space-6)}
.grupo-acao p{max-width:380px}

/* ── Vitrine ───────────────────────────────────────────────── */
.loja-topo{background:var(--surface-sunken); padding-block:var(--space-8)}
.loja-corpo{
  display:grid; grid-template-columns:232px 1fr; gap:var(--space-8);
  padding-top:var(--space-8); padding-bottom:var(--section-y);
}
.filtros .ornament{width:120px; margin:var(--space-4) 0 var(--space-5)}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.filtro-bloco{margin-top:var(--space-7); display:flex; flex-direction:column; gap:10px}
.filtro-titulo{
  font:var(--type-label); font-size:10px; letter-spacing:var(--tracking-label);
  text-transform:uppercase; color:var(--text-muted); margin-bottom:var(--space-3);
}
.loja-barra{
  display:flex; justify-content:space-between; align-items:flex-end; gap:var(--space-4);
  border-bottom:1px solid var(--border-hairline); padding-bottom:var(--space-4);
}

/* ── Peça ──────────────────────────────────────────────────── */
.peca{padding-top:var(--space-7); padding-bottom:var(--section-y)}
.peca-grid{display:grid; grid-template-columns:1.1fr 1fr; gap:var(--space-9); margin-top:var(--space-6)}
.peca-fotos{display:grid; grid-template-columns:72px 1fr; gap:var(--space-4)}
/* ver a nota em styles.css sobre min-width:auto em item de grid */
.peca-grid > *, .peca-fotos > *, .sacola-grid > *, .loja-corpo > *, .editorial > *{min-width:0}
.peca-miniaturas{display:flex; flex-direction:column; gap:var(--space-3)}
.mini{
  width:72px; aspect-ratio:4/5; padding:0; border:none; background:var(--surface-sunken);
  cursor:pointer; outline:1px solid var(--border-hairline); transition:var(--transition-base);
}
.mini img{width:100%; height:100%; object-fit:cover}
.mini[aria-pressed="true"]{outline:1px solid var(--gold-500); outline-offset:2px}
.peca-principal{position:relative}
.peca-principal > div{aspect-ratio:4/5; overflow:hidden; background:var(--surface-sunken)}
.peca-principal img{width:100%; height:100%; object-fit:cover}
.peca-nome{
  font:var(--type-h1); font-size:44px; letter-spacing:var(--tracking-display);
  color:var(--text-heading); margin-top:var(--space-4);
}
.peca .ornament{width:140px; margin-top:var(--space-4)}
.peca-medidas{
  display:flex; align-items:center; gap:8px; margin-top:var(--space-3);
  font:var(--type-body-s); color:var(--text-muted);
}
.opcoes{display:flex; flex-direction:column; gap:10px}
.peca-compra{display:flex; align-items:center; gap:var(--space-4); margin-top:var(--space-6)}
.peca-garantias{
  display:flex; gap:var(--space-5); margin-top:var(--space-6); flex-wrap:wrap;
}
.peca-garantias span{display:flex; align-items:center; gap:8px; font:var(--type-body-s); color:var(--text-muted)}
.garantia-ico{color:var(--gold-600); width:15px; height:15px}

/* ── Sacola ────────────────────────────────────────────────── */
.sacola-grid{display:grid; grid-template-columns:1fr 360px; gap:var(--space-8); margin-top:var(--space-8)}
.sacola-item{
  display:grid; grid-template-columns:96px 1fr auto; gap:var(--space-5); align-items:center;
  padding-block:var(--space-5); border-bottom:1px solid var(--border-hairline);
}
.sacola-foto{width:96px; aspect-ratio:4/5; overflow:hidden; background:var(--surface-sunken); display:block}
.sacola-foto img{width:100%; height:100%; object-fit:cover}
.sacola-nome{font:var(--type-title); font-size:20px; color:var(--text-heading); margin-top:6px}
.sacola-controles{display:flex; align-items:center; gap:var(--space-4); margin-top:var(--space-4)}
.link-remover{
  background:none; border:none; padding:0; cursor:pointer;
  font:var(--type-body-s); color:var(--text-muted); text-decoration:underline;
}
.link-remover:hover{color:var(--status-error)}

.resumo{align-self:start}
.resumo .ornament{width:110px; margin:var(--space-4) 0 var(--space-5)}
.linha{display:flex; justify-content:space-between; gap:var(--space-4); font:var(--type-body); padding:6px 0}
.linha.claro{font:var(--type-body-s); color:var(--text-on-dark)}
.linha.total{align-items:baseline}
.hr{height:1px; background:var(--border-hairline); margin:var(--space-4) 0}
.hr.escuro{background:var(--border-on-dark)}

/* ── Checkout ──────────────────────────────────────────────── */
.checkout .bloco{margin-top:var(--space-7)}
.checkout .bloco .ornament{width:120px; margin:var(--space-4) 0 var(--space-5)}
.checkout .grid-2{gap:var(--space-5)}
.resumo-escuro{margin-top:var(--space-8)}
.resumo-escuro .ornament{width:110px; margin:var(--space-4) 0 var(--space-5)}
.total-valor{font:var(--type-title); font-size:24px; color:var(--gold-300)}

/* ── Confirmação ───────────────────────────────────────────── */
.selo-marca{height:104px; width:auto; margin:0 auto var(--space-6)}

/* ── Texto longo (Nossa história) ──────────────────────────── */
.texto-longo{margin:var(--space-7) 0; display:flex; flex-direction:column; gap:var(--space-4)}
.texto-longo p{font:var(--type-body-l); color:var(--text-body); text-wrap:pretty}
.texto-longo b{font-weight:500; color:var(--text-heading)}

/* ── Guia de cuidados ──────────────────────────────────────── */
.cuidados-bloco{margin-top:var(--space-8)}
.cuidados-titulo{
  font:var(--type-h3); font-size:24px; color:var(--text-heading);
  padding-bottom:var(--space-4); border-bottom:1px solid var(--border-hairline);
  margin-bottom:var(--space-5);
}
.cuidados-lista{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-6)}
.cuidado{display:flex; gap:var(--space-4)}
.cuidado > *{min-width:0}
.cuidado-ico{color:var(--gold-600); width:22px; height:22px; margin-top:2px; flex:0 0 auto}
.cuidado p{margin-top:6px}

.cuidados-evitar{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.cuidados-evitar li{
  font:var(--type-body); color:var(--text-muted); padding:var(--space-4) 0 var(--space-4) var(--space-6);
  border-bottom:1px solid var(--border-hairline); position:relative;
}
.cuidados-evitar li:last-child{border-bottom:none}
/* o × marca o que não fazer sem precisar de ícone em cada linha */
.cuidados-evitar li::before{
  content:"×"; position:absolute; left:6px; top:var(--space-4);
  color:var(--status-error); font-size:17px; line-height:1.5;
}
.cuidados-evitar b{color:var(--text-heading); font-weight:500}

.cuidados-passos{margin:0; padding-left:var(--space-5); display:flex; flex-direction:column; gap:var(--space-4)}
.cuidados-passos li{font:var(--type-body); color:var(--text-body)}
.cuidados-passos li::marker{color:var(--gold-600); font-family:var(--font-serif); font-size:17px}
.cuidados-passos b{color:var(--text-heading); font-weight:500}
.cuidados-nota{
  margin-top:var(--space-5); padding:var(--space-4) var(--space-5);
  background:rgba(165,80,63,.07); border-left:2px solid var(--status-error);
  border-radius:var(--radius-xs);
}

.cuidados-material{margin:0; display:flex; flex-direction:column; gap:var(--space-5)}
.cuidados-material dt{
  font:var(--type-label); letter-spacing:var(--tracking-label); text-transform:uppercase;
  color:var(--text-heading); margin-bottom:8px;
}
.cuidados-material dd{margin:0; font:var(--type-body); color:var(--text-muted)}

.cuidados-texto{font:var(--type-body-l); color:var(--text-body); margin-bottom:var(--space-4)}
.cuidados-texto b{font-weight:500; color:var(--text-heading)}

/* ── Guia de tamanhos ──────────────────────────────────────── */
.tamanhos-bloco{margin-top:var(--space-8)}
/* Tabela larga rola dentro da própria caixa: a página nunca rola de lado.
   As sombras nas bordas avisam que há mais conteúdo para o lado — sem elas,
   no celular a tabela parece cortada e ninguém tenta arrastar. As camadas
   `local` acompanham a rolagem e cobrem a sombra quando se chega ao fim,
   então o aviso some sozinho na ponta certa. */
.tabela-rolagem{
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  background:
    linear-gradient(to right,  var(--bg-page) 40%, rgba(251,246,239,0)) left  / 28px 100% no-repeat local,
    linear-gradient(to left,   var(--bg-page) 40%, rgba(251,246,239,0)) right / 28px 100% no-repeat local,
    radial-gradient(farthest-side at 0    50%, rgba(13,13,13,.13), rgba(13,13,13,0)) left  / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(13,13,13,.13), rgba(13,13,13,0)) right / 14px 100% no-repeat scroll;
}
.tamanhos-tabela{width:100%; border-collapse:collapse; min-width:520px}
.tamanhos-tabela th{
  text-align:left; padding:0 var(--space-4) var(--space-3) 0;
  font:var(--type-label); font-size:10px; letter-spacing:var(--tracking-label);
  text-transform:uppercase; color:var(--text-muted);
  border-bottom:1px solid var(--border-hairline); white-space:nowrap;
}
.tamanhos-tabela td{
  padding:var(--space-4) var(--space-4) var(--space-4) 0;
  border-bottom:1px solid var(--border-hairline);
  font:var(--type-body); color:var(--text-body); vertical-align:top;
}
.tamanhos-tabela tr:last-child td{border-bottom:none}
.tamanhos-tabela b{font-weight:500; color:var(--text-heading)}
.tamanhos-tabela .num-cm{
  font-family:var(--font-serif); font-size:19px; color:var(--gold-700);
  white-space:nowrap; font-variant-numeric:tabular-nums;
}
.tamanhos-tabela .muted{font:var(--type-body-s)}

.tamanhos-fecho{
  text-align:center; margin-top:var(--space-7); padding:var(--space-7) var(--space-5);
  background:var(--gradient-silk); border-radius:var(--radius-sm);
}
.tamanhos-fecho p{max-width:440px; margin:var(--space-4) auto var(--space-6)}

/* ── Responsivo ────────────────────────────────────────────── */
@media (max-width:1080px){
  .peca-grid{gap:var(--space-7)}
  .sacola-grid{grid-template-columns:1fr 300px}
}
@media (max-width:860px){
  .hero{min-height:440px}
  /* No celular o texto já ocupa a largura toda: a foto empurraria os
     botões para fora da primeira dobra. Fica só o tecido. */
  .hero-figura{display:none}
  .hero.com-figura .hero-conteudo > *{max-width:520px}
  /* No celular o texto ocupa a largura toda, então o véu cobre a hero
     inteira e a ponta blush do tecido nunca aparece — sobra só taupe
     acinzentado. A saída não é clarear o véu (o texto some), é TINGI-LO:
     o mesmo escurecimento, em pau-rosa em vez de marrom neutro. Contraste
     medido do parágrafo: 6,4:1, folgado. A base também corre na vertical
     aqui, passando pelo rosé. */
  .hero-fundo{
    background:
      linear-gradient(94deg,
        rgba(74,52,44,.82) 0px,
        rgba(74,52,44,.76) 420px,
        rgba(74,52,44,.34) 760px,
        rgba(74,52,44,0)   1080px),
      linear-gradient(168deg,
        var(--taupe-400)     0%,
        var(--rose-200)     52%,
        var(--rose-300)     78%,
        var(--champagne-100) 100%);
  }
  .editorial{grid-template-columns:1fr; gap:var(--space-7)}
  /* A foto é de corpo inteiro: um recorte 16/10 cortaria cabeça ou pés.
     No celular ela fica quadrada, que é o formato nativo do arquivo. */
  .editorial-foto{aspect-ratio:1/1}
  .loja-corpo{grid-template-columns:1fr; gap:var(--space-6)}
  .peca-grid{grid-template-columns:1fr}
  .peca-nome{font-size:34px}
  .sacola-grid{grid-template-columns:1fr}
  .valores .grid-4{grid-template-columns:repeat(2,1fr); gap:var(--space-5)}
}
@media (max-width:560px){
  .cuidados-lista{grid-template-columns:1fr}
  .tamanhos-fecho{padding-inline:var(--space-4)}
  /* deixa o texto do CTA quebrar em vez de esticar a caixa */
  .tamanhos-fecho .btn{
    white-space:normal; height:auto; min-height:var(--control-h-l);
    padding-block:var(--space-3); line-height:1.4;
  }
  .news-form{flex-direction:column; align-items:stretch}
  .peca-fotos{grid-template-columns:1fr}
  .peca-miniaturas{flex-direction:row; order:2; overflow-x:auto; padding:3px}
  .mini{width:60px; flex:0 0 auto}
  .peca-compra{flex-wrap:wrap}
  .peca-compra .btn{flex:1 1 100%}
  .sacola-item{grid-template-columns:72px 1fr; row-gap:var(--space-3)}
  .sacola-foto{width:72px}
  .sacola-item > .price{grid-column:2}
  .checkout .grid-2{grid-template-columns:1fr}
  .checkout .grid-2 .field{grid-column:auto !important}
  .valores .grid-4{grid-template-columns:1fr}
}