/** FLPX unified Build Your Gallon page. */

.flpx-byg {
	--flpx-red: #b1252d;
	--flpx-red-dark: #8f1a24;
	--flpx-red-soft: #fdf2f2;
	--flpx-ink: #1c1e21;
	--flpx-muted: #62676e;
	--flpx-line: #e3e6e9;
	--flpx-green: #1f7a45;
	max-width: 980px;
	margin: 0 auto 48px;
	color: var(--flpx-ink);
	font-size: 15px;
	line-height: 1.45;
}

.flpx-byg__head { margin: 0 0 26px; }

.flpx-byg__eyebrow {
	margin: 0 0 4px;
	color: var(--flpx-red);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.flpx-byg__title,
.flpx-byg h1.flpx-byg__title {
	margin: 0 0 6px;
	font-size: clamp(30px, 5vw, 46px);
	line-height: 1.08;
	font-weight: 800;
	letter-spacing: -.025em;
}

.flpx-byg__sub {
	max-width: 720px;
	margin: 0;
	color: var(--flpx-muted);
	font-size: 16px;
}

.flpx-byg__step { margin: 24px 0 0; }

.flpx-byg__step > h2 {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .055em;
	text-transform: uppercase;
}

.flpx-byg__step > h2 > span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 23px;
	height: 23px;
	border-radius: 50%;
	background: var(--flpx-red);
	color: #fff;
	font-size: 12px;
}

.flpx-byg__choices {
	display: grid;
	gap: 10px;
}

.flpx-byg__choices--family,
.flpx-byg__choices--volume { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.flpx-byg__choices--size { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.flpx-byg .flpx-byg__choice,
.flpx-byg a.flpx-byg__choice {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 3px;
	min-height: 70px;
	padding: 13px 15px;
	border: 2px solid var(--flpx-line);
	border-radius: 13px;
	background: #fff;
	box-shadow: none;
	color: var(--flpx-ink);
	text-decoration: none;
	transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.flpx-byg a.flpx-byg__choice:hover,
.flpx-byg a.flpx-byg__choice:focus-visible {
	border-color: #c8cdd2;
	box-shadow: 0 8px 24px -16px rgba(17, 24, 39, .5);
	color: var(--flpx-ink);
}

.flpx-byg .flpx-byg__choice.is-selected {
	border-color: var(--flpx-red);
	background: var(--flpx-red-soft);
	box-shadow: inset 0 0 0 1px var(--flpx-red);
}

.flpx-byg .flpx-byg__choice.is-disabled {
	opacity: .55;
	background: #f5f6f7;
	cursor: not-allowed;
}

.flpx-byg__choice strong { font-size: 16px; line-height: 1.25; }
.flpx-byg__choice span,
.flpx-byg__choice small { color: var(--flpx-muted); }
.flpx-byg__choice b { color: var(--flpx-red); font-size: 17px; }
.flpx-byg__choice small { font-size: 11px; }

.flpx-byg__summary {
	position: sticky;
	top: 0;
	z-index: 12;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 7px 12px;
	margin: 26px 0 14px;
	padding: 12px 15px;
	border: 1px solid #edcfd2;
	border-radius: 12px;
	background: rgba(253, 242, 242, .97);
	box-shadow: 0 8px 22px -18px rgba(17, 24, 39, .65);
	backdrop-filter: blur(8px);
}

.flpx-byg__summary span:not(:last-child)::after,
.flpx-byg__summary strong:first-child::after {
	content: "·";
	margin-left: 12px;
	color: #b8a4a5;
}

.flpx-byg__summary strong:last-child {
	margin-left: auto;
	color: var(--flpx-red);
	font-size: 18px;
}

.flpx-byg__mount { margin-top: 14px; }

.flpx-byg__notice,
.flpx-byg--disabled {
	padding: 24px;
	border: 1px solid #efc7ca;
	border-radius: 12px;
	background: #fff7f7;
}

.flpx-byg__notice > strong { color: var(--flpx-red-dark); font-size: 17px; }
.flpx-byg__notice p:last-child { margin-bottom: 0; }
.flpx-byg__notice a,
.flpx-byg--disabled a { color: var(--flpx-red); font-weight: 700; }

/* The embedded Woo template should occupy the builder width, without product
   page image-column rules leaking in from Astra/Elementor. */
.flpx-byg__mount form.mnm_form,
.flpx-byg__mount .mnm_form { width: 100%; max-width: none; }

@media (max-width: 760px) {
	.flpx-byg { margin-bottom: 24px; }
	.flpx-byg__choices--family,
	.flpx-byg__choices--volume { grid-template-columns: 1fr; }
	.flpx-byg__choices--size { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.flpx-byg .flpx-byg__choice { min-height: 62px; padding: 11px 12px; }
	.flpx-byg__summary { position: static; gap: 4px 8px; font-size: 12px; }
	.flpx-byg__summary span:not(:last-child)::after,
	.flpx-byg__summary strong:first-child::after { margin-left: 8px; }
	.flpx-byg__summary strong:last-child { width: 100%; margin-left: 0; font-size: 17px; }
}

@media (max-width: 390px) {
	.flpx-byg__choices--size { grid-template-columns: 1fr 1fr; gap: 8px; }
	.flpx-byg__choice strong { font-size: 14px; }
}

/* Scoped to the 36 registered gallon product pages while their family rollout is active. */
body.flpx-gp-product-builder.woocommerce div.product .summary {
 width: 100%; float: none; margin: 0 auto; max-width: 1120px;
}
body.flpx-gp-product-builder .woocommerce-breadcrumb { display: none; }
body.flpx-gp-product-builder.admin-bar .flpx-byg__summary { top: 32px; }

/* The two legacy deal-grid pages retain their URLs but the builder supplies the
   only page heading and main content while the rollout is active. */
body.flpx-gp-builder-landing .entry-header { display: none; }
body.flpx-gp-builder-landing .entry-content { width: 100%; }
body.flpx-gp-builder-landing.admin-bar .flpx-byg__summary { top: 32px; }