/* ============================================================
   OPUS DECANTS · DESIGN SYSTEM
   Alta perfumaria em decants — paleta black + gold, editorial.
   Compartilhado por: index.html · categoria.html · produto.html
============================================================ */

/* Fonte do site — Montserrat (self-host; variável 100–900, normal + itálico).
   OFL — funciona offline, sem Google Fonts. Aplicada em TODO o site, inclusive nos
   números (antes Times New Roman). */
@font-face {
  font-family:'Montserrat';
  src:url('fonts/Montserrat-VariableFont_wght.ttf') format('truetype-variations');
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face {
  font-family:'Montserrat';
  src:url('fonts/Montserrat-Italic-VariableFont_wght.ttf') format('truetype-variations');
  font-weight:100 900; font-style:italic; font-display:swap;
}

:root {
  --black: #0a0a0a;
  --black-soft: #121212;
  --black-card: #181818;
  --black-elev: #1f1f1f;
  --black-deep: #050505;

  --gold: #c9a861;
  --gold-light: #e5c588;
  --gold-bright: #f0d490;
  --gold-dim: #a08642;
  --gold-dark: #6b5829;

  --cream: #f8f1e1;
  --text: #ece4d3;
  --text-mid: #a9a193;
  --text-dim: #8a8273; /* clareado p/ melhor contraste em textos pequenos (AA) */

  --green: #6fae7d;

  --border: rgba(201, 168, 97, 0.15);
  --border-strong: rgba(201, 168, 97, 0.35);
  --border-gold: rgba(201, 168, 97, 0.6);

  --shadow-card: 0 8px 30px rgba(0, 0, 0, 0.5);
  --shadow-product: 0 30px 60px -20px rgba(0,0,0,.7), 0 0 1px rgba(201,168,97,.15);

  --font-display: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-serif: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-body: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem;
  --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem;
  --s-9: 6rem; --s-10: 8rem;

  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-quick: cubic-bezier(.4, 0, .2, 1);

  /* Escala de raio (coerência 2026): componentes CONTIDOS usam estes valores;
     elementos full-bleed (header, hero, drawers laterais) seguem retos de propósito. */
  --r-sm: 9px; --r-md: 14px; --r-lg: 18px;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
/* Pesos INTENCIONAIS (refino 2026): nada de negrito-geral. Peso aplicado só onde
   precisa (rótulos/botões = 500), corpo e títulos mais leves. Mais ar, mesma alma.
   Tipografia: Montserrat em TODO o site (textos e números) — a serifa Baskervville
   chegou a ser testada mas foi revertida a pedido do dono; ficaram só os pesos leves. */
.display, .eyebrow, .btn, .nav-item > a, .mn-link,
.section-head .num, .section-head .link, .badge, .pay,
.size-pills span, .pbrand, .co-brand, .cmp-brand,
.cuJ .jc-info .brand, .kit-tag, .ss-brand,
.add-btn, .cross-add, .ct-go, .btn-cart-primary, .btn-cart-secondary,
.co-coupon button, .co-cep button, .pay-btn .pm { font-weight:500; }
.htxt { font-weight:500; }
html { scroll-behavior:smooth; font-size:17px; }

body {
  background:var(--black);
  color:var(--text);
  font-family:var(--font-body);
  font-weight:400;
  font-size:1rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body::before {
  content:''; position:fixed; inset:0;
  pointer-events:none; z-index:1; opacity:.025;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9' numOctaves='3' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' /%3E%3C/svg%3E");
}

img { max-width:100%; display:block; }
button { font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
a { color:inherit; text-decoration:none; transition:opacity .25s var(--ease); }
input, select { font-family:inherit; }

.wrap { max-width:1320px; margin:0 auto; padding:0 var(--s-6); }
.wrap-narrow { max-width:980px; margin:0 auto; padding:0 var(--s-6); }

/* Acessibilidade — conteúdo só p/ leitores de tela */
.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;
}

/* Estrelas proporcionais à nota (preenchimento por largura) */
.starbar { display:inline-block; position:relative; line-height:1; white-space:nowrap; vertical-align:middle; }
.starbar::before { content:'★★★★★'; color:var(--text-dim); letter-spacing:.08em; }
.starbar > i { position:absolute; left:0; top:0; overflow:hidden; white-space:nowrap; width:100%; }
.starbar > i::before { content:'★★★★★'; color:var(--gold); letter-spacing:.08em; }

/* Foco visível p/ navegação por teclado (acessibilidade) */
:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }

/* Respeita preferência do usuário por menos movimento */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .fade-up { opacity:1 !important; transform:none !important; }
}

/* Tipografia */
.display { font-family:var(--font-display); font-weight:500; letter-spacing:.08em; text-transform:uppercase; }
.serif { font-family:var(--font-serif); font-weight:400; }
.italic { font-family:var(--font-serif); font-style:italic; }
.eyebrow {
  font-family:var(--font-display); font-size:.7rem;
  letter-spacing:.32em; text-transform:uppercase;
  color:var(--gold); font-weight:500;
}
.eyebrow-line::before {
  content:''; display:inline-block; width:28px; height:1px;
  background:var(--gold); margin-right:var(--s-3); vertical-align:middle;
}

/* Section head */
.section-head {
  display:flex; align-items:baseline; gap:var(--s-5);
  margin-bottom:var(--s-7);
  padding-bottom:var(--s-4);
  border-bottom:1px solid var(--border);
}
.section-head .num {
  font-family:var(--font-display); font-size:.85rem;
  color:var(--gold); letter-spacing:.2em;
}
.section-head h2 {
  font-family:var(--font-serif); font-weight:400;
  font-size:clamp(1.8rem, 3.5vw, 2.6rem);
  letter-spacing:-.01em; color:var(--text); flex:1;
}
.section-head h2 em { font-style:italic; color:var(--gold-light); font-weight:500; }
.section-head .link {
  font-family:var(--font-display); font-size:.7rem;
  letter-spacing:.24em; color:var(--gold);
  position:relative; padding-bottom:2px; white-space:nowrap;
}
.section-head .link::after {
  content:''; position:absolute; left:0; right:0; bottom:0;
  height:1px; background:var(--gold); transform:scaleX(.3); transform-origin:left;
  transition:transform .35s var(--ease);
}
.section-head .link:hover::after { transform:scaleX(1); }

.section-head-center { text-align:center; margin-bottom:var(--s-7); }
.section-head-center h2 {
  font-family:var(--font-serif); font-weight:300;
  font-size:clamp(2rem, 4vw, 2.8rem);
  margin:var(--s-3) 0 var(--s-4); color:var(--text);
}
.section-head-center h2 em { font-style:italic; color:var(--gold-light); font-weight:400; }
.section-head-center p {
  font-family:var(--font-serif); font-style:italic;
  color:var(--text-mid); font-size:1.1rem;
}

/* Botões */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s-3);
  padding:var(--s-4) var(--s-7);
  font-family:var(--font-display);
  font-size:.72rem; letter-spacing:.28em; text-transform:uppercase;
  font-weight:500;
  background:var(--gold); color:var(--black);
  border:1px solid var(--gold);
  transition:all .35s var(--ease);
  cursor:pointer;
}
.btn:hover {
  background:var(--gold-light); border-color:var(--gold-light);
  transform:translateY(-1px);
  box-shadow:0 8px 24px -8px rgba(201,168,97,.4);
}
.btn-outline { background:transparent; color:var(--gold); border:1px solid var(--gold); }
.btn-outline:hover { background:var(--gold); color:var(--black); }
.btn-block { width:100%; }
/* microinteração: a seta do botão desliza no hover */
.btn svg { transition:transform .3s var(--ease); }
.btn:hover svg { transform:translateX(4px); }

/* Divisor */
.divider-gold {
  display:flex; align-items:center; justify-content:center; gap:var(--s-4);
  margin:var(--s-5) auto;
}
.divider-gold::before, .divider-gold::after {
  content:''; flex:1; max-width:60px; height:1px; background:var(--gold-dim);
}
.divider-gold .dot { width:4px; height:4px; background:var(--gold); border-radius:50%; }
.divider-gold .diamond { width:7px; height:7px; background:var(--gold); transform:rotate(45deg); }

/* ============================================================
   UTILITY BAR
============================================================ */
.utility-bar {
  /* Alternativas (troque só a linha 'background' abaixo):
     · chapado antigo: linear-gradient(90deg, var(--gold-dark), var(--gold) 30%, var(--gold-bright) 50%, var(--gold) 70%, var(--gold-dark))
     · mármore (img):  url('barra-bg.jpg') center/cover, var(--gold) */
  background:linear-gradient(105deg, var(--gold-dim) 0%, var(--gold) 32%, #f6e6bb 50%, var(--gold) 68%, var(--gold-dim) 100%);
  color:#1a1408;
  border-bottom:1px solid var(--gold-dim);
  padding:.5rem 0;
  font-family:var(--font-display);
  font-size:.64rem; letter-spacing:.26em;
  text-transform:uppercase;
  font-weight:700;
  position:relative; z-index:50;
  overflow:hidden; white-space:nowrap;
}
/* Letreiro deslizante (montado pelo app.js: 2 cópias para loop contínuo) */
.utility-bar .marquee-track {
  display:inline-flex; width:max-content; will-change:transform;
  animation:opus-marquee 26s linear infinite;
}
.utility-bar:hover .marquee-track { animation-play-state:paused; }
.utility-bar .marquee-content { display:inline-flex; align-items:center; }
.utility-bar .pipe { color:rgba(26,20,8,.5); margin:0 var(--s-6); }
@keyframes opus-marquee {
  from { transform:translateX(-50%); }  /* move para a DIREITA, em loop */
  to   { transform:translateX(0); }
}

/* ============================================================
   HEADER + MEGA-MENU
============================================================ */
.header {
  position:sticky; top:0; z-index:40;
  background:rgba(10,10,10,.93);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:none;
  isolation:isolate;
  transition:background .35s var(--ease), box-shadow .35s var(--ease);
}
/* ao rolar: header condensa (menos altura + logo menor) e o fundo escurece/ganha sombra */
.header.scrolled { background:rgba(8,8,8,.97); box-shadow:0 8px 30px -14px rgba(0,0,0,.8); }
.header.scrolled .header-inner { padding-top:var(--s-2); padding-bottom:var(--s-2); }
.header.scrolled .brand-logo { height:46px; }
/* brilho dourado bem sutil atrás do logo */
.header::before {
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(70% 220% at 50% 0%, rgba(201,168,97,.08), transparent 70%);
}
/* filete dourado degradê na base (some nas pontas) */
.header::after {
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px; z-index:2;
  background:linear-gradient(90deg, transparent, var(--border-gold) 22%, var(--border-gold) 78%, transparent);
  pointer-events:none;
}
.header .wrap { position:relative; z-index:1; }
.header-inner {
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:var(--s-7);
  padding:var(--s-4) 0;
  transition:padding .35s var(--ease);
}
.brand {
  display:flex; flex-direction:column; align-items:flex-start; line-height:1;
}
.brand .opus {
  font-family:var(--font-serif);
  font-size:1.7rem; font-weight:600;
  letter-spacing:.2em;
  background:linear-gradient(135deg, #f0d490 0%, #c9a861 50%, #8b7340 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.brand .decants {
  font-family:var(--font-display);
  font-size:.58rem; letter-spacing:.5em;
  color:var(--gold-dim); margin-top:4px; padding-left:3px;
}
/* Logo real (imagem) no lugar do texto */
.brand-logo { height:62px; width:auto; display:block; transition:height .35s var(--ease); }
.footer-brand .brand-logo { height:50px; }
.mobile-nav .brand-logo { height:48px; }
@media (max-width:580px){ .brand-logo { height:48px; } }

.nav { display:flex; gap:var(--s-7); justify-content:center; position:relative; }
.nav-item { position:relative; }
.nav-item > a {
  font-family:var(--font-display);
  font-size:.73rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--text); position:relative;
  padding:var(--s-4) 0; display:inline-block;
}
.nav-item > a::after {
  content:''; position:absolute; left:50%; right:50%; bottom:var(--s-3);
  height:1px; background:var(--gold);
  transition:left .3s var(--ease), right .3s var(--ease);
}
.nav-item:hover > a::after { left:0; right:0; }
.nav-item > a.featured { color:var(--gold); }

/* ===== MEGAMENU · painel full-width (gerado por JS, igual em todas as páginas) ===== */
.header .wrap { position:relative; }
.megapanel {
  position:absolute; left:0; right:0; top:calc(100% - 1px);
  background:rgba(7,7,7,.985);
  backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px);
  border:1px solid var(--border-strong);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
  z-index:39; box-shadow:0 36px 70px -24px rgba(0,0,0,.8);
}
.megapanel.open { opacity:1; visibility:visible; transform:none; }
.mp-inner { display:grid; grid-template-columns:1fr 1fr 1.4fr; gap:var(--s-8); padding:var(--s-7) var(--s-7) var(--s-5); }
.mp-col h5 { font-family:var(--font-display); font-size:.62rem; letter-spacing:.28em; text-transform:uppercase; color:var(--gold); margin-bottom:var(--s-4); font-weight:500; }
.mp-col ul { list-style:none; }
.mp-col li { margin-bottom:var(--s-2); }
.mp-col li a { font-family:var(--font-serif); font-size:1.05rem; color:var(--text); display:inline-block; padding:3px 0; transition:color .2s var(--ease), padding-left .25s var(--ease); }
.mp-col li a:hover { color:var(--gold-light); padding-left:6px; }
.mp-feature { display:flex; flex-direction:column; gap:var(--s-3); background:linear-gradient(180deg, var(--black-elev), var(--black-card)); border:1px solid var(--border); padding:var(--s-4); transition:border-color .3s var(--ease); }
.mp-feature:hover { border-color:var(--gold); }
.mp-feature-tag { font-family:var(--font-display); font-size:.55rem; letter-spacing:.28em; text-transform:uppercase; color:var(--gold); }
.mp-feature-img { display:block; height:140px; background:var(--black-deep); border:1px solid var(--border); overflow:hidden; }
.mp-feature-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.mp-feature:hover .mp-feature-img img { transform:scale(1.04); }
.mp-feature-meta { display:flex; flex-direction:column; gap:3px; }
.mp-feature-brand { font-family:var(--font-display); font-size:.55rem; letter-spacing:.22em; text-transform:uppercase; color:var(--text-mid); }
.mp-feature-name { font-family:var(--font-serif); font-size:1.2rem; color:var(--text); line-height:1.1; }
.mp-feature-price { font-family:var(--font-serif); font-size:1.15rem; color:var(--gold-light); }
.mp-feature-price small { color:var(--text-mid); font-size:.7rem; }
.mp-all { grid-column:1 / -1; border-top:1px solid var(--border); margin-top:var(--s-4); padding-top:var(--s-4); }
.mp-all a { font-family:var(--font-display); font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); transition:color .2s var(--ease); }
.mp-all a:hover { color:var(--gold-light); }
.nav-item > a.active { color:var(--gold); }
.nav-item > a.active::after { left:0; right:0; }
@media (max-width:1080px){ .megapanel { display:none; } }

.header-tools { display:flex; gap:var(--s-3); align-items:center; }
.search-box {
  display:flex; align-items:center; gap:var(--s-3);
  background:var(--black-card);
  border:1px solid var(--border);
  border-radius:999px;
  padding:var(--s-2) var(--s-4);
  width:240px;
  transition:all .35s var(--ease);
}
.search-box:focus-within { border-color:var(--gold); width:300px; }
.search-box svg { color:var(--gold); flex-shrink:0; cursor:pointer; }
.mn-search svg { cursor:pointer; }
.search-box input {
  background:none; border:none; outline:none;
  color:var(--text); font-family:var(--font-body);
  font-size:.82rem; width:100%;
}
.search-box input::placeholder { color:var(--text-mid); }
.icon-btn {
  width:42px; height:42px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; position:relative;
  border:1px solid var(--border);
  transition:all .35s var(--ease);
}
.icon-btn:hover { border-color:var(--gold); }
.icon-btn .badge {
  position:absolute; top:-2px; right:-2px;
  background:var(--gold); color:var(--black);
  font-family:var(--font-display); font-size:.6rem; font-weight:600;
  width:18px; height:18px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
}
.icon-btn svg { width:18px; height:18px; stroke:var(--gold); fill:none; stroke-width:1.6; }
/* ícone de conta logada: borda dourada + ponto indicador */
.icon-btn.acct-btn.on { border-color:var(--gold-dim); }
.icon-btn.acct-btn.on::after { content:''; position:absolute; top:-1px; right:-1px; width:9px; height:9px; border-radius:50%; background:var(--gold-light); border:2px solid var(--black); }
.hamburger { display:none; }

/* ============================================================
   MOBILE NAV DRAWER
============================================================ */
.mobile-nav-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.6);
  opacity:0; visibility:hidden; transition:all .35s var(--ease); z-index:60;
}
.mobile-nav-overlay.open { opacity:1; visibility:visible; }
.mobile-nav {
  position:fixed; top:0; left:0; bottom:0;
  width:min(360px, 88vw);
  background:var(--black-deep);
  border-right:1px solid var(--border-strong);
  transform:translateX(-100%);
  transition:transform .4s var(--ease);
  z-index:61;
  display:flex; flex-direction:column; padding:var(--s-6);
  overflow-y:auto;
}
.mobile-nav.open { transform:translateX(0); }
.mobile-nav .mn-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--s-6); }
.mobile-nav .mn-search {
  display:flex; align-items:center; gap:var(--s-3);
  background:var(--black-card); border:1px solid var(--border);
  border-radius:999px; padding:var(--s-3) var(--s-4); margin-bottom:var(--s-6);
}
.mobile-nav .mn-search input { background:none; border:none; outline:none; color:var(--text); width:100%; font-size:.85rem; }
.mobile-nav .mn-search svg { stroke:var(--gold); }
.mobile-nav a.mn-link {
  font-family:var(--font-display); font-size:.85rem; letter-spacing:.2em; text-transform:uppercase;
  padding:var(--s-4) 0; border-bottom:1px solid var(--border); display:block;
}
.mobile-nav a.mn-link.featured { color:var(--gold); }
.mobile-nav .mn-foot { margin-top:auto; padding-top:var(--s-6); color:var(--text-mid); font-size:.8rem; }

/* ============================================================
   PRODUCT IMAGE FRAME (slots p/ fotos reais)
============================================================ */
/* Fotos de produto são quadradas com fundo escuro próprio → full-bleed */
.pimg {
  position:relative;
  background:radial-gradient(ellipse at 50% 32%, rgba(201,168,97,.10) 0%, transparent 70%), var(--black-deep);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.pimg img {
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  transition:transform .7s var(--ease);
}

/* ============================================================
   PRODUCT CARD — padrão 2026 (cantos suaves, sombra, rating)
============================================================ */
.product-grid {
  display:grid; grid-template-columns:repeat(4, 1fr); gap:1.4rem;
}
.product-card {
  position:relative;
  background:linear-gradient(180deg, var(--black-card), var(--black-soft));
  border:1px solid var(--border);
  border-radius:18px;
  transition:transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
  overflow:hidden;
  display:flex; flex-direction:column;
}
.product-card:hover {
  border-color:var(--border-strong); transform:translateY(-5px); box-shadow:0 28px 54px -26px rgba(0,0,0,.9);
}
.product-card .imagewrap { aspect-ratio:1 / 1; display:block; }
.product-card:hover .pimg img { transform:scale(1.06); }
.product-card .badge-exclusivo {
  position:absolute; top:.85rem; left:.85rem;
  background:linear-gradient(135deg, var(--gold-light), var(--gold));
  color:#1a1408;
  font-family:var(--font-display); font-size:.54rem; font-weight:700;
  letter-spacing:.22em; padding:.42em .72em; border-radius:8px; z-index:3;
  box-shadow:0 6px 16px -4px rgba(201,168,97,.45);
}
.product-card .badge-new {
  position:absolute; top:.85rem; left:.85rem;
  background:rgba(10,10,10,.55); color:var(--gold-light);
  border:1px solid var(--gold-light); backdrop-filter:blur(6px);
  font-family:var(--font-display); font-size:.54rem;
  letter-spacing:.22em; padding:.38em .7em; border-radius:8px; z-index:3;
}
.product-card .wishlist {
  position:absolute; top:.85rem; right:.85rem;
  width:38px; height:38px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--border-strong);
  background:rgba(10,10,10,.5);
  border-radius:50%;
  backdrop-filter:blur(6px); z-index:3;
  cursor:pointer;
  opacity:0; transform:translateY(-6px) scale(.85);
  transition:opacity .35s var(--ease), transform .35s var(--ease), border-color .3s, background .3s, box-shadow .3s;
}
.product-card:hover .wishlist { opacity:1; transform:none; }
.product-card .wishlist:hover { border-color:var(--gold); background:rgba(201,168,97,.16); transform:scale(1.12); box-shadow:0 4px 16px rgba(201,168,97,.25); }
.product-card .wishlist:active { transform:scale(.92); }
/* Mantém visível quando favoritado e em telas de toque (sem hover) */
.product-card .wishlist.on { opacity:1; transform:none; border-color:var(--gold); background:rgba(201,168,97,.18); box-shadow:0 0 0 1px rgba(201,168,97,.35), 0 4px 18px rgba(201,168,97,.22); }
@media (hover:none) { .product-card .wishlist { opacity:1; transform:none; } }
.product-card .wishlist svg { width:17px; height:17px; stroke:var(--gold); fill:none; stroke-width:1.6; transition:fill .25s var(--ease), stroke .25s; }
.product-card .wishlist.on svg { fill:var(--gold-light); stroke:var(--gold-light); animation:heart-pop .42s var(--ease); }
@keyframes heart-pop {
  0%{ transform:scale(1); } 30%{ transform:scale(1.4); } 55%{ transform:scale(.88); } 80%{ transform:scale(1.08); } 100%{ transform:scale(1); }
}

.product-card .product-info {
  padding:1.05rem 1.1rem 1.2rem;
  display:flex; flex-direction:column; flex:1;
}
.product-card .pmeta { display:flex; justify-content:space-between; align-items:center; gap:.5rem; margin-bottom:.45rem; }
.product-card .pbrand {
  font-family:var(--font-display); font-size:.58rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--gold);
}
.product-card .pname {
  font-family:var(--font-serif); font-size:1.18rem; font-weight:400;
  color:var(--text); margin-bottom:.75rem; line-height:1.18;
}
.product-card .pname a:hover { color:var(--gold-light); }
.sillage-dots { display:inline-flex; gap:3px; }
.sillage-dots span { width:5px; height:5px; border-radius:50%; background:var(--text-dim); }
.sillage-dots span.on { background:var(--gold); }
.size-pills { display:flex; gap:.4rem; margin-bottom:.9rem; flex-wrap:wrap; }
.size-pills span {
  font-family:var(--font-display); font-size:.62rem; font-weight:600;
  padding:.42em .72em; border:1px solid var(--border); border-radius:8px;
  color:var(--text-mid); letter-spacing:.05em;
  transition:all .2s var(--ease); cursor:pointer;
}
.size-pills span:hover { border-color:var(--gold-dim); color:var(--text); }
.size-pills span.active { background:var(--gold); color:#1a1408; border-color:var(--gold); }
.product-card .price-row {
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--s-3); margin-top:auto; padding-top:.9rem; border-top:1px solid var(--border);
}
.price { font-family:var(--font-serif); font-size:1.42rem; font-weight:500; color:var(--text); line-height:1; }
.price-ml { font-family:var(--font-body); font-size:.72rem; font-weight:400 !important; color:var(--text-mid); text-align:right; }
.price-ml .borr { color:var(--gold-light); display:block; margin-top:2px; }
.product-card .add-btn {
  margin-top:.9rem; width:100%; padding:.85rem;
  font-family:var(--font-display); font-size:.64rem; letter-spacing:.22em;
  border:1px solid var(--gold); border-radius:11px; color:var(--gold); background:transparent;
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  transition:all .3s var(--ease); cursor:pointer;
}
.product-card .add-btn:hover, .product-card:hover .add-btn {
  background:linear-gradient(105deg, var(--gold-bright), var(--gold)); color:#1a1408; border-color:var(--gold);
  box-shadow:0 12px 26px -12px rgba(201,168,97,.55);
}
.low-stock { margin-top:.7rem; font-family:var(--font-body); font-size:.7rem; font-weight:500; letter-spacing:.03em; color:var(--gold-light); display:inline-flex; align-items:center; gap:7px; }
.low-stock::before { content:''; width:5px; height:5px; border-radius:50%; background:var(--gold-light); flex:none; box-shadow:0 0 0 3px rgba(201,168,97,.16); }

/* ---------- Esgotado (estoque real via inventory) — visual 2026 ---------- */
.product-card.is-soldout .imagewrap img { filter:grayscale(.7) brightness(.6); opacity:.7; transition:filter .4s var(--ease), opacity .4s var(--ease); }
.product-card.is-soldout .imagewrap::after {
  content:'Esgotado'; position:absolute; top:14px; left:14px; z-index:3; pointer-events:none;
  font-family:var(--font-display); font-size:.56rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:#fff;
  padding:.5em .9em; border-radius:999px; background:rgba(16,16,18,.58);
  backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
  border:1px solid rgba(255,255,255,.16); box-shadow:0 8px 22px -8px rgba(0,0,0,.6);
}
.size-pills span.pill-off { color:var(--text-dim); opacity:.5; text-decoration:line-through; cursor:not-allowed; background:transparent; }
.size-pills span.pill-off:hover { border-color:var(--border); color:var(--text-dim); }
.product-card .add-btn.btn-soldout, .product-card:hover .add-btn.btn-soldout {
  border-color:var(--border); color:var(--text-dim); background:transparent;
  cursor:not-allowed; box-shadow:none; letter-spacing:.18em;
}
/* quick view */
.qv-sizes button.qv-off { opacity:.42; text-decoration:line-through; cursor:not-allowed; }
.qv-soldout {
  display:inline-flex; align-items:center; gap:7px; margin-bottom:var(--s-3);
  font-family:var(--font-display); font-size:.6rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:#fff;
  padding:.45em .9em; border-radius:999px; background:rgba(16,16,18,.55);
  border:1px solid rgba(255,255,255,.15); backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
}
.btn.btn-soldout, .btn.btn-soldout:hover { background:var(--black-elev) !important; color:var(--text-dim) !important; border-color:var(--border) !important; cursor:not-allowed; box-shadow:none !important; transform:none !important; }

/* ============================================================
   FOOTER
============================================================ */
.footer { background:var(--black-deep); padding:var(--s-9) 0 var(--s-6); }
.footer-grid {
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr 1.2fr;
  gap:var(--s-7); padding-bottom:var(--s-7); border-bottom:1px solid var(--border);
}
.footer-brand .opus { font-size:1.4rem; }
.footer-brand .decants { font-size:.5rem; }
.footer-brand .tagline {
  font-family:var(--font-serif); font-style:italic;
  color:var(--text-mid); margin-top:var(--s-4); max-width:300px; font-size:1.05rem; line-height:1.6;
}
.footer h4 {
  font-family:var(--font-display); font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold); margin-bottom:var(--s-5); font-weight:500;
}
.footer ul { list-style:none; }
.footer ul li { margin-bottom:var(--s-4); }
.footer ul a {
  font-family:var(--font-body); font-size:.92rem;
  color:rgba(236,228,211,.82); font-weight:400; transition:color .2s var(--ease);
}
.footer ul a:hover { color:var(--gold-light); }
.contact-line { font-family:var(--font-body); font-size:.95rem; font-weight:400; color:var(--text); margin-bottom:var(--s-5); line-height:1.4; }
.contact-line span { display:block; color:var(--gold); font-size:.6rem; margin-bottom:5px; letter-spacing:.22em; text-transform:uppercase; }
.contact-line small { display:block; color:var(--text-mid); font-size:.78rem; margin-top:3px; }
.contact-line a { color:inherit; transition:color .2s var(--ease); }
.contact-line a:hover { color:var(--gold-light); }
.social-row { display:flex; gap:var(--s-3); margin-top:var(--s-5); }
.social-row a {
  width:42px; height:42px; border-radius:50%; border:1px solid var(--border-strong);
  display:inline-flex; align-items:center; justify-content:center;
  transition:border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.social-row a:hover { border-color:var(--gold); background:rgba(201,168,97,.1); transform:translateY(-2px); }
.social-row svg { width:18px; height:18px; stroke:var(--gold-light); fill:none; stroke-width:1.5; }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; padding-top:var(--s-6); flex-wrap:wrap; gap:var(--s-4); }
.payment-row { display:flex; gap:7px; align-items:center; flex-wrap:wrap; }
/* Bandeiras de pagamento: tiles claros com o logo de cada marca. */
.payment-row .pay {
  display:inline-flex; align-items:center; justify-content:center; line-height:0;
  width:44px; height:28px; padding:0; border-radius:5px; overflow:hidden;
  background:#f3efe6; border:1px solid rgba(0,0,0,.12);
}
.payment-row .pay svg { width:100%; height:100%; display:block; }
/* Selos de segurança continuam como chip de texto vazado (não são bandeira). */
.payment-row .pay.seal {
  width:auto; height:auto; line-height:1; overflow:visible;
  padding:6px 10px; border-radius:8px;
  background:transparent; border:1px solid var(--border-strong); color:var(--text);
  font-family:var(--font-body); font-weight:500; font-size:.64rem; letter-spacing:.04em; gap:.4em;
}
.payment-row .pay.seal svg { width:12px; height:12px; display:inline-block; stroke:var(--green); fill:none; stroke-width:1.8; }
.footer-legal { font-family:var(--font-body); font-size:.78rem; color:var(--text-mid); letter-spacing:.02em; }

/* ============================================================
   CART DRAWER
============================================================ */
.cart-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.65);
  backdrop-filter:blur(3px); opacity:0; visibility:hidden;
  transition:all .35s var(--ease); z-index:100;
}
.cart-overlay.open { opacity:1; visibility:visible; }
.cart-drawer {
  position:fixed; top:0; right:0; bottom:0;
  width:min(440px, 92vw);
  background:var(--black); border-left:1px solid var(--border-strong);
  transform:translateX(100%); transition:transform .45s var(--ease);
  z-index:101; display:flex; flex-direction:column;
}
.cart-drawer.open { transform:translateX(0); }
.cart-head {
  display:flex; justify-content:space-between; align-items:center;
  padding:var(--s-5); border-bottom:1px solid var(--border);
}
.cart-head h3 { font-family:var(--font-display); font-size:.85rem; letter-spacing:.28em; color:var(--text); font-weight:500; }
.cart-close { width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--border); color:var(--text); }
.frete-progress { padding:var(--s-4) var(--s-5); background:var(--black-card); border-bottom:1px solid var(--border); }
.frete-progress .label { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:var(--s-3); }
.frete-progress .label span:first-child { font-family:var(--font-body); font-size:.8rem; font-weight:400; color:var(--text); }
.frete-progress .label span:last-child { font-family:var(--font-display); font-size:.65rem; letter-spacing:.2em; color:var(--gold); }
.bar { height:3px; background:var(--black); border:1px solid var(--border); overflow:hidden; }
.bar > i { display:block; height:100%; width:38%; background:linear-gradient(90deg, var(--gold-dim), var(--gold), var(--gold-light)); transition:width .8s var(--ease); }
.cart-body { flex:1; overflow-y:auto; padding:var(--s-5); }
.cart-empty { text-align:center; color:var(--text-mid); font-family:var(--font-serif); font-style:italic; padding:var(--s-8) 0; }
.cart-item { display:grid; grid-template-columns:80px 1fr auto; gap:var(--s-4); padding:var(--s-4) 0; border-bottom:1px solid var(--border); }
.cart-item-img { background:var(--black-deep); border:1px solid var(--border); aspect-ratio:1; overflow:hidden; }
.cart-item-img img { width:100%; height:100%; object-fit:cover; }
.cart-item-info .brand { font-family:var(--font-display); font-size:.6rem; letter-spacing:.22em; color:var(--gold); text-transform:uppercase; margin-bottom:4px; }
.cart-item-info .name { font-family:var(--font-serif); font-weight:500; font-size:1.1rem; color:var(--text); margin-bottom:6px; line-height:1.2; }
.cart-item-info .size { font-family:var(--font-body); font-size:.74rem; font-weight:400; color:var(--text-mid); margin-bottom:var(--s-2); }
.cart-item-info .price-line { display:flex; gap:var(--s-3); align-items:center; }
.cart-qty { display:inline-flex; align-items:center; border:1px solid var(--border); }
.cart-qty button { width:24px; height:24px; color:var(--text); }
.cart-qty span { padding:0 var(--s-2); font-family:var(--font-body); font-size:.78rem; min-width:28px; text-align:center; }
.cart-item-info .item-price { font-family:var(--font-serif); font-size:1rem; color:var(--text); }
.cart-item-remove { font-family:var(--font-display); font-size:.55rem; letter-spacing:.22em; color:var(--text-mid); align-self:start; border-bottom:1px solid transparent; }
.cart-item-remove:hover { color:var(--gold); border-color:var(--gold); }
.cart-crosssell { padding:var(--s-5); border-top:1px solid var(--border); }
.cart-crosssell h4 { font-family:var(--font-display); font-size:.62rem; letter-spacing:.28em; color:var(--gold); margin-bottom:var(--s-3); }
.cross-item { display:grid; grid-template-columns:48px 1fr auto; gap:var(--s-3); align-items:center; padding:var(--s-3) 0; }
.cross-item .ti { background:var(--black-deep); border:1px solid var(--border); aspect-ratio:1; overflow:hidden; }
.cross-item .ti img { width:100%; height:100%; object-fit:cover; }
.cross-item .cn { font-family:var(--font-serif); font-size:.92rem; color:var(--text); }
.cross-item .cp { font-family:var(--font-body); font-size:.7rem; color:var(--text-mid); }
.cross-add { font-family:var(--font-display); font-size:.6rem; letter-spacing:.2em; border:1px solid var(--gold); padding:6px 10px; color:var(--gold); }
.cross-add:hover { background:var(--gold); color:var(--black); }
.cart-foot { padding:var(--s-5); border-top:1px solid var(--border); background:var(--black-soft); }
.cart-total { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:var(--s-4); }
.cart-total .ts { font-family:var(--font-display); font-size:.7rem; letter-spacing:.22em; color:var(--text-mid); }
.cart-total .tp { font-family:var(--font-serif); font-size:1.5rem; color:var(--text); }
.cart-kit { display:flex; justify-content:space-between; align-items:baseline; font-family:var(--font-body); font-size:.78rem; font-weight:600; color:var(--gold-light); margin-bottom:var(--s-3); }
.cart-pix { font-family:var(--font-body); font-size:.75rem; color:var(--gold-light); text-align:right; margin-bottom:var(--s-4); }
.cart-actions { display:flex; gap:var(--s-3); }
.btn-cart-secondary { flex:1; padding:var(--s-4); border:1px solid var(--border); color:var(--text); font-family:var(--font-display); font-size:.62rem; letter-spacing:.24em; }
.btn-cart-secondary:hover { border-color:var(--gold); color:var(--gold); }
.btn-cart-primary { flex:1.4; padding:var(--s-4); background:var(--gold); color:var(--black); font-family:var(--font-display); font-size:.68rem; letter-spacing:.24em; }
.btn-cart-primary:hover { background:var(--gold-light); }

/* ============================================================
   WHATSAPP FLOAT
============================================================ */
.wa-float {
  position:fixed; bottom:24px; right:24px; z-index:90;
  width:56px; height:56px; border-radius:50%;
  background:linear-gradient(135deg, #25d366, #128c4a);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 30px -6px rgba(18,140,74,.6);
  transition:transform .3s var(--ease);
}
.wa-float:hover { transform:scale(1.08); }
.wa-float svg { width:28px; height:28px; fill:#fff; }

/* BOTÃO VOLTAR AO TOPO (injetado via app.js; aparece após rolar) */
.to-top {
  position:fixed; right:24px; bottom:90px; z-index:89;
  width:46px; height:46px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(10,10,10,.7); border:1px solid var(--gold);
  color:var(--gold-light); cursor:pointer;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  box-shadow:0 8px 24px -8px rgba(0,0,0,.7);
  opacity:0; visibility:hidden; transform:translateY(12px) scale(.9);
  transition:opacity .35s var(--ease), transform .35s var(--ease), visibility .35s, background .25s, border-color .25s;
}
.to-top.show { opacity:1; visibility:visible; transform:none; }
.to-top:hover { background:var(--gold); color:#1a1408; transform:translateY(-2px); }
.to-top svg { width:20px; height:20px; }
@media (max-width:580px){ .to-top { width:42px; height:42px; bottom:84px; right:18px; } }

/* ============================================================
   BREADCRUMB
============================================================ */
.breadcrumb { padding:var(--s-5) 0 0; }
.breadcrumb ol { list-style:none; display:flex; flex-wrap:wrap; gap:var(--s-3); align-items:center; font-family:var(--font-body); font-size:.76rem; font-weight:400; color:var(--text-mid); letter-spacing:.04em; }
.breadcrumb a:hover { color:var(--gold); }
.breadcrumb .sep { color:var(--gold-dim); }
.breadcrumb [aria-current] { color:var(--text); }

/* ============================================================
   CHECKOUT (carrinho.html)
============================================================ */
.checkout-wrap { padding:var(--s-6) 0 var(--s-9); }
.checkout-grid { display:grid; grid-template-columns:1.55fr 1fr; gap:3rem; align-items:start; }
.co-h1 { font-family:var(--font-serif); font-size:clamp(1.9rem,3.6vw,2.6rem); color:var(--text); margin-bottom:.4rem; }
.co-h1 em { font-style:italic; color:var(--gold-light); }
.co-sub { color:var(--text-mid); font-weight:400 !important; font-size:.95rem; margin-bottom:2rem; }

/* itens em cards */
.co-list { display:flex; flex-direction:column; gap:.9rem; }
.co-row { display:grid; grid-template-columns:84px 1fr auto; gap:1.2rem; align-items:center; padding:1.3rem; border:1px solid var(--border); border-radius:14px; background:linear-gradient(180deg, var(--black-card), var(--black-soft)); transition:border-color .3s var(--ease); }
.co-row:hover { border-color:var(--border-strong); }
.co-img { width:84px; height:84px; aspect-ratio:1; background:var(--black-deep); border:1px solid var(--border); border-radius:11px; overflow:hidden; display:block; }
.co-img img { width:100%; height:100%; object-fit:cover; }
.co-brand { font-family:var(--font-display); font-size:.56rem; letter-spacing:.22em; color:var(--gold); text-transform:uppercase; margin-bottom:4px; }
.co-name { font-family:var(--font-serif); font-size:1.1rem; color:var(--text); display:block; margin-bottom:6px; }
.co-name:hover { color:var(--gold-light); }
.co-size { font-size:.78rem; font-weight:400 !important; color:var(--text-mid); }
.co-foot { display:flex; align-items:center; gap:1rem; margin-top:.7rem; }
.co-qty { display:inline-flex; align-items:center; border:1px solid var(--border-strong); border-radius:9px; overflow:hidden; }
.co-qty button { width:34px; height:34px; color:var(--text); font-size:1.05rem; }
.co-qty span { min-width:32px; text-align:center; font-size:.85rem; }
.co-rprice { text-align:right; }
.co-rprice .v { font-family:var(--font-serif); font-size:1.12rem; color:var(--text); display:block; }
.co-rprice .u { display:block; font-size:.7rem; color:var(--text-dim); font-weight:400 !important; margin-top:2px; }
.co-remove { font-family:var(--font-display); font-size:.56rem; letter-spacing:.2em; color:var(--text-dim); border-bottom:1px solid transparent; }
.co-remove:hover { color:var(--gold); border-color:var(--gold); }
.co-continue { display:inline-flex; align-items:center; gap:.5rem; margin-top:1.2rem; font-family:var(--font-display); font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); }
.co-empty { text-align:center; padding:var(--s-9) 0; }
.co-empty p { font-family:var(--font-serif); font-style:italic; font-size:1.2rem; color:var(--text-mid); margin-bottom:var(--s-5); }

/* resumo */
.co-summary { background:var(--black-card); border:1px solid var(--border-strong); border-radius:18px; padding:1.8rem; position:sticky; top:24px; box-shadow:0 24px 60px -30px rgba(0,0,0,.8); }
.co-summary h3 { font-family:var(--font-display); font-size:.7rem; letter-spacing:.24em; color:var(--gold); margin-bottom:1.2rem; }
.co-line { display:flex; justify-content:space-between; align-items:center; padding:.6rem 0; font-size:.92rem; color:var(--text-mid); border-bottom:1px dashed var(--border); }
.co-line b { color:var(--text); }
.co-line.total { border-bottom:none; border-top:1px solid var(--border-strong); padding-top:1rem; margin-top:.4rem; align-items:flex-end; }
.co-line.total span { font-family:var(--font-display); font-size:.78rem; letter-spacing:.16em; color:var(--text); }
.co-line.total b { font-family:var(--font-serif); font-size:1.7rem; color:var(--text); }
.co-parcel { text-align:right; font-size:.74rem; color:var(--text-mid); font-weight:400 !important; margin:.15rem 0 .2rem; }

/* barra de frete grátis */
.ship-bar { background:rgba(201,168,97,.07); border:1px solid var(--border); border-radius:12px; padding:.95rem 1.05rem; margin-bottom:1.4rem; }
.ship-bar .st { font-size:.82rem; color:var(--text); font-weight:400 !important; margin-bottom:.6rem; line-height:1.4; }
.ship-bar .st b { color:var(--gold-light); }
.ship-track { height:7px; background:rgba(255,255,255,.07); border-radius:99px; overflow:hidden; }
.ship-fill { height:100%; background:linear-gradient(90deg, var(--gold-dim), var(--gold-light)); border-radius:99px; transition:width .6s var(--ease); }

/* cupom */
.co-coupon { display:flex; gap:.5rem; margin:1.2rem 0; }
.co-coupon input { flex:1; background:var(--black); border:1px solid var(--border); color:var(--text); padding:.75rem .9rem; font-size:.82rem; border-radius:9px; }
.co-coupon input:focus { outline:none; border-color:var(--gold); }
.co-coupon button { padding:0 1.1rem; border:1px solid var(--gold); color:var(--gold); font-family:var(--font-display); font-size:.58rem; letter-spacing:.16em; border-radius:9px; }
.co-coupon button:hover { background:var(--gold); color:var(--black); }

/* CEP / cotação de frete */
.co-cep { display:flex; gap:.5rem; margin:.6rem 0 .2rem; }
.co-cep input { flex:1; background:var(--black); border:1px solid var(--border); color:var(--text); padding:.7rem .9rem; font-size:.82rem; border-radius:9px; letter-spacing:.04em; }
.co-cep input:focus { outline:none; border-color:var(--gold); }
.co-cep button { padding:0 1rem; border:1px solid var(--gold); color:var(--gold); font-family:var(--font-display); font-size:.56rem; letter-spacing:.16em; border-radius:9px; white-space:nowrap; }
.co-cep button:hover { background:var(--gold); color:var(--black); }
.frete-msg { font-size:.76rem; color:var(--text-mid); font-weight:400 !important; }
.frete-msg:not(:empty) { margin:.2rem 0 .4rem; }
.frete-options { display:flex; flex-direction:column; gap:.45rem; }
.frete-options:not(:empty) { margin:.5rem 0 .2rem; }
.frete-opt { display:flex; align-items:center; gap:.6rem; padding:.7rem .85rem; border:1px solid var(--border); border-radius:10px; cursor:pointer; transition:border-color .25s var(--ease), background .25s; }
.frete-opt:hover { border-color:var(--border-strong); }
.frete-opt input { accent-color:var(--gold); flex-shrink:0; }
.frete-opt:has(input:checked) { border-color:var(--gold); background:rgba(201,168,97,.06); }
.frete-opt .fo-name { font-size:.82rem; color:var(--text); font-weight:400 !important; }
.frete-opt .fo-price { margin-left:auto; font-family:var(--font-serif); font-size:.95rem; color:var(--gold-light); white-space:nowrap; }

/* bloco de pagamento */
.pay-block { margin-top:1.5rem; }
.pay-label { font-family:var(--font-display); font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--text-mid); margin-bottom:.85rem; }
.pay-btn { width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.05rem 1.25rem; border-radius:13px; cursor:pointer; text-align:left; border:1px solid transparent; transition:transform .12s var(--ease), box-shadow .3s var(--ease), border-color .3s; }
.pay-btn + .pay-btn { margin-top:.75rem; }
.pay-btn:active { transform:scale(.985); }
.pay-btn:disabled { opacity:.6; cursor:default; }
.pay-btn .pm { display:flex; align-items:center; gap:.65rem; font-family:var(--font-display); font-size:.92rem; letter-spacing:.02em; text-transform:uppercase; }
.pay-btn .pm svg { width:21px; height:21px; flex-shrink:0; }
.pay-btn .pv { text-align:right; line-height:1.1; }
.pay-btn .pv .b { font-family:var(--font-serif); font-size:1.18rem; display:block; }
.pay-btn .pv .s { font-size:.68rem; font-weight:400 !important; opacity:.85; }
.pay-pix { background:linear-gradient(105deg, var(--gold-bright), var(--gold)); color:#1a1408; box-shadow:0 12px 30px -12px rgba(201,168,97,.6); }
.pay-pix:hover { box-shadow:0 16px 38px -12px rgba(201,168,97,.78); transform:translateY(-1px); }
.pay-pix .pm svg { stroke:#1a1408; }
.pix-off { background:#1a1408; color:var(--gold-bright); font-size:.6rem; padding:.22em .55em; border-radius:6px; letter-spacing:.06em; margin-left:.45rem; }
.pay-card { background:var(--black-elev); border:1px solid var(--border-strong); color:var(--text); }
.pay-card:hover { border-color:var(--gold); transform:translateY(-1px); }
.pay-card .pm svg { stroke:var(--gold-light); }

/* selos + segurança */
.pay-methods { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:1rem; justify-content:center; }
.pm-chip { font-family:var(--font-display); font-size:.58rem; letter-spacing:.08em; color:var(--text-mid); border:1px solid var(--border); border-radius:6px; padding:.35em .6em; }
.pay-secure { display:flex; align-items:center; justify-content:center; gap:.45rem; margin-top:.9rem; font-size:.74rem; color:var(--text-mid); font-weight:400 !important; text-align:center; }
.pay-secure svg { width:14px; height:14px; stroke:var(--green); fill:none; stroke-width:1.6; flex-shrink:0; }
.pay-secure b { color:var(--gold-light); }
.pay-wa { text-align:center; margin-top:.7rem; font-size:.73rem; color:var(--text-dim); font-weight:400 !important; }
.pay-wa a { color:var(--gold); }

.co-trust { display:flex; flex-direction:column; gap:.7rem; margin-top:1.4rem; padding-top:1.4rem; border-top:1px solid var(--border); }
.co-trust div { display:flex; align-items:center; gap:var(--s-3); font-size:.78rem; font-weight:400 !important; color:var(--text-mid); }
.co-trust svg { width:16px; height:16px; stroke:var(--gold); fill:none; stroke-width:1.5; flex-shrink:0; }

/* barra fixa mobile */
.mbar { display:none; }
@media (max-width:1080px) {
  .checkout-grid { grid-template-columns:1fr; gap:1.5rem; }
  .co-summary { position:static; }
}
@media (max-width:580px) {
  .co-row { grid-template-columns:64px 1fr; }
  .co-img { width:64px; height:64px; }
  .co-rprice { grid-column:2; text-align:left; margin-top:.2rem; }
  .mbar { display:flex; position:fixed; left:0; right:0; bottom:0; z-index:50; align-items:center; gap:1rem; padding:.8rem 1.1rem calc(.8rem + env(safe-area-inset-bottom)); background:rgba(12,12,12,.94); backdrop-filter:blur(10px); border-top:1px solid var(--border-strong); }
  .mbar .mt { font-size:.7rem; color:var(--text-mid); font-weight:400 !important; }
  .mbar .mt b { display:block; font-family:var(--font-serif); font-size:1.25rem; color:var(--text); }
  .mbar .pay-btn { width:auto; flex:1; padding:.95rem 1rem; }
  .checkout-wrap { padding-bottom:6rem; }
}

/* ============================================================
   ANIMAÇÕES DE SCROLL
============================================================ */
.fade-up { opacity:0; transform:translateY(22px); transition:opacity .55s var(--ease), transform .55s var(--ease); }
.fade-up.in { opacity:1; transform:none; }

/* ============================================================
   RESPONSIVE (compartilhado)
============================================================ */
@media (max-width:1080px) {
  .nav { display:none; }
  .search-box { display:none; }
  .hamburger { display:inline-flex; }
  .header-inner { grid-template-columns:auto 1fr auto; gap:var(--s-4); }
  .brand { margin:0 auto; }
  .product-grid { grid-template-columns:1fr 1fr; }
  .footer-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:580px) {
  .utility-bar { font-size:.58rem; letter-spacing:.16em; }
  .utility-bar .pipe { margin:0 var(--s-5); }
  .product-grid { grid-template-columns:1fr 1fr; gap:var(--s-3); }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .wrap, .wrap-narrow { padding:0 var(--s-4); }
}

/* ============================================================
   BUSCA AO VIVO (sugestões sob o campo de busca)
============================================================ */
.search-box { position:relative; }
.search-sug {
  position:absolute; top:calc(100% + 10px); right:0;
  width:min(380px, 92vw); max-height:62vh; overflow-y:auto;
  background:var(--black-elev); border:1px solid var(--border-strong);
  border-radius:var(--r-md);
  box-shadow:0 30px 60px -18px rgba(0,0,0,.85);
  z-index:65; padding:var(--s-2);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:all .25s var(--ease);
}
.search-sug.open { opacity:1; visibility:visible; transform:none; }
.search-sug.inline {
  position:static; width:100%; transform:none; box-shadow:none;
  margin:calc(var(--s-6) * -1 + var(--s-2)) 0 var(--s-5);
  display:none;
}
.search-sug.inline.open { display:block; }
.search-sug .ss-item {
  display:flex; align-items:center; gap:var(--s-3);
  padding:var(--s-2) var(--s-3); cursor:pointer;
  border:1px solid transparent; transition:all .2s var(--ease);
}
.search-sug .ss-item:hover, .search-sug .ss-item.sel { background:var(--black-card); border-color:var(--gold-dim); }
.search-sug .ss-img { width:46px; height:46px; flex-shrink:0; background:var(--black-deep); border:1px solid var(--border); overflow:hidden; }
.search-sug .ss-img img { width:100%; height:100%; object-fit:cover; }
.search-sug .ss-meta { min-width:0; flex:1; }
.search-sug .ss-brand { font-family:var(--font-display); font-size:.56rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); }
.search-sug .ss-name { font-size:.86rem; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.search-sug .ss-price { font-family:var(--font-serif); font-size:.85rem; color:var(--gold-light); white-space:nowrap; }
.search-sug .ss-price small { color:var(--text-mid); font-size:.68rem; }
.search-sug .ss-all {
  display:block; width:100%; background:none; border:none; text-align:center; padding:var(--s-3);
  font-family:var(--font-display); font-size:.62rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold); border-top:1px solid var(--border); margin-top:var(--s-2); cursor:pointer;
}
.search-sug .ss-all:hover { color:var(--gold-light); }
.search-sug .ss-none { padding:var(--s-4); text-align:center; color:var(--text-mid); font-size:.82rem; font-weight:400; }

/* ============================================================
   QUICK VIEW (espiar produto sem sair da página)
============================================================ */
.qv-btn {
  position:absolute; left:50%; bottom:12px; transform:translate(-50%, 8px);
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.55rem 1.1rem; border-radius:999px;
  background:rgba(10,10,10,.78); border:1px solid var(--gold);
  color:var(--gold-light); font-family:var(--font-display);
  font-size:.6rem; letter-spacing:.22em; text-transform:uppercase;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:0; visibility:hidden; transition:all .3s var(--ease);
  cursor:pointer; z-index:3; white-space:nowrap;
}
.qv-btn svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:1.6; }
.qv-btn:hover { background:var(--gold); color:var(--black); }
@media (hover:hover) {
  .product-card:hover .qv-btn, .qv-btn:focus-visible { opacity:1; visibility:visible; transform:translate(-50%, 0); }
}
.qv-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.72);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  z-index:80; opacity:0; visibility:hidden; transition:all .3s var(--ease);
  display:flex; align-items:center; justify-content:center; padding:var(--s-4);
}
.qv-overlay.open { opacity:1; visibility:visible; }
.qv-modal {
  width:min(760px, 100%); max-height:90vh; overflow-y:auto;
  background:var(--black-soft); border:1px solid var(--border-strong);
  border-radius:var(--r-lg);
  display:grid; grid-template-columns:300px 1fr; position:relative;
  transform:translateY(14px) scale(.98); transition:transform .3s var(--ease);
}
.qv-overlay.open .qv-modal { transform:none; }
.qv-close {
  position:absolute; top:10px; right:10px; z-index:2;
  width:36px; height:36px; border-radius:50%;
  background:rgba(10,10,10,.6); border:1px solid var(--border);
  color:var(--text-mid); cursor:pointer; font-size:1rem;
  display:flex; align-items:center; justify-content:center;
  transition:all .2s var(--ease);
}
.qv-close:hover { border-color:var(--gold); color:var(--gold-light); }
.qv-pic { background:var(--black-deep); border-right:1px solid var(--border); align-self:stretch; border-radius:var(--r-lg) 0 0 var(--r-lg); overflow:hidden; }
.qv-pic img { width:100%; height:100%; object-fit:cover; display:block; min-height:300px; }
.qv-info { padding:var(--s-6); }
.qv-info .qv-brand { font-family:var(--font-display); font-size:.6rem; letter-spacing:.26em; text-transform:uppercase; color:var(--gold); margin-bottom:var(--s-2); }
.qv-info h3 { font-family:var(--font-serif); font-size:1.6rem; font-weight:500; color:var(--text); margin-bottom:var(--s-2); }
.qv-rate { display:flex; align-items:center; gap:.5rem; font-size:.8rem; color:var(--text-mid); margin-bottom:var(--s-3); }
.qv-fam { font-size:.8rem; color:var(--text-mid); font-weight:400; margin-bottom:var(--s-3); }
.qv-fam b { color:var(--text); }
.qv-accords { display:flex; flex-wrap:wrap; gap:var(--s-2); margin-bottom:var(--s-4); }
.qv-accords span {
  font-size:.68rem; letter-spacing:.06em; padding:.3rem .7rem; border-radius:999px;
  border:1px solid var(--gold-dim); color:var(--gold-light); font-weight:400;
}
.qv-sizes { display:flex; gap:var(--s-2); margin-bottom:var(--s-4); }
.qv-sizes button {
  padding:.5rem .9rem; border:1px solid var(--border); background:var(--black-card);
  color:var(--text-mid); font-family:var(--font-display); font-size:.72rem; letter-spacing:.08em;
  cursor:pointer; transition:all .2s var(--ease);
}
.qv-sizes button.active { border-color:var(--gold); color:var(--gold-light); background:var(--black-elev); }
.qv-price-row { display:flex; align-items:baseline; gap:var(--s-3); margin-bottom:var(--s-2); }
.qv-price { font-family:var(--font-serif); font-size:1.7rem; color:var(--gold-light); }
.qv-borr { font-size:.76rem; color:var(--text-mid); font-weight:400; }
.qv-parcel { font-size:.76rem; color:var(--text-mid); font-weight:400; margin-bottom:var(--s-4); }
.qv-low { font-size:.76rem; color:var(--gold-light); margin-bottom:var(--s-3); display:inline-flex; align-items:center; gap:7px; }
.qv-low::before { content:''; width:5px; height:5px; border-radius:50%; background:var(--gold-light); flex:none; box-shadow:0 0 0 3px rgba(201,168,97,.16); }
.qv-actions { display:flex; flex-direction:column; gap:var(--s-3); }
.qv-link { font-family:var(--font-display); font-size:.64rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); text-align:center; }
.qv-link:hover { color:var(--gold-light); }
@media (max-width:680px) {
  .qv-modal { grid-template-columns:1fr; }
  .qv-pic { border-right:none; border-bottom:1px solid var(--border); border-radius:var(--r-lg) var(--r-lg) 0 0; }
  .qv-pic img { max-height:240px; }
}

/* ============================================================
   TOASTS (feedback discreto: favoritos, cupom, etc.)
============================================================ */
.toasts {
  position:fixed; left:50%; bottom:28px; transform:translateX(-50%);
  display:flex; flex-direction:column; gap:var(--s-2); z-index:95;
  pointer-events:none; width:max-content; max-width:92vw;
}
.toast {
  background:rgba(15,15,15,.92); border:1px solid var(--gold-dim);
  color:var(--text); font-size:.84rem; font-weight:400;
  padding:.7rem 1.2rem; border-radius:999px; text-align:center;
  box-shadow:0 14px 36px -10px rgba(0,0,0,.8);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  opacity:0; transform:translateY(10px); transition:all .3s var(--ease);
}
.toast b { color:var(--gold-light); }
.toast.show { opacity:1; transform:none; }

/* ============================================================
   WELCOME MODAL (cupom de boas-vindas, 1x por dispositivo)
============================================================ */
.wm-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.82);
  backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
  z-index:85; opacity:0; visibility:hidden; transition:all .35s var(--ease);
  display:flex; align-items:center; justify-content:center; padding:var(--s-4);
}
.wm-overlay.open { opacity:1; visibility:visible; }
.wm-modal {
  width:min(420px, 100%); overflow:hidden;
  background:radial-gradient(130% 90% at 50% -10%, rgba(201,168,97,.12), transparent 58%), linear-gradient(180deg, var(--black-elev), var(--black-soft));
  border:1px solid var(--border-strong); border-radius:var(--r-lg);
  padding:2.7rem 2rem 1.7rem; text-align:center;
  position:relative; transform:translateY(18px) scale(.96); transition:transform .45s var(--ease);
  box-shadow:0 44px 100px -24px rgba(0,0,0,.92);
}
.wm-overlay.open .wm-modal { transform:none; }
/* filete dourado degradê no topo (substitui a moldura interna antiga) */
.wm-modal::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px; pointer-events:none;
  background:linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold) 70%, transparent);
}
/* monograma com halo dourado suave */
.wm-badge { position:relative; width:72px; height:72px; margin:0 auto 1.3rem; display:flex; align-items:center; justify-content:center; }
.wm-badge::after { content:''; position:absolute; inset:-40%; z-index:0; background:radial-gradient(circle, rgba(201,168,97,.24), transparent 70%); }
.wm-logo { position:relative; z-index:1; width:72px; height:72px; display:block; }
.wm-kicker { font-family:var(--font-display); font-size:.62rem; letter-spacing:.34em; text-transform:uppercase; color:var(--gold); margin-bottom:.85rem; }
.wm-modal h3 { font-family:var(--font-serif); font-size:clamp(1.7rem,5vw,2rem); font-weight:500; color:var(--text); line-height:1.18; margin-bottom:.7rem; }
.wm-modal h3 em { font-style:italic; color:var(--gold-light); }
.wm-modal p { font-size:.88rem; font-weight:400; color:var(--text-mid); line-height:1.55; max-width:32ch; margin:0 auto 1.6rem; }
/* CUPOM em formato "ticket" — chapado, sem tracejado */
.wm-ticket {
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  background:rgba(201,168,97,.07); border:1px solid var(--border-strong); border-radius:var(--r-md);
  padding:.8rem .8rem .8rem 1.15rem; margin-bottom:1.1rem; text-align:left;
}
.wm-ticket-info { display:flex; flex-direction:column; gap:3px; min-width:0; }
.wm-ticket-label { font-family:var(--font-display); font-size:.54rem; letter-spacing:.26em; text-transform:uppercase; color:var(--text-mid); }
.wm-ticket-code { font-family:var(--font-display); font-size:1.15rem; font-weight:600; letter-spacing:.24em; color:var(--gold-light); line-height:1; }
.wm-copy {
  display:inline-flex; align-items:center; gap:.4rem; flex:none; white-space:nowrap;
  font-family:var(--font-display); font-size:.6rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold); background:transparent; border:1px solid var(--gold-dim); border-radius:999px;
  padding:.6rem .9rem; cursor:pointer; transition:all .2s var(--ease);
}
.wm-copy svg { width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:1.7; }
.wm-copy:hover { background:var(--gold); color:#1a1408; border-color:var(--gold); }
.wm-copy.done { color:var(--green); border-color:var(--green); background:transparent; }
.wm-cta { gap:.6rem; }
.wm-cta svg { width:14px; height:14px; }
.wm-close {
  position:absolute; top:13px; right:13px; width:34px; height:34px; border-radius:50%; z-index:2;
  background:rgba(10,10,10,.4); border:1px solid var(--border); color:var(--text-mid);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:all .2s var(--ease);
}
.wm-close svg { width:15px; height:15px; }
.wm-close:hover { border-color:var(--gold); color:var(--gold-light); }
.wm-later { display:block; margin:.7rem auto 0; background:none; border:none; color:var(--text-dim); font-size:.73rem; font-weight:400; letter-spacing:.02em; cursor:pointer; transition:color .2s var(--ease); }
.wm-later:hover { color:var(--text-mid); }

/* ============================================================
   COMPARADOR DE PERFUMES (botão no card + bandeja + modal)
============================================================ */
.product-card .cmp-btn {
  position:absolute; top:calc(var(--s-3) + 46px); right:var(--s-3);
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--border-strong);
  background:rgba(10,10,10,.55);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  cursor:pointer; z-index:3;
  opacity:0; transform:translateY(-4px);
  transition:all .3s var(--ease);
}
.product-card:hover .cmp-btn { opacity:1; transform:none; }
.product-card .cmp-btn:hover { border-color:var(--gold); background:rgba(201,168,97,.16); transform:scale(1.12); }
.product-card .cmp-btn.on { opacity:1; transform:none; border-color:var(--gold); background:rgba(201,168,97,.2); box-shadow:0 0 0 1px rgba(201,168,97,.35); }
@media (hover:none) { .product-card .cmp-btn { opacity:1; transform:none; } }
.product-card .cmp-btn svg { width:16px; height:16px; stroke:var(--gold); fill:none; stroke-width:1.7; }
.product-card .cmp-btn.on svg { stroke:var(--gold-light); }

.cmp-tray {
  position:fixed; left:50%; bottom:18px; transform:translateX(-50%);
  display:flex; align-items:center; gap:var(--s-3);
  background:rgba(15,15,15,.94); border:1px solid var(--gold-dim); border-radius:999px;
  padding:8px 10px 8px 8px; z-index:75; max-width:94vw;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:0 18px 44px -12px rgba(0,0,0,.85);
  animation:cmp-tray-in .35s var(--ease);
}
@keyframes cmp-tray-in { from { opacity:0; transform:translate(-50%, 12px); } to { opacity:1; transform:translate(-50%, 0); } }
.cmp-tray .ct-thumbs { display:flex; gap:6px; }
.cmp-tray .ct-thumb { position:relative; width:44px; height:44px; border-radius:50%; overflow:visible; }
.cmp-tray .ct-thumb img { width:100%; height:100%; object-fit:cover; border-radius:50%; border:1px solid var(--gold-dim); display:block; }
.cmp-tray .ct-thumb button {
  position:absolute; top:-5px; right:-5px; width:17px; height:17px; border-radius:50%;
  background:var(--gold); color:var(--black); font-size:.6rem; line-height:1;
  display:flex; align-items:center; justify-content:center; cursor:pointer; border:none;
}
.cmp-tray .ct-go {
  font-family:var(--font-display); font-size:.64rem; letter-spacing:.18em; text-transform:uppercase;
  background:var(--gold); color:var(--black); border:1px solid var(--gold);
  padding:.65rem 1.1rem; border-radius:999px; cursor:pointer; white-space:nowrap;
  transition:all .25s var(--ease);
}
.cmp-tray .ct-go:hover { background:var(--gold-light); }
.cmp-tray .ct-go:disabled { opacity:.45; cursor:not-allowed; }
.cmp-tray .ct-clear { background:none; border:none; color:var(--text-mid); font-size:.72rem; font-weight:400; cursor:pointer; padding:0 6px; }
.cmp-tray .ct-clear:hover { color:var(--gold-light); }
@media (max-width:580px) { .cmp-tray { bottom:76px; } }

.cmp-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.74);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  z-index:81; opacity:0; visibility:hidden; transition:all .3s var(--ease);
  display:flex; align-items:center; justify-content:center; padding:var(--s-4);
}
.cmp-overlay.open { opacity:1; visibility:visible; }
.cmp-modal {
  width:min(880px, 100%); max-height:90vh; overflow:auto;
  background:var(--black-soft); border:1px solid var(--border-strong);
  border-radius:var(--r-lg);
  padding:var(--s-6); position:relative;
  transform:translateY(14px) scale(.98); transition:transform .3s var(--ease);
}
.cmp-overlay.open .cmp-modal { transform:none; }
.cmp-title { font-family:var(--font-serif); font-weight:500; font-size:1.5rem; color:var(--text); margin-bottom:var(--s-5); }
.cmp-title em { font-style:italic; color:var(--gold-light); }
.cmp-grid { display:grid; gap:var(--s-4); }
.cmp-col { border:1px solid var(--border); background:var(--black-card); padding:var(--s-4); position:relative; display:flex; flex-direction:column; }
.cmp-remove { position:absolute; top:8px; right:8px; z-index:2; width:26px; height:26px; border-radius:50%; background:rgba(10,10,10,.6); border:1px solid var(--border); color:var(--text-mid); cursor:pointer; font-size:.7rem; }
.cmp-remove:hover { border-color:var(--gold); color:var(--gold-light); }
.cmp-img { display:block; aspect-ratio:1; background:var(--black-deep); border:1px solid var(--border); overflow:hidden; margin-bottom:var(--s-3); }
.cmp-img img { width:100%; height:100%; object-fit:cover; transition:transform .4s var(--ease); }
.cmp-img:hover img { transform:scale(1.05); }
.cmp-brand { font-family:var(--font-display); font-size:.56rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); }
.cmp-name { font-family:var(--font-serif); font-size:1.15rem; color:var(--text); margin-bottom:var(--s-3); display:block; }
.cmp-name:hover { color:var(--gold-light); }
.cmp-row { display:flex; flex-direction:column; gap:2px; padding:7px 0; border-top:1px solid var(--border); }
.cmp-row .ck { font-family:var(--font-display); font-size:.54rem; letter-spacing:.18em; text-transform:uppercase; color:var(--text-mid); }
.cmp-row .cv { font-size:.84rem; font-weight:400; color:var(--text); }
.cmp-row .cv b { color:var(--gold-light); font-family:var(--font-serif); font-size:1.05rem; }
.cmp-add { margin-top:var(--s-4); }
@media (max-width:680px) {
  .cmp-grid { grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)) !important; }
  .cmp-modal { padding:var(--s-4); }
}

/* ============================================================
   TRANSIÇÃO ENTRE PÁGINAS (View Transitions, progressivo)
============================================================ */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation-duration:.22s; }
::view-transition-new(root) { animation-duration:.22s; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation:none; }
}