/* ══════════════════════════════════════════════════════════════
   BOUT × ACESSO — camada do lançamento (carrega DEPOIS do bout.css)
   1) Hero 360: camiseta em canvas girando com o scroll, palavra
      monumental ACESSO em knockout dourado atrás (fit-to-width e
      queda de letras reusam o motor .bn-line do bout.js).
   2) Acento DOURADO (#d8b040): tudo que pinta texto sobre o acento
      troca o branco por tinta escura (contraste AA no dourado).
   3) Lockup do header BOUT /// ACESSO e seção da peça única.
   ══════════════════════════════════════════════════════════════ */

/* ── contraste sobre o dourado: texto escuro, não branco ─────── */
.bout-store .btn-submit,
.bout-store .btn-buy{ color:#141208; }
.bout-store .hdr-bag:hover{ color:#141208; }
.bout-store .cursor.view .cursor-ring .cr-txt{ color:#141208; }
.bout-store .card-tag.gone{ color:#141208; }
body.bout-store ::selection{ background:var(--accent); color:#141208; }
.skip-link{ color:#141208; }
.bout-store .cep-row button:hover{ color:#141208; }

/* ── header: 100% SÓLIDO desde o topo (sem transparência) ─────
   O bout.css deixa o header transparente até rolar; aqui a barra
   já vem opaca com hairline, sem esperar o scroll nem blur. */
.bout-store header,
.bout-store header.scrolled{
  background:#0c0c0b;
  backdrop-filter:none; -webkit-backdrop-filter:none;
  border-bottom-color:var(--gl);
}
/* NA HOME: header sai do fluxo (fixed) pra o hero 360 abrir colado no
   topo (a camisa é a 1ª coisa que aparece), sem o gap de 106px que o
   header sticky empurraria. Outras páginas seguem sticky. */
.bout-store.hero-home header{ position:fixed; top:0; left:0; right:0; }

/* ── header: lockup da parceria BOUT /// ACESSO ──────────────── */
.bout-store .hdr-collab{ display:flex; align-items:center; gap:clamp(11px,1.5vw,20px);
  text-decoration:none; }                /* mata o underline azul/roxo de link atrás do /// */
.bout-store .hdr-collab:link,
.bout-store .hdr-collab:visited{ color:var(--w); text-decoration:none; }
/* logo BOUT maior que o padrão do bout.css */
.bout-store .hdr-collab img[src*="wordmark"],
.bout-store .hdr-brand img{ height:clamp(52px,6vw,78px); }
.bout-store .hdr-collab .hdr-x{
  font-family:var(--mono); font-weight:500; font-size:13px;
  letter-spacing:.08em; color:var(--accent); user-select:none;
  text-decoration:none;
}
.bout-store .hdr-collab .hdr-acesso{
  filter:none;                     /* preserva o octógono dourado da logo */
  height:clamp(24px,2.6vw,32px); width:auto; opacity:.96;
}
@media(max-width:560px){ .bout-store .hdr-collab .hdr-acesso{ display:none; }
  .bout-store .hdr-collab .hdr-x{ display:none; }
  .bout-store .hdr-brand img,.bout-store .hdr-collab img[src*="wordmark"]{ height:46px; } }

/* ── footer: logo BOUT em BRANCO (o wordmark usa currentColor e some
   no fundo escuro; força branco como no header) ─────────────── */
.bout-store #siteFoot .ft-brand img{ filter:brightness(0) invert(1); opacity:1; }

/* ── botão do checkout: mesmo hover limpo (sem a sombra branca offset
   do bout.css) ─────────────────────────────────────────────── */
.bout-store .btn-submit:hover:not(:disabled){
  transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,.3); filter:brightness(1.05);
}
.bout-store .btn-submit:active{ transform:translateY(0); box-shadow:none; }

/* ── HERO 360 ─────────────────────────────────────────────────
   A camisa gira sozinha e responde ao drag (acesso.js) — não usa
   mais scroll, então o hero é uma tela cheia normal (100vh).    */
.h360{ height:100vh; position:relative; }
.h360-sticky{
  position:relative; height:100vh; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
/* backdrop atrás da camiseta: VÍDEO do evento (full-bleed cover)
   no lugar do cinturão. z-index 1 (atrás do canvas z-2). */
.h360-word{
  position:absolute; inset:0; z-index:1; overflow:hidden;
  pointer-events:none;
}
.h360-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
  filter:grayscale(1) contrast(1.06);   /* preto e branco */
}
/* scrim sobre o vídeo: escurece bordas p/ legibilidade dos labels
   e cria um halo suave no centro pra a camisa preta não sumir */
.h360-word::after{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(circle at 50% 46%, rgba(236,235,228,.10), transparent 46%),
    linear-gradient(to bottom, rgba(8,8,7,.58) 0%, rgba(8,8,7,.34) 30%, rgba(8,8,7,.50) 62%, rgba(8,8,7,.82) 100%),
    rgba(8,8,7,.30);   /* tint plano: escurece o vídeo por inteiro */
}
.h360-canvas,.h360-fallback{
  position:relative; z-index:2; display:block;
  width:min(86vh,94vw); height:min(86vh,94vw);
  touch-action:pan-y;              /* arrasto horizontal gira; vertical rola */
}
.h360-canvas{ cursor:grab; }
.h360-canvas.dragging{ cursor:grabbing; }

/* chrome do hero (top já folga o header sticky) */
.h360-top{
  position:absolute; z-index:3; top:clamp(120px,15vh,150px);
  left:clamp(16px,3vw,34px); right:clamp(16px,3vw,34px);
  display:flex; justify-content:space-between; gap:14px;
}
.h360-date{ color:var(--accent); }
.h360-bottom{
  position:absolute; z-index:3; bottom:clamp(18px,4.5vh,46px); left:0; right:0;
  display:flex; flex-direction:column; align-items:center; gap:clamp(10px,1.6vh,16px);
  text-align:center; padding:0 16px;
}
.h360-kick{ color:var(--w); }
.h360-cta{
  display:inline-flex; align-items:center; gap:.65em;
  background:var(--accent); color:#141208; border:none;
  font-family:var(--mono); font-weight:700; font-size:13px;
  letter-spacing:.08em; text-transform:uppercase; text-decoration:none;
  padding:16px 32px;
  box-shadow:0 6px 20px rgba(0,0,0,.35);
  transition:transform .28s var(--ease), box-shadow .28s var(--ease), background .2s;
}
.h360-cta::after{ content:'\2197'; font-size:1.05em; transition:transform .28s var(--ease); }
.h360-cta:hover{ transform:translateY(-3px); box-shadow:0 14px 34px rgba(216,176,64,.34); }
.h360-cta:hover::after{ transform:translate(3px,-3px); }
.h360-cta:active{ transform:translateY(-1px); }
.h360-cta.is-off{ background:var(--bl); color:var(--g); box-shadow:none; cursor:default; }
.h360-cta.is-off::after{ content:none; }
.h360-hint{ transition:opacity .5s var(--ease); }
.h360-hint.off{ opacity:0; }
.h360-load{
  position:absolute; z-index:3; right:clamp(16px,3vw,34px);
  bottom:clamp(18px,4.5vh,46px); color:var(--g);
  font-variant-numeric:tabular-nums;
}
@media(max-width:900px){
  .h360-top{ flex-direction:column; gap:6px; }
  .h360-load{ display:none; }
}
@media(prefers-reduced-motion:reduce){
  .h360{ height:100vh; }           /* sem pista de scroll: frame estático */
}

/* ── PROVA SOCIAL — carrossel horizontal (acelera com o scroll) ── */
.prova{ padding:clamp(70px,13vh,150px) 0 clamp(34px,6vw,80px); overflow:hidden; }
.prova-head{ padding:0 clamp(16px,3vw,40px); max-width:1100px; margin-bottom:clamp(30px,4.5vw,60px); }
.prova-head .t-num{ color:var(--accent); }
.prova-title{
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  letter-spacing:-.03em; line-height:.88; color:var(--w);
  font-size:clamp(40px,7.4vw,110px); margin:12px 0 18px;
}
.prova-sub{ color:var(--g); font-size:clamp(15px,1.5vw,19px); line-height:1.55; max-width:60ch; }
.prova-carousel{ width:100%; overflow:hidden; }
.prova-track{ display:flex; gap:clamp(10px,1.4vw,18px); width:max-content; will-change:transform; }
.prova-slide{
  flex:0 0 auto; width:clamp(230px,26vw,380px); aspect-ratio:4/5;
  overflow:hidden; background:var(--bl); border:1px solid var(--gl);
}
.prova-slide img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ── A PEÇA — produto único em destaque ──────────────────────── */
.solo{ padding:0 clamp(14px,3vw,34px) clamp(30px,5vw,70px); }
.solo-grid{
  display:grid; grid-template-columns:1.05fr 1fr;
  gap:clamp(22px,4.5vw,72px); align-items:center;
}
.solo-media{
  position:relative; display:block; aspect-ratio:3/4; overflow:hidden;
  border:1px solid var(--gl); background:var(--bl);
}
.solo-media img{ width:100%; height:100%; object-fit:cover; display:block; }
/* hover: estampa (padrão) faz crossfade pro mockup vestido */
.solo-media .sm-front{ transition:opacity .5s var(--ease),transform .8s var(--ease); }
.solo-media .sm-back{
  position:absolute; inset:0; opacity:0;
  transition:opacity .5s var(--ease),transform .8s var(--ease);
}
a.solo-media.has-hover:hover .sm-front{ opacity:0; }
a.solo-media.has-hover:hover .sm-back{ opacity:1; }
a.solo-media:hover img{ transform:scale(1.04); }
.solo-media .card-tag{
  position:absolute; top:14px; left:14px; z-index:2;
  font-family:var(--mono); font-weight:500; font-size:10.5px;
  letter-spacing:.06em; text-transform:uppercase; padding:6px 10px;
  border:1px solid var(--gl); background:rgba(15,15,14,.82); color:var(--w);
  backdrop-filter:blur(4px);
}
.solo-media .card-tag.gone{ background:var(--accent); border-color:var(--accent); color:#141208; }
.solo-name{
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  letter-spacing:-.03em; line-height:.95;
  font-size:clamp(30px,4.4vw,64px); margin:10px 0 8px;
}
.solo-cat{ margin-bottom:clamp(14px,2vw,22px); }
.solo-desc{ color:var(--g); font-size:clamp(14px,1.35vw,16px); line-height:1.55; max-width:54ch; }
.solo-rows{ margin-top:clamp(18px,2.4vw,30px); border-top:1px solid var(--gl); }
/* seleção de tamanho na home (mesma linguagem do .p-size do produto) */
.solo-size-row{ display:flex; align-items:center; gap:18px; margin-top:clamp(16px,2.2vw,26px); }
.solo-sizes{ display:flex; gap:8px; flex-wrap:wrap; }
.solo-size{
  min-width:44px; height:44px; padding:0 12px;
  border:1px solid var(--gl); background:transparent;
  font-family:var(--mono); font-weight:600; font-size:15px; color:var(--w);
  cursor:pointer; transition:background .15s,color .15s,border-color .15s;
}
.solo-size:hover{ border-color:var(--w); }
.solo-size.on{ background:var(--accent); border-color:var(--accent); color:#141208; }
.solo-size.out{ color:var(--g); border-style:dashed; cursor:not-allowed; text-decoration:line-through; }
.solo-size-row.shake{ animation:soloShake .4s; }
@keyframes soloShake{ 0%,100%{transform:none} 20%,60%{transform:translateX(-6px)} 40%,80%{transform:translateX(6px)} }
.solo-row{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:18px; padding:12px 0; border-bottom:1px solid var(--gl);
}
.solo-row b{ font-family:var(--mono); font-weight:500; font-size:13px; color:var(--w); text-align:right; }
/* bloco de pagamento: preço grande à esquerda + botão à direita */
.solo-pay{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; flex-wrap:wrap;
  margin-top:clamp(22px,3vw,34px); padding-top:clamp(18px,2.4vw,26px);
  border-top:1px solid var(--gl);
}
.solo-price{ display:flex; flex-direction:column; gap:6px; }
.solo-price .u-label{ color:var(--accent); }   /* "Pré-venda" em dourado */
.solo-price-now{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.solo-price strong{
  font-family:var(--display); font-weight:800; letter-spacing:-.02em;
  font-size:clamp(34px,4.4vw,56px); line-height:.9; color:var(--w);
}
.solo-price-old{
  font-family:var(--mono); font-size:clamp(14px,1.4vw,18px); color:var(--g);
  text-decoration:line-through;
}
.solo-buy{
  display:inline-flex; align-items:center; gap:.6em;
  background:var(--accent); color:#141208; border:none;
  font-family:var(--mono); font-weight:700; font-size:14px;
  letter-spacing:.08em; text-transform:uppercase; text-decoration:none; cursor:pointer;
  padding:18px 40px;
  box-shadow:0 6px 20px rgba(0,0,0,.35);
  transition:transform .28s var(--ease), box-shadow .28s var(--ease);
}
.solo-buy span{ transition:transform .28s var(--ease); }
button.solo-buy:hover,a.solo-buy:hover{ transform:translateY(-3px); box-shadow:0 14px 34px rgba(216,176,64,.34); }
.solo-buy:hover span{ transform:translate(3px,-3px); }
button.solo-buy:active,a.solo-buy:active{ transform:translateY(-1px); }
.solo-buy.is-off{ background:var(--bl); color:var(--g); box-shadow:none; cursor:default; }
@media(max-width:520px){ .solo-pay{ flex-direction:column; align-items:stretch; }
  .solo-buy{ justify-content:center; } }
@media(max-width:900px){
  .solo-grid{ grid-template-columns:1fr; gap:22px; }
  .solo-desc{ max-width:none; }
}