/* ===================================================================
   The 4am Culture - spec mockup stylesheet
   LEAD, NOT A CLIENT. Nothing here is client work.

   PALETTE
   Their live site is Shopify and image-led; no palette was extractable
   from the markup, so this is a PROPOSAL drawn from the 4am concept
   and from their OWN published colourway names (Dark Coffee, Merlot,
   Soft Clay, Leite de Coco). [CONFIRM against their brand book.]
     4am black    #0B0D12   base ground
     night blue   #161C2A   cards, section separation
     first light  #E8A15C   the amber accent
     bone         #F2EEE7   light sections, type on dark
     soft clay    #C9A996   community and membership blocks
     merlot       #5E2233   sale states (a real colourway of theirs)
     steel        #7C848F   metadata and rules

   =================================================================
   THE SIGNATURE DEVICE HAS A MEASURED HOLE IN IT, AND THIS IS THE FIX
   =================================================================
   The brief asks for a night-to-dawn gradient tied to scroll, and
   requires that it "never take any text below AA at any scroll
   position - pin minimum contrast, test at every stop". Tested at
   every stop, it does not hold. Interpolating #161C2A -> #E8A15C:

     t=0.00  #161C2A   bone 14.72  black  1.14
     t=0.20  #403734   bone 10.01  black  1.68
     t=0.40  #6A513E   bone  6.35  black  2.65
     t=0.50  #7F5E43   bone  5.07  black  3.32
     t=0.55  #8A6546   bone  4.50  black  3.71   <- bone's last AA stop
     t=0.60  #946C48   bone  4.04  black  4.16   <- DEAD BAND
     t=0.64  #9C714A   bone  3.28  black  4.51   <- black's first AA stop
     t=1.00  #E8A15C   bone  1.88  black  8.96

   Between t=0.552 and t=0.636 NEITHER bone nor 4am black reaches
   4.5:1. That is an 8.4-point band of the scroll where any text on
   the gradient fails AA, whichever colour it is. Swapping the text
   colour mid-scroll does not rescue it, because the band exists
   precisely where both fail.

   So the gradient is CAPPED at t=0.50 (--dawn-cap #7F5E43, bone 5.07)
   wherever it sits behind text. The full #E8A15C appears only on
   surfaces that carry no text or that carry 4am black, where it
   measures 8.96. The night-to-dawn story still runs the length of the
   page; it just stops one step short of illegible.

   OTHER MEASURED PAIRS (computed, not estimated)
     bone  #F2EEE7 on black  #0B0D12 ..... 16.81  AAA
     bone  #F2EEE7 on nightblue .......... 14.72  AAA
     bone  #F2EEE7 on merlot  #5E2233 .... 10.36  AAA
     first #E8A15C on black ..............  8.96  AAA
     first #E8A15C on nightblue ..........  7.85  AAA
     clay  #C9A996 on black ..............  8.88  AAA
     black #0B0D12 on bone ............... 16.81  AAA
     black #0B0D12 on first light ........  8.96  AAA  (CTA fill)
     black #0B0D12 on clay ...............  8.88  AAA
     merlot#5E2233 on bone ............... 10.36  AAA
   AND THE TWO THAT FAIL, both used only where they are safe:
     first #E8A15C on bone ...............  1.88  FAILS - amber is
       never a letterform on the light sections. It is a rule, a chip
       fill and a CTA fill there, with black type on it.
     steel #7C848F on bone ...............  3.27  FAILS - so light
       sections use --steel-ink #5B6470 (5.19 on bone) for metadata.
     steel #7C848F on nightblue is 4.50, exactly at the line, so the
       dark sections use --steel-lit #98A0AA (7.35 on black, 6.44 on
       nightblue) instead of sitting on the boundary.

   WHAT IS DELIBERATELY NOT BUILT
   No star rating, no review count, no customer count, no "X mil
   clientes", no press logo, no award, no member number. They publish
   none of it. The only prices anywhere in this build are the six they
   actually publish; every other price slot is a visible [CONFIRM].
   Compression and coverage scales NEVER rely on dots or colour alone -
   every scale carries its text value beside it.
   =================================================================== */

:root{
  --black:#0B0D12;
  --night:#161C2A;
  --first:#E8A15C;
  --bone:#F2EEE7;
  --clay:#C9A996;
  --merlot:#5E2233;
  --steel:#7C848F;
  --steel-ink:#5B6470;   /* text-safe steel on bone */
  --steel-lit:#98A0AA;   /* text-safe steel on the dark grounds */
  --dawn-cap:#7F5E43;    /* t=0.50 - the furthest the gradient goes behind text */
  --line:rgba(242,238,231,.16);
  --line-lt:rgba(11,13,18,.14);
  --maxw:1320px;
  --gut:clamp(1.1rem,4vw,2.8rem);
  --sans:'Archivo','Inter',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --g-depth:linear-gradient(180deg,#0B0D12 0%,#161C2A 100%);
  --g-dawn:linear-gradient(180deg,#161C2A 0%,#7F5E43 100%);
  --g-cta:linear-gradient(90deg,#E8A15C 0%,#C9A996 100%);
  --g-warm:linear-gradient(180deg,#F2EEE7 0%,#C9A996 100%);
  --g-scrim:linear-gradient(180deg,rgba(11,13,18,0) 30%,rgba(11,13,18,.86) 100%);
  --ease:cubic-bezier(.22,.7,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:var(--sans);font-size:1rem;line-height:1.65;color:var(--bone);
  background:var(--black);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block;height:auto}
a{color:var(--first)}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--first);outline-offset:3px}
.band-light a:focus-visible,.band-light button:focus-visible{outline-color:var(--merlot)}
h1,h2,h3,h4{font-family:var(--sans);font-weight:700;line-height:1.08;margin:0 0 .6rem;
  letter-spacing:-.01em;text-transform:uppercase}
h1{font-size:clamp(2rem,6vw,4.4rem);letter-spacing:.01em}
h2{font-size:clamp(1.5rem,3.6vw,2.6rem)}
h3{font-size:clamp(1rem,1.8vw,1.25rem);letter-spacing:.04em}
p{margin:0 0 1rem}

.wrap{width:min(100% - (var(--gut) * 2),var(--maxw));margin-inline:auto}
.wide{width:min(100% - (var(--gut) * 2),1560px);margin-inline:auto}
section{padding-block:clamp(3rem,7vw,6rem)}
.band-night{background:var(--night)}
.band-depth{background:var(--g-depth)}
.band-dawn{background:var(--g-dawn)}
.band-light{background:var(--bone);color:var(--black)}
.band-light h1,.band-light h2,.band-light h3{color:var(--black)}
.band-light .lede,.band-light p{color:#3A3F47}
.band-light a{color:var(--merlot)}
.band-warm{background:var(--g-warm);color:var(--black)}
.band-warm h2,.band-warm h3{color:var(--black)}
.band-warm p,.band-warm .lede{color:#33261F}
.band-warm a{color:var(--merlot)}

.eyebrow{font-size:.68rem;font-weight:700;letter-spacing:.3em;text-transform:uppercase;
  color:var(--first);margin:0 0 1rem}
.band-light .eyebrow,.band-warm .eyebrow{color:var(--merlot)}
.lede{font-size:clamp(1rem,1.5vw,1.16rem);color:rgba(242,238,231,.84);max-width:62ch;
  text-transform:none}
.small{font-size:.85rem;color:var(--steel-lit)}
.band-light .small,.band-warm .small{color:var(--steel-ink)}
.center{text-align:center}
.center .lede{margin-inline:auto}
.rule-dawn{height:2px;background:var(--g-cta);border:0;width:88px;margin:0 0 1.5rem}

/* [CONFIRM] markers */
.cfm{background:rgba(232,161,92,.2);color:#FBE7D0;border:1px dashed var(--first);border-radius:3px;
  padding:0 .34em;font-size:.9em;font-weight:600;text-transform:none;letter-spacing:0}
.band-light .cfm,.band-warm .cfm{background:#FFF3E3;color:#4A3218;border-color:#A8703A}
.cfm-block{background:rgba(232,161,92,.13);border:1px dashed var(--first);border-left-width:5px;
  padding:1rem 1.15rem;font-size:.92rem;color:rgba(242,238,231,.94);margin:1.4rem 0;
  text-transform:none}
.cfm-block p:last-child{margin-bottom:0}
.band-light .cfm-block,.band-warm .cfm-block{background:#FFF3E3;border-color:#A8703A;color:#4A3218}
.mock-note{background:rgba(242,238,231,.07);border:1px dashed rgba(232,161,92,.6);
  padding:1rem 1.15rem;font-size:.88rem;color:rgba(242,238,231,.92);text-transform:none}
.warn-block{background:rgba(94,34,51,.28);border:1px solid rgba(232,161,92,.4);
  border-left:5px solid var(--first);padding:1.05rem 1.2rem;font-size:.93rem;margin:1.4rem 0;
  text-transform:none;color:rgba(242,238,231,.96)}
.warn-block p:last-child{margin-bottom:0}
.band-light .warn-block,.band-warm .warn-block{background:#FBE9EC;border-color:rgba(94,34,51,.3);
  border-left-color:var(--merlot);color:#33161E}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;font:inherit;
  font-size:.76rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  text-decoration:none;padding:.95rem 1.7rem;border:1px solid transparent;cursor:pointer;
  transition:background .24s var(--ease),color .24s var(--ease),border-color .24s var(--ease),
             transform .24s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn .ar{transition:transform .22s var(--ease)}
.btn:hover .ar{transform:translateX(5px)}
.btn-first{background:var(--first);color:var(--black)}   /* 8.96:1 */
.btn-first:hover{background:var(--clay)}                  /* 8.88:1 */
.btn-bone{background:var(--bone);color:var(--black)}
.btn-bone:hover{background:var(--clay)}
.btn-line{background:transparent;color:var(--bone);border-color:rgba(242,238,231,.6)}
.btn-line:hover{background:var(--bone);color:var(--black)}
.btn-dark{background:var(--black);color:var(--bone)}
.btn-dark:hover{background:var(--night)}
.btn-sm{padding:.62rem 1.15rem;font-size:.7rem}
.btn-block{width:100%}

.skip{position:absolute;left:-9999px;top:0;background:var(--first);color:var(--black);
  padding:.7rem 1.1rem;z-index:220;font-weight:700}
.skip:focus{left:.6rem;top:.6rem}

/* ---------- announcement bar + header ---------- */
.announce{background:var(--night);color:var(--bone);font-size:.76rem;letter-spacing:.08em;
  padding:.5rem 0;border-bottom:1px solid var(--line)}
.announce .wide{display:flex;gap:1rem;flex-wrap:wrap;justify-content:space-between;
  align-items:center}
.announce .a-left{display:flex;gap:1.2rem;flex-wrap:wrap;align-items:center}
.announce .a-right{display:flex;gap:.8rem;align-items:center}
.announce strong{color:var(--first)}
.site-head{position:sticky;top:0;z-index:120;background:rgba(11,13,18,.97);
  border-bottom:1px solid var(--line);transition:box-shadow .3s var(--ease)}
.site-head.solid{box-shadow:0 3px 22px rgba(0,0,0,.5)}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-block:.95rem;transition:padding .3s var(--ease)}
.site-head.solid .head-in{padding-block:.6rem}
.brand{text-decoration:none;color:var(--bone);font-weight:700;font-size:1.15rem;
  letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;line-height:1}
.brand em{font-style:normal;color:var(--first)}
.nav{display:flex;align-items:center;gap:1.5rem}
.nav a{font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  text-decoration:none;color:var(--bone);position:relative;padding-block:.3rem}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--first);transition:right .28s var(--ease)}
.nav a:hover::after,.nav a[aria-current="page"]::after{right:0}
.nav a.lead{color:var(--first)}
.head-right{display:flex;align-items:center;gap:.9rem}
.lang{display:flex;align-items:center;font-size:.7rem;font-weight:700;letter-spacing:.12em}
.lang a{text-decoration:none;color:var(--steel-lit);padding:.2rem .38rem}
.lang a.on{color:var(--first)}
.burger{display:none;width:2.7rem;height:2.7rem;background:transparent;border:0;cursor:pointer;
  padding:0;position:relative}
.burger span{position:absolute;left:.55rem;right:.55rem;height:2px;background:var(--bone);
  transition:transform .3s var(--ease),opacity .2s linear}
.burger span:nth-child(1){top:.9rem}
.burger span:nth-child(2){top:1.3rem}
.burger span:nth-child(3){top:1.7rem}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(.4rem) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-.4rem) rotate(-45deg)}
.mobile-nav{position:fixed;inset:0;z-index:115;background:var(--g-depth);display:flex;
  flex-direction:column;justify-content:center;gap:.2rem;padding:5rem var(--gut) 3rem;
  opacity:0;visibility:hidden;transform:translateY(-1rem);
  transition:opacity .32s var(--ease),transform .32s var(--ease),visibility .32s}
.mobile-nav.open{opacity:1;visibility:visible;transform:none}
.mobile-nav a{font-size:clamp(1.3rem,6vw,2rem);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--bone);text-decoration:none;padding:.35rem 0;
  border-bottom:1px solid var(--line)}
.mobile-nav a:hover{color:var(--first)}
.mobile-nav .m-foot{margin-top:1.6rem;font-size:.86rem;color:var(--steel-lit);
  text-transform:none;letter-spacing:0}
@media (max-width:1120px){.nav{display:none}.burger{display:block}.head-right .btn{display:none}}

/* ---------- hero ---------- */
.hero{position:relative;min-height:clamp(520px,86vh,780px);display:flex;align-items:flex-end;
  overflow:hidden;background:var(--black)}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img{width:100%;height:100%;object-fit:cover;filter:saturate(.55) contrast(1.05);
  will-change:transform}
.hero-scrim{position:absolute;inset:0;z-index:1;background:var(--g-scrim)}
.hero-in{position:relative;z-index:2;padding-block:0 clamp(2.4rem,7vw,4.6rem)}
.hero h1{color:var(--bone);max-width:16ch;margin-bottom:1rem}
.hero .lede{color:rgba(242,238,231,.94);max-width:50ch}
.hero-cta{margin-top:2rem}
.clock{font-variant-numeric:tabular-nums;font-weight:700;letter-spacing:.34em;
  color:var(--first);font-size:.85rem;margin:0 0 1rem}
@media (max-width:720px){.hero{min-height:80svh}}

.rev{opacity:0;transform:translateY(20px);
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
.rev.in{opacity:1;transform:none}

/* ---------- as linhas: the strategic centre ---------- */
.lines{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  margin-top:2.2rem}
@media (max-width:720px){
  .lines{grid-auto-flow:column;grid-auto-columns:82%;grid-template-columns:none;
    overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    padding-bottom:.8rem}
  .lines > *{scroll-snap-align:start}
}
.line{background:var(--night);border:1px solid var(--line);display:flex;flex-direction:column;
  overflow:hidden;transition:transform .26s var(--ease),border-color .26s var(--ease)}
.line:hover{transform:translateY(-4px);border-color:var(--first)}
.line .swatch{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--black)}
.line .swatch img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.line:hover .swatch img{transform:scale(1.06)}
.line .body{padding:1.3rem;display:flex;flex-direction:column;gap:.6rem;flex:1}
.line h3{margin:0;color:var(--first);font-size:1.3rem;letter-spacing:.14em}
.line .promise{font-size:1rem;color:var(--bone);margin:0;text-transform:none;font-style:italic}
.line .char{font-size:.85rem;color:var(--steel-lit);margin:0}
.line .foot{margin-top:auto;padding-top:.7rem}
.chips{display:flex;gap:.35rem;flex-wrap:wrap;margin:0}
.chip{display:inline-flex;align-items:center;gap:.3rem;border:1px solid var(--line);
  color:var(--bone);padding:.2rem .6rem;font-size:.68rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase}
.chip.on{background:var(--first);color:var(--black);border-color:var(--first)}
.band-light .chip,.band-warm .chip{border-color:var(--line-lt);color:var(--black)}

/* the scales: NEVER dots alone - the text value always sits beside them */
.scale{display:flex;align-items:center;gap:.55rem;font-size:.8rem;color:var(--bone)}
.band-light .scale,.band-warm .scale{color:var(--black)}
.scale .dots{display:inline-flex;gap:.22rem}
.scale .dots i{width:.55rem;height:.55rem;border-radius:50%;border:1px solid var(--first);
  display:block}
.scale .dots i.f{background:var(--first)}
.band-light .scale .dots i,.band-warm .scale .dots i{border-color:var(--merlot)}
.band-light .scale .dots i.f,.band-warm .scale .dots i.f{background:var(--merlot)}
.scale .val{font-weight:700;letter-spacing:.06em}
.scale .lbl{color:var(--steel-lit)}
.band-light .scale .lbl,.band-warm .scale .lbl{color:var(--steel-ink)}

/* ---------- comparison table ---------- */
.tablewrap{overflow-x:auto;margin-top:2.4rem;border:1px solid var(--line)}
table.cmp{border-collapse:collapse;width:100%;min-width:760px;font-size:.88rem}
table.cmp caption{text-align:left;padding:1rem 1.1rem;font-weight:700;color:var(--first);
  letter-spacing:.14em;text-transform:uppercase;font-size:.76rem}
table.cmp th,table.cmp td{padding:.75rem .9rem;border-bottom:1px solid var(--line);
  text-align:left;vertical-align:top}
table.cmp thead th{background:var(--night);color:var(--first);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;font-size:.72rem;position:sticky;top:0;z-index:1}
table.cmp tbody th{font-weight:700;color:var(--bone);white-space:nowrap;
  letter-spacing:.1em;text-transform:uppercase;font-size:.72rem}
table.cmp tbody tr:nth-child(even){background:rgba(242,238,231,.04)}
table.cmp td{color:rgba(242,238,231,.9)}

/* ---------- product grid ---------- */
.filters{display:flex;gap:.4rem;flex-wrap:wrap;margin:1.8rem 0 1.6rem;padding-block:.9rem;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.filters button{font:inherit;font-size:.7rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;background:transparent;border:1px solid var(--line);color:var(--bone);
  padding:.5rem 1rem;cursor:pointer;white-space:nowrap;
  transition:background .2s,border-color .2s,color .2s}
.filters button:hover{border-color:var(--first)}
.filters button[aria-pressed="true"]{background:var(--first);border-color:var(--first);
  color:var(--black)}
@media (max-width:720px){.filters{flex-wrap:nowrap;overflow-x:auto;padding-bottom:1rem}}
.pgrid{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.prod{background:var(--night);border:1px solid var(--line);display:flex;flex-direction:column;
  overflow:hidden;transition:border-color .26s var(--ease)}
.prod:hover{border-color:var(--first)}
.prod[hidden]{display:none}
.prod .shot{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--black)}
.prod .shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:opacity .5s var(--ease)}
.prod .shot img.alt{opacity:0}
.prod:hover .shot img.alt{opacity:1}
.prod .body{padding:1rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.prod h3{margin:0;font-size:.95rem;letter-spacing:.06em}
.prod .colour{font-size:.82rem;color:var(--steel-lit);margin:0;text-transform:none}
.prod .price{font-size:1.05rem;font-weight:700;color:var(--first);margin:0;
  font-variant-numeric:tabular-nums}
.prod .sizes{display:flex;gap:.3rem;flex-wrap:wrap;margin:0;padding:0;list-style:none}
.prod .sizes li{border:1px solid var(--line);padding:.16rem .48rem;font-size:.72rem;
  font-weight:700;letter-spacing:.06em}
.prod .sizes li.out{color:var(--steel-lit);border-style:dashed;text-decoration:line-through}
.prod .foot{margin-top:auto;padding-top:.6rem}
.flag{position:absolute;left:.6rem;top:.6rem;z-index:2;font-size:.62rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;padding:.24rem .55rem}
.flag.best{background:var(--first);color:var(--black)}
.flag.last{background:var(--merlot);color:var(--bone)}
.ph-tag{position:absolute;right:.6rem;top:.6rem;z-index:2;background:rgba(11,13,18,.9);
  color:var(--bone);font-size:.58rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  padding:.22rem .55rem;border:1px solid var(--line)}

/* ---------- size chart ---------- */
.sizewrap{overflow-x:auto;margin-top:1.8rem;border:1px solid var(--line-lt)}
table.size{border-collapse:collapse;width:100%;min-width:620px;font-size:.9rem;
  font-variant-numeric:tabular-nums}
table.size caption{text-align:left;padding:1rem 1.1rem;font-weight:700;color:var(--merlot);
  letter-spacing:.14em;text-transform:uppercase;font-size:.76rem}
table.size th,table.size td{padding:.7rem .9rem;border-bottom:1px solid var(--line-lt);
  text-align:left}
table.size thead th{background:var(--black);color:var(--bone);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;font-size:.72rem}
table.size tbody th{font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:.75rem}
table.size tbody tr:nth-child(even){background:rgba(11,13,18,.04)}

/* ---------- split editorial ---------- */
.split{display:grid;gap:clamp(1.5rem,4.5vw,3.4rem);
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));align-items:center}
.split.top{align-items:start}
.figure{position:relative;margin:0;overflow:hidden;background:var(--night)}
.figure img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.figure:hover img{transform:scale(1.04)}
.figure figcaption{font-size:.78rem;color:var(--steel-lit);padding:.5rem 0 0;text-transform:none}
.band-light .figure figcaption,.band-warm .figure figcaption{color:var(--steel-ink)}
.imgpair{display:grid;gap:.8rem;grid-template-columns:1fr 1fr}
.imgpair figure:first-child{grid-column:1 / -1}
.r-3x2{aspect-ratio:3/2}
.r-4x3{aspect-ratio:4/3}
.r-3x4{aspect-ratio:3/4}
.r-16x9{aspect-ratio:16/9}
.r-1x1{aspect-ratio:1/1}

/* ---------- collections rail ---------- */
.rail{display:grid;gap:1rem;grid-auto-flow:column;grid-auto-columns:minmax(260px,1fr);
  overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  padding-bottom:1rem;margin-top:2rem}
.rail > *{scroll-snap-align:start}
.coll{position:relative;display:block;text-decoration:none;color:var(--bone);overflow:hidden;
  aspect-ratio:3/4;background:var(--night)}
.coll img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.coll:hover img{transform:scale(1.05)}
.coll .cap{position:absolute;inset:auto 0 0;padding:2.4rem 1rem 1rem;
  background:linear-gradient(180deg,rgba(11,13,18,0),rgba(11,13,18,.9));
  font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:.9rem}

/* ---------- community ---------- */
.quotes{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  margin-top:2rem}
.quote{background:rgba(11,13,18,.05);border-left:3px solid var(--merlot);padding:1.3rem}
.quote blockquote{margin:0 0 .9rem;font-size:1rem;line-height:1.6;color:#33261F;
  text-transform:none}
.quote cite{font-style:normal;font-size:.85rem;font-weight:700;letter-spacing:.06em;
  color:var(--merlot);display:block}
.quote cite span{display:block;font-weight:400;color:#5A4A42;letter-spacing:0}

/* ---------- country selector demo ---------- */
.geo{background:var(--night);border:1px solid var(--first);padding:clamp(1.2rem,3vw,2rem);
  margin-top:2rem}
.geo select{font:inherit;font-size:.95rem;padding:.7rem .9rem;background:var(--black);
  color:var(--bone);border:1px solid var(--line);width:100%;max-width:22rem}
.geo .out{margin-top:1.2rem;padding:1rem 1.15rem;border:1px dashed var(--first);
  background:rgba(232,161,92,.1);font-size:.94rem;text-transform:none}
.geo .out b{color:var(--first)}

/* ---------- FAQ ---------- */
.faq{max-width:64rem;margin-inline:auto;display:grid;gap:.5rem;margin-top:2rem}
.faq details{background:var(--night);border:1px solid var(--line);padding:0 1.15rem}
.faq summary{cursor:pointer;list-style:none;padding:1rem 2.2rem 1rem 0;font-weight:700;
  color:var(--bone);position:relative;letter-spacing:.06em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:.2rem;top:1.3rem;width:9px;height:9px;
  border-right:2px solid var(--first);border-bottom:2px solid var(--first);
  transform:rotate(45deg);transition:transform .26s var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq details > *:not(summary){padding-bottom:1rem;margin-top:-.2rem;
  color:rgba(242,238,231,.86);text-transform:none}
.faq details[open] > *:not(summary){animation:fadein .26s ease}
@keyframes fadein{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* ---------- store cards ---------- */
.stores{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  margin-top:2rem}
.store{background:var(--night);border:1px solid var(--line);overflow:hidden;display:flex;
  flex-direction:column}
.store .media{position:relative}
.store .media img{width:100%;aspect-ratio:4/3;object-fit:cover}
.store .body{padding:1.3rem;display:flex;flex-direction:column;gap:.6rem;flex:1}
.store h3{margin:0}
.store .foot{margin-top:auto;padding-top:.7rem}

/* ---------- newsletter + forms ---------- */
.form-grid{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.field{display:flex;flex-direction:column;gap:.34rem;min-width:0}
.field.full{grid-column:1 / -1}
.field label{font-size:.68rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--steel-lit)}
.band-light .field label,.band-warm .field label{color:var(--steel-ink)}
.field input,.field select,.field textarea{font:inherit;font-size:.97rem;padding:.7rem .85rem;
  border:1px solid var(--line);background:var(--black);color:var(--bone);width:100%}
.band-light .field input,.band-light .field select,.band-light .field textarea,
.band-warm .field input,.band-warm .field select,.band-warm .field textarea{
  background:#FFFFFF;color:var(--black);border-color:var(--line-lt)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--first);outline:none}
.field input[aria-invalid="true"]{border-color:#E06A5A}
.consent{display:flex;gap:.7rem;align-items:flex-start;margin-top:1rem;font-size:.87rem;
  color:rgba(242,238,231,.84);text-transform:none}
.band-light .consent,.band-warm .consent{color:#3A3F47}
.consent input{margin-top:.28rem;width:1.1rem;height:1.1rem;accent-color:var(--first);flex:0 0 auto}
.band-light .consent input,.band-warm .consent input{accent-color:var(--merlot)}
.form-status{margin-top:1rem;font-size:.9rem;min-height:1.4em;text-transform:none}

/* ---------- page head ---------- */
.page-head{background:var(--g-depth);padding-block:clamp(2.6rem,6vw,4.2rem) clamp(1.5rem,3.4vw,2.2rem);
  border-bottom:1px solid var(--line)}
.page-head h1{max-width:18ch}
.crumbs{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--steel-lit);
  margin-bottom:.8rem}
.crumbs a{color:var(--first);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.prose{max-width:70ch;text-transform:none}
.prose h2{margin-top:2.2rem}
.prose ul{padding-left:1.15rem}
.prose li{margin-bottom:.45rem}

/* ---------- size-help bubble: this lead's primary secondary action ---------- */
.help-bubble{position:fixed;right:1rem;bottom:1rem;z-index:130;display:inline-flex;
  align-items:center;gap:.5rem;background:var(--first);color:var(--black);
  padding:.85rem 1.2rem;font-size:.72rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;text-decoration:none;box-shadow:0 10px 28px rgba(0,0,0,.5);
  transition:transform .24s var(--ease),background .24s var(--ease)}
.help-bubble:hover{transform:translateY(-3px);background:var(--clay)}
.help-bubble svg{width:1.15rem;height:1.15rem;fill:currentColor}
@media (max-width:720px){.help-bubble{bottom:4.6rem;right:.7rem}}

.mobile-bar{position:fixed;left:0;right:0;bottom:0;z-index:125;display:none;background:var(--night);
  border-top:1px solid var(--line)}
.mobile-bar a{flex:1;display:flex;align-items:center;justify-content:center;gap:.4rem;
  padding:.95rem .5rem;color:var(--bone);text-decoration:none;font-size:.72rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase}
.mobile-bar a + a{border-left:1px solid var(--line)}
.mobile-bar a.buy{background:var(--first);color:var(--black)}
@media (max-width:720px){.mobile-bar{display:flex}body{padding-bottom:3.4rem}}

/* ---------- footer ---------- */
.site-foot{background:var(--black);color:rgba(242,238,231,.82);
  padding-block:clamp(3rem,6vw,4.6rem) 2rem;border-top:1px solid var(--line)}
.foot-grid{display:grid;gap:clamp(1.5rem,4vw,3rem);
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-top:2.2rem}
.foot-grid h4{color:var(--first);font-size:.66rem;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;margin:0 0 .9rem}
.foot-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem;font-size:.9rem}
.site-foot a{color:rgba(242,238,231,.82);text-decoration:none}
.site-foot a:hover{color:var(--first)}
.pay{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.6rem}
.pay span{border:1px solid var(--line);padding:.24rem .6rem;font-size:.68rem;font-weight:700;
  letter-spacing:.1em;color:var(--steel-lit)}
.pay span.missing{border-style:dashed;border-color:var(--first);color:var(--first)}
.legal-line{font-size:.82rem;color:var(--steel-lit);margin-top:1rem;text-transform:none}
.foot-bottom{margin-top:2.4rem;padding-top:1.4rem;border-top:1px solid var(--line);
  display:flex;gap:1rem;flex-wrap:wrap;justify-content:space-between;font-size:.8rem;
  color:var(--steel-lit)}

/* ---------- LGPD ---------- */
.lgpd{position:fixed;left:0;right:0;bottom:0;z-index:140;background:var(--night);
  border-top:2px solid var(--first);box-shadow:0 -10px 34px rgba(0,0,0,.6);padding:1.1rem 0;
  transform:translateY(112%);transition:transform .4s var(--ease)}
.lgpd.show{transform:none}
.lgpd[aria-hidden="true"]{visibility:hidden}
.lgpd.show[aria-hidden="false"]{visibility:visible}
.lgpd h2{font-size:1rem;margin:0 0 .4rem;color:var(--first)}
.lgpd p{font-size:.87rem;color:rgba(242,238,231,.86);margin:0 0 .85rem;max-width:78ch;
  text-transform:none}
.lgpd-actions{display:flex;gap:.5rem;flex-wrap:wrap}
.lgpd-prefs{margin-top:1rem;border-top:1px solid var(--line);padding-top:.9rem;display:grid;gap:.6rem}
.lgpd-row{display:flex;gap:.72rem;align-items:flex-start;font-size:.85rem;text-transform:none}
.lgpd-row input{margin-top:.25rem;width:1.05rem;height:1.05rem;accent-color:var(--first);
  flex:0 0 auto}
.lgpd-row b{display:block;letter-spacing:.06em}
.lgpd-row small{color:var(--steel-lit)}
@media (max-width:720px){.lgpd{bottom:3.4rem;max-height:76svh;overflow-y:auto}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important}
  .rev{opacity:1;transform:none}
  .prod .shot img.alt{opacity:0}
  .rail{scroll-snap-type:none}
}

/* ---------------------------------------------------- responsive tables */
/* A data table with several prose columns has a min-content width far
   wider than a phone. Without its own scroll box it widens the whole
   document and the page scrolls sideways. */
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.tbl-scroll>table{margin:0}

/* head-narrow-fix: below 420px the nowrap wordmark, the language switcher
   and the burger together exceed the viewport. Tighten the wordmark and
   let the row wrap rather than pushing the page sideways. */
@media (max-width:420px){
  .brand{font-size:.92rem;letter-spacing:.12em}
  .head-right{gap:.5rem}
  .lang a{padding:.2rem .24rem}
}

/* ------------------------------------------------- overflow guard
   Nothing may widen the document. Form controls and replaced elements
   cap at their container; flex/grid children get min-width:0 so they
   are allowed to shrink below their content width; and the header's
   right-hand cluster wraps on a phone rather than pushing the page
   sideways. */
input,select,textarea,img,svg,video,iframe{max-width:100%}
.form,.mapwrap,.split__t,.hdr__r,.head-right{min-width:0}
.form,.mapwrap,.split__t{max-width:100%}
@media (max-width:820px){
  .hdr__r,.head-right{flex-wrap:wrap;justify-content:flex-end;row-gap:.4rem}
}

/* ------------------------------------------- legal-header-layout
   The LGPD privacy page is generated from a shared template and uses
   .hdr__cta for its header cluster. Most stylesheets in this batch define
   .hdr__r or .head-cta instead, so on those sites the cluster had no
   layout at all - block flow, and on a long brand name it ran off the
   screen. This defines it, keeps the back-link on one line, and lets the
   row wrap before anything overflows. */
.hdr__cta,.head-cta{display:flex;align-items:center;gap:.6rem;
  flex-wrap:wrap;justify-content:flex-end;min-width:0;max-width:100%}
.hdr__cta .btn,.head-cta .btn{white-space:nowrap}
.hdr__cta .lang,.head-cta .lang{display:inline-flex;gap:.35rem;flex:0 0 auto}
@media (max-width:560px){
  .hdr__in,.head-in{flex-wrap:wrap;row-gap:.55rem}
  .hdr__in>.brand,.head-in>.brand{min-width:0;max-width:100%}
  .brand__n{white-space:normal;overflow-wrap:anywhere}
  .hdr__cta,.head-cta{width:100%;justify-content:flex-start}
}