/*
 * Shared interactive states.
 *
 * This file is intentionally loaded after page-specific styles. It unifies
 * motion and accessibility without replacing each component's visual tone.
 */
:root {
	--mashin-ro-motion-fast: 160ms;
	--mashin-ro-motion-base: 220ms;
	--mashin-ro-motion-ease: cubic-bezier(.2, .8, .2, 1);
	--mashin-ro-focus-ring: var(--mashin-ro-palette-305fac2c21, rgba(247, 160, 29, .42));
}

html { interpolate-size: allow-keywords; }

/* The header search has one shared focus surface; suppress nested control rings. */
.site-search > input[type="search"]:hover,
.site-search > input[type="search"]:focus-visible,
.site-search__category-filter input[type="search"]:hover,
.site-search__category-filter input[type="search"]:focus-visible {
	border-color: transparent !important;
	outline: 0 !important;
	outline-offset: 0 !important;
	box-shadow: none !important;
}
.site-search__category-toggle:focus-visible,
.site-search__submit:focus-visible,
.site-search__category-list > button:focus-visible {
	outline: 0 !important;
	outline-offset: 0 !important;
}

/* The category selector is part of the search field, not a floating CTA. */
.site-search .site-search__category-toggle,
.site-search .site-search__category-toggle:hover,
.site-search .site-search__category-toggle:active,
.site-search .site-search__category-toggle:focus-visible,
.site-search .site-search__categories.is-open .site-search__category-toggle {
	background: var(--mashin-ro-palette-6aaa006dc0, #fff) !important;
	box-shadow: none !important;
	filter: none !important;
	translate: 0 0 !important;
	scale: 1 !important;
	transform: none !important;
}

/* Form controls should respond as smoothly as buttons. */
:where(
	input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
	select,
	textarea
) {
	transition: color var(--mashin-ro-motion-fast) ease, border-color var(--mashin-ro-motion-base) var(--mashin-ro-motion-ease), background-color var(--mashin-ro-motion-base) var(--mashin-ro-motion-ease), outline-color var(--mashin-ro-motion-fast) ease !important;
}

:where(
	input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
	select,
	textarea
):hover:not(:disabled) {
	border-color: var(--mashin-ro-palette-7f8db91a1a, #b9c1ce);
}

:where(
	input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
	select,
	textarea
):focus-visible {
	border-color: var(--mashin-ro-color-primary) !important;
	outline: 3px solid var(--mashin-ro-palette-27f2b98556, rgba(3, 14, 78, .1)) !important;
	outline-offset: 1px;
}

/* Native accordions: animate both the trigger and the revealed content. */
details {
	transition: border-color var(--mashin-ro-motion-base) var(--mashin-ro-motion-ease), background-color var(--mashin-ro-motion-base) var(--mashin-ro-motion-ease) !important;
}

details > summary {
	-webkit-tap-highlight-color: transparent;
	transition: color var(--mashin-ro-motion-fast) ease, background-color var(--mashin-ro-motion-base) var(--mashin-ro-motion-ease), padding var(--mashin-ro-motion-base) var(--mashin-ro-motion-ease) !important;
}

details > summary :where(i, svg) {
	transition: color var(--mashin-ro-motion-fast) ease, transform var(--mashin-ro-motion-base) var(--mashin-ro-motion-ease) !important;
}

details::details-content {
	block-size: 0;
	overflow: clip;
	opacity: 0;
	transition: block-size 280ms var(--mashin-ro-motion-ease), content-visibility 280ms allow-discrete, opacity 180ms ease !important;
}

details[open]::details-content {
	block-size: auto;
	opacity: 1;
}

details[open] > :not(summary) {
	animation: mashin-ro-accordion-reveal 260ms var(--mashin-ro-motion-ease) both;
}

@keyframes mashin-ro-accordion-reveal {
	from { opacity: 0; translate: 0 -6px; }
	to { opacity: 1; translate: 0 0; }
}

@media (hover: hover) and (pointer: fine) {
	details > summary:hover { background-color: var(--mashin-ro-palette-59f032c3fc, rgba(3, 14, 78, .025)); }
}

details > summary:active { background-color: var(--mashin-ro-palette-6dc0f549af, rgba(3, 14, 78, .055)); }
details > summary:focus-visible { outline: 3px solid var(--mashin-ro-focus-ring) !important; outline-offset: -3px !important; }

/* Links used as controls but not carrying WooCommerce's generic .button class. */
:where(
	a[class*="button"],
	a[class*="__action"],
	a[class*="__open"],
	a[class*="__edit"],
	a[class*="__toggle"],
	a[aria-expanded]
) {
	-webkit-tap-highlight-color: transparent;
	transition: color var(--mashin-ro-motion-fast) ease, background-color var(--mashin-ro-motion-base) var(--mashin-ro-motion-ease), border-color var(--mashin-ro-motion-base) var(--mashin-ro-motion-ease), opacity var(--mashin-ro-motion-fast) ease, filter var(--mashin-ro-motion-base) ease, translate var(--mashin-ro-motion-base) var(--mashin-ro-motion-ease), scale var(--mashin-ro-motion-fast) ease !important;
}

@media (hover: hover) and (pointer: fine) {
	:where(
		a[class*="button"],
		a[class*="__action"],
		a[class*="__open"],
		a[class*="__edit"],
		a[class*="__toggle"],
		a[aria-expanded]
	):hover {
		filter: brightness(.96) saturate(1.05);
		translate: 0 -1px;
	}
}

:where(
	a[class*="button"],
	a[class*="__action"],
	a[class*="__open"],
	a[class*="__edit"],
	a[class*="__toggle"],
	a[aria-expanded]
):active {
	translate: 0 0;
	scale: .985;
}

/* Actual buttons plus links that are presented as buttons. */
:where(
	button,
	input[type="button"],
	input[type="submit"],
	input[type="reset"],
	a.button,
	[role="button"],
	.mashin-ro-button,
	.site-categories-button,
	.site-nav-offer,
	.mashin-ro-cart-link,
	.mashin-ro-account-link,
	.mashin-ro-shop-actions > a,
	.section-heading > a,
	.home-promo a,
	.home-service-banner .container > div > a,
	.mashin-ro-auth-card__back,
	.mashin-ro-cart-modal__actions a,
	.mashin-ro-orders-search > a,
	.mashin-ro-orders-empty > a,
	.mashin-ro-orders-pagination a,
	.mashin-ro-order-card__invoice,
	.mashin-ro-commerce-empty__actions a,
	.mashin-ro-order-card__actions a,
	.mashin-ro-address-book__header > a,
	.mashin-ro-edit-account__actions > a,
	.mashin-ro-final-invoice__actions a,
	.maintenance-card__footer a
) {
	-webkit-tap-highlight-color: transparent;
	transition-property: color, background-color, border-color, opacity, filter, translate, scale, box-shadow !important;
	transition-duration: var(--mashin-ro-motion-base) !important;
	transition-timing-function: var(--mashin-ro-motion-ease) !important;
}

/* Icons respond with the control instead of changing abruptly. */
:where(
	button,
	a.button,
	[role="button"],
	.mashin-ro-button,
	.site-categories-button,
	.site-nav-offer,
	.mashin-ro-cart-link,
	.mashin-ro-account-link,
	.mashin-ro-shop-actions > a,
	.section-heading > a,
	.mashin-ro-auth-card__back,
	.mashin-ro-cart-modal__actions a,
	.mashin-ro-orders-search > a,
	.mashin-ro-orders-empty > a,
	.mashin-ro-orders-pagination a,
	.mashin-ro-commerce-empty__actions a,
	.mashin-ro-order-card__actions a,
	.mashin-ro-final-invoice__actions a
) :where(i, svg) {
	transition: color var(--mashin-ro-motion-fast) ease, fill var(--mashin-ro-motion-fast) ease, transform var(--mashin-ro-motion-base) var(--mashin-ro-motion-ease) !important;
}

@media (hover: hover) and (pointer: fine) {
	:where(
		button,
		input[type="button"],
		input[type="submit"],
		input[type="reset"],
		a.button,
		[role="button"],
		.mashin-ro-button,
		.site-categories-button,
		.site-nav-offer,
		.mashin-ro-cart-link,
		.mashin-ro-account-link,
		.mashin-ro-shop-actions > a,
		.section-heading > a,
		.home-promo a,
		.home-service-banner .container > div > a,
		.mashin-ro-auth-card__back,
		.mashin-ro-cart-modal__actions a,
		.mashin-ro-orders-search > a,
		.mashin-ro-orders-empty > a,
		.mashin-ro-orders-pagination a,
		.mashin-ro-order-card__invoice,
		.mashin-ro-commerce-empty__actions a,
		.mashin-ro-order-card__actions a,
		.mashin-ro-address-book__header > a,
		.mashin-ro-edit-account__actions > a,
		.mashin-ro-final-invoice__actions a,
		.maintenance-card__footer a
	):not(:disabled):not([aria-disabled="true"]):not(.is-loading):hover {
		filter: brightness(.96) saturate(1.06);
		translate: 0 -1px;
	}
}

/* One visible, brand-colored keyboard focus treatment across the storefront. */
:where(
	button,
	input[type="button"],
	input[type="submit"],
	input[type="reset"],
	a.button,
	[role="button"],
	.mashin-ro-button,
	.site-categories-button,
	.site-nav-offer,
	.mashin-ro-cart-link,
	.mashin-ro-account-link,
	.mashin-ro-shop-actions > a,
	.section-heading > a,
	.home-promo a,
	.home-service-banner .container > div > a,
	.mashin-ro-auth-card__back,
	.mashin-ro-cart-modal__actions a,
	.mashin-ro-orders-search > a,
	.mashin-ro-orders-empty > a,
	.mashin-ro-orders-pagination a,
	.mashin-ro-order-card__invoice,
	.mashin-ro-commerce-empty__actions a,
	.mashin-ro-order-card__actions a,
	.mashin-ro-address-book__header > a,
	.mashin-ro-edit-account__actions > a,
	.mashin-ro-final-invoice__actions a,
	.maintenance-card__footer a
):focus-visible {
	outline: 3px solid var(--mashin-ro-focus-ring) !important;
	outline-offset: 3px !important;
}

:where(
	button,
	input[type="button"],
	input[type="submit"],
	input[type="reset"],
	a.button,
	[role="button"],
	.mashin-ro-button,
	.site-categories-button,
	.site-nav-offer,
	.mashin-ro-cart-link,
	.mashin-ro-account-link,
	.mashin-ro-shop-actions > a,
	.section-heading > a,
	.home-promo a,
	.home-service-banner .container > div > a,
	.mashin-ro-auth-card__back,
	.mashin-ro-cart-modal__actions a,
	.mashin-ro-orders-search > a,
	.mashin-ro-orders-empty > a,
	.mashin-ro-orders-pagination a,
	.mashin-ro-order-card__invoice,
	.mashin-ro-commerce-empty__actions a,
	.mashin-ro-order-card__actions a,
	.mashin-ro-address-book__header > a,
	.mashin-ro-edit-account__actions > a,
	.mashin-ro-final-invoice__actions a,
	.maintenance-card__footer a
):not(:disabled):not([aria-disabled="true"]):active {
	filter: brightness(.92);
	translate: 0 0;
	scale: .985;
	transition-duration: 80ms !important;
}

:where(
	button,
	input[type="button"],
	input[type="submit"],
	input[type="reset"],
	a.button,
	[role="button"]
):is(:disabled, [aria-disabled="true"]) {
	filter: none !important;
	translate: 0 0 !important;
	scale: 1 !important;
	opacity: .58;
	cursor: not-allowed !important;
}

/* Filled buttons must never lose their readable foreground on hover. */
:where(
	.mashin-ro-button,
	.site-nav-offer,
	.product-card__button,
	.woocommerce a.button:not(.mashin-ro-mini-cart-button--cart),
	.woocommerce button.button,
	.woocommerce input.button,
	.woocommerce #respond input#submit,
	.wc-block-components-button,
	.mashin-ro-mobile-auth-form__submit,
	.mashin-ro-cart-totals .checkout-button,
	.mashin-ro-order-card__actions .is-pay,
	.mashin-ro-address-form__actions button,
	.mashin-ro-edit-account__actions button,
	.mashin-ro-commerce-empty__actions a.is-primary
):is(:hover, :focus-visible) {
	color: var(--mashin-ro-palette-6aaa006dc0, #fff) !important;
}

/* Preserve intentional accent icons inside dark primary actions. */
:where(
	.mashin-ro-mobile-auth-form__submit,
	.mashin-ro-mini-cart-button--checkout,
	.mashin-ro-commerce-empty__actions a.is-primary
) > i {
	color: var(--mashin-ro-color-tertiary);
}

/*
 * Empty cart/checkout primary action: its old hover rule replaced the navy
 * gradient with a flat color, which looked like a color flash. Keep the
 * surface and foreground stable and let the shared motion provide feedback.
 */
body .mashin-ro-commerce-empty__actions > a.is-primary,
body .mashin-ro-commerce-empty__actions > a.is-primary:hover,
body .mashin-ro-commerce-empty__actions > a.is-primary:focus-visible,
body .mashin-ro-commerce-empty__actions > a.is-primary:active {
	border-color: var(--mashin-ro-color-primary) !important;
	color: var(--mashin-ro-palette-6aaa006dc0, #fff) !important;
	background-color: var(--mashin-ro-color-primary) !important;
	background-image: linear-gradient(135deg, var(--mashin-ro-palette-1c93bd1359, #111936), var(--mashin-ro-color-primary)) !important;
}

body .mashin-ro-commerce-empty__actions > a.is-primary > span,
body .mashin-ro-commerce-empty__actions > a.is-primary > i:last-child {
	color: var(--mashin-ro-palette-6aaa006dc0, #fff) !important;
}

body .mashin-ro-commerce-empty__actions > a.is-primary > i:first-child {
	color: var(--mashin-ro-color-tertiary) !important;
}

/* Quantity, dots and carousel controls are compact controls, not floating CTAs. */
:where(
	.mega-banner-slider__dots button,
	.mashin-ro-carousel-dot,
	.home-categories__pagination button,
	.product-card__quantity button,
	.mashin-ro-product-quantity button,
	.mashin-ro-mini-cart-quantity button,
	.mashin-ro-quantity button,
	.mashin-ro-cart-item__quantity > button
):not(:disabled):hover {
	translate: 0 0;
	scale: 1.04;
}

@media (prefers-reduced-motion: reduce) {
	details,
	details > summary,
	details::details-content,
	details[open] > :not(summary),
	:where(input, select, textarea),
	:where(a[class*="button"], a[class*="__action"], a[class*="__open"], a[class*="__edit"], a[class*="__toggle"], a[aria-expanded]) {
		animation: none !important;
		transition-duration: 0.01ms !important;
		translate: 0 0 !important;
		scale: 1 !important;
	}

	:where(
		button,
		input[type="button"],
		input[type="submit"],
		input[type="reset"],
		a.button,
		[role="button"],
		.mashin-ro-button,
		.site-categories-button,
		.site-nav-offer,
		.mashin-ro-cart-link,
		.mashin-ro-account-link,
		.mashin-ro-shop-actions > a,
		.mashin-ro-auth-card__back,
		.mashin-ro-cart-modal__actions a,
		.mashin-ro-orders-search > a,
		.mashin-ro-orders-empty > a,
		.mashin-ro-orders-pagination a
	) {
		transition-duration: 0.01ms !important;
		translate: 0 0 !important;
		scale: 1 !important;
	}
}