/**
 * Product page — quantity control.
 * Greg Natale — added Sep 2026. See gn_product_qty_assets() in functions.php.
 *
 * Target is the live site's layout: a 44x48 black qty box sitting directly
 * alongside the add-to-cart button, both on one row. Measured on
 * www.gregnatale.com/product/caldera-vase-clear-umber/ — qty x946 w44 h48,
 * button x991 w437 h48, i.e. a 1px gutter between them.
 *
 * Local's pre-order template (`form.cart.wrapper-for-button-add`) doesn't
 * wrap those two in live's `#action-btn-range` flex row, so its single-column
 * grid stacked them. This file puts them back on one row and cleans up the
 * control itself.
 *
 * What was wrong with the control (measured on
 * /product/caldera-bowl-arabescato-travertine/):
 *
 *   - `.quantity::before { content: "QTY:" }` renders a 38x50 inline label,
 *     but `.single-product .quantity` is `background-color: #000` and the
 *     wrapper's colour is #000 too — black on black. That invisible label,
 *     not padding, was why the block measured 89px tall instead of 48.
 *     app-new.css already hides this ::before in the in-stock layout
 *     (`.single-product #action-btn-range .quantity:before`), just not here.
 *   - The wrapper was 83px wide while `.quantity .select2-container
 *     .select2-selection--single` is pinned to 44px, so the field sat inside
 *     a wider black box.
 *   - The open list took an inline width copied from the control as select2
 *     measured it (34px) and app-new.css strips its border, so it hung off
 *     the left edge with nothing to contain it.
 *
 * The black treatment is deliberate — app-new.css ships a white-on-black
 * arrow (arrowdownWH.png) used only by this control — and the number/arrow
 * padding is left to the theme so it matches live exactly.
 */

/* ---------------------------------------------------------------
   1. Drop the invisible QTY: label
   --------------------------------------------------------------- */

.single-product .quantity::before {
	display: none !important;
}

/* ---------------------------------------------------------------
   2. Quantity and the button share a row

   The form is `display: grid` with one 492px column, so every child became
   its own full-width row. Giving it two columns and putting only the first
   two children on row 1 keeps the existing row rhythm for ADD TO FAVOURITES
   and the share links below.

   The qty wrapper is an unclassed <div> — first child of the form — so it
   has to be addressed positionally. If the template ever gains a wrapper
   class, use it instead.
   --------------------------------------------------------------- */

.single-product form.cart.wrapper-for-button-add {
	grid-template-columns: 44px 1fr;
	column-gap: 1px;
	align-items: start;
}

.single-product form.cart.wrapper-for-button-add > * {
	grid-column: 1 / -1;
}

.single-product form.cart.wrapper-for-button-add > div:first-child {
	grid-column: 1;
}

.single-product form.cart.wrapper-for-button-add > .flex-1 {
	grid-column: 2;
}

/* The IN-STOCK template uses the same form class but wraps qty + button in
   `#action-btn-range`, its own flex row — so that wrapper is the form's
   first child, and the rule above squeezed the whole row into the 44px
   column (measured on /product/celesta-tray-merlot/: #action-btn-range 44px
   wide, ADD TO BAG 100px, both overflowing to the right).

   Let it span the full width and do its own layout. The id (1,0,0) beats
   `> div:first-child` (0,3,1) regardless of order. */

.single-product form.cart.wrapper-for-button-add > #action-btn-range {
	grid-column: 1 / -1;
}

/* Both templates: the button fills whatever column it is given, so ADD TO
   BAG reads the same as PRE ORDER rather than shrinking to its label. */

.single-product form.cart .flex-1 .single_add_to_cart_button {
	width: 100%;
}

/* ---------------------------------------------------------------
   3. One 44x48 box, matching the button beside it
   --------------------------------------------------------------- */

.single-product form.cart .quantity {
	display: flex;
	align-items: stretch;
	width: 44px;
	height: 48px;
	background-color: #000;
}

.single-product form.cart .quantity .select2-container,
.single-product form.cart .quantity .select2-container .select2-selection--single {
	width: 44px !important;
	height: 48px !important;
	background-color: #000 !important;
}

.single-product form.cart .quantity .select2-container .select2-selection--single {
	border: 0 !important;
}

.single-product form.cart .quantity .select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 48px !important;
	color: #fff !important;
}

.single-product form.cart .quantity .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 48px;
}

/* ---------------------------------------------------------------
   4. The open list matches the control

   select2 writes an inline `width` on .select2-dropdown copied from the
   closed control as it measured it at init. app-new.css then carries
   `span.select2-dropdown.select2-dropdown--below { width: auto !important }`
   at (0,2,1) — which beat a plain `.gn-qty-dropdown .select2-dropdown`
   (0,2,0) *even with !important*, while DevTools showed a correct inline
   width. Naming the element and both classes takes this to (0,3,2).

   .gn-qty-dropdown is applied by js/product-qty.js on select2:open; the
   dropdown is appended to <body>, so there is no selector path from
   .quantity to it. The tag keeps this off the header's currency switcher
   (styled to 230px by §8 of header-hamburger.css) and the variation
   selects, which share the same select2 classes.

   The 200px max-height and scroll are select2's own and are fine — the
   quantity list runs to 100.
   --------------------------------------------------------------- */

.gn-qty-dropdown span.select2-dropdown,
.gn-qty-dropdown span.select2-dropdown.select2-dropdown--below,
.gn-qty-dropdown span.select2-dropdown.select2-dropdown--above {
	width: 44px !important;
	border: 1px solid #000 !important;
}

.gn-qty-dropdown .select2-results__option {
	padding: 0 10px !important;
	font-size: 11px;
	line-height: 32px;
}

/* ---------------------------------------------------------------
   5. Leave the in-stock layout's own sizing alone

   Live wraps qty + button in `#action-btn-range`, sized by app-new.css
   ~L9844. Its id wins on display and height; width is handed back here so
   a three-part minus/input/plus control, where that template is used, is
   never squeezed into 44px.
   --------------------------------------------------------------- */

#action-btn-range .quantity {
	width: auto;
}