/* ---------- páginas institucionais (sobre/trocas/contato) — padrão .pg-texto do gabarito ---------- */
.user-content{padding:12px 0 40px}
.user-content .col-md-8{max-width:65ch!important;margin:0 auto;float:none}
.user-content p,.user-content li{font:400 16px/1.75 'Hanken Grotesk',-apple-system,'Segoe UI',Arial,sans-serif;color:#4A4139}
.user-content p{margin:0 0 1.1em}
.user-content h2,.user-content h3,.user-content h4{font-family:'Fraunces',Georgia,serif;font-weight:400;
  color:#111;letter-spacing:.01em;font-size:22px;margin:1.8em 0 .5em;line-height:1.3}
.user-content ul,.user-content ol{margin:0 0 1.2em;padding-left:1.3em}
.user-content li{margin:.35em 0}
.user-content a{color:#241812;text-decoration:underline;text-underline-offset:2px}
.user-content strong,.user-content b{color:#111;font-weight:700}
/* título da página (page-header) no estilo do gabarito .pg-head */
.page-header h1{letter-spacing:.02em}

/* =====================================================================
   SARC · CSS do GABARITO (porte fiel de loja.css do design aprovado)
   Usado pelos snippets sarc-* (abar, reassure, best-sellers, qrid,
   novidades, toda-a-loja, strip-cupom, benef, news2, vant, insta, footer).
   Tokens = design system Brogan monocromatico + espresso #241812.
   ===================================================================== */
:root{
  --serif:'Fraunces',Georgia,serif;
  --sans:'Hanken Grotesk',-apple-system,'Segoe UI',Arial,sans-serif;
  --fundo:#FFFFFF;--superficie:#FFF;--texto:#111111;--muted:#6b7280;
  --acento:#241812;--sale:#4b5563;--linha:#e5e7eb;--inversa:#FAF6F0;--marrom:#241812;
  --fs-secao:clamp(1.75rem,1.261rem + 2.174vw,3rem);
  --fs-sub:clamp(1.25rem,1.103rem + 0.652vw,1.625rem);
  --fs-nome:clamp(1.0625rem,1.043rem + 0.109vw,1.125rem);
  --fs-preco:clamp(1rem,0.951rem + 0.217vw,1.125rem);
  --fs-meta:.8125rem;--fs-caps:.6875rem;--track:.16em;
  --gutter:clamp(14px,2.5vw,24px);
}
.sarc-wrap{max-width:1280px;margin:0 auto;padding:0 var(--gutter)}
.sarc-caps{font:600 var(--fs-caps) var(--sans);letter-spacing:var(--track);text-transform:uppercase}
.num{font-variant-numeric:tabular-nums}
.btn-ghost{display:inline-block;border:1px solid #FAF6F0;color:#FAF6F0;background:transparent;padding:13px 34px;
  font:300 12px var(--sans);letter-spacing:.24em;text-transform:uppercase;transition:.2s;cursor:pointer;text-decoration:none}
.btn-ghost:hover{background:#FAF6F0;color:#38281E}

/* ---------- abar: barra de anuncio rotativa ---------- */
.abar{position:relative;background:var(--texto);color:var(--inversa);text-align:center;height:33px;
  font:600 11px var(--sans);letter-spacing:.18em;text-transform:uppercase}
.abar span{position:absolute;left:0;right:0;top:10px;opacity:0;transition:opacity .6s}
.abar span.on{opacity:1}

/* ---------- reassure: faixa de beneficios sob o hero ---------- */
.reassure{text-align:center;padding:13px var(--gutter);border-bottom:1px solid var(--linha);
  font:600 11px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--texto);background:var(--superficie)}

/* ---------- best-sellers: secao + regua de tipos + rail bscard ---------- */
.bsx-sec{background:#fff;border-top:1px solid var(--linha);border-bottom:1px solid var(--linha);padding-bottom:56px}
.bsx-sec .bs-head{padding-top:44px}
.bs-head{text-align:center;padding:64px var(--gutter) 34px}
.bs-head h2,.bs-head .bs-h2{font:300 clamp(28px,3.4vw,44px) var(--sans);letter-spacing:.3em;text-transform:uppercase;
  color:var(--texto);margin:0 0 10px}
.bs-head p{font:600 12px var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--acento);margin:0}
.tipos{display:flex;justify-content:center;gap:clamp(18px,3.4vw,52px);flex-wrap:wrap;
  padding:52px var(--gutter) 8px;border-bottom:1px solid var(--linha);max-width:1280px;margin:0 auto}
.tipos a{text-align:center;padding-bottom:14px;text-decoration:none}
.tipos img{width:clamp(84px,9vw,124px);aspect-ratio:1/1;object-fit:contain;display:block;margin:0 auto 8px}
.tipos span{font:600 11px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--texto)}
.tipos a:hover span{color:var(--acento)}
.bsx-wrap{position:relative;max-width:1280px;margin:0 auto;padding:0 var(--gutter)}
.bsx{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;scroll-behavior:smooth}
.bsx::-webkit-scrollbar{display:none}
.bscard{flex:0 0 calc(25% - 14px);min-width:230px;scroll-snap-align:start;display:block;background:#fff;text-decoration:none;color:var(--texto)}
@media(max-width:1000px){.bscard{flex-basis:calc(33.3% - 12px)}}
@media(max-width:700px){.bscard{flex-basis:70vw}}
.bscard .foto{position:relative;aspect-ratio:1/1;background:#fff;overflow:hidden}
.bscard .foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .35s ease}
.bscard .foto img.b{opacity:0}
.bscard.tem-b:hover .foto img.b{opacity:1}
.bscard.tem-b:hover .foto img.a{opacity:0}
.bscard .bs-tams{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;justify-content:center;gap:8px;
  background:rgba(255,255,255,.92);padding:9px 6px;opacity:0;transform:translateY(8px);transition:.25s}
.bscard:hover .bs-tams{opacity:1;transform:none}
.bscard .bs-tams i{font:600 12px var(--sans);font-style:normal;color:var(--texto);padding:2px 4px}
.bscard .bs-tams i.esg{color:#B9AFA4;text-decoration:line-through}
.bscard .mini-thumbs{display:flex;gap:6px;margin:10px 0 8px}
.bscard .mini-thumbs img{width:38px;height:38px;object-fit:cover;border:1px solid var(--linha);background:#fff}
.bscard .nome{font:italic 400 16px var(--serif);color:var(--texto);margin:0 0 4px}
.bscard .preco{font:600 var(--fs-preco) var(--sans)}
.bscard .preco s{color:var(--muted);margin-right:6px;font-weight:400}
.bscard .parc{font:400 12.5px var(--sans);color:var(--texto);margin:2px 0}
.bscard .avista{font:600 12.5px var(--sans);color:var(--texto)}
.bscard .selo-off{position:absolute;top:10px;right:10px;z-index:3}
.bsx-seta{position:absolute;top:34%;z-index:5;width:42px;height:42px;border-radius:50%;border:1px solid var(--linha);
  background:rgba(255,255,255,.95);color:var(--texto);font-size:22px;line-height:1;cursor:pointer;
  display:grid;place-items:center;transition:.2s;box-shadow:0 2px 10px rgba(33,28,23,.08)}
.bsx-seta:hover{background:var(--texto);color:#fff}
.bsx-seta.esq{left:calc(var(--gutter)/2 - 8px)}
.bsx-seta.dir{right:calc(var(--gutter)/2 - 8px)}
@media(max-width:700px){.bsx-seta{display:none}}

/* ---------- qrid: banner "queridinho" Bota Laura ---------- */
.qrid{position:relative;margin:56px 0;width:100%;aspect-ratio:2200/830;min-height:300px;max-height:560px;overflow:hidden;background:#241812}
.qslide{position:absolute;inset:0;display:block;opacity:0;visibility:hidden;transition:opacity .9s ease,visibility .9s ease;text-decoration:none}
.qslide.on{opacity:1;visibility:visible}
.qbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.qveu{position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,12,8,.82) 0%,rgba(20,12,8,.45) 38%,rgba(20,12,8,.08) 62%,rgba(20,12,8,.3) 100%)}
.qtxt{position:absolute;z-index:2;inset:0;display:flex;flex-direction:column;justify-content:center;
  align-items:flex-start;max-width:1280px;margin:0 auto;padding:0 var(--gutter);color:#FAF6F0}
.qtxt .btn-ghost{align-self:flex-start}
.qkicker{font:300 13px var(--sans);letter-spacing:.24em;text-transform:uppercase;opacity:.85;margin:0 0 12px}
.qnome{font:400 clamp(28px,3.6vw,48px) var(--serif);letter-spacing:.16em;text-transform:uppercase;margin:0 0 22px}
@media(max-width:760px){.qtxt{text-align:center;align-items:center}.qtxt .btn-ghost{align-self:center}
  .qveu{background:linear-gradient(180deg,rgba(20,12,8,.35),rgba(20,12,8,.72))}}

/* ---------- secoes de revista (Novidades / Toda a loja) ---------- */
.sarc-sec{padding:54px 0 10px}
.sec-head{display:flex;align-items:baseline;gap:14px;border-top:1px solid var(--linha);padding-top:18px;margin-bottom:26px}
.sec-num{font:300 32px var(--serif);color:var(--acento)}
.sec-tit{font:400 var(--fs-secao) var(--serif)}
.sec-link{margin-left:auto;font:600 11px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-decoration:none}
.sec-link:hover{color:var(--acento)}
.rail-wrap{position:relative}
.rail{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;
  scrollbar-width:none;-ms-overflow-style:none}
.rail::-webkit-scrollbar{display:none}
.rail>*{flex:0 0 236px;scroll-snap-align:start}
.rail-wrap .bsx-seta{top:28%}
@media(max-width:700px){.rail>*{flex-basis:46vw}}
/* cards do tema (item.tpl) injetados no rail/grid: neutraliza as classes de coluna bootstrap */
.rail .js-item-product,.sarc-grid .js-item-product{padding:0;margin:0}
.rail .js-item-product{width:auto;max-width:none;flex:0 0 236px}
@media(max-width:700px){.rail .js-item-product{flex-basis:46vw}}
/* força o card a preencher a coluna da grade (bootstrap col-md-4 tem max-width:33% que colapsava pra ~101px) */
.sarc-grid>.js-item-product{width:100%!important;max-width:100%!important;flex:none!important;justify-self:stretch}
/* SARC: reestabelece o tamanho da foto nos cards NATIVOS injetados na grade/rail.
   O tema dimensiona via .item-image img{height:100%} + padding-bottom inline no .p-relative,
   que colapsa fora da coluna bootstrap. Aqui damos aspecto fixo (como o gabarito .card img). */
.rail .item-image,.sarc-grid .item-image{position:relative;aspect-ratio:4/5;max-height:none;overflow:hidden}
.rail .item-image .p-relative,.sarc-grid .item-image .p-relative{position:static;padding:0!important}
.rail .item-image img,.rail .item-image .item-image-featured,.rail .item-image .item-image-secondary,
.sarc-grid .item-image img,.sarc-grid .item-image .item-image-featured,.sarc-grid .item-image .item-image-secondary{
  position:absolute;inset:0;left:0!important;transform:none!important;
  width:100%!important;height:100%!important;max-height:none!important;object-fit:cover}

/* extras do card (item.tpl): marca + esgotado riscado */
.sarc-marca{font:600 10.5px var(--sans);letter-spacing:var(--track);text-transform:uppercase;color:var(--muted)}
.sarc-tallbar-num.esg{color:#B9AFA4;text-decoration:line-through}

/* ---------- faixa de cupom ---------- */
.strip-cupom{background:var(--texto);color:var(--inversa);text-align:center;padding:22px var(--gutter);
  margin:44px 0;display:flex;align-items:baseline;justify-content:center;gap:14px;flex-wrap:wrap}
.strip-cupom b{font:italic 500 clamp(20px,2.6vw,28px) var(--serif);letter-spacing:.04em}
.strip-cupom .sarc-caps{opacity:.75}

/* ---------- toda a loja: toolbar + grid + filtros ---------- */
.sarc-grid{display:grid;gap:30px 24px;grid-template-columns:repeat(4,1fr)}
@media(max-width:960px){.sarc-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.sarc-grid{grid-template-columns:repeat(2,1fr);gap:24px 12px}}
.sarc-toolbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;border-top:1px solid var(--linha);
  border-bottom:1px solid var(--linha);padding:12px 0;margin-bottom:26px}
.sarc-toolbar select{font:600 12px var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--texto);
  background:transparent;border:1px solid #c9c9c9;padding:9px 12px;cursor:pointer}
.num-group{margin-left:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.num-lbl{font:600 12px var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--acento)}
@media(max-width:760px){.num-group{margin-left:0;width:100%}}
.pills{display:flex;gap:7px;flex-wrap:wrap}
.pill{font:600 12px var(--sans);border:1px solid #c9c9c9;background:var(--superficie);color:var(--texto);
  padding:8px 11px;cursor:pointer;min-width:40px}
.pill:hover{border-color:var(--texto)}
.pill.on{background:var(--texto);color:var(--inversa);border-color:var(--texto)}
.carregar{display:block;margin:10px auto 40px;border:1px solid var(--texto);background:transparent;
  padding:13px 34px;font:600 12px var(--sans);letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.carregar:hover{background:var(--texto);color:var(--inversa)}
.fitem{display:contents}
.fitem.oculto{display:none}

/* ---------- benef ---------- */
.benef{display:flex;justify-content:center;gap:44px;padding:34px 0;color:var(--muted);font-size:13px;flex-wrap:wrap}

/* ---------- news2: newsletter com imagem ---------- */
.news2{position:relative;min-height:clamp(360px,42vw,520px);display:flex;align-items:center;overflow:hidden;background:#1D130C}
.news2-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.news2::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,12,8,.78) 0%,rgba(20,12,8,.4) 42%,rgba(20,12,8,.2) 70%,rgba(20,12,8,.55) 100%)}
.news2-in{position:relative;z-index:2;max-width:1280px;margin:0 auto;width:100%;padding:0 var(--gutter);
  display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.news2-txt{color:#FAF6F0;max-width:360px}
.news2-txt h3{font:300 clamp(26px,3vw,40px) var(--sans);letter-spacing:.24em;text-transform:uppercase;margin:0 0 16px}
.news2-txt p{font:400 clamp(14px,1.3vw,16px)/1.6 var(--sans);color:rgba(250,246,240,.82);margin:0}
.news2-form{display:flex;flex-direction:column;gap:12px;max-width:400px;justify-self:end;width:100%}
.news2-form input{background:rgba(250,246,240,.96);border:none;padding:15px 16px;font:400 15px var(--sans);color:var(--texto);outline:none}
.news2-form input:focus{outline:2px solid var(--acento);outline-offset:1px}
.news2-form button{background:transparent;border:1px solid #FAF6F0;color:#FAF6F0;padding:14px;
  font:600 12px var(--sans);letter-spacing:.24em;text-transform:uppercase;cursor:pointer;transition:.2s;margin-top:4px}
.news2-form button:hover{background:#FAF6F0;color:#241812}
@media(max-width:760px){
  .news2{min-height:0;padding:44px 0}
  .news2-in{grid-template-columns:1fr;gap:24px}
  .news2-txt{max-width:none;text-align:center;margin:0 auto}
  .news2-form{justify-self:stretch;max-width:none}
  .news2::after{background:linear-gradient(180deg,rgba(20,12,8,.5) 0%,rgba(20,12,8,.75) 100%)}
}

/* ---------- vant: A experiencia Sarc ---------- */
.vant{background:linear-gradient(160deg,#2A1D14,#1D130C);color:#EFE3D3;padding:56px var(--gutter) 60px}
.vant-head{text-align:center;margin-bottom:44px}
.vant-head h2{font:300 clamp(20px,2.4vw,30px) var(--serif);letter-spacing:.22em;text-transform:uppercase;margin:0 0 8px}
.vant-head p{font:600 11px var(--sans);letter-spacing:.3em;text-transform:uppercase;color:rgba(239,227,211,.6);margin:0}
.vant-grid{display:flex;justify-content:center;gap:clamp(24px,4vw,72px);flex-wrap:wrap;max-width:1280px;margin:0 auto}
.vant-item{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:190px}
.vant-item svg{width:34px;height:34px;fill:none;stroke:#EFE3D3;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;margin-bottom:16px}
.vant-item b{font:600 12px var(--sans);letter-spacing:.14em;text-transform:uppercase;margin-bottom:6px}
.vant-item span{font:400 12.5px var(--sans);color:rgba(239,227,211,.72);line-height:1.4}

/* ---------- instagram: barra seguir + strip ---------- */
.insta-follow{background:#fff;display:flex;align-items:center;justify-content:center;gap:16px;
  padding:22px var(--gutter);border-top:1px solid var(--linha);border-bottom:1px solid var(--linha);flex-wrap:wrap}
.insta-handle{display:inline-flex;align-items:center;gap:9px;font:600 15px var(--sans);letter-spacing:.03em;color:var(--texto)}
.insta-handle svg{width:20px;height:20px;fill:none;stroke:var(--texto);stroke-width:1.6}
.insta-btn{display:inline-flex;align-items:center;background:var(--texto);color:#fff;padding:9px 18px;
  font:600 11px var(--sans);letter-spacing:.16em;text-transform:uppercase;transition:.2s;text-decoration:none}
.insta-btn:hover{background:var(--acento)}
.insta-wrap{position:relative;background:var(--texto)}
.insta-strip{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none}
.insta-strip::-webkit-scrollbar{display:none}
.insta-cell{position:relative;flex:0 0 clamp(160px,16.66vw,280px);aspect-ratio:1/1;scroll-snap-align:start;
  display:block;overflow:hidden;background:#241812}
.insta-cell img{width:100%;height:100%;object-fit:cover;transition:transform .55s ease,opacity .3s}
.insta-cell:hover img{transform:scale(1.06);opacity:.9}
.insta-ic{position:absolute;top:10px;right:10px;pointer-events:none}
.insta-ic svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:1.6;filter:drop-shadow(0 1px 3px rgba(0,0,0,.55))}
.insta-wrap .bsx-seta{top:calc(50% - 21px)}
@media(max-width:700px){.insta-wrap .bsx-seta{display:none}}

/* ---------- footer sarc ---------- */
.footer-sarc{background:var(--texto);color:var(--inversa);padding:56px var(--gutter) 28px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:32px;max-width:1280px;margin:0 auto;
  padding-bottom:36px;border-bottom:1px solid rgba(250,246,240,.14)}
.foot-brand .foot-logo{font:400 30px var(--serif);letter-spacing:.14em;color:#FAF6F0;display:inline-block;margin-bottom:12px;text-decoration:none}
.foot-brand p{font:400 13px var(--sans);color:rgba(250,246,240,.6);line-height:1.5;max-width:220px}
.foot-col h4{font:600 11px var(--sans);letter-spacing:.2em;text-transform:uppercase;color:rgba(250,246,240,.55);margin:0 0 16px}
.foot-col nav{display:flex;flex-direction:column;gap:11px}
.foot-col a,.foot-col .foot-seg{font:400 13.5px var(--sans);color:rgba(250,246,240,.85);display:block;margin-bottom:11px;transition:.2s;text-decoration:none}
.foot-col a:hover{color:#FAF6F0}
.foot-col nav a{margin-bottom:0}
.foot-pay{max-width:1280px;margin:0 auto;padding:26px 0 8px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.foot-pay-tit{font:600 11px var(--sans);letter-spacing:.2em;text-transform:uppercase;color:rgba(250,246,240,.55)}
.pay-chips{display:flex;gap:8px;flex-wrap:wrap}
.pay-chips span{font:600 11px var(--sans);letter-spacing:.06em;color:rgba(250,246,240,.8);
  border:1px solid rgba(250,246,240,.28);border-radius:3px;padding:6px 10px}
.foot-legal{max-width:1280px;margin:18px auto 0;font:400 11.5px var(--sans);color:rgba(250,246,240,.5);letter-spacing:.04em}
@media(max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}}
@media(max-width:560px){.foot-grid{grid-template-columns:1fr}}

/* ---------- reveal (uma vez e para) ---------- */
@media(prefers-reduced-motion:no-preference){
  .sarc-reveal{opacity:0;transform:translateY(12px);transition:opacity .45s ease-out,transform .45s ease-out}
  .sarc-reveal.vis{opacity:1;transform:none}
}