/**
 * The GVWS bulk-order grid — inc/bulk-order.php.
 *
 * HARVESTED from gvws-theme snippets/gvprice-bulk-order.liquid's inline <style>
 * (the live Shopify widget, 2026-07-04 "GVWS Main 9.1.0 v3.1"): the sizes,
 * weights, the grey stepper with the boxed number, the accent rules above the
 * head and the total, the full-width accent CTA — declarations unchanged where
 * the markup allows. What changed: the Shopify widget was a div grid, the Woo
 * one is a real <table> (caption + thead for a screen reader), so the grid
 * template moves from `.gvbo__row` onto the table's columns; the accent is the
 * child theme's --gv-accent / --gv-accent-ink token (GVWS: #ff8b00 / #fff) with
 * the harvest's value as the fallback — never a store literal in shared code.
 *
 * Both forms share every rule: the buy grid (price + stepper columns, the
 * running total, the CTA) and the locked grid (one "Login to See Price" link
 * per row — the cached logged-out markup). The Shopify CTA's .is-added /
 * .is-error states are NOT carried: the Woo grid is a native POST that leaves
 * the page (bulk-order.js toggles no class). Enqueued unconditionally after
 * checkout.css (functions.php) like every sheet under assets/css/; every rule
 * is scoped to .gv-bo so the sheet is inert off the product page.
 */

.gv-bo{margin:1rem 0;color:#111;font-family:var(--gv-font-body,inherit)}
.gv-bo button,.gv-bo input{font-family:inherit;letter-spacing:inherit}

/* screen-reader only: the caption, the lock column's header, the per-row "for Black" */
.gv-bo__sr{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}

/* the pending note (logged in, not yet approved) */
.gv-bo__pending{margin:0 0 12px;font-size:.95rem;color:#555}

/* table = the Shopify grid: header row above an accent rule, one row per option */
.gv-bo__table{width:100%;border-collapse:collapse;table-layout:auto}
.gv-bo__table thead th{padding:0 0 12px;border-bottom:2px solid var(--gv-accent,#ff8b00);font-size:1.15rem;font-weight:700;text-align:left;color:#111}
.gv-bo__table thead th.gv-bo__col-price,.gv-bo__table thead th.gv-bo__col-qty{text-align:right;white-space:nowrap}
.gv-bo__table thead th.gv-bo__col-lock{width:1%}
.gv-bo__row>th,.gv-bo__row>td{padding:16px 0;border-bottom:1px solid rgba(0,0,0,.1);vertical-align:middle;font-weight:400;text-align:left}
.gv-bo__row>*+*{padding-left:18px}
.gv-bo__row:last-child>th,.gv-bo__row:last-child>td{border-bottom:0}

/* the option cell: thumb + name (+ out-of-stock label). The cell STAYS a table cell — a flex <th>
   leaves the row, and its bottom hairline then sits a pixel off the collapsed one the <td>s draw
   (measured on the GVWS PDP, phone: a broken hairline under every row). The live `.gvbo__opt` flex
   (align-items:center, gap 14px, min-width:0) lives on an inner span instead, so a long name wraps
   beside the thumb on a narrow phone rather than dropping under it. */
.gv-bo__opt{min-width:0;width:100%}
.gv-bo__opt-in{display:flex;align-items:center;gap:14px;min-width:0}
.gv-bo__opt .gv-bo__thumb{width:52px;height:52px;object-fit:contain;flex:0 0 auto;margin:0}
/* Row 41: a colour option with a known swatch shows the library chip / colour disc at the thumbnail's footprint — the card's element-swatch, pinned to 52px at every width (Carlos: swatches, not images). */
.gv-bo__opt .gv-bo__chip{--_size:52px;flex:0 0 auto;margin:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.gv-bo__name{min-width:0;overflow-wrap:anywhere;font-size:1.05rem;font-weight:500;line-height:1.25}
.gv-bo__oos{display:block;font-size:.9rem;font-weight:400;color:#6d6d6d;margin-top:2px} /* 076: #9a9a9a was 2.81:1 */

/* price column */
.gv-bo__price{font-size:1.05rem;font-weight:700;white-space:nowrap;text-align:right}
.gv-bo__row--oos .gv-bo__price{color:#bcbcbc}

/* stepper — grey +/- with a boxed number, like Easy:Wholesale */
.gv-bo__qty{text-align:right;white-space:nowrap}
.gv-bo__stepper{display:inline-flex;align-items:center;gap:8px}
.gv-bo__step{width:26px;height:40px;padding:0;border:0;background:transparent;color:#6d6d6d;font-size:1.6rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;-webkit-appearance:none;appearance:none}
.gv-bo__step:hover:not([disabled]){color:#111}
.gv-bo__step[disabled]{opacity:.4;cursor:default}
.gv-bo__input{width:66px;height:46px;padding:0;text-align:center;border:1px solid rgba(0,0,0,.22);border-radius:8px;background:#fff;color:#111;font-size:1.05rem;font-weight:600;-moz-appearance:textfield;appearance:textfield}
.gv-bo__input[disabled]{background:#f6f6f6;color:#c4c4c4}
.gv-bo__input::-webkit-outer-spin-button,.gv-bo__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* running total */
.gv-bo__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 0;border-top:2px solid var(--gv-accent,#ff8b00)}
.gv-bo__foot-label{font-size:1.1rem;font-weight:700}
.gv-bo__foot-count{display:inline-block;min-width:1.6em;margin-left:6px;text-align:center}
.gv-bo__foot-total{font-size:1.1rem;font-weight:700;white-space:nowrap}

/* CTA — a plain button in the accent, full width */
.gv-bo__add{--gv-btn-min-height:58px;--gv-btn-padding:16px;--gv-btn-font-size:1.1rem;display:block;width:100%;margin-top:4px;text-transform:uppercase;letter-spacing:.04em} /* 080: sizes as the system's tokens; colors, border, hover, focus = gvws-button */
.gv-bo__add[disabled]{opacity:.55;pointer-events:none}

/* locked grid: one accent CTA per row, no prices, no steppers */
.gv-bo__lock{text-align:right;white-space:nowrap}
.gv-bo__login{--gv-btn-font-size:1.05rem;--gv-btn-padding:12px 30px;white-space:nowrap} /* 080: sizes as the system's tokens */

/* No phone rules on purpose: the live widget has none — one line per option (thumb · name ·
   price/stepper, or thumb · name · CTA), the head "Color ▾" above its accent rule; below ~400px a
   long name wraps beside its thumb, as the live 1fr column does.
   A stacked phone layout shipped here first and did not match the iPhone reference
   (team review 2026-09-18, GVWS PDP mobile); measured against gvprice-bulk-order.liquid, which
   carries no @media at all. */
.gv-bo__chev{float:right;font-size:1rem;font-weight:400;color:#111;opacity:.7}

/* The one narrow-phone rule, below the width the live widget itself holds together at (~400px:
   its 1fr name column collides with the price). Measured at 360/375: the CTA's 30px side padding
   pushed the table past the page edge and "Chocolate" sat flush against its price. Tighter CTA and
   cell gaps, name and price a notch smaller, and a name may break inside the word as the last
   resort rather than overflow. */
@media (max-width:399px){
	.gv-bo__login{--gv-btn-padding:12px 14px}
	.gv-bo__row>*+*{padding-left:12px}
	.gv-bo__name{font-size:.95rem}
	.gv-bo__price{font-size:.95rem}
}

/* A picture that swaps the main image is a button (live: .gvbo__thumb--btn) — pointer + focus ring. */
.gv-bo__opt .gv-bo__thumb--btn,.gv-bo__opt .gv-bo__chip--btn{cursor:pointer}
.gv-bo__opt .gv-bo__thumb--btn:focus-visible,.gv-bo__opt .gv-bo__chip--btn:focus-visible{outline:2px solid currentColor;outline-offset:2px}