/* All rules scoped under .wholesale-page so they cannot leak to other pages. */

/* ---------- brand hero + tier ladder ---------- */
.wholesale-page .ws-hero { position: relative; overflow: hidden; color: var(--on-brand); background: var(--surface-brand); padding: clamp(3.4rem, 2rem + 5vw, 5.4rem) 0 clamp(2.4rem, 4vw, 3.6rem); }
.wholesale-page .ws-hero__field { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.5; }
.wholesale-page .ws-hero__grid { position: absolute; inset: 0; pointer-events: none; opacity: 0.05; background-image: linear-gradient(var(--on-brand-muted) 1px, transparent 1px), linear-gradient(90deg, var(--on-brand-muted) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(80% 100% at 50% 0%, var(--mask-solid), transparent 88%); }
.wholesale-page .ws-hero__inner { position: relative; }
.wholesale-page .ws-hero__eyebrow { font-family: var(--font-mono); font-size: var(--fs-eyebrow); letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-brand-muted); }
.wholesale-page .ws-hero h1 { margin: 1rem 0 0; font-size: var(--fs-wholesale-title); letter-spacing: -0.02em; line-height: var(--lh-wholesale-title); color: var(--on-brand); max-width: 16ch; }
.wholesale-page .ws-hero h1 .accent { color: var(--on-brand-muted); }
.wholesale-page .ws-hero__lead { margin: 1.1rem 0 0; max-width: 56ch; color: var(--on-brand-muted); font-size: var(--fs-lead); line-height: 1.6; }

.wholesale-page .ws-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9rem; margin-top: 2.2rem; }
.wholesale-page .ws-tier { position: relative; border: 1px solid var(--border-brand); border-radius: var(--radius-md); background: var(--surface-brand-raised); padding: 1.2rem 1.3rem; overflow: hidden; transition: border-color 200ms ease, background 200ms ease; }
.wholesale-page .ws-tier.is-active { border-color: var(--on-brand-muted); background: var(--surface-brand-active); box-shadow: 0 0 0 1px var(--on-brand-muted); }
.wholesale-page .ws-tier__pct { font-family: var(--font-mono); font-size: clamp(1.9rem, 1rem + 3vw, 2.6rem); font-weight: 600; color: var(--on-brand); line-height: 1; }
.wholesale-page .ws-tier__pct small { font-size: 0.9rem; color: var(--on-brand-muted); margin-left: 0.15rem; }
.wholesale-page .ws-tier__qty { display: block; margin-top: 0.55rem; font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-brand-muted); }
.wholesale-page .ws-tier__now { position: absolute; top: 0.85rem; right: 0.95rem; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--surface-brand); background: var(--on-brand-muted); border-radius: 999px; padding: 0.2rem 0.55rem; opacity: 0; transition: opacity 200ms ease; }
.wholesale-page .ws-tier.is-active .ws-tier__now { opacity: 1; }

/* ---------- builder layout ---------- */
.wholesale-page .ws-main { padding: clamp(2rem, 4vw, 3.2rem) 0 clamp(3.6rem, 6vw, 5.6rem); }
.wholesale-page .ws-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(330px, 410px); gap: clamp(1.4rem, 3vw, 2.6rem); align-items: start; }

.wholesale-page .ws-tools { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; margin-bottom: 1.1rem; }
.wholesale-page .ws-search { flex: 1 1 240px; display: flex; align-items: center; gap: 0.55rem; border: 1px solid var(--hairline-strong); border-radius: var(--radius-sm); background: var(--surface); padding: 0.65rem 0.9rem; color: var(--ink-3); }
.wholesale-page .ws-search input { flex: 1; border: 0; outline: none; font: inherit; color: var(--ink); background: transparent; min-width: 0; }
.wholesale-page .ws-kinds { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.wholesale-page .ws-kind { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.05em; border: 1px solid var(--hairline-strong); border-radius: 999px; padding: 0.45rem 0.85rem; color: var(--ink-2); background: var(--surface); cursor: pointer; transition: color 140ms ease, border-color 140ms ease, background 140ms ease; }
.wholesale-page .ws-kind:hover { border-color: var(--accent); color: var(--accent-press); }
.wholesale-page .ws-kind.is-active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* product rows with qty steppers */
.wholesale-page .ws-rows { display: flex; flex-direction: column; gap: 0.5rem; }
.wholesale-page .ws-row { display: grid; grid-template-columns: 52px minmax(0,1fr) auto auto; gap: 0.9rem; align-items: center; border: 1px solid var(--hairline); border-radius: var(--radius-0); background: var(--surface); padding: 0.7rem 0.85rem; transition: border-color 150ms ease, box-shadow 150ms ease; }
.wholesale-page .ws-row.is-on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.wholesale-page .ws-row__thumb { width: 52px; height: 52px; border-radius: var(--radius-sm); object-fit: cover; background: var(--paper-sunk); border: 1px solid var(--hairline); }
.wholesale-page .ws-row__thumb--ph { background: var(--accent-tint-2); }
.wholesale-page .ws-row__info { min-width: 0; }
.wholesale-page .ws-row__name { display: block; font-weight: 600; font-size: 0.95rem; color: var(--ink); line-height: 1.2; }
.wholesale-page .ws-row__sub { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.35rem; }
.wholesale-page .ws-row__price { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.wholesale-page .ws-size { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-2); border: 1px solid var(--hairline-strong); border-radius: 7px; padding: 0.2rem 0.4rem; background: var(--surface); }
.wholesale-page .ws-stepper { display: inline-flex; align-items: center; border: 1px solid var(--hairline-strong); border-radius: var(--radius-sm); overflow: hidden; }
.wholesale-page .ws-stepper button { width: 32px; height: 34px; display: grid; place-items: center; color: var(--ink-2); font-size: 1.05rem; line-height: 1; background: var(--surface); transition: background 140ms ease; }
.wholesale-page .ws-stepper button:hover { background: var(--accent-tint-2); color: var(--ink); }
.wholesale-page .ws-stepper input { width: 44px; height: 34px; border: 0; border-left: 1px solid var(--hairline); border-right: 1px solid var(--hairline); text-align: center; font-family: var(--font-mono); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; color: var(--ink); background: var(--surface); -moz-appearance: textfield; }
.wholesale-page .ws-stepper input::-webkit-outer-spin-button, .wholesale-page .ws-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.wholesale-page .ws-empty { border: 1px dashed var(--hairline-strong); border-radius: var(--radius-0); padding: 2rem; text-align: center; color: var(--ink-3); }
.wholesale-page .ws-empty button { color: var(--accent-press); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- light order summary ---------- */
.wholesale-page .ws-panel { position: sticky; top: 90px; color: var(--ink-2); background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-0); padding: 1.3rem 1.3rem 1.4rem; box-shadow: var(--shadow-3); }
.wholesale-page .ws-panel__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.wholesale-page .ws-panel__title { font-family: var(--font-mono); font-size: var(--fs-sm); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); }
.wholesale-page .ws-panel__count { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--accent-press); background: var(--accent-tint); border-radius: 999px; padding: 0.25rem 0.7rem; font-weight: 600; }

.wholesale-page .ws-gauge { margin-bottom: 1rem; }
.wholesale-page .ws-gauge__label { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--fs-xs); color: var(--ink-3); font-family: var(--font-mono); letter-spacing: 0.04em; margin-bottom: 0.4rem; }
.wholesale-page .ws-gauge__label b { color: var(--ink); }
.wholesale-page .ws-gauge__track { position: relative; height: 8px; border-radius: 999px; background: var(--paper-sunk); overflow: hidden; }
.wholesale-page .ws-gauge__fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 999px; background: var(--accent); transition: width 350ms var(--ease-out, ease-out); }
.wholesale-page .ws-gauge__hint { margin-top: 0.5rem; font-size: var(--fs-xs); color: var(--ink-3); }
.wholesale-page .ws-gauge__hint b { color: var(--accent); }

.wholesale-page .ws-empty-state { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; padding: 1.6rem 0 1.2rem; text-align: center; color: var(--ink-3); }
.wholesale-page .ws-empty-state p { font-size: var(--fs-sm); max-width: 26ch; }

.wholesale-page .ws-lines { display: flex; flex-direction: column; max-height: 260px; overflow-y: auto; scrollbar-width: thin; }
.wholesale-page .ws-line { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem 0.7rem; padding: 0.55rem 0; border-bottom: 1px solid var(--hairline); }
.wholesale-page .ws-line__name { font-size: 0.85rem; font-weight: 600; color: var(--ink); line-height: 1.2; }
.wholesale-page .ws-line__meta { font-family: var(--font-mono); font-size: 0.68rem; color: var(--ink-3); margin-top: 0.2rem; }
.wholesale-page .ws-line__price { font-family: var(--font-mono); font-size: 0.85rem; color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; }

.wholesale-page .ws-math { display: flex; flex-direction: column; gap: 0.45rem; padding-top: 0.9rem; }
.wholesale-page .ws-math__row { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--fs-sm); color: var(--ink-2); }
.wholesale-page .ws-math__row .mono { font-variant-numeric: tabular-nums; }
.wholesale-page .ws-math__row--save { color: var(--accent); }
.wholesale-page .ws-math__row--total { font-size: 1.1rem; color: var(--ink); font-weight: 600; padding-top: 0.5rem; border-top: 1px solid var(--hairline); }
.wholesale-page .ws-pervial { margin-top: 0.7rem; text-align: center; font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.03em; color: var(--ink-3); }
.wholesale-page .ws-pervial b { color: var(--ink); }

.wholesale-page .ws-cta { width: 100%; margin-top: 1rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; background: var(--accent); color: var(--on-accent); font-weight: 600; font-size: 0.98rem; border-radius: var(--radius-sm); padding: 0.95rem 1.2rem; transition: background 160ms ease, transform 160ms ease, opacity 160ms ease; }
.wholesale-page .ws-cta:hover { background: var(--accent-press); transform: translateY(-1px); }
.wholesale-page .ws-cta:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
.wholesale-page .ws-belowmin { margin-top: 0.8rem; text-align: center; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-3); border: 1px dashed var(--hairline-strong); border-radius: var(--radius-sm); padding: 0.6rem 0.8rem; }
.wholesale-page .ws-clear { display: block; width: 100%; margin-top: 0.6rem; text-align: center; font-size: var(--fs-xs); color: var(--ink-3); text-decoration: underline; text-underline-offset: 2px; }
.wholesale-page .ws-clear:hover { color: var(--ink); }
.wholesale-page .ws-ruo { margin-top: 0.9rem; font-size: 0.68rem; line-height: 1.5; color: var(--ink-3); text-align: center; }

/* B2B strip */
.wholesale-page .ws-b2b { border-top: 1px solid var(--hairline); margin-top: clamp(2rem, 4vw, 3rem); padding-top: clamp(1.6rem, 3vw, 2.4rem); display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.5vw, 2rem); }
.wholesale-page .ws-b2b__item h3 { font-size: 1rem; display: flex; align-items: center; gap: 0.5rem; }
.wholesale-page .ws-b2b__item h3 svg { color: var(--accent-press); flex: none; }
.wholesale-page .ws-b2b__item p { margin-top: 0.5rem; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.6; }
.wholesale-page .ws-b2b__item a { color: var(--accent-press); text-underline-offset: 2px; }

/* mobile sticky bar */
.wholesale-page .ws-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: none; align-items: center; justify-content: space-between; gap: 1rem; background: var(--surface); color: var(--ink); padding: 0.8rem 1.1rem; border-top: 1px solid var(--hairline); box-shadow: var(--shadow-3); transform: translateY(110%); transition: transform 260ms var(--ease-out, ease-out); }
.wholesale-page .ws-bar.is-on { transform: translateY(0); }
.wholesale-page .ws-bar__info b { font-family: var(--font-mono); font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.wholesale-page .ws-bar__info span { display: block; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em; color: var(--ink-3); }
.wholesale-page .ws-bar__cta { background: var(--accent); color: var(--on-accent); font-weight: 600; border-radius: var(--radius-sm); padding: 0.7rem 1.3rem; white-space: nowrap; }
.wholesale-page .ws-bar__cta:disabled { opacity: 0.45; }

@media (max-width: 980px) {
  .wholesale-page .ws-grid { grid-template-columns: 1fr; }
  .wholesale-page .ws-panel { position: static; }
  .wholesale-page .ws-bar { display: flex; }
  .wholesale-page .ws-lines { max-height: none; }
  .wholesale-page .ws-b2b { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .wholesale-page .ws-tiers { grid-template-columns: 1fr; }
  .wholesale-page .ws-row { grid-template-columns: 44px minmax(0,1fr); grid-template-rows: auto auto; row-gap: 0.55rem; }
  .wholesale-page .ws-row__thumb { grid-row: 1 / 3; }
  .wholesale-page .ws-row .ws-stepper { grid-column: 2; justify-self: start; }
  .wholesale-page .ws-row__price-cell { grid-column: 2; justify-self: end; grid-row: 1; }
}

/* Visible keyboard focus within clipped controls. */
.wholesale-page .ws-search:focus-within,
.wholesale-page .ws-stepper:focus-within { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.wholesale-page .ws-search input::placeholder { color: var(--ink-3); opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .wholesale-page .ws-tier, .wholesale-page .ws-tier__now,
  .wholesale-page .ws-kind, .wholesale-page .ws-stepper button,
  .wholesale-page .ws-gauge__fill, .wholesale-page .ws-cta,
  .wholesale-page .ws-bar { transition: none; }
  .wholesale-page .ws-cta:hover { transform: none; }
}