/* Wholesale portal — hosted on the worker at /wholesale/wholesale.css, loaded by the Shopify
   shell. A small web store: grid → product → your order → checkout → receipt. Namespaced under
   .thread-whs so it cannot leak into the theme. Phone first; the drawer is full-screen there. */

.thread-whs {
  --tw-ink: #1c1c1e;
  --tw-ink-2: #4a4a4f;
  --tw-line: #d9dde3;
  --tw-surface: #ffffff;
  --tw-surface-2: #f4f6f8;
  --tw-accent: #12a9db;
  --tw-accent-dark: #0e8ab3;
  --tw-accent-ink: #0b2530;
  --tw-ok: #1f8f4e;
  --tw-err: #c0392b;
  /* Breaks out of the theme's content column so the page uses the whole viewport (owner,
     2026-10-23: the centred column felt cramped). Works because Shopify centres that column. */
  box-sizing: border-box;
  max-width: none;
  /* --whs-sbw is the scrollbar's width, set by wholesale.js, so the breakout never adds a sideways scroll. */
  margin: 0 calc(50% - 50vw + var(--whs-sbw, 0px) / 2);
  padding: 1rem clamp(1rem, 4vw, 3rem) 3rem;
  color: var(--tw-ink);
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.thread-whs * { box-sizing: border-box; }
.thread-whs button { font: inherit; cursor: pointer; }
.thread-whs-title { margin: 0 0 .4rem; font-size: 1.75rem; line-height: 1.15; letter-spacing: -.01em; }
.thread-whs-lede { margin: 0 0 1rem; color: var(--tw-ink-2); font-size: 1.05rem; }
.thread-whs-status { margin: 1rem 0; color: var(--tw-ink-2); }
.thread-whs-err { color: var(--tw-err); font-weight: 600; }
.thread-whs-ok { color: var(--tw-ok); font-weight: 700; font-size: 1.1rem; }
.whs-fine { margin: .5rem 0 0; color: var(--tw-ink-2); font-size: .85rem; }
.whs-label { margin: .75rem 0 .35rem; font-size: .85rem; font-weight: 600; color: var(--tw-ink-2); text-transform: uppercase; letter-spacing: .04em; }
.whs-money { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── tabs ────────────────────────────────────────────────────────────────── */
.whs-tabs { display: flex; gap: .25rem; margin: 0 0 .5rem; border-bottom: 1px solid var(--tw-line); }
.whs-tab { padding: .6rem .9rem; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--tw-ink-2); font-weight: 600; margin-bottom: -1px; }
.whs-tab.is-on { color: var(--tw-ink); border-bottom-color: var(--tw-accent); }

/* ── your orders + reports ───────────────────────────────────────────────── */
.whs-orders, .whs-reports { max-width: 60rem; }
.whs-order { border: 1px solid var(--tw-line); border-radius: 14px; background: var(--tw-surface); margin: 0 0 .75rem; overflow: hidden; }
.whs-order-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; width: 100%; padding: .85rem 1rem; border: 0; background: none; text-align: left; color: inherit; }
.whs-order-head:hover { background: var(--tw-surface-2); }
.whs-order-main { display: grid; gap: .15rem; }
.whs-order-main small, .whs-order-state small { color: var(--tw-ink-2); display: block; }
.whs-order-state { display: grid; gap: .15rem; justify-items: end; text-align: right; flex: 0 0 auto; }
.whs-chip { display: inline-block; padding: .2rem .6rem; border-radius: 999px; background: #eaf7fc; color: var(--tw-accent-ink); font-size: .85rem; font-weight: 600; }
.whs-chip-ok { background: #e6f4ec; color: #14532d; }
.whs-chip-muted { background: var(--tw-surface-2); color: var(--tw-ink-2); }
.whs-order-detail { padding: 0 1rem 1rem; border-top: 1px dashed var(--tw-line); }
.whs-order-invoice { margin: .5rem 0 0; font-size: .95rem; }
.whs-order-invoice a { color: var(--tw-accent-dark); font-weight: 600; }
.whs-ok { color: var(--tw-ok); font-weight: 600; }
.whs-muted { color: var(--tw-ink-2); }
.whs-range { display: flex; gap: 1rem; flex-wrap: wrap; margin: 0 0 1rem; }
.whs-range .whs-field { margin: 0; }
.whs-report th { font-size: .85rem; color: var(--tw-ink-2); }

/* ── the bar ─────────────────────────────────────────────────────────────── */
.whs-bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .5rem 0; margin: 0 0 1rem; background: rgba(250, 250, 250, .92); backdrop-filter: blur(6px); border-bottom: 1px solid var(--tw-line); }
.whs-bar-store { color: var(--tw-ink-2); font-size: .95rem; }
.whs-link { background: none; border: 0; padding: 0; color: var(--tw-accent-dark); font-weight: 600; }
.whs-cart { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem .9rem; border: 1px solid var(--tw-line); border-radius: 999px; background: var(--tw-surface); font-weight: 600; }
.whs-cart.has-items { border-color: var(--tw-accent); background: #eaf7fc; color: var(--tw-accent-ink); }

/* ── buttons ─────────────────────────────────────────────────────────────── */
.whs-primary { display: block; width: 100%; padding: .85rem 1rem; border: 0; border-radius: 12px; background: var(--tw-accent); color: #fff; font-size: 1.05rem; font-weight: 700; margin: .75rem 0 0; }
.whs-primary:hover { background: var(--tw-accent-dark); }
.whs-primary:disabled { opacity: .45; cursor: default; }
.whs-secondary { display: block; width: 100%; padding: .7rem 1rem; border: 1px solid var(--tw-line); border-radius: 12px; background: var(--tw-surface); font-weight: 600; margin: .5rem 0 0; }

/* ── pictures ────────────────────────────────────────────────────────────── */
.thread-whs .whs-noimg { display: flex; align-items: center; justify-content: center; background: var(--tw-surface-2); color: var(--tw-ink-2); font-size: .8rem; }

/* ── the grid, grouped by design ─────────────────────────────────────────── */
.whs-family { margin: 0 0 1.75rem; }
.whs-family-title { margin: 0 0 .1rem; font-size: 1.25rem; line-height: 1.2; }
.whs-family-sub { margin: 0 0 .6rem; color: var(--tw-ink-2); font-size: .9rem; }
.whs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .75rem; }
@media (min-width: 40rem) { .whs-grid { grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 1rem; } }
.whs-card { display: block; width: 100%; padding: 0; border: 1px solid var(--tw-line); border-radius: 14px; background: var(--tw-surface); text-align: left; overflow: hidden; color: inherit; transition: transform .12s ease, box-shadow .12s ease; }
.whs-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 0, 0, .08); }
.whs-card-img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: var(--tw-surface-2); }
.whs-card-body { padding: .7rem .8rem .9rem; }
.whs-card-title { margin: 0 0 .2rem; font-size: 1rem; line-height: 1.25; }
.whs-card-price { margin: 0; color: var(--tw-ink-2); font-size: .9rem; }
.whs-card-inorder { margin: .35rem 0 0; font-size: .8rem; font-weight: 600; color: var(--tw-ok); }

/* ── the product page ────────────────────────────────────────────────────── */
.whs-product { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 52rem) { .whs-product { grid-template-columns: minmax(0, 1.1fr) minmax(20rem, .9fr); align-items: start; } .whs-stage { position: sticky; top: 4rem; } }
.whs-hero { border: 1px solid var(--tw-line); border-radius: 16px; overflow: hidden; background: var(--tw-surface); }
.whs-hero-img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: var(--tw-surface-2); }
.whs-thumbs { display: flex; flex-wrap: wrap; gap: .5rem; margin: .75rem 0 0; }
.whs-thumb { display: grid; gap: .2rem; justify-items: center; width: 4.6rem; padding: .25rem; border: 2px solid transparent; border-radius: 10px; background: var(--tw-surface); }
.whs-thumb img, .whs-thumb-chip { display: block; width: 3.6rem; height: 3.6rem; border-radius: 8px; object-fit: cover; background: var(--tw-surface-2); border: 1px solid var(--tw-line); }
.whs-thumb.is-on { border-color: var(--tw-accent); background: #eaf7fc; }
.whs-thumb-label { font-size: .7rem; color: var(--tw-ink-2); text-align: center; line-height: 1.1; }
.whs-product-title { margin: 0 0 .35rem; font-size: 1.5rem; line-height: 1.15; }
.whs-product-desc { margin: 0 0 .5rem; color: var(--tw-ink-2); }
.whs-seg { display: flex; flex-wrap: wrap; gap: .4rem; }
.whs-seg-btn { padding: .45rem .8rem; border: 1px solid var(--tw-line); border-radius: 999px; background: var(--tw-surface); }
.whs-seg-btn.is-on { border-color: var(--tw-accent); background: #eaf7fc; color: var(--tw-accent-ink); font-weight: 600; }
.whs-pricetable { width: 100%; border-collapse: collapse; font-size: .95rem; }
.whs-pricetable td { padding: .3rem 0; border-bottom: 1px dashed var(--tw-line); }
.whs-colorname { margin: .75rem 0 0; }
.whs-steppers { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: .5rem; }
.whs-stepper { display: grid; gap: .25rem; padding: .5rem; border: 1px solid var(--tw-line); border-radius: 10px; background: var(--tw-surface); }
.whs-stepper-size { font-weight: 700; text-align: center; }
.whs-stepper-ctl { display: grid; grid-template-columns: 2.2rem 1fr 2.2rem; gap: .25rem; align-items: stretch; }
.whs-stepper-ctl input { width: 100%; min-width: 0; padding: .45rem .2rem; border: 1px solid var(--tw-line); border-radius: 8px; font: inherit; font-size: 1.05rem; text-align: center; }
.whs-step { border: 1px solid var(--tw-line); border-radius: 8px; background: var(--tw-surface-2); font-size: 1.2rem; font-weight: 700; line-height: 1; }
.whs-linebox { margin: .75rem 0 0; padding: .75rem; border-radius: 10px; background: var(--tw-surface-2); }
.whs-linetotal { display: flex; justify-content: space-between; align-items: baseline; margin: 0; font-size: 1.05rem; }

/* ── the drawer ──────────────────────────────────────────────────────────── */
.whs-scrim { display: none; position: fixed; inset: 0; z-index: 20; background: rgba(0, 0, 0, .35); }
.whs-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 21; width: min(26rem, 100vw); padding: 1rem; overflow-y: auto; background: var(--tw-surface); box-shadow: -8px 0 30px rgba(0, 0, 0, .15); transform: translateX(105%); transition: transform .2s ease; }
.thread-whs-app.is-drawer-open .whs-scrim { display: block; }
.thread-whs-app.is-drawer-open .whs-drawer { transform: none; }
.whs-drawer-head { display: flex; justify-content: space-between; align-items: center; margin: 0 0 .5rem; }
.whs-drawer-title { margin: 0; font-size: 1.25rem; }
.whs-close { width: 2.4rem; height: 2.4rem; border: 1px solid var(--tw-line); border-radius: 50%; background: var(--tw-surface); font-size: 1.4rem; line-height: 1; }
.whs-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.whs-line { display: grid; grid-template-columns: 3.6rem minmax(0, 1fr) auto; gap: .6rem; padding: .5rem 0; border-bottom: 1px solid var(--tw-line); font-size: .95rem; }
.whs-line-img { width: 3.6rem; height: 3.6rem; border-radius: 8px; object-fit: cover; background: var(--tw-surface-2); border: 1px solid var(--tw-line); }
.whs-line-body { display: grid; gap: .1rem; }
.whs-line-body small { color: var(--tw-ink-2); }
.whs-line-money { font-weight: 600; font-variant-numeric: tabular-nums; }
.whs-remove { justify-self: start; background: none; border: 0; padding: .2rem 0 0; color: var(--tw-err); font-size: .85rem; }
.whs-total { display: flex; justify-content: space-between; align-items: baseline; margin: .75rem 0 .25rem; font-size: 1.05rem; font-weight: 600; }
.whs-toast { position: fixed; left: 50%; bottom: 1.5rem; z-index: 30; transform: translate(-50%, 1rem); padding: .6rem 1rem; border-radius: 999px; background: var(--tw-ink); color: #fff; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity .15s ease, transform .15s ease; }
.whs-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ── checkout + receipt ──────────────────────────────────────────────────── */
.whs-checkout, .whs-receipt { max-width: 44rem; margin: 0 auto; padding: 1.25rem; border: 1px solid var(--tw-line); border-radius: 16px; background: var(--tw-surface); }
.whs-summary { width: 100%; border-collapse: collapse; margin: .75rem 0; font-size: .95rem; }
.whs-summary th, .whs-summary td { text-align: left; padding: .5rem .3rem; border-bottom: 1px solid var(--tw-line); vertical-align: top; }
.whs-summary td small { display: block; color: var(--tw-ink-2); }
.whs-summary-pic { width: 4rem; }
.whs-form { display: grid; gap: .5rem; margin: 1rem 0 0; }
.whs-field { display: grid; gap: .25rem; font-size: .9rem; color: var(--tw-ink-2); }
.whs-field input, .whs-field textarea { padding: .6rem .65rem; border: 1px solid var(--tw-line); border-radius: 10px; font: inherit; font-size: 1rem; color: var(--tw-ink); }
.whs-receipt-ref { font-size: 1.2rem; margin: .25rem 0 .5rem; }
.whs-next { margin: 1rem 0 0; padding: .9rem 1rem; border-radius: 12px; background: var(--tw-surface-2); }
.whs-next ol { margin: 0; padding-left: 1.2rem; }
.whs-next li { margin: .25rem 0; }
.whs-acts { display: flex; gap: .5rem; flex-wrap: wrap; margin: 1rem 0 0; }
.whs-acts .whs-secondary { width: auto; margin: 0; }

@media print {
  body * { visibility: hidden; }
  .thread-whs, .thread-whs * { visibility: visible; }
  .thread-whs { position: absolute; left: 0; top: 0; width: 100%; max-width: none; padding: 0; }
  .whs-bar, .whs-tabs, .whs-acts, .whs-drawer, .whs-scrim, .whs-toast, .thread-whs-lede, .whs-range { display: none !important; }
  .whs-receipt { border: 0; padding: 0; max-width: none; }
  .thread-whs { width: auto; margin: 0; }
}