@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:300 900;
  font-stretch:62% 125%;
  font-display:swap;
  src:url('../font/archivo-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:300 900;
  font-stretch:62% 125%;
  font-display:swap;
  src:url('../font/archivo-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ==========================================================================
   ÑANDUTÍ — sistema visual
   Estrutura de marketplace, paleta da renda de Itauguá.
   Campo claro tingido do próprio vermelho; cochonilha na barra, nos títulos
   e no preço; índigo da bandeira só no bloco de origem; verde só no WhatsApp.
   ========================================================================== */

:root{
  /* marca */
  --red:#8E0C22;
  --red-lo:#6D0618;
  --red-hi:#A81530;
  --red-wash:#FBEFF1;
  --red-line:#EFD8DC;
  --indigo:#0A2A63;
  --gold:#E8A93C;
  --wa:#0D7F37;
  --wa-hi:#0A6C2F;

  /* campo */
  --page:#F6F2F2;
  --card:#FFFFFF;
  --line:#E7DEDB;
  --line-2:#F1EAE8;

  /* tinta — todas tingidas do vermelho, nenhum cinza neutro */
  --ink:#171110;
  --ink-2:#5A4A46;
  --ink-3:#7C6962;

  /* tipo */
  /* escala de interface — 5 degraus, nada entre eles */
  --t-xs:.76rem;
  --t-sm:.85rem;
  --t-md:.95rem;
  --t-lg:1.06rem;
  --t-xl:1.24rem;
  --f:'Archivo','Segoe UI',system-ui,sans-serif;
  --w-cond:78;

  /* ritmo */
  --gut:clamp(1rem,3.5vw,2.5rem);
  --max:1420px;
  --r:10px;

  /* movimento */
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.33,1,.68,1);

  color-scheme:light;
  accent-color:var(--red);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:120px}
body{
  margin:0;overflow-x:clip;
  background:var(--page);color:var(--ink);
  font-family:var(--f);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0;text-wrap:balance}
p{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
img{max-width:100%;display:block}
svg{display:block}
ul,ol{margin:0;padding:0;list-style:none}

/* superfícies do navegador */
::selection{background:var(--gold);color:var(--ink)}
:focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:4px}
:where(input,textarea){caret-color:var(--red)}
@supports (scrollbar-color:red red){html{scrollbar-color:#C9A9AF var(--page);scrollbar-width:thin}}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--page)}
::-webkit-scrollbar-thumb{background:#C9A9AF;border-radius:99px;border:3px solid var(--page)}

.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:fixed;top:8px;left:8px;z-index:300;padding:.7rem 1.1rem;background:var(--card);
  color:var(--red);border-radius:6px;font-weight:750;font-size:var(--t-md);
  box-shadow:0 6px 20px -6px rgba(0,0,0,.4);transform:translateY(-180%);transition:transform .25s var(--ease)}
.skip:focus-visible{transform:none}

.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}

/* renda */
.brand__glyph,.cta__lace,.capa__lace{
  fill:none;stroke:currentColor;stroke-dasharray:1;stroke-dashoffset:0;
  vector-effect:non-scaling-stroke;
}
.brand__glyph{stroke-width:2.4}
.cta__lace,.capa__lace{stroke-width:.9}

/* ==========================================================================
   BOTÕES
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:46px;padding:.6rem 1.15rem;border-radius:8px;
  font-weight:750;font-size:var(--t-md);letter-spacing:-.012em;white-space:nowrap;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease);
}
.btn svg{width:19px;height:19px;flex:none}
.btn:active{transform:scale(.97)}
.btn--pri{background:var(--red);color:#fff}
.btn--pri:hover{background:var(--red-hi);box-shadow:0 8px 18px -10px rgba(23,17,16,.55)}
.btn--wa{background:var(--wa);color:#fff}
.btn--wa:hover{background:var(--wa-hi);box-shadow:0 8px 18px -10px rgba(23,17,16,.55)}
.btn--gh{border:1.5px solid var(--red);color:var(--red);background:transparent}
.btn--gh:hover{background:var(--red-wash)}
.btn--lg{min-height:54px;padding:.75rem 1.6rem;font-size:var(--t-lg)}
.btn--pill{border-radius:99px;background:#fff;color:var(--red);padding-inline:2.1rem}
.btn--pill:hover{background:var(--gold);color:var(--ink);
  box-shadow:0 10px 24px -8px rgba(0,0,0,.45)}
.btn--pillwa{color:var(--wa)}
.btn--pillwa:hover{color:var(--ink)}
.btn--full{width:100%}

/* ==========================================================================
   BARRA SUPERIOR
   ========================================================================== */
.hd{position:sticky;top:0;z-index:100;background:var(--red);color:#fff;
  padding-top:env(safe-area-inset-top);box-shadow:0 1px 0 rgba(0,0,0,.16)}
.hd__in{
  max-width:var(--max);margin-inline:auto;padding:.7rem var(--gut);
  display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:.7rem 1rem;
}
@media(min-width:900px){.hd__in{grid-template-columns:auto 1fr auto;padding-block:.85rem;gap:.7rem 1.4rem}}
/* O menu mora aqui no celular: na fileira de departamentos ele roubava
   247px de 375 e sobrava um vão de 89px para a lista inteira. */
.hd__menu{display:grid;place-items:center;width:44px;height:44px;flex:none;
  border-radius:9px;color:#fff;background:rgba(255,255,255,.14);
  transition:background .16s var(--ease)}
.hd__menu svg{width:21px;height:21px}
.hd__menu:hover{background:rgba(255,255,255,.26)}
@media(min-width:900px){.hd__menu{display:none}}

.brand{display:flex;align-items:center;gap:.6rem;flex:none;min-height:44px}
.brand__glyph{width:30px;height:30px;flex:none;opacity:.95}
.brand__t{display:flex;flex-direction:column;line-height:1}
.brand__t b{font-variation-settings:'wdth' 112,'wght' 850;font-size:var(--t-xl);letter-spacing:-.03em}
.brand__t i{font-style:normal;font-size:var(--t-xs);font-variation-settings:'wdth' var(--w-cond),'wght' 650;
  letter-spacing:.18em;text-transform:uppercase;opacity:.88;margin-top:2px}

.hdsearch{
  position:relative;display:flex;align-items:center;
  grid-column:1 / -1;order:3;
  background:#fff;border-radius:8px;
  box-shadow:0 2px 0 rgba(0,0,0,.14);
}
/* O campo é branco sobre a barra vermelha e o `outline:none` abaixo tem
   especificidade maior que a regra global de foco: sem isto o controle mais
   usado do site ficava sem nenhuma indicação de foco. O anel vai na caixa,
   não no input, para envolver também os dois botões. */
.hdsearch:focus-within{outline:3px solid var(--gold);outline-offset:2px}
@media(min-width:900px){.hdsearch{grid-column:auto;order:0;max-width:640px;width:100%;justify-self:center}}
.hdsearch input{
  flex:1;min-width:0;padding:.78rem .9rem;border:0;background:none;outline:none;
  font:inherit;font-size:var(--t-md);font-weight:600;color:var(--ink);border-radius:8px;
}
.hdsearch input::placeholder{color:var(--ink-3);font-weight:500}
.hdsearch input::-webkit-search-cancel-button{display:none}
.hdsearch__x{flex:none;display:grid;place-items:center;width:40px;height:40px;
  border-radius:99px;color:var(--ink-3)}
.hdsearch__x[hidden]{display:none}
.hdsearch__x svg{width:16px;height:16px}
.hdsearch__x:hover{background:var(--red-wash);color:var(--red)}
.hdsearch__go{flex:none;display:grid;place-items:center;width:48px;height:44px;margin:2px;
  border-radius:6px;background:var(--red);color:#fff;transition:background .18s var(--ease)}
.hdsearch__go svg{width:20px;height:20px}
.hdsearch__go:hover{background:var(--red-hi)}

.hd__side{display:flex;align-items:center;gap:.9rem;justify-self:end}
.hd__loc{display:none;align-items:center;gap:.35rem;font-size:var(--t-xs);
  font-variation-settings:'wdth' var(--w-cond),'wght' 620;letter-spacing:.05em;
  text-transform:uppercase;color:rgba(255,255,255,.9)}
.hd__loc svg{width:16px;height:16px}
@media(min-width:1100px){.hd__loc{display:flex}}
.hd__wa{display:flex;align-items:center;gap:.4rem;min-height:44px;padding:.5rem .9rem;
  border-radius:8px;background:#fff;color:var(--red);font-weight:750;font-size:var(--t-sm);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.hd__wa svg{width:17px;height:17px}
.hd__wa span{display:none}
@media(min-width:520px){.hd__wa span{display:block}}
.hd__wa:hover{transform:translateY(-1px);box-shadow:0 6px 16px -6px rgba(0,0,0,.5)}

/* ==========================================================================
   DEPARTAMENTOS
   ========================================================================== */
.dep{position:relative;z-index:95;background:var(--card);border-bottom:1px solid var(--line)}
.dep__in{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut);
  display:flex;align-items:stretch;gap:.4rem}

/* Caixa cheia à esquerda, como numa loja grande: o botão é o âncora do painel */
.dep__all{display:flex;align-items:center;gap:.55rem;min-height:48px;padding:.5rem 1rem;
  font-weight:700;font-size:var(--t-sm);color:#fff;background:var(--red);white-space:nowrap;flex:none;
  border-radius:0;transition:background .18s var(--ease)}
.dep__burger{width:18px;height:18px}
.dep__caret{width:14px;height:14px;transform:rotate(90deg);transition:transform .2s var(--ease)}
.dep__all:hover{background:var(--red-hi)}
.dep__all[aria-expanded="true"]{background:var(--red-lo)}
.dep__all[aria-expanded="true"] .dep__caret{transform:rotate(-90deg)}

.dep__quick{display:flex;gap:.15rem;overflow-x:auto;scrollbar-width:none;
  scroll-snap-type:x proximity;overscroll-behavior-x:contain;
  mask-image:linear-gradient(90deg,#000 calc(100% - 2rem),transparent)}
.dep__q{scroll-snap-align:start}
@media(max-width:899px){
  .dep__all{display:none}
  .dep__in{padding-inline:0}
  .dep__quick{padding-inline:var(--gut)}
}
.dep__quick::-webkit-scrollbar{display:none}
.dep__q{padding:.5rem .8rem;min-height:48px;display:flex;align-items:center;
  font-size:var(--t-sm);font-weight:600;color:var(--ink-2);white-space:nowrap;
  border-bottom:2px solid transparent;transition:color .18s var(--ease),border-color .18s var(--ease)}
.dep__q:hover{color:var(--red);border-color:var(--red)}

/* Painel vertical ancorado na caixa, não uma faixa de ponta a ponta */
.dep__menu{position:absolute;top:100%;left:max(var(--gut),(100vw - var(--max))/2 + var(--gut));
  width:min(19rem,calc(100vw - 2*var(--gut)));background:var(--card);
  border:1px solid var(--line);border-top:0;border-radius:0 0 10px 10px;
  box-shadow:0 8px 14px -12px rgba(23,17,16,.45);overflow:hidden;
  animation:drop .22s var(--ease) both}
.dep__menu[hidden]{display:none}
@keyframes drop{from{transform:translateY(-8px)}to{transform:none}}

.dep__list{list-style:none;margin:0;padding:.35rem}
.dep__link{display:grid;grid-template-columns:22px 1fr 14px;align-items:center;gap:.7rem;
  min-height:44px;padding:.5rem .6rem;border-radius:7px;font-size:var(--t-md);font-weight:600;
  color:var(--ink);transition:background .16s var(--ease),color .16s var(--ease)}
.dep__ico{width:22px;height:22px;color:var(--red);opacity:.85}
.dep__nome{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dep__seta{width:14px;height:14px;color:var(--ink-3);
  transition:transform .16s var(--ease),color .16s var(--ease)}
.dep__link:hover{background:var(--red-wash);color:var(--red)}
.dep__link:hover .dep__seta{color:var(--red)}
.dep__link:hover .dep__seta{transform:translateX(2px)}
.dep__link:hover .dep__ico{opacity:1}

/* ---- gaveta do celular ---- */
.gav{position:fixed;inset:0;z-index:200}
.gav[hidden]{display:none}
.gav__fundo{position:absolute;inset:0;background:rgba(23,17,16,.5);opacity:0;
  transition:opacity .22s var(--ease)}
.gav__p{position:absolute;inset:0 auto 0 0;width:min(20rem,86vw);background:var(--card);
  display:flex;flex-direction:column;transform:translateX(-100%);
  transition:transform .22s var(--ease);box-shadow:6px 0 28px -12px rgba(23,17,16,.4)}
.gav.is-on .gav__fundo{opacity:1}
.gav.is-on .gav__p{transform:none}
.gav__h{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem 1.1rem;background:var(--red);color:#fff}
.gav__h b{font-size:var(--t-lg);font-variation-settings:'wght' 800}
.gav__x{display:grid;place-items:center;width:44px;height:44px;border-radius:99px;
  background:rgba(255,255,255,.16);color:#fff;transition:background .16s var(--ease)}
.gav__x:hover{background:rgba(255,255,255,.3)}
.gav__x svg{width:16px;height:16px}
.gav__b{flex:1;overflow-y:auto;padding:.5rem .4rem 2rem;-webkit-overflow-scrolling:touch}
.gav__todos{display:grid;grid-template-columns:20px 1fr 14px;align-items:center;gap:.7rem;
  width:100%;min-height:52px;padding:.7rem .8rem;border-radius:8px;
  font-size:var(--t-md);font-weight:700;color:var(--ink);text-align:left}
.gav__todos svg{width:20px;height:20px;color:var(--red)}
.gav__caret{width:14px;height:14px;color:var(--ink-3);transform:rotate(90deg);transition:transform .2s var(--ease)}
.gav__todos[aria-expanded="false"] .gav__caret{transform:none}
.gav__todos:hover{background:var(--red-wash)}
.gav__b .dep__link{min-height:50px;font-size:var(--t-md)}

@media(prefers-reduced-motion:reduce){
  .gav__fundo,.gav__p{transition:none}
  .dep__menu{animation:none}
}

/* ==========================================================================
   CABEÇALHO DO CATÁLOGO
   ========================================================================== */
.cathd{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem 1rem;margin:1.6rem 0 1rem}
.cathd__t{flex:1;min-width:min(100%,12rem)}
.cathd__t h2{font-variation-settings:'wdth' 106,'wght' 820;font-size:clamp(1.25rem,1.1rem + 1vw,1.5rem);
  letter-spacing:-.02em;line-height:1.15;text-wrap:balance}
.cathd__t p{font-size:var(--t-sm);color:var(--ink-3);font-feature-settings:'tnum'}
.cathd__x{display:inline-flex;align-items:center;gap:.45rem;min-height:44px;padding:.5rem .9rem;
  border-radius:99px;background:var(--red-wash);color:var(--red);font-weight:700;font-size:var(--t-sm)}
.cathd__x[hidden]{display:none}
.cathd__x svg{width:14px;height:14px}
.cathd__x:hover{background:var(--red-line)}
.ordena{display:flex;align-items:center;gap:.55rem;font-size:var(--t-sm);color:var(--ink-2);font-weight:600}
.ordena>span{flex:none}
.ordena select{flex:1;min-width:0;min-height:46px;padding:.5rem 2rem .5rem .8rem;border-radius:8px;
  border:1px solid var(--line);background:var(--card);color:var(--ink);
  font:inherit;font-size:var(--t-md);font-weight:650;cursor:pointer;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 17px) 52%,calc(100% - 12px) 52%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.ordena select:hover{border-color:var(--red-line)}
@media(max-width:559px){
  .cathd{gap:.5rem .8rem}
  .ordena{width:100%}
}

/* ---- modo de busca: a home recolhe e o resultado assume o topo ---- */
body.is-busca .home-so{display:none}
body.is-busca #catalogo{padding-top:.6rem}

/* ---- cupom, dentro da página do produto ---- */
.cup{display:grid;grid-template-columns:20px 1fr;align-items:center;gap:.5rem .6rem;
  padding:.75rem .85rem;border:1px dashed var(--red-line);border-radius:9px}
.cup--on{border-style:solid;border-color:var(--red);background:var(--red-wash)}
.cup__ico{width:20px;height:20px;color:var(--red)}
.cup__f{display:flex;gap:.45rem;min-width:0}
.cup__f input{flex:1;min-width:0;min-height:46px;padding:.5rem .75rem;border-radius:8px;
  border:1px solid var(--line);background:var(--card);font:inherit;font-size:var(--t-md);
  font-weight:650;color:var(--ink);text-transform:uppercase;outline:none}
.cup__f input::placeholder{text-transform:none;font-weight:500;color:var(--ink-3)}
.cup__f input:focus{border-color:var(--red)}
.cup__f button{flex:none;min-height:46px;padding:.5rem 1.05rem;border-radius:8px;
  background:var(--red);color:#fff;font-weight:750;font-size:var(--t-md);
  transition:background .16s var(--ease)}
.cup__f button:hover{background:var(--red-hi)}
.cup__ok{font-size:var(--t-sm);font-weight:650;color:var(--red)}
.cup__ok b{font-variation-settings:'wght' 800}
.cup__ok button{margin-left:.35rem;padding:.65rem .5rem;font-size:var(--t-sm);font-weight:700;
  color:var(--ink-3);text-decoration:underline;text-underline-offset:3px}
.cup__ok button:hover{color:var(--red)}
.cup__erro{grid-column:2;font-size:var(--t-sm);color:var(--red);font-weight:600}
.cup__erro:empty{display:none}

/* preço com desconto */
.card__p--off{display:flex;flex-wrap:wrap;align-items:baseline;gap:.1rem .5rem}
.card__de{font-size:var(--t-xs);color:var(--ink-3);text-decoration:line-through}
.card__por{display:inline-flex;align-items:baseline;gap:.15rem}
.buy__de{font-size:var(--t-md);color:var(--ink-3);text-decoration:line-through}

/* ==========================================================================
   CAPA
   ========================================================================== */
.capa{position:relative;isolation:isolate;background:var(--red-lo);overflow:clip}
.capa__track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;overscroll-behavior-x:contain}
.capa__track::-webkit-scrollbar{display:none}
.slide{
  position:relative;flex:0 0 100%;scroll-snap-align:center;isolation:isolate;
  min-height:clamp(330px,30vw,420px);
  display:grid;align-items:center;
  grid-template-columns:1fr;
  max-width:100%;
  padding:2.4rem var(--gut) 3rem;color:#fff;overflow:clip;
}
@media(min-width:860px){
  .slide{grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
    gap:2rem;padding-inline:max(var(--gut),4vw)}
}

/* arte da vitrine: pedestal, foco e reflexo, tudo desenhado */
.slide__art{display:none;width:100%;height:auto;aspect-ratio:520/320;
  align-self:center;overflow:visible}
@media(min-width:860px){.slide__art{display:block}}
.slide__objs{stroke-width:1.6;vector-effect:non-scaling-stroke}
.slide__art use{stroke-width:1.6}

/* banner com imagem pronta: a peça traz o próprio texto */
/* A peça é mais larga que os slides de texto, então sobra altura. Centralizar
   deixa a folga igual em cima e embaixo, no mesmo vermelho da arte, em vez de
   uma faixa vazia só no pé. */
/* Zera as duas colunas que o slide de texto usa (texto | arte): o banner é
   peça única e precisa da largura inteira. */
.slide--img{padding:0;display:grid;grid-template-columns:1fr;gap:0;
  align-content:center;min-height:0;background:var(--red-lo)}
.slide__link{display:block;width:100%}
.slide--img picture{display:block;width:100%}
.slide--img img{width:100%;height:auto;display:block}
.slide--a{background:radial-gradient(90% 120% at 82% 20%,var(--red-hi) 0%,var(--red) 45%,var(--red-lo) 100%)}
.slide--b{background:radial-gradient(80% 120% at 15% 85%,#123A80 0%,var(--indigo) 55%,#06183C 100%)}
.slide--c{background:radial-gradient(85% 120% at 50% 12%,var(--red-hi) 0%,#5A0413 72%)}
.capa__lace{position:absolute;z-index:-1;right:-34%;top:50%;translate:0 -50%;
  width:min(118vw,700px);height:auto;aspect-ratio:1;color:#fff;opacity:.24;pointer-events:none}
@media(min-width:860px){.capa__lace{right:8%;width:min(38vw,460px);opacity:.16}}
.slide__in{position:relative;max-width:min(100%,34rem);width:100%}
.slide h2{font-variation-settings:'wdth' 116,'wght' 870;
  font-size:clamp(1.85rem,5.6vw,3.5rem);line-height:.96;letter-spacing:-.036em;margin-bottom:.75rem}
.slide p{font-size:clamp(.95rem,.9rem + .4vw,1.12rem);line-height:1.5;
  color:rgba(255,255,255,.92);max-width:34ch;margin-bottom:1.5rem}
.slide__f{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;margin-top:1.2rem;
  font-size:var(--t-xs);font-variation-settings:'wdth' var(--w-cond),'wght' 640;
  letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.9)}
.slide__f span{display:inline-flex;align-items:center;gap:.4rem}
.slide__f span::before{content:'';width:3px;height:3px;border-radius:99px;background:var(--gold)}

.capa__dots{position:absolute;left:0;right:0;bottom:.9rem;z-index:3;
  display:flex;justify-content:center;gap:.4rem}
.cdot{width:26px;height:26px;display:grid;place-items:center}
.cdot::before{content:'';width:9px;height:9px;border-radius:99px;background:rgba(255,255,255,.45);
  transition:width .3s var(--ease),background .3s var(--ease)}
.cdot[aria-current="true"]::before{width:26px;background:var(--gold)}

/* ==========================================================================
   LADRILHOS DE DEPARTAMENTO
   ========================================================================== */
.tiles{background:var(--card);border-bottom:1px solid var(--line)}
/* Grade de verdade, não trilho: 10 departamentos fecham 2x5 no desktop e
   2 colunas no celular. O `repeat(9,1fr)` de antes deixava um órfão sozinho
   na segunda linha, e o trilho horizontal no celular escondia sete deles
   atrás de um arrasto que ninguém faz. */
.tiles__in{max-width:var(--max);margin-inline:auto;padding:1.4rem var(--gut) 1.6rem;
  display:grid;gap:.7rem;grid-template-columns:repeat(2,1fr)}
@media(min-width:560px){.tiles__in{grid-template-columns:repeat(3,1fr)}}
@media(min-width:860px){.tiles__in{grid-template-columns:repeat(5,1fr);gap:.9rem}}

.tile{
  display:grid;grid-template-rows:auto auto auto;gap:.15rem;
  padding:.7rem .7rem .9rem;border-radius:var(--r);border:1px solid var(--line);
  background:var(--card);
  transition:transform .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.tile:hover{transform:translateY(-3px);border-color:var(--red);
  box-shadow:0 12px 22px -16px rgba(23,17,16,.45)}
.tile__fig{position:relative;aspect-ratio:1;display:grid;place-items:center;
  border-radius:calc(var(--r) - 3px);background:#fff;overflow:hidden;margin-bottom:.55rem}
.tile__fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:8%}
.tile__fig svg{width:44%;height:44%;color:var(--red);opacity:.6}
.tile:hover .tile__fig img{transform:scale(1.04)}
.tile__fig img{transition:transform .3s var(--ease)}
.tile__n{font-size:var(--t-sm);font-variation-settings:'wght' 720;line-height:1.25;
  color:var(--ink);letter-spacing:-.012em;
  /* duas linhas reservadas: os nomes longos quebram e a fileira segue alinhada */
  min-height:2.5em}
.tile__p{font-size:var(--t-xs);color:var(--ink-3)}
.tile__p b{font-variation-settings:'wght' 750;color:var(--red);font-feature-settings:'tnum'}

/* ==========================================================================
   CABEÇALHO DE SEÇÃO E PRATELEIRA
   ========================================================================== */
.shelf{margin-top:2.4rem}
.shead{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem}
.shead h2{font-variation-settings:'wdth' 108,'wght' 830;
  font-size:clamp(1.15rem,3.6vw,1.6rem);letter-spacing:-.028em;color:var(--red);line-height:1.1}
.shead__nav{display:none;gap:.4rem;flex:none}
@media(min-width:760px){.shead__nav{display:flex}}
.sarrow{display:grid;place-items:center;width:44px;height:44px;border-radius:99px;
  border:1px solid var(--line);background:var(--card);color:var(--red);
  transition:background .18s var(--ease),border-color .18s var(--ease)}
.sarrow svg{width:17px;height:17px}
.sarrow:hover{background:var(--red-wash);border-color:var(--red)}

.rail{display:flex;gap:.7rem;overflow-x:auto;scroll-snap-type:x proximity;
  padding-bottom:.4rem;scrollbar-width:none;overscroll-behavior-x:contain}
.rail::-webkit-scrollbar{display:none}
.rail > .card{flex:0 0 clamp(152px,44vw,208px);scroll-snap-align:start}

/* ==========================================================================
   CARTÃO DE PRODUTO
   ========================================================================== */
.grid{display:grid;gap:.7rem;grid-template-columns:repeat(2,1fr)}
@media(min-width:520px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:820px){.grid{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1100px){.grid{grid-template-columns:repeat(5,1fr)}}
@media(min-width:1320px){.grid{grid-template-columns:repeat(6,1fr)}}

.card{
  position:relative;display:flex;flex-direction:column;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease);
}
.card:hover{transform:translateY(-4px);border-color:var(--red-line);
  box-shadow:0 16px 30px -16px rgba(23,17,16,.38)}
.card[hidden]{display:none}

.card__fig{position:relative;aspect-ratio:1;display:grid;place-items:center;
  background:var(--red-wash);overflow:hidden}
/* `contain` e não `cover`: embalagem cortada esconde justamente o rótulo,
   que é o que o cliente confere. E `max-*` em vez de `width/height:100%`:
   dentro de um grid centralizado o 100% de altura não resolve, a imagem
   estica pela proporção própria e o overflow do pai corta o resto. */
.card__fig img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;padding:6%}
/* Foto de produto vem em fundo branco: o card fica branco também, senão
   sobra uma moldura rosa em volta do recorte. */
.card__fig--foto{background:#fff}
.card__fig > svg{width:48%;height:48%;color:var(--red);opacity:.62;
  transition:transform .3s var(--ease),opacity .3s var(--ease)}
.card:hover .card__fig > svg{transform:scale(1.08);opacity:.85}
.card__tag{position:absolute;top:.5rem;left:.5rem;z-index:2;
  padding:.22rem .5rem;border-radius:99px;background:var(--card);color:var(--red);
  font-size:var(--t-xs);font-variation-settings:'wdth' var(--w-cond),'wght' 750;
  letter-spacing:.1em;text-transform:uppercase;
  box-shadow:0 2px 6px rgba(0,0,0,.14)}

.card__b{display:flex;flex-direction:column;gap:.15rem;padding:.7rem .75rem .85rem;flex:1}
.card__n{font-size:var(--t-sm);font-weight:650;line-height:1.32;color:var(--ink);
  letter-spacing:-.012em;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Esta linha é o que separa o Sauvage de R$ 680 do de R$ 90: quatro cartões
   com título idêntico, distinguidos só pela apresentação. Estava a 10,9px,
   em caixa alta, tracking aberto e na tinta mais fraca — ilegível ao sol e
   de relance. Agora lê. */
.card__d{font-size:var(--t-xs);font-variation-settings:'wdth' var(--w-cond),'wght' 680;
  letter-spacing:.01em;color:var(--ink-2)}
.card__p{margin-top:auto;padding-top:.5rem;display:flex;align-items:baseline;gap:.18rem;
  font-variant-numeric:tabular-nums}
.card__p s{text-decoration:none;font-size:var(--t-xs);font-weight:700;color:var(--ink-3);
  transform:translateY(-.14em)}
.card__p b{font-variation-settings:'wdth' 104,'wght' 840;font-size:var(--t-xl);
  letter-spacing:-.034em;color:var(--red)}
.card__u{font-size:var(--t-xs);font-weight:600;color:var(--ink-3);margin-top:1px}
.card__wa{
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:center;gap:.4rem;
  margin-top:.65rem;min-height:44px;border-radius:6px;
  background:var(--wa);color:#fff;font-size:var(--t-xs);font-weight:750;
  transition:background .18s var(--ease)}
.card__wa svg{width:15px;height:15px}
.card__wa:hover{background:var(--wa-hi)}
.card.is-out{opacity:.62}
.card.is-out .card__wa{background:var(--ink-3);pointer-events:none}

/* o cartão inteiro leva à página do produto; o verde continua sendo o pedido */
.card__hit{position:absolute;inset:0;z-index:1}

/* ==========================================================================
   LISTA ÚNICA
   Escolhida uma ordem no seletor, o catálogo deixa de ser lido por
   departamento e vira ranking: as seções somem e sobra esta grade.
   ========================================================================== */
#catFlat{margin-top:1.6rem}
#catFlat[hidden]{display:none}


/* ==========================================================================
   BLOCOS DE LINHA
   ========================================================================== */
/* Sem content-visibility aqui, e a decisão foi medida: com os 108 cartões
   pintados, um layout completo custa 0,1 ms e o DOM fica interativo em 25 ms.
   Como os cartões não carregam imagem, não há trabalho a adiar — e a altura
   estimada por bloco (Renew tem 31 itens, os outros 5) só traria risco de
   pulo de rolagem em aparelho fraco. Se um dia entrar foto em todos os
   produtos, vale reavaliar com contain-intrinsic-size medido por bloco. */
.linha{margin-bottom:2.6rem}
.linha[hidden]{display:none}
.lhead{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding-bottom:.7rem;margin-bottom:1rem;border-bottom:2px solid var(--red)}
.lhead h2{font-variation-settings:'wdth' 108,'wght' 830;
  font-size:clamp(1.15rem,3.6vw,1.6rem);letter-spacing:-.028em;color:var(--red);line-height:1.1}
.lhead p{font-size:var(--t-xs);font-variation-settings:'wdth' var(--w-cond),'wght' 640;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);
  font-feature-settings:'tnum';white-space:nowrap}

.vazio{padding:4rem 0;text-align:center;color:var(--ink-2);font-size:var(--t-lg)}
.vazio button{display:inline-block;margin-top:.9rem;padding:.75rem 1.2rem;border-radius:8px;
  background:var(--red);color:#fff;font-weight:750}

/* ==========================================================================
   PARAGUAI
   ========================================================================== */
.py{background:var(--indigo);color:#fff;margin-top:1rem}
.py__in{max-width:var(--max);margin-inline:auto;padding:clamp(2.2rem,6vw,4rem) var(--gut);
  display:grid;gap:2rem;align-items:center}
/* Só a bandeira: ela vira a peça centrada, não a coluna magra de um par. */
@media(min-width:860px){.py__in{grid-template-columns:minmax(0,min(520px,60vw));justify-content:center;gap:3.5rem}}
.py__flag{aspect-ratio:5/3;perspective:1200px;cursor:pointer}
.py__inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;
  transition:transform .9s var(--ease);filter:drop-shadow(0 20px 36px rgba(0,0,0,.42))}
.py__flag:hover .py__inner,.py__flag.is-flip .py__inner{transform:rotateY(180deg)}
.py__face{position:absolute;inset:0;display:flex;flex-direction:column;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:6px;overflow:hidden}
.py__face--v{transform:rotateY(180deg)}
.py__band{flex:1;display:grid;place-items:center;gap:.3rem}
.py__band--r{background:#D52B1E}
.py__band--w{background:#fff;color:var(--indigo)}
.py__band--b{background:#0038A8}
.py__band svg{width:clamp(42px,11vw,72px);height:auto;aspect-ratio:1}
.py__face .py__band--w svg{color:#0A7B3E}
.py__face--v .py__band--w svg{color:#8A6206}
.py__band em{font-style:normal;font-size:clamp(.7rem,1.4vw,.78rem);
  font-variation-settings:'wdth' var(--w-cond),'wght' 700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-2)}

/* ==========================================================================
   TEXTO INSTITUCIONAL
   ========================================================================== */
.sobre{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(1.4rem,4vw,2.4rem);margin:3rem 0}
.sobre h2{font-variation-settings:'wdth' 108,'wght' 830;font-size:clamp(1.15rem,3.6vw,1.6rem);
  letter-spacing:-.028em;color:var(--red);margin-bottom:1rem}
.sobre p{color:var(--ink-2);max-width:74ch;line-height:1.62;margin-bottom:.8rem}
.sobre p:last-child{margin-bottom:0}
.sobre b{color:var(--ink);font-weight:750}

/* ==========================================================================
   CHAMADA
   ========================================================================== */
.cta{background:var(--red);color:#fff;overflow:clip}
.cta__in{position:relative;isolation:isolate;max-width:var(--max);margin-inline:auto;
  padding:clamp(2rem,5vw,3.2rem) var(--gut);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.6rem}
.cta__lace{position:absolute;z-index:-1;right:-6%;top:50%;translate:0 -50%;
  width:min(90vw,420px);height:auto;aspect-ratio:1;color:#fff;opacity:.2}
.cta h2{font-variation-settings:'wdth' 110,'wght' 850;
  font-size:clamp(1.35rem,4vw,2.1rem);line-height:1.05;letter-spacing:-.032em;margin-bottom:.4rem}
.cta p{color:rgba(255,255,255,.9);font-size:var(--t-md)}
.cta .btn--wa{background:#fff;color:var(--wa)}
.cta .btn--wa:hover{background:var(--gold);color:var(--ink)}

/* ==========================================================================
   SELOS
   ========================================================================== */
.trust{background:var(--card);border-top:1px solid var(--line)}
.trust__in{max-width:var(--max);margin-inline:auto;padding:clamp(2rem,5vw,3rem) var(--gut);
  display:grid;gap:1.8rem}
@media(min-width:760px){.trust__in{grid-template-columns:repeat(3,1fr);gap:2.6rem}}
.trust > div{display:grid;gap:.4rem;justify-items:start}
.trust svg{width:30px;height:30px;color:var(--red);margin-bottom:.3rem}
.trust h3{font-size:var(--t-md);font-weight:800;letter-spacing:-.018em;color:var(--ink)}
.trust p{font-size:var(--t-sm);color:var(--ink-2);line-height:1.5;max-width:38ch}

/* ==========================================================================
   RODAPÉ
   ========================================================================== */
.ft{background:var(--red-lo);color:#fff}
.ft__in{max-width:var(--max);margin-inline:auto;padding:clamp(2.2rem,5vw,3.4rem) var(--gut) 2rem;
  display:grid;gap:2rem}
@media(min-width:700px){.ft__in{grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2.6rem}}
.brand--ft{margin-bottom:1rem}
.ft__ab{font-size:var(--t-sm);line-height:1.6;color:rgba(255,255,255,.72);max-width:36ch}
.ft__col h3{font-size:var(--t-xs);font-variation-settings:'wdth' var(--w-cond),'wght' 750;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:.9rem}
.ft__col li{margin-bottom:.15rem}
.ft__col a,.ft__col span{display:inline-flex;align-items:center;min-height:44px;padding:.32rem 0;
  font-size:var(--t-sm);color:rgba(255,255,255,.84);line-height:1.45}
.ft__col a{transition:color .18s var(--ease)}
.ft__col a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}

.ft__legal{border-top:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.18)}
.ft__legalin{max-width:var(--max);margin-inline:auto;padding:2rem var(--gut)}
.ft__legal h3{font-size:var(--t-xs);font-variation-settings:'wdth' var(--w-cond),'wght' 750;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:1.1rem}
.ft__grid{display:grid;gap:.9rem}
@media(min-width:760px){.ft__grid{grid-template-columns:repeat(2,1fr);gap:1rem 2.6rem}}
.ft__grid p{font-size:var(--t-sm);line-height:1.6;color:rgba(255,255,255,.82);max-width:60ch}
.ft__grid b{color:#fff;font-weight:800}
.ft__c{padding:1.2rem var(--gut) calc(5.5rem + env(safe-area-inset-bottom));text-align:center;
  font-size:var(--t-xs);color:rgba(255,255,255,.65);border-top:1px solid rgba(255,255,255,.1)}
@media(min-width:760px){.ft__c{padding-bottom:1.4rem}}

/* ==========================================================================
   PÁGINA DO PRODUTO
   ========================================================================== */
.pdp{max-width:var(--max);margin-inline:auto;padding:0 var(--gut) 3rem}
.bread{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .35rem;
  padding:.5rem 0 .8rem;font-size:var(--t-sm);color:var(--ink-3)}
.bread a{display:inline-flex;align-items:center;min-height:44px;padding-inline:.3rem;
  color:var(--ink-3);transition:color .16s var(--ease)}
.bread a:hover{color:var(--red);text-decoration:underline;text-underline-offset:3px}
.bread b{font-weight:600;color:var(--ink-2)}
.bread i{font-style:normal;opacity:.5}

.pdp__t{font-variation-settings:'wdth' 106,'wght' 820;
  font-size:clamp(1.4rem,4.4vw,2.2rem);line-height:1.1;letter-spacing:-.03em;
  color:var(--ink);margin-bottom:1.2rem}

.pdp__main{display:grid;gap:1rem}
@media(min-width:900px){.pdp__main{grid-template-columns:1.15fr .85fr;gap:1.6rem;align-items:start}}

.pdp__fig{position:relative;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);aspect-ratio:1;display:grid;place-items:center;overflow:hidden}
@media(min-width:900px){.pdp__fig{aspect-ratio:4/3}}
/* Absoluta e presa às bordas: só assim a altura em % tem contra o que
   resolver dentro do grid, e o `contain` cabe de verdade na moldura. */
.pdp__fig img{position:absolute;inset:0;z-index:1;width:100%;height:100%;
  object-fit:contain;padding:5%}
.pdp__fig--foto{background:#fff}
.pdp__fig--foto .pdp__figbg{display:none}
.pdp__figbg{position:absolute;inset:0;z-index:0;
  background:radial-gradient(58% 58% at 50% 44%,var(--red-wash) 0%,transparent 72%)}
.pdp__fig > svg{position:relative;z-index:1;width:44%;height:44%;color:var(--red);opacity:.58}
.pdp__note{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:.6rem .9rem;
  background:var(--line-2);color:var(--ink-2);font-size:var(--t-xs);text-align:center;
  border-top:1px solid var(--line)}

/* ---- galeria: a foto grande, as setas e a fita de miniaturas ---- */
.gal{display:grid;gap:.6rem}
.gal__seta{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  display:grid;place-items:center;width:38px;height:38px;border-radius:99px;
  border:1px solid var(--line);background:var(--card);color:var(--ink);
  cursor:pointer;opacity:.9;transition:background .15s,border-color .15s,opacity .15s}
.gal__seta svg{width:16px;height:16px}
.gal__seta:hover{background:var(--red-wash);border-color:var(--red);opacity:1}
.gal__seta--ant{left:.6rem}
.gal__seta--prox{right:.6rem}
.gal__conta{position:absolute;right:.6rem;bottom:.6rem;z-index:3;
  padding:.16rem .5rem;border-radius:99px;background:var(--card);
  border:1px solid var(--line);color:var(--ink-2);font-size:var(--t-xs);
  font-variant-numeric:tabular-nums}
.gal__minis{display:flex;gap:.5rem;overflow-x:auto;padding-bottom:.2rem;
  scrollbar-width:thin}
.gal__mini{flex:0 0 auto;width:66px;height:66px;padding:0;overflow:hidden;
  display:grid;place-items:center;
  border:1px solid var(--line);border-radius:calc(var(--r) * .55);
  background:var(--card);cursor:pointer;transition:border-color .15s,box-shadow .15s}
.gal__mini img{width:100%;height:100%;object-fit:contain;padding:8%}
.gal__mini:hover{border-color:var(--red)}
.gal__mini.is-on{border-color:var(--red);box-shadow:0 0 0 2px var(--red-wash)}
@media(max-width:520px){.gal__mini{width:56px;height:56px}}

.buy{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:1.2rem;display:grid;gap:1rem;position:sticky;top:86px}
@media(max-width:899px){.buy{position:static}}
.buy__top{display:flex;align-items:center;justify-content:space-between;gap:.7rem;flex-wrap:wrap}
.badge{display:inline-flex;align-items:center;gap:.4rem;padding:.36rem .7rem;border-radius:99px;
  background:var(--red);color:#fff;font-size:var(--t-xs);
  font-variation-settings:'wdth' var(--w-cond),'wght' 720;letter-spacing:.09em;text-transform:uppercase}
.sku{display:inline-flex;align-items:center;gap:.4rem;padding:.32rem .6rem;border-radius:99px;
  background:var(--line-2);color:var(--ink-2);font-size:var(--t-xs);font-weight:650;
  font-feature-settings:'tnum'}
.sku b{color:var(--ink)}

.buy__p{display:flex;align-items:baseline;gap:.3rem;font-variant-numeric:tabular-nums}
.buy__p s{text-decoration:none;font-size:var(--t-md);font-weight:750;color:var(--ink-3)}
.buy__p b{font-variation-settings:'wdth' 104,'wght' 860;
  font-size:clamp(2rem,6vw,2.7rem);letter-spacing:-.04em;color:var(--red);line-height:1}
.buy__u{font-size:var(--t-sm);color:var(--ink-2);margin-top:-.5rem}

.qty{display:flex;align-items:center;gap:.8rem}
.qty__l{font-size:var(--t-xs);font-variation-settings:'wdth' var(--w-cond),'wght' 700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.qty__box{display:flex;align-items:center;border:1px solid var(--line);border-radius:8px;
  overflow:hidden}
.qty__b{width:46px;height:48px;display:grid;place-items:center;font-size:var(--t-xl);
  font-weight:750;color:var(--red);transition:background .16s var(--ease)}
.qty__b:hover{background:var(--red-wash)}
.qty__b[disabled]{color:var(--ink-3);pointer-events:none}
.qty__i{width:54px;height:48px;border:0;border-inline:1px solid var(--line);
  text-align:center;font:inherit;font-weight:800;font-size:var(--t-lg);color:var(--ink);
  outline:none;font-variant-numeric:tabular-nums;background:var(--card);
  -moz-appearance:textfield;appearance:textfield}
.qty__i::-webkit-outer-spin-button,.qty__i::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

.buy__tot{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;
  padding:.75rem .9rem;border-radius:8px;background:var(--red-wash);
  font-size:var(--t-sm);color:var(--ink-2)}
.buy__tot b{font-variation-settings:'wdth' 104,'wght' 840;font-size:var(--t-xl);color:var(--red);
  letter-spacing:-.03em;font-variant-numeric:tabular-nums}

.perks{display:grid;gap:.8rem;padding-top:.4rem;border-top:1px solid var(--line-2)}
.perks > div{display:grid;grid-template-columns:22px minmax(0,1fr);gap:.7rem;align-items:start}
.perks > div > div{min-width:0}
.perks svg{width:20px;height:20px;color:var(--red);margin-top:2px}
.perk__t{display:block;font-size:var(--t-sm);font-weight:750;color:var(--ink);letter-spacing:-.012em}
.perks p{font-size:var(--t-sm);color:var(--ink-2);line-height:1.45}

.pdp__cols{display:grid;gap:1rem;margin-top:1rem}
@media(min-width:900px){.pdp__cols{grid-template-columns:1.15fr .85fr;gap:1.6rem;align-items:start}}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1.2rem}
.panel h2,.panel h3{font-variation-settings:'wdth' 106,'wght' 800;font-size:var(--t-xl);
  letter-spacing:-.022em;color:var(--red);margin-bottom:.9rem}
.panel h3{font-size:var(--t-md);color:var(--ink)}

.spec{display:grid}
.spec > div{display:grid;grid-template-columns:9.5rem 1fr;gap:.8rem;padding:.62rem 0;
  border-bottom:1px solid var(--line-2)}
.spec > div:last-child{border-bottom:0}
.spec dt{font-size:var(--t-xs);font-variation-settings:'wdth' var(--w-cond),'wght' 700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);padding-top:.15rem}
.spec dd{margin:0;font-size:var(--t-md);font-weight:600;color:var(--ink);line-height:1.4;
  overflow-wrap:anywhere}
@media(max-width:430px){.spec > div{grid-template-columns:1fr;gap:.1rem}}

.gap{margin-top:1rem;padding:.85rem .9rem;border-radius:8px;background:var(--red-wash);
  font-size:var(--t-sm);line-height:1.5;color:var(--ink-2)}
.gap b{color:var(--ink);font-weight:750}

.avisos{display:grid;gap:.85rem}
.avisos p{font-size:var(--t-sm);line-height:1.55;color:var(--ink-2)}
.avisos b{color:var(--ink);font-weight:800}

/* ==========================================================================
   FAB
   ========================================================================== */
.fab{position:fixed;z-index:98;right:max(var(--gut),.9rem);
  bottom:calc(.9rem + env(safe-area-inset-bottom));
  display:flex;align-items:center;gap:.55rem;height:54px;padding:0 1.15rem 0 1rem;
  border-radius:99px;background:var(--wa);color:#fff;
  font-weight:750;font-size:var(--t-md);letter-spacing:-.012em;
  box-shadow:0 10px 26px -8px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.18);
  transition:transform .26s var(--ease),box-shadow .26s var(--ease)}
.fab svg{width:25px;height:25px;flex:none}
.fab__t{display:none}
@media(min-width:520px){.fab__t{display:block}}
.fab:hover{transform:translateY(-3px);box-shadow:0 16px 32px -8px rgba(0,0,0,.55)}
.fab:active{transform:scale(.95)}
.fab::before{content:'';position:absolute;inset:0;border-radius:inherit;
  border:2px solid var(--wa);animation:halo 3.4s var(--ease-io) 3}
@keyframes halo{0%{transform:scale(1);opacity:.5}70%,100%{transform:scale(1.3);opacity:0}}

/* ==========================================================================
   CAPTURA
   ========================================================================== */
.gate{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:1rem}
.gate[hidden]{display:none}
.gate__bd{position:absolute;inset:0;background:rgba(24,4,9,.7);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:fade .3s var(--ease-io) both}
@keyframes fade{from{opacity:0}to{opacity:1}}
.gate__box{position:relative;width:min(100%,25rem);padding:1.9rem 1.5rem 1.3rem;
  background:var(--card);border-radius:12px;
  box-shadow:0 30px 64px -18px rgba(23,17,16,.62);animation:rise .45s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:none}}
.gate__x{position:absolute;top:.6rem;right:.6rem;display:grid;place-items:center;
  width:40px;height:40px;border-radius:99px;color:var(--ink-3)}
.gate__x svg{width:17px;height:17px}
.gate__x:hover{background:var(--line-2);color:var(--red)}
.gate__box h2{font-variation-settings:'wdth' 108,'wght' 840;
  font-size:clamp(1.3rem,5.4vw,1.7rem);line-height:1.06;letter-spacing:-.03em;
  color:var(--red);max-width:16ch}
.gate__p{margin:.6rem 0 1.2rem;font-size:var(--t-md);line-height:1.5;color:var(--ink-2);max-width:34ch}
.gate__f{display:grid;gap:.55rem}
.gate__f label{display:grid;gap:.28rem;font-size:var(--t-xs);
  font-variation-settings:'wdth' var(--w-cond),'wght' 720;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-3)}
.gate__f input{padding:.78rem .85rem;border:1px solid var(--line);border-radius:8px;
  background:var(--page);color:var(--ink);font:inherit;font-size:var(--t-md);font-weight:600;
  outline:none;transition:border-color .18s var(--ease),background .18s var(--ease)}
.gate__f input::placeholder{color:var(--ink-3);font-weight:500;letter-spacing:0}
.gate__f input:focus{border-color:var(--red);background:var(--card)}
.gate__f input[aria-invalid="true"]{border-color:var(--red);background:var(--red-wash)}
.gate__err{font-size:var(--t-sm);font-weight:650;color:var(--red)}
.gate__err[hidden]{display:none}
.gate__f .btn{margin-top:.4rem;justify-content:space-between}
.gate__fine{margin-top:.85rem;font-size:var(--t-xs);line-height:1.5;color:var(--ink-3)}
.gate__skip{display:block;width:100%;margin-top:.7rem;padding:.6rem;font-size:var(--t-sm);
  font-weight:600;color:var(--ink-2);text-decoration:underline;text-underline-offset:3px}
.gate__skip:hover{color:var(--red)}

/* ==========================================================================
   TOAST
   ========================================================================== */
.toast{position:fixed;z-index:210;left:50%;bottom:calc(5.4rem + env(safe-area-inset-bottom));
  translate:-50% 0;max-width:min(92vw,26rem);padding:.85rem 1.15rem;
  background:var(--ink);color:#fff;border-radius:8px;
  font-size:var(--t-md);font-weight:600;line-height:1.4;
  box-shadow:0 14px 32px -12px rgba(0,0,0,.7);animation:rise .4s var(--ease) both}
.toast[hidden]{display:none}

/* ==========================================================================
   MOVIMENTO
   ========================================================================== */
@media(prefers-reduced-motion:no-preference){
  .card{opacity:0;transform:translateY(12px)}
  .card.is-in{opacity:1;transform:none;
    transition:opacity .45s var(--ease-io),transform .45s var(--ease-io)}
  .card.is-in:hover{transform:translateY(-4px)}
  @supports (animation-timeline:view()){
    .cta__lace{stroke-dashoffset:1;animation:weave linear both;
      animation-timeline:view();animation-range:entry 5% cover 45%}
  }
  @supports not (animation-timeline:view()){
    .cta__lace{stroke-dashoffset:1;transition:stroke-dashoffset 1.8s var(--ease-io)}
    .cta__lace.is-in{stroke-dashoffset:0}
  }
}
@keyframes weave{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}

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

@media print{
  .hd,.dep,.capa,.tiles,.fab,.gate,.cta,.py,.toast,.card__wa,.shead__nav{display:none!important}
  body{background:#fff}
  .card{break-inside:avoid;opacity:1!important;transform:none!important;box-shadow:none}
  .grid{grid-template-columns:repeat(4,1fr)!important}
}


/* ==========================================================================
   SOBRE O PRODUTO E AVALIAÇÕES
   ========================================================================== */
.sobre{margin-top:1.2rem}
.sobre__t{font-size:var(--t-md);line-height:1.65;color:var(--ink-2);max-width:68ch}
.sobre__av{margin-top:.9rem;padding-top:.9rem;border-top:1px solid var(--line-2);
  font-size:var(--t-sm);line-height:1.55;color:var(--ink-3);max-width:68ch}

.aval{margin-top:1rem}
.aval__topo{display:flex;align-items:center;gap:1rem;margin-bottom:1.2rem}
.aval__media{font-variation-settings:'wdth' 108,'wght' 860;font-size:2.6rem;line-height:1;
  color:var(--red);font-feature-settings:'tnum'}
.aval__media i{font-style:normal;font-size:var(--t-lg);color:var(--ink-3)}
.aval__n{font-size:var(--t-sm);color:var(--ink-3);margin-top:.2rem}
.estrelas{display:inline-flex;gap:.1rem;font-size:var(--t-lg);line-height:1}
.est{color:var(--line)}
.est.is-on{color:var(--gold)}
/* Meia estrela sem pintar texto com gradiente: a estrela cheia é recortada
   pela metade e a vazia fica atrás. Um caractere, duas camadas. */
.est.is-meia{position:relative;color:var(--line)}
.est.is-meia::before{content:'★';position:absolute;inset:0;color:var(--gold);
  clip-path:inset(0 50% 0 0)}

.aval__fotos h4{font-size:var(--t-xs);font-variation-settings:'wdth' var(--w-cond),'wght' 700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.5rem}
.aval__tira{display:flex;gap:.5rem;overflow-x:auto;scrollbar-width:none;padding-bottom:.3rem}
.aval__tira::-webkit-scrollbar{display:none}
.aval__tira img{flex:0 0 auto;width:88px;height:88px;object-fit:cover;border-radius:8px;
  border:1px solid var(--line)}

.aval__lista{display:grid;gap:.2rem;margin-top:1.2rem}
.rev{padding:1rem 0;border-top:1px solid var(--line-2)}
.rev__h{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.rev__h b{font-size:var(--t-md);font-variation-settings:'wght' 750}
.rev__d{font-size:var(--t-xs);color:var(--ink-3);margin-top:.15rem}
.rev__t{font-size:var(--t-md);font-variation-settings:'wght' 780;margin-top:.5rem}
.rev__x{font-size:var(--t-md);line-height:1.6;color:var(--ink-2);margin-top:.25rem;max-width:68ch}

.aval--vazio{display:grid;gap:.8rem;justify-items:start}
.aval__nada{font-size:var(--t-md);color:var(--ink-2)}


/* ==========================================================================
   CARGA — o que ficou de fora, e por quê

   `content-visibility:auto` nas seções foi testado de novo agora que todo
   produto tem foto. Medido: layout completo cai de 132 ms para 76 ms, e o
   tráfego da primeira tela não muda (69 KB nos dois casos, porque quem
   segura as fotos é o loading=lazy). Em troca, a altura estimada erra feio
   — a seção Perfumes reserva 1.400 px e ocupa 11.934 px — e a barra de
   rolagem pula enquanto o visitante desce. 56 ms num carregamento que já
   está em 132 ms não paga esse salto. Reavaliar se as seções ficarem
   parecidas em altura.
   ========================================================================== */