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

/* ---- tokens/colors ---- */
.dtc-buybox-band{
  /* ═══ 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 ---- */
.dtc-buybox-band{
  /* 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 ---- */
.dtc-buybox-band{
  /* 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 ---- */
.dtc-buybox-band{
  --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 ---- */
.dtc-buybox-band{
  --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. */
.dtc-buybox-band{
  --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);
}

.dtc-buybox-band .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). */

.dtc-buybox-band{
  --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; }
/* --- regras do grid da oferta --- */
@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; }