/**
 * Apparel configurator styles.
 *
 * Scoped design-token + utility layer. Every rule is namespaced under
 * `.psc-apparel-configurator` and components use the `.psc-*` tokens, so
 * Beaver Builder and WooCommerce theme styles cannot leak into the
 * configurator. This file is loaded in addition to the shared
 * configurator stylesheet and is the prototype for rolling the same
 * scoped layer across the other product configurators.
 */

/* ---- Design tokens ---- */

.psc-apparel-configurator {
	/* CMYK brand palette. */
	--psc-cyan: #00a5ff;
	--psc-cyan-dark: #0084cc;
	--psc-cyan-tint: #e0f4ff;
	--psc-magenta: #ff00ff;
	--psc-yellow: #ffff00;
	--psc-yellow-tint: #fffbcc;
	--psc-key: #000000;

	--psc-border: #dcdcde;
	--psc-border-strong: #b8bec2;
	--psc-muted: #646970;
	--psc-background: #f6f7f7;
	--psc-surface: #ffffff;
	--psc-surface-subtle: #fbfbfc;
	--psc-text: #1d2327;
	--psc-error: #b32d2e;

	/* Primary action/selection color. */
	--psc-accent: var(--psc-cyan);
	--psc-accent-dark: var(--psc-cyan-dark);

	/* Radius */
	--psc-radius-sm: 6px;
	--psc-radius: 12px;
	--psc-radius-pill: 999px;

	/* Spacing scale (4px base) */
	--psc-space-1: 4px;
	--psc-space-2: 8px;
	--psc-space-3: 12px;
	--psc-space-4: 16px;
	--psc-space-5: 20px;
	--psc-space-6: 24px;
	--psc-space-8: 32px;

	/* Elevation */
	--psc-shadow: 0 12px 35px rgba(0, 0, 0, 0.09);
	--psc-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);

	/* Type */
	--psc-text-xs: 13px;
	--psc-text-sm: 15px;
	--psc-text-base: 16px;
	--psc-text-lg: 18px;

	/* Selected-state ring used by all swatch/chip pickers. */
	--psc-ring: 0 0 0 2px rgba(0, 165, 255, 0.35);

	/* Typography defaults so theme rules don't shrink configurator text. */
	color: var(--psc-text);
	font-size: var(--psc-text-base);
	line-height: 1.6;
}

/* ---- Layout utilities ---- */

/* Section rhythm: clear separation between major blocks. */
.psc-apparel-configurator .psc-configurator__section {
	padding: 0 0 var(--psc-space-8);
	margin: 0 0 var(--psc-space-8);
	border-bottom: 1px solid var(--psc-border);
}

.psc-apparel-configurator .psc-configurator__section:last-child {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

.psc-apparel-configurator .psc-configurator__section h3 {
	margin: 0 0 var(--psc-space-4);
	font-size: var(--psc-text-lg);
	font-weight: 700;
}

.psc-apparel-configurator .psc-configurator__section h4 {
	margin: var(--psc-space-5) 0 var(--psc-space-2);
	font-size: var(--psc-text-base);
	font-weight: 600;
}

/* Keep helper text readable, not tiny. */
.psc-apparel-configurator .psc-configurator__help,
.psc-apparel-configurator small {
	font-size: var(--psc-text-sm);
	line-height: 1.5;
	color: var(--psc-muted);
}

.psc-u-flex { display: flex; }
.psc-u-flex-wrap { flex-wrap: wrap; }
.psc-u-grid { display: grid; }
.psc-u-items-center { align-items: center; }
.psc-u-justify-between { justify-content: space-between; }
.psc-u-flex-col { flex-direction: column; }

.psc-u-gap-1 { gap: var(--psc-space-1); }
.psc-u-gap-2 { gap: var(--psc-space-2); }
.psc-u-gap-3 { gap: var(--psc-space-3); }

.psc-u-mt-2 { margin-top: var(--psc-space-2); }
.psc-u-mt-3 { margin-top: var(--psc-space-3); }
.psc-u-mt-8 { margin-top: var(--psc-space-8); }
.psc-u-mb-2 { margin-bottom: var(--psc-space-2); }
.psc-u-mb-3 { margin-bottom: var(--psc-space-3); }

/* ---- Typography utilities ---- */

.psc-u-text-xs { font-size: var(--psc-text-xs); }
.psc-u-text-sm { font-size: var(--psc-text-sm); }
.psc-u-text-base { font-size: var(--psc-text-base); }
.psc-u-font-semibold { font-weight: 600; }
.psc-u-font-bold { font-weight: 700; }
.psc-u-text-muted { color: var(--psc-muted); }
.psc-u-text-error { color: var(--psc-error); }

/* ---- Surface / interactive primitives ---- */

.psc-u-card {
	background: var(--psc-surface);
	border: 1px solid var(--psc-border);
	border-radius: var(--psc-radius-sm);
	padding: var(--psc-space-3);
}

.psc-u-card--subtle {
	background: var(--psc-surface-subtle);
}

/* Button-style choice chip (companion chooser, etc.). */
.psc-u-choice {
	display: inline-block;
	padding: var(--psc-space-2) var(--psc-space-3);
	border: 1px solid var(--psc-accent);
	border-radius: var(--psc-radius-sm);
	background: var(--psc-surface);
	color: var(--psc-accent-dark);
	cursor: pointer;
	font-size: var(--psc-text-sm);
	line-height: 1.2;
}

.psc-u-choice:hover {
	background: var(--psc-accent);
	color: var(--psc-key);
}

/* Circular selectable swatch (garment colors, ink colors). */
.psc-u-swatch {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: var(--psc-radius-pill);
	border: 2px solid var(--psc-border-strong);
	background-color: var(--psc-background);
	background-position: center;
	background-size: cover;
	box-sizing: border-box;
}

.psc-u-swatch--sm {
	width: 26px;
	height: 26px;
}

.psc-u-swatch-input {
	position: absolute;
	opacity: 0;
}

.psc-u-swatch-input:checked + .psc-u-swatch {
	border-color: var(--psc-accent);
	box-shadow: var(--psc-ring);
}

.psc-u-swatch-input:focus-visible + .psc-u-swatch {
	outline: 2px solid var(--psc-accent);
	outline-offset: 2px;
}

/* Link-style reset/action button. */
.psc-u-link-button {
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	color: var(--psc-accent-dark);
	font-size: var(--psc-text-xs);
	font-weight: 600;
}

.psc-u-link-button:hover {
	text-decoration: underline;
}

/* Bold inline alert below a step action. */
.psc-u-alert {
	margin-top: var(--psc-space-2);
	font-weight: 700;
	color: var(--psc-error);
}

/* Buttons and key accents use the CMYK palette within the apparel scope. */
.psc-apparel-configurator .psc-configurator__step-button--primary {
	background: var(--psc-key);
	border-color: var(--psc-key);
	color: #ffffff;
	font-weight: 600;
}

.psc-apparel-configurator .psc-configurator__step-button--primary:hover,
.psc-apparel-configurator .psc-configurator__step-button--primary:focus {
	background: var(--psc-magenta);
	border-color: var(--psc-magenta);
	color: #ffffff;
}

.psc-apparel-configurator .psc-configurator__step-button--secondary {
	color: var(--psc-accent-dark);
	border-color: var(--psc-accent);
	background: var(--psc-surface);
}

.psc-apparel-configurator .psc-configurator__step-button--secondary:hover {
	background: var(--psc-cyan-tint);
}

.psc-apparel-configurator #psc-configurator-submit {
	background: var(--psc-key);
	border-color: var(--psc-key);
	color: #ffffff;
	font-weight: 600;
}

.psc-apparel-configurator #psc-configurator-submit:hover,
.psc-apparel-configurator #psc-configurator-submit:focus {
	background: var(--psc-magenta);
	border-color: var(--psc-magenta);
	color: #ffffff;
}

/* Step tabs in the CMYK palette. */
.psc-apparel-configurator .psc-configurator-steps__item {
	color: var(--psc-muted);
	border-bottom-color: var(--psc-border);
}

.psc-apparel-configurator .psc-configurator-steps__item > span {
	border-color: var(--psc-border-strong);
	background: var(--psc-surface);
	color: var(--psc-muted);
}

.psc-apparel-configurator .psc-configurator-steps__item:hover:not(:disabled):not(.psc-configurator-steps__item--active) {
	color: #ffffff;
	background: var(--psc-key);
	border-bottom-color: var(--psc-key);
}

.psc-apparel-configurator .psc-configurator-steps__item:hover:not(:disabled):not(.psc-configurator-steps__item--active) > span {
	border-color: var(--psc-magenta);
	color: var(--psc-magenta);
	background: var(--psc-key);
}

.psc-apparel-configurator .psc-configurator-steps__item--active {
	color: var(--psc-accent-dark);
	border-bottom-color: var(--psc-accent);
}

.psc-apparel-configurator .psc-configurator-steps__item--active > span {
	background: var(--psc-accent);
	border-color: var(--psc-accent);
	color: var(--psc-key);
}

.psc-apparel-configurator .psc-configurator-steps__item--active:hover {
	color: #ffffff;
	background: var(--psc-key);
	border-bottom-color: var(--psc-key);
}

.psc-apparel-configurator .psc-configurator-steps__item--active:hover > span {
	background: var(--psc-key);
	border-color: var(--psc-magenta);
	color: var(--psc-magenta);
}

.psc-apparel-configurator .psc-configurator-steps__item--complete {
	color: var(--psc-text);
	border-bottom-color: var(--psc-yellow);
}

.psc-apparel-configurator .psc-configurator-steps__item--complete > span {
	background: var(--psc-yellow-tint);
	border-color: var(--psc-yellow);
	color: var(--psc-key);
}

/* Secondary action buttons and text links. */
.psc-apparel-configurator .psc-configurator__step-button--secondary:hover {
	background: var(--psc-cyan-tint);
	border-color: var(--psc-accent-dark);
	color: var(--psc-key);
}

.psc-apparel-configurator .button,
.psc-apparel-configurator .button-link {
	color: var(--psc-accent-dark);
}

.psc-apparel-configurator .button:hover {
	color: var(--psc-key);
	background: var(--psc-cyan-tint);
}

/* The "add" buttons get a distinct CMYK treatment: yellow at rest,
   cyan on hover, always black text for contrast. */
.psc-apparel-configurator #psc-apparel-add-companion,
.psc-apparel-configurator #psc-apparel-add-decoration {
	background: var(--psc-yellow) !important;
	border: 1px solid var(--psc-yellow) !important;
	color: var(--psc-key) !important;
	font-weight: 600;
}

.psc-apparel-configurator #psc-apparel-add-companion:hover,
.psc-apparel-configurator #psc-apparel-add-companion:focus,
.psc-apparel-configurator #psc-apparel-add-decoration:hover,
.psc-apparel-configurator #psc-apparel-add-decoration:focus {
	background: var(--psc-cyan) !important;
	border-color: var(--psc-cyan) !important;
	color: var(--psc-key) !important;
}

/* Remove links stay readable: dark text on light, magenta on hover. */
.psc-apparel-configurator .psc-apparel-decoration__remove,
.psc-apparel-configurator .psc-apparel-companion__remove {
	background: transparent !important;
	border: none !important;
	color: var(--psc-text) !important;
	text-decoration: underline;
	font-weight: 600;
}

.psc-apparel-configurator .psc-apparel-decoration__remove:hover,
.psc-apparel-configurator .psc-apparel-decoration__remove:focus,
.psc-apparel-configurator .psc-apparel-companion__remove:hover,
.psc-apparel-configurator .psc-apparel-companion__remove:focus {
	color: var(--psc-magenta) !important;
	background: transparent !important;
}

/* Eyebrow / notice accents move from blue to magenta for brand contrast. */
.psc-apparel-configurator .psc-configurator__eyebrow {
	color: var(--psc-magenta);
}

.psc-apparel-configurator .psc-configurator__notice {
	border-left-color: var(--psc-cyan);
}

/* ---- Apparel components built from the primitives ---- */

/* Style media + description */

.psc-apparel-configurator__media img {
	max-width: 100%;
	height: auto;
	border-radius: var(--psc-radius-sm);
}

.psc-apparel-configurator__media img {
	display: block;
	width: 100%;
	max-height: 560px;
	object-fit: contain;
}

.psc-apparel-ink-summary {
	display: flex;
	flex-direction: column;
	gap: var(--psc-space-3);
	margin: var(--psc-space-4) 0;
}

.psc-apparel-ink-summary__location {
	display: flex;
	flex-wrap: wrap;
	gap: var(--psc-space-3);
	padding: var(--psc-space-2) 0;
	border-bottom: 1px solid var(--psc-border);
}

.psc-apparel-ink-summary__location > strong {
	min-width: 150px;
	padding-top: var(--psc-space-2);
}

.psc-apparel-ink-preview-list {
	display: flex;
	flex: 1 1 220px;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--psc-space-3);
}

.psc-apparel-ink-preview {
	display: inline-flex;
	align-items: center;
	gap: var(--psc-space-2);
	font-size: var(--psc-text-sm);
	font-weight: 600;
}

.psc-apparel-ink-preview__swatch {
	width: 42px;
	height: 42px;
	flex: 0 0 42px;
	box-sizing: border-box;
	border: 2px solid var(--psc-border-strong);
	border-radius: var(--psc-radius-pill);
	background-color: var(--psc-background);
}

.psc-apparel-companion-gallery {
	display: flex;
	gap: var(--psc-space-3);
	margin: var(--psc-space-3) 0 var(--psc-space-5);
	overflow-x: auto;
	padding: 2px 0 8px;
}

.psc-apparel-companion-thumbnail {
	flex: 0 0 116px;
	margin: 0;
}

.psc-apparel-companion-thumbnail img {
	display: block;
	width: 116px;
	height: 92px;
	object-fit: contain;
	border: 1px solid var(--psc-border);
	border-radius: var(--psc-radius-sm);
	background: var(--psc-surface);
}

.psc-apparel-companion-thumbnail figcaption {
	margin-top: var(--psc-space-1);
	color: var(--psc-muted);
	font-size: var(--psc-text-xs);
	line-height: 1.35;
}

.psc-apparel-style-description,
.psc-apparel-style-description p,
.psc-apparel-style-description li {
	font-size: var(--psc-text-base);
	line-height: 1.6;
	color: inherit;
}

.psc-apparel-style-description__list {
	margin: 0;
	padding-left: var(--psc-space-5);
	list-style: disc;
}

.psc-apparel-style-description__list li {
	margin-bottom: var(--psc-space-1);
}

.psc-apparel-selected-color {
	font-weight: 600;
	margin: var(--psc-space-1) 0 var(--psc-space-3);
}

/* Color swatch row */

.psc-apparel-colors {
	display: flex;
	flex-wrap: wrap;
	gap: var(--psc-space-2);
	margin-bottom: var(--psc-space-3);
}

.psc-apparel-color {
	display: flex;
	cursor: pointer;
}

/* Size matrix */

.psc-apparel-size-matrix {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: var(--psc-space-2);
}

.psc-apparel-size {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--psc-space-1);
	padding: var(--psc-space-1) var(--psc-space-2);
	border: 1px solid var(--psc-border);
	border-radius: var(--psc-radius-sm);
	background: var(--psc-surface);
}

.psc-apparel-size__name {
	font-weight: 600;
}

.psc-apparel-size__qty {
	width: 64px;
}

.psc-apparel-size--unavailable {
	opacity: 0.55;
	background: var(--psc-background);
}

/* Companion garments */

.psc-apparel-companion {
	border: 1px solid var(--psc-border);
	border-radius: var(--psc-radius-sm);
	padding: var(--psc-space-2);
	margin-top: var(--psc-space-3);
	background: var(--psc-surface-subtle);
}

.psc-apparel-companion__title {
	margin: 0 0 var(--psc-space-2);
}

.psc-apparel-companion__remove {
	margin-top: var(--psc-space-2);
}

.psc-apparel-companion-chooser {
	display: flex;
	flex-wrap: wrap;
	gap: var(--psc-space-1);
	margin-top: var(--psc-space-2);
	padding: var(--psc-space-2);
	border: 1px solid var(--psc-border);
	border-radius: var(--psc-radius-sm);
	background: var(--psc-surface);
}

/* Decoration rows */

.psc-apparel-decoration {
	border: 1px solid var(--psc-border);
	border-radius: var(--psc-radius-sm);
	padding: var(--psc-space-2);
	margin-bottom: var(--psc-space-2);
	background: var(--psc-surface);
}

.psc-apparel-decoration input[type="text"],
.psc-apparel-decoration select {
	margin: 0 var(--psc-space-1) var(--psc-space-1) 0;
}

.psc-apparel-decoration__inks {
	display: flex;
	flex-wrap: wrap;
	gap: var(--psc-space-3);
	margin-top: var(--psc-space-1);
}

.psc-apparel-decoration__ink {
	display: flex;
	flex-direction: column;
	gap: var(--psc-space-1);
	font-size: var(--psc-text-xs);
}

.psc-apparel-decoration__remove {
	margin-top: var(--psc-space-1);
}

/* Space the add-location control and the live price breakdown apart. */
.psc-apparel-configurator #psc-apparel-add-decoration {
	margin-top: var(--psc-space-2);
}

.psc-apparel-configurator #psc-apparel-price-breakdown {
	margin-top: var(--psc-space-4);
}

.psc-apparel-configurator #psc-apparel-decoration-notice {
	margin-top: var(--psc-space-2);
}

/* Ink picker */

.psc-ink-picker__grid {
	display: flex;
	flex-wrap: wrap;
	gap: var(--psc-space-1);
}

.psc-ink-choice {
	cursor: pointer;
}