/*
 * Visual baseline only. Storefront and plugin CSS still owns layout, visibility,
 * validation, loading, icons and specialized controls. Do not use all: unset,
 * universal spacing resets or global appearance/outline removal here.
 */
/* Suppress the browser's tap overlay; keyboard focus keeps its own styles. */
html { -webkit-tap-highlight-color: transparent; }

body {
	margin: 0;
	background-color: var(--color-bg-page);
	color: var(--color-text-primary);
	font-family: var(--font-body);
	font-size: var(--ov-font-size-base);
	font-weight: var(--font-weight-regular);
	line-height: var(--ov-line-height-base);
	letter-spacing: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: 0;
}

a {
	color: var(--color-text-primary);
}

/* Keep control sizing, native appearance and plugin state rules intact. */
button,
input,
select,
textarea {
	font-family: var(--font-ui);
}

/* Hide native number steppers without changing numeric input behavior. */
input[type="number"] {
	-moz-appearance: textfield;
	appearance: textfield;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
}

/* Target the theme shell without repainting notices or payment components. */
#page > .site-header,
#page > .site-footer {
	background-color: var(--color-bg-page);
	background-image: none;
	color: var(--color-text-primary);
	box-shadow: none;
}

.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer h5,
.site-footer h6,
.site-footer .widget .widget-title,
.site-footer .widget .widgettitle,
.site-footer a:not(.button):not(.components-button) {
	color: inherit;
}

/* Editable controls use their border for focus; component rules can override this baseline. */
:where(#page) :is(input:not([type]), input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"], select, textarea):where(:not(.ov-quantity__input)) {
	border: var(--focus-width) solid var(--color-border-control);
	background-color: var(--ov-field-background, var(--color-bg-surface));
	transition: border-color var(--transition-interactive);
}

:where(#page) :is(input:not([type]), input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"], select, textarea):where(:not(.ov-quantity__input)):focus {
	border-color: var(--color-border-focus);
	background-color: var(--ov-field-background, var(--color-bg-surface));
	outline: none;
	box-shadow: none;
}

/* Pointer focus does not use Storefront's outline. */
#page :where(a, button):focus:not(:focus-visible) {
	outline: none;
}

/* Keep keyboard focus for commands and non-text controls. */
#page :where(a, button, summary, [tabindex]):where(:not(input, select, textarea, .ov-button, .ov-link, .ov-field__toggle, .ov-quantity__button)):focus-visible {
	outline: var(--focus-width) solid var(--color-border-focus);
	outline-offset: 3px;
}

#page :where(input[type="checkbox"], input[type="radio"], input[type="range"], input[type="file"], input[type="color"], input[type="button"], input[type="submit"], input[type="reset"]):where(:not(.ov-options__input, .ov-choice__input, .ov-selection__input, .ov-selection-tag__input, .ov-rating__input)):focus-visible {
	outline: var(--focus-width) solid var(--color-border-focus);
	outline-offset: var(--focus-offset);
}

@media (prefers-reduced-motion: reduce) {
	#page :is(input, select, textarea) { transition-duration: 0s; }
}

@media (forced-colors: active) {
	#page :is(input, select, textarea):focus-visible {
		outline: var(--focus-width) solid Highlight;
		outline-offset: var(--focus-offset);
	}
}