/**
 * Shared base rules for the catalog runtime.
 */

/*
 * Keep the viewport width stable when navigating between a short page and one
 * tall enough to need the vertical scrollbar. Without a reserved gutter,
 * centered shells — including the site header, logo, actions, headings and
 * catalog grid — shift horizontally by the scrollbar width.
 */
html {
	scrollbar-gutter: stable;
}

.myc-app-body {
	font-family: var(--ps-font-sans);
}

.myc-app-body .myc-virtual-page {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}

/* `summary` earns its place here now that the product steps are disclosures:
   their header is the control, and without it the browser default was the one
   focus treatment on the page that was not the theme's. */
.myc-app-body :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid rgb(143 31 46 / 44%);
	outline-offset: 3px;
}

.myc-app-body :is(
	button,
	input[type='button'],
	input[type='submit'],
	input[type='reset'],
	[role='button'],
	a.myc-primary-link,
	a.myc-secondary-link,
	a.myc-card-link,
	a.myc-card-buy,
	a.myc-page-link
) {
	-webkit-tap-highlight-color: transparent;
}

.myc-app-body :is(button, input, select, textarea):disabled {
	cursor: not-allowed;
}

@media (max-width: 760px) {
	.myc-page {
		padding-right: var(--ps-page-gutter-mobile);
		padding-left: var(--ps-page-gutter-mobile);
	}

	.myc-layout-full .myc-page {
		padding-right: clamp(var(--ps-page-gutter-mobile), 4vw, 16px);
		padding-left: clamp(var(--ps-page-gutter-mobile), 4vw, 16px);
	}
}

/*
 * The kicker + h1 band at the top of the shop, search, category and account
 * dashboard pages. One shared rule so all four move together instead of
 * four near-identical copies (they started that way and had already drifted
 * once by the time this was written).
 */
.myc-account-dashboard-head,
.myc-view-catalog .myc-catalog-page-heading,
.myc-view-search .myc-catalog-page-heading,
.myc-view-category .myc-catalog-page-heading {
	background-color: #e7e2e2;
	background-image:
		radial-gradient(circle at 12% 24%, rgb(255 255 255 / 86%) 0 1px, transparent 1.5px),
		radial-gradient(circle at 78% 68%, rgb(112 103 107 / 7%) 0 1px, transparent 1.5px),
		linear-gradient(135deg, rgb(255 255 255 / 72%), rgb(248 246 246 / 92%));
	background-size: 7px 7px, 9px 9px, 100% 100%;
}

@media (prefers-reduced-motion: reduce) {
	.myc-app-body *,
	.myc-app-body *::before,
	.myc-app-body *::after {
		scroll-behavior: auto !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}