/* ============================================================
   Burntide DTC — design tokens (flattened from the old _ds/)
   ============================================================ */

/* ---- tokens/colors ---- */
:root{
  /* ═══ BURNTIDE "fire-tide" palette — remapped over the template's token names ═══
     Brand: brown #6B2014 / deep #4d1409 · CTA lava #D63D14 (hover #A8240E)
     Saffron #F2B233 · Ember #E8651C · Lime ribbon #D9E84A · Cream #FFF8E7 */

  /* ---- Brand accent (was orange → now LAVA) ---- */
  --hw-orange:#D63D14;
  --hw-orange-hover:#A8240E;
  --hw-orange-dark:#A8240E;
  --hw-orange-deep:#C4500F;
  --hw-orange-light:#E8651C;
  --hw-orange-print:#A8240E;
  --hw-orange-soft:rgba(214,61,20,0.10);
  --hw-orange-soft-12:rgba(214,61,20,0.12);
  --hw-orange-border:rgba(214,61,20,0.35);

  /* ---- CTA ramp (was gold → now lava/ember) + featured lime ---- */
  --hw-gold-1:#E8651C;
  --hw-gold-2:#D63D14;
  --hw-gold-3:#A8240E;
  --hw-gold-4:#7E1B08;
  --hw-gold-ink:#FFF8E7;
  --hw-gold-featured:#D9E84A;
  --hw-gold-featured-edge:#E9F55C;

  /* ---- Saffron (countdown / scarcity) ---- */
  --hw-yellow:#F2B233;
  --hw-yellow-bright:#F7C95F;
  --hw-yellow-amber:#F2B233;
  --hw-yellow-bar-1:#F7C95F;
  --hw-yellow-bar-2:#F2B233;
  --hw-yellow-bar-3:#D89A18;

  /* ---- Semantic ---- */
  /* verde escurecido p/ WCAG AA: branco 4.99 · sobre cream 4.72 */
  --hw-green:#178043;
  --hw-green-live:#178043;
  --hw-green-check:#178043;
  --hw-red:#E23B2E;
  --hw-red-alert:#C0392B;
  --hw-red-bar:#A8240E;
  --hw-red-soft:#FF7575;
  --hw-trustpilot:#00B67A;
  --hw-trustpilot-fold:#005128;
  --hw-facebook:#1877f2;

  /* ---- Dark surfaces → BROWN ramp ---- */
  --hw-page:#4d1409;
  --hw-page-deep:#3A0E06;
  --hw-band:#6B2014;
  --hw-surface:#5A1B0E;
  --hw-surface-alt:#451208;
  --hw-surface-card:#5A1B0E;
  --hw-surface-elevated:#7A2717;
  --hw-surface-black:#2E0B04;

  /* ---- Warm dark surfaces (guarantee band) ---- */
  --hw-warm-page:#4d1409;
  --hw-warm-card:#6B2014;
  --hw-warm-soft:#5A1B0E;
  --hw-warm-cream:#7A2717;
  --hw-warm-timer:#451208;
  --hw-warm-scarcity-1:#6B2014;
  --hw-warm-scarcity-2:#451208;
  --hw-brown-ink:#3A1109;

  /* ---- Light islands → CREAM ---- */
  --hw-light-band:#FFF8E7;
  --hw-light-surface:#FFFFFF;
  --hw-light-surface-alt:#FDF3DF;
  --hw-light-ink:#6B2014;
  --hw-light-body:#3D342D;
  --hw-light-muted:#6F6258;
  --hw-light-grey:#F1E8D2;

  /* ---- Text on dark (warm cream tones) ---- */
  --hw-ink:#FFFFFF;
  --hw-text:#F7EFDF;
  --hw-text-body:#EAD9C4;
  --hw-text-soft:#E0CDB4;
  --hw-muted:#C9AE94;
  --hw-muted-deep:#A98F75;
  --hw-disabled:#8A705A;

  /* ---- Lines ---- */
  --hw-line:rgba(255,255,255,0.12);
  --hw-line-soft:rgba(255,255,255,0.06);
  --hw-line-strong:rgba(255,255,255,0.22);
  --hw-line-light:rgba(107,32,20,0.14);
  --hw-line-light-strong:rgba(107,32,20,0.30);
}

/* ---- tokens/typography ---- */
:root{
  /* Display (Anton) — always UPPERCASE, weight 400, tight leading */
  --hw-display-hero:clamp(1.42rem,5.6vw,2.9rem); /* @kind font */
  --hw-display-xl:clamp(1.55rem,6vw,2.6rem); /* @kind font */
  --hw-display-lg:clamp(1.5rem,5.6vw,2.4rem); /* @kind font */
  --hw-display-md:clamp(1.25rem,4.8vw,1.7rem); /* @kind font */
  --hw-display-sm:1.5rem; /* @kind font */
  --hw-display-xs:1.18rem; /* @kind font */
  --hw-display-leading:1.08; /* @kind other */
  --hw-display-tracking:0.01em; /* @kind other */
  --hw-display-weight:400; /* @kind other */

  /* Price numeral (Anton, per-bottle figure) */
  --hw-price-big:clamp(3.4rem,12vw,4rem); /* @kind font */

  /* Body (Manrope) */
  --hw-body-lg:1.06rem; /* @kind font */
  --hw-body-md:1rem; /* @kind font */
  --hw-body-sm:0.95rem; /* @kind font */
  --hw-body-xs:0.85rem; /* @kind font */
  --hw-body-2xs:0.76rem; /* @kind font */
  --hw-body-leading:1.6; /* @kind other */
  --hw-body-leading-loose:1.75; /* @kind other */
  --hw-weight-regular:400; /* @kind other */
  --hw-weight-medium:500; /* @kind other */
  --hw-weight-semibold:600; /* @kind other */
  --hw-weight-bold:700; /* @kind other */
  --hw-weight-heavy:800; /* @kind other */
  --hw-weight-black:900; /* @kind other */

  /* Mono (Space Mono) — eyebrows, stock counters, legal microcopy */
  --hw-mono-md:0.9rem; /* @kind font */
  --hw-mono-sm:0.82rem; /* @kind font */
  --hw-mono-xs:0.72rem; /* @kind font */
  --hw-mono-tracking:0.16em; /* @kind other */
  --hw-mono-tracking-tight:0.08em; /* @kind other */

  /* Brush (Permanent Marker) — brand bar + expert signatures only */
  --hw-brush-hero:42px; /* @kind font */
  --hw-brush-signature:28px; /* @kind font */

  /* Eyebrow / label */
  --hw-eyebrow-size:0.72rem; /* @kind font */
  --hw-eyebrow-tracking:0.16em; /* @kind other */
}

/* ---- tokens/spacing ---- */
:root{
  /* Raw scale as used across the funnel CSS */
  --hw-space-1:2px;
  --hw-space-2:4px;
  --hw-space-3:6px;
  --hw-space-4:8px;
  --hw-space-5:10px;
  --hw-space-6:12px;
  --hw-space-7:14px;
  --hw-space-8:16px;
  --hw-space-9:18px;
  --hw-space-10:20px;
  --hw-space-11:22px;
  --hw-space-12:26px;
  --hw-space-13:30px;
  --hw-space-14:34px;
  --hw-space-15:40px;
  --hw-space-16:46px;
  --hw-space-17:56px;
  --hw-space-18:64px;

  /* Section rhythm — every major band is 64px top/bottom on desktop */
  --hw-section-y:64px;
  --hw-section-y-compact:44px;
  --hw-gutter:20px;
  --hw-gutter-tight:16px;

  /* Containers */
  --hw-content-max:1180px;
  --hw-wide-max:1320px;
  --hw-prose-max:820px;
  --hw-narrow-max:760px;
  --hw-page-max:900px;
  --hw-card-column-max:440px;
  --hw-header-height:64px;

  /* Minimum touch target enforced site-wide under 860px */
  --hw-touch-min:44px;
}

/* ---- tokens/radius-shadow ---- */
:root{
  --hw-radius-xs:4px;
  --hw-radius-sm:6px;
  --hw-radius-md:12px;
  --hw-radius-lg:20px;
  --hw-radius-card:18px;
  --hw-radius-btn:10px;
  --hw-radius-pill:999px;

  /* The house shadow — very long, very soft, almost pure black */
  --hw-shadow:0 30px 70px -24px rgba(0,0,0,0.85);
  --hw-shadow-card:0 16px 40px rgba(0,0,0,0.45);
  --hw-shadow-soft:0 8px 22px -10px rgba(0,0,0,0.45);
  --hw-shadow-gold:0 10px 26px -10px rgba(212,168,75,0.55);
  --hw-shadow-gold-hover:0 16px 34px -10px rgba(212,168,75,0.70);
  --hw-shadow-orange:0 6px 18px rgba(255,107,26,0.35);
  --hw-shadow-orange-hover:0 12px 26px rgba(255,107,26,0.50);
  --hw-shadow-light:0 2px 4px rgba(23,19,15,0.04),0 16px 36px -20px rgba(23,19,15,0.25);
  --hw-inset-gloss:inset 0 1px 0 rgba(255,255,255,0.55);

  /* Featured pricing card halo */
  --hw-glow-featured:0 0 0 2px #FFE24D,0 0 10px rgba(255,226,77,0.9),0 0 26px rgba(255,226,77,0.65),0 0 48px rgba(255,216,77,0.4);
}

/* ---- tokens/motion ---- */
:root{
  --hw-dur-fast:0.15s; /* @kind other */
  --hw-dur-base:0.2s; /* @kind other */
  --hw-dur-slow:0.28s; /* @kind other */
  --hw-dur-step:0.36s; /* @kind other */
  --hw-ease:ease; /* @kind other */
  --hw-ease-standard:cubic-bezier(0.4,0,0.2,1); /* @kind other */
  --hw-ease-enter:cubic-bezier(0.16,0.8,0.3,1); /* @kind other */
  --hw-ease-overshoot:cubic-bezier(0.34,1.56,0.64,1); /* @kind other */

  --hw-lift:translateY(-2px); /* @kind other */
  --hw-lift-card:translateY(-4px); /* @kind other */
  --hw-press:scale(0.99); /* @kind other */
}

/* Named keyframes reused across every Horsewood surface */
@keyframes hw-shine{0%,62%{left:-60%}92%,100%{left:130%}}
@keyframes hw-shine-bar{0%{background-position:0% 50%}100%{background-position:200% 50%}}
@keyframes hw-blink{50%{opacity:0.25}}
@keyframes hw-pulse-live{70%{box-shadow:0 0 0 9px rgba(226,59,46,0)}100%{box-shadow:0 0 0 0 rgba(226,59,46,0)}}
@keyframes hw-nudge{50%{transform:translateY(7px)}}
@keyframes hw-mark-pop{40%{transform:scale(1.18)}}
@keyframes hw-slide-in{from{opacity:0;transform:translateY(14px)}}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important;scroll-behavior:auto!important}
}

/* ---- tokens/semantic ---- */
/* Semantic aliases. Dark is the default; .on-light re-points them for the
   white "islands" the funnel drops into every dark page. */
:root{
  --page:var(--hw-page);
  --band:var(--hw-band);
  --surface:var(--hw-surface);
  --surface-alt:var(--hw-surface-alt);
  --surface-card:var(--hw-surface-card);
  --surface-elevated:var(--hw-surface-elevated);

  --text-heading:var(--hw-ink);
  --text-body:var(--hw-text-body);
  --text-muted:var(--hw-muted);
  --text-legal:var(--hw-muted-deep);
  --text-accent:var(--hw-orange);
  --text-highlight:var(--hw-gold-2);

  --border:var(--hw-line);
  --border-strong:var(--hw-line-strong);
  --border-accent:var(--hw-orange-border);

  --cta-bg:linear-gradient(180deg,var(--hw-gold-1) 0%,var(--hw-gold-2) 45%,var(--hw-gold-3) 75%,var(--hw-gold-4) 100%); /* @kind color */
  --cta-ink:var(--hw-gold-ink);
  --cta-shadow:var(--hw-shadow-gold);
  --cta-alt-bg:linear-gradient(180deg,var(--hw-orange-hover) 0%,var(--hw-orange) 100%); /* @kind color */
  --cta-alt-ink:#FFFFFF;

  --status-live:var(--hw-green-live);
  --status-warning:var(--hw-red);
  --status-scarcity:var(--hw-yellow);

  --shadow-elevation:var(--hw-shadow);
  --radius-control:var(--hw-radius-btn);
  --radius-surface:var(--hw-radius-card);
}

.on-light{
  --band:var(--hw-light-band);
  --surface:var(--hw-light-surface);
  --surface-alt:var(--hw-light-surface-alt);
  --surface-card:var(--hw-light-surface);
  --surface-elevated:var(--hw-light-surface-alt);
  --text-heading:var(--hw-light-ink);
  --text-body:var(--hw-light-body);
  --text-muted:var(--hw-light-muted);
  --text-legal:var(--hw-light-muted);
  --text-accent:var(--hw-orange-deep);
  --border:var(--hw-line-light);
  --border-strong:var(--hw-line-light-strong);
  --shadow-elevation:var(--hw-shadow-light);
  color:var(--text-body);
}

/* ---- tokens/fonts (vars) ---- */
/* Burntide webfonts — Oswald (display) + Nunito Sans (body), same pairing as burntide.us.
   Space Mono kept for countdown digits / small labels (tabular alignment). */

:root{
  --font-display:'Oswald',sans-serif;
  --font-body:'Nunito Sans',system-ui,sans-serif;
  --font-mono:'Space Mono','Courier New',monospace;
  --font-brush:'Oswald',sans-serif;
  --font-helvetica:'Helvetica Neue',Helvetica,Arial,sans-serif;
}

/* ============================================================
   Page styles (from the original inline <style>)
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; background: var(--hw-page); overflow-x: hidden; }
  a { color: var(--hw-orange); text-decoration: none; }
  a:hover { color: var(--hw-orange-hover); }
  h1, h2, h3, [data-h1] { font-weight: 600 !important; } /* Oswald precisa de peso (Anton era 400) */
  @keyframes tickPulse { 0%, 70% { transform: scale(1); } 82% { transform: scale(1.03); } 100% { transform: scale(1); } }
  @media (max-width: 1024px) {
    [data-grid="offer"] { grid-template-columns: 1fr !important; justify-items: center; }
    [data-grid="offer"] > * { width: 90%; max-width: 440px; }
    [data-card="hero"] { order: -1; }
  }
  /* Potes do Burntide são imagens largas — conter dentro dos cards */
  [data-grid="offer"] img { max-width: 100%; max-height: 200px; height: auto; width: auto; object-fit: contain; margin: 0 auto; }
  /* Steps bar (padrão funnelb4 do Burntide) */
  [data-stepsbar] { background: linear-gradient(180deg, #FDF6E3, #FBEED2); border-bottom: 2px solid #F2B233; padding: 13px 16px; cursor: pointer; }
  [data-stepsbar] .row { max-width: 1120px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px; }
  [data-stepsbar] .stp { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 600; font-size: 0.94rem; letter-spacing: 0.05em; text-transform: uppercase; color: #6f6258; }
  [data-stepsbar] .stp .n { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; background: #E5DCC6; color: #5b4034; font-size: 0.84rem; font-weight: 700; }
  [data-stepsbar] .stp.on { color: #C43810; } /* lava escurecida: 4.97 sobre a faixa creme (WCAG AA) */
  [data-stepsbar] .stp.on .n { background: #C43810; color: #FFFFFF; }
  [data-stepsbar] .sep { color: #E8A13C; font-family: var(--font-display); font-weight: 600; font-size: 1rem; }
  @media (max-width: 640px) { [data-stepsbar] .stp { font-size: 0.72rem; gap: 7px; } [data-stepsbar] .stp .n { width: 22px; height: 22px; font-size: 0.72rem; } [data-stepsbar] .row { gap: 8px; } }
  @media (max-width: 768px) {
    [data-split] { grid-template-columns: 1fr !important; }
    [data-polaroids] { overflow-x: auto; justify-content: flex-start !important; flex-wrap: nowrap !important; }
    [data-h1] { font-size: 2rem !important; }
  }
  /* Faixa de listras diagonais sobre açafrão — assinatura visual Burntide */
  [data-saffron-strip] {
    background: repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 22px, rgba(0,0,0,.02) 22px 44px), #F2B233;
    border-top: 3px solid #E8651C; border-bottom: 3px solid #E8651C;
  }
  [data-bonus-grid] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  @media (max-width: 980px) { [data-bonus-grid] { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; } }
  /* FAQ — acordeão nativo (details/summary), clicável sem depender de runtime */
  details.faq { background: var(--hw-surface-card); border: 1px solid var(--hw-line); border-radius: 11px; padding: 0 22px; }
  details.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 0; font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; letter-spacing: 0.01em; text-transform: uppercase; color: var(--hw-ink); }
  details.faq summary::-webkit-details-marker { display: none; }
  details.faq .faq-x { flex: 0 0 auto; display: grid; place-items: center; width: 30px; height: 30px; border: 1.5px solid var(--hw-yellow); border-radius: 50%; color: var(--hw-yellow); font-family: var(--font-mono); font-size: 1.05rem; line-height: 1; transition: transform .3s ease; }
  details.faq[open] .faq-x { transform: rotate(45deg); }
  details.faq .faq-a { padding: 0 0 18px; font-size: 0.92rem; line-height: 1.6; color: var(--hw-text-body); }
  details.faq .faq-a p { margin: 0 0 10px; }
  details.faq .faq-a p:last-child { margin-bottom: 0; }
  /* Footer real BuyGoods — cosmético p/ o preview. Se o site já tem o CSS
     dessas classes (.bg-footer*), pode remover este bloco. */
  .bg-footer { background: radial-gradient(80% 60% at 0% 0%, rgba(232,101,28,.16) 0%, rgba(0,0,0,0) 55%), var(--hw-band); padding: 44px 20px; }
  .bg-footer__container { max-width: 900px; margin: 0 auto; text-align: center; }
  .bg-footer__links { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 30px; }
  .bg-footer__links a { font-family: var(--font-body); font-size: 1rem; font-weight: 600; color: var(--hw-text-body); }
  .bg-footer__links a:hover { color: #FFF; }
  .bg-footer__disclaimer { max-width: 980px; margin: 0 auto 4px; font-size: 0.82rem; line-height: 1.6; color: var(--hw-text-body); }
  /* #disclaimer = widget oficial BuyGoods (caixa preta c/ logo + texto branco,
     injetado pelo script). Só centralizamos — o estilo interno é do próprio widget. */
  .bg-footer #disclaimer { display: block; max-width: 810px; margin: 22px auto 0; }

/* ============================================================
   Hover states (converted from the old DC style-hover attrs)
   ============================================================ */
[data-hv="1"]:hover { transform: translateY(-6px) scale(1.02) !important; }
[data-hv="2"]:hover { transform: scale(1.06) translateY(-6px) !important; }
[data-hv="3"]:hover { transform: translateY(-6px) scale(1.02) !important; }
[data-hv="4"]:hover { transform: scale(1.04) !important; }
[data-hv="5"]:hover { transform: translateY(-4px) !important; }
[data-hv="6"]:hover { transform: translateY(-4px) !important; }
[data-hv="7"]:hover { transform: translateY(-4px) !important; }
[data-hv="8"]:hover { transform: rotate(0deg) !important; }
[data-hv="9"]:hover { transform: rotate(0deg) !important; }
[data-hv="10"]:hover { transform: rotate(0deg) !important; }
[data-hv="11"]:hover { transform: translateY(-3px) !important; }
[data-hv="12"]:hover { transform: translateY(-3px) !important; }
[data-hv="13"]:hover { transform: translateY(-3px) !important; }
[data-hv="14"]:hover { transform: translateY(-6px) scale(1.02) !important; }
[data-hv="15"]:hover { transform: scale(1.06) translateY(-6px) !important; }
[data-hv="16"]:hover { transform: translateY(-6px) scale(1.02) !important; }