/* =======================================================================
   VERITÉ — design tokens
   Brand palette is fixed (preto/branco/dourado/bege) — not tied to OS
   light/dark preference. Sections alternate tone on purpose (zebra),
   each section carries its own local --sec-* tokens (see THEMING below)
   so nothing here ever needs a global light/dark flip.
   ======================================================================= */
:root{
  --black:#0c0c0d;
  --black-2:#161618;
  --black-3:#09090a;
  --white:#ffffff;
  --off-white:#faf9f6;
  --beige:#efe7d8;
  --beige-deep:#cdbb96;
  --ink-on-beige:#2c2620;
  --gold:#b18a4f;
  --gold-light:#d9bd85;
  --gold-deep:#8a6a37;
  --font-display:'Cormorant Garamond','Iowan Old Style','Palatino Linotype','Book Antiqua',Georgia,ui-serif,serif;
  --font-sans:'Futura','Century Gothic',Optima,Candara,'Segoe UI',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);

  /* spacing scale — matches values already in real use across the file
     (button padding, section-head margin, section padding) rather than
     an arbitrary new scale */
  --space-1:.4rem;
  --space-2:.8rem;
  --space-3:1.2rem;
  --space-4:1.6rem;
  --space-5:2.4rem;
  --space-6:3.6rem;
  --space-7:5.5rem;
  --space-8:7.5rem;

  /* border-radius — matches the four values already used ad hoc
     throughout (buttons/inputs/cards, product-mystery card, mega-panel/
     mini-cart/thumbs, pills) */
  --radius-sm:2px;
  --radius-md:3px;
  --radius-lg:4px;
  --radius-pill:999px;

  /* the one recurring "lifted panel" shadow (mega-menu, mini-cart,
     search suggestions) */
  --shadow-lift:0 30px 60px -20px rgba(0,0,0,.65);

  /* status tones, available for reuse (e.g. clube/assets/css/club.css)
     — error matches the dark-context error tone already used across the
     file (#c07a7a family); success has no existing equivalent yet, kept
     muted/sage to stay in the same desaturated, premium register */
  --success:#7a9a6a;
  --error:#c07a7a;
}

/* Garante que o atributo `hidden` sempre esconda o elemento, mesmo quando
   uma classe de componente (ex. .btn, .header-icon) já define `display`
   — sem isso, a regra do author stylesheet vence a do UA stylesheet por
   empate de especificidade e o elemento "escondido" continua visível.
   Achado via teste real: #product-add-cart/#product-buy (.btn) ficavam
   visíveis mesmo com `hidden` setado via JS. */
[hidden]{display:none !important;}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }

/* Fixed, whole-viewport film-grain texture — a physical, printed-paper
   quality under every section instead of flat vector gradients. Pure
   data-URI SVG noise, no image request, opacity kept very low so it
   never fights legibility. */
body::before{
  content:""; position:fixed; inset:0; z-index:9998; pointer-events:none;
  opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* a barely-there vignette that breathes very slowly — keeps the page
   from ever feeling static without drawing attention to itself */
body::after{
  content:""; position:fixed; inset:0; z-index:9997; pointer-events:none;
  background:radial-gradient(ellipse 80% 70% at 50% 40%, transparent 55%, rgba(0,0,0,.16) 100%);
  animation:vignette-breathe 24s ease-in-out infinite;
}
@keyframes vignette-breathe{ 0%,100%{opacity:.7;} 50%{opacity:1;} }
@media (prefers-reduced-motion:reduce){ body::after{animation:none; opacity:.85;} }

body{
  margin:0;
  background:var(--white);
  color:var(--black);
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{color:inherit;}
h1,h2,h3{text-wrap:balance; margin:0; font-weight:400;}
img,svg{max-width:100%;}
p{margin:0;}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.skip-link{
  position:absolute; left:1rem; top:-4rem; z-index:100;
  background:var(--gold); color:var(--black); padding:.75rem 1.3rem; border-radius:2px;
  text-decoration:none; font-size:.85rem; letter-spacing:.03em;
  transition:top .25s ease;
}
.skip-link:focus{top:1rem;}

.wrap{max-width:1120px; margin:0 auto; padding:0 2rem;}
.col{max-width:60ch; margin:0 auto;}

.eyebrow{
  font-size:.7rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--gold); font-weight:600; margin:0 0 1.4rem 0;
}

.hairline{height:1px; width:64px; margin:0 auto; background:var(--gold);}
.hairline.glow{position:relative;}
.hairline.glow::after{
  content:""; position:absolute; inset:-6px -20%; z-index:-1;
  background:radial-gradient(ellipse, rgba(177,138,79,.35), transparent 70%);
  filter:blur(6px);
  animation:glow-pulse 5s ease-in-out infinite;
}
@keyframes glow-pulse{ 0%,100%{opacity:.5;} 50%{opacity:1;} }
@media (prefers-reduced-motion:reduce){ .hairline.glow::after{animation:none; opacity:.8;} }

/* =======================================================================
   Section theming — local tokens per section, never a global flip.
   Adding a new tone (e.g. a future "colecao" section) = add one more
   .section-* block here; every shared component below reads --sec-*.
   ======================================================================= */
.section{padding:7.5rem 0; scroll-margin-top:5rem; position:relative;}
/* a quiet seam at the top of every section (except the hero/page-hero,
   which already have their own elaborate top treatment) — a hairline of
   gold plus a soft cast shadow, so scrolling reads as one continuous
   experience instead of hard color-block cuts */
.section:not(.hero):not(.page-hero)::before{
  content:""; position:absolute; top:0; left:10%; right:10%; height:1px; z-index:1;
  background:linear-gradient(90deg, transparent, rgba(177,138,79,.28), transparent);
}
.section-light:not(.hero)::after, .section-beige:not(.hero)::after{
  content:""; position:absolute; top:0; left:0; right:0; height:90px; z-index:0; pointer-events:none;
  background:linear-gradient(to bottom, rgba(0,0,0,.05), transparent);
}
.section-dark:not(.hero)::after{
  content:""; position:absolute; top:0; left:0; right:0; height:110px; z-index:0; pointer-events:none;
  background:linear-gradient(to bottom, rgba(0,0,0,.3), transparent);
}
.section-light{--sec-bg:var(--white); --sec-fg:var(--black); --sec-fg-soft:#57534c; --sec-line:rgba(12,12,13,.12);
  background:var(--sec-bg); color:var(--sec-fg);}
.section-dark{--sec-bg:var(--black); --sec-fg:var(--off-white); --sec-fg-soft:#b7b2a8; --sec-line:rgba(250,249,246,.16);
  background:var(--sec-bg); color:var(--sec-fg);}
.section-2{--sec-bg:var(--black-2); background:var(--sec-bg);}
.section-3{--sec-bg:var(--black-3); background:var(--sec-bg);}
.section-beige{--sec-bg:var(--beige); --sec-fg:var(--ink-on-beige); --sec-fg-soft:#6b5f4c; --sec-line:rgba(44,38,32,.16);
  background:var(--sec-bg); color:var(--sec-fg);}

/* ghost watermark used behind a couple of sections for editorial depth —
   the V drifts extremely slowly, never enough to distract from text */
.watermark{
  position:absolute; top:50%; right:-3%; left:auto;
  font-family:var(--font-display); font-size:min(26vw,22rem); letter-spacing:.06em;
  /* always gold, never currentColor — the V reads as the brand's own
     signature regardless of which section tone it sits behind */
  color:var(--gold); opacity:.05; white-space:nowrap; pointer-events:none;
  z-index:0; user-select:none;
  animation:watermark-drift 46s ease-in-out infinite;
}
.section-beige .watermark{opacity:.07;}
@keyframes watermark-drift{
  0%,100%{transform:translateY(-50%) scale(1);}
  50%{transform:translateY(-52%) scale(1.025);}
}
@media (prefers-reduced-motion:reduce){ .watermark{animation:none; transform:translateY(-50%);} }
@media (max-width:900px){ .watermark{opacity:.02; font-size:min(40vw,15rem); right:-10%;} }
.section > .wrap{position:relative; z-index:1;}

/* =======================================================================
   Ambient background system — small gold particles, soft glow orbs, faint
   abstract shapes, a slow gradient wash. Pure CSS keyframes (transform +
   opacity only, GPU-friendly, no continuous JS loop) — assets/js/ambient.js
   only sets each .mote's per-particle custom properties once on load and
   drives one shared rAF-throttled scroll listener for [data-parallax].
   Any section using this needs the .has-ambient utility (adds the
   overflow:hidden the decor requires so nothing bleeds into neighbours).
   ======================================================================= */
.has-ambient{overflow:hidden;}
.ambient{position:absolute; inset:0; z-index:0; pointer-events:none;}

.ambient-orb{
  position:absolute; border-radius:50%; filter:blur(60px);
  background:radial-gradient(circle, rgba(177,138,79,.4), transparent 72%);
  animation:orb-drift 22s ease-in-out infinite; will-change:transform, opacity;
}
.ambient-orb.orb-b{animation-duration:28s; animation-direction:reverse;}
.ambient-orb.orb-c{animation-duration:35s;}
@keyframes orb-drift{
  0%,100%{transform:translate(0,0) scale(1); opacity:.4;}
  50%{transform:translate(3%,-4%) scale(1.18); opacity:.7;}
}
@media (prefers-reduced-motion:reduce){ .ambient-orb{animation:none; opacity:.45;} }

.ambient-shape{
  position:absolute; border:1px solid rgba(177,138,79,.14); border-radius:50%;
  animation:shape-spin 70s linear infinite;
}
.ambient-shape.shape-diamond{border-radius:4px; transform:rotate(45deg);}
@keyframes shape-spin{ from{transform:rotate(0deg);} to{transform:rotate(360deg);} }
@media (prefers-reduced-motion:reduce){ .ambient-shape{animation:none;} }

.ambient-particles{position:absolute; inset:0;}
.mote{
  position:absolute; left:var(--mx,50%); top:var(--my,50%);
  width:var(--ms,2.5px); height:var(--ms,2.5px); border-radius:50%;
  background:var(--gold-light); opacity:0;
  animation:mote-drift var(--md,16s) ease-in-out var(--mdl,0s) infinite;
}
@keyframes mote-drift{
  0%{transform:translate(0,0); opacity:0;}
  12%{opacity:.85;}
  50%{transform:translate(var(--mdx,10px), var(--mdy,-60px)); opacity:.55;}
  88%{opacity:.15;}
  100%{transform:translate(calc(var(--mdx,10px) * 1.7), calc(var(--mdy,-60px) * 1.8)); opacity:0;}
}
@media (prefers-reduced-motion:reduce){ .mote{display:none;} }

.ambient-wash{
  position:absolute; inset:-15% -10%; z-index:0;
  background:linear-gradient(120deg, rgba(177,138,79,.09), transparent 32%, rgba(177,138,79,.05) 62%, transparent 88%);
  background-size:220% 220%;
  animation:wash-shift 42s ease-in-out infinite;
}
@keyframes wash-shift{ 0%,100%{background-position:0% 0%;} 50%{background-position:100% 60%;} }
@media (prefers-reduced-motion:reduce){ .ambient-wash{animation:none;} }

/* traveling highlight along a hairline — "brilho dourado passando" */
.hairline.sweep{position:relative; overflow:hidden;}
.hairline.sweep::before{
  content:""; position:absolute; top:0; left:-60%; width:60%; height:100%;
  background:linear-gradient(90deg, transparent, var(--gold-light), transparent);
  animation:hairline-sweep 7s ease-in-out infinite;
}
@keyframes hairline-sweep{ 0%{left:-60%;} 55%{left:110%;} 100%{left:110%;} }
@media (prefers-reduced-motion:reduce){ .hairline.sweep::before{animation:none; display:none;} }

/* .hero / .page-hero place content directly (no .wrap), so their real
   content needs its own stacking above the ambient layer */
.hero > *:not(.ambient), .page-hero > *:not(.ambient){position:relative; z-index:1;}

/* soft glow that quietly follows the cursor inside the hero/page-hero
   ambient layer — assets/js/pointer.js sets --gx/--gy on mousemove */
.ambient-cursor{
  position:absolute; inset:0;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,50%), rgba(177,138,79,.16), transparent 55%);
}

/* =======================================================================
   Floating WhatsApp button — injected by main.js on every page. Sits
   above regular content but below the custom cursor (z-index 9999).
   ======================================================================= */
.whatsapp-float{
  position:fixed; right:20px; bottom:20px; z-index:500;
  width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(155deg,var(--gold-light),var(--gold) 60%,var(--gold-deep));
  color:var(--black); box-shadow:0 8px 24px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.08) inset;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.whatsapp-float:hover, .whatsapp-float:focus-visible{
  transform:translateY(-3px) scale(1.06);
  box-shadow:0 12px 28px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.12) inset;
}
@media (max-width:640px){
  .whatsapp-float{ right:14px; bottom:14px; width:50px; height:50px; }
}

/* =======================================================================
   Custom cursor — a small gold dot glued to the pointer plus a larger
   ring that eases toward it (lerped in JS) and grows over anything
   clickable. assets/js/pointer.js only creates these on fine-pointer,
   motion-ok devices; everywhere else the native cursor is untouched.
   ======================================================================= */
html.has-custom-cursor, html.has-custom-cursor a, html.has-custom-cursor button,
html.has-custom-cursor input, html.has-custom-cursor textarea{cursor:none;}
.cursor-dot, .cursor-ring{
  position:fixed; top:0; left:0; z-index:9999; border-radius:50%;
  pointer-events:none; opacity:0; transition:opacity .3s ease;
}
.cursor-dot{
  width:16px; height:16px; background:var(--gold-light);
  box-shadow:0 0 14px rgba(217,189,133,.7);
}
.cursor-dot.is-visible{opacity:1;}
.cursor-ring{
  width:34px; height:34px; border:1px solid rgba(177,138,79,.55);
  transition:opacity .3s ease, width .3s var(--ease), height .3s var(--ease), border-color .3s ease;
}
.cursor-ring.is-visible{opacity:1;}
.cursor-ring.is-active{width:56px; height:56px; border-color:var(--gold-light); background:rgba(177,138,79,.08);}

/* =======================================================================
   Marquee — an infinite, gently scrolling band of brand words. Decorative
   only (aria-hidden) since the same 5 values already exist as real
   markup in #essencia; this is a typographic/motion accent, not content.
   ======================================================================= */
.marquee{
  overflow:hidden; background:var(--black);
  border-top:1px solid rgba(177,138,79,.16); border-bottom:1px solid rgba(177,138,79,.16);
  padding:1.15rem 0;
}
.marquee-track{
  display:flex; align-items:center; gap:2.6rem; width:max-content;
  animation:marquee-scroll 34s linear infinite;
}
@media (prefers-reduced-motion:reduce){ .marquee-track{animation:none;} }
.marquee-track span{
  font-family:var(--font-display); font-style:italic; font-size:1.05rem;
  letter-spacing:.05em; color:var(--gold-light); opacity:.8; white-space:nowrap;
}
.marquee-track span.dot{font-style:normal; color:var(--gold); opacity:.5;}
@keyframes marquee-scroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* =======================================================================
   Intro veil — a brief, elegant emblem reveal on first paint of the
   homepage. Pure CSS (animation-fill-mode removes it from layout/hit-
   testing once done); skipped entirely under reduced motion so nothing
   ever blocks content for those users.
   ======================================================================= */
.intro-veil{
  position:fixed; inset:0; z-index:10000; background:var(--black);
  display:flex; align-items:center; justify-content:center;
  animation:veil-out .8s var(--ease) .5s forwards;
}
.intro-veil img{width:56px; height:auto; animation:veil-emblem .6s var(--ease) both;}
@keyframes veil-out{ to{opacity:0; visibility:hidden; pointer-events:none;} }
@keyframes veil-emblem{ from{opacity:0; transform:scale(.88);} to{opacity:.95; transform:scale(1);} }
@media (prefers-reduced-motion:reduce){ .intro-veil{display:none;} }

/* =======================================================================
   Header / navigation
   ======================================================================= */
header{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--black) 80%, transparent);
  backdrop-filter:blur(8px);
  transition:padding .35s ease, background-color .45s ease, backdrop-filter .45s ease, box-shadow .35s ease;
}
header::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(177,138,79,.3) 45%, rgba(177,138,79,.3) 55%, transparent);
  opacity:.5; transition:opacity .45s ease;
}
header.is-scrolled::after{opacity:1;}
header.is-scrolled{
  background:color-mix(in srgb, var(--black) 92%, transparent);
  backdrop-filter:blur(14px);
  box-shadow:0 18px 30px -22px rgba(0,0,0,.6);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:1.15rem; padding-bottom:1.15rem;
  transition:padding .35s ease;
}
header.is-scrolled .nav-inner{padding-top:.75rem; padding-bottom:.75rem;}

.brand-mini{display:flex; align-items:center; gap:.7rem; text-decoration:none; color:var(--off-white);}
.brand-mini .emblem-mini{height:27px; width:auto; display:flex; align-items:center; flex:none; transition:transform .4s ease;}
.brand-mini .emblem-mini img{height:100%; width:auto; display:block;}
.brand-mini:hover .emblem-mini{transform:rotate(8deg);}
.brand-mini .word{font-family:var(--font-display); font-size:1.05rem; letter-spacing:.28em; text-transform:uppercase;}

nav.links{display:flex; gap:2.2rem; list-style:none; margin:0; padding:0;}
nav.links a, nav.links .disabled-link{
  text-decoration:none; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--sec-fg-soft,#b7b2a8); position:relative; padding-bottom:.3rem;
  transition:color .25s ease;
}
header nav.links a{color:#b7b2a8;}
header nav.links a.is-active{color:var(--gold-light);}
nav.links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--gold); transition:right .3s ease;
}
nav.links a:hover{color:var(--off-white);}
nav.links a:hover::after, nav.links a.is-active::after{right:0;}
nav.links a:focus-visible{outline:1px solid var(--gold); outline-offset:4px;}

/* ---------- Clube — premium pill, distinct from the plain text links ---------- */
nav.links a.nav-clube{
  display:inline-flex; align-items:center; gap:.55rem;
  color:var(--gold-light);
  border:1px solid var(--gold-deep);
  border-radius:999px;
  padding:.4rem 1.05rem .44rem;
  padding-bottom:.44rem;
  transition:color .25s ease, border-color .25s ease, background-color .25s ease, box-shadow .25s ease;
}
nav.links a.nav-clube::before{
  content:""; flex:none; width:5px; height:5px; border-radius:1px;
  background:var(--gold-light); transform:rotate(45deg);
  box-shadow:0 0 6px rgba(217,189,133,.75);
}
nav.links a.nav-clube::after{display:none;}
nav.links a.nav-clube:hover{
  color:var(--off-white); border-color:var(--gold-light);
  background:rgba(177,138,79,.12);
  box-shadow:0 0 18px rgba(177,138,79,.3);
}
@media (max-width:860px){
  nav.links a.nav-clube{
    border:none; border-radius:0; padding:1rem 0; background:none !important; box-shadow:none;
  }
}

.nav-toggle{
  display:none; appearance:none; background:none; border:1px solid rgba(250,249,246,.3);
  border-radius:2px; width:42px; height:38px; padding:0; cursor:pointer; position:relative; flex:none;
}
.nav-toggle::before, .nav-toggle::after, .nav-toggle span{
  content:""; position:absolute; left:11px; right:11px; height:1px; background:var(--off-white);
  transition:transform .3s ease, opacity .3s ease, top .3s ease, background-color .3s ease;
}
.nav-toggle::before{top:14px;}
.nav-toggle span{top:19px;}
.nav-toggle::after{top:24px;}
.nav-toggle[aria-expanded="true"] span{background:transparent;}
.nav-toggle[aria-expanded="true"]::before{top:19px; transform:rotate(45deg);}
.nav-toggle[aria-expanded="true"]::after{top:19px; transform:rotate(-45deg);}
.nav-toggle:focus-visible{outline:1px solid var(--gold); outline-offset:2px;}

@media (max-width:860px){
  :where(html.js) .nav-toggle{display:block;}
  nav.links{
    display:flex; flex-direction:column; align-items:flex-start; gap:0;
    position:absolute; top:100%; left:0; right:0;
    background:var(--black); border-bottom:1px solid rgba(250,249,246,.14);
    overflow-x:hidden; overflow-y:auto; -webkit-overflow-scrolling:touch;
    padding:.5rem 2rem 1.6rem;
    transition:max-height .35s ease, padding .35s ease;
  }
  :where(html.js) nav.links{max-height:0; padding:0 2rem;}
  :where(html.js) nav.links.is-open{max-height:70vh; padding:.5rem 2rem 1.6rem;}
  nav.links a{width:100%; padding:1rem 0; border-bottom:1px solid rgba(250,249,246,.1); font-size:.8rem;}
  nav.links a::after{display:none;}

  /* links cascade in, one after another, once the menu opens */
  :where(html.js) nav.links a{
    opacity:0; transform:translateY(-6px);
    transition:opacity .35s ease, transform .35s ease;
  }
  :where(html.js) nav.links.is-open a{opacity:1; transform:translateY(0);}
  nav.links a:nth-child(1){transition-delay:0s;}
  nav.links a:nth-child(2){transition-delay:.05s;}
  nav.links a:nth-child(3){transition-delay:.1s;}
  nav.links a:nth-child(4){transition-delay:.15s;}
  nav.links a:nth-child(5){transition-delay:.2s;}
  nav.links a:nth-child(6){transition-delay:.25s;}
  nav.links a:nth-child(7){transition-delay:.3s;}
}
@media (max-width:860px) and (prefers-reduced-motion:reduce){
  :where(html.js) nav.links a{opacity:1; transform:none; transition:none;}
}

/* ---------- Mega menu (Perfumes/Femininos/.../Mais Vendidos) ----------
   Trigger is a <button>, never an <a>, so a click can never navigate by
   accident — only the sub-links and the "Ver todos" CTA inside the panel
   do. Desktop: hover previews, click pins open (assets/js/main.js keeps
   the two from fighting). Mobile (<=860px): the panel becomes a plain
   accordion inline in the flyout, no hover involved. */
.nav-item{position:relative; display:flex;}
.nav-trigger{
  display:inline-flex; align-items:center; gap:.4rem;
  appearance:none; background:none; border:none; padding:0 0 .3rem; margin:0;
  font-family:inherit; text-decoration:none; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:#b7b2a8; position:relative; cursor:pointer; transition:color .25s ease;
}
.nav-trigger::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--gold); transition:right .3s ease;
}
.nav-trigger:hover{color:var(--off-white);}
.nav-trigger:hover::after, .nav-trigger.is-active::after, .nav-trigger[aria-expanded="true"]::after{right:0;}
.nav-trigger.is-active{color:var(--gold-light);}
.nav-trigger:focus-visible{outline:1px solid var(--gold); outline-offset:4px;}
.nav-caret{flex:none; transition:transform .25s ease; opacity:.75;}
.nav-trigger[aria-expanded="true"] .nav-caret{transform:rotate(180deg); opacity:1;}

.mega-panel{
  position:absolute; top:calc(100% + 18px); left:0; min-width:340px; max-width:min(560px, 92vw);
  background:var(--black-2); border:1px solid rgba(250,249,246,.14); border-radius:var(--radius-lg);
  padding:1.5rem 1.7rem 1.3rem; box-shadow:var(--shadow-lift);
  opacity:0; visibility:hidden; transform:translateY(-8px); pointer-events:none;
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
  z-index:60;
}
.mega-panel.align-right{left:auto; right:0;}
.mega-panel.is-open{opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto;}
.mega-panel-inner{display:flex; gap:2.4rem; flex-wrap:wrap;}
.mega-col{display:flex; flex-direction:column; gap:.05rem; min-width:150px;}
.mega-col-title{
  margin:0 0 .6rem; font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-light);
}
.mega-col a{
  text-decoration:none; color:#b7b2a8; font-size:.82rem; padding:.4rem 0;
  transition:color .2s ease, transform .2s ease;
}
.mega-col a:hover, .mega-col a:focus-visible{color:var(--off-white); transform:translateX(3px);}
.mega-col a:focus-visible{outline:1px solid var(--gold); outline-offset:2px;}
.mega-cta{
  display:inline-flex; align-items:center; gap:.5rem; margin-top:1.2rem; padding-top:1.1rem;
  border-top:1px solid rgba(250,249,246,.12); width:100%;
  text-decoration:none; color:var(--gold-light); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  transition:color .2s ease, gap .2s ease;
}
.mega-cta span{transition:transform .2s ease;}
.mega-cta:hover{color:var(--off-white); gap:.7rem;}
.mega-cta:hover span{transform:translateX(3px);}
.mega-cta:focus-visible{outline:1px solid var(--gold); outline-offset:3px;}

@media (max-width:860px){
  .nav-item{width:100%; flex-direction:column; align-items:stretch;}
  .nav-trigger{
    width:100%; justify-content:space-between; padding:1rem 0; border-bottom:1px solid rgba(250,249,246,.1);
    font-size:.8rem;
  }
  .nav-trigger::after{display:none;}
  .mega-panel{
    position:static; opacity:1; visibility:visible; transform:none; pointer-events:auto;
    background:none; border:none; box-shadow:none; padding:0; margin:0; max-width:none; min-width:0;
    max-height:0; overflow:hidden; transition:max-height .35s ease;
  }
  .mega-panel.is-open{max-height:600px; padding-bottom:.6rem;}
  .mega-panel-inner{gap:0 1.6rem; padding-top:.4rem;}
  .mega-col{min-width:130px;}
  .mega-cta{margin-top:.4rem;}
}
@media (max-width:860px) and (prefers-reduced-motion:reduce){
  .mega-panel{transition:none;}
}

/* =======================================================================
   Buttons
   ======================================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:1rem 2.4rem; font-family:inherit;
  font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; font-weight:600;
  text-decoration:none; cursor:pointer; border:1px solid var(--gold);
  background:transparent; color:inherit; position:relative; overflow:hidden; isolation:isolate;
  transition:background-color .3s ease, color .3s ease, transform .25s ease, box-shadow .25s ease, border-color .3s ease;
}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1; transform:translateX(-120%) skewX(-12deg);
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transition:transform .7s ease;
}
.btn:hover::before{transform:translateX(120%) skewX(-12deg);}
.btn::after{
  content:""; position:absolute; inset:0; z-index:-1; opacity:0;
  background:radial-gradient(120px circle at var(--bx,50%) var(--by,50%), rgba(177,138,79,.35), transparent 70%);
  transition:opacity .35s ease;
}
.btn:hover::after{opacity:1;}
.section-dark .btn, .section-2 .btn, .section-3 .btn{color:var(--off-white);}
.section-dark .btn:hover, .section-2 .btn:hover, .section-3 .btn:hover{background:var(--gold); color:var(--black); transform:translateY(-2px); box-shadow:0 14px 30px -14px rgba(177,138,79,.6);}
.section-light .btn, .section-beige .btn{color:var(--sec-fg);}
.section-light .btn:hover, .section-beige .btn:hover{background:var(--gold); color:var(--white); transform:translateY(-2px); box-shadow:0 14px 30px -14px rgba(177,138,79,.5);}
.btn:focus-visible{outline:1px solid var(--gold); outline-offset:4px;}
.btn:active{transform:scale(.96);}
.btn[disabled]{opacity:.4; cursor:not-allowed; pointer-events:none;}
.btn-block{width:100%;}
.btn-ghost{border-color:var(--sec-line); font-size:.68rem;}
.btn-favorite{
  display:inline-flex; align-items:center; gap:.5rem; margin-top:.9rem;
  background:none; border:none; padding:0; font-family:inherit; font-size:.78rem;
  letter-spacing:.04em; color:var(--gold-deep); cursor:pointer; text-decoration:underline;
  text-underline-offset:3px; transition:color .2s ease;
}
.btn-favorite:hover{color:var(--gold);}
.btn-favorite.is-favorited{color:var(--gold); text-decoration:none;}
.btn-favorite-icon{width:16px; height:16px; flex:none; display:block;}
.btn-favorite-icon path{fill:currentColor; transition:fill .2s ease;}

/* =======================================================================
   Hero
   ======================================================================= */
.hero{
  min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:8rem 2rem 4rem; position:relative; isolation:isolate;
  background:
    radial-gradient(ellipse 55% 45% at 50% 18%, rgba(177,138,79,.16), transparent 70%),
    radial-gradient(ellipse 40% 30% at 50% 100%, rgba(177,138,79,.08), transparent 70%),
    var(--black);
}
.hero .emblem-wrap{
  width:min(150px, 34vw); margin:0 auto 2.2rem; color:var(--gold); position:relative;
  animation:emblem-in 1.2s var(--ease) both, emblem-float 8s ease-in-out 1.2s infinite;
}
.hero .emblem-wrap img{width:100%; height:auto; display:block;}
.hero .emblem-wrap-full{width:min(340px, 66vw);}
.hero .emblem-wrap::before{
  content:""; position:absolute; inset:-30%; z-index:-1; border-radius:50%;
  background:radial-gradient(circle, rgba(177,138,79,.3), transparent 70%);
  filter:blur(18px); animation:glow-pulse 6s ease-in-out infinite;
}
/* a soft "ground" shadow under the full lockup — gives the logo something
   to rest on instead of floating flat against the gradient, without ever
   reading as a literal drop-shadow box */
.hero .emblem-wrap-full::after{
  content:""; position:absolute; left:50%; bottom:-4%; width:64%; height:22px; z-index:-1;
  transform:translateX(-50%); border-radius:50%;
  background:radial-gradient(ellipse, rgba(0,0,0,.45), transparent 72%);
  filter:blur(7px);
}
/* very subtle pointer-driven tilt on the mark itself (assets/js/pointer.js,
   fine-pointer + motion-ok only) — lives on the <img>, not this wrapper,
   because the wrapper already owns the emblem-float keyframe and a CSS
   animation would fight an inline transform set by JS every frame */
.hero .emblem-wrap-full img{transition:transform .4s ease-out;}
@keyframes emblem-in{ from{opacity:0; transform:translateY(14px) scale(.94);} to{opacity:1; transform:translateY(0) scale(1);} }
@keyframes emblem-float{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-7px);} }
.hero h1{
  font-family:var(--font-display); font-size:clamp(3.2rem, 10vw, 6.6rem); letter-spacing:.15em;
  color:var(--off-white); text-shadow:0 0 60px rgba(177,138,79,.3);
  animation:fade-up 1s .2s var(--ease) both;
}
.hero .slogan{
  font-family:var(--font-display); font-style:italic; font-size:clamp(1.15rem,2.6vw,1.55rem);
  color:var(--gold-light); letter-spacing:.03em; margin-top:1.2rem;
  animation:fade-up-blur 1.2s .35s var(--ease) both;
}
@keyframes fade-up-blur{
  from{opacity:0; transform:translateY(12px); filter:blur(6px);}
  to{opacity:1; transform:translateY(0); filter:blur(0);}
}
.hero .sub{
  max-width:44ch; margin:1.4rem auto 0; color:var(--sec-fg-soft); font-size:1rem;
  animation:fade-up 1s .45s var(--ease) both;
}
.hero-cta{margin-top:2.8rem; display:flex; gap:1.2rem; flex-wrap:wrap; justify-content:center; animation:fade-up 1s .55s var(--ease) both;}
@keyframes fade-up{ from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:translateY(0);} }
@media (prefers-reduced-motion:reduce){
  .hero .emblem-wrap, .hero h1, .hero .slogan, .hero .sub, .hero-cta{animation:none;}
}
.scroll-cue{margin-top:3.6rem; width:1px; height:52px; background:linear-gradient(rgba(250,249,246,.35), transparent); position:relative;}
.scroll-cue::after{
  content:""; position:absolute; left:-1.5px; top:0; width:4px; height:4px; border-radius:50%; background:var(--gold);
  animation:scroll-dot 2.6s ease-in-out infinite;
}
@keyframes scroll-dot{ 0%{transform:translateY(-4px); opacity:0;} 20%{opacity:1;} 80%{opacity:1;} 100%{transform:translateY(50px); opacity:0;} }
@media (prefers-reduced-motion:reduce){ .scroll-cue::after{animation:none; opacity:0;} }

/* =======================================================================
   Section headings — centered default + editorial two-column variant
   ======================================================================= */
.section-head{text-align:center; max-width:640px; margin:0 auto 3.6rem;}
.section-head h2{font-family:var(--font-display); font-size:clamp(1.9rem,3.6vw,2.7rem);}

.section-head-split{
  display:grid; grid-template-columns:.9fr 1.3fr; gap:3rem; align-items:end;
  text-align:left; max-width:none; margin-bottom:3.4rem;
}
.section-head-split h2{font-family:var(--font-display); font-size:clamp(2rem,3.8vw,2.9rem);}
.section-head-split .lead{
  color:var(--sec-fg-soft); font-size:clamp(1.15rem,2.2vw,1.45rem); line-height:1.8; padding-bottom:.2rem;
}
.section-head-split .lead em{
  font-style:italic; font-family:var(--font-display); color:var(--gold-deep);
}
.section-dark .section-head-split .lead em, .section-2 .section-head-split .lead em, .section-3 .section-head-split .lead em{
  color:var(--gold-light);
}
@media (max-width:760px){
  .section-head-split{grid-template-columns:1fr; text-align:center;}
}

.reveal{transition:opacity .9s ease, transform .9s ease;}
:where(html.js) .reveal{opacity:0; transform:translateY(20px);}
.reveal.in{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion:reduce){ :where(html.js) .reveal{opacity:1; transform:none; transition:none;} }

/* headline-only variant: blur resolves into focus alongside the usual
   fade+rise, reserved for a handful of marquee titles — not everywhere */
.reveal-blur{transition:opacity 1.1s ease, transform 1.1s ease, filter 1.1s ease;}
:where(html.js) .reveal-blur{opacity:0; transform:translateY(16px); filter:blur(8px);}
.reveal-blur.in{opacity:1; transform:translateY(0); filter:blur(0);}
@media (prefers-reduced-motion:reduce){ :where(html.js) .reveal-blur{opacity:1; transform:none; filter:none; transition:none;} }

/* =======================================================================
   A VERITÉ (brand story) — editorial drop cap on the lead paragraph
   ======================================================================= */
.section-head-split .lead::first-letter{
  font-family:var(--font-display); font-size:3.6rem; line-height:.6; float:left;
  padding:.1rem .5rem 0 0; color:var(--gold);
}

/* =======================================================================
   Nossa Essência — editorial numbered list (works cleanly for 5 items,
   unlike a grid that would wrap awkwardly)
   ======================================================================= */
.essencia-list{list-style:none; margin:0; padding:0; border-top:1px solid var(--sec-line); counter-reset:val; position:relative;}
/* a thread of gold running down through the numerals, tying the five
   pillars together as one lineage instead of five separate rows */
.essencia-list::before{
  content:""; position:absolute; left:1.7rem; top:0; bottom:0; width:1px;
  background:linear-gradient(to bottom, transparent, rgba(177,138,79,.3) 12%, rgba(177,138,79,.3) 88%, transparent);
}
@media (max-width:640px){ .essencia-list::before{left:1.2rem;} }
.essencia-item{
  counter-increment:val; position:relative;
  display:grid; grid-template-columns:3.4rem 3.2rem 1fr; align-items:center; gap:1.6rem;
  padding:1.9rem 0; border-bottom:1px solid var(--sec-line);
  /* opacity kept at .reveal's own .9s so the fade-in isn't clipped short
     by this rule's transform/padding-left durations overriding it (same
     specificity, later in source — the whole shorthand would otherwise
     replace .reveal's, not merge with it) */
  transition:opacity .9s ease, transform .4s ease, padding-left .4s ease, border-color .4s ease;
}
.essencia-item::after{
  content:""; position:absolute; left:0; bottom:-1px; height:1px; width:0;
  background:linear-gradient(90deg, var(--gold-light), transparent);
  transition:width .5s var(--ease);
}
.essencia-item:nth-of-type(1){transition-delay:0s;}
.essencia-item:nth-of-type(2){transition-delay:.08s;}
.essencia-item:nth-of-type(3){transition-delay:.16s;}
.essencia-item:nth-of-type(4){transition-delay:.24s;}
.essencia-item:nth-of-type(5){transition-delay:.32s;}
/* :hover comes after the nth-of-type delays above (equal specificity,
   later wins) so hovering never inherits the entrance stagger */
.essencia-item:hover{transform:translateX(10px); border-color:rgba(177,138,79,.5); transition-delay:0s;}
.essencia-item:hover::after{width:100%;}
.essencia-item:hover .icon{color:var(--gold-light);}
.essencia-item .num{
  font-family:var(--font-display); font-size:1.1rem; color:var(--sec-fg-soft); opacity:.6;
}
.essencia-item .num::before{content:counter(val, upper-roman);}
.essencia-item .icon{width:38px; height:38px; color:var(--gold); transition:opacity .45s ease, color .3s ease;}
.essencia-item .icon svg{width:100%; height:100%; display:block;}
.essencia-item .body{display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap;}
.essencia-item h3{
  font-family:var(--font-display); font-size:1.35rem; letter-spacing:.03em;
  transform-origin:left center; transition:color .45s ease, transform .45s ease;
}
.essencia-item p{color:var(--sec-fg-soft); font-size:.92rem; transition:opacity .45s ease;}
/* the item nearest the viewport's vertical center gets individual
   emphasis (assets/js/main.js toggles .is-focused via IntersectionObserver);
   everything else settles slightly back so the eye has one clear focal point */
.essencia-item:not(.is-focused) .icon{opacity:.45;}
.essencia-item:not(.is-focused) p{opacity:.55;}
.essencia-item.is-focused h3{color:var(--gold-light); transform:scale(1.07);}
@media (prefers-reduced-motion:reduce){
  .essencia-item h3, .essencia-item .icon, .essencia-item p{transition:none;}
}
@media (max-width:640px){
  .essencia-item{grid-template-columns:2.4rem 2.6rem 1fr; gap:1rem; padding:1.5rem 0;}
  .essencia-item .body{flex-direction:column; gap:.3rem;}
}

/* =======================================================================
   Mais do que uma fragrância
   ======================================================================= */
.experiencia{text-align:center;}
.experiencia-title{
  font-size:clamp(2.6rem,7vw,5.2rem); line-height:1.05; letter-spacing:.02em;
  text-transform:uppercase;
}
.statement-lines{max-width:56ch; margin:0 auto;}
.statement-line{
  font-family:var(--font-display); font-size:clamp(1.5rem,3vw,2.15rem); line-height:1.5;
  color:var(--off-white); margin:0;
}
.statement-line + .statement-line{margin-top:.5rem;}
.experiencia-tagline{
  display:block; font-family:var(--font-display); font-style:italic; color:var(--gold-light);
  font-size:1.2rem; margin-top:2.2rem;
}
/* the five words get to be the moment, not a caption — big, editorial,
   each one settling into focus a beat after the last */
.concept-reveal{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline;
  gap:.6rem 2.2rem; margin-top:3.4rem; max-width:52rem; margin-left:auto; margin-right:auto;
}
.concept-reveal span{
  font-family:var(--font-display); font-size:clamp(1.7rem,4.4vw,3.1rem);
  text-transform:uppercase; letter-spacing:.03em; color:var(--gold-light);
  opacity:.92;
}
@media (max-width:640px){ .concept-reveal{gap:.4rem 1.4rem;} }
.pillars{display:flex; justify-content:center; gap:3.2rem; margin-top:3rem; flex-wrap:wrap;}
.pillar{display:flex; flex-direction:column; align-items:center; gap:.7rem; max-width:160px; transition:transform .35s ease;}
.pillar:hover{transform:translateY(-5px);}
.pillar .icon{width:30px; height:30px; color:var(--gold); transition:color .3s ease;}
.pillar:hover .icon{color:var(--gold-light);}
.pillar span{font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--sec-fg-soft);}

/* =======================================================================
   Manifesto VERITÉ — short, cinematic, one line at a time
   ======================================================================= */
.manifesto-section{text-align:center;}
.manifesto-lines{max-width:44rem; margin:2.4rem auto 0;}
.manifesto-line{
  font-family:var(--font-display); font-style:italic; font-size:clamp(1.3rem,2.8vw,1.9rem);
  line-height:1.7; color:var(--off-white); margin:0;
}
.manifesto-line + .manifesto-line{margin-top:.3rem;}
/* the handful of words the manifesto actually hinges on get a quiet
   color shift — never bold, never a size change, just gold instead of
   off-white — so the emphasis reads as a whisper, not a shout */
.manifesto-line .hl{color:var(--gold-light);}
.manifesto-pause{margin-top:1.8rem;}
.manifesto-signature{margin-top:3.2rem;}
.manifesto-brand{
  font-family:var(--font-display); font-size:clamp(2.1rem,5vw,3.3rem); letter-spacing:.22em;
  color:var(--gold-light); text-shadow:0 0 44px rgba(177,138,79,.4); margin:0;
}
.manifesto-slogan{
  font-family:var(--font-display); font-style:italic; color:var(--sec-fg-soft);
  font-size:1.1rem; margin:.9rem 0 0;
}

/* =======================================================================
   Lançamento — mystery / coming-soon teaser
   ======================================================================= */
.launch{
  text-align:center; overflow:hidden;
  background:
    radial-gradient(ellipse 50% 60% at 50% 0%, rgba(177,138,79,.14), transparent 70%),
    var(--black-3);
}
.launch .eyebrow{color:var(--gold-light);}
.launch h2{font-family:var(--font-display); font-size:clamp(2rem,4.2vw,3rem); color:var(--off-white);}
.launch .sub{max-width:42ch; margin:1.2rem auto 0; color:var(--sec-fg-soft); font-size:1.05rem;}

.stack-form{display:flex; flex-direction:column; gap:1.3rem; max-width:420px; margin:2.8rem auto 0;}
.field{border-bottom:1px solid rgba(250,249,246,.3); transition:border-color .25s ease; text-align:left;}
.field:focus-within{border-color:var(--gold);}
.field label{display:block; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--sec-fg-soft); margin-bottom:.35rem;}
.field input, .field textarea{
  width:100%; border:none; background:transparent; padding:.5rem 0 .8rem; font-family:inherit; font-size:1rem;
  color:inherit; outline:none; letter-spacing:.01em; resize:vertical;
}
.field input::placeholder, .field textarea::placeholder{color:var(--sec-fg-soft); opacity:.7;}
.section-light .field, .section-beige .field{border-color:var(--sec-line);}

.field.is-invalid{border-color:#c17a6f;}
.field-error{
  display:block; max-height:0; overflow:hidden; opacity:0;
  font-size:.72rem; color:#e8a99c; letter-spacing:.02em;
  transition:max-height .3s ease, opacity .3s ease, margin-top .3s ease;
}
.field.is-invalid .field-error{max-height:1.4rem; opacity:1; margin-top:.4rem;}
/* darker on light/beige backgrounds — the lighter tone above is tuned for
   the dark launch section, it wouldn't hit AA contrast on white */
.section-light .field-error, .section-beige .field-error{color:#a3392a;}

.btn .spinner{
  display:none; position:absolute; left:50%; top:50%; width:15px; height:15px;
  margin:-8px 0 0 -8px; border:2px solid currentColor; border-right-color:transparent;
  border-radius:50%; animation:btn-spin .7s linear infinite;
}
.btn.is-loading{pointer-events:none;}
.btn.is-loading .btn-label{opacity:0;}
.btn.is-loading .spinner{display:block;}
@keyframes btn-spin{ to{transform:rotate(360deg);} }
@media (prefers-reduced-motion:reduce){ .btn .spinner{animation-duration:1.4s;} }

.form-error-general{margin-top:1rem; font-size:.85rem; color:#e8a99c; letter-spacing:.02em;}
.section-light .form-error-general, .section-beige .form-error-general{color:#a3392a;}
.hp-field{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}

.launch .note{font-size:.78rem; color:var(--sec-fg-soft); margin-top:1.2rem; letter-spacing:.02em;}
.form-thanks{max-width:460px; margin:2.8rem auto 0; display:none;}
.form-thanks-title{
  font-family:var(--font-display); font-size:1.4rem; color:var(--gold-light); margin:0;
}
.form-thanks-sub{
  font-family:var(--font-display); font-style:italic; color:var(--sec-fg-soft);
  font-size:1rem; margin:.6rem 0 0;
}
/* single-paragraph .form-thanks (contact form) keeps its own italic look */
p.form-thanks{font-family:var(--font-display); font-style:italic; font-size:1.15rem; color:var(--gold-light);}
.section-light .form-thanks-title, .section-beige .form-thanks-title,
.section-light p.form-thanks, .section-beige p.form-thanks{color:var(--gold-deep);}
.is-sent form, .is-sent .note{display:none;}
.is-sent .form-thanks{display:block;}

/* =======================================================================
   Primeira Coleção — three "mystery" glass cards for the secret future
   launches. No product shape, no imagery: dark glass, light from behind,
   a roman numeral, a hover reveal. Swap each .produto-num/.produto-tag
   pair for real name/image/price later without touching the grid itself.
   ======================================================================= */
.colecao{text-align:center;}
.colecao .section-head h2{font-size:clamp(1.9rem,3.6vw,2.9rem);}
.colecao-tagline{
  font-family:var(--font-display); font-style:italic; color:var(--gold-light);
  font-size:1.1rem; margin-top:1rem;
}
.colecao > .wrap > p, .colecao .col p{color:var(--sec-fg-soft); font-size:1.08rem;}
.colecao-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.8rem;
  margin-top:3.4rem; position:relative;
}
@media (max-width:760px){ .colecao-grid{grid-template-columns:1fr; max-width:320px; margin-left:auto; margin-right:auto;} }
/* a thin gold thread running behind the three cards, tying them
   together as one reveal instead of three separate blocks */
.colecao-connector{
  position:absolute; left:8%; right:8%; top:50%; height:1px; z-index:0;
  background:linear-gradient(90deg, transparent, rgba(177,138,79,.35) 20%, rgba(177,138,79,.35) 80%, transparent);
}
@media (max-width:760px){ .colecao-connector{display:none;} }
.produto-card{
  aspect-ratio:3/4; border:1px solid rgba(177,138,79,.3); border-radius:3px;
  /* a second, inset bezel via outline (not box-shadow, which can't sit
     inset from the edge) — reads as a museum display case rather than
     a single flat card edge, visible at rest, not only on hover */
  outline:1px solid rgba(177,138,79,.14); outline-offset:-10px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.1rem;
  position:relative; overflow:hidden; isolation:isolate;
  background:linear-gradient(165deg, rgba(255,255,255,.035), rgba(0,0,0,.35));
  backdrop-filter:blur(3px);
  box-shadow:0 22px 40px -30px rgba(0,0,0,.7);
  /* opacity kept at .reveal's own .9s — see the same note on .essencia-item */
  transition:opacity .9s ease, transform .12s ease-out, border-color .4s ease, outline-color .4s ease, box-shadow .4s ease;
}
.produto-card::before{
  content:""; position:absolute; inset:-25%; z-index:0;
  background:radial-gradient(circle at 50% 32%, rgba(177,138,79,.42), transparent 62%);
  filter:blur(26px); opacity:.6;
  animation:orb-drift 15s ease-in-out infinite;
}
.produto-card::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(115deg, transparent 32%, rgba(255,255,255,.09) 50%, transparent 68%);
  transform:translateX(-130%);
  transition:transform 1s ease;
}
/* an abstract silhouette that only hints at a bottle — a soft tapered
   contour (neck, shoulder, body) — never sharp or detailed enough to
   read as an actual product render, just enough to suggest "something
   with this kind of shape is waiting to be revealed" */
.produto-card .produto-silhouette{
  position:absolute; left:50%; top:40%; width:34%; height:64%; z-index:0;
  transform:translate(-50%,-50%); pointer-events:none;
  clip-path:polygon(42% 0%, 58% 0%, 58% 9%, 70% 17%, 74% 29%, 74% 94%, 60% 100%, 40% 100%, 26% 94%, 26% 29%, 30% 17%, 42% 9%);
  background:radial-gradient(ellipse 70% 60% at 50% 32%, rgba(217,189,133,.32), transparent 75%);
  filter:blur(15px); opacity:.5;
  transition:opacity .5s ease, filter .5s ease;
}
/* a slow gold breath around each card's edge — the one effect on this
   component that's visible the instant the section scrolls into view,
   with no hover/touch/mouse required. Its own element (not the card's
   own box-shadow, which needs to transition freely on hover without a
   running keyframe animation fighting it every frame). Staggered per
   card so the three don't breathe in lockstep — reads as alive, not
   like a synchronized UI widget. */
.produto-halo{
  position:absolute; inset:-1px; z-index:0; pointer-events:none; border-radius:3px;
  animation:card-halo-breathe 7s ease-in-out infinite;
}
.produto-card:nth-child(3) .produto-halo{animation-delay:1.6s;}
.produto-card:nth-child(4) .produto-halo{animation-delay:3.2s;}
@keyframes card-halo-breathe{
  0%,100%{box-shadow:0 0 0 1px rgba(177,138,79,.14), 0 0 16px rgba(177,138,79,.08);}
  50%{box-shadow:0 0 0 1px rgba(177,138,79,.4), 0 0 36px rgba(177,138,79,.3);}
}
@media (prefers-reduced-motion:reduce){
  .produto-halo{animation:none; box-shadow:0 0 0 1px rgba(177,138,79,.22), 0 0 24px rgba(177,138,79,.16);}
}

/* gold light that follows the cursor inside the card (assets/js/pointer.js
   sets --mx/--my alongside the existing 3D tilt) — a separate element
   rather than another gradient layer on ::before, which already owns
   the ambient orb-drift keyframe and would fight a static mouse-driven
   position the same way the hero emblem float would have */
.produto-spot{
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,32%), rgba(217,189,133,.4), transparent 72%);
  transition:opacity .4s ease;
}
.produto-card:hover .produto-spot, .produto-card.is-active .produto-spot{opacity:1;}
.produto-card:hover .produto-silhouette, .produto-card.is-active .produto-silhouette{opacity:.85; filter:blur(13px);}
@media (max-width:760px){
  .produto-card .produto-silhouette{animation:silhouette-pulse 6s ease-in-out infinite;}
  @keyframes silhouette-pulse{ 0%,100%{opacity:.4; filter:blur(20px);} 50%{opacity:.75; filter:blur(14px);} }
}
@media (max-width:760px) and (prefers-reduced-motion:reduce){ .produto-card .produto-silhouette{animation:none; opacity:.6;} }
.produto-card:nth-child(2){transition-delay:0s;}
.produto-card:nth-child(3){transition-delay:.18s;}
.produto-card:nth-child(4){transition-delay:.36s;}
/* :hover comes after the nth-child delays (equal specificity, later
   wins) so hovering never inherits the entrance stagger — same fix
   already applied to .essencia-item. .is-active mirrors every :hover
   rule below it (same specificity, so whichever is true wins) — it's
   toggled by assets/js/main.js via IntersectionObserver on coarse-
   pointer devices, where :hover never fires, so touch visitors still
   get the "something is lit up" moment as the card crosses center. */
.produto-card:hover, .produto-card.is-active{
  transform:translateY(-8px); border-color:rgba(177,138,79,.6); outline-color:rgba(177,138,79,.32);
  box-shadow:0 30px 58px -24px rgba(177,138,79,.5); transition-delay:0s;
}
.produto-card:hover::before, .produto-card.is-active::before{opacity:.9;}
.produto-card:hover::after, .produto-card.is-active::after{transform:translateX(130%);}
/* the numeral itself is metal, not flat colour — a gold-to-shadow-to-gold
   gradient clipped to the glyph, so it catches "light" like an engraved
   plaque rather than reading as plain coloured type */
.produto-card .produto-num{
  font-family:var(--font-display); font-size:3.4rem; line-height:1; opacity:.92; position:relative; z-index:1;
  background:linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 42%, var(--gold-deep) 58%, var(--gold-light) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 22px rgba(177,138,79,.5));
  transition:opacity .4s ease, filter .4s ease;
}
.produto-card:hover .produto-num, .produto-card.is-active .produto-num{opacity:1; filter:drop-shadow(0 0 32px rgba(177,138,79,.75));}
.produto-card .produto-tag{
  font-size:.72rem; letter-spacing:.26em; text-transform:uppercase; color:var(--off-white);
  position:relative; z-index:1; opacity:.85; transition:opacity .4s ease;
  display:flex; flex-direction:column; align-items:center; gap:.7rem;
}
.produto-card .produto-tag::before{content:""; width:20px; height:1px; background:rgba(177,138,79,.6);}
.produto-card:hover .produto-tag, .produto-card.is-active .produto-tag{opacity:1;}
/* baseline needs to be legible on its own, at rest, with no interaction
   — a previous pass left this at .6 opacity + .82rem, which measured out
   to ~13px effective size at ~0.5 visual weight in production: technically
   rendered, practically unreadable at a glance. Bumped size, dropped the
   extra opacity multiplier (the colour itself is already muted enough),
   hover now shifts to full white instead of just nudging opacity. */
.produto-card .produto-caption{
  font-family:var(--font-display); font-style:italic; font-size:1rem; line-height:1.55;
  color:var(--sec-fg-soft); max-width:82%; text-align:center;
  position:relative; z-index:1; opacity:.88; transition:color .4s ease, opacity .4s ease;
}
.produto-card:hover .produto-caption, .produto-card.is-active .produto-caption{opacity:1; color:var(--off-white);}
@media (prefers-reduced-motion:reduce){ .produto-card::before{animation:none;} }

/* display-case corners — just two, diagonally opposite, restrained on
   purpose (all four would read as a generic "featured card" template).
   Visible at rest now (not just on hover) so the "vitrine" reads even
   before anyone interacts with it. */
.produto-frame{position:absolute; inset:16px; z-index:1; pointer-events:none; opacity:.55; transition:opacity .45s ease;}
.produto-card:hover .produto-frame, .produto-card.is-active .produto-frame{opacity:1;}
.produto-frame::before, .produto-frame::after{content:""; position:absolute; width:16px; height:16px; border:1px solid var(--gold-light);}
.produto-frame::before{top:0; left:0; border-right:none; border-bottom:none;}
.produto-frame::after{bottom:0; right:0; border-left:none; border-top:none;}

/* .produto-card-real: same glass card, now standing in for an actual
   published product (see assets/js/products-loader.js) instead of the
   "Em breve" mystery state — no numeral, a real photo + name instead. */
.produto-card-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
  opacity:.88; transition:opacity .4s ease, transform .4s ease;
}
.produto-card-real:hover .produto-card-img{opacity:1; transform:scale(1.04);}
.produto-card-real .produto-tag{
  position:absolute; left:0; right:0; bottom:0; z-index:1; margin:0; padding:1rem .8rem .85rem;
  background:linear-gradient(to top, rgba(0,0,0,.8), transparent); color:var(--off-white);
  font-size:.78rem; letter-spacing:.08em; text-transform:none; text-align:left; opacity:1;
}

/* =======================================================================
   Perguntas Frequentes — accessible accordion: real <button>, aria-expanded
   + aria-controls, a grid-template-rows 0fr→1fr trick for the smooth
   height animation (no scrollHeight measuring in JS needed).
   ======================================================================= */
.faq-list{max-width:760px; margin:3rem auto 0; border-top:1px solid var(--sec-line);}
.faq-item{border-bottom:1px solid var(--sec-line);}
.faq-item h3{margin:0;}
.faq-trigger{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1.4rem;
  background:none; border:none; cursor:pointer; text-align:left; color:inherit;
  padding:1.5rem 0; font-family:var(--font-display); font-size:1.12rem;
  transition:color .3s ease;
}
.faq-trigger:hover{color:var(--gold-deep);}
.faq-trigger:focus-visible{outline:1px solid var(--gold); outline-offset:4px;}
.faq-icon{position:relative; width:18px; height:18px; flex:none;}
.faq-icon::before, .faq-icon::after{
  content:""; position:absolute; top:50%; left:50%; background:var(--gold);
  transform:translate(-50%,-50%);
}
.faq-icon::before{width:14px; height:1.5px;}
.faq-icon::after{width:1.5px; height:14px; transition:transform .35s var(--ease), opacity .35s ease;}
.faq-item.is-open .faq-icon::after{transform:translate(-50%,-50%) rotate(90deg); opacity:0;}
.faq-panel{display:grid; grid-template-rows:0fr; transition:grid-template-rows .4s var(--ease);}
.faq-item.is-open .faq-panel{grid-template-rows:1fr;}
.faq-panel-inner{overflow:hidden; min-height:0;}
.faq-panel-inner p{color:var(--sec-fg-soft); font-size:.98rem; line-height:1.8; padding-bottom:1.6rem; margin:0;}
.faq-panel-inner a{color:var(--gold-deep); text-decoration:underline; text-underline-offset:3px;}
@media (prefers-reduced-motion:reduce){ .faq-panel{transition:none;} }

/* =======================================================================
   Contato
   ======================================================================= */
.contact-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:4rem; text-align:left;}
@media (max-width:820px){ .contact-grid{grid-template-columns:1fr; gap:3rem;} }
.contact-intro p{color:var(--sec-fg-soft); font-size:1.05rem;}
.contact-list{list-style:none; margin:2.2rem 0 0; padding:0;}
.contact-list li{display:flex; align-items:center; gap:1rem; padding:1rem 0; border-top:1px solid var(--sec-line);}
.contact-list li:last-child{border-bottom:1px solid var(--sec-line);}
.contact-list .icon{width:26px; height:26px; color:var(--gold); flex:none;}
.contact-list .icon svg{width:100%; height:100%; display:block;}
.contact-list .label{font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--sec-fg-soft); display:block;}
.contact-list .value{font-family:var(--font-display); font-size:1.1rem;}
.contact-list .disabled-link .value{color:var(--sec-fg-soft); font-style:italic;}
.contact-list a.contact-link{
  display:flex; align-items:center; gap:1rem; width:100%; text-decoration:none; color:inherit;
  transition:transform .3s ease;
}
.contact-list a.contact-link:hover{transform:translateX(8px);}
.contact-list a.contact-link:hover .value{color:var(--gold);}
.contact-list a.contact-link .value{transition:color .25s ease;}
.contact-list a.contact-link:focus-visible{outline:1px solid var(--gold); outline-offset:4px;}
.contact-form .stack-form{margin:0; max-width:none;}
.contact-form .btn{margin-top:.4rem;}

/* =======================================================================
   Footer
   ======================================================================= */
footer{background:var(--black); color:var(--off-white); padding-top:5rem; position:relative; overflow:hidden;}
footer::before{
  content:""; position:absolute; top:0; left:10%; right:10%; height:1px; z-index:1;
  background:linear-gradient(90deg, transparent, rgba(177,138,79,.28), transparent);
}
footer > .wrap{position:relative; z-index:1;}
/* footer's own 3-column grid is wide and left-aligned, so the generic
   right-anchored .watermark would land right on top of the "Navegar"
   links — pin it low and to the left instead, behind the short brand
   column where there's no text past the third line */
footer .watermark{
  top:auto; bottom:-14%; left:-2%; right:auto; font-size:min(18vw,15rem);
  filter:blur(1.5px); opacity:.06;
  animation:watermark-drift-footer 46s ease-in-out infinite;
}
@keyframes watermark-drift-footer{ 0%,100%{transform:scale(1);} 50%{transform:scale(1.025);} }
@media (prefers-reduced-motion:reduce){ footer .watermark{animation:none;} }
@media (max-width:900px){ footer .watermark{bottom:-6%; font-size:min(30vw,11rem);} }
.footer-grid{display:grid; grid-template-columns:1.1fr 1fr 1fr 1fr 1fr; gap:2.4rem; padding-bottom:3.4rem; border-bottom:1px solid rgba(250,249,246,.14);}
@media (max-width:1020px){ .footer-grid{grid-template-columns:1fr 1fr 1fr;} }
@media (max-width:640px){ .footer-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:760px){ .footer-grid{grid-template-columns:1fr; gap:2.6rem; text-align:center;} }
.footer-brand .emblem-wrap{height:34px; width:auto; margin-bottom:1.2rem; position:relative;}
.footer-brand .emblem-wrap::before{
  content:""; position:absolute; inset:-70% -120%; z-index:-1; border-radius:50%;
  background:radial-gradient(circle, rgba(177,138,79,.35), transparent 70%);
  filter:blur(14px); animation:glow-pulse 6s ease-in-out infinite;
}
@media (prefers-reduced-motion:reduce){ .footer-brand .emblem-wrap::before{animation:none; opacity:.7;} }
.footer-brand .emblem-wrap img{height:100%; width:auto; display:block; position:relative;}
@media (max-width:760px){ .footer-brand .emblem-wrap{margin-left:auto; margin-right:auto;} }
.footer-brand .word{font-family:var(--font-display); font-size:1.3rem; letter-spacing:.24em; text-transform:uppercase; display:block; margin-bottom:.8rem;}
.footer-brand p{color:#b7b2a8; font-size:.9rem; font-style:italic; font-family:var(--font-display); max-width:32ch;}
@media (max-width:760px){ .footer-brand p{margin-left:auto; margin-right:auto;} }
.footer-col h4{font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin-bottom:1.2rem; font-weight:600;}
.footer-col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.85rem;}
.footer-col a, .footer-col .disabled-link{
  text-decoration:none; color:#b7b2a8; font-size:.9rem; display:inline-block;
  transition:color .25s ease, transform .25s ease;
}
.footer-col a:hover{color:var(--off-white); transform:translateX(4px);}
.footer-col .disabled-link{color:#726e66; cursor:default; font-style:italic;}

.footer-legal{text-align:center; padding-top:2.6rem; font-size:.76rem;}
.footer-legal a{text-decoration:none; color:#8c887d; transition:color .25s ease;}
.footer-legal a:hover{color:var(--off-white);}
.footer-legal-dot{margin:0 .8rem; color:#5c584f;}

.footer-bottom{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding:1.8rem 0 2.6rem; font-size:.72rem; letter-spacing:.06em; color:#726e66;
}
@media (max-width:760px){ .footer-bottom{justify-content:center; text-align:center;} }
.to-top{
  display:inline-flex; align-items:center; gap:.5rem; text-decoration:none; color:#b7b2a8;
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; transition:color .25s ease, transform .25s ease;
}
.to-top:hover{color:var(--gold-light); transform:translateY(-3px);}
.to-top svg{width:14px; height:14px;}

/* =======================================================================
   Produtos — page hero, category quick-nav, category blocks + empty state,
   product tiles (grid card, currently unused until VERITE_PRODUCTS has
   entries — see assets/js/products-data.js / products.js).
   ======================================================================= */
.page-hero{
  padding:9rem 2rem 4.5rem; text-align:center; color:var(--off-white);
  position:relative; overflow:hidden;
  background:
    radial-gradient(ellipse 55% 45% at 50% 0%, rgba(177,138,79,.16), transparent 70%),
    var(--black);
}
.page-hero .emblem-wrap{width:64px; margin:0 auto 1.8rem; color:var(--gold); animation:emblem-in 1.1s var(--ease) both;}
.page-hero .emblem-wrap img{width:100%; height:auto; display:block;}
.page-hero h1{
  font-family:var(--font-display); font-size:clamp(2.4rem,5.5vw,3.6rem);
  color:var(--off-white); animation:fade-up 1s .15s var(--ease) both;
}
.page-hero .slogan{
  font-family:var(--font-display); font-style:italic; font-size:clamp(1.05rem,2.2vw,1.3rem);
  color:var(--gold-light); margin-top:1.1rem; animation:fade-up 1s .3s var(--ease) both;
}
@media (prefers-reduced-motion:reduce){ .page-hero .emblem-wrap, .page-hero h1, .page-hero .slogan{animation:none;} }

.category-nav{
  display:flex; justify-content:center; gap:1rem; flex-wrap:wrap;
  margin-top:2.6rem; animation:fade-up 1s .42s var(--ease) both;
}
@media (prefers-reduced-motion:reduce){ .category-nav{animation:none;} }
.category-nav a{
  padding:.6rem 1.4rem; border:1px solid rgba(250,249,246,.28); border-radius:999px;
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
  color:#b7b2a8; transition:border-color .25s ease, color .25s ease;
}
.category-nav a:hover{border-color:var(--gold); color:var(--off-white);}

.category-empty{
  max-width:420px; margin:0 auto; text-align:center; padding:3.2rem 2rem;
  border:1px solid var(--sec-line); border-radius:2px; position:relative; z-index:1;
  transition:border-color .4s ease, transform .4s ease;
}
.category-empty:hover{border-color:rgba(177,138,79,.5); transform:translateY(-4px);}
.category-empty .icon{
  width:40px; height:40px; margin:0 auto 1.4rem; color:var(--gold);
  animation:icon-breathe 5s ease-in-out infinite;
}
.category-empty .icon svg{width:100%; height:100%; display:block;}
@keyframes icon-breathe{ 0%,100%{opacity:.75; transform:scale(1);} 50%{opacity:1; transform:scale(1.08);} }
@media (prefers-reduced-motion:reduce){ .category-empty .icon{animation:none;} }
.category-empty-title{
  font-family:var(--font-display); font-style:italic; font-size:1.4rem; color:inherit;
}
.category-empty-sub{margin-top:.6rem; font-size:.86rem; color:var(--sec-fg-soft);}

.product-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:2rem;
}
.product-grid-large{grid-template-columns:repeat(auto-fill, minmax(320px,1fr)); gap:2.6rem;}
.product-tile{
  display:block; color:inherit;
  transition:transform .35s ease;
}
.product-tile:hover{transform:translateY(-6px);}
.product-tile-link{display:block; text-decoration:none; color:inherit;}
.product-tile-media{
  position:relative;
  aspect-ratio:4/5; border:1px solid var(--sec-line); border-radius:2px; overflow:hidden;
  background:color-mix(in srgb, var(--sec-fg) 4%, transparent); margin-bottom:1rem;
  transition:transform .12s ease-out, border-color .4s ease, box-shadow .4s ease;
}
.product-tile:hover .product-tile-media{border-color:var(--gold); box-shadow:0 20px 40px -26px rgba(177,138,79,.4);}
.product-tile-media img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease;}
.product-tile:hover .product-tile-media img{transform:scale(1.06);}
.product-tile-body{padding-top:.1rem;}
.product-tile-category{
  font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-deep); margin:0 0 .3rem;
}
.section-dark .product-tile-category, .section-2 .product-tile-category, .section-3 .product-tile-category{color:var(--gold-light);}
.product-tile h3{font-family:var(--font-display); font-size:1.15rem; margin-bottom:.3rem;}
.product-tile-volume{font-size:.78rem; color:var(--sec-fg-soft);}
.product-tile-price{font-size:.92rem; color:var(--gold-deep); margin-top:.3rem;}
.price-was, .product-tile-price-was, .product-price-was{color:var(--sec-fg-soft); font-weight:400; text-decoration:line-through;}
.product-tile-price-was{margin-right:.45rem;}
.section-dark .product-tile-price, .section-2 .product-tile-price, .section-3 .product-tile-price{color:var(--gold-light);}
.product-tile-installments{font-size:.72rem; color:var(--sec-fg-soft); margin-top:.15rem;}

/* ---------- badges + favorito sobre a mídia do card ---------- */
.product-tile-badges{
  position:absolute; top:.7rem; left:.7rem; z-index:2;
  display:flex; flex-direction:column; align-items:flex-start; gap:.35rem;
}
.badge{
  display:inline-block; padding:.28rem .6rem; border-radius:2px;
  font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700;
  box-shadow:0 6px 16px -8px rgba(0,0,0,.5);
}
.badge-bestseller{background:var(--gold); color:var(--black);}
.badge-new{background:var(--off-white); color:var(--black);}
.badge-exclusive{background:var(--black); color:var(--gold-light); border:1px solid var(--gold-deep);}
.badge-limited{background:var(--ink-on-beige); color:var(--beige);}
.badge-sale{background:#7a3030; color:#fff;}

.product-tile-fav{
  position:absolute; top:.7rem; right:.7rem; z-index:2;
  width:32px; height:32px; border-radius:50%; border:none;
  background:rgba(12,12,13,.55); color:var(--off-white); opacity:.85;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  backdrop-filter:blur(4px);
  transition:background-color .25s ease, color .25s ease, transform .2s ease, opacity .25s ease;
}
.product-tile-fav:hover{transform:scale(1.08); opacity:1;}
.product-tile-fav.is-favorited{color:var(--gold-light); opacity:1;}
.fav-pulse{animation:fav-pulse .45s var(--ease);}
@keyframes fav-pulse{ 0%{transform:scale(1);} 40%{transform:scale(1.35);} 100%{transform:scale(1);} }
@media (prefers-reduced-motion:reduce){ .fav-pulse{animation:none;} }
.btn-favorite.fav-pulse{animation:fav-pulse .45s var(--ease);}

.product-tile-actions{
  display:flex; align-items:center; justify-content:space-between; gap:.8rem; margin-top:.9rem;
}
.product-tile-add{padding:.55rem 1rem; font-size:.6rem; letter-spacing:.12em; flex:1; text-align:center;}
.product-tile-view{
  font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap;
  color:var(--gold-deep); text-decoration:none; transition:color .25s ease;
}
.product-tile-view:hover{color:var(--gold);}
.section-dark .product-tile-view, .section-2 .product-tile-view, .section-3 .product-tile-view{color:var(--gold-light);}
.product-tile-oos{font-size:.7rem; color:var(--error); font-style:italic; margin:0;}

/* botão "adicionar ao carrinho" some e reaparece suavemente no hover — só em
   telas com mouse de verdade; em touch (tablet/celular) fica sempre visível,
   porque não existe hover pra revelar nada. */
/* discreto, nunca opacity:0 — um botão totalmente invisível fica fora da
   árvore de acessibilidade em alguns navegadores e pode falhar em cliques
   rápidos (mouse já clicando antes da transição terminar) */
@media (hover:hover) and (pointer:fine){
  .product-tile-actions{opacity:.55; transform:translateY(4px); transition:opacity .3s ease, transform .3s ease;}
  .product-tile:hover .product-tile-actions, .product-tile:focus-within .product-tile-actions{opacity:1; transform:translateY(0);}
}

/* =======================================================================
   Produto (individual) — gallery + info two-column, related grid.
   Populated by assets/js/product-detail.js; empty state is what renders
   until a product actually exists for the requested ?slug=.
   ======================================================================= */
.product-detail-empty{max-width:520px; margin:0 auto; text-align:center; padding:3rem 0;}
.product-detail-empty h1{font-family:var(--font-display); font-size:clamp(1.6rem,3vw,2.2rem); margin-bottom:1rem;}
.product-detail-empty .sub{color:var(--sec-fg-soft); margin-bottom:2rem;}

.product-detail-grid{display:grid; grid-template-columns:1fr 1fr; gap:3.5rem; align-items:start;}
@media (max-width:760px){ .product-detail-grid{grid-template-columns:1fr; gap:2rem;} }
.product-gallery{display:flex; flex-direction:column; gap:1rem;}
.product-gallery img{width:100%; border-radius:2px; display:block;}
.product-info .eyebrow{margin-bottom:.8rem;}
.product-info h1{font-family:var(--font-display); font-size:clamp(1.8rem,3.4vw,2.6rem); margin-bottom:.6rem;}
.product-info .product-volume{font-size:.86rem; color:var(--sec-fg-soft); margin-bottom:.4rem;}
.product-info .product-price{font-family:var(--font-display); font-size:1.5rem; color:var(--gold-deep); margin-bottom:1.6rem;}
.product-info .product-description{color:var(--sec-fg-soft); margin-bottom:2rem; line-height:1.85;}

.product-related{margin-top:5rem; padding-top:3.5rem; border-top:1px solid var(--sec-line);}
.product-related h2{font-family:var(--font-display); font-size:clamp(1.5rem,2.8vw,1.9rem); margin-bottom:2rem; text-align:center;}

/* =======================================================================
   Legal pages — Privacidade / Termos, and shared by the 404 page's
   simpler centered variant. Plain long-form reading, generous width cap.
   ======================================================================= */
.legal-page{padding-top:9rem;}
.legal-page h1{font-family:var(--font-display); font-size:clamp(2.2rem,4.5vw,3.2rem); margin-bottom:.6rem;}
.legal-updated{font-size:.8rem; color:var(--sec-fg-soft); letter-spacing:.02em; margin-bottom:3.2rem;}
.legal-body{max-width:68ch;}
.legal-body h2{
  font-family:var(--font-display); font-size:1.35rem; margin:0 0 1rem;
  padding-top:1.8rem; border-top:1px solid var(--sec-line);
}
.legal-body h2:first-of-type{border-top:none; padding-top:0;}
.legal-body p{color:var(--sec-fg-soft); line-height:1.85; margin:0 0 1.8rem;}
.legal-body a{color:var(--gold-deep); text-decoration:underline; text-underline-offset:3px;}
.legal-note{
  font-style:italic; color:var(--gold-deep); background:rgba(177,138,79,.08);
  border-left:2px solid var(--gold); padding:.9rem 1.2rem; border-radius:2px;
  margin:0 0 1.8rem;
}
.legal-note-inline{font-style:italic; color:var(--gold-deep);}
.legal-page .btn{margin-top:1rem;}

/* =======================================================================
   404 — branded, not the framework default
   ======================================================================= */
.not-found{
  min-height:100svh; display:flex; align-items:center; justify-content:center;
  padding:6rem 2rem; text-align:center; position:relative;
  background:
    radial-gradient(ellipse 55% 45% at 50% 30%, rgba(177,138,79,.15), transparent 70%),
    var(--black);
}
.not-found-content{position:relative; z-index:1; max-width:34rem;}
.not-found-content .emblem-wrap{width:54px; margin:0 auto 1.6rem; color:var(--gold);}
.not-found-content .emblem-wrap img{width:100%; height:auto; display:block;}
.not-found-code{
  font-family:var(--font-display); font-size:clamp(3.6rem,10vw,6rem); color:var(--gold-light);
  letter-spacing:.06em; text-shadow:0 0 50px rgba(177,138,79,.35); margin:0 0 .6rem;
}
.not-found-content h1{font-family:var(--font-display); font-size:clamp(1.5rem,3vw,2.1rem); color:var(--off-white);}
.not-found-content .sub{max-width:38ch; margin:1.1rem auto 0; color:#b7b2a8;}
.not-found-content .hero-cta{margin-top:2.4rem;}

@media (max-width:820px){
  .section{padding:5.5rem 0;}
}

/* =======================================================================
   Cabeçalho de loja — barra de busca + ícones (conta/favoritos/carrinho)
   acima da navegação por categorias. header::after/is-scrolled etc. já
   existiam; isto só adiciona a camada de topo nova.
   ======================================================================= */
.header-top{display:flex; align-items:center; gap:1.6rem; padding-top:1.05rem; padding-bottom:1.05rem;}
header.is-scrolled .header-top{padding-top:.7rem; padding-bottom:.7rem;}

.header-search{
  position:relative;
  flex:1 1 auto; display:flex; align-items:center; max-width:540px;
  border:1px solid rgba(250,249,246,.22); border-radius:999px;
  padding:.2rem .3rem .2rem 1.3rem; background:rgba(250,249,246,.03);
  transition:border-color .3s ease, background-color .3s ease;
}
.search-suggestions{
  position:absolute; top:calc(100% + 10px); left:0; right:0; z-index:65;
  background:var(--black-2); border:1px solid rgba(250,249,246,.14); border-radius:var(--radius-lg);
  padding:.5rem; box-shadow:var(--shadow-lift);
  max-height:70vh; overflow-y:auto;
}
.search-suggestion{
  display:flex; align-items:center; gap:.8rem; padding:.6rem .6rem; border-radius:2px;
  text-decoration:none; color:var(--off-white); transition:background-color .2s ease;
}
.search-suggestion:hover, .search-suggestion:focus-visible{background:rgba(177,138,79,.14);}
.search-suggestion img, .search-suggestion-noimg{
  width:38px; height:46px; object-fit:cover; border-radius:2px; background:rgba(250,249,246,.06); flex:none; display:block;
}
.search-suggestion-info{display:flex; flex-direction:column; gap:.15rem; min-width:0;}
.search-suggestion-info strong{font-size:.85rem; font-weight:500;}
.search-suggestion-meta{font-size:.76rem; color:var(--gold-light);}
.header-search:focus-within{border-color:var(--gold); background:rgba(250,249,246,.07);}
.header-search input{
  flex:1; min-width:0; background:none; border:none; outline:none; color:var(--off-white);
  font-family:inherit; font-size:.85rem; padding:.55rem 0;
}
.header-search input::placeholder{color:#8c887d;}
.header-search button{
  appearance:none; background:none; border:none; color:var(--gold); cursor:pointer;
  width:36px; height:36px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  transition:background-color .25s ease;
}
.header-search button:hover{background:rgba(177,138,79,.18);}
.header-search svg{width:16px; height:16px;}

.header-actions{display:flex; align-items:center; gap:.2rem; flex:none;}
.header-icon{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:.22rem;
  text-decoration:none; color:#b7b2a8; padding:.4rem .65rem; border-radius:4px;
  transition:color .25s ease, background-color .25s ease; border:none; background:none; cursor:pointer;
  font-family:inherit;
}
.header-icon:hover{color:var(--off-white); background:rgba(250,249,246,.06);}
.header-icon svg{width:19px; height:19px;}
.header-icon-label{font-size:.63rem; letter-spacing:.05em; text-transform:uppercase;}
.header-icon-badge{
  position:absolute; top:.05rem; right:.35rem; min-width:16px; height:16px; padding:0 3px;
  border-radius:999px; background:var(--gold); color:var(--black); font-size:.6rem; font-weight:700;
  display:flex; align-items:center; justify-content:center; line-height:1;
}
.header-cart{position:relative;}

#mini-cart{
  position:absolute; top:calc(100% + 12px); right:0; width:320px; max-width:88vw;
  background:var(--black-2); border:1px solid rgba(250,249,246,.14); border-radius:var(--radius-lg);
  padding:1.2rem; box-shadow:var(--shadow-lift);
  opacity:0; visibility:hidden; transform:translateY(-8px); pointer-events:none;
  transition:opacity .25s ease, transform .25s ease, visibility .25s;
  z-index:70;
}
#mini-cart.is-open{opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto;}
.mini-cart-row{display:flex; gap:.7rem; align-items:center; padding:.6rem 0; border-bottom:1px solid rgba(250,249,246,.08);}
.mini-cart-row img, .mini-cart-noimg{width:44px; height:52px; object-fit:cover; border-radius:2px; background:rgba(250,249,246,.06); flex:none; display:block;}
.mini-cart-info{display:flex; flex-direction:column; gap:.15rem; font-size:.76rem; color:#b7b2a8; min-width:0;}
.mini-cart-info strong{color:var(--off-white); font-weight:500; font-size:.82rem;}
.mini-cart-empty{font-size:.82rem; color:#8c887d; text-align:center; padding:1rem 0; margin:0;}
.mini-cart-more{font-size:.72rem; color:#8c887d; padding-top:.6rem; margin:0;}
.mini-cart-footer{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:1rem; padding-top:1rem; border-top:1px solid rgba(250,249,246,.14);}
.mini-cart-footer strong{font-size:.88rem;}
.mini-cart-footer .btn{padding:.6rem 1.2rem; font-size:.62rem;}

@media (max-width:860px){
  .header-top{flex-wrap:wrap;}
  .header-search{order:3; flex-basis:100%; max-width:none; margin-top:.7rem;}
  .header-icon-label{display:none;}
}

/* nav com muitos itens: permite quebrar em 2 linhas em telas médias em vez
   de vazar horizontalmente */
@media (min-width:861px){
  nav.links{flex-wrap:wrap; row-gap:.6rem;}
}

/* =======================================================================
   Cards de categoria (home "Encontre sua fragrância" / "Presenteie")
   ======================================================================= */
.category-cards{display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:1.6rem;}
.category-card{
  position:relative; display:block; aspect-ratio:3/4; overflow:hidden; border-radius:2px;
  text-decoration:none; color:var(--off-white);
  background:linear-gradient(160deg, var(--black-2), var(--black));
  border:1px solid rgba(250,249,246,.1);
  transition:transform .4s ease, border-color .4s ease;
}
.category-card:hover{transform:translateY(-6px); border-color:var(--gold);}
.category-card::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 100%, rgba(177,138,79,.3), transparent 65%);
  opacity:.65; transition:opacity .4s ease;
}
.category-card:hover::before{opacity:1;}
.category-card-label{
  position:absolute; left:1.4rem; right:1.4rem; bottom:1.3rem;
  font-family:var(--font-display); font-size:1.3rem;
}
.category-card-label small{
  display:block; font-family:var(--font-sans); font-size:.6rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold-light); margin-top:.4rem;
}
/* per-category gradient tints — each card gets a faint, distinct hue
   (warm/cool/olive/wine/green/violet) fading into --black, so the grid
   reads as one family while still telling categories apart at a glance.
   Kept as their own hex values (not composed from --black-2/3 or --gold)
   because the whole point is a subtle per-card hue shift that the shared
   neutrals can't express; centralised here instead of inline on the <a>. */
.category-card-feminino{background:linear-gradient(160deg,#241a12,var(--black));}
.category-card-masculino{background:linear-gradient(160deg,#141c22,var(--black));}
.category-card-unissex{background:linear-gradient(160deg,#1c1a12,var(--black));}
.category-card-kits{background:linear-gradient(160deg,#221619,var(--black));}
.category-card-presentes{background:linear-gradient(160deg,#161f1a,var(--black));}
.category-card-lancamentos{background:linear-gradient(160deg,#1a1620,var(--black));}

/* =======================================================================
   Listagem de produtos (produtos.html) — filtros + ordenação + grade
   ======================================================================= */
.listing-layout{display:grid; grid-template-columns:240px 1fr; gap:3rem; align-items:start;}
@media (max-width:900px){ .listing-layout{grid-template-columns:1fr;} }
.listing-toolbar{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  margin-bottom:2.2rem; flex-wrap:wrap;
}
.listing-count{font-size:.78rem; color:var(--sec-fg-soft); margin:0;}
.listing-sort{
  font-size:.75rem; padding:.55rem .8rem; border:1px solid var(--sec-line);
  background:transparent; color:inherit; border-radius:2px;
}
.listing-filter-toggle{display:none;}
.listing-filter-group{margin-bottom:2.2rem;}
.listing-filter-group h4{
  font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold);
  margin-bottom:.9rem; font-weight:600;
}
.listing-filter-option{
  display:flex; align-items:center; gap:.55rem; font-size:.82rem; padding:.32rem 0;
  cursor:pointer; color:var(--sec-fg-soft);
}
.listing-filter-option input{accent-color:var(--gold);}
.listing-filter-price{display:flex; gap:.6rem; align-items:center;}
.listing-filter-price input, .listing-filter-select{
  width:100%; padding:.5rem .6rem; border:1px solid var(--sec-line);
  background:transparent; color:inherit; border-radius:2px; font-size:.8rem; font-family:inherit;
}
.listing-clear{
  font-size:.72rem; text-decoration:underline; text-underline-offset:3px;
  color:var(--gold-deep); background:none; border:none; cursor:pointer; padding:0;
}
@media (max-width:900px){
  .listing-filter-toggle{display:inline-flex;}
  #listing-filters{display:none;}
  #listing-filters.is-open{display:block; margin-bottom:2.2rem;}
}

/* filtro de coleção ativo (chegada via mega-menu/home com ?colecao=...) —
   sem isto o filtro ficava aplicado "invisivelmente" na grade */
.listing-active-filters{display:flex; flex-wrap:wrap; gap:.6rem; margin:-1.2rem 0 2rem;}
.listing-active-filters:empty{display:none; margin:0;}
.listing-filter-chip{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.4rem .5rem .4rem .9rem; border-radius:999px;
  border:1px solid var(--gold-deep); background:rgba(177,138,79,.08);
  color:var(--gold-deep); font-size:.68rem; letter-spacing:.06em; text-transform:uppercase;
}
.listing-filter-chip button{
  display:flex; align-items:center; justify-content:center;
  width:18px; height:18px; border-radius:50%; border:none; background:rgba(177,138,79,.18);
  color:inherit; cursor:pointer; font-size:.85rem; line-height:1; padding:0;
  transition:background-color .2s ease, color .2s ease;
}
.listing-filter-chip button:hover{background:var(--gold-deep); color:var(--white);}

.skeleton-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:2rem;}
.skeleton-card{
  aspect-ratio:4/5; border-radius:2px;
  background:linear-gradient(100deg, rgba(140,136,125,.08) 20%, rgba(177,138,79,.16) 40%, rgba(140,136,125,.08) 60%);
  background-size:200% 100%; animation:skeleton-shimmer 1.6s ease-in-out infinite;
}
@keyframes skeleton-shimmer{ 0%{background-position:200% 0;} 100%{background-position:-200% 0;} }
@media (prefers-reduced-motion:reduce){ .skeleton-card{animation:none; opacity:.5;} }

/* =======================================================================
   Quiz "Descubra sua Verité" — uma pergunta por tela, transição suave,
   termina com um único produto real recomendado ("Sua Verité é...").
   ======================================================================= */
.quiz{max-width:640px; margin:0 auto; text-align:center;}
.quiz-progress{display:flex; justify-content:center; gap:.5rem; margin:1.4rem 0 2.6rem;}
.quiz-progress-dot{
  width:6px; height:6px; border-radius:50%; background:rgba(250,249,246,.22);
  transition:background-color .3s ease, transform .3s ease;
}
.quiz-progress-dot.is-active{background:var(--gold); transform:scale(1.3);}
.quiz-progress-dot.is-done{background:var(--gold-deep);}
.quiz-step h2{font-family:var(--font-display); font-size:clamp(1.4rem,2.8vw,1.9rem); margin-bottom:2rem;}
.quiz-options{display:flex; flex-wrap:wrap; justify-content:center; gap:1rem;}
.quiz-option{
  padding:.9rem 1.8rem; border:1px solid var(--sec-line); border-radius:999px;
  background:transparent; color:inherit; font-family:var(--font-display); font-size:1.05rem;
  cursor:pointer; transition:border-color .3s ease, background-color .3s ease, transform .25s ease;
}
.quiz-option:hover{border-color:var(--gold); transform:translateY(-3px); background:rgba(177,138,79,.1);}
.quiz-back{
  display:block; margin:2rem auto 0; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--sec-fg-soft); background:none; border:none; cursor:pointer; transition:color .25s ease;
}
.quiz-back:hover{color:var(--gold);}
.quiz-result{margin-top:1rem;}
.quiz-result h3{font-family:var(--font-display); font-size:1.5rem; text-align:center; margin-bottom:2rem;}
.quiz-result-product{
  display:grid; grid-template-columns:180px 1fr; gap:2rem; align-items:center; text-align:left;
  max-width:560px; margin:0 auto;
}
@media (max-width:520px){ .quiz-result-product{grid-template-columns:1fr; text-align:center;} }
.quiz-result-media{
  aspect-ratio:4/5; border:1px solid rgba(250,249,246,.16); border-radius:2px; overflow:hidden;
  background:rgba(250,249,246,.04);
}
.quiz-result-media img{width:100%; height:100%; object-fit:cover; display:block;}
.quiz-result-info h4{font-family:var(--font-display); font-size:1.4rem; margin:.3rem 0 .8rem;}
.quiz-result-desc{color:var(--sec-fg-soft); line-height:1.7; margin-bottom:.8rem;}
.quiz-result-price{font-family:var(--font-display); font-size:1.2rem; color:var(--gold-light); margin-bottom:1.4rem;}
.quiz-result-actions{display:flex; flex-wrap:wrap; gap:.8rem;}
@media (max-width:520px){ .quiz-result-actions{justify-content:center;} }
.quiz-empty{color:var(--sec-fg-soft); text-align:center;}
.quiz-restart{
  display:block; margin:2.6rem auto 0; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold-deep); background:none; border:none; cursor:pointer;
  text-decoration:underline; text-underline-offset:3px;
}

/* =======================================================================
   Carrinho (carrinho.html)
   ======================================================================= */
.cart-layout{display:grid; grid-template-columns:1fr 340px; gap:3rem; align-items:start;}
@media (max-width:900px){ .cart-layout{grid-template-columns:1fr;} }
.cart-header-row{
  display:grid; grid-template-columns:2.4fr .8fr .8fr .8fr auto; gap:1rem;
  font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--sec-fg-soft);
  padding-bottom:.8rem; border-bottom:1px solid var(--sec-line);
}
.cart-row{
  display:grid; grid-template-columns:2.4fr .8fr .8fr .8fr auto; gap:1rem; align-items:center;
  padding:1.2rem 0; border-bottom:1px solid var(--sec-line);
}
.cart-row-product{display:flex; gap:1rem; align-items:center;}
.cart-row-product img, .cart-row-noimg{width:64px; height:76px; object-fit:cover; border-radius:2px; background:rgba(250,249,246,.06); flex:none; display:block;}
.cart-row-volume{display:block; font-size:.75rem; color:var(--sec-fg-soft); margin-top:.2rem;}
.cart-row-qty input{
  width:100%; padding:.5rem; border:1px solid var(--sec-line); background:transparent;
  color:inherit; border-radius:2px; text-align:center; font-family:inherit;
}
.cart-row-remove{background:none; border:none; color:var(--sec-fg-soft); cursor:pointer; font-size:1rem; transition:color .25s ease;}
.cart-row-remove:hover{color:var(--error);}
@media (max-width:700px){
  .cart-header-row{display:none;}
  .cart-row{grid-template-columns:1fr; text-align:left; position:relative; padding-right:2.2rem;}
  .cart-row-remove{position:absolute; top:1.2rem; right:0;}
}
.cart-summary{border:1px solid var(--sec-line); border-radius:2px; padding:1.8rem; position:sticky; top:6.5rem;}
.cart-summary h3{font-family:var(--font-display); font-size:1.2rem; margin-bottom:1.4rem;}
.cart-summary-row{display:flex; justify-content:space-between; font-size:.85rem; padding:.5rem 0; color:var(--sec-fg-soft);}
.cart-summary-row.is-total{
  color:inherit; font-size:1.05rem; font-weight:600; border-top:1px solid var(--sec-line);
  margin-top:.6rem; padding-top:1rem;
}
.coupon-form{display:flex; gap:.5rem; margin:1.2rem 0;}
.coupon-form input{flex:1; padding:.6rem .8rem; border:1px solid var(--sec-line); background:transparent; color:inherit; border-radius:2px; font-family:inherit;}
.coupon-message{font-size:.75rem; margin-top:.5rem;}
.coupon-message.is-ok{color:var(--gold-deep);}
.coupon-message.is-error{color:var(--error);}
.checkout-panel{
  margin-top:1.4rem; padding:1.2rem; border:1px solid var(--gold-deep); border-radius:2px;
  background:rgba(177,138,79,.08); font-size:.82rem; line-height:1.7;
}
.checkout-panel .btn{margin-top:1rem; width:100%;}
.cart-empty{text-align:center; padding:4rem 0;}

/* =======================================================================
   Produto (individual) — extras: badges, galeria com miniaturas, ficha
   técnica, seletor de quantidade.
   ======================================================================= */
.product-badges{display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1rem;}
.product-gallery-main{width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:2px; display:block; background:rgba(250,249,246,.04);}
.product-thumbs{display:flex; gap:.7rem; margin-top:.9rem;}
.product-thumb{
  width:64px; height:76px; padding:0; border:1px solid var(--sec-line); border-radius:2px;
  overflow:hidden; cursor:pointer; background:none; transition:border-color .25s ease;
}
.product-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.product-thumb.is-active, .product-thumb:hover{border-color:var(--gold);}
.product-price-was{font-size:1.05rem; margin-right:.5rem;}
.product-installments{font-size:.82rem; color:var(--sec-fg-soft); margin:.3rem 0 1rem;}
.product-stock{font-size:.8rem; color:var(--error); margin:0 0 1rem;}
.product-detail-notes{margin:1.8rem 0;}
.product-detail-row{display:flex; gap:.8rem; padding:.55rem 0; border-bottom:1px solid var(--sec-line); font-size:.85rem;}
.product-detail-row dt{color:var(--sec-fg-soft); min-width:9.5rem; font-weight:500; margin:0;}
.product-detail-row dd{margin:0;}
.product-qty-row{display:flex; align-items:center; gap:1rem; margin:1.6rem 0;}
.product-qty-row label{font-size:.78rem; color:var(--sec-fg-soft);}
.product-qty-row input{
  width:70px; padding:.6rem; text-align:center; border:1px solid var(--sec-line);
  background:transparent; color:inherit; border-radius:2px; font-family:inherit;
}
.product-actions{display:flex; flex-direction:column; gap:.8rem; align-items:flex-start;}

/* =======================================================================
   A Essência Verité — teaser pequeno da home linkando pra sobre.html
   (deliberadamente compacto: menos padding que uma seção normal, texto
   curto, um botão só — não pode competir em tamanho com as vitrines)
   ======================================================================= */
#essencia-mini{padding:4.5rem 0;}
.essencia-mini-wrap{max-width:640px; margin:0 auto; text-align:center;}
.essencia-mini-wrap h2{font-family:var(--font-display); font-size:clamp(1.7rem,3.2vw,2.3rem); margin-bottom:1.1rem;}
.essencia-mini-wrap .lead{color:var(--sec-fg-soft); line-height:1.85; margin-bottom:1.8rem;}

/* =======================================================================
   Clube Verité — seção premium na home (não deixar escondido)
   ======================================================================= */
.clube-home-wrap{text-align:center;}
.clube-home-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:2.2rem;
  max-width:1000px; margin:3.4rem auto 0; text-align:left;
}
@media (max-width:900px){ .clube-home-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .clube-home-grid{grid-template-columns:1fr;} }
.clube-home-item{
  padding:1.6rem 1.4rem; border:1px solid rgba(250,249,246,.14); border-radius:2px;
  transition:border-color .35s ease, transform .35s ease;
}
.clube-home-item:hover{border-color:var(--gold-deep); transform:translateY(-4px);}
.clube-home-num{
  display:block; font-family:var(--font-display); font-size:1.6rem; color:var(--gold);
  margin-bottom:.8rem;
}
.clube-home-item h3{font-family:var(--font-display); font-size:1.1rem; margin-bottom:.5rem; color:var(--off-white);}
.clube-home-item p{font-size:.86rem; color:#b7b2a8; line-height:1.7; margin:0;}

/* =======================================================================
   Toast de feedback (assets/js/main.js — window.VeriteToast)
   ======================================================================= */
.verite-toast{
  position:fixed; left:50%; bottom:2rem; transform:translate(-50%,20px); z-index:9999;
  background:var(--black); color:var(--off-white); border:1px solid var(--gold-deep);
  padding:.85rem 1.7rem; border-radius:999px; font-size:.78rem; letter-spacing:.02em;
  opacity:0; pointer-events:none; box-shadow:0 20px 40px -18px rgba(0,0,0,.6);
  transition:opacity .3s ease, transform .3s ease; max-width:88vw; text-align:center;
}
.verite-toast.is-visible{opacity:1; transform:translate(-50%,0);}