/*
 * Engraving Studio — storefront.
 *
 * Three rules keep this popup at home in any theme:
 *
 *  1. Typography comes from the theme. No font-family is set here except for the merchant's
 *     engraving fonts (inline, from the library). Headings, labels and buttons keep whatever
 *     family, weight and tracking the theme gives them; sizes are in em so they scale with it.
 *  2. Colour comes from the palette. Settings → Personalization → Appearance writes the
 *     --es-* variables that follow this block, so nothing below hard-codes a colour.
 *  3. Themes style bare elements (button, input, h2, label), so everything here is scoped under
 *     .es-scope (specificity 0,2,0 or more) and interactive states are restated at 0,3,0.
 *     Our own controls start from `all: unset`, so a blanket theme button rule cannot leak in.
 *     !important is used for [hidden], and for the two buttons the merchant colours explicitly.
 *
 * Override anything from your theme with e.g.  .es-scope { --es-radius: 8px; }
 */

.es-scope {
	--es-accent: #b68a38;
	--es-on-accent: #fff;
	--es-accent-soft: #f4ead3;
	--es-accent-ring: rgba(182, 138, 56, .35);
	--es-button: var(--es-accent);
	--es-on-button: var(--es-on-accent);
	--es-button-soft: var(--es-accent-soft);
	--es-text: #302d29;
	--es-muted: #756f66;
	--es-line: #ded8cc;
	--es-surface: #fffefa;
	--es-surface-alt: #faf8f2;
	--es-stage: #eeeae0;
	--es-danger: #b32d2e;
	/* Follows the theme's button corners when it exposes them (Woodmart does), else square. */
	--es-radius: var(--btn-brd-radius, 0);
	--es-shadow: 0 30px 80px rgba(25, 20, 12, .35);
}

.es-scope,
.es-scope *,
.es-scope *::before,
.es-scope *::after {
	box-sizing: border-box;
}

/* Themes and page builders regularly override [hidden]; it must always win here. */
.es-scope [hidden],
.es-modal[hidden] {
	display: none !important;
}

.es-scope :is(button, input, a):focus-visible {
	outline: 2px solid var(--es-accent);
	outline-offset: 2px;
}

/* ------------------------------------------------------------------ entry (above Add to cart) */

.es-scope.es-entry {
	flex: 0 0 100%;
	order: -1;
	grid-column: 1 / -1;
	width: 100%;
	clear: both;
	margin: 0 0 1em;
}

/* The trigger keeps the theme's button look. We only lay out its content. */
.es-scope .es-open {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .75em;
	width: 100%;
	margin: 0;
}

.es-scope .es-open__fee {
	font-size: .85em;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	opacity: .78;
}

.es-scope .es-open__fee .amount {
	color: inherit;
	font: inherit;
}

/*
 * Explicit brand choices from Settings → Personalization → Appearance beat the theme's own
 * button colours. "Match my theme" (the default) sets none of this, so the theme's button class
 * governs everything — size and type included. Every other style only ever touches colour,
 * border and shape, never size or font, so the button still sits naturally among the theme's own.
 */
.es-scope[data-style="outline"] .es-open {
	border: 1px solid var(--es-button) !important;
	background: transparent !important;
	color: var(--es-button) !important;
}

.es-scope[data-style="outline"] .es-open:is(:hover, :focus-visible, :active) {
	background: var(--es-button) !important;
	color: var(--es-on-button) !important;
}

.es-scope[data-style="solid"] .es-open {
	border: 1px solid var(--es-button) !important;
	background: var(--es-button) !important;
	color: var(--es-on-button) !important;
}

.es-scope[data-style="solid"] .es-open:is(:hover, :focus-visible, :active) {
	filter: brightness(.92);
}

/* Soft: a quieter filled button — tinted background, no visible border. */
.es-scope[data-style="soft"] .es-open {
	border: 1px solid var(--es-button-soft) !important;
	background: var(--es-button-soft) !important;
	color: var(--es-button) !important;
}

.es-scope[data-style="soft"] .es-open:is(:hover, :focus-visible, :active) {
	border-color: var(--es-button) !important;
	background: var(--es-button) !important;
	color: var(--es-on-button) !important;
}

/* Pill: the solid look, forced fully round regardless of the theme's own corner radius. */
.es-scope[data-style="pill"] .es-open {
	border: 1px solid var(--es-button) !important;
	border-radius: 999px !important;
	background: var(--es-button) !important;
	color: var(--es-on-button) !important;
}

.es-scope[data-style="pill"] .es-open:is(:hover, :focus-visible, :active) {
	filter: brightness(.92);
}

/* Underline: the quietest option — coloured text with an underline, no fill or border. */
.es-scope[data-style="underline"] .es-open {
	border: 1px solid transparent !important;
	background: transparent !important;
	color: var(--es-button) !important;
	text-decoration: underline;
	text-underline-offset: .3em;
}

.es-scope[data-style="underline"] .es-open:is(:hover, :focus-visible, :active) {
	background: var(--es-button-soft) !important;
}

/* Saved state: replaces the button with a summary and two icon buttons. */
.es-scope .es-selection {
	display: flex;
	align-items: center;
	gap: .75em;
	margin: 0;
	padding: .75em .9em;
	border: 1px solid var(--es-line);
	border-radius: var(--es-radius);
	background: var(--es-surface-alt);
	color: var(--es-text);
}

.es-scope .es-selection__mark {
	display: grid;
	place-items: center;
	flex: none;
	width: 2em;
	height: 2em;
	border-radius: 50%;
	background: var(--es-accent);
	color: var(--es-on-accent);
	font-size: .85em;
	line-height: 1;
}

.es-scope .es-selection__text {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
}

.es-scope .es-selection__text strong {
	color: inherit;
}

.es-scope .es-selection__text small {
	overflow: hidden;
	color: var(--es-muted);
	font-size: .85em;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.es-scope .es-selection__actions {
	display: flex;
	gap: .25em;
}

.es-scope .es-icon-button {
	all: unset;
	box-sizing: border-box;
	display: grid;
	place-items: center;
	flex: none;
	width: 2.4em;
	height: 2.4em;
	border: 1px solid transparent;
	border-radius: 50%;
	color: var(--es-muted);
	cursor: pointer;
	transition: border-color .15s, background-color .15s, color .15s;
}

.es-scope .es-icon-button svg {
	width: 1.3em;
	height: 1.3em;
	fill: currentColor;
	pointer-events: none;
}

.es-scope .es-icon-button:is(:hover, :focus-visible, :active) {
	border-color: var(--es-accent);
	background: var(--es-accent-soft);
	color: var(--es-text);
	box-shadow: none;
	transform: none;
}

/* ------------------------------------------------------------------ popup shell */

body.es-modal-open {
	overflow: hidden;
}

.es-modal.es-scope {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: grid;
	place-items: center;
	padding: 1.25em;
	color: var(--es-text);
	/* Follows the theme's text size, within a range that keeps the layout intact. */
	font-size: clamp(14px, 1em, 17px);
	line-height: 1.5;
	text-align: start;
	text-transform: none;
}

.es-scope .es-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 13, 10, .72);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

.es-scope .es-modal__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	width: min(1040px, 100%);
	max-height: calc(100vh - 2.5em);
	max-height: calc(100dvh - 2.5em);
	overflow: hidden;
	border-radius: var(--es-radius);
	background: var(--es-surface);
	color: var(--es-text);
	box-shadow: var(--es-shadow);
	outline: 0;
}

.es-scope .es-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	padding: 1.4em 1.75em;
	border-bottom: 1px solid var(--es-line);
}

.es-scope .es-modal__kicker,
.es-scope .es-eyebrow {
	margin: 0;
	padding: 0;
	color: var(--es-muted);
	font-size: .72em;
	line-height: 1.2;
	letter-spacing: .16em;
	text-transform: uppercase;
}

/* The heading keeps the theme's family and weight; only size, spacing and colour are ours. */
.es-scope .es-modal__title {
	margin: .2em 0 0;
	padding: 0;
	color: var(--es-text);
	font-size: 2em;
	line-height: 1.12;
}

.es-scope .es-close {
	all: unset;
	box-sizing: border-box;
	display: grid;
	place-items: center;
	flex: none;
	width: 1.4em;
	height: 1.4em;
	border-radius: 50%;
	color: var(--es-text);
	font-size: 2em;
	line-height: 1;
	cursor: pointer;
	transition: background-color .15s;
}

.es-scope .es-close:is(:hover, :focus-visible, :active) {
	background: var(--es-accent-soft);
	color: var(--es-text);
	box-shadow: none;
}

.es-scope .es-modal__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	overflow: auto;
	overscroll-behavior: contain;
}

/* ------------------------------------------------------------------ preview */

.es-scope .es-preview {
	padding: 1.9em;
	background: var(--es-surface-alt);
}

.es-scope .es-preview__stage {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	margin: .9em 0 0;
	border: 1px solid var(--es-line);
	background: radial-gradient(120% 90% at 50% 0, var(--es-accent-soft), var(--es-stage));
}

.es-scope .es-preview__stage--overlay {
	position: relative;
	display: block;
	aspect-ratio: auto;
	background: none;
}

.es-scope .es-preview__image {
	display: block;
	width: 100%;
	height: auto;
}

.es-scope .es-overlay {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	text-align: center;
	transform-origin: center;
}

.es-scope .es-overlay span {
	display: block;
	max-width: 100%;
	line-height: 1;
	white-space: nowrap;
}

/*
 * The engraved-metal surface (styled-text preview mode). A wide rounded bar rather than a
 * ring, so there's room to compare tones side by side and read longer engravings. The three
 * gradients below are the only place a metal's actual colour lives — everything else just
 * carries the "yellow-gold"/"rose-gold"/"silver" key, so adding a fourth tone is a two-rule
 * addition here (one for the bar, one for the small swatch) plus one line in class-es-product.php.
 */
.es-scope .es-surface {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 8em;
	/*
	height: 9em;
	border-radius: 999px;
	*/
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08), 0 20px 36px -22px rgba(30, 20, 10, .55);
	transition: background .2s ease;
}

.es-scope .es-surface[data-metal="yellow-gold"] {
	background: linear-gradient(180deg, #8c6d28 0%, #f6e2a0 22%, #fbf0cf 42%, #d8b25a 58%, #93752a 80%, #6b551d 100%);
}

.es-scope .es-surface[data-metal="rose-gold"] {
	background: linear-gradient(180deg, #7a4a3c 0%, #e8a996 22%, #f6d3c8 42%, #c98974 58%, #c28f81 80%, #944632 100%);
}

.es-scope .es-surface[data-metal="silver"] {
	background: linear-gradient(180deg, #6f6f72 0%, #e3e3e5 22%, #fbfbfb 42%, #c3c3c6 58%, #8c8c90 80%, #5c5c5f 100%);
}

/* Breathing room the fit calculation in product.js measures against, so text never
   touches the bar's rounded ends. */
.es-scope .es-surface {
	padding: 0 6%;
}

/*
 * font-size is set inline by product.js (fitSurface()), measured against the actual
 * rendered width of the current text — not guessed from character count — so unusual
 * character combinations can't overflow it. nowrap + hidden are the CSS-only fallback for
 * the instant before JS runs (or if it doesn't): text is clipped rather than ever wrapping
 * to a second line, matching the "always one line" rule even without JS.
 * The small horizontal padding is deliberate slack, not visual spacing: italic/script fonts
 * often render ink beyond their reported layout width (a swash or slanted stroke overhangs
 * the letter's own box), and this keeps that overhang off the overflow:hidden edge. It's
 * included in what fitSurface() measures, so it scales with everything else automatically.
 */
.es-scope .es-surface span {
	overflow: hidden;
	padding: 0 .12em;
	white-space: nowrap;
	color: rgba(35, 24, 14, .68);
	font-size: 3.6em;
	font-variant-emoji: text;
	font-weight: 600;
	letter-spacing: .06em;
	line-height: 1.35;
	text-align: center;


	/*
	text-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 -1px 1px rgba(0, 0, 0, .35);
	*/
	
	text-shadow: 0px 1px 0px rgba(255,255,255,.3), 0px -1px 0px rgba(0,0,0,.7);
	
	background-clip: text;
	-webkit-background-clip: text;
	text-shadow: 1px 1px 0px rgba(245, 245, 245, .4);
}

.es-scope .es-metals {
	margin-top: 1.1em;
}

.es-scope .es-metals__row {
	display: flex;
	flex-wrap: wrap;
	gap: .5em;
	margin-top: .6em;
}

.es-scope .es-metal {
	all: unset;
	box-sizing: border-box;
	display: flex;
	flex: 1 1 8em;
	/* Flex items don't shrink below their content's natural width by default, which at
	   narrow widths pushes .es-metals__row — and the page — wider than the viewport
	   instead of wrapping. This lets the label truncate instead. */
	min-width: 0;
	align-items: center;
	gap: .55em;
	padding: .55em .8em;
	border: 1px solid var(--es-line);
	border-radius: var(--es-radius);
	background: var(--es-surface);
	color: var(--es-text);
	font-size: .92em;
	cursor: pointer;
	transition: border-color .15s, background-color .15s;
}

.es-scope .es-metal > span:last-child {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.es-scope .es-metal:is(:hover, :focus-visible, :active) {
	border-color: var(--es-accent);
	box-shadow: none;
	transform: none;
}

.es-scope .es-metal.is-active {
	border-color: var(--es-accent);
	background: var(--es-accent-soft);
	box-shadow: 0 0 0 1px var(--es-accent);
}

.es-scope .es-metal__swatch {
	flex: none;
	width: 1.6em;
	height: 1.6em;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
}

.es-scope .es-metal__swatch[data-metal="yellow-gold"] {
	background: radial-gradient(circle at 35% 30%, #f6e2a0, #caa53d 65%, #93752a);
}

.es-scope .es-metal__swatch[data-metal="rose-gold"] {
	background: radial-gradient(circle at 35% 30%, #f3c3b3, #c98974 65%, #8a5647);
}

.es-scope .es-metal__swatch[data-metal="silver"] {
	background: radial-gradient(circle at 35% 30%, #f4f4f4, #c3c3c6 65%, #8c8c90);
}

.es-scope .es-preview__meta {
	display: flex;
	justify-content: space-between;
	gap: 1em;
	margin: 1em 0 0;
	color: var(--es-muted);
	font-size: .8em;
}

/* ------------------------------------------------------------------ controls */

.es-scope .es-controls {
	display: flex;
	flex-direction: column;
	gap: 1.7em;
	padding: 1.9em;
}

.es-scope .es-field__label {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin: 0 0 .7em;
	color: var(--es-text);
	font-size: .72em;
	line-height: 1.2;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.es-scope .es-field__label label {
	display: inline;
	margin: 0;
	padding: 0;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
}

.es-scope .es-field__label > span {
	color: var(--es-muted);
}

.es-scope .es-field__label .is-over {
	color: var(--es-danger);
}

/* Fixed size — doesn't shrink or grow with what's typed. Only the preview text on the bar
   (and its placeholder) does that; see fitSurface() in product.js. 1.69em / 4em are the
   original 1.35em / 3.2em, ~25% larger. */
.es-scope .es-input {
	-webkit-appearance: none;
	appearance: none;
	display: block;
	width: 100%;
	height: auto;
	/*
	min-height: 3em;
	*/
	margin: 0;
	padding: .6em .9em;
	border: 1px solid var(--es-line);
	border-radius: var(--es-radius);
	background: var(--es-surface);
	box-shadow: none;
	color: var(--es-text);
	font-size: 1.69em;
	font-variant-emoji: text;
	line-height: 1.3;
	text-transform: none;
}

.es-scope .es-input::placeholder {
	color: var(--es-muted);
	opacity: .7;
}

.es-scope .es-input:is(:hover, :focus, :focus-visible) {
	border-color: var(--es-accent);
	background: var(--es-surface);
	color: var(--es-text);
}

.es-scope .es-input:focus {
	box-shadow: 0 0 0 3px var(--es-accent-ring);
	outline: 0;
}

.es-scope .es-field__hint {
	display: block;
	margin: .5em 0 0;
	color: var(--es-muted);
	font-size: .85em;
}

.es-scope .es-field__hint.is-error {
	color: var(--es-danger);
}

.es-scope .es-fonts {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: .5em;
	margin: .7em 0 0;
}

.es-scope .es-font {
	all: unset;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .4em;
	min-height: 4.5em;
	padding: .65em .4em;
	border: 1px solid var(--es-line);
	border-radius: var(--es-radius);
	background: var(--es-surface);
	color: var(--es-text);
	text-align: center;
	cursor: pointer;
	transition: border-color .15s, background-color .15s, box-shadow .15s;
}

.es-scope .es-font > span {
	display: block;
	max-width: 100%;
	overflow: hidden;
	font-size: 1.2em;
	line-height: 1.2;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.es-scope .es-font > small {
	display: block;
	color: var(--es-muted);
	font-size: .62em;
	line-height: 1.2;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.es-scope .es-font:is(:hover, :focus-visible, :active) {
	border-color: var(--es-accent);
	background: var(--es-surface);
	color: var(--es-text);
	box-shadow: none;
	transform: none;
}

.es-scope .es-font.is-active,
.es-scope .es-font.is-active:is(:hover, :focus-visible, :active) {
	border-color: var(--es-accent);
	background: var(--es-accent-soft);
	box-shadow: 0 0 0 1px var(--es-accent);
}

.es-scope .es-icons {
	display: grid;
	grid-template-columns: repeat(10, minmax(0, 1fr));
	gap: .2em;
	margin: .7em 0 0;
}

.es-scope .es-icon {
	all: unset;
	box-sizing: border-box;
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	min-width: 0;
	border: 1px solid var(--es-line);
	border-radius: var(--es-radius);
	background: var(--es-surface);
	color: var(--es-text);
	font-size: 1.45em;
	font-variant-emoji: text;
	line-height: 1;
	cursor: pointer;
	transition: border-color .15s, background-color .15s;
}

.es-scope .es-icon:is(:hover, :focus-visible, :active) {
	border-color: var(--es-accent);
	background: var(--es-accent-soft);
	color: var(--es-text);
	box-shadow: none;
	transform: none;
}

/* ------------------------------------------------------------------ footer */

.es-scope .es-modal__footer {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 1.5em;
	padding: 1.1em 1.75em;
	border-top: 1px solid var(--es-line);
	background: var(--es-surface);
}

.es-scope .es-modal__total {
	display: flex;
	flex-direction: column;
	color: var(--es-muted);
	font-size: .72em;
	letter-spacing: .1em;
	line-height: 1.3;
	text-transform: uppercase;
}

.es-scope .es-modal__total strong {
	color: var(--es-text);
	font-size: 1.45em;
	letter-spacing: 0;
	text-transform: none;
}

/* The Save button keeps the theme's shape and type; the colour is the merchant's accent. */
/* Always solid, in the button colour: it's the popup's own primary action, not a button
   sitting in the theme's page flow, so "match theme" and the quieter styles don't apply here. */
.es-scope .es-save {
	flex: none;
	min-height: 3em;
	margin: 0;
	border-color: var(--es-button) !important;
	background: var(--es-button) !important;
	box-shadow: none;
	color: var(--es-on-button) !important;
}

.es-scope .es-save:is(:hover, :focus-visible, :active) {
	filter: brightness(.92);
}

/* ------------------------------------------------------------------ small screens: bottom sheet */

@media (max-width: 760px) {
	.es-modal.es-scope {
		align-items: end;
		padding: 0;
	}

	.es-scope .es-modal__panel {
		max-height: 94vh;
		max-height: 94dvh;
	}

	.es-scope .es-modal__header {
		padding: 1.1em 1.25em;
	}

	.es-scope .es-modal__title {
		font-size: 1.7em;
	}

	.es-scope .es-modal__body {
		display: block;
	}

	.es-scope .es-preview {
		padding: 1.25em;
	}

	.es-scope .es-preview__stage {
		aspect-ratio: 16 / 10;
	}

	.es-scope .es-surface {
		height: 6.5em;
	}

	.es-scope .es-controls {
		padding: 1.4em 1.25em;
	}

	.es-scope .es-fonts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.es-scope .es-icons {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

	.es-scope .es-modal__footer {
		justify-content: space-between;
		padding: .9em 1.25em;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.es-scope .es-modal__panel {
		animation: es-rise .24s ease-out;
	}

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

		to {
			opacity: 1;
			transform: none;
		}
	}
}