/**
 * Merchalia interface upgrade — production-quality polish.
 *
 * Sections in this file:
 * 1. Top utility bar
 * 2. Sticky header behaviour
 * 3. WooCommerce shop catalog overrides (Merchalia-style cards)
 * 4. WooCommerce single product page polish
 * 5. Mobile navigation polish
 * 6. Form / input polish
 * 7. Misc utility classes
 */

/* ─────────────────────────────────────────────────────────────────
   1. Top utility bar
   ───────────────────────────────────────────────────────────────── */

.merchalia-utility-bar {
	background: var(--wp--preset--color--near-black);
	color: var(--wp--preset--color--ivory);
	padding: 0.625rem var(--wp--preset--spacing--40);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.5rem;
	flex-wrap: wrap;
}

.merchalia-utility-bar a {
	color: inherit;
	text-decoration: none;
	transition: color 0.18s ease-out;
}

.merchalia-utility-bar a:hover {
	color: var(--wp--preset--color--ruby);
}

.merchalia-utility-bar strong {
	color: var(--wp--preset--color--lavender);
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	font-size: 0.75rem;
}

.merchalia-utility-bar a:hover {
	color: var(--wp--preset--color--lavender) !important;
}

.merchalia-utility-bar-sep {
	opacity: 0.3;
}

@media (max-width: 640px) {
	.merchalia-utility-bar {
		font-size: 0.75rem;
		padding: 0.5rem var(--wp--preset--spacing--40);
		gap: 0.75rem;
	}
	.merchalia-utility-bar-hide-mobile {
		display: none;
	}
}

/* ─────────────────────────────────────────────────────────────────
   2. Sticky header behaviour
   ───────────────────────────────────────────────────────────────── */

.wp-site-blocks > header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--wp--preset--color--ivory);
	transition: background 0.3s ease-out, box-shadow 0.25s ease-out, color 0.3s ease-out;
}

.wp-site-blocks > header.is-scrolled {
	box-shadow: 0 1px 0 rgba(2, 0, 41, 0.10), 0 8px 28px rgba(2, 0, 41, 0.08);
	border-bottom: 1px solid rgba(2, 0, 41, 0.06);
}

/* Header over the hero — solid midnight bg for guaranteed legibility.
 * The video shows below the header through the hero's own padding. */
.wp-site-blocks > header.is-over-hero,
.wp-site-blocks > header.is-over-hero > * {
	background-color: rgb(2, 0, 41) !important;
	background-image: none !important;
}

.wp-site-blocks > header.is-over-hero {
	color: #FFFFFF;
	box-shadow: none;
	border-bottom: none;
	position: sticky;
}

/* Ensure inner navigation containers stay transparent so the dark
 * header bg shows through (some WP layouts wrap nav in groups with
 * their own bg). Also kill the stone border-bottom that the WP block
 * markup applies to the inner group — it leaves a silver hairline
 * between header and hero. */
.wp-site-blocks > header.is-over-hero .wp-block-group,
.wp-site-blocks > header.is-over-hero .wp-block-navigation,
.wp-site-blocks > header.is-over-hero .wp-block-navigation__container,
.wp-site-blocks > header.is-over-hero .wp-block-navigation__responsive-container,
.wp-site-blocks > header.is-over-hero ul {
	background: transparent !important;
	border-bottom: 0 !important;
	border-color: transparent !important;
}

.wp-site-blocks > header.is-over-hero .merchalia-logo,
.wp-site-blocks > header.is-over-hero .wp-block-navigation-item__content,
.wp-site-blocks > header.is-over-hero .wp-block-navigation-item__content a,
.wp-site-blocks > header.is-over-hero .merchalia-icon-link {
	color: #FFFFFF !important;
}

.wp-site-blocks > header.is-over-hero .wp-block-navigation-item__content {
	font-weight: 500 !important;
	opacity: 1 !important;
}

.wp-site-blocks > header.is-over-hero .wp-block-navigation-item__content:hover {
	color: #FFFFFF !important;
	opacity: 0.85 !important;
}

/* Logo dot mark also pure white over hero */
.wp-site-blocks > header.is-over-hero .merchalia-logo::after {
	background: #FFFFFF !important;
}

.wp-site-blocks > header.is-over-hero .wp-block-navigation-item__content::after {
	background: var(--wp--preset--color--ivory) !important;
}

.wp-site-blocks > header.is-over-hero .merchalia-icon-link:hover {
	background: rgba(255, 255, 255, 0.14);
	color: var(--wp--preset--color--ivory) !important;
}

/* Sub-menu (Catalogue dropdown) over-hero — invert to match dark header */
.wp-site-blocks > header.is-over-hero .wp-block-navigation .wp-block-navigation__submenu-container {
	background: rgba(2, 0, 41, 0.92) !important;
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-color: rgba(255, 255, 255, 0.10) !important;
}

.wp-site-blocks > header.is-over-hero .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: var(--wp--preset--color--ivory) !important;
}

.wp-site-blocks > header.is-over-hero .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	color: #FFFFFF !important;
	background: rgba(255, 255, 255, 0.08);
}

/* Utility bar above header — also transparent over hero */
.merchalia-utility-bar {
	transition: background 0.3s ease-out;
}

body.merchalia-has-video-hero:not(.is-scrolled-past-hero) .merchalia-utility-bar {
	background: rgba(2, 0, 41, 0.55);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

/* ─────────────────────────────────────────────────────────────────
   3. WooCommerce shop catalog overrides
   ───────────────────────────────────────────────────────────────── */

.woocommerce ul.products,
.wc-block-grid__products {
	padding: 0 !important;
}

/* Editorial-style product card */
.woocommerce ul.products li.product,
.wc-block-grid__product {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--stone);
	padding: 0 !important;
	margin: 0 !important;
	transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
	            border-color 0.35s ease-out,
	            box-shadow 0.35s ease-out;
}

.woocommerce ul.products li.product:hover,
.wc-block-grid__product:hover {
	transform: translateY(-4px);
	border-color: var(--wp--preset--color--ruby);
	box-shadow: 0 18px 40px rgba(26, 26, 26, 0.06);
}

.woocommerce ul.products li.product .woocommerce-loop-product__link,
.wc-block-grid__product-link {
	display: block;
	padding: 0;
	color: inherit !important;
	text-decoration: none !important;
}

/* Product image area — make it square + crop nicely */
.woocommerce ul.products li.product img,
.wc-block-grid__product-image img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	width: 100% !important;
	height: auto !important;
	margin: 0 !important;
	background: var(--wp--preset--color--ivory);
}

/* Product title */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.wc-block-grid__product-title {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 1.125rem !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	letter-spacing: -0.015em !important;
	color: var(--wp--preset--color--near-black) !important;
	padding: 1.5rem 1.5rem 0.5rem !important;
	margin: 0 !important;
}

/* Price */
.woocommerce ul.products li.product .price,
.wc-block-grid__product-price {
	color: var(--wp--preset--color--near-black) !important;
	font-family: var(--wp--preset--font-family--sans) !important;
	font-size: 1.25rem !important;
	font-weight: 700 !important;
	letter-spacing: -0.015em !important;
	padding: 0 1.5rem 1.5rem !important;
	margin: 0 !important;
	display: block !important;
}

.woocommerce ul.products li.product .price .from,
.woocommerce ul.products li.product .price ins {
	font-weight: 700;
	background: none !important;
	text-decoration: none !important;
}

.woocommerce ul.products li.product .price del {
	color: var(--wp--preset--color--graphite) !important;
	font-size: 0.875rem;
	font-weight: 500;
	margin-right: 0.5rem;
}

/* Add to cart button */
.woocommerce ul.products li.product .button,
.wc-block-grid__product-add-to-cart .wp-block-button__link {
	display: block !important;
	margin: 0 !important;
	border-radius: 0 !important;
	border: none !important;
	padding: 1rem 1.5rem !important;
	background: var(--wp--preset--color--near-black) !important;
	color: var(--wp--preset--color--ivory) !important;
	font-weight: 500 !important;
	letter-spacing: -0.005em !important;
	text-align: center !important;
	transition: background-color 0.18s ease-out !important;
	text-transform: none !important;
	font-size: 0.9375rem !important;
}

.woocommerce ul.products li.product .button:hover,
.wc-block-grid__product-add-to-cart .wp-block-button__link:hover {
	background: var(--wp--preset--color--ruby) !important;
	transform: none !important;
}

/* Hide WC's "added" / "loading" mess */
.woocommerce ul.products li.product .added_to_cart,
.woocommerce a.added_to_cart {
	display: none !important;
}

/* Sale flash */
.woocommerce ul.products li.product .onsale,
span.onsale {
	background: var(--wp--preset--color--ruby) !important;
	color: var(--wp--preset--color--ivory) !important;
	border-radius: 0 !important;
	font-weight: 700 !important;
	font-size: 0.75rem !important;
	letter-spacing: 0.05em !important;
	text-transform: uppercase !important;
	padding: 0.375rem 0.75rem !important;
	min-width: 0 !important;
	min-height: 0 !important;
	line-height: 1 !important;
	top: 1rem !important;
	left: 1rem !important;
	right: auto !important;
}

/* Page title (Shop / category) */
.woocommerce .page-title,
.wc-block-store-notices,
h1.page-title {
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 700;
	letter-spacing: -0.025em;
}

/* Breadcrumbs */
.woocommerce-breadcrumb {
	font-size: 0.8125rem;
	color: var(--wp--preset--color--graphite);
	letter-spacing: 0.02em;
	margin-bottom: 2rem;
}

.woocommerce-breadcrumb a {
	color: inherit;
	text-decoration: none;
}

.woocommerce-breadcrumb a:hover {
	color: var(--wp--preset--color--ruby);
}

/* Result count + ordering */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
	font-size: 0.875rem;
	color: var(--wp--preset--color--graphite);
}

.woocommerce .woocommerce-ordering select {
	border: 1px solid var(--wp--preset--color--stone);
	background: var(--wp--preset--color--white);
	padding: 0.5rem 1rem;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.875rem;
	color: var(--wp--preset--color--near-black);
	border-radius: 0;
	cursor: pointer;
}

.woocommerce .woocommerce-ordering select:hover {
	border-color: var(--wp--preset--color--ruby);
}

/* Shop loop wrap with Merchalia spacing */
.woocommerce-products-header {
	padding: 3rem 0 1.5rem;
}

/* ─────────────────────────────────────────────────────────────────
   4. Single product page polish
   ───────────────────────────────────────────────────────────────── */

.woocommerce div.product .product_title {
	font-family: var(--wp--preset--font-family--sans);
	font-size: clamp(1.875rem, 3.5vw, 2.75rem);
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.1;
	color: var(--wp--preset--color--near-black);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--wp--preset--color--near-black);
	font-size: 1.875rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 1.5rem 0;
}

.woocommerce div.product form.cart .button {
	background: var(--wp--preset--color--near-black) !important;
	color: var(--wp--preset--color--ivory) !important;
	border-radius: 0 !important;
	padding: 1rem 2rem !important;
	font-weight: 500 !important;
	letter-spacing: -0.005em !important;
	border: none !important;
	font-size: 1rem !important;
	transition: background-color 0.18s ease-out !important;
}

.woocommerce div.product form.cart .button:hover {
	background: var(--wp--preset--color--ruby) !important;
}

/* Product tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs {
	border-bottom: 1px solid var(--wp--preset--color--stone);
	padding: 0;
	margin: 3rem 0 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.9375rem;
	font-weight: 500;
	letter-spacing: -0.005em;
	color: var(--wp--preset--color--graphite) !important;
	padding: 1rem 1.5rem 1rem 0 !important;
	margin-right: 1.5rem;
	border-bottom: 2px solid transparent !important;
	margin-bottom: -1px;
	transition: color 0.18s ease-out, border-color 0.18s ease-out;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--wp--preset--color--near-black) !important;
	border-bottom-color: var(--wp--preset--color--ruby) !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li:hover a {
	color: var(--wp--preset--color--near-black) !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before {
	display: none !important;
}

/* Quantity input */
.woocommerce .quantity .qty {
	border: 1px solid var(--wp--preset--color--stone);
	padding: 0.875rem 1rem;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 1rem;
	border-radius: 0;
	width: 80px;
	text-align: center;
}

.woocommerce .quantity .qty:focus {
	border-color: var(--wp--preset--color--ruby);
	outline: none;
}

/* SKU / cats / tags */
.woocommerce div.product .product_meta {
	font-size: 0.8125rem;
	color: var(--wp--preset--color--graphite);
	border-top: 1px solid var(--wp--preset--color--stone);
	padding-top: 1.5rem;
	margin-top: 2rem;
}

.woocommerce div.product .product_meta a {
	color: var(--wp--preset--color--graphite);
	text-decoration: none;
}

.woocommerce div.product .product_meta a:hover {
	color: var(--wp--preset--color--ruby);
}

/* ─────────────────────────────────────────────────────────────────
   5. Mobile navigation polish
   ───────────────────────────────────────────────────────────────── */

@media (max-width: 781px) {
	.wp-block-navigation__responsive-container {
		background: var(--wp--preset--color--ivory) !important;
	}

	.wp-block-navigation__responsive-container.is-menu-open {
		padding: 5rem 2rem 2rem !important;
	}

	.wp-block-navigation__responsive-container-content {
		gap: 1rem !important;
		align-items: flex-start !important;
		justify-content: flex-start !important;
		text-align: left !important;
		width: 100% !important;
		--navigation-layout-justification-setting: flex-start !important;
		--navigation-layout-justify: flex-start !important;
		--navigation-layout-align: flex-start !important;
	}

	.wp-block-navigation__responsive-container .wp-block-navigation__container,
	.wp-block-navigation__responsive-container .wp-block-page-list {
		align-items: flex-start !important;
		justify-content: flex-start !important;
		width: 100% !important;
	}

	.wp-block-navigation__responsive-container .wp-block-navigation-item {
		width: 100% !important;
		justify-content: flex-start !important;
	}

	.wp-block-navigation__responsive-container .wp-block-navigation-item__content {
		font-size: 1.5rem !important;
		font-weight: 600 !important;
		letter-spacing: -0.02em !important;
		padding: 0.75rem 0 !important;
		text-align: left !important;
		width: 100% !important;
		display: block !important;
	}

	.wp-block-navigation__responsive-container .wp-block-navigation-item__content::after {
		display: none !important;
	}

	.wp-block-navigation__responsive-container-close,
	.wp-block-navigation__responsive-container-open {
		color: var(--wp--preset--color--near-black) !important;
	}

	.wp-block-navigation__responsive-container-open svg,
	.wp-block-navigation__responsive-container-close svg {
		width: 28px !important;
		height: 28px !important;
	}

	/* Mobile submenu — render INLINE (not as floating panel).
	 * Reset all desktop overlay styles so the submenu items flow with
	 * the rest of the mobile menu. */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
		position: static !important;
		opacity: 1 !important;
		visibility: visible !important;
		height: auto !important;
		width: 100% !important;
		min-width: 0 !important;
		background: transparent !important;
		border: none !important;
		box-shadow: none !important;
		padding: 0 0 0 1.25rem !important;
		margin: 0 !important;
		flex-direction: column !important;
		gap: 0 !important;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		font-size: 1.0625rem !important;
		font-weight: 500 !important;
		padding: 0.5rem 0 !important;
		color: var(--wp--preset--color--graphite) !important;
		background: transparent !important;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
		color: var(--wp--preset--color--near-black) !important;
		background: transparent !important;
	}
}

/* ─────────────────────────────────────────────────────────────────
   6. Form / input polish
   ───────────────────────────────────────────────────────────────── */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
textarea,
select {
	border: 1px solid var(--wp--preset--color--stone);
	background: var(--wp--preset--color--white);
	padding: 0.875rem 1rem;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 1rem;
	color: var(--wp--preset--color--near-black);
	border-radius: 0;
	transition: border-color 0.18s ease-out;
	width: 100%;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
	border-color: var(--wp--preset--color--ruby);
	outline: none;
}

/* ─────────────────────────────────────────────────────────────────
   7. Footer enhancements
   ───────────────────────────────────────────────────────────────── */

.merchalia-footer-newsletter {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}

.merchalia-newsletter-row {
	display: flex;
	gap: 0.75rem;
	align-items: stretch;
}

.merchalia-footer-newsletter input[type="email"] {
	flex: 1;
	border-bottom: 1.5px solid var(--wp--preset--color--stone);
	border-top: none;
	border-left: none;
	border-right: none;
	background: transparent;
	padding: 0.75rem 0;
	font-size: 1rem;
	border-radius: 0;
	min-width: 0;
}

.merchalia-footer-newsletter input[type="email"]:focus {
	border-bottom-color: var(--wp--preset--color--ruby);
}

.merchalia-newsletter-submit {
	white-space: nowrap;
	padding: 0.75rem 1.25rem !important;
	font-size: 0.875rem !important;
}

.merchalia-newsletter-fineprint {
	font-size: 0.75rem;
	color: var(--wp--preset--color--graphite);
	opacity: 0.75;
	line-height: 1.5;
	margin: 0;
}

.merchalia-newsletter-status {
	font-size: 0.8125rem;
	font-weight: 500;
	margin: 0;
	min-height: 0;
	transition: min-height 0.18s ease-out;
}

.merchalia-newsletter-status:not(:empty) {
	min-height: 1.5rem;
	margin-top: 0.25rem;
}

.merchalia-newsletter-status[data-state="success"] {
	color: var(--wp--preset--color--near-black);
}

.merchalia-newsletter-status[data-state="error"] {
	color: #B23A3A;
}

.merchalia-footer-newsletter[data-loading="true"] .merchalia-newsletter-submit {
	opacity: 0.6;
	pointer-events: none;
}

.merchalia-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Scroll progress indicator at very top */
.merchalia-scroll-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: transparent;
	z-index: 101;
	pointer-events: none;
}

.merchalia-scroll-progress-fill {
	display: block;
	height: 100%;
	background: var(--wp--preset--color--near-black);
	transition: width 0.06s linear;
	box-shadow: 0 0 8px rgba(2, 0, 41, 0.25);
}

/* When admin bar is showing, push progress below it */
.admin-bar .merchalia-scroll-progress {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .merchalia-scroll-progress {
		top: 46px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.merchalia-scroll-progress-fill {
		transition: none;
	}
}

/* Footer link lists — clean, no bullets */
.merchalia-footer-list,
ul.merchalia-footer-list {
	list-style: none !important;
	padding-left: 0 !important;
	margin-left: 0 !important;
}

.merchalia-footer-list li {
	list-style: none !important;
}

.merchalia-footer-list a {
	color: var(--wp--preset--color--graphite);
	text-decoration: none;
	transition: color 0.18s ease-out;
}

.merchalia-footer-list a:hover {
	color: var(--wp--preset--color--near-black);
}

.merchalia-footer-social {
	display: flex;
	gap: 1rem;
	align-items: center;
}

.merchalia-footer-social a {
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1.5px solid var(--wp--preset--color--stone);
	border-radius: 50%;
	color: var(--wp--preset--color--graphite);
	transition: border-color 0.18s ease-out, color 0.18s ease-out, transform 0.18s ease-out;
}

.merchalia-footer-social a:hover {
	border-color: var(--wp--preset--color--ruby);
	color: var(--wp--preset--color--ruby);
	transform: translateY(-2px);
}

/* ─────────────────────────────────────────────────────────────────
   8. Header search form
   ───────────────────────────────────────────────────────────────── */

/* Header tools row — search toggle + cart icon */
.merchalia-header-tools {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	margin-left: 0.5rem;
}

.merchalia-header-search-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: transparent;
	border: none;
	color: var(--wp--preset--color--near-black);
	cursor: pointer;
	transition: background 0.18s ease-out, color 0.18s ease-out;
}

.merchalia-header-search-toggle:hover {
	background: rgba(2, 0, 41, 0.06);
}

.wp-site-blocks > header.is-over-hero .merchalia-header-search-toggle {
	color: var(--wp--preset--color--ivory);
}

.wp-site-blocks > header.is-over-hero .merchalia-header-search-toggle:hover {
	background: rgba(255, 255, 255, 0.12);
}

/* Search form (expandable) */
.merchalia-header-search-form {
	position: absolute;
	top: 100%;
	right: var(--wp--preset--spacing--40);
	display: flex;
	align-items: center;
	gap: 0;
	width: min(440px, calc(100vw - 2rem));
	background: var(--wp--preset--color--white);
	border: 1px solid rgba(2, 0, 41, 0.10);
	border-radius: 12px;
	padding: 0.375rem 0.375rem 0.375rem 1rem;
	box-shadow: 0 12px 32px rgba(2, 0, 41, 0.10);
	margin-top: 0.5rem;
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity 0.2s ease-out, transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
	z-index: 110;
}

.merchalia-header-search-form.is-open {
	opacity: 1;
	transform: translateY(0);
}

.merchalia-header-search-form[hidden] {
	display: none;
}

.merchalia-header-search-icon {
	display: inline-flex;
	color: var(--wp--preset--color--graphite);
	flex-shrink: 0;
}

.merchalia-header-search-form input[type="search"] {
	flex: 1;
	border: none !important;
	background: transparent !important;
	padding: 0.625rem 0.75rem !important;
	font-size: 0.9375rem !important;
	color: var(--wp--preset--color--near-black) !important;
	border-radius: 0 !important;
	min-width: 0;
}

.merchalia-header-search-form input[type="search"]::placeholder {
	color: var(--wp--preset--color--graphite);
	opacity: 0.7;
}

.merchalia-header-search-form input[type="search"]:focus {
	outline: none !important;
	border: none !important;
}

.merchalia-header-search-close {
	background: transparent;
	border: none;
	color: var(--wp--preset--color--graphite);
	cursor: pointer;
	padding: 8px;
	border-radius: 50%;
	display: inline-flex;
	transition: background 0.15s ease-out, color 0.15s ease-out;
	flex-shrink: 0;
}

.merchalia-header-search-close:hover {
	background: rgba(2, 0, 41, 0.06);
	color: var(--wp--preset--color--near-black);
}

@media (max-width: 600px) {
	.merchalia-header-search-form {
		right: 1rem;
		left: 1rem;
		width: auto;
	}
}

.merchalia-search-form {
	position: relative;
	display: flex;
	align-items: center;
	width: 280px;
	max-width: 100%;
}

.merchalia-search-icon {
	position: absolute;
	left: 0.875rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--wp--preset--color--graphite);
	display: inline-flex;
	pointer-events: none;
	transition: color 0.18s ease-out;
}

.merchalia-search-form input[type="search"] {
	width: 100%;
	padding: 0.5rem 0.875rem 0.5rem 2.5rem !important;
	font-size: 0.875rem !important;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--stone) !important;
	border-radius: 100px !important;
	color: var(--wp--preset--color--near-black);
	transition: border-color 0.18s ease-out, background-color 0.18s ease-out;
	-webkit-appearance: none;
	appearance: none;
}

.merchalia-search-form input[type="search"]::placeholder {
	color: var(--wp--preset--color--graphite);
	opacity: 0.7;
}

.merchalia-search-form input[type="search"]::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

.merchalia-search-form input[type="search"]:focus {
	border-color: var(--wp--preset--color--ruby) !important;
	background: var(--wp--preset--color--ivory);
	outline: none;
}

.merchalia-search-form:focus-within .merchalia-search-icon {
	color: var(--wp--preset--color--ruby);
}

@media (max-width: 1024px) {
	.merchalia-search-form {
		width: 200px;
	}
}

@media (max-width: 781px) {
	.merchalia-search-form {
		display: none;
	}
}

/* ─────────────────────────────────────────────────────────────────
   9. "From £X" pricing display
   ───────────────────────────────────────────────────────────────── */

.merchalia-from-price {
	display: inline-flex;
	flex-direction: column;
	gap: 0.125rem;
	color: var(--wp--preset--color--near-black);
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.1;
}

.merchalia-from-label {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--graphite);
	margin-bottom: 0.125rem;
	line-height: 1;
}

.woocommerce ul.products li.product .merchalia-from-price,
.wc-block-grid__product-price .merchalia-from-price {
	font-size: 1.25rem !important;
}

/* ─────────────────────────────────────────────────────────────────
   10. Lead-time badge (shop loop + product page)
   ───────────────────────────────────────────────────────────────── */

.merchalia-lead-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.375rem 0.875rem !important;
	margin: 0 1.5rem 1.5rem !important;
	background: rgba(2, 0, 41, 0.06);
	border: 1px solid rgba(2, 0, 41, 0.18);
	border-radius: 100px;
	color: var(--wp--preset--color--ruby) !important;
	font-size: 0.75rem !important;
	font-weight: 600 !important;
	letter-spacing: -0.005em !important;
	line-height: 1.4 !important;
	width: fit-content;
}

.merchalia-lead-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--ruby);
	display: inline-block;
	flex-shrink: 0;
	animation: merchalia-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes merchalia-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.5; transform: scale(0.85); }
}

@media (prefers-reduced-motion: reduce) {
	.merchalia-lead-dot {
		animation: none;
	}
}

/* ─────────────────────────────────────────────────────────────────
   11. Prose readability inside wide sections
   ───────────────────────────────────────────────────────────────── */

/* Long body paragraphs — cap width but FORCE left-alignment.
 * WP's constrained layout applies margin:auto to children with max-width;
 * we override to keep paragraphs flush-left within their section.
 * SCOPE: skip flex parents. The hero section is force-flex'd by us
 * (see #19 below) and excluded explicitly via override (#X) so prose-
 * cap doesn't fight the centred hero layout. */
.wp-block-group:not(.is-layout-flex) > p:not(.has-text-align-center):not(.has-text-align-right):not([style*="text-align:center"]):not([style*="text-align:right"]),
section:not(.is-layout-flex) > p:not(.has-text-align-center):not(.has-text-align-right):not([style*="text-align:center"]):not([style*="text-align:right"]) {
	max-width: 65ch;
	margin-left: 0 !important;
	margin-right: auto !important;
}

/* Hero section is force-flex'd: undo the prose-cap left-align in there
 * so subheads & paragraphs centre via the parent's align-items:center.
 * Specificity stacked with multiple class hooks to beat the 6-class
 * prose-cap rule above. Covers cream and video hero variants. */
body .wp-site-blocks section.wp-block-group.has-ivory-background-color.has-background:first-of-type > p.has-graphite-color,
body .wp-site-blocks section.wp-block-group.has-ivory-background-color.has-background:first-of-type > p:not(.has-text-align-right):not(.has-text-align-left),
body .wp-site-blocks section.wp-block-group.merchalia-hero-video:first-of-type > p.has-graphite-color,
body .wp-site-blocks section.wp-block-group.merchalia-hero-video:first-of-type > p:not(.has-text-align-right):not(.has-text-align-left) {
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Hero subhead — slightly wider for visual balance */
.wp-site-blocks main > section:first-of-type > p,
.wp-site-blocks > section:first-of-type > p {
	max-width: 720px;
}

/* Manifesto heading and prose */
section .has-near-black-background-color h2 {
	max-width: 980px;
	margin-left: 0 !important;
	margin-right: auto !important;
}

section .has-near-black-background-color > p:not(.has-text-align-center) {
	max-width: 720px;
	margin-left: 0 !important;
	margin-right: auto !important;
}

/* Subhead paragraphs after H2 — comfortable reading + left-aligned */
section h2 + p:not(.has-text-align-center):not([style*="text-align:center"]) {
	max-width: 720px;
	margin-left: 0 !important;
	margin-right: auto !important;
}

/* Headings — also force left-aligned in wide sections (overrides WP auto-center) */
section > h1:not(.has-text-align-center):not([style*="text-align:center"]),
section > h2:not(.has-text-align-center):not([style*="text-align:center"]),
section > h3:not(.has-text-align-center):not([style*="text-align:center"]) {
	margin-left: 0 !important;
	margin-right: auto !important;
}

/* Eyebrow text — never constrained, never centered (unless explicitly) */
section p[class*="has-ruby-color"][style*="text-transform:uppercase"],
section p[class*="has-ruby-color"][style*="textTransform:uppercase"] {
	max-width: none;
	margin-left: 0 !important;
}

/* Block-level content in columns — let cols control alignment, not prose rules */
.wp-block-column p,
.wp-block-column h1,
.wp-block-column h2,
.wp-block-column h3,
.wp-block-column h4,
.wp-block-column ul,
.wp-block-column ol,
.wp-block-column li {
	max-width: none;
	margin-left: 0 !important;
	margin-right: auto !important;
}

/* CTA section — centered intentionally */
section[id="contact"] > h2,
section[id="contact"] > p {
	margin-left: auto !important;
	margin-right: auto !important;
}

section[id="contact"] > p {
	max-width: 600px;
}

/* Buttons block in hero — left-aligned, not centered by layout */
section .wp-block-buttons:not([class*="is-content-justification-center"]) {
	margin-left: 0 !important;
	margin-right: auto !important;
}

/* Hero badge group — centered (parent uses flex column / align-items:center,
 * so we let auto margins resolve to centre. The earlier left-align rule was
 * removed when the hero switched to centered layout.) */
.wp-site-blocks main > section:first-of-type > .wp-block-group,
.wp-site-blocks > section:first-of-type > .wp-block-group {
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Philosopher heading optical adjustments — serif needs slightly more line-height
 * and slightly looser letter-spacing than Inter would. Cap H1 size sensibly so it
 * always wraps gracefully without overflow. */
.wp-site-blocks h1 {
	font-size: clamp(2rem, 4.5vw, 4rem) !important;
	line-height: 1.08 !important;
	overflow-wrap: break-word;
	word-wrap: break-word;
	hyphens: manual;
}

.wp-site-blocks h2 {
	overflow-wrap: break-word;
	word-wrap: break-word;
}

/* Section horizontal padding — scales with viewport for breathing room */
.wp-site-blocks > section,
.wp-site-blocks > main > section {
	padding-left: clamp(1.25rem, 4vw, 3rem) !important;
	padding-right: clamp(1.25rem, 4vw, 3rem) !important;
}

/* HERO — centered layout via flex column (cleaner, more luxury feel) */
body .wp-site-blocks > main > section:first-of-type,
body .wp-site-blocks > section:first-of-type {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	text-align: center !important;
	background: var(--wp--preset--color--white) !important;
}

body .wp-site-blocks > main > section:first-of-type > *,
body .wp-site-blocks > section:first-of-type > * {
	margin-left: 0 !important;
	margin-right: 0 !important;
	text-align: center !important;
}

/* H1 — controlled width for natural 2-line wrap */
body .wp-site-blocks > main > section:first-of-type > h1,
body .wp-site-blocks > section:first-of-type > h1 {
	max-width: 22ch;
}

/* Subhead — readable centered column */
body .wp-site-blocks > main > section:first-of-type > p,
body .wp-site-blocks > section:first-of-type > p {
	max-width: 56ch !important;
}

/* Buttons cluster centered */
body .wp-site-blocks > main > section:first-of-type .wp-block-buttons {
	justify-content: center !important;
	flex-wrap: wrap !important;
}

/* Badge group cluster centered */
body .wp-site-blocks > main > section:first-of-type > .wp-block-group {
	justify-content: center !important;
	flex-wrap: wrap !important;
	max-width: 100% !important;
}

/* Hero eyebrow — overrides the global prose-width rule that forces
 * margin-left:0; in a centered hero we need margin auto so the
 * shorter pill of text sits in the middle, not flush-left.
 * Specificity boosted with multiple class hooks to beat the
 * 4×:not() prose-cap rule above. Covers cream and video variants. */
body .wp-site-blocks section.has-ivory-background-color.has-background:first-of-type > p.has-ruby-color.has-text-color,
body .wp-site-blocks section.has-ivory-background-color.has-background:first-of-type > p.has-ruby-color.has-small-font-size,
body .wp-site-blocks section.merchalia-hero-video:first-of-type > p.has-ruby-color.has-text-color,
body .wp-site-blocks section.merchalia-hero-video:first-of-type > p.has-ruby-color.has-small-font-size,
body .wp-site-blocks section.merchalia-hero-video:first-of-type > p.has-text-color {
	margin-left: auto !important;
	margin-right: auto !important;
	max-width: max-content !important;
	text-align: center !important;
}

/* Reduce overall cream usage — only manifesto/how-it-works/CTA are dark accents.
 * Default body and most sections already white via earlier rules. */
.has-ivory-background-color {
	background: var(--wp--preset--color--white) !important;
}

/* Italic em inside Philosopher headings — keep visual weight similar */
h1 em, h2 em, h3 em {
	font-weight: inherit;
	font-style: italic;
}

/* ─────────────────────────────────────────────────────────────────
   18. Anti-orphan words — modern text-wrap rules
   ───────────────────────────────────────────────────────────────── */

h1, h2, h3, h4, h5,
.merchalia-product-card h3,
.wp-block-heading {
	text-wrap: balance;
}

p, li,
.wp-block-paragraph,
.wp-block-list {
	text-wrap: pretty;
}

/* Defensive: avoid breaking compound words like "multi-event" awkwardly */
h1, h2, h3 {
	hyphens: manual;
	word-break: normal;
}

/* ─────────────────────────────────────────────────────────────────
   19. Buttons — rounded + stronger CTA emphasis
   ───────────────────────────────────────────────────────────────── */

:root :where(.wp-element-button, .wp-block-button__link),
.wp-element-button,
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	border-radius: 10px !important;
	font-weight: 600 !important;
	letter-spacing: -0.005em !important;
	transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),
	            background-color 0.18s ease-out,
	            color 0.18s ease-out,
	            box-shadow 0.22s ease-out !important;
}

/* Primary filled buttons — strong hover with shadow */
.wp-element-button:not(.is-style-outline),
.wp-block-button:not(.is-style-outline) .wp-block-button__link {
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}

.wp-element-button:not(.is-style-outline):hover,
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	transform: translateY(-2px) !important;
	box-shadow: 0 12px 28px rgba(16, 11, 140, 0.22),
	            0 4px 8px rgba(16, 11, 140, 0.10) !important;
}

/* Outline buttons — keep border, lift slightly */
.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-outline > .wp-block-button__link {
	border-radius: 10px !important;
	border: 1.5px solid currentColor !important;
	font-weight: 600 !important;
}

.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	transform: translateY(-2px) !important;
	background: var(--wp--preset--color--ruby) !important;
	color: var(--wp--preset--color--ivory) !important;
	border-color: var(--wp--preset--color--ruby) !important;
	box-shadow: 0 12px 28px rgba(16, 11, 140, 0.20) !important;
}

/* Hero & primary CTAs — bigger presence */
@media (min-width: 782px) {
	.wp-site-blocks main > section:first-of-type .wp-block-button__link,
	.wp-site-blocks > section:first-of-type .wp-block-button__link,
	section[id="contact"] .wp-block-button__link {
		padding: 1.125rem 2.25rem !important;
		font-size: 1.0625rem !important;
		font-weight: 600 !important;
	}
}

/* Active state — gentle press */
.wp-element-button:active,
.wp-block-button__link:active {
	transform: translateY(0) !important;
	transition-duration: 0.05s !important;
	box-shadow: 0 2px 6px rgba(16, 11, 140, 0.15) !important;
}

/* ─────────────────────────────────────────────────────────────────
   20. Featured product cards — proper layout, left-aligned price, CTA
   ───────────────────────────────────────────────────────────────── */

/* Card itself — rounded corners + left-aligned everything */
.wp-block-group.has-stone-border-color {
	border-radius: 14px !important;
	overflow: hidden;
}

.wp-block-group.has-stone-border-color > * {
	margin-left: 0 !important;
	margin-right: auto !important;
	max-width: none !important;
	text-align: left !important;
}

/* Inside featured card — price column should not be centered */
.wp-block-group.has-stone-border-color .wp-block-columns,
.wp-block-group.has-stone-border-color .wp-block-column {
	margin-left: 0 !important;
	max-width: none !important;
}

.wp-block-group.has-stone-border-color .wp-block-column > * {
	margin-left: 0 !important;
	max-width: none !important;
	text-align: left !important;
}

/* Price block inside card — horizontal flex, baseline-aligned */
.merchalia-card-price {
	display: flex !important;
	align-items: baseline !important;
	gap: 0.5rem !important;
	flex-wrap: wrap !important;
	margin: 0 !important;
}

.merchalia-card-price .from {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--graphite);
}

.merchalia-card-price .amount {
	font-size: 2rem;
	font-weight: 700;
	line-height: 1;
	color: var(--wp--preset--color--near-black);
	letter-spacing: -0.02em;
	font-family: var(--wp--preset--font-family--serif);
}

.merchalia-card-price .unit {
	font-size: 0.8125rem;
	color: var(--wp--preset--color--graphite);
	font-weight: 500;
}

/* Card lead-time + CTA row */
.merchalia-card-meta {
	display: flex !important;
	align-items: center !important;
	gap: 0.5rem !important;
	flex-wrap: wrap !important;
	margin-top: 1rem !important;
}

/* Trust badges next to the lead-time pill */
.merchalia-card-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.375rem 0.75rem;
	border-radius: 100px;
	background: var(--wp--preset--color--ivory);
	border: 1px solid rgba(2, 0, 41, 0.08);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--near-black);
	white-space: nowrap;
	transition: background 0.18s ease-out, border-color 0.18s ease-out;
}

.merchalia-card-badge svg {
	flex-shrink: 0;
	color: currentColor;
}

.merchalia-card-badge-guarantee {
	background: rgba(2, 0, 41, 0.92);
	color: var(--wp--preset--color--ivory);
	border-color: transparent;
}

.merchalia-card-badge-eco {
	background: #EAF2EA;
	border-color: rgba(45, 90, 50, 0.15);
	color: #2D5A32;
}

.merchalia-card-badge-premium {
	background: #F5EFDF;
	border-color: rgba(120, 90, 30, 0.15);
	color: #6B5215;
}

.merchalia-card-meta .lead {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.375rem 0.75rem;
	border-radius: 100px;
	background: rgba(2, 0, 41, 0.06);
	border: 1px solid rgba(2, 0, 41, 0.18);
	color: var(--wp--preset--color--ruby);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: -0.005em;
}

.merchalia-card-meta .lead-dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--wp--preset--color--ruby);
	animation: merchalia-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Card CTA button — premium full-width with subtle gradient,
 * inset top highlight, animated arrow, multi-layer hover shadow.
 * The arrow "→" lives inline in the text and we shift it on hover via
 * letter-spacing + the trailing pseudo-element nudge. */
.merchalia-card-cta {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0.625rem !important;
	width: 100% !important;
	padding: 1rem 1.5rem !important;
	margin-top: 1.5rem !important;
	border-radius: 12px !important;
	background: linear-gradient(180deg,
		#0A0840 0%,
		#020029 100%) !important;
	color: var(--wp--preset--color--ivory) !important;
	text-align: center !important;
	font-family: var(--wp--preset--font-family--sans) !important;
	font-size: 0.9375rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.01em !important;
	text-decoration: none !important;
	position: relative;
	overflow: hidden;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.08),
		0 1px 0 rgba(2, 0, 41, 0.06),
		0 4px 12px rgba(2, 0, 41, 0.10) !important;
	transition:
		transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
		background 0.25s ease-out,
		box-shadow 0.25s ease-out,
		letter-spacing 0.22s ease-out !important;
}

/* Soft sweep highlight that travels left → right on hover */
.merchalia-card-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(110deg,
		transparent 0%,
		rgba(255, 255, 255, 0.10) 45%,
		rgba(255, 255, 255, 0.18) 50%,
		rgba(255, 255, 255, 0.10) 55%,
		transparent 100%);
	transform: translateX(-110%);
	transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
	pointer-events: none;
}

.merchalia-card-cta:hover {
	background: linear-gradient(180deg,
		#13104D 0%,
		#080535 100%) !important;
	transform: translateY(-2px) !important;
	letter-spacing: 0.02em !important;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.12),
		0 1px 0 rgba(2, 0, 41, 0.08),
		0 14px 30px rgba(2, 0, 41, 0.22),
		0 4px 8px rgba(2, 0, 41, 0.10) !important;
}

.merchalia-card-cta:hover::before {
	transform: translateX(110%);
}

.merchalia-card-cta:active {
	transform: translateY(0) !important;
	transition-duration: 0.06s !important;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.06),
		0 2px 6px rgba(2, 0, 41, 0.18) !important;
}

.merchalia-card-cta:focus-visible {
	outline: 2px solid var(--wp--preset--color--near-black) !important;
	outline-offset: 3px;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.10),
		0 0 0 6px rgba(2, 0, 41, 0.10),
		0 4px 12px rgba(2, 0, 41, 0.10) !important;
}

@media (prefers-reduced-motion: reduce) {
	.merchalia-card-cta,
	.merchalia-card-cta::before {
		transition-duration: 0.01ms !important;
	}
}

/* ─────────────────────────────────────────────────────────────────
   21. For agencies bullet list — cleaner with subtle "coming" badges
   ───────────────────────────────────────────────────────────────── */

.merchalia-agencies-list em {
	display: inline-block;
	margin-left: 0.5rem;
	padding: 0.125rem 0.5rem;
	font-size: 0.6875rem;
	font-weight: 600;
	font-style: normal;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	background: rgba(16, 11, 140, 0.08);
	color: var(--wp--preset--color--ruby);
	border-radius: 100px;
	vertical-align: 2px;
}

/* ─────────────────────────────────────────────────────────────────
   22. Pill badges (hero ✓ list) — also rounded + spacing fix
   ───────────────────────────────────────────────────────────────── */

p[style*="border-radius:100px"] {
	white-space: nowrap;
}

/* ─────────────────────────────────────────────────────────────────
   23. Dark section colour overrides — lavender on near-black for legibility
   ───────────────────────────────────────────────────────────────── */

/* Eyebrow / accent text inside dark sections — switch indigo deep to lavender */
.has-near-black-background-color p[class*="has-ruby-color"],
.has-near-black-background-color *[class*="has-ruby-color"] {
	color: var(--wp--preset--color--lavender) !important;
}

/* Numbers ("01", "02", "03") in dark "How it works" — lavender for visibility */
section.has-near-black-background-color p[class*="has-ruby-color"][style*="font-weight:700"] {
	color: var(--wp--preset--color--lavender) !important;
}

/* Light body text on dark — use stone-like greyish, not near-black */
.has-near-black-background-color {
	color: var(--wp--preset--color--ivory);
}

.has-near-black-background-color p:not([class*="has-ruby-color"]):not([style*="color:#"]) {
	color: var(--wp--preset--color--ivory);
}

/* Italic manifesto h2 on dark — keep ivory but warm slightly */
.has-near-black-background-color h2 {
	color: var(--wp--preset--color--ivory) !important;
}

/* Subtle subtitle below italic statement on dark */
.has-near-black-background-color p[style*="color:#C0C0C5"] {
	color: var(--wp--preset--color--lavender) !important;
	opacity: 0.85;
}

/* Eyebrow indicator removed — eyebrows render as clean uppercase text */

/* ─────────────────────────────────────────────────────────────────
   24. Stats numbers — uniform serif midnight (visual rhythm comes
   from typography, not colour rotation; lavender on cream is too
   low-contrast to function as an accent).
   ───────────────────────────────────────────────────────────────── */

.wp-block-group:not(.has-near-black-background-color) .wp-block-columns p[class*="has-ruby-color"][style*="font-weight:700"] {
	color: var(--wp--preset--color--near-black) !important;
	font-family: var(--wp--preset--font-family--serif) !important;
	font-style: italic !important;
	letter-spacing: -0.03em !important;
}

/* ─────────────────────────────────────────────────────────────────
   25. Decorative use of lavender / indigo across the site
   ───────────────────────────────────────────────────────────────── */

/* Hero pill badge first one (ruby) — keep ruby for primary trust signal */
/* Other pill badges already use stone border which we can soften with lavender */

/* "How it works" section dark — accent dots can use lavender */
.merchalia-cart-count {
	background: var(--wp--preset--color--ruby) !important;
	color: var(--wp--preset--color--ivory) !important;
}

/* Newsletter form on footer — use lavender bottom border */
.merchalia-footer-newsletter input[type="email"] {
	border-bottom: 1.5px solid var(--wp--preset--color--lavender) !important;
}

.merchalia-footer-newsletter input[type="email"]:focus {
	border-bottom-color: var(--wp--preset--color--ruby) !important;
}

/* Stone footer social icons hover — already ruby, fine */

/* For agencies card — accent decorations */
.merchalia-agencies-list em {
	background: rgba(73, 70, 166, 0.10) !important; /* indigo mid bg */
	color: var(--wp--preset--color--indigo) !important;
}

/* Subtle horizontal divider between sections — using lavender at low opacity */
section + section {
	position: relative;
}

/* Card hover — use midnight border, lift, deepen shadow */
.wp-block-group.has-stone-border-color:hover {
	border-color: var(--wp--preset--color--ruby) !important;
}

/* Featured product card — refined spacing & typography rhythm.
 * Slightly larger paddings, balanced heading→price→meta→CTA flow. */
.wp-block-columns:has(> .wp-block-column > .wp-block-group.has-stone-border-color) {
	gap: 1.25rem !important;
}

.wp-block-group.has-stone-border-color {
	transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
	            border-color 0.3s ease-out,
	            box-shadow 0.45s ease-out !important;
}

/* Eyebrow above product name — tighter tracking + warmer subhue */
.wp-block-group.has-stone-border-color > p[class*="has-ruby-color"][style*="text-transform:uppercase"] {
	font-size: 0.6875rem !important;
	letter-spacing: 0.18em !important;
	color: var(--wp--preset--color--graphite) !important;
	opacity: 0.78;
	margin-bottom: 0.375rem !important;
}

/* Product card description — relaxed line height + sm size */
.wp-block-group.has-stone-border-color > p.has-graphite-color {
	font-size: 0.875rem !important;
	line-height: 1.55 !important;
	color: #5A5560 !important;
	margin: 0.875rem 0 0 !important;
}

/* "View all 10 products →" link — pill-style anchor */
.merchalia-card-meta + a.merchalia-card-cta,
section a.merchalia-card-cta {
	letter-spacing: 0.005em !important;
}

/* Subtle arrow shift on CTA hover */
.merchalia-card-cta {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

.merchalia-card-cta:hover {
	letter-spacing: 0.015em;
}

/* Featured (center) card — rich cream + sturdier border */
.merchalia-card-featured > .wp-block-group.has-stone-border-color {
	background: var(--wp--preset--color--ivory) !important;
	border-color: var(--wp--preset--color--near-black) !important;
	border-width: 1.5px !important;
}

.merchalia-card-featured .merchalia-card-flag {
	box-shadow: 0 4px 12px rgba(2, 0, 41, 0.18);
}

/* ─────────────────────────────────────────────────────────────────
   26. Section vertical rhythm — standardised padding via CSS
   ───────────────────────────────────────────────────────────────── */

/* All non-hero sections: consistent padding */
.wp-site-blocks > main > section,
.wp-site-blocks > section {
	padding-top: clamp(3.5rem, 6vw, 5.5rem) !important;
	padding-bottom: clamp(3.5rem, 6vw, 5.5rem) !important;
}

/* Hero section: more breathing room */
.wp-site-blocks > main > section:first-of-type,
.wp-site-blocks > section:first-of-type {
	padding-top: clamp(4rem, 8vw, 7rem) !important;
	padding-bottom: clamp(4rem, 8vw, 7rem) !important;
}

/* CTA section: dramatic and roomy */
section[id="contact"] {
	padding-top: clamp(4rem, 7vw, 6rem) !important;
	padding-bottom: clamp(4rem, 7vw, 6rem) !important;
}

/* Trust strip: tighter, divider feel */
.wp-site-blocks > main > section:has(h3:first-child) {
	padding-top: clamp(2.5rem, 4vw, 3.5rem) !important;
	padding-bottom: clamp(2.5rem, 4vw, 3.5rem) !important;
}

/* ─────────────────────────────────────────────────────────────────
   27. CTA final section — bold indigo bg with inverted buttons
   ───────────────────────────────────────────────────────────────── */

section[id="contact"] {
	background: var(--wp--preset--color--ruby) !important;
}

section[id="contact"] h2,
section[id="contact"] > p {
	color: var(--wp--preset--color--ivory) !important;
}

section[id="contact"] > p {
	color: rgba(255, 255, 255, 0.85) !important;
}

/* Primary button inside CTA — invert: ivory bg, indigo text */
section[id="contact"] .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background: var(--wp--preset--color--ivory) !important;
	color: var(--wp--preset--color--ruby) !important;
}

section[id="contact"] .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	background: var(--wp--preset--color--white) !important;
	color: var(--wp--preset--color--ruby-dark) !important;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18),
	            0 4px 12px rgba(0, 0, 0, 0.10) !important;
}

/* Outline button on indigo bg — ivory border + ivory text */
section[id="contact"] .is-style-outline .wp-block-button__link,
section[id="contact"] .wp-block-button.is-style-outline > .wp-block-button__link {
	border-color: var(--wp--preset--color--ivory) !important;
	color: var(--wp--preset--color--ivory) !important;
	background: transparent !important;
}

section[id="contact"] .is-style-outline .wp-block-button__link:hover,
section[id="contact"] .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--ivory) !important;
	color: var(--wp--preset--color--ruby) !important;
	border-color: var(--wp--preset--color--ivory) !important;
}

/* ─────────────────────────────────────────────────────────────────
   28. Section backgrounds — white-dominant with cream + midnight accents
   ───────────────────────────────────────────────────────────────── */

/* Default: most sections white. Override explicit cream + midnight where set inline. */
.wp-site-blocks > main > section:not([id="contact"]):not(.has-near-black-background-color):not(.has-ivory-background-color):not(.merchalia-hero-video),
.wp-site-blocks > section:not([id="contact"]):not(.has-near-black-background-color):not(.has-ivory-background-color):not(.merchalia-hero-video) {
	background: var(--wp--preset--color--white) !important;
}

/* Body global bg → white (was cream) */
body {
	background-color: var(--wp--preset--color--white) !important;
}

/* Hero (first section, has-ivory-background) — keep cream as warm opener */
/* Sections explicitly set to ivory in front-page.html keep cream */

/* Manifesto + How it works — solid midnight (no gradient noise) */
.wp-site-blocks > main > section:nth-of-type(2),
.wp-site-blocks > section:nth-of-type(2),
section[id="how-it-works"] {
	background: var(--wp--preset--color--near-black) !important;
}

/* On indigo deep bg (how-it-works), eyebrow + numbers should be lavender */
section[id="how-it-works"] p[class*="has-ruby-color"] {
	color: var(--wp--preset--color--lavender) !important;
}

/* On dark sections — ensure h2 is ivory */
section[id="how-it-works"] h2,
.wp-site-blocks > main > section:nth-of-type(2) h2,
.wp-site-blocks > section:nth-of-type(2) h2 {
	color: var(--wp--preset--color--ivory) !important;
}

/* ─────────────────────────────────────────────────────────────────
   29. Merchalia logo — Merch (roman) + alia (italic) + dot accent
   ───────────────────────────────────────────────────────────────── */

.merchalia-logo {
	display: inline-flex;
	align-items: baseline;
	gap: 0.125rem;
	text-decoration: none !important;
	font-family: 'Philosopher', Georgia, 'Times New Roman', serif;
	font-size: 1.75rem;
	font-weight: 700;
	font-style: italic;
	letter-spacing: -0.005em;
	line-height: 1;
	color: var(--wp--preset--color--near-black);
	transition: opacity 0.18s ease-out;
	white-space: nowrap;
}

/* Subtle dot mark after the wordmark — tiny visual anchor */
.merchalia-logo::after {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--near-black);
	margin-bottom: 0.45em;
	transform: translateY(0.05em);
	transition: background 0.2s ease-out, transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.merchalia-logo:hover::after {
	transform: translateY(0.05em) scale(1.4);
}

/* On dark backgrounds the dot becomes ivory */
.has-near-black-background-color .merchalia-logo::after,
.wp-site-blocks > header.is-over-hero .merchalia-logo::after {
	background: var(--wp--preset--color--ivory);
}

.merchalia-logo:hover {
	opacity: 0.7;
}

/* Logo dot removed — logo is plain "Merch alia" */

/* ─────────────────────────────────────────────────────────────────
   Card icons — elegant line drawings (lanyard, notebook, tote)
   ───────────────────────────────────────────────────────────────── */

.merchalia-card-icon {
	width: 72px;
	height: 72px;
	margin: 0 0 2rem 0;
	color: var(--wp--preset--color--near-black);
	transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
	            color 0.3s ease-out;
	display: block;
}

.merchalia-card-icon svg {
	width: 100%;
	height: 100%;
	display: block;
	overflow: visible;
	stroke-width: 1 !important;
}

/* Card product photo — replaces icons with real product imagery */
.merchalia-card-photo {
	display: block;
	margin: -3rem -2rem 1.75rem !important;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 14px 14px 0 0;
	background: var(--wp--preset--color--white);
	max-width: none !important;
	width: calc(100% + 4rem) !important;
}

.merchalia-card-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.wp-block-group.has-stone-border-color:hover .merchalia-card-photo img {
	transform: scale(1.04);
}

.wp-block-group.has-stone-border-color:hover .merchalia-card-icon {
	transform: translateY(-3px);
	color: var(--wp--preset--color--near-black);
}

/* ─────────────────────────────────────────────────────────────────
   Luxury polish — white-dominant, generous space, subtle shadows
   ───────────────────────────────────────────────────────────────── */

/* Body & default sections — pure white background */
body,
html {
	background-color: var(--wp--preset--color--white) !important;
}

/* Override any section that's cream → white, except hero which stays cream as warm welcome */
body .wp-site-blocks > main > section:not(:first-of-type):not([id="contact"]):not(.has-near-black-background-color),
body .wp-site-blocks > section:not(:first-of-type):not([id="contact"]):not(.has-near-black-background-color) {
	background: var(--wp--preset--color--white) !important;
}

/* Featured product cards — refined luxury treatment */
.wp-block-group.has-stone-border-color {
	background: var(--wp--preset--color--white) !important;
	border: 1px solid #EAEAEA !important;
	border-radius: 16px !important;
	padding: clamp(2rem, 3vw, 3rem) !important;
	box-shadow: 0 1px 0 rgba(2, 0, 41, 0.02),
	            0 4px 12px rgba(2, 0, 41, 0.03);
	transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
	            border-color 0.3s ease-out,
	            box-shadow 0.45s ease-out;
}

.wp-block-group.has-stone-border-color:hover {
	transform: translateY(-6px);
	border-color: #DADADA !important;
	box-shadow: 0 1px 0 rgba(2, 0, 41, 0.02),
	            0 24px 48px rgba(2, 0, 41, 0.06),
	            0 8px 16px rgba(2, 0, 41, 0.04) !important;
}

/* Section padding — more generous for luxury breathing room */
body .wp-site-blocks > main > section,
body .wp-site-blocks > section {
	padding-top: clamp(4rem, 8vw, 7rem) !important;
	padding-bottom: clamp(4rem, 8vw, 7rem) !important;
}

body .wp-site-blocks > main > section:first-of-type,
body .wp-site-blocks > section:first-of-type {
	padding-top: clamp(5rem, 10vw, 9rem) !important;
	padding-bottom: clamp(5rem, 10vw, 9rem) !important;
}

/* Card title — slightly bigger, refined */
.wp-block-group.has-stone-border-color h3 {
	font-size: clamp(1.5rem, 2.2vw, 2rem) !important;
	line-height: 1.15 !important;
	letter-spacing: -0.015em !important;
	font-weight: 700 !important;
}

/* Card description — more relaxed line-height */
.wp-block-group.has-stone-border-color > p {
	line-height: 1.6 !important;
	color: #5A5560 !important;
}

/* Separator inside cards — softer, ivory tint */
.wp-block-group.has-stone-border-color .wp-block-separator {
	background-color: #EAEAEA !important;
	margin: 2rem 0 !important;
	max-width: 60px !important;
}

/* Card price — refined hierarchy */
.merchalia-card-price {
	margin-bottom: 0.5rem !important;
}

.merchalia-card-price .from {
	font-size: 0.75rem !important;
	letter-spacing: 0.15em !important;
	color: #8A858E !important;
	font-weight: 700 !important;
}

.merchalia-card-price .amount {
	font-size: clamp(2rem, 3vw, 2.5rem) !important;
	font-weight: 700 !important;
	letter-spacing: -0.02em !important;
}

.merchalia-card-price .unit {
	font-size: 0.875rem !important;
	color: #5A5560 !important;
}

/* Lead-time badge — softer */
.merchalia-card-meta .lead {
	background: #FAFAFA !important;
	border: 1px solid #EAEAEA !important;
	color: #4A4550 !important;
	padding: 0.5rem 1rem !important;
}

.merchalia-card-meta .lead-dot {
	background: var(--wp--preset--color--near-black) !important;
}

/* CTA button — full width, refined */
.merchalia-card-cta {
	margin-top: 2rem !important;
	padding: 1.125rem 1.5rem !important;
	font-size: 1rem !important;
	letter-spacing: -0.005em !important;
	border-radius: 12px !important;
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}

.merchalia-card-cta:hover {
	box-shadow: 0 12px 28px rgba(2, 0, 41, 0.18) !important;
}

/* Footer logo — slightly smaller for hierarchy */
.merchalia-logo-footer {
	font-size: 1.625rem;
}

/* Mobile */
@media (max-width: 781px) {
	.merchalia-logo {
		font-size: 1.5rem;
	}
	.merchalia-logo-footer {
		font-size: 1.375rem;
	}
}

/* On dark backgrounds (if logo ever appears there), use cream */
.has-near-black-background-color .merchalia-logo,
.has-near-black-background-color .merchalia-logo .logo-merch,
.has-near-black-background-color .merchalia-logo .logo-alia,
.has-near-black-background-color .merchalia-logo .logo-dot {
	color: var(--wp--preset--color--ivory);
	background: var(--wp--preset--color--ivory);
}

.has-near-black-background-color .merchalia-logo .logo-merch,
.has-near-black-background-color .merchalia-logo .logo-alia {
	color: var(--wp--preset--color--ivory) !important;
	background: transparent;
}

/* ─────────────────────────────────────────────────────────────────
   12. Section vertical rhythm + container polish
   ───────────────────────────────────────────────────────────────── */

/* Ensure footer columns have proper spacing on tablet/desktop */
@media (min-width: 782px) {
	.wp-site-blocks > footer .wp-block-columns {
		gap: 3rem;
	}
}

/* On mobile, footer columns stack with breathing room */
@media (max-width: 781px) {
	.wp-site-blocks > footer .wp-block-columns .wp-block-column {
		flex-basis: 100% !important;
	}

	.wp-site-blocks > footer .wp-block-columns .wp-block-column:not(:last-child) {
		margin-bottom: 2.5rem;
	}
}

/* Featured product cards — equal heights via stretch */
section .wp-block-columns:has(.has-stone-border-color) {
	align-items: stretch;
}

section .wp-block-columns:has(.has-stone-border-color) > .wp-block-column {
	display: flex;
	flex-direction: column;
}

section .wp-block-columns:has(.has-stone-border-color) > .wp-block-column > .wp-block-group {
	flex: 1;
	display: flex;
	flex-direction: column;
}

/* Hero CTAs — slightly larger on desktop for presence */
@media (min-width: 782px) {
	.wp-site-blocks main > section:first-of-type .wp-block-button__link,
	.wp-site-blocks > section:first-of-type .wp-block-button__link {
		padding: 1.125rem 2.25rem !important;
		font-size: 1.0625rem !important;
	}
}

/* ─────────────────────────────────────────────────────────────────
   13. Header actions (cart + account icons)
   ───────────────────────────────────────────────────────────────── */

.merchalia-header-actions {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	margin-left: 0.5rem;
}

.merchalia-icon-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	color: var(--wp--preset--color--near-black);
	transition: background-color 0.18s ease-out, color 0.18s ease-out, transform 0.18s ease-out;
	text-decoration: none !important;
}

.merchalia-icon-link:hover {
	background: var(--wp--preset--color--stone);
	color: var(--wp--preset--color--ruby);
	transform: translateY(-1px);
}

.merchalia-icon-link svg {
	display: block;
	transition: stroke 0.18s ease-out;
}

.merchalia-cart-link {
	position: relative;
}

.merchalia-cart-count {
	position: absolute;
	top: 4px;
	right: 4px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 9px;
	background: var(--wp--preset--color--ruby);
	color: var(--wp--preset--color--ivory);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	transform-origin: center;
	transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease-out;
}

.merchalia-cart-count.is-empty {
	transform: scale(0);
	opacity: 0;
	pointer-events: none;
}

@media (max-width: 781px) {
	.merchalia-header-actions {
		margin-left: 0;
	}
	.merchalia-icon-link {
		width: 36px;
		height: 36px;
	}
}

/* ─────────────────────────────────────────────────────────────────
   14. Navigation submenu (mega-menu style)
   ───────────────────────────────────────────────────────────────── */

.wp-block-navigation .wp-block-navigation__submenu-container {
	background: var(--wp--preset--color--ivory) !important;
	border: 1px solid var(--wp--preset--color--stone) !important;
	border-radius: 0 !important;
	box-shadow: 0 18px 40px rgba(26, 26, 26, 0.10),
	            0 4px 12px rgba(26, 26, 26, 0.06) !important;
	padding: 0.5rem 0 !important;
	margin-top: 0.75rem !important;
	min-width: 240px !important;
	z-index: 200 !important;
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.625rem 1.25rem !important;
	font-size: 0.9375rem !important;
	font-weight: 500 !important;
	letter-spacing: -0.005em !important;
	color: var(--wp--preset--color--near-black) !important;
	transition: color 0.15s ease-out, background-color 0.15s ease-out;
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--ruby) !important;
	background: rgba(16, 11, 140, 0.04);
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after {
	display: none !important;
}

.wp-block-navigation .has-child .wp-block-navigation__submenu-icon {
	margin-left: 0.25rem;
	transition: transform 0.2s ease-out;
}

.wp-block-navigation .has-child:hover .wp-block-navigation__submenu-icon,
.wp-block-navigation .has-child[aria-expanded="true"] .wp-block-navigation__submenu-icon {
	transform: rotate(180deg);
}

/* ─────────────────────────────────────────────────────────────────
   15. Breadcrumbs (shop, product, archive)
   ───────────────────────────────────────────────────────────────── */

.merchalia-breadcrumb-wrap {
	max-width: 1280px;
	margin: 0 auto;
	padding: 1.5rem var(--wp--preset--spacing--40) 0;
}

.woocommerce-breadcrumb {
	font-size: 0.8125rem !important;
	color: var(--wp--preset--color--graphite) !important;
	letter-spacing: 0.01em;
	margin-bottom: 1.5rem !important;
	font-weight: 500;
}

.woocommerce-breadcrumb a {
	color: var(--wp--preset--color--graphite) !important;
	text-decoration: none !important;
	transition: color 0.15s ease-out;
}

.woocommerce-breadcrumb a:hover {
	color: var(--wp--preset--color--ruby) !important;
}

.merchalia-breadcrumb-sep {
	color: var(--wp--preset--color--stone);
	margin: 0 0.5rem;
	font-weight: 400;
}

/* ─────────────────────────────────────────────────────────────────
   16. WC pages padding (shop / product / cart / checkout)
   ───────────────────────────────────────────────────────────────── */

.woocommerce.archive .wp-site-blocks > main,
.woocommerce-page .wp-site-blocks > main,
body.woocommerce-cart .wp-site-blocks > main,
body.woocommerce-checkout .wp-site-blocks > main {
	max-width: 1280px;
	margin: 0 auto;
	padding-left: var(--wp--preset--spacing--40);
	padding-right: var(--wp--preset--spacing--40);
}

.woocommerce.archive .woocommerce-products-header__title {
	font-family: var(--wp--preset--font-family--sans);
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.1;
	margin-top: 1rem;
}

/* Result count + ordering above grid */
.woocommerce-result-count,
.woocommerce-ordering {
	margin-bottom: 2rem !important;
}

/* ─────────────────────────────────────────────────────────────────
   17. Misc utility classes
   ───────────────────────────────────────────────────────────────── */

.merchalia-text-eyebrow {
	color: var(--wp--preset--color--ruby);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

/* ─────────────────────────────────────────────────────────────────
   Hero with looping video background — full-bleed cover, dark
   gradient overlay for text legibility, switches text to ivory.
   ───────────────────────────────────────────────────────────────── */

.merchalia-hero-video {
	position: relative;
	overflow: hidden;
	background: var(--wp--preset--color--near-black) !important;
	color: var(--wp--preset--color--ivory);
	isolation: isolate;
	min-height: 36vh;
	display: flex !important;
	flex-direction: column;
	justify-content: center;
	padding-top: clamp(2rem, 4vh, 3.5rem) !important;
	padding-bottom: clamp(2rem, 4vh, 3.5rem) !important;
	/* WP applies a default 24px margin-block to wp-site-blocks
	 * children — kill it so the hero sits flush against the header. */
	margin-top: 0 !important;
	margin-block-start: 0 !important;
}

.merchalia-hero-video-bg {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	object-fit: cover;
	object-position: center center;
	z-index: -2;
	pointer-events: none;
	will-change: transform;
}

.merchalia-hero-video-overlay {
	max-width: none !important;
	margin: 0 !important;
}

@media (max-width: 781px) {
	.merchalia-hero-video {
		min-height: 50vh;
	}
}

.merchalia-hero-video-overlay {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(180deg,
			rgba(2, 0, 41, 1.00) 0%,
			rgba(2, 0, 41, 0.85) 6%,
			rgba(2, 0, 41, 0.55) 18%,
			rgba(2, 0, 41, 0.35) 42%,
			rgba(2, 0, 41, 0.50) 75%,
			rgba(2, 0, 41, 0.75) 100%),
		radial-gradient(ellipse at center,
			rgba(2, 0, 41, 0.15) 0%,
			rgba(2, 0, 41, 0.45) 100%);
	pointer-events: none;
}

/* Override the existing hero text colors when video bg is on */
body .wp-site-blocks > main > section.merchalia-hero-video,
body .wp-site-blocks > section.merchalia-hero-video {
	background: var(--wp--preset--color--near-black) !important;
}

.merchalia-hero-video > p.has-ruby-color,
.merchalia-hero-video p.has-ruby-color.has-text-color {
	color: var(--wp--preset--color--ivory) !important;
	opacity: 0.85;
}

.merchalia-hero-video > h1,
.merchalia-hero-video h1.wp-block-heading {
	color: #FFFFFF !important;
	font-weight: 700 !important;
}

.merchalia-hero-video > h1 em,
.merchalia-hero-video h1 em {
	color: #FFFFFF !important;
}

.merchalia-hero-video > p.has-graphite-color,
.merchalia-hero-video p.has-graphite-color {
	color: rgba(250, 236, 214, 0.80) !important;
}

/* CTA buttons on video — primary stays midnight (high contrast frame),
 * outline switches to ivory border. */
.merchalia-hero-video .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background: var(--wp--preset--color--ivory) !important;
	color: var(--wp--preset--color--near-black) !important;
}

.merchalia-hero-video .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	background: #FFFFFF !important;
}

.merchalia-hero-video .wp-block-button.is-style-outline > .wp-block-button__link {
	border-color: var(--wp--preset--color--ivory) !important;
	color: var(--wp--preset--color--ivory) !important;
	background: transparent !important;
}

.merchalia-hero-video .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--ivory) !important;
	color: var(--wp--preset--color--near-black) !important;
}

/* Subtle vignette + grain texture on top of video for premium feel */
.merchalia-hero-video::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse at center, transparent 50%, rgba(2, 0, 41, 0.35) 100%);
	pointer-events: none;
	z-index: -1;
}

/* Reduced motion — pause the video */
@media (prefers-reduced-motion: reduce) {
	.merchalia-hero-video-bg {
		display: none;
	}
	.merchalia-hero-video {
		background: var(--wp--preset--color--near-black) !important;
	}
}

/* WP's is-layout-constrained applies max-width:1280px to direct
 * children. The video bg + overlay must escape that or they only
 * render up to 1280px wide leaving the bg color on the sides on
 * widescreens. */
.merchalia-hero-video > .merchalia-hero-video-bg,
.merchalia-hero-video > .merchalia-hero-video-overlay {
	max-width: none !important;
	width: 100% !important;
}

/* Hero text — stronger shadow for pure white H1 on bright video frames */
.merchalia-hero-video > h1,
.merchalia-hero-video h1.wp-block-heading {
	text-shadow: 0 2px 32px rgba(0, 0, 0, 0.55),
	             0 0 1px rgba(0, 0, 0, 0.35);
}

.merchalia-hero-video > p.has-graphite-color,
.merchalia-hero-video > p.has-ruby-color {
	text-shadow: 0 1px 16px rgba(0, 0, 0, 0.45);
}

/* Soft fade-out at the bottom of the hero so the white bestsellers
 * section below transitions smoothly out of the dark video. */
.merchalia-hero-video::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 80px;
	background: linear-gradient(to bottom,
		transparent 0%,
		rgba(2, 0, 41, 0.30) 60%,
		rgba(2, 0, 41, 0.55) 100%);
	pointer-events: none;
	z-index: 1;
}

/* ─────────────────────────────────────────────────────────────────
   Trusted-by wordmark strip — quiet typographic credibility row
   ───────────────────────────────────────────────────────────────── */

.merchalia-trusted-by {
	border-bottom: 1px solid rgba(2, 0, 41, 0.06);
}

.merchalia-trusted-by-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.875rem 1.25rem;
	max-width: 1080px;
	margin: 0 auto;
}

.merchalia-trusted-by-item {
	font-family: var(--wp--preset--font-family--serif);
	font-style: italic;
	font-weight: 600;
	font-size: clamp(1rem, 1.5vw, 1.25rem);
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--near-black);
	opacity: 0.62;
	transition: opacity 0.18s ease-out;
	white-space: nowrap;
}

.merchalia-trusted-by-item:hover {
	opacity: 1;
}

.merchalia-trusted-by-divider {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--wp--preset--color--graphite);
	opacity: 0.35;
}

@media (max-width: 600px) {
	.merchalia-trusted-by-grid {
		gap: 0.625rem 1rem;
	}
	.merchalia-trusted-by-item {
		font-size: 0.9375rem;
	}
}

/* ─────────────────────────────────────────────────────────────────
   Hero search-first layout (Disenis-pattern adapted)
   ───────────────────────────────────────────────────────────────── */

.merchalia-hero-search {
	display: flex;
	align-items: center;
	gap: 0;
	max-width: 640px;
	width: 100%;
	margin: 2rem auto 0;
	background: rgba(255, 255, 255, 0.95);
	border-radius: 14px;
	padding: 0.5rem 0.5rem 0.5rem 1.25rem;
	box-shadow: 0 12px 36px rgba(0, 0, 0, 0.18),
	            0 2px 6px rgba(0, 0, 0, 0.10);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
	            box-shadow 0.22s ease-out;
}

.merchalia-hero-search:focus-within {
	transform: translateY(-1px);
	box-shadow: 0 16px 44px rgba(0, 0, 0, 0.22),
	            0 4px 10px rgba(0, 0, 0, 0.12);
}

.merchalia-hero-search-icon {
	display: inline-flex;
	color: var(--wp--preset--color--graphite);
	flex-shrink: 0;
	margin-right: 0.625rem;
}

.merchalia-hero-search input[type="search"] {
	flex: 1;
	border: none !important;
	background: transparent !important;
	padding: 0.875rem 0 !important;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 1rem !important;
	font-weight: 500;
	color: var(--wp--preset--color--near-black) !important;
	border-radius: 0 !important;
	min-width: 0;
	letter-spacing: -0.005em;
}

.merchalia-hero-search input[type="search"]:focus {
	outline: none !important;
	box-shadow: none !important;
}

.merchalia-hero-search input[type="search"]::placeholder {
	color: var(--wp--preset--color--graphite);
	opacity: 0.7;
}

.merchalia-hero-search input[type="search"]::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

.merchalia-hero-search-submit {
	flex-shrink: 0;
	background: var(--wp--preset--color--near-black);
	color: var(--wp--preset--color--ivory);
	border: none;
	padding: 0.75rem 1.5rem;
	border-radius: 10px;
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.005em;
	cursor: pointer;
	transition: background 0.18s ease-out, transform 0.18s ease-out;
}

.merchalia-hero-search-submit:hover {
	background: #13104D;
	transform: translateY(-1px);
}

/* Quick category pills below the search */
.merchalia-hero-pills {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	margin: 1.25rem auto 0;
	max-width: 720px;
}

.merchalia-hero-pill {
	display: inline-flex;
	align-items: center;
	padding: 0.5rem 1rem;
	background: rgba(255, 255, 255, 0.10);
	border: 1px solid rgba(255, 255, 255, 0.22);
	color: var(--wp--preset--color--ivory);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: -0.005em;
	border-radius: 100px;
	text-decoration: none;
	transition: background 0.18s ease-out, border-color 0.18s ease-out, transform 0.18s ease-out;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.merchalia-hero-pill:hover {
	background: rgba(255, 255, 255, 0.20);
	border-color: rgba(255, 255, 255, 0.40);
	color: #FFFFFF !important;
	transform: translateY(-1px);
}

/* Trust line — checkmarks + dot dividers */
.merchalia-hero-trust {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.5rem 0.875rem;
	margin: 1.75rem auto 0 !important;
	font-size: 0.8125rem;
	color: rgba(250, 236, 214, 0.85);
	font-weight: 500;
	letter-spacing: 0.005em;
	max-width: 720px;
}

.merchalia-hero-trust > span {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	white-space: nowrap;
}

.merchalia-hero-trust-check {
	color: var(--wp--preset--color--ivory);
	font-weight: 700;
	font-size: 0.875rem;
}

.merchalia-hero-trust-sep {
	opacity: 0.4;
	color: var(--wp--preset--color--ivory);
}

/* Help line below trust */
.merchalia-hero-help {
	margin: 1rem auto 0 !important;
	font-size: 0.875rem;
	color: rgba(250, 236, 214, 0.78);
	text-align: center;
	letter-spacing: -0.005em;
}

.merchalia-hero-help a {
	color: var(--wp--preset--color--ivory);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: opacity 0.18s ease-out;
}

.merchalia-hero-help a:hover {
	opacity: 0.85;
}

.merchalia-hero-help-sep {
	margin: 0 0.5rem;
	opacity: 0.4;
}

@media (max-width: 600px) {
	.merchalia-hero-search {
		max-width: 100%;
		padding: 0.375rem 0.375rem 0.375rem 1rem;
	}
	.merchalia-hero-search-submit {
		padding: 0.625rem 1rem;
		font-size: 0.875rem;
	}
	.merchalia-hero-pill {
		font-size: 0.75rem;
		padding: 0.4rem 0.75rem;
	}
	.merchalia-hero-trust {
		font-size: 0.75rem;
	}
	.merchalia-hero-help {
		font-size: 0.8125rem;
	}
	.merchalia-hero-help-sep,
	.merchalia-hero-help br {
		display: block;
		height: 0.25rem;
		margin: 0;
		opacity: 0;
	}
}

/* Video pause/play accessibility control — bottom-right of hero */
.merchalia-hero-video-control {
	position: absolute;
	bottom: 1.25rem;
	right: 1.25rem;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.875rem;
	background: rgba(2, 0, 41, 0.65);
	color: var(--wp--preset--color--ivory);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 100px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	cursor: pointer;
	z-index: 2;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	transition: background 0.18s ease-out, transform 0.18s ease-out;
}

.merchalia-hero-video-control:hover {
	background: rgba(2, 0, 41, 0.85);
	transform: translateY(-1px);
}

.merchalia-hero-video-control svg {
	flex-shrink: 0;
	color: currentColor;
}

@media (max-width: 600px) {
	.merchalia-hero-video-control {
		bottom: 0.75rem;
		right: 0.75rem;
		padding: 0.4rem 0.6rem;
	}
	.merchalia-hero-video-control-label {
		display: none;
	}
}

/* Scroll indicator at the bottom of the hero */
.merchalia-hero-scroll-indicator {
	position: absolute;
	bottom: 1.5rem;
	left: 50%;
	transform: translateX(-50%);
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 0.375rem;
	color: var(--wp--preset--color--ivory);
	text-decoration: none;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	opacity: 0.85;
	z-index: 2;
	transition: opacity 0.25s ease-out;
}

.merchalia-hero-scroll-indicator:hover {
	color: var(--wp--preset--color--ivory) !important;
	opacity: 1;
}

.merchalia-hero-scroll-indicator-chevron {
	display: inline-flex;
	animation: merchalia-bounce 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes merchalia-bounce {
	0%, 100% { transform: translateY(0); opacity: 0.85; }
	50% { transform: translateY(4px); opacity: 1; }
}

@media (max-width: 600px) {
	.merchalia-hero-scroll-indicator-label {
		display: none;
	}
	.merchalia-hero-scroll-indicator {
		gap: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.merchalia-hero-scroll-indicator-chevron {
		animation: none;
	}
}

/* Stats counter — soft fade-in when number animates */
[data-merchalia-counter] {
	transition: opacity 0.3s ease-out;
}

[data-merchalia-counter="pending"] {
	opacity: 0;
}

[data-merchalia-counter="done"] {
	opacity: 1;
}

/* ─────────────────────────────────────────────────────────────────
   Toast notifications — bottom-right stack
   ───────────────────────────────────────────────────────────────── */

.merchalia-toast-container {
	position: fixed;
	bottom: clamp(1rem, 2vw, 1.5rem);
	right: clamp(1rem, 2vw, 1.5rem);
	z-index: 10000;
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	max-width: 380px;
	pointer-events: none;
}

.merchalia-toast {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	padding: 0.875rem 1rem;
	background: var(--wp--preset--color--near-black);
	color: var(--wp--preset--color--ivory);
	border-radius: 12px;
	box-shadow: 0 8px 28px rgba(2, 0, 41, 0.20),
	            0 2px 6px rgba(2, 0, 41, 0.10);
	font-size: 0.875rem;
	line-height: 1.4;
	opacity: 0;
	transform: translateY(8px) scale(0.98);
	transition: opacity 0.22s ease-out, transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
	pointer-events: auto;
	min-width: 0;
}

.merchalia-toast.is-visible {
	opacity: 1;
	transform: translateY(0) scale(1);
}

.merchalia-toast.is-leaving {
	opacity: 0;
	transform: translateY(-4px) scale(0.98);
	transition-duration: 0.18s;
}

.merchalia-toast[data-state="success"] {
	background: #1F4D2A;
}

.merchalia-toast[data-state="error"] {
	background: #6B1F1F;
}

.merchalia-toast-icon {
	display: inline-flex;
	flex-shrink: 0;
	margin-top: 1px;
	color: currentColor;
	opacity: 0.92;
}

.merchalia-toast-body {
	flex: 1;
	min-width: 0;
	word-wrap: break-word;
}

.merchalia-toast-action {
	background: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.22);
	color: var(--wp--preset--color--ivory);
	padding: 0.375rem 0.75rem;
	border-radius: 6px;
	font-family: inherit;
	font-size: 0.8125rem;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.15s ease-out;
}

.merchalia-toast-action:hover {
	background: rgba(255, 255, 255, 0.22);
}

.merchalia-toast-close {
	background: transparent;
	border: none;
	color: var(--wp--preset--color--ivory);
	opacity: 0.6;
	cursor: pointer;
	padding: 4px;
	margin: -4px -4px -4px 0;
	border-radius: 4px;
	display: inline-flex;
	flex-shrink: 0;
	transition: opacity 0.15s ease-out, background 0.15s ease-out;
}

.merchalia-toast-close:hover {
	opacity: 1;
	background: rgba(255, 255, 255, 0.12);
}

@media (prefers-reduced-motion: reduce) {
	.merchalia-toast {
		transition: opacity 0.01ms;
		transform: none;
	}
}

/* ─────────────────────────────────────────────────────────────────
   Cart drawer — slide-in panel from the right
   ───────────────────────────────────────────────────────────────── */

.merchalia-cart-scrim {
	position: fixed;
	inset: 0;
	background: rgba(2, 0, 41, 0.4);
	opacity: 0;
	visibility: hidden;
	z-index: 9998;
	transition: opacity 0.25s ease-out, visibility 0.25s linear 0.25s;
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}

.merchalia-cart-scrim.is-visible {
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
}

.merchalia-cart-drawer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(420px, 100vw);
	background: var(--wp--preset--color--ivory);
	z-index: 9999;
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
	box-shadow: -8px 0 32px rgba(2, 0, 41, 0.10);
	outline: none;
}

.merchalia-cart-drawer.is-open {
	transform: translateX(0);
}

.merchalia-cart-drawer-open {
	overflow: hidden;
}

.merchalia-cart-drawer-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.5rem 1.5rem 1.25rem;
	border-bottom: 1px solid rgba(2, 0, 41, 0.08);
	flex-shrink: 0;
}

.merchalia-cart-drawer-header h2 {
	margin: 0;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -0.015em;
	color: var(--wp--preset--color--near-black);
}

.merchalia-cart-drawer-close {
	background: transparent;
	border: none;
	color: var(--wp--preset--color--near-black);
	cursor: pointer;
	padding: 8px;
	margin: -8px;
	border-radius: 50%;
	display: inline-flex;
	transition: background 0.15s ease-out;
}

.merchalia-cart-drawer-close:hover {
	background: rgba(2, 0, 41, 0.06);
}

.merchalia-cart-drawer-body {
	flex: 1;
	overflow-y: auto;
	padding: 1.5rem;
}

.merchalia-cart-drawer-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 2rem 1rem;
	color: var(--wp--preset--color--near-black);
}

.merchalia-cart-drawer-empty-icon {
	color: var(--wp--preset--color--graphite);
	opacity: 0.5;
	margin-bottom: 1.25rem;
}

.merchalia-cart-drawer-empty-title {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 0 0 0.625rem;
}

.merchalia-cart-drawer-empty-body {
	font-size: 0.9375rem;
	color: var(--wp--preset--color--graphite);
	line-height: 1.55;
	max-width: 32ch;
	margin: 0 0 1.5rem;
}

.merchalia-cart-drawer-empty-cta {
	display: inline-block;
	padding: 0.875rem 1.5rem !important;
	font-size: 0.9375rem !important;
}

/* Cart line items list */
.merchalia-cart-items {
	list-style: none !important;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.merchalia-cart-item {
	display: flex;
	gap: 1rem;
	padding: 1rem 0;
	border-bottom: 1px solid rgba(2, 0, 41, 0.08);
}

.merchalia-cart-item:last-child {
	border-bottom: none;
}

.merchalia-cart-item-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.merchalia-cart-item-name {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: -0.005em;
	color: var(--wp--preset--color--near-black);
	margin: 0;
	line-height: 1.3;
}

.merchalia-cart-item-meta {
	font-size: 0.75rem;
	color: var(--wp--preset--color--graphite);
	margin: 0;
	line-height: 1.5;
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}

.merchalia-cart-item-lead {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	font-size: 0.6875rem;
	color: var(--wp--preset--color--near-black);
	font-weight: 600;
	letter-spacing: 0.02em;
	margin-top: 0.25rem;
}

.merchalia-cart-item-lead::before {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--wp--preset--color--near-black);
	flex-shrink: 0;
}

.merchalia-cart-item-aside {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: space-between;
	gap: 0.5rem;
	flex-shrink: 0;
}

.merchalia-cart-item-total {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: -0.015em;
	color: var(--wp--preset--color--near-black);
	white-space: nowrap;
}

.merchalia-cart-item-remove {
	background: transparent;
	border: none;
	color: var(--wp--preset--color--graphite);
	opacity: 0.5;
	cursor: pointer;
	padding: 4px;
	margin: -4px;
	border-radius: 4px;
	display: inline-flex;
	transition: opacity 0.15s ease-out, color 0.15s ease-out;
}

.merchalia-cart-item-remove:hover {
	opacity: 1;
	color: #B23A3A;
}

.merchalia-cart-drawer-footer {
	border-top: 1px solid rgba(2, 0, 41, 0.08);
	padding: 1.25rem 1.5rem 1.5rem;
	flex-shrink: 0;
	background: var(--wp--preset--color--white);
}

.merchalia-cart-drawer-subtotal {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 1rem;
}

.merchalia-cart-drawer-subtotal .label {
	font-size: 0.8125rem;
	color: var(--wp--preset--color--graphite);
	font-weight: 500;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.merchalia-cart-drawer-subtotal .amount {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--near-black);
}

.merchalia-cart-drawer-cta {
	display: block !important;
	width: 100%;
	padding: 1rem !important;
	font-size: 0.9375rem !important;
	text-align: center !important;
}

.merchalia-cart-drawer-note {
	font-size: 0.75rem;
	color: var(--wp--preset--color--graphite);
	text-align: center;
	margin: 0.75rem 0 0;
	opacity: 0.85;
}

@media (max-width: 480px) {
	.merchalia-cart-drawer {
		width: 100vw;
	}
}

@media (prefers-reduced-motion: reduce) {
	.merchalia-cart-drawer,
	.merchalia-cart-scrim {
		transition-duration: 0.01ms;
	}
}

/* ─────────────────────────────────────────────────────────────────
   Loading skeletons — shimmering placeholder blocks
   ───────────────────────────────────────────────────────────────── */

.merchalia-skeleton {
	display: block;
	background: linear-gradient(90deg,
		rgba(2, 0, 41, 0.05) 0%,
		rgba(2, 0, 41, 0.08) 50%,
		rgba(2, 0, 41, 0.05) 100%);
	background-size: 200% 100%;
	border-radius: 6px;
	animation: merchalia-shimmer 1.4s linear infinite;
	color: transparent !important;
	user-select: none;
	pointer-events: none;
}

.merchalia-skeleton-text {
	height: 0.875rem;
	margin: 0.25rem 0;
	border-radius: 4px;
}

.merchalia-skeleton-title {
	height: 1.5rem;
	width: 60%;
	margin: 0 0 0.75rem;
	border-radius: 4px;
}

.merchalia-skeleton-image {
	aspect-ratio: 1 / 1;
	width: 100%;
	border-radius: 12px;
}

.merchalia-skeleton-card {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: 1.5rem;
	background: var(--wp--preset--color--white);
	border: 1px solid #EAEAEA;
	border-radius: 14px;
}

@keyframes merchalia-shimmer {
	0% { background-position: 100% 0; }
	100% { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
	.merchalia-skeleton {
		animation: none;
		background: rgba(2, 0, 41, 0.06);
	}
}

/* ─────────────────────────────────────────────────────────────────
   Empty states — shared layout for cart, search, archives, 404
   ───────────────────────────────────────────────────────────────── */

.merchalia-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	max-width: 480px;
	margin: 4rem auto;
	padding: 3rem 1.5rem;
}

.merchalia-empty-icon {
	color: var(--wp--preset--color--graphite);
	opacity: 0.45;
	margin-bottom: 1.5rem;
}

.merchalia-empty-title {
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--near-black);
	margin: 0 0 0.75rem;
}

.merchalia-empty-body {
	font-size: 1rem;
	color: var(--wp--preset--color--graphite);
	line-height: 1.55;
	margin: 0 0 1.75rem;
}

.merchalia-empty-actions {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
	justify-content: center;
}

.merchalia-empty-suggestions {
	margin-top: 2.25rem;
	padding-top: 1.75rem;
	border-top: 1px solid rgba(2, 0, 41, 0.08);
	width: 100%;
	max-width: 360px;
}

.merchalia-empty-suggestions-label {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--graphite);
	margin: 0 0 0.875rem;
}

.merchalia-empty-suggestions ul {
	list-style: none !important;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.merchalia-empty-suggestions a {
	display: inline-block;
	color: var(--wp--preset--color--near-black);
	text-decoration: none;
	font-weight: 500;
	font-size: 0.9375rem;
	transition: color 0.15s ease-out;
}

.merchalia-empty-suggestions a:hover {
	color: var(--wp--preset--color--ruby);
	text-decoration: underline;
}

/* ─────────────────────────────────────────────────────────────────
   Cookie banner (GDPR consent) — fixed bottom on first visit
   ───────────────────────────────────────────────────────────────── */

.merchalia-cookie-banner {
	position: fixed;
	left: clamp(0.75rem, 2vw, 1.5rem);
	right: clamp(0.75rem, 2vw, 1.5rem);
	bottom: clamp(0.75rem, 2vw, 1.5rem);
	z-index: 9000;
	background: var(--wp--preset--color--near-black);
	color: var(--wp--preset--color--ivory);
	border-radius: 16px;
	box-shadow: 0 24px 60px rgba(2, 0, 41, 0.30);
	padding: 1.5rem 1.75rem;
	transform: translateY(120%);
	opacity: 0;
	transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.28s ease-out;
	max-width: 1280px;
	margin: 0 auto;
}

.merchalia-cookie-banner.is-visible {
	transform: translateY(0);
	opacity: 1;
}

.merchalia-cookie-banner-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1.25rem 1.5rem;
}

.merchalia-cookie-banner-text {
	flex: 1 1 320px;
	min-width: 0;
}

.merchalia-cookie-banner-title {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: -0.005em;
	margin: 0 0 0.375rem;
}

.merchalia-cookie-banner-desc {
	font-size: 0.875rem;
	line-height: 1.55;
	margin: 0;
	color: rgba(250, 236, 214, 0.85);
}

.merchalia-cookie-banner-link {
	color: var(--wp--preset--color--ivory);
	text-decoration: underline;
}

.merchalia-cookie-banner-actions {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	flex-shrink: 0;
	align-self: center;
}

.merchalia-cookie-banner-btn {
	font-family: inherit;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.005em;
	padding: 0.625rem 1.125rem;
	border-radius: 100px;
	cursor: pointer;
	transition: background 0.18s ease-out, color 0.18s ease-out, border-color 0.18s ease-out;
	white-space: nowrap;
	background: transparent;
}

.merchalia-cookie-banner-customise {
	border: 1px solid rgba(255, 255, 255, 0.22);
	color: var(--wp--preset--color--ivory);
}

.merchalia-cookie-banner-customise:hover {
	background: rgba(255, 255, 255, 0.10);
}

.merchalia-cookie-banner-reject {
	border: 1px solid rgba(255, 255, 255, 0.22);
	color: var(--wp--preset--color--ivory);
}

.merchalia-cookie-banner-reject:hover {
	background: rgba(255, 255, 255, 0.10);
}

.merchalia-cookie-banner-accept {
	border: 1px solid var(--wp--preset--color--ivory);
	background: var(--wp--preset--color--ivory);
	color: var(--wp--preset--color--near-black);
}

.merchalia-cookie-banner-accept:hover {
	background: #FFFFFF;
}

/* Cookie preferences panel modal */
.merchalia-cookie-panel-scrim {
	position: fixed;
	inset: 0;
	background: rgba(2, 0, 41, 0.55);
	z-index: 9100;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	opacity: 0;
	transition: opacity 0.22s ease-out;
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}

.merchalia-cookie-panel-scrim.is-open {
	opacity: 1;
}

.merchalia-cookie-panel {
	background: var(--wp--preset--color--ivory);
	border-radius: 16px;
	max-width: 540px;
	width: 100%;
	max-height: calc(100vh - 2rem);
	overflow-y: auto;
	box-shadow: 0 24px 60px rgba(2, 0, 41, 0.22);
	transform: translateY(12px) scale(0.98);
	transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.merchalia-cookie-panel-scrim.is-open .merchalia-cookie-panel {
	transform: translateY(0) scale(1);
}

.merchalia-cookie-panel-header {
	padding: 1.25rem 1.5rem;
	border-bottom: 1px solid rgba(2, 0, 41, 0.08);
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.merchalia-cookie-panel-header h2 {
	margin: 0;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.375rem;
	font-weight: 700;
	letter-spacing: -0.015em;
}

.merchalia-cookie-panel-close {
	background: transparent;
	border: none;
	color: var(--wp--preset--color--near-black);
	cursor: pointer;
	padding: 8px;
	margin: -8px;
	border-radius: 50%;
	transition: background 0.15s ease-out;
}

.merchalia-cookie-panel-close:hover { background: rgba(2, 0, 41, 0.06); }

.merchalia-cookie-panel-body {
	padding: 1rem 1.5rem;
}

.merchalia-cookie-row {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	padding: 1rem 0;
	border-bottom: 1px solid rgba(2, 0, 41, 0.08);
}

.merchalia-cookie-row:last-child { border-bottom: none; }

.merchalia-cookie-row-info { flex: 1; min-width: 0; }

.merchalia-cookie-row-name {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--wp--preset--color--near-black);
	margin: 0 0 0.25rem;
}

.merchalia-cookie-row-desc {
	font-size: 0.8125rem;
	line-height: 1.55;
	color: var(--wp--preset--color--graphite);
	margin: 0;
}

/* Toggle switch */
.merchalia-cookie-toggle {
	position: relative;
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	cursor: pointer;
}

.merchalia-cookie-toggle.is-locked { cursor: not-allowed; opacity: 0.55; }

.merchalia-cookie-toggle input { display: none; }

.merchalia-cookie-toggle-track {
	display: inline-block;
	width: 38px;
	height: 22px;
	background: rgba(2, 0, 41, 0.22);
	border-radius: 100px;
	position: relative;
	transition: background 0.2s ease-out;
}

.merchalia-cookie-toggle-thumb {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 18px;
	height: 18px;
	background: var(--wp--preset--color--ivory);
	border-radius: 50%;
	transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
	box-shadow: 0 1px 3px rgba(2, 0, 41, 0.20);
}

.merchalia-cookie-toggle input:checked ~ .merchalia-cookie-toggle-track {
	background: var(--wp--preset--color--near-black);
}

.merchalia-cookie-toggle input:checked ~ .merchalia-cookie-toggle-track .merchalia-cookie-toggle-thumb {
	transform: translateX(16px);
}

.merchalia-cookie-panel-footer {
	padding: 1rem 1.5rem 1.25rem;
	border-top: 1px solid rgba(2, 0, 41, 0.08);
	display: flex;
	justify-content: flex-end;
	gap: 0.625rem;
}

.merchalia-cookie-panel-cancel,
.merchalia-cookie-panel-save {
	font-family: inherit;
	font-size: 0.8125rem;
	font-weight: 600;
	padding: 0.625rem 1.125rem;
	border-radius: 8px;
	cursor: pointer;
	transition: background 0.15s ease-out;
}

.merchalia-cookie-panel-cancel {
	background: transparent;
	border: 1px solid rgba(2, 0, 41, 0.18);
	color: var(--wp--preset--color--near-black);
}

.merchalia-cookie-panel-cancel:hover { background: rgba(2, 0, 41, 0.04); }

.merchalia-cookie-panel-save {
	background: var(--wp--preset--color--near-black);
	border: 1px solid var(--wp--preset--color--near-black);
	color: var(--wp--preset--color--ivory);
}

.merchalia-cookie-panel-save:hover { opacity: 0.92; }

@media (max-width: 600px) {
	.merchalia-cookie-banner-actions { width: 100%; }
	.merchalia-cookie-banner-btn { flex: 1; }
}

/* ─────────────────────────────────────────────────────────────────
   Chat widget — floating CTA bottom-right
   ───────────────────────────────────────────────────────────────── */

.merchalia-chat-fab {
	position: fixed;
	right: clamp(1rem, 2vw, 1.5rem);
	bottom: clamp(1rem, 2vw, 1.5rem);
	z-index: 8500;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--wp--preset--color--near-black);
	color: var(--wp--preset--color--ivory);
	border: none;
	cursor: pointer;
	box-shadow: 0 12px 28px rgba(2, 0, 41, 0.30),
	            0 4px 8px rgba(2, 0, 41, 0.14);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.18s ease-out;
}

.merchalia-chat-fab:hover {
	transform: translateY(-2px) scale(1.04);
}

.merchalia-chat-fab.is-active {
	transform: rotate(360deg);
}

.merchalia-chat-fab.is-active .merchalia-chat-fab-icon svg {
	display: none;
}

.merchalia-chat-fab.is-active::after {
	content: "×";
	font-size: 1.75rem;
	font-weight: 300;
	line-height: 1;
}

.merchalia-chat-fab-pulse {
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	border: 2px solid var(--wp--preset--color--near-black);
	opacity: 0;
	animation: merchalia-chat-pulse 2.6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
	pointer-events: none;
}

@keyframes merchalia-chat-pulse {
	0%   { transform: scale(0.85); opacity: 0; }
	30%  { opacity: 0.55; }
	100% { transform: scale(1.55); opacity: 0; }
}

.merchalia-chat-fab.is-active .merchalia-chat-fab-pulse {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.merchalia-chat-fab-pulse { animation: none; }
}

/* Chat panel */
.merchalia-chat-panel {
	position: fixed;
	right: clamp(1rem, 2vw, 1.5rem);
	bottom: clamp(5rem, 7vw, 6rem);
	z-index: 8400;
	width: min(380px, calc(100vw - 2rem));
	max-height: min(600px, calc(100vh - 8rem));
	background: var(--wp--preset--color--ivory);
	border-radius: 16px;
	box-shadow: 0 20px 56px rgba(2, 0, 41, 0.22),
	            0 4px 12px rgba(2, 0, 41, 0.08);
	display: flex;
	flex-direction: column;
	transform: translateY(12px) scale(0.96);
	opacity: 0;
	transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s ease-out;
	overflow: hidden;
}

.merchalia-chat-panel.is-open {
	transform: translateY(0) scale(1);
	opacity: 1;
}

.merchalia-chat-header {
	background: var(--wp--preset--color--near-black);
	color: var(--wp--preset--color--ivory);
	padding: 1rem 1.125rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.merchalia-chat-status {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(250, 236, 214, 0.80);
	margin: 0 0 0.125rem;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.merchalia-chat-status-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #4FB16E;
	box-shadow: 0 0 8px rgba(79, 177, 110, 0.55);
	animation: merchalia-chat-dot-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes merchalia-chat-dot-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.55; }
}

.merchalia-chat-title {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: -0.005em;
	margin: 0;
	color: var(--wp--preset--color--ivory);
}

.merchalia-chat-close {
	background: rgba(255, 255, 255, 0.10);
	border: none;
	color: var(--wp--preset--color--ivory);
	width: 32px;
	height: 32px;
	border-radius: 50%;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s ease-out;
}

.merchalia-chat-close:hover {
	background: rgba(255, 255, 255, 0.18);
}

.merchalia-chat-body {
	flex: 1;
	overflow-y: auto;
	padding: 1rem 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	background: var(--wp--preset--color--ivory);
}

.merchalia-chat-bubble {
	max-width: 85%;
	padding: 0.625rem 0.875rem;
	border-radius: 14px;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--wp--preset--color--near-black);
	animation: merchalia-chat-bubble-in 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.merchalia-chat-bubble p { margin: 0; }
.merchalia-chat-bubble p + p { margin-top: 0.4rem; }
.merchalia-chat-bubble a { color: inherit; }

.merchalia-chat-bubble-them {
	background: var(--wp--preset--color--white);
	border-bottom-left-radius: 4px;
	align-self: flex-start;
}

.merchalia-chat-bubble-me {
	background: var(--wp--preset--color--near-black);
	color: var(--wp--preset--color--ivory);
	border-bottom-right-radius: 4px;
	align-self: flex-end;
}

@keyframes merchalia-chat-bubble-in {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: translateY(0); }
}

.merchalia-chat-quick-replies {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	margin-top: 0.625rem;
}

.merchalia-chat-quick {
	background: transparent;
	border: 1px solid rgba(2, 0, 41, 0.22);
	color: var(--wp--preset--color--near-black);
	font-family: inherit;
	font-size: 0.8125rem;
	font-weight: 500;
	padding: 0.5rem 0.75rem;
	border-radius: 100px;
	cursor: pointer;
	text-align: left;
	transition: background 0.15s ease-out, border-color 0.15s ease-out;
}

.merchalia-chat-quick:hover {
	background: var(--wp--preset--color--ivory);
	border-color: var(--wp--preset--color--near-black);
}

.merchalia-chat-form {
	display: flex;
	gap: 0.5rem;
	padding: 0.75rem 1rem;
	background: var(--wp--preset--color--white);
	border-top: 1px solid rgba(2, 0, 41, 0.08);
	align-items: flex-end;
}

.merchalia-chat-form textarea {
	flex: 1;
	font-family: inherit;
	font-size: 0.875rem;
	border: none !important;
	resize: none;
	padding: 0.5rem 0 !important;
	background: transparent !important;
	color: var(--wp--preset--color--near-black) !important;
	min-height: 36px;
	width: 100%;
}

.merchalia-chat-form textarea:focus { outline: none; }

.merchalia-chat-send {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--wp--preset--color--near-black);
	color: var(--wp--preset--color--ivory);
	border: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: transform 0.15s ease-out;
}

.merchalia-chat-send:hover { transform: scale(1.06); }

.merchalia-chat-fineprint {
	font-size: 0.6875rem;
	color: var(--wp--preset--color--graphite);
	text-align: center;
	margin: 0;
	padding: 0.5rem 1rem 0.75rem;
	background: var(--wp--preset--color--white);
}

.merchalia-chat-fineprint a {
	color: var(--wp--preset--color--near-black);
	text-decoration: none;
}

.merchalia-chat-fineprint a:hover { text-decoration: underline; }

@media (max-width: 480px) {
	.merchalia-chat-panel {
		right: 0.5rem;
		left: 0.5rem;
		width: auto;
	}
}

/* ─────────────────────────────────────────────────────────────────
   Pricing calculator widget — interactive unit/total preview
   ───────────────────────────────────────────────────────────────── */

.merchalia-pricing-calc {
	max-width: 880px;
	margin: 0 auto;
}

.merchalia-pricing-calc-inner {
	background: var(--wp--preset--color--ivory);
	border: 1px solid rgba(2, 0, 41, 0.08);
	border-radius: 16px;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

.merchalia-pricing-calc-controls {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;
}

.merchalia-pricing-calc-field {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.merchalia-pricing-calc-label {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--graphite);
}

.merchalia-pricing-calc-select {
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 500;
	padding: 0.75rem 1rem;
	background: var(--wp--preset--color--white);
	border: 1px solid rgba(2, 0, 41, 0.12);
	border-radius: 10px;
	color: var(--wp--preset--color--near-black);
	cursor: pointer;
	transition: border-color 0.18s ease-out;
}

.merchalia-pricing-calc-select:hover,
.merchalia-pricing-calc-select:focus {
	border-color: var(--wp--preset--color--near-black);
	outline: none;
}

.merchalia-pricing-calc-qty-row {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid rgba(2, 0, 41, 0.12);
	border-radius: 10px;
	background: var(--wp--preset--color--white);
	overflow: hidden;
}

.merchalia-pricing-calc-qty-btn {
	flex-shrink: 0;
	width: 44px;
	background: transparent;
	border: none;
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--wp--preset--color--near-black);
	cursor: pointer;
	transition: background 0.15s ease-out;
}

.merchalia-pricing-calc-qty-btn:hover {
	background: var(--wp--preset--color--ivory);
}

.merchalia-pricing-calc-qty {
	flex: 1;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 1rem;
	font-weight: 600;
	text-align: center;
	border: none !important;
	background: transparent !important;
	padding: 0.625rem 0.5rem !important;
	color: var(--wp--preset--color--near-black) !important;
	width: 100%;
	min-width: 0;
}

.merchalia-pricing-calc-qty:focus { outline: none; }
.merchalia-pricing-calc-qty::-webkit-outer-spin-button,
.merchalia-pricing-calc-qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.merchalia-pricing-calc-output {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	padding: 1.25rem;
	background: var(--wp--preset--color--white);
	border: 1px dashed rgba(2, 0, 41, 0.18);
	border-radius: 12px;
	position: relative;
}

.merchalia-pricing-calc-price,
.merchalia-pricing-calc-total {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	padding: 0.5rem 1rem;
}

.merchalia-pricing-calc-price {
	border-right: 1px solid rgba(2, 0, 41, 0.08);
}

.merchalia-pricing-calc-price-label {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--graphite);
}

.merchalia-pricing-calc-price-amount {
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(1.5rem, 2.5vw, 2rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--near-black);
	font-style: italic;
}

.merchalia-pricing-calc-total-amount {
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(1.5rem, 2.5vw, 2rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--near-black);
	font-style: italic;
}

.merchalia-pricing-calc-meta {
	grid-column: 1 / -1;
	margin: 0.875rem 1rem 0;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--graphite);
	border-top: 1px solid rgba(2, 0, 41, 0.06);
	padding-top: 0.875rem;
	text-align: center;
}

.merchalia-pricing-calc-cta {
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	padding: 1rem 1.5rem;
	background: var(--wp--preset--color--near-black);
	color: var(--wp--preset--color--ivory);
	border: none;
	border-radius: 10px;
	cursor: pointer;
	transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.22s ease-out;
}

.merchalia-pricing-calc-cta:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(2, 0, 41, 0.18);
}

@media (max-width: 600px) {
	.merchalia-pricing-calc-controls {
		grid-template-columns: 1fr;
	}
	.merchalia-pricing-calc-output {
		grid-template-columns: 1fr;
	}
	.merchalia-pricing-calc-price {
		border-right: none;
		border-bottom: 1px solid rgba(2, 0, 41, 0.08);
	}
}

/* ─────────────────────────────────────────────────────────────────
   Sticky add-to-cart bar — single product page
   ───────────────────────────────────────────────────────────────── */

.merchalia-sticky-buy {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 90;
	background: var(--wp--preset--color--ivory);
	border-top: 1px solid rgba(2, 0, 41, 0.08);
	box-shadow: 0 -4px 24px rgba(2, 0, 41, 0.08);
	padding: 0.875rem clamp(1rem, 3vw, 2rem);
	transform: translateY(100%);
	transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.merchalia-sticky-buy.is-visible {
	transform: translateY(0);
}

.merchalia-sticky-buy.is-near-footer {
	transform: translateY(100%);
}

.merchalia-sticky-buy-inner {
	max-width: 1280px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 1.25rem;
}

.merchalia-sticky-buy-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}

.merchalia-sticky-buy-title {
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--near-black);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.merchalia-sticky-buy-price {
	font-size: 0.8125rem;
	color: var(--wp--preset--color--graphite);
	font-weight: 500;
}

.merchalia-sticky-buy-price strong {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1rem;
	color: var(--wp--preset--color--near-black);
	letter-spacing: -0.01em;
}

.merchalia-sticky-buy-cta {
	flex-shrink: 0;
	padding: 0.875rem 1.5rem !important;
	font-size: 0.9375rem !important;
	white-space: nowrap;
}

@media (max-width: 600px) {
	.merchalia-sticky-buy {
		padding: 0.75rem 1rem;
	}
	.merchalia-sticky-buy-inner {
		gap: 0.75rem;
	}
	.merchalia-sticky-buy-cta {
		padding: 0.75rem 1.125rem !important;
		font-size: 0.875rem !important;
	}
	.merchalia-sticky-buy-price {
		font-size: 0.75rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.merchalia-sticky-buy {
		transition-duration: 0.01ms;
	}
}

/* ─────────────────────────────────────────────────────────────────
   Shop filters sidebar (archive page)
   ───────────────────────────────────────────────────────────────── */

.merchalia-shop-layout {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: 2.5rem;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 var(--wp--preset--spacing--40);
}

.merchalia-shop-filters {
	position: sticky;
	top: calc(80px + 1rem);
	align-self: start;
	max-height: calc(100vh - 80px - 2rem);
	overflow-y: auto;
}

.merchalia-shop-filters-group {
	margin-bottom: 1.75rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid rgba(2, 0, 41, 0.08);
}

.merchalia-shop-filters-group:last-child {
	border-bottom: none;
}

.merchalia-shop-filters-label {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--near-black);
	margin: 0 0 0.875rem;
}

.merchalia-shop-filters-group ul {
	list-style: none !important;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.merchalia-shop-filters-group label {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	font-size: 0.875rem;
	color: var(--wp--preset--color--graphite);
	cursor: pointer;
	transition: color 0.15s ease-out;
}

.merchalia-shop-filters-group label:hover {
	color: var(--wp--preset--color--near-black);
}

.merchalia-shop-filters-group input[type="checkbox"],
.merchalia-shop-filters-group input[type="radio"] {
	width: auto !important;
	margin: 0;
	accent-color: var(--wp--preset--color--near-black);
	flex-shrink: 0;
}

.merchalia-shop-filters-count {
	font-size: 0.75rem;
	color: var(--wp--preset--color--graphite);
	margin-left: auto;
	opacity: 0.7;
}

.merchalia-shop-filters-clear {
	background: transparent;
	border: none;
	padding: 0;
	font: inherit;
	color: var(--wp--preset--color--near-black);
	font-size: 0.8125rem;
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
	margin-top: 0.5rem;
}

@media (max-width: 781px) {
	.merchalia-shop-layout {
		grid-template-columns: 1fr;
	}
	.merchalia-shop-filters {
		position: static;
		max-height: none;
	}
}

/* ─────────────────────────────────────────────────────────────────
   Quote builder modal
   ───────────────────────────────────────────────────────────────── */

.merchalia-modal-scrim {
	position: fixed;
	inset: 0;
	background: rgba(2, 0, 41, 0.5);
	opacity: 0;
	visibility: hidden;
	z-index: 9990;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	transition: opacity 0.22s ease-out, visibility 0.22s linear 0.22s;
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}

.merchalia-modal-scrim.is-open {
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
}

.merchalia-modal {
	background: var(--wp--preset--color--ivory);
	border-radius: 16px;
	max-width: 560px;
	width: 100%;
	max-height: calc(100vh - 2rem);
	overflow-y: auto;
	box-shadow: 0 24px 60px rgba(2, 0, 41, 0.22);
	transform: translateY(12px) scale(0.98);
	transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.merchalia-modal-scrim.is-open .merchalia-modal {
	transform: translateY(0) scale(1);
}

.merchalia-modal-header {
	padding: 1.5rem 1.75rem 1.25rem;
	border-bottom: 1px solid rgba(2, 0, 41, 0.08);
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.merchalia-modal-title {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -0.015em;
	margin: 0;
}

.merchalia-modal-close {
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 8px;
	margin: -8px;
	border-radius: 50%;
	color: var(--wp--preset--color--near-black);
	transition: background 0.15s ease-out;
}

.merchalia-modal-close:hover {
	background: rgba(2, 0, 41, 0.06);
}

.merchalia-modal-body {
	padding: 1.5rem 1.75rem;
}

.merchalia-modal-footer {
	padding: 1rem 1.75rem 1.5rem;
	border-top: 1px solid rgba(2, 0, 41, 0.08);
	display: flex;
	justify-content: flex-end;
	gap: 0.75rem;
}

.merchalia-quote-row {
	display: grid;
	grid-template-columns: 1fr 80px 1fr;
	gap: 0.75rem;
	margin-bottom: 1rem;
}

.merchalia-quote-row label {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--graphite);
	display: block;
	margin-bottom: 0.375rem;
}

.merchalia-quote-tier {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: 0.625rem 0.875rem;
	background: var(--wp--preset--color--white);
	border: 1px solid #EAEAEA;
	border-radius: 8px;
	margin-bottom: 0.375rem;
	cursor: pointer;
	transition: border-color 0.15s ease-out, background 0.15s ease-out;
}

.merchalia-quote-tier:hover {
	border-color: var(--wp--preset--color--near-black);
}

.merchalia-quote-tier.is-active {
	border-color: var(--wp--preset--color--near-black);
	background: var(--wp--preset--color--ivory);
}

.merchalia-quote-tier-qty {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--wp--preset--color--near-black);
}

.merchalia-quote-tier-price {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: -0.015em;
	color: var(--wp--preset--color--near-black);
}

.merchalia-quote-intro {
	font-size: 0.9375rem;
	color: var(--wp--preset--color--graphite);
	line-height: 1.55;
	margin: 0 0 1.25rem;
}

.merchalia-quote-tier-list {
	display: flex;
	flex-direction: column;
}

.merchalia-quote-tier {
	font-family: inherit;
	cursor: pointer;
	width: 100%;
	text-align: left;
}

.merchalia-quote-summary {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding: 0.875rem 1rem;
	margin-top: 1rem;
	background: var(--wp--preset--color--ivory);
	border: 1px dashed rgba(2, 0, 41, 0.18);
	border-radius: 8px;
}

.merchalia-quote-summary .label {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--graphite);
}

.merchalia-quote-summary .value {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1rem;
	font-weight: 700;
	color: var(--wp--preset--color--near-black);
	text-align: right;
}

/* Body scroll lock when modal is open */
.merchalia-modal-open {
	overflow: hidden;
}

@media (max-width: 480px) {
	.merchalia-modal {
		max-height: 100vh;
		border-radius: 16px 16px 0 0;
		margin-top: auto;
	}
	.merchalia-modal-scrim {
		align-items: flex-end;
		padding: 0;
	}
}

/* ─────────────────────────────────────────────────────────────────
   FAQ accordion — native <details> elements with brand styling
   ───────────────────────────────────────────────────────────────── */

.merchalia-faq {
	max-width: 760px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.merchalia-faq-item {
	border-bottom: 1px solid rgba(2, 0, 41, 0.08);
	transition: background 0.18s ease-out;
}

.merchalia-faq-item:first-child {
	border-top: 1px solid rgba(2, 0, 41, 0.08);
}

.merchalia-faq-item[open] {
	background: var(--wp--preset--color--ivory);
}

.merchalia-faq-question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 1.375rem 1.25rem;
	cursor: pointer;
	list-style: none;
	font-family: var(--wp--preset--font-family--sans);
	font-size: clamp(1rem, 1.4vw, 1.125rem);
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--near-black);
	transition: color 0.18s ease-out;
	user-select: none;
}

.merchalia-faq-question::-webkit-details-marker { display: none; }
.merchalia-faq-question::marker { content: ""; }

.merchalia-faq-question:hover {
	color: var(--wp--preset--color--ruby);
}

.merchalia-faq-question-text {
	flex: 1;
	min-width: 0;
}

.merchalia-faq-icon {
	display: inline-flex;
	flex-shrink: 0;
	color: var(--wp--preset--color--graphite);
	transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.18s ease-out;
}

.merchalia-faq-item[open] .merchalia-faq-icon {
	transform: rotate(180deg);
	color: var(--wp--preset--color--near-black);
}

.merchalia-faq-answer {
	padding: 0 1.25rem 1.5rem;
	color: var(--wp--preset--color--graphite);
	font-size: 0.9375rem;
	line-height: 1.7;
	max-width: 64ch;
	animation: merchalia-faq-reveal 0.28s ease-out;
}

.merchalia-faq-answer p {
	margin: 0;
}

@keyframes merchalia-faq-reveal {
	from { opacity: 0; transform: translateY(-4px); }
	to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	.merchalia-faq-icon,
	.merchalia-faq-answer {
		animation: none;
		transition: none;
	}
}

/* ─────────────────────────────────────────────────────────────────
   Focus rings — brand-aligned, only for keyboard users (focus-visible)
   ───────────────────────────────────────────────────────────────── */

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

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--near-black);
	outline-offset: 3px;
	border-radius: 2px;
}

/* Buttons get a softer ring matching their rounded radius */
.wp-element-button:focus-visible,
.wp-block-button__link:focus-visible,
.merchalia-card-cta:focus-visible,
.merchalia-newsletter-submit:focus-visible {
	outline: 2px solid var(--wp--preset--color--near-black);
	outline-offset: 3px;
	box-shadow: 0 0 0 6px rgba(2, 0, 41, 0.10);
}

/* Inverted focus on dark backgrounds */
.has-near-black-background-color :focus-visible,
section[id="contact"] :focus-visible {
	outline-color: var(--wp--preset--color--ivory);
	box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.18);
}

/* Skip-to-content link (rendered when present) */
.skip-link.screen-reader-text:focus {
	background: var(--wp--preset--color--near-black);
	color: var(--wp--preset--color--ivory);
	padding: 0.75rem 1.25rem;
	font-weight: 600;
	z-index: 100000;
}

/* ─────────────────────────────────────────────────────────────────
   30. Featured product card — "Most ordered" emphasis
   The parent card has overflow:hidden + border-radius, so the flag
   sits INSIDE the card (top of content) rather than overlapping the
   border. Block-level + small bottom margin keeps it from the icon.
   ───────────────────────────────────────────────────────────────── */

.merchalia-card-featured > .wp-block-group.has-stone-border-color {
	background: var(--wp--preset--color--ivory) !important;
	border-color: var(--wp--preset--color--near-black) !important;
	box-shadow: 0 2px 0 rgba(2, 0, 41, 0.04),
	            0 18px 36px rgba(2, 0, 41, 0.06);
}

.merchalia-card-featured > .wp-block-group.has-stone-border-color:hover {
	border-color: var(--wp--preset--color--near-black) !important;
	box-shadow: 0 2px 0 rgba(2, 0, 41, 0.04),
	            0 28px 56px rgba(2, 0, 41, 0.10),
	            0 10px 20px rgba(2, 0, 41, 0.06) !important;
}

.merchalia-card-flag {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.4rem 0.8rem;
	margin: 0 0 1.5rem;
	background: var(--wp--preset--color--near-black);
	color: var(--wp--preset--color--ivory);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1;
	border-radius: 100px;
	width: fit-content;
}

.merchalia-card-flag::before {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--wp--preset--color--ivory);
	display: inline-block;
}

/* ─────────────────────────────────────────────────────────────────
   31. Category cards — themed SVG icons above the number
   ───────────────────────────────────────────────────────────────── */

.merchalia-cat {
	position: relative;
	padding-top: 3.25rem !important;
	transition: transform 0.25s ease-out;
}

.merchalia-cat:hover {
	transform: translateY(-2px);
}

.merchalia-cat::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 36px;
	height: 36px;
	background: no-repeat center / contain;
	opacity: 0.85;
	transition: opacity 0.25s ease-out, transform 0.25s ease-out;
}

.merchalia-cat:hover::before {
	opacity: 1;
	transform: scale(1.05);
}

/* Trade Shows — exhibition booth */
.merchalia-cat-trade-shows::before {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='none' stroke='%23020029' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M5 11h26'/><path d='M7 11v18h22V11'/><path d='M11 18h6v6h-6z'/><path d='M21 18h4'/><path d='M21 22h4'/><path d='M9 6h18l2 5H7z'/></svg>");
}

/* Conferences — speaker / microphone */
.merchalia-cat-conferences::before {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='none' stroke='%23020029' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><rect x='14' y='5' width='8' height='15' rx='4'/><path d='M9 16a9 9 0 0 0 18 0'/><line x1='18' y1='25' x2='18' y2='31'/><line x1='13' y1='31' x2='23' y2='31'/></svg>");
}

/* Awards — trophy */
.merchalia-cat-awards::before {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='none' stroke='%23020029' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M11 6h14v6a7 7 0 0 1-14 0z'/><path d='M11 8H7a3 3 0 0 0 0 6h4'/><path d='M25 8h4a3 3 0 0 1 0 6h-4'/><line x1='15' y1='22' x2='21' y2='22'/><path d='M14 30h8l-1-7h-6z'/></svg>");
}

/* Sales Kick-offs — team / 3 figures */
.merchalia-cat-sales-kickoffs::before {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='none' stroke='%23020029' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><circle cx='18' cy='11' r='4'/><path d='M11 27c0-4 3-7 7-7s7 3 7 7'/><circle cx='7' cy='14' r='3'/><path d='M2 26c0-3 2.2-5 5-5'/><circle cx='29' cy='14' r='3'/><path d='M34 26c0-3-2.2-5-5-5'/></svg>");
}

/* Brand Activations — sparkle / spark */
.merchalia-cat-brand-activations::before {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='none' stroke='%23020029' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M18 4l3 9 9 3-9 3-3 9-3-9-9-3 9-3z'/><path d='M28 21l1.5 4.5L34 27l-4.5 1.5L28 33l-1.5-4.5L22 27l4.5-1.5z'/></svg>");
}

/* Bespoke brief — keep the existing "+" character but also a custom icon at top */
.merchalia-category-bespoke {
	border-top: none !important;
	padding-top: 3.25rem !important;
}

.merchalia-category-bespoke > p:first-child {
	opacity: 0.45;
}

.merchalia-category-bespoke::before {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='none' stroke='%235A5560' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'><circle cx='18' cy='18' r='13' stroke-dasharray='3 3'/><line x1='18' y1='12' x2='18' y2='24'/><line x1='12' y1='18' x2='24' y2='18'/></svg>");
	opacity: 0.55;
}

.merchalia-category-bespoke h3 a {
	transition: color 0.2s ease-out;
}

.merchalia-category-bespoke h3 a:hover {
	color: var(--wp--preset--color--near-black) !important;
}

/* ─────────────────────────────────────────────────────────────────
   32b. Section transition tints — soft 1-pixel gradients between
   alternating cream / white / midnight backgrounds. Lives on the
   bottom edge of each section as a tiny haze.
   ───────────────────────────────────────────────────────────────── */

.wp-site-blocks > main > section,
.wp-site-blocks > section {
	position: relative;
}

/* Light → dark transition — subtle dim at the bottom of light sections
 * that precede a dark one */
.has-ivory-background-color + .has-near-black-background-color::before,
.has-white-background-color + .has-near-black-background-color::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	right: 0;
	height: 24px;
	background: linear-gradient(to bottom,
		rgba(2, 0, 41, 0.06) 0%,
		rgba(2, 0, 41, 0.02) 50%,
		transparent 100%);
	pointer-events: none;
	z-index: 1;
}

/* Dark → light transition — soft fade-up at the bottom of dark sections */
.has-near-black-background-color::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 32px;
	background: linear-gradient(to bottom,
		transparent 0%,
		rgba(2, 0, 41, 0.20) 60%,
		rgba(2, 0, 41, 0.40) 100%);
	pointer-events: none;
	z-index: 1;
}

/* Don't add the fade-down to dark CTA section (it's last full-bleed) */
section[id="contact"]::after {
	display: none;
}

/* ─────────────────────────────────────────────────────────────────
   33. Trust strip cards — single row of 4 credibility signals
   ───────────────────────────────────────────────────────────────── */

.merchalia-trust-cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	background: var(--wp--preset--color--stone);
	border: 1px solid var(--wp--preset--color--stone);
	border-radius: 12px;
	overflow: hidden;
}

.merchalia-trust-cards-row {
	grid-template-columns: repeat(4, 1fr);
	max-width: 980px;
	margin: 0 auto;
}

.merchalia-trust-card {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	padding: 1.5rem 1.25rem;
	background: var(--wp--preset--color--white);
	transition: background 0.18s ease-out;
	text-align: center;
	align-items: center;
}

.merchalia-trust-card:hover {
	background: var(--wp--preset--color--ivory);
}

.merchalia-trust-card-num {
	font-family: var(--wp--preset--font-family--serif);
	font-style: italic;
	font-size: clamp(1.5rem, 2vw, 1.875rem);
	font-weight: 700;
	letter-spacing: -0.025em;
	color: var(--wp--preset--color--near-black);
	line-height: 1;
}

.merchalia-trust-card-label {
	font-size: 0.8125rem;
	color: var(--wp--preset--color--graphite);
	font-weight: 500;
	letter-spacing: -0.005em;
	line-height: 1.4;
}

@media (max-width: 781px) {
	.merchalia-trust-cards-row {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 480px) {
	.merchalia-trust-cards-row,
	.merchalia-trust-cards {
		grid-template-columns: 1fr;
	}
}

/* ─────────────────────────────────────────────────────────────────
   34. Agencies capability grid — 5 cards in a row, last 2 are pending
   ───────────────────────────────────────────────────────────────── */

.merchalia-agencies-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 1rem;
	max-width: 1100px;
	margin: 0 auto;
}

.merchalia-agencies-card {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.5rem 1.25rem;
	background: var(--wp--preset--color--white);
	border: 1px solid #EAEAEA;
	border-radius: 12px;
	text-align: center;
	align-items: center;
	transition: transform 0.25s ease-out, border-color 0.25s ease-out, box-shadow 0.25s ease-out;
}

.merchalia-agencies-card:hover {
	transform: translateY(-2px);
	border-color: var(--wp--preset--color--near-black);
	box-shadow: 0 8px 20px rgba(2, 0, 41, 0.06);
}

.merchalia-agencies-card-title {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: -0.005em;
	color: var(--wp--preset--color--near-black);
	line-height: 1.3;
}

.merchalia-agencies-card-meta {
	font-size: 0.75rem;
	color: var(--wp--preset--color--graphite);
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 1.4;
}

.merchalia-agencies-card-meta-pending {
	display: inline-block;
	padding: 0.25rem 0.625rem;
	background: rgba(2, 0, 41, 0.06);
	border-radius: 100px;
	color: var(--wp--preset--color--near-black);
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

@media (max-width: 1024px) {
	.merchalia-agencies-grid {
		grid-template-columns: repeat(3, 1fr);
	}
	.merchalia-agencies-card:nth-child(4),
	.merchalia-agencies-card:nth-child(5) {
		grid-column: span 1;
	}
}

@media (max-width: 600px) {
	.merchalia-agencies-grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 420px) {
	.merchalia-agencies-grid {
		grid-template-columns: 1fr;
	}
}

/* ─────────────────────────────────────────────────────────────────
   35. How it works — progression connectors between numbered steps
   ───────────────────────────────────────────────────────────────── */

section[id="how-it-works"] .wp-block-columns {
	position: relative;
}

@media (min-width: 782px) {
	section[id="how-it-works"] .wp-block-column:not(:last-child)::after {
		content: "";
		position: absolute;
		top: 1.4rem;
		right: -1.5rem;
		width: 3rem;
		height: 1px;
		background: linear-gradient(to right,
			rgba(217, 217, 217, 0.4) 0%,
			rgba(217, 217, 217, 0.7) 50%,
			rgba(217, 217, 217, 0.2) 100%);
	}

	section[id="how-it-works"] .wp-block-column {
		position: relative;
	}
}

/* ─────────────────────────────────────────────────────────────────
   36. Stats — refined typography + subtle vertical dividers + tiny
   ornamental mark above each big number for visual rhythm.
   ───────────────────────────────────────────────────────────────── */

section .wp-block-columns:has(p[class*="has-ruby-color"][style*="font-weight:700"]) > .wp-block-column {
	position: relative;
	padding: 1.25rem 1.5rem;
}

@media (min-width: 782px) {
	section.has-ivory-background-color .wp-block-columns:has(p[class*="has-ruby-color"][style*="font-weight:700"]) > .wp-block-column:not(:last-child)::after {
		content: "";
		position: absolute;
		top: 1rem;
		bottom: 1rem;
		right: 0;
		width: 1px;
		background: linear-gradient(to bottom,
			rgba(2, 0, 41, 0) 0%,
			rgba(2, 0, 41, 0.14) 50%,
			rgba(2, 0, 41, 0) 100%);
	}
}

/* (Ornament dot removed — visually disconnected from the number) */

/* Sub-label below stat (medium font weight 600 paragraph) — slightly
 * stronger contrast and uppercase tracking like an eyebrow */
section .wp-block-columns:has(p[class*="has-ruby-color"][style*="font-weight:700"]) > .wp-block-column > p.has-near-black-color:not([class*="has-ruby-color"]) {
	font-size: 0.875rem !important;
	letter-spacing: 0.06em !important;
	text-transform: uppercase !important;
	font-weight: 700 !important;
	margin-top: 1rem !important;
}

/* Sub-description under the label — smaller, calmer */
section .wp-block-columns:has(p[class*="has-ruby-color"][style*="font-weight:700"]) > .wp-block-column > p.has-graphite-color {
	font-size: 0.8125rem !important;
	line-height: 1.55 !important;
	max-width: 26ch;
	color: #6E6975 !important;
}

/* ─────────────────────────────────────────────────────────────────
   32. Manifesto pull quote — short top accent line above centered h2
   ───────────────────────────────────────────────────────────────── */

.has-near-black-background-color > h2[style*="font-style:italic"] {
	position: relative;
	max-width: 32ch;
	margin-left: auto !important;
	margin-right: auto !important;
}

.has-near-black-background-color > h2[style*="font-style:italic"]::before {
	content: "";
	display: block;
	width: 48px;
	height: 2px;
	background: var(--wp--preset--color--ivory);
	margin: 0 auto 1.5rem;
	opacity: 0.5;
}

@media (max-width: 781px) {
	.has-near-black-background-color > h2[style*="font-style:italic"]::before {
		width: 36px;
		margin-bottom: 1rem;
	}
}