/**
 * Session picker, single product page.
 *
 * Neutral tokens so the picker inherits the theme. Override --hbss-accent to
 * brand it, or set an accent colour in the product's Sessions & Stock tab.
 */

.hbss-picker {
	--hbss-accent: currentColor;
	--hbss-border: color-mix( in srgb, currentColor 16%, transparent );
	--hbss-border-hover: color-mix( in srgb, currentColor 34%, transparent );
	--hbss-surface: color-mix( in srgb, currentColor 3%, transparent );
	--hbss-surface-selected: color-mix( in srgb, var( --hbss-accent ) 8%, transparent );
	--hbss-radius: 10px;
	box-sizing: border-box;
	margin: 0 0 0.9em;
	max-width: 100%;
	text-align: left;
	width: 100%;
}

/* Older browsers without color-mix fall back to flat alpha values. */
@supports not ( color: color-mix( in srgb, red 10%, transparent ) ) {
	.hbss-picker {
		--hbss-border: rgba( 0, 0, 0, 0.16 );
		--hbss-border-hover: rgba( 0, 0, 0, 0.34 );
		--hbss-surface: rgba( 0, 0, 0, 0.03 );
		--hbss-surface-selected: rgba( 0, 0, 0, 0.06 );
	}
}

.hbss-picker *,
.hbss-picker *::before,
.hbss-picker *::after {
	box-sizing: border-box;
}

/* ----------------------------------------------------------------------
 * Layout repair.
 *
 * Many themes lay form.cart out as a flex or grid row holding the quantity
 * box and the add to cart button. Dropped in unaided, the picker becomes a
 * third item in that row, which squashes it and stretches the quantity box
 * into a tall column. Claiming a full row puts everything back.
 * ------------------------------------------------------------------- */

form.cart.hbss-has-picker {
	align-items: center;
	flex-wrap: wrap;
}

form.cart.hbss-has-picker > .hbss-picker {
	flex: 1 1 100%;
	grid-column: 1 / -1;
	min-width: 0;
	order: -1;
	width: 100%;
}

/* Stop the quantity box inheriting the picker's height. */
form.cart.hbss-has-picker .quantity {
	align-self: center;
	flex: 0 0 auto;
	height: auto;
}

form.cart.hbss-has-picker .quantity input.qty {
	height: auto;
	min-height: 0;
}

/* ---- Groups ----------------------------------------------------------- */

.hbss-picker .hbss-group {
	border: 0;
	margin: 0 0 1.25em;
	max-width: 100%;
	min-width: 0;
	padding: 0;
}

.hbss-picker .hbss-legend {
	display: block;
	float: none;
	font-size: 0.95em;
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.4;
	margin: 0 0 0.55em;
	padding: 0;
	width: auto;
}

/* ---- Option list ------------------------------------------------------ */

.hbss-option-list {
	display: grid;
	gap: 0.55em;
	list-style: none;
	margin: 0;
	padding: 0;
}

.hbss-option-list > li {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hbss-option-list > li::before,
.hbss-option-list > li::marker {
	content: none;
}

.hbss-option__label {
	/* Start-aligned so the checkbox tracks the title, not the description. */
	align-items: start;
	background: var( --hbss-surface );
	border: 1px solid var( --hbss-border );
	border-radius: var( --hbss-radius );
	column-gap: 0.85em;
	cursor: pointer;
	display: grid;
	font-weight: 400;
	grid-template-columns: auto minmax( 0, 1fr ) auto;
	line-height: 1.45;
	margin: 0;
	padding: 0.85em 1em;
	transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.hbss-option__label:hover {
	border-color: var( --hbss-border-hover );
}

.hbss-option__input {
	accent-color: var( --hbss-accent );
	flex: none;
	height: 1.05em;
	/* Nudged down so it sits optically level with the first line of the title. */
	margin: 0.22em 0 0;
	width: 1.05em;
}

.hbss-option__input:focus-visible {
	outline: 2px solid var( --hbss-accent );
	outline-offset: 3px;
}

.hbss-option__body {
	display: block;
	min-width: 0;
}

.hbss-option__title {
	display: block;
	font-weight: 600;
	overflow-wrap: anywhere;
}

.hbss-option__desc {
	display: block;
	font-size: 0.875em;
	line-height: 1.4;
	margin-top: 0.15em;
	opacity: 0.72;
}

.hbss-option__meta {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em;
	margin-top: 0.35em;
}

.hbss-option__meta:empty {
	display: none;
}

.hbss-option__price {
	/* Centred against the whole card while the checkbox tracks the title. */
	align-self: center;
	font-size: 1.02em;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	text-align: right;
	white-space: nowrap;
}

.hbss-option__price:empty {
	display: none;
}

/* Shown before a customer type is chosen, so it reads as indicative. */
.hbss-option__price--range {
	font-size: 0.92em;
	font-weight: 500;
	opacity: 0.6;
}

/* This option's own price is not what is being charged, because a bundle
   covering it is active. */
.hbss-option__price--bundled {
	font-weight: 500;
	opacity: 0.45;
	text-decoration: line-through;
}

/* "Add for $30.00 · save $25.00" on the option that would complete a bundle. */
.hbss-option__deal {
	background: color-mix( in srgb, var( --hbss-accent ) 12%, transparent );
	border-radius: 999px;
	color: var( --hbss-accent );
	display: inline-block;
	font-size: 0.72em;
	font-weight: 700;
	letter-spacing: 0.03em;
	line-height: 1.7;
	padding: 0 0.7em;
	text-transform: uppercase;
	white-space: nowrap;
}

.hbss-option__deal[hidden] {
	display: none;
}

@supports not ( color: color-mix( in srgb, red 10%, transparent ) ) {
	.hbss-option__deal {
		background: rgba( 0, 0, 0, 0.08 );
	}
}

/* Selected state. The class is applied by JavaScript so it does not depend
   on :has() support. */
.hbss-option.is-selected .hbss-option__label {
	background: var( --hbss-surface-selected );
	border-color: var( --hbss-accent );
	box-shadow: inset 0 0 0 1px var( --hbss-accent );
}

/* ---- Badges ----------------------------------------------------------- */

.hbss-badge {
	border-radius: 999px;
	display: inline-block;
	font-size: 0.72em;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.7;
	padding: 0 0.7em;
	text-transform: uppercase;
	white-space: nowrap;
}

.hbss-badge--ok {
	background: rgba( 20, 122, 60, 0.12 );
	color: #0f6132;
}

.hbss-badge--low {
	background: rgba( 190, 110, 0, 0.15 );
	color: #8a5200;
}

.hbss-badge--soldout {
	background: rgba( 160, 30, 30, 0.12 );
	color: #96201e;
}

.hbss-option--soldout .hbss-option__label {
	cursor: not-allowed;
	opacity: 0.5;
}

.hbss-option--soldout .hbss-option__title {
	text-decoration: line-through;
}

.hbss-capacity-notice {
	background: rgba( 190, 110, 0, 0.1 );
	border-radius: 6px;
	border-left: 3px solid #8a5200;
	font-size: 0.875em;
	margin: 0 0 1em;
	padding: 0.6em 0.9em;
}

/* ---- Type dropdown ---------------------------------------------------- */

.hbss-picker .hbss-type-select {
	display: block;
	max-width: 100%;
	width: 100%;
}

/* ---- Running total ---------------------------------------------------- */

.hbss-summary {
	align-items: baseline;
	border-top: 1px solid var( --hbss-border );
	column-gap: 0.6em;
	display: flex;
	flex-wrap: wrap;
	margin: 1.05em 0 0.3em;
	padding-top: 0.85em;
	row-gap: 0.2em;
}

.hbss-summary__label {
	font-size: 0.95em;
	font-weight: 600;
}

.hbss-summary__prices {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: 0.45em;
	justify-content: flex-end;
	margin-left: auto;
}

.hbss-summary__was {
	font-size: 1em;
	font-variant-numeric: tabular-nums;
	font-weight: 500;
	opacity: 0.5;
	text-decoration: line-through;
}

.hbss-summary__was[hidden] {
	display: none;
}

.hbss-summary__value {
	font-size: 1.5em;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	line-height: 1.15;
}

.hbss-summary__save {
	background: color-mix( in srgb, var( --hbss-accent ) 12%, transparent );
	border-radius: 999px;
	color: var( --hbss-accent );
	flex: 0 1 auto;
	font-size: 0.76em;
	font-weight: 700;
	letter-spacing: 0.03em;
	line-height: 1.8;
	margin-top: 0.35em;
	order: 3;
	padding: 0 0.75em;
	text-transform: uppercase;
}

.hbss-summary__save[hidden] {
	display: none;
}

@supports not ( color: color-mix( in srgb, red 10%, transparent ) ) {
	.hbss-summary__save {
		background: rgba( 0, 0, 0, 0.08 );
	}
}

.hbss-summary__note {
	flex: 1 0 100%;
	order: 4;
	font-size: 0.83em;
	line-height: 1.4;
	opacity: 0.68;
}

.hbss-summary__note:empty {
	display: none;
}

.hbss-error {
	background: rgba( 160, 30, 30, 0.08 );
	border-radius: 6px;
	border-left: 3px solid #96201e;
	color: #96201e;
	font-size: 0.9em;
	margin: 0 0 1em;
	padding: 0.6em 0.9em;
}

.hbss-error[hidden] {
	display: none;
}

/* ---- Disabled add to cart --------------------------------------------- */

form.cart.hbss-has-picker .hbss-disabled,
form.cart.hbss-has-picker button.hbss-disabled {
	cursor: not-allowed;
	filter: grayscale( 0.35 );
	opacity: 0.45;
}

/* ---- Narrow screens ---------------------------------------------------- */

@media ( max-width: 480px ) {
	.hbss-option__label {
		column-gap: 0.7em;
		grid-template-columns: auto minmax( 0, 1fr );
		padding: 0.8em 0.85em;
	}

	.hbss-option__price {
		align-self: start;
		grid-column: 2;
		margin-top: 0.35em;
		text-align: left;
	}

	.hbss-summary__prices {
		justify-content: flex-start;
		margin-left: 0;
	}
}