/* Car Tint Configurator — layout & theme */
.ctc-root {
	--ctc-gradient: linear-gradient(135deg, #3d9400 0%, #81c60b 100%);
	--ctc-accent: #3d9400;
	--ctc-accent-end: #81c60b;
	--ctc-accent-dark: #3d9400;
	--ctc-accent-light: #f3fbe8;
	--ctc-text: #111;
	--ctc-muted: #6b7280;
	--ctc-border: #e5e7eb;
	--ctc-panel-radius: 16px;
	box-sizing: border-box;
	color: var(--ctc-text);
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	line-height: 1.4;
	max-width: 1200px;
	margin: 0 auto;
	padding: 1rem;
}

.ctc-root--full {
	max-width: none;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding-left: clamp(12px, 3vw, 28px);
	padding-right: clamp(12px, 3vw, 28px);
}

.wp-site-blocks .ctc-root.ctc-root--full.alignfull {
	max-width: none !important;
	width: 100vw !important;
}

.ctc-root *,
.ctc-root *::before,
.ctc-root *::after {
	box-sizing: inherit;
}

.ctc-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(340px, 0.65fr);
	gap: 1.75rem;
	align-items: start;
}

@media (max-width: 900px) {
	.ctc-layout {
		grid-template-columns: 1fr;
	}
}

/* ── Vehicle type switch ─────────────────────────────────────────────────── */
.ctc-body-switch {
	display: flex;
	gap: 0.5rem;
	margin-bottom: 1rem;
}

.ctc-body-btn {
	width: 52px;
	height: 42px;
	border: 2px solid var(--ctc-border);
	background: #fff;
	border-radius: 8px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
	-webkit-appearance: none;
	appearance: none;
}

.ctc-body-btn:hover {
	border-color: #cbd5e1;
}

.ctc-body-btn.is-active {
	border-color: var(--ctc-accent);
	box-shadow: 0 0 0 1px var(--ctc-accent);
}

/* Vehicle type buttons are <button>: block theme hover/active pink (#c36) */
.ctc-root .ctc-body-btn {
	background: #fff !important;
	color: inherit !important;
}

.ctc-root .ctc-body-btn:hover,
.ctc-root .ctc-body-btn:focus {
	background: #fff !important;
	border-color: #cbd5e1 !important;
	box-shadow: none !important;
	outline: none;
}

.ctc-root .ctc-body-btn.is-active,
.ctc-root .ctc-body-btn.is-active:hover,
.ctc-root .ctc-body-btn.is-active:focus,
.ctc-root .ctc-body-btn.is-active:active {
	background: var(--ctc-accent-light) !important;
	border-color: #3d9400 !important;
	box-shadow: 0 0 0 1px #3d9400 !important;
}

.ctc-root .ctc-body-btn:active:not(.is-active) {
	background: #fff !important;
}

.ctc-root .ctc-body-btn:focus-visible {
	outline: 2px solid #3d9400 !important;
	outline-offset: 2px;
}

.ctc-body-icon-svg {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 26px;
	color: #64748b;
	transition: color 0.18s ease, transform 0.18s ease;
}

.ctc-body-btn:hover .ctc-body-icon-svg {
	color: #475569;
}

.ctc-body-btn.is-active .ctc-body-icon-svg {
	color: var(--ctc-accent);
}

.ctc-body-switch-svg {
	width: 100%;
	height: 100%;
	display: block;
	overflow: visible;
}

/* ── 3D viewer ───────────────────────────────────────────────────────────── */
.ctc-viewer-wrap {
	position: relative;
}

.ctc-preview-col {
	min-width: 0;
}

.ctc-viewer {
	position: relative;
	width: 100%;
	background: #f5f5f5;
	border-radius: var(--ctc-panel-radius);
	overflow: hidden;
	min-height: min(360px, 55vw);
	aspect-ratio: 16 / 10;
	touch-action: none;
}

.ctc-three-canvas {
	display: block;
	width: 100%;
	height: 100%;
	outline: none;
	touch-action: none;
	cursor: grab;
}

.ctc-fallback-poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: #f5f5f5;
	z-index: 2;
}

.ctc-viewer.ctc-orbit-pan .ctc-three-canvas {
	cursor: move;
}

.ctc-viewer:active .ctc-three-canvas {
	cursor: grabbing;
}

.ctc-three-hint {
	position: absolute;
	left: 50%;
	bottom: 0.5rem;
	transform: translateX(-50%);
	margin: 0;
	padding: 0.25rem 0.6rem;
	font-size: 0.72rem;
	color: var(--ctc-muted);
	background: rgb(255 255 255 / 0.85);
	border-radius: 6px;
	pointer-events: none;
	max-width: 92%;
	text-align: center;
}

/* ── Loading overlay ─────────────────────────────────────────────────────── */
.ctc-loading {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: #f5f5f5;
	z-index: 10;
	gap: 0.75rem;
	transition: opacity 0.4s;
}

.ctc-loading.is-hidden {
	opacity: 0;
	pointer-events: none;
}

.ctc-loading.has-error .ctc-loading-spinner {
	display: none;
}

.ctc-loading.has-error .ctc-loading-text {
	color: #3d9400;
	font-weight: 700;
	text-align: center;
	max-width: 85%;
}

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

.ctc-loading-spinner {
	width: 44px;
	height: 44px;
	border: 3px solid var(--ctc-border);
	border-top-color: var(--ctc-accent);
	border-radius: 50%;
	animation: ctc-spin 0.8s linear infinite;
}

.ctc-loading-text {
	font-size: 0.82rem;
	color: var(--ctc-muted);
	font-weight: 500;
}

.ctc-loading-pct {
	font-size: 1.4rem;
	font-weight: 800;
	color: var(--ctc-accent-dark);
	font-variant-numeric: tabular-nums;
}

/* ── Toolbar ─────────────────────────────────────────────────────────────── */
.ctc-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 0.2rem;
	align-items: center;
	justify-content: center;
	margin-top: 0.65rem;
	padding: 0.3rem 0.55rem;
	background: #d1d5db;
	border-radius: 10px;
	max-width: 340px;
	margin-left: auto;
	margin-right: auto;
}

.ctc-tool-btn {
	border: none;
	background: transparent;
	width: 34px;
	height: 34px;
	border-radius: 6px;
	cursor: pointer;
	font-size: 15px;
	line-height: 1;
	color: #374151;
	transition: background 0.15s, color 0.15s;
}

.ctc-tool-btn:hover {
	background: rgb(255 255 255 / 0.55);
}

.ctc-tool-btn.is-active {
	background: rgb(255 255 255 / 0.7);
	color: #111;
}

.ctc-tool-sep {
	width: 1px;
	height: 18px;
	background: #9ca3af;
	margin: 0 0.15rem;
	flex-shrink: 0;
}

/* ── Panel ────────────────────────────────────────────────────────────────── */
.ctc-panel {
	background: #fff;
	border-radius: 18px;
	box-shadow: 0 1px 4px rgb(0 0 0 / 0.06);
	padding: 1.1rem 1rem 1.2rem;
	border: 1px solid #e7e7e7;
}

.ctc-acc-item {
	border: 1px solid #d9d9d9;
	border-radius: 999px;
	margin-bottom: 0.45rem;
	overflow: hidden;
	background: #f5f5f5;
	transition: border-radius 0.2s, background 0.2s, border-color 0.2s;
}

.ctc-acc-item.is-open {
	border-color: var(--ctc-accent);
	box-shadow: none;
	background: #f9fdf0;
	border-radius: 14px;
}

.ctc-acc-head {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.42rem 0.85rem;
	background: #f5f5f5;
	border: none;
	cursor: pointer;
	font-weight: 700;
	font-size: 0.68rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-align: left;
	color: #111 !important;
	-webkit-appearance: none;
	appearance: none;
}

/* Block theme button:hover (e.g. #c36) — accordion uses brand greens only */
.ctc-root .ctc-acc-item:not(.is-open) .ctc-acc-head:hover,
.ctc-root .ctc-acc-item:not(.is-open) .ctc-acc-head:focus {
	background: var(--ctc-gradient) !important;
	color: #fff !important;
	outline: none;
	box-shadow: none;
}

.ctc-root .ctc-acc-item:not(.is-open) .ctc-acc-head:hover .ctc-acc-mark,
.ctc-root .ctc-acc-item:not(.is-open) .ctc-acc-head:hover .ctc-acc-chevron,
.ctc-root .ctc-acc-item:not(.is-open) .ctc-acc-head:focus .ctc-acc-mark,
.ctc-root .ctc-acc-item:not(.is-open) .ctc-acc-head:focus .ctc-acc-chevron {
	color: #fff !important;
}

.ctc-root .ctc-acc-item:not(.is-open) .ctc-acc-head:active {
	background: var(--ctc-gradient) !important;
	color: #fff !important;
}

.ctc-root .ctc-acc-item:not(.is-open) .ctc-acc-head:active .ctc-acc-mark,
.ctc-root .ctc-acc-item:not(.is-open) .ctc-acc-head:active .ctc-acc-chevron {
	color: #fff !important;
}

.ctc-root .ctc-acc-item.is-open .ctc-acc-head {
	background: transparent !important;
	color: #111 !important;
}

.ctc-root .ctc-acc-item.is-open .ctc-acc-head:hover,
.ctc-root .ctc-acc-item.is-open .ctc-acc-head:focus {
	background: rgb(129 198 11 / 0.12) !important;
	color: #111 !important;
	outline: none;
}

.ctc-root .ctc-acc-item.is-open .ctc-acc-head:hover .ctc-acc-mark,
.ctc-root .ctc-acc-item.is-open .ctc-acc-head:focus .ctc-acc-mark {
	color: #3d9400 !important;
}

.ctc-root .ctc-acc-item.is-open .ctc-acc-head:hover .ctc-acc-chevron,
.ctc-root .ctc-acc-item.is-open .ctc-acc-head:focus .ctc-acc-chevron {
	color: #3d9400 !important;
}

.ctc-acc-mark {
	width: 1.1rem;
	text-align: center;
	color: var(--ctc-accent-dark);
	font-weight: 800;
	font-size: 0.85rem;
	flex-shrink: 0;
}

.ctc-acc-chevron {
	margin-left: auto;
	color: var(--ctc-muted);
	font-size: 0.7rem;
	transition: transform 0.25s ease;
	flex-shrink: 0;
	line-height: 1;
}

.ctc-acc-item.is-open .ctc-acc-chevron {
	transform: rotate(180deg);
	color: var(--ctc-accent-dark);
}

.ctc-acc-body {
	padding: 0.7rem 0.85rem 0.9rem;
	border-top: none;
}

.ctc-label {
	display: block;
	font-size: 0.6rem;
	font-weight: 700;
	margin: 0.55rem 0 0.35rem;
	color: #374151;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.ctc-hint {
	font-size: 0.72rem;
	color: var(--ctc-muted);
	margin: 0.25rem 0 0;
}

.ctc-select {
	width: 100%;
	padding: 0.55rem 2rem 0.55rem 0.7rem;
	border-radius: 8px;
	border: 1px solid var(--ctc-border);
	font-weight: 700;
	font-size: 0.72rem;
	background: #fff 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' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 0.7rem center;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	text-transform: uppercase;
	cursor: pointer;
	color: var(--ctc-text);
}

.ctc-select:focus {
	outline: 2px solid var(--ctc-accent);
	outline-offset: -1px;
	border-color: var(--ctc-accent);
}

/* ── Window tiles ─────────────────────────────────────────────────────────── */
.ctc-win-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.35rem;
	margin: 0.25rem 0 0.75rem;
}

.ctc-win-tile {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 0.4rem;
	padding: 0.5rem 0.5rem;
	border-radius: 6px;
	border: 1px solid var(--ctc-border);
	background: #fafafa;
	font-size: 0.58rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	color: var(--ctc-muted);
	transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.ctc-win-tile .ctc-check {
	opacity: 0;
	color: var(--ctc-accent-dark);
	font-weight: 900;
	font-size: 0.72rem;
	flex-shrink: 0;
	transition: opacity 0.15s;
}

.ctc-win-tile.is-on {
	border-color: var(--ctc-accent);
	color: var(--ctc-text);
	background: #fcfef7;
}

.ctc-win-tile.is-on .ctc-check {
	opacity: 1;
}

.ctc-vlt-slider-wrap {
	margin-top: 0.1rem;
}

.ctc-vlt-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 0.58rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #6b7280;
	font-weight: 600;
}

.ctc-vlt-top strong {
	color: var(--ctc-accent-dark);
	font-size: 0.68rem;
}

/* Custom VLT slider */
.ctc-vlt-slider {
	width: 100%;
	margin-top: 0.3rem;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	height: 6px;
	background: var(--ctc-gradient);
	border-radius: 3px;
	outline: none;
	cursor: pointer;
}

.ctc-vlt-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--ctc-gradient);
	border: 3px solid #fff;
	box-shadow: 0 1px 4px rgb(0 0 0 / 0.18);
	cursor: pointer;
	transition: transform 0.1s;
}

.ctc-vlt-slider::-webkit-slider-thumb:hover {
	transform: scale(1.12);
}

.ctc-vlt-slider::-moz-range-thumb {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--ctc-gradient);
	border: 3px solid #fff;
	box-shadow: 0 1px 4px rgb(0 0 0 / 0.18);
	cursor: pointer;
}

.ctc-vlt-slider::-moz-range-track {
	height: 6px;
	background: var(--ctc-gradient);
	border-radius: 3px;
	border: none;
}

/* ── Wrap swatches ────────────────────────────────────────────────────────── */
.ctc-swatch-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	margin: 0.25rem 0 0.75rem;
}

.ctc-swatch {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 2px solid transparent;
	cursor: pointer;
	transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
	box-shadow: 0 1px 3px rgb(0 0 0 / 0.12);
	padding: 0;
}

.ctc-swatch:hover {
	transform: scale(1.12);
}

.ctc-swatch.is-active {
	border-color: #3d9400;
	box-shadow: 0 0 0 2px #3d9400, 0 2px 8px rgb(61 148 0 / 0.25);
	transform: scale(1.15);
}

.ctc-custom-color {
	width: 100%;
	height: 42px;
	border: 1px solid var(--ctc-border);
	border-radius: 10px;
	padding: 4px;
	background: #fff;
	cursor: pointer;
}

/* ── Finish selector ─────────────────────────────────────────────────────── */
.ctc-finish-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 0.4rem;
	margin: 0.25rem 0 0.5rem;
}

.ctc-finish-btn {
	padding: 0.55rem 0.25rem;
	border: 1px solid var(--ctc-border);
	border-radius: 8px;
	background: #f9fafb;
	font-size: 0.65rem;
	font-weight: 700;
	cursor: pointer;
	color: var(--ctc-muted);
	text-align: center;
	letter-spacing: 0.02em;
	transition: all 0.15s;
}

.ctc-finish-btn:hover {
	border-color: #cbd5e1;
}

.ctc-finish-btn.is-active {
	border-color: var(--ctc-accent);
	background: #f7fee7;
	color: var(--ctc-text);
	box-shadow: 0 0 0 1px var(--ctc-accent);
}

/* Finish + window tiles + wrap swatches are <button>: kill theme pink on hover */
.ctc-root .ctc-finish-btn {
	-webkit-appearance: none;
	appearance: none;
	background: #f9fafb !important;
	color: #6b7280 !important;
	border: 1px solid var(--ctc-border) !important;
}

.ctc-root .ctc-finish-btn:hover,
.ctc-root .ctc-finish-btn:focus {
	background: #fff !important;
	border-color: #cbd5e1 !important;
	color: #374151 !important;
	box-shadow: none !important;
	outline: none;
}

.ctc-root .ctc-finish-btn.is-active,
.ctc-root .ctc-finish-btn.is-active:hover,
.ctc-root .ctc-finish-btn.is-active:focus,
.ctc-root .ctc-finish-btn.is-active:active {
	background: var(--ctc-accent-light) !important;
	border-color: #3d9400 !important;
	color: #111 !important;
	box-shadow: 0 0 0 1px #3d9400 !important;
}

.ctc-root .ctc-finish-btn:focus-visible {
	outline: 2px solid #3d9400 !important;
	outline-offset: 2px;
}

.ctc-root .ctc-win-tile {
	background: #fafafa !important;
	color: #6b7280 !important;
	border: 1px solid var(--ctc-border) !important;
	-webkit-appearance: none;
	appearance: none;
}

.ctc-root .ctc-win-tile:hover,
.ctc-root .ctc-win-tile:focus {
	background: #fafafa !important;
	border-color: #cbd5e1 !important;
	color: #374151 !important;
	box-shadow: none !important;
	outline: none;
}

.ctc-root .ctc-win-tile.is-on,
.ctc-root .ctc-win-tile.is-on:hover,
.ctc-root .ctc-win-tile.is-on:focus,
.ctc-root .ctc-win-tile.is-on:active {
	background: #fcfef7 !important;
	border-color: #3d9400 !important;
	color: #111 !important;
	box-shadow: none !important;
}

.ctc-root .ctc-win-tile.is-on .ctc-check {
	color: #3d9400 !important;
}

.ctc-root .ctc-win-tile:focus-visible {
	outline: 2px solid #3d9400 !important;
	outline-offset: 2px;
}

.ctc-root .ctc-swatch {
	-webkit-appearance: none;
	appearance: none;
	box-shadow: 0 1px 3px rgb(0 0 0 / 0.12) !important;
}

.ctc-root .ctc-swatch:hover,
.ctc-root .ctc-swatch:focus {
	box-shadow: 0 2px 8px rgb(61 148 0 / 0.2) !important;
	filter: brightness(1.06);
	outline: none;
}

.ctc-root .ctc-swatch.is-active,
.ctc-root .ctc-swatch.is-active:hover,
.ctc-root .ctc-swatch.is-active:focus {
	filter: none;
	box-shadow: 0 0 0 2px #3d9400, 0 2px 8px rgb(61 148 0 / 0.25) !important;
}

/* ── CTA ──────────────────────────────────────────────────────────────────── */
.ctc-muted {
	color: var(--ctc-muted);
	font-size: 0.9rem;
	margin: 0 0 0.75rem;
}

.ctc-cta {
	width: 100%;
	margin-top: 1rem;
	padding: 0.95rem 1rem;
	border: none;
	border-radius: 10px;
	background: var(--ctc-gradient);
	color: #fff;
	font-weight: 800;
	font-size: 0.95rem;
	letter-spacing: 0.06em;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	transition: filter 0.15s, transform 0.05s;
	box-shadow: 0 4px 16px rgb(61 148 0 / 0.28);
}

.ctc-cta:hover {
	filter: brightness(1.03);
}

.ctc-cta:active {
	transform: translateY(1px);
}

.ctc-root .ctc-cta,
.ctc-root .ctc-cta:hover,
.ctc-root .ctc-cta:focus,
.ctc-root .ctc-cta:active {
	background: var(--ctc-gradient) !important;
	color: #fff !important;
	box-shadow: 0 4px 16px rgb(61 148 0 / 0.28) !important;
}

.ctc-root .ctc-cta:hover,
.ctc-root .ctc-cta:focus {
	filter: brightness(1.05);
}

.ctc-cta-ic {
	display: inline-flex;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #fff;
	color: #3d9400;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 700;
}

/* ── Modal ────────────────────────────────────────────────────────────────── */
.ctc-modal[hidden] {
	display: none;
}

.ctc-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}

.ctc-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgb(0 0 0 / 0.45);
}

.ctc-modal-card {
	position: relative;
	z-index: 1;
	background: #fff;
	border-radius: 14px;
	padding: 2.85rem 1.35rem 1.25rem;
	max-width: 480px;
	width: 100%;
	box-shadow: 0 20px 50px rgb(0 0 0 / 0.2);
}

.ctc-modal-x {
	position: absolute;
	top: 0.65rem;
	right: 0.65rem;
	z-index: 2;
	width: 2.25rem;
	height: 2.25rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 8px;
	background: rgb(255 255 255 / 0.95);
	font-size: 1.35rem;
	line-height: 1;
	cursor: pointer;
	color: #3d9400;
	box-shadow: 0 1px 3px rgb(0 0 0 / 0.08);
}

.ctc-modal-x:hover {
	background: #f3fbe8;
	color: #3d9400;
}

.ctc-modal-title {
	margin: 0 0 0.5rem;
	font-size: 1.15rem;
}

.ctc-quote-status {
	font-size: 0.82rem;
	color: #374151;
	margin: 0 0 0.65rem;
}

.ctc-quote-breakdown {
	border: 1px solid var(--ctc-border);
	border-radius: 8px;
	padding: 0.5rem 0.65rem;
	margin-bottom: 0.7rem;
	background: #f9fafb;
}

.ctc-quote-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.5rem;
	padding: 0.2rem 0;
	font-size: 0.78rem;
	color: #374151;
}

.ctc-quote-row--total {
	margin-top: 0.3rem;
	padding-top: 0.4rem;
	border-top: 1px solid var(--ctc-border);
	font-size: 0.86rem;
	font-weight: 800;
}

.ctc-modal-ta {
	width: 100%;
	font-family: ui-monospace, Consolas, monospace;
	font-size: 0.8rem;
	padding: 0.65rem;
	border-radius: 8px;
	border: 1px solid var(--ctc-border);
	resize: vertical;
	margin-bottom: 0.75rem;
}

.ctc-modal-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.ctc-btn-primary,
.ctc-btn-secondary {
	border-radius: 8px;
	padding: 0.55rem 0.85rem;
	font-weight: 600;
	cursor: pointer;
	border: 1px solid var(--ctc-border);
	background: #fff;
	font-family: inherit;
	color: #374151;
}

.ctc-btn-secondary:hover {
	background: #f9fafb;
	border-color: #d1d5db;
	color: #111827;
}

.ctc-btn-primary {
	background: var(--ctc-gradient);
	border: none;
	color: #fff;
}

.ctc-btn-gradient {
	border: none;
	border-radius: 10px;
	padding: 0.6rem 1rem;
	font-weight: 700;
	cursor: pointer;
	background: var(--ctc-gradient);
	color: #fff;
	box-shadow: 0 2px 10px rgb(61 148 0 / 0.25);
	transition: filter 0.15s, transform 0.05s;
}

.ctc-btn-gradient:hover {
	filter: brightness(1.05);
}

.ctc-btn-gradient:active {
	transform: translateY(1px);
}

.ctc-btn-gradient:disabled {
	opacity: 0.65;
	cursor: not-allowed;
}

/* ── Commercial page layout (shortcode: commercial_tint_configurator) ───── */
.ctc-commercial-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.65fr) minmax(300px, 0.95fr);
	gap: clamp(1rem, 3vw, 2rem);
	align-items: stretch;
}

@media (max-width: 960px) {
	.ctc-commercial-layout {
		grid-template-columns: 1fr;
	}
}

.ctc-commercial-preview {
	min-width: 0;
}

.ctc-commercial-hero {
	position: relative;
	border-radius: var(--ctc-panel-radius);
	overflow: hidden;
	width: 100%;
	height: clamp(300px, min(52vw, 72vh), 760px);
	background: #f5f5f5;
	box-shadow: 0 4px 24px rgb(0 0 0 / 0.08);
}

.ctc-commercial-hero--has-backdrop {
	background-color: #e8e8e8;
	background-image: var(--ctc-commercial-hero-image);
	background-size: cover;
	background-position: center;
}

.ctc-commercial-viewer-shell {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	padding: 0.65rem 0.65rem 0.55rem;
	pointer-events: none;
}

.ctc-commercial-viewer-shell .ctc-viewer-wrap {
	pointer-events: auto;
	width: 100%;
	max-width: none;
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

.ctc-commercial-viewer-shell .ctc-viewer {
	flex: 1;
	min-height: 0;
	aspect-ratio: unset;
	background: #f5f5f5;
	border: 1px solid #e2e8f0;
}

.ctc-toolbar--commercial {
	background: rgb(255 255 255 / 0.92);
	margin-top: 0.5rem;
}

.ctc-commercial-panel {
	min-width: 0;
	display: flex;
	align-items: flex-start;
}

.ctc-commercial-card {
	width: 100%;
	background: #fff;
	border-radius: 18px;
	box-shadow: 0 12px 40px rgb(0 0 0 / 0.1);
	padding: 1.25rem 1.2rem 1.35rem;
	border: 1px solid #e7e7e7;
}

.ctc-commercial-card > .ctc-label--first {
	margin-top: 0;
}

.ctc-comm-swatch-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0.35rem 0 1rem;
}

/* Black shade row: visually de-emphasized when mirror/frost is on, but must stay clickable. */
.ctc-comm-swatch-row.ctc-comm-black-row--muted {
	opacity: 0.55;
}

.ctc-comm-swatch {
	position: relative;
	width: 48px;
	height: 48px;
	border-radius: 10px;
	border: 2px solid var(--ctc-border);
	cursor: pointer;
	padding: 0;
	flex-shrink: 0;
	transition: box-shadow 0.15s, transform 0.1s, border-color 0.15s, filter 0.15s;
	background: var(--ctc-swatch-fill, #6b7280);
	-webkit-appearance: none;
	appearance: none;
}

.ctc-comm-swatch--mirror {
	background: linear-gradient(145deg, #c5d0dc, #8fa8c0 55%, #eef2f6);
}

.ctc-comm-swatch--frost {
	background: linear-gradient(145deg, #f5f8fb, #e8edf2);
	border-color: #cbd5e1;
}

.ctc-comm-swatch:hover {
	transform: scale(1.04);
}

/* Commercial swatches are <button>: block theme button:hover (e.g. pink #c36) */
.ctc-root .ctc-comm-swatch:not(.ctc-comm-swatch--mirror):not(.ctc-comm-swatch--frost) {
	background: var(--ctc-swatch-fill, #6b7280) !important;
	color: transparent !important;
}

.ctc-root .ctc-comm-swatch:not(.ctc-comm-swatch--mirror):not(.ctc-comm-swatch--frost):not(.is-active) {
	box-shadow: none !important;
}

.ctc-root .ctc-comm-swatch--mirror {
	background: linear-gradient(145deg, #c5d0dc, #8fa8c0 55%, #eef2f6) !important;
}

.ctc-root .ctc-comm-swatch--frost {
	background: linear-gradient(145deg, #f5f8fb, #e8edf2) !important;
}

.ctc-root .ctc-comm-swatch:not(.ctc-comm-swatch--mirror):not(.ctc-comm-swatch--frost):hover,
.ctc-root .ctc-comm-swatch:not(.ctc-comm-swatch--mirror):not(.ctc-comm-swatch--frost):focus,
.ctc-root .ctc-comm-swatch:not(.ctc-comm-swatch--mirror):not(.ctc-comm-swatch--frost):active {
	background: var(--ctc-swatch-fill, #6b7280) !important;
	filter: brightness(1.07);
	outline: none;
}

.ctc-root .ctc-comm-swatch--mirror:hover,
.ctc-root .ctc-comm-swatch--mirror:focus,
.ctc-root .ctc-comm-swatch--mirror:active {
	background: linear-gradient(145deg, #c5d0dc, #8fa8c0 55%, #eef2f6) !important;
	filter: brightness(1.05);
	outline: none;
}

.ctc-root .ctc-comm-swatch--frost:hover,
.ctc-root .ctc-comm-swatch--frost:focus,
.ctc-root .ctc-comm-swatch--frost:active {
	background: linear-gradient(145deg, #f5f8fb, #e8edf2) !important;
	filter: brightness(1.03);
	outline: none;
}

.ctc-comm-swatch.is-active {
	border-color: transparent;
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px #3d9400, 0 4px 14px rgb(61 148 0 / 0.35);
}

.ctc-root .ctc-comm-swatch.is-active {
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px #3d9400, 0 4px 14px rgb(61 148 0 / 0.35) !important;
}

.ctc-root .ctc-comm-swatch.is-active:hover,
.ctc-root .ctc-comm-swatch.is-active:focus {
	filter: brightness(1.05);
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px #3d9400, 0 4px 14px rgb(61 148 0 / 0.35) !important;
}

/* Commercial viewer tools: neutrals on hover (buttons) */
.ctc-root--commercial .ctc-toolbar .ctc-tool-btn:hover,
.ctc-root--commercial .ctc-toolbar .ctc-tool-btn:focus,
.ctc-root--commercial .ctc-toolbar .ctc-tool-btn:active {
	background: rgb(255 255 255 / 0.55) !important;
	color: #374151 !important;
}

.ctc-comm-swatch-check {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1rem;
	font-weight: 900;
	color: #fff;
	text-shadow: 0 1px 2px rgb(0 0 0 / 0.45);
	opacity: 0;
	transition: opacity 0.15s;
}

.ctc-comm-swatch.is-active .ctc-comm-swatch-check {
	opacity: 1;
}

/* Modal: contact form */
.ctc-field {
	display: block;
	margin-bottom: 0.75rem;
}

.ctc-field-label {
	display: block;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #374151;
	margin-bottom: 0.35rem;
}

.ctc-input {
	width: 100%;
	padding: 0.55rem 0.65rem;
	border-radius: 8px;
	border: 1px solid var(--ctc-border);
	font-size: 0.95rem;
	font-family: inherit;
}

.ctc-input:focus {
	outline: 2px solid #3d9400;
	outline-offset: 0;
	border-color: #3d9400;
}

.ctc-input--textarea {
	resize: vertical;
	min-height: 96px;
}

.ctc-form-error {
	color: #3d9400;
	font-size: 0.82rem;
	margin: 0 0 0.5rem;
	font-weight: 700;
}

.ctc-modal-panel--success {
	padding-right: 0.25rem;
}

.ctc-modal-panel--success .ctc-success-msg {
	margin: 0 0 1rem;
	padding-right: 2rem;
	font-size: 1rem;
	line-height: 1.45;
	color: #3d9400;
	font-weight: 600;
}

.ctc-modal-actions--single {
	justify-content: flex-end;
}