/*
 * Custom Product Personalizer — frontend styles.
 *
 * The preview is a percentage-positioned overlay inside the WooCommerce
 * gallery anchor, so the composition scales with the responsive product
 * image. Gallery interactions (zoom/swipe) keep working through the
 * overlay (pointer-events: none). Field-panel styles land with T015.
 */

/* Anchor: any gallery element that hosts the preview overlay. */
.cpp-preview-anchor {
	position: relative !important;
}

/* Preview overlay: fills the gallery image area while active. */
.cpp-preview {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 5;
}

/* A non-default gallery image is being displayed: the overlay hides
   without being unmounted (state is preserved). */
.cpp-preview.cpp-preview--hidden {
	display: none;
}

/* Standalone fallback for themes without a usable gallery anchor. */
.cpp-preview--standalone {
	position: relative;
	top: auto;
	right: auto;
	bottom: auto;
	left: auto;
	width: 100%;
	aspect-ratio: 1 / 1;
	margin: 0 0 1em;
}

/* Layer: percentage-positioned box inside the preview. */
.cpp-layer {
	position: absolute;
	transform-origin: 50% 50%;
}

/* Image and upload layers fill their box without distortion. */
.cpp-layer .cpp-layer-media {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	pointer-events: none;
}

/* Text layer content box. V1 is single-line: nowrap keeps the whole
   line measurable for text fitting (longest word included). */
.cpp-layer .cpp-layer-text {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	white-space: nowrap;
	overflow: visible;
	pointer-events: none;
}

/* ------------------------------------------------------------------
 * Personalization panel (T015, server-rendered markup).
 * ------------------------------------------------------------------ */
.cpp-panel {
	margin-top: 0;
	margin-right: var(--pcc-panel-mr, 0);
	margin-bottom: var(--pcc-panel-mb, 1em);
	margin-left: var(--pcc-panel-ml, 0);
	padding: var(--pcc-panel-pt, 0) var(--pcc-panel-pr, 0) var(--pcc-panel-pb, 0) var(--pcc-panel-pl, 0);
}

.cpp-field {
	margin-top: 0;
	margin-right: var(--pcc-field-mr, 0);
	margin-bottom: var(--pcc-field-mb, 0.4em);
	margin-left: var(--pcc-field-ml, 0);
	padding: var(--pcc-field-pt, 0) var(--pcc-field-pr, 0) var(--pcc-field-pb, 0) var(--pcc-field-pl, 0);
}

.cpp-field__label {
	display: block;
	font-size: var(--pcc-label-fs, inherit);
	font-weight: var(--pcc-label-fw, 600);
	color: var(--pcc-label-color, inherit);
	line-height: var(--pcc-label-lh, inherit);
	margin: var(--pcc-label-mt, 0) var(--pcc-label-mr, 0) var(--pcc-label-mb, 0.35em) var(--pcc-label-ml, 0);
	padding: var(--pcc-label-pt, 0) var(--pcc-label-pr, 0) var(--pcc-label-pb, 0) var(--pcc-label-pl, 0);
}

.cpp-required {
	color: var(--pcc-req-color, #b32d2e);
	font-size: var(--pcc-req-fs, inherit);
	font-weight: var(--pcc-req-fw, inherit);
	margin-left: var(--pcc-req-ml, 2px);
	margin-right: var(--pcc-req-mr, 0);
}

/* The indicator is toggled from the computed required state. */
.cpp-required[hidden] {
	display: none;
}

.cpp-input {
	width: 100%;
	height: 38px;
	box-sizing: border-box;
	max-width: 100%;
	margin: var(--pcc-text-mt, 0) var(--pcc-text-mr, 0) var(--pcc-text-mb, 0) var(--pcc-text-ml, 0);
}

/* JSON-configurable inputStyle: rules apply ONLY to inputs that declare
   inputStyle (cpp-input--styled + inline --is-* custom properties).
   Unstyled inputs keep the exact theme appearance above. */
.cpp-fields input.cpp-input--styled {
	height: var(--is-h, 38px);
	width: var(--is-w, 100%);
	padding: var(--is-py, 6px) var(--is-px, 8px);
	font-size: var(--is-fs, 14px);
	font-weight: var(--is-fw, 400);
	color: var(--is-color, #111111);
	background-color: var(--is-bg, #ffffff);
	border: var(--is-border-w, 0.5px) solid var(--is-border-c, #c0bfbc);
	border-radius: var(--is-radius, 8px);
}

/* Focus: visible, accessible, and driven by the configured values with
   safe fallbacks to the input's own normal border/background. */
.cpp-fields input.cpp-input--styled:focus,
.cpp-fields input.cpp-input--styled:focus-visible {
	border-color: var(--is-focus-c, var(--is-border-c, #c0bfbc));
	border-width: var(--is-focus-w, var(--is-border-w, 1px));
	background-color: var(--is-focus-bg, var(--is-bg, #ffffff));
	box-shadow: none;
	outline: none;
}

.cpp-swatch-group {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
}

/* Swatch button: fully driven by per-swatch CSS custom properties
   (defaults preserve the legacy appearance when no style is configured). */
.cpp-swatch {
	display: inline-flex;
	align-items: center;
	flex-direction: column;
	gap: var(--sw-gap, 0.4em);
	padding: var(--sw-pad, 0.35em 0.6em);
	width: var(--sw-w, auto);
	height: var(--sw-h, auto);
	border: var(--sw-border-w, 0.5px) solid var(--sw-border-c, #c0bfbc);
	border-radius: var(--sw-radius, 8px);
	background: #fff;
	cursor: pointer;
	position: relative;
}

/* Label position variants (field-level or per-option). */
.cpp-swatch--label-left { flex-direction: row; }
.cpp-swatch--label-right { flex-direction: row-reverse; }
.cpp-swatch--label-top { flex-direction: column-reverse; }
.cpp-swatch--label-tooltip { flex-direction: column; }

/* Hover border (defaults to the normal border color = no visual change). */
.cpp-swatch:hover {
	border-color: var(--sw-hover-c, var(--sw-border-c, #c0bfbc));
	box-shadow: 0 0 0 var(--sw-hover-w, 0px) var(--sw-hover-c, var(--sw-border-c, #c0bfbc));
}

.cpp-swatch.cpp-swatch--selected {
	border-color: var(--sw-sel-c, var(--cpp-primary, #111111));
	border-width: max(var(--sw-border-w, 0.5px), var(--sw-sel-w, 2px));
}

/* Tooltip: label text duplicated into data-cpp-tip; shown on hover and
   keyboard focus. The real label stays in the a11y tree (visually hidden). */
.cpp-swatch--tooltip .cpp-swatch__label--sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

.cpp-swatch--tooltip::after {
	content: attr(data-cpp-tip);
	display: none;
	position: absolute;
	bottom: calc(100% + 6px);
	left: 50%;
	transform: translateX(-50%);
	padding: 0.3em 0.6em;
	border-radius: 4px;
	background: #1d2327;
	color: #fff;
	font-size: 0.85em;
	white-space: nowrap;
	z-index: 20;
	pointer-events: none;
}

.cpp-swatch--tooltip:hover::after,
.cpp-swatch--tooltip:focus-visible::after {
	display: block;
}

/* Swatch UI image: sized via optional per-field swatchStyle custom
   properties (fallbacks = the plugin default). !important is required
   to win over theme rules like kubelio's `.rt-img img{height:auto!important}`. */
.cpp-swatch__image {
	display: block;
	width: var(--sw-image-w, 36px) !important;
	height: var(--sw-image-h, 36px) !important;
	border-radius: var(--sw-image-radius, 6px) !important;
	object-fit: var(--sw-fit, cover);
}

.cpp-error {
	color: #b32d2e;
	margin-top: 0.35em;
	min-height: 1em;
}

/* ------------------------------------------------------------------
 * Upload field card (display-only modernization; the real input stays
 * in the DOM, visually hidden but keyboard-focusable).
 * ------------------------------------------------------------------ */
.cpp-upload__input {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Compact dropzone: one row — small icon + "Choose image", centered —
   with the format/size hint centered on a second line. */
.cpp-upload__dropzone {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.4em var(--pcc-up-dz-gap, 0.5em);
	margin: var(--pcc-up-dz-mt, 0) var(--pcc-up-dz-mr, 0) var(--pcc-up-dz-mb, 0) var(--pcc-up-dz-ml, 0);
	padding: var(--pcc-up-dz-pt, 0.55em) var(--pcc-up-dz-pr, 0.75em) var(--pcc-up-dz-pb, 0.55em) var(--pcc-up-dz-pl, 0.75em);
	border: 1px dashed var(--pcc-up-dz-border-c, #c0bfbc);
	border-radius: var(--pcc-up-dz-radius, 10px);
	background: var(--pcc-up-dz-bg, #f6f7f7);
	cursor: pointer;
}

.cpp-upload__dropzone:hover,
.cpp-upload__input:focus-visible + .cpp-upload__dropzone {
	border-color: #111111;
	background: var(--pcc-up-dz-hover-bg, #efefef);
}

.cpp-upload__input:focus-visible + .cpp-upload__dropzone {
	outline: 2px solid #111111;
	outline-offset: 2px;
}

.cpp-upload__icon {
	color: #111111;
	flex: 0 0 auto;
	display: block;
}

.cpp-upload__button {
	display: inline-block;
	margin: var(--pcc-up-btn-mt, 0) var(--pcc-up-btn-mr, 0) var(--pcc-up-btn-mb, 0) var(--pcc-up-btn-ml, 0);
	padding: var(--pcc-up-btn-pt, 0.3em) var(--pcc-up-btn-pr, 0.9em) var(--pcc-up-btn-pb, 0.3em) var(--pcc-up-btn-pl, 0.9em);
	border: 0.5px solid var(--pcc-up-btn-border-c, #c0bfbc);
	border-radius: var(--pcc-up-btn-radius, 8px);
	background: var(--pcc-up-btn-bg, #fff);
	font-weight: 600;
	color: var(--pcc-up-btn-color, #111111);
}

/* Secondary hint line: neutral text color (never the accent blue). */
.cpp-upload__hint {
	flex: 0 0 100%;
	margin: var(--pcc-up-hint-mt, 0) var(--pcc-up-hint-mr, 0) var(--pcc-up-hint-mb, 0) var(--pcc-up-hint-ml, 0);
	text-align: center;
	font-size: 0.8em;
	color: #3c3c3c;
}

/* Selected state: thumbnail + meta + Change/Remove actions. */
.cpp-upload--has-file .cpp-upload__dropzone {
	display: none;
}

.cpp-upload__selected {
	display: flex;
	align-items: center;
	gap: var(--pcc-up-sel-gap, 0.75em);
	margin: var(--pcc-up-sel-mt, 0) var(--pcc-up-sel-mr, 0) var(--pcc-up-sel-mb, 0) var(--pcc-up-sel-ml, 0);
	padding: var(--pcc-up-sel-pt, 0.6em) var(--pcc-up-sel-pr, 0.75em) var(--pcc-up-sel-pb, 0.6em) var(--pcc-up-sel-pl, 0.75em);
	border: 1px solid var(--pcc-up-sel-border-c, #dcdcde);
	border-radius: var(--pcc-up-sel-radius, 8px);
	background: var(--pcc-up-sel-bg, #f6f7f7);
}

.cpp-upload__selected[hidden] {
	display: none;
}

.cpp-upload__thumb {
	width: var(--pcc-up-thumb, 48px);
	height: var(--pcc-up-thumb, 48px);
	object-fit: cover;
	border-radius: 4px;
	border: 1px solid #dcdcde;
	flex: 0 0 auto;
}

.cpp-upload__meta {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 1 1 auto;
}

.cpp-upload__filename {
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cpp-upload__filesize {
	font-size: 0.85em;
	color: #646970;
}

.cpp-upload__actions {
	display: flex;
	gap: 0.4em;
	flex: 0 0 auto;
}

.cpp-upload__action {
	padding: 0.3em 0.7em;
	border: 1px solid #dcdcde;
	border-radius: 4px;
	background: #fff;
	cursor: pointer;
	font-size: 0.9em;
}

.cpp-upload__action:hover {
	border-color: #2271b1;
	color: #2271b1;
}

.cpp-upload__action--remove:hover {
	border-color: #b32d2e;
	color: #b32d2e;
}

/* Client-side validation UX: invalid control highlight (display only;
   the server stays authoritative for actual validation). */
.cpp-field--invalid .cpp-swatch {
	border-color: #b32d2e;
	box-shadow: 0 0 0 1px #b32d2e;
}

.cpp-field--invalid .cpp-input {
	border-color: #b32d2e;
}

/* CPP price display (T014 renders into this area). Two block lines:
   "Personalization: +$X" and "Total: $Y". */
.cpp-price {
	margin: 0.5em 0;
}

.cpp-price__adjustment,
.cpp-price__total {
	display: block;
}

/* Zero adjustment: the dedicated lines disappear entirely. */
.cpp-price.cpp-price--hidden {
	display: none;
}

.cpp-price--hidden .cpp-price__base,
.cpp-price--hidden .cpp-price__adjustment,
.cpp-price--hidden .cpp-price__total {
	display: none;
}

/* Simple products: the add-to-cart form is laid out as a flex/float row
   with quantity + button (kubelio scopes display:flex to
   div.summary form.cart). Force the panel onto its own full-width line
   ABOVE those controls while staying inside form.cart.
   Variable products: kubelio's flex rule excludes .variations_form, so
   the reset below keeps the variable-page rendering untouched. */
form.cart .cpp-panel {
	flex: 1 1 100%;
	width: 100%;
	clear: both;
}

form.variations_form .cpp-panel {
	flex: none;
	width: auto;
	clear: none;
}

/* ------------------------------------------------------------------
 * Variation UI (JSON-configured, opt-in). Native Woo selects remain in
 * the DOM as the source of truth; the custom controls mirror them.
 * Visual language matches the personalization swatches.
 * ------------------------------------------------------------------ */
.cpp-var-group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	/* style.gap (attribute-level, emitted as --vui-gap on the group). */
	gap: var(--vui-gap, 0.4em);
	/* PCC layout: group margin (px, bottom keeps the original 0.6em). */
	margin: var(--vui-mt, 0) var(--vui-mr, 0) var(--vui-mb, 0.6em) var(--vui-ml, 0);
}

/* PCC label typography for variation option labels (defaults inherit). */
.cpp-var-group .cpp-var__label,
.cpp-var-group .cpp-var-option {
	font-size: var(--vui-label-fs, inherit);
	font-weight: var(--vui-label-fw, inherit);
}

.cpp-var-native-hidden {
	position: absolute !important;
	width: 1px !important;
	max-width: 1px !important;
	height: 1px !important;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.cpp-var-option {
	display: inline-flex;
	align-items: center;
	gap: 0.4em; /* chip-internal spacing (image/label) — group gap is separate. */
	/* Gap on the group is the single source of inter-option spacing:
	 * zero out any Woo/theme button margins. */
	margin-left: 0;
	margin-right: 0;
	padding: var(--vui-pad, 0.35em 0.6em);
	padding-top: var(--vui-opt-pt, 0.35em);
	padding-right: var(--vui-opt-pr, 0.6em);
	padding-bottom: var(--vui-opt-pb, 0.35em);
	padding-left: var(--vui-opt-pl, 0.6em);
	margin: var(--vui-opt-mt, 0) var(--vui-opt-mr, 0) var(--vui-opt-mb, 0) var(--vui-opt-ml, 0);
	border: var(--vui-border-w, 0.5px) solid var(--vui-border-c, #c0bfbc);
	border-radius: var(--vui-radius, 8px);
	background: var(--vui-bg-c, #fff);
	color: var(--vui-text-c, var(--vui-label-c, inherit));
	cursor: pointer;
	font-size: var(--vui-label-fs, inherit);
}

.cpp-var-option:hover {
	border-color: var(--vui-hover-c, var(--vui-border-c, #c0bfbc));
	box-shadow: 0 0 0 var(--vui-hover-w, 0px) var(--vui-hover-c, var(--vui-border-c, #c0bfbc));
}

.cpp-var-option:focus-visible {
	outline: 2px solid #2271b1;
	outline-offset: 1px;
}

.cpp-var-option.cpp-var--selected {
	border-color: var(--vui-sel-c, var(--cpp-primary, #111111));
	border-width: max(var(--vui-border-w, 0.5px), var(--vui-sel-w, 2px));
}

.cpp-var-swatch-color {
	display: block;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, 0.15);
}

.cpp-var-swatch-image {
	display: block;
	width: var(--vui-w, 36px);
	height: var(--vui-h, 36px);
	border-radius: var(--vui-r, 6px) !important;
	object-fit: var(--vui-fit, cover);
}

.cpp-var-sr-label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

/* The hidden attribute must win over the class display rule. */
.cpp-var-option[hidden] {
	display: none !important;
}

/* Color variation control styling (JSON-configurable, scoped to the
   variation UI color type only). */
.cpp-var-option.cpp-var-option--color {
	position: relative;
	flex-direction: column;
	padding: 0.35em;
}

.cpp-var-option.cpp-var-option--color.cpp-var-option--label-bottom { flex-direction: column; }
.cpp-var-option.cpp-var-option--color.cpp-var-option--label-top { flex-direction: column-reverse; }
.cpp-var-option.cpp-var-option--color.cpp-var-option--label-left { flex-direction: row; }
.cpp-var-option.cpp-var-option--color.cpp-var-option--label-right { flex-direction: row-reverse; }

.cpp-var-option.cpp-var-option--color .cpp-var-swatch-color {
	display: block;
	box-sizing: border-box;
	border-style: solid;
}

/* Tooltip (same pattern as the swatch UI tooltip). */
.cpp-var-option--color.cpp-var-option--tooltip::after {
	content: attr(data-cpp-tip);
	display: none;
	position: absolute;
	bottom: calc(100% + 6px);
	left: 50%;
	transform: translateX(-50%);
	padding: 0.3em 0.6em;
	border-radius: 4px;
	background: #1d2327;
	color: #fff;
	font-size: 0.85em;
	white-space: nowrap;
	z-index: 20;
	pointer-events: none;
}

.cpp-var-option--color.cpp-var-option--tooltip:hover::after,
.cpp-var-option--color.cpp-var-option--tooltip:focus-visible::after {
	display: block;
}

.cpp-var-option--color .cpp-var__label {
	font-weight: 600;
}

/* Image/button option label position (attribute-level style). DOM order
   is [image, label]; 'right' and 'tooltip' keep the default inline label. */
.cpp-var-option.cpp-var-option--image.cpp-var-option--label-bottom,
.cpp-var-option.cpp-var-option--button.cpp-var-option--label-bottom { flex-direction: column; }
.cpp-var-option.cpp-var-option--image.cpp-var-option--label-top,
.cpp-var-option.cpp-var-option--button.cpp-var-option--label-top { flex-direction: column-reverse; }
.cpp-var-option.cpp-var-option--image.cpp-var-option--label-left,
.cpp-var-option.cpp-var-option--button.cpp-var-option--label-left { flex-direction: row-reverse; }
.cpp-var-option.cpp-var-option--image.cpp-var-option--label-right,
.cpp-var-option.cpp-var-option--button.cpp-var-option--label-right { flex-direction: row; }

/* Color chip border via vars; hover only when configured; the selected
   state is an OFFSET OUTLINE outside the chip (chip size/shape unchanged)
   and always wins over hover. */
.cpp-var-option--color .cpp-var-swatch-color {
	border-color: var(--vui-border-c, #c0bfbc);
	border-width: var(--vui-border-w, 0.5px);
}

.cpp-var-option--color:hover .cpp-var-swatch-color {
	border-color: var(--vui-hover-c, var(--vui-border-c, #c0bfbc));
}

.cpp-var-option--color.cpp-var--selected .cpp-var-swatch-color,
.cpp-var-option--color.cpp-var--selected:hover .cpp-var-swatch-color {
	border-color: var(--vui-sel-c, var(--cpp-primary, #111111));
	border-width: max(var(--vui-border-w, 0.5px), var(--vui-sel-w, 2px));
}

/* Attribute-level gap: --vui-gap is set inline on the group element by
   cpp-variation-ui.js and consumed by the base .cpp-var-group rule
   (custom properties inherit; no attribute-selector matching needed). */

/* Color variation control: the button is a transparent wrapper around the
   chip — only the color chip is visible (chip owns size/shape/color/border
   and the selected/hover states). Real button kept for a11y. */
.cpp-var-option--color {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0;
	border-radius: 0;
}

.cpp-var-option--color.cpp-var--selected,
.cpp-var-option--color:hover,
.cpp-var-option--color.cpp-var--selected:hover,
.cpp-var-option--color:focus-visible {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}

/* ------------------------------------------------------------------
 * Multiselect field (chips reuse the swatch visual language).
 * Style values come from --ms-* custom properties (field.multiselectStyle
 * → option.style); every fallback equals the original fixed value, so
 * configurations without multiselectStyle render exactly as before.
 * ------------------------------------------------------------------ */
.cpp-multiselect-group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ms-gap, 0.4em);
}

.cpp-multiselect-option {
	display: inline-flex;
	align-items: center;
	gap: var(--ms-gap, 0.4em);
	padding: var(--ms-pad, 0.35em 0.6em);
	border: var(--ms-border-w, 0.5px) solid var(--ms-border-c, #c0bfbc);
	border-radius: var(--ms-radius, 8px);
	background: var(--ms-bg-c, #fff);
	color: var(--ms-text-c, inherit);
	cursor: pointer;
}

.cpp-multiselect-option:hover {
	border-color: var(--ms-hover-c, var(--ms-border-c, #c0bfbc));
	box-shadow: 0 0 0 var(--ms-hover-w, 0px) var(--ms-hover-c, var(--ms-border-c, #c0bfbc));
}

.cpp-multiselect-option:focus-visible {
	outline: 2px solid #2271b1;
	outline-offset: 1px;
}

.cpp-multiselect-option--selected {
	border-color: var(--ms-sel-c, var(--cpp-primary, #111111));
	border-width: max(var(--ms-border-w, 0.5px), var(--ms-sel-w, 2px));
}

/* Option label position (field.multiselectStyle / option.style).
 * 'right' and 'tooltip' keep the default inline label. */
.cpp-multiselect-option--label-left { flex-direction: row-reverse; }
.cpp-multiselect-option--label-right { flex-direction: row; }
.cpp-multiselect-option--label-top { flex-direction: column; }
.cpp-multiselect-option--label-bottom { flex-direction: column-reverse; }

.cpp-multiselect__image {
	display: block;
	width: var(--ms-image-w, 36px);
	height: var(--ms-image-h, 36px);
	object-fit: var(--ms-fit, cover);
	border-radius: var(--ms-image-r, 6px);
}

.cpp-multiselect__color {
	display: block;
	width: var(--ms-chip-w, 24px);
	height: var(--ms-chip-h, 24px);
	/* Inline width/height/radius from the VariationUI color model take
	 * precedence; the fallbacks keep legacy rendering intact. */
	border-radius: 50%;
	border: var(--ms-border-w, 0.5px) solid var(--ms-border-c, #c0bfbc);
	box-sizing: border-box;
	border-style: solid;
}

/* Color mode (VariationUI color model): the option button is a
 * transparent wrapper — the chip owns all visuals; selected state is an
 * offset outline on the chip; hover changes only the chip border. */
.cpp-multiselect--color .cpp-multiselect-option {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0;
	border-radius: 0;
}

.cpp-multiselect--color .cpp-multiselect-option .cpp-multiselect__color {
	border-color: var(--ms-border-c, #c0bfbc);
	border-width: var(--ms-border-w, 0.5px);
}

.cpp-multiselect--color .cpp-multiselect-option:hover .cpp-multiselect__color {
	border-color: var(--ms-hover-c, var(--ms-border-c, #c0bfbc));
}

.cpp-multiselect--color .cpp-multiselect-option.cpp-multiselect-option--selected .cpp-multiselect__color,
.cpp-multiselect--color .cpp-multiselect-option.cpp-multiselect-option--selected:hover .cpp-multiselect__color {
	border-color: var(--ms-sel-c, var(--cpp-primary, #111111));
	border-width: max(var(--ms-border-w, 0.5px), var(--ms-sel-w, 2px));
}

/* CSS-only tooltip (VariationUI label model, showLabel=false). */
.cpp-multiselect-option--tooltip {
	position: relative;
}

.cpp-multiselect-option--tooltip .cpp-multiselect__label--sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

.cpp-multiselect-option--tooltip::after {
	content: attr(data-cpp-tip);
	display: none;
	position: absolute;
	bottom: calc(100% + 6px);
	left: 50%;
	transform: translateX(-50%);
	padding: 0.3em 0.6em;
	border-radius: 4px;
	background: #1d2327;
	color: #fff;
	font-size: 0.85em;
	white-space: nowrap;
	z-index: 20;
	pointer-events: none;
}

.cpp-multiselect-option--tooltip:hover::after,
.cpp-multiselect-option--tooltip:focus-visible::after {
	display: block;
}

/* ------------------------------------------------------------------
 * HTML display field (admin-authored content, scoped by container id).
 * ------------------------------------------------------------------ */
.cpp-html-field {
	margin-top: 0.25em;
}

/* Anchored html fields (field.placement set — cpp-fields.js moves the
 * row below a page element and tags it cpp-field--placed): claim a
 * full-width line of their own. Themes lay out the add-to-cart area as
 * a wrapping flex row — without this the moved field would sit beside
 * the button instead of below it. */
.cpp-field--placed {
	width: 100%;
	flex: 0 0 100%;
	max-width: 100%;
	clear: both;
	box-sizing: border-box;
}

/* Hide the WooCommerce variation "Clear" control (customer-facing). */
form.variations_form a.reset_variations {
	display: none !important;
}

/* ------------------------------------------------------------------
 * CPP personalization lines: compact one-line rows in cart/checkout.
 * Woo renders the "display" value through wp_kses_post (spans allowed).
 * ------------------------------------------------------------------ */
.cpp-meta-line {
	display: flex;
	gap: 4px;
	margin: 1px 0;
	font-size: 13px;
	line-height: 1.4;
	align-items: baseline;
}

.cpp-meta-label {
	font-weight: 600;
}

/* Order-received/account fallback (shared .wc-item-meta markup). */
.woocommerce-order .wc-item-meta,
.woocommerce-account .wc-item-meta {
	margin: 2px 0;
	font-size: 13px;
}

.woocommerce-order .wc-item-meta dt,
.woocommerce-account .wc-item-meta dt {
	font-weight: 600;
	margin: 0;
}

.woocommerce-order .wc-item-meta dd,
.woocommerce-account .wc-item-meta dd {
	margin: 0 0 2px;
}

/* CPP personalization item meta (cart/checkout): dt label + dd value on
   one compact line, no duplicated label inside the value. */
.cpp-meta dt,
.cart_item .wc-item-meta dt,
.woocommerce-review__order-table .wc-item-meta dt {
	/* no-op placeholder to keep specificity documented */
}

/* Scope: CPP meta lines are the only item meta on CPP product lines in
   this store; compact the pair wherever Woo renders item meta for them. */
.woocommerce-cart-form .wc-item-meta dt,
#order_review .wc-item-meta dt {
	display: inline;
	font-weight: 600;
	margin: 0 4px 0 0;
}

.woocommerce-cart-form .wc-item-meta dd,
#order_review .wc-item-meta dd {
	display: inline;
	margin: 0;
}

.woocommerce-cart-form .wc-item-meta,
#order_review .wc-item-meta {
	margin: 1px 0;
	font-size: 13px;
	line-height: 1.4;
}

.woocommerce-cart-form .wc-item-meta p,
#order_review .wc-item-meta p {
	margin: 0;
}


/* ------------------------------------------------------------------
 * CPP personalization item meta (cart/checkout/order):
 * Woo renders <dl class="variation"><dt>Label:</dt><dd>Value</dd></dl>.
 * Each dt+dd pair on one line; pairs stacked vertically (dd::after
 * creates the line break — no PHP/HTML wrapper needed).
 * ------------------------------------------------------------------ */
.woocommerce-cart-form dl.variation,
#order_review dl.variation,
.woocommerce-order dl.variation,
.woocommerce-account dl.variation {
	margin: 1px 0 !important;
	padding: 0 !important;
	font-size: 13px !important;
	line-height: 1.5 !important;
}

.woocommerce-cart-form dl.variation dt,
#order_review dl.variation dt,
.woocommerce-order dl.variation dt,
.woocommerce-account dl.variation dt {
	display: inline !important;
	font-weight: 600 !important;
	margin: 0 4px 0 0 !important;
	padding: 0 !important;
}

.woocommerce-cart-form dl.variation dd,
#order_review dl.variation dd,
.woocommerce-order dl.variation dd,
.woocommerce-account dl.variation dd {
	display: inline !important;
	margin: 0 !important;
	padding: 0 !important;
}

.woocommerce-cart-form dl.variation dd p,
#order_review dl.variation dd p,
.woocommerce-order dl.variation dd p,
.woocommerce-account dl.variation dd p {
	display: inline !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Line break after each dd = each pair starts on a new row. */
.woocommerce-cart-form dl.variation dd::after,
#order_review dl.variation dd::after,
.woocommerce-order dl.variation dd::after,
.woocommerce-account dl.variation dd::after {
	content: "";
	display: block;
}

/* --- Swatch display modes: color / text / button ---------------------- *
 * Absent "display" = image mode: no mode classes are emitted at all, so  *
 * existing configurations render through the unchanged default rules.    */

/* Only the image belongs to image mode; other modes present the label
 * (or the color block). Option data is never removed — markup stays. */
.cpp-swatch--color .cpp-swatch__image,
.cpp-swatch--text .cpp-swatch__image,
.cpp-swatch--button .cpp-swatch__image {
	display: none;
}

/* Color chip: block filled with the option color (validator-sanctioned
 * safe CSS color emitted as an inline background). */
.cpp-swatch--color {
	justify-content: center;
}

/* Color chip (VariationUI color model): the chip owns size (inline),
 * shape (inline radius), border and the selected offset outline; the
 * swatch button is a transparent wrapper. Vars come from the effective
 * VariationUI color defaults emitted per button. */
.cpp-swatch--color .cpp-swatch__color {
	display: inline-block;
	box-sizing: border-box;
	border-style: solid;
	border-color: var(--sw-border-c, #c0bfbc);
	border-width: var(--sw-border-w, 0.5px);
}

.cpp-swatch--color:hover .cpp-swatch__color {
	border-color: var(--sw-hover-c, var(--sw-border-c, #c0bfbc));
}

.cpp-swatch.cpp-swatch--selected .cpp-swatch__color,
.cpp-swatch.cpp-swatch--selected:hover .cpp-swatch__color {
	border-color: var(--sw-sel-c, var(--cpp-primary, #111111));
	border-width: max(var(--sw-border-w, 0.5px), var(--sw-sel-w, 2px));
}

/* Color mode: the swatch button is a transparent wrapper — the chip
   owns all visuals (selected/hover included). */
.cpp-swatch.cpp-swatch--color {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0;
}

.cpp-swatch.cpp-swatch--color.cpp-swatch--selected,
.cpp-swatch.cpp-swatch--color:hover,
.cpp-swatch.cpp-swatch--color.cpp-swatch--selected:hover,
.cpp-swatch.cpp-swatch--color:focus-visible {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}

/* Fallback when an option has no color in color mode. */
.cpp-swatch--color:not(:has(.cpp-swatch__color)) {
	background: #f0f0f1;
}

/* Text / button chips: label-driven, tinted via the shared swatchStyle. */
.cpp-swatch--text,
.cpp-swatch--button {
	background: var(--sw-bg-c, transparent);
	color: var(--sw-text-c, inherit);
}

.cpp-swatch--button {
	font-weight: 600;
}

/* Empty error containers take zero layout space; filled errors show. */
.cpp-error:empty {
	display: none;
}

/* --- PCC global label/field spacing: WooCommerce variation rows --------
 * Vars are emitted by cpp-variation-ui.js on form.variations_form (the
 * variation table lives outside .cpp-panel). Fallbacks keep the native
 * rendering when no global PCC Settings exist. */
form.variations_form .variations th.label label,
form.variations_form .variations td.value label {
	display: inline-block;
	font-size: var(--pcc-label-fs, inherit);
	font-weight: var(--pcc-label-fw, inherit);
	color: var(--pcc-label-color, inherit);
	line-height: var(--pcc-label-lh, inherit);
	margin: var(--pcc-label-mt, 0) var(--pcc-label-mr, 0) var(--pcc-label-mb, 0) var(--pcc-label-ml, 0);
	padding: var(--pcc-label-pt, 0) var(--pcc-label-pr, 0) var(--pcc-label-pb, 0) var(--pcc-label-pl, 0);
}

/* Zero baseline for the variation rows: PCC is the single spacing
   source (native Woo padding removed; PCC vars re-add controlled space). */
form.variations_form .variations > tbody > tr > th,
form.variations_form .variations > tbody > tr > td {
	margin: 0;
	padding: 0;
}

form.variations_form .variations th.label {
	padding-right: 0.5em;
}

form.variations_form .variations td.value {
	padding-bottom: var(--pcc-field-mb, 0.4em);
	padding-top: var(--pcc-field-mt, 0);
	padding-left: var(--pcc-field-ml, 0);
	padding-right: var(--pcc-field-mr, 0);
}

form.variations_form .variations th.label {
	padding-left: var(--pcc-field-ml, 0);
	padding-right: var(--pcc-field-mr, 0);
	padding-top: var(--pcc-field-mt, 0);
}

/* --- Final VariationUI row-spacing baseline ---------------------------
 * Remaining sources of uncontrolled row distance: table border-spacing
 * and middle vertical alignment. PCC field spacing (--pcc-field-mb on
 * td.value) stays the single source of inter-row space. */
form.variations_form .variations {
	border-collapse: collapse;
	border-spacing: 0;
}

form.variations_form .variations th,
form.variations_form .variations td {
	vertical-align: top;
}

/* --- VariationUI hard zero-spacing baseline ---------------------------
 * Scoped to the Woo variations table elements only. ALL layout spacing
 * starts at zero; PCC Settings (--pcc-* / --vui-*) are then the only
 * source of intentional margin/padding/gap. .cpp-var-group / option
 * controls are NOT reset here — their own rules already define
 * margin/padding/gap exclusively from the style system. */

form.variations_form .variations,
form.variations_form .variations tbody,
form.variations_form .variations tr,
form.variations_form .variations tr > th,
form.variations_form .variations tr > td,
form.variations_form .variations th.label,
form.variations_form .variations td.value {
	margin: 0;
	padding: 0;
	border-spacing: 0;
	vertical-align: top;
}

form.variations_form .variations {
	border-collapse: collapse;
}

/* Hidden helpers must never contribute layout space. */
form.variations_form .variations .reset_variations {
	margin: 0;
	padding: 0;
}

/* Outer table margin: out-specificity the Woo rule
   .woocommerce div.product form.cart .variations { margin-bottom: 1em }. */
.woocommerce div.product form.variations_form table.variations {
	margin: 0;
}

/* --- VariationUI label height parity with CPP labels ------------------
 * Woo/theme rules give th.label extra padding/line-height/vertical-align,
 * producing a ~40px label box vs ~26px for .cpp-field__label. Zero the
 * cell (layout only) and let the label element be content-driven; global
 * PCC label vars remain the styling source. */
form.variations_form .variations th.label {
	height: auto;
	min-height: 0;
	line-height: normal;
	vertical-align: top;
}

form.variations_form .variations th.label label {
	display: block;
	height: auto;
	min-height: 0;
	line-height: var(--pcc-label-lh, normal);
	margin: var(--pcc-label-mt, 0) var(--pcc-label-mr, 0) var(--pcc-label-mb, 0) var(--pcc-label-ml, 0);
	padding: var(--pcc-label-pt, 0) var(--pcc-label-pr, 0) var(--pcc-label-pb, 0) var(--pcc-label-pl, 0);
}

/* Color options: zero padding baseline only (chip size comes from the
   color size property); button/image options keep their padding. */
form.variations_form .cpp-var-group--color > .cpp-var-option.cpp-var-option--color,
.cpp-var-option.cpp-var-option--color.cpp-var-option--tooltip {
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
}


.cpp-panel {
    margin-top: var(--pcc-panel-mt, 0);
}