.cgs-customize-fields {
	margin: 24px 0;
	padding: 20px;
	background: #fafafa;
	border: 1px solid #e5e5e5;
	border-radius: 10px;
}
.cgs-customize-fields h3 {
	margin: 0 0 16px;
	font-size: 1.05em;
}

.cgs-layout {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: 20px;
	align-items: start;
}
@media (max-width: 780px) {
	.cgs-layout {
		grid-template-columns: 1fr;
	}
	.cgs-stage-wrap { order: 0; } /* preview below the left column on small screens */
}

.cgs-controls { display: flex; flex-direction: column; gap: 14px; }
.cgs-field { display: flex; flex-direction: column; gap: 6px; }
.cgs-label { font-weight: 600; font-size: 0.92em; }
.cgs-label .required { color: #c0392b; }

.cgs-upload-box input[type="file"] { display: block; width: 100%; }
.cgs-upload-box .description { display: block; font-size: 0.82em; color: #777; margin-top: 4px; }

.cgs-status { min-height: 1.2em; font-size: 0.85em; color: #555; margin: 0; }
.cgs-status-error { color: #c0392b; }

.cgs-field select,
.cgs-field input[type="text"] {
	padding: 8px 10px;
	border: 1px solid #ccc;
	border-radius: 6px;
	font-size: 0.95em;
	max-width: 320px;
	width: 100%;
}

.cgs-stage-wrap { display: flex; flex-direction: column; gap: 6px; }
.cgs-stage {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3.4;
	min-height: 260px;
	background: radial-gradient(120% 130% at 50% 12%, #1c2230 0%, #0a0c10 70%);
	border-radius: 12px;
	overflow: hidden;
}
.cgs-stage canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.cgs-stage-placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 24px;
	color: rgba(255, 255, 255, 0.65);
	font-size: 0.9em;
	pointer-events: none;
}
.cgs-stage-hint {
	margin: 0;
	font-size: 0.78em;
	color: #888;
	text-align: center;
}

@media (max-width: 480px) {
	.cgs-customize-fields { padding: 14px; }
	.cgs-stage { min-height: 220px; }
}

/* Admin-only Solid / Dots comparison switch on the preview. */

/* Play / pause the auto-spin (top-left of the preview). */
.cgs-spin-toggle {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	margin: 0;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 999px;
	background: rgba(10, 12, 16, 0.6);
	color: rgba(255, 255, 255, 0.9);
	cursor: pointer;
	line-height: 0;
}
.cgs-spin-toggle:hover { background: rgba(255, 255, 255, 0.9); color: #111; }
.cgs-spin-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Linked shape shown as fixed text on a product page. */

/* [crystal_glass_studio] shortcode: product info + add to cart. */
.cgs-studio-form { margin: 0; }
.cgs-product-panel {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 12px 14px;
	border: 1px solid #e5e5e5;
	border-radius: 8px;
	background: #fff;
}
.cgs-product-panel p { margin: 0; }

.cgs-product-price { font-size: 1.05em; }
.cgs-product-desc { font-size: 0.88em; color: #555; }
.cgs-product-desc p { margin: 0 0 6px; }
.cgs-product-options { display: flex; flex-direction: column; gap: 10px; }
.cgs-product-options:empty { display: none; }
.cgs-cart-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 14px;
}
.cgs-cart-row .qty { width: 70px; padding: 8px; }
.cgs-cart-message { flex-basis: 100%; margin: 0; min-height: 1.2em; color: #c0392b; font-size: 0.9em; }
.cgs-shortcode-empty { padding: 12px; border: 1px dashed #c0392b; color: #c0392b; }

/* Admin-only light level sliders under the preview. */

/* ------------------------------------------------------------------
 * Control panel to the right of the 3D preview (v0.9.9)
 * ------------------------------------------------------------------ */
.cgs-stage.has-panel { display: flex; align-items: stretch; }
.cgs-stage.cgs-panel-full { aspect-ratio: auto; min-height: 400px; }
.cgs-viewport { position: relative; flex: 1 1 auto; min-width: 0; }
.cgs-viewport canvas { display: block; width: 100%; height: 100%; touch-action: none; }

.cgs-panel {
	flex: 0 0 auto;
	width: 116px;
	margin: 10px 10px 10px 0;
	padding: 10px 9px;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	gap: 7px;
	overflow-y: auto;
	align-self: flex-start;
	max-height: calc(100% - 20px);
	background: rgba(5, 7, 10, 0.55);
	font-family: inherit;
}
.cgs-panel-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 2px; }
.cgs-panel .cgs-spin-toggle {
	position: static;
	width: 28px;
	height: 28px;
	flex: 0 0 28px;
}
.cgs-reset {
	appearance: none;
	margin: 0;
	padding: 3px 9px;
	border: 1.5px solid #e53935;
	border-radius: 999px;
	background: transparent;
	color: #ff3b30;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.3;
	cursor: pointer;
}
.cgs-reset:hover { background: rgba(229, 57, 53, 0.15); }

.cgs-ctl { display: flex; flex-direction: column; gap: 6px; }
.cgs-ctl-sub { margin-left: 10px; padding-left: 6px; border-left: 1px solid rgba(25, 227, 240, 0.45); gap: 4px; }
.cgs-ctl-sub .cgs-pill { font-size: 11px; padding: 2px 5px; }
.cgs-pill {
	appearance: none;
	width: 100%;
	margin: 0;
	padding: 3px 6px;
	border: 1px solid rgba(255, 255, 255, 0.7);
	border-radius: 999px;
	background: transparent;
	color: #fff;
	font-size: 12px;
	line-height: 1.35;
	cursor: pointer;
	white-space: nowrap;
}
.cgs-pill.is-on { background: #d9d9d9; border-color: #d9d9d9; color: #111; }
.cgs-pill:focus-visible, .cgs-reset:focus-visible, .cgs-bar:focus-visible { outline: 2px solid #19e3f0; outline-offset: 2px; }

.cgs-bar {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 7px;
	margin: 0 0 2px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.28);
	background: linear-gradient(to right, #19e3f0 var(--cgs-fill, 50%), #333 var(--cgs-fill, 50%));
	cursor: pointer;
}
.cgs-bar::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: #19e3f0;
	border: 0;
	box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.5);
}
.cgs-bar::-moz-range-thumb {
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: #19e3f0;
	border: 0;
}
.cgs-bar::-moz-range-track { background: transparent; }

/* ENGRAVING sliders: label + value on one line, the bar below. */
.cgs-ctl-slider { gap: 4px; }
.cgs-slider-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }
.cgs-slider-label {
	margin: 0;
	color: #fff;
	font-size: 11.5px;
	font-weight: 400;
	line-height: 1.3;
	white-space: normal;
	cursor: pointer;
}
.cgs-slider-val {
	flex: none;
	color: #19e3f0;
	font-size: 11.5px;
	font-variant-numeric: tabular-nums;
	line-height: 1.3;
}

.cgs-save-default {
	appearance: none;
	margin: 6px 0 0;
	padding: 4px 6px;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	font-size: 11px;
	cursor: pointer;
}
.cgs-save-msg { min-height: 1em; color: #19e3f0; font-size: 11px; text-align: center; }

@media (max-width: 480px) {
	.cgs-panel { width: 100px; padding: 8px 7px; gap: 6px; }
	.cgs-pill { font-size: 11px; }
}

/* ------------------------------------------------------------------
 * Save buttons: product vs global (v0.9.13)
 * ------------------------------------------------------------------ */
.cgs-save-global { margin-top: 0; background: transparent; border-style: dashed; }
.cgs-link-btn {
	appearance: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: rgba(255, 255, 255, 0.7);
	font-size: 10.5px;
	text-decoration: underline;
	cursor: pointer;
}
.cgs-link-btn:hover { color: #fff; }
.cgs-view-source {
	margin-top: 6px;
	font-size: 10.5px;
	text-align: center;
	color: rgba(255, 255, 255, 0.6);
}
.cgs-view-source.is-own { color: #7ef29a; }
.cgs-save-default:disabled, .cgs-link-btn:disabled { opacity: 0.5; cursor: default; }

/* ------------------------------------------------------------------
 * Theatre + full screen buttons (bottom-left of the panel) (v0.9.13)
 * ------------------------------------------------------------------ */
.cgs-panel-bottom {
	display: flex;
	justify-content: flex-start;
	gap: 6px;
	margin-top: 4px;
	padding-top: 7px;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.cgs-view-btn {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 26px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 5px;
	background: transparent;
	color: rgba(255, 255, 255, 0.9);
	cursor: pointer;
	line-height: 0;
}
.cgs-view-btn:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
.cgs-view-btn:focus-visible { outline: 2px solid #19e3f0; outline-offset: 1px; }

/* Theatre mode: the stage lifted into a large frame over the page. */
html.cgs-theatre-open, html.cgs-theatre-open body { overflow: hidden !important; }
.cgs-theatre-backdrop {
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 3vh 2vw;
	background: rgba(0, 0, 0, 0.88);
}
.cgs-stage.is-theatre,
.cgs-stage.is-theatre.cgs-panel-full {
	width: min(96vw, 1600px);
	height: 90vh;
	height: 90dvh;
	min-height: 0;
	aspect-ratio: auto;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
/* Edge-to-edge frame where the Fullscreen API isn't available (iPhone). */
.cgs-theatre-backdrop.is-pseudo-fs { padding: 0; background: #000; }
.cgs-theatre-backdrop.is-pseudo-fs .cgs-stage {
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	border-radius: 0;
	box-shadow: none;
}

/* Browser full screen. */
.cgs-stage:fullscreen {
	width: 100vw;
	height: 100vh;
	min-height: 0;
	aspect-ratio: auto;
	border-radius: 0;
}
.cgs-stage:-webkit-full-screen {
	width: 100vw;
	height: 100vh;
	min-height: 0;
	aspect-ratio: auto;
	border-radius: 0;
}
.cgs-stage.is-fullscreen .cgs-viewport,
.cgs-stage.is-theatre .cgs-viewport { height: 100%; }

/* ==================================================================
 * v0.9.16 - frame layout (30/70), options + price + cart inside the
 * frame, two animated photo previews, full-height control panel.
 * ================================================================== */

/* 30 / 70 split; one column (preview on top) when the frame is narrow. */
/* Always the full width of wherever the theme puts it (as a size container
   it has no content-based width, so it must never be shrink-wrapped). */
.cgs-customize-fields {
	container-type: inline-size;
	box-sizing: border-box;
	width: 100%;
	flex: 1 1 100%;
	grid-column: 1 / -1;
	max-width: 100%;
}
.cgs-layout {
	grid-template-columns: minmax(210px, 3fr) 7fr;
	align-items: stretch;
}
.cgs-controls { min-width: 0; }
/* The preview grows to the left column's height, so Add to cart lines up
   with its bottom edge (it keeps its 4:3.4 shape as the minimum). */
.cgs-stage-wrap { align-self: stretch; min-width: 0; display: flex; flex-direction: column; }
.cgs-stage-wrap .cgs-stage { flex: 1 1 auto; }
.cgs-cart-slot { margin-top: auto; }
.cgs-cart-slot:empty { display: none; }
@container (max-width: 640px) {
	.cgs-layout { grid-template-columns: 1fr; }
	.cgs-stage-wrap { order: 0; } /* preview below the left column on small screens */
}

/* Product options (WooCommerce's own Size table) moved into the frame. */
.cgs-options-slot:empty, .cgs-price-slot:empty { display: none; }
.cgs-options-slot table.variations {
	width: auto;
	margin: 0 !important;
	border: 0;
	background: none;
	border-collapse: collapse;
}
.cgs-options-slot table.variations tr,
.cgs-options-slot table.variations th,
.cgs-options-slot table.variations td {
	border: 0;
	background: none;
	padding: 4px 12px 4px 0;
	vertical-align: middle;
	text-align: left;
}
.cgs-options-slot table.variations th.label,
.cgs-options-slot table.variations td.label { font-weight: 600; white-space: nowrap; }
.cgs-options-slot table.variations td.value { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.cgs-options-slot table.variations select { width: auto; min-width: 110px; max-width: 170px; display: inline-block; vertical-align: middle; }
.cgs-options-slot .reset_variations { display: inline-block; margin: 0; font-size: 0.9em; }
.cgs-price-slot .single_variation { margin: 0; }
.cgs-price-slot .woocommerce-variation-price .price { font-size: 1.25em; margin: 2px 0 0; }
.cgs-price-slot .woocommerce-variation-description p,
.cgs-price-slot .woocommerce-variation-availability p { margin: 4px 0 0; font-size: 0.88em; }

/* Shortcode: options on one row (label + select), like the product page. */
.cgs-product-panel { padding: 0; border: 0; background: none; gap: 8px; }
.cgs-product-options .cgs-field { flex-direction: row; align-items: center; gap: 12px; }
.cgs-product-options .cgs-field select { max-width: 220px; }
.cgs-product-price { font-size: 1.25em; }

/* Quantity + Add to cart at the bottom of the left column. */
.cgs-cart-slot .cgs-cart-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 6px 0 0;
}
.cgs-cart-slot .quantity { margin: 0 !important; float: none !important; }
.cgs-cart-slot .qty { width: 70px; }
.cgs-cart-slot .single_add_to_cart_button { float: none !important; margin: 0 !important; }

/* Once arranged, everything the shopper uses lives inside the studio, so
   the add-to-cart form just stacks its children (themes and WooCommerce's
   block layout make it a grid sized for a quantity box and a button). */
form.cart.cgs-arranged { display: block !important; }
form.cart.cgs-arranged > .single_variation_wrap { width: auto; }

/* Until frontend.js has moved them, hide WooCommerce's copies outside the
   frame (avoids a flash of the old layout). */
form.cart:has(.cgs-context-product):not(.cgs-arranged) table.variations,
form.cart:has(.cgs-context-product):not(.cgs-arranged) .single_variation,
form.cart:has(.cgs-context-product):not(.cgs-arranged) .quantity,
form.cart:has(.cgs-context-product):not(.cgs-arranged) .single_add_to_cart_button { visibility: hidden; }

/* Two photo previews: Enhanced photo + Background removed. */
.cgs-photo-previews {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin-top: 6px;
}
.cgs-photo-previews[hidden] { display: none; }
.cgs-preview-slot { margin: 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cgs-preview-box {
	position: relative;
	aspect-ratio: 1 / 1;
	border: 1px solid #ddd;
	border-radius: 8px;
	overflow: hidden;
	background: #f3f4f6;
}
.cgs-slot-checker .cgs-preview-box {
	background-image:
		linear-gradient(45deg, #e5e5e5 25%, transparent 25%),
		linear-gradient(-45deg, #e5e5e5 25%, transparent 25%),
		linear-gradient(45deg, transparent 75%, #e5e5e5 75%),
		linear-gradient(-45deg, transparent 75%, #e5e5e5 75%);
	background-size: 16px 16px;
	background-position: 0 0, 0 8px, 8px -8px, -8px 0;
	background-color: #fff;
}
.cgs-preview-box img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	opacity: 0;
	transform: scale(0.97);
	transition: opacity 0.45s ease, transform 0.45s ease;
}
.cgs-preview-slot.is-done .cgs-preview-box img { opacity: 1; transform: none; }
.cgs-preview-caption { font-size: 0.85em; color: #555; text-align: center; margin: 0; }

/* Blurred glimpse of the chosen photo behind the first loader. */
.cgs-preview-box::before {
	content: "";
	position: absolute;
	inset: -12px;
	background-image: var(--cgs-ghost, none);
	background-size: cover;
	background-position: center;
	filter: blur(10px) saturate(0.7);
	opacity: 0;
	transition: opacity 0.4s ease;
}
#cgs-slot-enhanced.is-loading .cgs-preview-box::before { opacity: 0.5; }

/* Loader: shimmer sweep + spinning ring + step text. */
.cgs-loader {
	position: absolute;
	inset: 0;
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 10px;
	text-align: center;
	font-size: 11px;
	line-height: 1.25;
	color: #333;
}
.is-loading .cgs-loader, .is-waiting .cgs-loader { display: flex; }
.is-loading .cgs-loader::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.65) 50%, transparent 80%);
	background-size: 220% 100%;
	animation: cgs-shimmer 1.4s linear infinite;
	pointer-events: none;
}
.cgs-spinner {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 3px solid rgba(25, 227, 240, 0.25);
	border-top-color: #0fb8c4;
	animation: cgs-spin 0.9s linear infinite;
}
.cgs-loader-text {
	position: relative;
	z-index: 1;
	max-width: 100%;
	font-weight: 600;
	text-shadow: 0 0 6px rgba(255, 255, 255, 0.9);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}
.cgs-preview-box .cgs-spinner { flex: 0 0 auto; }
.is-waiting .cgs-spinner { animation: none; border-color: #d0d4da; border-style: dashed; }
.is-waiting .cgs-loader-text { color: #888; font-weight: 400; }
.is-failed .cgs-preview-box { background: #fbeaea; }
@keyframes cgs-spin { to { transform: rotate(360deg); } }
@keyframes cgs-shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
@media (prefers-reduced-motion: reduce) {
	.cgs-spinner, .cgs-step-dot, .is-loading .cgs-loader::after { animation-duration: 3s; }
	.cgs-laser { animation-duration: 6s; }
}

/* 3D stage while the photo is processed: the photo dimmed in the crystal,
   a laser line sweeping through it, the step list on the right and the
   progress bar + time left at the bottom. Colours: SETTINGS > Colors >
   Animation; texts: SETTINGS > Texts > Animation Texts. */
.cgs-stage-placeholder { flex-direction: column; gap: 12px; z-index: 1; }
.cgs-stage-placeholder.is-loading { background: rgba(5, 7, 10, 0.35); }
.cgs-laser, .cgs-steps, .cgs-progress { display: none; }
.cgs-stage-placeholder.is-loading .cgs-laser,
.cgs-stage-placeholder.is-loading .cgs-progress { display: block; }
.cgs-stage-placeholder.is-loading .cgs-steps { display: flex; }
.cgs-laser {
	position: absolute;
	left: 50%;
	width: 60%; /* frontend.js sizes it to the crystal */
	transform: translateX(-50%);
	top: 12%;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--cgs-ani-laser, #19e3f0) 15%, #fff 50%, var(--cgs-ani-laser, #19e3f0) 85%, transparent);
	box-shadow: 0 0 10px 2px var(--cgs-ani-laser, #19e3f0), 0 0 28px 6px color-mix(in srgb, var(--cgs-ani-laser, #19e3f0) 35%, transparent);
	animation: cgs-laser 2.4s ease-in-out infinite alternate;
}
@keyframes cgs-laser { to { top: 86%; } }
.cgs-steps {
	position: absolute;
	right: 4%;
	top: 50%;
	transform: translateY(-50%);
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 10px 12px;
	border-radius: 10px;
	background: rgba(5, 7, 10, 0.55); /* readable when the turning crystal passes behind */
	list-style: none;
	text-align: left;
	font-size: 13px;
	color: #fff;
}
.cgs-steps li { display: flex; align-items: center; gap: 8px; margin: 0; opacity: 0.45; }
.cgs-steps li.is-on, .cgs-steps li.is-done { opacity: 1; }
.cgs-steps li.is-on .cgs-step-name { font-weight: 600; }
.cgs-steps li.is-on .cgs-step-name::after { content: "…"; }
.cgs-step-dot {
	flex: 0 0 auto;
	position: relative;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 2px solid currentColor;
	box-sizing: border-box;
}
.is-on > .cgs-step-dot { border-color: color-mix(in srgb, var(--cgs-ani-steps, #19e3f0) 30%, transparent); border-top-color: var(--cgs-ani-steps, #19e3f0); animation: cgs-spin 0.9s linear infinite; }
.is-done > .cgs-step-dot { border-color: var(--cgs-ani-steps, #19e3f0); background: var(--cgs-ani-steps, #19e3f0); }
.is-done > .cgs-step-dot::after { /* tick */
	content: "";
	position: absolute;
	left: 3px;
	top: 0;
	width: 3px;
	height: 7px;
	border: solid #05070a;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
.cgs-progress {
	position: absolute;
	left: 12%;
	right: 12%;
	bottom: 16px;
	text-align: left;
	font-size: 11px;
	color: #c8ccd0;
}
.cgs-bar-text { display: block; margin-bottom: 5px; }
.cgs-bar-track { display: block; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.18); overflow: hidden; }
.cgs-bar-fill { display: block; width: 0; height: 100%; background: var(--cgs-ani-bar, #19e3f0); transition: width 0.25s linear; }
/* Narrow 3D view (set in frontend.js): only the current step, above the bar. */
.cgs-stage-placeholder.is-narrow .cgs-steps { top: auto; bottom: 44px; left: 12%; right: 12%; transform: none; }
.cgs-stage-placeholder.is-narrow .cgs-steps li:not(.is-on) { display: none; }
.cgs-viewport:has(> .cgs-stage-placeholder.is-loading) > .cgs-hint-in { visibility: hidden; }
.cgs-stage.has-panel .cgs-stage-placeholder { right: 136px; }

/* Control panel: full height of the preview, view buttons pinned to its
   bottom-left corner. */
.cgs-panel { align-self: stretch; max-height: none; }
.cgs-panel-bottom { margin-top: auto; }
@media (max-width: 480px) {
	.cgs-stage.has-panel .cgs-stage-placeholder { right: 110px; }
}

/* Descriptions stay outside the frame: WooCommerce's per-size (variation)
   description is not shown inside it; the shortcode prints the product's
   short description below the frame. */
.cgs-price-slot .woocommerce-variation-description { display: none !important; }
.cgs-studio-form > .cgs-product-desc { margin: 14px 0 0; font-size: 0.95em; color: #444; }
.cgs-studio-form > .cgs-product-desc:empty { display: none; }

/* ==================================================================
 * v0.9.28 - the frame fits the screen height.
 * --cgs-fit-h = the preview's height: the visible screen height minus
 * the frame's own heading, padding and hint line (min 340px).
 * ================================================================== */
.cgs-customize-fields {
	--cgs-fit-h: clamp(340px, calc(100vh - 150px), 900px);
}
@supports (height: 100svh) {
	.cgs-customize-fields { --cgs-fit-h: clamp(340px, calc(100svh - 150px), 900px); }
}

/* Two columns: the preview is exactly that tall; the left column fits the
   same height (tighter spacing, photo boxes sized to the screen) and only
   scrolls on its own on very short screens. */
@container (min-width: 641px) {
	.cgs-stage-wrap .cgs-stage:not(.is-fullscreen) {
		flex: 0 0 auto;
		aspect-ratio: auto;
		height: var(--cgs-fit-h);
		min-height: 0;
	}
	.cgs-controls {
		gap: 10px;
		max-height: calc(var(--cgs-fit-h) + 30px);
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
		padding-right: 2px;
	}
	.cgs-preview-box { max-height: clamp(80px, calc(100vh - 570px), 190px); }
	.cgs-photo-previews { gap: 10px; }
	.cgs-controls .cgs-field { gap: 4px; }
	.cgs-controls .cgs-status:empty { display: none; }
}
@supports (height: 100svh) {
	@container (min-width: 641px) {
		.cgs-preview-box { max-height: clamp(80px, calc(100svh - 570px), 190px); }
	}
}

/* One column (phones): the preview never gets taller than the screen. */
@container (max-width: 640px) {
	.cgs-stage-wrap .cgs-stage:not(.is-fullscreen) { max-height: calc(100vh - 110px); }
}
@supports (height: 100svh) {
	@container (max-width: 640px) {
		.cgs-stage-wrap .cgs-stage:not(.is-fullscreen) { max-height: calc(100svh - 110px); }
	}
}

/* Quantity + Add to cart always visible at the bottom of the left column,
   even when that column has to scroll on a short screen. */
@container (min-width: 641px) {
	.cgs-controls { gap: 8px; }
	.cgs-controls > .cgs-cart-slot {
		position: sticky;
		bottom: 0;
		z-index: 2;
		padding-top: 6px;
		background: #fafafa;
		box-shadow: 0 -8px 10px -8px rgba(0, 0, 0, 0.12);
	}
	.cgs-controls .cgs-cart-slot .cgs-cart-row { margin: 0; }
	.cgs-options-slot table.variations th,
	.cgs-options-slot table.variations td { padding-top: 0; padding-bottom: 0; }
	.cgs-controls .cgs-upload-box .description { margin-top: 2px; }
}

/* Once a photo is chosen the file-type hint isn't needed; captions stay on
   one line - both save height so the frame fits short screens. */
.cgs-has-photo .cgs-upload-box .description { display: none; }
.cgs-preview-caption { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }

/* ==================================================================
 * v0.9.32 - cleaner, uniform frame: no headings/labels, big green
 * "Upload Your Photo" button, no gaps between rows, Font list next to
 * the custom text (same options as MetCaya Custom Crystal Order).
 * ================================================================== */

/* No "Size" (or other option) label - the dropdown speaks for itself. */
.cgs-options-slot table.variations th,
.cgs-options-slot table.variations td.label,
.cgs-product-options .cgs-field > label { display: none !important; }
.cgs-options-slot table.variations td { padding: 0 !important; }

/* Tight rows. */
.cgs-customize-fields { padding: 14px; }
.cgs-controls,
.cgs-controls .cgs-field,
.cgs-product-panel,
.cgs-product-options { gap: 6px !important; }
.cgs-controls p,
.cgs-controls .cgs-status { margin: 0 !important; }
.cgs-controls .cgs-status:empty { display: none; }
.cgs-price-slot .woocommerce-variation-price .price,
.cgs-product-price { margin: 0 !important; line-height: 1.2; }
.cgs-photo-previews { margin-top: 0; }
.cgs-preview-slot { gap: 2px; }

/* All controls one width and height. */
.cgs-controls select,
.cgs-controls input[type="text"],
.cgs-options-slot table.variations select,
.cgs-product-options select {
	width: 100% !important;
	max-width: none !important;
	min-width: 0 !important;
	height: 42px;
	box-sizing: border-box;
}
.cgs-options-slot table.variations,
.cgs-options-slot table.variations tbody,
.cgs-options-slot table.variations tr,
.cgs-options-slot table.variations td.value { display: block; width: 100% !important; }
.cgs-options-slot table.variations td.value { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; }
.cgs-options-slot table.variations td.value select { flex: 1 1 auto; }
.cgs-options-slot .reset_variations { flex: 0 0 auto; }

/* Big green "Upload Your Photo" button (the real file input is hidden but
   still works - the button is its label). */
.cgs-file-input {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	opacity: 0 !important;
	overflow: hidden;
	clip: rect(0 0 0 0);
	pointer-events: none;
}
.cgs-customize-fields:not(.cgs-theme-buttons) .cgs-upload-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	min-height: 52px;
	margin: 0;
	padding: 10px 16px;
	box-sizing: border-box;
	border: 0;
	border-radius: 8px;
	background: #1f9d55;
	color: #fff !important;
	font-size: 1.1em;
	font-weight: 700;
	letter-spacing: 0.01em;
	cursor: pointer;
	box-shadow: 0 2px 0 #15783f;
	transition: background-color 0.15s ease, transform 0.05s ease;
}
.cgs-customize-fields:not(.cgs-theme-buttons) .cgs-upload-btn:hover { background: #188a49; }
.cgs-customize-fields:not(.cgs-theme-buttons) .cgs-upload-btn:active { transform: translateY(1px); box-shadow: 0 1px 0 #15783f; }
.cgs-file-input:focus-visible + .cgs-upload-btn { outline: 3px solid #0b5d2e; outline-offset: 2px; }
.cgs-upload-box .description { text-align: center; margin-top: 3px; }

/* Custom text 70% + Font 30%. */
.cgs-text-font-row { display: flex; gap: 6px; }
.cgs-text-font-row input[type="text"] { flex: 1 1 auto; min-width: 0; }
.cgs-text-font-row.has-fonts input[type="text"] { flex: 0 0 calc(68% - 3px); }
.cgs-text-font-row select { flex: 1 1 auto; font-size: 1.05em; }
.cgs-options-slot table.variations tr { margin: 0 !important; padding: 0 !important; border: 0 !important; box-sizing: border-box; }
.cgs-controls { overflow-x: hidden; }
@container (min-width: 641px) {
	.cgs-layout { grid-template-columns: minmax(240px, 3fr) 7fr; }
}
.cgs-upload-btn { white-space: nowrap; }
.cgs-upload-btn svg { width: 22px !important; height: 22px !important; flex: 0 0 22px; display: block; }

/* Services switched off for a product stay out of sight (v0.9.46). */
.cgs-customize-fields [hidden] { display: none !important; }
.cgs-svc-pill { font-size: 11px; padding: 3px 4px; white-space: normal; line-height: 1.2; }
.cgs-svc-msg:empty { display: none; }

/* ==================================================================
 * v0.9.48 - multi-line custom text; cart below the preview on phones.
 * ================================================================== */
.cgs-text-font-row { align-items: flex-start; }
.cgs-field textarea.cgs-text-input {
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
	min-height: 42px;
	height: 42px;
	padding: 9px 10px;
	border: 1px solid #ccc;
	border-radius: 6px;
	box-sizing: border-box;
	font: inherit;
	font-size: 0.95em;
	line-height: 1.35;
	resize: none;
	overflow: hidden;
	margin: 0;
}
.cgs-text-font-row.has-fonts textarea.cgs-text-input { flex: 0 0 calc(68% - 3px); }
/* Phones: JS moves the cart slot under the preview (see placeCart). */
.cgs-layout > .cgs-cart-slot { margin: 4px 0 0; }
.cgs-layout > .cgs-cart-slot .cgs-cart-row { margin: 0; }

/* Background switch (customers): a sliding on/off pill. */
.cgs-panel .cgs-switch, .cgs-switch {
	display: flex;
	align-items: center;
	gap: 6px;
	width: 100%;
	margin: 8px 0 2px;
	padding: 4px 2px;
	background: none;
	border: 0;
	color: #e8e8e8;
	font-size: 11px !important;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	white-space: nowrap !important;
	line-height: 1.2 !important;
	min-height: 0 !important;
	cursor: pointer;
	text-align: left;
	box-shadow: none;
}
.cgs-switch:focus:not(:focus-visible) { outline: none; }
.cgs-panel .cgs-switch-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cgs-switch-track {
	position: relative;
	flex: 0 0 34px;
	width: 34px;
	height: 18px;
	border-radius: 999px;
	background: #555;
	transition: background-color 0.25s ease;
}
.cgs-switch-knob {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
	transition: transform 0.25s ease;
}
.cgs-switch.is-on .cgs-switch-track { background: #2e9e4f; }
.cgs-switch.is-on .cgs-switch-knob { transform: translateX(16px); }
.cgs-switch:focus-visible { outline: 2px solid #7fb8ff; outline-offset: 2px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) {
	.cgs-switch-track, .cgs-switch-knob { transition: none; }
}

/* 0.9.50: the theme's button :hover/:focus/:active styles were overriding the
   pills' and the Background switch's on/off look, so an OFF pill could look lit
   and an ON pill dim. Pin both states for every interaction state. */
.cgs-panel button.cgs-pill,
.cgs-panel button.cgs-pill:hover,
.cgs-panel button.cgs-pill:focus,
.cgs-panel button.cgs-pill:active {
	background: transparent !important;
	background-image: none !important;
	border: 1px solid rgba(255, 255, 255, 0.55) !important;
	color: #cfcfcf !important;
	box-shadow: none !important;
	text-decoration: none !important;
	opacity: 1 !important;
}
.cgs-panel button.cgs-pill.is-on,
.cgs-panel button.cgs-pill.is-on:hover,
.cgs-panel button.cgs-pill.is-on:focus,
.cgs-panel button.cgs-pill.is-on:active {
	background: #19e3f0 !important;
	border-color: #19e3f0 !important;
	color: #06252a !important;
	font-weight: 700 !important;
}
.cgs-panel button.cgs-pill:not(.is-on):hover { border-color: #fff !important; color: #fff !important; }
.cgs-panel button.cgs-pill:focus-visible { outline: 2px solid #19e3f0 !important; outline-offset: 2px; }

.cgs-panel button.cgs-switch,
.cgs-panel button.cgs-switch:hover,
.cgs-panel button.cgs-switch:focus,
.cgs-panel button.cgs-switch:active {
	background: none !important;
	background-image: none !important;
	border: 0 !important;
	box-shadow: none !important;
	color: #e8e8e8 !important;
}
.cgs-panel .cgs-switch .cgs-switch-track { background: #555 !important; }
.cgs-panel .cgs-switch.is-on .cgs-switch-track { background: #2e9e4f !important; }
.cgs-panel .cgs-switch .cgs-switch-knob { transform: none !important; }
.cgs-panel .cgs-switch.is-on .cgs-switch-knob { transform: translateX(16px) !important; }

/* 0.9.50: FREEZE FIX. The canvas used to take part in layout: on a screen
   with devicePixelRatio > 1 its drawing-buffer height (CSS height x DPR)
   became its layout height whenever the box height was not fixed (the
   control panel stage for managers). Each resize made it taller, forever,
   until the page froze. Taking it out of the flow breaks that loop. */
.cgs-stage canvas,
.cgs-viewport canvas {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
}

/* ==================================================================
 * v0.9.55
 * ================================================================== */
/* Custom text + Font, each with its own label on top. */
.cgs-text-font-row { display: flex; gap: 6px; align-items: flex-start; }
.cgs-text-font-row .cgs-text-col,
.cgs-text-font-row .cgs-font-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cgs-text-font-row .cgs-text-col { flex: 1 1 auto; }
.cgs-text-font-row.has-fonts .cgs-text-col { flex: 0 0 calc(68% - 3px); }
.cgs-text-font-row .cgs-font-col { flex: 1 1 auto; }
.cgs-text-font-row .cgs-text-col .cgs-label,
.cgs-text-font-row .cgs-font-col .cgs-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cgs-field .cgs-text-font-row.has-fonts textarea.cgs-text-input,
.cgs-field .cgs-text-font-row textarea.cgs-text-input { flex: none; width: 100%; }
.cgs-text-font-row .cgs-font-col select { width: 100%; min-height: 42px; box-sizing: border-box; }

/* Add to cart: same look as "Upload Your Photo", in turquoise. */
.cgs-customize-fields .cgs-cart-row { flex-wrap: nowrap; align-items: stretch; }
.cgs-customize-fields .cgs-cart-row .quantity { display: flex; align-items: stretch; flex: 0 0 auto; }
.cgs-customize-fields .cgs-cart-row .qty { min-height: 52px; height: auto; border-radius: 8px; box-sizing: border-box; text-align: center; }
.cgs-customize-fields .cgs-cart-row .cgs-cart-message { display: none; }
.cgs-customize-fields .cgs-cart-row .cgs-cart-message:not(:empty) { display: block; }
.cgs-customize-fields .cgs-cart-row:has(.cgs-cart-message:not(:empty)) { flex-wrap: wrap; }
.cgs-customize-fields:not(.cgs-theme-buttons) button.single_add_to_cart_button,
.cgs-customize-fields:not(.cgs-theme-buttons) button.single_add_to_cart_button.alt,
.cgs-customize-fields:not(.cgs-theme-buttons) button.single_add_to_cart_button.wp-element-button {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 10px;
	flex: 1 1 auto;
	width: auto;
	min-height: 52px;
	margin: 0 !important;
	padding: 10px 16px !important;
	box-sizing: border-box;
	border: 0 !important;
	border-radius: 8px !important;
	background: #17b8a6 !important;
	background-image: none !important;
	color: #fff !important;
	font-size: 1.1em !important;
	font-weight: 700 !important;
	letter-spacing: 0.01em;
	line-height: 1.2;
	text-transform: none;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: 0 2px 0 #0f8a7c !important;
	opacity: 1;
	transition: background-color 0.15s ease, transform 0.05s ease;
}
.cgs-customize-fields:not(.cgs-theme-buttons) button.single_add_to_cart_button:hover { background: #14a393 !important; }
.cgs-customize-fields:not(.cgs-theme-buttons) button.single_add_to_cart_button:active { transform: translateY(1px); box-shadow: 0 1px 0 #0f8a7c !important; }
.cgs-customize-fields:not(.cgs-theme-buttons) button.single_add_to_cart_button:focus-visible { outline: 3px solid #0b6b60; outline-offset: 2px; }
.cgs-customize-fields:not(.cgs-theme-buttons) button.single_add_to_cart_button.disabled,
.cgs-customize-fields:not(.cgs-theme-buttons) button.single_add_to_cart_button:disabled { opacity: 0.55 !important; cursor: not-allowed; }
.cgs-customize-fields .single_add_to_cart_button .cgs-cart-icon { width: 22px; height: 22px; flex: 0 0 22px; display: block; }

/* ==================================================================
 * v0.9.56 - Agreement popup before Add to cart (Popup Controls tab).
 * ================================================================== */
body.cgs-modal-open { overflow: hidden; }
.cgs-agree-backdrop {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(10, 12, 16, 0.6);
	box-sizing: border-box;
}
.cgs-agree-dialog {
	width: 100%;
	max-width: 560px;
	max-height: calc(100vh - 32px);
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 22px 22px 18px;
	box-sizing: border-box;
	border-radius: 12px;
	background: #fff;
	color: #1d2327;
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}
.cgs-agree-title { margin: 0 !important; font-size: 1.3em !important; line-height: 1.25; }
.cgs-agree-text { overflow-y: auto; font-size: 0.98em; line-height: 1.55; }
.cgs-agree-text > :first-child { margin-top: 0; }
.cgs-agree-text > :last-child { margin-bottom: 0; }
.cgs-agree-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.cgs-agree-actions button {
	min-height: 46px;
	margin: 0 !important;
	padding: 10px 20px !important;
	border-radius: 8px !important;
	font-size: 1em !important;
	font-weight: 700 !important;
	cursor: pointer;
	box-sizing: border-box;
	text-transform: none;
}
.cgs-agree-cancel { background: #fff !important; color: #1d2327 !important; border: 1px solid #c3c4c7 !important; box-shadow: none !important; }
.cgs-agree-cancel:hover { background: #f0f0f1 !important; }
.cgs-agree-ok { background: #17b8a6 !important; color: #fff !important; border: 0 !important; box-shadow: 0 2px 0 #0f8a7c !important; }
.cgs-agree-ok:hover { background: #14a393 !important; }
.cgs-agree-actions button:focus-visible { outline: 3px solid #0b6b60; outline-offset: 2px; }
@media (max-width: 480px) {
	.cgs-agree-actions button { flex: 1 1 auto; }
}

/* ==================================================================
 * v0.9.59
 * ================================================================== */
/* Preview background (the default; SETTINGS > Colors sets it inline). */
.cgs-stage {
	background: radial-gradient(120% 130% at 50% 12%, #36454f 0%, #1c2429 45%, #070909 100%);
}
.cgs-panel { background: rgba(14, 18, 20, 0.78); }

/* No space between the photo previews and the custom text. */
.cgs-controls > .cgs-field-text { margin-top: -6px !important; }
.cgs-preview-caption { line-height: 1.2; }
.cgs-field-text .cgs-label { margin: 0 !important; line-height: 1.2; }
.cgs-text-font-row .cgs-text-col,
.cgs-text-font-row .cgs-font-col { gap: 2px; }

/* Panel tabs: closed until clicked, one open at a time. */
.cgs-tab { display: flex; flex-direction: column; }
.cgs-tab-btn {
	appearance: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 4px;
	width: 100%;
	margin: 0;
	padding: 5px 6px;
	border: 1px solid rgba(25, 227, 240, 0.35);
	border-radius: 6px;
	background: rgba(0, 0, 0, 0.25);
	color: #19e3f0;
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.2;
	text-align: left;
	cursor: pointer;
}
.cgs-tab-btn:hover { background: rgba(25, 227, 240, 0.12); }
.cgs-tab-btn:focus-visible { outline: 2px solid #19e3f0; outline-offset: 2px; }
.cgs-tab-caret {
	flex: none;
	width: 6px;
	height: 6px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
	transition: transform 0.15s ease;
}
.cgs-tab.is-open .cgs-tab-btn { background: #19e3f0; color: #0b0d10; border-color: #19e3f0; }
.cgs-tab.is-open .cgs-tab-caret { transform: rotate(45deg); margin-top: -3px; }
.cgs-tab-body { display: flex; flex-direction: column; gap: 7px; padding: 8px 0 2px; }
.cgs-tab-body[hidden] { display: none; }
.cgs-tab-body .cgs-save-default { margin-top: 0; }

/* ==================================================================
 * v0.9.60 - SETTINGS tab: placements + colors
 * ================================================================== */

/* Photo previews sit right on top of the custom text: the captions go
   inside the pictures, no space below them. */
.cgs-preview-slot { position: relative; gap: 0 !important; }
.cgs-preview-slot .cgs-preview-caption {
	position: absolute;
	left: 1px;
	right: 1px;
	bottom: 1px;
	z-index: 2;
	margin: 0;
	padding: 1px 4px;
	border-radius: 0 0 7px 7px;
	background: rgba(0, 0, 0, 0.5);
	color: #fff;
	font-size: 11px;
	line-height: 1.35;
	pointer-events: none;
}
.cgs-controls > .cgs-field-photo { gap: 4px !important; }
.cgs-controls > .cgs-field-text { margin-top: -6px !important; padding-top: 0 !important; }
.cgs-field-text .cgs-label { line-height: 1.15 !important; min-height: 0; padding: 0 !important; }

/* Main Frame colour (white to start; "No color" = transparent). */
.cgs-customize-fields { background: var(--cgs-frame-bg, #ffffff); }
@container (min-width: 641px) {
	.cgs-controls > .cgs-cart-slot { background: var(--cgs-frame-solid, #ffffff); }
}

/* Main Frame placements (two-column screens only; phones keep one column). */
@container (min-width: 641px) {
	.cgs-fpos-1 .cgs-layout { grid-template-columns: 7fr minmax(240px, 3fr); }
	.cgs-fpos-1 .cgs-controls { order: 2; }
	.cgs-fpos-1 .cgs-stage-wrap { order: 1; }
	.cgs-fpos-2 .cgs-layout,
	.cgs-fpos-3 .cgs-layout { grid-template-columns: minmax(0, 1fr); }
	.cgs-fpos-2 .cgs-stage-wrap { order: 1; }
	.cgs-fpos-2 .cgs-controls { order: 2; }
	.cgs-fpos-3 .cgs-controls { order: 0; }
	.cgs-fpos-3 .cgs-stage-wrap { order: 1; }
	.cgs-fpos-2 .cgs-controls,
	.cgs-fpos-3 .cgs-controls { max-height: none; overflow-y: visible; }
	.cgs-fpos-2 .cgs-controls > .cgs-cart-slot,
	.cgs-fpos-3 .cgs-controls > .cgs-cart-slot { position: static; box-shadow: none; }
}

/* Loading / "upload a photo" overlay covers the 3D view only. */
.cgs-viewport > .cgs-stage-placeholder,
.cgs-stage.has-panel .cgs-viewport > .cgs-stage-placeholder { left: 0; right: 0; }

/* Control panel placements inside the preview. */
.cgs-stage.has-panel.cgs-ppos-1 { flex-direction: row-reverse; }
.cgs-stage.cgs-ppos-1 .cgs-panel { margin: 10px 0 10px 10px; }
.cgs-stage.has-panel.cgs-ppos-2 { flex-direction: column; }
.cgs-stage.has-panel.cgs-ppos-3 { flex-direction: column-reverse; }
.cgs-stage.cgs-ppos-2 .cgs-viewport,
.cgs-stage.cgs-ppos-3 .cgs-viewport { flex: 1 1 auto; min-height: 0; width: 100%; }
.cgs-stage.cgs-ppos-2 .cgs-panel,
.cgs-stage.cgs-ppos-3 .cgs-panel {
	width: auto;
	align-self: stretch;
	flex: 0 1 auto;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 8px;
	max-height: 48%;
	overflow-y: auto;
}
.cgs-stage.cgs-ppos-2 .cgs-panel { margin: 0 10px 10px; }
.cgs-stage.cgs-ppos-3 .cgs-panel { margin: 10px 10px 0; }
.cgs-ppos-2 .cgs-panel-top, .cgs-ppos-3 .cgs-panel-top { margin: 0; gap: 8px; }
.cgs-ppos-2 .cgs-panel .cgs-switch, .cgs-ppos-3 .cgs-panel .cgs-switch { width: auto; margin: 0; }
.cgs-ppos-2 .cgs-tab, .cgs-ppos-3 .cgs-tab { display: contents; }
.cgs-ppos-2 .cgs-tab-btn, .cgs-ppos-3 .cgs-tab-btn { width: auto; gap: 8px; }
.cgs-ppos-2 .cgs-tab-body, .cgs-ppos-3 .cgs-tab-body {
	order: 20;
	flex: 1 0 100%;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
	align-items: start;
	gap: 8px 12px;
	padding: 4px 0 0;
}
.cgs-ppos-2 .cgs-tab-body[hidden], .cgs-ppos-3 .cgs-tab-body[hidden] { display: none; }
.cgs-ppos-2 .cgs-save-block, .cgs-ppos-3 .cgs-save-block {
	order: 30;
	flex: 1 0 100%;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
}
.cgs-ppos-2 .cgs-save-block > *, .cgs-ppos-3 .cgs-save-block > * { width: auto; margin: 0; }
.cgs-ppos-2 .cgs-panel-bottom, .cgs-ppos-3 .cgs-panel-bottom {
	order: 10;
	margin: 0 0 0 auto;
	padding: 0;
	border: 0;
}

/* Control panel colours: "Frame" = outline on/off. */
.cgs-panel.cgs-panel-noframe { border-color: transparent !important; }

/* Save controls under the tabs. */
.cgs-save-block {
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin-top: 2px;
	padding-top: 7px;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.cgs-save-block .cgs-view-source { margin-top: 0; }
.cgs-save-block .cgs-save-default { margin: 0; }

/* SETTINGS tab: Placements / Colors sections. */
.cgs-sub { display: flex; flex-direction: column; }
.cgs-sub-btn {
	appearance: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	margin: 0;
	padding: 4px 6px;
	border: 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 0;
	background: transparent;
	color: #fff;
	font-family: inherit;
	font-size: 11.5px;
	font-weight: 700;
	line-height: 1.2;
	text-align: left;
	cursor: pointer;
}
.cgs-sub-btn .cgs-tab-caret { width: 5px; height: 5px; }
.cgs-sub.is-open > .cgs-sub-btn { color: #19e3f0; }
.cgs-sub.is-open > .cgs-sub-btn .cgs-tab-caret { transform: rotate(45deg); margin-top: -3px; }
.cgs-sub-body { display: flex; flex-direction: column; gap: 9px; padding: 7px 0 4px; }
.cgs-sub-body[hidden] { display: none; }
.cgs-set-row { display: flex; flex-direction: column; gap: 4px; }
.cgs-set-label { color: rgba(255, 255, 255, 0.85); font-size: 11px; font-weight: 600; }
.cgs-switch-btn {
	appearance: none;
	width: 100%;
	margin: 0;
	padding: 4px 6px;
	border: 1px solid #19e3f0;
	border-radius: 999px;
	background: transparent;
	color: #19e3f0;
	font-family: inherit;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.2;
	cursor: pointer;
}
.cgs-switch-btn:hover { background: rgba(25, 227, 240, 0.15); }
.cgs-switch-btn:focus-visible, .cgs-sub-btn:focus-visible { outline: 2px solid #19e3f0; outline-offset: 2px; }
.cgs-set-now { color: rgba(255, 255, 255, 0.6); font-size: 10.5px; text-align: center; }
.cgs-color {
	width: 100%;
	height: 26px;
	margin: 0;
	padding: 1px;
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 5px;
	background: transparent;
	cursor: pointer;
	box-sizing: border-box;
}
.cgs-check {
	display: flex;
	align-items: center;
	gap: 5px;
	margin: 0;
	color: #e8e8e8;
	font-size: 11px;
	font-weight: 400;
	line-height: 1.2;
	cursor: pointer;
}
.cgs-check input[type="checkbox"] { width: 13px; height: 13px; margin: 0; flex: none; accent-color: #19e3f0; }
.cgs-grad { display: flex; flex-direction: column; gap: 2px; }
.cgs-grad.is-off { opacity: 0.4; }
.cgs-grad-ends { display: flex; justify-content: space-between; color: rgba(255, 255, 255, 0.6); font-size: 10px; }

/* ==================================================================
 * v0.9.62 - the photo boxes are always shown (empty until a photo is
 * chosen), so Custom text never moves down when the photos load.
 * ================================================================== */
.cgs-photo-previews { display: grid !important; }
/* The file hint lives inside the first empty box now (no line under the button). */
.cgs-upload-box .description { display: none !important; }
.cgs-preview-slot.is-empty .cgs-preview-box {
	border: 1.5px dashed #c9ced6;
	background: #f6f7f9;
}
.cgs-slot-checker.is-empty .cgs-preview-box { background-color: #fff; }
.cgs-empty-hint { display: none; }
.cgs-preview-slot.is-empty .cgs-empty-hint {
	position: absolute;
	inset: 0 0 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px;
	color: #8a929c;
	font-size: 11.5px;
	line-height: 1.3;
	text-align: center;
}
.cgs-preview-slot.is-empty .cgs-preview-caption { background: rgba(0, 0, 0, 0.35); }
.cgs-photo-previews { position: relative; }
.cgs-photo-previews > .cgs-status {
	position: absolute;
	left: 6px;
	right: 6px;
	top: 6px;
	z-index: 3;
	min-height: 0;
	padding: 4px 8px;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.94);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
	font-size: 12px;
	line-height: 1.3;
	text-align: center;
}
.cgs-photo-previews > .cgs-status:empty { display: none; }

/* ==================================================================
 * v0.9.63 - shortcode pages: WordPress adds empty <p>/<br> tags around
 * the shortcode's HTML; they took a grid cell and broke the Main Frame
 * SWITCH. Hide them, and pin each column to its cell.
 * ================================================================== */
.cgs-customize-fields p:empty,
.cgs-layout > br,
.cgs-controls > br { display: none !important; }
@container (min-width: 641px) {
	.cgs-fpos-0 .cgs-controls   { grid-column: 1; grid-row: 1; }
	.cgs-fpos-0 .cgs-stage-wrap { grid-column: 2; grid-row: 1; }
	.cgs-fpos-1 .cgs-stage-wrap { grid-column: 1; grid-row: 1; }
	.cgs-fpos-1 .cgs-controls   { grid-column: 2; grid-row: 1; }
	.cgs-fpos-2 .cgs-stage-wrap { grid-column: 1; grid-row: 1; }
	.cgs-fpos-2 .cgs-controls   { grid-column: 1; grid-row: 2; }
	.cgs-fpos-3 .cgs-controls   { grid-column: 1; grid-row: 1; }
	.cgs-fpos-3 .cgs-stage-wrap { grid-column: 1; grid-row: 2; }
}
/* Paragraphs WordPress wraps around our inputs/buttons don't take part in
   the layout (their contents behave as if the <p> weren't there). */
.cgs-customize-fields p:not([class]) { display: contents !important; }
.cgs-customize-fields p:not([class]):empty { display: none !important; }

/* ==================================================================
 * v0.9.67 - the left column (options, photo, text, cart) is styled like
 * the control panel: same background (set inline from SETTINGS > Colors),
 * same outline, white text, dark inputs.
 * ================================================================== */
.cgs-col-styled .cgs-controls {
	box-sizing: border-box;
	padding: 12px;
	border: 1px solid transparent;
	border-radius: 12px;
	color: #fff;
}
.cgs-col-styled.cgs-col-frame .cgs-controls { border-color: rgba(255, 255, 255, 0.28); }
.cgs-col-styled .cgs-controls .cgs-label,
.cgs-col-styled .cgs-controls label,
.cgs-col-styled .cgs-controls .price,
.cgs-col-styled .cgs-controls .price *,
.cgs-col-styled .cgs-controls .woocommerce-variation-price,
.cgs-col-styled .cgs-controls .woocommerce-variation-availability,
.cgs-col-styled .cgs-controls .cgs-product-price { color: #fff !important; }
.cgs-col-styled .cgs-controls .reset_variations { color: #19e3f0 !important; }
.cgs-col-styled .cgs-controls select,
.cgs-col-styled .cgs-controls textarea,
.cgs-col-styled .cgs-controls input[type="text"],
.cgs-col-styled .cgs-controls input[type="number"],
.cgs-col-styled .cgs-controls .qty {
	background-color: rgba(255, 255, 255, 0.08) !important;
	color: #fff !important;
	border: 1px solid rgba(255, 255, 255, 0.38) !important;
	border-radius: 6px;
}
.cgs-col-styled .cgs-controls select:focus,
.cgs-col-styled .cgs-controls textarea:focus,
.cgs-col-styled .cgs-controls .qty:focus { outline: 2px solid #19e3f0; outline-offset: 1px; border-color: #19e3f0 !important; }
.cgs-col-styled .cgs-controls textarea::placeholder { color: rgba(255, 255, 255, 0.55); }
.cgs-col-styled .cgs-controls select option { background: #1d2124; color: #fff; }
/* Native select arrows are drawn dark by some themes - use a light one. */
.cgs-col-styled .cgs-controls select {
	-webkit-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23ffffff' stroke-width='2'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 10px center !important;
	padding-right: 30px !important;
}
/* Empty photo boxes on the dark background. */
.cgs-col-styled .cgs-preview-slot.is-empty .cgs-preview-box,
.cgs-col-styled .cgs-slot-checker.is-empty .cgs-preview-box {
	background: rgba(255, 255, 255, 0.05) !important;
	border-color: rgba(255, 255, 255, 0.3);
}
.cgs-col-styled .cgs-preview-slot.is-empty .cgs-empty-hint { color: rgba(255, 255, 255, 0.65); }
.cgs-col-styled .cgs-preview-box { border-color: rgba(255, 255, 255, 0.25); }
/* Quantity + Add to cart stay visible at the bottom, on the column's colour. */
@container (min-width: 641px) {
	.cgs-col-styled .cgs-controls > .cgs-cart-slot {
		background: var(--cgs-col-solid, transparent);
		box-shadow: none;
		margin-left: -12px;
		margin-right: -12px;
		margin-bottom: -12px;
		padding: 8px 12px 12px;
		border-radius: 0 0 11px 11px;
	}
}
.cgs-col-styled .cgs-photo-previews > .cgs-status { background: rgba(20, 24, 27, 0.94); color: #fff; }
.cgs-col-styled .cgs-controls select { padding-right: 24px !important; background-position: right 8px center !important; }
.cgs-col-styled .cgs-font-col select { padding-left: 8px !important; padding-right: 22px !important; background-position: right 6px center !important; }

/* ==================================================================
 * v0.9.69 - "Drag to rotate" hint inside the preview window, in the
 * control panel's small text style (the columns now end level).
 * ================================================================== */
.cgs-viewport > .cgs-stage-hint.cgs-hint-in {
	position: absolute;
	left: 8px;
	right: 8px;
	bottom: 10px;
	z-index: 1;
	margin: 0;
	color: rgba(255, 255, 255, 0.6);
	font-size: 11px;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 0;
	text-align: center;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
	pointer-events: none;
}

/* ==================================================================
 * v0.9.70 - Product panel: on wide frames (900px+) the options column
 * sits inside the preview window, styled like the control panel.
 * Stage = [Product panel] + [inner: 3D view + control panel].
 * ================================================================== */
.cgs-stage-inner {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	align-items: stretch;
	min-width: 0;
	min-height: 0;
}
/* The control-panel placements now apply to the inner box. */
.cgs-stage.has-panel,
.cgs-stage.has-panel.cgs-ppos-1,
.cgs-stage.has-panel.cgs-ppos-2,
.cgs-stage.has-panel.cgs-ppos-3 { flex-direction: row; }
.cgs-stage.cgs-ppos-1 .cgs-stage-inner { flex-direction: row-reverse; }
.cgs-stage.cgs-ppos-2 .cgs-stage-inner { flex-direction: column; }
.cgs-stage.cgs-ppos-3 .cgs-stage-inner { flex-direction: column-reverse; }
.cgs-stage.is-fullscreen .cgs-stage-inner,
.cgs-stage.is-theatre .cgs-stage-inner { height: 100%; }

/* Only the preview is left in the frame's grid. */
.cgs-inpanel .cgs-layout { grid-template-columns: minmax(0, 1fr) !important; }
.cgs-inpanel .cgs-layout > .cgs-stage-wrap { grid-column: 1 !important; grid-row: 1 !important; }

/* Main Frame SWITCH moves the Product panel inside the preview. */
.cgs-stage.cgs-fin-1 { flex-direction: row-reverse !important; }
.cgs-stage.cgs-fin-2 { flex-direction: column-reverse !important; }
.cgs-stage.cgs-fin-3 { flex-direction: column !important; }

.cgs-stage > .cgs-controls {
	flex: 0 0 clamp(250px, 27%, 340px);
	width: clamp(250px, 27%, 340px);
	min-height: 0;
	max-height: none !important;
	margin: 10px 0 10px 10px;
	padding: 10px !important;
	border-radius: 8px !important;
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	align-self: stretch;
	font-size: 0.95em;
}
.cgs-stage.cgs-fin-1 > .cgs-controls { margin: 10px 10px 10px 0; }
/* At the bottom / top the Product panel is a strip; its parts sit side by side. */
.cgs-stage.cgs-fin-2 > .cgs-controls,
.cgs-stage.cgs-fin-3 > .cgs-controls {
	flex: 0 1 auto;
	width: auto;
	max-height: 48% !important;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	align-items: start;
	gap: 8px 12px !important;
}
.cgs-stage.cgs-fin-2 > .cgs-controls { margin: 0 10px 10px; }
.cgs-stage.cgs-fin-3 > .cgs-controls { margin: 10px 10px 0; }
.cgs-stage.cgs-fin-2 > .cgs-controls > .cgs-cart-slot,
.cgs-stage.cgs-fin-3 > .cgs-controls > .cgs-cart-slot {
	position: static !important;
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
}
/* The sticky cart row inside the Product panel. */
.cgs-stage > .cgs-controls > .cgs-cart-slot {
	margin-left: -10px !important;
	margin-right: -10px !important;
	margin-bottom: -10px !important;
	padding: 8px 10px 10px !important;
	border-radius: 0 0 7px 7px !important;
}
.cgs-col-styled .cgs-stage > .cgs-controls { border-color: transparent; }
.cgs-col-styled.cgs-col-frame .cgs-stage > .cgs-controls { border-color: rgba(255, 255, 255, 0.28); }
/* Strip layout: product, size/price, photo, text, cart - each its own column. */
.cgs-stage.cgs-fin-2 > .cgs-controls,
.cgs-stage.cgs-fin-3 > .cgs-controls {
	grid-template-columns: minmax(150px, 0.8fr) minmax(170px, 0.9fr) minmax(250px, 1.4fr) minmax(240px, 1.3fr) minmax(210px, 1fr);
	overflow-x: auto;
}
.cgs-stage.cgs-fin-2 > .cgs-controls > .cgs-cart-slot .cgs-cart-row,
.cgs-stage.cgs-fin-3 > .cgs-controls > .cgs-cart-slot .cgs-cart-row { min-width: 0; }
.cgs-stage.cgs-fin-2 > .cgs-controls .single_add_to_cart_button,
.cgs-stage.cgs-fin-3 > .cgs-controls .single_add_to_cart_button { min-width: 0 !important; flex: 1 1 auto; font-size: 1em !important; padding-left: 10px !important; padding-right: 10px !important; }
/* Custom text + Font in the Product panel: room for the font name. */
.cgs-stage > .cgs-controls .cgs-text-font-row.has-fonts .cgs-text-col { flex: 0 0 calc(60% - 3px); }
.cgs-stage > .cgs-controls .cgs-font-col select { font-size: 0.95em; }

/* ==================================================================
 * v0.9.72 - smaller buttons with their own colours, Product group,
 * text groups (SETTINGS > Texts), theme buttons, reset warning.
 * ================================================================== */
/* Buttons: smaller, coloured from SETTINGS > Colors > Buttons. */
.cgs-customize-fields:not(.cgs-theme-buttons) .cgs-upload-btn {
	min-height: 40px;
	padding: 7px 12px;
	gap: 8px;
	font-size: 0.98em;
	background: var(--cgs-upload-bg, #1f9d55);
	box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
}
.cgs-customize-fields:not(.cgs-theme-buttons) .cgs-upload-btn:hover { background: var(--cgs-upload-bg, #1f9d55); filter: brightness(0.92); }
.cgs-upload-btn svg { width: 18px !important; height: 18px !important; flex: 0 0 18px; }
.cgs-customize-fields:not(.cgs-theme-buttons) button.single_add_to_cart_button,
.cgs-customize-fields:not(.cgs-theme-buttons) button.single_add_to_cart_button.alt,
.cgs-customize-fields:not(.cgs-theme-buttons) button.single_add_to_cart_button.wp-element-button {
	min-height: 40px;
	padding: 7px 12px !important;
	gap: 8px;
	font-size: 0.98em !important;
	background: var(--cgs-cart-bg, #17b8a6) !important;
	box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25) !important;
}
.cgs-customize-fields:not(.cgs-theme-buttons) button.single_add_to_cart_button:hover { background: var(--cgs-cart-bg, #17b8a6) !important; filter: brightness(0.92); }
.cgs-customize-fields .single_add_to_cart_button .cgs-cart-icon { width: 18px; height: 18px; flex: 0 0 18px; }
.cgs-customize-fields .cgs-cart-row .qty { min-height: 40px !important; }
/* Theme buttons: the theme's own look, just laid out for the panel. */
.cgs-theme-buttons .cgs-upload-btn { display: flex !important; align-items: center; justify-content: center; gap: 8px; width: 100%; box-sizing: border-box; cursor: pointer; }
.cgs-theme-buttons .cgs-cart-row .single_add_to_cart_button { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin: 0 !important; }

/* Product, size and price stacked. */
.cgs-prod-group { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cgs-stage.cgs-fin-2 > .cgs-controls,
.cgs-stage.cgs-fin-3 > .cgs-controls {
	grid-template-columns: minmax(180px, 1fr) minmax(250px, 1.4fr) minmax(240px, 1.3fr) minmax(200px, 1fr);
}

/* Text groups: colour / font chosen in SETTINGS > Texts. */
.cgs-tc-labels.cgs-tc-labels .cgs-label { color: var(--cgs-t-labels-c) !important; }
.cgs-tf-labels.cgs-tf-labels .cgs-label { font-family: var(--cgs-t-labels-f) !important; }
.cgs-tc-fields.cgs-tc-fields .cgs-controls select, .cgs-tc-fields.cgs-tc-fields .cgs-controls textarea, .cgs-tc-fields.cgs-tc-fields .cgs-controls .qty, .cgs-tc-fields.cgs-tc-fields .cgs-controls input[type="text"] { color: var(--cgs-t-fields-c) !important; }
.cgs-tf-fields.cgs-tf-fields .cgs-controls select, .cgs-tf-fields.cgs-tf-fields .cgs-controls textarea, .cgs-tf-fields.cgs-tf-fields .cgs-controls .qty, .cgs-tf-fields.cgs-tf-fields .cgs-controls input[type="text"] { font-family: var(--cgs-t-fields-f) !important; }
.cgs-tc-price.cgs-tc-price .cgs-controls .price, .cgs-tc-price.cgs-tc-price .cgs-controls .price *, .cgs-tc-price.cgs-tc-price .cgs-controls .cgs-product-price, .cgs-tc-price.cgs-tc-price .cgs-controls .woocommerce-variation-price { color: var(--cgs-t-price-c) !important; }
.cgs-tf-price.cgs-tf-price .cgs-controls .price, .cgs-tf-price.cgs-tf-price .cgs-controls .price *, .cgs-tf-price.cgs-tf-price .cgs-controls .cgs-product-price { font-family: var(--cgs-t-price-f) !important; }
.cgs-tc-buttons.cgs-tc-buttons .cgs-upload-btn, .cgs-tc-buttons.cgs-tc-buttons .cgs-upload-btn *, .cgs-tc-buttons.cgs-tc-buttons .cgs-controls button.single_add_to_cart_button.single_add_to_cart_button { color: var(--cgs-t-buttons-c) !important; }
.cgs-tf-buttons.cgs-tf-buttons .cgs-upload-btn, .cgs-tf-buttons.cgs-tf-buttons .cgs-upload-btn *, .cgs-tf-buttons.cgs-tf-buttons .cgs-controls button.single_add_to_cart_button.single_add_to_cart_button { font-family: var(--cgs-t-buttons-f) !important; }
.cgs-tc-tabs.cgs-tc-tabs .cgs-panel .cgs-tab-btn, .cgs-tc-tabs.cgs-tc-tabs .cgs-panel .cgs-sub.is-open > .cgs-sub-btn, .cgs-tc-tabs.cgs-tc-tabs .cgs-panel .cgs-switch-btn { color: var(--cgs-t-tabs-c) !important; border-color: var(--cgs-t-tabs-c) !important; }
.cgs-tc-tabs.cgs-tc-tabs .cgs-panel .cgs-tab.is-open .cgs-tab-btn { background: var(--cgs-t-tabs-c) !important; color: #0b0d10 !important; }
.cgs-tf-tabs.cgs-tf-tabs .cgs-panel .cgs-tab-btn, .cgs-tf-tabs.cgs-tf-tabs .cgs-panel .cgs-sub-btn, .cgs-tf-tabs.cgs-tf-tabs .cgs-panel .cgs-switch-btn { font-family: var(--cgs-t-tabs-f) !important; }
.cgs-tc-panel.cgs-tc-panel .cgs-panel .cgs-pill:not(.is-on), .cgs-tc-panel.cgs-tc-panel .cgs-panel .cgs-slider-label, .cgs-tc-panel.cgs-tc-panel .cgs-panel .cgs-check, .cgs-tc-panel.cgs-tc-panel .cgs-panel .cgs-set-label, .cgs-tc-panel.cgs-tc-panel .cgs-panel .cgs-set-sub, .cgs-tc-panel.cgs-tc-panel .cgs-panel .cgs-switch-label, .cgs-tc-panel.cgs-tc-panel .cgs-panel .cgs-view-source, .cgs-tc-panel.cgs-tc-panel .cgs-panel .cgs-save-default, .cgs-tc-panel.cgs-tc-panel .cgs-panel .cgs-link-btn, .cgs-tc-panel.cgs-tc-panel .cgs-panel .cgs-sub-btn { color: var(--cgs-t-panel-c) !important; }
.cgs-tf-panel.cgs-tf-panel .cgs-panel, .cgs-tf-panel.cgs-tf-panel .cgs-panel .cgs-pill, .cgs-tf-panel.cgs-tf-panel .cgs-panel .cgs-save-default, .cgs-tf-panel.cgs-tf-panel .cgs-panel .cgs-link-btn, .cgs-tf-panel.cgs-tf-panel .cgs-panel select { font-family: var(--cgs-t-panel-f) !important; }
.cgs-tc-hints.cgs-tc-hints .cgs-preview-caption, .cgs-tc-hints.cgs-tc-hints .cgs-empty-hint, .cgs-tc-hints.cgs-tc-hints .cgs-hint-in, .cgs-tc-hints.cgs-tc-hints .cgs-stage-placeholder-text, .cgs-tc-hints.cgs-tc-hints .cgs-set-now, .cgs-tc-hints.cgs-tc-hints .cgs-grad-ends, .cgs-tc-hints.cgs-tc-hints .cgs-save-msg { color: var(--cgs-t-hints-c) !important; }
.cgs-tf-hints.cgs-tf-hints .cgs-preview-caption, .cgs-tf-hints.cgs-tf-hints .cgs-empty-hint, .cgs-tf-hints.cgs-tf-hints .cgs-hint-in, .cgs-tf-hints.cgs-tf-hints .cgs-stage-placeholder-text, .cgs-tf-hints.cgs-tf-hints .cgs-set-now, .cgs-tf-hints.cgs-tf-hints .cgs-grad-ends, .cgs-tf-hints.cgs-tf-hints .cgs-save-msg { font-family: var(--cgs-t-hints-f) !important; }
.cgs-tc-steps.cgs-tc-steps .cgs-steps { color: var(--cgs-t-steps-c) !important; }
.cgs-tf-steps.cgs-tf-steps .cgs-steps { font-family: var(--cgs-t-steps-f) !important; }
.cgs-ts-steps.cgs-ts-steps .cgs-steps { font-size: var(--cgs-t-steps-s) !important; }
.cgs-tc-bar.cgs-tc-bar .cgs-bar-text { color: var(--cgs-t-bar-c) !important; }
.cgs-tf-bar.cgs-tf-bar .cgs-bar-text { font-family: var(--cgs-t-bar-f) !important; }
.cgs-ts-bar.cgs-ts-bar .cgs-bar-text { font-size: var(--cgs-t-bar-s) !important; }

/* SETTINGS > Texts / Buttons rows. */
.cgs-set-head { margin-top: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.cgs-set-sub { color: rgba(255, 255, 255, 0.7); font-size: 10.5px; margin-top: 2px; }
.cgs-typo-row { padding-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.cgs-font-pick {
	width: 100%;
	height: 26px;
	margin: 0;
	padding: 0 4px;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 5px;
	background: rgba(0, 0, 0, 0.35);
	color: #fff;
	font-size: 11px;
	box-sizing: border-box;
}
.cgs-font-pick option { background: #1d2124; color: #fff; }
.cgs-font-pick:disabled, .cgs-color:disabled { opacity: 0.4; }
.cgs-font-upload { font-size: 10px !important; letter-spacing: 0.02em; }
.cgs-reset-defaults {
	appearance: none;
	width: 100%;
	margin: 6px 0 0;
	padding: 5px 6px;
	border: 1px solid #e53935;
	border-radius: 6px;
	background: transparent;
	color: #ff6b62;
	font-family: inherit;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
}
.cgs-reset-defaults:hover { background: rgba(229, 57, 53, 0.15); }
.cgs-ppos-2 .cgs-typo-row, .cgs-ppos-3 .cgs-typo-row { border-bottom: 0; }

/* Reset warning. */
.cgs-modal-backdrop {
	position: fixed;
	inset: 0;
	z-index: 100001;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(0, 0, 0, 0.6);
}
.cgs-modal {
	width: min(440px, 100%);
	box-sizing: border-box;
	padding: 20px 20px 16px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 10px;
	background: #1d2124;
	color: #fff;
	font-family: inherit;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.cgs-modal-title { margin: 0 0 10px; color: #ff6b62; font-size: 1.1em; }
.cgs-modal-text { margin: 0 0 16px; font-size: 0.95em; line-height: 1.5; color: rgba(255, 255, 255, 0.88); }
.cgs-modal-buttons { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.cgs-modal-buttons button {
	appearance: none;
	margin: 0;
	padding: 8px 14px;
	border-radius: 6px;
	font-family: inherit;
	font-size: 0.92em;
	font-weight: 700;
	cursor: pointer;
}
.cgs-modal-no { border: 1px solid rgba(255, 255, 255, 0.5); background: transparent; color: #fff; }
.cgs-modal-yes { border: 1px solid #e53935; background: #e53935; color: #fff; }
.cgs-modal-buttons button:disabled { opacity: 0.6; cursor: default; }
.cgs-modal-msg { margin: 10px 0 0; min-height: 1em; font-size: 0.85em; color: #19e3f0; }
/* The Bottom/Top strip keeps its height (up to 48%); the 3D view gives way. */
.cgs-stage.cgs-fin-2 > .cgs-controls,
.cgs-stage.cgs-fin-3 > .cgs-controls { flex: 0 0 auto !important; }
.cgs-stage.cgs-fin-2 > .cgs-stage-inner,
.cgs-stage.cgs-fin-3 > .cgs-stage-inner { min-height: 0; flex: 1 1 0; }

/* ==================================================================
 * v0.9.76 - Main Frame outline tickbox; text size per text group.
 * ================================================================== */
.cgs-customize-fields.cgs-frame-noline { border-color: transparent !important; }
.cgs-ts-labels.cgs-ts-labels .cgs-label { font-size: var(--cgs-t-labels-s) !important; }
.cgs-ts-fields.cgs-ts-fields .cgs-controls select, .cgs-ts-fields.cgs-ts-fields .cgs-controls textarea, .cgs-ts-fields.cgs-ts-fields .cgs-controls .qty, .cgs-ts-fields.cgs-ts-fields .cgs-controls input[type="text"] { font-size: var(--cgs-t-fields-s) !important; }
.cgs-ts-price.cgs-ts-price .cgs-controls .price, .cgs-ts-price.cgs-ts-price .cgs-controls .price *, .cgs-ts-price.cgs-ts-price .cgs-controls .cgs-product-price, .cgs-ts-price.cgs-ts-price .cgs-controls .woocommerce-variation-price .price { font-size: var(--cgs-t-price-s) !important; }
.cgs-ts-buttons.cgs-ts-buttons .cgs-upload-btn, .cgs-ts-buttons.cgs-ts-buttons .cgs-upload-btn-text, .cgs-ts-buttons.cgs-ts-buttons .cgs-controls button.single_add_to_cart_button.single_add_to_cart_button { font-size: var(--cgs-t-buttons-s) !important; }
.cgs-ts-tabs.cgs-ts-tabs .cgs-panel .cgs-tab-btn, .cgs-ts-tabs.cgs-ts-tabs .cgs-panel .cgs-sub-btn, .cgs-ts-tabs.cgs-ts-tabs .cgs-panel .cgs-switch-btn { font-size: var(--cgs-t-tabs-s) !important; }
.cgs-ts-panel.cgs-ts-panel .cgs-panel .cgs-pill, .cgs-ts-panel.cgs-ts-panel .cgs-panel .cgs-slider-label, .cgs-ts-panel.cgs-ts-panel .cgs-panel .cgs-slider-val, .cgs-ts-panel.cgs-ts-panel .cgs-panel .cgs-check, .cgs-ts-panel.cgs-ts-panel .cgs-panel .cgs-set-label, .cgs-ts-panel.cgs-ts-panel .cgs-panel .cgs-set-sub, .cgs-ts-panel.cgs-ts-panel .cgs-panel .cgs-switch-label, .cgs-ts-panel.cgs-ts-panel .cgs-panel .cgs-view-source, .cgs-ts-panel.cgs-ts-panel .cgs-panel .cgs-save-default, .cgs-ts-panel.cgs-ts-panel .cgs-panel .cgs-link-btn, .cgs-ts-panel.cgs-ts-panel .cgs-panel .cgs-font-pick { font-size: var(--cgs-t-panel-s) !important; }
.cgs-ts-hints.cgs-ts-hints .cgs-preview-caption, .cgs-ts-hints.cgs-ts-hints .cgs-empty-hint, .cgs-ts-hints.cgs-ts-hints .cgs-hint-in, .cgs-ts-hints.cgs-ts-hints .cgs-stage-placeholder-text, .cgs-ts-hints.cgs-ts-hints .cgs-set-now, .cgs-ts-hints.cgs-ts-hints .cgs-grad-ends, .cgs-ts-hints.cgs-ts-hints .cgs-save-msg { font-size: var(--cgs-t-hints-s) !important; }

/* Text size stepper (SETTINGS > Texts). */
.cgs-size-step { display: flex; align-items: center; gap: 3px; }
.cgs-size-btn {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 22px;
	width: 22px;
	height: 22px;
	margin: 0;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 5px;
	background: rgba(0, 0, 0, 0.3);
	color: #fff;
	font-size: 12px;
	line-height: 1;
	cursor: pointer;
}
.cgs-size-btn:hover { border-color: #19e3f0; color: #19e3f0; }
.cgs-size-btn:focus-visible { outline: 2px solid #19e3f0; outline-offset: 1px; }
.cgs-size-btn:disabled { opacity: 0.35; cursor: default; }
.cgs-size-val { flex: 1 1 auto; min-width: 0; text-align: center; color: #fff; font-size: 10.5px; white-space: nowrap; }

/* ==================================================================
 * v0.9.83 - leaner, more elegant customization panel (same language as
 * the control panel): small caps labels, 30px fields, 34px buttons,
 * small photo thumbnails. "Upload Your Photo" is replaced by the two
 * photos once one is chosen; "Change" on the first picks a new photo.
 * ================================================================== */
.cgs-customize-fields .cgs-controls { font-size: 13px; line-height: 1.35; }
.cgs-customize-fields .cgs-controls,
.cgs-customize-fields .cgs-controls .cgs-field,
.cgs-customize-fields .cgs-prod-group { gap: 6px !important; }

/* Labels: small, spaced capitals like the panel's tab titles. */
.cgs-customize-fields .cgs-controls .cgs-label {
	font-size: 10.5px !important;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	line-height: 1.2 !important;
	margin: 0 0 2px !important;
	opacity: 0.85;
}

/* Fields: 30px high, thin outline, small text. */
.cgs-customize-fields .cgs-controls select,
.cgs-customize-fields .cgs-controls input[type="text"],
.cgs-customize-fields .cgs-controls input[type="number"],
.cgs-customize-fields .cgs-controls .qty {
	box-sizing: border-box;
	height: 30px !important;
	min-height: 30px !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	padding-left: 8px !important;
	font-size: 13px !important;
	line-height: 28px !important;
	border-radius: 6px !important;
}
.cgs-customize-fields .cgs-controls textarea {
	box-sizing: border-box;
	min-height: 30px !important;
	padding: 5px 8px !important;
	font-size: 13px !important;
	line-height: 1.35 !important;
	border-radius: 6px !important;
}
.cgs-customize-fields .cgs-cart-row .qty { width: 52px !important; text-align: center; padding: 0 4px !important; }
.cgs-col-styled .cgs-controls select,
.cgs-col-styled .cgs-controls textarea,
.cgs-col-styled .cgs-controls input[type="text"],
.cgs-col-styled .cgs-controls input[type="number"],
.cgs-col-styled .cgs-controls .qty {
	background-color: rgba(0, 0, 0, 0.25) !important;
	border-color: rgba(255, 255, 255, 0.28) !important;
}
.cgs-col-styled .cgs-controls select:hover,
.cgs-col-styled .cgs-controls textarea:hover,
.cgs-col-styled .cgs-controls .qty:hover { border-color: rgba(255, 255, 255, 0.55) !important; }

/* Price: one tidy line. */
.cgs-customize-fields .cgs-controls .price,
.cgs-customize-fields .cgs-controls .cgs-product-price,
.cgs-customize-fields .cgs-controls .woocommerce-variation-price .price {
	font-size: 15px !important;
	font-weight: 600;
	letter-spacing: 0.01em;
}

/* Buttons: 34px, small bold text, soft corners, no heavy shadow. */
.cgs-customize-fields:not(.cgs-theme-buttons) .cgs-upload-btn,
.cgs-customize-fields:not(.cgs-theme-buttons) button.single_add_to_cart_button,
.cgs-customize-fields:not(.cgs-theme-buttons) button.single_add_to_cart_button.alt,
.cgs-customize-fields:not(.cgs-theme-buttons) button.single_add_to_cart_button.wp-element-button {
	min-height: 34px !important;
	height: 34px;
	padding: 0 12px !important;
	gap: 7px;
	font-size: 12.5px !important;
	font-weight: 700 !important;
	letter-spacing: 0.04em;
	line-height: 1 !important;
	border-radius: 6px !important;
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25) !important;
}
.cgs-customize-fields .cgs-upload-btn svg,
.cgs-customize-fields .single_add_to_cart_button .cgs-cart-icon { width: 15px !important; height: 15px !important; flex: 0 0 15px; }
.cgs-customize-fields .cgs-cart-row .qty { height: 34px !important; min-height: 34px !important; }

/* Before a photo: only the Upload button (the empty boxes are gone). */
.cgs-customize-fields:not(.cgs-has-photo) .cgs-preview-slot { display: none !important; }
.cgs-customize-fields:not(.cgs-has-photo) .cgs-photo-previews > .cgs-status { position: static; margin-top: 4px !important; }
/* After a photo is chosen: the two photos take the button's place. */
.cgs-customize-fields.cgs-has-photo .cgs-upload-box { display: none !important; }

/* Small thumbnails, side by side. */
.cgs-customize-fields .cgs-photo-previews {
	grid-template-columns: repeat(2, 76px) !important;
	justify-content: start;
	gap: 8px !important;
}
.cgs-customize-fields .cgs-preview-box {
	width: 76px;
	height: 76px;
	max-height: none !important;
	aspect-ratio: 1 / 1;
	border-radius: 7px;
}
.cgs-customize-fields .cgs-preview-slot .cgs-preview-caption {
	font-size: 9.5px;
	letter-spacing: 0.03em;
	padding: 1px 3px;
	border-radius: 0 0 6px 6px;
}
.cgs-customize-fields .cgs-preview-box .cgs-loader { gap: 4px; flex-direction: column; font-size: 9.5px; text-align: center; padding: 4px; }
.cgs-customize-fields .cgs-preview-box .cgs-loader-text { font-size: 9.5px; line-height: 1.2; }
.cgs-customize-fields .cgs-preview-box .cgs-spinner { width: 16px; height: 16px; }
.cgs-customize-fields .cgs-photo-previews > .cgs-status { font-size: 11px; padding: 3px 6px; }
.cgs-customize-fields.cgs-has-photo .cgs-photo-previews > .cgs-status { position: static; grid-column: 1 / -1; order: 3; }

/* "Change" on the first photo: the whole thumbnail is clickable. */
.cgs-change-btn { display: none; }
.cgs-has-photo #cgs-slot-enhanced:is(.is-done, .is-failed) .cgs-change-btn {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	margin: 0;
	padding: 0 0 4px;
	cursor: pointer;
	border-radius: inherit;
	transition: background 0.15s ease;
}
.cgs-change-btn span {
	padding: 2px 8px;
	border: 1px solid rgba(25, 227, 240, 0.7);
	border-radius: 999px;
	background: rgba(11, 13, 16, 0.72);
	color: #19e3f0;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-transform: uppercase;
}
.cgs-has-photo #cgs-slot-enhanced:is(.is-done, .is-failed) .cgs-change-btn:hover { background: rgba(0, 0, 0, 0.25); }
.cgs-has-photo #cgs-slot-enhanced:is(.is-done, .is-failed) .cgs-change-btn:hover span { background: #19e3f0; color: #0b0d10; }
.cgs-file-input:focus-visible ~ .cgs-photo-previews .cgs-change-btn span { outline: 2px solid #19e3f0; }
/* The Enhanced photo caption makes way for "Change". */
.cgs-has-photo #cgs-slot-enhanced:is(.is-done, .is-failed) .cgs-preview-caption { display: none; }
/* Thumbnail captions may take two short lines instead of being cut off. */
.cgs-customize-fields .cgs-preview-slot .cgs-preview-caption { white-space: normal; text-overflow: clip; text-align: center; line-height: 1.15; }


/* ==================================================================
 * v0.9.86 - no flash of the default look: the studio stays hidden (its
 * space kept) until frontend.js has applied the saved look and placed
 * the panels, then fades in. If the script never runs, it shows anyway
 * after 3 seconds.
 * ================================================================== */
.cgs-customize-fields:not(.cgs-ready) {
	visibility: hidden;
	animation: cgs-reveal 0s linear 3s forwards;
}
@keyframes cgs-reveal { to { visibility: visible; } }
.cgs-customize-fields.cgs-ready { animation: cgs-fade-in 0.18s ease-out; }
@keyframes cgs-fade-in { from { opacity: 0; } to { opacity: 1; } }


/* v0.9.89 - SERVICES image pill: 3D (on), 2D (amber), No Image (off). */
.cgs-panel button.cgs-pill.cgs-svc-pill.is-alt,
.cgs-panel button.cgs-pill.cgs-svc-pill.is-alt:hover,
.cgs-panel button.cgs-pill.cgs-svc-pill.is-alt:focus {
	background: #f0b429 !important;
	border-color: #f0b429 !important;
	color: #1b1406 !important;
}
.cgs-no-image .cgs-field-photo { display: none !important; }

/* ==================================================================
 * v0.9.89 - the Preview Window has its own colour and outline
 * (SETTINGS > Colors); the stage around the panels stays clear.
 * ================================================================== */
.cgs-viewport, .cgs-viewport > canvas { border-radius: 10px; }
.cgs-viewport.cgs-pv-frame::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: inherit; pointer-events: none; z-index: 2; }
.cgs-stage.is-fullscreen .cgs-viewport, .cgs-stage.is-fullscreen .cgs-viewport > canvas { border-radius: 0; }

/* ==================================================================
 * v0.9.94 - SETTINGS > Styles: look buttons (on/off), Custom Made Styles.
 * ================================================================== */
.cgs-looks { display: flex; flex-wrap: wrap; gap: 6px; }
.cgs-looks[hidden] { display: none !important; }
.cgs-look-btn.is-on { background: #19e3f0 !important; border-color: #19e3f0 !important; color: #111 !important; }
.cgs-look-item { display: inline-flex; align-items: center; gap: 2px; }
.cgs-look-save { display: flex; gap: 6px; margin-top: 6px; }
.cgs-look-save input { flex: 1 1 auto; min-width: 0; padding: 4px 8px; font-size: 12px; }
.cgs-look-io { display: flex; gap: 6px; margin-top: 6px; }
.cgs-look-io .cgs-switch-btn { flex: 1 1 0; }