/**
 * Tola — global CSS ("Frosted Monochrome", docs/11).
 *
 * Only what theme.json cannot express. Rules:
 * - Reference tokens only (var(--wp--preset--*) / var(--wp--custom--*)), never raw colours.
 * - Logical properties only (inline/block, start/end) so Arabic (RTL) mirrors automatically.
 * - Animate opacity and transform only. backdrop-filter is never animated.
 */

/* ==========================================================================
   1. Base
   ========================================================================== */

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

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

img,
video {
	max-inline-size: 100%;
	block-size: auto;
}

::selection {
	background-color: var(--wp--preset--color--pitch-black);
	color: var(--wp--preset--color--bright-snow);
}

/* ==========================================================================
   2. Glass surfaces
   Three tiers: light (cards, buttons, badges), strong (header, menus,
   drawers), dark (over dark imagery). Solid fallbacks first; the frosted
   fill only applies where backdrop-filter is supported.
   ========================================================================== */

.tola-glass,
.wp-block-button.is-style-glass > .wp-block-button__link,
.wp-block-group.is-style-glass-card,
.wp-block-column.is-style-glass-card,
.wp-block-image.is-style-framed,
.tola-badge--glass,
.wc-block-components-notice-banner {
	--tola-glass-fill: var(--wp--custom--glass--light--fill);
	--tola-glass-fallback: var(--wp--custom--glass--light--fallback);
	--tola-glass-edge: var(--wp--custom--glass--light--edge);
	--tola-glass-shadow: var(--wp--custom--glass--light--highlight), var(--wp--custom--glass--light--shadow);
}

.tola-glass--strong,
.tola-header__bar::before,
.tola-header .wp-block-navigation__responsive-container.is-menu-open,
.wc-block-components-drawer__screen-overlay .wc-block-components-drawer {
	--tola-glass-fill: var(--wp--custom--glass--strong--fill);
	--tola-glass-fallback: var(--wp--custom--glass--strong--fallback);
	--tola-glass-edge: var(--wp--custom--glass--strong--edge);
	--tola-glass-shadow: var(--wp--custom--glass--strong--highlight), var(--wp--custom--glass--strong--shadow);
}

.tola-glass--dark,
.wp-block-group.is-style-glass-card-dark,
.wp-block-column.is-style-glass-card-dark {
	--tola-glass-fill: var(--wp--custom--glass--dark--fill);
	--tola-glass-fallback: var(--wp--custom--glass--dark--fallback);
	--tola-glass-edge: var(--wp--custom--glass--dark--edge);
	--tola-glass-shadow: var(--wp--custom--glass--dark--highlight), var(--wp--custom--glass--dark--shadow);
}

/* Shared surface (all tiers). */
.tola-glass,
.tola-glass--strong,
.tola-glass--dark,
.wp-block-button.is-style-glass > .wp-block-button__link,
.wp-block-group.is-style-glass-card,
.wp-block-column.is-style-glass-card,
.wp-block-group.is-style-glass-card-dark,
.wp-block-column.is-style-glass-card-dark,
.wp-block-image.is-style-framed,
.tola-badge--glass,
.wc-block-components-notice-banner,
.tola-header__bar::before,
.tola-header .wp-block-navigation__responsive-container.is-menu-open,
.wc-block-components-drawer__screen-overlay .wc-block-components-drawer {
	background-color: var(--tola-glass-fallback);
	border: 1px solid var(--tola-glass-edge);
	box-shadow: var(--tola-glass-shadow);
}

/* Frosted fill + blur. Blur values are literal: Safari ignores var() in -webkit-backdrop-filter. */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	.tola-glass,
	.wp-block-button.is-style-glass > .wp-block-button__link,
	.wp-block-group.is-style-glass-card,
	.wp-block-column.is-style-glass-card,
	.wp-block-image.is-style-framed,
	.tola-badge--glass,
	.wc-block-components-notice-banner {
		background-color: var(--tola-glass-fill);
		-webkit-backdrop-filter: blur(20px) saturate(160%);
		backdrop-filter: blur(20px) saturate(160%);
	}

	.tola-glass--strong,
	.tola-header__bar::before,
	.tola-header .wp-block-navigation__responsive-container.is-menu-open,
	.wc-block-components-drawer__screen-overlay .wc-block-components-drawer {
		background-color: var(--tola-glass-fill);
		-webkit-backdrop-filter: blur(28px) saturate(180%);
		backdrop-filter: blur(28px) saturate(180%);
	}

	.tola-glass--dark,
	.wp-block-group.is-style-glass-card-dark,
	.wp-block-column.is-style-glass-card-dark {
		background-color: var(--tola-glass-fill);
		-webkit-backdrop-filter: blur(20px) saturate(140%);
		backdrop-filter: blur(20px) saturate(140%);
	}
}

/* Accessibility: solid surfaces when the user asks for less transparency or more contrast. */
@media (prefers-reduced-transparency: reduce) {
	:is(.tola-glass, .tola-glass--strong, .tola-glass--dark, .wp-block-button.is-style-glass > .wp-block-button__link, .is-style-glass-card, .is-style-glass-card-dark, .wp-block-image.is-style-framed, .tola-badge--glass, .wc-block-components-notice-banner, .tola-header__bar::before, .tola-header .wp-block-navigation__responsive-container.is-menu-open, .wc-block-components-drawer__screen-overlay .wc-block-components-drawer) {
		background-color: var(--tola-glass-fallback) !important;
		-webkit-backdrop-filter: none !important;
		backdrop-filter: none !important;
	}
}

@media (prefers-contrast: more) {
	:is(.tola-glass, .tola-glass--strong, .wp-block-button.is-style-glass > .wp-block-button__link, .is-style-glass-card, .wp-block-image.is-style-framed, .tola-badge--glass, .wc-block-components-notice-banner, .tola-header__bar::before) {
		background-color: var(--wp--preset--color--bright-snow) !important;
		border-color: var(--wp--preset--color--pitch-black) !important;
		-webkit-backdrop-filter: none !important;
		backdrop-filter: none !important;
	}
}

/* ==========================================================================
   3. Links
   ========================================================================== */

a {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

@media (hover: hover) and (pointer: fine) {
	a:where(:not(.wp-element-button)):hover {
		text-decoration-thickness: 2px;
	}
}

/* ==========================================================================
   4. Buttons — pill, 48px
   ========================================================================== */

.wp-element-button,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--20);
	min-block-size: var(--wp--custom--touch-target);
	transition:
		background-color var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--ease-out),
		border-color var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--ease-out),
		color var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--ease-out),
		transform var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--ease-out);
}

.wp-element-button:active,
.wp-block-button__link:active {
	transform: scale(0.98);
}

/* Outline: fills black on hover. */
@media (hover: hover) and (pointer: fine) {
	.wp-block-button.is-style-outline > .wp-block-button__link:hover {
		background-color: var(--wp--preset--color--pitch-black);
		border-color: var(--wp--preset--color--pitch-black);
		color: var(--wp--preset--color--bright-snow);
	}
}

/* Glass: for use over images and video. */
.wp-block-button.is-style-glass > .wp-block-button__link {
	color: var(--wp--preset--color--pitch-black);
}

@media (hover: hover) and (pointer: fine) {
	.wp-block-button.is-style-glass > .wp-block-button__link:hover {
		--tola-glass-fill: var(--wp--custom--glass--strong--fill);
		--tola-glass-fallback: var(--wp--custom--glass--strong--fallback);
		color: var(--wp--preset--color--pitch-black);
		border-color: var(--wp--custom--glass--strong--edge);
	}
}

/* Icon button: 44px circle (header icons, carousel arrows).
   The menu toggle keeps core's display rules (it hides itself on wide screens). */
.tola-icon-button,
.tola-header :is(.wc-block-mini-cart__button, .wp-block-woocommerce-customer-account a) {
	display: inline-flex;
}

.tola-icon-button,
.tola-header :is(.wc-block-mini-cart__button, .wp-block-woocommerce-customer-account a, .wp-block-navigation__responsive-container-open) {
	align-items: center;
	justify-content: center;
	inline-size: 44px;
	block-size: 44px;
	padding: 0;
	border-radius: var(--wp--custom--radius--full);
	color: var(--wp--preset--color--pitch-black);
	transition:
		background-color var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--ease-out),
		transform var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--ease-out);
}

@media (hover: hover) and (pointer: fine) {
	.tola-icon-button:hover,
	.tola-header :is(.wc-block-mini-cart__button, .wp-block-woocommerce-customer-account a, .wp-block-navigation__responsive-container-open):hover {
		background-color: var(--wp--custom--accent--sage-tint);
	}
}

.tola-icon-button:active,
.tola-header :is(.wc-block-mini-cart__button, .wp-block-woocommerce-customer-account a, .wp-block-navigation__responsive-container-open):active {
	transform: scale(0.94);
}

/* ==========================================================================
   5. Focus
   ========================================================================== */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* ==========================================================================
   6. Form fields — 48px, radius sm, soft halo on focus
   ========================================================================== */

:where(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="range"], [type="color"], [type="file"]), select, textarea) {
	box-sizing: border-box;
	max-inline-size: 100%;
	min-block-size: var(--wp--custom--field--height);
	padding-block: var(--wp--preset--spacing--20);
	padding-inline: var(--wp--preset--spacing--40);
	border: var(--wp--custom--border--hairline);
	border-radius: var(--wp--custom--radius--sm);
	background-color: var(--wp--preset--color--bright-snow);
	box-shadow: var(--wp--custom--field--inset);
	color: var(--wp--preset--color--pitch-black);
	font-family: inherit;
	font-size: max(16px, 1em); /* 16px+ stops iOS zooming into fields */
	line-height: 1.4;
	transition:
		border-color var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--ease-out),
		box-shadow var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--ease-out);
}

textarea {
	min-block-size: 8rem;
	resize: vertical;
}

@media (hover: hover) and (pointer: fine) {
	:where(input, select, textarea):hover {
		border-color: var(--wp--preset--color--grey-olive);
	}
}

:where(input:not([type="checkbox"], [type="radio"]), select, textarea):focus {
	border-color: var(--wp--preset--color--pitch-black);
	box-shadow: var(--wp--custom--field--halo);
	outline: none;
}

:where(input, select, textarea)[aria-invalid="true"],
:where(.woocommerce-invalid) :where(input, select, textarea) {
	border-color: var(--wp--preset--color--error);
}

::placeholder {
	color: var(--wp--preset--color--grey-olive);
	opacity: 1;
}

/* Select with a thin chevron that sits on the inline-end side. */
select:where(:not([multiple]):not([size])) {
	appearance: none;
	padding-inline-end: 44px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23111111' stroke-width='1.5'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 18px center;
}

[dir="rtl"] select:where(:not([multiple]):not([size])) {
	background-position: left 18px center;
}

input:where([type="checkbox"], [type="radio"]) {
	inline-size: 20px;
	block-size: 20px;
	accent-color: var(--wp--preset--color--pitch-black);
	vertical-align: -0.25em;
}

label {
	cursor: pointer;
}

.tola-form p {
	margin-block: 0 var(--wp--preset--spacing--40);
}

.tola-form :where(input:not([type="checkbox"], [type="radio"]), select, textarea) {
	inline-size: 100%;
	margin-block-start: var(--wp--preset--spacing--20);
}

.tola-form label {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}

.tola-field-error {
	display: block;
	margin-block-start: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--error);
	font-size: var(--wp--preset--font-size--small);
}

/* Search block: a full pill with the button inside. */
.wp-block-search__inside-wrapper {
	gap: var(--wp--preset--spacing--20);
}

.wp-block-search__input {
	border-radius: var(--wp--custom--radius--full);
	padding-inline: var(--wp--preset--spacing--50);
}

.wp-block-search__button-inside .wp-block-search__inside-wrapper {
	padding: 4px;
	border: var(--wp--custom--border--hairline);
	border-radius: var(--wp--custom--radius--full);
	background-color: var(--wp--preset--color--bright-snow);
}

.wp-block-search__button-inside .wp-block-search__inside-wrapper:focus-within {
	border-color: var(--wp--preset--color--pitch-black);
	box-shadow: var(--wp--custom--field--halo);
}

.wp-block-search__button-inside .wp-block-search__input {
	min-block-size: 40px;
	border: 0;
	box-shadow: none;
	background: transparent;
}

.wp-block-search__button {
	margin-inline-start: 0;
	border-radius: var(--wp--custom--radius--full);
}

.wp-block-search__button.has-icon {
	inline-size: 40px;
	min-block-size: 40px;
	padding: 0;
}

/* ==========================================================================
   7. Images
   ========================================================================== */

.wp-block-image img,
.wp-block-post-featured-image img {
	background-color: var(--wp--preset--color--white-smoke-deep);
}

.wp-block-post-featured-image :where(img) {
	border-radius: var(--wp--custom--radius--md);
}

.wp-block-image.alignfull img,
.wp-block-post-featured-image.alignfull img {
	border-radius: 0;
}

/* Linked images: gentle zoom on hover (desktop). */
.wp-block-image a,
.wp-block-post-featured-image a {
	display: block;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--md);
}

.wp-block-image a img,
.wp-block-post-featured-image a img {
	transition: transform var(--wp--custom--motion--duration-slow) var(--wp--custom--motion--ease-out);
}

@media (hover: hover) and (pointer: fine) {
	.wp-block-image a:hover img,
	.wp-block-post-featured-image a:hover img {
		transform: scale(1.04);
	}
}

/* Arch: portrait 4:5 with a semicircular top, like a perfume niche. */
.wp-block-image.is-style-arch img {
	aspect-ratio: 4 / 5;
	inline-size: 100%;
	object-fit: cover;
	border-radius: 50% 50% var(--wp--custom--radius--md) var(--wp--custom--radius--md) / 40% 40% var(--wp--custom--radius--md) var(--wp--custom--radius--md);
}

.wp-block-image.is-style-arch a {
	border-radius: 50% 50% var(--wp--custom--radius--md) var(--wp--custom--radius--md) / 40% 40% var(--wp--custom--radius--md) var(--wp--custom--radius--md);
}

/* Framed: an 8px light-glass frame (outer lg, inner md). */
.wp-block-image.is-style-framed {
	padding: 8px;
	border-radius: var(--wp--custom--radius--lg);
}

.wp-block-image.is-style-framed img {
	border-radius: var(--wp--custom--radius--md);
}

.wp-block-image :where(figcaption) {
	margin-block-start: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--grey-olive-deep);
	font-size: var(--wp--preset--font-size--small);
}

/* ==========================================================================
   8. Cards, covers, sections
   ========================================================================== */

.wp-block-group.is-style-glass-card,
.wp-block-group.is-style-glass-card-dark,
.wp-block-group.is-style-card {
	overflow: hidden;
}

/* Glass cards inside a cover stay a readable width. */
.wp-block-cover .wp-block-group:is(.is-style-glass-card, .is-style-glass-card-dark) {
	max-inline-size: 440px;
}

/* Non-full-width covers become rounded media cards. */
.wp-block-cover:not(.alignfull) {
	overflow: hidden;
	border-radius: var(--wp--custom--radius--lg);
}

@media (min-width: 1024px) {
	.wp-block-cover:not(.alignfull) {
		border-radius: var(--wp--custom--radius--xl);
	}
}

/* Atmosphere: two very soft grey light pools — the backdrop that makes glass read as glass. */
.is-style-section-atmosphere {
	background-image:
		radial-gradient(60% 50% at 12% 8%, color-mix(in srgb, var(--wp--preset--color--alabaster-grey) 70%, transparent) 0%, transparent 70%),
		radial-gradient(55% 45% at 92% 88%, color-mix(in srgb, var(--wp--preset--color--alabaster-grey) 55%, transparent) 0%, transparent 70%),
		linear-gradient(180deg, var(--wp--preset--color--bright-snow) 0%, var(--wp--preset--color--white-smoke) 100%);
	background-repeat: no-repeat;
}

/* Dark section (footer etc.). */
@media (hover: hover) and (pointer: fine) {
	.is-style-section-dark a:where(:not(.wp-element-button)):hover {
		text-decoration-thickness: 2px;
	}
}

.is-style-section-dark :where(.wp-element-button, .wp-block-button__link):focus-visible,
.is-style-glass-card-dark :where(.wp-element-button, .wp-block-button__link):focus-visible {
	outline-color: var(--wp--preset--color--bright-snow);
}

.is-style-section-dark .is-style-eyebrow {
	color: var(--wp--preset--color--grey-olive);
}

@media (hover: hover) and (pointer: fine) {
	:is(.is-style-section-dark, .is-style-glass-card-dark) :is(.wp-element-button, .wp-block-button__link):hover {
		background-color: transparent;
		border-color: var(--wp--preset--color--bright-snow);
		color: var(--wp--preset--color--bright-snow);
	}
}

/* ==========================================================================
   9. Badges
   ========================================================================== */

.tola-badge,
.tola-badge--glass {
	display: inline-flex;
	align-items: center;
	padding-block: 6px;
	padding-inline: 12px;
	border-radius: var(--wp--custom--radius--full);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: 0.2em;
	line-height: 1;
	text-transform: uppercase;
}

.tola-badge {
	background-color: var(--wp--preset--color--pitch-black);
	color: var(--wp--preset--color--bright-snow);
}

.tola-badge--glass {
	color: var(--wp--preset--color--pitch-black);
}

/* ==========================================================================
   10. Header — announcement strip + full-width strong-glass bar
   The glass sits on ::before so the bar does not become the containing
   block of the fixed menu panel (backdrop-filter would trap it).
   The whole part is sticky with a negative offset, so the strip scrolls
   away and the bar stays.
   ========================================================================== */

.wp-site-blocks > header.wp-block-template-part {
	--tola-announcement-height: 0px;
	position: sticky;
	inset-block-start: calc(var(--wp-admin--admin-bar--height, 0px) - var(--tola-announcement-height));
	z-index: var(--wp--custom--z--header);
}

/* Only a header that has the strip scrolls it away; any other header stays fully in view. */
.wp-site-blocks > header.wp-block-template-part:has(.tola-announcement) {
	--tola-announcement-height: 32px;
}

@media (max-width: 600px) {
	.admin-bar .wp-site-blocks > header.wp-block-template-part {
		inset-block-start: calc(-1 * var(--tola-announcement-height));
	}
}

.tola-announcement {
	box-sizing: border-box;
	block-size: var(--tola-announcement-height, 32px);
	margin: 0;
	padding-block: 8px;
	padding-inline: var(--wp--custom--gutter);
	overflow: hidden;
	background-color: var(--wp--preset--color--pitch-black);
	color: var(--wp--preset--color--bright-snow);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.14em;
	line-height: 16px;
	text-overflow: ellipsis;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Small phones: the strip keeps its full line instead of an ellipsis. */
@media (max-width: 420px) {
	.tola-announcement {
		padding-inline: 12px;
		letter-spacing: 0.1em;
	}
}

.tola-header__bar.tola-header__bar {
	position: relative;
	isolation: isolate;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	box-sizing: border-box;
	min-block-size: 64px;
	padding-block: 6px;
	padding-inline: max(calc(var(--wp--custom--gutter) - 10px), calc((100% - 1400px) / 2));
}

.tola-header__bar::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-width: 0 0 1px;
	border-block-end-color: color-mix(in srgb, var(--wp--preset--color--alabaster-grey) 60%, transparent);
	box-shadow: none;
	pointer-events: none;
}

/* Once the page scrolls, the bar lifts into a floating, rounded glass pill
   (assets/js/header.js toggles .is-stuck on the header). */
.tola-header__bar::before {
	transition:
		inset var(--wp--custom--motion--duration-base) var(--wp--custom--motion--ease-out),
		border-radius var(--wp--custom--motion--duration-base) var(--wp--custom--motion--ease-out),
		box-shadow var(--wp--custom--motion--duration-base) var(--wp--custom--motion--ease-out);
}

.is-stuck .tola-header__bar.tola-header__bar {
	padding-block: calc(6px + max(8px, env(safe-area-inset-top))) 6px;
}

.is-stuck .tola-header__bar::before {
	inset-block: max(8px, env(safe-area-inset-top)) 0;
	inset-inline: calc(var(--wp--custom--gutter) / 2);
	border-width: 1px;
	border-color: var(--wp--custom--glass--strong--edge);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--custom--glass--strong--highlight), var(--wp--custom--glass--light--shadow);
}

@media (min-width: 1024px) {
	.is-stuck .tola-header__bar::before {
		inset-inline: max(calc(var(--wp--custom--gutter) / 2), calc((100% - 1440px) / 2));
	}
}

.is-stuck .tola-header__bar.tola-header__bar {
	padding-inline: max(calc(var(--wp--custom--gutter) / 2 + 8px), calc((100% - 1400px) / 2));
}

.tola-header__menu {
	justify-self: start;
}

.tola-header__brand {
	justify-self: center;
}

.tola-header__actions {
	justify-self: end;
}

/* Logo when one is set in Site Identity; otherwise the site title. */
.tola-header__brand .wp-block-site-logo img {
	inline-size: 52px;
	block-size: auto;
}

.tola-header__brand:has(.wp-block-site-logo img) .wp-block-site-title,
.tola-footer__logo:has(.wp-block-site-logo img) .wp-block-site-title {
	display: none;
}

.tola-header .wp-block-site-title {
	font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem);
	letter-spacing: -0.03em;
	white-space: nowrap;
}

@media (min-width: 1024px) {
	.tola-header__bar.tola-header__bar {
		min-block-size: 76px;
	}

	.tola-header__brand .wp-block-site-logo img {
		inline-size: 60px;
	}
}

/* Account icon: desktop only (it lives in the menu flow on phones via My account). */
@media (max-width: 781px) {
	.tola-header__account {
		display: none;
	}
}

/* Search: icon button that opens an inline pill field. */
.tola-header__search .wp-block-search__inside-wrapper {
	padding: 0;
	border: 0;
	background: transparent;
}

.tola-header__search.wp-block-search__searchfield-hidden .wp-block-search__inside-wrapper {
	inline-size: auto !important;
}

.tola-header__search .wp-block-search__button {
	inline-size: 44px;
	min-block-size: 44px;
	block-size: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--pitch-black);
}

@media (hover: hover) and (pointer: fine) {
	.tola-header__search .wp-block-search__button:hover {
		background-color: var(--wp--custom--accent--sage-tint);
	}
}

.tola-header__search .wp-block-search__button svg {
	inline-size: 22px;
	block-size: 22px;
	fill: currentColor;
}

.tola-header__search:is(:not(.wp-block-search__searchfield-hidden), .is-closing) .wp-block-search__inside-wrapper {
	padding: 2px;
	border: var(--wp--custom--border--hairline);
	border-radius: var(--wp--custom--radius--full);
	background-color: var(--wp--preset--color--bright-snow);
}

.tola-header__search .wp-block-search__input {
	min-block-size: 40px;
	border: 0;
	box-shadow: none;
	background: transparent;
	font-size: 16px;
}

/* Cart count: the one sage dot in the header. */
.tola-header .wc-block-mini-cart__badge {
	background-color: var(--wp--custom--accent--sage) !important;
	color: var(--wp--preset--color--pitch-black) !important;
	font-size: 10px;
	font-weight: 600;
}

/* Menu panel: slides in from the start edge, strong glass, serif links with hairlines. */
.tola-header .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--tola-glass-fallback);
	color: var(--wp--preset--color--pitch-black);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	.tola-header .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
		background-color: var(--wp--custom--glass--strong--fill);
	}
}

.tola-header .wp-block-navigation__responsive-container.is-menu-open {
	--navigation-layout-justification-setting: flex-start;
	--navigation-layout-justify: flex-start;
	--navigation-layout-align: stretch;
	box-sizing: border-box;
	inset-inline-end: auto;
	inline-size: min(360px, 86vw);
	padding-block: max(16px, env(safe-area-inset-top)) var(--wp--preset--spacing--60);
	padding-inline: var(--wp--preset--spacing--50);
	border: 0;
	border-start-end-radius: var(--wp--custom--radius--lg);
	border-end-end-radius: var(--wp--custom--radius--lg);
	box-shadow: 0 0 0 100vmax var(--wp--custom--glass--scrim), var(--wp--custom--glass--strong--shadow);
}

.tola-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: stretch;
	padding-block-start: var(--wp--preset--spacing--70);
}

.tola-header .wp-block-navigation__responsive-container.is-menu-open :is(.wp-block-navigation__container, .wp-block-page-list) {
	align-items: stretch;
	gap: 0;
	inline-size: 100%;
}

.tola-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	border-block-end: var(--wp--custom--border--hairline);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xx-large);
	letter-spacing: 0;
	line-height: 1.2;
	text-transform: none;
}

.tola-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	padding-block: 14px;
	inline-size: 100%;
}

.tola-header .wp-block-navigation-item__content {
	border-radius: var(--wp--custom--radius--xs);
}

.tola-header .wp-block-navigation__responsive-container-close {
	inset-inline-end: auto;
	inset-inline-start: 0;
	inline-size: 44px;
	block-size: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: var(--wp--custom--border--hairline);
	border-radius: var(--wp--custom--radius--full);
}

/* ==========================================================================
   11. WooCommerce
   ========================================================================== */

/* Mini-cart drawer: strong glass, rounded on its inner edge. */
.wc-block-components-drawer__screen-overlay {
	background-color: var(--wp--custom--glass--scrim);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

.wc-block-components-drawer__screen-overlay .wc-block-components-drawer {
	border-block: 0;
	border-inline-end: 0;
	border-start-start-radius: var(--wp--custom--radius--lg);
	border-end-start-radius: var(--wp--custom--radius--lg);
	overflow: hidden;
}

.wc-block-components-drawer__screen-overlay .wc-block-components-drawer .wc-block-components-drawer__close {
	inline-size: 44px;
	block-size: 44px;
	border-radius: var(--wp--custom--radius--full);
	color: var(--wp--preset--color--pitch-black);
}

.wc-block-components-drawer__screen-overlay .wc-block-components-drawer .wc-block-components-drawer__close:focus {
	box-shadow: none;
	outline: none;
}

.wc-block-components-drawer__screen-overlay .wc-block-components-drawer .wc-block-components-drawer__close:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Sale badge: light glass tag at the image's top-start corner. */
:is(.woocommerce, .woocommerce-page) span.onsale.onsale,
.wc-block-components-product-sale-badge {
	inset-block-start: 12px;
	inset-inline-start: 12px;
	inset-inline-end: auto;
	min-block-size: 0;
	min-inline-size: 0;
	margin: 0;
	padding-block: 6px;
	padding-inline: 12px;
	border: 0;
	border-radius: var(--wp--custom--radius--full);
	background-color: var(--wp--custom--glass--light--fallback);
	color: var(--wp--preset--color--pitch-black);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.12em;
	line-height: 1;
	text-transform: uppercase;
}

/* Product images and gallery. */
.woocommerce div.product div.images img,
.wc-block-components-product-image img,
.wp-block-woocommerce-product-image img,
.woocommerce ul.products li.product a img {
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--white-smoke-deep);
}

.woocommerce div.product div.images .flex-control-thumbs li img {
	border-radius: var(--wp--custom--radius--sm);
}

/* Buttons rendered by WooCommerce follow the pill system. */
.woocommerce :is(a.button, button.button, input.button, #respond input#submit) {
	border-radius: var(--wp--custom--radius--full);
}

/* Quantity: pill field. */
.woocommerce .quantity .qty {
	inline-size: 4.5em;
	border-radius: var(--wp--custom--radius--full);
	text-align: center;
}

/* Cart / Checkout block fields. */
.wc-block-components-text-input input,
.wc-block-components-combobox .components-combobox-control input,
.wc-blocks-components-select .wc-blocks-components-select__select,
.wc-block-components-textarea {
	border-radius: var(--wp--custom--radius--sm) !important;
}

/* Notices: light glass, radius sm. */
.wc-block-components-notice-banner {
	border-radius: var(--wp--custom--radius--sm);
	color: var(--wp--preset--color--pitch-black);
}

.woocommerce :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) {
	border-radius: var(--wp--custom--radius--sm);
}

/* ==========================================================================
   12. Block styles
   ========================================================================== */

.wp-block-list.is-style-plain {
	list-style: none;
	padding-inline-start: 0;
}

.wp-block-separator {
	border: 0;
	border-block-start: 1px solid currentColor;
}

/* ==========================================================================
   13. Arabic (applies automatically on Arabic pages)
   ========================================================================== */

:lang(ar) {
	letter-spacing: 0 !important;
	text-transform: none !important;
}

:lang(ar) body,
body:lang(ar) {
	line-height: 1.9;
}

:lang(ar) :where(h1, h2, h3, h4, h5, h6, .wp-block-post-title, .wp-block-site-title) {
	font-weight: 500;
	line-height: 1.45;
}

/* Arrows and chevrons point the other way in RTL. */
[dir="rtl"] .tola-flip-rtl {
	transform: scaleX(-1);
}

/* ==========================================================================
   14. Reduced motion
   ========================================================================== */

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

/* ==========================================================================
   15. Shared accents — light button, arrow-link, caption chip, panel, toast
   ========================================================================== */

/* Light: white pill for dark photos; hover turns it to an outline. */
@media (hover: hover) and (pointer: fine) {
	.wp-block-button.is-style-light > .wp-block-button__link:hover {
		background-color: transparent;
		border-color: var(--wp--preset--color--bright-snow);
		color: var(--wp--preset--color--bright-snow);
	}
}

.wp-block-button.is-style-light > .wp-block-button__link:focus-visible {
	outline-color: var(--wp--preset--color--bright-snow);
}

/* Arrow link: small spaced caps, hairline underline that turns sage on hover. */
.is-style-arrow-link a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding-block: 6px;
	color: inherit;
	text-decoration: none;
	border-block-end: 1px solid currentColor;
	transition: border-color var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--ease-out);
}

.is-style-arrow-link a span {
	font-size: 1.4em;
	line-height: 1;
	transition: transform var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--ease-out);
}

@media (hover: hover) and (pointer: fine) {
	.is-style-arrow-link a:hover {
		border-block-end-color: var(--wp--custom--accent--sage);
	}
}

@media (hover: hover) and (pointer: fine) {
	.is-style-arrow-link a:hover span {
		transform: translate(3px, -3px);
	}
}

[dir="rtl"] .is-style-arrow-link a span {
	transform: scaleX(-1);
}

/* Buttons with a trailing arrow. */
.wp-block-button__link span[aria-hidden="true"] {
	font-size: 1.3em;
	line-height: 0;
}

/* Caption chip: small glass label on a photo. */
.tola-caption-chip {
	position: absolute;
	inset-block-end: 20px;
	inset-inline-start: 20px;
	margin: 0;
	padding-block: 10px;
	padding-inline: 16px;
	border: 1px solid var(--wp--custom--glass--light--edge);
	border-radius: 13px;
	background-color: var(--wp--custom--glass--light--fallback);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.12em;
	line-height: 1.2;
	text-transform: uppercase;
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	.tola-caption-chip {
		background-color: var(--wp--custom--glass--light--fill);
		-webkit-backdrop-filter: blur(12px) saturate(160%);
		backdrop-filter: blur(12px) saturate(160%);
	}
}

/* Panel: rounded warm panel with two faint rings in the corner. */
.tola-panel {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--lg);
}

/* Phones: the screen gutter already gives room, so the panel's own inset is smaller
   and the WhatsApp button keeps to one line. */
@media (max-width: 600px) {
	.tola-panel.tola-panel {
		padding-inline: var(--wp--preset--spacing--50) !important;
	}

	.tola-panel .wp-block-button__link {
		padding-inline: 22px;
		white-space: nowrap;
	}
}

.tola-panel::after {
	content: "";
	position: absolute;
	z-index: -1;
	inline-size: 340px;
	block-size: 340px;
	inset-block-start: -220px;
	inset-inline-end: 12%;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--alabaster-grey) 60%, transparent);
	border-radius: 50%;
	box-shadow:
		0 0 0 36px rgba(250, 249, 250, 0.12),
		0 0 0 72px rgba(250, 249, 250, 0.08);
	pointer-events: none;
}

/* Toast: dark pill at the bottom after Add to Cart. */
.tola-toast {
	position: fixed;
	z-index: var(--wp--custom--z--toast);
	inset-block-end: max(20px, env(safe-area-inset-bottom));
	inset-inline-start: 50%;
	display: flex;
	align-items: center;
	gap: 16px;
	max-inline-size: calc(100vw - 32px);
	padding-block: 12px;
	padding-inline: 20px;
	border-radius: var(--wp--custom--radius--full);
	background-color: var(--wp--preset--color--pitch-black);
	box-shadow: var(--wp--custom--glass--dark--shadow);
	color: var(--wp--preset--color--bright-snow);
	font-size: var(--wp--preset--font-size--small);
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, 16px);
	transition:
		opacity var(--wp--custom--motion--duration-base) var(--wp--custom--motion--ease-out),
		transform var(--wp--custom--motion--duration-base) var(--wp--custom--motion--ease-out);
}

[dir="rtl"] .tola-toast {
	transform: translate(50%, 16px);
}

.tola-toast.is-visible {
	opacity: 1;
	pointer-events: auto;
	transform: translate(-50%, 0);
}

[dir="rtl"] .tola-toast.is-visible {
	transform: translate(50%, 0);
}

.tola-toast a {
	color: var(--wp--custom--accent--sage-light);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* ==========================================================================
   16. Homepage
   ========================================================================== */

/* Hero: inset rounded frame, warm shade from the bottom (phones) or the start side (desktop). */
.wp-block-cover.tola-hero {
	min-block-size: max(560px, calc(100svh - 150px));
	max-block-size: 820px;
	margin-block: var(--wp--preset--spacing--30) 0;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	border-radius: 21px;
}

.wp-block-cover.tola-hero > .wp-block-cover__background {
	background: var(--wp--custom--scrim--hero) !important;
	opacity: 1 !important;
}

.wp-block-cover.tola-hero > .wp-block-cover__image-background {
	filter: saturate(0.9);
}

@media (min-width: 782px) {
	.wp-block-cover.tola-hero {
		min-block-size: min(72vw, 760px);
		padding: var(--wp--preset--spacing--70);
		border-radius: var(--wp--custom--radius--lg);
	}

	.wp-block-cover.tola-hero > .wp-block-cover__background {
		background: var(--wp--custom--scrim--hero-wide) !important;
	}

	[dir="rtl"] .wp-block-cover.tola-hero > .wp-block-cover__background {
		transform: scaleX(-1);
	}
}

.tola-hero__copy {
	max-inline-size: 680px;
}

.tola-hero__copy h1 {
	margin-block: var(--wp--preset--spacing--20) 0;
	text-wrap: balance;
}

.tola-hero__eyebrow.tola-hero__eyebrow {
	color: var(--wp--custom--accent--sage-light);
}

.tola-hero__lede {
	max-inline-size: 400px;
	color: rgba(250, 249, 250, 0.88);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.8;
}

.tola-hero__copy .wp-block-buttons {
	margin-block-start: var(--wp--preset--spacing--40);
}

/* Collection: smoke band, tight section heading. */
.tola-home > .tola-collection {
	margin-block-start: var(--wp--preset--spacing--60);
}

.tola-collection h2 {
	margin-block: 0;
	max-inline-size: 14ch;
}

/* Product grid: 2 columns on phones, 3 on tablets, 4 on desktop (docs/10 §3). */
.tola-products .wc-block-product-template {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--30);
}

@media (min-width: 782px) {
	.tola-products .wc-block-product-template {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--40);
	}
}

@media (min-width: 1024px) {
	.tola-products .wc-block-product-template {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Product card: soft glass card, inner rounded image, lifts on hover. */
.tola-products .wc-block-product {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	box-sizing: border-box;
	inline-size: auto;
	margin: 0;
	padding: 7px 7px 12px;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--alabaster-grey) 80%, transparent);
	border-radius: 17px;
	background-color: rgba(250, 249, 250, 0.76);
	transition:
		transform var(--wp--custom--motion--duration-base) var(--wp--custom--motion--ease-out),
		box-shadow var(--wp--custom--motion--duration-base) var(--wp--custom--motion--ease-out);
}

@media (min-width: 782px) {
	.tola-products .wc-block-product {
		padding: 10px 10px 16px;
		border-radius: var(--wp--custom--radius--card);
	}
}

@media (hover: hover) and (pointer: fine) {
	.tola-products .wc-block-product:hover {
		box-shadow: var(--wp--preset--shadow--lift);
		transform: translateY(-4px);
	}

	.tola-products .wc-block-product:hover .wc-block-components-product-image img {
		transform: scale(1.045);
	}
}

.tola-products .wc-block-components-product-image {
	overflow: hidden;
	margin: 0 !important;
	border-radius: 12px;
}

.tola-products .wc-block-components-product-image img {
	border-radius: 12px;
	transition: transform var(--wp--custom--motion--duration-slow) var(--wp--custom--motion--ease-out);
}

@media (min-width: 782px) {
	.tola-products .wc-block-components-product-image,
	.tola-products .wc-block-components-product-image img {
		border-radius: 16px;
	}
}

.tola-products .wc-block-product > :not(.wc-block-components-product-image) {
	margin-inline: 5px;
}

.tola-products .wc-block-product .wp-block-post-title {
	margin-block: var(--wp--preset--spacing--20) 0;
	font-size: clamp(1.125rem, 1rem + 0.5vw, 1.5rem) !important;
	line-height: 1.15;
	text-align: center;
}

.tola-products .tola-product-card__buy {
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	margin-block-start: auto;
}

.tola-products .tola-product-card__buy .wc-block-components-product-price {
	margin: 0;
	text-align: center;
}

/* On sale: the sale price on top, the original struck through below it. */
.tola-products .wc-block-components-product-price:has(del) {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
}

.tola-products .wc-block-components-product-price ins {
	order: -1;
	text-decoration: none;
}

.tola-products .wc-block-components-product-price del {
	color: var(--wp--preset--color--grey-olive-deep);
	font-size: 0.85em;
}

.tola-products .tola-product-card__buy :is(.wp-block-button, .wc-block-components-product-button, .wp-block-woocommerce-product-button) {
	margin: 0;
	align-items: center;
	justify-content: center;
}

/* Compact Add to Cart: outline pill that fills black on hover. */
.tola-products .wc-block-components-product-button .wc-block-components-product-button__button {
	min-block-size: 40px;
	padding-block: 10px;
	padding-inline: 16px;
	border: 1px solid var(--wp--preset--color--pitch-black);
	background-color: transparent;
	color: var(--wp--preset--color--pitch-black);
	font-size: 11px;
	letter-spacing: 0.1em;
	white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
	.tola-products .wc-block-components-product-button .wc-block-components-product-button__button:hover {
		background-color: var(--wp--preset--color--pitch-black);
		color: var(--wp--preset--color--bright-snow);
	}
}

.tola-products .wc-block-components-product-button .added_to_cart {
	display: none;
}

/* Our story: tall rounded photo, brand words with a hairline above. */
.tola-story__media {
	position: relative;
}

.tola-story__image img {
	inline-size: 100%;
	aspect-ratio: 4 / 5;
	max-block-size: 600px;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--card);
}

@media (min-width: 782px) {
	.tola-story__image img {
		border-radius: 25px;
	}
}

.tola-story h2 {
	margin-block: 0;
	text-wrap: balance;
}

.tola-story-points {
	gap: var(--wp--preset--spacing--40);
	padding-block-start: var(--wp--preset--spacing--40);
	border-block-start: 1px solid color-mix(in srgb, var(--wp--preset--color--alabaster-grey) 90%, transparent);
}

.tola-story-point {
	margin: 0;
	color: var(--wp--preset--color--grey-olive-deep);
	font-size: 11px;
	line-height: 1.4;
}

.tola-story-point strong {
	display: block;
	color: var(--wp--preset--color--pitch-black);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 400;
}

/* Phones and tablets: photo above, words centred with extra side room. */
@media (max-width: 1023px) {
	.tola-story .wp-block-columns {
		flex-wrap: wrap !important;
	}

	.tola-story .wp-block-column {
		flex-basis: 100% !important;
	}

	.tola-story__media {
		max-inline-size: 520px;
		margin-inline: auto;
	}

	.tola-story .wp-block-column:last-child {
		box-sizing: border-box;
		max-inline-size: 600px;
		margin-inline: auto;
		padding-inline: var(--wp--preset--spacing--50);
		text-align: center;
	}

	.tola-story-points,
	.tola-story .wp-block-buttons {
		justify-content: center;
	}
}

/* Phones: the gutter is already wide, so a lighter inset keeps the three words on one row. */
@media (max-width: 600px) {
	.tola-story .wp-block-column:last-child {
		padding-inline: var(--wp--preset--spacing--20);
	}
}

/* A note from Tola. */
.tola-panel h2 {
	margin-block: 0;
}

/* Templates control their own bottom spacing; the footer sits flush. */
.wp-site-blocks > footer.wp-block-template-part {
	margin-block-start: 0;
}

/* ==========================================================================
   17. Footer — light, hairline rules, four columns
   ========================================================================== */

.tola-footer__main {
	border-block-start: 1px solid color-mix(in srgb, var(--wp--preset--color--alabaster-grey) 90%, transparent);
}

.tola-footer__logo .wp-block-site-logo img {
	inline-size: 72px;
	block-size: auto;
}

.tola-footer .wp-block-site-title {
	font-size: var(--wp--preset--font-size--xx-large);
	letter-spacing: -0.03em;
}

.tola-footer__brand p:not(.is-style-arrow-link) {
	max-inline-size: 280px;
	line-height: 1.9;
}

.tola-footer .is-style-eyebrow {
	color: var(--wp--preset--color--pitch-black);
}

.tola-footer__links {
	margin-inline: 0;
	margin-block-end: 0;
	font-size: var(--wp--preset--font-size--small);
}

.tola-footer__links li + li {
	margin-block-start: 10px;
}

.tola-footer__links [dir="ltr"] {
	white-space: nowrap;
}

.tola-footer__links a {
	color: var(--wp--preset--color--charcoal);
	text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
	.tola-footer__links a:hover {
		color: var(--wp--preset--color--pitch-black);
		text-decoration: underline;
	}
}

.tola-footer__bottom {
	border-block-start: 1px solid color-mix(in srgb, var(--wp--preset--color--alabaster-grey) 70%, transparent);
	color: var(--wp--preset--color--grey-olive-deep);
}

.tola-footer__bottom p {
	margin: 0;
}

/* Phones: brand on its own row, link columns two by two. */
@media (max-width: 781px) {
	.tola-footer__main.tola-footer__main {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	}

	.tola-footer__brand {
		grid-column: 1 / -1;
	}
}

/* ==========================================================================
   18. Search — header panel + live results dropdown
   ========================================================================== */

/* Opened header search drops under the bar as a full-width (phones) or
   end-aligned (desktop) pill, so the three-column bar never squeezes. */
.tola-header__search:is(:not(.wp-block-search__searchfield-hidden), .is-closing) {
	position: absolute;
	inset-block-start: calc(100% + 8px);
	inset-inline: var(--wp--custom--gutter);
	z-index: 2;
}

@media (min-width: 782px) {
	.tola-header__search:is(:not(.wp-block-search__searchfield-hidden), .is-closing) {
		inset-inline-start: auto;
		inline-size: min(520px, calc(100% - 2 * var(--wp--custom--gutter)));
	}
}

.tola-header__search:is(:not(.wp-block-search__searchfield-hidden), .is-closing) .wp-block-search__inside-wrapper {
	inline-size: 100% !important;
	padding: 4px;
	box-shadow: var(--wp--custom--glass--strong--shadow);
}

.tola-header__search:is(:not(.wp-block-search__searchfield-hidden), .is-closing) .wp-block-search__input {
	padding-inline: var(--wp--preset--spacing--40);
}

/* Dropdown. */
form.wp-block-search {
	position: relative;
}

.tola-live-search {
	position: absolute;
	inset-block-start: calc(100% + 8px);
	inset-inline: 0;
	z-index: var(--wp--custom--z--panels);
	box-sizing: border-box;
	min-inline-size: min(320px, 100%);
	max-block-size: min(70vh, 520px);
	overflow-y: auto;
	padding: 8px;
	border: 1px solid var(--wp--custom--glass--strong--edge);
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--custom--glass--strong--fallback);
	box-shadow: var(--wp--custom--glass--strong--shadow);
	text-align: start;
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	.tola-live-search {
		background-color: var(--wp--custom--glass--strong--fill);
		-webkit-backdrop-filter: blur(28px) saturate(180%);
		backdrop-filter: blur(28px) saturate(180%);
	}
}

.tola-live-search[hidden] {
	display: none;
}

.tola-live-search ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tola-live-search li a {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 8px;
	border-radius: var(--wp--custom--radius--sm);
	color: var(--wp--preset--color--pitch-black);
	text-decoration: none;
}

.tola-live-search li a:hover,
.tola-live-search li[aria-selected="true"] a {
	background-color: var(--wp--custom--accent--sage-tint);
}

.tola-live-search img {
	flex: none;
	inline-size: 56px;
	block-size: 56px;
	object-fit: cover;
	border-radius: 10px;
	background-color: var(--wp--preset--color--white-smoke-deep);
}

.tola-live-search__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-inline-size: 0;
}

.tola-live-search__name {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.2;
}

.tola-live-search__price {
	color: var(--wp--preset--color--charcoal);
	font-size: var(--wp--preset--font-size--small);
}

.tola-live-search__status {
	margin: 0;
	padding: 12px;
	color: var(--wp--preset--color--charcoal);
	font-size: var(--wp--preset--font-size--small);
}

.tola-live-search__all {
	display: block;
	margin-block-start: 4px;
	padding: 12px;
	border-block-start: var(--wp--custom--border--hairline);
	color: var(--wp--preset--color--pitch-black);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-decoration: none;
	text-transform: uppercase;
}

.tola-live-search__all[hidden] {
	display: none;
}

/* Search page field. */
.tola-search-field {
	max-inline-size: 560px;
}

/* ==========================================================================
   19. Shop, product page
   ========================================================================== */

/* Breadcrumbs: small, muted. */
.woocommerce-breadcrumb,
.wc-block-breadcrumbs {
	margin: 0;
	color: var(--wp--preset--color--grey-olive-deep);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.04em;
}

.woocommerce-breadcrumb a,
.wc-block-breadcrumbs a {
	color: inherit;
	text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
	.woocommerce-breadcrumb a:hover,
	.wc-block-breadcrumbs a:hover {
		color: var(--wp--preset--color--pitch-black);
		text-decoration: underline;
	}
}

/* Shop head + toolbar. */
.tola-shop__head .wp-block-query-title {
	margin-block: 0;
	font-size: var(--wp--preset--font-size--display);
}

.tola-shop__head .wp-block-term-description {
	max-inline-size: 560px;
}

.tola-shop__toolbar {
	align-items: center;
	padding-block: var(--wp--preset--spacing--20);
	border-block: var(--wp--custom--border--hairline);
}

.tola-shop__toolbar .woocommerce-result-count {
	margin: 0;
	color: var(--wp--preset--color--charcoal);
	font-size: var(--wp--preset--font-size--small);
}

.tola-shop__toolbar .woocommerce-ordering {
	margin: 0;
}

.tola-shop__toolbar .woocommerce-ordering select {
	min-block-size: 44px;
	border-radius: var(--wp--custom--radius--full);
	font-size: var(--wp--preset--font-size--small);
}

/* Pagination: round number pills. */
.tola-products .wp-block-query-pagination {
	gap: 6px;
	margin-block-start: var(--wp--preset--spacing--50);
	font-size: var(--wp--preset--font-size--small);
}

.tola-products .wp-block-query-pagination :is(a, .current) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 44px;
	min-block-size: 44px;
	padding-inline: 12px;
	border: var(--wp--custom--border--hairline);
	border-radius: var(--wp--custom--radius--full);
	color: var(--wp--preset--color--pitch-black);
	text-decoration: none;
}

.tola-products .wp-block-query-pagination .current {
	border-color: var(--wp--preset--color--pitch-black);
	background-color: var(--wp--preset--color--pitch-black);
	color: var(--wp--preset--color--bright-snow);
}

/* Product page. */
.tola-product__main {
	align-items: flex-start !important;
}

@media (min-width: 782px) {
	.tola-product__summary {
		position: sticky;
		inset-block-start: calc(var(--wp-admin--admin-bar--height, 0px) + 100px);
	}
}

.tola-product__gallery .woocommerce-product-gallery {
	margin: 0;
}

.tola-product__gallery .woocommerce-product-gallery__image img,
.tola-product__gallery .woocommerce-product-gallery img {
	border-radius: var(--wp--custom--radius--card);
	background-color: var(--wp--preset--color--white-smoke-deep);
}

@media (min-width: 782px) {
	.tola-product__gallery .woocommerce-product-gallery__image img {
		border-radius: var(--wp--custom--radius--lg);
	}
}

.tola-product__gallery .flex-control-thumbs {
	display: flex !important;
	gap: 10px;
	margin-block-start: 10px !important;
}

.tola-product__gallery .flex-control-thumbs li {
	inline-size: 72px !important;
}

.tola-product__gallery .woocommerce-product-gallery__trigger {
	inset-block-start: 14px !important;
	inset-inline-end: 14px !important;
	border-radius: var(--wp--custom--radius--full);
	background-color: var(--wp--custom--glass--light--fallback) !important;
}

.tola-product__category {
	margin: 0;
	color: var(--wp--custom--accent--sage-deep);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.tola-product__category a {
	color: inherit;
	text-decoration: none;
}

.tola-product__summary .wp-block-post-title {
	margin-block: 0;
	text-wrap: balance;
}

.tola-product__summary .wc-block-components-product-price,
.tola-product__summary .wp-block-woocommerce-product-price {
	color: var(--wp--preset--color--pitch-black);
}

.tola-product__summary .wp-block-post-excerpt__excerpt {
	margin: 0;
	line-height: 1.8;
}

/* Add to cart: quantity pill + full-width black pill. */
.tola-product__summary form.cart {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-block: var(--wp--preset--spacing--20) 0;
}

.tola-product__summary form.cart .quantity .qty {
	inline-size: 5.5em;
	min-block-size: 52px;
}

.tola-product__summary form.cart .single_add_to_cart_button {
	flex: 1 1 200px;
	min-block-size: 52px;
	border-radius: var(--wp--custom--radius--full);
}

.tola-product__assurances {
	display: grid;
	gap: 8px;
	margin: 0;
	padding-block-start: var(--wp--preset--spacing--30);
	border-block-start: var(--wp--custom--border--hairline);
	color: var(--wp--preset--color--charcoal);
	font-size: var(--wp--preset--font-size--small);
}

.tola-product__assurances li {
	display: flex;
	align-items: center;
	gap: 10px;
}

.tola-product__assurances li::before {
	content: "";
	flex: none;
	inline-size: 6px;
	block-size: 6px;
	border-radius: 50%;
	background-color: var(--wp--custom--accent--sage);
}

/* Details tabs: underline tabs, no boxes. */
.tola-product__details .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--40);
	margin: 0 0 var(--wp--preset--spacing--40);
	padding: 0;
	border-block-end: var(--wp--custom--border--hairline);
	list-style: none;
}

.tola-product__details .woocommerce-tabs ul.tabs::before,
.tola-product__details .woocommerce-tabs ul.tabs li::before,
.tola-product__details .woocommerce-tabs ul.tabs li::after {
	display: none !important;
}

.tola-product__details .woocommerce-tabs ul.tabs li {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
}

.tola-product__details .woocommerce-tabs ul.tabs li a {
	display: block;
	padding-block: 12px;
	border-block-end: 2px solid transparent;
	color: var(--wp--preset--color--grey-olive-deep);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-decoration: none;
	text-transform: uppercase;
}

.tola-product__details .woocommerce-tabs ul.tabs li.active a {
	border-block-end-color: var(--wp--preset--color--pitch-black);
	color: var(--wp--preset--color--pitch-black);
}

.tola-product__details .woocommerce-Tabs-panel {
	max-inline-size: 720px;
	color: var(--wp--preset--color--charcoal);
}

.tola-product__details .woocommerce-Tabs-panel > h2:first-child,
.tola-product__details .woocommerce-Reviews-title {
	display: none;
}

/* The block's "minimal" style uses `html body` selectors, so the tab look above
   needs this weight to apply: flush-left underline tabs on one hairline. */
html body .tola-product__details.tola-product__details ul.tabs.wc-tabs {
	border-block-end: var(--wp--custom--border--hairline);
}

html body .tola-product__details.tola-product__details ul.tabs.wc-tabs li {
	display: block;
	margin: 0;
	border: 0;
	opacity: 1;
}

html body .tola-product__details.tola-product__details ul.tabs.wc-tabs li a {
	padding: 12px 0;
	border-block-end: 2px solid transparent;
	color: var(--wp--preset--color--grey-olive-deep);
}

html body .tola-product__details.tola-product__details ul.tabs.wc-tabs li.active a {
	border-block-end: 2px solid var(--wp--preset--color--pitch-black);
	color: var(--wp--preset--color--pitch-black);
}

/* Reviews form inside the tab. */
.tola-product__details #review_form #respond input:not([type="checkbox"], [type="submit"]),
.tola-product__details #review_form #respond textarea {
	inline-size: 100%;
}

.tola-related h2 {
	margin-block: 0 var(--wp--preset--spacing--40);
}

.tola-related .is-style-eyebrow {
	margin-block-end: var(--wp--preset--spacing--10);
}

/* ==========================================================================
   20. Cart, checkout, account
   ========================================================================== */

.tola-cart > .wp-block-post-title,
.tola-checkout > .wp-block-post-title {
	max-inline-size: var(--wp--style--global--wide-size) !important;
	margin-block: 0;
	font-size: var(--wp--preset--font-size--xxx-large);
}

/* Checkout header: back link, logo, secure note. Text items (not 44px icon buttons),
   so the bar keeps the full gutter instead of the main header's icon-adjusted one. */
.tola-header--checkout .tola-header__bar.tola-header__bar {
	padding-inline: max(var(--wp--custom--gutter), calc((100% - 1400px) / 2));
}

.tola-header--checkout .tola-header__back {
	justify-self: start;
	margin: 0;
}

.tola-header--checkout .tola-header__back a span {
	font-size: 1.2em;
}

.tola-header--checkout .tola-header__secure {
	justify-self: end;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: var(--wp--preset--color--charcoal);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.tola-header--checkout .tola-header__secure::before {
	content: "";
	inline-size: 14px;
	block-size: 14px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (max-width: 600px) {
	.tola-header--checkout .tola-header__secure {
		font-size: 0;
		gap: 0;
	}

	.tola-header--checkout .tola-header__secure::before {
		inline-size: 20px;
		block-size: 20px;
	}
}

.wp-site-blocks > header.wp-block-template-part:has(.tola-header--checkout) {
	--tola-announcement-height: 0px;
}

/* Cart + checkout blocks: the order summary sits in a rounded linen card. */
:is(.wc-block-cart, .wc-block-checkout) .wc-block-components-sidebar {
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--40) !important;
	border-radius: var(--wp--custom--radius--card);
	background-color: var(--wp--preset--color--linen);
}

@media (min-width: 782px) {
	:is(.wc-block-cart, .wc-block-checkout) .wc-block-components-sidebar {
		padding: var(--wp--preset--spacing--50) !important;
	}
}

.wc-block-components-sidebar .wc-block-components-panel,
.wc-block-components-sidebar .wc-block-components-totals-wrapper {
	border-color: color-mix(in srgb, var(--wp--preset--color--grey-olive) 30%, transparent) !important;
}

.wc-block-cart .wc-block-cart__totals-title,
.wc-block-components-checkout-order-summary__title-text,
.wc-block-checkout .wc-block-components-checkout-step__title {
	font-family: var(--wp--preset--font-family--heading) !important;
	font-size: var(--wp--preset--font-size--xx-large) !important;
	font-weight: 400 !important;
	letter-spacing: -0.01em;
	text-transform: none !important;
}

/* Checkout steps: WooCommerce zeroes the first field's top margin, so each heading sat
   16px from its fields but only 24px from the step above. Heading now belongs to its
   fields (24px) and steps are clearly apart (40px+). */
.wc-block-checkout .wc-block-components-form .wc-block-components-checkout-step :is(.wc-block-components-country-input, .wc-block-components-text-input:first-of-type) {
	margin-block-start: 24px; /* collapses with the heading's 16px bottom margin */
}

.wc-block-checkout .wc-block-components-checkout-step__content > :first-child {
	margin-block-start: 24px;
}

.wc-block-checkout .wc-block-components-form .wc-block-components-checkout-step {
	margin-block-end: var(--wp--preset--spacing--60);
}

.wc-block-cart .wc-block-cart__totals-title {
	font-size: var(--wp--preset--font-size--x-large) !important;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-size: var(--wp--preset--font-size--large) !important;
	font-weight: 500 !important;
}

/* Cart rows: rounded thumbnails, serif product names. */
.wc-block-cart-items .wc-block-cart-item__image img,
.wc-block-components-order-summary-item__image img {
	border-radius: 12px;
	background-color: var(--wp--preset--color--white-smoke-deep);
}

.wc-block-components-product-name {
	color: var(--wp--preset--color--pitch-black) !important;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large) !important;
	line-height: 1.2;
	text-decoration: none !important;
}

/* Narrow cart rows (cart page and drawer): WooCommerce's fixed 80px + 132px grid
   pushes the line total past the screen edge. Photo, flexible details, total. */
:is(.is-mobile, .is-small, .is-medium) table.wc-block-cart-items .wc-block-cart-items__row {
	grid-template-columns: 64px minmax(0, 1fr) auto;
	column-gap: 14px;
}

:is(.is-mobile, .is-small, .is-medium) table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image {
	padding-inline: 0;
}

:is(.is-mobile, .is-small, .is-medium) table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__product {
	grid-column: 2 / 3;
}

:is(.is-mobile, .is-small, .is-medium) table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total {
	grid-column: 3;
}

.wc-block-cart-items__header {
	color: var(--wp--preset--color--grey-olive-deep);
	font-size: 11px !important;
	letter-spacing: 0.14em;
}

.wc-block-components-quantity-selector {
	border-radius: var(--wp--custom--radius--full) !important;
	overflow: hidden;
}

.wc-block-components-quantity-selector::after {
	border-radius: var(--wp--custom--radius--full) !important;
}

/* Primary actions: black pills. */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wc-block-components-button:not(.is-link) {
	box-sizing: border-box;
	min-block-size: 52px;
	border-radius: var(--wp--custom--radius--full) !important;
	font-size: 12px !important;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.wc-block-components-button:not(.is-link):not(.outlined):not(.is-style-outline):not(.wc-block-components-drawer__close) {
	border: 1px solid var(--wp--preset--color--pitch-black);
	background-color: var(--wp--preset--color--pitch-black) !important;
	color: var(--wp--preset--color--bright-snow) !important;
}

@media (hover: hover) and (pointer: fine) {
	.wc-block-components-button:not(.is-link):not(.outlined):not(.is-style-outline):not(.wc-block-components-drawer__close):hover {
		background-color: transparent !important;
		color: var(--wp--preset--color--pitch-black) !important;
	}
}

/* Coupon, radio options and checkboxes. */
.wc-block-components-radio-control__option,
.wc-block-components-radio-control-accordion-option {
	border-radius: var(--wp--custom--radius--sm) !important;
}

.wc-block-components-radio-control--highlight-checked::after,
.wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option--checked-option-highlighted,
.wc-block-components-radio-control--highlight-checked label.wc-block-components-radio-control__option--checked-option-highlighted {
	border-radius: var(--wp--custom--radius--sm) !important;
	box-shadow: inset 0 0 0 1.5px var(--wp--preset--color--pitch-black) !important;
}

.wc-block-components-radio-control__input:checked,
.wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked {
	border-color: var(--wp--preset--color--pitch-black) !important;
	background-color: var(--wp--preset--color--pitch-black) !important;
}

.wc-block-components-checkbox .wc-block-components-checkbox__mark {
	fill: var(--wp--preset--color--bright-snow) !important;
}

.wc-block-components-text-input input:focus,
.wc-blocks-components-select .wc-blocks-components-select__select:focus {
	border-color: var(--wp--preset--color--pitch-black) !important;
	box-shadow: var(--wp--custom--field--halo) !important;
}

/* Empty cart. */
.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 400;
}

.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title::before {
	display: none;
}

/* My account: pill navigation, rounded panels. */
.woocommerce-account .woocommerce {
	display: grid;
	gap: var(--wp--preset--spacing--50);
}

@media (min-width: 900px) {
	.woocommerce-account.logged-in .woocommerce.woocommerce {
		grid-template-columns: 240px minmax(0, 1fr);
		align-items: start;
	}
}

.woocommerce-account .woocommerce::before,
.woocommerce-account .woocommerce::after {
	display: none;
}

.woocommerce-MyAccount-navigation,
.woocommerce-MyAccount-content {
	float: none !important;
	inline-size: auto !important;
}

.woocommerce-MyAccount-navigation ul {
	display: flex;
	gap: 6px;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	list-style: none;
	scrollbar-width: none;
}

@media (min-width: 900px) {
	.woocommerce-MyAccount-navigation ul {
		flex-direction: column;
		overflow: visible;
	}
}

.woocommerce-MyAccount-navigation li a {
	display: block;
	padding-block: 12px;
	padding-inline: 18px;
	border: var(--wp--custom--border--hairline);
	border-radius: var(--wp--custom--radius--full);
	color: var(--wp--preset--color--pitch-black);
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
	white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
	.woocommerce-MyAccount-navigation li a:hover {
		border-color: var(--wp--preset--color--pitch-black);
	}
}

.woocommerce-MyAccount-navigation li.is-active a {
	border-color: var(--wp--preset--color--pitch-black);
	background-color: var(--wp--preset--color--pitch-black);
	color: var(--wp--preset--color--bright-snow);
}

.woocommerce-account :is(.woocommerce-form-login, .woocommerce-form-register, .woocommerce-EditAccountForm, .woocommerce-address-fields, .woocommerce-ResetPassword) {
	margin: 0 !important;
	padding: var(--wp--preset--spacing--50) !important;
	border: var(--wp--custom--border--hairline) !important;
	border-radius: var(--wp--custom--radius--card) !important;
	background-color: var(--wp--preset--color--white-smoke);
}

.woocommerce-account #customer_login {
	display: grid;
	gap: var(--wp--preset--spacing--50);
}

@media (min-width: 782px) {
	.woocommerce-account #customer_login {
		grid-template-columns: 1fr 1fr;
	}
}

.woocommerce-account #customer_login :is(.u-column1, .u-column2) {
	float: none;
	inline-size: auto;
	max-inline-size: none;
}

.woocommerce-account #customer_login::before,
.woocommerce-account #customer_login::after {
	display: none;
}

.woocommerce-account h2 {
	font-size: var(--wp--preset--font-size--xx-large);
}

/* Login / register headings sit close to their form, not floating between title and card. */
.woocommerce-account :is(.woocommerce > h2, #customer_login h2) {
	margin-block: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
}

.woocommerce form .form-row :is(input.input-text, textarea, select) {
	inline-size: 100%;
}

.woocommerce form .form-row label {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}

.woocommerce-account table.shop_table,
.woocommerce-order table.shop_table {
	overflow: hidden;
	border: var(--wp--custom--border--hairline) !important;
	border-radius: var(--wp--custom--radius--sm) !important;
	border-collapse: separate !important;
}

/* Order received. */
.wc-block-order-confirmation-summary {
	border-radius: var(--wp--custom--radius--card);
	background-color: var(--wp--preset--color--linen);
}

.wc-block-order-confirmation-status {
	font-family: var(--wp--preset--font-family--heading);
}

/* WooCommerce's default "Uncategorized" category is not worth a label. */
.tola-product__category:has(a[href*="uncategorized"]):not(:has(a:not([href*="uncategorized"]))) {
	display: none;
}

.tola-product__gallery .woocommerce-product-gallery,
.tola-product__gallery div.images {
	float: none !important;
	inline-size: 100% !important;
	margin-block-end: 0 !important;
}

/* Add to cart row: WooCommerce's clearfix pseudo-elements would become flex items
   (pushing the quantity 10px in), and its 2em bottom margin loosens the summary. */
.tola-product__summary form.cart::before,
.tola-product__summary form.cart::after {
	display: none !important;
}

.tola-product__summary form.cart {
	margin-block-end: 0 !important;
}

.tola-product__summary form.cart div.quantity {
	margin: 0 !important;
}

/* Phones and tablets: one tight column. The photo, then the buying block read as a
   unit (name, price, add to cart close together), then assurances. */
@media (max-width: 781px) {
	.tola-product__main {
		margin-block-start: var(--wp--preset--spacing--30) !important;
		row-gap: var(--wp--preset--spacing--40) !important;
	}

	.tola-product__summary {
		gap: 0;
	}

	.tola-product__summary > * {
		margin-block: 0 !important;
	}

	.tola-product__summary .tola-product__category {
		margin-block-end: var(--wp--preset--spacing--20) !important;
	}

	.tola-product__summary .wp-block-woocommerce-product-price,
	.tola-product__summary .wc-block-components-product-rating {
		margin-block-start: var(--wp--preset--spacing--20) !important;
	}

	.tola-product__summary .wp-block-post-excerpt {
		margin-block-start: var(--wp--preset--spacing--30) !important;
	}

	.tola-product__summary .wp-block-add-to-cart-form {
		margin-block-start: var(--wp--preset--spacing--40) !important;
	}

	.tola-product__summary .tola-product__assurances {
		margin-block-start: var(--wp--preset--spacing--40) !important;
	}

	.tola-product__summary .tola-product__finder {
		margin-block-start: var(--wp--preset--spacing--30) !important;
	}

	.tola-product__details .woocommerce-tabs ul.tabs {
		margin-block-end: var(--wp--preset--spacing--30);
	}
}

/* Native clear button on search fields: hidden (Esc or delete clears). */
.wp-block-search__input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

.tola-live-search__price del {
	color: var(--wp--preset--color--grey-olive);
}

/* Checkout summary: one card, not a card inside a card. */
.wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block,
.wc-block-checkout__sidebar .wc-block-components-checkout-order-summary__content {
	border: 0 !important;
}

.wc-block-checkout__sidebar .wc-block-components-checkout-order-summary__title-text {
	font-size: var(--wp--preset--font-size--x-large) !important;
}

.wc-block-components-order-summary .wc-block-components-product-name {
	font-size: var(--wp--preset--font-size--large) !important;
}

.wc-block-components-order-summary-item__quantity {
	border-color: var(--wp--preset--color--linen) !important;
	background-color: var(--wp--preset--color--pitch-black) !important;
	color: var(--wp--preset--color--bright-snow) !important;
}

/* Account grid: let the scrolling tab row shrink instead of widening the page. */
.woocommerce-account .woocommerce {
	grid-template-columns: minmax(0, 1fr);
}

.woocommerce-account .woocommerce > * {
	min-inline-size: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
	border-color: var(--wp--preset--color--pitch-black);
	background-color: var(--wp--preset--color--pitch-black);
	color: var(--wp--preset--color--bright-snow);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li {
	margin: 0;
	padding: 0;
	border: 0;
}

/* Mini-cart drawer actions: slim pills, one line each; stacked on narrow drawers. */
.wc-block-mini-cart__footer-actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

@media (min-width: 480px) {
	.wc-block-mini-cart__footer-actions {
		flex-direction: row;
	}
}

.wc-block-mini-cart__footer-actions .wc-block-components-button.wc-block-components-button {
	box-sizing: border-box;
	flex: 1 1 0;
	min-block-size: 44px;
	padding-block: 12px;
	padding-inline: 18px;
	font-size: 11px !important;
	letter-spacing: 0.12em;
	line-height: 1;
	white-space: nowrap;
}

.wc-block-mini-cart__footer-actions .wc-block-components-button .wc-block-components-button__text {
	line-height: 1;
}

/* Secondary WooCommerce buttons (e.g. "View cart"): outline that fills on hover. */
.wc-block-components-button.is-style-outline:not(.is-link) {
	border: 1px solid var(--wp--preset--color--pitch-black) !important;
	background-color: transparent !important;
	color: var(--wp--preset--color--pitch-black) !important;
}

@media (hover: hover) and (pointer: fine) {
	.wc-block-components-button.is-style-outline:not(.is-link):hover {
		background-color: var(--wp--preset--color--pitch-black) !important;
		color: var(--wp--preset--color--bright-snow) !important;
	}
}

/* ==========================================================================
   21. Motion and phone polish (0.6.0)
   Curves and durations come from custom.motion in theme.json.
   ========================================================================== */

/* Phone feel: no grey tap flash, no landscape font inflation, no double-tap delay,
   no text selection when a control is long-pressed. Content text stays selectable. */
html {
	-webkit-tap-highlight-color: transparent;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

:where(a, button, summary, label, [role="button"]) {
	touch-action: manipulation;
}

:where(button, [role="button"], .wp-element-button, .wp-block-button__link, .wc-block-components-button, .tola-icon-button) {
	-webkit-user-select: none;
	user-select: none;
}

/* Content clears the notch in landscape (the viewport uses viewport-fit=cover). */
:root body {
	--wp--style--root--padding-left: max(var(--wp--custom--gutter), env(safe-area-inset-left, 0px));
	--wp--style--root--padding-right: max(var(--wp--custom--gutter), env(safe-area-inset-right, 0px));
}

/* Scrolling inside the menu, the cart drawer or search results never drags the page behind. */
.wp-block-navigation__responsive-container.is-menu-open,
.wc-block-components-drawer__content,
.tola-live-search {
	overscroll-behavior: contain;
}

/* Press feedback on every button, on press (not release). */
.tola-products .wc-block-components-product-button .wc-block-components-product-button__button,
.wc-block-components-button:not(.is-link),
.tola-header__search .wp-block-search__button {
	transition:
		background-color var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--ease-out),
		border-color var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--ease-out),
		color var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--ease-out),
		transform var(--wp--custom--motion--duration-press) var(--wp--custom--motion--ease-out);
}

.wp-element-button:active,
.wp-block-button__link:active,
.tola-products .wc-block-components-product-button .wc-block-components-product-button__button:active,
.wc-block-components-button:not(.is-link):active,
.tola-header__search .wp-block-search__button:active {
	transform: scale(0.97);
}

/* Search results drop in from the field (they enter, so ease-out; 180ms). */
.tola-live-search {
	transform-origin: top center;
	transition:
		opacity 180ms var(--wp--custom--motion--ease-out),
		transform 180ms var(--wp--custom--motion--ease-out);
}

@starting-style {
	.tola-live-search {
		opacity: 0;
		transform: translateY(-4px) scale(0.98);
	}
}

/* Header search field: drops in from under the bar, lifts away faster when it closes.
   While .is-closing (set by header.js for 160ms) the field keeps its open layout. */
.tola-header__search.is-closing {
	overflow: visible;
	pointer-events: none;
}

.tola-header .wp-block-search.tola-header__search.is-closing .wp-block-search__input {
	flex: 1 1 auto;
	inline-size: auto !important;
	padding-inline: var(--wp--preset--spacing--40) !important;
}

@keyframes tola-search-in {
	from {
		opacity: 0;
		transform: translateY(-8px) scale(0.97);
	}
}

@keyframes tola-search-out {
	to {
		opacity: 0;
		transform: translateY(-6px) scale(0.98);
	}
}

@media (prefers-reduced-motion: no-preference) {
	.tola-header__search:not(.wp-block-search__searchfield-hidden) .wp-block-search__inside-wrapper {
		animation: tola-search-in 220ms var(--wp--custom--motion--ease-out);
	}

	.tola-header__search.is-closing .wp-block-search__inside-wrapper {
		animation: tola-search-out 160ms ease forwards;
	}
}

/* Grows from the icon: centred on phones, from the end on wider screens. */
.tola-header__search .wp-block-search__inside-wrapper {
	transform-origin: top center;
}

@media (min-width: 782px) {
	.tola-header__search .wp-block-search__inside-wrapper {
		transform-origin: top right;
	}

	[dir="rtl"] .tola-header__search .wp-block-search__inside-wrapper {
		transform-origin: top left;
	}
}

/* Toast: arrives in 300ms, leaves faster. */
.tola-toast:not(.is-visible) {
	transition-duration: 200ms;
}

/* Hero entrance, once per page load: the photo settles, then the copy rises line by line.
   CSS (not JS) so it stays smooth while the rest of the page is still loading.
   Only the copy fades; the photo stays fully visible so it never delays the first paint. */
@keyframes tola-settle {
	from {
		transform: scale(1.06);
	}
}

@keyframes tola-rise {
	from {
		opacity: 0;
		transform: translateY(16px);
	}
}

@media (prefers-reduced-motion: no-preference) {
	.wp-block-cover.tola-hero {
		overflow: hidden;
	}

	.tola-hero .wp-block-cover__image-background {
		animation: tola-settle 1.6s var(--wp--custom--motion--ease-out) both;
	}

	.tola-hero__copy > *,
	.tola-hero .wp-block-cover__inner-container > .wp-block-heading {
		animation: tola-rise 0.9s var(--wp--custom--motion--ease-out) 0.15s both;
	}

	.tola-hero__copy > :nth-child(2) {
		animation-delay: 0.23s;
	}

	.tola-hero__copy > :nth-child(3) {
		animation-delay: 0.31s;
	}

	.tola-hero__copy > :nth-child(4) {
		animation-delay: 0.39s;
	}
}

/* Page transitions (Chrome, Edge, Safari 18.2+; other browsers load pages normally).
   A short cross-fade: identical parts such as the header stay perfectly still.
   The product photo grows from its card into the product page (view-transitions.js). */
@media (prefers-reduced-motion: no-preference) {
	@view-transition {
		navigation: auto;
	}
}

::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: 240ms;
}

::view-transition-group(tola-product) {
	animation-duration: 450ms;
	animation-timing-function: var(--wp--custom--motion--ease-drawer);
}

::view-transition-old(tola-product),
::view-transition-new(tola-product) {
	block-size: 100%;
	object-fit: cover;
}

/* Closed cart drawer: out of the tab order once it has slid away (WooCommerce leaves it focusable). */
.wc-block-components-drawer__screen-overlay--is-hidden .wc-block-mini-cart__drawer {
	visibility: hidden;
	transition:
		transform 280ms var(--wp--custom--motion--ease-drawer),
		visibility 0s linear 280ms;
}

/* Cart drawer motion: WooCommerce's slide, on the iOS sheet curve. Opens in 420ms,
   closes faster (280ms); the scrim fades with it and the contents settle in just after. */
.wc-block-components-drawer__screen-overlay--with-slide-in,
.wc-block-components-drawer__screen-overlay--with-slide-in .wc-block-components-drawer {
	animation-duration: 420ms;
	animation-timing-function: var(--wp--custom--motion--ease-drawer);
}

.wc-block-components-drawer__screen-overlay--with-slide-out {
	transition: opacity 280ms var(--wp--custom--motion--ease-drawer);
}

.wc-block-components-drawer__screen-overlay .wc-block-components-drawer {
	will-change: transform;
}

@keyframes tola-drawer-content {
	from {
		opacity: 0;
		transform: translateX(16px);
	}
}

@media (prefers-reduced-motion: no-preference) {
	.wc-block-components-drawer__screen-overlay--with-slide-in .wc-block-components-drawer__content {
		animation: tola-drawer-content 360ms var(--wp--custom--motion--ease-out) 90ms both;
	}

	[dir="rtl"] .wc-block-components-drawer__screen-overlay--with-slide-in .wc-block-components-drawer__content {
		animation-name: tola-drawer-content-rtl;
	}
}

@keyframes tola-drawer-content-rtl {
	from {
		opacity: 0;
		transform: translateX(-16px);
	}
}

/* Lighter blur while it moves: the scrim no longer blurs the page (fading a blurred
   full-screen layer drops frames on phones) and the drawer's own frost is softer. */
.wc-block-components-drawer__screen-overlay {
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	.wc-block-components-drawer__screen-overlay .wc-block-components-drawer {
		-webkit-backdrop-filter: blur(16px) saturate(180%);
		backdrop-filter: blur(16px) saturate(180%);
	}
}

/* Drawer close: a quiet 40px round icon button, not a black pill. */
.wc-block-components-drawer .wc-block-components-button.wc-block-components-drawer__close {
	inset-block-start: 14px;
	inset-inline-end: 14px;
	inline-size: 40px;
	min-block-size: 40px;
	block-size: 40px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--wp--custom--radius--full);
	background-color: transparent !important;
	color: var(--wp--preset--color--pitch-black) !important;
}

@media (hover: hover) and (pointer: fine) {
	.wc-block-components-drawer .wc-block-components-button.wc-block-components-drawer__close:hover {
		background-color: var(--wp--custom--accent--sage-tint) !important;
	}
}