/* ==========================================================================
   3D Customiser — frontend styling
   Two independent pieces, placed in two different theme slots:
     #devexhub-3d-customiser-gallery  -> replaces the default WooCommerce product image (left)
     #devexhub-3d-customiser-panel    -> sits above Add to Cart, in the summary column (right)
   ========================================================================== */

#devexhub-3d-customiser-gallery,
#devexhub-3d-customiser-panel {
	--devexhub-3d-customiser-ink: #1f2a44;
	--devexhub-3d-customiser-ink-soft: #4a5468;
	--devexhub-3d-customiser-line: #e5e7ec;
	--devexhub-3d-customiser-surface: #f7f7f9;
	--devexhub-3d-customiser-accent: #1f2a44;
	--devexhub-3d-customiser-radius: 14px;
	box-sizing: border-box;
}
#devexhub-3d-customiser-gallery *,
#devexhub-3d-customiser-panel * {
	box-sizing: border-box;
}

/* Some themes render the product image via a native block (a separate
   render path from the classic gallery hook we replace below) — hide that
   leftover placeholder wherever our customizer has taken over the page.
   Full-Customise ONLY: Semi-Customise keeps the product's real photo
   gallery showing right up until the Customise popup is opened, so it
   must NOT be hidden there. */
body.devexhub-3d-customiser-full-active .wp-block-woocommerce-product-image-gallery,
body.devexhub-3d-customiser-full-active .woocommerce-product-gallery {
	display: none !important;
}

/* -- Gallery / canvas (left column) -------------------------------------- */

#devexhub-3d-customiser-gallery {
	width: 100%;
	max-width: 560px;
	margin: 0 auto 8px;
}
/* Zoom pill above the canvas — a couple of discrete steps on the same
   dolly OrbitControls already does on scroll/pinch (see applyZoomStep()
   in customizer.js), plus a readout, matching the reference's "− 100% +"
   control. */
#devexhub-3d-customiser-zoom {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-bottom: 10px;
}
#devexhub-3d-customiser-zoom button {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 1px solid var(--devexhub-3d-customiser-line);
	background: #fff;
	color: var(--devexhub-3d-customiser-ink);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
}
#devexhub-3d-customiser-zoom button:hover {
	border-color: var(--devexhub-3d-customiser-accent);
}
#devexhub-3d-customiser-zoom-level {
	min-width: 44px;
	text-align: center;
	font-size: 12px;
	font-weight: 700;
	color: var(--devexhub-3d-customiser-ink-soft);
	background: var(--devexhub-3d-customiser-surface);
	border-radius: 999px;
	padding: 6px 10px;
}
#devexhub-3d-customiser-canvas-wrap {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	background: radial-gradient(circle at 50% 30%, #fbfbfc 0%, #eef0f3 100%);
	border-radius: var(--devexhub-3d-customiser-radius);
	overflow: hidden;
	border: 1px solid var(--devexhub-3d-customiser-line);
}
#devexhub-3d-customiser-canvas {
	width: 100%;
	height: 100%;
	display: block;
	cursor: grab;
}
#devexhub-3d-customiser-canvas:active {
	cursor: grabbing;
}
.devexhub-3d-customiser-badge {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 2;
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(4px);
	color: var(--devexhub-3d-customiser-ink);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
	padding: 6px 12px;
	border-radius: 999px;
	box-shadow: 0 1px 3px rgba(20, 20, 30, 0.08);
	pointer-events: none;
}
#devexhub-3d-customiser-loading {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	color: var(--devexhub-3d-customiser-ink-soft);
	font-size: 14px;
	background: var(--devexhub-3d-customiser-surface);
}
.devexhub-3d-customiser-spinner {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 3px solid var(--devexhub-3d-customiser-line);
	border-top-color: var(--devexhub-3d-customiser-accent);
	animation: devexhub-3d-customiser-spin 0.8s linear infinite;
}
@keyframes devexhub-3d-customiser-spin {
	to {
		transform: rotate(360deg);
	}
}

/* One-line nudge under Add to Cart (render_cart_hint() in the PHP class) */
#devexhub-3d-customiser-cart-hint {
	margin: 8px 0 0;
	font-size: 12px;
	text-align: center;
	color: var(--devexhub-3d-customiser-ink-soft);
}

/* -- Options panel (right column) ---------------------------------------- */

#devexhub-3d-customiser-panel {
	max-width: 560px;
	margin: 20px auto 4px;
	padding: 20px 22px;
	background: #fff;
	border: 1px solid var(--devexhub-3d-customiser-line);
	border-radius: var(--devexhub-3d-customiser-radius);
	box-shadow: 0 10px 30px rgba(31, 42, 68, 0.06);
	/* WooCommerce's own "Add to Cart with Options" block renders the
	   quantity input and button as a CSS grid row, and our panel is
	   injected (via woocommerce_before_add_to_cart_button) as a sibling
	   inside that same grid — without this it gets squeezed into a single
	   grid cell alongside the quantity box instead of spanning full width.
	   Harmless on parents that aren't a grid at all. */
	grid-column: 1 / -1;
}
#devexhub-3d-customiser-mobile-bar {
	grid-column: 1 / -1;
}

/* On a real two-column theme (classic float layout: div.images / div.summary
   sitting side by side), the gallery and panel are no longer full-bleed
   siblings in one flow column — let each simply fill its own column. */
.woocommerce div.summary #devexhub-3d-customiser-panel,
.woocommerce div.images #devexhub-3d-customiser-gallery {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

/* Block/FSE themes (Twenty Twenty-Five etc.): our JS moves #devexhub-3d-customiser-gallery
   into the native image-gallery column of the theme's own two-column
   grid (`.devexhub-3d-customiser-relocated` is added to <body> when that happens) — so here
   too the gallery should fill its column edge-to-edge instead of being
   capped/centered like it is in the old single-column stacked layout. */
body.devexhub-3d-customiser-relocated #devexhub-3d-customiser-gallery {
	max-width: none;
	margin: 0 0 8px;
}
body.devexhub-3d-customiser-relocated #devexhub-3d-customiser-panel {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}
/* Make the gallery's column a positioning context so a sticky canvas
   (below) has something to stick within, and give the grid a touch of
   breathing room between the two columns. */
body.devexhub-3d-customiser-relocated .wp-block-columns > .wp-block-column:has(#devexhub-3d-customiser-gallery) {
	display: flex;
	flex-direction: column;
}

/* Plain-language "how this works" banner, shown once above step 1 — the
   goal is that a first-time shopper never has to guess what the panel
   below does or that the 3D model reacts to their choices. */
.devexhub-3d-customiser-intro {
	background: var(--devexhub-3d-customiser-surface);
	border: 1px solid var(--devexhub-3d-customiser-line);
	border-radius: calc(var(--devexhub-3d-customiser-radius) - 4px);
	padding: 14px 16px;
	margin-bottom: 20px;
}
.devexhub-3d-customiser-intro strong {
	display: block;
	font-size: 13px;
	font-weight: 700;
	color: var(--devexhub-3d-customiser-ink);
	margin-bottom: 4px;
}
.devexhub-3d-customiser-intro p {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--devexhub-3d-customiser-ink-soft);
}

/* -- Step nav (Fit / Colour / Add-ons / Text / Finalize) ------------------
   Replaces the old single scrolling list with an app-style set of steps:
   a row of buttons above, one panel visible at a time below. Only the
   active button/panel gets is-active-step-btn / is-active-step — plain
   class toggles in customizer.js, no layout math. */
#devexhub-3d-customiser-steps {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 18px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--devexhub-3d-customiser-line);
}
.devexhub-3d-customiser-step-btn {
	appearance: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	border: 1px solid var(--devexhub-3d-customiser-line);
	background: var(--devexhub-3d-customiser-surface);
	color: var(--devexhub-3d-customiser-ink-soft);
	padding: 8px 14px;
	border-radius: 14px;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.devexhub-3d-customiser-step-btn-label {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.devexhub-3d-customiser-step-btn-required {
	font-size: 9px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #d1453b;
}
.devexhub-3d-customiser-step-btn:hover {
	border-color: var(--devexhub-3d-customiser-accent);
	color: var(--devexhub-3d-customiser-ink);
}
.devexhub-3d-customiser-step-btn.is-active-step-btn {
	background: var(--devexhub-3d-customiser-accent);
	border-color: var(--devexhub-3d-customiser-accent);
	color: #fff;
}
.devexhub-3d-customiser-step-btn.is-active-step-btn .devexhub-3d-customiser-step-btn-required {
	color: #ffb4af;
}

.devexhub-3d-customiser-step-panel {
	display: none;
}
.devexhub-3d-customiser-step-panel.is-active-step {
	display: block;
	animation: devexhub-3d-customiser-step-fade 0.2s ease;
}
@keyframes devexhub-3d-customiser-step-fade {
	from {
		opacity: 0;
		transform: translateY(4px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}
/* Inside a step panel, sections no longer need their own divider/step
   number — the step nav button already carries that role. */
.devexhub-3d-customiser-step-panel .devexhub-3d-customiser-panel-section:last-of-type {
	border-bottom: none;
	margin-bottom: 4px;
	padding-bottom: 0;
}

@media (max-width: 560px) {
	#devexhub-3d-customiser-steps {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		margin-inline: -22px;
		padding-inline: 22px;
	}
	.devexhub-3d-customiser-step-btn {
		flex: none;
	}
}

.devexhub-3d-customiser-panel-section {
	padding-bottom: 18px;
	margin-bottom: 18px;
	border-bottom: 1px solid var(--devexhub-3d-customiser-line);
}
.devexhub-3d-customiser-panel-section:last-of-type {
	border-bottom: none;
	margin-bottom: 4px;
	padding-bottom: 0;
}
.devexhub-3d-customiser-panel-section h4 {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 14px;
	font-size: 16px;
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0;
	color: var(--devexhub-3d-customiser-ink);
}
.devexhub-3d-customiser-step {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--devexhub-3d-customiser-accent);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	flex: none;
}
.devexhub-3d-customiser-optional {
	text-transform: none;
	font-weight: 400;
	color: #9298a6;
	letter-spacing: 0;
	font-size: 12px;
}

/* Zone menu — one full-width row per zone (Contrast Color - Cuffs, Main
   Color, etc), each showing its current pick and turning green once one
   is made. Tapping a row opens the zone detail view below. */
#devexhub-3d-customiser-zone-tabs {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.devexhub-3d-customiser-zone-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--devexhub-3d-customiser-line);
	background: var(--devexhub-3d-customiser-surface);
	border-radius: 10px;
	cursor: pointer;
	text-align: left;
	transition: all 0.15s ease;
}
.devexhub-3d-customiser-zone-row:hover {
	border-color: var(--devexhub-3d-customiser-accent);
}
.devexhub-3d-customiser-zone-row-label {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--devexhub-3d-customiser-ink);
}
.devexhub-3d-customiser-zone-row-value {
	font-size: 12px;
	color: var(--devexhub-3d-customiser-ink-soft);
}
.devexhub-3d-customiser-zone-row.is-complete {
	background: #eefaf1;
	border-color: #8fd4a3;
}
.devexhub-3d-customiser-zone-row.is-complete .devexhub-3d-customiser-zone-row-value {
	color: #2f8a4d;
	font-weight: 600;
}

/* Zone detail — the drill-down swatch view for one zone at a time. */
#devexhub-3d-customiser-zone-detail-title {
	margin: 0 0 12px;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--devexhub-3d-customiser-ink);
}
/* The "you're about to pick this" strip — updates live as swatches are
   clicked, same idea as the reference's bottom preview bar. */
#devexhub-3d-customiser-zone-preview {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 14px;
	padding: 10px 14px;
	background: var(--devexhub-3d-customiser-surface);
	border: 1px solid var(--devexhub-3d-customiser-line);
	border-radius: 10px;
}
#devexhub-3d-customiser-zone-preview-name {
	font-size: 13px;
	font-weight: 700;
	color: var(--devexhub-3d-customiser-ink);
}
#devexhub-3d-customiser-zone-preview-price {
	font-size: 12px;
	font-weight: 600;
	color: var(--devexhub-3d-customiser-accent);
}

/* Cancel / Done — Cancel restores whatever this zone had before the
   detail view opened (or clears it, if nothing did); Done just keeps
   whatever's currently showing. See onZoneCancel()/onZoneDone() in
   customizer.js. */
.devexhub-3d-customiser-zone-actions {
	display: flex;
	gap: 10px;
	margin-top: 14px;
}
.devexhub-3d-customiser-zone-action-btn {
	flex: 1;
	padding: 11px 14px;
	border-radius: 10px;
	border: 1.5px solid var(--devexhub-3d-customiser-line);
	background: #fff;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	transition: all 0.15s ease;
}
.devexhub-3d-customiser-zone-action-cancel {
	color: var(--devexhub-3d-customiser-ink-soft);
}
.devexhub-3d-customiser-zone-action-cancel:hover {
	border-color: #d1453b;
	color: #d1453b;
}
.devexhub-3d-customiser-zone-action-done {
	background: var(--devexhub-3d-customiser-accent);
	border-color: var(--devexhub-3d-customiser-accent);
	color: #fff;
}
.devexhub-3d-customiser-zone-action-done:hover {
	opacity: 0.9;
}

/* Zone color swatch cards — the "visible price" upgrade */
#devexhub-3d-customiser-zone-options {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
	gap: 12px;
}
.devexhub-3d-customiser-swatch-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 8px 4px;
	background: transparent;
	border: 1.5px solid transparent;
	border-radius: 12px;
	cursor: pointer;
	transition: all 0.15s ease;
}
.devexhub-3d-customiser-swatch-card:hover .devexhub-3d-customiser-swatch-dot {
	transform: translateY(-1px);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08), 0 4px 10px rgba(31, 42, 68, 0.14);
}
.devexhub-3d-customiser-swatch-card.is-active {
	background: transparent;
	box-shadow: none;
}
.devexhub-3d-customiser-swatch-dot {
	width: 52px;
	height: 52px;
	border-radius: 14px;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.1);
	transition: all 0.15s ease;
}
.devexhub-3d-customiser-swatch-card.is-active .devexhub-3d-customiser-swatch-dot {
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08), 0 0 0 2px #fff, 0 0 0 4px var(--devexhub-3d-customiser-accent);
}
.devexhub-3d-customiser-swatch-label {
	font-size: 12px;
	font-weight: 600;
	color: var(--devexhub-3d-customiser-ink);
	line-height: 1.2;
}
.devexhub-3d-customiser-swatch-price {
	font-size: 11px;
	color: #9298a6;
	line-height: 1.2;
}
.devexhub-3d-customiser-swatch-card.is-active .devexhub-3d-customiser-swatch-price {
	color: var(--devexhub-3d-customiser-accent);
	font-weight: 600;
}
/* Fabric-pattern swatches — a real pattern thumbnail instead of a flat
   tint, matching boxxerworld's "MATERIAL" swatches sitting alongside the
   flat "COLOUR FILTER" ones in the same zone. */
.devexhub-3d-customiser-swatch-card.is-fabric .devexhub-3d-customiser-swatch-dot {
	background-size: cover;
	background-position: center;
}
/* A color with its own material/finish drill-down (e.g. Black comes in
   Croc/Snake/Plain) — the " ›" in its label is enough of a hint, this just
   nudges the swatch card itself so it doesn't look identical to a plain,
   one-tap color. */
.devexhub-3d-customiser-swatch-card.has-materials {
	border-color: rgba(0, 0, 0, 0.08);
}
/* "‹ Colors" back row inside a color's own materials grid — a full-width
   row above the material swatches, not a swatch card itself. */
.devexhub-3d-customiser-material-back {
	grid-column: 1 / -1;
	text-align: left;
	background: none;
	border: none;
	padding: 4px 2px 8px;
	margin: 0;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--devexhub-3d-customiser-accent);
	cursor: pointer;
}
.devexhub-3d-customiser-material-back:hover {
	text-decoration: underline;
}

/* Material / crystal option chips (Production speed, Text color etc. —
   anything NOT inside #devexhub-3d-customiser-crystal-options / 
   #devexhub-3d-customiser-sleeve-options keeps this plain pill style). */
#devexhub-3d-customiser-material-options {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.devexhub-3d-customiser-option-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 14px;
	border: 1.5px solid var(--devexhub-3d-customiser-line);
	background: #fff;
	color: var(--devexhub-3d-customiser-ink-soft);
	border-radius: 999px;
	cursor: pointer;
	font-size: 13px;
	font-weight: 500;
	transition: all 0.15s ease;
}
.devexhub-3d-customiser-option-btn:hover {
	border-color: var(--devexhub-3d-customiser-accent);
	color: var(--devexhub-3d-customiser-ink);
}
.devexhub-3d-customiser-option-btn.is-active {
	background: var(--devexhub-3d-customiser-accent);
	border-color: var(--devexhub-3d-customiser-accent);
	color: #fff;
}
.devexhub-3d-customiser-option-swatch {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
	flex: none;
}
.devexhub-3d-customiser-option-price {
	font-size: 11px;
	opacity: 0.75;
}

/* Crystals & Sleeves — icon tile grid (matches the reference: a square
   swatch/icon on top, name + price underneath, selected item gets a
   ring instead of a filled pill). */
#devexhub-3d-customiser-crystal-options,
#devexhub-3d-customiser-sleeve-options {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
	gap: 12px;
}
#devexhub-3d-customiser-crystal-options .devexhub-3d-customiser-option-btn,
#devexhub-3d-customiser-sleeve-options .devexhub-3d-customiser-option-btn {
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 7px;
	padding: 10px 6px 8px;
	border-radius: 14px;
	border-color: transparent;
	background: transparent;
	text-align: center;
	font-weight: 600;
}
#devexhub-3d-customiser-crystal-options .devexhub-3d-customiser-option-btn:hover,
#devexhub-3d-customiser-sleeve-options .devexhub-3d-customiser-option-btn:hover {
	background: var(--devexhub-3d-customiser-surface);
}
#devexhub-3d-customiser-crystal-options .devexhub-3d-customiser-option-btn.is-active,
#devexhub-3d-customiser-sleeve-options .devexhub-3d-customiser-option-btn.is-active {
	background: transparent;
	color: var(--devexhub-3d-customiser-ink);
}
#devexhub-3d-customiser-crystal-options .devexhub-3d-customiser-option-name,
#devexhub-3d-customiser-sleeve-options .devexhub-3d-customiser-option-name {
	font-size: 12px;
	line-height: 1.2;
}
#devexhub-3d-customiser-crystal-options .devexhub-3d-customiser-option-price,
#devexhub-3d-customiser-sleeve-options .devexhub-3d-customiser-option-price {
	font-size: 10.5px;
}
#devexhub-3d-customiser-crystal-options .devexhub-3d-customiser-option-swatch,
#devexhub-3d-customiser-sleeve-options .devexhub-3d-customiser-option-icon {
	width: 48px;
	height: 48px;
	border-radius: 13px;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.08);
	transition: all 0.15s ease;
}
#devexhub-3d-customiser-sleeve-options .devexhub-3d-customiser-option-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--devexhub-3d-customiser-surface);
	color: var(--devexhub-3d-customiser-ink-soft);
}
#devexhub-3d-customiser-sleeve-options .devexhub-3d-customiser-option-icon svg {
	width: 26px;
	height: 26px;
}
#devexhub-3d-customiser-crystal-options .devexhub-3d-customiser-option-btn.is-active .devexhub-3d-customiser-option-swatch,
#devexhub-3d-customiser-sleeve-options .devexhub-3d-customiser-option-btn.is-active .devexhub-3d-customiser-option-icon {
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08), 0 0 0 2px #fff, 0 0 0 4px var(--devexhub-3d-customiser-accent);
}
#devexhub-3d-customiser-sleeve-options .devexhub-3d-customiser-option-btn.is-active .devexhub-3d-customiser-option-icon {
	color: var(--devexhub-3d-customiser-accent);
	background: #fff;
}

/* Custom text */
.devexhub-3d-customiser-text-hint {
	margin: -4px 0 10px;
	font-size: 12.5px;
	color: #9298a6;
}
.devexhub-3d-customiser-text-input-wrap {
	position: relative;
	max-width: 320px;
}
#devexhub-3d-customiser-text-input {
	width: 100%;
	padding: 10px 56px 10px 12px;
	border: 1.5px solid var(--devexhub-3d-customiser-line);
	border-radius: 8px;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	transition: border-color 0.15s ease;
}
#devexhub-3d-customiser-text-input:focus {
	outline: none;
	border-color: var(--devexhub-3d-customiser-accent);
}
#devexhub-3d-customiser-text-count {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 11px;
	color: #b0b5c0;
	pointer-events: none;
}

.devexhub-3d-customiser-text-color-row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 14px;
}
.devexhub-3d-customiser-text-color-label {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--devexhub-3d-customiser-ink-soft);
}
#devexhub-3d-customiser-text-color-options {
	display: flex;
	align-items: center;
	gap: 8px;
}
.devexhub-3d-customiser-textcolor-dot {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	border: none;
	padding: 0;
	cursor: pointer;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
	transition: box-shadow 0.15s ease;
}
.devexhub-3d-customiser-textcolor-dot:hover {
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15), 0 0 0 2px rgba(31, 42, 68, 0.15);
}
.devexhub-3d-customiser-textcolor-dot.is-active {
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15), 0 0 0 2px #fff, 0 0 0 3px var(--devexhub-3d-customiser-accent);
}
.devexhub-3d-customiser-textcolor-native {
	width: 26px;
	height: 26px;
	border: none;
	border-radius: 50%;
	padding: 0;
	cursor: pointer;
	background: none;
	margin-left: 2px;
}
.devexhub-3d-customiser-textcolor-native::-webkit-color-swatch-wrapper {
	padding: 0;
	border-radius: 50%;
}
.devexhub-3d-customiser-textcolor-native::-webkit-color-swatch {
	border: 2px solid var(--devexhub-3d-customiser-line);
	border-radius: 50%;
}
.devexhub-3d-customiser-textcolor-native::-moz-color-swatch {
	border: 2px solid var(--devexhub-3d-customiser-line);
	border-radius: 50%;
}

.devexhub-3d-customiser-text-size-row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 14px;
}
.devexhub-3d-customiser-text-size-row input[type='range'] {
	flex: 1;
	max-width: 220px;
	accent-color: var(--devexhub-3d-customiser-accent);
}
#devexhub-3d-customiser-message {
	width: 100%;
	max-width: 420px;
	resize: vertical;
	padding: 10px 12px;
	border: 1.5px solid var(--devexhub-3d-customiser-line);
	border-radius: 8px;
	font-size: 13.5px;
	font-family: inherit;
	color: var(--devexhub-3d-customiser-ink);
	transition: border-color 0.15s ease;
}
#devexhub-3d-customiser-message:focus {
	outline: none;
	border-color: var(--devexhub-3d-customiser-accent);
}
#devexhub-3d-customiser-message-count {
	display: block;
	margin-top: 4px;
	font-size: 11px;
	color: #b0b5c0;
}

.devexhub-3d-customiser-text-rotation-presets {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 8px;
}
.devexhub-3d-customiser-text-rotation-btn {
	appearance: none;
	padding: 6px 12px;
	border: 1.5px solid var(--devexhub-3d-customiser-line);
	background: #fff;
	color: var(--devexhub-3d-customiser-ink-soft);
	border-radius: 999px;
	cursor: pointer;
	font-size: 12px;
	font-weight: 500;
	transition: all 0.15s ease;
}
.devexhub-3d-customiser-text-rotation-btn:hover {
	border-color: var(--devexhub-3d-customiser-accent);
	color: var(--devexhub-3d-customiser-ink);
}

.devexhub-3d-customiser-text-drag-hint {
	margin: 12px 0 0;
	display: flex;
	align-items: center;
	gap: 6px;
}
.devexhub-3d-customiser-text-drag-hint::before {
	content: '✥';
	color: var(--devexhub-3d-customiser-accent);
	font-size: 13px;
}

/* Running summary + total */
#devexhub-3d-customiser-summary {
	margin-top: 4px;
	padding-top: 16px;
	border-top: 2px solid var(--devexhub-3d-customiser-ink);
}
#devexhub-3d-customiser-summary-rows {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-bottom: 10px;
}
.devexhub-3d-customiser-summary-row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 12.5px;
	color: var(--devexhub-3d-customiser-ink-soft);
}
.devexhub-3d-customiser-summary-row .devexhub-3d-customiser-summary-amount {
	flex: none;
	color: var(--devexhub-3d-customiser-ink);
	font-weight: 600;
}
#devexhub-3d-customiser-summary-total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
}
#devexhub-3d-customiser-summary-total span {
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--devexhub-3d-customiser-ink-soft);
}
#devexhub-3d-customiser-total-price {
	font-size: 24px;
	font-weight: 700;
	color: var(--devexhub-3d-customiser-ink);
}

/* -- Mobile sticky bar (Total + Add to Cart) -------------------------------
   Hidden by default (desktop keeps the normal in-panel total + WooCommerce's
   own Add to Cart button); shown fixed to the bottom of the screen under the
   mobile breakpoint below, where it takes over as the actual submit control. */
#devexhub-3d-customiser-mobile-bar {
	display: none;
	/* Sits as a sibling of #devexhub-3d-customiser-panel (after the hidden
	   cart fields), not a descendant, so it needs its own copy of the ink
	   colors rather than inheriting the panel's custom properties. */
	--devexhub-3d-customiser-ink: #1f2a44;
	--devexhub-3d-customiser-ink-soft: #4a5468;
	box-sizing: border-box;
}
#devexhub-3d-customiser-mobile-bar * {
	box-sizing: border-box;
}

/* -- Responsive --------------------------------------------------------------
   Under this width, WooCommerce/the theme stack the gallery above the
   options rather than side-by-side, which is exactly the layout that used to
   force a shopper to scroll down to change a color, then back up to see it
   on the model. The fix is two sticky anchors: the 3D canvas pins to the top
   of the screen (it never scrolls out of view while picking options below
   it), and a Total + Add to Cart bar pins to the bottom (no need to scroll
   all the way down to buy, or to re-check the price). */
@media (max-width: 781px) {
	/* On mobile, the product title (and short description, if the theme
	   prints one) just push the price/options further down the screen
	   before the shopper reaches anything useful. Hide them here only --
	   desktop is untouched, and every other product's page is untouched
	   since this is scoped to the body class this plugin adds. Covers the
	   classic WooCommerce title markup and the block-theme/Woo-Blocks
	   equivalents so it works regardless of which template renders it. */
	body.devexhub-3d-customiser-active .product_title,
	body.devexhub-3d-customiser-active h1.entry-title,
	body.devexhub-3d-customiser-active .wp-block-post-title,
	body.devexhub-3d-customiser-active .woocommerce-product-details__short-description,
	body.devexhub-3d-customiser-active .woocommerce-breadcrumb {
		display: none !important;
	}

	#devexhub-3d-customiser-gallery {
		position: sticky;
		top: var(--wp-admin--admin-bar--height, 0px);
		z-index: 40;
		background: #fff;
		padding-bottom: 6px;
		box-shadow: 0 6px 14px rgba(0, 0, 0, 0.1);
	}
	/* Once JS has moved the gallery to be the first child of the (much
	   taller) options panel — see relocateGalleryIntoPanelOnMobile() in
	   customizer.js — give it a little breathing room from the first
	   section's heading right below it. */
	#devexhub-3d-customiser-gallery.devexhub-3d-customiser-gallery-nested {
		margin: -16px -16px 14px -16px;
		border-radius: var(--devexhub-3d-customiser-radius) var(--devexhub-3d-customiser-radius) 0 0;
	}
	#devexhub-3d-customiser-canvas-wrap {
		aspect-ratio: unset;
		height: 40vh;
		min-height: 240px;
		max-height: 320px;
	}
	.devexhub-3d-customiser-badge {
		font-size: 10.5px;
		padding: 4px 8px;
	}
	.devexhub-3d-customiser-size-chart-link {
		padding: 5px 12px;
		font-size: 11px;
	}

	/* Panel: roomier tap targets, one comfortably-scrollable column, and
	   enough bottom padding that the last section never sits under the
	   fixed mobile bar. */
	#devexhub-3d-customiser-panel {
		padding: 16px;
		padding-bottom: 88px;
	}
	.devexhub-3d-customiser-panel-section h4 {
		font-size: 13.5px;
	}

	/* Zone tabs and Production Options: one horizontally-scrollable row
	   instead of wrapping — keeps each section short so there's less
	   distance between "change something" and the sticky canvas above it. */
	#devexhub-3d-customiser-zone-tabs,
	#devexhub-3d-customiser-material-options,
	#devexhub-3d-customiser-production-options {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-bottom: 2px;
	}
	#devexhub-3d-customiser-zone-tabs::-webkit-scrollbar,
	#devexhub-3d-customiser-material-options::-webkit-scrollbar,
	#devexhub-3d-customiser-production-options::-webkit-scrollbar,
	#devexhub-3d-customiser-crystal-options::-webkit-scrollbar {
		display: none;
	}
	.devexhub-3d-customiser-tab,
	.devexhub-3d-customiser-option-btn {
		flex: none;
		min-height: 40px;
	}
	#devexhub-3d-customiser-crystal-options,
	#devexhub-3d-customiser-sleeve-options {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	#devexhub-3d-customiser-crystal-options .devexhub-3d-customiser-option-btn,
	#devexhub-3d-customiser-sleeve-options .devexhub-3d-customiser-option-btn {
		flex: none;
		min-height: 0;
	}

	/* Text color / text size rows: at narrow widths a fixed-content label
	   sitting next to a whole row of swatches (or a slider) has nowhere to
	   shrink, and used to collapse into a single vertical column of
	   letters. Stacking label-above-control avoids that squeeze entirely. */
	.devexhub-3d-customiser-text-color-row,
	.devexhub-3d-customiser-text-size-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}
	#devexhub-3d-customiser-text-color-options {
		flex-wrap: wrap;
		width: 100%;
	}
	.devexhub-3d-customiser-text-size-row input[type='range'] {
		width: 100%;
	}
	#devexhub-3d-customiser-zone-options {
		grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
	}
	.devexhub-3d-customiser-swatch-card {
		min-height: 64px;
	}

	/* The in-panel total row still exists on mobile (useful once scrolled
	   deep into the panel) but the sticky bottom bar is the primary,
	   always-visible one — de-emphasize this one slightly. */
	#devexhub-3d-customiser-summary {
		margin-top: 12px;
	}

	/* WooCommerce's own Add to Cart button is redundant with the sticky bar
	   below on this product's mobile view — hide it there specifically
	   (every other product's button is untouched). */
	body.devexhub-3d-customiser-active .single_add_to_cart_button {
		display: none !important;
	}

	#devexhub-3d-customiser-mobile-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 14px;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999;
		background: #fff;
		border-top: 1px solid rgba(0, 0, 0, 0.08);
		box-shadow: 0 -6px 16px rgba(0, 0, 0, 0.12);
		padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
	}
	#devexhub-3d-customiser-mobile-bar-total {
		display: flex;
		flex-direction: column;
		line-height: 1.2;
	}
	.devexhub-3d-customiser-mobile-bar-label {
		font-size: 11px;
		text-transform: uppercase;
		letter-spacing: 0.04em;
		color: var(--devexhub-3d-customiser-ink-soft);
	}
	#devexhub-3d-customiser-mobile-bar-price {
		font-size: 19px;
		font-weight: 700;
		color: var(--devexhub-3d-customiser-ink);
	}
	.devexhub-3d-customiser-mobile-bar-btn {
		flex: none;
		background: var(--devexhub-3d-customiser-ink, #141414);
		color: #fff;
		border: none;
		border-radius: 999px;
		padding: 13px 28px;
		font-size: 14.5px;
		font-weight: 700;
		cursor: pointer;
	}
	.devexhub-3d-customiser-mobile-bar-btn:active {
		opacity: 0.85;
	}
}

@media (max-width: 480px) {
	#devexhub-3d-customiser-canvas-wrap {
		height: 34vh;
		min-height: 210px;
	}
	#devexhub-3d-customiser-panel {
		padding: 14px;
		padding-bottom: 84px;
	}
	#devexhub-3d-customiser-gallery.devexhub-3d-customiser-gallery-nested {
		margin: -14px -14px 12px -14px;
	}
	#devexhub-3d-customiser-zone-options {
		grid-template-columns: repeat(auto-fill, minmax(66px, 1fr));
	}
	.devexhub-3d-customiser-mobile-bar-btn {
		padding: 12px 22px;
		font-size: 14px;
	}
}

/* -- Size chart link + modal ------------------------------------------------ */
.devexhub-3d-customiser-size-chart-link {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 5;
	background: rgba(255, 255, 255, 0.92);
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 999px;
	padding: 6px 14px;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.devexhub-3d-customiser-size-chart-link:hover {
	background: #fff;
}
#devexhub-3d-customiser-size-chart-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: rgba(0, 0, 0, 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}
#devexhub-3d-customiser-size-chart-modal .devexhub-3d-customiser-modal-box {
	position: relative;
	background: #fff;
	border-radius: 10px;
	padding: 20px;
	max-width: 90vw;
	max-height: 90vh;
	overflow: auto;
}
#devexhub-3d-customiser-size-chart-modal .devexhub-3d-customiser-modal-close {
	position: absolute;
	top: 6px;
	right: 10px;
	background: none;
	border: none;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	color: #444;
}
#devexhub-3d-customiser-size-chart-image {
	display: block;
	max-width: 100%;
	height: auto;
}

/* -- Production options + game day date ------------------------------------ */
#devexhub-3d-customiser-production-options {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 10px;
}
#devexhub-3d-customiser-gameday-row {
	margin-top: 6px;
}
#devexhub-3d-customiser-gameday-date {
	display: block;
	width: 100%;
	max-width: 220px;
	padding: 8px 10px;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 6px;
	font-size: 13px;
	margin-top: 4px;
}
/* -- Body measurements (Fit step) ------------------------------------------ */
.devexhub-3d-customiser-body-row {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
}
.devexhub-3d-customiser-body-field {
	flex: 1;
	min-width: 120px;
}
.devexhub-3d-customiser-body-field label {
	display: block;
	margin-bottom: 4px;
}
.devexhub-3d-customiser-body-field input[type='number'] {
	display: block;
	width: 100%;
	padding: 8px 10px;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 6px;
	font-size: 13px;
}
.devexhub-3d-customiser-body-field input[type='number']:focus {
	outline: none;
	border-color: var(--devexhub-3d-customiser-accent);
}

#devexhub-3d-customiser-gameday-hint {
	margin: 6px 0 0;
	font-size: 11.5px;
}

/* Add to Cart validation — see getMissingSelections()/showValidationErrors()
   in customizer.js and the #devexhub-3d-customiser-validation-errors markup
   in render_options_panel(). */
.devexhub-3d-customiser-validation-errors {
	margin: 14px 0;
	padding: 12px 14px;
	background: #fdf2f2;
	border: 1px solid #e2a1a1;
	border-left: 4px solid #c0392b;
	border-radius: 6px;
}
.devexhub-3d-customiser-validation-title {
	margin: 0 0 6px;
	font-size: 13px;
	font-weight: 600;
	color: #8f1f1f;
}
.devexhub-3d-customiser-validation-errors ul {
	margin: 0;
	padding-left: 18px;
	font-size: 12.5px;
	color: #8f1f1f;
}
.devexhub-3d-customiser-validation-errors li {
	margin: 2px 0;
}

/* Step nav button flagged by refreshValidationIfShown()/showValidationErrors()
   as having something required still missing. */
.devexhub-3d-customiser-step-btn.has-error {
	border-color: #c0392b;
}
.devexhub-3d-customiser-step-btn.has-error .devexhub-3d-customiser-step-btn-label {
	color: #c0392b;
}
.devexhub-3d-customiser-step-btn.has-error .devexhub-3d-customiser-step-btn-required {
	color: #c0392b;
}
.devexhub-3d-customiser-step-btn.has-error.is-active-step-btn {
	border-color: #c0392b;
	background: #c0392b;
}
.devexhub-3d-customiser-step-btn.has-error.is-active-step-btn .devexhub-3d-customiser-step-btn-label,
.devexhub-3d-customiser-step-btn.has-error.is-active-step-btn .devexhub-3d-customiser-step-btn-required {
	color: #fff;
}

@media (max-width: 782px) {
	.devexhub-3d-customiser-validation-errors {
		margin-bottom: 90px; /* keep it clear of the sticky mobile Add to Cart bar */
	}
}

/* ------------------------------------------------------------------ */
/* First-time onboarding tour                                         */
/* ------------------------------------------------------------------ */
.devexhub-3d-customiser-tour-overlay {
	position: fixed;
	inset: 0;
	z-index: 100010;
	pointer-events: none;
}
.devexhub-3d-customiser-tour-spotlight {
	position: fixed;
	box-shadow: 0 0 0 9999px rgba(15, 20, 35, 0.6);
	border: 2px solid #fff;
	border-radius: 10px;
	pointer-events: none;
	transition: top 0.35s ease, left 0.35s ease, width 0.35s ease, height 0.35s ease;
}
.devexhub-3d-customiser-tour-tooltip {
	position: fixed;
	pointer-events: auto;
	width: 280px;
	max-width: calc(100vw - 32px);
	background: #fff;
	color: var(--devexhub-3d-customiser-ink);
	border-radius: var(--devexhub-3d-customiser-radius);
	box-shadow: 0 12px 32px rgba(15, 20, 35, 0.28);
	padding: 16px 18px;
	opacity: 0;
	transition: opacity 0.2s ease;
}
.devexhub-3d-customiser-tour-tooltip.is-visible {
	opacity: 1;
}
.devexhub-3d-customiser-tour-step-count {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--devexhub-3d-customiser-ink-soft);
	margin-bottom: 6px;
}
.devexhub-3d-customiser-tour-title {
	margin: 0 0 6px;
	font-size: 15px;
	font-weight: 700;
	color: var(--devexhub-3d-customiser-ink);
}
.devexhub-3d-customiser-tour-text {
	margin: 0 0 14px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--devexhub-3d-customiser-ink-soft);
}
.devexhub-3d-customiser-tour-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}
.devexhub-3d-customiser-tour-skip {
	background: none;
	border: none;
	padding: 0;
	font-size: 12px;
	font-weight: 600;
	color: var(--devexhub-3d-customiser-ink-soft);
	cursor: pointer;
	text-decoration: underline;
}
.devexhub-3d-customiser-tour-next {
	background: var(--devexhub-3d-customiser-accent);
	border: 1px solid var(--devexhub-3d-customiser-accent);
	color: #fff;
	border-radius: 999px;
	padding: 8px 18px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}
.devexhub-3d-customiser-tour-help-btn {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 99998;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--devexhub-3d-customiser-line);
	background: #fff;
	color: var(--devexhub-3d-customiser-ink);
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(15, 20, 35, 0.18);
}
.devexhub-3d-customiser-tour-help-btn:hover {
	border-color: var(--devexhub-3d-customiser-accent);
	color: var(--devexhub-3d-customiser-accent);
}
@media (max-width: 782px) {
	.devexhub-3d-customiser-tour-help-btn {
		bottom: 96px; /* clear of the sticky mobile Add to Cart bar */
	}
}

/* -- Customise toggle button + collapsed sidebar ------------------------- */

.devexhub-3d-customiser-customise-toggle {
	position: absolute;
	z-index: 5;
	right: 14px;
	bottom: 14px;
	padding: 12px 22px;
	border: none;
	border-radius: 999px;
	background: var(--devexhub-3d-customiser-accent);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.02em;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(31, 42, 68, 0.28);
}
.devexhub-3d-customiser-customise-toggle:hover {
	filter: brightness(1.1);
}

#devexhub-3d-customiser-panel.devexhub-3d-customiser-panel-collapsed {
	display: none !important;
}

#devexhub-3d-customiser-resume-banner {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	background: #eef6ff;
	border: 1px solid #bcd9f5;
	color: var(--devexhub-3d-customiser-ink);
	border-radius: 10px;
	padding: 10px 12px;
	margin-bottom: 12px;
	font-size: 13px;
}
#devexhub-3d-customiser-resume-banner span {
	flex: 1 1 auto;
}
#devexhub-3d-customiser-resume-new {
	border: 1px solid var(--devexhub-3d-customiser-accent);
	background: #fff;
	color: var(--devexhub-3d-customiser-accent);
	border-radius: 999px;
	padding: 6px 12px;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
}
#devexhub-3d-customiser-resume-dismiss {
	border: none;
	background: transparent;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	color: var(--devexhub-3d-customiser-ink-soft);
	padding: 0 4px;
}

/* -- Semi-Customise: standalone Customise button + two-column popup ------ */

/* Visible to every shopper, right before Add to Cart -- NOT hidden behind
   any toggle, since everyone should be able to find it. */
.devexhub-3d-customiser-customise-btn {
	display: block;
	width: 100%;
	margin-bottom: 10px;
	padding: 13px 18px;
	border: 1px solid var(--devexhub-3d-customiser-ink, #1f2a44);
	border-radius: 10px;
	background: #fff;
	color: var(--devexhub-3d-customiser-ink, #1f2a44);
	font-weight: 600;
	font-size: 15px;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}
.devexhub-3d-customiser-customise-btn:hover {
	background: var(--devexhub-3d-customiser-ink, #1f2a44);
	color: #fff;
}

#devexhub-3d-customiser-popup-backdrop {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(15, 20, 35, 0.55);
	z-index: 40;
}
body.devexhub-3d-customiser-popup-open #devexhub-3d-customiser-popup-backdrop {
	display: block;
}

/* The popup itself: a centered box holding two columns -- the 3D model
   (left) and the customisation options (right), exactly like the Full-
   Customise inline layout, just inside a modal instead of on the page. */
#devexhub-3d-customiser-semi-modal {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 50;
	align-items: center;
	justify-content: center;
	padding: 24px;
}
body.devexhub-3d-customiser-popup-open #devexhub-3d-customiser-semi-modal {
	display: flex;
}
.devexhub-3d-customiser-semi-modal-box {
	position: relative;
	display: flex;
	align-items: stretch;
	background: #fff;
	border-radius: var(--devexhub-3d-customiser-radius, 14px);
	width: min(960px, 96vw);
	max-height: 90vh;
	overflow: hidden;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
.devexhub-3d-customiser-semi-modal-model {
	flex: 1 1 50%;
	min-width: 0;
	padding: 20px;
	overflow-y: auto;
	background: var(--devexhub-3d-customiser-surface, #f7f7f9);
}
.devexhub-3d-customiser-semi-modal-model #devexhub-3d-customiser-gallery {
	max-width: none;
	margin: 0;
}
.devexhub-3d-customiser-semi-modal-options {
	flex: 1 1 50%;
	min-width: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-left: 1px solid var(--devexhub-3d-customiser-line, #e5e7ec);
}
.devexhub-3d-customiser-semi-modal-options #devexhub-3d-customiser-panel {
	width: 100%;
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	margin: 20px auto 0;
}
/* Always-visible Add to Cart bar, pinned to the bottom of the popup's
   options column (outside the scrollable panel above it) -- this is what
   a semi-customise shopper actually uses to buy while the popup is open,
   since WooCommerce's real Add to Cart button lives outside the popup on
   the dimmed main page and isn't reachable there. Mirrors the mobile
   sticky bar's look/behaviour (a real `name="add-to-cart"` submit button
   in the same form), just always shown here rather than only on mobile. */
#devexhub-3d-customiser-popup-cart-bar {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-top: 14px;
	padding: 14px 22px calc(14px + env(safe-area-inset-bottom, 0px));
	background: #fff;
	border-top: 1px solid var(--devexhub-3d-customiser-line, #e5e7ec);
}
#devexhub-3d-customiser-popup-cart-total {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
}
#devexhub-3d-customiser-popup-total-price {
	font-size: 19px;
	font-weight: 700;
	color: var(--devexhub-3d-customiser-ink);
}
.devexhub-3d-customiser-popup-cart-btn {
	flex: none;
	background: var(--devexhub-3d-customiser-ink, #1f2a44);
	color: #fff;
	border: none;
	border-radius: 999px;
	padding: 13px 28px;
	font-size: 14.5px;
	font-weight: 700;
	cursor: pointer;
	transition: opacity 0.15s ease;
}
.devexhub-3d-customiser-popup-cart-btn:hover {
	opacity: 0.9;
}
@media (max-width: 780px) {
	.devexhub-3d-customiser-semi-modal-box {
		flex-direction: column;
		max-height: 92vh;
		overflow-y: auto;
	}
	.devexhub-3d-customiser-semi-modal-options {
		border-left: none;
		border-top: 1px solid var(--devexhub-3d-customiser-line, #e5e7ec);
		overflow: visible;
	}
	.devexhub-3d-customiser-semi-modal-options #devexhub-3d-customiser-panel {
		overflow-y: visible;
	}
	#devexhub-3d-customiser-popup-cart-bar {
		position: sticky;
		bottom: 0;
	}
}
.devexhub-3d-customiser-popup-close {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 32px;
	height: 32px;
	border: none;
	border-radius: 50%;
	background: var(--devexhub-3d-customiser-surface, #f7f7f9);
	color: var(--devexhub-3d-customiser-ink, #1f2a44);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	z-index: 2;
}
.devexhub-3d-customiser-popup-close:hover {
	background: var(--devexhub-3d-customiser-line, #e5e7ec);
}

/* "Edit design" link shown under a customized line on the Cart page. */
.devexhub-3d-customiser-edit-design-link {
	display: inline-block;
	margin-top: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--devexhub-3d-customiser-accent, #4b3fd6);
	text-decoration: underline;
}
.devexhub-3d-customiser-edit-design-link:hover {
	opacity: 0.8;
}

/* -- Real photo strip alongside the 3D viewer ------------------------------- */
.devexhub-3d-customiser-photo-strip {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
	padding: 0 4px;
}
.devexhub-3d-customiser-photo-thumb {
	width: 64px;
	height: 64px;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 8px;
	overflow: hidden;
	cursor: pointer;
	background: #f2f2f2;
	transition: border-color 0.15s ease;
}
.devexhub-3d-customiser-photo-thumb:hover {
	border-color: var(--devexhub-3d-customiser-accent, #4b3fd6);
}
.devexhub-3d-customiser-photo-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
#devexhub-3d-customiser-photo-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: rgba(0, 0, 0, 0.75);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}
#devexhub-3d-customiser-photo-lightbox .devexhub-3d-customiser-modal-box {
	position: relative;
	background: #fff;
	border-radius: 10px;
	padding: 12px;
	max-width: 90vw;
	max-height: 90vh;
	overflow: auto;
}
#devexhub-3d-customiser-photo-lightbox .devexhub-3d-customiser-modal-close {
	position: absolute;
	top: 6px;
	right: 10px;
	background: none;
	border: none;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	color: #444;
}
#devexhub-3d-customiser-photo-lightbox-image {
	display: block;
	max-width: 100%;
	max-height: 80vh;
	height: auto;
	border-radius: 6px;
}