/*
 * Per-unit colour / size selectors inside a pricing card.
 *
 * Loaded on every page but inert: the block is display:none unless the tier
 * that precedes it is the selected one, and the markup only exists at all for
 * a product carrying the _psh_pc_units flag.
 *
 * Scoped under .psh-pc__units and reinforced with !important where the host
 * theme competes. The Breakdance WooCommerce stylesheet styles every `select`
 * (`.breakdance-woocommerce select` = 0,1,1) and every `label`, which outranks
 * a bare class selector: that produced a control box whose inner select kept a
 * 1px border, 12px padding and 47px height inside a 44px wrapper, and a
 * `<label>` forced to display:block so the thumbnail collapsed to 0 width
 * (seen live on the DistinctFlair vest 2026-10-12).
 */

/* The block belongs to the selected card: it borrows the card's border, fill
   and radius, and the card squares off its own bottom edge, so the pair reads
   as one panel that grew to hold the rows. */
.psh-pc__units {
	display: none;
}

.psh-pc__card--on + .psh-pc__units {
	display: block;
	margin: 0 0 14px;
	padding: 14px 22px 16px;
	background: var(--psh-pc-bg-on);
	border: 2px solid var(--psh-pc-primary);
	border-top: 0;
	border-radius: 0 0 var(--psh-pc-radius) var(--psh-pc-radius);
}

.psh-pc__card--on:has(+ .psh-pc__units) {
	border-bottom: 0;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.psh-pc__units-label {
	margin: 0 0 8px !important;
	font-size: 13px !important;
	line-height: 1.2 !important;
	color: #6b7280 !important;
}

.psh-pc__unit-row {
	display: flex !important;
	align-items: stretch;
	gap: 8px;
	margin-bottom: 8px;
}

.psh-pc__unit-row:last-child {
	margin-bottom: 0;
}

/* ---- the control box ------------------------------------------------ */

.psh-pc__units .psh-pc__ctl {
	position: relative !important;
	display: flex !important;
	align-items: center !important;
	flex: 1 1 0 !important;
	min-width: 0 !important;
	height: 44px !important;
	min-height: 44px !important;
	margin: 0 !important;
	padding: 0 10px !important;
	background: #fff !important;
	border: 1px solid #d5d9e0 !important;
	border-radius: 8px !important;
	box-sizing: border-box !important;
	overflow: hidden;
	cursor: pointer;
}

.psh-pc__units .psh-pc__ctl--color {
	flex: 1.05 1 0 !important;
}

.psh-pc__units .psh-pc__ctl-thumb {
	flex: 0 0 24px !important;
	width: 24px !important;
	height: 24px !important;
	margin-right: 8px !important;
	border-radius: 4px !important;
	background-color: #f1f3f5;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

/* The native select is a passenger: no border, no fill, full height. */
.psh-pc__units .psh-pc__ctl-select {
	appearance: none !important;
	-webkit-appearance: none !important;
	flex: 1 1 auto !important;
	width: 100% !important;
	height: 100% !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 18px 0 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	font-family: inherit;
	font-size: 14px !important;
	line-height: 1.2 !important;
	color: #111827 !important;
	cursor: pointer;
	text-overflow: ellipsis;
}

.psh-pc__units .psh-pc__ctl-select:focus {
	outline: none !important;
}

.psh-pc__units .psh-pc__ctl-caret {
	position: absolute !important;
	top: 50% !important;
	right: 12px !important;
	margin-top: -2px !important;
	width: 0 !important;
	height: 0 !important;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid #6b7280;
	pointer-events: none;
}

.psh-pc__units-error {
	margin: 8px 0 0 !important;
	font-size: 13px !important;
	line-height: 1.3 !important;
	color: #b42318 !important;
}

.psh-pc__units-error[hidden] {
	display: none !important;
}

/* The reference expresses the saving in money rather than percent. Only
   products in per-unit mode show it, so every other card is untouched. */
.psh-pc__savings-money {
	display: none;
}

.psh-pc--units .psh-pc__savings {
	display: none;
}

.psh-pc--units .psh-pc__savings-money {
	display: inline;
}

@media (max-width: 480px) {
	.psh-pc__units {
		padding: 12px 14px 14px !important;
	}

	.psh-pc__units .psh-pc__ctl {
		height: 42px !important;
		min-height: 42px !important;
		padding: 0 8px !important;
	}

	.psh-pc__units .psh-pc__ctl-thumb {
		flex-basis: 20px !important;
		width: 20px !important;
		height: 20px !important;
		margin-right: 6px !important;
	}

	.psh-pc__units .psh-pc__ctl-select {
		font-size: 13px !important;
	}
}