/* ==========================================================================
   PAMI — WooCommerce Base Bridge
   --------------------------------------------------------------------------
   Shared visual foundation for WooCommerce pages.

   Includes:
   - typography;
   - links;
   - form controls;
   - native select and Select2;
   - buttons and interaction states;
   - classic and block notices;
   - accessibility;
   - reduced motion.

   Page-specific layout belongs in:
   - cart.css;
   - checkout.css;
   - account.css;
   - shop.css;
   - single-product.css.
   ========================================================================== */


/* ==========================
   LOCAL INTERACTION TOKENS
========================== */

.woocommerce {
	--woocommerce-duration-fast:
		var(--motion-duration-fast);

	--woocommerce-duration-base:
		var(--motion-duration-base);

	--woocommerce-duration-slow:
		var(--motion-duration-slow);

	--woocommerce-ease-luxury:
		var(--motion-easing-emphasized);

	--woocommerce-ease-standard:
		var(--motion-easing-standard);

	font-family: var(--font-family-body);
	font-size: var(--font-size-body);
	line-height: var(--line-height-body);

	color: var(--color-text);
}


/* ==========================
   BASE TYPOGRAPHY
   --------------------------------------------------------------------------
   Low-specificity semantic defaults. Page-specific styles can override
   individual roles without fighting the base layer.
========================== */

.woocommerce :where(h1, h2, h3, h4, h5, h6) {
	font-family: var(--font-family-heading);
	font-weight: var(--font-weight-semibold);
	color: var(--color-text);
}

.woocommerce :where(h1) {
	font-size:
		var(
			--font-size-page-title,
			clamp(2.125rem, 4.2vw, 3.5rem)
		);

	line-height:
		var(--line-height-page-title, 1.04);

	letter-spacing:
		var(--letter-spacing-page-title, -0.035em);
}

.woocommerce :where(h2) {
	font-size:
		var(
			--font-size-section-title,
			clamp(1.5rem, 2.15vw, 2rem)
		);

	line-height:
		var(--line-height-section-title, 1.15);

	letter-spacing:
		var(--letter-spacing-section-title, -0.025em);
}

.woocommerce :where(h3) {
	font-size:
		var(
			--font-size-subsection-title,
			clamp(1.25rem, 1.5vw, 1.5rem)
		);

	line-height:
		var(--line-height-subsection-title, 1.2);

	letter-spacing:
		var(--letter-spacing-subsection-title, -0.018em);
}

.woocommerce :where(h4, h5, h6) {
	font-size:
		var(
			--font-size-card-title,
			clamp(0.9375rem, 1vw, 1.0625rem)
		);

	line-height:
		var(--line-height-card-title, 1.4);

	letter-spacing:
		var(--letter-spacing-card-title, -0.012em);
}

.woocommerce p,
.woocommerce address,
.woocommerce dt,
.woocommerce dd {
	color: var(--color-text-light);
}

.woocommerce strong,
.woocommerce b {
	font-weight: var(--font-weight-semibold);

	color: var(--color-text);
}

.woocommerce small {
	font-size: var(--font-size-small);
	line-height: var(--line-height-body);

	color: var(--color-text-muted);
}

.woocommerce .required {
	color: var(--color-primary);

	text-decoration: none;
}


/* ==========================
   LINKS
========================== */

.woocommerce a:not(.button) {
	color: inherit;

	text-decoration-line: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;

	transition:
		color var(--woocommerce-duration-base)
			var(--woocommerce-ease-luxury),
		text-decoration-color var(--woocommerce-duration-base)
			var(--woocommerce-ease-luxury);
}

.woocommerce a:not(.button):hover {
	color: var(--color-primary);

	text-decoration-color: currentColor;
}

.woocommerce a:not(.button):focus {
	outline: none;
}

.woocommerce a:not(.button):focus-visible {
	color: var(--color-primary);

	outline:
		var(--focus-ring-width)
		solid
		var(--focus-ring-color);

	outline-offset: var(--focus-ring-offset);

	border-radius: var(--radius-xs);

	text-decoration-color: currentColor;
}


/* ==========================
   FORM LABELS
========================== */

.woocommerce form .form-row label,
.woocommerce form .form-row legend {
	display: block;

	margin-bottom: var(--space-2);

	font-size: var(--font-size-small);
	font-weight: var(--font-weight-medium);
	line-height: 1.45;

	color: var(--color-text);
}

.woocommerce form .form-row label.checkbox,
.woocommerce form .form-row label.inline {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);

	margin-bottom: 0;
}

.woocommerce form .form-row .optional {
	font-size: var(--font-size-caption);
	font-weight: var(--font-weight-regular);

	color: var(--color-text-muted);
}


/* ==========================
   FORM CONTROLS
   Safari / iOS normalized
========================== */

.woocommerce input.input-text,
.woocommerce input.qty,
.woocommerce textarea,
.woocommerce select {
	width: 100%;
	min-height: 48px;

	padding: 12px 14px;

	font-family: var(--font-family-body);
	font-size: var(--font-size-body);
	font-weight: var(--font-weight-regular);
	line-height: 1.4;

	color: var(--color-text);

	background-color: var(--color-surface-light);
	background-clip: padding-box;

	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-sm);

	-webkit-appearance: none;
	appearance: none;

	-webkit-tap-highlight-color: transparent;

	box-shadow:
		inset 0 1px 1px rgba(45, 42, 40, 0.025);

	color-scheme: light;

	transition:
		background-color var(--woocommerce-duration-base)
			var(--woocommerce-ease-luxury),
		border-color var(--woocommerce-duration-base)
			var(--woocommerce-ease-luxury),
		box-shadow var(--woocommerce-duration-base)
			var(--woocommerce-ease-luxury),
		color var(--woocommerce-duration-base)
			var(--woocommerce-ease-luxury),
		opacity var(--woocommerce-duration-base)
			var(--woocommerce-ease-standard);
}

.woocommerce input.qty {
	width: auto;
	min-width: 64px;

	text-align: center;
}

.woocommerce textarea {
	min-height: 132px;

	background-image: none;

	resize: vertical;
}


/* ==========================
   NATIVE SELECT CHEVRON
========================== */

.woocommerce select {
	padding-right: 44px;

	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1.25L7 7.25L13 1.25' stroke='%236A625C' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

	background-repeat: no-repeat;
	background-position: right 15px center;
	background-size: 12px auto;

	cursor: pointer;
}

.woocommerce select::-ms-expand {
	display: none;
}


/* ==========================
   FORM CONTROL INTERACTIONS
========================== */

.woocommerce input.input-text:hover,
.woocommerce input.qty:hover,
.woocommerce textarea:hover,
.woocommerce select:hover {
	border-color: rgba(143, 39, 39, 0.38);
}

.woocommerce input.input-text:focus,
.woocommerce input.qty:focus,
.woocommerce textarea:focus,
.woocommerce select:focus {
	outline: none;
}

.woocommerce input.input-text:focus-visible,
.woocommerce input.qty:focus-visible,
.woocommerce textarea:focus-visible,
.woocommerce select:focus-visible {
	color: var(--color-text);

	background-color: var(--color-white);
	border-color: var(--color-primary);

	outline:
		var(--focus-ring-width)
		solid
		var(--focus-ring-color);

	outline-offset: 1px;

	box-shadow:
		0 0 0 1px var(--color-primary),
		inset 0 1px 1px rgba(45, 42, 40, 0.025);
}

.woocommerce input.input-text::placeholder,
.woocommerce textarea::placeholder {
	color: var(--color-text-muted);

	opacity: 0.78;
}

.woocommerce input.input-text:disabled,
.woocommerce input.qty:disabled,
.woocommerce textarea:disabled,
.woocommerce select:disabled,
.woocommerce input.input-text[readonly],
.woocommerce input.qty[readonly],
.woocommerce textarea[readonly] {
	color: var(--color-text-muted);

	background-color: var(--color-surface-muted);
	border-color: var(--color-border-soft);

	cursor: not-allowed;
	opacity: 0.78;
}


/* ==========================
   WEBKIT AUTOFILL
========================== */

.woocommerce input.input-text:-webkit-autofill,
.woocommerce input.input-text:-webkit-autofill:hover,
.woocommerce input.input-text:-webkit-autofill:focus,
.woocommerce input.input-text:-webkit-autofill:active {
	-webkit-text-fill-color: var(--color-text);

	-webkit-box-shadow:
		0 0 0 1000px var(--color-surface-light) inset;

	caret-color: var(--color-text);

	transition:
		background-color 9999s ease-out;
}


/* ==========================
   CHECKBOXES / RADIO BUTTONS
========================== */

.woocommerce input[type="checkbox"],
.woocommerce input[type="radio"] {
	accent-color: var(--color-primary);
}

.woocommerce input[type="checkbox"]:focus,
.woocommerce input[type="radio"]:focus {
	outline:
		var(--focus-ring-width)
		solid
		var(--focus-ring-color);

	outline-offset:
		var(--focus-ring-offset);
}

@supports selector(:focus-visible) {
	.woocommerce input[type="checkbox"]:focus:not(:focus-visible),
	.woocommerce input[type="radio"]:focus:not(:focus-visible) {
		outline: none;
	}
}


/* ==========================
   VALIDATION STATES
========================== */

.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid input.qty,
.woocommerce form .form-row.woocommerce-invalid textarea,
.woocommerce form .form-row.woocommerce-invalid select,
.woocommerce form .form-row.woocommerce-invalid-required-field input.input-text,
.woocommerce form .form-row.woocommerce-invalid-required-field input.qty,
.woocommerce form .form-row.woocommerce-invalid-required-field textarea,
.woocommerce form .form-row.woocommerce-invalid-required-field select {
	border-color: var(--color-error);

	box-shadow:
		0 0 0 1px rgba(179, 38, 30, 0.12);
}

.woocommerce form .form-row.woocommerce-validated input.input-text,
.woocommerce form .form-row.woocommerce-validated input.qty,
.woocommerce form .form-row.woocommerce-validated textarea,
.woocommerce form .form-row.woocommerce-validated select {
	border-color: rgba(47, 125, 79, 0.5);
}


/* ==========================
   SELECT2 — WOO SELECT FIELDS
========================== */

.woocommerce .select2-container {
	font-family: var(--font-family-body);
	font-size: var(--font-size-body);
}

.woocommerce .select2-container .select2-selection--single {
	min-height: 48px;

	color: var(--color-text);

	background-color: var(--color-surface-light);
	background-clip: padding-box;

	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-sm);

	-webkit-tap-highlight-color: transparent;

	box-shadow:
		inset 0 1px 1px rgba(45, 42, 40, 0.025);

	transition:
		background-color var(--woocommerce-duration-base)
			var(--woocommerce-ease-luxury),
		border-color var(--woocommerce-duration-base)
			var(--woocommerce-ease-luxury),
		box-shadow var(--woocommerce-duration-base)
			var(--woocommerce-ease-luxury);
}

.woocommerce
	.select2-container
	.select2-selection--single
	.select2-selection__rendered {
	padding-left: 14px;
	padding-right: 42px;

	line-height: 46px;

	color: var(--color-text);
}

.woocommerce
	.select2-container
	.select2-selection--single
	.select2-selection__placeholder {
	color: var(--color-text-muted);
}

.woocommerce
	.select2-container
	.select2-selection--single
	.select2-selection__arrow {
	top: 0;
	right: 10px;

	width: 28px;
	height: 46px;
}

.woocommerce
	.select2-container--default.select2-container--open
	.select2-selection--single,
.woocommerce
	.select2-container--default.select2-container--focus
	.select2-selection--single {
	color: var(--color-text);

	background-color: var(--color-white);
	border-color: var(--color-primary);

	outline:
		var(--focus-ring-width)
		solid
		var(--focus-ring-color);

	outline-offset: 1px;

	box-shadow:
		0 0 0 1px var(--color-primary);
}


/*
 * Select2 appends its dropdown directly to the body.
 * The WooCommerce page body class keeps these rules safely scoped.
 */

body.woocommerce-page .select2-dropdown {
	background-color: var(--color-surface-light);

	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-sm);

	box-shadow: var(--shadow-medium);
}

body.woocommerce-page
	.select2-container--default
	.select2-results__option {
	padding: 10px 14px;

	color: var(--color-text);

	transition:
		background-color var(--woocommerce-duration-fast)
			var(--woocommerce-ease-standard),
		color var(--woocommerce-duration-fast)
			var(--woocommerce-ease-standard);
}

body.woocommerce-page
	.select2-container--default
	.select2-results__option--highlighted[aria-selected] {
	color: var(--color-text-inverse);

	background-color: var(--color-primary);
}

body.woocommerce-page
	.select2-container--default
	.select2-results__option[aria-selected="true"] {
	color: var(--color-text);

	background-color: var(--color-surface);
}


/* ==========================
   BASE WOO BUTTON
========================== */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	position: relative;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);

	min-height: var(--touch-target-min);
	padding: 14px 28px;

	font-family: var(--font-family-body);
	font-size: var(--font-size-button);
	font-weight: var(--font-weight-semibold);
	line-height: 1;
	letter-spacing: var(--letter-spacing-button);
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;

	color: #735252;

	background-color: var(--color-surface-glass);
	background-clip: padding-box;

	border: 1px solid #d8d0cd;
	border-radius: var(--radius-sm);

	-webkit-appearance: none;
	appearance: none;

	-webkit-tap-highlight-color: transparent;

	box-shadow: var(--shadow-button-secondary);

	cursor: pointer;
	user-select: none;

	transition:
		transform var(--woocommerce-duration-base)
			var(--woocommerce-ease-luxury),
		background-color var(--woocommerce-duration-base)
			var(--woocommerce-ease-luxury),
		background var(--woocommerce-duration-base)
			var(--woocommerce-ease-luxury),
		border-color var(--woocommerce-duration-base)
			var(--woocommerce-ease-luxury),
		box-shadow var(--woocommerce-duration-base)
			var(--woocommerce-ease-luxury),
		color var(--woocommerce-duration-fast)
			var(--woocommerce-ease-standard),
		opacity var(--woocommerce-duration-fast)
			var(--woocommerce-ease-standard);
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit {
	overflow: hidden;
}

.woocommerce a.button::before,
.woocommerce button.button::before {
	content: "";

	position: absolute;
	inset: 1px;

	border-radius: calc(var(--radius-sm) - 1px);

	background:
		linear-gradient(
			180deg,
			rgba(255, 255, 255, 0.9) 0%,
			rgba(255, 255, 255, 0.24) 100%
		);

	pointer-events: none;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
	color: #5c3434;

	background-color: rgba(255, 255, 255, 0.96);

	border-color: #c8bbb5;

	box-shadow: var(--shadow-button-secondary-hover);

	transform: translateY(-1px);
}

.woocommerce a.button:active,
.woocommerce button.button:active,
.woocommerce input.button:active,
.woocommerce #respond input#submit:active {
	transform: translateY(0);

	box-shadow: var(--shadow-button-secondary);
}

.woocommerce a.button:focus,
.woocommerce button.button:focus,
.woocommerce input.button:focus,
.woocommerce #respond input#submit:focus {
	outline:
		var(--focus-ring-width)
		solid
		var(--focus-ring-color);

	outline-offset:
		var(--focus-ring-offset);
}

@supports selector(:focus-visible) {
	.woocommerce a.button:focus:not(:focus-visible),
	.woocommerce button.button:focus:not(:focus-visible),
	.woocommerce input.button:focus:not(:focus-visible),
	.woocommerce #respond input#submit:focus:not(:focus-visible) {
		outline: none;
	}
}


/* ==========================
   PRIMARY / ALT WOO BUTTON
========================== */

.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
	color: var(--color-text-inverse);

	background:
		linear-gradient(
			180deg,
			var(--color-primary-light) 0%,
			var(--color-primary) 55%,
			var(--color-primary-dark) 100%
		);

	border-color: rgba(255, 255, 255, 0.12);
	border-bottom-color: rgba(0, 0, 0, 0.16);

	box-shadow: var(--shadow-button-primary);
}

.woocommerce a.button.alt::before,
.woocommerce button.button.alt::before {
	background:
		linear-gradient(
			180deg,
			rgba(255, 255, 255, 0.14) 0%,
			rgba(255, 255, 255, 0.04) 36%,
			rgba(255, 255, 255, 0) 100%
		);
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit.alt:hover {
	color: var(--color-text-inverse);

	background:
		linear-gradient(
			180deg,
			var(--color-primary-light) 0%,
			var(--color-primary) 48%,
			var(--color-primary-dark) 100%
		);

	border-color: rgba(255, 255, 255, 0.16);
	border-bottom-color: rgba(0, 0, 0, 0.18);

	box-shadow: var(--shadow-button-primary-hover);

	transform: translateY(-1px);
}

.woocommerce a.button.alt:focus-visible,
.woocommerce button.button.alt:focus-visible,
.woocommerce input.button.alt:focus-visible,
.woocommerce #respond input#submit.alt:focus-visible {
	color: var(--color-text-inverse);

	outline:
		var(--focus-ring-width)
		solid
		var(--focus-ring-color);

	outline-offset: var(--focus-ring-offset);

	box-shadow:
		var(--shadow-button-primary),
		0 0 0 1px rgba(255, 255, 255, 0.2);
}

.woocommerce a.button.alt:active,
.woocommerce button.button.alt:active,
.woocommerce input.button.alt:active,
.woocommerce #respond input#submit.alt:active {
	color: var(--color-text-inverse);

	box-shadow: var(--shadow-button-primary);

	transform: translateY(0);
}


/* ==========================
   DISABLED WOO BUTTONS
========================== */

.woocommerce a.button.disabled,
.woocommerce a.button:disabled,
.woocommerce button.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled],
.woocommerce input.button.disabled,
.woocommerce input.button:disabled,
.woocommerce input.button:disabled[disabled],
.woocommerce #respond input#submit.disabled,
.woocommerce #respond input#submit:disabled,
.woocommerce .button[aria-disabled="true"],
.woocommerce a.button.alt.disabled,
.woocommerce button.button.alt.disabled,
.woocommerce button.button.alt:disabled,
.woocommerce button.button.alt:disabled[disabled],
.woocommerce input.button.alt.disabled,
.woocommerce input.button.alt:disabled,
.woocommerce input.button.alt:disabled[disabled] {
	color: var(--color-text-muted);

	background: var(--color-surface-muted);

	border-color: var(--color-border-soft);
	border-bottom-color: var(--color-border-soft);

	box-shadow: none;

	cursor: not-allowed;
	opacity: 1;
	pointer-events: none;

	transform: none;
}

.woocommerce a.button.disabled::before,
.woocommerce button.button.disabled::before,
.woocommerce button.button:disabled::before,
.woocommerce button.button:disabled[disabled]::before,
.woocommerce a.button.alt.disabled::before,
.woocommerce button.button.alt.disabled::before,
.woocommerce button.button.alt:disabled::before,
.woocommerce button.button.alt:disabled[disabled]::before {
	content: none;
}


/* ==========================
   LOADING WOO BUTTONS
========================== */

.woocommerce a.button.loading,
.woocommerce button.button.loading,
.woocommerce input.button.loading {
	cursor: progress;
	opacity: 0.74;

	transform: none;
}

.woocommerce a.button.loading:hover,
.woocommerce button.button.loading:hover,
.woocommerce input.button.loading:hover {
	transform: none;
}


/* ==========================
   CLASSIC WOO NOTICES
========================== */

.woocommerce .woocommerce-notices-wrapper:empty {
	display: none;
}

.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error {
	position: relative;

	overflow: hidden;

	margin: 0 0 var(--space-6);
	padding:
		var(--space-5)
		var(--space-6)
		var(--space-5)
		var(--space-9);

	font-size: var(--font-size-small);
	line-height: var(--line-height-body);

	color: var(--color-text);

	background-color: rgba(253, 252, 251, 0.9);

	border: 1px solid var(--color-border-soft);
	border-left-width: 2px;
	border-radius: var(--radius-md);

	box-shadow:
		0 10px 28px rgba(45, 42, 40, 0.035);

	list-style: none;
}

.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before,
.woocommerce .woocommerce-error::before {
	content: "";

	position: absolute;
	top: 50%;
	left: var(--space-5);

	width: 7px;
	height: 7px;

	border-radius: var(--radius-full);

	font-family: inherit;

	transform: translateY(-50%);

	opacity: 0.9;
}

.woocommerce .woocommerce-message {
	background:
		linear-gradient(
			90deg,
			rgba(47, 125, 79, 0.035) 0%,
			rgba(253, 252, 251, 0.92) 22%
		);

	border-left-color: rgba(47, 125, 79, 0.72);
}

.woocommerce .woocommerce-message::before {
	background-color: var(--color-success);
}

.woocommerce .woocommerce-info {
	background:
		linear-gradient(
			90deg,
			rgba(47, 102, 144, 0.03) 0%,
			rgba(253, 252, 251, 0.92) 22%
		);

	border-left-color: rgba(47, 102, 144, 0.66);
}

.woocommerce .woocommerce-info::before {
	background-color: var(--color-info);
}

.woocommerce .woocommerce-error {
	background:
		linear-gradient(
			90deg,
			rgba(179, 38, 30, 0.028) 0%,
			rgba(253, 252, 251, 0.92) 22%
		);

	border-left-color: rgba(179, 38, 30, 0.68);
}

.woocommerce .woocommerce-error::before {
	background-color: var(--color-error);
}

.woocommerce .woocommerce-message li,
.woocommerce .woocommerce-info li,
.woocommerce .woocommerce-error li {
	margin: 0;

	color: inherit;
}

.woocommerce .woocommerce-message li + li,
.woocommerce .woocommerce-info li + li,
.woocommerce .woocommerce-error li + li {
	margin-top: var(--space-2);
}

.woocommerce .woocommerce-message a:not(.button),
.woocommerce .woocommerce-info a:not(.button),
.woocommerce .woocommerce-error a:not(.button) {
	font-weight: var(--font-weight-semibold);

	color: var(--color-primary);

	text-decoration-color: rgba(143, 39, 39, 0.3);
}


/* ==========================
   WOO BLOCK NOTICES
========================== */

body.woocommerce-page .wc-block-components-notice-banner {
	margin: 0 0 var(--space-6);
	padding: var(--space-5) var(--space-6);

	font-family: var(--font-family-body);
	font-size: var(--font-size-small);
	line-height: var(--line-height-body);

	color: var(--color-text);

	background-color: rgba(253, 252, 251, 0.92);

	border: 1px solid var(--color-border-soft);
	border-left-width: 2px;
	border-radius: var(--radius-md);

	box-shadow:
		0 10px 28px rgba(45, 42, 40, 0.035);
}

body.woocommerce-page
	.wc-block-components-notice-banner.is-success {
	border-left-color: rgba(47, 125, 79, 0.72);
}

body.woocommerce-page
	.wc-block-components-notice-banner.is-info {
	border-left-color: rgba(47, 102, 144, 0.66);
}

body.woocommerce-page
	.wc-block-components-notice-banner.is-error {
	border-left-color: rgba(179, 38, 30, 0.68);
}

body.woocommerce-page
	.wc-block-components-notice-banner
	> svg {
	flex: 0 0 auto;

	width: 18px;
	height: 18px;

	background: transparent;

	border-radius: 0;
}

body.woocommerce-page
	.wc-block-components-notice-banner.is-success
	> svg {
	fill: var(--color-success);
}

body.woocommerce-page
	.wc-block-components-notice-banner.is-info
	> svg {
	fill: var(--color-info);
}

body.woocommerce-page
	.wc-block-components-notice-banner.is-error
	> svg {
	fill: var(--color-error);
}

body.woocommerce-page
	.wc-block-components-notice-banner
	.wc-block-components-notice-banner__content {
	color: var(--color-text);
}

body.woocommerce-page
	.wc-block-components-notice-banner
	.wc-block-components-notice-banner__summary {
	font-weight: var(--font-weight-semibold);

	color: var(--color-text);
}


/* ==========================
   GENERAL ACCESSIBILITY
========================== */

.woocommerce button:focus,
.woocommerce [role="button"]:focus,
.woocommerce summary:focus {
	outline: none;
}

.woocommerce button:focus-visible,
.woocommerce [role="button"]:focus-visible,
.woocommerce summary:focus-visible {
	outline:
		var(--focus-ring-width)
		solid
		var(--focus-ring-color);

	outline-offset: var(--focus-ring-offset);
}

.woocommerce ::selection {
	color: var(--color-text-inverse);

	background-color: var(--color-primary);
}


/* ==========================
   RESPONSIVE BASE CONTROLS
========================== */

@media (max-width: 680px) {
	.woocommerce input.input-text,
	.woocommerce input.qty,
	.woocommerce textarea,
	.woocommerce select,
	.woocommerce
		.select2-container
		.select2-selection--single {
		/*
		 * Prevent automatic iOS Safari zoom when a form
		 * control receives focus.
		 */
		font-size: 16px;
	}

	.woocommerce a.button,
	.woocommerce button.button,
	.woocommerce input.button,
	.woocommerce #respond input#submit {
		min-height: 46px;
	}

	.woocommerce .woocommerce-message,
	.woocommerce .woocommerce-info,
	.woocommerce .woocommerce-error {
		padding:
			var(--space-4)
			var(--space-5)
			var(--space-4)
			var(--space-8);
	}

	.woocommerce .woocommerce-message::before,
	.woocommerce .woocommerce-info::before,
	.woocommerce .woocommerce-error::before {
		left: var(--space-4);
	}
}


/* ==========================
   REDUCED MOTION
========================== */

@media (prefers-reduced-motion: reduce) {
	.woocommerce a,
	.woocommerce button,
	.woocommerce input,
	.woocommerce textarea,
	.woocommerce select,
	.woocommerce .select2-selection--single,
	body.woocommerce-page .select2-results__option {
		transition: none;
	}

	.woocommerce a.button:hover,
	.woocommerce button.button:hover,
	.woocommerce input.button:hover,
	.woocommerce #respond input#submit:hover,
	.woocommerce a.button.alt:hover,
	.woocommerce button.button.alt:hover,
	.woocommerce input.button.alt:hover,
	.woocommerce #respond input#submit.alt:hover {
		transform: none;
	}
}