/*
 * Product Enquiry popup — opened from the homepage Collections section's
 * "Explore" cards (see class-sla-product-enquiry.php and homepage-
 * collections.php's data-sla-product-id hook). Scoped entirely under
 * .sla-enquiry-* / .sla-enquiry so nothing here can collide with the Shop
 * page's own .sla-quick-view-* modal or any global button/header/footer
 * style — this file is the popup's complete, self-contained visual system.
 *
 * Colors/fonts are the same --sla-* tokens every other section uses
 * (assets/css/design-tokens.css, loaded site-wide by the theme — see this
 * file's own wp_enqueue_style dependency on that handle).
 */

.sla-enquiry-overlay,
.sla-enquiry-overlay *,
.sla-enquiry-overlay *::before,
.sla-enquiry-overlay *::after {
	box-sizing: border-box;
}

.sla-enquiry-overlay {
	--sla-enquiry-gap: clamp( 1rem, 4vw, 2.5rem );
	position: fixed;
	inset: 0;
	z-index: 2500;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var( --sla-enquiry-gap );
	overflow: hidden;
	background: rgba( 5, 35, 45, 0.65 );
	-webkit-backdrop-filter: blur( 3px );
	backdrop-filter: blur( 3px );
	opacity: 0;
	pointer-events: none;
	transition: opacity 300ms ease;
}

.sla-enquiry-overlay.is-open {
	opacity: 1;
	pointer-events: auto;
}

.sla-enquiry {
	/* Popup palette — the site's own tokens (Shop/Cart variant colours). */
	--sla-eq-teal: #1f6f74;
	--sla-eq-teal-light: #2a8086;
	--sla-eq-teal-deep: #155357;
	--sla-eq-teal-tint: #e8f2f2;
	--sla-eq-rust: #9a4f40;
	--sla-eq-muted: #4e6268;
	/* Checkout field line (theme shopping.css --sla-field-line). */
	--sla-eq-line: color-mix( in srgb, var( --sla-champagne-gold ) 22%, #d9d2c3 );
	position: relative;
	width: min( 90vw, 1150px );
	min-width: min( 65vw, 100% );
	/* Always inside the viewport; only the form panel scrolls (see Layout). */
	max-height: calc( 100vh - 2 * var( --sla-enquiry-gap ) );
	max-height: calc( 100dvh - 2 * var( --sla-enquiry-gap ) );
	display: flex;
	flex-direction: column;
	background: #fffefb;
	border: 1px solid var( --sla-light-gold );
	border-radius: 18px;
	box-shadow: 0 30px 70px -20px rgba( 5, 35, 45, 0.5 ), 0 0 0 6px rgba( 255, 255, 255, 0.06 );
	overflow: hidden;
	transform: scale( 0.97 );
	opacity: 0;
	transition: transform 300ms ease, opacity 300ms ease;
}

/* Fine accent bar along the top edge: teal · gold · rust. */
.sla-enquiry::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 4;
	height: 3px;
	background: linear-gradient( 90deg, var( --sla-eq-teal ), var( --sla-champagne-gold ) 50%, var( --sla-eq-rust ) );
	pointer-events: none;
}

.sla-enquiry-overlay.is-open .sla-enquiry {
	transform: scale( 1 );
	opacity: 1;
}

.sla-enquiry__close {
	position: absolute;
	top: 0.85rem;
	right: 0.85rem;
	z-index: 5;
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: rgba( 255, 255, 255, 0.94 );
	border: 1px solid color-mix( in srgb, var( --sla-champagne-gold ) 55%, transparent );
	border-radius: 50%;
	box-shadow: 0 6px 16px -10px rgba( 6, 47, 58, 0.6 );
	color: var( --sla-peacock-navy );
	cursor: pointer;
	transition: background-color 220ms ease, border-color 220ms ease, color 220ms ease, box-shadow 220ms ease;
}

.sla-enquiry__close svg {
	width: 15px;
	height: 15px;
	transition: transform 300ms ease;
}

.sla-enquiry__close:hover,
.sla-enquiry__close:focus-visible {
	background: var( --sla-peacock-navy );
	border-color: var( --sla-champagne-gold );
	color: var( --sla-ivory );
}

.sla-enquiry__close:hover svg,
.sla-enquiry__close:focus-visible svg {
	transform: rotate( 90deg );
}

.sla-enquiry__close:focus-visible {
	outline: 2px solid var( --sla-champagne-gold );
	outline-offset: 3px;
}

/* The body never scrolls as a whole: it hands its bounded height down to
 * the layout, whose form panel (.sla-enquiry__info) is the one scroller. */
.sla-enquiry__body {
	position: relative;
	z-index: 1;
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

/* Loading / error messages are short, but may still scroll on tiny screens. */
.sla-enquiry__body > .sla-enquiry__status {
	overflow-y: auto;
}

/* -----------------------------------------------------------------------
 * Loading / error states — shown in place of the full layout below while
 * the product payload is being fetched (see product-enquiry.js).
 * --------------------------------------------------------------------- */
.sla-enquiry__status {
	padding: 4rem 2rem;
	text-align: center;
	font-family: var( --sla-font-body );
	color: var( --sla-peacock-navy );
}

.sla-enquiry__retry {
	margin-top: 1rem;
	padding: 0.6rem 1.4rem;
	font-family: var( --sla-font-body );
	font-size: 0.9rem;
	color: var( --sla-peacock-navy );
	background: transparent;
	border: 1px solid var( --sla-champagne-gold );
	border-radius: 999px;
	cursor: pointer;
}

.sla-enquiry__retry:hover,
.sla-enquiry__retry:focus-visible {
	background: var( --sla-warm-cream );
}

/* Skeleton — only used when a product's data was not embedded in the page
 * and has to be fetched: the real layout's own boxes (same classes, so the
 * same size) with quiet placeholder blocks in place of the content. */
.sla-enquiry__skeleton {
	display: block;
	background: var( --sla-warm-cream );
	border-radius: 6px;
	animation: sla-enquiry-pulse 1.4s ease-in-out infinite;
}

.sla-enquiry__skeleton-line {
	height: 0.9rem;
	margin: 0 0 0.9rem;
}

.sla-enquiry__skeleton-line.is-title {
	width: 60%;
	height: 1.6rem;
	margin-bottom: 1.2rem;
}

.sla-enquiry__skeleton-line.is-short {
	width: 40%;
}

@keyframes sla-enquiry-pulse {
	50% {
		opacity: 0.55;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.sla-enquiry__skeleton {
		animation: none;
	}
}

/* -----------------------------------------------------------------------
 * Layout — desktop two-column (gallery | info+form), mobile single column
 * in the exact stacked order the brief specifies (gallery, name,
 * description, price, form) — see the breakpoint below.
 * --------------------------------------------------------------------- */
.sla-enquiry__layout {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

/* Image panel: never scrolls, never adds height of its own. */
.sla-enquiry__gallery {
	flex: 0 0 auto;
	overflow: hidden;
	padding: 1.5rem 1.5rem 0;
}

.sla-enquiry__main {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	max-height: 34vh;
	max-height: 34dvh;
	border-radius: 10px;
	overflow: hidden;
	background: var( --sla-warm-cream );
	border: 1px solid var( --sla-light-gold );
}

/* Two classes: outranks WooCommerce's `.woocommerce img { height: auto }` on product pages. */
.sla-enquiry__main .sla-enquiry__main-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 1;
	transition: opacity 200ms ease;
}

.sla-enquiry__main .sla-enquiry__main-img.is-fading {
	opacity: 0;
}

.sla-enquiry__thumbs {
	display: flex;
	gap: 0.6rem;
	margin-top: 0.75rem;
	overflow-x: auto;
	padding-bottom: 0.25rem;
}

.sla-enquiry__thumb {
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	padding: 0;
	border-radius: 8px;
	overflow: hidden;
	background: var( --sla-warm-cream );
	border: 2px solid transparent;
	cursor: pointer;
	transition: border-color 200ms ease;
}

.sla-enquiry__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sla-enquiry__thumb.is-active,
.sla-enquiry__thumb:hover,
.sla-enquiry__thumb:focus-visible {
	border-color: var( --sla-champagne-gold );
}

.sla-enquiry__thumb:focus-visible {
	outline: 2px solid var( --sla-peacock-navy );
	outline-offset: 1px;
}

/* Form panel: the popup's only scroll container. */
.sla-enquiry__info {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: var( --sla-light-gold ) transparent;
	padding: 1.75rem 1.75rem 2rem;
}

/* -----------------------------------------------------------------------
 * Product title block (top of the form panel).
 * --------------------------------------------------------------------- */
.sla-enquiry__name {
	font-family: var( --sla-font-display );
	font-weight: 700;
	font-size: clamp( 1.6rem, 1.3rem + 1vw, 1.9rem );
	line-height: 1.12;
	color: var( --sla-peacock-navy );
	margin: 0 3rem 0.45rem 0;
}

.sla-enquiry__desc {
	font-family: var( --sla-font-body );
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var( --sla-eq-muted );
	margin: 0 0 0.85rem;
}

.sla-enquiry__price {
	display: inline-flex;
	align-items: baseline;
	gap: 0.4rem;
	font-family: var( --sla-font-body );
	font-size: 1.125rem;
	font-weight: 800;
	color: var( --sla-peacock-navy );
	margin: 0 0 1rem;
	padding: 0.3rem 0.8rem;
	background: var( --sla-eq-teal-tint );
	border-radius: 999px;
}

.sla-enquiry__price del {
	opacity: 0.55;
	font-weight: 500;
}

.sla-enquiry__price ins {
	text-decoration: none;
	color: var( --sla-wine );
}

/* The form header below carries the ornament, so the older divider rests. */
.sla-enquiry__divider {
	display: none;
}

/* -----------------------------------------------------------------------
 * Form header: eyebrow · product-specific line · lotus ornament.
 * --------------------------------------------------------------------- */
.sla-enquiry__form-head {
	position: relative;
	margin: 0 0 1.25rem;
	padding: 1rem 1.1rem 0.25rem;
	border-top: 1px solid var( --sla-eq-line );
	background: linear-gradient( 180deg, color-mix( in srgb, var( --sla-gold-soft ) 38%, transparent ), transparent 85% );
	border-radius: 0 0 14px 14px;
	text-align: center;
}

.sla-enquiry__form-head::before {
	content: '';
	position: absolute;
	top: -1px;
	left: 50%;
	width: 72px;
	height: 2px;
	background: linear-gradient( 90deg, var( --sla-eq-teal ), var( --sla-champagne-gold ), var( --sla-eq-rust ) );
	transform: translateX( -50% );
}

.sla-enquiry__form-heading {
	margin: 0 0 0.35rem;
	font-family: var( --sla-font-body );
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.22em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var( --sla-eq-rust );
}

.sla-enquiry__form-intro {
	margin: 0;
	font-family: var( --sla-font-display );
	font-size: clamp( 1.15rem, 1.05rem + 0.4vw, 1.35rem );
	font-style: italic;
	font-weight: 600;
	line-height: 1.35;
	color: var( --sla-peacock-navy );
}

.sla-enquiry__ornament {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	margin: 0.7rem auto 0;
	color: var( --sla-champagne-gold );
}

.sla-enquiry__ornament i {
	display: block;
	width: 3.25rem;
	height: 1px;
	background: linear-gradient( 90deg, transparent, var( --sla-champagne-gold ) );
}

.sla-enquiry__ornament i:last-child {
	background: linear-gradient( 90deg, var( --sla-champagne-gold ), transparent );
}

.sla-enquiry__ornament-mark {
	width: 18px;
	height: 18px;
}

/* -----------------------------------------------------------------------
 * Fields — the Checkout field language (white, thin warm-gold line,
 * 10px radius, inline line icon), with a peacock-teal focus glow.
 * --------------------------------------------------------------------- */
.sla-enquiry__form {
	display: flex;
	flex-direction: column;
	gap: 0.95rem;
	container: sla-enquiry-form / inline-size;
}

.sla-enquiry__row {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	gap: 0.95rem;
}

@container sla-enquiry-form ( min-width: 470px ) {
	.sla-enquiry__row {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

.sla-enquiry__field {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	min-width: 0;
}

.sla-enquiry__field-label {
	font-family: var( --sla-font-body );
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var( --sla-peacock-navy );
}

.sla-enquiry__field-label .sla-enquiry__optional {
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: none;
	color: var( --sla-eq-muted );
	opacity: 0.8;
}

.sla-enquiry__control {
	position: relative;
}

.sla-enquiry__field-icon {
	position: absolute;
	top: 50%;
	left: 0.95rem;
	width: 18px;
	height: 18px;
	color: var( --sla-antique-gold );
	transform: translateY( -50% );
	pointer-events: none;
	transition: color 200ms ease;
}

.sla-enquiry__field[data-field='message'] .sla-enquiry__field-icon {
	top: 0.95rem;
	transform: none;
}

.sla-enquiry__field input,
.sla-enquiry__field textarea {
	display: block;
	width: 100%;
	min-height: 52px;
	margin: 0;
	padding: 0.75rem 1rem 0.75rem 2.85rem;
	font: 600 0.95rem/1.35 var( --sla-font-body );
	color: var( --sla-peacock-navy );
	background: #fff;
	border: 1px solid var( --sla-eq-line );
	border-radius: 10px;
	box-shadow: none;
	transition: border-color 200ms ease, box-shadow 200ms ease, background-color 200ms ease;
}

.sla-enquiry__field textarea {
	min-height: 118px;
	max-height: 260px;
	padding-top: 0.85rem;
	line-height: 1.55;
	resize: vertical;
}

.sla-enquiry__field input::placeholder,
.sla-enquiry__field textarea::placeholder {
	font-weight: 500;
	color: color-mix( in srgb, var( --sla-eq-muted ) 62%, #fff );
	opacity: 1;
}

.sla-enquiry__field input:hover:not( [readonly] ),
.sla-enquiry__field textarea:hover {
	border-color: color-mix( in srgb, var( --sla-champagne-gold ) 45%, #d9d2c3 );
}

/* Focus outranks the hover rule above, so a hovered field still shows it. */
.sla-enquiry__field input:focus:not( [readonly] ),
.sla-enquiry__field textarea:focus:not( [readonly] ) {
	outline: none;
	border-color: var( --sla-eq-teal );
	box-shadow: 0 0 0 3px color-mix( in srgb, var( --sla-eq-teal ) 16%, transparent );
}

.sla-enquiry__field:focus-within .sla-enquiry__field-icon {
	color: var( --sla-eq-teal );
}

.sla-enquiry__field.has-error input,
.sla-enquiry__field.has-error textarea {
	border-color: var( --sla-wine );
	box-shadow: 0 0 0 3px color-mix( in srgb, var( --sla-wine ) 10%, transparent );
}

.sla-enquiry__field.has-error .sla-enquiry__field-icon {
	color: var( --sla-wine );
}

.sla-enquiry__field-error {
	display: none;
	font-family: var( --sla-font-body );
	font-size: 0.78rem;
	font-weight: 600;
	color: var( --sla-wine );
}

.sla-enquiry__field.has-error .sla-enquiry__field-error {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.sla-enquiry__field.has-error .sla-enquiry__field-error::before {
	content: '';
	flex: 0 0 auto;
	width: 5px;
	height: 5px;
	background: currentColor;
	transform: rotate( 45deg );
}

/* PRODUCT — pre-filled and read-only: a tinted, dashed "selected piece"
 * plate with a small badge, clearly not an empty input to type into. */
.sla-enquiry__field--product .sla-enquiry__control {
	border-radius: 10px;
	background:
		linear-gradient( 100deg, var( --sla-eq-teal-tint ), color-mix( in srgb, var( --sla-gold-soft ) 45%, #fff ) );
}

.sla-enquiry__field--product input[readonly] {
	padding-right: 8.5rem;
	font-family: var( --sla-font-display );
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	color: var( --sla-peacock-navy );
	background: transparent;
	border: 1px dashed color-mix( in srgb, var( --sla-champagne-gold ) 75%, transparent );
	text-overflow: ellipsis;
	cursor: default;
}

.sla-enquiry__field--product input[readonly]:focus {
	border-color: var( --sla-champagne-gold );
	box-shadow: none;
}

.sla-enquiry__field--product .sla-enquiry__field-icon {
	color: var( --sla-champagne-gold );
}

.sla-enquiry__auto {
	position: absolute;
	top: 50%;
	right: 0.6rem;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.28rem 0.6rem;
	border-radius: 999px;
	background: #fff;
	border: 1px solid color-mix( in srgb, var( --sla-eq-teal ) 25%, transparent );
	font-family: var( --sla-font-body );
	font-size: 0.62rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var( --sla-eq-teal );
	transform: translateY( -50% );
	pointer-events: none;
}

.sla-enquiry__auto::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var( --sla-emerald );
}

/* Honeypot — kept off-screen rather than display:none so it remains
 * still present/focusable in markup order for basic bots that fill every
 * field blindly (see class-sla-product-enquiry.php's honeypot check). */
.sla-enquiry__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* -----------------------------------------------------------------------
 * Reassurance row — three compact badges above the button.
 * --------------------------------------------------------------------- */
.sla-enquiry__trust {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem 1.1rem;
	margin: 0.1rem 0 0;
	padding: 0.7rem 0.85rem;
	list-style: none;
	border: 1px solid color-mix( in srgb, var( --sla-eq-line ) 70%, transparent );
	border-radius: 12px;
	background: color-mix( in srgb, var( --sla-ivory ) 70%, #fff );
}

.sla-enquiry__trust-item {
	--sla-eq-chip: var( --sla-eq-teal );
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-family: var( --sla-font-body );
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var( --sla-peacock-navy );
	white-space: nowrap;
}

.sla-enquiry__trust-item.is-rust {
	--sla-eq-chip: var( --sla-eq-rust );
}

.sla-enquiry__trust-item.is-green {
	--sla-eq-chip: var( --sla-emerald );
}

.sla-enquiry__trust-icon {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	padding: 5px;
	border-radius: 50%;
	color: var( --sla-eq-chip );
	background: color-mix( in srgb, var( --sla-eq-chip ) 12%, #fff );
	box-shadow: inset 0 0 0 1px color-mix( in srgb, var( --sla-eq-chip ) 22%, transparent );
}

/* -----------------------------------------------------------------------
 * SEND ENQUIRY — the Cart page's primary CTA recipe (theme shopping.css
 * `.sla-btn-primary` / Checkout `#place_order`): 58px, 12px radius, 1px
 * champagne-gold edge with the double inset ring, uppercase 0.16em body
 * type, deep glow shadow, 1px hover lift, light-gold icon nudging right on
 * hover. Colour: the palette's peacock teal (Shop variant 5), so it reads
 * as its own action beside the navy Cart CTA and maroon Place Order.
 * Shine: one quiet sweep shortly after the form appears, then only on
 * hover/focus — never a continuous loop.
 * --------------------------------------------------------------------- */
.sla-enquiry__submit {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.7rem;
	width: 100%;
	min-height: 58px;
	margin: 0;
	padding: 0.9rem 1.25rem;
	overflow: hidden;
	background: linear-gradient( 180deg, var( --sla-eq-teal-light ) 0%, var( --sla-eq-teal ) 55%, var( --sla-eq-teal-deep ) 100% );
	border: 1px solid var( --sla-champagne-gold );
	border-radius: 12px;
	box-shadow:
		inset 0 0 0 3px var( --sla-eq-teal ),
		inset 0 0 0 4px color-mix( in srgb, var( --sla-champagne-gold ) 45%, transparent ),
		0 14px 26px -18px rgba( 6, 47, 58, 0.75 );
	color: var( --sla-ivory );
	font-family: var( --sla-font-body );
	font-size: 0.9rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	line-height: 1.2;
	text-align: center;
	text-transform: uppercase;
	text-shadow: 0 1px 0 rgba( 0, 0, 0, 0.18 );
	cursor: pointer;
	transition: transform 220ms ease, box-shadow 220ms ease, filter 220ms ease;
}

.sla-enquiry__submit::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	width: 40%;
	background: linear-gradient( 100deg, rgba( 255, 255, 255, 0 ) 0%, rgba( 255, 255, 255, 0.08 ) 30%, rgba( 255, 255, 255, 0.28 ) 50%, rgba( 255, 255, 255, 0.08 ) 70%, rgba( 255, 255, 255, 0 ) 100% );
	transform: translateX( -130% ) skewX( -18deg );
	pointer-events: none;
	animation: sla-enquiry-sheen 1.1s cubic-bezier( 0.45, 0, 0.25, 1 ) 0.9s 1 both;
}

@keyframes sla-enquiry-sheen {
	from {
		transform: translateX( -130% ) skewX( -18deg );
	}

	to {
		transform: translateX( 360% ) skewX( -18deg );
	}
}

@keyframes sla-enquiry-sheen-hover {
	from {
		transform: translateX( -130% ) skewX( -18deg );
	}

	to {
		transform: translateX( 360% ) skewX( -18deg );
	}
}

.sla-enquiry__submit-label {
	position: relative;
}

.sla-enquiry__submit-arrow {
	flex: 0 0 auto;
	width: 1.25rem;
	height: 1.25rem;
	color: var( --sla-light-gold );
	transition: transform 220ms ease;
}

.sla-enquiry__submit-spinner {
	display: none;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	border: 2px solid color-mix( in srgb, var( --sla-light-gold ) 35%, transparent );
	border-top-color: var( --sla-light-gold );
	border-radius: 50%;
	animation: sla-enquiry-spin 700ms linear infinite;
}

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

@media ( hover: hover ) {
	.sla-enquiry__submit:not( :disabled ):hover {
		background: linear-gradient( 180deg, #32898f 0%, #23787d 55%, var( --sla-eq-teal-deep ) 100% );
		color: #fff;
		transform: translateY( -1px );
		box-shadow:
			inset 0 0 0 3px #23787d,
			inset 0 0 0 4px color-mix( in srgb, var( --sla-champagne-gold ) 70%, transparent ),
			0 18px 30px -18px rgba( 6, 47, 58, 0.85 );
	}

	.sla-enquiry__submit:not( :disabled ):hover::before {
		animation: sla-enquiry-sheen-hover 850ms cubic-bezier( 0.45, 0, 0.25, 1 ) 1;
	}

	.sla-enquiry__submit:not( :disabled ):hover .sla-enquiry__submit-arrow {
		transform: translateX( 3px );
	}
}

.sla-enquiry__submit:focus-visible {
	outline: 2px solid var( --sla-champagne-gold );
	outline-offset: 3px;
}

.sla-enquiry__submit:not( :disabled ):focus-visible::before {
	animation: sla-enquiry-sheen-hover 850ms cubic-bezier( 0.45, 0, 0.25, 1 ) 1;
}

.sla-enquiry__submit:not( :disabled ):active {
	transform: translateY( 0 );
	filter: brightness( 0.96 );
	box-shadow:
		inset 0 0 0 3px var( --sla-eq-teal-deep ),
		inset 0 0 0 4px color-mix( in srgb, var( --sla-champagne-gold ) 55%, transparent ),
		0 8px 16px -14px rgba( 6, 47, 58, 0.8 );
}

/* Sending (product-enquiry.js disables the button and sets aria-busy). */
.sla-enquiry__submit:disabled {
	cursor: default;
	filter: saturate( 0.85 );
	opacity: 0.88;
}

.sla-enquiry__submit[aria-busy='true'] {
	cursor: progress;
}

.sla-enquiry__submit[aria-busy='true'] .sla-enquiry__submit-arrow {
	display: none;
}

.sla-enquiry__submit[aria-busy='true'] .sla-enquiry__submit-spinner {
	display: inline-block;
}

.sla-enquiry__form-error {
	margin: 0;
	padding: 0.65rem 0.85rem;
	border-left: 3px solid var( --sla-wine );
	border-radius: 0 8px 8px 0;
	background: color-mix( in srgb, var( --sla-wine ) 7%, #fff );
	font-family: var( --sla-font-body );
	font-size: 0.85rem;
	font-weight: 600;
	color: var( --sla-wine );
}

.sla-enquiry__form-error[hidden] {
	display: none;
}

/* -----------------------------------------------------------------------
 * Success state — replaces only .sla-enquiry__form-wrap's contents, so the
 * product name/price above stay visible (see product-enquiry.js).
 * --------------------------------------------------------------------- */
.sla-enquiry__success {
	position: relative;
	margin-top: 0.5rem;
	padding: 2rem 1.25rem 1.75rem;
	text-align: center;
	border: 1px solid var( --sla-eq-line );
	border-radius: 16px;
	background: linear-gradient( 180deg, var( --sla-eq-teal-tint ), #fff 70% );
}

.sla-enquiry__success-icon {
	width: 54px;
	height: 54px;
	margin: 0 auto 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: linear-gradient( 180deg, var( --sla-eq-teal-light ), var( --sla-eq-teal-deep ) );
	box-shadow: 0 0 0 4px #fff, 0 0 0 5px var( --sla-champagne-gold ), 0 12px 24px -14px rgba( 6, 47, 58, 0.8 );
	color: var( --sla-ivory );
}

.sla-enquiry__success-icon svg {
	width: 24px;
	height: 24px;
}

.sla-enquiry__success-title {
	font-family: var( --sla-font-display );
	font-weight: 700;
	font-size: 1.45rem;
	color: var( --sla-peacock-navy );
	margin: 0 0 0.45rem;
}

.sla-enquiry__success-text {
	font-family: var( --sla-font-body );
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var( --sla-eq-muted );
	margin: 0;
}

@media ( prefers-reduced-motion: reduce ) {
	.sla-enquiry__submit::before {
		display: none;
	}

	.sla-enquiry__submit-spinner {
		animation-duration: 1.6s;
	}
}

/* -----------------------------------------------------------------------
 * Desktop / tablet (>=768px) — two columns. The image panel stretches to
 * the popup's height (set by the form, capped to the viewport) and the
 * image fills it with object-fit: cover — no blank space beneath it, no
 * distortion. Only the form column scrolls; the image stays put.
 * --------------------------------------------------------------------- */
@media ( min-width: 768px ) and ( max-width: 1023.98px ) {
	.sla-enquiry {
		width: 92vw;
		max-width: 860px;
	}
}

@media ( min-width: 768px ) {
	/* A steady frame for the image, even when the form is replaced by the
	 * shorter success message (never taller than the viewport allows). */
	.sla-enquiry {
		min-height: min( 560px, calc( 100vh - 2 * var( --sla-enquiry-gap ) ) );
		min-height: min( 560px, calc( 100dvh - 2 * var( --sla-enquiry-gap ) ) );
	}

	.sla-enquiry__layout {
		flex-direction: row;
		align-items: stretch;
	}

	/* Image panel: its own ivory tint and a fine gold divider, so the two
	 * columns read as one panel with two clear zones. */
	.sla-enquiry__gallery {
		display: flex;
		flex: 0 0 42%;
		padding: 1.75rem;
		background:
			radial-gradient( 120% 60% at 50% 0%, rgba( 255, 255, 255, 0.7 ), transparent 70% ),
			var( --sla-ivory );
		border-right: 1px solid color-mix( in srgb, var( --sla-champagne-gold ) 35%, transparent );
		box-shadow: inset -12px 0 24px -24px rgba( 6, 47, 58, 0.35 );
	}

	.sla-enquiry__main {
		flex: 1 1 auto;
		height: auto;
		max-height: none;
		aspect-ratio: auto;
	}

	.sla-enquiry__info {
		flex: 1 1 auto;
		padding: 2rem 2.5rem 2rem 2rem;
		min-width: 0;
	}
}

@media ( min-width: 768px ) and ( max-width: 1023.98px ) {
	.sla-enquiry__gallery {
		flex-basis: 40%;
		padding: 1.4rem;
	}

	.sla-enquiry__info {
		padding: 1.5rem 1.75rem 1.75rem 1.5rem;
	}
}

@media ( min-width: 1024px ) {
	.sla-enquiry {
		width: clamp( 65vw, 90vw, 1150px );
	}

	.sla-enquiry__name {
		font-size: clamp( 1.75rem, 1.3rem + 1.2vw, 2.25rem );
	}
}

/* -----------------------------------------------------------------------
 * Mobile (<768px) — generous width per the brief (92vw, no max-width cap)
 * and a fully single-column stacked order.
 * --------------------------------------------------------------------- */
@media ( max-width: 767.98px ) {
	.sla-enquiry {
		width: 92vw;
		max-width: none;
		max-height: 90vh;
	}

	.sla-enquiry__gallery {
		padding: 1rem 1rem 0.9rem;
		background: var( --sla-ivory );
		border-bottom: 1px solid color-mix( in srgb, var( --sla-champagne-gold ) 35%, transparent );
	}

	.sla-enquiry__info {
		padding: 1.1rem 1.1rem 1.5rem;
	}

	/* 16px inputs: no zoom-on-focus on iOS. */
	.sla-enquiry__field input,
	.sla-enquiry__field textarea {
		font-size: 1rem;
	}

	.sla-enquiry__form-head {
		padding: 0.9rem 0.5rem 0.2rem;
	}

	/* One compact row of three: icon above a short label. */
	.sla-enquiry__trust {
		display: grid;
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
		gap: 0.4rem;
		padding: 0.6rem 0.4rem;
	}

	.sla-enquiry__trust-item {
		flex-direction: column;
		gap: 0.3rem;
		font-size: 0.66rem;
		line-height: 1.25;
		text-align: center;
		white-space: normal;
	}

	.sla-enquiry__name {
		font-size: clamp( 1.375rem, 1.2rem + 0.8vw, 1.75rem );
	}

	.sla-enquiry__close {
		top: 0.6rem;
		right: 0.6rem;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.sla-enquiry-overlay,
	.sla-enquiry,
	.sla-enquiry__main-img,
	.sla-enquiry__submit,
	.sla-enquiry__submit-arrow {
		transition: none;
	}
}