/* buttons — DECISIONS 080 (Carlos 2026-09-20): ONE BUTTON SYSTEM across the five stores.
 *
 * The GVWS button classes are the single component set; every theme button carries them — the harvested Expanse
 * `element-button` markup (gv_el_button() adds them), the PDP submit, tiles, search, footer subscribe, cart return,
 * GVWS login-to-see-price, bulk-order, forms, the account / pillar / warranty / promo CTAs. "Inverted" is no longer
 * a concept: a button is FILLED (`gvws-button`) or OUTLINED (`gvws-button--secondary`).
 *
 *   TOKENS (per brand, set ONLY in the child theme's style.css — never a literal here):
 *     --gv-accent        the brand: border and fill          Wulf #E51414 · Got Vape / GVWS #FF8B00 · Sutra #22B3F5 · Exxus #76C043
 *     --gv-accent-ink    the FILLED label                    Wulf #FFF (4.73:1) · the others #111 (8.04 / 7.94 / 8.44)
 *   Outlined everywhere = white fill, 2 px brand border, #111 label (15.9:1).
 *   HOVER = the inverse swap: outlined → brand fill + that brand's filled label; filled → outlined. No black hover.
 *   FOCUS-VISIBLE = 2 px brand outline, 2 px offset. DISABLED = 50 % opacity, no hover. Transitions ≤ 120 ms,
 *   none under prefers-reduced-motion.
 *
 *   The harvested Expanse rules for `element-button` / `btn` still load (the harvest is never edited); the class
 *   families they style are kept on the markup only as JS hooks (`btn` for quick-add's `.btn` lookup and the
 *   `btn--loading` state, `element-button` for element-select.js and the compiled layout rules such as
 *   `.pagination .element-button`). Their COLOR declarations are overruled here with `!important` — the one place
 *   in the theme that uses it, and only on the four color properties, because the compiled selectors are
 *   `:is()` groups at (0,4,0) that no plain class selector can outrank.
 *
 *   Enqueued unconditionally after a11y.css and before the child sheet (functions.php; bin/gv-css-guard.php).
 */

:root {
	--gv-btn-brand: var(--gv-accent, #111111);
	--gv-btn-filled-ink: var(--gv-accent-ink, #ffffff);
	--gv-btn-outlined-fill: #ffffff;
	--gv-btn-outlined-ink: #111111;
	--gv-btn-border: 2px;
	--gv-btn-radius: 0;
	--gv-btn-min-height: 46px;
	--gv-btn-padding: 12px 22px;
	--gv-btn-font-size: 15px;
	--gv-btn-transition: 120ms;
}

/* ---------------------------------------------------------------- filled (the default) */

/* Paint: every system button, the bare chrome included (its own rules below reset the paint to transparent).
   `:link` / `:visited` variants because the harvested section styles paint their own anchors at (0,2,0) with
   `!important` (the GVWS login strip's `.wholesale-btn-primary:link { color: #fff }`) — a plain class here at (0,1,0)
   lost to them and left the strip's primary white on orange (2.34:1) and its secondary white on white (076). */
.gvws-button,
.gvws-button:link,
.gvws-button:visited {
	border: var(--gv-btn-border) solid var(--gv-btn-brand) !important;
	border-radius: var(--gv-btn-radius) !important;
	background: var(--gv-btn-brand) !important;
	color: var(--gv-btn-filled-ink) !important;
	box-shadow: none !important;
	text-decoration: none !important;
	cursor: pointer;
	transition: background-color var(--gv-btn-transition) ease, color var(--gv-btn-transition) ease, border-color var(--gv-btn-transition) ease;
	-webkit-appearance: none;
	appearance: none;
}

/* Geometry and type: the buttons proper. The bare chrome (--bare) keeps whatever geometry the compiled Expanse
   rules or its own sheet gave it — a quick-add shell, a grid-view toggle, a stepper stays the size it was. */
.gvws-button:not(.gvws-button--bare) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	box-sizing: border-box;
	min-height: var(--gv-btn-min-height);
	padding: var(--gv-btn-padding);
	font-size: var(--gv-btn-font-size);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: 0.02em;
	text-align: center;
	white-space: nowrap;
}

/* The label element inside the harvested markup (element.text) carries its own color token: follow the button. */
.gvws-button .element-text,
.gvws-button .icon__fallback-text {
	color: inherit !important;
}

.gvws-button:hover,
.gvws-button:focus-visible {
	background: var(--gv-btn-outlined-fill) !important;
	color: var(--gv-btn-outlined-ink) !important;
	border-color: var(--gv-btn-brand) !important;
}

/* ---------------------------------------------------------------- outlined */

.gvws-button--secondary,
.gvws-button--secondary:link,
.gvws-button--secondary:visited {
	background: var(--gv-btn-outlined-fill) !important;
	color: var(--gv-btn-outlined-ink) !important;
	border-color: var(--gv-btn-brand) !important;
}

.gvws-button--secondary:hover,
.gvws-button--secondary:focus-visible {
	background: var(--gv-btn-brand) !important;
	color: var(--gv-btn-filled-ink) !important;
	border-color: var(--gv-btn-brand) !important;
}

/* ---------------------------------------------------------------- states */

.gvws-button:focus-visible {
	outline: 2px solid var(--gv-btn-brand);
	outline-offset: 2px;
}

.gvws-button:disabled,
.gvws-button[disabled],
.gvws-button[aria-disabled="true"] {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

/* A send in flight (module.cart-form / quick-add add `btn--loading`): keep the filled look, no hover swap. */
.gvws-button.btn--loading {
	background: var(--gv-btn-brand) !important;
	color: transparent !important;
	pointer-events: none;
}

/* ---------------------------------------------------------------- sizes and shapes */

.gvws-button--sm {
	--gv-btn-min-height: 38px;
	--gv-btn-padding: 8px 16px;
	--gv-btn-font-size: 13px;
}

.gvws-button--lg {
	--gv-btn-min-height: 54px;
	--gv-btn-padding: 16px 30px;
	--gv-btn-font-size: 16px;
}

.gvws-button--full {
	width: 100%;
}

/* An icon-only control (quick view, zoom, gallery arrows, the header search): a round outlined button. */
.gvws-button--icon {
	--gv-btn-padding: 0;
	--gv-btn-radius: 50%;
	--gv-btn-min-height: 44px; /* the token, not a literal: the geometry rule is (0,2,0) and would win a literal min-height */
	width: 44px;
	min-width: 44px;
	height: 44px;
}

/* Icon-only chrome — the quantity steppers, the select arrow, the header search trigger — and the text-link
   controls (quick add, the Filter trigger, the grid-view toggles): transparent controls, not buttons. A PAINT
   reset only; their geometry is untouched (the base geometry rule excludes --bare). */
.gvws-button--bare,
.gvws-button--bare:hover,
.gvws-button--bare:focus-visible {
	background: transparent !important;
	border-color: transparent !important;
	color: inherit !important;
	box-shadow: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.gvws-button,
	.gvws-button:link,
	.gvws-button:visited {
		transition: none;
	}
}

/* ---------------------------------------------------------------- where the harvest outranks a class */

/* The quick-view circle on a card: the compiled `.grid-product__actions .quick-product__btn { display:block }` sits
   at (0,2,0) and would park the icon in the circle's corner. */
.grid-product__actions > .gvws-button--icon {
	display: inline-flex !important;
}

/* The article hero's two CTAs shared a phone width through a rule keyed on the old class name. */
@media (max-width: 768px) {
	.gvws-article-hero-actions__buttons .gvws-button {
		flex: 1 1 calc(50% - 10px);
	}
}

/* Harvested GVWS instance CSS paints these three at higher specificity (an id, or an attribute selector with
   `!important`): the login card's submit (`instances/login.css`), the brand hero's CTAs (`instances/page.css`).
   Same specificity here, later in the cascade, pointed at the tokens — the harvest is never edited. */
.gvws-login-card button[type="submit"].gvws-button,
.gvws-login-page .button.gvws-button {
	color: var(--gv-btn-filled-ink) !important;
	background: var(--gv-btn-brand) !important;
	border-color: var(--gv-btn-brand) !important;
}

.gvws-login-card button[type="submit"].gvws-button:hover,
.gvws-login-card button[type="submit"].gvws-button:focus-visible,
.gvws-login-page .button.gvws-button:hover,
.gvws-login-page .button.gvws-button:focus-visible {
	color: var(--gv-btn-outlined-ink) !important;
	background: var(--gv-btn-outlined-fill) !important;
	border-color: var(--gv-btn-brand) !important;
}

#shopify-section-page__brand_hero .gvws-brand-hero__actions .gvws-button {
	color: var(--gv-btn-filled-ink) !important;
	background: var(--gv-btn-brand) !important;
	border-color: var(--gv-btn-brand) !important;
}

#shopify-section-page__brand_hero .gvws-brand-hero__actions .gvws-button:hover,
#shopify-section-page__brand_hero .gvws-brand-hero__actions .gvws-button:focus-visible,
#shopify-section-page__brand_hero .gvws-brand-hero__actions .gvws-button--secondary {
	color: var(--gv-btn-outlined-ink) !important;
	background: var(--gv-btn-outlined-fill) !important;
	border-color: var(--gv-btn-brand) !important;
}

#shopify-section-page__brand_hero .gvws-brand-hero__actions .gvws-button--secondary:hover,
#shopify-section-page__brand_hero .gvws-brand-hero__actions .gvws-button--secondary:focus-visible {
	color: var(--gv-btn-filled-ink) !important;
	background: var(--gv-btn-brand) !important;
}

/* The predictive-search "Show all results for …" row wraps a long query. */
.results__search-btn.gvws-button {
	white-space: normal;
}

/* The GVWS wholesale-application submit is gv-commerce markup (`class="gv-apply__submit button"`, no system
   class) that the store's gvws-custom.css used to paint; it is a filled button on the tokens here. */
.gv-apply__submit.button {
	background: var(--gv-btn-brand) !important;
	border: var(--gv-btn-border) solid var(--gv-btn-brand) !important;
	border-radius: var(--gv-btn-radius) !important;
	color: var(--gv-btn-filled-ink) !important;
	box-shadow: none !important;
	transition: background-color var(--gv-btn-transition) ease, color var(--gv-btn-transition) ease;
}

.gv-apply__submit.button:hover,
.gv-apply__submit.button:focus-visible {
	background: var(--gv-btn-outlined-fill) !important;
	color: var(--gv-btn-outlined-ink) !important;
	border-color: var(--gv-btn-brand) !important;
}

.gv-apply__submit.button:focus-visible {
	outline: 2px solid var(--gv-btn-brand);
	outline-offset: 2px;
}