/* =====================================================================================================
 * AS UI 2 — the single global button, control and corner layer (references: autooltech.com, spacex.com).
 * Spec, audit and plan: codex-projects-260928/as-global-buttons-261024/DESIGN.md
 *
 *  0 Tokens            5 Focus / disabled / loading     10 Product card (+ detail add-to-cart corner)
 *  1 Plugin bridges    6 Controls (chips, tabs, options) 11 (merged into 10)
 *  2 Button base       7 Icon controls                   12 Archive, header, side cart, checkout, description
 *  3 Roles             8 Fields and surfaces             13 Home
 *  4 Hover / press     9 Adjacency (groups, joined, phone stacking)
 *
 * Roles: accent (yellow, the one purchase action of a group) · ink (dark, the quieter primary) · line (outline,
 * secondary) · on-dark (SpaceX ghost on dark surfaces). Hover never turns a button into another role's colour,
 * so two neighbours stay distinguishable while one is hovered. Hover only runs on real pointers.
 *
 * Specificity: every rule is `html body:not(#as-ui#as-ui) :where(…)` (+ the EXEMPT :not) — the scope gives (2,0,2), the role
 * lists add nothing, so roles tie and FILE ORDER decides. The two IDs beat the heaviest plugin skin
 * (description: body.x #tab-description .a.b .c !important, 1,4,1). !important answers plugin !important.
 * EXEMPT: the product detail add-to-cart area (.aspd-buy quantity + add to cart, .aspd-quote, sticky-bar and
 * buy-sheet actions) and the sticky section nav (.aspd-snav, pills) keep AS Product Detail's own design by
 * request — every rule carries
 * :not(:where(.aspd-buy, .aspd-quote, .aspd-bar__actions, .aspd-sheet__actions, .aspd-snav) *).
 * New button: add .as-btn + .as-btn--{accent|ink|line|on-dark} [+ --lg|--md|--sm], or add its class to a list.
 * ===================================================================================================== */

/* ---------- 0. Tokens ---------- */
:root {
	--as-ink: #191919;
	--as-ink-hover: #3a3a3a;
	--as-ink-press: #000;
	--as-paper: #fff;
	--as-yellow: #feb511;
	--as-yellow-hover: #f2a900;
	--as-yellow-press: #de9a00;
	--as-line: rgba(25, 25, 25, .5); /* 3.3:1 on white (WCAG 1.4.11) */
	--as-line-soft: rgba(25, 25, 25, .16);
	--as-tint-hover: rgba(25, 25, 25, .05);
	--as-tint-press: rgba(25, 25, 25, .1);
	--as-dark-text: #f0f0f5;
	--as-dark-line: rgba(240, 240, 250, .45);
	--as-dark-fill: rgba(23, 23, 23, .35);

	--as-radius-btn: 2px;
	--as-radius-ctrl: 2px;
	--as-radius-sm: 4px;
	--as-radius-md: 6px;
	--as-radius-lg: 8px;
	--as-radius-purchase: 12px; /* checkout-type CTAs = the detail Add to cart (AS Product Detail radius_button) */
	--as-radius-circle: 50%;

	--as-btn-h-lg: 48px;
	--as-btn-h-md: 40px;
	--as-btn-h-sm: 36px;
	--as-ctrl-h: 36px;
	--as-btn-pad-lg: 0 24px;
	--as-btn-pad-md: 0 20px;
	--as-btn-pad-sm: 0 14px;
	--as-btn-size-lg: 14px;
	--as-btn-size: 13px;
	--as-btn-size-sm: 12px;
	--as-btn-font: var(--autoboss-font-sans, 'IBM Plex Sans', Arial, sans-serif);
	--as-btn-weight: 600;
	--as-btn-track: .08em;
	--as-btn-case: uppercase;
	--as-btn-icon: 16px;
	--as-ease: .2s ease;

	--as-gap-inline: 12px;
	--as-gap-tight: 8px;
	--as-gap-stack: 8px;
	--as-focus: var(--as-ink);
	--as-focus-dark: #fff;

	--theme-button-border-radius: var(--as-radius-btn);
	--theme-form-field-border-radius: var(--as-radius-ctrl);
}
@media (max-width: 767.98px) {
	:root { --as-gap-inline: 8px; --as-btn-pad-lg: 0 16px; --as-btn-pad-md: 0 16px; }
}
/* Touch: secondary buttons reach 44 px; controls 40. */
@media (pointer: coarse) {
	:root { --as-btn-h-md: 44px; --as-ctrl-h: 40px; }
}

/* ---------- 1. Plugin tokens that already drive their own parts ---------- */
html body:not(#as-ui#as-ui) {
	--asbh-s-btn-r: var(--as-radius-btn);
	--asbh-s-yellow: var(--as-yellow);
	--asbh-s-ink: var(--as-ink);
	--absc-radius-md: var(--as-radius-btn);
	--abhf-radius: var(--as-radius-ctrl);
	--abpc-btn-bg: var(--as-yellow);
	--abpc-btn-color: var(--as-ink);
	--absa-radius: var(--as-radius-ctrl);
}

/* ---------- 2. Button base: shape, type, motion ---------- */
html body:not(#as-ui#as-ui) :where(
	.as-btn,
	.button, .ct-button, .wp-block-button__link, .woocommerce-form-login__submit,
	.single_add_to_cart_button, .checkout-button, #place_order, .wc-block-cart__submit-button,
	.wc-block-components-checkout-place-order-button,
	.ff-btn, .ff-btn-submit, .cmplz-btn, .abpvc-btn,
	.abpc-card .abpc-btn,
	.aspd-btn, .aspd-specs-card__all,
	.asdb .asdb-btn:not(.asdb-btn--link), .autool-resource-actions a,
	.autool-product-button, .autool-slider-view-all, .autool-workflow__button,
	.autool-model-compare__done, .autool-model-compare__clear, .autool-model-compare__mobile-trigger,
	.absc__button, .absc__checkout, .absa-btn, .abrv-btn, .abms-btn,
	.asbh-s-btn, .asbh-skin-site .autool-hp-btn
):not(:where(.aspd-buy, .aspd-quote, .aspd-bar__actions, .aspd-sheet__actions, .aspd-snav) *) {
	border-radius: var(--as-radius-btn) !important;
	font-family: var(--as-btn-font) !important;
	font-weight: var(--as-btn-weight) !important;
	line-height: 1.2 !important;
	letter-spacing: var(--as-btn-track) !important;
	text-align: center;
	text-decoration: none !important;
	text-transform: var(--as-btn-case) !important;
	box-shadow: none;
	filter: none !important;
	transition: background-color var(--as-ease), border-color var(--as-ease), color var(--as-ease), opacity var(--as-ease) !important;
}

/* Sizes. lg = purchase and section CTAs · md = secondary, dialogs, utility · sm = product cards. */
html body:not(#as-ui#as-ui) :where(
	.as-btn--lg, .single_add_to_cart_button, .checkout-button, #place_order, .wc-block-cart__submit-button,
	.wc-block-components-checkout-place-order-button, .aspd-btn:not(.aspd-bar__btn):not(.aspd-sheet__btn),
	.aspd-sheet__btn, .absc__button, .absc__checkout, .autool-product-button,
	.asdb .asdb-btn:not(.asdb-btn--link), .asbh-s-btn:not(.asbh-s-btn--sm), .abhf-af .ff-btn-submit
):not(:where(.aspd-buy, .aspd-quote, .aspd-bar__actions, .aspd-sheet__actions, .aspd-snav) *) {
	min-height: var(--as-btn-h-lg) !important;
	font-size: var(--as-btn-size-lg) !important;
}
html body:not(#as-ui#as-ui) :where(
	.as-btn--md, .aspd-specs-card__all, .autool-slider-view-all, .autool-workflow__button, .autool-resource-actions a,
	.abrv-btn, .abms-btn, .abpvc-btn, .cmplz-btn, .ff-btn, .ff-btn-submit, .absa-btn,
	.autool-model-compare__done, .autool-model-compare__clear
):not(:where(.aspd-buy, .aspd-quote, .aspd-bar__actions, .aspd-sheet__actions, .aspd-snav) *) {
	min-height: var(--as-btn-h-md) !important;
	font-size: var(--as-btn-size) !important;
}
html body:not(#as-ui#as-ui) :where(.as-btn--sm, .abpc-card .abpc-btn, .autool-model-compare__mobile-trigger):not(:where(.aspd-buy, .aspd-quote, .aspd-bar__actions, .aspd-sheet__actions, .aspd-snav) *) {
	font-size: var(--as-btn-size-sm) !important;
	letter-spacing: .06em !important;
}
html body:not(#as-ui#as-ui) :where(.as-btn):not(:where(.aspd-buy, .aspd-quote, .aspd-bar__actions, .aspd-sheet__actions, .aspd-snav) *) { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: var(--as-btn-pad-md); }
html body:not(#as-ui#as-ui) :where(.as-btn--lg):not(:where(.aspd-buy, .aspd-quote, .aspd-bar__actions, .aspd-sheet__actions, .aspd-snav) *) { padding: var(--as-btn-pad-lg); }
html body:not(#as-ui#as-ui) :where(.as-btn--sm):not(:where(.aspd-buy, .aspd-quote, .aspd-bar__actions, .aspd-sheet__actions, .aspd-snav) *) { min-height: var(--as-btn-h-sm); padding: var(--as-btn-pad-sm); }
html body:not(#as-ui#as-ui) :where(.as-btn, .aspd-btn, .asdb-btn, .abpc-btn, .absc__button):not(:where(.aspd-buy, .aspd-quote, .aspd-bar__actions, .aspd-sheet__actions, .aspd-snav) *) svg { width: var(--as-btn-icon); height: var(--as-btn-icon); flex: none; }

/* ---------- 3. Roles (order matters: line < ink < accent < on-dark) ---------- */

/* Line — 1 px outline on the page colour. */
html body:not(#as-ui#as-ui) :where(
	.as-btn--line,
	.aspd-btn--outline, .aspd-specs-card__all,
	.absc__button:not(.absc__checkout), .abrv-btn, .autool-slider-view-all,
	.autool-resource-actions a, .autool-product-button:not(.autool-product-button--primary), .asdb .asdb-btn--secondary, .abpvc-btn:not(.abpvc-btn--primary), .ff-btn:not(.ff-btn-submit),
	.abms-btn:not(.abms-btn--primary), .cmplz-btn:not(.cmplz-accept), .autool-model-compare__clear,
	.asbh-s-btn--line, .asbh-skin-site :is(.autool-hp-btn-outline, .autool-hp-btn-outline--dark)
):not(:where(.aspd-buy, .aspd-quote, .aspd-bar__actions, .aspd-sheet__actions, .aspd-snav) *) {
	border: 1px solid var(--as-line) !important;
	background: transparent !important;
	color: var(--as-ink) !important;
}

/* Ink — dark fill, white text. */
html body:not(#as-ui#as-ui) :where(
	.as-btn--ink,
	.aspd-btn--ink, .aspd-reviews__actions .aspd-btn--primary, .aspd-bar__btn--buy, .aspd-sheet__btn--buy,
	.ff-btn-submit, .absa-btn, .abms-btn--primary, .autool-model-compare__done, .cmplz-btn.cmplz-accept, .abpvc-btn--primary,
	.asbh-s-btn--solid, .asbh-skin-site .autool-hp-btn-primary
):not(:where(.aspd-buy, .aspd-quote, .aspd-bar__actions, .aspd-sheet__actions, .aspd-snav) *) {
	border: 1px solid var(--as-ink) !important;
	background: var(--as-ink) !important;
	color: var(--as-paper) !important;
}

/* Accent — yellow fill, ink text. One per group. */
html body:not(#as-ui#as-ui) :where(
	.as-btn--accent,
	.single_add_to_cart_button, .aspd-bar .aspd-btn--primary, .aspd-dialog .aspd-btn--primary, .aspd-sheet__btn--cart,
	.checkout-button, #place_order, .wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button,
	.absc__checkout, .abpc-card .abpc-btn-cart, .abpc-card .abpc-btn-icon,
	.autool-product-button--primary, .autool-workflow__button--next, .asdb .asdb-btn--primary,
	.autool-resource-actions a:first-child,
	.asbh-s-btn--solid.asbh-s-btn--on-dark, .asbh-skin-site .autool-hp-hero-btns .autool-hp-btn-primary,
	.abhf-af:not(.abhf-af--site) .ff-btn-submit
):not(:where(.aspd-buy, .aspd-quote, .aspd-bar__actions, .aspd-sheet__actions, .aspd-snav) *) {
	border: 1px solid var(--as-yellow) !important;
	background: var(--as-yellow) !important;
	color: var(--as-ink) !important;
}

/* On dark — SpaceX ghost: translucent fill, light hairline. */
html body:not(#as-ui#as-ui) :where(
	.as-btn--on-dark,
	.autool-workflow__button:not(.autool-workflow__button--next),
	[data-autool-surface='dark'] :is(.autool-slider-view-all, .autool-resource-actions a:not(:first-child), .autool-product-button:not(.autool-product-button--primary)),
	.asbh-s-btn--line.asbh-s-btn--on-dark, .asbh-skin-site .autool-hp-hero-btns .autool-hp-btn-outline
):not(:where(.aspd-buy, .aspd-quote, .aspd-bar__actions, .aspd-sheet__actions, .aspd-snav) *) {
	border: 1px solid var(--as-dark-line) !important;
	background: var(--as-dark-fill) !important;
	color: var(--as-dark-text) !important;
}

/* ---------- 4. Hover and press — real pointers only, never on disabled ---------- */
@media (hover: hover) and (pointer: fine) {
	html body:not(#as-ui#as-ui) :where(
		.as-btn--line,
		.aspd-btn--outline, .aspd-specs-card__all,
		.absc__button:not(.absc__checkout), .abrv-btn, .autool-slider-view-all,
		.autool-resource-actions a, .autool-product-button:not(.autool-product-button--primary), .asdb .asdb-btn--secondary, .abpvc-btn:not(.abpvc-btn--primary), .ff-btn:not(.ff-btn-submit),
		.abms-btn:not(.abms-btn--primary), .cmplz-btn:not(.cmplz-accept), .autool-model-compare__clear,
		.asbh-s-btn--line, .asbh-skin-site :is(.autool-hp-btn-outline, .autool-hp-btn-outline--dark)
	):not(:where(.aspd-buy, .aspd-quote, .aspd-bar__actions, .aspd-sheet__actions, .aspd-snav) *):not(:disabled, .disabled, [aria-disabled='true']):hover,
	html body:not(#as-ui#as-ui) a:hover > :where(.asbh-s-btn--line) {
		border-color: var(--as-ink) !important;
		background: var(--as-tint-hover) !important;
		color: var(--as-ink) !important;
	}
	html body:not(#as-ui#as-ui) :where(
		.as-btn--ink,
		.aspd-btn--ink, .aspd-reviews__actions .aspd-btn--primary, .aspd-bar__btn--buy, .aspd-sheet__btn--buy,
		.ff-btn-submit, .absa-btn, .abms-btn--primary, .autool-model-compare__done, .cmplz-btn.cmplz-accept, .abpvc-btn--primary,
		.asbh-s-btn--solid, .asbh-skin-site .autool-hp-btn-primary
	):not(:where(.aspd-buy, .aspd-quote, .aspd-bar__actions, .aspd-sheet__actions, .aspd-snav) *):not(:disabled, .disabled, [aria-disabled='true']):hover,
	html body:not(#as-ui#as-ui) a:hover > :where(.asbh-s-btn--solid) {
		border-color: var(--as-ink-hover) !important;
		background: var(--as-ink-hover) !important;
		color: var(--as-paper) !important;
	}
	html body:not(#as-ui#as-ui) :where(
		.as-btn--accent,
		.single_add_to_cart_button, .aspd-bar .aspd-btn--primary, .aspd-dialog .aspd-btn--primary, .aspd-sheet__btn--cart,
		.checkout-button, #place_order, .wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button,
		.absc__checkout, .abpc-card .abpc-btn-cart, .abpc-card .abpc-btn-icon,
		.autool-product-button--primary, .autool-workflow__button--next, .asdb .asdb-btn--primary,
		.autool-resource-actions a:first-child,
		.asbh-s-btn--solid.asbh-s-btn--on-dark, .asbh-skin-site .autool-hp-hero-btns .autool-hp-btn-primary,
		.abhf-af:not(.abhf-af--site) .ff-btn-submit
	):not(:where(.aspd-buy, .aspd-quote, .aspd-bar__actions, .aspd-sheet__actions, .aspd-snav) *):not(:disabled, .disabled, [aria-disabled='true']):hover,
	html body:not(#as-ui#as-ui) a:hover > :where(.asbh-s-btn--solid.asbh-s-btn--on-dark) {
		border-color: var(--as-yellow-hover) !important;
		background: var(--as-yellow-hover) !important;
		color: var(--as-ink) !important;
	}
	html body:not(#as-ui#as-ui) :where(
		.as-btn--on-dark,
		.autool-workflow__button:not(.autool-workflow__button--next),
		[data-autool-surface='dark'] :is(.autool-slider-view-all, .autool-resource-actions a:not(:first-child), .autool-product-button:not(.autool-product-button--primary)),
		.asbh-s-btn--line.asbh-s-btn--on-dark, .asbh-skin-site .autool-hp-hero-btns .autool-hp-btn-outline
	):not(:where(.aspd-buy, .aspd-quote, .aspd-bar__actions, .aspd-sheet__actions, .aspd-snav) *):not(:disabled, .disabled, [aria-disabled='true']):hover,
	html body:not(#as-ui#as-ui) a:hover > :where(.asbh-s-btn--line.asbh-s-btn--on-dark) {
		border-color: #fff !important;
		background: #fff !important;
		color: #0b0b0c !important;
	}
}
/* Press (all pointers): one step deeper than hover. */
html body:not(#as-ui#as-ui) :where(.as-btn--line, .aspd-btn--outline, .aspd-specs-card__all, .abpc-card .abpc-btn-details,
	.absc__button:not(.absc__checkout), .abrv-btn, .autool-slider-view-all, .asdb .asdb-btn--secondary, .asbh-s-btn--line):not(:where(.aspd-buy, .aspd-quote, .aspd-bar__actions, .aspd-sheet__actions, .aspd-snav) *):not(:disabled):active {
	background: var(--as-tint-press) !important;
}
html body:not(#as-ui#as-ui) :where(.as-btn--ink, .aspd-btn--ink, .aspd-bar__btn--buy, .aspd-sheet__btn--buy, .ff-btn-submit,
	.abpvc-btn--primary, .absa-btn, .abms-btn--primary, .asbh-s-btn--solid:not(.asbh-s-btn--on-dark)):not(:where(.aspd-buy, .aspd-quote, .aspd-bar__actions, .aspd-sheet__actions, .aspd-snav) *):not(:disabled):active {
	border-color: var(--as-ink-press) !important;
	background: var(--as-ink-press) !important;
}
html body:not(#as-ui#as-ui) :where(.as-btn--accent, .single_add_to_cart_button, .aspd-bar .aspd-btn--primary, .aspd-sheet__btn--cart,
	.checkout-button, #place_order, .absc__checkout, .abpc-card :is(.abpc-btn-cart, .abpc-btn-icon), .autool-product-button,
	.autool-workflow__button--next, .asdb .asdb-btn--primary, .abhf-af:not(.abhf-af--site) .ff-btn-submit):not(:where(.aspd-buy, .aspd-quote, .aspd-bar__actions, .aspd-sheet__actions, .aspd-snav) *):not(:disabled, .disabled):active {
	border-color: var(--as-yellow-press) !important;
	background: var(--as-yellow-press) !important;
}

/* ---------- 5. Focus, disabled, loading ---------- */
html body:not(#as-ui#as-ui) :where(
	.as-btn, .as-chip, .button, .ct-button, .wp-block-button__link, .single_add_to_cart_button, .checkout-button, #place_order,
	.ff-btn, .cmplz-btn, .abpvc-btn, .abpc-card .abpc-btn, .aspd-btn, .aspd-specs-card__all, .asdb .asdb-btn,
	.autool-product-button, .autool-slider-view-all, .autool-resource-actions a, .absc__button, .absa-btn, .abrv-btn, .abms-btn,
	.asbh-s-btn, .asbh-skin-site .autool-hp-btn, .asbh-s-tab, .asbh-s-chip, .aspd-chip, .aspd-mode, .aspd-option, .aspd-snav__link,
	.abrv-chip, .abrv-vote, .absa-chip, .absa-pill, .absa-tab, .absa-menu-btn, .absa-pg, .absa-pg-arrow, .absa-icon-btn,
	.abhf-sbtn, .abhf-allcat, .aspd-gallery__arrow, .aspd-gallery__zoom, .aspd-rail-btn, .autool-mobile-rail-button,
	.autool-product-gallery-control, .aspd-dialog__close, .aspd-qty__btn, .asbh-page a, .abpc-card a
):not(:where(.aspd-buy, .aspd-quote, .aspd-bar__actions, .aspd-sheet__actions, .aspd-snav) *):focus-visible {
	outline: 2px solid var(--as-focus) !important;
	outline-offset: 2px !important;
	box-shadow: none !important;
}
/* On dark surfaces the ring turns white. */
html body:not(#as-ui#as-ui) :where([data-autool-surface='dark'], .asbh-skin-site .autool-hp-hero-section, .asbh-s-about__panel,
	.asbh-s--dark, .asdb-strip):not(:where(.aspd-buy, .aspd-quote, .aspd-bar__actions, .aspd-sheet__actions, .aspd-snav) *) :where(a, button):focus-visible,
html body:not(#as-ui#as-ui) :where(.as-btn--on-dark):not(:where(.aspd-buy, .aspd-quote, .aspd-bar__actions, .aspd-sheet__actions, .aspd-snav) *):focus-visible {
	outline-color: var(--as-focus-dark) !important;
}
html body:not(#as-ui#as-ui) :where(
	.as-btn, .single_add_to_cart_button, .aspd-btn, .abpc-card .abpc-btn, .asdb .asdb-btn, .absc__button, .absc__checkout,
	.autool-product-button, .autool-workflow__button, .checkout-button, #place_order, .ff-btn-submit
):not(:where(.aspd-buy, .aspd-quote, .aspd-bar__actions, .aspd-sheet__actions, .aspd-snav) *):is(:disabled, .disabled, [aria-disabled='true']) {
	opacity: .4 !important;
	cursor: not-allowed !important;
}
html body:not(#as-ui#as-ui) :where(.as-btn, .aspd-btn, .abpc-card .abpc-btn, .absc__button, .absc__checkout, .single_add_to_cart_button):not(:where(.aspd-buy, .aspd-quote, .aspd-bar__actions, .aspd-sheet__actions, .aspd-snav) *):is(.loading, .is-loading) {
	opacity: .7 !important;
	cursor: progress !important;
	pointer-events: none;
}

/* ---------- 6. Controls — chips, tabs, filters, options, segmented, pagination ---------- */
html body:not(#as-ui#as-ui) :where(
	.as-chip,
	.asbh-s-tab, .asbh-s-chip, .aspd-chip, .aspd-option, /* .aspd-mode + .aspd-gallery__modes: capsule media switch, kept by request (2026-10-26) */
	.aspd-actions > button, .aspd-review__vote, .aspd-gallery__counter, .aspd-kf__count, .aspd-reviews__bar, .aspd-bar__icon,
	.abrv-chip, .abrv-vote, .absa-menu-btn, .absa-chip, .absa-brand, .absa-tab, .absa-tabs ul, .absa-pill, .absa-pg,
	.absa-pg-arrow, .absa-icon-btn, .absa-price-go, .abhf-sel-text, .abhf-allcat, .abms-pass__toggle, .absc__coupon-back,
	.autool-workflow__tab, .autool-product-gallery-thumb
):not(:where(.aspd-buy, .aspd-quote, .aspd-bar__actions, .aspd-sheet__actions, .aspd-snav) *) {
	border-radius: var(--as-radius-ctrl) !important;
}
html body:not(#as-ui#as-ui) :where(.asbh-s-tab, .asbh-s-chip, .aspd-chip, .abrv-chip, .absa-chip, .absa-pill, .absa-menu-btn,
	.absa-icon-btn, .absa-brand):not(:where(.aspd-buy, .aspd-quote, .aspd-bar__actions, .aspd-sheet__actions, .aspd-snav) *) {
	min-height: var(--as-ctrl-h) !important;
	transition: border-color var(--as-ease), background-color var(--as-ease), color var(--as-ease) !important;
}
html body:not(#as-ui#as-ui) :where(.abrv-vote, .aspd-review__vote):not(:where(.aspd-buy, .aspd-quote, .aspd-bar__actions, .aspd-sheet__actions, .aspd-snav) *) { min-height: 32px !important; }
/* Selected = ink fill (chips, tabs, segmented) or ink 2 px frame (variation options, which carry a check badge). */
html body:not(#as-ui#as-ui) :where(.asbh-s-tab[aria-selected='true'], .asbh-s-chip[aria-pressed='true'], .abrv-chip.is-on,
	.absa-tab.is-on, .absa-pg.is-on):not(:where(.aspd-buy, .aspd-quote, .aspd-bar__actions, .aspd-sheet__actions, .aspd-snav) *) {
	border-color: var(--as-ink) !important;
	background: var(--as-ink) !important;
	color: var(--as-paper) !important;
}
@media (hover: hover) and (pointer: fine) {
	html body:not(#as-ui#as-ui) :where(.asbh-s-tab, .asbh-s-chip, .aspd-chip, .aspd-option, .abrv-chip, .absa-chip, .absa-pill,
		.absa-menu-btn, .absa-brand, .absa-pg, .absa-pg-arrow, .absa-icon-btn, .abrv-vote, .aspd-review__vote):not(:where(.aspd-buy, .aspd-quote, .aspd-bar__actions, .aspd-sheet__actions, .aspd-snav) *)
		:not([aria-selected='true'], [aria-pressed='true'], .is-on, .is-unavailable, :disabled):hover {
		border-color: var(--as-ink) !important;
	}
	html body:not(#as-ui#as-ui) :where(.absa-tab:not(.is-on), .absa-pill, .aspd-mode:not(.is-on)):not(:where(.aspd-buy, .aspd-quote, .aspd-bar__actions, .aspd-sheet__actions, .aspd-snav) *):hover { color: var(--as-ink) !important; }
}

/* ---------- 7. Icon controls ----------
 * Floating over media or a rail (carousel arrows, zoom, play, close on photos, dots) = circle — the exception.
 * In a toolbar or field (search, view switch, quantity, sheet close) = square 2 px. */
html body:not(#as-ui#as-ui) :where(.aspd-dialog__close):not(:where(.aspd-buy, .aspd-quote, .aspd-bar__actions, .aspd-sheet__actions, .aspd-snav) *) {
	width: 40px !important;
	height: 40px !important;
	border-radius: var(--as-radius-ctrl) !important;
}
@media (hover: hover) and (pointer: fine) {
	html body:not(#as-ui#as-ui) :where(.aspd-gallery__arrow, .aspd-rail-btn, .autool-mobile-rail-button, .autool-product-gallery-control,
		.asbh-s-arrow, .aspd-gallery__zoom):not(:where(.aspd-buy, .aspd-quote, .aspd-bar__actions, .aspd-sheet__actions, .aspd-snav) *):not(:disabled):hover {
		border-color: var(--as-ink) !important;
		background: var(--as-ink) !important;
		color: var(--as-paper) !important;
	}
	html body:not(#as-ui#as-ui) :where(.aspd-qty__btn):not(:where(.aspd-buy, .aspd-quote, .aspd-bar__actions, .aspd-sheet__actions, .aspd-snav) *):hover { background: var(--as-tint-hover) !important; }
}

/* Touch: icon controls and tab links reach 40 px. */
@media (pointer: coarse) {
	html body:not(#as-ui#as-ui) :where(.aspd-gallery__zoom, .autool-product-gallery-control, .asdb-strip__btn):not(:where(.aspd-buy, .aspd-quote, .aspd-bar__actions, .aspd-sheet__actions, .aspd-snav) *) {
		min-width: 40px !important;
		min-height: 40px !important;
	}
	html body:not(#as-ui#as-ui) :where(.autool-compare-matrix__remove):not(:where(.aspd-buy, .aspd-quote, .aspd-bar__actions, .aspd-sheet__actions, .aspd-snav) *) { min-width: 32px !important; min-height: 32px !important; }
}

/* ---------- 8. Fields and surfaces ---------- */
html body:not(#as-ui#as-ui) :where(
	input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='submit']):not([type='button']):not([type='reset']):not(.abhf-kw),
	textarea, select, .select2-selection, .ff-el-form-control, .absa-find input
):not(:where(.aspd-buy, .aspd-quote, .aspd-bar__actions, .aspd-sheet__actions, .aspd-snav) *) {
	border-radius: var(--as-radius-ctrl) !important;
}
html body:not(#as-ui#as-ui) :where(.aspd-gallery__thumb, .absc__qty, .abspk-qty):not(:where(.aspd-buy, .aspd-quote, .aspd-bar__actions, .aspd-sheet__actions, .aspd-snav) *) { border-radius: var(--as-radius-sm) !important; }
html body:not(#as-ui#as-ui) :where(.absa-shape-square .absa-tile-img):not(:where(.aspd-buy, .aspd-quote, .aspd-bar__actions, .aspd-sheet__actions, .aspd-snav) *) { border-radius: var(--as-radius-md) !important; }
html body:not(#as-ui#as-ui) :where(.aspd-bar.is-autoboss, .aspd-reviews__summary, .aspd-reviews__empty, .absa-menu-pop, .absa-empty):not(:where(.aspd-buy, .aspd-quote, .aspd-bar__actions, .aspd-sheet__actions, .aspd-snav) *) {
	border-radius: var(--as-radius-lg) !important;
}
html body:not(#as-ui#as-ui) :where(.aspd-dialog):not(:where(.aspd-buy, .aspd-quote, .aspd-bar__actions, .aspd-sheet__actions, .aspd-snav) *) { border-radius: var(--as-radius-lg) var(--as-radius-lg) 0 0 !important; }
/* Phones and tablets: the detail sticky bar is docked full width at the bottom, square like the cart page's bar and
   the site bottom nav. Only the desktop floating card (AS Product Detail desktop_min, 1000) keeps the corner. */
@media (max-width: 999.98px) {
	html body:not(#as-ui#as-ui) .aspd-bar.is-autoboss { border-radius: 0 !important; }
}
@media (min-width: 690px) {
	html body:not(#as-ui#as-ui) :where(.aspd-dialog:not(.aspd-sheet)):not(:where(.aspd-buy, .aspd-quote, .aspd-bar__actions, .aspd-sheet__actions, .aspd-snav) *) { border-radius: var(--as-radius-lg) !important; }
}

/* ---------- 9. Adjacency ----------
 * a) Inline groups: 12 px apart (8 on phones), equal height, one accent.
 * b) Joined pairs (search field + button): no gap, outer corners only. The detail page's add-to-cart area keeps
 *    the plugin's own design (see EXEMPT below).
 * c) Phones: two CTAs in a content group stack full width; purchase pairs stay side by side at equal width. */
html body:not(#as-ui#as-ui) :where(.asdb-actions, .autool-resource-actions, .autool-product-actions, .aspd-reviews__actions, .absc__actions):not(:where(.aspd-buy, .aspd-quote, .aspd-bar__actions, .aspd-sheet__actions, .aspd-snav) *) {
	gap: var(--as-gap-inline) !important;
}
@media (max-width: 767.98px) {
	html body:not(#as-ui#as-ui) :where(.asdb-actions, .autool-resource-actions):not(:where(.aspd-buy, .aspd-quote, .aspd-bar__actions, .aspd-sheet__actions, .aspd-snav) *):has(> :nth-child(2)) > :where(a, button) {
		flex: 1 1 100% !important;
		width: 100% !important;
	}
}

/* ---------- 10. Product card ----------
 * Actions (desktop hover panel / overlay on the photo): [cart: accent, fills the row][details: square icon, secondary].
 * One height everywhere (36; plugin phone sheet 34), 8 px apart. The details button is a solid white tile with a
 * 3:1 hairline, so it reads on the white card (expand) and on top of the photo (overlay); hover = ink frame and a
 * light grey fill, focus = ink ring. Labels never wrap: narrow cards drop the cart icon first. */
html body:not(#as-ui#as-ui) .abpc-card { --abpc-act-h: var(--as-btn-h-sm); --abpc-act-gap: var(--as-gap-tight); }
@media (max-width: 767.98px) { html body:not(#as-ui#as-ui) .abpc-card { --abpc-act-h: 34px; } }
html body:not(#as-ui#as-ui) :where(.abpc-card .abpc-actions) { gap: var(--abpc-act-gap) !important; align-items: stretch; }
html body:not(#as-ui#as-ui) :where(.abpc-card .abpc-btn) {
	height: var(--abpc-act-h) !important;
	min-height: var(--abpc-act-h) !important;
	padding: 0 12px !important;
	white-space: nowrap !important;
}
html body:not(#as-ui#as-ui) :where(.abpc-card .abpc-btn .abpc-btn-text) { overflow: hidden; text-overflow: clip; text-wrap: nowrap; }
html body:not(#as-ui#as-ui) :where(.abpc-card .abpc-btn-details) {
	flex: none !important;
	width: var(--abpc-act-h) !important;
	min-width: var(--abpc-act-h) !important;
	padding: 0 !important;
	border: 1px solid var(--as-line) !important;
	background: var(--as-paper) !important;
	box-shadow: none !important;
	color: var(--as-ink) !important;
}
html body:not(#as-ui#as-ui) :where(.abpc-card .abpc-btn-details .abpc-btn-text) { display: none !important; }
/* Over the photo: a soft lift so the white tile separates from light product shots. */
html body:not(#as-ui#as-ui) :where(.abpc-h-overlay .abpc-btn-details) { box-shadow: 0 1px 2px rgba(0, 0, 0, .12) !important; }
@media (hover: hover) and (pointer: fine) {
	html body:not(#as-ui#as-ui) :where(.abpc-card .abpc-btn-details):hover {
		border-color: var(--as-ink) !important;
		background: color-mix(in srgb, var(--as-ink) 6%, #fff) !important;
		color: var(--as-ink) !important;
	}
}
html body:not(#as-ui#as-ui) :where(.abpc-card .abpc-btn-details):active { background: color-mix(in srgb, var(--as-ink) 12%, #fff) !important; }
/* Narrow cards: the cart label keeps one line by giving up its icon and some tracking. */
@container (max-width: 240px) {
	html body:not(#as-ui#as-ui) :where(.abpc-card .abpc-btn-cart .abpc-icon) { display: none !important; }
	html body:not(#as-ui#as-ui) :where(.abpc-card .abpc-btn-cart) { padding: 0 8px !important; letter-spacing: .04em !important; }
}
/* Touch cards: the price-row cart icon is a 36 px square accent button. */
@media (hover: none), (pointer: coarse) {
	html body:not(#as-ui#as-ui) :where(.abpc-t-icon .abpc-btn-icon) {
		width: 36px !important;
		height: 36px !important;
		min-height: 36px !important;
		padding: 0 !important;
		border-radius: var(--as-radius-btn) !important;
	}
}

/* Detail add-to-cart (EXEMPT): only the child theme's former large-CTA corner is put back, since the theme rule
   now follows the global token. Everything else there is AS Product Detail's own styling. */
html body:not(#as-ui#as-ui) .aspd-buy .single_add_to_cart_button { border-radius: var(--autoboss-radius-large, 12px) !important; }

/* ---------- 12. Archive, header, side cart, description ---------- */
html body:not(#as-ui#as-ui) :where(.absa-menu-btn, .absa-icon-btn):not(:where(.aspd-buy, .aspd-quote, .aspd-bar__actions, .aspd-sheet__actions, .aspd-snav) *) { height: var(--as-ctrl-h) !important; }
html body:not(#as-ui#as-ui) :where(.absa-pg, .absa-pg-arrow):not(:where(.aspd-buy, .aspd-quote, .aspd-bar__actions, .aspd-sheet__actions, .aspd-snav) *) { min-width: var(--as-ctrl-h); height: var(--as-ctrl-h) !important; }
/* Header search: square field, button joined on the right. */
html body:not(#as-ui#as-ui) :where(.abhf .abhf-sbox):not(:where(.aspd-buy, .aspd-quote, .aspd-bar__actions, .aspd-sheet__actions, .aspd-snav) *) { border-radius: var(--as-radius-ctrl) !important; }
html body:not(#as-ui#as-ui) :where(.abhf .abhf-sbox .abhf-sbtn):not(:where(.aspd-buy, .aspd-quote, .aspd-bar__actions, .aspd-sheet__actions, .aspd-snav) *) { height: 34px !important; margin: 0 !important; border-radius: 0 !important; }
/* Phone header search: 36 px field like autoboss.com, button joined flush on the right. */
html body:not(#as-ui#as-ui) :where(.abhf .abhf-m-sbox):not(:where(.aspd-buy, .aspd-quote, .aspd-bar__actions, .aspd-sheet__actions, .aspd-snav) *) { height: 36px !important; }
html body:not(#as-ui#as-ui) :where(.abhf .abhf-m-sbox .abhf-kw):not(:where(.aspd-buy, .aspd-quote, .aspd-bar__actions, .aspd-sheet__actions, .aspd-snav) *) { height: 36px !important; line-height: 34px !important; }
html body:not(#as-ui#as-ui) :where(.abhf .abhf-m-sbox .abhf-sbtn):not(:where(.aspd-buy, .aspd-quote, .aspd-bar__actions, .aspd-sheet__actions, .aspd-snav) *) {
	top: 1px !important;
	right: 1px !important;
	height: 34px !important;
	border-radius: 0 1px 1px 0 !important;
}
@media (hover: hover) and (pointer: fine) {
	html body:not(#as-ui#as-ui) :where(.abhf .abhf-sbox .abhf-sbtn):not(:where(.aspd-buy, .aspd-quote, .aspd-bar__actions, .aspd-sheet__actions, .aspd-snav) *):hover { background: var(--as-ink-hover) !important; color: #fff !important; opacity: 1 !important; }
}
/* Checkout-type CTAs (side cart, cart, checkout) take the detail Add to cart corner, not the 2 px button corner. */
html body:not(#as-ui#as-ui) :where(
	.absc__checkout, .checkout-button, #place_order, .abco-place, .abco-float-go, .abtc-go, .abtc-mgo,
	.wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button
):not(:where(.aspd-buy, .aspd-quote, .aspd-bar__actions, .aspd-sheet__actions, .aspd-snav) *) {
	border-radius: var(--as-radius-purchase) !important;
}
/* Description: workflow tabs read as tabs, not cards. */
html body:not(#as-ui#as-ui) :where(.autool-workflow__tab):not(:where(.aspd-buy, .aspd-quote, .aspd-bar__actions, .aspd-sheet__actions, .aspd-snav) *) { border-radius: var(--as-radius-ctrl) !important; }

/* ---------- 13. Home (Brand Home keeps its arrow segment; colours and corners come from the roles above) ---------- */
html body:not(#as-ui#as-ui) :where(.asbh-s-btns, .asbh-skin-site .autool-hp-hero-btns):not(:where(.aspd-buy, .aspd-quote, .aspd-bar__actions, .aspd-sheet__actions, .aspd-snav) *) { gap: var(--as-gap-inline) !important; }

/* ---------- 14. Brand pages (AS Brand Pages forms) ----------
 * The submit of a page form (contact, B2B quote) is the page's one primary action: large size (48), after the
 * md list above so it wins on file order. Role stays accent (Fluent submit). */
html body:not(#as-ui#as-ui) :where(.asbp-form__form .ff-btn-submit):not(:where(.aspd-buy, .aspd-quote, .aspd-bar__actions, .aspd-sheet__actions, .aspd-snav) *) {
	min-height: var(--as-btn-h-lg) !important;
	font-size: var(--as-btn-size-lg) !important;
}

/* ---------- 15. Back to top (global; markup from functions.php, behaviour assets/js/as-totop.js) ----------
 * One button everywhere: 44 px touch target, ink square with the 2 px button corner, white chevron, bottom right.
 * --as-totop-b = height of a bar fixed at the bottom (mobile tab bar, product buy bar), so it always sits above it.
 * Hidden where the desktop side toolbar already has "Top" (.is-off); replaces the AS Brand Pages circle. */
.as-totop {
	position: fixed;
	right: calc(16px + env(safe-area-inset-right, 0px));
	bottom: calc(var(--as-totop-b, 0px) + 16px + env(safe-area-inset-bottom, 0px));
	z-index: 9980;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: var(--as-radius-btn);
	background: var(--as-ink);
	color: #fff;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .2);
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity .25s, transform .25s, visibility 0s linear .25s, bottom .2s;
}
.as-totop[hidden], .as-totop.is-off { display: none; }
.as-totop.is-shown { opacity: 1; visibility: visible; transform: none; transition: opacity .25s, transform .25s, visibility 0s, bottom .2s; }
.as-totop:hover { background: var(--as-ink-hover); color: #fff; }
.as-totop:active { background: var(--as-ink-press); }
.as-totop:focus-visible { outline: 2px solid var(--as-yellow); outline-offset: 2px; }
.as-totop svg { display: block; width: 20px; height: 20px; }
html.as-totop-on .asbp-top { display: none !important; }
@media (prefers-reduced-motion: reduce) { .as-totop, .as-totop.is-shown { transition: none; transform: none; } }
@media print { .as-totop { display: none !important; } }