/* engine.css — v0.4.0
   Site-wide unified swatch styles. All values come from CSS custom
   properties set by BDO_SS_Theme_Tab::render_custom_properties(). */

.bdo-ss-hidden-select {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
}

.bdo-ss-swatches {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--bdo-ss-card-gap, 16px);
	margin-bottom: 8px;
}

.bdo-ss-swatch {
	box-sizing: border-box;
	position: relative;
	width: var(--bdo-ss-card-width, 132px);
	min-height: var(--bdo-ss-card-min-h, 0);
	padding: var(--bdo-ss-card-padding, 10px);
	margin: 0;
	background: var(--bdo-ss-card-bg, #fff) !important;
	border: var(--bdo-ss-card-border-w, 1px) var(--bdo-ss-card-border-s, solid) var(--bdo-ss-card-border, #8c9091) !important;
	border-radius: var(--bdo-ss-card-radius, 0) !important;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	text-align: center;
	box-shadow: none !important;
	color: var(--bdo-ss-label-color, #000);
}

.bdo-ss-swatch:hover {
	background: var(--bdo-ss-hover-bg, #e5eef7) !important;
	border-color: var(--bdo-ss-hover-border, #0158af) !important;
	color: var(--bdo-ss-hover-label, #000);
}

.bdo-ss-swatch.is-selected {
	background: var(--bdo-ss-active-bg, #e5eef7) !important;
	border-color: var(--bdo-ss-active-border, #0158af) !important;
	border-width: var(--bdo-ss-active-border-w, 1px) !important;
	color: var(--bdo-ss-active-label, #000);
}

.bdo-ss-swatch.is-unavailable,
.bdo-ss-swatch.is-sold-out {
	cursor: not-allowed;
	border-style: var(--bdo-ss-unavail-border-s, dashed) !important;
	border-color: var(--bdo-ss-unavail-border, #8c9091) !important;
}

/* Dim only the card content, not the SOLD OUT badge. */
.bdo-ss-swatch.is-unavailable .bdo-ss-swatch-img,
.bdo-ss-swatch.is-unavailable .bdo-ss-swatch-label,
.bdo-ss-swatch.is-unavailable .bdo-ss-swatch-desc,
.bdo-ss-swatch.is-sold-out .bdo-ss-swatch-img,
.bdo-ss-swatch.is-sold-out .bdo-ss-swatch-label,
.bdo-ss-swatch.is-sold-out .bdo-ss-swatch-desc {
	opacity: var(--bdo-ss-unavail-opacity, 0.4);
}

/* Combination-not-offered hint: e.g. "Only in 24 x 36". Same position and
   size as the SOLD OUT badge so the visual rhythm is consistent, but amber
   instead of red so customers don't confuse "switch your size to buy this"
   with "this is sold out everywhere." Text is injected by engine.js. */
.bdo-ss-swatch-hint {
	position: absolute;
	top: calc(var(--bdo-ss-card-padding, 10px) + var(--bdo-ss-img-size, 72px) / 2);
	left: 8px;
	right: 8px;
	transform: translateY(-50%);
	background: var(--bdo-ss-unavail-hint-bg, #d97706);
	color: var(--bdo-ss-unavail-hint-color, #ffffff);
	font-weight: 700;
	font-size: var(--bdo-ss-unavail-hint-size, 11px);
	letter-spacing: 0.04em;
	padding: 3px 6px;
	pointer-events: none;
	text-align: center;
	text-transform: uppercase;
	box-sizing: border-box;
	max-width: calc(100% - 16px);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Mobile: hint badge font shrinks so values like "Select Larger" or
   "Select 12 X 12" stay on one line inside the narrower mobile card.
   Same breakpoint as the rest of the mobile swatch styles. Stays
   vertically centered on the image thumbnail because the parent rule
   already positions it via top:50% of img height + transform. */
@media (max-width: 480px) {
	.bdo-ss-swatch-hint {
		font-size: 9px;
		letter-spacing: 0.02em;
		padding: 2px 4px;
	}
}

/* SOLD OUT badge fires only for the is-sold-out state - meaning the value
   exists on a variation but no in-stock variation has it. is-unavailable
   (combination not offered) gets the amber hint above instead. */
.bdo-ss-swatch.is-sold-out::after {
	content: 'SOLD OUT';
	position: absolute;
	top: calc(var(--bdo-ss-card-padding, 10px) + var(--bdo-ss-img-size, 72px) / 2);
	left: 8px;
	right: 8px;
	transform: translateY(-50%);
	background: var(--bdo-ss-soldout-bg, #c62828);
	color: var(--bdo-ss-soldout-color, #ffffff);
	font-weight: 700;
	font-size: var(--bdo-ss-soldout-size, 11px);
	letter-spacing: 0.06em;
	padding: 3px 6px;
	pointer-events: none;
	text-align: center;
	text-transform: uppercase;
}

.bdo-ss-swatch:focus-visible {
	outline: var(--bdo-ss-focus-width, 2px) solid var(--bdo-ss-focus-color, #0158af);
	outline-offset: 2px;
}

.bdo-ss-swatch-img {
	display: block;
	width: var(--bdo-ss-img-size, 72px);
	height: var(--bdo-ss-img-size, 72px);
	margin: 0 auto 8px auto;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: 0 !important;
}

.bdo-ss-swatch-img.is-blank {
	background-image: linear-gradient(135deg, #f4f5f7 25%, #e9ecf1 25%, #e9ecf1 50%, #f4f5f7 50%, #f4f5f7 75%, #e9ecf1 75%, #e9ecf1 100%);
	background-size: 12px 12px;
	border: 1px solid #eee;
}

.bdo-ss-swatch-label {
	display: block;
	max-width: 100%;
	font-size: var(--bdo-ss-label-size, 15px);
	font-weight: var(--bdo-ss-label-weight, 700);
	color: inherit;
	line-height: 1.3;
	margin-bottom: 4px;
}

.bdo-ss-swatch-desc {
	display: block;
	font-size: var(--bdo-ss-desc-size, 12px);
	font-weight: 400;
	line-height: 1.2;
	color: var(--bdo-ss-desc-color, #555);
}

/* When a description contains <strong>, treat that as a "price line" or
   primary stat: own line, slightly bigger and darker than the surrounding
   description text. Used by the coasters migrator for the per-coaster
   price; anything else that puts a <strong> inside a description gets
   the same treatment. */
.bdo-ss-swatch-desc strong {
	display: block;
	font-size: calc(var(--bdo-ss-desc-size, 12px) + 2px);
	font-weight: 400;
	color: #333;
	margin-bottom: 2px;
}

/* Coasters (pa_pack-size) labels run bigger to match the legacy
   bdo-pdp-variation-swatches-coasters.php look (18px label). Scoped
   tightly so no other attribute is affected. */
.bdo-ss-swatches[data-bdo-ss-attr="pa_pack-size"] .bdo-ss-swatch-label {
	font-size: 18px;
	margin-bottom: 6px;
}

/* Prints & Canvas - Print Type (pa_print-type). Values lifted from
   bdo-pdp-variation-swatches-prints-wraps.php v1.0.1 .bo-swatches--pt
   so the unified engine renders identically for prints/canvas. */
.bdo-ss-swatches[data-bdo-ss-attr="pa_print-type"] .bdo-ss-swatch {
	width: 120px;
	min-height: 176px;
	padding: 10px;
}
.bdo-ss-swatches[data-bdo-ss-attr="pa_print-type"] .bdo-ss-swatch-img {
	width: 76px;
	height: 76px;
	margin: 0 auto 8px auto;
}
.bdo-ss-swatches[data-bdo-ss-attr="pa_print-type"] .bdo-ss-swatch-label {
	font-size: 15px;
	font-weight: 700;
	color: #000;
	line-height: 1.3;
	margin-bottom: 4px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.bdo-ss-swatches[data-bdo-ss-attr="pa_print-type"] .bdo-ss-swatch-desc {
	font-size: 12px;
	font-weight: 400;
	line-height: 1.25;
	color: #555;
}

/* Prints & Canvas - Size (pa_size). Text-only chips - no image. The grid
   helper handles 3-column layout when the toggle is on; these rules only
   tune the chip itself. */
.bdo-ss-swatches[data-bdo-ss-attr="pa_size"] .bdo-ss-swatch-img,
.bdo-ss-swatches[data-bdo-ss-attr="pa_shirt-size"] .bdo-ss-swatch-img {
	display: none;
}
.bdo-ss-swatches[data-bdo-ss-attr="pa_size"] .bdo-ss-swatch,
.bdo-ss-swatches[data-bdo-ss-attr="pa_shirt-size"] .bdo-ss-swatch {
	min-width: 84px;
	min-height: auto;
	padding: 8px 12px;
	justify-content: center;
}
.bdo-ss-swatches[data-bdo-ss-attr="pa_size"] .bdo-ss-swatch-label,
.bdo-ss-swatches[data-bdo-ss-attr="pa_shirt-size"] .bdo-ss-swatch-label {
	font-size: 14px;
	font-weight: 700;
	color: #000;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-bottom: 0;
}

@media (max-width: 400px) {
	.bdo-ss-swatches[data-bdo-ss-attr="pa_print-type"] .bdo-ss-swatch {
		width: 112px;
		min-height: 170px;
	}
	.bdo-ss-swatches[data-bdo-ss-attr="pa_print-type"] .bdo-ss-swatch-img {
		width: 72px;
		height: 72px;
	}
	.bdo-ss-swatches[data-bdo-ss-attr="pa_print-type"] .bdo-ss-swatch-label {
		font-size: 14.5px;
	}
	.bdo-ss-swatches[data-bdo-ss-attr="pa_size"] .bdo-ss-swatch,
	.bdo-ss-swatches[data-bdo-ss-attr="pa_shirt-size"] .bdo-ss-swatch {
		min-width: 78px;
		padding: 7px 10px;
	}
	.bdo-ss-swatches[data-bdo-ss-attr="pa_size"] .bdo-ss-swatch-label,
	.bdo-ss-swatches[data-bdo-ss-attr="pa_shirt-size"] .bdo-ss-swatch-label {
		font-size: 13.5px;
	}
}

/* Mobile: single-row horizontal scroller */
@media (max-width: 480px) {
	.bdo-ss-swatches {
		flex-wrap: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x proximity;
		padding-left: 12px;
		padding-right: 12px;
		margin-left: -12px;
		margin-right: -12px;
	}
	.bdo-ss-swatch {
		flex: 0 0 auto;
		scroll-snap-align: start;
	}
}

/* ── Grid layout rules (ported from bdo-pdp-variation-swatches-grid.php) ──
   SIZE always renders as a 3-column grid at every screen size. PRINT TYPE
   switches to a 3-column grid on mobile only (≤540px) to stop right-edge
   cutoff. Selectors cover BOTH the unified engine class names AND the
   legacy `bo-swatches--*` class names from the prints-wraps mu-plugin so
   the rules work today while that mu-plugin is still rendering swatches
   and keep working after it's migrated. */
.bdo-ss-grid-on .bdo-ss-swatches[data-bdo-ss-attr="pa_size"],
.bdo-ss-grid-on .bo-swatches.bo-swatches--size {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	overflow: visible !important;
	flex-wrap: initial;
}

/* Shirt size overrides to a 4-column grid (8 sizes fit cleanly into 4x2).
   Same gap, same chip styling - just a wider grid than pa_size. */
.bdo-ss-grid-on .bdo-ss-swatches[data-bdo-ss-attr="pa_shirt-size"] {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	overflow: visible !important;
	flex-wrap: initial;
}
.bdo-ss-grid-on .bdo-ss-swatches[data-bdo-ss-attr="pa_size"] .bdo-ss-swatch,
.bdo-ss-grid-on .bo-swatches.bo-swatches--size .bo-swatch {
	width: auto !important;
	max-width: none !important;
	min-width: 0 !important;
	height: auto;
	justify-content: center;
	box-sizing: border-box;
}
.bdo-ss-grid-on .bdo-ss-swatches[data-bdo-ss-attr="pa_size"] .bdo-ss-swatch-label,
.bdo-ss-grid-on .bo-swatches.bo-swatches--size .bo-swatch-label {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

@media (max-width: 540px) {
	.bdo-ss-grid-on .bdo-ss-swatches[data-bdo-ss-attr="pa_print-type"],
	.bdo-ss-grid-on .bo-swatches.bo-swatches--pt {
		display: grid !important;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 16px;
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		overflow: visible !important;
		scroll-snap-type: none !important;
		flex-wrap: initial;
	}
	.bdo-ss-grid-on .bdo-ss-swatches[data-bdo-ss-attr="pa_print-type"] .bdo-ss-swatch,
	.bdo-ss-grid-on .bo-swatches.bo-swatches--pt .bo-swatch {
		width: auto !important;
		max-width: none !important;
		min-width: 0 !important;
		height: auto;
		box-sizing: border-box;
	}
	.bdo-ss-grid-on .bdo-ss-swatches[data-bdo-ss-attr="pa_print-type"] .bdo-ss-swatch-img,
	.bdo-ss-grid-on .bo-swatches.bo-swatches--pt .bo-swatch-img {
		width: 100% !important;
		max-width: 84px;
		margin-left: auto;
		margin-right: auto;
	}
}

/* Defensive overflow fixes - Woo and Elementor wrappers occasionally clip
   swatch content. Same rules as the legacy grid mu-plugin. */
.woocommerce div.product .summary,
.woocommerce div.product form.cart,
.woocommerce div.product form.cart .variations,
.woocommerce div.product form.cart .variations td,
.elementor .woocommerce div.product .summary,
.elementor .woocommerce div.product .summary > .elementor-widget-container {
	overflow: visible !important;
}
.woocommerce div.product form.cart .variations,
.woocommerce div.product form.cart .variations .value,
.woocommerce div.product form.cart .variations td.value {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box;
}

/* ── LARGE preset ──────────────────────────────────────────────────────────
   Values lifted directly from bdo-pdp-variation-swatches-book-options.php
   v1.0.8 so the migration is visually identical. Only size-related rules
   change; colors / borders / hover / selected / sold-out states still come
   from the Theme tab tokens shared with the standard preset. */
.bdo-ss-swatches--large {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	overflow: visible;
	flex-wrap: initial;
	gap: var(--bdo-ss-card-gap, 16px);
}
.bdo-ss-swatches--large .bdo-ss-swatch {
	width: auto;
	padding: 14px;
	border-width: 2px !important;
	flex: initial;
}
.bdo-ss-swatches--large .bdo-ss-swatch-img {
	width: 126px;
	height: 126px;
	margin: 0 auto 12px auto;
}
.bdo-ss-swatches--large .bdo-ss-swatch-label {
	font-size: 20px;
	font-weight: 700;
	margin-bottom: 4px;
}
.bdo-ss-swatches--large .bdo-ss-swatch-desc {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
}

@media (max-width: 480px) {
	.bdo-ss-swatches--large {
		flex-wrap: initial;
		overflow: visible;
		padding-left: 0;
		padding-right: 0;
		margin-left: 0;
		margin-right: 0;
		gap: 12px;
	}
	.bdo-ss-swatches--large .bdo-ss-swatch {
		padding: 12px;
		flex: initial;
	}
	.bdo-ss-swatches--large .bdo-ss-swatch-img {
		width: 108px;
		height: 108px;
	}
	.bdo-ss-swatches--large .bdo-ss-swatch-label { font-size: 18px; }
	.bdo-ss-swatches--large .bdo-ss-swatch-desc { font-size: 13px; line-height: 1.3; }
}