/* ==========================================================================
   ALVA IMPORTS — design tokens
   Paleta: preto quente, creme, vinho (assinatura Alva) e dourado (uso raro)
   ========================================================================== */
:root{
  --bg:            #0B0A09;
  --bg-2:          #151311;
  --text:          #F2ECE2;
  --muted:         #A39C91;
  --brand:         #8E2C2C;
  --brand-hover:   #A33636;
  --gold:          #B08A55;
  --border:        #2A2622;
  --white:         #FFFFFF;
  --black:         #000000;
  --success:       #2BAE66;
  --warning:       #E8A33D;

  --font-display:'Anton', sans-serif;
  --font-label:  'Space Grotesk', sans-serif;
  --font-body:   'Inter', sans-serif;

  --container: 1180px;
  --radius: 0px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:hidden; max-width:100%; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  max-width:100%;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }

.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 24px;
}

/* focus visibility */
a:focus-visible, button:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:3px;
}

/* ==========================================================================
   Tipografia utilitária
   ========================================================================== */
.eyebrow{
  font-family:var(--font-label);
  font-size:12.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--brand);
  margin:0 0 14px;
  display:flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:'';
  width:22px; height:1px;
  background:var(--brand);
  display:inline-block;
}
.eyebrow--center{ justify-content:center; }
.eyebrow--light{ color:var(--brand); }
.eyebrow--light::before{ background:var(--brand); }

.section__title{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(28px,4vw,42px);
  line-height:1.15;
  margin:0 0 20px;
  letter-spacing:-.01em;
  text-transform:uppercase;
}
.section__title--center{ text-align:center; }

.section{ padding:72px 0; } /* ritmo vertical unificado do home (era 96px) */

/* ==========================================================================
   Placeholder de imagem — bloco visual até as fotos reais entrarem
   ========================================================================== */
.placeholder-img{
  position:relative;
  width:100%;
  background:
    linear-gradient(155deg, var(--bg) 0%, #1a1a1a 46%, var(--brand-hover) 100%);
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  border-radius:var(--radius);
}
.placeholder-img::before{
  content:'';
  position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(115deg, rgba(245,245,240,.05) 0 2px, transparent 2px 34px);
  mix-blend-mode:overlay;
}
.placeholder-img__tag{
  position:relative;
  margin:16px;
  padding:7px 12px;
  font-family:var(--font-label);
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--bg);
  background:var(--text);
  border-radius:2px;
}
.placeholder-img--hero{ aspect-ratio:3/4; }
.placeholder-img--cat{ aspect-ratio:3/4; }
.placeholder-img--product{ aspect-ratio:4/5; }

/* ==========================================================================
   Botões
   ========================================================================== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:15px 28px;
  font-family:var(--font-label);
  font-size:13.5px;
  letter-spacing:.05em;
  text-transform:uppercase;
  border-radius:var(--radius);
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .35s var(--ease), background .25s ease, color .25s ease, border-color .25s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }

.btn--primary{ background:var(--brand); color:var(--white); }
.btn--primary:hover{ background:var(--brand-hover); }

.btn--outline{ background:transparent; color:var(--text); border-color:var(--text); }
.btn--outline:hover{ background:var(--text); color:var(--bg); }

.btn--light{ background:var(--text); color:var(--bg); }
.btn--light:hover{ background:var(--brand); color:var(--white); }

.btn--ghost{ background:transparent; color:var(--text); border-color:var(--border); }
.btn--ghost:hover{ background:var(--text); color:var(--bg); border-color:var(--text); }

.btn--block{ width:100%; white-space:normal; text-align:center; line-height:1.3; }
.btn--large{ padding:19px 40px; font-size:14.5px; }

/* Botão "Comprar" do card de produto (Sev7n) — sólido vinho, curto,
   alinhado à esquerda (não --block), sem uppercase agressivo. */
.btn--brand{
  background:var(--brand); color:var(--white);
  padding:10px 22px; font-size:12.5px;
  align-self:flex-start;
}
.btn--brand:hover{ background:var(--brand-hover); }

/* ==========================================================================
   HEADER — 2 linhas (topo: logo/busca/conta/carrinho · categorias centradas)
   ========================================================================== */
.header{
  position:sticky; top:0; z-index:100;
  background:var(--bg);
  border-bottom:1px solid var(--border);
}
.header__top{ background:var(--bg); }
.header__top-inner{
  max-width:var(--container);
  margin:0 auto;
  padding:20px 24px;
  display:flex;
  align-items:center;
  gap:20px;
  transition:padding .25s var(--ease);
}
.header--compact .header__top-inner{ padding:11px 24px; }
.header--compact .brand__word{ font-size:18px; }

.brand{
  display:inline-flex;
  align-items:baseline;
  gap:1px;
  text-decoration:none;
  flex-shrink:0;
}
.brand__word{
  font-family:var(--font-display);
  font-weight:400;
  font-size:22px;
  letter-spacing:.01em;
  text-transform:uppercase;
  transition:font-size .25s var(--ease);
}
.brand__word--cream{ color:var(--text); }
.brand__word--wine{ color:var(--brand); }
.logo--footer{ display:inline-flex; align-items:baseline; gap:1px; margin:0 0 10px; }
.logo--footer .brand__word{ font-size:21px; }

.header__search{
  flex:1 1 auto;
  max-width:560px;
  margin:0 auto;
  position:relative;
  display:flex;
  align-items:center;
}
.header__search-icon{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; color:var(--muted); pointer-events:none;
}
.header__search-input{
  width:100%;
  padding:11px 16px 11px 40px;
  font-family:var(--font-body);
  font-size:13.5px;
  color:var(--text);
  background:var(--bg-2);
  border:1px solid var(--border);
  border-radius:var(--radius);
}
.header__search-input::placeholder{ color:var(--muted); }
.header__search-input:focus{ outline:none; border-color:var(--brand); }

.header__actions{
  display:flex;
  align-items:center;
  gap:14px;
  flex-shrink:0;
}
.header__icon-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px; height:38px;
  color:var(--text);
  flex-shrink:0;
  transition:color .2s ease;
  /* Essa classe também é usada em <button> (gatilho de busca mobile) além
     de <a> — sem isso, o navegador aplica o fundo cinza-claro padrão de
     botão, que aparecia como um quadrado branco no lugar do ícone. */
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
  font:inherit;
}
.header__icon-link:hover{ color:var(--brand); }
.header__icon-link svg{ width:21px; height:21px; }

/* Linha 2 — categorias centralizadas (também é a gaveta mobile: #nav/.nav) */
.header__categories{
  border-top:1px solid var(--border);
  background:var(--bg);
}
.nav{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:28px;
  max-width:var(--container);
  margin:0 auto;
  padding:13px 24px;
}
.nav__link{
  font-family:var(--font-body);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  position:relative;
  padding:4px 0;
  color:var(--text);
}
.nav__link::after{
  content:'';
  position:absolute; left:0; right:0; bottom:0;
  height:1px; background:var(--brand);
  transform:scaleX(0); transform-origin:right;
  transition:transform .3s var(--ease);
}
.nav__link:hover::after{ transform:scaleX(1); transform-origin:left; }

.burger{
  display:none;
  width:34px; height:34px;
  background:none; border:none; cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:6px;
  padding:0;
  flex-shrink:0;
}
.burger span{
  width:24px; height:1.5px; background:var(--text);
  transition:transform .3s var(--ease), opacity .3s ease;
}
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

/* ==========================================================================
   MARQUEE — faixa vinho com texto corrido em loop (CSS puro)
   ========================================================================== */
.marquee{
  background:var(--brand);
  overflow:hidden;
  white-space:nowrap;
  padding:9px 0;
}
.marquee__track{
  display:flex;
  width:max-content;
  animation:marquee-scroll 28s linear infinite;
}
.marquee:hover .marquee__track{
  animation-play-state:paused;
}
.marquee__group{
  display:flex;
  flex-shrink:0;
}
.marquee__item{
  display:inline-flex;
  align-items:center;
  font-family:var(--font-label);
  font-size:12px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text);
  padding:0 28px;
}
.marquee__item::after{
  content:'•';
  margin-left:28px;
  color:rgba(242,236,226,.6);
}
@keyframes marquee-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .marquee__track{ animation:none; }
}

/* ==========================================================================
   HERO — Premium Editorial Refinement
   ========================================================================== */
.hero{
  background:var(--bg);
  padding:76px 0;
  min-height:92vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  position:relative;
}

.hero__inner{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:68px;
  align-items:center;
  max-width:1460px;
  margin:0 auto;
  padding:0 48px;
  width:100%;
}

.hero__text{
  display:flex;
  flex-direction:column;
  animation:fadeInUp .9s var(--ease) .15s both;
}

.hero__eyebrow{
  font-family:var(--font-label);
  font-size:11px;
  font-weight:700;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--text);
  margin:0 0 8px 0;
  opacity:.58;
  position:relative;
  padding-bottom:16px;
}

.hero__eyebrow::after{
  content:'';
  position:absolute;
  bottom:0;
  left:0;
  width:32px;
  height:1px;
  background:var(--text);
  opacity:.4;
}

.hero__title{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(52px, 6.8vw, 80px);
  line-height:1.1;
  letter-spacing:-.015em;
  margin:0 0 30px;
  color:var(--text);
  text-transform:uppercase;
  max-width:520px;
  word-spacing:-0.05em;
}

.hero__description{
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.78;
  max-width:44ch;
  color:var(--muted);
  margin:0 0 50px;
  font-weight:400;
  letter-spacing:.15px;
}

.hero__actions{
  display:flex;
  gap:18px;
  margin-bottom:54px;
  align-items:center;
  flex-wrap:wrap;
}

.hero__actions .btn{
  font-family:var(--font-body);
  font-size:11px;
  font-weight:700;
  letter-spacing:.11em;
  text-transform:uppercase;
  padding:15px 36px;
  border:1.5px solid;
  border-radius:0;
  transition:all .4s var(--ease);
  cursor:pointer;
  position:relative;
  background-clip:padding-box;
}

.btn--hero-primary{
  background:var(--brand);
  color:var(--white);
  border-color:var(--brand);
}

.btn--hero-primary:hover{
  background:var(--brand-hover);
  border-color:var(--brand-hover);
  transform:translateY(-3px);
  box-shadow:0 12px 32px rgba(0,0,0,.4);
}

.btn--hero-primary:active{
  transform:translateY(-1px);
}

.btn--hero-secondary{
  background:transparent;
  color:var(--text);
  border-color:var(--text);
}

.btn--hero-secondary:hover{
  background:var(--text);
  color:var(--bg);
  transform:translateY(-3px);
  box-shadow:0 12px 32px rgba(0,0,0,.4);
}

.btn--hero-secondary:active{
  transform:translateY(-1px);
}

.hero__trust-line{
  font-family:var(--font-label);
  font-size:10px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--text);
  opacity:.48;
  display:flex;
  gap:18px;
  align-items:center;
  flex-wrap:wrap;
}

.hero__trust-line .dot{
  color:var(--text);
  opacity:.25;
  font-size:8px;
}

/* Image Block */
.hero__image-block{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:flex-start;
  gap:28px;
  animation:fadeInScale .9s var(--ease) .3s both;
}

.hero__image-label{
  display:flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-label);
  font-size:9px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--text);
  opacity:.4;
}

.hero__image-number{
  font-size:10px;
  font-weight:700;
  opacity:.5;
}

.hero__image-divider{
  opacity:.25;
  font-weight:400;
}

.hero__image-caption{
  font-size:8px;
  letter-spacing:.15em;
}

/* Colagem editorial — mosaico com peças reais do catálogo, no lugar
   de uma única foto. 1 peça em destaque + 4 peças menores. */
.hero__collage{
  position:relative;
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  grid-template-rows:repeat(2, 1fr);
  gap:12px;
  width:100%;
  aspect-ratio:4/5;
  max-height:680px;
  box-shadow:0 32px 80px rgba(0,0,0,.5);
  animation:slideInImage .9s var(--ease) .35s both;
}
.hero__collage-item{
  position:relative;
  overflow:hidden;
  background:var(--bg-2);
  border:1px solid rgba(245,245,240,.06);
}
.hero__collage-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  transition:transform .7s var(--ease);
}
.hero__collage-item:hover img{ transform:scale(1.06); }
.hero__collage-item--main{ grid-column:1; grid-row:1 / 3; }
.hero__collage-item--a{ grid-column:2; grid-row:1; }
.hero__collage-item--b{ grid-column:3; grid-row:1; }
.hero__collage-item--c{ grid-column:2; grid-row:2; }
.hero__collage-item--d{ grid-column:3; grid-row:2; }

/* Scroll Indicator */
.hero__scroll-indicator{
  position:absolute;
  bottom:14px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  opacity:.35;
  cursor:pointer;
  transition:opacity .4s var(--ease);
  animation:fadeInUp .9s var(--ease) .6s both;
}

.hero__scroll-indicator:hover{
  opacity:.55;
}

.hero__scroll-text{
  font-family:var(--font-label);
  font-size:9px;
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--text);
}

.hero__scroll-arrow{
  color:var(--text);
  animation:bounce 2s ease-in-out infinite;
}

/* Animations */
@keyframes fadeInUp{
  from{
    opacity:0;
    transform:translateY(32px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes fadeInScale{
  from{
    opacity:0;
    transform:scale(.94);
  }
  to{
    opacity:1;
    transform:scale(1);
  }
}

@keyframes slideInImage{
  from{
    opacity:0;
    transform:translateY(32px) scale(.92);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

@keyframes bounce{
  0%, 100%{
    transform:translateY(0);
  }
  50%{
    transform:translateY(-6px);
  }
}

/* ==========================================================================
   CATEGORIAS
   ========================================================================== */
.categories{ background:var(--bg-2); padding:56px 0; }
.categories__subtitle{
  text-align:center;
  font-family:var(--font-body);
  font-size:15.5px;
  color:var(--muted);
  max-width:46ch;
  margin:-6px auto 44px;
  line-height:1.6;
}

.cat-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
}

.cat-card{
  position:relative;
  display:block;
  aspect-ratio:3/4;
  border-radius:14px;
  overflow:hidden;
  isolation:isolate;
  box-shadow:0 1px 2px rgba(0,0,0,.4);
  border:1px solid rgba(245,245,240,.08);
  transition:box-shadow .45s var(--ease), transform .45s var(--ease), border-color .45s var(--ease);
}
.cat-card:hover,
.cat-card:focus-visible{
  transform:translateY(-4px);
  box-shadow:0 20px 40px rgba(0,0,0,.5);
  border-color:rgba(227,30,36,.4);
}

.cat-card__media{
  position:absolute; inset:0;
  overflow:hidden;
}
.cat-card__img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center;
  transition:transform .7s var(--ease), opacity .35s ease;
}
/* Foto do card "Destaques" trocando sozinha em loop (featured.js) */
.cat-card__img.is-fading{ opacity:0; }
.cat-card:hover .cat-card__img,
.cat-card:focus-visible .cat-card__img{
  transform:scale(1.07);
}
.cat-card__overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.84) 100%);
  transition:background .45s var(--ease);
}
.cat-card:hover .cat-card__overlay{
  background:linear-gradient(180deg, rgba(0,0,0,.12) 30%, rgba(0,0,0,.9) 100%);
}

.cat-card__content{
  position:relative;
  z-index:1;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:22px 22px 24px;
  color:var(--text);
}
.cat-card__number{
  font-family:var(--font-label);
  font-size:11px;
  font-weight:700;
  letter-spacing:.16em;
  color:var(--brand);
  margin-bottom:8px;
}
.cat-card__title{
  font-family:var(--font-body);
  font-size:22px;
  font-weight:400;
  margin:0 0 6px;
  letter-spacing:-.01em;
  text-transform:uppercase;
}
.cat-card__tagline{
  font-family:var(--font-body);
  font-size:13px;
  color:rgba(245,245,240,.75);
  margin:0 0 14px;
  line-height:1.5;
}
.cat-card__arrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px; height:34px;
  border-radius:50%;
  border:1px solid rgba(245,245,240,.35);
  color:var(--text);
  font-size:15px;
  transition:transform .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease);
}
.cat-card:hover .cat-card__arrow,
.cat-card:focus-visible .cat-card__arrow{
  transform:translateX(5px);
  background:var(--brand);
  border-color:var(--brand);
  color:var(--white);
}

/* ==========================================================================
   FAIXA DE BENEFÍCIOS
   ========================================================================== */
.beneficios-strip{
  background:var(--bg);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:34px 0;
}
.beneficios-strip__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
}
.beneficios-strip__item{
  display:flex;
  align-items:center;
  gap:14px;
}
.beneficios-strip__icon{
  flex-shrink:0;
  width:26px; height:26px;
  color:var(--brand);
}
.beneficios-strip__item h3{
  font-family:var(--font-body);
  font-size:13.5px;
  font-weight:600;
  letter-spacing:.02em;
  margin:0 0 3px;
  color:var(--text);
}
.beneficios-strip__item p{
  font-family:var(--font-body);
  font-size:12.5px;
  color:var(--muted);
  margin:0;
  line-height:1.4;
}

.produtos__subtitle{
  text-align:center;
  font-family:var(--font-body);
  font-size:15.5px;
  color:var(--muted);
  max-width:46ch;
  margin:-6px auto 36px;
  line-height:1.6;
}

/* ==========================================================================
   VITRINES — "Mais vendidos" + uma por categoria (home). Cabeçalho
   com título + "Ver todos", prateleira de cards em grid responsivo.
   ========================================================================== */
.vitrine__head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:20px;
  margin-bottom:28px;
}
.vitrine__head--center{ flex-direction:column; align-items:center; text-align:center; }
.vitrine__head .section__title{ margin-bottom:0; }
.vitrine__see-all{
  font-family:var(--font-label);
  font-size:12.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--gold);
  white-space:nowrap;
  transition:color .2s ease;
}
.vitrine__see-all:hover{ color:var(--brand); }
.vitrine__block + .vitrine__block{ margin-top:56px; }

/* Vitrine agora é um carrossel horizontal (não grid estático): 4 cards
   visíveis no desktop, 2 no mobile, setas avançam "uma página" por vez.
   Isso evita que uma categoria com menos de 4 produtos deixe buraco vazio
   num grid de 4 colunas — com scroll, só aparecem os itens que existem. */
.shelf{ position:relative; }
.product-shelf{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  gap:28px 20px;
  align-items:stretch;
  scrollbar-width:none;
  padding-bottom:2px;
}
.product-shelf::-webkit-scrollbar{ display:none; }
.product-shelf .product-card{
  flex:0 0 calc((100% - 3 * 20px) / 4);
  scroll-snap-align:start;
}
.shelf__arrow{
  position:absolute;
  top:36%;
  width:40px; height:40px;
  border-radius:50%;
  border:1px solid var(--border);
  background:var(--bg-2);
  color:var(--text);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  z-index:2;
  box-shadow:0 6px 16px rgba(0,0,0,.3);
  transition:background .2s ease, border-color .2s ease, opacity .2s ease;
}
.shelf__arrow:hover{ background:var(--brand); border-color:var(--brand); }
.shelf__arrow--prev{ left:-14px; }
.shelf__arrow--next{ right:-14px; }
.shelf__arrow[hidden]{ display:none; }
.shelf__arrow:disabled{ opacity:.3; cursor:default; pointer-events:none; }

@media (max-width:860px){
  .product-shelf .product-card{ flex:0 0 calc((100% - 14px) / 2); }
  .vitrine__head{ flex-direction:column; align-items:center; text-align:center; gap:8px; }
  .shelf__arrow{ width:32px; height:32px; }
  .shelf__arrow--prev{ left:-8px; }
  .shelf__arrow--next{ right:-8px; }
}

/* ==========================================================================
   PRODUCT CARD — formato Sev7n: foto + texto direto sobre o fundo,
   sem painel/borda. Reutilizado em toda vitrine da home (ver
   product-card.js). Segunda foto faz cross-fade no hover/focus.
   ========================================================================== */
.product-card{
  display:flex;
  flex-direction:column;
  text-align:left;
}
.product-card__media{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:3/4;
  overflow:hidden;
  background:var(--bg-2);
  margin-bottom:14px;
}
.product-card__img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center;
}
.product-card__img--front{ opacity:1; transition:opacity .35s var(--ease); }
.product-card__img--back{ opacity:0; transition:opacity .35s var(--ease); }
.product-card__media:hover .product-card__img--back,
.product-card__media:focus-visible .product-card__img--back{ opacity:1; }
.product-card__media:hover .product-card__img--front,
.product-card__media:focus-visible .product-card__img--front{ opacity:0; }
.product-card__img--placeholder{
  display:flex; align-items:flex-end;
  background:linear-gradient(155deg, var(--bg) 0%, #1a1a1a 46%, var(--brand-hover) 100%);
}

.product-card__name{
  font-family:var(--font-body);
  font-size:14.5px;
  line-height:1.35;
  font-weight:500;
  text-transform:none; /* sentence case — nunca caixa alta no card */
  color:var(--text);
  margin:0 0 6px;
  transition:color .2s ease;
  /* Clampa SEMPRE em 2 linhas e reserva a altura de 2 linhas mesmo quando
     o nome só precisa de 1 — assim a "Comprar" fica na mesma posição em
     toda a prateleira, independente do tamanho do nome. */
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  min-height:calc(1.35em * 2);
}
.product-card__name:hover{ color:var(--gold); }

.product-card__price{
  display:flex; align-items:center; gap:10px;
  margin:0 0 2px;
}
.product-card__price-sale{
  font-family:var(--font-body);
  font-size:16px; font-weight:600;
  color:var(--text);
}
.product-card__badge{
  font-family:var(--font-label);
  font-size:10.5px; font-weight:700;
  letter-spacing:.03em;
  color:var(--white);
  background:var(--brand);
  padding:2px 7px;
  border-radius:2px;
}
.product-card__price-old{
  font-size:12.5px;
  color:var(--muted);
  text-decoration:line-through;
  margin:0 0 6px;
}
.product-card__pix{
  font-size:13px;
  color:var(--text);
  margin:0 0 2px;
}
.product-card__pix strong{ color:var(--gold); font-weight:600; }
.product-card__installments{
  font-size:12px;
  color:var(--muted);
  margin:0 0 12px;
}
/* margin-top:auto empurra preço+CTA pro fim do card — com os cards da
   prateleira em altura igual (align-items:stretch), "Comprar" fica
   sempre na mesma linha horizontal, com ou sem badge/preço antigo. */
.product-card__price{ margin-top:auto; }
.product-card__cta{ margin-top:10px; }

/* ==========================================================================
   CARROSSEL DE PRODUTO (frente / costas)
   Componente genérico e reutilizável — duplique o bloco no HTML
   e preencha nome, preço, tamanho e as duas imagens (frente/costas).
   ========================================================================== */
.p-carousel{
  background:var(--bg-2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.p-carousel__viewport{
  position:relative;
  aspect-ratio:4/5;
  overflow:hidden;
}
.p-carousel__track{
  display:flex;
  width:100%;
  height:100%;
  transition:transform .45s var(--ease);
}
.p-carousel__slide{
  width:100%;
  height:100%;
  flex-shrink:0;
  position:relative;
}
.p-carousel__slide .placeholder-img{
  width:100%; height:100%;
  border-radius:0;
  aspect-ratio:auto;
}
.p-carousel__slide-label{
  position:absolute;
  top:12px; left:12px;
  z-index:2;
  font-family:var(--font-label);
  font-size:10.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  background:rgba(0,0,0,.72);
  color:var(--text);
  padding:5px 10px;
  border-radius:2px;
}
.p-carousel__arrow{
  position:absolute;
  top:50%; transform:translateY(-50%);
  width:34px; height:34px;
  border-radius:50%;
  border:none;
  background:rgba(0,0,0,.65);
  color:var(--text);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  z-index:3;
  transition:background .25s ease;
}
.p-carousel__arrow:hover{ background:var(--brand); color:var(--white); }
.p-carousel__arrow--prev{ left:10px; }
.p-carousel__arrow--next{ right:10px; }
.p-carousel__dots{
  position:absolute;
  bottom:12px; left:0; right:0;
  z-index:3;
  display:flex;
  justify-content:center;
  gap:6px;
}
.p-carousel__dot{
  width:7px; height:7px;
  border-radius:50%;
  border:none;
  background:rgba(245,245,240,.4);
  cursor:pointer;
  padding:0;
}
.p-carousel__dot.is-active{ background:var(--text); }
.p-carousel__body{
  padding:18px 20px;
  display:flex;
  flex-direction:column;
}
.p-carousel__body > .whatsapp-link{ margin-top:4px; }
.p-carousel__name{
  font-family:var(--font-body);
  font-size:18px; font-weight:400;
  line-height:1.28;
  margin:0 0 6px;
  min-height:calc(1.28em * 2);
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  text-transform:uppercase;
}
.p-carousel__meta{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  font-family:var(--font-body);
  font-size:13px;
  padding:20px 0;
  margin:4px 0 16px;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.p-carousel__price{ font-weight:600; color:var(--brand); }
.p-carousel__price-old{
  font-size:11.5px;
  color:var(--muted);
  text-decoration:line-through;
  margin-left:6px;
}
.p-carousel__price-note{
  font-family:var(--font-body);
  font-size:11px;
  color:var(--muted);
  margin-left:5px;
}
.p-carousel__category{
  font-family:var(--font-body);
  font-size:11.5px;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 8px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.p-carousel__tags{
  display:flex;
  align-items:center;
  flex-wrap:nowrap;
  gap:8px;
  min-height:22px;
  margin:0 0 8px;
}
.p-carousel__tags .p-carousel__category{ margin:0; min-width:0; flex-shrink:1; }
.p-carousel__tags .p-badge{ flex-shrink:0; }

/* Badge discreto de tipo de peça (ex.: Tailandesa / Nacional Premium) */
.p-badge{
  display:inline-flex;
  align-items:center;
  font-family:var(--font-label);
  font-size:10px;
  font-weight:600;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--brand);
  border:1px solid rgba(227,30,36,.4);
  border-radius:2px;
  padding:3px 8px;
  white-space:nowrap;
}

/* Preço à vista + no cartão + parcelamento */
.p-price{
  display:flex;
  flex-direction:column;
  gap:7px;
  padding:14px 0;
  margin:4px 0 16px;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
/* Evita duplicar a linha quando o bloco de tamanho vem logo após o preço
   (o card fechado não usa mais .p-price — isso vale só para o modal) */
.p-price + .p-modal__meta{
  border-top:none;
  padding-top:0;
  margin-top:0;
}
.p-price__line{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:7px;
}
.p-price__value{
  font-family:var(--font-body);
  font-weight:400;
  font-size:17px;
  color:var(--brand);
}
.p-price__line--card .p-price__value{
  font-size:14px;
  color:var(--muted);
}
.p-price__label{
  font-family:var(--font-label);
  font-size:11.5px;
  letter-spacing:.02em;
  color:var(--muted);
}
.p-price__old{
  font-family:var(--font-body);
  font-size:11.5px;
  color:var(--muted);
  text-decoration:line-through;
}
.p-price--modal .p-price__value{ font-size:20px; }
.p-price--modal .p-price__line--card .p-price__value{ font-size:16px; }

.p-carousel__notes{
  font-size:12.5px;
  color:var(--muted);
  margin:0 0 12px;
}
.p-carousel__availability{
  font-family:var(--font-body);
  font-size:11.5px;
  letter-spacing:.03em;
  color:var(--success);
  margin:0 0 12px;
  min-height:1.5em;
}
.p-carousel__details{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-family:var(--font-body);
  font-size:11px;
  letter-spacing:.04em;
  color:var(--brand);
  margin:0 0 12px;
  transition:color .2s ease;
}
.p-carousel__details::after{
  content:'→';
  transition:transform .25s var(--ease);
}
.p-carousel:hover .p-carousel__details{ color:var(--brand-hover); }
.p-carousel:hover .p-carousel__details::after{ transform:translateX(3px); }

/* ==========================================================================
   MODAL DE DETALHES DO PRODUTO
   ========================================================================== */
.p-modal{
  position:fixed; inset:0;
  z-index:300;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(0,0,0,.82);
}
.p-modal.is-open{ display:flex; }
.p-modal__dialog{
  position:relative;
  background:var(--bg-2);
  width:100%;
  max-width:880px;
  max-height:90vh;
  overflow-y:auto;
  overflow-x:hidden;
  border-radius:2px;
  border:1px solid var(--border);
}
.p-modal__close{
  position:absolute;
  top:12px; right:12px;
  z-index:2;
  width:36px; height:36px;
  border-radius:50%;
  border:none;
  background:rgba(0,0,0,.72);
  color:var(--text);
  font-size:22px;
  line-height:1;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.p-modal__content{
  display:grid;
  grid-template-columns:1.1fr 1fr;
}
.p-modal__gallery .p-carousel__viewport{ height:100%; }

/* Só no desktop (a grade de 2 colunas — no mobile o modal já empilha
   em 1 coluna e nunca teve esse problema): sem min-width:0, o selo
   (Tailandesa/Nacional Premium) + o preço à vista/cartão das camisas
   de time podiam forçar a coluna de texto a ficar mais larga que o
   espaço disponível, empurrando o modal inteiro para fora da tela. */
@media (min-width: 721px){
  .p-modal__content{
    overflow-x:hidden;
  }
  .p-modal__gallery,
  .p-modal__info{
    min-width:0;
    max-width:100%;
    overflow-x:hidden;
  }
  .p-modal__info *{
    max-width:100%;
  }
}
.p-modal__info{
  padding:36px 34px;
  display:flex;
  flex-direction:column;
}
.p-modal__actions{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.p-modal__name{
  font-family:var(--font-body);
  font-size:26px; font-weight:400;
  margin:0 0 14px;
  text-transform:uppercase;
}
.p-modal__desc{
  font-size:14.5px;
  color:var(--muted);
  line-height:1.7;
  margin:0 0 20px;
}
.p-modal__meta{
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
  padding:14px 0;
  margin-bottom:14px;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.p-modal__price{ font-family:var(--font-body); font-size:20px; font-weight:400; color:var(--brand); }
.p-modal__price-old{ font-size:13px; color:var(--muted); text-decoration:line-through; margin-left:8px; }
.p-modal__sizes{ font-family:var(--font-body); font-size:13px; color:var(--muted); }
.p-modal__payment-note{
  font-family:var(--font-body);
  font-size:11.5px;
  letter-spacing:.02em;
  color:var(--muted);
  margin:0 0 16px;
  line-height:1.5;
}

@media (max-width: 720px){
  .p-modal__content{ grid-template-columns:1fr; }
  .p-modal__gallery .p-carousel__viewport{ aspect-ratio:4/5 !important; }
  .p-modal__info{ padding:26px 22px; }
}

/* ==========================================================================
   CATÁLOGO — busca, filtros, estado vazio, aviso de demonstração
   ========================================================================== */
.catalogo-demo-aviso{
  max-width:620px;
  margin:0 auto 32px;
  padding:12px 18px;
  background:var(--bg-2);
  border-left:2px solid var(--brand);
  font-family:var(--font-body);
  font-size:12.5px;
  color:var(--muted);
  text-align:center;
}
.catalogo-demo-aviso code{
  font-family:var(--font-label);
  background:rgba(245,245,240,.08);
  padding:1px 5px;
  border-radius:2px;
}

.catalogo-info-strip{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
  margin:0 0 28px;
  font-family:var(--font-label);
  font-size:11px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}
.catalogo-info-strip__divider{
  color:var(--brand);
  opacity:.7;
  font-size:9px;
}

.catalogo-busca{
  max-width:420px;
  margin:0 auto 24px;
}
.catalogo-busca input{
  width:100%;
  padding:12px 16px;
  font-family:var(--font-body);
  font-size:14px;
  border:1px solid var(--border);
  border-radius:2px;
  background:var(--bg-2);
  color:var(--text);
}
.catalogo-busca input:focus{
  outline:none;
  border-color:var(--brand);
}

.catalogo-filtros{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  margin-bottom:36px;
}
.catalogo-filtros__group{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
}
.catalogo-chip{
  font-family:var(--font-body);
  font-size:12px;
  letter-spacing:.03em;
  padding:8px 16px;
  border-radius:20px;
  border:1px solid var(--border);
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.catalogo-chip:hover{ border-color:var(--brand); color:var(--text); }
.catalogo-chip.is-active{
  background:var(--text);
  border-color:var(--text);
  color:var(--bg);
}

.catalogo-empty{
  grid-column:1/-1;
  text-align:center;
  padding:60px 20px;
}
.catalogo-empty__icon{
  display:block;
  font-size:28px;
  color:var(--brand);
  margin-bottom:14px;
}
.catalogo-empty__title{
  font-family:var(--font-body);
  font-size:20px; font-weight:400;
  margin:0 0 8px;
  text-transform:uppercase;
}
.catalogo-empty__text{
  font-size:13.5px;
  color:var(--muted);
  margin:0;
}
.p-carousel__sizes{ color:var(--muted); }

/* ==========================================================================
   NOVOS DROPS — vitrine editorial premium
   ========================================================================== */
.drops{
  position:relative;
  background:var(--bg);
  color:var(--text);
  padding:120px 0;
  overflow:hidden;
}
.drops__bg{
  position:absolute; inset:0;
  background:
    radial-gradient(58% 55% at 80% 28%, rgba(227,30,36,.14) 0%, transparent 68%),
    radial-gradient(42% 42% at 12% 88%, rgba(245,245,240,.05) 0%, transparent 72%);
  pointer-events:none;
}
.drops__bg::after{
  content:'';
  position:absolute; inset:0;
  opacity:.05;
  background-image:repeating-linear-gradient(115deg, rgba(245,245,240,.6) 0 1px, transparent 1px 3px);
  mix-blend-mode:overlay;
}

.drops__inner{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:center;
}

.drops__content{ max-width:460px; }

.drops__badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-label);
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--brand);
  padding:7px 14px;
  border:1px solid rgba(227,30,36,.4);
  border-radius:20px;
  margin-bottom:24px;
}
.drops__badge::before{
  content:'';
  width:5px; height:5px;
  border-radius:50%;
  background:var(--brand);
  flex-shrink:0;
}

.drops__title{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(34px,4.4vw,52px);
  line-height:1.08;
  letter-spacing:-.01em;
  margin:0 0 20px;
  text-transform:uppercase;
}
.drops__title-line{ display:block; }
.drops__title-line--accent{ color:var(--brand); font-style:normal; }

.drops__text{
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.75;
  color:rgba(245,245,240,.68);
  max-width:40ch;
  margin:0 0 40px;
}

.drops__cta{
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-family:var(--font-label);
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--white);
  background:var(--brand);
  padding:16px 26px;
  border:1px solid var(--brand);
  border-radius:var(--radius);
  transition:background .35s var(--ease), color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
.drops__cta:hover,
.drops__cta:focus-visible{
  background:transparent;
  color:var(--brand);
  transform:translateY(-2px);
  box-shadow:0 14px 32px rgba(0,0,0,.5);
}
.drops__cta-arrow{ transition:transform .35s var(--ease); }
.drops__cta:hover .drops__cta-arrow,
.drops__cta:focus-visible .drops__cta-arrow{ transform:translateX(5px); }

/* Composição visual — grade de peças em destaque, cada uma com
   foto, marca, nome, preço, tamanho e CTA de WhatsApp */
.drops__visual{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:20px;
}
.drop-card{
  display:flex;
  flex-direction:column;
  background:var(--bg-2);
  border:1px solid rgba(245,245,240,.08);
  border-radius:6px;
  overflow:hidden;
  box-shadow:0 16px 40px rgba(0,0,0,.4);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.drop-card:hover{
  transform:translateY(-4px);
  box-shadow:0 22px 50px rgba(0,0,0,.5);
}
.drop-card__media{
  aspect-ratio:1/1;
  overflow:hidden;
}
.drop-card__media img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:transform .7s var(--ease);
}
.drop-card:hover .drop-card__media img{ transform:scale(1.06); }

.drop-card__body{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:16px 16px 18px;
}
.drop-card__brand{
  font-family:var(--font-label);
  font-size:9.5px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--brand);
  margin:0;
}
.drop-card__name{
  font-family:var(--font-body);
  font-size:15px;
  font-weight:400;
  line-height:1.3;
  color:var(--text);
  margin:0;
  text-transform:uppercase;
}
.drop-card__meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-family:var(--font-body);
  font-size:12px;
  padding-top:8px;
  border-top:1px solid rgba(245,245,240,.1);
}
.drop-card__price{ font-weight:700; color:var(--text); }
.drop-card__size{ color:rgba(245,245,240,.5); }

.drop-card__cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:4px;
  padding:11px 14px;
  font-family:var(--font-body);
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--bg);
  background:var(--text);
  border-radius:var(--radius);
  transition:background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.drop-card__cta:hover,
.drop-card__cta:focus-visible{
  background:var(--brand);
  color:var(--white);
  transform:translateY(-1px);
}

/* Entrada suave + stagger, acionado pelo mesmo sistema de "reveal" do site */
.drops__inner.reveal .drops__badge,
.drops__inner.reveal .drops__title,
.drops__inner.reveal .drops__text,
.drops__inner.reveal .drops__cta{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.drops__inner.is-visible .drops__badge{ opacity:1; transform:none; transition-delay:.05s; }
.drops__inner.is-visible .drops__title{ opacity:1; transform:none; transition-delay:.15s; }
.drops__inner.is-visible .drops__text{ opacity:1; transform:none; transition-delay:.25s; }
.drops__inner.is-visible .drops__cta{ opacity:1; transform:none; transition-delay:.35s; }

.drops__inner.reveal .drops__visual{
  opacity:0;
  transform:translateY(18px) scale(.97);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay:.2s;
}
.drops__inner.is-visible .drops__visual{ opacity:1; transform:none; }

/* ==========================================================================
   DEPOIMENTOS
   ========================================================================== */
.testi-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin-bottom:40px;
}
.testi-card{
  margin:0;
  padding:30px 26px;
  background:var(--bg-2);
  border-left:2px solid var(--brand);
  border-radius:0 2px 2px 0;
}
.testi-card__quote{
  font-family:var(--font-body);
  font-style:normal;
  font-size:17px;
  line-height:1.5;
  margin:0 0 16px;
  text-transform:none;
}
.testi-card__name{
  font-family:var(--font-body);
  font-size:12.5px;
  letter-spacing:.03em;
  color:var(--muted);
}

/* ==========================================================================
   PROVA SOCIAL — declaração editorial + galeria preparada para
   depoimentos e fotos reais de clientes (ver templates comentados
   no index.html, seção #depoimentos)
   ========================================================================== */
.prova-social__subtitle{
  text-align:center;
  font-family:var(--font-body);
  font-size:15.5px;
  color:var(--muted);
  max-width:46ch;
  margin:-6px auto 48px;
  line-height:1.6;
}

/* --- Passo a passo (escolha / experiência / compartilhe) --- */
.prova-social__steps{
  position:relative;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:0;
  max-width:640px;
  margin:0 auto 64px;
  padding:0;
}
.prova-social__steps::before{
  content:'';
  position:absolute;
  top:19px;
  left:calc(100% / 6);
  right:calc(100% / 6);
  height:1px;
  background:var(--border);
  z-index:0;
}
.prova-social__step{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:12px;
  flex:1;
  min-width:0;
}
.prova-social__step-number{
  display:flex;
  align-items:center;
  justify-content:center;
  width:38px; height:38px;
  border-radius:50%;
  border:1px solid var(--border);
  font-family:var(--font-label);
  font-size:12px;
  font-weight:600;
  letter-spacing:.04em;
  color:var(--brand);
  background:var(--bg-2);
}
.prova-social__step-label{
  font-family:var(--font-label);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0;
  max-width:14ch;
}

/* --- Composição: espaço reservado + convite para compartilhar --- */
.prova-social__composition{
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:52px;
  align-items:stretch;
  max-width:980px;
  margin:0 auto;
}

.prova-social__frame-visual{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:340px;
  border-radius:4px;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(62% 55% at 80% 20%, rgba(227,30,36,.14) 0%, transparent 65%),
    radial-gradient(42% 40% at 12% 90%, rgba(245,245,240,.05) 0%, transparent 70%),
    linear-gradient(160deg, var(--bg) 0%, var(--bg-2) 55%, #0d0d0d 100%);
}
.prova-social__frame-visual::before{
  content:'';
  position:absolute; inset:0;
  opacity:.05;
  background-image:repeating-linear-gradient(115deg, rgba(245,245,240,.6) 0 1px, transparent 1px 3px);
  mix-blend-mode:overlay;
}
.prova-social__frame-corner{
  position:absolute;
  inset:22px;
  border:1px solid rgba(227,30,36,.3);
  pointer-events:none;
}
.prova-social__frame-inner{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  padding:0 40px;
  text-align:center;
}
.prova-social__frame-icon{
  width:30px; height:30px;
  color:var(--brand);
  opacity:.8;
}
.prova-social__frame-caption{
  font-family:var(--font-body);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(245,245,240,.55);
  margin:0;
  line-height:1.6;
}

/* Quando uma foto real substituir a composição acima */
.prova-social__frame-visual--photo{ background:var(--bg-2); }
.prova-social__frame-visual--photo img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}

.prova-social__content{
  display:flex;
  flex-direction:column;
  justify-content:center;
  margin:0;
  padding:4px 0;
}
.prova-social__heading{
  font-family:var(--font-display);
  font-style:normal;
  font-weight:400;
  font-size:clamp(23px,2.4vw,28px);
  line-height:1.32;
  color:var(--text);
  margin:0 0 18px;
  text-transform:uppercase;
}
.prova-social__text{
  font-family:var(--font-body);
  font-style:normal;
  font-size:15.5px;
  line-height:1.75;
  color:var(--muted);
  max-width:46ch;
  margin:0 0 32px;
}
.prova-social__cta{ align-self:flex-start; }

/* ==========================================================================
   SOBRE — apresentação editorial da marca
   ========================================================================== */
.sobre{ padding:72px 0; background:var(--bg-2); }
.sobre__inner{
  display:grid;
  grid-template-columns:5fr 6fr;
  grid-template-rows:auto auto;
  column-gap:80px;
  row-gap:0;
  align-items:start;
}

/* --- Composição visual (abstrata, não é foto) --- */
.sobre__visual{
  position:relative;
  grid-column:1;
  grid-row:1 / 3;
  aspect-ratio:4/5;
  border-radius:4px;
  overflow:hidden;
  isolation:isolate;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(68% 55% at 78% 18%, rgba(227,30,36,.14) 0%, transparent 62%),
    radial-gradient(45% 40% at 10% 92%, rgba(245,245,240,.05) 0%, transparent 70%),
    linear-gradient(160deg, var(--bg) 0%, #121212 55%, #0d0d0d 100%);
}
.sobre__visual::before{
  content:'';
  position:absolute; inset:0;
  opacity:.05;
  background-image:repeating-linear-gradient(115deg, rgba(245,245,240,.6) 0 1px, transparent 1px 3px);
  mix-blend-mode:overlay;
}
.sobre__visual-logo{
  position:relative;
  z-index:1;
  width:56%;
  max-width:260px;
  height:auto;
  object-fit:contain;
  border:1px solid rgba(227,30,36,.3);
  border-radius:3px;
  box-shadow:0 24px 50px rgba(0,0,0,.5);
  transition:transform .6s var(--ease);
}
.sobre__visual:hover .sobre__visual-logo{ transform:scale(1.03); }
.sobre__visual-frame{
  position:absolute;
  inset:28px;
  border:1px solid rgba(227,30,36,.3);
  pointer-events:none;
}

/* --- Conteúdo institucional --- */
.sobre__text{
  grid-column:2;
  grid-row:1;
  max-width:560px;
}
.sobre__title{ margin-bottom:22px; }
.sobre__p{
  font-size:17px;
  line-height:1.75;
  color:var(--muted);
  max-width:52ch;
  margin:0 0 48px;
}

.sobre__pillars{
  display:flex;
  flex-direction:column;
  border-top:1px solid var(--border);
  margin:0;
  padding:0;
}
.sobre__pillar{
  display:grid;
  grid-template-columns:130px 1fr;
  gap:24px;
  padding:22px 0;
  border-bottom:1px solid var(--border);
  align-items:baseline;
}
.sobre__pillar-label{
  font-family:var(--font-label);
  font-size:12px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--brand);
}
.sobre__pillar-text{
  font-size:14.5px;
  line-height:1.6;
  color:var(--muted);
  margin:0;
}

/* --- Frase de impacto + CTA --- */
.sobre__closing{
  grid-column:2;
  grid-row:2;
  max-width:560px;
}
.sobre__statement{
  position:relative;
  font-family:var(--font-display);
  font-style:normal;
  font-weight:400;
  font-size:clamp(22px,2.4vw,28px);
  color:var(--text);
  margin:48px 0 36px;
  padding-top:30px;
  text-transform:uppercase;
}
.sobre__statement-rule{
  position:absolute;
  top:0; left:0;
  height:1px;
  width:56px;
  background:var(--brand);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .8s var(--ease);
}
.sobre__inner.is-visible .sobre__statement-rule{ transform:scaleX(1); }

.sobre__cta{
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.sobre__cta-arrow{ transition:transform .35s var(--ease); }
.sobre__cta:hover .sobre__cta-arrow,
.sobre__cta:focus-visible .sobre__cta-arrow{ transform:translateX(5px); }

/* ==========================================================================
   BENEFÍCIOS
   ========================================================================== */
.beneficio-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--border);
  border:1px solid var(--border);
}
.beneficio-card{
  background:var(--bg-2);
  padding:36px 28px;
}
.beneficio-card__icon{
  color:var(--brand);
  font-size:14px;
  display:block;
  margin-bottom:18px;
}
.beneficio-card h3{
  font-family:var(--font-body);
  font-size:18px; font-weight:400;
  margin:0 0 8px;
  text-transform:uppercase;
}
.beneficio-card p{
  font-size:14px; color:var(--muted); margin:0;
}
.beneficio-card p + p{
  margin-top:8px;
  font-size:12.5px;
  color:var(--muted);
  opacity:.75;
}

/* ==========================================================================
   INSTAGRAM
   ========================================================================== */
.instagram{ background:var(--bg); color:var(--text); padding:72px 0; text-align:center; }
.instagram__title{
  font-family:var(--font-display);
  font-size:clamp(26px,4vw,38px);
  font-weight:400;
  max-width:20ch; margin:0 auto 10px;
  text-transform:uppercase;
}
.instagram__handle{
  font-family:var(--font-label);
  color:var(--brand);
  letter-spacing:.04em;
  margin:0 0 32px;
}

/* ==========================================================================
   CTA FINAL
   ========================================================================== */
.cta-final{ padding:72px 0; text-align:center; }
.cta-final__title{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(30px,4.6vw,48px);
  margin:0 0 14px;
  text-transform:uppercase;
}
.cta-final__text{
  font-size:16px; color:var(--muted);
  max-width:46ch; margin:0 auto 34px;
}

/* ==========================================================================
   FOOTER — colunas (loja/institucional/contato) + pagamento/envio + copyright
   ========================================================================== */
.footer{ background:var(--bg); color:var(--text); padding:64px 0 28px; border-top:1px solid var(--border); }

.footer__grid{
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr 1fr;
  gap:32px;
  padding-bottom:36px;
  border-bottom:1px solid var(--border);
}
.footer__col-title{
  font-family:var(--font-label);
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--gold);
  margin:0 0 18px;
}
.footer__col-links{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.footer__col-links a{
  font-family:var(--font-body);
  font-size:13px;
  letter-spacing:.01em;
  color:rgba(242,236,226,.72);
  transition:color .2s ease;
}
.footer__col-links a:hover{ color:var(--brand); }

.footer__brand-col .logo--footer{ margin-bottom:14px; }
.footer__brand-text{
  font-family:var(--font-body);
  font-size:13.5px;
  line-height:1.6;
  color:var(--muted);
  max-width:34ch;
  margin:0 0 18px;
}
.footer__contact-item{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-body);
  font-size:13.5px;
  color:rgba(242,236,226,.78);
  margin:0 0 12px;
}
.footer__contact-item a{ color:inherit; }
.footer__contact-item a:hover{ color:var(--brand); }
.footer__contact-item svg{ width:18px; height:18px; flex-shrink:0; color:var(--brand); }

.footer__meta{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:28px;
  padding:28px 0;
}
.footer__meta-group{ display:flex; flex-direction:column; gap:10px; }
.footer__meta-label{
  font-family:var(--font-label);
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
}
.footer__chip-row{ display:flex; flex-wrap:wrap; gap:8px; }
.footer__chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 12px;
  font-family:var(--font-label);
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--muted);
  background:var(--bg-2);
  border:1px solid var(--border);
  border-radius:3px;
}

.footer__copy{
  text-align:center; margin:24px 0 0;
  font-family:var(--font-body);
  font-size:12px; color:rgba(242,236,226,.4);
}

@media (max-width: 860px){
  .footer__grid{ grid-template-columns:1fr 1fr; gap:32px; }
  .footer__brand-col{ grid-column:1/-1; }
  .footer__meta{ flex-direction:column; }
}
@media (max-width: 560px){
  .footer__grid{ grid-template-columns:1fr; gap:30px; }
}

/* ==========================================================================
   BOTÃO FLUTUANTE WHATSAPP
   ========================================================================== */
.wa-float{
  position:fixed;
  right:20px; bottom:20px;
  width:56px; height:56px;
  background:#25D366;
  color:#fff;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 26px rgba(0,0,0,.5);
  z-index:200;
  transition:transform .3s var(--ease);
}
.wa-float:hover{ transform:scale(1.07); }

@media (max-width: 620px){
  .wa-float{ right:16px; bottom:16px; width:50px; height:50px; }
}

/* ==========================================================================
   ÍCONE DO CARRINHO (header)
   ========================================================================== */
.cart-trigger{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px; height:38px;
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
  color:var(--text);
  flex-shrink:0;
  transition:color .25s ease;
}
.cart-trigger:hover{ color:var(--brand); }
.cart-trigger__icon{ width:22px; height:22px; }
.cart-trigger__badge{
  position:absolute;
  top:-3px; right:-6px;
  min-width:17px;
  height:17px;
  padding:0 4px;
  border-radius:9px;
  background:var(--brand);
  color:var(--white);
  font-family:var(--font-label);
  font-size:10px;
  font-weight:700;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 0 0 2px var(--bg);
}
.cart-trigger__badge[hidden]{ display:none; }

/* ==========================================================================
   SELETOR DE TAMANHO (card do catálogo + modal de detalhes)
   ========================================================================== */
.p-sizepicker{
  display:flex;
  flex-wrap:nowrap;
  gap:6px;
  margin:0 0 12px;
  overflow-x:auto;
}
.p-sizepicker__btn{
  flex-shrink:0;
  min-width:34px;
  height:32px;
  padding:0 8px;
  font-family:var(--font-body);
  font-size:12px;
  font-weight:600;
  letter-spacing:.02em;
  color:var(--muted);
  background:var(--bg-2);
  border:1px solid var(--border);
  border-radius:2px;
  cursor:pointer;
  transition:border-color .2s ease, color .2s ease, background .2s ease;
}
.p-sizepicker__btn:hover{ border-color:var(--brand); color:var(--text); }
.p-sizepicker__btn.is-selected{
  background:var(--text);
  border-color:var(--text);
  color:var(--bg);
}
.p-sizepicker--attention .p-sizepicker__btn{ animation:sizepicker-attention .5s ease; }
@keyframes sizepicker-attention{
  0%, 100%{ border-color:var(--border); }
  50%{ border-color:var(--brand); }
}

/* Feedback discreto ao adicionar ao carrinho */
.js-add-to-cart{ transition:background .3s ease, color .3s ease, border-color .3s ease; }
.js-add-to-cart.is-added{
  background:var(--success);
  border-color:var(--success);
  color:#fff;
}

/* ==========================================================================
   CARRINHO — DRAWER
   ========================================================================== */
.cart-drawer{
  position:fixed;
  inset:0;
  z-index:400;
  display:none;
}
.cart-drawer.is-open{ display:block; }
.cart-drawer__backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.65);
  opacity:0;
  transition:opacity .35s var(--ease);
}
.cart-drawer.is-open .cart-drawer__backdrop{ opacity:1; }
.cart-drawer__panel{
  position:absolute;
  top:0; right:0;
  height:100%;
  width:min(440px, 100%);
  background:var(--bg-2);
  display:flex;
  flex-direction:column;
  box-shadow:-24px 0 60px rgba(0,0,0,.5);
  transform:translateX(100%);
  transition:transform .4s var(--ease);
  border-left:1px solid var(--border);
}
.cart-drawer.is-open .cart-drawer__panel{ transform:translateX(0); }
.cart-drawer__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:22px 24px;
  border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.cart-drawer__title{
  font-family:var(--font-body);
  font-size:22px;
  font-weight:400;
  margin:0;
  text-transform:uppercase;
}
.cart-drawer__close{
  width:36px; height:36px;
  border-radius:50%;
  border:none;
  background:var(--bg);
  color:var(--text);
  font-size:20px;
  line-height:1;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s ease;
}
.cart-drawer__close:hover{ background:var(--brand); color:var(--white); }
.cart-drawer__body{
  flex:1;
  overflow-y:auto;
  padding:20px 24px 24px;
  display:flex;
  flex-direction:column;
}

/* Lista de itens */
.cart-items{
  display:flex;
  flex-direction:column;
  gap:18px;
  margin:0 0 20px;
}
.cart-item{
  display:grid;
  grid-template-columns:72px 1fr;
  gap:14px;
  padding-bottom:18px;
  border-bottom:1px solid var(--border);
  transition:opacity .3s ease, transform .3s ease;
  animation:cart-item-in .4s var(--ease) both;
}
.cart-item.is-removing{ opacity:0; transform:translateX(12px); }
@keyframes cart-item-in{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:translateY(0); }
}
.cart-item__media{
  width:72px; height:90px;
  border-radius:2px;
  overflow:hidden;
  background:var(--bg);
  flex-shrink:0;
}
.cart-item__media img{ width:100%; height:100%; object-fit:cover; }
.cart-item__info{
  display:flex;
  flex-direction:column;
  min-width:0;
}
.cart-item__name{
  font-family:var(--font-body);
  font-size:15px;
  font-weight:400;
  margin:0 0 4px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  text-transform:uppercase;
}
.cart-item__size{
  font-family:var(--font-body);
  font-size:11.5px;
  color:var(--muted);
  margin:0 0 6px;
}
.cart-item__row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:auto;
}
.cart-item__price{
  font-family:var(--font-body);
  font-size:13px;
  font-weight:600;
  color:var(--brand);
}
.cart-item__qty{
  display:flex;
  align-items:center;
  gap:0;
  border:1px solid var(--border);
  border-radius:2px;
}
.cart-item__qty-btn{
  width:28px; height:28px;
  border:none;
  background:transparent;
  color:var(--text);
  font-size:15px;
  line-height:1;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s ease;
}
.cart-item__qty-btn:hover{ background:var(--bg); }
.cart-item__qty-value{
  min-width:22px;
  text-align:center;
  font-family:var(--font-label);
  font-size:13px;
  font-weight:600;
}
.cart-item__remove{
  align-self:flex-start;
  margin-top:6px;
  font-family:var(--font-body);
  font-size:11px;
  letter-spacing:.03em;
  color:var(--muted);
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:2px;
}
.cart-item__remove:hover{ color:var(--brand); }

/* Rodapé — subtotal / total / CTAs */
.cart-drawer__footer{
  margin-top:auto;
  padding-top:18px;
  border-top:1px solid var(--border);
  flex-shrink:0;
}
.cart-drawer__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-family:var(--font-label);
  font-size:13.5px;
  color:var(--muted);
  margin-bottom:8px;
}
.cart-drawer__row--total{
  font-size:18px;
  font-weight:600;
  color:var(--text);
  font-family:var(--font-display);
  margin-bottom:20px;
  text-transform:uppercase;
}
.cart-drawer__row--total .cart-drawer__value{ color:var(--brand); }
.cart-drawer__actions{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.cart-drawer__continue{
  text-align:center;
  font-family:var(--font-body);
  font-size:12.5px;
  letter-spacing:.03em;
  color:var(--muted);
  background:none;
  border:none;
  cursor:pointer;
  padding:8px;
}
.cart-drawer__continue:hover{ color:var(--text); }

/* Estado vazio */
.cart-empty{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:2px;
  padding:40px 12px;
}
.cart-empty__icon{
  width:44px; height:44px;
  color:var(--brand);
  opacity:.6;
  margin-bottom:10px;
}
.cart-empty__title{
  font-family:var(--font-body);
  font-size:19px;
  font-weight:400;
  margin:0;
  text-transform:uppercase;
}
.cart-empty__text{
  font-size:14px;
  color:var(--muted);
  margin:6px 0 18px;
  max-width:28ch;
}

/* ==========================================================================
   Scroll reveal
   ========================================================================== */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */
@media (max-width: 1024px){
  .cat-grid{ grid-template-columns:repeat(2,1fr); }
  .product-grid{ grid-template-columns:repeat(2,1fr); }
  .beneficio-grid{ grid-template-columns:repeat(2,1fr); }
  .beneficios-strip__grid{ grid-template-columns:repeat(2,1fr); row-gap:26px; }
  .testi-grid{ grid-template-columns:1fr; }

  .sobre{ padding:60px 0; }
  .sobre__inner{ grid-template-columns:1fr; row-gap:40px; column-gap:0; }
  .sobre__text{ grid-column:1; grid-row:auto; order:1; max-width:100%; }
  .sobre__visual{ grid-column:1; grid-row:auto; order:2; aspect-ratio:16/10; max-width:520px; margin:0 auto; }
  .sobre__closing{ grid-column:1; grid-row:auto; order:3; max-width:100%; }
  .sobre__visual-logo{ max-width:220px; }

  .drops__inner{ grid-template-columns:1fr; gap:56px; }
  .drops__content{ max-width:100%; }
  .drops__visual{ max-width:640px; width:100%; margin:0 auto; }

  .prova-social__steps{ max-width:520px; }
  .prova-social__composition{ grid-template-columns:1fr; gap:36px; max-width:560px; }
  .prova-social__frame-visual{ min-height:280px; }
  .prova-social__content{ text-align:center; align-items:center; }
  .prova-social__text{ margin-left:auto; margin-right:auto; }
  .prova-social__cta{ align-self:center; }
}

@media (max-width: 960px){
  .header__categories{ border-top:none; background:transparent; }
  .nav{
    position:fixed; inset:66px 0 0 0;
    background:var(--bg);
    flex-direction:column;
    flex-wrap:nowrap; /* sem isso, herda flex-wrap:wrap do desktop e os
      itens "quebram" pra uma segunda coluna assim que enchem a altura da
      gaveta, cortando o texto dos links mais compridos */
    align-items:flex-start;
    justify-content:flex-start;
    padding:36px 24px;
    gap:26px;
    transform:translateX(100%);
    transition:transform .4s var(--ease);
    overflow-y:auto;
    z-index:99;
  }
  .nav.is-open{ transform:translateX(0); }
  .nav__link{ font-size:18px; }
  .burger{ display:flex; }
  .header__actions{ gap:8px; }
  .header__icon-link{ width:32px; height:32px; }
  .cart-trigger{ width:32px; height:32px; }
  .cart-trigger__icon{ width:20px; height:20px; }
  .header__search{ max-width:none; }

  .hero{ padding:60px 0; min-height:auto; }
  .hero__inner{ grid-template-columns:1fr; gap:48px; padding:0 32px; }
  .hero__title{ font-size:clamp(40px, 5vw, 56px); }
  .hero__description{ font-size:16px; }
  .hero__actions{ gap:16px; }
  .hero__actions .btn{ padding:13px 28px; font-size:11px; }
  .hero__collage{ max-height:420px; gap:10px; }

  .section{ padding:48px 0; }
}

@media (max-width: 620px){
  .cart-drawer__panel{ width:100%; }
  .cart-item{ grid-template-columns:64px 1fr; gap:12px; }
  .cart-item__media{ width:64px; height:80px; }
  .cat-grid{ grid-template-columns:1fr; gap:16px; }
  .cat-card{ aspect-ratio:4/3; }
  .categories__subtitle{ font-size:14px; padding:0 8px; }
  .beneficios-strip{ padding:28px 0; }
  .beneficios-strip__grid{ grid-template-columns:1fr; gap:20px; }
  .produtos__subtitle{ font-size:14px; padding:0 8px; }
  .catalogo-info-strip{
    flex-direction:column;
    gap:6px;
    font-size:10px;
    margin-bottom:24px;
  }
  .catalogo-info-strip__divider{ display:none; }
  .p-price__value{ font-size:16px; }
  .p-price--modal .p-price__value{ font-size:18px; }
  .product-grid{ grid-template-columns:1fr; }
  .beneficio-grid{ grid-template-columns:1fr; }
  .footer__inner{ flex-direction:column; align-items:flex-start; }

  .hero{ padding:48px 0; min-height:auto; }
  .hero__inner{ grid-template-columns:1fr; gap:40px; padding:0 20px; }
  .hero__text{ animation:fadeInUp .8s var(--ease) .1s both; }
  .hero__eyebrow{ font-size:10px; margin-bottom:18px; padding-bottom:12px; }
  .hero__eyebrow::after{ width:24px; height:0.5px; }
  .hero__title{ font-size:clamp(32px, 4vw, 44px); margin-bottom:20px; line-height:1.15; max-width:100%; }
  .hero__description{ font-size:14px; margin-bottom:36px; max-width:100%; line-height:1.7; }
  .hero__actions{ flex-direction:column; width:100%; gap:10px; margin-bottom:40px; }
  .hero__actions .btn{ width:100%; text-align:center; padding:13px 24px; font-size:10px; }
  .hero__trust-line{ font-size:8.5px; gap:10px; margin-top:-8px; }
  .hero__trust-line .dot{ font-size:6px; }
  .hero__image-block{ gap:18px; align-items:center; }
  .hero__image-label{ font-size:8px; gap:6px; }
  .hero__collage{ max-height:340px; gap:8px; }
  .hero__scroll-indicator{ opacity:.2; bottom:8px; }
  .hero__scroll-text{ font-size:8px; }

  .drops{ padding:64px 0; }
  .drops__inner{ gap:36px; }
  .drops__badge{ font-size:9.5px; padding:6px 12px; margin-bottom:18px; }
  .drops__title{ font-size:clamp(30px,8vw,40px); margin-bottom:16px; }
  .drops__text{ font-size:14.5px; max-width:100%; margin-bottom:30px; }
  .drops__cta{ width:100%; justify-content:center; padding:15px 24px; }
  .drops__visual{ max-width:100%; grid-template-columns:1fr; gap:16px; }
  .drop-card__media{ aspect-ratio:4/3; }
  .drop-card__name{ font-size:14.5px; }
  .drop-card__cta{ padding:13px 14px; }

  .prova-social__subtitle{ font-size:14px; padding:0 8px; }
  .prova-social__steps{
    flex-direction:column;
    align-items:center;
    gap:20px;
    max-width:100%;
    margin-bottom:44px;
  }
  .prova-social__steps::before{ display:none; }
  .prova-social__composition{ gap:28px; }
  .prova-social__frame-visual{ min-height:220px; }
  .prova-social__frame-inner{ padding:0 24px; }
  .prova-social__frame-caption{ font-size:10.5px; }
  .prova-social__heading{ font-size:22px; }
  .prova-social__text{ font-size:14.5px; padding:0 4px; }
  .prova-social__cta{ width:100%; justify-content:center; }

  .sobre{ padding:48px 0; }
  .sobre__inner{ row-gap:32px; }
  .sobre__title{ margin-bottom:16px; }
  .sobre__p{ font-size:15px; margin-bottom:36px; }
  .sobre__visual{ aspect-ratio:4/3; max-width:100%; }
  .sobre__visual-frame{ inset:16px; }
  .sobre__visual-logo{ max-width:170px; }
  .sobre__pillar{ grid-template-columns:1fr; gap:6px; padding:18px 0; }
  .sobre__statement{ font-size:20px; margin:36px 0 28px; }
  .sobre__cta{ width:100%; justify-content:center; }
}

/* Telas muito estreitas (320–380px): protege o header contra overflow
   horizontal agora que o ícone do carrinho soma-se ao menu hambúrguer. */
@media (max-width: 380px){
  .header__top-inner{ padding:14px 16px; gap:10px; }
  .brand__word{ font-size:16px; }
  .header__search-input{ padding:9px 12px 9px 34px; font-size:12.5px; }
}

/* ==========================================================================
   BANNER DE COOKIES — fixo no rodapé da tela, controlado por script.js
   ========================================================================== */
.cookie-banner{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:500;
  display:none;
  background:var(--bg-2);
  border-top:1px solid var(--border);
  box-shadow:0 -10px 30px rgba(0,0,0,.4);
}
.cookie-banner.is-visible{ display:block; }
.cookie-banner__inner{
  max-width:var(--container);
  margin:0 auto;
  padding:18px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
}
.cookie-banner__text{
  font-family:var(--font-body);
  font-size:13px;
  line-height:1.5;
  color:var(--muted);
  margin:0;
  max-width:62ch;
}
.cookie-banner__btn{
  flex-shrink:0;
  font-family:var(--font-label);
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--white);
  background:var(--brand);
  border:none;
  padding:11px 26px;
  border-radius:var(--radius);
  cursor:pointer;
  transition:background .25s ease;
}
.cookie-banner__btn:hover{ background:var(--brand-hover); }

@media (max-width: 620px){
  .cookie-banner__inner{ flex-direction:column; align-items:stretch; text-align:center; }
  .cookie-banner__btn{ width:100%; }
}

/* ==========================================================================
   HERO CAROUSEL — edge-to-edge, full width, sem margem de container.
   Slides/placeholders são montados em JS (catalog.js/initHeroCarousel)
   a partir de window.AlvaStoreConfig.banners.
   ========================================================================== */
.hero-carousel{
  position:relative;
  width:100%;
  overflow:hidden;
  background:var(--bg-2);
}
.hero-carousel__viewport{ width:100%; overflow:hidden; }
.hero-carousel__track{
  display:flex;
  width:100%;
  transition:transform .6s var(--ease);
}
.hero-carousel__slide{
  flex:0 0 100%;
  width:100%;
  aspect-ratio:1920/700;
  position:relative;
}
@media (max-width:767px){
  .hero-carousel__slide{ aspect-ratio:800/1000; }
}
.hero-carousel__link{ display:block; width:100%; height:100%; }
.hero-carousel__picture{ display:block; width:100%; height:100%; }
.hero-carousel__picture img{ width:100%; height:100%; object-fit:cover; object-position:center; }

.hero-carousel__placeholder{
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  background:
    linear-gradient(155deg, var(--bg) 0%, #1a1a1a 46%, var(--bg-2) 100%);
  border:1px solid var(--border);
}
.hero-carousel__placeholder-text{
  font-family:var(--font-label);
  font-size:14px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--gold);
}
.hero-carousel__placeholder-text--mobile{ display:none; }
@media (max-width:767px){
  .hero-carousel__placeholder-text--desktop{ display:none; }
  .hero-carousel__placeholder-text--mobile{ display:inline; }
}

/* Banner gerado (sem arte do cliente ainda) — fundo escuro + fotos reais
   de produto + título/subtítulo/CTA, nunca uma caixa vazia. */
.hero-generated{
  position:relative;
  width:100%; height:100%;
  display:flex; align-items:center;
  overflow:hidden;
  background:linear-gradient(155deg, var(--bg) 0%, #1a1a1a 55%, var(--bg-2) 100%);
}
.hero-generated__photos{
  position:absolute; inset:0;
  display:flex;
  opacity:.55;
}
.hero-generated__photo{
  flex:1 1 0;
  height:100%;
  overflow:hidden;
  border-left:1px solid rgba(0,0,0,.35);
}
.hero-generated__photo img{ width:100%; height:100%; object-fit:cover; object-position:top center; }
.hero-generated__overlay{
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(11,10,9,.92) 0%, rgba(11,10,9,.55) 45%, rgba(11,10,9,.15) 100%);
}
.hero-generated__content{
  position:relative;
  z-index:2;
  max-width:560px;
  padding:0 6vw;
  color:var(--text);
}
.hero-generated__title{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(28px,4.4vw,52px);
  text-transform:uppercase;
  letter-spacing:.01em;
  margin:0 0 14px;
  line-height:1.08;
}
.hero-generated__subtitle{
  font-family:var(--font-body);
  font-size:clamp(13px,1.6vw,16px);
  color:var(--muted);
  max-width:40ch;
  margin:0 0 24px;
  line-height:1.55;
}
.hero-generated__cta{ display:inline-flex; }
@media (max-width:767px){
  .hero-generated__photos{ opacity:.4; }
  .hero-generated__content{ max-width:100%; padding:0 24px; }
}

.hero-carousel__arrow{
  position:absolute;
  top:50%; transform:translateY(-50%);
  width:44px; height:44px;
  border-radius:50%;
  border:1px solid rgba(242,236,226,.3);
  background:rgba(11,10,9,.55);
  color:var(--text);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  z-index:2;
  transition:background .2s ease, border-color .2s ease;
}
.hero-carousel__arrow:hover{ background:var(--brand); border-color:var(--brand); }
.hero-carousel__arrow--prev{ left:16px; }
.hero-carousel__arrow--next{ right:16px; }

.hero-carousel__dots{
  position:absolute;
  left:0; right:0; bottom:16px;
  display:flex; justify-content:center; gap:8px;
  z-index:2;
}
.hero-carousel__dot{
  width:9px; height:9px;
  border-radius:50%;
  border:1px solid rgba(242,236,226,.6);
  background:rgba(242,236,226,.25);
  cursor:pointer;
  padding:0;
}
.hero-carousel__dot.is-active{ background:var(--brand); border-color:var(--brand); }

@media (max-width:600px){
  .hero-carousel__arrow{ width:36px; height:36px; }
}

/* ==========================================================================
   BOLHA "NOSSA HISTÓRIA" — fixa, aparece ao rolar. Reaproveita a
   estrutura .p-modal para o modal do vídeo (classe story-modal).
   ========================================================================== */
.story-bubble{
  position:fixed;
  left:20px;
  top:50%;
  transform:translateY(-50%) scale(.85);
  width:100px; height:100px;
  border-radius:50%;
  background:var(--bg-2);
  border:2px solid var(--brand);
  color:var(--text);
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  cursor:pointer;
  z-index:150;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .35s var(--ease), transform .35s var(--ease);
  box-shadow:0 10px 24px rgba(0,0,0,.4);
}
.story-bubble.is-visible{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(-50%) scale(1);
}
.story-bubble--photo{
  background-size:cover;
  background-position:center;
}
.story-bubble__ring{
  position:absolute; inset:-2px;
  border-radius:50%;
  border:1px solid var(--brand-hover);
  opacity:.5;
}
.story-bubble__label{
  font-family:var(--font-label);
  font-size:11px;
  font-weight:600;
  letter-spacing:.03em;
  text-transform:uppercase;
  line-height:1.3;
}
@media (max-width:720px){
  .story-bubble{ width:76px; height:76px; left:12px; }
  .story-bubble__label{ font-size:9px; }
}

.story-modal__dialog{ max-width:900px; background:var(--bg); }
.story-modal__body{
  padding:28px;
  display:flex;
}
.story-modal__video{
  width:100%;
  max-height:80vh;
  background:#000;
}

/* ==========================================================================
   CATEGORIAS — tiles pequenos (~150px), lado a lado, centralizados,
   rolagem horizontal com snap no mobile.
   ========================================================================== */
.cat-tiles-wrap{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
}
.cat-tiles__arrow{
  flex:0 0 auto;
  width:38px; height:38px;
  border-radius:50%;
  border:1px solid var(--border);
  background:var(--bg-2);
  color:var(--text);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease, opacity .2s ease;
}
.cat-tiles__arrow:hover{ background:var(--brand); border-color:var(--brand); }
.cat-tiles__arrow[hidden]{ display:none; }
.cat-tiles__arrow:disabled{ opacity:.35; cursor:default; pointer-events:none; }

.cat-tiles{
  display:flex;
  flex-wrap:nowrap;
  justify-content:center;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  gap:22px;
  flex:1 1 auto;
  scrollbar-width:none;
}
.cat-tiles::-webkit-scrollbar{ display:none; }
.cat-tile{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:150px;
  flex:0 0 auto;
  scroll-snap-align:start;
}
.cat-tile__media{
  position:relative;
  display:block;
  width:150px; height:150px;
  border-radius:16px;
  overflow:hidden;
  background:var(--bg-2);
  border:1px solid var(--border);
}
.cat-tile__img{
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  transition:transform .4s var(--ease);
}
.cat-tile:hover .cat-tile__img{ transform:scale(1.08); }
.cat-tile__btn{
  position:absolute;
  left:50%; bottom:14px;
  transform:translateX(-50%);
  background:var(--brand);
  color:var(--white);
  font-family:var(--font-label);
  font-size:9.5px;
  font-weight:700;
  letter-spacing:.05em;
  padding:5px 12px;
  border-radius:2px;
  white-space:nowrap;
}
.cat-tile__caption{
  margin-top:10px;
  font-family:var(--font-body);
  font-size:12.5px;
  font-weight:500;
  color:var(--text);
  text-align:center;
}

@media (max-width:720px){
  .cat-tiles{
    justify-content:flex-start;
    padding-bottom:6px;
    margin:0 -24px;
    padding-left:24px;
    padding-right:24px;
  }
  .cat-tiles__arrow{ display:none; } /* mobile usa swipe nativo (scroll-snap) */
}

/* ==========================================================================
   FAIXA DE MARCAS — logos em escala de cinza/creme (CSS filter),
   some inteira quando window.AlvaStoreConfig.brandLogos está vazio.
   ========================================================================== */
.brand-strip{ padding:48px 0; border-top:1px solid var(--border); }
.brand-strip__row{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:40px;
}
.brand-strip__item img{
  max-height:34px;
  width:auto;
  filter:grayscale(1) brightness(1.4) sepia(.3);
  opacity:.75;
  transition:opacity .2s ease, filter .2s ease;
}
.brand-strip__item img:hover{ opacity:1; filter:grayscale(0); }

/* ==========================================================================
   NEWSLETTER — substitui o antigo CTA "Falar no WhatsApp" nesta
   posição (antes do rodapé). Sem backend nesta etapa — "Enviar" é
   um stub (ver catalog.js/initNewsletter).
   ========================================================================== */
.newsletter{
  padding:56px 0;
  background:var(--bg-2);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.newsletter__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  flex-wrap:wrap;
}
.newsletter__title{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(32px,5vw,52px);
  text-transform:uppercase;
  margin:0;
  flex:0 0 auto;
}
.newsletter__form-wrap{ flex:1 1 380px; min-width:280px; }
.newsletter__text{
  font-family:var(--font-body);
  font-size:14.5px;
  color:var(--muted);
  margin:0 0 14px;
}
.newsletter__form{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.newsletter__input{
  flex:1 1 220px;
  min-width:180px;
  padding:13px 16px;
  background:var(--bg);
  border:1px solid var(--border);
  color:var(--text);
  font-family:var(--font-body);
  font-size:14px;
  border-radius:var(--radius);
}
.newsletter__input::placeholder{ color:var(--muted); }
.newsletter__input:focus{ outline:none; border-color:var(--brand); }
.newsletter__submit{
  padding:13px 26px;
  background:var(--brand);
  color:var(--white);
  border:none;
  font-family:var(--font-label);
  font-size:13px;
  letter-spacing:.05em;
  text-transform:uppercase;
  cursor:pointer;
  border-radius:var(--radius);
  transition:background .2s ease;
}
.newsletter__submit:hover{ background:var(--brand-hover); }
.newsletter__msg{
  margin:14px 0 0;
  font-size:13px;
  color:var(--gold);
}
@media (max-width:720px){
  .newsletter__inner{ flex-direction:column; align-items:flex-start; text-align:left; }
}

/* ==========================================================================
   FOOTER — ícones de pagamento/envio em SVG local (img/payment/),
   dentro de chips claros arredondados (fundo do rodapé é escuro).
   Representações genéricas — NÃO são as marcas oficiais das
   bandeiras/transportadoras (pendência real de conteúdo do cliente).
   ========================================================================== */
.footer__icon-row{ display:flex; flex-wrap:wrap; gap:8px; }
.footer__pay-icon{
  width:52px; height:auto;
  border-radius:6px;
  display:block;
}

/* ==========================================================================
   PÁGINAS INTERNAS — categoria.html, produto.html, checkout.html,
   institucionais. Reaproveitam tokens/padrões já definidos acima
   (--bg/--text/--brand/--border, .container, .btn, .section__title,
   .p-sizepicker, .product-shelf) — nada reinventado aqui, só o
   necessário para o layout específico de cada página nova.
   ========================================================================== */

/* Breadcrumb — usado em categoria/produto/institucionais */
.breadcrumb{
  display:flex; align-items:center; gap:8px;
  font-size:12.5px; color:var(--muted);
  margin:24px 0 8px;
}
.breadcrumb a{ color:var(--muted); text-decoration:none; }
.breadcrumb a:hover{ color:var(--text); }

/* ---------------- categoria.html ---------------- */
.categoria-head{ margin:4px 0 24px; }
.categoria-head__count{ color:var(--muted); font-size:13px; margin-top:4px; }

.categoria-layout{
  display:grid;
  grid-template-columns:240px 1fr;
  gap:40px;
  padding-bottom:72px;
  align-items:start;
}

.categoria-filters{
  display:flex; flex-direction:column; gap:22px;
}
.categoria-filters__head{ display:none; }
.categoria-filter-group__title{
  font-size:12.5px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--muted); margin-bottom:10px;
}
.categoria-filter-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.categoria-filter-empty{ color:var(--muted); font-size:13px; }
.categoria-chip{
  padding:7px 12px;
  border:1px solid var(--border);
  background:transparent; color:var(--text);
  border-radius:999px; font-size:13px; cursor:pointer;
}
.categoria-chip:hover{ border-color:var(--brand); }
.categoria-chip.is-selected{ background:var(--brand); border-color:var(--brand); color:var(--white); }
.categoria-filter-price{ display:flex; align-items:center; gap:8px; }
.categoria-filter-price input{
  width:100%; padding:9px 10px; background:var(--bg-2);
  border:1px solid var(--border); color:var(--text); border-radius:6px;
}
.categoria-filter-price span{ color:var(--muted); font-size:12.5px; }

.categoria-toolbar{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:18px; gap:12px;
}
.categoria-toolbar__filters-btn{ display:none; }
.categoria-toolbar__sort{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); margin-left:auto; }
.categoria-toolbar__sort select{
  padding:8px 10px; background:var(--bg-2); color:var(--text);
  border:1px solid var(--border); border-radius:6px;
}

.product-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:28px 20px;
}
.categoria-empty{ text-align:center; padding:60px 0; }
.categoria-empty__title{ font-size:20px; margin-bottom:8px; }
.categoria-empty__text{ color:var(--muted); margin-bottom:18px; }

.categoria-pagination{ display:flex; justify-content:center; gap:8px; margin-top:36px; }
.categoria-page-btn{
  width:36px; height:36px; border-radius:6px;
  border:1px solid var(--border); background:transparent; color:var(--text);
  cursor:pointer;
}
.categoria-page-btn.is-active{ background:var(--brand); border-color:var(--brand); color:var(--white); }

@media (max-width:980px){
  .product-grid{ grid-template-columns:repeat(2, 1fr); }
  .categoria-layout{ grid-template-columns:1fr; }
  .categoria-toolbar__filters-btn{ display:inline-flex; }
  .categoria-filters__head{
    display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;
  }
  .categoria-filters__close{ background:none; border:none; color:var(--text); font-size:22px; cursor:pointer; }
  .categoria-filters{
    position:fixed; inset:0 20% 0 0; z-index:90;
    background:var(--bg); padding:20px; overflow-y:auto;
    transform:translateX(-100%); transition:transform .25s ease;
  }
  .categoria-filters.is-open{ transform:translateX(0); }
}
@media (max-width:540px){
  .product-grid{ grid-template-columns:repeat(2, 1fr); gap:20px 12px; }
  .categoria-filters{ inset:0; }
}

/* ---------------- produto.html ---------------- */
.produto-layout{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:48px;
  padding:24px 0 56px;
}
.produto-layout[hidden]{ display:none; }
.produto-gallery__main{
  aspect-ratio:4/5; overflow:hidden; border-radius:4px;
  background:var(--bg-2); cursor:zoom-in;
}
.produto-gallery__main img{ width:100%; height:100%; object-fit:cover; display:block; }
.produto-gallery__thumbs{ display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }
.produto-gallery__thumb{
  width:64px; height:80px; padding:0; border-radius:4px; overflow:hidden;
  border:2px solid transparent; cursor:pointer; background:var(--bg-2);
}
.produto-gallery__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.produto-gallery__thumb.is-active{ border-color:var(--brand); }

.produto-info__category{ color:var(--muted); font-size:13px; text-transform:uppercase; letter-spacing:.04em; margin-bottom:6px; }
.produto-info__name{ font-size:26px; font-weight:500; margin-bottom:16px; }

.produto-price{ display:flex; align-items:center; gap:10px; font-size:26px; font-weight:600; margin-bottom:6px; }
.produto-price__old{ font-size:15px; color:var(--muted); text-decoration:line-through; font-weight:400; }
.produto-pix{ font-size:14.5px; margin-bottom:2px; }
.produto-installments{ font-size:13.5px; color:var(--muted); margin-bottom:20px; }

.produto-sizes{ margin-bottom:20px; }
.produto-sizes__label, .produto-qty__label{ font-size:13px; color:var(--muted); margin-bottom:8px; }
.produto-sizes__warning{ font-size:12.5px; color:var(--brand); font-weight:600; margin:8px 0 0; }
.produto-qty{ margin-bottom:24px; }
.produto-qty__stepper{
  display:inline-flex; align-items:center; border:1px solid var(--border); border-radius:6px;
}
.produto-qty__stepper button{
  width:36px; height:36px; background:none; border:none; color:var(--text); font-size:18px; cursor:pointer;
}
.produto-qty__stepper span{ min-width:40px; text-align:center; display:inline-block; }

.produto-actions{ display:flex; flex-direction:column; gap:10px; margin-bottom:28px; }

.produto-cep{ margin-bottom:28px; padding:16px; border:1px solid var(--border); border-radius:6px; }
.produto-cep__label{ font-size:13px; color:var(--muted); margin-bottom:10px; }
.produto-cep__row{ display:flex; gap:8px; }
.produto-cep__row input{
  flex:1; padding:10px; background:var(--bg-2); border:1px solid var(--border); color:var(--text); border-radius:6px;
}
.produto-cep__result{ margin-top:10px; font-size:13.5px; color:var(--muted); }

.cart-shipping{ margin:16px 0; padding:14px; border:1px solid var(--border); border-radius:6px; }
.cart-shipping__label{ font-size:12.5px; color:var(--muted); margin-bottom:8px; }
.cart-shipping__row{ display:flex; gap:8px; }
.cart-shipping__row input{
  flex:1; padding:9px; background:var(--bg-2); border:1px solid var(--border); color:var(--text); border-radius:6px; font-size:13.5px;
}
.cart-shipping__row button{ white-space:nowrap; }
.cart-shipping__result{ margin-top:9px; font-size:13px; color:var(--muted); }

.produto-description{ font-size:14.5px; line-height:1.7; color:var(--muted); }
.produto-description h2{ color:var(--text); font-size:18px; margin-bottom:10px; }
/* Toggle "Ler mais/menos" só existe como acordeão no mobile (ver media
   query abaixo) — no desktop a descrição já aparece sempre aberta, então
   o botão fica escondido mesmo depois do JS tirar o atributo hidden. */
.produto-description__toggle{ display:none; }

.produto-measures{ padding:40px 0; border-top:1px solid var(--border); }
.produto-measures__note{ color:var(--muted); font-size:13.5px; margin:10px 0 20px; max-width:640px; }
.produto-measures__table-wrap{ overflow-x:auto; }
.produto-measures__table{ width:100%; border-collapse:collapse; font-size:13.5px; }
.produto-measures__table th, .produto-measures__table td{
  padding:10px 14px; border:1px solid var(--border); text-align:center;
}
.produto-measures__table th{ color:var(--muted); font-weight:500; }

.produto-related{ padding:40px 0 64px; border-top:1px solid var(--border); }
.produto-related .product-shelf{ margin-top:20px; }

.produto-lightbox{
  position:fixed; inset:0; display:none; align-items:center; justify-content:center;
  background:rgba(0,0,0,.9); z-index:200; padding:24px;
}
.produto-lightbox.is-open{ display:flex; }
.produto-lightbox img{ max-width:100%; max-height:90vh; object-fit:contain; }
.produto-lightbox__close{
  position:absolute; top:20px; right:24px; background:none; border:none;
  color:var(--white); font-size:32px; cursor:pointer; line-height:1;
}

@media (max-width:860px){
  .produto-layout{ grid-template-columns:1fr; gap:28px; }
}

/* ---------------- checkout.html ---------------- */
.header--checkout .header__top-inner{ justify-content:space-between; }
.header__checkout-label{ color:var(--muted); font-size:14px; }

.checkout-layout{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr);
  gap:48px;
  padding:32px 0 72px;
  align-items:start;
}
.checkout-section{ margin-bottom:32px; }
.checkout-section__title{ font-size:17px; margin-bottom:16px; font-weight:500; }
.checkout-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.checkout-field{ display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--muted); }
.checkout-field input{
  padding:11px 12px; background:var(--bg-2); border:1px solid var(--border);
  color:var(--text); border-radius:6px; font-size:14.5px;
}
.checkout-cep-row{ display:flex; gap:8px; }
.checkout-cep-row input{
  flex:1; padding:11px 12px; background:var(--bg-2); border:1px solid var(--border);
  color:var(--text); border-radius:6px;
}
.checkout-cep-msg, .checkout-coupon-msg{ font-size:13px; color:var(--muted); margin-top:8px; }

.checkout-payment-placeholder{
  padding:18px; border:1px dashed var(--border); border-radius:6px; margin-bottom:16px;
}
.checkout-payment-placeholder__title{ font-weight:500; margin-bottom:6px; }
.checkout-payment-placeholder__text{ color:var(--muted); font-size:13.5px; margin-bottom:12px; }

.checkout-error{
  padding:12px 14px; border:1px solid var(--brand); border-radius:6px;
  background:rgba(139,0,0,.08); color:var(--text); font-size:13.5px; margin-bottom:16px;
}
.checkout-payment-loading{ color:var(--muted); font-size:13.5px; padding:12px 0; }
#checkout-payment-brick{ min-height:40px; }

.order-status-page{ padding:32px 0 64px; }
.order-status-card{
  max-width:640px; margin:0 auto; border:1px solid var(--border); border-radius:8px; padding:28px;
}
.order-status-card__icon{ font-size:40px; margin-bottom:12px; }
.order-status-card__title{ font-size:22px; margin-bottom:8px; }
.order-status-card__text{ color:var(--muted); font-size:14px; margin-bottom:20px; }
.order-status-lines{ display:flex; flex-direction:column; gap:10px; margin:16px 0; padding:16px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.order-status-line{ display:flex; justify-content:space-between; font-size:14px; }
.order-status-total{ display:flex; justify-content:space-between; font-weight:600; font-size:16px; margin:12px 0 20px; }
.order-status-actions{ display:flex; flex-direction:column; gap:10px; margin-top:20px; }
.order-status-pix{ text-align:center; margin:20px 0; }
.order-status-pix img{ max-width:220px; width:100%; margin:0 auto 12px; display:block; }
.order-status-pix__code{
  width:100%; padding:10px; font-size:12px; word-break:break-all; background:var(--bg-2);
  border:1px solid var(--border); border-radius:6px; color:var(--text); resize:none;
}
.order-status-pix__expiry{ font-size:13px; color:var(--muted); margin-top:8px; }

.checkout-summary{
  position:sticky; top:24px;
  border:1px solid var(--border); border-radius:6px; padding:24px;
}
.checkout-summary__title{ font-size:17px; margin-bottom:16px; }
/* Toggle "Ver resumo · RX" só existe no mobile (ver media query abaixo);
   no desktop o resumo já aparece sempre aberto, como antes desta etapa. */
.checkout-summary__toggle{ display:none; }
.checkout-summary__lines{ display:flex; flex-direction:column; gap:10px; margin-bottom:16px; }
.checkout-summary__line{ display:flex; justify-content:space-between; font-size:13.5px; gap:10px; }
.checkout-summary__line small{ color:var(--muted); }
.checkout-summary__total{
  display:flex; justify-content:space-between; font-size:18px; font-weight:600;
  border-top:1px solid var(--border); padding-top:14px; margin-bottom:12px;
}
.checkout-summary__note{ font-size:12.5px; color:var(--muted); }

@media (max-width:900px){
  .checkout-layout{ grid-template-columns:1fr; }
  .checkout-summary{ position:static; order:-1; }
  .checkout-grid{ grid-template-columns:1fr; }
}

/* ---------------- páginas institucionais ---------------- */
.institucional-container{ max-width:760px; padding:8px 0 72px; }
.institucional-prose{ font-size:15px; line-height:1.75; color:var(--muted); }
.institucional-prose h2{ color:var(--text); font-size:19px; margin:28px 0 10px; font-weight:500; }
.institucional-prose a{ color:var(--brand); }
.institucional-prose a:hover{ color:var(--brand-hover); }

/* ==========================================================================
   NAVEGAÇÃO/UX — "← Voltar", breadcrumb (reaproveita .breadcrumb já
   existente), botão "←" do header mobile, itens extras da gaveta mobile
   e "Voltar ao topo". Etapa de polimento de navegação.
   ========================================================================== */

/* Link "← Voltar", acima do breadcrumb em produto/categoria/institucionais */
.back-link{
  display:inline-flex; align-items:center; gap:4px;
  font-size:12.5px; color:var(--muted); text-decoration:none;
  margin-top:20px; cursor:pointer;
}
.back-link:hover{ color:var(--brand); }
.back-link + .breadcrumb{ margin-top:4px; }

/* Botão "←" do header, só aparece no mobile (ver media query abaixo),
   à esquerda da marca — mesmo alvo de toque mínimo de 44×44px. */
.header-back-btn{
  display:none;
  width:44px; height:44px;
  align-items:center; justify-content:center;
  background:none; border:none; color:var(--text); cursor:pointer;
  flex-shrink:0; padding:0; margin-right:-6px;
}
.header-back-btn svg{ width:22px; height:22px; }
.header-back-btn:hover{ color:var(--brand); }

@media (max-width: 960px){
  .header-back-btn{ display:flex; }
}

/* Itens extras da gaveta mobile (Início, Meus pedidos, Sobre, Contato,
   WhatsApp) — só existem para a gaveta; escondidos na barra de
   categorias do desktop, que reaproveita o mesmo #nav/.nav. */
.nav__link--mobile-only{ display:none; }
@media (max-width: 960px){
  .nav__link--mobile-only{ display:inline-block; }
}

/* Botões "Aplicar"/"Limpar filtros" no rodapé da gaveta de filtros mobile */
.categoria-filters__bottom{
  display:flex; flex-direction:column; gap:10px; margin-top:auto; padding-top:16px;
}

/* "Voltar ao topo" — discreto, sempre acima do botão flutuante do
   WhatsApp (que fica em right/bottom 20px, 56px de lado — ver .wa-float),
   nunca sobrepondo ele. */
.back-to-top{
  position:fixed;
  right:20px; bottom:92px;
  width:44px; height:44px;
  border-radius:50%;
  background:var(--bg-2);
  border:1px solid var(--border);
  color:var(--text);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s ease;
  z-index:199;
}
.back-to-top.is-visible{ opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top:hover{ border-color:var(--brand); color:var(--brand); }
.back-to-top svg{ width:20px; height:20px; }

@media (max-width: 620px){
  .back-to-top{ right:16px; bottom:76px; width:40px; height:40px; }
}

/* ---------------- 404.html ---------------- */
.not-found-page{ text-align:center; }
.not-found{ padding:32px 0 56px; display:flex; flex-direction:column; align-items:center; }
.not-found__code{
  font-family:var(--font-display); font-size:88px; line-height:1;
  color:var(--brand); margin:0 0 8px; letter-spacing:.02em;
}
.not-found__text{ color:var(--muted); max-width:460px; margin:0 auto 24px; }
.not-found__links{ margin-top:48px; }
.not-found__links-title{ color:var(--muted); font-size:13px; margin-bottom:14px; }
.not-found__cats{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px 22px; }

/* ==========================================================================
   PASSO DE POLIMENTO MOBILE (360/390/414/768px) — etapa dedicada, feita
   DEPOIS do desktop já aprovado. TUDO aqui está dentro de @media(max-width)
   usando os MESMOS breakpoints já adotados no resto do arquivo (960/860/
   767/720/620/600/540) — nenhuma regra nova fora de media query altera
   seletor usado no desktop. Organizado pelas seções do plano (1 a 9).
   ========================================================================== */

/* ---------- 1) BASE ---------- */
@media (max-width: 620px){
  /* Gutter de 16px em todo conteúdo (era 24px) */
  .container{ padding:0 16px; }
  .cat-tiles{ margin:0 -16px; padding-left:16px; padding-right:16px; }
}

@media (max-width: 960px){
  /* iOS faz zoom automático em inputs com font-size < 16px */
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="search"], input[type="number"], input[type="password"],
  select, textarea{ font-size:16px; }

  /* Alvos de toque mínimos (44x44) para ícones/setas/steppers */
  .shelf__arrow{ width:44px; height:44px; }
  .cat-tiles__arrow{ width:44px; height:44px; }
  .p-sizepicker__btn{ min-width:44px; height:44px; }
  .produto-qty__stepper button{ width:44px; height:44px; }
  .cart-item__qty-btn{ width:36px; height:36px; }
  .header-back-btn, .back-to-top, .wa-float, .cart-trigger, .burger{ min-width:44px; min-height:44px; }

  /* safe-area em elementos fixos no rodapé da tela */
  .wa-float{ bottom:calc(16px + env(safe-area-inset-bottom, 0px)); }
  .cookie-banner__inner{ padding-bottom:calc(18px + env(safe-area-inset-bottom, 0px)); }
  .back-to-top{ bottom:calc(76px + env(safe-area-inset-bottom, 0px)); }

  /* Títulos de seção não devem quebrar palavra no meio em telas estreitas */
  .section__title{ overflow-wrap:break-word; word-break:normal; hyphens:none; }
}

@media (max-width: 380px){
  .section__title{ font-size:clamp(24px, 7vw, 32px); }
}

/* ---------- 2) HEADER MOBILE ---------- */
@media (max-width: 960px){
  /* Remove busca inline e ícone de conta da barra compacta — a conta já
     tem equivalente ("Meus pedidos") na gaveta, e a busca passa a abrir
     o overlay full-screen (ver below, injetado por script.js). */
  .header__search{ display:none; }
  .header__icon-link{ display:none; }
  .header__search-trigger{ display:flex !important; }

  /* Faixa (marquee) mais fina/compacta */
  .marquee{ padding:6px 0; }
  .marquee__item{ font-size:10.5px; padding:0 18px; }
  .marquee__item::after{ margin-left:18px; }
}
.header__search-trigger{ display:none; } /* só aparece no mobile, linha acima */

/* Overlay de busca full-screen (injetado em script.js/setupMobileSearch) */
.mobile-search-overlay{
  position:fixed; inset:0; z-index:350;
  background:var(--bg);
  display:none;
  flex-direction:column;
  padding:calc(16px + env(safe-area-inset-top, 0px)) 16px 16px;
}
.mobile-search-overlay.is-open{ display:flex; }
.mobile-search-overlay__form{
  position:relative;
  display:flex; align-items:center;
  gap:8px;
  flex-shrink:0;
}
.mobile-search-overlay__icon{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; color:var(--muted); pointer-events:none;
}
#mobile-search-input{
  flex:1 1 auto;
  padding:13px 44px 13px 40px;
  font-size:16px;
  color:var(--text);
  background:var(--bg-2);
  border:1px solid var(--border);
  border-radius:6px;
  min-height:44px;
}
#mobile-search-input::placeholder{ color:var(--muted); }
#mobile-search-input:focus{ outline:none; border-color:var(--brand); }
.mobile-search-overlay__close{
  position:absolute; right:4px; top:50%; transform:translateY(-50%);
  width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  background:none; border:none; color:var(--muted); font-size:24px; line-height:1; cursor:pointer;
}
.mobile-search-overlay__suggestions{
  margin:14px 0 0; padding:0; list-style:none;
  overflow-y:auto;
}
.mobile-search-overlay__suggestions li + li{ border-top:1px solid var(--border); }
.mobile-search-overlay__suggestions a{
  display:block; padding:14px 4px; color:var(--text); font-size:15px;
}
.mobile-search-overlay__suggestions a:hover{ color:var(--brand); }

/* ---------- 3) HOME MOBILE ---------- */
@media (max-width: 768px){
  /* Banner provisório (sem arte do cliente): formato vertical empilhado,
     1-2 fotos em coluna — nunca a faixa horizontal do desktop cortada. */
  .hero-generated{ align-items:stretch; }
  .hero-generated__photos{ flex-direction:column; opacity:.32; }
  .hero-generated__photo{ flex:1 1 0; border-left:none; border-top:1px solid rgba(0,0,0,.35); }
  .hero-generated__photo:first-child{ border-top:none; }
  .hero-generated__overlay{ background:linear-gradient(180deg, rgba(11,10,9,.55) 0%, rgba(11,10,9,.92) 72%); }
  .hero-generated__content{ max-width:100%; padding:0 24px; align-self:flex-end; margin-bottom:28px; }

  /* Setas do carrossel do hero somem no mobile — fica só ponto + swipe */
  .hero-carousel__arrow{ display:none; }
}

@media (max-width: 860px){
  /* Vitrines/shelves: setas somem no mobile (2 colunas / swipe já bastam) */
  .shelf__arrow{ display:none; }
}

/* Bolha "Nossa história": menor, no canto inferior esquerdo, na mesma
   altura do botão flutuante do WhatsApp (que fica em bottom:16px à
   direita) — lê como par, em vez de ficar solta no meio da tela.
   768px (não 620) para cobrir também a largura de teste 768px. */
@media (max-width: 768px){
  .story-bubble{
    top:auto;
    bottom:calc(16px + env(safe-area-inset-bottom, 0px));
    left:16px;
    transform:none;
    width:64px; height:64px;
  }
  .story-bubble.is-visible{ transform:none; }
  .story-bubble__label{ font-size:8px; }
}

@media (max-width: 620px){
  /* "Comprar" do card de produto ocupa a largura toda no mobile */
  .btn--brand{ align-self:stretch; width:100%; text-align:center; }

  /* Newsletter: título/texto/input/botão empilhados, largura total */
  .newsletter__inner{ gap:20px; }
  .newsletter__title{ font-size:clamp(26px,8vw,34px); }
  .newsletter__form{ flex-direction:column; align-items:stretch; width:100%; }
  .newsletter__input, .newsletter__submit{ width:100%; flex:1 1 auto; min-width:0; }

  /* Faixa de benefícios: grade compacta 1 coluna (já herdada acima),
     reforça o espaçamento para parecer uma lista compacta e não um
     carrossel truncado */
  .beneficios-strip__item{ padding:4px 0; }
}

/* Categorias — tiles com sliver visível da próxima (scroll-padding) */
@media (max-width: 720px){
  .cat-tiles{ scroll-padding-left:16px; }
  .cat-tile{ width:110px; }
  .cat-tile__media{ width:110px; height:110px; }
}

/* ---------- 4) CATEGORIA/BUSCA MOBILE ---------- */
@media (max-width: 980px){
  /* Barra "Filtrar"/"Ordenar" fica fixa/sticky sob o header */
  .categoria-toolbar{
    position:sticky; top:0; z-index:30;
    background:var(--bg);
    padding:12px 0;
    margin:0 0 16px;
    border-bottom:1px solid var(--border);
  }
  .categoria-toolbar__filters-btn{
    display:inline-flex; align-items:center; gap:6px;
    min-height:44px; flex:1 1 0;
    justify-content:center;
  }
  .categoria-toolbar__sort{
    flex:1 1 0; margin-left:0;
    justify-content:center;
  }
  .categoria-toolbar__sort select{ min-height:44px; flex:1 1 auto; }
  .categoria-toolbar__sort-label-desktop{ display:none; }
  .categoria-toolbar__sort-label-mobile{ display:inline !important; }

  /* Gaveta de filtros passa de sidebar lateral para bottom-sheet:
     desliza de baixo para cima, ocupando a parte inferior da tela, com
     os botões "Limpar filtros"/"Ver X produtos" sempre visíveis no
     rodapé da folha (ver .categoria-filters__bottom já existente). */
  .categoria-filters{
    position:fixed; inset:auto 0 0 0; left:0; right:0; top:auto;
    max-height:85vh;
    border-radius:16px 16px 0 0;
    transform:translateY(100%);
    transition:transform .3s var(--ease);
    padding-bottom:calc(20px + env(safe-area-inset-bottom, 0px));
    box-shadow:0 -20px 50px rgba(0,0,0,.5);
  }
  .categoria-filters.is-open{ transform:translateY(0); }
  .categoria-chip{ min-height:38px; display:inline-flex; align-items:center; }
}
.categoria-toolbar__sort-label-mobile{ display:none; }

@media (max-width: 540px){
  .categoria-filters{ inset:auto 0 0 0; }
}

/* ---------- 5) PRODUTO MOBILE ---------- */
.produto-stickybar{ display:none; }
@media (max-width: 860px){
  .produto-stickybar{
    display:flex;
    position:fixed; left:0; right:0; bottom:0; z-index:150;
    align-items:center; justify-content:space-between; gap:14px;
    background:var(--bg-2);
    border-top:1px solid var(--border);
    padding:10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    box-shadow:0 -10px 30px rgba(0,0,0,.4);
  }
  .produto-stickybar[hidden]{ display:none; }
  .produto-stickybar__price{ font-size:18px; font-weight:600; color:var(--text); flex-shrink:0; }
  .produto-stickybar__btn{ flex:0 0 auto; min-height:44px; padding:12px 28px; }

  /* Dá espaço no fim da página de produto pra barra fixa não cobrir nada */
  .produto-page{ padding-bottom:76px; }

  /* Botão flutuante do WhatsApp fica de fora no mobile — a própria barra
     fixa + o botão "Comprar pelo WhatsApp" entre as ações já cobrem a
     mesma necessidade sem duplicar/competir visualmente. */
  .page-produto .wa-float{ display:none; }

  /* Galeria — thumbs em faixa horizontal com swipe (sem alterar o
     comportamento de clique, só o layout) */
  .produto-gallery__thumbs{ overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none; padding-bottom:2px; }
  .produto-gallery__thumbs::-webkit-scrollbar{ display:none; }
  .produto-gallery__thumb{ flex:0 0 auto; }

  /* Descrição — acordeão colapsado por padrão */
  .produto-description--collapsible.is-collapsed{
    max-height:5.4em; overflow:hidden; position:relative;
  }
  .produto-description--collapsible.is-collapsed::after{
    content:''; position:absolute; left:0; right:0; bottom:0; height:2.4em;
    background:linear-gradient(180deg, rgba(11,10,9,0), var(--bg));
  }
  .produto-description__toggle{
    display:inline-flex; align-items:center; gap:6px;
    margin-top:10px; background:none; border:none; color:var(--gold);
    font-size:13px; font-weight:600; cursor:pointer; padding:8px 0; min-height:44px;
  }

  /* Tabela de medidas — permanece inline mas sempre rolável na horizontal
     (decisão documentada: ver relatório final — não convertida em modal
     nesta etapa por risco/tempo, mas não pode nunca causar overflow). */
  .produto-measures__table-wrap{ -webkit-overflow-scrolling:touch; }
}
@media (max-width: 420px){
  .produto-stickybar__price{ font-size:15px; }
  .produto-stickybar__btn{ padding:11px 18px; font-size:12px; }
}

/* ---------- 6) CARRINHO/CHECKOUT MOBILE ---------- */
@media (max-width: 960px){
  .cart-drawer__footer{ padding-bottom:calc(18px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 900px){
  /* Bugs de gutter/corte reportados a ~400px: o container já ganha 16px
     de padding em 620px acima; aqui garantimos que o card de resumo e o
     formulário nunca encostem na borda mesmo entre 620-900px. */
  .checkout-layout{ padding:20px 0 56px; }
  .checkout-summary{ padding:18px; }

  /* Breadcrumb escondido no checkout mobile — só o link "← Voltar ao
     carrinho" (já existente) fica visível no topo. */
  .checkout-page .breadcrumb{ display:none; }

  /* Header do checkout minimalista: mostra o selo "Compra segura" no
     lugar do rótulo "Finalizar pedido" (ambos já no DOM; CSS alterna). */
  .header__checkout-label{ display:none; }
  .header__secure-badge{ display:flex !important; }

  /* Resumo do pedido — colapsado por padrão, toggle "Ver resumo · RX" */
  .checkout-summary__toggle{
    display:flex; align-items:center; justify-content:space-between;
    width:100%; min-height:44px; padding:12px 2px;
    background:none; border:none; color:var(--text);
    font-family:var(--font-body); font-size:14.5px; cursor:pointer;
  }
  .checkout-summary__toggle svg{ width:18px; height:18px; transition:transform .25s ease; }
  .checkout-summary__toggle[aria-expanded="true"] svg{ transform:rotate(180deg); }
  .checkout-summary__title{ display:none; }
  #checkout-summary-collapsible{ display:none; }
  #checkout-summary-collapsible.is-open{ display:block; padding-top:8px; }

  #checkout-go-payment-btn{ min-height:48px; font-size:14px; }
}
.header__secure-badge{
  display:none; align-items:center; gap:6px;
  color:var(--muted); font-size:12.5px;
}
.header__secure-badge svg{ width:16px; height:16px; color:var(--success); }

/* ---------- 7) RODAPÉ MOBILE ---------- */
@media (max-width: 860px){
  .footer__icon-row{ justify-content:center; }
  .footer__meta-group{ text-align:center; }
  .footer{ padding-bottom:calc(24px + env(safe-area-inset-bottom, 0px)); }

  /* Colunas em acordeão — clique no título (ligado em script.js) alterna
     is-open; os links ficam escondidos por padrão nessa largura. */
  .footer__col-title--toggle{
    display:flex; align-items:center; justify-content:space-between;
    cursor:pointer;
  }
  .footer__col-title--toggle::after{
    content:'+'; font-size:16px; color:var(--muted);
  }
  .footer__col.is-open .footer__col-title--toggle::after{ content:'−'; }
  .footer__col-links{
    display:none;
    flex-direction:column; gap:10px; margin-top:12px;
  }
  .footer__col.is-open .footer__col-links{ display:flex; }
}

/* Botão flutuante do WhatsApp e bolha "Nossa história" fora no checkout
   mobile (a barra "Ir para pagamento"/ações já cobrem a mesma função,
   evitando competir visualmente numa tela de fechamento de pedido). */
@media (max-width: 900px){
  .page-checkout .wa-float, .page-checkout .story-bubble{ display:none; }
}

/* ---------- autocomplete (sem mudar name/id já usados pelo JS) ---------- */
/* Atributos adicionados direto no HTML (checkout.html) — nada de CSS aqui. */