/* ==========================================================================
   Oye Crunch foundation
   Loaded once, site-wide (front end + editor). Template/component styles are
   scoped and enqueued by their own blocks; do not add page styles here.

   Breakpoints (CSS custom properties cannot be used in media queries, so
   these are the canonical values every component must use):
     sm  40em  (640px)   large phones landscape / small tablets
     md  48em  (768px)   tablets
     lg  64em  (1024px)  desktop navigation
     xl  80em  (1280px)  wide desktop
   ========================================================================== */

:root {
	/* Brand colour aliases (source of truth: theme.json palette). */
	--oye-aubergine: var(--wp--preset--color--contrast, #210D35);
	--oye-cream: var(--wp--preset--color--base, #FFF7EA);
	--oye-lime: var(--wp--preset--color--accent-1, #D7F75B);
	--oye-lilac: var(--wp--preset--color--accent-2, #E6D6F3);
	--oye-white: var(--wp--preset--color--accent-3, #FFFFFF);
	--oye-aubergine-soft: var(--wp--preset--color--accent-4, #5B4A6E);
	--oye-aubergine-raised: var(--wp--preset--color--accent-5, #3A2552);

	/* Type aliases. */
	--oye-font-display: var(--wp--preset--font-family--display, Georgia, serif);
	/* Set here (versioned file) rather than only via theme.json, whose styles
	   are printed into page HTML and can be stale in a page cache. */
	--oye-font-body: "Comic Neue", "Comic Sans MS", "Comic Sans", "Chalkboard SE", "Comic Relief", ui-rounded, cursive;
	--wp--preset--font-family--body: var(--oye-font-body);

	/* Shape: deliberately small radii. Avoid pill-shaped containers. */
	--oye-radius-sm: 0.25rem;
	--oye-radius-md: 0.375rem;

	/* Focus: colour flips per surface via --oye-focus-color. */
	--oye-focus-width: 3px;
	--oye-focus-offset: 2px;
	--oye-focus-color: var(--oye-aubergine);

	/* Layering. */
	--oye-z-header: 100;
	--oye-z-header-panel: 110;

	/* Motion. */
	--oye-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--oye-duration: 180ms;

	/* Hand-drawn underline, used for current/hover states. */
	--oye-squiggle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 8' preserveAspectRatio='none'%3E%3Cpath d='M1 5.5C9 2.5 15 2 22 4s13 3 20 .5S54 1.5 59 3' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");

	/* Torn-paper edge: flat top, torn bottom. Flip with scaleY(-1) for top edges. */
	--oye-tear-size: 10px;
	--oye-tear-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 10' preserveAspectRatio='none'%3E%3Cpath d='M0 0H600L600 4.5L589 7.4L586 4.6L575 5.2L569 2.2L565 1.2L562 3.3L556 4.1L553 4.6L547 1.7L539 1.2L531 1.6L527 2.1L516 1.2L513 2L499 3.7L481 2.9L476 4.1L468 4.3L450 2.9L446 3L435 1.2L432 8.2L421 7.2L403 7.7L399 9.4L395 6.6L377 5.2L366 2.2L361 2.9L355 4.6L349 3.9L331 1.2L323 3.7L315 5L301 7.9L296 5.7L293 5.6L285 4.2L274 4.9L269 6.1L266 5.9L252 5.2L234 6.7L228 8.3L224 5.1L220 8L216 9.4L211 9.4L200 8L182 7.8L177 5.3L169 5.2L166 3.3L155 1.2L152 2.9L148 4.1L137 6.7L131 6.9L120 7.8L114 9.4L108 7.5L105 9.4L87 7.9L76 7.5L65 9.4L59 6.9L48 5L45 4.8L41 7.7L35 7.5L24 4.9L10 4.6L6 6.1L1 3.1L0 4.5Z'/%3E%3C/svg%3E");

	/* Subtle grain overlay. */
	--oye-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Dark surfaces flip the focus colour to lime. */
.oye-surface-dark {
	--oye-focus-color: var(--oye-lime);
	color: var(--oye-cream);
	background-color: var(--oye-aubergine);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	overflow-wrap: break-word;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
}

/* --------------------------------------------------------------------------
   Focus: visible, consistent, keyboard only.
   -------------------------------------------------------------------------- */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: var(--oye-focus-width) solid var(--oye-focus-color);
	outline-offset: var(--oye-focus-offset);
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus:not(:focus-visible) {
	outline: none;
}

/* --------------------------------------------------------------------------
   Accessibility utilities
   -------------------------------------------------------------------------- */

.screen-reader-text,
.oye-sr-only {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: var(--oye-cream);
	clip: auto !important;
	clip-path: none;
	color: var(--oye-aubergine);
	display: block;
	font-weight: 600;
	height: auto;
	left: 0.5rem;
	padding: 0.75rem 1rem;
	text-decoration: none;
	top: 0.5rem;
	width: auto;
	z-index: 100000;
}

/* --------------------------------------------------------------------------
   Layout utilities
   -------------------------------------------------------------------------- */

.oye-container {
	box-sizing: border-box;
	margin-inline: auto;
	max-width: var(--wp--style--global--wide-size, 90rem);
	padding-inline: max(1rem, env(safe-area-inset-left)) max(1rem, env(safe-area-inset-right));
	width: 100%;
}

@media (min-width: 48em) {
	.oye-container {
		padding-inline: max(2rem, env(safe-area-inset-left)) max(2rem, env(safe-area-inset-right));
	}
}

.oye-grain {
	isolation: isolate;
	position: relative;
}

.oye-grain::before {
	background-image: var(--oye-grain);
	content: "";
	inset: 0;
	opacity: 0.07;
	pointer-events: none;
	position: absolute;
	z-index: -1;
}

/* --------------------------------------------------------------------------
   Buttons: one raised system (the "Proceed to Checkout" look) site-wide.
   .oye-button            primary: lime, aubergine edge + hard shadow
   .oye-button--ink       same as primary (kept for existing markup)
   .oye-button--outline   secondary: cream, same edge + shadow
   States: hover lifts, active presses, focus ring, disabled/loading flat.
   Woo/core primary buttons are mapped to the same look below.
   -------------------------------------------------------------------------- */

:root {
	--oye-raise-x: 3px;
	--oye-raise-y: 4px;
	--oye-btn-radius: 0.625rem;
}

.oye-button,
html body .wp-site-blocks :is(
	.wp-element-button,
	.wp-block-button__link,
	.button:not(.added_to_cart),
	.single_add_to_cart_button,
	.checkout-button,
	.wc-block-cart__submit-button,
	.wc-block-components-checkout-place-order-button,
	.woocommerce-Button,
	.woocommerce-button
) {
	--oye-btn-bg: var(--oye-lime);
	--oye-btn-fg: var(--oye-aubergine);
	--oye-btn-edge: var(--oye-aubergine);
	--oye-btn-shadow: var(--oye-aubergine);
	align-items: center;
	background-color: var(--oye-btn-bg);
	border: 2px solid var(--oye-btn-edge);
	border-radius: var(--oye-btn-radius);
	box-shadow: var(--oye-raise-x) var(--oye-raise-y) 0 var(--oye-btn-shadow);
	box-sizing: border-box;
	color: var(--oye-btn-fg);
	cursor: pointer;
	display: inline-flex;
	font-family: var(--oye-font-body);
	font-size: 1rem;
	font-weight: 800;
	gap: 0.5rem;
	justify-content: center;
	letter-spacing: 0.005em;
	line-height: 1.2;
	min-height: 2.875rem;
	padding: 0.6875rem 1.375rem;
	text-decoration: none;
	transition: transform 120ms var(--oye-ease), box-shadow 120ms var(--oye-ease), background-color 120ms var(--oye-ease);
}

.oye-button:hover,
html body .wp-site-blocks :is(.wp-element-button, .wp-block-button__link, .button:not(.added_to_cart), .single_add_to_cart_button, .checkout-button, .wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button, .woocommerce-Button, .woocommerce-button):hover {
	background-color: var(--oye-btn-bg);
	box-shadow: calc(var(--oye-raise-x) + 1px) calc(var(--oye-raise-y) + 1px) 0 var(--oye-btn-shadow);
	color: var(--oye-btn-fg);
	transform: translate(-1px, -1px);
}

.oye-button:active,
html body .wp-site-blocks :is(.wp-element-button, .wp-block-button__link, .button:not(.added_to_cart), .single_add_to_cart_button, .checkout-button, .wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button, .woocommerce-Button, .woocommerce-button):active {
	box-shadow: 0 0 0 var(--oye-btn-shadow);
	transform: translate(var(--oye-raise-x), var(--oye-raise-y));
}

.oye-button:disabled,
.oye-button[aria-disabled="true"],
html body .wp-site-blocks :is(.single_add_to_cart_button, .button).disabled,
html body .wp-site-blocks :is(.single_add_to_cart_button, .button):disabled {
	box-shadow: none;
	cursor: not-allowed;
	opacity: 0.5;
	transform: none;
}

:where(.wp-site-blocks) :is(.button.alt, .single_add_to_cart_button, .button).loading {
	cursor: progress;
	opacity: 0.75;
}

.oye-button--ink {
	--oye-btn-bg: var(--oye-lime);
	--oye-btn-fg: var(--oye-aubergine);
}

.oye-button--outline,
html body .wp-site-blocks :is(
	.button.product_type_variable,
	.button.product_type_grouped,
	.button.product_type_external,
	.button:not(.alt):not(.add_to_cart_button):not(.single_add_to_cart_button):not(.checkout-button):not(.oye-button)
) {
	--oye-btn-bg: #FFFDF8;
	--oye-btn-fg: var(--oye-aubergine);
	--oye-btn-edge: var(--oye-aubergine);
	--oye-btn-shadow: var(--oye-aubergine);
}

/* On aubergine surfaces the raised shadow turns cream. */
.oye-surface-dark .oye-button,
.oye-surface-dark .oye-button--outline {
	--oye-btn-shadow: var(--oye-cream);
}

.oye-surface-dark .oye-button--outline {
	--oye-btn-bg: transparent;
	--oye-btn-fg: var(--oye-cream);
	--oye-btn-edge: var(--oye-cream);
	--oye-btn-shadow: var(--oye-lime);
}

/* --------------------------------------------------------------------------
   Form fields: rounded, soft, premium. Applies to plugin and Woo forms in
   page content (WooCommerce Cart/Checkout block inputs keep their own
   floating-label layout and are styled with those pages).
   -------------------------------------------------------------------------- */

.oye-field {
	display: grid;
	gap: 0.375rem;
}

.oye-field__label {
	font-size: 0.875rem;
	font-weight: 700;
}

.oye-input,
:where(.wp-site-blocks) :where(
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="url"],
	input[type="password"],
	input[type="search"],
	input[type="number"],
	input[type="date"],
	select,
	textarea
):not(:where(.wc-block-components-text-input *, .wc-block-components-combobox *, .wc-block-components-quantity-selector *)) {
	appearance: none;
	background-color: #FFFDF8;
	border: 2px solid color-mix(in srgb, var(--oye-aubergine) 28%, transparent);
	border-radius: 0.75rem;
	box-sizing: border-box;
	color: var(--oye-aubergine);
	font-family: var(--oye-font-body);
	font-size: 1rem; /* 16px minimum prevents iOS zoom on focus. */
	line-height: 1.35;
	min-height: 2.875rem;
	padding: 0.625rem 0.9375rem;
	transition: border-color 140ms var(--oye-ease), box-shadow 140ms var(--oye-ease), background-color 140ms var(--oye-ease);
}

:where(.wp-site-blocks) :where(input, select, textarea):hover:not(:disabled):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.oye-input:hover {
	border-color: color-mix(in srgb, var(--oye-aubergine) 55%, transparent);
}

.oye-input:focus,
:where(.wp-site-blocks) :where(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="date"], select, textarea):focus {
	background-color: var(--oye-white);
	border-color: var(--oye-aubergine);
	box-shadow: 0 0 0 4px var(--oye-lilac);
	outline: 2px solid transparent; /* Kept for forced-colours mode. */
}

:where(.wp-site-blocks) :where(select):not([multiple]),
select.oye-input {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23210D35' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-position: right 0.875rem center;
	background-repeat: no-repeat;
	background-size: 1.125rem;
	cursor: pointer;
	padding-inline-end: 2.75rem;
}

:where(.wp-site-blocks) :where(input, select, textarea):disabled,
.oye-input:disabled {
	background-color: #F3EDE4;
	border-style: dashed;
	color: var(--oye-aubergine-soft);
	cursor: not-allowed;
}

:where(.wp-site-blocks) :where([aria-invalid="true"], .wpcf7-not-valid, .woocommerce-invalid input, .woocommerce-invalid select) {
	background-color: #FFF5F4;
	border-color: #B3261E !important;
}

:where(.wp-site-blocks) ::placeholder {
	color: var(--oye-aubergine-soft);
	opacity: 1;
}

:where(.wp-site-blocks) input[type="number"] {
	-moz-appearance: textfield;
}

:where(.wp-site-blocks) input[type="number"]::-webkit-inner-spin-button,
:where(.wp-site-blocks) input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

:where(.wp-site-blocks) :where(input[type="checkbox"], input[type="radio"]) {
	accent-color: var(--oye-aubergine);
	height: 1.25rem;
	width: 1.25rem;
}

.oye-input[type="search"]::-webkit-search-decoration {
	appearance: none;
}

/* --------------------------------------------------------------------------
   Headings: balanced wrapping everywhere.
   -------------------------------------------------------------------------- */

:where(.wp-site-blocks) :where(h1, h2, h3) {
	text-wrap: balance;
}

/* --------------------------------------------------------------------------
   Never scroll sideways: clip stray overflow at the page edge (clip keeps
   sticky positioning working, unlike hidden).
   -------------------------------------------------------------------------- */

html,
body {
	overflow-x: clip;
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */

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

/* --------------------------------------------------------------------------
   Editor-only development placeholders (rendered for editors, never visitors)
   -------------------------------------------------------------------------- */

.oye-placeholder {
	color: inherit;
	display: inline-block;
	font-family: var(--oye-font-body);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.3;
	outline: 2px dashed currentColor;
	outline-offset: 2px;
	padding: 0.25rem 0.5rem;
}

/* --------------------------------------------------------------------------
   After an AJAX add to cart, the Mini-Cart drawer opens instead; hide
   WooCommerce's inline "View cart" link that would otherwise appear.
   -------------------------------------------------------------------------- */

:where(.wp-site-blocks) a.added_to_cart.wc-forward {
	display: none !important;
}

/* --------------------------------------------------------------------------
   Progress steps (Cart / Checkout / Done), shared by cart and checkout.
   -------------------------------------------------------------------------- */

.oye-steps {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 0;
	list-style: none;
	margin: 0;
	padding: 0;
}

.oye-steps[hidden] {
	display: none;
}

.oye-steps__step {
	align-items: center;
	color: var(--oye-aubergine);
	display: inline-flex;
	font-size: 0.9375rem;
	font-weight: 700;
	gap: 0.5rem;
}

.oye-steps__step + .oye-steps__step::before {
	border-top: 2px dashed color-mix(in srgb, var(--oye-aubergine) 35%, transparent);
	content: "";
	margin-inline: 0.75rem;
	width: clamp(1.25rem, 6vw, 4rem);
}

.oye-steps__num {
	align-items: center;
	background-color: #FFFDF8;
	border: 2px solid var(--oye-aubergine);
	border-radius: 50%;
	box-sizing: border-box;
	display: inline-flex;
	flex: none;
	font-size: 0.8125rem;
	font-weight: 800;
	height: 1.875rem;
	justify-content: center;
	width: 1.875rem;
}

.oye-steps__step.is-current .oye-steps__num {
	background-color: var(--oye-lime);
}

.oye-steps__step.is-done .oye-steps__num {
	background-color: var(--oye-aubergine);
	color: var(--oye-cream);
}

.oye-steps__step:not(.is-current):not(.is-done) {
	color: var(--oye-aubergine-soft);
}

.oye-steps__text {
	display: grid;
	line-height: 1.15;
}

.oye-steps__text small {
	color: var(--oye-aubergine-soft);
	font-size: 0.75rem;
	font-weight: 500;
}

.oye-steps__text a {
	color: inherit;
	text-underline-offset: 0.2em;
}

.oye-steps__step.is-current .oye-steps__text {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.25em;
}

.oye-steps__step.is-current .oye-steps__text small {
	text-decoration: none;
}

@media (max-width: 29.99em) {
	.oye-steps__step {
		font-size: 0.8125rem;
	}

	.oye-steps__step + .oye-steps__step::before {
		margin-inline: 0.375rem;
		width: 1rem;
	}
}

/* --------------------------------------------------------------------------
   Inline video (Shop intro, Our Story)
   -------------------------------------------------------------------------- */

.oye-video-wrap {
	position: relative;
}

.oye-video {
	background-color: var(--oye-aubergine);
	border-radius: 1rem;
	display: block;
	height: auto;
	width: 100%;
}

.oye-video__toggle {
	align-items: center;
	background-color: rgb(33 13 53 / 0.78);
	border: 2px solid var(--oye-cream);
	border-radius: 50%;
	bottom: 0.75rem;
	color: var(--oye-cream);
	cursor: pointer;
	display: inline-flex;
	height: 2.75rem;
	justify-content: center;
	left: 0.75rem;
	padding: 0;
	position: absolute;
	width: 2.75rem;
}

.oye-video__toggle:focus-visible {
	outline: 3px solid var(--oye-lime);
	outline-offset: 2px;
}

.oye-video__icon {
	border-block: 0.4375rem solid transparent;
	border-inline-start: 0.6875rem solid currentColor;
	height: 0;
	margin-inline-start: 0.1875rem;
	width: 0;
}

.oye-video-wrap.is-playing .oye-video__icon {
	border-block: 0;
	border-inline: 3px solid currentColor;
	height: 0.75rem;
	margin: 0;
	width: 0.625rem;
}

/* --------------------------------------------------------------------------
   Variation pills (shared: product cards and product page)
   -------------------------------------------------------------------------- */

.oye-pills[hidden] {
	display: none !important;
}

.oye-pills,
.oye-card-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.oye-pill {
	align-items: center;
	background-color: #FFFDF8;
	border: 2px solid color-mix(in srgb, var(--oye-aubergine) 35%, transparent);
	border-radius: 0.75rem;
	color: var(--oye-aubergine);
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 700;
	gap: 0.375rem;
	min-height: 2.75rem;
	padding: 0.5rem 1rem;
	transition: border-color 120ms ease-out, box-shadow 120ms ease-out, transform 120ms ease-out;
}

.oye-pill--sm {
	font-size: 0.8125rem;
	min-height: 2.25rem;
	padding: 0.25rem 0.75rem;
	position: relative;
}

/* Keep a 44px touch target around compact card pills. */
.oye-pill--sm::after {
	content: "";
	inset: -0.25rem -0.125rem;
	position: absolute;
}

.oye-pill:hover:not(:disabled) {
	border-color: var(--oye-aubergine);
}

.oye-pill[aria-checked="true"] {
	background-color: var(--oye-lime);
	border-color: var(--oye-aubergine);
	box-shadow: 2px 3px 0 var(--oye-aubergine);
	transform: translate(-1px, -1px);
}

.oye-pill[aria-checked="true"]::before {
	content: "\2713";
	font-weight: 900;
}

.oye-pill:disabled {
	border-style: dashed;
	cursor: not-allowed;
	opacity: 0.45;
	text-decoration: line-through;
}

.oye-pill:focus-visible {
	outline: 3px solid var(--oye-aubergine);
	outline-offset: 2px;
}

/* Card purchase block */
.oye-card-buy {
	display: grid;
	gap: 0.625rem;
}

.oye-card-error {
	color: #B3261E;
	font-size: 0.8125rem;
	font-weight: 700;
	margin: 0.375rem 0 0;
}

/* Loading and added states for Add to cart (cards and product page). */
html body .wp-site-blocks :is(.oye-card-add, .single_add_to_cart_button).loading {
	color: transparent !important;
	pointer-events: none;
	position: relative;
}

html body .wp-site-blocks :is(.oye-card-add, .single_add_to_cart_button).loading::after {
	animation: oye-spin 700ms linear infinite;
	border: 2.5px solid var(--oye-aubergine);
	border-inline-end-color: transparent;
	border-radius: 50%;
	content: "";
	height: 1.125rem;
	inset: 0;
	margin: auto;
	position: absolute;
	width: 1.125rem;
}

html body .wp-site-blocks :is(.oye-card-add, .single_add_to_cart_button).added::after {
	content: "\00a0\2713";
	font-weight: 900;
}

@keyframes oye-spin {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	html body .wp-site-blocks :is(.oye-card-add, .single_add_to_cart_button).loading::after {
		animation-duration: 2s;
	}
}

/* --------------------------------------------------------------------------
   WooCommerce text uses the site font everywhere (notices, alerts,
   success/error messages, cart, checkout, drawer, forms, buttons).
   -------------------------------------------------------------------------- */

.woocommerce,
.woocommerce-page,
.woocommerce-notices-wrapper,
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-store-notice,
.wc-block-components-notice-banner,
.wc-block-store-notices,
.wc-block-components-notices,
.wc-block-components-validation-error,
.wc-block-cart,
.wc-block-checkout,
.wc-block-mini-cart__drawer,
.wc-block-components-drawer,
.wc-block-components-button,
.wc-block-components-totals-item,
.wc-block-components-product-name,
.wc-block-components-formatted-money-amount,
.wc-block-components-text-input,
.wc-block-components-radio-control,
.wc-block-components-checkbox,
.wc-block-components-panel,
.wc-block-components-sidebar,
.wc-block-grid,
.wc-block-product,
.woocommerce-tabs,
.woocommerce form,
.woocommerce table,
#reviews,
.select2-container {
	font-family: var(--oye-font-body) !important;
}

:where(.woocommerce, .wc-block-cart, .wc-block-checkout, .wc-block-mini-cart__drawer, .wc-block-components-drawer) :where(button, input, select, textarea, label, a, p, span, li, td, th) {
	font-family: inherit;
}

/* Notices: on-brand styling for WooCommerce's success / info / error. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.wc-block-components-notice-banner {
	background-color: #FFFDF8 !important;
	border: 2px solid var(--oye-aubergine) !important;
	border-inline-start-width: 6px !important;
	border-radius: 0.75rem !important;
	color: var(--oye-aubergine) !important;
	font-size: 0.9375rem;
	line-height: 1.45;
}

.woocommerce-message,
.wc-block-components-notice-banner.is-success {
	border-inline-start-color: var(--oye-lime) !important;
}

.woocommerce-info,
.wc-block-components-notice-banner.is-info {
	border-inline-start-color: var(--oye-lilac) !important;
}

.woocommerce-error,
.wc-block-components-notice-banner.is-error {
	border-inline-start-color: #B3261E !important;
}

.wc-block-components-notice-banner > svg {
	background-color: var(--oye-aubergine) !important;
	fill: var(--oye-cream) !important;
}

/* Old browsers without overflow: clip still never scroll sideways. */
@supports not (overflow: clip) {
	html,
	body {
		overflow-x: hidden;
	}
}

/* --------------------------------------------------------------------------
   Overflow hardening (common causes of sideways scrolling on phones)
   -------------------------------------------------------------------------- */

:where(.wp-site-blocks) :where(img, video, iframe, embed, object, svg, canvas, table) {
	max-width: 100%;
}

:where(.wp-site-blocks) :where(h1, h2, h3, h4, p, li, dd, figcaption, blockquote) {
	overflow-wrap: break-word;
}

:where(.wp-site-blocks) :where(pre) {
	max-width: 100%;
	overflow-x: auto;
}

/* Flex/grid children may shrink below their content (long words, wide
   buttons) instead of pushing the row wider than the screen. */
:where(.oye-container) > * {
	min-width: 0;
}

/* Body text always uses the brand font (see --oye-font-body). */
body,
.editor-styles-wrapper {
	font-family: var(--oye-font-body);
}