/* =============================================================================
   Build-Your-Own-Pack (BYOP) — Festival Pack Builder
   Mobile-first. All styles scoped under .byop.
   Brand colors come from CSS vars set per-festival on the section element:
     --byop-accent, --byop-accent-dark, --byop-ink, --byop-surface
   ============================================================================= */

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

/* The `hidden` HTML attribute must always win — author CSS would otherwise
   override it (e.g. display:flex on .byop__resume). */
.byop [hidden] { display: none !important; }

.byop {
	/* Mr. B's site brand palette — locked 2026-06-26.
	   Inline style on <section.byop> can still override, but matches by default. */
	--byop-accent:        #632317;
	--byop-accent-dark:   #3F1610;
	--byop-ink:           #250D09;
	--byop-surface:       #F7ECDA;
	--byop-card:          #FFFFFF;
	--byop-line:          rgba(37, 13, 9, 0.10);
	--byop-muted:         rgba(37, 13, 9, 0.60);
	--byop-radius:        18px;
	--byop-radius-sm:     12px;
	--byop-pad-x:         clamp(16px, 3vw, 28px);
	--byop-pad-y:         clamp(20px, 3vw, 32px);
	--byop-gap:           clamp(12px, 2vw, 20px);
	--byop-shadow-sm:     0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.04);
	--byop-shadow-md:     0 2px 6px rgba(0,0,0,0.05), 0 12px 28px rgba(0,0,0,0.06);
	--byop-shadow-cta:    0 8px 22px color-mix(in srgb, var(--byop-accent) 30%, transparent);
	--byop-font-display:  "Albert Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
	--byop-font-body:     "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

	position: relative;
	padding: var(--byop-pad-y) var(--byop-pad-x);
	background: var(--byop-surface);
	color: var(--byop-ink);
	font-family: var(--byop-font-body);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

.byop__inner {
	max-width: 1240px;
	margin: 0 auto;
}

/* --- Hero -----------------------------------------------------------------
   Compact horizontal layout on desktop so the build is visible above the fold.
   Mobile keeps it stacked + centered.
   ----------------------------------------------------------------------- */

.byop__hero {
	display: grid;
	grid-template-columns: 1fr;
	gap: 6px;
	text-align: center;
	margin-bottom: clamp(16px, 2.5vw, 24px);
}

.byop__hero-text {
	display: contents;
}

@media (min-width: 768px) {
	.byop__hero {
		grid-template-columns: 1fr auto;
		align-items: center;
		text-align: left;
		row-gap: 4px;
		column-gap: 24px;
		grid-template-areas:
			"eyebrow meta"
			"title   meta"
			"subtitle subtitle";
	}
	.byop__eyebrow  { grid-area: eyebrow;  }
	.byop__title    { grid-area: title;    }
	.byop__subtitle { grid-area: subtitle; }
	.byop__hero-meta{ grid-area: meta;     }
}

.byop__eyebrow {
	font-family: var(--byop-font-display);
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--byop-accent);
	margin: 0;
	font-weight: 700;
	line-height: 1;
}

.byop__title {
	font-family: var(--byop-font-display);
	font-size: clamp(24px, 3.4vw, 34px);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.05;
	margin: 0;
	color: var(--byop-ink);
}

.byop__subtitle {
	font-size: clamp(13px, 1.2vw, 15px);
	color: var(--byop-muted);
	max-width: 620px;
	margin: 4px auto 0;
	line-height: 1.5;
}

@media (min-width: 768px) {
	.byop__subtitle { margin: 2px 0 0; max-width: 100%; }
}

.byop__hero-meta {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	justify-content: center;
	margin-top: 10px;
}

@media (min-width: 768px) {
	.byop__hero-meta { margin-top: 0; justify-self: end; }
}

.byop__hero-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	border-radius: 999px;
	background: var(--byop-card);
	border: 1px solid var(--byop-line);
	font-family: var(--byop-font-display);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.01em;
	color: var(--byop-ink);
	box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.byop__hero-pill--strong {
	background: var(--byop-ink);
	color: #fff;
	border-color: var(--byop-ink);
}

.byop__hero-pill-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--byop-accent);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--byop-accent) 22%, transparent);
	display: inline-block;
}

/* --- Resume banner -------------------------------------------------------- */

.byop__resume {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	background: color-mix(in srgb, var(--byop-accent) 8%, var(--byop-card));
	border: 1px solid color-mix(in srgb, var(--byop-accent) 24%, transparent);
	color: var(--byop-ink);
	padding: 12px 16px;
	border-radius: var(--byop-radius-sm);
	margin-bottom: 20px;
	font-size: 14px;
}

.byop__resume-actions {
	display: flex;
	gap: 8px;
}

/* --- Progress rail -------------------------------------------------------- */

.byop__progress {
	margin-bottom: clamp(14px, 2vw, 20px);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.byop__progress::-webkit-scrollbar { display: none; }

/* Reset OL/UL semantics that Salient parent theme reapplies — without these,
   the browser's <ol> counter leaks out as "1." "2." "3." after each label. */
.byop__progress-list,
.byop__progress-list > li {
	list-style: none !important;
	list-style-type: none !important;
}

.byop__progress-list {
	display: flex;
	gap: 6px;
	margin: 0;
	padding: 2px;
	min-width: max-content;
	counter-reset: none;
	/* Center the step row relative to the page, not the content column.
	   width:max-content + auto margins center when the row fits; on narrow
	   screens the row overflows and the existing horizontal scroll takes over. */
	width: max-content;
	margin-left: auto;
	margin-right: auto;
	justify-content: center;
}

.byop__progress-list > li::marker,
.byop__progress-list > li::before {
	content: none !important;
	display: none !important;
}

.byop__progress-step {
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
}

.byop__progress-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--byop-card);
	border: 1px solid var(--byop-line);
	color: var(--byop-muted);
	border-radius: 999px;
	padding: 6px 14px 6px 6px;
	font-size: 13px;
	font-weight: 700;
	font-family: var(--byop-font-display);
	cursor: pointer;
	transition: transform 220ms cubic-bezier(.2,.9,.3,1.2),
	            background-color 180ms ease,
	            border-color 180ms ease,
	            color 180ms ease,
	            opacity 180ms ease;
	white-space: nowrap;
	line-height: 1;
}

.byop__progress-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--byop-accent) 10%, var(--byop-line));
	color: var(--byop-ink);
	font-size: 12px;
	font-weight: 800;
	flex-shrink: 0;
	transition: background-color 180ms ease, color 180ms ease;
}

.byop__progress-label {
	display: inline-block;
	line-height: 1;
}

.byop__progress-step.is-active .byop__progress-btn {
	background: var(--byop-accent);
	border-color: var(--byop-accent);
	color: #fff;
}

.byop__progress-step.is-active .byop__progress-num {
	background: rgba(255, 255, 255, 0.25);
	color: #fff;
}

.byop__progress-step.is-complete .byop__progress-btn {
	color: var(--byop-accent-dark);
	border-color: color-mix(in srgb, var(--byop-accent) 35%, transparent);
	background: color-mix(in srgb, var(--byop-accent) 6%, var(--byop-card));
}

.byop__progress-step.is-complete .byop__progress-num {
	background: var(--byop-accent);
	color: transparent;        /* hide the number */
	position: relative;
}

.byop__progress-step.is-complete .byop__progress-num::after {
	content: "✓";
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 14px;
	font-weight: 800;
}

.byop__progress-btn:hover {
	transform: translateY(-1px);
}

.byop__progress-btn:focus-visible {
	outline: 2px solid var(--byop-accent);
	outline-offset: 2px;
}

/* --- Layout: main + summary ---------------------------------------------- */

.byop__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(20px, 3vw, 36px);
}

.byop__summary { display: none; }

@media (min-width: 1024px) {
	.byop__layout {
		grid-template-columns: minmax(0, 1fr) 320px;
		align-items: start;
	}
	.byop__summary { display: block; position: sticky; top: 24px; }
}

/* --- Step panel ----------------------------------------------------------- */

.byop__step[hidden] { display: none; }

.byop__step {
	background: var(--byop-card);
	border: 1px solid var(--byop-line);
	border-radius: var(--byop-radius);
	padding: clamp(16px, 2vw, 22px) clamp(16px, 2vw, 24px);
	box-shadow: var(--byop-shadow-sm);
}

.byop__step-head {
	margin-bottom: clamp(12px, 1.8vw, 18px);
	display: grid;
	grid-template-columns: 1fr;
	gap: 2px;
}

@media (min-width: 768px) {
	.byop__step-head {
		grid-template-columns: 1fr auto;
		align-items: baseline;
		column-gap: 18px;
	}
	.byop__step-head .byop__step-eyebrow { grid-column: 1 / -1; order: -1; }
	.byop__step-head .byop__step-title   { grid-column: 1; }
	.byop__step-head .byop__step-desc    { grid-column: 2; justify-self: end; text-align: right; }
}

.byop__step-eyebrow {
	font-family: var(--byop-font-display);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--byop-muted);
	margin: 0;
}

.byop__step-title {
	font-family: var(--byop-font-display);
	font-size: clamp(20px, 2.2vw, 24px);
	font-weight: 800;
	letter-spacing: -0.02em;
	margin: 2px 0 0;
	color: var(--byop-ink);
	line-height: 1.15;
}

.byop__step-desc {
	margin: 0;
	color: var(--byop-muted);
	font-size: 13px;
	line-height: 1.5;
}

.byop__step-empty {
	padding: 40px 20px;
	text-align: center;
	color: var(--byop-muted);
	border: 1px dashed var(--byop-line);
	border-radius: var(--byop-radius-sm);
}

/* --- Grid + Card ---------------------------------------------------------- */

.byop__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--byop-gap);
}

@media (min-width: 560px) {
	.byop__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
	.byop__grid { grid-template-columns: repeat(3, 1fr); }
}
/* Wider desktops: 4-up so 6-card steps mostly fit above the fold. */
@media (min-width: 1280px) {
	.byop__grid { grid-template-columns: repeat(4, 1fr); }
}

.byop__card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--byop-card);
	border: 1px solid var(--byop-line);
	border-radius: var(--byop-radius);
	overflow: hidden;
	transition: transform 220ms cubic-bezier(.2,.9,.3,1.2),
	            box-shadow 220ms ease,
	            border-color 180ms ease;
}

.byop__card:hover {
	transform: translateY(-2px);
	box-shadow: var(--byop-shadow-md);
}

.byop__card.is-selected {
	border-color: var(--byop-accent);
	box-shadow:
		0 0 0 1px var(--byop-accent),
		var(--byop-shadow-md);
}

.byop__card.is-featured {
	border-color: color-mix(in srgb, var(--byop-accent) 30%, var(--byop-line));
}

.byop__badge {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	background: var(--byop-accent);
	color: #fff;
	font-family: var(--byop-font-display);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 999px;
	box-shadow: var(--byop-shadow-cta);
}

.byop__card-media {
	position: relative;
	aspect-ratio: 5 / 4;
	background: #ffffff;
	overflow: hidden;
}

.byop__card-media::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--byop-accent) 14%, transparent) 0%, transparent 60%);
	opacity: 0;
	transition: opacity 280ms ease;
}

.byop__card:hover .byop__card-media::before { opacity: 1; }

.byop__card-media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	padding: 10px;
	display: block;
	transition: transform 400ms ease;
	box-sizing: border-box;
}

/* Generic placeholder when no real product image is available (e.g. WC default). */
.byop__card-media img[src*="placeholder"],
.byop__card-media img:not([src]),
.byop__card-media img[src=""] {
	opacity: 0.2;
	mix-blend-mode: multiply;
}

.byop__card:hover .byop__card-media img {
	transform: scale(1.03);
}

.byop__card-body {
	padding: 12px 14px 4px;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.byop__card-name {
	font-family: var(--byop-font-display);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--byop-ink);
	margin: 0;
	line-height: 1.2;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.byop__card-short {
	font-size: 12px;
	color: var(--byop-muted);
	margin: 0;
	line-height: 1.45;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Hide secondary card description on wider desktop where we go 4-up — keeps
   cards short enough that two rows fit above the fold. */
@media (min-width: 1280px) {
	.byop__card-short { display: none; }
}

.byop__card-price {
	margin-top: auto;
	font-family: var(--byop-font-display);
	font-size: 17px;
	font-weight: 700;
	color: var(--byop-ink);
}

.byop__card-price .woocommerce-Price-amount { color: inherit; }
.byop__card-price del { color: var(--byop-muted); margin-right: 6px; font-weight: 500; }
.byop__card-price ins { background: transparent; text-decoration: none; }

/* Variation picker */

.byop__variations[hidden] { display: none; }

.byop__variations {
	display: grid;
	gap: 8px;
	margin-top: 8px;
	min-width: 0;
}

.byop__variation {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.byop__variation-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--byop-muted);
}

.byop__variation select {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	border: 1px solid var(--byop-line);
	background: var(--byop-card);
	color: var(--byop-ink);
	border-radius: 10px;
	padding: 8px 32px 8px 12px;
	font-size: 13px;
	font-family: var(--byop-font-body);
	background-image:
		linear-gradient(45deg, transparent 50%, var(--byop-ink) 50%),
		linear-gradient(135deg, var(--byop-ink) 50%, transparent 50%);
	background-position:
		calc(100% - 18px) 50%,
		calc(100% - 13px) 50%;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	cursor: pointer;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.byop__variation select:focus-visible {
	outline: 2px solid var(--byop-accent);
	outline-offset: 1px;
}

/* Card actions */

.byop__card-actions {
	padding: 10px 14px 14px;
	display: flex;
	gap: 8px;
	align-items: center;
}

.byop__add {
	flex: 1 1 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: var(--byop-accent);
	color: #fff;
	border: 1.5px solid var(--byop-accent);
	border-radius: 999px;
	padding: 12px 16px;
	font-family: var(--byop-font-display);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.02em;
	cursor: pointer;
	box-shadow: 0 4px 12px color-mix(in srgb, var(--byop-accent) 22%, transparent);
	transition: transform 180ms cubic-bezier(.2,.9,.3,1.2),
	            background-color 180ms ease,
	            color 180ms ease,
	            border-color 180ms ease,
	            box-shadow 220ms ease;
}

.byop__add:hover {
	background: var(--byop-accent-dark);
	border-color: var(--byop-accent-dark);
	transform: translateY(-2px);
	box-shadow:
		0 6px 14px color-mix(in srgb, var(--byop-accent) 28%, transparent),
		0 14px 28px color-mix(in srgb, var(--byop-accent) 32%, transparent);
}

.byop__add:focus-visible {
	outline: 2px solid var(--byop-accent-dark);
	outline-offset: 2px;
}

.byop__add:active { transform: translateY(0); }

/* When a card is added to the pack, the qty stepper replaces the Add button
   entirely — avoids cramming both into ~210px-wide card actions row. */
.byop__card.is-selected .byop__add { display: none; }

.byop__add-icon {
	display: inline-block;
	font-size: 18px;
	line-height: 1;
	transition: transform 220ms cubic-bezier(.2,.9,.3,1.2);
}

.byop__qty[hidden] { display: none; }

.byop__qty {
	flex: 1 1 100%;
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 4px;
	border: 1.5px solid var(--byop-accent);
	border-radius: 999px;
	padding: 4px 4px 4px 4px;
	background: color-mix(in srgb, var(--byop-accent) 6%, var(--byop-card));
	min-height: 44px;
}

.byop__qty-btn {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 0;
	background: var(--byop-card);
	color: var(--byop-ink);
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
	flex-shrink: 0;
}

.byop__qty-btn:hover {
	background: var(--byop-accent);
	color: #fff;
}

.byop__qty-btn:active { transform: scale(0.92); }

.byop__qty-btn:focus-visible {
	outline: 2px solid var(--byop-accent);
	outline-offset: 2px;
}

.byop__qty-num {
	font-family: var(--byop-font-display);
	font-size: 15px;
	font-weight: 800;
	color: var(--byop-ink);
	flex: 1 1 auto;
	text-align: center;
	line-height: 1;
}

.byop__qty-remove {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 0;
	background: transparent;
	color: var(--byop-muted);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-left: 2px;
	transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
	flex-shrink: 0;
}

.byop__qty-remove:hover {
	background: color-mix(in srgb, var(--byop-ink) 8%, transparent);
	color: var(--byop-ink);
}

.byop__qty-remove:focus-visible {
	outline: 2px solid var(--byop-accent);
	outline-offset: 2px;
}

.byop__qty-remove svg {
	display: block;
}

/* --- Sticky step CTA bar -------------------------------------------------
   Lives between the stepper and the card layout. Pins to viewport top once
   scrolled past so the Continue button is always reachable while browsing
   cards. Salient navbar offset is injected as --byop-sticky-offset by JS.
   ---------------------------------------------------------------------- */

.byop__step-cta-bar {
	position: sticky;
	top: var(--byop-sticky-offset, 0px);
	z-index: 20;
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: clamp(14px, 2vw, 20px);
	padding: 10px 12px 10px 14px;
	background: color-mix(in srgb, var(--byop-accent) 4%, var(--byop-card));
	border: 1px solid color-mix(in srgb, var(--byop-accent) 18%, transparent);
	border-radius: 999px;
	box-shadow:
		0 1px 2px rgba(37, 13, 9, 0.04),
		0 10px 24px rgba(37, 13, 9, 0.06);
	backdrop-filter: saturate(140%) blur(6px);
	-webkit-backdrop-filter: saturate(140%) blur(6px);
}

.byop__cta-back[hidden] { display: none; }

.byop__cta-back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: transparent;
	border: 1px solid var(--byop-line);
	color: var(--byop-ink);
	border-radius: 999px;
	padding: 8px 14px 8px 10px;
	font-family: var(--byop-font-display);
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	flex-shrink: 0;
	line-height: 1;
	transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.byop__cta-back:hover {
	background: color-mix(in srgb, var(--byop-ink) 6%, transparent);
	border-color: color-mix(in srgb, var(--byop-ink) 30%, var(--byop-line));
}

.byop__cta-back:focus-visible {
	outline: 2px solid var(--byop-accent);
	outline-offset: 2px;
}

.byop__cta-back svg { flex-shrink: 0; }

.byop__cta-context {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.15;
	gap: 2px;
}

.byop__cta-counter {
	font-family: var(--byop-font-display);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--byop-muted);
}

.byop__cta-title {
	font-family: var(--byop-font-display);
	font-size: 15px;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--byop-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.byop__cta-forward {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--byop-accent);
	color: #fff;
	border: 0;
	border-radius: 999px;
	padding: 11px 18px;
	font-family: var(--byop-font-display);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.01em;
	cursor: pointer;
	flex-shrink: 0;
	line-height: 1;
	box-shadow: var(--byop-shadow-cta);
	transition: transform 180ms cubic-bezier(.2,.9,.3,1.2),
	            background-color 180ms ease,
	            box-shadow 220ms ease;
}

.byop__cta-forward:hover {
	background: var(--byop-accent-dark);
	transform: translateY(-1px);
	box-shadow:
		0 6px 14px color-mix(in srgb, var(--byop-accent) 28%, transparent),
		0 14px 28px color-mix(in srgb, var(--byop-accent) 32%, transparent);
}

.byop__cta-forward:active { transform: translateY(0); }

.byop__cta-forward:focus-visible {
	outline: 2px solid var(--byop-accent-dark);
	outline-offset: 3px;
}

.byop__cta-forward.is-disabled {
	opacity: 0.45;
	box-shadow: none;
	cursor: not-allowed;
}

.byop__cta-forward.is-disabled:hover {
	transform: none;
	background: var(--byop-accent);
	box-shadow: none;
}

.byop__cta-forward svg { flex-shrink: 0; }

@media (max-width: 640px) {
	.byop__step-cta-bar {
		padding: 8px 8px 8px 10px;
		gap: 8px;
		border-radius: 999px;
	}
	.byop__cta-back-label { display: none; }
	.byop__cta-back { padding: 8px; }
	.byop__cta-counter { display: none; }
	.byop__cta-title { font-size: 14px; }
	.byop__cta-forward { padding: 10px 14px; font-size: 13px; }
	/* Forward label gets ellipsized on tiny screens. */
	.byop__cta-forward-label {
		max-width: 140px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}

.byop__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-family: var(--byop-font-display);
	font-weight: 700;
	letter-spacing: 0.01em;
	border-radius: 999px;
	padding: 12px 22px;
	font-size: 15px;
	border: 0;
	cursor: pointer;
	transition: transform 180ms cubic-bezier(.2,.9,.3,1.2),
	            box-shadow 220ms ease,
	            background-color 180ms ease,
	            color 180ms ease,
	            opacity 180ms ease;
}

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

.byop__btn--primary {
	background: var(--byop-accent);
	color: #fff;
	box-shadow: var(--byop-shadow-cta);
}

.byop__btn--primary:hover {
	background: var(--byop-accent-dark);
	transform: translateY(-2px);
	box-shadow:
		0 4px 8px color-mix(in srgb, var(--byop-accent) 20%, transparent),
		0 14px 30px color-mix(in srgb, var(--byop-accent) 40%, transparent);
}

.byop__btn--primary:active { transform: translateY(0); }

.byop__btn--primary:disabled {
	opacity: 0.45;
	cursor: not-allowed;
	box-shadow: none;
	transform: none;
}

.byop__btn--ghost {
	background: transparent;
	color: var(--byop-ink);
	border: 1.5px solid var(--byop-line);
	padding: 10px 18px;
}

.byop__btn--ghost:hover {
	border-color: var(--byop-ink);
	background: color-mix(in srgb, var(--byop-ink) 4%, transparent);
}

.byop__btn--cta {
	padding: 14px 28px;
	font-size: 16px;
}

/* --- Summary (desktop side panel) ---------------------------------------- */

.byop__summary-card {
	background: var(--byop-card);
	border: 1px solid var(--byop-line);
	border-radius: var(--byop-radius);
	padding: 20px;
	box-shadow: var(--byop-shadow-sm);
}

.byop__summary-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 14px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--byop-line);
}

.byop__summary-title {
	font-family: var(--byop-font-display);
	font-size: 16px;
	font-weight: 800;
	letter-spacing: -0.01em;
	margin: 0;
	color: var(--byop-ink);
}

.byop__summary-count {
	font-size: 12px;
	color: var(--byop-muted);
	font-weight: 600;
}

.byop__summary-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-height: 360px;
	overflow-y: auto;
}

.byop__summary-item {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
}

.byop__summary-thumb {
	width: 36px;
	height: 36px;
	border-radius: 8px;
	background: var(--byop-line);
	object-fit: cover;
	flex-shrink: 0;
}

.byop__summary-item-body {
	flex: 1 1 auto;
	min-width: 0;
}

.byop__summary-item-name {
	font-weight: 600;
	color: var(--byop-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.byop__summary-item-meta {
	font-size: 11px;
	color: var(--byop-muted);
}

.byop__summary-item-price {
	font-family: var(--byop-font-display);
	font-weight: 700;
	color: var(--byop-ink);
	font-size: 13px;
}

.byop__summary-empty {
	color: var(--byop-muted);
	font-style: italic;
	font-size: 13px;
}

.byop__summary-foot {
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid var(--byop-line);
}

.byop__summary-total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-family: var(--byop-font-display);
	font-size: 14px;
	color: var(--byop-muted);
}

.byop__summary-total strong {
	font-size: 22px;
	color: var(--byop-ink);
	font-weight: 800;
}

/* --- Review step ---------------------------------------------------------- */

.byop__review-empty[hidden] { display: none; }
.byop__review-empty {
	padding: 28px;
	text-align: center;
	border: 1px dashed var(--byop-line);
	border-radius: var(--byop-radius-sm);
	color: var(--byop-muted);
}

.byop__review-groups {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.byop__review-group {
	border: 1px solid var(--byop-line);
	border-radius: var(--byop-radius-sm);
	padding: 16px;
}

.byop__review-group-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
}

.byop__review-group-title {
	font-family: var(--byop-font-display);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--byop-muted);
	margin: 0;
}

/* --- Pack multiplier ("Have a friend coming?") ----------------------------- */

.byop__packs {
	text-align: center;
	padding: 18px 16px 16px;
	margin-bottom: 18px;
	border: 1.5px dashed color-mix(in srgb, var(--byop-accent) 40%, transparent);
	border-radius: var(--byop-radius-sm);
	background: color-mix(in srgb, var(--byop-accent) 4%, var(--byop-card));
}

.byop__packs-prompt {
	font-family: var(--byop-font-display);
	font-size: 15px;
	font-weight: 700;
	color: var(--byop-ink);
	margin: 0 0 10px;
}

.byop__packs-stepper {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	background: var(--byop-card);
	border: 1px solid var(--byop-line);
	border-radius: 999px;
	padding: 4px;
	box-shadow: var(--byop-shadow-sm);
}

.byop__packs-btn {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 0;
	background: var(--byop-accent);
	color: #fff;
	font-size: 18px;
	font-weight: 800;
	line-height: 1;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: transform 160ms cubic-bezier(.2,.9,.3,1.2), opacity 160ms ease;
}

.byop__packs-btn:hover { transform: scale(1.06); }
.byop__packs-btn:active { transform: scale(0.94); }
.byop__packs-btn:focus-visible { outline: 2px solid var(--byop-accent); outline-offset: 2px; }
.byop__packs-btn.is-disabled,
.byop__packs-btn:disabled {
	opacity: 0.35;
	cursor: default;
	transform: none;
}

.byop__packs-count {
	font-family: var(--byop-font-display);
	font-size: 16px;
	font-weight: 800;
	color: var(--byop-ink);
	min-width: 76px;
	text-align: center;
}

.byop__packs-badges {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin-top: 12px;
}

.byop__packs-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--byop-accent);
	color: #fff;
	font-family: var(--byop-font-display);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.byop__packs-note {
	font-size: 12.5px;
	color: var(--byop-muted);
	margin: 10px 0 0;
}

/* --- Review inline qty controls -------------------------------------------- */

.byop__review-item-controls {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	flex: 0 0 auto;
}

.byop__review-qty-btn {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 1px solid var(--byop-line);
	background: var(--byop-card);
	color: var(--byop-ink);
	font-size: 14px;
	font-weight: 800;
	line-height: 1;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: transform 160ms cubic-bezier(.2,.9,.3,1.2), background-color 160ms ease, border-color 160ms ease;
}

.byop__review-qty-btn:hover {
	border-color: var(--byop-accent);
	background: color-mix(in srgb, var(--byop-accent) 8%, var(--byop-card));
	transform: scale(1.05);
}
.byop__review-qty-btn:active { transform: scale(0.94); }
.byop__review-qty-btn:focus-visible { outline: 2px solid var(--byop-accent); outline-offset: 2px; }
.byop__review-qty-btn.is-disabled { opacity: 0.35; cursor: default; }
.byop__review-qty-btn.is-disabled:hover { transform: none; border-color: var(--byop-line); background: var(--byop-card); }

.byop__review-qty-num {
	min-width: 22px;
	text-align: center;
	font-family: var(--byop-font-display);
	font-size: 13px;
	font-weight: 800;
	color: var(--byop-ink);
}

.byop__review-remove {
	width: 26px;
	height: 26px;
	margin-left: 4px;
	border-radius: 50%;
	border: 0;
	background: transparent;
	color: var(--byop-muted);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: transform 160ms cubic-bezier(.2,.9,.3,1.2), background-color 160ms ease, color 160ms ease;
}

.byop__review-remove:hover {
	background: rgba(180, 40, 40, 0.10);
	color: #B42828;
	transform: scale(1.05);
}
.byop__review-remove:active { transform: scale(0.94); }
.byop__review-remove:focus-visible { outline: 2px solid var(--byop-accent); outline-offset: 2px; }

/* --- Review multiplier breakdown row ---------------------------------------- */

.byop__review-multiplier {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-top: 16px;
	padding: 8px 0 0;
	color: var(--byop-muted);
}

.byop__review-multiplier-label {
	font-family: var(--byop-font-display);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.byop__review-multiplier-value {
	font-family: var(--byop-font-display);
	font-size: 14px;
	font-weight: 700;
}

.byop__review-items {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.byop__review-item {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 14px;
}

.byop__review-item-name { flex: 1 1 auto; color: var(--byop-ink); }
.byop__review-item-meta { color: var(--byop-muted); font-size: 12px; }
.byop__review-item-qty  { color: var(--byop-muted); font-size: 12px; min-width: 30px; text-align: right; }
.byop__review-item-price { font-family: var(--byop-font-display); font-weight: 700; min-width: 60px; text-align: right; }

.byop__review-total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-top: 20px;
	padding-top: 16px;
	border-top: 2px solid var(--byop-line);
}

.byop__review-total-label {
	font-family: var(--byop-font-display);
	font-size: 16px;
	font-weight: 700;
	color: var(--byop-ink);
}

.byop__review-total-value {
	font-family: var(--byop-font-display);
	font-size: 28px;
	font-weight: 800;
	color: var(--byop-ink);
	letter-spacing: -0.02em;
}

/* --- Toast ---------------------------------------------------------------- */

.byop__toast {
	position: fixed;
	left: 50%;
	bottom: 20px;
	transform: translateX(-50%) translateY(20px);
	background: var(--byop-ink);
	color: #fff;
	padding: 12px 20px;
	border-radius: 12px;
	font-size: 14px;
	z-index: 1000;
	box-shadow: var(--byop-shadow-md);
	opacity: 0;
	transition: transform 220ms cubic-bezier(.2,.9,.3,1.2), opacity 220ms ease;
	pointer-events: none;
}

.byop__toast.is-visible {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

/* --- Step entrance animation --------------------------------------------- */

@keyframes byop-step-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

.byop__step.is-active {
	animation: byop-step-in 320ms cubic-bezier(.2,.9,.3,1.2) both;
}

@media (prefers-reduced-motion: reduce) {
	.byop *,
	.byop *::before,
	.byop *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}