@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 — cochonilha mantida, agora sobre campo branco como na referência */
  --red:#8E0C22;
  --red-lo:#6D0618;
  --red-hi:#A81530;
  --red-wash:#FBEFF1;
  --red-line:#EFD8DC;
  --indigo:#0A2A63;
  --gold:#E8A93C;
  --wa:#0D7F37;
  --wa-hi:#0A6C2F;

  /* campo — branco de loja, linha neutra fina como na referência */
  --page:#FFFFFF;
  --card:#FFFFFF;
  --line:#E7E2E0;
  --line-2:#F3EFEF;

  /* tinta — neutra sobre branco, como na referência */
  --ink:#1F1B1A;
  --ink-2:#57504D;
  --ink-3:#6F625E;

  /* 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%}

/* ==========================================================================
   FAIXA INSTITUCIONAL + CABEÇALHO — padrão da referência: faixa fina,
   cabeçalho branco, marca vermelha, busca pílula, links e botão pílula.
   ========================================================================== */
.topo{border-bottom:1px solid var(--line);background:var(--card)}
.topo__in{max-width:var(--max);margin-inline:auto;padding:.4rem var(--gut);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  font-size:.75rem;color:var(--ink-2)}
.topo__loc{display:flex;align-items:center;gap:.3rem;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topo__loc svg{width:13px;height:13px;color:var(--red);flex:none}
.topo__r{display:flex;align-items:center;gap:.6rem;white-space:nowrap}
.topo__lang{font-weight:700;color:var(--ink)}
.topo__sep{width:1px;height:12px;background:var(--line)}
@media(max-width:640px){.topo__lang,.topo__nota,.topo__r .topo__sep{display:none}}
.topo__moeda{white-space:nowrap}
.topo__moeda b{font-weight:800}
.hd{position:sticky;top:0;z-index:100;background:var(--card);
  border-bottom:1px solid var(--line);
  padding-top:env(safe-area-inset-top)}
.hd__in{
  max-width:var(--max);margin-inline:auto;padding:.8rem var(--gut);
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.7rem 1rem;
}
@media(min-width:900px){.hd__in{gap:.7rem 2rem;padding-block:.9rem}}
.hd__menu{display:grid;place-items:center;width:44px;height:44px;flex:none;
  border-radius:9px;color:var(--red);
  transition:background .16s var(--ease)}
.hd__menu svg{width:22px;height:22px}
.hd__menu:hover{background:var(--red-wash)}
@media(min-width:900px){.hd__menu{display:none}}
.brand{display:flex;align-items:center;gap:.55rem;flex:none;min-height:44px;color:var(--red)}
.brand__mark{display:grid;place-items:center;width:42px;height:42px;flex:none;
  border-radius:50%;background:var(--red);color:#fff}
.brand__mark svg{width:30px;height:30px;fill:none;stroke:currentColor;
  stroke-dasharray:1;stroke-width:2.4;vector-effect:non-scaling-stroke}
.brand__t{display:flex;flex-direction:column;line-height:1}
.brand__t b{font-variation-settings:'wdth' 112,'wght' 850;font-size:1.45rem;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;color:var(--ink-2);margin-top:2px}
.brand--ft{color:#fff}
.brand--ft .brand__mark{background:#fff;color:var(--red)}
.brand--ft .brand__t i{color:rgba(255,255,255,.75)}
.hdsearch{
  position:relative;display:flex;align-items:center;
  grid-column:1 / -1;order:3;
  background:#fff;border:1.5px solid var(--line);border-radius:99px;
  transition:border-color .16s var(--ease)}
.hdsearch:focus-within{border-color:var(--red);outline:none}
@media(min-width:900px){.hdsearch{grid-column:auto;order:0;max-width:620px;width:100%;justify-self:center}}
.hdsearch input{
  flex:1;min-width:0;padding:.72rem 1rem;border:0;background:none;outline:none;
  font:inherit;font-size:var(--t-md);font-weight:500;color:var(--ink);border-radius:99px;
}
.hdsearch input::placeholder{color:var(--ink-3);font-weight:400}
.hdsearch input::-webkit-search-cancel-button{display:none}
.hdsearch__x{flex:none;display:grid;place-items:center;width:38px;height:38px;
  border-radius:99px;color:var(--ink-3)}
.hdsearch__x[hidden]{display:none}
.hdsearch__x svg{width:15px;height:15px}
.hdsearch__x:hover{background:var(--red-wash);color:var(--red)}
.hdsearch__go{flex:none;display:grid;place-items:center;width:42px;height:42px;margin:2px;
  border-radius:50%;background:none;color:var(--ink-3);transition:color .16s var(--ease)}
.hdsearch__go svg{width:19px;height:19px}
.hdsearch__go:hover{color:var(--red)}
.hd__side{display:flex;align-items:center;gap:1rem;justify-self:end}
.hd__link{display:none;font-size:var(--t-sm);font-weight:600;color:var(--ink-2);white-space:nowrap;
  padding:.5rem .1rem}
.hd__link:hover{color:var(--red)}
@media(min-width:1000px){.hd__link{display:block}}
.hd__link + .hd__link{border-left:1px solid var(--line);padding-left:1rem}
.hd__cta{display:inline-flex;align-items:center;gap:.45rem;min-height:46px;padding:.55rem 1.3rem;
  border-radius:99px;background:var(--red);color:#fff;font-weight:750;font-size:var(--t-sm);
  white-space:nowrap;transition:background .18s var(--ease),transform .18s var(--ease)}
.hd__cta svg{width:17px;height:17px}
.hd__cta:hover{background:var(--red-hi);transform:translateY(-1px)}
@media(max-width:899px){
  .hd__in{grid-template-columns:auto minmax(0,1fr) auto;gap:.6rem}
  .hd__cta span{display:none}
  .hd__cta{min-height:44px;padding:.55rem .8rem}
  .brand__t b{font-size:1.2rem}
  .hdsearch{min-width:0;width:100%}
}
.topo__in > *{min-width:0}

/* ==========================================================================
   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:center;justify-content:center;gap:.2rem}
.dep__all{display:flex;align-items:center;gap:.5rem;min-height:52px;padding:.5rem .9rem;
  font-weight:700;font-size:var(--t-sm);color:var(--ink);white-space:nowrap;flex:none;
  transition:color .18s var(--ease)}
.dep__burger{width:18px;height:18px}
.dep__all:hover{color:var(--red)}
.dep__quick{display:flex;align-items:center;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;justify-content:flex-start}
  .dep__quick{padding-inline:var(--gut)}
}
.dep__quick::-webkit-scrollbar{display:none}
.dep__q{padding:.5rem .8rem;min-height:52px;display:flex;align-items:center;gap:.45rem;
  font-size:var(--t-sm);font-weight:700;color:var(--ink);white-space:nowrap;
  transition:color .18s var(--ease)}
.dep__q svg{width:17px;height:17px;color:var(--red);flex:none}
.dep__q:hover{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}
}

/* ==========================================================================
   CATÁLOGO — padrão da referência: sidebar à esquerda, vitrine à direita,
   breadcrumb, ordenação em pílula, grade de 4.
   ========================================================================== */
.catlay{display:grid;gap:1.2rem;padding-top:1.1rem}
@media(min-width:960px){.catlay{grid-template-columns:230px minmax(0,1fr);gap:1.6rem;align-items:start}}
.side{display:none}
@media(min-width:960px){.side{display:grid;gap:1.4rem;align-content:start;position:sticky;top:132px}}
.side__box h2{display:flex;align-items:center;justify-content:space-between;
  font-size:var(--t-md);font-weight:800;color:var(--red);margin-bottom:.4rem}
.side__deps{display:grid}
.side__deps a{display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  padding:.5rem .1rem;font-size:var(--t-sm);color:var(--ink-2);border-bottom:1px solid var(--line-2)}
.side__deps a:hover{color:var(--red)}
.side__deps a.is-on{color:var(--red);font-weight:750}
.side__deps small{font-size:var(--t-xs);color:var(--ink-3);font-feature-settings:'tnum'}
.side__help{border:1px solid var(--line);border-radius:12px;padding:1rem}
.side__help p{font-size:var(--t-sm);color:var(--ink-2);line-height:1.5;margin-bottom:.8rem}
.catmain{min-width:0}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .4rem;
  padding:.2rem 0 .6rem;font-size:var(--t-sm);color:var(--ink-3)}
.crumbs a{padding:.4rem .2rem}
.crumbs a:hover{color:var(--red);text-decoration:underline;text-underline-offset:3px}
.crumbs i{font-style:normal;opacity:.5}
.crumbs b{font-weight:700;color:var(--red)}
.cathd{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem 1rem;margin:0 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:44px;padding:.5rem 2.2rem .5rem 1rem;border-radius:99px;
  border:1px solid var(--line);background:var(--card);color:var(--ink);
  font:inherit;font-size:var(--t-sm);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)}
@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,minmax(0,1fr))}
@media(min-width:560px){.tiles__in{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:860px){.tiles__in{grid-template-columns:repeat(5,minmax(0,1fr));gap:.9rem}}

.tile{
  display:grid;grid-template-rows:auto auto auto;gap:.15rem;min-width:0;
  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}
.grid{display:grid;gap:.9rem;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:640px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:960px){.catmain .grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1200px){.catmain .grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:960px){body.is-plano .catlay{grid-template-columns:230px minmax(0,1fr)}}
.grid > *{min-width:0}
.card{
  position:relative;display:flex;flex-direction:column;min-width:0;
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  overflow:hidden;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease);
}
.card:hover{transform:translateY(-3px);border-color:#D8D2D0;
  box-shadow:0 14px 28px -18px rgba(23,17,16,.35)}
.card[hidden]{display:none}
.card__fig{position:relative;aspect-ratio:1;display:grid;place-items:center;
  background:#fff;border-bottom:1px solid var(--line-2);overflow:hidden}
.card__fig img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;padding:6%}
.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 .8rem .85rem;flex:1}
.card__n{font-size:var(--t-sm);font-weight:600;line-height:1.35;color:var(--ink);
  letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
.card__d{font-size:var(--t-xs);font-weight:500;line-height:1.4;
  letter-spacing:.01em;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;
  line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card__p{margin-top:auto;padding-top:.45rem;display:flex;align-items:baseline;gap:.3rem;
  font-variant-numeric:tabular-nums;flex-wrap:wrap}
.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:1.12rem;
  letter-spacing:-.02em;color:var(--red)}
.card__p i{font-style:normal;color:var(--ink-3);opacity:.6}
.card__br{font-size:var(--t-sm);font-weight:600;color:var(--ink-2)}
.card__u{font-size:var(--t-xs);font-weight:500;color:var(--ink-3);margin-top:1px}
.card.is-out{opacity:.62}
/* Respiros de fim de conteúdo acima da barra móvel de 60px + safe area. */
@media(max-width:959px){
  .catmain{padding-bottom:calc(4.5rem + env(safe-area-inset-bottom))}
  .pdp{padding-bottom:calc(5rem + env(safe-area-inset-bottom))}
}

/* 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 .wrap{padding-top:clamp(1.6rem,4vw,2.6rem);padding-bottom:clamp(1.6rem,4vw,2.6rem)}
.info{background:#fff;border:1px solid var(--line);border-radius:14px;
  display:grid;overflow:hidden}
@media(min-width:760px){.info{grid-template-columns:repeat(4,1fr)}}
.info > div{padding:1.9rem 1.4rem;text-align:center}
.info > div + div{border-top:1px solid var(--line)}
@media(min-width:760px){.info > div + div{border-top:0;border-left:1px solid var(--line)}}
.info svg{width:32px;height:32px;color:var(--red);margin:0 auto .8rem}
.info h3{font-size:var(--t-sm);font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--red);margin-bottom:.35rem}
.info p{font-size:var(--t-sm);color:var(--ink-2);line-height:1.5;max-width:24ch;margin-inline:auto}
@media(max-width:959px){
  .trust .wrap{padding-bottom:calc(4.5rem + env(safe-area-inset-bottom))}
}

/* ==========================================================================
   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:700;color:var(--red)}
.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}}
/* No celular o flutuante vira barra inferior de largura total: chrome
   explícito em vez de círculo sobre o conteúdo. Altura útil de 60px acima
   do indicador home; os respiros de fim superam barra + safe area. */
@media(max-width:959px){
  .fab{left:0;right:0;bottom:0;width:100%;height:calc(60px + env(safe-area-inset-bottom));border-radius:0;
    justify-content:center;padding-bottom:env(safe-area-inset-bottom);
    box-shadow:0 -6px 20px -8px rgba(0,0,0,.4)}
  .fab .fab__t{display:block}
  .fab::before{display:none}
  .fab:hover{transform:none;box-shadow:0 -6px 20px -8px rgba(0,0,0,.4)}
}

/* ==========================================================================
   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.
   ========================================================================== */