/* Foundation controls; WooCommerce retains its own component styles. */
.vr-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--8);
	min-block-size: var(--wp--custom--control--height);
	padding: var(--wp--preset--spacing--12) 1.25rem;
	border: 1px solid var(--wp--preset--color--brand);
	border-radius: var(--wp--custom--radius--control);
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--surface);
	font: 600 var(--wp--preset--font-size--ui) / var(--wp--custom--line-height--ui) var(--wp--preset--font-family--body);
	text-align: center;
	text-decoration: none;
	white-space: normal;
	cursor: pointer;
	transition: background-color var(--vr-motion-duration) var(--wp--custom--motion--easing),
		color var(--vr-motion-duration) var(--wp--custom--motion--easing),
		border-color var(--vr-motion-duration) var(--wp--custom--motion--easing);
}

.vr-button:hover {
	border-color: var(--wp--preset--color--brand-hover);
	background: var(--wp--preset--color--brand-hover);
	color: var(--wp--preset--color--surface);
}

.vr-button:active {
	border-color: var(--wp--preset--color--brand-pressed);
	background: var(--wp--preset--color--brand-pressed);
}

.vr-button:disabled {
	border-color: var(--wp--preset--color--control-border);
	background: var(--wp--preset--color--disabled-surface);
	color: var(--wp--preset--color--text-secondary);
	cursor: not-allowed;
}

.menu-toggle,
.site-cart-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--4);
	min-inline-size: var(--wp--custom--control--compact-height);
	min-block-size: var(--wp--custom--control--compact-height);
	padding: var(--wp--preset--spacing--8);
	border: 1px solid transparent;
	border-radius: var(--wp--custom--radius--control);
	background: transparent;
	color: var(--wp--preset--color--brand);
	font-size: var(--wp--preset--font-size--ui);
	font-weight: 600;
	line-height: var(--wp--custom--line-height--ui);
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--vr-motion-duration) var(--wp--custom--motion--easing),
		color var(--vr-motion-duration) var(--wp--custom--motion--easing),
		border-color var(--vr-motion-duration) var(--wp--custom--motion--easing);
}

.menu-toggle {
	border-color: var(--wp--preset--color--control-border);
}

.menu-toggle:hover,
.site-cart-link:hover {
	background: var(--wp--preset--color--brand-tint);
	color: var(--wp--preset--color--brand);
}

.site-cart-link svg {
	flex: none;
}

.menu-toggle svg {
	display: block;
	flex: none;
}

.menu-toggle__close,
.menu-toggle[aria-expanded="true"] .menu-toggle__open {
	display: none;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__close {
	display: block;
}

.menu-toggle[aria-expanded="true"] {
	border-color: var(--wp--preset--color--brand);
	background: var(--wp--preset--color--brand-tint);
}

.site-cart-count {
	display: inline-block;
	min-inline-size: 1ch;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.search-form,
.comment-form {
	font-size: var(--wp--preset--font-size--ui);
}

.search-form label,
.comment-form label {
	display: block;
	margin-block-end: var(--wp--preset--spacing--8);
	font-weight: 600;
}

.search-form__controls {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--12);
}

.search-field {
	flex: 1 1 12rem;
	min-inline-size: 0;
}

.search-form input,
.comment-form :where(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), textarea) {
	max-inline-size: 100%;
	min-block-size: var(--wp--custom--control--height);
	padding: var(--wp--preset--spacing--12);
	border: 1px solid var(--wp--preset--color--control-border);
	border-radius: var(--wp--custom--radius--control);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--text);
	font-size: var(--wp--preset--font-size--ui);
}

.comment-form textarea {
	inline-size: 100%;
	min-block-size: 10rem;
	resize: vertical;
}

.comment-form input[type="checkbox"] {
	inline-size: 1.25rem;
	block-size: 1.25rem;
	accent-color: var(--wp--preset--color--brand);
}

.comment-form-cookies-consent {
	display: flex;
	gap: var(--wp--preset--spacing--8);
	align-items: flex-start;
	min-block-size: var(--wp--custom--control--compact-height);
}

.comment-form-cookies-consent label {
	font-weight: 400;
}

.comment-list {
	padding-inline-start: var(--wp--preset--spacing--24);
}

.comment-body {
	margin-block: var(--wp--preset--spacing--24);
	overflow-wrap: anywhere;
}

.comment-list .children {
	padding-inline-start: var(--wp--preset--spacing--16);
}