/**
 * BAS Build Your Own Box — customer configurator.
 *
 * Sized for the narrow column of the Quick View modal first, because that is
 * the primary surface: shoppers are never sent off the vendor's store page.
 * The single product page gets the same component at a wider max-width.
 *
 * The CTA reads --bas-qv-vendor-primary, which the modal sets inline, so the
 * button carries the vendor's brand colour on their own storefront.
 *
 * @since 6.104.0
 */

.bas-box {
	--bx-ink:    #313131;
	--bx-soft:   #6b7280;
	--bx-line:   #e5e0d0;
	--bx-cream:  #fffbef;
	--bx-paper:  #ffffff;
	--bx-empty:  #e8e2d2;
	--bx-accent: var(--bas-qv-vendor-primary, var(--bas-v-primary, #1d741b));
	/* 🔴 --bx-accent and --bx-on-accent are a PAIR. Anything filled with the
	   accent takes --bx-on-accent as its text colour — never #fff. The store
	   computes --bas-v-fg-on by measuring the brand colour and flipping to
	   charcoal on a light one; hardcoding white silently opts out, and it
	   looks perfect on every dark brand colour anyone tests with. See the
	   rule established in 6.105.1. */
	--bx-on-accent: var(--bas-qv-vendor-fg-on, var(--bas-v-fg-on, #fff));

	display: flex;
	flex-direction: column;
	gap: 14px;
	max-width: 460px;
	color: var(--bx-ink);
	font-size: 15px;
	line-height: 1.45;
}

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

.bas-box__unavailable {
	margin: 0;
	color: var(--bx-soft);
	font-style: italic;
}

/* ── The fork ─────────────────────────────────────────────────────────────── */

.bas-box__fork { display: flex; flex-direction: column; gap: 8px; }

.bas-box__fork-card {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 13px 14px;
	background: var(--bx-paper);
	border: 1.5px solid var(--bx-line);
	border-radius: 13px;
	cursor: pointer;
	transition: border-color .15s ease;
}

.bas-box__fork-card:hover { border-color: var(--bx-accent); }
.bas-box__fork-card.is-on { border-color: var(--bx-accent); border-width: 2px; padding: 12px 13px; }

/* The native radio stays in the DOM for no-JS and for screen readers. */
.bas-box__fork-card input { flex: none; margin: 0; accent-color: var(--bx-accent); }

.bas-box__fork-body { flex: 1; min-width: 0; }
.bas-box__fork-body b { display: block; font-size: 15px; font-weight: 700; }
.bas-box__fork-body span { display: block; font-size: 12.5px; color: var(--bx-soft); margin-top: 1px; }
.bas-box__fork-price { flex: none; font-size: 16px; font-weight: 800; }
.bas-box__fork-price .amount { white-space: nowrap; }

/* ── Panels ───────────────────────────────────────────────────────────────── */

.bas-box__panel { display: flex; flex-direction: column; gap: 10px; }
.bas-box__panel[hidden] { display: none; }

.bas-box__legend {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--bx-soft);
}

/* The <select> is the source of truth; tiles replace it once JS runs. */
.bas-box--enhanced .bas-box__single-select { display: none; }

.bas-box__single-select {
	width: 100%;
	padding: 11px 12px;
	border: 1.5px solid var(--bx-line);
	border-radius: 11px;
	background: var(--bx-paper);
	font: inherit;
	color: inherit;
}

.bas-box__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.bas-box__tile {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 11px 10px;
	text-align: left;
	background: var(--bx-paper);
	border: 1.5px solid var(--bx-line);
	border-radius: 11px;
	font: inherit;
	color: inherit;
	cursor: pointer;
	transition: border-color .15s ease;
}

.bas-box__tile:hover { border-color: var(--bx-accent); }
.bas-box__tile[aria-pressed="true"] { border-color: var(--bx-accent); border-width: 2px; padding: 10px 9px; }
.bas-box__tile b { font-size: 13.5px; font-weight: 700; line-height: 1.2; }

/* ── The counter — eight slots, which is a picture of the box ─────────────── */

.bas-box__counter {
	position: sticky;
	top: 0;
	z-index: 3;
	padding: 10px 0 11px;
	background: var(--bx-cream);
	border-bottom: 1px solid var(--bx-line);
}

.bas-box__counter-top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
}

.bas-box__count { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.bas-box__remain { font-size: 12.5px; font-weight: 700; color: var(--bx-soft); }
.bas-box__remain.is-done { color: var(--bx-accent); }

.bas-box__slots {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
	grid-auto-flow: column;
	gap: 5px;
	margin-top: 9px;
}

.bas-box__slot {
	aspect-ratio: 1;
	min-height: 14px;
	border-radius: 50%;
	border: 1.5px dashed var(--bx-empty);
	transition: background .18s ease, border-color .18s ease;
}

.bas-box__slot.is-filled { border-style: solid; border-color: transparent; }

.bas-box__chips {
	margin: 8px 0 0;
	min-height: 16px;
	font-size: 12px;
	color: var(--bx-soft);
	overflow-x: auto;
	white-space: nowrap;
	scrollbar-width: none;
}
.bas-box__chips::-webkit-scrollbar { display: none; }

/* ── Option rows ──────────────────────────────────────────────────────────── */

.bas-box__options { margin: 0; padding: 0; list-style: none; }

.bas-box__option {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 11px 0;
	border-bottom: 1px solid var(--bx-line);
}
.bas-box__option:last-child { border-bottom: 0; }

.bas-box__option.is-out { opacity: .45; }
.bas-box__option.is-out .bas-box__option-name b { text-decoration: line-through; }

.bas-box__dot { flex: none; width: 13px; height: 13px; border-radius: 50%; }

.bas-box__option-name { flex: 1; min-width: 0; }
.bas-box__option-name b { display: block; font-size: 14.5px; font-weight: 700; }
.bas-box__option-name > span {
	display: block;
	font-size: 11.5px;
	color: var(--bx-soft);
	margin-top: 1px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bas-box__sold,
.bas-box__upcharge {
	font-size: 10.5px !important;
	font-weight: 800;
	letter-spacing: .07em;
	text-transform: uppercase;
}
.bas-box__sold { color: #ff4c25 !important; }
.bas-box__upcharge { color: var(--bx-accent) !important; }

/* ── Steppers ─────────────────────────────────────────────────────────────── */

.bas-box__stepper { flex: none; display: flex; align-items: center; gap: 2px; }

.bas-box__sbtn {
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	border: 1.5px solid var(--bx-line);
	border-radius: 9px;
	background: var(--bx-paper);
	font-size: 17px;
	font-weight: 700;
	line-height: 1;
	color: inherit;
	cursor: pointer;
	transition: border-color .15s ease, opacity .15s ease;
}

.bas-box__sbtn:hover:not(:disabled) { border-color: var(--bx-accent); }
.bas-box__sbtn:disabled { opacity: .3; cursor: not-allowed; }

.bas-box__num {
	width: 46px;
	padding: 6px 2px;
	text-align: center;
	font: inherit;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	color: inherit;
	background: transparent;
	border: 1.5px solid var(--bx-line);
	border-radius: 8px;
	-moz-appearance: textfield;
}
.bas-box__num::-webkit-outer-spin-button,
.bas-box__num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Once steppers exist the number field is a quiet readout, not a control. */
.bas-box__stepper.is-enhanced .bas-box__num {
	width: 34px;
	border-color: transparent;
	background: transparent;
	pointer-events: none;
}

/* ── How many boxes ───────────────────────────────────────────────────────── */

.bas-box__qty {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-top: 13px;
	border-top: 1px solid var(--bx-line);
}

.bas-box__qty-label b { display: block; font-size: 14px; font-weight: 700; }
.bas-box__qty-label span { display: block; font-size: 11.5px; color: var(--bx-soft); margin-top: 1px; }

/* ── Submit ───────────────────────────────────────────────────────────────── */

.bas-box__submit {
	width: 100%;
	padding: 14px 16px;
	border: 0;
	border-radius: 12px;
	background: var(--bx-accent);
	color: var(--bx-on-accent);
	font: inherit;
	font-size: 15.5px;
	font-weight: 800;
	cursor: pointer;
	transition: opacity .15s ease;
}

.bas-box__submit:disabled {
	background: var(--bx-empty);
	color: var(--bx-soft);
	cursor: not-allowed;
}

.bas-box__error {
	margin: 0;
	padding: 9px 11px;
	border-radius: 9px;
	background: #fff1ee;
	color: #b3301a;
	font-size: 13px;
}
.bas-box__error[hidden] { display: none; }

.bas-box :focus-visible {
	outline: 2px solid var(--bx-accent);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.bas-box * { transition: none !important; }
}

/* Inside either Quick View modal the column is narrower and the counter must
   stay put. --modal is the shop/category modal, --store the vendor store page;
   they are two separate modal systems but the same narrow column, so they share
   every rule here. */
.bas-box--modal,
.bas-box--store { max-width: 100%; gap: 12px; }

.bas-box--modal .bas-box__tiles,
.bas-box--store .bas-box__tiles { grid-template-columns: 1fr; }

@media (min-width: 420px) {
	.bas-box--modal .bas-box__tiles,
	.bas-box--store .bas-box__tiles { grid-template-columns: 1fr 1fr; }
}

/* The store modal's own card styling sets a serif face on descendants; the
   configurator is UI, not prose, so it keeps the platform's UI stack. */
.bas-box--store { font-family: 'Lato', system-ui, -apple-system, sans-serif; }

/* ── Per-choice photos (v6.105.0) ───────────────────────────────────────────
   Optional. A vendor who sets no photos gets exactly the colour-dot layout
   that shipped in 6.104.0 — the thumb replaces the dot, same footprint, so
   mixed rows (some with photos, some without) still line up. */
.bas-box__thumb {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 8px;
	border: 2px solid transparent;
	background: #f1ece0 center / cover no-repeat;
}

.bas-box__tile .bas-box__thumb { width: 40px; height: 40px; }