/**
 * STW Plan Builder — step 1 (plan chooser) only
 *
 * DELIBERATELY STANDALONE, with its own `stw-pbs-` prefix and its own token block.
 * There is no bundler here, so the ~20 duplicated lines of reset and tokens are the
 * cheaper trade against a third stylesheet loaded on both pages — and it means the
 * chooser cannot be restyled by accident when the wizard changes.
 *
 * Same rules as the wizard sheet: root `.stw-pbs`, every selector at least two
 * classes specific, everything `stw-pbs-` prefixed, scoped resets only, one
 * `!important` for the hard hide and one for the list reset, no Bootstrap, tap
 * targets at 44px, `:focus-visible` rings that do not depend on the theme, and
 * `prefers-reduced-motion` honoured.
 */

.stw-pbs {
	--stw-pbs-accent: #1f7a4c;
	--stw-pbs-fg: #1c1c1c;
	--stw-pbs-muted: #5c6470;
	--stw-pbs-bg: #ffffff;
	--stw-pbs-surface: #f5f6f7;
	--stw-pbs-border: #d5d9de;
	--stw-pbs-focus: #0b63c5;
	--stw-pbs-radius: 10px;
	--stw-pbs-columns: 3;
}

.stw-pbs,
.stw-pbs *,
.stw-pbs *::before,
.stw-pbs *::after {
	box-sizing: border-box;
}

/* !important #1 of 2 — themes force `display` on list items. */
.stw-pbs-hidden {
	display: none !important;
}

/* !important #2 of 2 — stw2021 and ep-v3 both ship
 * `ul li { list-style: disc !important; }`. */
.stw-pbs .stw-pbs-grid,
.stw-pbs .stw-pbs-grid > .stw-pbs-card {
	list-style: none !important;
	margin: 0;
	padding: 0;
}

.stw-pbs.stw-pbs-start {
	margin: 0 0 24px;
}

.stw-pbs .stw-pbs-start__title {
	margin: 0 0 16px;
}

.stw-pbs .stw-pbs-grid {
	display: grid;
	gap: 16px;
	grid-template-columns: 1fr;
}

@media ( min-width: 34rem ) {
	.stw-pbs .stw-pbs-grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

@media ( min-width: 60rem ) {
	.stw-pbs .stw-pbs-grid {
		grid-template-columns: repeat( var( --stw-pbs-columns ), minmax( 0, 1fr ) );
	}
}

.stw-pbs .stw-pbs-card {
	display: flex;
}

.stw-pbs .stw-pbs-card__link {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
	/* 44px minimum tap target is trivially exceeded, but state it so a future
	 * compact variant cannot drop below it. */
	min-height: 44px;
	padding: 16px;
	color: var( --stw-pbs-fg );
	text-decoration: none;
	background: var( --stw-pbs-bg );
	border: 1px solid var( --stw-pbs-border );
	border-radius: var( --stw-pbs-radius );
	transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}

.stw-pbs .stw-pbs-card__link:hover,
.stw-pbs .stw-pbs-card__link:focus {
	border-color: var( --stw-pbs-accent );
	box-shadow: 0 2px 12px rgba( 0, 0, 0, 0.1 );
	text-decoration: none;
}

.stw-pbs .stw-pbs-card__link:focus-visible {
	outline: 3px solid var( --stw-pbs-focus );
	outline-offset: 2px;
}

.stw-pbs .stw-pbs-card--last .stw-pbs-card__link {
	border-color: var( --stw-pbs-accent );
}

.stw-pbs .stw-pbs-card__badge {
	position: absolute;
	top: 8px;
	right: 8px;
	padding: 3px 8px;
	font-size: 0.6875rem;
	font-weight: 600;
	color: var( --stw-pbs-bg );
	background: var( --stw-pbs-accent );
	border-radius: 999px;
}

.stw-pbs .stw-pbs-card__media {
	display: block;
}

.stw-pbs .stw-pbs-card__media .stw-pbs-card__img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	border-radius: calc( var( --stw-pbs-radius ) - 4px );
}

.stw-pbs .stw-pbs-card__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.stw-pbs .stw-pbs-card__title {
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.3;
}

.stw-pbs .stw-pbs-card__size {
	font-size: 0.875rem;
	color: var( --stw-pbs-muted );
}

.stw-pbs .stw-pbs-card__price {
	font-size: 1.125rem;
	font-weight: 700;
}

/* WooCommerce's own sale markup: <del> is the RRP, <ins> the current price. */
.stw-pbs .stw-pbs-card__price del,
.stw-pbs .stw-pbs-card__per del {
	margin-right: 6px;
	font-weight: 400;
	color: var( --stw-pbs-muted );
}

.stw-pbs .stw-pbs-card__price ins,
.stw-pbs .stw-pbs-card__per ins {
	text-decoration: none;
	background: none;
}

.stw-pbs .stw-pbs-card__per {
	font-size: 0.875rem;
	color: var( --stw-pbs-muted );
}

.stw-pbs .stw-pbs-card__cta {
	margin-top: 6px;
	font-weight: 600;
	color: var( --stw-pbs-accent );
}

@media ( prefers-reduced-motion: reduce ) {
	.stw-pbs .stw-pbs-card__link {
		transition: none;
	}
}