/* ==========================================================================
   DREIMAUS — droppyvietnam.com site layer.

   Built only from the tokens in dm/dreimaus.css. No new colour, radius,
   shadow or font weight is introduced here — see the UI contract in the
   dreimaus-ui repo (CLAUDE.md). Load order:

     <link rel="stylesheet" href="dm/dreimaus.css">   <- system
     <link rel="stylesheet" href="styles.css">        <- this file

   Surface map for this site:
     body[data-variant="peach"]  Peach Floor  — home shell, commerce
     body[data-variant="still"]  Stillstand   — legal, policy, order lookup
     [data-variant="cut"]        Hard Cut     — hero, affiliate band
   The identity layer (announce bar, header, footer) is ink + paper on every
   page regardless of variant, so the mark never changes value.
   ========================================================================== */


/* ==========================================================================
   1. VARIANT HELPER
   The system declares the Hard Cut token set on :root only, so a Hard Cut
   section cannot be nested inside a peach or still shell. This re-declares
   that same set under an attribute. Same tokens, no new values.
   ========================================================================== */

[data-variant="cut"],
/* The identity layer and the ink islands are Hard Cut on every page,
   whatever shell variant the body carries — so they take the same set.
   Without this a .btn-accent in the header would inherit the shell's
   action colour and land ink-on-ink. */
.announce,
header.site,
.mobile-drawer,
footer.site,
.legal-hero,
.trust-bar,
.affiliate-band {
  --dm-bg: var(--dm-ink);
  --dm-fg: var(--dm-paper);
  --dm-muted: #8C8C8C;
  --dm-line: #262626;
  --dm-action: var(--dm-lime);
  --dm-action-fg: var(--dm-ink);
}

/* Flavour ownership. Each SKU owns its colour permanently — adding a SKU
   means reusing one of these tokens, never inventing a palette.
   Peach Fuzz keeps the brand primary; the three unreleased Vietnam SKUs
   take the three reserve tokens. Text value follows the contrast law:
   ink on peach / cyan / yellow, paper on purple. */
[data-flavour="peach"]  { --dm-flavor: var(--dm-peach);  --dm-flavor-fg: var(--dm-ink); }
[data-flavour="cyan"]   { --dm-flavor: var(--dm-cyan);   --dm-flavor-fg: var(--dm-ink); }
[data-flavour="yellow"] { --dm-flavor: var(--dm-yellow); --dm-flavor-fg: var(--dm-ink); }
[data-flavour="purple"] { --dm-flavor: var(--dm-purple); --dm-flavor-fg: var(--dm-paper); }


/* ==========================================================================
   2. LAYOUT PRIMITIVES
   ========================================================================== */

/* The site layer sets display on several elements that the markup also
   toggles with the `hidden` attribute (the bank-transfer payment option,
   the cart foot, the success step). Without this guard a `display: block`
   rule beats `hidden` and the element shows anyway. */
[hidden] { display: none !important; }

.wrap {
  max-width: var(--dm-max);
  margin-inline: auto;
  padding-inline: var(--dm-gutter);
}

.section {
  background: var(--dm-bg);
  color: var(--dm-fg);
  padding-block: var(--dm-s7);
  border-top: var(--dm-border) solid var(--dm-fg);
}
.section.tight { padding-block: var(--dm-s6); }

@media (max-width: 800px) {
  .section { padding-block: var(--dm-s6); }
  .section.tight { padding-block: var(--dm-s5); }
}

/* Sections are separated by a rule, never whitespace alone. */
.section + .section { border-top: var(--dm-border) solid var(--dm-fg); }

/* Reveal-on-scroll is inert: state changes cut, they do not fade.
   script.js still adds .in — it simply has nothing to animate. */
.reveal, .reveal.in { opacity: 1; transform: none; transition: none; }

.eyebrow {
  font-family: var(--dm-font-mono);
  font-size: var(--dm-text-label);
  letter-spacing: var(--dm-track-label);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--dm-muted);
}

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
  gap: var(--dm-s5);
  align-items: end;
  margin-bottom: var(--dm-s6);
}
/* A head with no supporting paragraph gets the full measure. */
.section-head > :only-child { grid-column: 1 / -1; }

/* Vietnamese stacks two marks on a capital (Ể, Ậ, Ỡ). At the system's
   display leading of 0.92 those collide with the descenders of the line
   above, which is unreadable on a Vietnamese-primary site. Tracking is
   untouched — the hard constraint is +0.04em open tracking, not leading —
   and Latin-only pages keep 0.92 exactly. */
:lang(vi) .hero-title,
:lang(vi) .section-title,
:lang(vi) .affiliate-title,
:lang(vi) .legal-hero h1,
:lang(vi) .product-name,
:lang(vi) .checkout-product { line-height: 1.02; }
@media (max-width: 800px) {
  .section-head { grid-template-columns: 1fr; gap: var(--dm-s4); margin-bottom: var(--dm-s5); }
}

.section-title {
  font-family: var(--dm-font-display);
  font-weight: 900;
  font-variation-settings: 'wdth' 118;
  font-size: var(--dm-text-d1);
  letter-spacing: var(--dm-track-display);
  line-height: var(--dm-leading-display);
  text-transform: uppercase;
  margin: var(--dm-s2) 0 0;
}

.section-desc {
  font-size: var(--dm-text-lead);
  line-height: var(--dm-leading-body);
  margin: 0;
  max-width: 62ch;
}


/* ==========================================================================
   3. IDENTITY LAYER — announce, header, drawer, footer
   Fixed, monochrome, disciplined. Ink and paper only, on every page.
   ========================================================================== */

.announce {
  background: var(--dm-ink);
  color: var(--dm-paper);
  border-bottom: var(--dm-border) solid var(--dm-paper);
  overflow: hidden;
}
.announce-track {
  display: flex;
  gap: var(--dm-s5);
  padding: var(--dm-s2) 0;
  width: max-content;
  animation: dm-ticker 38s linear infinite;
}
.announce-item {
  display: inline-flex;
  align-items: center;
  gap: var(--dm-s2);
  white-space: nowrap;
  font-family: var(--dm-font-mono);
  font-size: var(--dm-text-label);
  letter-spacing: var(--dm-track-label);
  text-transform: uppercase;
  font-weight: 500;
}
.announce-item .dot { color: var(--dm-lime); }
@keyframes dm-ticker { to { transform: translateX(-50%); } }

/* --- header --- */
header.site {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--dm-ink);
  color: var(--dm-paper);
  border-bottom: var(--dm-border) solid var(--dm-paper);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: var(--dm-s4);
  min-height: 72px;
}

.logo-mark { display: inline-flex; align-items: center; text-decoration: none; }
.logo-img { display: block; height: 26px; width: auto; }
.mobile-drawer-top .logo-img,
.footer-brand .logo-img { height: 48px; }

.main-nav {
  display: flex;
  gap: var(--dm-s4);
  margin-left: auto;
}
.main-nav a {
  font-family: var(--dm-font-display);
  font-weight: 800;
  font-variation-settings: 'wdth' 112;
  font-size: 0.8125rem;
  letter-spacing: var(--dm-track-ui);
  text-transform: uppercase;
  color: var(--dm-paper);
  text-decoration: none;
  /* A nav label is a unit — it collapses to the drawer, it never breaks
     across two lines. Without this the flex items shrink below their
     content and every Vietnamese label wraps. */
  white-space: nowrap;
  padding: var(--dm-s2) 0;
  border-bottom: var(--dm-border) solid transparent;
  transition: none;
}
.main-nav a:hover,
.main-nav a.active { border-bottom-color: var(--dm-lime); }

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--dm-s2);
  margin-left: auto;
}
.main-nav + .header-actions { margin-left: var(--dm-s4); }

.lang-switch {
  font-family: var(--dm-font-mono);
  font-size: var(--dm-text-label);
  letter-spacing: var(--dm-track-label);
  text-transform: uppercase;
  color: var(--dm-paper);
  text-decoration: none;
  border: var(--dm-border) solid var(--dm-paper);
  padding: 6px 10px;
  transition: none;
}
.lang-switch:hover { background: var(--dm-paper); color: var(--dm-ink); }
.lang-switch .cur { color: var(--dm-lime); }
.lang-switch:hover .cur { color: var(--dm-peach-deep); }

.icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: transparent;
  color: var(--dm-paper);
  border: var(--dm-border) solid transparent;
  border-radius: var(--dm-radius);
  cursor: pointer;
  transition: none;
}
.icon-btn:hover { border-color: var(--dm-paper); }

.cart-count {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 18px;
  height: 18px;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--dm-lime);
  color: var(--dm-ink);
  font-family: var(--dm-font-mono);
  font-size: 10px;
  font-weight: 700;
  padding: 0 4px;
}

/* Collapse to the drawer at 1120px, not 980px. Measured: the Vietnamese nav
   needs a 1061px viewport laid out on one line (logo 98 + actions 124 + nav
   703 + gaps + gutters), so the old breakpoint left a dead band from 981px
   where the labels had to wrap. Vietnamese sets the number here; English is
   a few px narrower and rides along. */
.menu-toggle { display: none; }
@media (max-width: 1120px) {
  .main-nav { display: none; }
  .menu-toggle { display: inline-flex; }
}

/* --- mobile drawer --- */
.mobile-drawer {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--dm-ink);
  color: var(--dm-paper);
  padding: var(--dm-s4) var(--dm-gutter) var(--dm-s6);
  display: none;
  overflow-y: auto;
}
.mobile-drawer.open { display: block; }
.mobile-drawer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--dm-s4);
  border-bottom: var(--dm-border) solid var(--dm-paper);
}
.mobile-drawer nav { display: flex; flex-direction: column; }
.mobile-drawer nav a {
  font-family: var(--dm-font-display);
  font-weight: 900;
  font-variation-settings: 'wdth' 118;
  font-size: var(--dm-text-d3);
  letter-spacing: var(--dm-track-display);
  text-transform: uppercase;
  color: var(--dm-paper);
  text-decoration: none;
  padding: var(--dm-s3) 0;
  border-bottom: var(--dm-hairline) solid var(--dm-line);
}
.mobile-drawer nav a:hover { color: var(--dm-lime); }

/* --- footer --- */
footer.site {
  background: var(--dm-ink);
  color: var(--dm-paper);
  border-top: var(--dm-border) solid var(--dm-paper);
  padding-top: var(--dm-s6);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--dm-s5);
  padding-bottom: var(--dm-s6);
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-brand p {
  margin: var(--dm-s3) 0 0;
  max-width: 40ch;
  color: var(--dm-paper);
}
.footer-legal {
  margin-top: var(--dm-s4);
  padding-top: var(--dm-s3);
  border-top: var(--dm-hairline) solid var(--dm-line);
  font-size: var(--dm-text-small);
  color: #8C8C8C;
}
.footer-legal p { margin: 2px 0; }
.company-name {
  font-family: var(--dm-font-display);
  font-weight: 800;
  font-variation-settings: 'wdth' 112;
  letter-spacing: var(--dm-track-ui);
  text-transform: uppercase;
  color: var(--dm-paper);
  font-size: var(--dm-text-small);
}
.company-intl { font-style: normal; }

.footer-col h5 {
  font-family: var(--dm-font-mono);
  font-size: var(--dm-text-label);
  letter-spacing: var(--dm-track-label);
  text-transform: uppercase;
  font-weight: 500;
  color: #8C8C8C;
  margin: 0 0 var(--dm-s3);
}
.footer-col a,
.footer-col span {
  display: block;
  color: var(--dm-paper);
  text-decoration: none;
  padding: var(--dm-s1) 0;
  font-size: var(--dm-text-small);
}
.footer-col a:hover { color: var(--dm-lime); }

.footer-social { display: flex; gap: var(--dm-s2); }
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: var(--dm-border) solid var(--dm-paper);
  font-family: var(--dm-font-mono);
  font-size: var(--dm-text-label);
  letter-spacing: 0.06em;
}
.footer-social a:hover { background: var(--dm-paper); color: var(--dm-ink); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dm-s3);
  justify-content: space-between;
  padding: var(--dm-s4) 0;
  border-top: var(--dm-border) solid var(--dm-paper);
  font-family: var(--dm-font-mono);
  font-size: var(--dm-text-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8C8C8C;
}
.footer-bottom a { color: var(--dm-paper); text-decoration: none; }
.footer-bottom a:hover { color: var(--dm-lime); }


/* ==========================================================================
   4. BUTTONS + FORM CONTROLS
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--dm-s2);
  font-family: var(--dm-font-display);
  font-weight: 800;
  font-variation-settings: 'wdth' 112;
  font-size: 0.9375rem;
  letter-spacing: var(--dm-track-ui);
  text-transform: uppercase;
  padding: 18px 32px;
  border: var(--dm-border) solid transparent;
  border-radius: var(--dm-radius);
  cursor: pointer;
  text-decoration: none;
  transition: none;
}
.btn-accent,
.btn-primary {
  background: var(--dm-action);
  color: var(--dm-action-fg);
}
.btn-accent:hover,
.btn-primary:hover {
  background: var(--dm-fg);
  color: var(--dm-bg);
}
.btn-ghost,
.btn-outline {
  background: transparent;
  color: var(--dm-fg);
  border-color: var(--dm-fg);
}
.btn-ghost:hover,
.btn-outline:hover { background: var(--dm-fg); color: var(--dm-bg); }
.btn-sm { padding: 11px 18px; font-size: 0.78rem; }
.btn[disabled] { opacity: 0.4; cursor: not-allowed; }

.field { display: block; margin-bottom: var(--dm-s3); }
.field label {
  display: block;
  font-family: var(--dm-font-mono);
  font-size: var(--dm-text-label);
  letter-spacing: var(--dm-track-label);
  text-transform: uppercase;
  color: var(--dm-muted);
  margin-bottom: var(--dm-s2);
}
.field input:not([type="radio"]):not([type="checkbox"]),
.field textarea,
.newsletter-form input {
  width: 100%;
  padding: 16px;
  background: transparent;
  color: var(--dm-fg);
  border: var(--dm-border) solid var(--dm-line);
  border-radius: var(--dm-radius);
  font-family: var(--dm-font-body);
  font-size: 1rem;
  line-height: var(--dm-leading-body);
}
.field textarea { resize: vertical; }
.field input:focus,
.field textarea:focus,
.newsletter-form input:focus { outline: none; border-color: var(--dm-fg); }
.field input::placeholder,
.field textarea::placeholder,
.newsletter-form input::placeholder { color: var(--dm-muted); }


/* ==========================================================================
   5. HERO — Hard Cut
   ========================================================================== */

.hero {
  position: relative;
  background: var(--dm-bg);
  color: var(--dm-fg);
  overflow: hidden;
}
/* Pattern runs behind content; text sits on a solid plate. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--dm-ink);
  background-image: repeating-linear-gradient(45deg, var(--dm-peach) 0 28px, transparent 28px 56px);
  opacity: 1;
}
.hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: var(--dm-s6);
  align-items: center;
  padding-block: var(--dm-s7);
}
@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; padding-block: var(--dm-s6); }
}

.hero-copy {
  background: var(--dm-ink);
  color: var(--dm-paper);
  padding: var(--dm-s5);
  border: var(--dm-border) solid var(--dm-paper);
}

.hero-badge {
  display: inline-block;
  font-family: var(--dm-font-mono);
  font-size: var(--dm-text-label);
  letter-spacing: var(--dm-track-label);
  text-transform: uppercase;
  padding: 7px 12px;
  background: var(--dm-flavor, var(--dm-peach));
  color: var(--dm-ink);
  margin-bottom: var(--dm-s4);
}

.hero-title {
  font-family: var(--dm-font-display);
  font-weight: 900;
  font-variation-settings: 'wdth' 118;
  letter-spacing: var(--dm-track-display);
  line-height: var(--dm-leading-display);
  text-transform: uppercase;
  margin: 0;

  /* --dm-text-hero scales on the VIEWPORT (9vw), but the plate is only ~41%
     of it in the two-column hero, so a long unbreakable word ("BETTER.")
     overran the plate and was clipped by .hero overflow. Never condense to
     fit — rule 8 forbids tightening the display face — so the type is sized
     down to the column instead. This vw figure is the safe floor for every
     width; the container-query block below refines it. */
  font-size: clamp(3.25rem, 6.4vw, 8.75rem);
}

/* Size against the plate itself rather than the viewport, so the hero holds
   at any column width and in either language. 16.5cqi is set from the widest
   word in the two locales: EN "BETTER." measures 5.74x its own font-size. */
@supports (container-type: inline-size) {
  .hero-copy { container-type: inline-size; }
  .hero-title { font-size: min(var(--dm-text-hero), 16.5cqi); }
}
.accent-word { color: var(--dm-lime); }

.hero-sub {
  font-size: var(--dm-text-lead);
  line-height: var(--dm-leading-body);
  max-width: 52ch;
  margin: var(--dm-s4) 0 0;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dm-s3);
  margin-top: var(--dm-s5);
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: var(--dm-s5);
  border-top: var(--dm-border) solid var(--dm-paper);
}
.hero-stat { padding: var(--dm-s4) var(--dm-s3) 0 0; }
.hero-stat .num {
  font-family: var(--dm-font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: var(--dm-text-d3);
  color: var(--dm-lime);
}
.hero-stat .label {
  font-family: var(--dm-font-mono);
  font-size: var(--dm-text-label);
  letter-spacing: var(--dm-track-label);
  text-transform: uppercase;
  color: #8C8C8C;
  margin-top: var(--dm-s1);
}

/* --- bottle stage --- */
.hero-visual { position: relative; display: grid; place-items: center; }
.bottle-stage {
  position: relative;
  display: grid;
  place-items: center;
  padding: var(--dm-s5);
  background-color: var(--dm-ink);
  background-image: repeating-radial-gradient(circle at 50% 50%, var(--dm-lime) 0 22px, transparent 22px 66px);
  border: var(--dm-border) solid var(--dm-paper);
}
/* The stage carries the pattern, so the bottle sits on a solid plate. */
.bottle-svg-wrap {
  position: relative;
  background: var(--dm-ink);
  padding: var(--dm-s4) var(--dm-s5);
}
.bottle-svg-wrap svg { display: block; max-width: 100%; height: auto; }


/* ==========================================================================
   6. HIGHLIGHT STRIP
   ========================================================================== */

.highlight-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0;
  border: var(--dm-border) solid var(--dm-fg);
}
.highlight-card {
  position: relative;
  padding: var(--dm-s4);
  border-right: var(--dm-border) solid var(--dm-fg);
  border-bottom: var(--dm-border) solid var(--dm-fg);
  text-align: center;
}
.highlight-badge {
  display: inline-block;
  font-family: var(--dm-font-mono);
  font-size: 10px;
  letter-spacing: var(--dm-track-label);
  text-transform: uppercase;
  padding: 5px 8px;
  background: var(--dm-fg);
  color: var(--dm-bg);
  margin-bottom: var(--dm-s3);
}
.highlight-badge.soon { background: transparent; color: var(--dm-fg); border: var(--dm-hairline) solid var(--dm-fg); }
.highlight-visual { display: grid; place-items: center; min-height: 132px; }
.highlight-name {
  font-family: var(--dm-font-display);
  font-weight: 800;
  font-variation-settings: 'wdth' 112;
  font-size: 0.9rem;
  letter-spacing: var(--dm-track-ui);
  text-transform: uppercase;
  margin-top: var(--dm-s3);
}
.highlight-note {
  font-family: var(--dm-font-mono);
  font-size: var(--dm-text-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dm-muted);
  margin-top: var(--dm-s2);
}


/* ==========================================================================
   7. PRODUCTS
   ========================================================================== */

.tabbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-bottom: var(--dm-s5);
  border: var(--dm-border) solid var(--dm-fg);
  width: max-content;
  max-width: 100%;
}
.tab-btn {
  font-family: var(--dm-font-display);
  font-weight: 800;
  font-variation-settings: 'wdth' 112;
  font-size: 0.8125rem;
  letter-spacing: var(--dm-track-ui);
  text-transform: uppercase;
  padding: 14px 22px;
  background: transparent;
  color: var(--dm-fg);
  border: 0;
  border-right: var(--dm-border) solid var(--dm-fg);
  border-radius: var(--dm-radius);
  cursor: pointer;
  transition: none;
}
.tab-btn:last-child { border-right: 0; }
.tab-btn.active { background: var(--dm-fg); color: var(--dm-bg); }

.tab-panel { display: none; }
.tab-panel.active { display: grid; }

.product-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--dm-s4);
}

.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--dm-s3);
  padding: var(--dm-s5);
  background: var(--dm-bg);
  border: var(--dm-border-heavy) solid var(--dm-flavor, var(--dm-peach));
}
.product-tag {
  align-self: flex-start;
  font-family: var(--dm-font-mono);
  font-size: var(--dm-text-label);
  letter-spacing: var(--dm-track-label);
  text-transform: uppercase;
  padding: 7px 12px;
  background: var(--dm-flavor, var(--dm-peach));
  color: var(--dm-flavor-fg, var(--dm-ink));
}
.product-tag.soon { background: transparent; color: var(--dm-fg); border: var(--dm-border) solid currentColor; }
.product-visual { display: grid; place-items: center; min-height: 190px; }
.product-name {
  font-family: var(--dm-font-display);
  font-weight: 900;
  font-variation-settings: 'wdth' 118;
  font-size: var(--dm-text-d3);
  letter-spacing: var(--dm-track-display);
  line-height: var(--dm-leading-display);
  text-transform: uppercase;
}
.product-desc { margin: 0; color: var(--dm-muted); }
.product-price-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--dm-s2);
  margin-top: auto;
  padding-top: var(--dm-s3);
  border-top: var(--dm-border) solid var(--dm-fg);
  font-family: var(--dm-font-mono);
  font-variant-numeric: tabular-nums;
}
.price-now { font-size: 1.25rem; font-weight: 700; }
.price-old { text-decoration: line-through; color: var(--dm-muted); }
.price-unit {
  font-size: var(--dm-text-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dm-muted);
}
.product-card .btn { width: 100%; }


/* ==========================================================================
   8. STEPS · GOALS · TRUST
   ========================================================================== */

.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0;
  border: var(--dm-border) solid var(--dm-fg);
}
.step-card {
  padding: var(--dm-s5);
  border-right: var(--dm-border) solid var(--dm-fg);
  border-bottom: var(--dm-border) solid var(--dm-fg);
}
.step-num {
  font-family: var(--dm-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--dm-text-d2);
  font-weight: 700;
  line-height: 1;
  color: var(--dm-fg);
}
/* peach-deep is the only warm value legal for type on white. */
[data-variant="still"] .step-num,
[data-variant="still"] .goal-index { color: var(--dm-peach-deep); }
[data-variant="cut"] .step-num,
[data-variant="cut"] .goal-index { color: var(--dm-lime); }
.step-title {
  font-family: var(--dm-font-display);
  font-weight: 800;
  font-variation-settings: 'wdth' 112;
  font-size: 1.05rem;
  letter-spacing: var(--dm-track-ui);
  text-transform: uppercase;
  margin: var(--dm-s3) 0 var(--dm-s2);
}
.step-desc { color: var(--dm-muted); }

.goals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0;
  border: var(--dm-border) solid var(--dm-fg);
}
.goal-card {
  padding: var(--dm-s5);
  border-right: var(--dm-border) solid var(--dm-fg);
  border-bottom: var(--dm-border) solid var(--dm-fg);
}
.goal-index {
  font-family: var(--dm-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--dm-text-d3);
  font-weight: 700;
  line-height: 1;
  color: var(--dm-fg);
  display: block;
  margin-bottom: var(--dm-s3);
}
.goal-title {
  font-family: var(--dm-font-display);
  font-weight: 800;
  font-variation-settings: 'wdth' 112;
  font-size: 1.05rem;
  letter-spacing: var(--dm-track-ui);
  text-transform: uppercase;
  line-height: 1.2;
}
.goal-sub {
  font-family: var(--dm-font-mono);
  font-size: var(--dm-text-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dm-muted);
  margin-top: var(--dm-s2);
}

.trust-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0;
  background: var(--dm-ink);
  color: var(--dm-paper);
  border: var(--dm-border) solid var(--dm-paper);
  margin-block: var(--dm-s6);
}
.trust-item {
  display: flex;
  align-items: flex-start;
  gap: var(--dm-s3);
  padding: var(--dm-s4);
  border-right: var(--dm-hairline) solid #262626;
}
.trust-item:last-child { border-right: 0; }
.trust-tag {
  font-family: var(--dm-font-mono);
  font-size: 10px;
  letter-spacing: var(--dm-track-label);
  text-transform: uppercase;
  color: var(--dm-ink);
  background: var(--dm-lime);
  padding: 5px 7px;
  flex-shrink: 0;
}
.trust-text .t1 {
  font-family: var(--dm-font-display);
  font-weight: 800;
  font-variation-settings: 'wdth' 112;
  font-size: 0.95rem;
  letter-spacing: var(--dm-track-ui);
  text-transform: uppercase;
}
.trust-text .t2 { font-size: var(--dm-text-small); color: #8C8C8C; margin-top: var(--dm-s1); }


/* ==========================================================================
   9. AFFILIATE BAND — Hard Cut with pattern
   ========================================================================== */

.affiliate-band {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--dm-s5);
  padding: var(--dm-s6);
  background-color: var(--dm-ink);
  background-image: radial-gradient(var(--dm-lime) 34%, transparent 35%);
  background-size: 76px 76px;
  border: var(--dm-border) solid var(--dm-paper);
}
@media (max-width: 860px) { .affiliate-band { grid-template-columns: 1fr; padding: var(--dm-s5); } }

/* Text on a pattern always sits on a solid plate. */
.affiliate-band > * {
  position: relative;
  background: var(--dm-ink);
  color: var(--dm-paper);
  padding: var(--dm-s5);
}
.affiliate-title {
  font-family: var(--dm-font-display);
  font-weight: 900;
  font-variation-settings: 'wdth' 118;
  font-size: var(--dm-text-d2);
  letter-spacing: var(--dm-track-display);
  line-height: var(--dm-leading-display);
  text-transform: uppercase;
  margin: 0;
}
.affiliate-desc {
  font-size: var(--dm-text-lead);
  max-width: 52ch;
  margin: var(--dm-s4) 0 var(--dm-s5);
}
.affiliate-tiers { display: flex; flex-direction: column; }
.tier-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--dm-s3);
  padding: 14px 0;
  border-bottom: var(--dm-hairline) solid #262626;
  font-family: var(--dm-font-mono);
  font-size: var(--dm-text-small);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.tier-row:last-child { border-bottom: 0; }
.tier-row b {
  font-family: var(--dm-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.25rem;
  color: var(--dm-lime);
}


/* ==========================================================================
   10. NEWSLETTER
   ========================================================================== */

.newsletter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
  gap: var(--dm-s5);
  align-items: center;
  padding: var(--dm-s5);
  border: var(--dm-border) solid var(--dm-fg);
}
@media (max-width: 860px) { .newsletter { grid-template-columns: 1fr; } }
.newsletter h3 {
  font-family: var(--dm-font-display);
  font-weight: 900;
  font-variation-settings: 'wdth' 118;
  font-size: var(--dm-text-d3);
  letter-spacing: var(--dm-track-display);
  line-height: var(--dm-leading-display);
  text-transform: uppercase;
  margin: 0 0 var(--dm-s3);
}
.newsletter p { margin: 0; max-width: 56ch; }
.newsletter-form { display: flex; gap: 0; }
.newsletter-form input { border-color: var(--dm-fg); border-right: 0; }
.newsletter-form .btn { flex-shrink: 0; }
@media (max-width: 480px) {
  .newsletter-form { flex-direction: column; gap: var(--dm-s2); }
  .newsletter-form input { border-right: var(--dm-border) solid var(--dm-line); }
}


/* ==========================================================================
   11. CART DRAWER + CHECKOUT — Stillstand surfaces
   ========================================================================== */

.cart-overlay,
.checkout-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(11, 11, 11, 0.88);
  display: none;
}
.cart-overlay.open,
.checkout-overlay.open { display: block; }

.cart-panel {
  --dm-bg: var(--dm-paper);
  --dm-fg: var(--dm-ink);
  --dm-muted: #6B6B6B;
  --dm-line: #E2E2E2;
  --dm-action: var(--dm-ink);
  --dm-action-fg: var(--dm-paper);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 100%);
  background: var(--dm-paper);
  color: var(--dm-ink);
  border-left: var(--dm-border) solid var(--dm-ink);
  display: flex;
  flex-direction: column;
  padding: var(--dm-s4);
  overflow-y: auto;
}
.cart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--dm-s3);
  border-bottom: var(--dm-border) solid var(--dm-ink);
}
.cart-head h3 {
  font-family: var(--dm-font-display);
  font-weight: 900;
  font-variation-settings: 'wdth' 118;
  font-size: var(--dm-text-d3);
  letter-spacing: var(--dm-track-display);
  text-transform: uppercase;
  margin: 0;
}
.cart-close,
.checkout-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: transparent;
  color: currentColor;
  border: var(--dm-border) solid transparent;
  border-radius: var(--dm-radius);
  cursor: pointer;
  transition: none;
}
.cart-close:hover,
.checkout-close:hover { border-color: currentColor; }

.cart-items { display: flex; flex-direction: column; }
.cart-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--dm-s3);
  padding: var(--dm-s3) 0;
  border-bottom: var(--dm-hairline) solid var(--dm-line);
}
.cart-item-name {
  font-family: var(--dm-font-display);
  font-weight: 800;
  font-variation-settings: 'wdth' 112;
  font-size: 0.85rem;
  letter-spacing: var(--dm-track-ui);
  text-transform: uppercase;
}
.cart-item-price {
  font-family: var(--dm-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--dm-text-small);
  color: #6B6B6B;
  margin-top: var(--dm-s1);
}
.cart-item-qty { display: flex; align-items: center; border: var(--dm-border) solid var(--dm-ink); }
.qty-btn {
  width: 32px;
  height: 32px;
  background: transparent;
  color: var(--dm-ink);
  border: 0;
  border-radius: var(--dm-radius);
  font-family: var(--dm-font-mono);
  font-size: 1rem;
  cursor: pointer;
  transition: none;
}
.qty-btn:hover { background: var(--dm-ink); color: var(--dm-paper); }
.cart-item-count {
  min-width: 30px;
  text-align: center;
  font-family: var(--dm-font-mono);
  font-variant-numeric: tabular-nums;
  border-inline: var(--dm-border) solid var(--dm-ink);
  line-height: 32px;
}
.cart-item-remove {
  width: 32px;
  height: 32px;
  background: transparent;
  color: #6B6B6B;
  border: 0;
  border-radius: var(--dm-radius);
  cursor: pointer;
  transition: none;
}
.cart-item-remove:hover { color: var(--dm-danger); }

.cart-empty {
  font-family: var(--dm-font-mono);
  font-size: var(--dm-text-label);
  letter-spacing: var(--dm-track-label);
  text-transform: uppercase;
  color: #6B6B6B;
  padding: var(--dm-s5) 0;
}
.cart-foot { margin-top: auto; padding-top: var(--dm-s4); border-top: var(--dm-border) solid var(--dm-ink); }
.cart-total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--dm-font-mono);
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--dm-text-small);
  margin-bottom: var(--dm-s3);
}
#cart-total { font-size: 1.25rem; font-weight: 700; }
.cart-foot .btn { width: 100%; }
.cart-note {
  font-family: var(--dm-font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6B6B6B;
  text-align: center;
  margin: var(--dm-s2) 0 0;
}

/* --- checkout modal --- */
.checkout-modal {
  --dm-bg: var(--dm-paper);
  --dm-fg: var(--dm-ink);
  --dm-muted: #6B6B6B;
  --dm-line: #E2E2E2;
  --dm-action: var(--dm-ink);
  --dm-action-fg: var(--dm-paper);
  position: relative;
  width: min(560px, calc(100% - 2 * var(--dm-s4)));
  max-height: calc(100vh - 2 * var(--dm-s4));
  margin: var(--dm-s4) auto;
  overflow-y: auto;
  background: var(--dm-paper);
  color: var(--dm-ink);
  border: var(--dm-border) solid var(--dm-ink);
  padding: var(--dm-s5);
}
.checkout-close { position: absolute; top: var(--dm-s3); right: var(--dm-s3); }
.checkout-head { margin-bottom: var(--dm-s4); }
.checkout-product {
  font-family: var(--dm-font-display);
  font-weight: 900;
  font-variation-settings: 'wdth' 118;
  font-size: var(--dm-text-d3);
  letter-spacing: var(--dm-track-display);
  line-height: var(--dm-leading-display);
  text-transform: uppercase;
  margin: var(--dm-s2) 0 0;
}

.checkout-summary { border-top: var(--dm-border) solid var(--dm-ink); }
.sum-row {
  display: flex;
  justify-content: space-between;
  gap: var(--dm-s3);
  padding: 14px 0;
  border-bottom: var(--dm-hairline) solid var(--dm-line);
  font-family: var(--dm-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--dm-text-small);
}
.order-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--dm-s3) 0;
  margin-bottom: var(--dm-s4);
  border-bottom: var(--dm-border) solid var(--dm-ink);
  font-family: var(--dm-font-mono);
  font-variant-numeric: tabular-nums;
}
.order-total-label { text-transform: uppercase; letter-spacing: var(--dm-track-label); font-size: var(--dm-text-label); }
.order-total-val { font-size: 1.375rem; font-weight: 700; }

.pay-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--dm-s2); }
.pay-options.cod-only { grid-template-columns: 1fr; }
.pay-option { display: block; position: relative; cursor: pointer; }
/* Hidden but still focusable, so the card below can show the focus ring. */
.pay-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.pay-card {
  display: flex;
  align-items: center;
  gap: var(--dm-s3);
  padding: var(--dm-s3);
  border: var(--dm-border) solid var(--dm-line);
  transition: none;
}
.pay-option input:checked + .pay-card { border-color: var(--dm-ink); }
.pay-option input:focus-visible + .pay-card { outline: 4px solid var(--dm-ink); outline-offset: 3px; }
.pay-icon {
  font-family: var(--dm-font-mono);
  font-size: var(--dm-text-label);
  letter-spacing: var(--dm-track-label);
  background: var(--dm-ink);
  color: var(--dm-paper);
  padding: 7px 9px;
}
.pay-text b {
  display: block;
  font-family: var(--dm-font-display);
  font-weight: 800;
  font-variation-settings: 'wdth' 112;
  letter-spacing: var(--dm-track-ui);
  text-transform: uppercase;
  font-size: 0.85rem;
}
.pay-text small { font-size: var(--dm-text-small); color: #6B6B6B; }

.ts-widget { min-height: 0; }
.ts-widget:not(:empty) { margin: var(--dm-s2) 0; }

.order-error {
  color: var(--dm-danger);
  font-size: var(--dm-text-small);
  border: var(--dm-border) solid var(--dm-danger);
  padding: var(--dm-s2) var(--dm-s3);
  margin: 0 0 var(--dm-s3);
}
.order-submit { width: 100%; margin-top: var(--dm-s2); }
.order-fineprint {
  font-family: var(--dm-font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6B6B6B;
  text-align: center;
  margin: var(--dm-s3) 0 0;
}

.success-mark {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  background: var(--dm-lime);
  color: var(--dm-ink);
  font-size: 1.75rem;
  margin-bottom: var(--dm-s4);
}
.success-code,
.success-msg { font-size: var(--dm-text-body); margin: var(--dm-s3) 0 0; }
.success-code b {
  font-family: var(--dm-font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--dm-track-label);
}
.success-transfer-note { font-size: var(--dm-text-small); margin: var(--dm-s3) 0; }
.vietqr-img { display: block; width: 220px; height: auto; border: var(--dm-border) solid var(--dm-ink); }
.transfer-details {
  font-family: var(--dm-font-mono);
  font-size: var(--dm-text-small);
  margin-top: var(--dm-s3);
}
.success-view-link {
  display: inline-block;
  margin: var(--dm-s4) 0;
  font-family: var(--dm-font-mono);
  font-size: var(--dm-text-label);
  letter-spacing: var(--dm-track-label);
  text-transform: uppercase;
  color: var(--dm-ink);
  border-bottom: var(--dm-border) solid var(--dm-ink);
  text-decoration: none;
}
#step-success .btn { width: 100%; }


/* ==========================================================================
   12. LEGAL / POLICY / ORDER LOOKUP — Stillstand
   ========================================================================== */

.legal-hero {
  background: var(--dm-ink);
  color: var(--dm-paper);
  padding-block: var(--dm-s6);
  border-bottom: var(--dm-border) solid var(--dm-paper);
}
.legal-hero .eyebrow { color: var(--dm-lime); }
.legal-hero h1 {
  font-family: var(--dm-font-display);
  font-weight: 900;
  font-variation-settings: 'wdth' 118;
  font-size: var(--dm-text-d1);
  letter-spacing: var(--dm-track-display);
  line-height: var(--dm-leading-display);
  text-transform: uppercase;
  color: var(--dm-paper);
  margin: var(--dm-s3) 0 var(--dm-s3);
}
.legal-hero p { color: #8C8C8C; max-width: 62ch; font-size: var(--dm-text-lead); margin: 0; }

.legal-body {
  display: block;
  background: var(--dm-bg);
  color: var(--dm-fg);
  padding-block: var(--dm-s6) var(--dm-s7);
}
.legal-section {
  padding-block: var(--dm-s4);
  border-bottom: var(--dm-border) solid var(--dm-line);
  max-width: 76ch;
}
.legal-section h2 {
  font-family: var(--dm-font-display);
  font-weight: 800;
  font-variation-settings: 'wdth' 110;
  font-size: var(--dm-text-d3);
  letter-spacing: var(--dm-track-display);
  line-height: var(--dm-leading-display);
  text-transform: uppercase;
  margin: 0 0 var(--dm-s3);
}
.legal-section p { margin: 0 0 var(--dm-s3); }
.legal-section ul { margin: 0; padding-left: var(--dm-s4); }
.legal-section li { margin-bottom: var(--dm-s2); }
.legal-section table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.legal-section th,
.legal-section td { text-align: left; padding: 14px 8px; border-bottom: var(--dm-hairline) solid var(--dm-line); }
.legal-section th {
  font-family: var(--dm-font-mono);
  font-size: var(--dm-text-label);
  letter-spacing: var(--dm-track-label);
  text-transform: uppercase;
}

.legal-contact-card {
  margin-top: var(--dm-s5);
  padding: var(--dm-s5);
  border: var(--dm-border) solid var(--dm-fg);
  max-width: 76ch;
}
.legal-contact-card p { margin: 0 0 var(--dm-s2); }
.legal-contact-card p:last-child { margin-bottom: 0; }
a.inline { color: var(--dm-fg); text-decoration: none; border-bottom: var(--dm-border) solid currentColor; }

.legal-updated {
  font-family: var(--dm-font-mono);
  font-size: var(--dm-text-label);
  letter-spacing: var(--dm-track-label);
  text-transform: uppercase;
  color: var(--dm-muted);
  margin: var(--dm-s5) 0;
}
.back-home { margin-bottom: var(--dm-s5); }

/* --- order lookup --- */
.lookup-card {
  display: flex;
  flex-direction: column;
  gap: var(--dm-s3);
  padding: var(--dm-s5);
  max-width: 520px;
  border: var(--dm-border) solid var(--dm-fg);
}
.lookup-card .btn { width: 100%; }
.lookup-card .field { margin-bottom: 0; }

.order-result {
  max-width: 520px;
  margin-top: var(--dm-s5);
  padding: var(--dm-s5);
  border: var(--dm-border-heavy) solid var(--dm-peach);
}
.order-result-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--dm-s3);
  margin-bottom: var(--dm-s4);
}
.order-result-code {
  font-family: var(--dm-font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: var(--dm-track-label);
}
.status-badge {
  font-family: var(--dm-font-mono);
  font-size: var(--dm-text-label);
  letter-spacing: var(--dm-track-label);
  text-transform: uppercase;
  padding: 7px 12px;
  white-space: nowrap;
  color: var(--dm-ink);
  background: var(--dm-muted);
}
/* Contrast law: every solid status field carries ink text. */
.st-new       { background: #E2E2E2; }
.st-confirmed { background: var(--dm-peach); }
.st-shipping  { background: var(--dm-lime); }
.st-delivered { background: var(--dm-success); }
.st-cancelled { background: var(--dm-danger); }

.order-rows { display: flex; flex-direction: column; }
.order-row {
  display: flex;
  justify-content: space-between;
  gap: var(--dm-s4);
  padding: 14px 0;
  border-bottom: var(--dm-hairline) solid var(--dm-line);
  font-size: var(--dm-text-small);
}
.order-row:last-child { border-bottom: 0; }
.order-row > span {
  flex-shrink: 0;
  font-family: var(--dm-font-mono);
  font-size: var(--dm-text-label);
  letter-spacing: var(--dm-track-label);
  text-transform: uppercase;
  color: var(--dm-muted);
}
.order-row > b { text-align: right; font-weight: 500; }
.order-row-total {
  font-family: var(--dm-font-mono) !important;
  font-variant-numeric: tabular-nums;
  font-weight: 700 !important;
  font-size: 1.125rem;
}
.order-result-help { margin-top: var(--dm-s4); font-size: var(--dm-text-small); color: var(--dm-muted); }
.order-result-help a { color: var(--dm-fg); }


/* ==========================================================================
   13. RESPONSIVE TAIL
   ========================================================================== */

@media (max-width: 640px) {
  .hero-copy { padding: var(--dm-s4); }
  .hero-stats { grid-template-columns: 1fr; }
  .hero-stat { padding-block: var(--dm-s3); border-bottom: var(--dm-hairline) solid var(--dm-line); }
  .hero-ctas .btn { width: 100%; }
  .trust-item { border-right: 0; border-bottom: var(--dm-hairline) solid #262626; }
  .checkout-modal { padding: var(--dm-s4); }
  .footer-bottom { flex-direction: column; }
}