/* ============================================================
   Encanto de Natal — luzes de Natal inteligentes
   Página de produto único + checkout próprio
   ============================================================ */

:root{
  --n-cream: hsl(40 38% 96%);
  --n-gold:  hsl(40 58% 40%);
  --n-green: hsl(160 42% 18%);
  --n-ink:   hsl(160 28% 11%);
  --n-paper: hsl(42 45% 98%);
  --n-red:   hsl(354 62% 36%);

  --green-dp: hsl(160 44% 12%);
  --red-br:   hsl(354 66% 44%);
  --gold-lt:  hsl(40 72% 58%);
  --line:     hsl(40 58% 40% / .28);
  --ok:       hsl(150 58% 32%);
  /* verde dos botoes de compra */
  --cta:      hsl(150 62% 30%);
  --cta-lt:   hsl(150 58% 38%);
  --bad:      hsl(354 68% 46%);

  --max: 1180px;
  --r: 18px;
  --shadow-s: 0 1px 2px hsl(160 28% 11% / .06), 0 4px 14px hsl(160 28% 11% / .05);
  --shadow-m: 0 2px 6px hsl(160 28% 11% / .08), 0 14px 38px hsl(160 28% 11% / .10);
  --shadow-l: 0 30px 70px hsl(160 28% 11% / .22);

  --sans: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:var(--sans);
  color:var(--n-ink);
  background:var(--n-paper);
  line-height:1.6;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3,h4{ margin:0; line-height:1.12; font-weight:600; }
p{ margin:0; }
button{ font:inherit; color:inherit; }
figure{ margin:0; }

::selection{ background:var(--n-red); color:var(--n-cream); }

:is(a,button,summary,details,input,select):focus-visible{
  outline:3px solid var(--gold-lt);
  outline-offset:2px;
  border-radius:6px;
}

/* ---------- helpers ---------- */
.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:20px; }
.wrap.narrow{ max-width:800px; }
.center{ text-align:center; }

.h2{
  font-family:var(--serif);
  font-size:clamp(1.85rem,4.4vw,3rem);
  font-weight:600;
  color:var(--n-green);
  letter-spacing:-.015em;
}
.h2.light{ color:var(--n-cream); }

.lead{
  margin-top:14px;
  font-size:1.0625rem;
  color:hsl(160 20% 32%);
  max-width:62ch;
}
.lead.center{ margin-inline:auto; }
.lead.light{ color:hsl(40 38% 90%); }

.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:.75rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--n-gold);
}
.eyebrow.center{ justify-content:center; width:100%; }
.eyebrow .dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--n-red);
  box-shadow:0 0 0 4px hsl(354 62% 36% / .16);
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ box-shadow:0 0 0 4px hsl(354 62% 36% / .16); }
  50%    { box-shadow:0 0 0 8px hsl(354 62% 36% / .04); }
}

/* ---------- neve ---------- */
#snow{ position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:3; }

 }

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:18px;
  padding:13px 20px;
  background:hsl(42 45% 98% / .88);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.brand{ display:flex; align-items:center; gap:9px; text-decoration:none; }
.brand-text{
  font-family:var(--serif);
  font-size:1.1875rem; font-weight:600;
  color:var(--n-green);
  letter-spacing:-.01em;
}
.brand-mark{ font-size:1.25rem; line-height:1; }

.nav-links{
  display:flex; gap:22px; margin-left:auto;
  font-size:.9rem; font-weight:500;
}
.nav-links a{
  text-decoration:none; color:hsl(160 24% 26%);
  padding-bottom:3px;
  border-bottom:2px solid transparent;
  transition:color .18s, border-color .18s;
}
.nav-links a:hover{ color:var(--n-red); border-bottom-color:var(--n-red); }


/* ---------- botões ---------- */
.btn-primary{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:16px 30px; border-radius:999px;
  background:linear-gradient(135deg, var(--cta), var(--cta-lt));
  color:#fff; text-decoration:none;
  font-size:1.0125rem; font-weight:600;
  border:0; cursor:pointer;
  box-shadow:0 10px 26px hsl(150 62% 26% / .34);
  position:relative; overflow:hidden;
  transition:transform .2s, box-shadow .2s, opacity .2s;
}
.btn-primary::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(110deg,transparent 28%,hsl(40 70% 85% / .40) 50%,transparent 72%);
  transform:translateX(-120%);
  animation:sheen 4.2s ease-in-out infinite;
}
@keyframes sheen{ 0%,62%{ transform:translateX(-120%);} 88%,100%{ transform:translateX(120%);} }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 36px hsl(150 62% 26% / .42); }
.btn-primary.big{ padding:19px 42px; font-size:1.0875rem; }
.btn-primary.full{ width:100%; }
.btn-primary[disabled]{ opacity:.6; cursor:progress; transform:none; }
.btn-primary[disabled]::after{ animation:none; }

.btn-ghost{
  display:inline-block; margin-top:11px;
  background:none; border:0; padding:0; cursor:pointer;
  font-size:.9rem; font-weight:500;
  color:var(--n-green);
  text-decoration:underline;
  text-decoration-color:var(--line);
  text-underline-offset:4px;
  transition:text-decoration-color .18s;
}
.btn-ghost:hover{ text-decoration-color:var(--n-red); }

/* ============================================================
   CHECKOUT
   ============================================================ */
.checkout{
  padding:clamp(56px,8vw,96px) 0;
  background:
    radial-gradient(900px 400px at 50% 0%, hsl(160 42% 18% / .06), transparent 70%),
    var(--n-cream);
  scroll-margin-top:72px;
}
.co-layout{
  margin-top:34px;
  display:grid; grid-template-columns:1.35fr .9fr;
  gap:26px; align-items:start;
}

.co-form{ display:flex; flex-direction:column; gap:18px; }

.co-block{
  margin:0; padding:24px 22px 22px;
  border:1px solid var(--line); border-radius:var(--r);
  background:#fff; box-shadow:var(--shadow-s);
}
.co-legend{
  display:flex; align-items:center; gap:11px;
  padding:0 6px 0 0; margin-bottom:5px;
  font-family:var(--serif); font-size:1.125rem; font-weight:600;
  color:var(--n-green);
}
.co-step{
  display:grid; place-items:center;
  width:27px; height:27px; border-radius:50%;
  background:var(--n-green); color:var(--gold-lt);
  font-family:var(--sans); font-size:.8125rem; font-weight:700;
}

.field{ display:flex; flex-direction:column; margin-top:15px; min-width:0; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.field-row .field{ margin-top:15px; }
.field-sm{ max-width:100%; }
.field-row:has(.field-sm){ grid-template-columns:.55fr 1fr; }

.field label{
  font-size:.8125rem; font-weight:600;
  color:hsl(160 22% 28%); margin-bottom:6px;
}
.field .opt{ font-weight:400; color:hsl(160 12% 54%); }

.field input,
.field select{
  width:100%; padding:12px 14px;
  font-family:var(--sans); font-size:.9375rem;
  color:var(--n-ink);
  background:var(--n-paper);
  border:1px solid var(--line); border-radius:11px;
  transition:border-color .18s, box-shadow .18s, background .18s;
}
.field input::placeholder{ color:hsl(160 10% 60%); }
.field input:hover, .field select:hover{ border-color:hsl(40 58% 40% / .5); }
.field input:focus, .field select:focus{
  outline:none; background:#fff;
  border-color:var(--n-green);
  box-shadow:0 0 0 3px hsl(160 42% 18% / .12);
}
.field.is-bad input, .field.is-bad select{
  border-color:var(--bad);
  box-shadow:0 0 0 3px hsl(354 68% 46% / .11);
}

.hint{ margin-top:5px; font-size:.75rem; color:hsl(160 12% 52%); }
.err{
  margin-top:5px; font-size:.75rem; font-weight:500;
  color:var(--bad); min-height:0;
}
.err:empty{ display:none; }

.cep-row{ display:flex; align-items:center; gap:11px; }
.cep-row input{ max-width:150px; }
.cep-status{ font-size:.75rem; color:hsl(160 14% 46%); }
.cep-status.ok{ color:var(--ok); font-weight:600; }
.cep-status.bad{ color:var(--bad); font-weight:600; }

/* pagamento */
.pay-ico{ font-size:1.25rem; line-height:1; }
.pay-txt{ display:flex; flex-direction:column; line-height:1.3; }
.pay-txt strong{ font-size:.9375rem; color:var(--n-green); }
.pay-txt small{ font-size:.75rem; color:hsl(160 14% 46%); }
.pay-tag{
  margin-left:auto; padding:4px 11px; border-radius:999px;
  background:hsl(150 58% 32% / .13); color:var(--ok);
  font-size:.6875rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
}


.co-safe{
  display:flex; align-items:center; justify-content:center; gap:7px;
  font-size:.75rem; color:hsl(160 14% 48%);
}

/* resumo */
.co-summary{ position:sticky; top:82px; }
.sum-card{
  padding:24px 22px;
  border:1px solid var(--line); border-radius:var(--r);
  background:#fff; box-shadow:var(--shadow-m);
}
.sum-title{
  font-family:var(--serif); font-size:1.125rem; color:var(--n-green);
  padding-bottom:15px; border-bottom:1px solid var(--line);
}
.sum-item{ display:flex; gap:13px; align-items:center; padding:16px 0; }
.sum-item img{
  width:64px; height:64px; border-radius:11px;
  object-fit:cover; border:1px solid var(--line); flex:none;
}
.sum-item-txt{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.sum-item-txt strong{ font-size:.9375rem; color:var(--n-green); }
.sum-item-txt span{ font-size:.75rem; color:hsl(160 14% 46%); }

.qty-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:13px 0; border-top:1px solid var(--line);
  font-size:.875rem; color:hsl(160 20% 32%);
}
.qty{
  display:flex; align-items:center; gap:3px;
  border:1px solid var(--line); border-radius:999px; padding:3px;
}
.qty-btn{
  width:30px; height:30px; border-radius:50%;
  border:0; background:var(--n-cream); color:var(--n-green);
  font-size:1.0625rem; font-weight:600; line-height:1;
  cursor:pointer; transition:background .16s, color .16s;
}
.qty-btn:hover:not([disabled]){ background:var(--n-green); color:var(--n-cream); }
.qty-btn[disabled]{ opacity:.4; cursor:not-allowed; }
.qty-val{
  min-width:30px; text-align:center;
  font-size:.9375rem; font-weight:600; color:var(--n-green);
}

.sum-lines{ margin:0; padding:15px 0 0; border-top:1px solid var(--line); }
.sum-lines > div{
  display:flex; align-items:baseline; justify-content:space-between;
  margin-bottom:9px; font-size:.875rem;
}
.sum-lines dt{ color:hsl(160 16% 42%); }
.sum-lines dd{ margin:0; font-weight:600; color:var(--n-ink); }
.sum-lines .free{ color:var(--ok); }
.sum-total{
  margin-top:13px; padding-top:13px;
  border-top:1px solid var(--line);
}
.sum-total dt{ font-size:1rem; font-weight:600; color:var(--n-green); }
.sum-total dd{
  font-family:var(--serif); font-size:1.5rem; font-weight:600;
  color:var(--n-red); letter-spacing:-.015em;
}
.sum-inst{ font-size:.75rem; color:hsl(160 14% 48%); text-align:right; }

.sum-perks{
  list-style:none; margin:17px 0 0; padding:15px 0 0;
  border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:8px;
  font-size:.8125rem; color:hsl(160 16% 40%);
}
.sum-perks li{ display:flex; align-items:center; gap:8px; }
.sum-perks b{ color:var(--ok); }

/* ============================================================
   CONFIRMAÇÃO
   ============================================================ */
/* seção de confirmação do pedido — não confundir com .done da trilha de etapas */
section.done{ padding:clamp(56px,8vw,96px) 0; background:var(--n-cream); }
.done-mark{
  width:72px; height:72px; margin:0 auto 22px;
  display:grid; place-items:center; border-radius:50%;
  background:hsl(150 58% 32% / .13); color:var(--ok);
  font-size:2.125rem;
  animation:pop .45s cubic-bezier(.22,1.3,.36,1) both;
}
@keyframes pop{ from{ transform:scale(.4); opacity:0; } to{ transform:none; opacity:1; } }

.done-card{
  margin:26px auto 0; max-width:440px; text-align:left;
  padding:22px; border-radius:var(--r);
  background:#fff; border:1px solid var(--line);
  box-shadow:var(--shadow-s);
  font-size:.875rem;
}
.done-card dl{ margin:0; }
.done-card dl > div{
  display:flex; justify-content:space-between; gap:16px;
  padding:9px 0; border-bottom:1px solid var(--line);
}
.done-card dl > div:last-child{ border-bottom:0; }
.done-card dt{ color:hsl(160 14% 46%); flex:none; }
.done-card dd{ margin:0; font-weight:600; text-align:right; word-break:break-word; }
.done-card .big-id{
  font-family:var(--serif); font-size:1.125rem; color:var(--n-red);
}
.done-note{ margin-top:20px; font-size:.8125rem; color:hsl(160 14% 48%); }


/* ============================================================
   VÍDEOS EM USO (carrossel horizontal)
   ============================================================ */
.reels{ padding:clamp(52px,7vw,88px) 0; background:var(--n-cream); }

.reel-row{
  margin-top:32px;
  display:flex; gap:16px;
  overflow-x:auto; overflow-y:hidden;
  padding:4px 4px 16px;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:hsl(40 58% 40% / .45) transparent;
}
.reel-row::-webkit-scrollbar{ height:8px; }
.reel-row::-webkit-scrollbar-track{ background:transparent; }
.reel-row::-webkit-scrollbar-thumb{
  background:hsl(40 58% 40% / .40); border-radius:999px;
}
.reel-row::-webkit-scrollbar-thumb:hover{ background:hsl(40 58% 40% / .62); }

.reel{
  position:relative; flex:0 0 auto;
  width:min(252px, 66vw);
  margin:0; scroll-snap-align:center;
  border-radius:var(--r); overflow:hidden;
  background:var(--green-dp);
  border:1px solid var(--line);
  box-shadow:var(--shadow-s);
  transition:transform .24s cubic-bezier(.22,1,.36,1), box-shadow .24s, border-color .24s;
}
.reel:hover{
  transform:translateY(-5px);
  box-shadow:var(--shadow-m);
  border-color:hsl(40 58% 40% / .55);
}
.reel video{
  display:block; width:100%; height:auto;
  aspect-ratio:9/16; object-fit:cover;
  background:var(--green-dp);
}

/* só entra na tela quando o navegador bloqueia o autoplay;
   o JS cria o botão nesse caso */
.reel-play{
  position:absolute; top:50%; left:50%;
  translate:-50% -50%;
  display:grid; place-items:center;
  width:56px; height:56px; border-radius:50%;
  border:0; cursor:pointer;
  background:hsl(42 45% 98% / .92);
  color:var(--n-green);
  font-size:1.1875rem; padding-left:4px;
  box-shadow:0 6px 20px hsl(160 44% 8% / .42);
  transition:transform .2s, background .2s;
  animation:popin .3s ease both;
}
@keyframes popin{ from{ opacity:0; scale:.8; } to{ opacity:1; scale:1; } }
.reel-play:hover{ transform:translate(-50%,-50%) scale(1.09); background:#fff; }

/* marca discreta de "rodando" */
.reel::after{
  content:""; position:absolute; top:12px; right:12px;
  width:8px; height:8px; border-radius:50%;
  background:var(--gold-lt);
  box-shadow:0 0 0 3px hsl(40 72% 58% / .22);
  opacity:0; transition:opacity .3s;
}
.reel.is-playing::after{ opacity:1; animation:blink 2.2s ease-in-out infinite; }
@keyframes blink{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

.reel figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:26px 14px 12px;
  font-size:.8125rem; font-weight:500;
  color:var(--n-cream);
  background:linear-gradient(transparent, hsl(160 46% 8% / .88));
  pointer-events:none;
}
.reel-note{
  margin-top:8px; text-align:center;
  font-size:.75rem; color:hsl(160 12% 50%);
}

/* ============================================================
   PÁGINA DE CHECKOUT
   ============================================================ */
.page-checkout .checkout{
  padding-top:clamp(28px,4vw,44px);
  background:var(--n-paper);
}
.page-checkout .co-intro{ margin-top:10px; }

.back-link{
  margin-left:auto;
  font-size:.875rem; font-weight:500;
  color:hsl(160 24% 30%); text-decoration:none;
  padding:8px 14px; border-radius:999px;
  border:1px solid var(--line);
  transition:border-color .18s, color .18s, background .18s;
}
.back-link:hover{
  color:var(--n-red);
  border-color:var(--n-red);
  background:hsl(354 62% 36% / .05);
}

/* trilha de etapas */
.co-trail{
  list-style:none;
  display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap; gap:8px 20px;
  margin:0; padding:22px 20px 0;
  font-size:.8125rem; color:hsl(160 12% 52%);
}
.co-trail li{ display:flex; align-items:center; gap:8px; }
.co-trail li + li::before{
  content:""; width:22px; height:1px;
  background:var(--line); margin-right:12px;
}
.co-trail span{
  display:grid; place-items:center;
  width:23px; height:23px; border-radius:50%;
  background:var(--n-cream); border:1px solid var(--line);
  font-size:.6875rem; font-weight:700;
}
.co-trail .done{ color:var(--ok); }
.co-trail .done span{
  background:hsl(150 58% 32% / .13);
  border-color:hsl(150 58% 32% / .35);
  color:var(--ok);
}
.co-trail .now{ color:var(--n-green); font-weight:600; }
.co-trail .now span{
  background:var(--n-green); border-color:var(--n-green);
  color:var(--gold-lt);
}

.foot-slim{ padding:26px 0 20px; }
.foot-slim .foot-bot{ margin-top:0; padding-top:0; border-top:0; }
.foot-slim a{ color:var(--n-red); font-weight:600; }

@media (max-width:640px){
  .reel{ width:min(216px, 62vw); }
  .co-trail{ font-size:.75rem; gap:6px 12px; }
  .co-trail li + li::before{ width:14px; margin-right:7px; }
  .back-link{ padding:7px 12px; font-size:.8125rem; }
}

/* ============================================================
   BLOCO DO PIX (tela de confirmação)
   ============================================================ */
.pix-box{
  margin:0 0 22px;
  padding:22px 20px;
  border-radius:var(--r);
  background:var(--n-cream);
  border:1px solid var(--line);
  text-align:center;
  transition:border-color .3s, background .3s;
}
.pix-box.is-pago{
  background:hsl(150 58% 32% / .07);
  border-color:hsl(150 58% 32% / .4);
}
.pix-tit{
  font-family:var(--serif); font-size:1.125rem; font-weight:600;
  color:var(--n-green);
}
.pix-qr{
  width:220px; height:220px;
  margin:16px auto 0;
  border-radius:12px;
  background:#fff; padding:10px;
  border:1px solid var(--line);
}
.pix-ajuda{
  margin-top:14px;
  font-size:.8125rem; color:hsl(160 16% 42%);
}
.pix-cola{
  margin-top:13px;
  display:flex; flex-direction:column; gap:9px; align-items:stretch;
}
.pix-cola code{
  display:block;
  padding:11px 13px;
  font-family:ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size:.6875rem; line-height:1.5;
  color:hsl(160 20% 30%);
  background:#fff;
  border:1px solid var(--line); border-radius:10px;
  word-break:break-all;
  max-height:84px; overflow-y:auto;
  text-align:left;
  user-select:all;
}
.pix-btn{
  padding:12px 20px; border-radius:999px; border:0;
  background:var(--n-green); color:var(--n-cream);
  font-size:.875rem; font-weight:600; cursor:pointer;
  transition:background .18s, transform .18s;
}
.pix-btn:hover{ background:var(--cta-lt); transform:translateY(-1px); }
.pix-btn.is-ok{ background:var(--ok); }

.pix-aguarda{
  display:flex; align-items:center; justify-content:center; gap:9px;
  margin-top:16px; padding-top:14px;
  border-top:1px solid var(--line);
  font-size:.8125rem; color:hsl(160 14% 46%);
}
.pix-dot{
  width:9px; height:9px; border-radius:50%; flex:none;
  background:var(--gold-lt);
  animation:pixpulse 1.5s ease-in-out infinite;
}
@keyframes pixpulse{
  0%,100%{ opacity:1;  box-shadow:0 0 0 0   hsl(40 72% 58% / .5); }
  50%    { opacity:.5; box-shadow:0 0 0 7px hsl(40 72% 58% / 0); }
}
.pix-aguarda.is-pago{ color:var(--ok); font-weight:600; }
.pix-aguarda.is-pago .pix-dot{ background:var(--ok); animation:none; }
.pix-aguarda.is-timeout{ color:hsl(38 72% 34%); }
.pix-aguarda.is-timeout .pix-dot{ background:hsl(38 72% 50%); animation:none; }

@media (min-width:520px){
  .pix-cola{ flex-direction:row; align-items:center; }
  .pix-cola code{ flex:1; max-height:64px; }
  .pix-btn{ flex:none; }
}

/* ============================================================
   PRODUTO — galeria + compra lado a lado
   ============================================================ */
.produto{
  padding:clamp(26px,4vw,50px) 0 clamp(40px,5vw,66px);
  background:
    radial-gradient(900px 420px at 50% -10%, hsl(40 58% 40% / .08), transparent 68%),
    var(--n-paper);
}
.pr-layout{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(26px,4vw,52px);
  align-items:start;
}

/* ---------- galeria ---------- */
.pr-galeria{ position:sticky; top:78px; }

.pr-principal{
  position:relative;
  border-radius:var(--r); overflow:hidden;
  border:1px solid var(--line);
  box-shadow:var(--shadow-m);
  background:var(--n-cream);
}
.pr-principal img{
  width:100%; height:auto; display:block;
  animation:fadein .35s ease;
}
@keyframes fadein{ from{ opacity:.35; } to{ opacity:1; } }

.pr-selo{
  position:absolute; top:14px; left:14px;
  padding:7px 15px; border-radius:999px;
  background:var(--n-red); color:var(--n-cream);
  font-size:.75rem; font-weight:700;
  letter-spacing:.08em;
  box-shadow:0 5px 16px hsl(354 62% 36% / .38);
}

/* grades (miniaturas) logo abaixo do produto */
.pr-grades{
  margin-top:12px;
  display:grid; grid-template-columns:repeat(5,1fr);
  gap:9px;
}
.grade{
  padding:0; border-radius:12px; overflow:hidden;
  border:2px solid transparent; background:var(--n-cream);
  cursor:pointer; line-height:0;
  box-shadow:var(--shadow-s);
  transition:border-color .18s, transform .18s, box-shadow .18s;
}
.grade img{ width:100%; height:100%; aspect-ratio:1; object-fit:cover; }
.grade:hover{ transform:translateY(-3px); box-shadow:var(--shadow-m); }
.grade.is-on{ border-color:var(--n-red); }

/* ---------- compra ---------- */
.pr-compra{ padding-top:6px; }

.pr-titulo{
  margin-top:14px;
  font-family:var(--serif);
  font-size:clamp(2.1rem,4.6vw,3.2rem);
  font-weight:600; color:var(--n-green);
  letter-spacing:-.025em; line-height:1.04;
}
.pr-slogan{
  margin-top:6px;
  font-family:var(--serif); font-style:italic;
  font-size:1.0625rem; color:var(--n-gold);
}
.pr-resumo{
  margin-top:16px;
  font-size:1rem; color:hsl(160 18% 34%);
  max-width:46ch;
}

.pr-bullets{
  list-style:none; margin:20px 0 0; padding:0;
  display:flex; flex-direction:column; gap:10px;
}
.pr-bullets li{
  display:flex; align-items:center; gap:10px;
  font-size:.9375rem; font-weight:500; color:var(--n-green);
}
.pr-bullets span{ font-size:1.0625rem; line-height:1; }

.pr-preco{
  margin-top:24px; padding:20px 22px;
  border-radius:var(--r);
  background:var(--n-cream);
  border:1px solid var(--line);
}
.pr-de{ font-size:.875rem; color:hsl(160 12% 52%); }
.pr-de s{ text-decoration-thickness:1.5px; }
.pr-por{
  display:flex; align-items:flex-start; gap:3px;
  margin-top:4px; color:var(--n-red);
}
.pr-por .cur{ font-size:1.25rem; font-weight:600; margin-top:9px; }
.pr-por .val{
  font-family:var(--serif);
  font-size:clamp(3rem,6vw,3.9rem);
  font-weight:600; line-height:1; letter-spacing:-.03em;
}
.pr-por .cent{
  font-family:var(--serif);
  font-size:1.5rem; font-weight:600; margin-top:7px;
}
.pr-parc{
  display:block; margin-top:7px;
  font-size:.8125rem; color:hsl(160 16% 42%);
}

.pr-compra .btn-primary{ margin-top:18px; }

.pr-selos{
  list-style:none; margin:18px 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:9px 20px;
  font-size:.8125rem; color:hsl(160 16% 40%);
}
.pr-selos li{ display:flex; align-items:center; gap:7px; }
.pr-selos b{ color:var(--ok); }

.pr-pag{
  margin-top:14px; padding-top:14px;
  border-top:1px solid var(--line);
  font-size:.8125rem; color:hsl(160 14% 46%);
}

/* ============================================================
   DEPOIMENTOS
   ============================================================ */
.depo{
  padding:clamp(52px,7vw,88px) 0;
  background:
    radial-gradient(800px 360px at 50% 0%, hsl(354 62% 36% / .05), transparent 70%),
    var(--n-cream);
}
.depo-grid{
  margin-top:34px;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(272px,1fr));
  gap:18px;
}
.depo-card{
  margin:0; padding:0; overflow:hidden;
  border-radius:var(--r);
  background:#fff; border:1px solid var(--line);
  box-shadow:var(--shadow-s);
  display:flex; flex-direction:column;
  transition:transform .22s, box-shadow .22s;
}
.depo-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-m); }

.depo-estrelas{
  color:var(--gold-lt); font-size:1rem; letter-spacing:.1em;
}
.depo-card blockquote{ margin:11px 0 0; flex:1; }
.depo-card blockquote p{
  font-size:.9375rem; line-height:1.68;
  color:hsl(160 18% 32%);
}
.depo-card figcaption{
  margin-top:16px; padding-top:14px;
  border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:2px;
}
.depo-card figcaption strong{
  font-size:.875rem; font-weight:600; color:var(--n-green);
}
.depo-card figcaption span{ font-size:.75rem; color:hsl(160 12% 52%); }

.depo-aviso{
  margin-top:20px; text-align:center;
  font-size:.75rem; color:hsl(160 12% 52%);
  max-width:60ch; margin-inline:auto;
}


/* ---------- foto do depoimento ---------- */
.depo-foto{
  position:relative;
  background:var(--n-cream);
  line-height:0;
}
.depo-foto img{
  width:100%; height:auto;
  aspect-ratio:1; object-fit:cover;
  transition:transform .5s cubic-bezier(.22,1,.36,1);
}
.depo-card:hover .depo-foto img{ transform:scale(1.04); }

.depo-selo{
  position:absolute; top:12px; left:12px;
  padding:6px 13px; border-radius:999px;
  background:hsl(42 45% 98% / .94);
  color:var(--n-green);
  font-size:.6875rem; font-weight:700;
  letter-spacing:.04em;
  box-shadow:0 3px 10px hsl(160 44% 8% / .26);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}

.depo-texto{
  padding:20px 22px 22px;
  display:flex; flex-direction:column; flex:1;
}

/* ============================================================
   BLOCOS DE IMAGEM
   ============================================================ */
.bloco-img{
  margin-top:28px;
  border-radius:var(--r); overflow:hidden;
  border:1px solid var(--line);
  box-shadow:var(--shadow-m);
}
.bloco-img img{ width:100%; height:auto; }

/* ============================================================
   12 EFEITOS
   ============================================================ */
.efeitos{ padding:clamp(52px,7vw,88px) 0; background:var(--n-paper); }
.efeito-grid{
  list-style:none; margin:32px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(166px,1fr));
  gap:11px;
}
.efeito-grid li{
  display:flex; align-items:center; gap:11px;
  padding:14px 16px; border-radius:13px;
  background:#fff; border:1px solid var(--line);
  box-shadow:var(--shadow-s);
  font-size:.9062rem; font-weight:500; color:var(--n-green);
  transition:transform .2s, box-shadow .2s, border-color .2s;
}
.efeito-grid li:hover{
  transform:translateY(-3px); box-shadow:var(--shadow-m);
  border-color:hsl(40 58% 40% / .55);
}
.d-ico{ font-size:1.25rem; line-height:1; }

/* ============================================================
   SEÇÕES DE FUNDO ALTERNADO
   ============================================================ */
.beforeafter{ padding:clamp(52px,7vw,84px) 0; background:var(--n-cream); }
.steps{ padding:clamp(52px,7vw,84px) 0; background:var(--n-paper); }
.box{ padding:clamp(52px,7vw,88px) 0; background:var(--n-cream); }

/* ============================================================
   GARANTIA
   ============================================================ */
.guar{ padding:clamp(48px,6vw,76px) 0; background:var(--n-paper); }
.guar-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(252px,1fr));
  gap:20px;
}
.guar-item{
  padding:26px 22px; border-radius:var(--r);
  background:var(--n-cream); border:1px solid var(--line);
}
.g-ico{ font-size:1.625rem; line-height:1; }
.guar-item h3{
  margin:12px 0 7px;
  font-family:var(--serif); font-size:1.0625rem; color:var(--n-green);
}
.guar-item p{ font-size:.875rem; color:hsl(160 16% 40%); }

/* ============================================================
   FAQ
   ============================================================ */
.faq{ padding:clamp(52px,7vw,88px) 0; background:var(--n-cream); }
.faq details{
  margin-top:11px;
  border:1px solid var(--line); border-radius:14px;
  background:#fff; overflow:hidden;
  transition:border-color .18s, box-shadow .18s;
}
.faq details:first-of-type{ margin-top:30px; }
.faq details[open]{ border-color:hsl(40 58% 40% / .55); box-shadow:var(--shadow-s); }
.faq summary{
  padding:17px 48px 17px 20px;
  font-size:.9688rem; font-weight:600; color:var(--n-green);
  cursor:pointer; position:relative; list-style:none;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; position:absolute; right:19px; top:50%;
  translate:0 -50%;
  font-size:1.3125rem; font-weight:400; color:var(--n-red);
  transition:rotate .24s;
}
.faq details[open] summary::after{ content:"\2212"; rotate:180deg; }
.faq details p{ padding:0 20px 19px; font-size:.9062rem; color:hsl(160 16% 38%); }

/* ============================================================
   CTA FINAL
   ============================================================ */
.final{
  position:relative; overflow:hidden;
  padding:clamp(60px,8vw,104px) 0 clamp(72px,9vw,116px);
  background:
    radial-gradient(760px 380px at 50% 112%, hsl(354 62% 36% / .40), transparent 68%),
    linear-gradient(170deg, var(--green-dp), hsl(160 46% 9%));
  color:var(--n-cream);
}
.snowdrift{
  position:absolute; bottom:-1px; left:0; right:0; height:56px;
  background:
    radial-gradient(42px 26px at 10% 100%, var(--n-cream) 99%, transparent 100%),
    radial-gradient(56px 32px at 30% 100%, var(--n-cream) 99%, transparent 100%),
    radial-gradient(48px 24px at 52% 100%, var(--n-cream) 99%, transparent 100%),
    radial-gradient(60px 34px at 74% 100%, var(--n-cream) 99%, transparent 100%),
    radial-gradient(44px 26px at 92% 100%, var(--n-cream) 99%, transparent 100%),
    linear-gradient(var(--n-cream), var(--n-cream)) bottom / 100% 14px no-repeat;
  background-repeat:no-repeat;
}
.final .btn-primary{ margin-top:28px; }
.final-note{ margin-top:17px; font-size:.8125rem; color:hsl(40 28% 74%); }

/* ============================================================
   FOOTER
   ============================================================ */
.foot{
  padding:46px 0 28px;
  background:var(--n-cream);
  border-top:1px solid var(--line);
  font-size:.875rem;
}
.foot-grid{ display:grid; grid-template-columns:1.7fr 1fr 1fr; gap:34px; }
.foot-brand{ font-size:1.125rem; }
.foot h4{
  font-family:var(--serif); font-size:.9375rem;
  color:var(--n-green); margin-bottom:11px;
}
.foot-grid a{
  display:block; margin-bottom:8px; text-decoration:none;
  color:hsl(160 16% 36%); transition:color .18s;
}
.foot-grid a:hover{ color:var(--n-red); }
.foot-addr{
  margin-top:14px; font-size:.8125rem;
  color:hsl(160 14% 42%); line-height:1.72;
}
.foot-bot{
  margin-top:32px; padding-top:18px;
  border-top:1px solid var(--line);
  text-align:center; font-size:.75rem; color:hsl(160 12% 50%);
}

/* ---------- whatsapp ---------- */
.wpp{
  position:fixed; right:18px; bottom:18px; z-index:50;
  display:grid; place-items:center;
  width:54px; height:54px; border-radius:50%;
  background:#1faa52; color:#fff;
  box-shadow:0 8px 24px hsl(145 60% 20% / .40);
  transition:transform .2s, box-shadow .2s, bottom .25s;
}
.wpp:hover{ transform:scale(1.08); box-shadow:0 12px 32px hsl(145 60% 20% / .50); }
.wpp::before{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:2px solid #1faa52;
  animation:ring 2.6s ease-out infinite;
}
@keyframes ring{
  0%  { transform:scale(1);    opacity:.65; }
  100%{ transform:scale(1.65); opacity:0; }
}

/* ---------- barra fixa (mobile) ---------- */
.stickybuy{
  position:fixed; left:0; right:0; bottom:0; z-index:45;
  display:none; align-items:center; gap:14px;
  padding:11px 16px calc(11px + env(safe-area-inset-bottom));
  background:hsl(42 45% 98% / .96);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  box-shadow:0 -6px 22px hsl(160 28% 11% / .10);
  animation:slideup .3s ease both;
}
@keyframes slideup{ from{ transform:translateY(100%); } to{ transform:none; } }
.sb-price{ display:flex; flex-direction:column; line-height:1.2; }
.sb-price strong{ font-family:var(--serif); font-size:1.25rem; color:var(--n-red); }
.sb-price small{ font-size:.6875rem; color:var(--ok); font-weight:600; }
.sb-btn{
  margin-left:auto; padding:13px 26px; border-radius:999px;
  background:linear-gradient(135deg, var(--cta), var(--cta-lt));
  color:#fff; text-decoration:none;
  font-size:.9375rem; font-weight:600; white-space:nowrap;
  box-shadow:0 6px 18px hsl(150 62% 26% / .34);
}

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width:980px){
  .pr-layout{ grid-template-columns:1fr; }
  .pr-galeria{ position:static; }
  .pr-compra{ padding-top:0; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width:640px){
  .nav-links{ display:none; }
  .nav{ padding:11px 16px; }
  .produto{ padding-top:16px; }
  .pr-grades{ grid-template-columns:repeat(5,1fr); gap:6px; }
  .pr-preco{ padding:17px 18px; }
  .efeito-grid{ grid-template-columns:repeat(auto-fill,minmax(142px,1fr)); gap:9px; }
  .efeito-grid li{ padding:12px 13px; font-size:.8125rem; }
  .reel{ width:min(216px, 62vw); }
  .foot-grid{ grid-template-columns:1fr; gap:26px; }
  .stickybuy{ display:flex; }
  .wpp{ width:48px; height:48px; right:14px; bottom:84px; }
}

/* ---------- acessibilidade ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  #snow{ display:none; }
}

/* ============================================================
   ENTRADA AO ROLAR
   ------------------------------------------------------------
   A classe .rv é colocada pelo JS. Isso é proposital: se o
   JavaScript falhar, nada recebe .rv e a página aparece
   normalmente, em vez de ficar invisível para sempre.
   ============================================================ */
.rv{
  opacity:0;
  transform:translateY(22px);
  transition:
    opacity   .6s cubic-bezier(.22,1,.36,1),
    transform .6s cubic-bezier(.22,1,.36,1);
  will-change:opacity, transform;
}
.rv-on{
  opacity:1;
  transform:none;
  will-change:auto;
}

/* itens em sequência dentro da seção */
.rv-item{
  transition-delay:var(--rv-delay, 0ms);
  transform:translateY(16px);
}

@media (prefers-reduced-motion:reduce){
  .rv, .rv-item{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}

/* ============================================================
   REVISÃO — topo, ficha, checkout e mobile
   ============================================================ */

/* ---------- topo do produto ---------- */
.pr-marca{
  display:inline-block;
  font-size:.75rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--n-gold);
}
.pr-titulo{
  margin-top:10px;
  font-family:var(--serif);
  font-size:clamp(1.65rem,3.4vw,2.35rem);
  font-weight:600; color:var(--n-green);
  letter-spacing:-.018em; line-height:1.16;
}
.pr-slogan{
  margin-top:20px; padding-top:14px;
  border-top:1px solid var(--line);
  font-family:var(--serif); font-style:italic;
  font-size:.9375rem; color:var(--n-gold);
}

/* aviso: a árvore não acompanha */
.pr-aviso{
  margin-top:13px; padding:11px 14px;
  border-radius:11px;
  background:hsl(40 58% 40% / .09);
  border:1px solid hsl(40 58% 40% / .3);
  font-size:.8125rem; line-height:1.55;
  color:hsl(160 20% 30%);
}
.pr-aviso strong{ color:var(--n-green); }

.pr-selos{ flex-direction:column; gap:8px; }
.pr-selos li{ align-items:flex-start; line-height:1.5; }
.pr-selos b{ flex:none; margin-top:1px; }

/* ---------- lista do conteúdo da caixa ---------- */
.caixa-lista{
  list-style:none; margin:30px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(248px,1fr));
  gap:13px;
}
.caixa-lista li{
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-rows:auto auto;
  column-gap:13px; row-gap:3px;
  padding:16px 18px; border-radius:14px;
  background:var(--n-paper); border:1px solid var(--line);
}
.caixa-lista .ci{
  grid-row:1 / span 2;
  font-size:1.3125rem; line-height:1.2;
}
.caixa-lista strong{
  font-size:.9375rem; font-weight:600; color:var(--n-green);
}
.caixa-lista span:not(.ci){
  font-size:.8125rem; color:hsl(160 16% 42%); line-height:1.5;
}
.caixa-nota{
  margin-top:18px; text-align:center;
  font-size:.8125rem; color:hsl(160 14% 46%);
  max-width:62ch; margin-inline:auto;
}
.caixa-nota a{ color:var(--n-red); font-weight:600; }

/* ---------- ficha técnica ---------- */
.ficha{ padding:clamp(48px,6vw,80px) 0; background:var(--n-paper); }
.ficha-tabela{
  margin:30px auto 0; max-width:760px;
  border:1px solid var(--line); border-radius:var(--r);
  background:#fff; overflow:hidden;
  box-shadow:var(--shadow-s);
}
.ficha-tabela dl{ margin:0; }
.ficha-tabela dl > div{
  display:grid; grid-template-columns:minmax(150px,.85fr) 1fr;
  gap:16px;
  padding:14px 20px;
  border-bottom:1px solid var(--line);
}
.ficha-tabela dl > div:last-child{ border-bottom:0; }
.ficha-tabela dt{
  font-size:.8125rem; font-weight:600; color:hsl(160 22% 30%);
}
.ficha-tabela dd{
  margin:0; font-size:.875rem; color:hsl(160 16% 38%);
}
.ficha-pendente{
  color:hsl(160 10% 56%); font-style:italic;
}
.ficha-nota{
  margin:18px auto 0; max-width:62ch; text-align:center;
  font-size:.8125rem; color:hsl(160 14% 46%);
}
.ficha-nota a{ color:var(--n-red); font-weight:600; }

/* ---------- rodapé ---------- */
.foot-info{
  display:block; margin-top:4px;
  font-size:.8125rem; color:hsl(160 12% 52%);
}
.foot-legal{
  margin-top:30px; padding-top:18px;
  border-top:1px solid var(--line);
  font-size:.75rem; line-height:1.65;
  color:hsl(160 12% 50%);
  max-width:78ch; margin-inline:auto; text-align:center;
}
.foot-bot{ margin-top:14px; padding-top:0; border-top:0; }

/* ---------- checkout: resumo ---------- */
.sum-unit{ font-size:.75rem; color:hsl(160 14% 46%); }
.sum-aviso{
  margin:0 0 15px; padding:10px 13px;
  border-radius:10px;
  background:hsl(40 58% 40% / .09);
  border:1px solid hsl(40 58% 40% / .3);
  font-size:.75rem; line-height:1.5;
  color:hsl(160 20% 32%);
}
.sum-aviso strong{ color:var(--n-green); }
.sum-ajuda{
  margin-top:14px; padding-top:13px;
  border-top:1px solid var(--line);
  font-size:.8125rem; color:hsl(160 14% 46%);
}
.sum-ajuda a{ color:var(--n-red); font-weight:600; }

/* ---------- checkout: menos espaço vazio ---------- */
.page-checkout .checkout{ padding-top:14px; }
.page-checkout .co-intro{ margin-top:8px; margin-bottom:0; }
.page-checkout .co-layout{ margin-top:24px; }
.co-trail{ padding-top:16px; }

/* ---------- estado do pedido ---------- */
.done-status{
  display:inline-flex; align-items:center; gap:9px;
  margin-top:12px; padding:7px 17px;
  border-radius:999px;
  font-size:.8125rem; font-weight:600;
}
.done-status .ds-dot{
  width:8px; height:8px; border-radius:50%; flex:none;
}
.done-status.is-aguardando{
  background:hsl(40 72% 58% / .17); color:hsl(38 72% 30%);
}
.done-status.is-aguardando .ds-dot{
  background:hsl(38 80% 46%);
  animation:pixpulse 1.5s ease-in-out infinite;
}
.done-status.is-pago{
  background:hsl(150 58% 32% / .14); color:var(--ok);
}
.done-status.is-pago .ds-dot{ background:var(--ok); }

/* ============================================================
   MOBILE — 360 / 390 / 430 px
   ============================================================ */
@media (max-width:640px){
  /* nada deve vazar para os lados */
  html, body{ max-width:100%; overflow-x:hidden; }

  .wrap{ padding-inline:16px; }

  /* áreas de toque confortáveis */
  .grade{ min-height:56px; }
  .faq summary{ padding-block:18px; }

  .pr-titulo{ font-size:1.5rem; line-height:1.2; }
  .pr-resumo{ font-size:.9375rem; }
  .pr-aviso{ font-size:.78rem; }
  .pr-selos li{ font-size:.78rem; }

  .caixa-lista{ grid-template-columns:1fr; gap:10px; }
  .caixa-lista li{ padding:14px 15px; }

  .ficha-tabela dl > div{
    grid-template-columns:1fr;
    gap:3px; padding:13px 16px;
  }

  /* o WhatsApp não pode cobrir a barra de compra */
  .wpp{ bottom:92px; }

  /* a barra fixa não pode esconder o fim da página */
  body{ padding-bottom:74px; }
  .page-checkout body,
  body.page-checkout{ padding-bottom:0; }
}

/* telas bem estreitas (360px) */
@media (max-width:380px){
  .wrap{ padding-inline:13px; }
  .pr-titulo{ font-size:1.375rem; }
  .pr-por .val{ font-size:2.75rem; }
  .pr-grades{ gap:5px; }
  .btn-primary.big{ padding:17px 24px; font-size:1rem; }
  .sb-btn{ padding:12px 20px; font-size:.875rem; }
  .sb-price strong{ font-size:1.125rem; }
}

/* ============================================================
   AMBIENTAÇÃO NATALINA
   Paleta da referência:
     verde #123B2B · creme #FAF6ED · dourado #C5A052 · vinho #8B1E2D
   ============================================================ */
:root{
  --x-verde:   #123B2B;
  --x-verde-e: #0C2A1E;
  --x-creme:   #FAF6ED;
  --x-branco:  #FFFDF8;
  --x-ouro:    #C5A052;
  --x-ouro-cl: #E3C97F;
  --x-vinho:   #8B1E2D;
}

/* fundo creme com pontos dourados suaves só nas extremidades */
body{
  background:
    radial-gradient(640px 420px at -8% 6%,  hsl(40 60% 62% / .13), transparent 62%),
    radial-gradient(620px 400px at 108% 14%, hsl(40 60% 62% / .11), transparent 62%),
    radial-gradient(560px 380px at -6% 72%, hsl(40 60% 62% / .09), transparent 62%),
    radial-gradient(540px 360px at 106% 84%, hsl(40 60% 62% / .08), transparent 62%),
    var(--x-creme);
  background-attachment:fixed;
}


/* ---------- cabeçalho creme ---------- */
.nav{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:18px;
  padding:14px 20px 18px;
  background:hsl(42 50% 97% / .94);
  border-bottom:1px solid hsl(40 55% 55% / .22);
}
/* a marca e os links ficam juntos; o botão vai para a direita */
.nav .brand{ flex:none; }
.nav-links{ margin-left:auto; }
.brand-text{ color:var(--x-verde); letter-spacing:-.005em; }
.nav-links a{ color:hsl(160 22% 26%); }
.nav-links a:hover{ color:var(--x-vinho); border-bottom-color:var(--x-vinho); }

/* botão do topo */
.bn-ico{ color:var(--x-ouro-cl); font-size:.9375rem; line-height:1; }

/* ---------- fio de pisca-pisca ---------- */
.fio{
  position:absolute; left:0; right:0; bottom:-11px;
  height:24px; pointer-events:none;
}
.fio-cabo{ width:100%; height:22px; display:block; }

.fio-luzes{
  position:absolute; inset:0;
  display:flex; justify-content:space-around; align-items:flex-start;
  padding:0 2%;
}
.fio-luzes i{
  width:9px; height:9px; border-radius:50%;
  margin-top:7px;
  background:var(--x-ouro-cl);
  box-shadow:0 0 7px 2px hsl(40 80% 62% / .55);
  animation:lampada 3.4s ease-in-out infinite;
  animation-delay:var(--d, 0s);
}
/* alterna o tom: uma lâmpada sim, outra em âmbar mais quente */
.fio-luzes i:nth-child(even){
  background:#F2DCA0;
  box-shadow:0 0 7px 2px hsl(44 85% 70% / .5);
}
@keyframes lampada{
  0%, 100%{ opacity:.55; }
  50%     { opacity:1; }
}

/* ---------- ramos e flocos ---------- */
.ramos{
  position:absolute; top:0; left:0; right:0;
  height:520px;
  pointer-events:none; overflow:hidden;
  z-index:1;                  /* sempre atrás do cabeçalho e do conteúdo */
}
.ramo{
  position:absolute;
  top:96px;                   /* começa abaixo do fio de luzes */
  width:min(250px, 20vw); height:auto;
  opacity:.9;
  filter:drop-shadow(0 6px 14px hsl(160 40% 12% / .14));
}
.ramo-e{ left:-52px; }
.ramo-d{ right:-52px; transform:scaleX(-1); }

.floco{
  position:absolute;
  width:38px; height:38px;
  opacity:.4;
}
.floco-1{ top:286px; left:2.2%;  width:30px; height:30px; }
.floco-2{ top:352px; right:2%;   width:34px; height:34px; opacity:.3; }
.floco-3{ top:430px; left:4%;    width:24px; height:24px; opacity:.24; }

/* o conteúdo fica acima da decoração */
.produto{ position:relative; z-index:2; }

/* ============================================================
   PRIMEIRA SEÇÃO
   ============================================================ */
.produto{
  padding-top:clamp(20px,3vw,34px);
  background:transparent;
}
.pr-layout{ align-items:start; }
.pr-compra{
  display:flex; flex-direction:column; justify-content:center;
  min-height:100%;
  padding-top:clamp(4px,1.5vw,20px);
}

.pr-principal{
  border-radius:20px;
  border:1px solid hsl(40 55% 55% / .3);
  box-shadow:0 16px 44px hsl(160 40% 12% / .16);
}

.pr-marca{
  color:var(--x-ouro);
  font-size:.75rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
}

.pr-titulo{
  margin-top:12px;
  color:var(--x-verde);
  font-size:clamp(2rem,4.3vw,3.4rem);
  line-height:1.05; letter-spacing:-.022em;
}

.pr-resumo{
  margin-top:16px;
  font-size:clamp(1rem,1.5vw,1.125rem);
  color:hsl(160 18% 32%);
  max-width:44ch;
}

/* benefícios em linha, com divisores */
.pr-bens{
  list-style:none; margin:26px 0 0; padding:0;
  display:flex; flex-wrap:wrap; align-items:center;
  gap:0;
}
.pr-bens li{
  display:flex; align-items:center; gap:11px;
  padding:0 20px;
  border-left:1px solid hsl(40 55% 55% / .34);
}
.pr-bens li:first-child{ padding-left:0; border-left:0; }
.pr-bens .bi{
  width:25px; height:25px; flex:none;
  fill:none; stroke:var(--x-verde);
  stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
}
.pr-bens span{
  display:flex; flex-direction:column;
  font-size:.8125rem; line-height:1.35;
  color:hsl(160 16% 38%);
}
.pr-bens strong{
  font-size:.9062rem; font-weight:600; color:var(--x-verde);
}

/* preço em vinho */
.pr-preco{
  margin-top:26px; padding:0;
  background:transparent; border:0;
}
.pr-por{ color:var(--x-verde); margin-top:0; }
.pr-por .val{ font-size:clamp(2.9rem,6vw,4rem); }
.pr-por .cur{ font-size:clamp(1.5rem,3vw,2rem); margin-top:6px; }
.pr-por .cent{ font-size:clamp(1.5rem,3vw,2rem); margin-top:6px; }

.pr-frete{
  display:flex; align-items:center; gap:9px;
  margin-top:8px;
  font-size:.9375rem; font-weight:500;
  color:hsl(160 20% 30%);
}
.pr-parc{
  display:block; margin-top:6px;
  font-size:.8125rem; color:hsl(160 14% 46%);
}

.mi{
  width:19px; height:19px; flex:none;
  fill:none; stroke:var(--x-ouro);
  stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
}

/* botão principal verde */
.btn-natal{
  margin-top:20px;
  background:linear-gradient(135deg, var(--x-verde), #1B5740);
  color:var(--x-creme);
  font-size:1rem; font-weight:600;
  letter-spacing:.055em; text-transform:uppercase;
  padding:19px 32px;
  box-shadow:0 10px 26px hsl(160 44% 12% / .3);
}
.btn-natal:hover{
  background:linear-gradient(135deg, #17492F, #22684A);
  transform:translateY(-2px);
  box-shadow:0 15px 34px hsl(160 44% 12% / .38);
}
/* sem brilho em laço: só reage ao passar o mouse */
.btn-natal::after{ animation:none; content:none; }
.bp-ico{ color:var(--x-ouro-cl); font-size:1.125rem; line-height:1; }
.bp-seta{ font-size:1.125rem; transition:transform .22s; }
.btn-natal:hover .bp-seta{ transform:translateX(4px); }

/* notas abaixo do botão */
.pr-notas{
  list-style:none; margin:18px 0 0; padding:0;
  display:flex; flex-direction:column; gap:9px;
}
.pr-notas li{
  display:flex; align-items:flex-start; gap:10px;
  font-size:.8125rem; line-height:1.5;
  color:hsl(160 16% 40%);
}
.pr-notas .mi{ margin-top:1px; }
.pr-notas strong{ color:var(--x-verde); font-weight:600; }

/* ---------- separador dourado com estrela ---------- */
.sep{
  display:flex; align-items:center; justify-content:center;
  gap:16px;
  max-width:var(--max); margin:0 auto;
  padding:clamp(26px,4vw,42px) 20px;
}
.sep-linha{
  flex:1; max-width:300px; height:1px;
  background:linear-gradient(90deg, transparent, hsl(40 55% 50% / .5), transparent);
}
.sep-estrela{
  width:20px; height:20px; flex:none;
  fill:var(--x-ouro); opacity:.85;
}

/* ============================================================
   SEÇÕES — variação sutil de fundo
   ============================================================ */
.reels     { background:transparent; }
.efeitos   { background:var(--x-branco); }
.depo      { background:transparent; }
.beforeafter{ background:var(--x-branco); }
.steps     { background:transparent; }
.box       { background:var(--x-branco); }
.ficha     { background:transparent; }
.guar      { background:var(--x-branco); }
.faq       { background:transparent; }

.h2{ color:var(--x-verde); }
.eyebrow{ color:var(--x-ouro); }
.eyebrow .dot{
  background:var(--x-vinho);
  box-shadow:0 0 0 4px hsl(354 64% 33% / .15);
}

/* cartões dos vídeos */
.reel{
  border-radius:18px;
  border:1px solid hsl(40 55% 55% / .3);
  background:var(--x-verde-e);
}
.reel figcaption{
  background:linear-gradient(transparent, hsl(160 46% 7% / .9));
}

/* ---------- rodapé verde ---------- */
.foot{
  position:relative;
  background:var(--x-verde);
  border-top:0;
  color:hsl(40 32% 86%);
  padding-top:54px;
}
.foot::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,
    transparent, hsl(40 60% 58% / .7), hsl(40 60% 58% / .35), hsl(40 60% 58% / .7), transparent);
}
.foot .brand-text{ color:var(--x-creme); }
.foot h4{ color:var(--x-ouro-cl); }
.foot-grid a{ color:hsl(40 28% 82%); }
.foot-grid a:hover{ color:var(--x-ouro-cl); }
.foot-addr,
.foot-info{ color:hsl(40 22% 70%); }
.foot-legal{
  border-top-color:hsl(40 55% 55% / .22);
  color:hsl(40 20% 66%);
}
.foot-bot{ color:hsl(40 18% 60%); border-top:0; }

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width:1180px){
  .ramos{ height:420px; }
  .ramo{ top:92px; width:min(190px, 19vw); }
}
@media (max-width:980px){
  .ramos{ height:340px; }
  .ramo{ top:88px; width:min(160px, 22vw); opacity:.8; }
}

@media (max-width:640px){
  .nav{ padding-bottom:14px; }
  .bn-ico{ font-size:.8125rem; }

  /* decoração menor e só nas bordas */
  .ramos{ height:250px; }
  .ramo{ top:78px; width:118px; opacity:.68; }
  .ramo-e{ left:-42px; }
  .ramo-d{ right:-42px; }
  .floco-1{ top:196px; left:1.5%; width:20px; height:20px; opacity:.26; }
  .floco-2{ top:232px; right:1.5%; width:22px; height:22px; opacity:.22; }
  .floco-3{ display:none; }

  .fio-luzes i{ width:7px; height:7px; }
  .fio-luzes i:nth-child(n+13){ display:none; }

  /* benefícios empilhados, sem encolher a fonte */
  .pr-bens{ flex-direction:column; align-items:stretch; gap:11px; }
  .pr-bens li{
    padding:0; border-left:0;
    border-top:1px solid hsl(40 55% 55% / .26);
    padding-top:11px;
  }
  .pr-bens li:first-child{ border-top:0; padding-top:0; }

  .pr-titulo{ font-size:1.75rem; }
  .pr-por .val{ font-size:2.9rem; }
  .btn-natal{ padding:17px 20px; font-size:.875rem; letter-spacing:.04em; }

  .sep{ padding-block:22px; }
  .sep-linha{ max-width:90px; }
}

@media (max-width:380px){
  .ramo{ width:112px; }
  .pr-titulo{ font-size:1.5625rem; }
  .btn-natal{ font-size:.8125rem; padding:16px 14px; gap:7px; }
  .bp-seta{ display:none; }
}

/* ---------- movimento reduzido ---------- */
@media (prefers-reduced-motion:reduce){
  .fio-luzes i{ animation:none; opacity:.85; }
  .ramo, .floco{ animation:none; }
}

/* ---------- correções de 360/390/430 ---------- */
@media (max-width:640px){
  /* o botão do topo não pode cortar: texto curto no celular */

  /* miniaturas sempre dentro da tela */
  .pr-grades{
    grid-template-columns:repeat(5, minmax(0, 1fr));
    gap:6px;
  }
  .grade{ min-height:0; }
  .grade img{ aspect-ratio:1; }

  /* nada vaza para os lados */
  .pr-layout{ min-width:0; }
  .pr-galeria, .pr-compra{ min-width:0; max-width:100%; }
}

@media (max-width:380px){
  .pr-grades{ gap:4px; }
}

/* nenhum bloco pode ultrapassar a largura da tela */
.wrap{ min-width:0; }
.pr-layout, .pr-galeria, .pr-compra, .pr-grades{ min-width:0; max-width:100%; }
.pr-principal, .pr-principal img{ max-width:100%; }
.grade, .grade img{ max-width:100%; min-width:0; }

/* ============================================================
   CARRINHO
   ============================================================ */
.page-carrinho{ background:var(--x-creme); }

.carrinho{
  padding:18px 0 clamp(50px,7vw,86px);
}
.carrinho .h2{ margin-top:6px; }

.cr-layout{
  margin-top:30px;
  display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,.9fr);
  gap:24px; align-items:start;
}

/* ---------- item ---------- */
.cr-item{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:20px; align-items:start;
  padding:22px;
  border:1px solid var(--line); border-radius:var(--r);
  background:#fff; box-shadow:var(--shadow-s);
}
.cr-foto{
  display:block; line-height:0;
  border-radius:13px; overflow:hidden;
  border:1px solid var(--line);
  flex:none;
}
.cr-foto img{
  width:108px; height:108px;
  object-fit:cover;
  transition:transform .4s cubic-bezier(.22,1,.36,1);
}
.cr-foto:hover img{ transform:scale(1.05); }

.cr-info{ min-width:0; }
.cr-nome{
  font-family:var(--serif); font-size:1.0625rem; font-weight:600;
  color:var(--x-verde); line-height:1.3;
}
.cr-sub{
  margin-top:6px;
  font-size:.8125rem; color:hsl(160 14% 46%);
}
.cr-aviso{
  margin-top:11px; padding:9px 12px;
  border-radius:10px;
  background:hsl(40 58% 40% / .09);
  border:1px solid hsl(40 58% 40% / .3);
  font-size:.75rem; line-height:1.5;
  color:hsl(160 20% 32%);
}
.cr-aviso strong{ color:var(--x-verde); }

.cr-lado{
  display:flex; flex-direction:column; align-items:flex-end; gap:11px;
  min-width:150px;
}
.cr-unit{
  font-size:.8125rem; font-weight:600; color:hsl(160 20% 32%);
  text-align:right;
}
.cr-unit span{ display:block; font-weight:400; color:hsl(160 12% 54%); }
.cr-subtotal{
  font-family:var(--serif); font-size:1.3125rem; font-weight:600;
  color:var(--x-vinho); letter-spacing:-.015em;
}

.cr-limite{
  margin-top:12px; font-size:.8125rem;
  color:hsl(38 72% 32%);
}
.cr-limite:empty{ display:none; }

/* ---------- resumo ---------- */
.cr-resumo{ position:sticky; top:88px; }

.cr-pix{
  display:flex; align-items:center; gap:9px;
  margin-top:15px; padding:12px 14px;
  border-radius:11px;
  background:hsl(150 58% 32% / .08);
  border:1px solid hsl(150 58% 32% / .26);
  font-size:.8125rem; color:hsl(160 20% 30%);
}
.cr-pix strong{ color:var(--ok); }
.cr-pix-ico{ font-size:1rem; line-height:1; }

.cr-resumo .btn-primary{ margin-top:16px; }
.cr-voltar{
  display:block; margin-top:12px; text-align:center;
  font-size:.8125rem; color:hsl(160 16% 42%);
  text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:var(--line);
}
.cr-voltar:hover{ color:var(--x-vinho); text-decoration-color:currentColor; }

/* ============================================================
   CHECKOUT — só PIX
   ============================================================ */
.pay-pix{
  display:flex; align-items:center; gap:13px;
  margin-top:15px; padding:15px 17px;
  border-radius:13px;
  border:1px solid hsl(150 58% 32% / .34);
  background:hsl(150 58% 32% / .07);
}
.pay-pix .pay-ico{ font-size:1.3125rem; line-height:1; }
.pay-pix .pay-txt{ display:flex; flex-direction:column; line-height:1.35; }
.pay-pix .pay-txt strong{ font-size:.9375rem; color:var(--x-verde); }
.pay-pix .pay-txt small{ font-size:.75rem; color:hsl(160 14% 46%); }
.pay-pix .pay-tag{
  margin-left:auto; padding:4px 11px; border-radius:999px;
  background:hsl(150 58% 32% / .15); color:var(--ok);
  font-size:.6875rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
}

.pay-passo{
  margin-top:12px;
  font-size:.8125rem; line-height:1.55;
  color:hsl(160 14% 46%);
}
.pay-passo strong{ color:var(--x-verde); font-weight:600; }

/* quantidade fixa no resumo do checkout */
.qty-fixa{
  display:inline-flex; align-items:center; gap:9px;
  font-size:.875rem;
}
.qty-fixa strong{
  min-width:26px; padding:3px 9px;
  border-radius:8px;
  background:var(--n-cream); border:1px solid var(--line);
  text-align:center; color:var(--x-verde);
}
.qty-fixa a{
  font-size:.75rem; color:var(--x-vinho);
  text-decoration:underline; text-underline-offset:3px;
}

/* ---------- trilha com 4 etapas ---------- */
.co-trail li + li::before{ width:16px; margin-right:9px; }

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width:980px){
  .cr-layout{ grid-template-columns:1fr; }
  .cr-resumo{ position:static; }
}

@media (max-width:640px){
  .carrinho{ padding-top:12px; }

  .cr-item{
    grid-template-columns:auto 1fr;
    gap:14px; padding:16px;
  }
  .cr-foto img{ width:76px; height:76px; }
  .cr-nome{ font-size:.9375rem; }

  /* preço e quantidade passam para a linha de baixo */
  .cr-lado{
    grid-column:1 / -1;
    flex-direction:row; align-items:center;
    justify-content:space-between;
    gap:12px; min-width:0;
    padding-top:14px; margin-top:4px;
    border-top:1px solid var(--line);
  }
  .cr-unit{ text-align:left; font-size:.75rem; }
  .cr-subtotal{ font-size:1.1875rem; }

  .co-trail{ font-size:.6875rem; gap:5px 9px; }
  .co-trail li + li::before{ width:10px; margin-right:5px; }
  .co-trail span{ width:20px; height:20px; font-size:.625rem; }
}

@media (max-width:380px){
  .cr-lado{ flex-wrap:wrap; }
  .cr-unit{ width:100%; }
}

/* ============================================================
   CARRINHO — espaçamento mais compacto e valor em verde
   ============================================================ */
.page-carrinho .co-trail{ padding:14px 20px 0; }

.carrinho{ padding:10px 0 clamp(34px,5vw,56px); }
.carrinho .eyebrow{ margin-bottom:2px; }
.carrinho .h2{
  margin-top:2px;
  font-size:clamp(1.6rem,3.4vw,2.2rem);
}

.cr-layout{ margin-top:20px; gap:18px; }

.cr-item{ gap:16px; padding:18px; }
.cr-foto img{ width:92px; height:92px; }
.cr-nome{ font-size:1rem; }
.cr-sub{ margin-top:4px; }
.cr-aviso{ margin-top:9px; padding:8px 11px; }

.cr-lado{ gap:9px; min-width:140px; }

/* valor do produto em verde */
.cr-subtotal{ color:var(--x-verde); }
.sum-total dd{ color:var(--x-verde); }

.sum-card{ padding:20px 19px; }
.sum-title{ padding-bottom:12px; }
.sum-lines{ padding-top:13px; }
.cr-pix{ margin-top:13px; padding:10px 13px; }
.cr-resumo .btn-primary{ margin-top:14px; }
.cr-voltar{ margin-top:10px; }
.sum-perks{ margin-top:14px; padding-top:13px; gap:7px; }
.sum-ajuda{ margin-top:12px; padding-top:11px; }

@media (max-width:640px){
  .page-carrinho .co-trail{ padding-top:11px; }
  .carrinho{ padding-top:6px; }
  .cr-layout{ margin-top:15px; gap:14px; }
  .cr-item{ padding:15px; gap:12px; }
  .cr-foto img{ width:72px; height:72px; }
  .cr-lado{ padding-top:12px; }
  .sum-card{ padding:17px 16px; }
}

/* a trilha de etapas é uma linha só: sem altura excedente */
.co-trail{
  align-items:center;
  min-height:0; line-height:1.3;
}
.co-trail li{ line-height:1.3; }
.page-carrinho .co-trail{ padding:14px 20px 4px; }

/* cada etapa ocupa só a altura do seu conteúdo */
.co-trail{ align-content:center; }
.co-trail li{ align-self:center; height:auto; flex:0 0 auto; }

/* ---------- cabeçalho no celular ---------- */
@media (max-width:640px){
  /* sem os links de navegação, é o botão que vai para a direita */


  .nav{ gap:12px; padding:11px 16px 15px; }
  .brand-text{ font-size:1rem; }
  .brand-mark{ font-size:1.0625rem; }
}

@media (max-width:380px){
  .brand-text{ font-size:.9375rem; }
}

/* ---------- cabeçalho: o botão nunca sai da tela ---------- */
.nav{ max-width:100%; box-sizing:border-box; }
.nav .brand{ min-width:0; flex:0 1 auto; overflow:hidden; }
.nav .brand-text{ white-space:nowrap; }

@media (max-width:640px){
  /* a marca cede espaço; o botão mantém o tamanho e fica à direita */
  .nav .brand{ flex:1 1 auto; }
  .nav-links{ display:none; }
}

/* ============================================================
   BOTÃO DO CABEÇALHO — regra única
   ============================================================ */
.btn-nav{
  display:inline-flex; align-items:center; gap:8px;
  flex:0 0 auto; margin-left:auto;
  padding:11px 22px; border-radius:999px;
  background:var(--x-verde); color:var(--x-creme);
  text-decoration:none; white-space:nowrap;
  font-size:.8125rem; font-weight:600;
  letter-spacing:.055em; text-transform:uppercase;
  box-shadow:0 3px 12px hsl(160 44% 10% / .22);
  transition:background .18s, transform .18s;
}
.btn-nav:hover{ background:#1A5139; transform:translateY(-1px); }
.btn-nav .bn-ico{ color:var(--x-ouro-cl); font-size:.9375rem; line-height:1; }

@media (max-width:760px){
  /* sem os links, o botão encurta e vai para a direita */
  .nav-links{ display:none; }
  .btn-nav{
    padding:9px 16px; gap:6px;
    font-size:.6875rem; letter-spacing:.05em;
  }
  .btn-nav .rotulo-longo{ display:none; }
  .btn-nav .bn-ico{ font-size:.8125rem; }
}

@media (max-width:380px){
  .btn-nav{ padding:8px 13px; font-size:.625rem; gap:5px; }
  .btn-nav .bn-ico{ font-size:.75rem; }
}

/* ============================================================
   PREÇO — verde vivo, separado do verde dos títulos
   ------------------------------------------------------------
   Os títulos usam #123B2B (quase preto). Para o preço saltar,
   usamos um verde mais saturado e mais claro.
   ============================================================ */
:root{ --preco: hsl(152 68% 30%); }

/* página do produto */
.pr-por{ color:var(--preco); }

/* barra fixa do celular */
.sb-price strong{ color:var(--preco); }

/* carrinho */
.cr-subtotal{ color:var(--preco); }
.sum-total dd{ color:var(--preco); }

/* checkout */
.checkout .sum-total dd{ color:var(--preco); }

/* ---------- aviso abaixo da galeria ---------- */
.pr-ilustrativa{
  margin-top:11px;
  font-size:.75rem; line-height:1.5;
  color:hsl(160 14% 48%);
  text-align:center;
}

/* a imagem principal é quadrada: reserva o espaço para não saltar */
.pr-principal{ aspect-ratio:1; }
.pr-principal img{
  width:100%; height:100%;
  object-fit:cover;
}

/* ============================================================
   ORDER BUMPS — itens adicionais no checkout
   ============================================================ */
.co-bumps{ border-color:hsl(40 55% 50% / .45); }
.co-bumps .co-step{ background:var(--x-ouro); color:#fff; }

.bump-intro{
  margin-top:4px; margin-bottom:13px;
  font-size:.8125rem; color:hsl(160 14% 46%);
}

.bump{
  display:flex; align-items:center; gap:12px;
  padding:13px 15px; margin-bottom:9px;
  border:1px solid var(--line); border-radius:13px;
  background:var(--n-paper);
  cursor:pointer;
  transition:border-color .18s, background .18s, box-shadow .18s;
}
.bump:last-of-type{ margin-bottom:0; }
.bump:hover{ border-color:hsl(40 55% 50% / .6); }
.bump.is-on{
  border-color:var(--ok); background:hsl(150 58% 32% / .06);
  box-shadow:0 0 0 2px hsl(150 58% 32% / .12);
}

/* a caixa de marcação é desenhada; o input fica acessível mas invisível */
.bump-check{
  position:absolute; opacity:0; width:0; height:0;
}
.bump-box{
  width:21px; height:21px; flex:none;
  border:2px solid hsl(160 16% 62%); border-radius:6px;
  background:#fff;
  position:relative;
  transition:border-color .18s, background .18s;
}
.bump-box::after{
  content:""; position:absolute;
  left:6px; top:2px; width:5px; height:10px;
  border:solid #fff; border-width:0 2.5px 2.5px 0;
  transform:rotate(45deg) scale(0);
  transition:transform .18s cubic-bezier(.22,1.4,.36,1);
}
.bump.is-on .bump-box{ background:var(--ok); border-color:var(--ok); }
.bump.is-on .bump-box::after{ transform:rotate(45deg) scale(1); }
.bump-check:focus-visible + .bump-box{
  outline:3px solid var(--gold-lt); outline-offset:2px;
}

.bump-ico{ font-size:1.25rem; line-height:1; flex:none; }
.bump-txt{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.bump-txt strong{ font-size:.875rem; font-weight:600; color:var(--x-verde); line-height:1.3; }
.bump-txt small{ font-size:.75rem; color:hsl(160 14% 48%); line-height:1.4; }
.bump-preco{
  flex:none; font-size:.875rem; font-weight:700;
  color:var(--preco); white-space:nowrap;
}

/* ---------- brindes no resumo ---------- */
.sum-brindes{
  margin-top:15px; padding:13px 14px;
  border-radius:11px;
  background:hsl(40 58% 40% / .08);
  border:1px dashed hsl(40 58% 40% / .42);
}
.sb-tag{
  display:inline-block; margin-bottom:7px;
  font-size:.6875rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--x-ouro);
}
.sum-brindes ul{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:6px;
}
.sum-brindes li{
  display:flex; align-items:flex-start; gap:8px;
  font-size:.78rem; line-height:1.45;
  color:hsl(160 18% 34%);
}

/* ---------- lista de separação no admin ---------- */
.ped-itens{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:7px;
}
.ped-itens li{
  display:flex; align-items:baseline; gap:8px;
  font-size:.8125rem; color:hsl(160 18% 34%); line-height:1.4;
}
.ped-itens b{
  flex:none; min-width:26px;
  font-weight:700; color:var(--n-green);
}
.ped-itens .is-brinde{ color:hsl(160 14% 46%); }
.ped-itens .is-brinde span{
  padding:1px 7px; border-radius:999px;
  background:hsl(40 58% 40% / .16); color:var(--n-gold);
  font-size:.625rem; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase;
}
.ped-add-val{
  margin-top:10px; padding-top:9px;
  border-top:1px solid var(--line);
  font-size:.75rem; font-weight:600; color:var(--ok);
}

@media (max-width:640px){
  .bump{ padding:12px; gap:10px; }
  .bump-ico{ display:none; }
  .bump-txt strong{ font-size:.8125rem; }
  .bump-preco{ font-size:.8125rem; }
}

/* o atributo hidden não vence o display:flex das linhas do resumo */
.sum-lines > div[hidden]{ display:none; }

/* ============================================================
   CARD DE BRINDES — abaixo do preço
   ============================================================ */
.brinde-card{
  position:relative;
  margin-top:18px; padding:16px 18px 15px;
  border-radius:15px;
  background:linear-gradient(135deg, hsl(40 58% 40% / .10), hsl(40 58% 40% / .05));
  border:1px solid hsl(40 55% 50% / .4);
  overflow:hidden;
}

/* fita dourada no canto, como um laço de presente */
.brinde-fita{
  position:absolute; top:0; right:0;
  width:74px; height:74px;
  background:linear-gradient(135deg, transparent 50%, hsl(40 62% 52% / .22) 50%);
  pointer-events:none;
}

.brinde-topo{
  display:flex; align-items:center; gap:11px;
  position:relative; z-index:1;
}
.brinde-ico{
  font-size:1.375rem; line-height:1; flex:none;
  filter:drop-shadow(0 2px 4px hsl(40 60% 30% / .3));
}
.brinde-tit{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.brinde-tit strong{
  font-size:.9375rem; font-weight:700;
  color:var(--x-verde); letter-spacing:-.005em;
}
.brinde-tit span{
  font-size:.75rem; color:hsl(160 14% 46%);
}
.brinde-sel{
  margin-left:auto; flex:none;
  padding:5px 13px; border-radius:999px;
  background:var(--x-ouro); color:#fff;
  font-size:.6875rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  box-shadow:0 2px 7px hsl(40 60% 35% / .3);
}

.brinde-lista{
  list-style:none; margin:13px 0 0; padding:13px 0 0;
  border-top:1px dashed hsl(40 55% 50% / .45);
  display:flex; flex-direction:column; gap:9px;
  position:relative; z-index:1;
}
.brinde-lista li{
  display:flex; align-items:center; gap:10px;
  font-size:.8438rem; line-height:1.4;
  color:hsl(160 20% 30%);
}
.bl-ico{
  width:19px; height:19px; flex:none;
  fill:none; stroke:var(--x-ouro);
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
}

@media (max-width:640px){
  .brinde-card{ padding:14px 15px 13px; margin-top:15px; }
  .brinde-tit strong{ font-size:.875rem; }
  .brinde-tit span{ font-size:.6875rem; }
  .brinde-sel{ padding:4px 10px; font-size:.625rem; }
  .brinde-lista li{ font-size:.78rem; }
  .brinde-fita{ width:56px; height:56px; }
}

@media (max-width:380px){
  .brinde-ico{ font-size:1.1875rem; }
  .brinde-lista li{ font-size:.75rem; gap:8px; }
}

/* ============================================================
   MARCA — Encanto de Natal
   ============================================================ */
.brand{ gap:11px; }
.brand-logo{
  width:auto; height:40px; flex:none;
  mix-blend-mode:multiply;   /* some o fundo creme da arte */
}
.brand-text{
  font-family:var(--serif);
  font-size:1.0625rem; font-weight:600;
  line-height:1.08; letter-spacing:-.008em;
  color:var(--x-verde);
}
.brand-text span{ display:block; }

/* o login do admin usa a logo completa */
.login-mark{ display:block; }
.login-logo{ width:150px; height:auto; margin:0 auto; mix-blend-mode:multiply; }

@media (max-width:640px){
  .brand{ gap:8px; }
  .brand-logo{ height:32px; }
  .brand-text{ font-size:.875rem; }
}

@media (max-width:380px){
  .brand-logo{ height:28px; }
  .brand-text{ font-size:.8125rem; }
}