/* ETUMAX wholesale Hero calculator — premium B2B, light/dark, no decorative motion.
 *
 * Design plan
 *   Palette  cool slate neutrals (structure) against a warm bronze-gold accent
 *            drawn from the Royal Honey brand; green reserved exclusively for
 *            money the buyer keeps. Gold marks tier identity and the 70% ceiling —
 *            the two things the page exists to communicate.
 *   Type     IBM Plex Sans for interface, IBM Plex Mono for every figure. Plex reads
 *            as instrumentation rather than marketing, which is what a pricing tool is.
 *   Layout   Five stacked instrument panels; summary figures as tabular tiles,
 *            detail in scrollable tables. Scanned, not read.
 */

:root {
  color-scheme: light dark;
  --on-accent: #ffffff;
  --bg:        #f4f6f8;
  --surface:   #ffffff;
  --surface-2: #eef1f4;
  --line:      #dbe0e6;
  --line-2:    #bcc4ce;
  --text:      #12171f;
  --text-2:    #4e5966;
  --text-3:    #78838f;
  --accent:    #8a6510;
  --accent-2:  #fbf3e0;
  --gold:      #6f4f08;
  --gold-bg:   #f8ecd0;
  --good:      #0e6b41;
  --good-bg:   #e4f4eb;
  --warn-bg:   #fdf1de;
  --warn:      #855012;
  --radius:    10px;
  --radius-lg: 14px;
  --shadow:    0 1px 2px rgba(18,23,31,.05), 0 4px 16px rgba(18,23,31,.05);
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#0e1116; --surface:#171c23; --surface-2:#1e242d; --line:#2b323b; --line-2:#3d4650;
    --text:#e8ecf1; --text-2:#a1abb7; --text-3:#7b8592;
    --accent:#e0b95f; --accent-2:#2c2311;
    --gold:#f0cd7c; --gold-bg:#302512;
    --good:#58cf95; --good-bg:#0e2a1d;
    --warn-bg:#2e2412; --warn:#e3b26a;
    --shadow: 0 1px 2px rgba(0,0,0,.45), 0 4px 16px rgba(0,0,0,.32);
    --on-accent:#171c23;
  }
}
:root[data-theme="dark"] {
  --bg:#0e1116; --surface:#171c23; --surface-2:#1e242d; --line:#2b323b; --line-2:#3d4650;
  --text:#e8ecf1; --text-2:#a1abb7; --text-3:#7b8592;
  --accent:#e0b95f; --accent-2:#2c2311;
  --gold:#f0cd7c; --gold-bg:#302512;
  --good:#58cf95; --good-bg:#0e2a1d;
  --warn-bg:#2e2412; --warn:#e3b26a;
  --shadow: 0 1px 2px rgba(0,0,0,.45), 0 4px 16px rgba(0,0,0,.32);
  --on-accent:#171c23;
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--sans); font-size: 15px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3 { margin: 0; font-weight: 650; letter-spacing: -.015em; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 28px 20px 64px; }

/* ---- header ---------------------------------------------------------- */
.masthead { display:flex; flex-wrap:wrap; gap:14px; align-items:flex-end; justify-content:space-between; margin-bottom:22px; }
.masthead h1 { font-size: clamp(22px, 3.2vw, 31px); }
.masthead p { margin:5px 0 0; color: var(--text-2); font-size: 14px; max-width: 62ch; }
.badge-row { display:flex; gap:7px; flex-wrap:wrap; }
.chip {
  font-size: 11px; font-weight:650; letter-spacing:.05em; text-transform:uppercase;
  padding: 4px 9px; border-radius: 100px; border:1px solid var(--line);
  background: var(--surface); color: var(--text-2); white-space: nowrap;
}
.chip.ceiling { background: var(--gold-bg); color: var(--gold); border-color: transparent; }

/* ---- step scaffolding ------------------------------------------------ */
.step { background: var(--surface); border:1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); margin-bottom:16px; overflow:hidden; }
.step > header { display:flex; align-items:center; gap:11px; padding:15px 20px; border-bottom:1px solid var(--line); }
.step-n {
  flex:none; width:25px; height:25px; border-radius:100px; background:var(--accent); color:var(--on-accent);
  display:grid; place-items:center; font-size:12.5px; font-weight:700; font-variant-numeric: tabular-nums;
}
.step > header h2 { font-size:14px; text-transform:uppercase; letter-spacing:.07em; }
.step > header .hint { margin-left:auto; font-size:12.5px; color:var(--text-3); }
.step-body { padding: 20px; }

/* ---- step 1: product picker ------------------------------------------ */
.sku-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); gap:10px; }
.sku {
  position:relative; display:flex; gap:11px; align-items:flex-start; text-align:left;
  padding:13px 13px 13px 12px; border:1.5px solid var(--line); border-radius:var(--radius);
  background:var(--surface-2); cursor:pointer; font:inherit; color:inherit;
  transition: border-color .12s, background .12s;
}
.sku:hover { border-color: var(--line-2); }
.sku[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-2); }
.sku:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.sku .tick {
  flex:none; width:17px; height:17px; margin-top:1px; border-radius:5px;
  border:1.5px solid var(--line-2); background:var(--surface); display:grid; place-items:center;
}
.sku[aria-pressed="true"] .tick { background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.sku .tick svg { display:none; }
.sku[aria-pressed="true"] .tick svg { display:block; }
.sku-name { font-weight:600; font-size:13.5px; line-height:1.35; }
.sku-meta { margin-top:3px; font-size:12px; color:var(--text-2); font-variant-numeric:tabular-nums; }
.sku-meta code { font-family:var(--mono); font-size:11px; color:var(--text-3); }

.mix { margin-top:16px; border:1px solid var(--line); border-radius:var(--radius); overflow-x:auto; }
.mix table { width:100%; border-collapse:collapse; font-size:13px; min-width:520px; }
.mix th, .mix td { padding:9px 12px; text-align:right; border-bottom:1px solid var(--line); white-space:nowrap; }
.mix th { font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-3); font-weight:650; background:var(--surface-2); }
.mix th:first-child, .mix td:first-child { text-align:left; }
.mix tbody tr:last-child td { border-bottom:none; }
.mix td { font-variant-numeric: tabular-nums; }
.mix .qty-input { width:88px; padding:5px 8px; text-align:right; font:inherit; font-size:13px; font-variant-numeric:tabular-nums;
  border:1px solid var(--line-2); border-radius:6px; background:var(--surface); color:var(--text); }
.mix .qty-input:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.mix .strike { color:var(--text-3); text-decoration:line-through; }
.mix .save { color:var(--good); font-weight:600; }

/* ---- step 2: quantity ------------------------------------------------ */
.qty-row { display:flex; flex-wrap:wrap; gap:16px; align-items:flex-end; }
.qty-field label { display:block; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-3); font-weight:650; margin-bottom:5px; }
.qty-field input {
  width:190px; padding:11px 13px; font-family:var(--mono); font-size:22px; font-weight:600; font-variant-numeric:tabular-nums;
  border:1.5px solid var(--line-2); border-radius:var(--radius); background:var(--surface); color:var(--text);
}
.qty-field input:focus-visible { outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent); }
.presets { display:flex; gap:6px; flex-wrap:wrap; }
.presets button {
  padding:7px 11px; font:inherit; font-size:12.5px; font-weight:600; font-variant-numeric:tabular-nums;
  border:1px solid var(--line-2); border-radius:100px; background:var(--surface); color:var(--text-2); cursor:pointer;
}
.presets button:hover { border-color:var(--accent); color:var(--accent); }
.presets button[aria-current="true"] { background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.presets button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

.slider-wrap { margin-top:20px; }
input[type=range] { width:100%; accent-color:var(--accent); height:26px; }
input[type=range]:focus-visible { outline:2px solid var(--accent); outline-offset:4px; border-radius:4px; }
.scale { display:flex; justify-content:space-between; margin-top:2px; font-size:11px; color:var(--text-3); font-variant-numeric:tabular-nums; }

/* ---- step 3/4: metric tiles ------------------------------------------ */
.tier-head { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-bottom:16px; }
.tier-code {
  font-family:var(--mono); font-size:12px; font-weight:700; padding:5px 9px; border-radius:6px;
  background:var(--accent); color:var(--on-accent); letter-spacing:.03em;
}
.tier-name { font-size:19px; font-weight:650; letter-spacing:-.01em; }
.tier-range { font-size:12.5px; color:var(--text-3); font-variant-numeric:tabular-nums; }
.tier-pct { margin-left:auto; font-family:var(--mono); font-size:29px; font-weight:700; color:var(--accent); font-variant-numeric:tabular-nums; }
.tier-pct small { font-size:12px; font-weight:600; color:var(--text-3); display:block; text-align:right; letter-spacing:.05em; text-transform:uppercase; font-family:var(--sans); }

.tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr)); gap:10px; }
.tile { padding:13px 14px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface-2); }
.tile dt { font-size:11px; text-transform:uppercase; letter-spacing:.055em; color:var(--text-3); font-weight:650; margin:0 0 5px; }
.tile dd { margin:0; font-family:var(--mono); font-size:20px; font-weight:650; font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.tile .sub { display:block; margin-top:4px; font-family:var(--sans); font-size:11.5px; font-weight:500; color:var(--text-3); letter-spacing:0; }
.tile.is-save { background:var(--good-bg); border-color:transparent; }
.tile.is-save dd, .tile.is-save dt { color:var(--good); }
.tile.is-primary { background:var(--accent-2); border-color:transparent; }
.tile.is-primary dd, .tile.is-primary dt { color:var(--accent); }

/* ---- disclosure ------------------------------------------------------- */
.disclosure {
  margin-top:14px; padding:12px 14px; border-radius:var(--radius);
  background:var(--surface-2); border:1px solid var(--line);
  font-size:12px; line-height:1.55; color:var(--text-2);
}
.disclosure strong { color:var(--text); }
.note { margin-top:10px; padding:10px 13px; border-radius:var(--radius); background:var(--warn-bg); color:var(--warn); font-size:12px; line-height:1.5; }

/* ---- step 5: scale ---------------------------------------------------- */
.boundary { padding:15px 17px; border-radius:var(--radius); border:1px solid var(--line); background:var(--surface-2); margin-bottom:16px; }
.boundary.is-cheaper { background:var(--good-bg); border-color:transparent; }
.boundary-head { font-size:16px; font-weight:650; letter-spacing:-.01em; }
.boundary.is-cheaper .boundary-head { color:var(--good); }
.boundary-sub { margin-top:4px; font-size:13px; color:var(--text-2); }
.boundary-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(132px,1fr)); gap:9px; margin-top:13px; }
.boundary-grid div { background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:9px 11px; }
.boundary-grid dt { font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-3); font-weight:650; }
.boundary-grid dd { margin:3px 0 0; font-family:var(--mono); font-size:15px; font-weight:650; font-variant-numeric:tabular-nums; }
.delta-down { color:var(--good); }
.delta-up { color:var(--text); }

.progress { height:7px; border-radius:100px; background:var(--surface-2); border:1px solid var(--line); overflow:hidden; margin-top:13px; }
.progress > i { display:block; height:100%; background:var(--accent); border-radius:100px; }
.progress-label { display:flex; justify-content:space-between; margin-top:5px; font-size:11.5px; color:var(--text-3); font-variant-numeric:tabular-nums; }

.ladder { margin-top:20px; border:1px solid var(--line); border-radius:var(--radius); overflow-x:auto; }
.ladder table { width:100%; border-collapse:collapse; font-size:13px; min-width:560px; }
.ladder th, .ladder td { padding:8px 12px; text-align:right; border-bottom:1px solid var(--line); white-space:nowrap; }
.ladder th { font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-3); font-weight:650; background:var(--surface-2); position:sticky; top:0; }
.ladder th:first-child, .ladder td:first-child { text-align:left; }
.ladder th:nth-child(2), .ladder td:nth-child(2) { text-align:left; }
.ladder td { font-variant-numeric:tabular-nums; }
.ladder tbody tr:last-child td { border-bottom:none; }
.ladder tr.achieved td { color:var(--text-3); }
.ladder tr.current { background:var(--accent-2); }
.ladder tr.current td { font-weight:650; color:var(--text); }
.ladder tr.ceiling td { background:var(--gold-bg); }
.ladder .code { font-family:var(--mono); font-size:11.5px; font-weight:700; }
.pill { display:inline-block; font-size:9.5px; font-weight:700; letter-spacing:.06em; padding:2px 6px; border-radius:100px; background:var(--accent); color:var(--on-accent); margin-left:6px; vertical-align:1px; }
.pill.gold { background:var(--gold); color:var(--gold-bg); }
.you { display:inline-block; font-size:9.5px; font-weight:700; letter-spacing:.06em; padding:2px 6px; border-radius:100px; border:1px solid var(--accent); color:var(--accent); margin-left:6px; }

/* ---- MOQ gate --------------------------------------------------------- */
.moq { padding:22px; text-align:center; background:var(--warn-bg); color:var(--warn); border-radius:var(--radius); font-size:14px; }
.moq strong { display:block; font-size:19px; margin-bottom:5px; }

.foot { margin-top:22px; font-size:11.5px; color:var(--text-3); line-height:1.6; }
.foot code { font-family:var(--mono); }

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

@media (max-width:640px) {
  .wrap { padding:18px 13px 48px; }
  .step-body { padding:15px; }
  .tier-pct { font-size:25px; }
  .qty-field input { width:100%; }
  .qty-row { gap:13px; }
}
@media (prefers-reduced-motion: reduce) { * { transition:none !important; animation:none !important; } }

/* ---------------------------------------------------------------------------
 * WooCommerce integration styles. Same tokens as the calculator above, so the
 * storefront and the hero read as one system.
 * ------------------------------------------------------------------------- */
.ews-tierbar { border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); padding:14px 17px; margin:0 0 22px; box-shadow:var(--shadow); }
.ews-tierbar.ews-below { background:var(--warn-bg); border-color:transparent; color:var(--warn); }
.ews-tierbar.ews-below p { margin:0; font-size:14px; }
.ews-tb-main { display:flex; flex-wrap:wrap; gap:11px; align-items:center; }
.ews-tb-code { font-family:var(--mono); font-size:12px; font-weight:700; background:var(--accent); color:var(--on-accent); padding:4px 9px; border-radius:6px; }
.ews-tb-name { font-weight:650; }
.ews-tb-pct { font-family:var(--mono); font-weight:700; color:var(--accent); font-variant-numeric:tabular-nums; }
.ews-tb-units { margin-left:auto; font-family:var(--mono); font-size:13px; color:var(--text-3); font-variant-numeric:tabular-nums; }
.ews-tb-next { margin-top:11px; }
.ews-tb-next p { margin:6px 0 0; font-size:13.5px; color:var(--text-2); }
.ews-tb-next p.ews-cheaper { color:var(--good); font-weight:600; }
.ews-progress { height:7px; border-radius:100px; background:var(--surface-2); border:1px solid var(--line); overflow:hidden; }
.ews-progress > i { display:block; height:100%; background:var(--accent); border-radius:100px; }

.ews-retail { color:var(--text-3); text-decoration:line-through; }
.ews-trade { color:var(--accent); font-weight:700; text-decoration:none; }

.ews-buybox { border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface); padding:16px; margin:14px 0; }
.ews-bb-label { font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-3); font-weight:650; margin:0; }
.ews-bb-price { font-family:var(--mono); font-size:26px; font-weight:700; margin:5px 0 4px; font-variant-numeric:tabular-nums; color:var(--accent); }
.ews-bb-sub { font-size:13px; color:var(--text-2); margin:0; }
.ews-product-note { font-size:13px; color:var(--text-3); }

.ews-summary-row th { font-weight:600; }
.ews-summary-row td { text-align:right; font-variant-numeric:tabular-nums; }
.ews-disclosure { font-size:12px; line-height:1.55; color:var(--text-2); background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px; margin:10px 0 0; }
.ews-note { font-size:12.5px; color:var(--text-2); background:var(--warn-bg); border-radius:var(--radius); padding:10px 13px; }

.ews-table-scroll { overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
.ews-ladder { width:100%; border-collapse:collapse; font-size:13.5px; min-width:520px; }
.ews-ladder th, .ews-ladder td { padding:9px 13px; border-bottom:1px solid var(--line); text-align:left; white-space:nowrap; }
.ews-ladder th { font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-3); font-weight:650; background:var(--surface-2); }
.ews-ladder td { font-variant-numeric:tabular-nums; }
.ews-ladder tr.ews-ceiling td { background:var(--gold-bg); }
.ews-ladder tr.ews-hl td { font-weight:600; }
.ews-code { font-family:var(--mono); font-size:11.5px; font-weight:700; }
.ews-pill { display:inline-block; font-size:9.5px; font-weight:700; letter-spacing:.06em; padding:2px 6px; border-radius:100px; background:var(--accent); color:var(--on-accent); margin-left:6px; }

.ews-btn { display:inline-flex; align-items:center; justify-content:center; font-weight:600; font-size:14.5px; padding:11px 20px; border-radius:8px; text-decoration:none; border:1.5px solid transparent; }
.ews-btn-primary { background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
.ews-calc-cta { margin-top:24px; text-align:center; }
.ews-calc-mount .wrap { padding:0; max-width:none; }
.ews-calc-mount .masthead { display:none; }