.ccp-personalizer {
	--ccp-border: #d8d5cf;
	--ccp-surface: #f7f6f2;
	--ccp-ink: #1d1d1b;
	--ccp-muted: #66635e;
	--ccp-accent: #1d1d1b;
	border-block: 1px solid var(--ccp-border);
	color: var(--ccp-ink);
	margin: 24px 0;
	padding: 24px 0;
}

.ccp-personalizer button,
.ccp-preview-modal button,
.ccp-mobile-jump {
	text-transform: none;
}

.ccp-personalizer,
.ccp-personalizer *,
.ccp-preview-modal,
.ccp-preview-modal * {
	box-sizing: border-box;
}

.ccp-personalizer__heading {
	align-items: center;
	display: flex;
	gap: 24px;
	justify-content: space-between;
}

.ccp-personalizer__title {
	color: var(--ccp-heading-color, #1d1d1b);
	font-size: var(--ccp-heading-size, 26px);
	line-height: 1.15;
	margin: 0;
}

.ccp-personalizer__intro,
.ccp-personalizer__help,
.ccp-preview__note {
	color: var(--ccp-body-color, #66635e);
	font-size: var(--ccp-body-size, 14px);
	line-height: 1.5;
	margin: 6px 0 0;
}

.ccp-switch {
	align-items: center;
	cursor: pointer;
	display: inline-flex;
	flex: 0 0 auto;
	gap: 10px;
	min-height: 44px;
}

.ccp-switch__input {
	block-size: 1px;
	inline-size: 1px;
	opacity: 0;
	position: absolute;
}

.ccp-switch__track {
	background: #aaa69f;
	border-radius: 999px;
	display: inline-block;
	height: 26px;
	position: relative;
	transition: background-color 180ms ease;
	width: 46px;
}

.ccp-switch__track::after {
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 1px 3px rgb(0 0 0 / 22%);
	content: '';
	height: 20px;
	left: 3px;
	position: absolute;
	top: 3px;
	transition: transform 180ms ease;
	width: 20px;
}

.ccp-switch__input:checked + .ccp-switch__track {
	background: var(--ccp-primary-bg, #1d1d1b);
}

.ccp-switch__input:checked + .ccp-switch__track::after {
	transform: translateX(20px);
}

.ccp-switch__input:focus-visible + .ccp-switch__track {
	outline: 3px solid color-mix(in srgb, var(--ccp-accent), transparent 60%);
	outline-offset: 3px;
}

.ccp-switch__label,
.ccp-personalizer__label {
	color: var(--ccp-heading-color, #1d1d1b);
	font-size: 0.9375rem;
	font-weight: 600;
}

.ccp-personalizer__fields {
	animation: ccp-reveal 220ms ease-out;
	margin-top: 24px;
}

.ccp-personalizer__input-wrap {
	position: relative;
}

.ccp-personalizer__input {
	background: #fff;
	border: 1px solid var(--ccp-border);
	border-radius: 6px;
	color: var(--ccp-ink);
	font: inherit;
	height: 48px;
	margin-top: 8px;
	padding: 0 72px 0 14px;
	width: 100%;
}

.ccp-personalizer__input:focus {
	border-color: var(--ccp-accent);
	box-shadow: 0 0 0 3px rgb(29 29 27 / 12%);
	outline: 0;
}

.ccp-personalizer__input--invalid {
	border-color: #a82720;
}

.ccp-personalizer__count {
	color: var(--ccp-body-color, #66635e);
	font-size: 0.75rem;
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-35%);
}

.ccp-personalizer__error {
	color: var(--ccp-error-color, #a82720);
	font-size: var(--ccp-error-size, 14px);
	font-weight: 600;
	margin: 8px 0 0;
}

.ccp-preview-launch {
	margin-top: 24px;
}

.ccp-preview-launch__button {
	background: var(--ccp-secondary-bg, #fff);
	border: 1px solid var(--ccp-secondary-border, #d8d5cf);
	border-radius: var(--ccp-secondary-radius, 6px);
	color: var(--ccp-secondary-text, #1d1d1b);
	cursor: pointer;
	font: inherit;
	font-weight: 700;
	font-size: var(--ccp-secondary-size, 16px);
	min-height: var(--ccp-secondary-height, 46px);
	padding: 11px 20px;
	width: 100%;
}

.ccp-preview-launch__button:hover {
	background: var(--ccp-secondary-hover-bg, #f1f0ed);
	border-color: var(--ccp-secondary-border, #d8d5cf);
	color: var(--ccp-secondary-hover-text, #1d1d1b);
}

.ccp-preview-launch__button:focus-visible,
.ccp-preview-modal button:focus-visible {
	outline: 3px solid rgb(29 29 27 / 35%);
	outline-offset: 3px;
}

.ccp-preview-launch__message {
	color: var(--ccp-error-color, #a82720);
	font-size: var(--ccp-error-size, 14px);
	font-weight: 600;
	margin: 8px 0 0;
}

body.ccp-preview-open {
	overflow: hidden;
}

.ccp-preview-modal[hidden] {
	display: none;
}

.ccp-preview-modal {
	background: rgb(0 0 0 / 72%);
	display: grid;
	inset: 0;
	padding: 12px;
	place-items: center;
	position: fixed;
	z-index: 100000;
}

.ccp-preview-modal__dialog {
	background: #fff;
	border: 1px solid var(--ccp-border, #d8d5cf);
	border-radius: 14px;
	box-shadow: 0 24px 70px rgb(0 0 0 / 32%);
	color: var(--ccp-ink, #1d1d1b);
	display: flex;
	flex-direction: column;
	max-height: calc(100dvh - 24px);
	overflow: hidden;
	padding: 16px;
	width: min(100%, 900px);
}

.ccp-preview-modal__header {
	align-items: center;
	display: flex;
	gap: 16px;
	justify-content: space-between;
	margin-bottom: 10px;
}

.ccp-preview-modal__title {
	color: var(--ccp-heading-color, #1d1d1b);
	font-size: var(--ccp-heading-size, 26px);
	line-height: 1.2;
	margin: 0;
}

.ccp-preview-modal__icon-close {
	align-items: center;
	background: var(--ccp-secondary-bg, #fff);
	border: 1px solid var(--ccp-secondary-border, #d8d5cf);
	border-radius: var(--ccp-secondary-radius, 6px);
	color: var(--ccp-secondary-text, #1d1d1b);
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	font-size: 1.5rem;
	height: var(--ccp-secondary-height, 46px);
	justify-content: center;
	line-height: 1;
	width: var(--ccp-secondary-height, 46px);
}

.ccp-preview-modal__icon-close:hover {
	background: var(--ccp-secondary-hover-bg, #f1f0ed);
	color: var(--ccp-secondary-hover-text, #1d1d1b);
}

.ccp-preview-modal__viewport {
	background: var(--ccp-surface, #f7f6f2);
	border-radius: 8px;
	max-height: min(66vh, 720px);
	overflow: auto;
}

.ccp-preview__stage {
	background: var(--ccp-surface);
	border-radius: 8px;
	container-type: inline-size;
	margin: 0 auto;
	overflow: hidden;
	position: relative;
	width: 100%;
}

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

.ccp-preview__text {
	color: var(--ccp-color);
	font-family: var(--ccp-font-family);
	font-size: clamp(10px, var(--ccp-font-size), 300px);
	font-weight: var(--ccp-font-weight);
	left: var(--ccp-x);
	line-height: 1.05;
	max-width: var(--ccp-max-width);
	overflow-wrap: anywhere;
	position: absolute;
	text-align: var(--ccp-text-align);
	top: var(--ccp-y);
	transform: translate(-50%, -50%);
	white-space: nowrap;
	width: var(--ccp-max-width);
}

.ccp-preview__note {
	color: var(--ccp-note-color, #66635e);
	font-size: var(--ccp-note-size, 14px);
	line-height: var(--ccp-note-line-height, 1.5);
	max-width: var(--ccp-note-max-width, 720px);
	text-align: var(--ccp-note-align, left);
}

.ccp-preview-modal__footer {
	display: flex;
	gap: 10px;
	justify-content: flex-end;
	padding-top: 14px;
}

.ccp-preview-modal__secondary,
.ccp-preview-modal__primary {
	cursor: pointer;
	font: inherit;
	font-weight: 700;
	padding: 10px 18px;
}

.ccp-preview-modal__secondary {
	background: var(--ccp-secondary-bg, #fff);
	border: 1px solid var(--ccp-secondary-border, #d8d5cf);
	border-radius: var(--ccp-secondary-radius, 6px);
	color: var(--ccp-secondary-text, #1d1d1b);
	font-size: var(--ccp-secondary-size, 16px);
	min-height: var(--ccp-secondary-height, 46px);
}

.ccp-preview-modal__primary {
	background: var(--ccp-primary-bg, #1d1d1b);
	border: 1px solid var(--ccp-primary-bg, #1d1d1b);
	border-radius: var(--ccp-primary-radius, 6px);
	color: var(--ccp-primary-text, #fff);
	font-size: var(--ccp-primary-size, 16px);
	min-height: var(--ccp-primary-height, 48px);
}

.ccp-preview-modal__secondary:hover {
	background: var(--ccp-secondary-hover-bg, #f1f0ed);
	color: var(--ccp-secondary-hover-text, #1d1d1b);
}

.ccp-preview-modal__primary:hover {
	background: var(--ccp-primary-hover-bg, #393936);
	border-color: var(--ccp-primary-hover-bg, #393936);
	color: var(--ccp-primary-hover-text, #fff);
}

.ccp-preview-modal__primary:disabled {
	cursor: not-allowed;
	opacity: 0.5;
}

.ccp-mobile-jump {
	display: none;
}

/* Flatsome: the Personalizer supplies its own mobile action on enabled products. */
body.ccp-personalizer-enabled.has-sticky-product-cart {
	padding-bottom: 0;
}

body.ccp-personalizer-enabled .sticky-add-to-cart-wrapper,
body.ccp-personalizer-enabled .sticky-add-to-cart {
	display: none !important;
}

@keyframes ccp-reveal {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (max-width: 767px) {
	.ccp-personalizer__heading {
		align-items: flex-start;
		flex-direction: column;
		gap: 14px;
	}

	.ccp-mobile-jump:not([hidden]) {
		align-items: center;
		background: var(--ccp-primary-bg, #1d1d1b);
		border: 0;
		border-radius: 0;
		bottom: 0;
		box-sizing: border-box;
		box-shadow: 0 8px 28px rgb(0 0 0 / 22%);
		color: var(--ccp-primary-text, #fff);
		display: flex;
		font: inherit;
		font-size: var(--ccp-primary-size, 16px);
		font-weight: 700;
		left: 0;
		justify-content: center;
		min-height: var(--ccp-mobile-height, 44px);
		padding: 6px 20px max(6px, env(safe-area-inset-bottom));
		position: fixed;
		right: 0;
		width: 100%;
		z-index: 99;
	}

	.ccp-mobile-jump__label {
		border: var(--ccp-mobile-border-width, 1px) solid var(--ccp-mobile-border-color, #fff);
		border-radius: var(--ccp-mobile-border-radius, 4px);
		display: inline-block;
		line-height: 1.2;
		padding: 3px 10px;
	}

	.ccp-mobile-jump:focus-visible {
		outline: 3px solid #fff;
		outline-offset: 3px;
	}

	.ccp-preview-modal__dialog {
		border-radius: 10px;
		padding: 12px;
	}

	.ccp-preview-modal__footer {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}
}

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

	.ccp-switch__track,
	.ccp-switch__track::after {
		transition: none;
	}

	.ccp-preview-modal * {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}