/**
 * Arma tu Bowl builder (mockup port step 4, design/BRIEF.md §7): step
 * chips + a sticky totals panel with a live illustrated bowl. The
 * "M'envoyer ce bol" modal reuses .bcc-popup (popup.css) and
 * .bcc-club__field/checkbox/hp (club.css) verbatim -- same signup
 * chrome, just a different form, so no chrome CSS is duplicated here.
 */
.bcc-builder {
	background: var(--bcc-pacifico);
	color: var(--bcc-cream);
	padding-block: 100px;
	position: relative;
	overflow: hidden;
}

@media (width < 860px) {
	.bcc-builder {
		padding-block: 64px;
	}
}

.bcc-builder__head {
	width: min(1280px, 100% - 40px);
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1.1fr .9fr;
	gap: 32px;
	align-items: end;
	margin-bottom: 40px;
}

@media (width < 760px) {
	.bcc-builder__head {
		grid-template-columns: 1fr;
	}
}

.bcc-builder__head h2 {
	font-family: var(--bcc-font-display) !important;
	font-weight: 900;
	text-transform: uppercase;
	line-height: .88;
	margin: 0;
	font-size: clamp(3.375rem, 7.2vw, 7rem);
	color: var(--bcc-cream) !important;
}

.bcc-builder__head p {
	max-width: 520px;
	color: #C9DAD6;
	margin: 0;
	font-size: 19px;
}

.bcc-builder__notice {
	width: min(1280px, 100% - 40px);
	margin: 0 auto calc(var(--bcc-space) * 1.5);
	background: var(--bcc-lucuma);
	color: var(--bcc-ink);
	font-family: var(--bcc-font-mono);
	font-size: 13px;
	padding: 10px 14px;
	border: var(--bcc-border-width) solid var(--bcc-ink);
}

.bcc-builder__wrap {
	width: min(1280px, 100% - 40px);
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1.2fr .8fr;
	gap: 36px;
	align-items: start;
}

@media (width < 1020px) {
	.bcc-builder__wrap {
		grid-template-columns: 1fr;
	}
}

.bcc-builder__steps {
	display: flex;
	flex-direction: column;
}

.bcc-step {
	border-top: var(--bcc-border-width) solid rgb(246 241 228 / .28);
	padding: 22px 0;
}

.bcc-step h3 {
	display: flex;
	align-items: baseline;
	gap: 14px;
	margin: 0 0 14px;
	font-family: var(--bcc-font-display) !important;
	font-weight: 900;
	font-size: 32px;
	text-transform: uppercase;
	color: var(--bcc-quinoa) !important;
}

.bcc-step h3 small {
	font-family: var(--bcc-font-mono) !important;
	font-weight: 400;
	font-size: 13px;
	color: var(--bcc-gold-400);
	text-transform: none;
}

.bcc-opts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

@media (width < 620px) {
	.bcc-opts {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}
}

.bcc-opt {
	border: var(--bcc-border-width) solid rgb(246 241 228 / .45);
	border-radius: 0 !important;
	background: transparent !important;
	color: var(--bcc-quinoa) !important;
	padding: 10px 14px;
	cursor: pointer;
	text-align: left;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 140px;
	transition: background .18s, color .18s, border-color .18s, transform .15s;
}

@media (width < 620px) {
	.bcc-opt {
		min-width: 0;
	}

	.bcc-opt b {
		font-size: 15px;
	}
}

.bcc-opt:hover {
	border-color: var(--bcc-gold-400);
}

.bcc-opt:active {
	transform: scale(.97);
}

/**
 * !important: staging showed longer veg names ("Betteraves marinées",
 * "Chou rouge mariné") spilling past the card's right edge instead of
 * wrapping onto a second line -- live-measured white-space:nowrap
 * winning on <b>/<i> from outside this stylesheet (nothing here sets
 * it), same Elementor-collision pattern as the button/heading font
 * fights already forced with !important elsewhere in this file.
 */
.bcc-opt b {
	font-weight: 700;
	font-size: 17px;
	white-space: normal !important;
}

.bcc-opt i {
	font-style: normal;
	font-family: var(--bcc-font-mono);
	font-size: 12px;
	white-space: normal !important;
	opacity: .85;
}

.bcc-opt[aria-pressed="true"] {
	background: var(--bcc-gold-400) !important;
	color: var(--bcc-purple-900) !important;
	border-color: var(--bcc-gold-400);
}

.bcc-opt__dot {
	width: 14px;
	height: 14px;
	border-radius: 50% !important;
	display: inline-block;
	margin-right: 6px;
	vertical-align: -2px;
	border: 1.5px solid rgb(0 0 0 / .25);
}

/* ===== Sticky totals panel ===== */

.bcc-builder__panel {
	position: sticky;
	top: 104px;
	background: var(--bcc-quinoa);
	color: var(--bcc-ink);
	padding: 24px;
	border: var(--bcc-border-width) solid var(--bcc-ink);
	box-shadow: 10px 10px 0 var(--bcc-gold-400);
}

.bcc-builder__art {
	width: 100%;
	max-width: 300px;
	margin: 0 auto 8px;
}

.bcc-builder__art svg {
	width: 100%;
	height: auto;
}

@media (prefers-reduced-motion: no-preference) {
	.bcc-builder__art .bcc-builder__fresh {
		animation: bcc-builder-drop .5s cubic-bezier(.3,1.4,.5,1);
	}
}

@keyframes bcc-builder-drop {
	from {
		opacity: 0;
		transform: translateY(-14px);
	}
}

.bcc-builder__totals {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border-top: var(--bcc-border-width) solid var(--bcc-ink);
	border-bottom: var(--bcc-border-width) solid var(--bcc-ink);
	margin: 12px 0;
}

.bcc-builder__totals div {
	padding: 12px 6px;
	border-right: var(--bcc-border-width) solid var(--bcc-ink);
	text-align: center;
}

.bcc-builder__totals div:last-child {
	border-right: 0;
}

.bcc-builder__totals b {
	display: block;
	font-family: var(--bcc-font-display);
	font-weight: 900;
	font-size: 40px;
	line-height: 1;
	color: var(--bcc-purple-900);
}

.bcc-builder__totals span {
	font-family: var(--bcc-font-mono);
	font-size: 12px;
	color: var(--bcc-muted);
}

.bcc-builder__bar {
	height: 8px;
	background: #E3DBC8;
	margin: 6px 0 2px;
}

.bcc-builder__bar i {
	display: block;
	height: 100%;
	background: var(--bcc-purple-900);
	width: 0;
	transition: width .5s ease;
}

.bcc-builder__bar-label {
	font-family: var(--bcc-font-mono);
	font-size: 12px;
	color: var(--bcc-muted);
	margin: 0 0 10px;
}

.bcc-builder__price {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin: 4px 0 10px;
}

.bcc-builder__price .m {
	font-family: var(--bcc-font-mono);
	font-size: 14px;
	letter-spacing: .03em;
}

.bcc-builder__price b {
	font-family: var(--bcc-font-display);
	font-weight: 900;
	font-size: 44px;
	color: var(--bcc-purple-900);
}

.bcc-builder__summary {
	font-size: 15px;
	color: var(--bcc-muted);
	margin: 0 0 16px;
}

.bcc-builder__acts {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.bcc-btn--ghost-dark {
	background: transparent !important;
	border-color: var(--bcc-purple-900);
	color: var(--bcc-purple-900) !important;
}

.bcc-builder__pairing {
	margin: 16px 0 0;
	border: var(--bcc-border-width) dashed var(--bcc-ink);
	padding: 10px 12px;
	font-size: 14px;
}

.bcc-builder__pairing a {
	font-weight: 700;
	color: var(--bcc-purple-900);
}

.bcc-builder__disclaimer {
	font-size: 12px;
	color: var(--bcc-muted);
	margin: 12px 0 0;
}

/* ===== Mobile mini-total bar (design/BRIEF.md §4.17) ===== */

.bcc-mini {
	position: fixed;
	left: 12px;
	right: 12px;
	bottom: calc(66px + env(safe-area-inset-bottom, 0px));
	z-index: 99;
	background: var(--bcc-quinoa);
	color: var(--bcc-ink);
	border: var(--bcc-border-width) solid var(--bcc-ink);
	padding: 10px 14px;
	display: none;
	justify-content: space-between;
	align-items: center;
	font-family: var(--bcc-font-mono);
	font-size: 14px;
}

.bcc-mini b {
	font-family: var(--bcc-font-display);
	font-weight: 900;
	font-size: 24px;
	color: var(--bcc-purple-900);
}

@media (width < 1020px) {
	.bcc-mini.is-visible {
		display: flex;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bcc-builder__art .bcc-builder__fresh {
		animation: none;
	}
}