/* Sundial Blind Builder 3.0 — mobile first. Desktop rules are at the end. */
.bb3 {
	--bb-ink: #1d1d1f;
	--bb-clay: #0066cc;
	--bb-clay-dark: #0055aa;
	--bb-brass: #0066cc;
	--bb-cream: #f5f5f7;
	--bb-linen: #f2f2f5;
	--bb-stone: #e5e5ea;
	--bb-mute: #5f5f64;
	--bb-ok: #1d6b34;
	--bb-warn: #8a5a00;
	--bb-bad: #b3261e;
	--bb-r: 16px;
	--bb-sticky: 0px; /* set live from the theme's sticky header */
	--bb-gutter: clamp(16px, 4vw, 56px);
	--bb-max: 1280px;
	--bb-display: var(--font, "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
	--bb-body: var(--font, "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
	font-family: var(--bb-body);
	color: var(--bb-ink);
	line-height: 1.45;
	-webkit-tap-highlight-color: transparent;
	padding: clamp(24px, 4vw, 48px) 0 0;
	background: var(--bb-cream);
}
.bb3-wrap { max-width: var(--bb-max); margin: 0 auto; padding: 0 var(--bb-gutter); container-type: inline-size; }
.bb3 *, .bb3 *::before, .bb3 *::after { box-sizing: border-box; }
.bb3 img { max-width: 100%; height: auto; display: block; }
:where(.bb3 button) { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; text-align: left; }
:where(.bb3 button:disabled) { cursor: not-allowed; }
.bb3 h3, .bb3 h4, .bb3 h5 { font-family: var(--bb-display); font-weight: 500; margin: 0; letter-spacing: -0.01em; }
.bb3 h3 { font-size: clamp(1.45rem, 1.1rem + 1.6vw, 2.1rem); line-height: 1.12; }
.bb3 h4 { font-size: 1.3rem; line-height: 1.2; }
.bb3 h5 { font-size: 1rem; margin-bottom: 0.3rem; }
.bb3 p { margin: 0.4rem 0 0; }
.bb3 .bb3-kicker { display: inline-block; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bb-clay); font-weight: 600; margin-bottom: 0.4rem; }
.bb3 .bb3-help { color: var(--bb-mute); font-size: 0.92rem; max-width: 60ch; }
.bb3 .bb3-fine { font-size: 0.82rem; }
.bb3-link { color: var(--bb-clay-dark); font-size: 0.82rem; font-weight: 600; padding: 0.35rem 0.5rem; border-radius: 8px; }
.bb3-link:hover { background: var(--bb-linen); }

.bb3-intro { margin-bottom: 1rem; }

/* client sign-in above the builder (folds to one line on a phone) */
.bb3-client { margin: 0 0 1.25rem; }
.bb3-client-box { background: var(--bb-linen); border: 1px solid var(--bb-stone); border-radius: var(--bb-r); }
.bb3-client-box > summary { list-style: none; cursor: pointer; display: flex; align-items: center; flex-wrap: wrap; gap: 0.2rem 0.6rem; padding: 0.8rem 2.6rem 0.8rem 1rem; position: relative; }
.bb3-client-box > summary::-webkit-details-marker { display: none; }
.bb3-client-box > summary::after { content: ""; position: absolute; right: 1.1rem; top: 50%; width: 0.5rem; height: 0.5rem; margin-top: -0.35rem; border-right: 2px solid var(--bb-clay); border-bottom: 2px solid var(--bb-clay); transform: rotate(45deg); }
.bb3-client-box[open] > summary::after { margin-top: -0.1rem; transform: rotate(-135deg); }
.bb3-client-box > summary:focus-visible { outline: 3px solid var(--bb-brass); outline-offset: 2px; border-radius: var(--bb-r); }
.bb3-client-lead { font-weight: 600; font-size: 0.95rem; }
.bb3-client-inner { display: grid; gap: 0.75rem; padding: 0 1rem 1rem; }
.bb3-client-text { display: none; margin: 0; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bb-clay); font-weight: 600; }
.bb3-client-form { display: grid; gap: 0.6rem; }
.bb3-client-form label { display: flex; flex-direction: column; gap: 0.25rem; font-weight: 600; font-size: 0.8rem; }
.bb3-client-form input { width: 100%; padding: 0.65rem 0.75rem; border: 1.5px solid var(--bb-stone); border-radius: 10px; font: inherit; font-size: 1rem; background: #fff; color: var(--bb-ink); }
.bb3-client-form input:focus { outline: 2px solid var(--bb-clay); outline-offset: 1px; }
.bb3-client-form .bb3-btn { width: 100%; }
.bb3-client-error { margin: 0; color: var(--bb-bad); font-size: 0.9rem; }
.bb3-client-join { margin: 0; font-size: 0.9rem; color: var(--bb-mute); }
.bb3-client-join a { color: var(--bb-clay-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.bb3-client-admin { margin: 0.6rem 0 0; font-size: 0.82rem; color: var(--bb-mute); }
.bb3-client-admin a { color: var(--bb-clay-dark); font-weight: 600; text-decoration: underline; }
/* Forgot your password? — slides open in place (no jump). */
.bb3-forgot { margin: 0; }
.bb3-forgot-toggle { font-size: 0.85rem; font-weight: 600; color: var(--bb-clay-dark); text-decoration: underline; text-underline-offset: 3px; padding: 0.15rem 0; border-radius: 6px; }
.bb3-forgot-toggle:focus-visible { outline: 3px solid var(--bb-brass); outline-offset: 2px; }
.bb3-forgot-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.25s ease; }
.bb3-forgot.is-open .bb3-forgot-panel { grid-template-rows: 1fr; }
.bb3-forgot-inner { min-height: 0; overflow: hidden; visibility: hidden; transition: visibility 0s linear 0.25s; }
.bb3-forgot.is-open .bb3-forgot-inner { visibility: visible; transition-delay: 0s; }
.bb3-forgot-form { display: grid; gap: 0.6rem; padding: 0.6rem 0.15rem 0.15rem; }
.bb3-forgot-form label { display: flex; flex-direction: column; gap: 0.25rem; font-weight: 600; font-size: 0.8rem; }
.bb3-forgot-form input { width: 100%; padding: 0.65rem 0.75rem; border: 1.5px solid var(--bb-stone); border-radius: 10px; font: inherit; font-size: 1rem; background: #fff; color: var(--bb-ink); }
.bb3-forgot-form input:focus { outline: 2px solid var(--bb-clay); outline-offset: 1px; }
.bb3-forgot-form .bb3-btn { width: 100%; }
.bb3-forgot-msg { margin: 0.4rem 0 0; font-size: 0.9rem; color: var(--bb-ink); }
.bb3-forgot-msg:empty { margin: 0; }
/* A link that no longer works. */
.bb3-reg-invalid { margin: 0 0 0.75rem; padding: 0.8rem 1rem; background: #fff; border: 1px solid var(--bb-stone); border-left: 4px solid var(--bb-warn); border-radius: var(--bb-r); }
.bb3-reg-invalid p { margin: 0; }
/* Create your client sign-in / Choose a new password (one column on a phone). */
.bb3-reg { background: var(--bb-linen); border: 1px solid var(--bb-stone); border-radius: var(--bb-r); padding: 1rem; }
.bb3-reg .bb3-kicker { margin-bottom: 0.2rem; }
.bb3 .bb3-reg-title { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.7rem); }
.bb3-reg-legend { font-size: 0.82rem; color: var(--bb-mute); }
.bb3-reg-summary { margin: 0.8rem 0 0; padding: 0.75rem 0.9rem; background: #fff; border: 1px solid var(--bb-stone); border-left: 4px solid var(--bb-bad); border-radius: 10px; color: var(--bb-bad); }
.bb3-reg-summary:focus { outline: 3px solid var(--bb-brass); outline-offset: 2px; }
.bb3-reg-summary p { margin: 0; }
.bb3-reg-summary ul { margin: 0.4rem 0 0; padding-left: 1.2rem; }
.bb3-reg-summary a { color: var(--bb-bad); text-decoration: underline; }
.bb3-reg-form { margin-top: 0.9rem; }
.bb3-reg-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.8rem; }
.bb3-reg-row3 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.8rem; }
.bb3-reg-field { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.bb3-reg-field > label { font-weight: 600; font-size: 0.85rem; }
.bb3-reg-req { color: var(--bb-clay-dark); }
.bb3-reg-opt { font-weight: 400; color: var(--bb-mute); }
.bb3-reg-field input[type="text"], .bb3-reg-field input[type="email"], .bb3-reg-field input[type="tel"], .bb3-reg-field input[type="password"], .bb3-reg-field select { width: 100%; height: 42px; min-height: 0; margin: 0; padding: 0 0.75rem; border: 1.5px solid var(--bb-stone); border-radius: 10px; font: inherit; font-size: 1rem; line-height: 1.2; background: #fff; color: var(--bb-ink); }
.bb3-reg-field input:focus, .bb3-reg-field select:focus { outline: 2px solid var(--bb-clay); outline-offset: 1px; }
.bb3-reg-field.is-readonly input { background: transparent; border-style: dashed; }
.bb3-reg-field.is-bad input, .bb3-reg-field.is-bad select { border-color: var(--bb-bad); }
.bb3-reg-hint { margin: 0; font-size: 0.8rem; color: var(--bb-mute); }
.bb3-reg-hint a { color: var(--bb-clay-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.bb3-reg-err { margin: 0; font-size: 0.85rem; font-weight: 600; color: var(--bb-bad); }
.bb3-reg-check { display: flex; gap: 0.55rem; align-items: flex-start; font-size: 0.92rem; line-height: 1.4; cursor: pointer; }
.bb3-reg-field > label.bb3-reg-check { font-weight: 400; font-size: 0.92rem; }
.bb3-reg-check input { width: 1.15rem; height: 1.15rem; margin: 0.12rem 0 0; flex: none; accent-color: var(--bb-clay); }
.bb3-reg-submit { width: 100%; margin-top: 1rem; }
/* The consent boxes (4.4): "I agree to the Terms and Privacy Policy" with
   its two links (each opens a new tab; a click on a link never ticks the
   box) and the news box. The words wrap beside the box (4.7.1: no
   "Optional" tag after them, owner rule). */
.bb3-reg-consent .bb3-reg-check a { color: var(--bb-clay-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.bb3-reg-consent .bb3-reg-check a:focus-visible { outline: 2px solid var(--bb-clay); outline-offset: 2px; border-radius: 2px; }
.bb3-reg-consent .bb3-reg-check > span { min-width: 0; overflow-wrap: anywhere; }
.bb3-reg-consent .bb3-reg-err { padding-left: 1.7rem; }
/* Who is asking for the news consent (Canada's anti-spam rules): small print under the box. */
.bb3-reg-consent .bb3-reg-idline { margin: 0; padding-left: 1.7rem; font-size: 0.78rem; line-height: 1.4; color: var(--bb-mute); overflow-wrap: anywhere; }
.bb3-reg-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) {
	.bb3-forgot-panel, .bb3-forgot-inner { transition: none; }
}
/* City | Province | Postal code share one row from 600px wide. */
@container (min-width: 600px) {
	.bb3-reg-row3 { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr) minmax(0, 0.8fr); column-gap: 1.1rem; }
}
@container (min-width: 700px) {
	.bb3-reg { padding: 1.25rem 1.5rem 1.4rem; }
	.bb3-reg-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 1.1rem; }
	.bb3-reg-field.is-wide, .bb3-reg-row3 { grid-column: 1 / -1; }
	.bb3-reg-submit { width: auto; }
	.bb3-forgot-form { grid-template-columns: minmax(0, 22rem) max-content; justify-content: start; align-items: end; column-gap: 0.6rem; }
	/* The box and the button beside it: the same top and the same height. */
	.bb3-forgot-form input { height: 46px; box-sizing: border-box; padding-top: 0; padding-bottom: 0; }
	.bb3-forgot-form .bb3-btn { width: auto; justify-self: start; height: 46px; box-sizing: border-box; padding-top: 0; padding-bottom: 0; }
}
@container (min-width: 700px) {
	.bb3-client-box[open] > summary { display: none; }
	.bb3-client-inner { padding: 1rem 1.25rem 1.1rem; }
	.bb3-client-text { display: block; }
	.bb3-client-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; }
	.bb3-client-form .bb3-btn { width: auto; padding-top: 0.72rem; padding-bottom: 0.72rem; }
}
@container (min-width: 1000px) {
	.bb3-client-inner { grid-template-columns: minmax(0, 1fr) auto; column-gap: 2rem; align-items: end; }
	.bb3-client-text, .bb3-client-error, .bb3-forgot { grid-column: 1 / -1; }
	.bb3-client-join { grid-row: 2; grid-column: 2; padding-bottom: 0.7rem; }
}
.bb3-intro h2 { font-family: var(--bb-display); font-weight: 500; font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.6rem); margin: 0 0 0.35rem; line-height: 1.08; }
.bb3-intro p { max-width: 62ch; color: var(--bb-mute); font-size: 0.95rem; }

/* ------------------------------------------------ sticky top: progress */
.bb3-top { position: sticky; top: var(--bb-sticky); z-index: 5; background: var(--bb-cream); padding-bottom: 0.4rem; margin: 0 calc(-1 * var(--bb-gutter)); padding-left: var(--bb-gutter); padding-right: var(--bb-gutter); }
.bb3-progress { height: 4px; background: var(--bb-stone); border-radius: 2px; overflow: hidden; }
.bb3-progress span { display: block; height: 100%; background: var(--bb-clay); transition: width 0.3s; }
.bb3-top-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding-top: 0.45rem; }
.bb3-top-label { font-size: 0.82rem; color: var(--bb-mute); }
.bb3-top-label b { color: var(--bb-ink); }
.bb3-top-actions { display: flex; gap: 0.15rem; margin-right: -0.5rem; }

/* ------------------------------------------------ step */
.bb3-notice { margin: 0.6rem 0 0; padding: 0.6rem 0.8rem; border-radius: 10px; background: #fff4e0; color: var(--bb-warn); font-size: 0.85rem; }
.bb3-notice .bb3-link { color: var(--bb-warn); padding: 0.1rem 0.4rem; }
.bb3-step-head { margin: 0.6rem 0 0.9rem; }
/* The question takes the focus on a new step (for screen readers); no ring on it. */
.bb3-step-head h3[tabindex="-1"]:focus { outline: none; }
.bb3-figure { margin: 0 0 0.9rem; background: var(--bb-linen); border-radius: var(--bb-r); padding: 0.6rem; }
.bb3-figure img { max-height: 180px; margin: 0 auto; }
.bb3-empty { color: var(--bb-mute); }

.bb3-check { position: absolute; top: 0.5rem; right: 0.5rem; width: 1.35rem; height: 1.35rem; border-radius: 50%; border: 1.5px solid var(--bb-stone); background: #fff; }
.is-on > .bb3-row-main > .bb3-check, .is-on > .bb3-card-main > .bb3-check, .is-on > .bb3-swatch-main > .bb3-check, .is-on > .bb3-lrow-main > .bb3-check { background: var(--bb-clay); border-color: var(--bb-clay); }
.is-on > .bb3-row-main > .bb3-check::after, .is-on > .bb3-card-main > .bb3-check::after, .is-on > .bb3-swatch-main > .bb3-check::after, .is-on > .bb3-lrow-main > .bb3-check::after { content: ""; position: absolute; left: 0.42rem; top: 0.2rem; width: 0.3rem; height: 0.6rem; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* images inside tiles */
.bb3-row-img, .bb3-card-img, .bb3-swatch-img { display: block; background: var(--bb-linen); overflow: hidden; position: relative; }
.bb3-row-img.is-contain, .bb3-card-img.is-contain, .bb3-row-img.is-thumb, .bb3-card-img.is-thumb { background: #fff; }
.bb3-row-img img, .bb3-card-img img, .bb3-swatch-img img { width: 100%; height: 100%; object-fit: cover; }
.is-contain img { object-fit: contain; padding: 6%; }
.is-thumb img { object-fit: contain; }
.bb3-noimg { display: grid; place-items: center; height: 100%; color: #6e6e73; font-size: 0.7rem; text-align: center; padding: 0.3rem; background: var(--bb-linen); }

/* badges */
.bb3-badges { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.4rem; }
.bb3-badge { display: inline-block; font-size: 0.7rem; line-height: 1.25; padding: 0.15rem 0.45rem; border-radius: 999px; background: var(--bb-linen); color: var(--bb-mute); }
.bb3-badge.is-ok { background: #e6efe3; color: var(--bb-ok); }
.bb3-badge.is-warn { background: #fff4e0; color: var(--bb-warn); }
.bb3-badge.is-match { background: var(--bb-clay); color: #fff; }
.bb3-badge.is-off { background: #f0dede; color: var(--bb-bad); }

/* info toggle + panel */
.bb3-info-btn { position: absolute; right: 0.5rem; bottom: 0.5rem; width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 1.5px solid var(--bb-stone); background: #fff; font-family: var(--bb-display); font-style: italic; font-weight: 600; text-align: center; line-height: 1.4rem; color: var(--bb-clay-dark); z-index: 1; }
.bb3-info-btn[aria-expanded="true"] { background: var(--bb-clay-dark); color: #fff; border-color: var(--bb-clay-dark); }
.bb3-info { grid-column: 1 / -1; padding: 0.7rem 0.85rem 0.85rem; border-top: 1px solid var(--bb-stone); font-size: 0.85rem; background: var(--bb-cream); }
.bb3-info p { margin: 0 0 0.5rem; }
.bb3-info img { max-width: 100%; max-height: 220px; width: auto; border-radius: 8px; margin: 0 0 0.6rem; object-fit: contain; }
.bb3-info img.is-tall { max-height: 260px; }
.bb3-info img.is-wide { width: 100%; max-height: none; background: var(--bb-linen); }
@container (min-width: 700px) { .bb3-info img { max-height: 260px; } .bb3-info img.is-tall { max-height: 300px; } }
.bb3-info ul { margin: 0; padding-left: 1.1rem; list-style: disc; }
.bb3-info li + li { margin-top: 0.3rem; }
.bb3-sizenote { color: var(--bb-mute); }

/* rows */
.bb3-rows { display: grid; gap: 0.55rem; }
.bb3-row { position: relative; display: grid; grid-template-columns: 1fr; border: 1.5px solid var(--bb-stone); border-radius: var(--bb-r); background: #fff; overflow: hidden; }
.bb3-row.is-on { border-color: var(--bb-clay); box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.15); }
.bb3-row.is-off { opacity: 0.6; }
.bb3-row-main { position: relative; display: grid; grid-template-columns: 78px 1fr; gap: 0.75rem; align-items: center; width: 100%; padding: 0.55rem 2.4rem 0.55rem 0.55rem; min-height: 90px; }
.bb3-row-img { width: 78px; height: 78px; border-radius: 10px; border: 1px solid var(--bb-linen); }
.bb3-row-body b { display: block; font-weight: 600; font-size: 0.98rem; line-height: 1.25; }
.bb3-row-blurb { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.82rem; color: var(--bb-mute); margin-top: 0.15rem; }
.bb3-row .bb3-info-btn { bottom: auto; top: 2.45rem; }

/* cards */
.bb3-cards { display: grid; gap: 0.6rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bb3-card { position: relative; display: flex; flex-direction: column; border: 1.5px solid var(--bb-stone); border-radius: var(--bb-r); background: #fff; overflow: hidden; }
.bb3-card.is-on { border-color: var(--bb-clay); box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.15); }
.bb3-card.is-off { opacity: 0.6; }
.bb3-card-main { position: relative; display: flex; flex-direction: column; width: 100%; flex: 1; }
.bb3-card-img { aspect-ratio: 4 / 3; border-bottom: 1px solid var(--bb-linen); }
.bb3-card-body { display: block; padding: 0.6rem 0.65rem 0.7rem; }
.bb3-card-body b { display: block; font-weight: 600; font-size: 0.95rem; line-height: 1.25; }
.bb3-card-blurb { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.8rem; color: var(--bb-mute); margin-top: 0.2rem; }
/* two across at every width ("Where will the blind go?": two by two); an odd
   last card takes the whole row */
.bb3-cards.is-2up { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bb3-cards.is-2up > .bb3-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
.bb3-cards.is-2up > .bb3-card:last-child:nth-child(odd) .bb3-card-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.bb3-cards.is-2up > .bb3-card:last-child:nth-child(odd) .bb3-card-img { border-bottom: 0; border-right: 1px solid var(--bb-linen); }
.bb3-card .bb3-info-btn { bottom: auto; top: 0.5rem; right: auto; left: 0.5rem; }
.bb3-main { min-height: calc(100svh - 14rem); }

/* swatches */
.bb3-swatches { display: grid; gap: 0.6rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bb3-swatch { position: relative; display: flex; flex-direction: column; }
.bb3-swatch.is-off { opacity: 0.5; }
.bb3-swatch-main { position: relative; width: 100%; border: 1.5px solid var(--bb-stone); border-radius: var(--bb-r); background: #fff; overflow: hidden; padding-bottom: 0.5rem; }
.bb3-swatch.is-on .bb3-swatch-main { border-color: var(--bb-clay); box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.15); }
.bb3-swatch-img { aspect-ratio: 4 / 3; }
.bb3-swatch-name { display: block; font-size: 0.82rem; font-weight: 600; padding: 0.45rem 0.55rem 0; text-align: center; }
.bb3-swatch-note { font-size: 0.72rem; color: var(--bb-mute); text-align: center; padding: 0.3rem 0.2rem 0; }
.bb3-swatch .bb3-info-btn { top: 0.4rem; left: 0.4rem; right: auto; bottom: auto; width: 1.4rem; height: 1.4rem; line-height: 1.2rem; font-size: 0.8rem; }

/* two starting points on one card ("On a tilt-and-turn window or skylight") */
.bb3-card.is-group .bb3-card-main { flex: none; }
.bb3-card-pair { display: grid; grid-template-columns: 1fr 1fr; }
.bb3-card-pair .bb3-pair-img { display: block; height: 100%; overflow: hidden; }
.bb3-card-pair .bb3-pair-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; padding: 0; }
.bb3-card-pair .bb3-pair-img + .bb3-pair-img { border-left: 2px solid #fff; }
.bb3-group-picks { display: grid; gap: 0.4rem; padding: 0 0.65rem 0.7rem; }
.bb3-group-more .bb3-group-picks { padding-top: 0; }
.bb3-group-ask { display: flex; align-items: center; gap: 0.55rem; margin: 0 0.65rem 0.6rem; padding: 0.6rem 0.75rem; border: 1.5px solid var(--bb-clay); border-radius: 10px; background: #eef4fb; color: var(--bb-clay-dark); font-size: 1rem; font-weight: 700; line-height: 1.25; }
.bb3-group-ask::before { content: "↓"; flex: none; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--bb-clay); color: #fff; font-size: 0.9rem; font-weight: 700; }
.bb3-card.is-asking { border-color: var(--bb-clay); box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.16); }
.bb3-card.is-asking .bb3-group-ask { animation: bb3-ask 1.1s ease-in-out 3; }
@keyframes bb3-ask { 50% { box-shadow: 0 0 0 6px rgba(0, 102, 204, 0.2); } }
.bb3-card.is-group.is-on .bb3-group-ask { border-color: var(--bb-stone); background: var(--bb-linen); color: var(--bb-ink); font-size: 0.9rem; }
.bb3-card.is-group.is-on .bb3-group-ask::before { content: "✓"; background: var(--bb-ok); }
.bb3-group-more .bb3-group-btn { min-height: 3rem; align-items: center; padding: 0.7rem 0.5rem 0.7rem 0.75rem; }
.bb3-group-more .bb3-group-label { font-size: 0.95rem; }
.bb3-group-more .bb3-group-pick { border-width: 2px; }
@media (prefers-reduced-motion: reduce) { .bb3-card.is-asking .bb3-group-ask { animation: none; } }
.bb3-group-more.is-new { animation: bb3-open 0.28s cubic-bezier(0.2, 0.7, 0.3, 1); }
@media (prefers-reduced-motion: reduce) { .bb3-group-more.is-new { animation: none; } }
.bb3-group-pick { display: flex; align-items: center; border: 1.5px solid var(--bb-stone); border-radius: 10px; background: #fff; }
.bb3-group-pick.is-on { border-color: var(--bb-clay); background: #fafafc; }
.bb3-group-pick.is-off { opacity: 0.6; }
.bb3-group-btn { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 0.55rem; padding: 0.55rem 0.4rem 0.55rem 0.6rem; text-align: left; }
.bb3-group-label { font-weight: 600; font-size: 0.86rem; line-height: 1.3; }
.bb3-radio { flex: none; width: 1.05rem; height: 1.05rem; margin-top: 0.05rem; border-radius: 50%; border: 1.5px solid var(--bb-stone); background: #fff; }
.bb3-group-pick.is-on .bb3-radio { background: var(--bb-clay); border-color: var(--bb-clay); box-shadow: inset 0 0 0 3px #fff; }
.bb3-group-btn:focus-visible { outline: 3px solid var(--bb-brass); outline-offset: 2px; border-radius: 10px; }
.bb3-card .bb3-group-pick .bb3-info-btn { position: static; flex: none; margin: 0 0.5rem 0 0; }

/* light scale ("How much light through?") */
.bb3-light { display: grid; gap: 0.55rem; }
.bb3-lrow { position: relative; border: 1.5px solid var(--bb-stone); border-radius: var(--bb-r); background: #fff; overflow: hidden; }
.bb3-lrow.is-on { border-color: var(--bb-clay); box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.15); }
.bb3-lrow.is-off { opacity: 0.6; }
.bb3-lrow.is-open { border-color: var(--bb-brass); }
.bb3-lrow-main { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 0.4rem 0.85rem; align-items: start; width: 100%; padding: 0.7rem 2.6rem 0.75rem 0.7rem; text-align: left; }
.bb3-lrow-swatch { display: block; width: 64px; height: 64px; border-radius: 10px; overflow: hidden; border: 1px solid var(--bb-stone); }
.bb3-lrow-swatch svg { display: block; width: 100%; height: 100%; }
.bb3-lrow-body b { display: block; font-weight: 600; font-size: 1rem; line-height: 1.25; }
.bb3-lrow-blurb { display: block; font-size: 0.84rem; color: var(--bb-mute); margin-top: 0.2rem; line-height: 1.4; }
.bb3-lrow-note { display: block; font-size: 0.8rem; color: var(--bb-ink); margin-top: 0.3rem; padding-left: 0.55rem; border-left: 2px solid var(--bb-brass); line-height: 1.4; }
.bb3-lrow-fabrics { display: block; font-size: 0.76rem; color: var(--bb-mute); margin-top: 0.3rem; }
.bb3-lrow-fabrics i { font-style: normal; font-weight: 600; color: var(--bb-ink); }
.bb3-facts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; padding-top: 0.5rem; border-top: 1px solid var(--bb-linen); }
.bb3-fact { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.76rem; }
.bb3-fact i { font-style: normal; color: var(--bb-mute); }
.bb3-fact b { font-weight: 600; display: inline-flex; align-items: center; }
.bb3-meter { display: inline-flex; gap: 3px; }
.bb3-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bb-stone); }
.bb3-dot.is-full { background: var(--bb-brass); }
.bb3-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bb3-lrow .bb3-info-btn { top: 2.45rem; bottom: auto; }
@container (min-width: 700px) {
	.bb3-lrow-main { grid-template-columns: 72px minmax(0, 1fr) 13.5rem; padding-right: 3rem; }
	.bb3-lrow-swatch { width: 72px; height: 72px; }
	.bb3-facts { grid-column: 3; flex-direction: column; gap: 0.3rem; padding: 0 0 0 1rem; border-top: 0; border-left: 1px solid var(--bb-linen); align-self: center; }
	.bb3-fact { justify-content: space-between; }
}

/* bottom rail: wrapped or bare, then size or colour */
.bb3-card.is-rail .bb3-card-main { flex: none; }
.bb3-rail-more { padding: 0 0.65rem 0.75rem; }
.bb3-rail-more .bb3-group-picks { padding: 0 0 0.6rem; }
.bb3-rail-more.is-new { animation: bb3-open 0.28s cubic-bezier(0.2, 0.7, 0.3, 1); }
@keyframes bb3-open { from { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .bb3-rail-more.is-new { animation: none; } }
.bb3-dots-head { margin: 0 0 0.45rem; font-size: 0.84rem; }
.bb3-dots-head b { font-weight: 600; }
.bb3-dots-head span { color: var(--bb-ok); font-size: 0.78rem; margin-left: 0.2rem; }
.bb3-dots { display: flex; flex-wrap: wrap; gap: 0.5rem 0.7rem; }
.bb3-dot-pick { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: 0.15rem; border-radius: 10px; }
.bb3-dot-pick span { display: block; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(29, 29, 31, 0.25); box-shadow: inset 0 -3px 6px rgba(0, 0, 0, 0.12); }
.bb3-dot-pick i { font-style: normal; font-size: 0.7rem; color: var(--bb-mute); }
.bb3-dot-pick.is-on span { outline: 2.5px solid var(--bb-clay); outline-offset: 2px; }
.bb3-dot-pick.is-on i { color: var(--bb-ink); font-weight: 600; }
.bb3-dot-pick:focus-visible { outline: 3px solid var(--bb-brass); outline-offset: 1px; }

/* fabric specifications (from the guide's tables) */
.bb3-spec-tags { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.3rem; }
.bb3-spec-tags em { font-style: normal; font-size: 0.68rem; line-height: 1.2; padding: 0.15rem 0.45rem; border-radius: 999px; background: var(--bb-linen); color: var(--bb-mute); }
.bb3-spec-tags em.is-level { background: #e5e5ea; color: var(--bb-ink); }
.bb3-spec { margin-top: 1rem; padding: 1rem 1.1rem; border: 1.5px solid var(--bb-brass); border-radius: var(--bb-r); background: #fff; }
.bb3-spec h4 { font-family: var(--bb-display); font-weight: 500; font-size: 1.1rem; margin: 0 0 0.6rem; }
.bb3-spec h4 span { font-family: var(--bb-body); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bb-clay); font-weight: 600; margin-left: 0.4rem; }
.bb3-spec dl { margin: 0; display: grid; gap: 0.55rem; }
.bb3-spec dl > div { display: grid; grid-template-columns: 1fr; gap: 0.1rem; padding-top: 0.55rem; border-top: 1px solid var(--bb-linen); }
.bb3-spec dl > div:first-child { border-top: 0; padding-top: 0; }
.bb3-spec dt { font-size: 0.76rem; color: var(--bb-mute); }
.bb3-spec dd { margin: 0; font-size: 0.9rem; }
.bb3-spec dd b { font-weight: 600; display: block; }
.bb3-spec dd span { display: block; font-size: 0.8rem; color: var(--bb-mute); margin-top: 0.15rem; line-height: 1.4; }
@container (min-width: 700px) { .bb3-spec dl > div { grid-template-columns: 11rem minmax(0, 1fr); gap: 1rem; } }

/* fabric picker under the chosen light level */
.bb3-lrow { overflow: visible; }
.bb3-lrow:has(.bb3-fpick-pop) { z-index: 6; }
/* A fabric picked by name under a chosen row (the back blind): the list opens over the rows below. */
.bb3-row:has(> .bb3-fpick) { overflow: visible; }
.bb3-rows.is-pick { grid-template-columns: minmax(0, 1fr); }
.bb3-row:has(.bb3-fpick-pop) { z-index: 6; }
.bb3-fpick { position: relative; padding: 0 0.7rem 0.8rem; }
.bb3-fpick-label { display: block; font-size: 0.78rem; font-weight: 600; margin: 0 0 0.3rem; }
.bb3-fpick-label i { font-style: normal; font-weight: 400; color: var(--bb-mute); }
.bb3-fpick-btn { position: relative; display: flex; align-items: center; width: 100%; min-height: 2.9rem; padding: 0.45rem 2.4rem 0.45rem 0.75rem; border: 1.5px solid var(--bb-stone); border-radius: 10px; background: #fff; text-align: left; }
.bb3-fpick-btn:hover { border-color: var(--bb-brass); }
.bb3-fpick-btn[aria-expanded="true"] { border-color: var(--bb-clay); }
.bb3-fpick-btn:focus-visible { outline: 3px solid var(--bb-brass); outline-offset: 2px; }
.bb3-fpick-ph { color: var(--bb-mute); font-size: 0.92rem; }
.bb3-fpick-val { display: block; }
.bb3-fpick-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.2rem 0.5rem; }
.bb3-fpick-row b { font-weight: 600; font-size: 0.92rem; }
.bb3-fpick-caret { position: absolute; right: 0.95rem; top: 50%; width: 0.5rem; height: 0.5rem; margin-top: -0.35rem; border-right: 2px solid var(--bb-clay); border-bottom: 2px solid var(--bb-clay); transform: rotate(45deg); transition: transform 0.2s; }
.bb3-fpick-btn[aria-expanded="true"] .bb3-fpick-caret { transform: rotate(-135deg); margin-top: -0.1rem; }
.bb3-fpick-field { position: relative; }
.bb3-fpick-pop { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; background: #fff; border: 1.5px solid var(--bb-clay); border-radius: 12px; box-shadow: 0 14px 36px rgba(29, 29, 31, 0.18); overflow: hidden; animation: bb3-open 0.18s ease-out; }
.bb3-fpick-q { display: block; width: 100%; padding: 0.7rem 0.8rem; border: 0; border-bottom: 1px solid var(--bb-linen); font: inherit; font-size: 1rem; background: #fff; }
.bb3-fpick-q:focus { outline: none; background: #fafafc; }
.bb3-fpick-list { list-style: none; margin: 0; padding: 0.3rem; max-height: min(22rem, 55vh); overflow-y: auto; }
.bb3-fpick-opt { display: block; padding: 0.55rem 0.6rem; border-radius: 8px; cursor: pointer; }
.bb3-fpick-opt + .bb3-fpick-opt { border-top: 1px solid var(--bb-linen); }
.bb3-fpick-opt:hover, .bb3-fpick-opt:focus { background: #fafafc; outline: none; }
.bb3-fpick-opt.is-on { background: #eef4fb; box-shadow: inset 3px 0 0 var(--bb-clay); }
.bb3-fpick-opt.is-off { opacity: 0.55; cursor: default; }
.bb3-fpick-opt[hidden] { display: none; }
.bb3-fpick-more { display: block; font-size: 0.74rem; color: var(--bb-mute); margin-top: 0.2rem; }
.bb3-fpick .bb3-spec { margin-top: 0.7rem; }
@media (prefers-reduced-motion: reduce) { .bb3-fpick-pop { animation: none; } }

/* colour step: hardware colour and bottom rail together */
.bb3-colours { display: grid; gap: 0.9rem; }
.bb3-cmode { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.bb3-cmode-btn { display: flex; flex-direction: column; gap: 0.15rem; text-align: left; padding: 0.75rem 0.9rem; border: 1.5px solid var(--bb-stone); border-radius: var(--bb-r); background: #fff; }
.bb3-cmode-btn b { font-weight: 600; font-size: 0.95rem; }
.bb3-cmode-btn span { font-size: 0.8rem; color: var(--bb-mute); }
.bb3-cmode-btn.is-on { border-color: var(--bb-clay); box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.15); background: #fafafc; }
.bb3-cmode-btn:focus-visible, .bb3-crail-btn:focus-visible, .bb3-crail-opt:focus-visible { outline: 3px solid var(--bb-brass); outline-offset: 2px; }
.bb3-cgroup { padding: 0.85rem 0.95rem 0.95rem; border: 1.5px solid var(--bb-stone); border-radius: var(--bb-r); background: #fff; }
.bb3-cnote { margin: 0.55rem 0 0; font-size: 0.8rem; color: var(--bb-mute); }
.bb3-dot-pick.is-off { opacity: 0.4; cursor: not-allowed; }
.bb3-dot-pick span.is-fabric { background: repeating-linear-gradient(45deg, #e5e5ea 0 4px, #d2d2d7 4px 8px); }
.bb3-dot-pick .bb3-price { font-size: 0.66rem; }
.bb3-crails { display: grid; gap: 0.5rem; }
.bb3-crail { border: 1.5px solid var(--bb-stone); border-radius: 12px; }
.bb3-crail.is-on { border-color: var(--bb-clay); background: #fafafc; }
.bb3-crail.is-off { opacity: 0.6; }
.bb3-crail-btn { display: grid; grid-template-columns: auto 1fr; column-gap: 0.55rem; align-items: start; width: 100%; padding: 0.65rem 0.75rem; text-align: left; }
.bb3-crail-btn .bb3-radio { grid-row: span 3; margin-top: 0.15rem; }
.bb3-crail-btn b { font-weight: 600; font-size: 0.92rem; }
.bb3-crail-btn > span:not(.bb3-radio):not(.bb3-price) { grid-column: 2; font-size: 0.8rem; color: var(--bb-mute); }
.bb3-crail-btn .bb3-price { grid-column: 2; justify-self: start; }
.bb3-crail.is-on > .bb3-crail-btn .bb3-radio, .bb3-crail-opt.is-on .bb3-radio { background: var(--bb-clay); border-color: var(--bb-clay); box-shadow: inset 0 0 0 3px #fff; }
.bb3-crail-sub { padding: 0 0.75rem 0.75rem 2.35rem; display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; }
.bb3-crail-sub .bb3-dots-head { width: 100%; margin: 0; }
.bb3-crail-opt { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.85rem; padding: 0.3rem 0; }
@container (min-width: 700px) { .bb3-crails { grid-template-columns: 1fr 1fr; align-items: start; } }

/* Next with nothing chosen */
.bb3-need.is-inline { margin: 0 0.65rem 0.6rem; font-size: 0.88rem; }
.bb3-need { margin: 0 0 0.85rem; padding: 0.7rem 0.9rem 0.7rem 2.6rem; position: relative; border: 1.5px solid #99c2eb; border-radius: 10px; background: #eef4fb; color: var(--bb-bad); font-weight: 600; font-size: 0.95rem; animation: bb3-shake 0.4s ease-in-out; }
.bb3-need::before { content: "!"; position: absolute; left: 0.8rem; top: 50%; margin-top: -0.7rem; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--bb-bad); color: #fff; display: grid; place-items: center; font-size: 0.85rem; }
.bb3-card.is-need { animation: bb3-shake 0.4s ease-in-out; }
@keyframes bb3-shake { 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) { .bb3-need, .bb3-card.is-need { animation: none; } }

/* a step answered from a drop-down (frame depth) */
.bb3-select { max-width: 42rem; }
.bb3-select .bb3-fpick { padding: 0; }
.bb3-select-panel { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 0.9rem; align-items: start; margin-top: 0.8rem; padding: 0.9rem; border: 1.5px solid var(--bb-stone); border-radius: var(--bb-r); background: #fff; }
.bb3-select-img { display: block; width: 96px; height: 96px; border-radius: 10px; overflow: hidden; border: 1px solid var(--bb-linen); }
.bb3-select-img img { width: 100%; height: 100%; object-fit: cover; }
.bb3-select-text b { font-weight: 600; font-size: 0.98rem; }
.bb3-select-text p { margin: 0.25rem 0 0; font-size: 0.88rem; color: var(--bb-mute); }
.bb3-select-text ul { margin: 0.5rem 0 0; padding-left: 1.1rem; font-size: 0.84rem; }
.bb3-select-text li + li { margin-top: 0.2rem; }

/* frame depth: sizes in the drop-down, what fits underneath, drawing beside */
.bb3-depth { display: grid; gap: 1rem; }
.bb3-depth-fig { margin: 0; order: 2; max-width: 22rem; }
.bb3-depth-fig img { display: block; width: 100%; height: auto; border-radius: var(--bb-r); border: 1px solid var(--bb-stone); }
.bb3-fits { margin-top: 0.8rem; padding: 0.9rem 1rem; border: 1.5px solid var(--bb-stone); border-radius: var(--bb-r); background: #fff; }
.bb3-fits.is-unsure p { margin: 0; font-size: 0.9rem; color: var(--bb-mute); }
.bb3-fits-title { margin: 0 0 0.6rem; font-weight: 600; font-size: 0.98rem; }
.bb3-fit { margin-top: 0.55rem; padding-left: 0.7rem; border-left: 3px solid var(--bb-stone); }
.bb3-fit b { display: block; font-size: 0.84rem; font-weight: 600; }
.bb3-fit ul { margin: 0.25rem 0 0; padding-left: 1.05rem; font-size: 0.86rem; }
.bb3-fit li + li { margin-top: 0.15rem; }
.bb3-fit.is-in { border-left-color: var(--bb-ok); } .bb3-fit.is-in b { color: var(--bb-ok); }
.bb3-fit.is-tight { border-left-color: var(--bb-warn); } .bb3-fit.is-tight b { color: var(--bb-warn); }
.bb3-fit.is-out { border-left-color: var(--bb-mute); } .bb3-fit.is-out b { color: var(--bb-mute); }
.bb3-fits-note { margin: 0.7rem 0 0; font-size: 0.8rem; color: var(--bb-mute); }
.bb3-fits-none { margin: 0; font-size: 0.9rem; color: var(--bb-mute); }
.bb3-fit.is-in ul { font-size: 0.9rem; }
.bb3-fit.is-in li::marker { color: var(--bb-ok); }
.bb3-fit-more summary { cursor: pointer; font-size: 0.8rem; font-weight: 600; color: var(--bb-clay-dark); margin: 0.2rem 0 0 1.05rem; list-style: none; }
.bb3-fit-more summary::-webkit-details-marker { display: none; }
.bb3-fit-more[open] summary { display: none; }
.bb3-fit-more ul { margin-top: 0.15rem; }
@container (min-width: 700px) {
	.bb3-depth { grid-template-columns: minmax(0, 1fr) 15rem; align-items: start; }
	.bb3-depth-fig { order: 0; grid-column: 2; grid-row: 1; }
}

/* how open a screen is: the number said plainly, and a scale */
.bb3-spec dd .bb3-open-say { color: var(--bb-ink); font-size: 0.85rem; line-height: 1.45; margin-top: 0; }
.bb3-spec dd .bb3-open-scale { display: flex; gap: 3px; margin-top: 0.6rem; }
.bb3-spec dd .bb3-open-scale i { flex: 1; font-style: normal; text-align: center; font-size: 0.72rem; font-weight: 600; padding: 0.3rem 0; border-radius: 6px; background: var(--bb-linen); color: var(--bb-mute); }
.bb3-spec dd .bb3-open-scale i.is-on { background: var(--bb-clay); color: #fff; }
.bb3-spec dd .bb3-open-ends { display: flex; justify-content: space-between; gap: 0.5rem; margin-top: 0.25rem; }
.bb3-spec dd .bb3-open-ends em { font-style: normal; font-size: 0.7rem; color: var(--bb-mute); }
.bb3-spec dd .bb3-open-aof { font-size: 0.72rem; margin-top: 0.45rem; }

/* details drawer: slides open below the row of the option whose "i" was pressed */
.bb3-drawer { grid-column: 1 / -1; overflow: hidden; }
.bb3-drawer-inner { position: relative; margin-top: 9px; border: 1.5px solid var(--bb-brass); border-radius: var(--bb-r); background: #fff; }
.bb3-drawer-inner::before { content: ""; position: absolute; top: -8.5px; left: calc(var(--caret, 50%) - 8px); width: 14px; height: 14px; background: #fff; border-left: 1.5px solid var(--bb-brass); border-top: 1.5px solid var(--bb-brass); transform: rotate(45deg); transition: left 0.25s ease; }
@media (prefers-reduced-motion: reduce) { .bb3-drawer-inner::before { transition: none; } }
.bb3-drawer .bb3-info { border-top: 0; background: transparent; padding: 0.95rem 2.8rem 1rem 1rem; font-size: 0.88rem; }
.bb3-drawer .bb3-info-img { display: block; }
.bb3-drawer .bb3-info-text > :last-child { margin-bottom: 0; }
.bb3-drawer-close { position: absolute; top: 0.4rem; right: 0.45rem; z-index: 1; width: 2.1rem; height: 2.1rem; border-radius: 50%; font-size: 1.35rem; line-height: 1; color: var(--bb-mute); }
.bb3-drawer-close:hover { background: var(--bb-linen); color: var(--bb-ink); }
.bb3-drawer-close:focus-visible { outline: 3px solid var(--bb-brass); outline-offset: 2px; }
.bb3-card.is-open, .bb3-row.is-open, .bb3-swatch.is-open .bb3-swatch-main { border-color: var(--bb-brass); }
@container (min-width: 700px) {
	.bb3-drawer .bb3-info:has(> .bb3-info-img) { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: 1.25rem; align-items: start; }
	.bb3-drawer .bb3-info:has(> .bb3-info-img) > .bb3-info-img { margin: 0; max-height: 300px; }
	.bb3-drawer .bb3-info:has(> .bb3-info-img.is-wide) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* chips */
.bb3-chips { display: grid; gap: 0.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bb3-chip { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.65rem 0.8rem; border: 1.5px solid var(--bb-stone); border-radius: 12px; background: #fff; min-height: 3.2rem; position: relative; padding-right: 2.2rem; }
.bb3-chip b { font-weight: 600; font-size: 0.92rem; }
.bb3-chip span { font-size: 0.76rem; color: var(--bb-mute); }
.bb3-chip::after { content: ""; position: absolute; right: 0.6rem; top: 50%; width: 1.15rem; height: 1.15rem; margin-top: -0.575rem; border-radius: 50%; border: 1.5px solid var(--bb-stone); }
.bb3-chip.is-on { border-color: var(--bb-clay); background: #fafafc; }
.bb3-chip.is-on::after { background: var(--bb-clay); border-color: var(--bb-clay); box-shadow: inset 0 0 0 3px #fff; }

/* size */
.bb3-size { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.bb3-size label { display: flex; flex-direction: column; gap: 0.3rem; font-weight: 600; font-size: 0.85rem; }
.bb3-size-in { display: flex; align-items: center; border: 1.5px solid var(--bb-stone); border-radius: 10px; background: #fff; padding-right: 0.7rem; }
.bb3-size-in:focus-within { outline: 2px solid var(--bb-clay); outline-offset: 1px; }
.bb3-size input { width: 100%; padding: 0.7rem 0.7rem; border: 0; background: none; font: inherit; font-size: 1.15rem; min-width: 0; }
.bb3-size input:focus { outline: none; }
.bb3-size-in i { font-style: normal; color: var(--bb-mute); font-size: 0.85rem; }
.bb3-size .bb3-help { grid-column: 1 / -1; }
.bb3-size .bb3-size-big { color: var(--bb-ink); }
.bb3-size .bb3-size-big.is-off { visibility: hidden; }

/* buttons / nav */
.bb3-btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; padding: 0.7rem 1.2rem; font-weight: 600; border: 1.5px solid transparent; font-size: 0.95rem; white-space: nowrap; }
.bb3-btn-primary { background: var(--bb-clay); color: #fff; }
.bb3-btn-primary:hover:not(:disabled) { background: var(--bb-clay-dark); }
.bb3-btn-ghost { background: #fff; border-color: var(--bb-stone); }
.bb3-btn-ghost:hover:not(:disabled) { border-color: var(--bb-brass); }
.bb3-btn:disabled { opacity: 0.4; }
.bb3-btn-big { width: 100%; padding: 0.9rem 1.2rem; font-size: 1rem; white-space: normal; text-align: center; }
.bb3-nav { display: none; }

/* sticky bottom bar (mobile) */
.bb3-bar { position: sticky; bottom: 0; z-index: 5; display: grid; grid-template-columns: auto 1fr auto; gap: 0.5rem; align-items: center; margin: 1rem calc(-1 * var(--bb-gutter)) 0; padding: 0.6rem var(--bb-gutter) calc(0.6rem + env(safe-area-inset-bottom)); background: rgba(245, 245, 247, 0.94); backdrop-filter: blur(8px); border-top: 1px solid var(--bb-stone); }
.bb3-bar .bb3-btn { padding-left: 1rem; padding-right: 1rem; }
.bb3-bar-plan { justify-self: center; font-size: 0.85rem; font-weight: 600; color: var(--bb-clay-dark); padding: 0.5rem 0.6rem; border-radius: 8px; }
.bb3-bar-plan b { display: inline-grid; place-items: center; min-width: 1.4rem; height: 1.4rem; border-radius: 999px; background: var(--bb-clay); color: #fff; font-size: 0.75rem; margin-left: 0.2rem; }
.bb3-bar-plan:disabled { color: var(--bb-mute); }

/* plan (desktop panel) + sheet body */
.bb3-plan { display: none; }
.bb3-plan-hero { aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: var(--bb-stone); margin-bottom: 0.8rem; }
.bb3-plan-hero img { width: 100%; height: 100%; object-fit: cover; }
.bb3-dl { margin: 0; display: grid; gap: 0.5rem; }
.bb3-dl > div { display: grid; grid-template-columns: 6.5rem 1fr; gap: 0.5rem; border-bottom: 1px solid var(--bb-stone); padding-bottom: 0.5rem; }
.bb3-dl dt { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--bb-mute); font-weight: 600; padding-top: 0.2rem; }
.bb3-dl dd { margin: 0; font-weight: 500; font-size: 0.95rem; display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }
.bb3-dl.is-compact > div { grid-template-columns: 5.2rem 1fr; padding-bottom: 0.4rem; gap: 0.4rem; }
.bb3-dl.is-compact dt { font-size: 0.66rem; }
.bb3-dl.is-compact dd { font-size: 0.85rem; }
.bb3-why { flex-basis: 100%; font-size: 0.78rem; color: var(--bb-mute); font-weight: 400; margin-top: 0.15rem; }
.bb3-edit { font-size: 0.72rem; color: var(--bb-clay-dark); text-decoration: underline; opacity: 0.8; }
.bb3-seg { display: inline-flex; border: 1.5px solid var(--bb-stone); border-radius: 999px; overflow: hidden; }
.bb3-seg button { padding: 0.25rem 0.7rem; font-size: 0.78rem; font-weight: 600; }
.bb3-seg button.is-on { background: var(--bb-clay); color: #fff; }
.bb3-seg button[disabled] { opacity: 0.4; cursor: not-allowed; }
.bb3-plan-warns { margin: 0.8rem 0 0; padding-left: 1rem; font-size: 0.8rem; color: var(--bb-warn); list-style: disc; }
.bb3-plan-warns li + li { margin-top: 0.3rem; }

/* sheets */
.bb3-backdrop { position: fixed; inset: 0; background: rgba(29, 29, 31, 0.45); z-index: 100000; }
.bb3-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 100001; background: var(--bb-cream); border-radius: 18px 18px 0 0; max-height: 82vh; display: flex; flex-direction: column; box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.2); }
.bb3-sheet-head { display: flex; justify-content: space-between; align-items: center; padding: 0.8rem 1rem 0.5rem; }
.bb3-sheet-body { overflow: auto; padding: 0 1rem calc(1rem + env(safe-area-inset-bottom)); }
.bb3-sheet-body .bb3-btn-big { margin-top: 1rem; }
body.bb3-sheet-open { overflow: hidden; }
.bb3-sheet.is-small { max-height: none; }
.bb3-sheet.is-small .bb3-actions-row { margin: 0.6rem 0 0.4rem; }
@container (min-width: 700px) {
	.bb3-sheet { left: 50%; right: auto; bottom: auto; top: 50%; transform: translate(-50%, -50%); width: min(560px, calc(100vw - 32px)); border-radius: 18px; max-height: 80vh; }
}

/* rail (answers list): in the sheet on mobile, sidebar on desktop */
.bb3-rail { display: none; }
.bb3-rail-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.bb3-rail-list li button { width: 100%; border-left: 3px solid var(--bb-stone); padding: 0.4rem 0.7rem; display: grid; grid-template-columns: auto 1fr; column-gap: 0.5rem; align-items: baseline; border-radius: 0 8px 8px 0; }
.bb3-rail-list li button:hover:not(:disabled) { background: var(--bb-linen); }
.bb3-rail-list li button:disabled { opacity: 0.45; }
.bb3-rail-n { font-size: 0.68rem; font-weight: 700; color: var(--bb-brass); }
.bb3-rail-t { font-weight: 600; font-size: 0.88rem; }
.bb3-rail-a { grid-column: 2; font-size: 0.76rem; color: var(--bb-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb3-rail-a.is-skipped { font-style: italic; opacity: 0.7; }
.bb3-rail-list li.is-done button { border-left-color: var(--bb-brass); }
.bb3-rail-list li.is-current button { border-left-color: var(--bb-clay); background: var(--bb-linen); }
.bb3-rail-list li.is-current .bb3-rail-t { color: var(--bb-clay-dark); }

/* send form on the plan page */
.bb3-send { margin-top: 1.25rem; padding: 1rem 1rem 1.1rem; border-radius: var(--bb-r); background: #fff; border: 1.5px solid var(--bb-stone); }
.bb3-send h4 { margin: 0.1rem 0 0.2rem; }
.bb3-form { display: grid; gap: 0.7rem; margin-top: 0.8rem; }
.bb3-form label { display: flex; flex-direction: column; gap: 0.3rem; font-weight: 600; font-size: 0.85rem; }
.bb3-form label i { font-style: normal; font-weight: 400; color: var(--bb-mute); margin-left: 0.3rem; }
.bb3-form input, .bb3-form textarea { width: 100%; padding: 0.7rem 0.75rem; border: 1.5px solid var(--bb-stone); border-radius: 10px; font: inherit; font-size: 1rem; background: #fff; color: var(--bb-ink); }
.bb3-form input:focus, .bb3-form textarea:focus { outline: 2px solid var(--bb-clay); outline-offset: 1px; }
.bb3-form .is-invalid { border-color: var(--bb-bad); }
.bb3-form-row { display: grid; gap: 0.7rem; }
.bb3-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.bb3-form .bb3-status { margin: 0; }
.bb3-form .bb3-fine { margin-top: 0.2rem; }
.bb3-form .bb3-fine .bb3-link { padding: 0; text-decoration: underline; }
.bb3-sent { padding: 0.4rem 0; }
.bb3-sent h4 { margin: 0.2rem 0 0.4rem; }

/* summary */
.bb3-summary-hero { position: relative; border-radius: var(--bb-r); overflow: hidden; background: var(--bb-stone); margin-bottom: 1rem; aspect-ratio: 16 / 10; }
.bb3-summary-hero img { width: 100%; height: 100%; object-fit: cover; }
.bb3-summary-title { position: absolute; left: 0; right: 0; bottom: 0; padding: 1rem; background: linear-gradient(to top, rgba(29, 29, 31, 0.85), rgba(29, 29, 31, 0)); color: #fff; }
.bb3-summary-title h4 { color: #fff; font-size: clamp(1.15rem, 1rem + 1vw, 1.6rem); }
.bb3-notes { margin-top: 1rem; padding: 0.9rem 1rem; border-radius: var(--bb-r); background: #fff4e0; }
.bb3-notes.is-measure { background: var(--bb-linen); }
.bb3-notes ul { margin: 0; padding-left: 1.1rem; font-size: 0.9rem; list-style: disc; }
.bb3-notes li + li { margin-top: 0.35rem; }
.bb3-actions { display: grid; gap: 0.6rem; margin-top: 1.25rem; }
.bb3-actions-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.bb3-status { font-size: 0.9rem; min-height: 1.4em; }
.bb3-status.is-ok { color: var(--bb-ok); }
.bb3-status.is-bad { color: var(--bb-bad); }

.bb3-opt-btn:focus-visible, .bb3-row-main:focus-visible, .bb3-card-main:focus-visible, .bb3-swatch-main:focus-visible, .bb3-chip:focus-visible, .bb3-btn:focus-visible { outline: 3px solid var(--bb-brass); outline-offset: 2px; }

/* Editor preview */
.editor-styles-wrapper .bb3-editor-note { padding: 1.25rem; border: 1.5px dashed #0066cc; border-radius: 14px; background: #f5f5f7; }

/* ------------------------------------------------ tablet / desktop */
@container (min-width: 700px) {
	.bb3-top { margin: 0; padding-left: 0; padding-right: 0; }
	.bb3 { padding-bottom: clamp(32px, 5vw, 64px); }
	.bb3-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
	.bb3-row-main { grid-template-columns: 88px 1fr; min-height: 100px; }
	.bb3-row-img { width: 88px; height: 88px; }
	.bb3-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; }
	.bb3-swatches { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.bb3-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.bb3-size { grid-template-columns: 11rem 11rem; }
	.bb3-form-row { grid-template-columns: 1fr 1fr; }
	.bb3-send { padding: 1.25rem 1.4rem 1.4rem; }
	.bb3-bar { display: none; }
	.bb3-main { min-height: 0; }
	/* Back and Next stay in reach at the bottom of the screen on a tall step. */
	.bb3-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1rem; position: sticky; bottom: 0; z-index: 3; padding: 0.75rem 0; background: var(--bb-cream); box-shadow: 0 -1px 0 var(--bb-stone); }
	.bb3-actions { grid-template-columns: auto; justify-content: start; }
	.bb3-btn-big { width: auto; }
}
@container (min-width: 900px) {
	.bb3-layout { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 1.75rem; align-items: start; }
	.bb3-rail { display: block; position: sticky; top: calc(var(--bb-sticky) + 3.4rem); }
	.bb3-top-actions [data-sheet] { display: none; }
}
@container (min-width: 1140px) {
	.bb3-layout { grid-template-columns: 190px minmax(0, 1fr) 290px; }
	.bb3-shell.is-summary .bb3-layout { grid-template-columns: 190px minmax(0, 1fr); }
	.bb3-plan { display: block; position: sticky; top: calc(var(--bb-sticky) + 3.4rem); }
	.bb3-plan-inner { background: var(--bb-linen); border-radius: var(--bb-r); padding: 0.9rem; }
	.bb3-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (min-width: 1400px) {
	.bb3-rows { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.bb3-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media print {
	.bb3-top, .bb3-bar, .bb3-nav, .bb3-actions, .bb3-plan, .bb3-rail, .bb3-status, .bb3-edit, .bb3-intro p { display: none !important; }
	.bb3-layout { display: block; }
	.bb3-summary-hero { aspect-ratio: auto; max-height: 240px; }
}

/* Colour lists that have no photograph: the maker's name on a plain tile. */
.bb3-swatch.is-text .bb3-swatch-main { padding-bottom: 0; }
.bb3-swatch.is-text .bb3-swatch-img { aspect-ratio: 5 / 2; display: flex; align-items: center; justify-content: center; background: var(--bb-linen); padding-right: 1.6rem; }
.bb3-swatch.is-text .bb3-swatch-img span { font-family: inherit; font-size: 0.78rem; font-weight: 600; color: var(--bb-ink); padding: 0.3rem; text-align: center; line-height: 1.2; }

/* 3.7.0: a plan sent earlier whose product is no longer made — room above the form that follows. */
.bb3-sent + .bb3-kicker,
.bb3-sent + .bb3-help { display: block; margin-top: 0.9rem; }

/* ---- Phones: every tap target at least 40px tall, and no colour name cut off.
   Where a taller control would push the page down (the sticky top bar, the
   "change" links in the plan), what you see keeps its size and only the
   invisible area you can tap grows. */
@media screen and (max-width: 599px) {
	/* Top bar links: each tap area reaches up and down to the edges of the bar.
	   The rest of the bar lets taps through, and the tap areas sit beneath the
	   links themselves, so neighbouring links never take each other's taps.
	   The row sits 1.2px higher, as in the price book; the bar keeps its
	   height. */
	.bb3-top { padding-bottom: 0.475rem; }
	.bb3-top-row { padding-top: 0.375rem; }
	.bb3-top > * { pointer-events: none; }
	.bb3-top :is(a, button, input, select, textarea) { pointer-events: auto; }
	.bb3-top .bb3-link { position: relative; }
	.bb3-top .bb3-link::after { content: ""; position: absolute; left: 0; right: 0; top: calc(-4px - 0.375rem); bottom: -0.475rem; z-index: -1; }

	/* The round "i" buttons and the details' close button: same look, a 40px
	   square to tap. Beside a choice in a list, the "i" reaches right only
	   (into the card's empty edge), so it never covers the choice next to it. */
	.bb3-info-btn::after, .bb3-drawer-close::after { content: ""; position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; }
	.bb3-card .bb3-group-pick .bb3-info-btn { position: relative; inset: auto; }
	.bb3-card .bb3-group-pick .bb3-info-btn::after { left: 0; right: -0.95rem; width: auto; margin-left: 0; }

	/* The plan: "change" keeps its small look with a 40px tap area, and the
	   rows sit a little further apart so no two tap areas meet. Left / Right
	   is a full 40px. */
	.bb3-dl { gap: 0.6rem; }
	.bb3-dl.is-compact > div { padding-bottom: 0.65rem; }
	.bb3-edit { display: inline-flex; align-items: center; min-height: 40px; line-height: 1.45; padding: 0 0.4rem; margin: calc((1.45em - 40px) / 2) -0.4rem; }
	.bb3-seg button { min-height: 40px; padding: 0 0.85rem; }

	/* Small buttons beside bigger ones, and the answers list. */
	.bb3-bar-plan, .bb3-crail-opt { min-height: 40px; }
	.bb3-sheet-head .bb3-link { min-height: 40px; margin: -5px 0; }
	.bb3-rail-list li button { min-height: 40px; align-content: center; }
	.bb3-group-btn { padding-top: 0.7rem; padding-bottom: 0.7rem; }

	/* Choices listed inside a half-width card ("On a tilt-and-turn window or
	   skylight"): the list keeps to the card's width, so its "i" buttons are
	   no longer cut off at the card's edge; a long word may be hyphenated. */
	.bb3-group-picks { grid-template-columns: minmax(0, 1fr); }
	.bb3-group-label { min-width: 0; overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 7 3 3; }

	/* A link inside a sentence, and "Forgot your password?" under the sign-in:
	   a 40px tall tap area centred on its words. */
	.bb3-notice .bb3-link, .bb3-form .bb3-fine .bb3-link, .bb3-forgot-toggle, .bb3-reg-hint a { position: relative; }
	.bb3-notice .bb3-link::after, .bb3-form .bb3-fine .bb3-link::after, .bb3-forgot-toggle::after, .bb3-reg-hint a::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 40px; margin-top: -20px; }

	/* Creating a sign-in or choosing a new password: each link in the list of
	   what to fix is a 40px row; "Show the passwords" reaches into the space
	   around it, so nothing moves. */
	.bb3-reg-summary li a { display: inline-flex; align-items: center; min-height: 40px; }
	.bb3-reg-check.bb3-reg-show { padding: 0.6rem 0; margin: -0.6rem 0; }

	/* Colour names on plain tiles: a touch smaller and free to wrap, so a long
	   name fits its tile instead of being cut off. On the narrowest phones a
	   tile grows rather than hide part of a name, and never gets shorter than
	   a 40px tap. */
	.bb3-swatch.is-text .bb3-swatch-img { overflow: visible; }
	.bb3-swatch.is-text .bb3-swatch-img span { display: flex; align-items: center; justify-content: center; min-height: 37px; font-size: 0.7rem; line-height: 1.12; padding: 0 0.15rem; overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 7 3 3; }
}

/* "How we use your details": the privacy notice set under Pricing → Settings,
   under the consultation form (4.7: no longer under the sign-in). The link has
   a 40px tall tap area centred on its words at every width, with room around it. */
.bb3-form .bb3-privacy { margin: 0; font-size: 0.8rem; color: var(--bb-mute); }
.bb3-form .bb3-privacy a { position: relative; color: var(--bb-mute); text-decoration: underline; text-underline-offset: 3px; }
.bb3-form .bb3-privacy a::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 40px; margin-top: -20px; }
/* ================================================================
   4.2 Phone layout (under 600px wide). Tablets and computers are
   untouched: everything below either only exists on phones or sits
   inside the phone media query.
   ================================================================ */
.bb3-howto, .bb3-bar-steps, .bb3-bar-need, .bb3-bar-end { display: none; }
.bb3-bar.is-summary { display: none; }
@keyframes bb3-sheet-up { from { transform: translateY(100%); } }
@keyframes bb3-fade-in { from { opacity: 0; } }
@keyframes bb3-toast { from { opacity: 0; transform: translateY(8px); } }

@media screen and (max-width: 599px) {
	/* ---- Heading: one line, with "How it works" opening the intro in place. */
	.bb3 { padding-top: 12px; }
	.bb3-intro { margin-bottom: 0.6rem; }
	.bb3-intro-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
	.bb3 .bb3-intro h2 { min-width: 0; margin: 0; font-size: 1.25rem; line-height: 1.2; }
	.bb3-howto { display: inline-flex; flex: none; align-items: center; gap: 0.3rem; min-height: 40px; margin-right: -0.25rem; padding: 0 0.25rem; border-radius: 8px; color: var(--bb-clay-dark); font-size: 0.82rem; font-weight: 600; }
	.bb3-howto::after { content: ""; width: 0.4rem; height: 0.4rem; margin-top: -0.2rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 0.25s, margin 0.25s; }
	.bb3-howto[aria-expanded="true"]::after { margin-top: 0.2rem; transform: rotate(-135deg); }
	.bb3-howto:focus-visible { outline: 3px solid var(--bb-brass); outline-offset: 2px; }
	.bb3-intro-text { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows 0.3s ease, visibility 0.3s; }
	.bb3-intro-text > div { min-height: 0; overflow: hidden; }
	.bb3-intro.is-open .bb3-intro-text { grid-template-rows: 1fr; visibility: visible; }
	.bb3 .bb3-intro-text p { margin: 0.1rem 0 0.35rem; font-size: 0.9rem; }
	.bb3-client { margin-bottom: 0.75rem; }
	.bb3 .bb3-step-head { margin: 0.45rem 0 0.75rem; }

	/* ---- Every card step, and every list with photos: one row per choice. */
	.bb3 .bb3-cards, .bb3 .bb3-cards.is-2up, .bb3 .bb3-rows { grid-template-columns: minmax(0, 1fr); gap: 8px; }
	.bb3 .bb3-card, .bb3 .bb3-row { border: 1.5px solid var(--bb-stone); border-radius: 14px; box-shadow: none; }
	.bb3 .bb3-card.is-on, .bb3 .bb3-row.is-on { border-color: var(--bb-clay); box-shadow: inset 0 0 0 1px var(--bb-clay); }
	.bb3 .bb3-card.is-asking { border-color: var(--bb-clay); box-shadow: none; }
	.bb3 .bb3-card-main, .bb3 .bb3-row-main, .bb3 .bb3-cards.is-2up > .bb3-card:last-child:nth-child(odd) .bb3-card-main { display: grid; grid-template-columns: 76px minmax(0, 1fr) 24px; gap: 12px; align-items: center; flex: none; width: 100%; min-height: 87px; padding: 7px 10px 7px 7px; }
	.bb3 .bb3-card-img, .bb3 .bb3-row-img, .bb3 .bb3-cards.is-2up > .bb3-card:last-child:nth-child(odd) .bb3-card-img { width: 76px; height: 76px; aspect-ratio: auto; border: 0; border-radius: 10px; }
	.bb3 .bb3-card-img.is-contain, .bb3 .bb3-row-img.is-contain { background: var(--bb-cream); }
	.bb3 .bb3-card-body, .bb3 .bb3-row-body { display: flex; flex-direction: column; min-width: 0; padding: 0; }
	.bb3 .bb3-card-body > b, .bb3 .bb3-row-body > b { font-size: 0.98rem; font-weight: 700; line-height: 1.25; }
	.bb3 .bb3-card-blurb, .bb3 .bb3-row-blurb { order: 1; -webkit-line-clamp: 2; margin-top: 2px; font-size: 0.82rem; line-height: 1.35; color: var(--bb-mute); }
	.bb3 .bb3-card-body > .bb3-price, .bb3 .bb3-row-body > .bb3-price { order: 2; align-self: flex-start; margin: 3px 0 0; padding: 0; border-radius: 0; background: none; font-size: 0.8rem; font-weight: 700; line-height: 1.3; color: var(--bb-clay-dark); }
	.bb3 .bb3-card-body > .bb3-price.is-down, .bb3 .bb3-row-body > .bb3-price.is-down { color: #1f6b35; }
	.bb3 .bb3-card-body > .bb3-price.is-warn, .bb3 .bb3-row-body > .bb3-price.is-warn { color: #b3261e; }
	.bb3 .bb3-card-body > .bb3-badges, .bb3 .bb3-row-body > .bb3-badges { order: 3; gap: 3px; margin-top: 4px; }
	.bb3 .bb3-card-body .bb3-badge, .bb3 .bb3-row-body .bb3-badge { padding: 0.1rem 0.4rem; font-size: 0.68rem; }

	/* The radio on the right: a filled dot when chosen; a tick box where several can be chosen. */
	.bb3 .bb3-card-main > .bb3-check, .bb3 .bb3-row-main > .bb3-check { position: relative; top: auto; right: auto; justify-self: end; width: 24px; height: 24px; border: 2px solid var(--bb-stone); border-radius: 50%; background: #fff; }
	.bb3 .is-on > .bb3-card-main > .bb3-check, .bb3 .is-on > .bb3-row-main > .bb3-check { border-color: var(--bb-clay); background: #fff; }
	.bb3 .is-on > .bb3-card-main > .bb3-check::after, .bb3 .is-on > .bb3-row-main > .bb3-check::after { content: ""; position: absolute; left: 4px; top: 4px; width: 12px; height: 12px; border: 0; border-radius: 50%; background: var(--bb-clay); transform: none; }
	.bb3 [role="checkbox"] > .bb3-check { border-radius: 7px; }
	.bb3 .is-on > [role="checkbox"] > .bb3-check { background: var(--bb-clay); }
	.bb3 .is-on > [role="checkbox"] > .bb3-check::after { left: 7px; top: 3px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2px 2px 0; border-radius: 0; background: none; transform: rotate(45deg); }

	/* The "i" sits on the photo's top-left corner: 26px to see, 40px to tap. */
	.bb3 .bb3-card > .bb3-info-btn, .bb3 .bb3-row > .bb3-info-btn { top: 12px; left: 12px; right: auto; bottom: auto; width: 26px; height: 26px; line-height: 23px; font-size: 0.85rem; background: rgba(255, 255, 255, 0.92); }
	.bb3 .bb3-card > .bb3-info-btn[aria-expanded="true"], .bb3 .bb3-row > .bb3-info-btn[aria-expanded="true"] { background: var(--bb-clay-dark); }

	/* The tilt-and-turn / skylight card: one photo (the skylight's), and
	   "Which one is it?" as a soft band under the row with two full-width choices. */
	.bb3 .bb3-card-pair { display: block; }
	.bb3 .bb3-card-pair .bb3-pair-img { display: none; }
	.bb3 .bb3-card-pair .bb3-pair-img.is-lead { display: block; height: 100%; border-left: 0; }
	.bb3 .bb3-card.is-group .bb3-group-more { margin: 0 7px 7px; padding: 10px 12px 12px; border-radius: 12px; background: #fff4e0; }
	.bb3 .bb3-card .bb3-group-more.is-new { animation: none; }
	.bb3 .bb3-card .bb3-group-more .bb3-group-ask, .bb3 .bb3-card.is-group.is-on .bb3-group-more .bb3-group-ask { display: block; margin: 0 0 8px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; animation: none; color: var(--bb-clay-dark); font-size: 0.95rem; font-weight: 700; }
	.bb3 .bb3-card .bb3-group-more .bb3-group-ask::before { content: none; }
	.bb3 .bb3-group-more .bb3-group-picks { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 0; }
	.bb3 .bb3-group-more .bb3-group-pick { min-height: 44px; border: 1.5px solid var(--bb-stone); border-radius: 999px; background: #fff; }
	.bb3 .bb3-group-more .bb3-group-pick.is-on { border-color: var(--bb-clay); background: var(--bb-clay); color: #fff; }
	.bb3 .bb3-group-more .bb3-group-btn { min-height: 41px; align-items: center; padding: 0.35rem 0.5rem 0.35rem 0.9rem; }
	.bb3 .bb3-group-more .bb3-group-label { font-size: 0.86rem; font-weight: 600; }
	.bb3 .bb3-group-more .bb3-group-pick.is-on .bb3-radio { border-color: #fff; background: #fff; box-shadow: inset 0 0 0 3px var(--bb-clay); }
	.bb3 .bb3-group-more .bb3-group-pick.is-on .bb3-price { background: rgba(255, 255, 255, 0.2); color: #fff; }
	.bb3 .bb3-card .bb3-group-more .bb3-group-pick .bb3-info-btn { width: 26px; height: 26px; margin-right: 8px; line-height: 23px; }
	.bb3 .bb3-card .bb3-group-more .bb3-group-pick .bb3-info-btn::after { left: 50%; right: auto; width: 40px; margin-left: -20px; }
	.bb3 .bb3-group-more .bb3-need.is-inline { display: none; }

	/* ---- Bottom bar: round Back | Step N of M · See all steps | Next. */
	.bb3 .bb3-bar { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 8px; padding-top: 8px; padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
	.bb3 .bb3-bar.is-summary { display: grid; }
	.bb3 .bb3-bar .bb3-bar-back { width: 48px; height: 48px; padding: 0; border-radius: 50%; font-size: 1.1rem; }
	.bb3 .bb3-bar .bb3-bar-plan { display: none; }
	.bb3 .bb3-bar-steps { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; min-height: 48px; padding: 0 0.4rem; border-radius: 12px; font-size: 0.8rem; line-height: 1.25; color: var(--bb-mute); text-align: center; }
	.bb3 .bb3-bar-steps b { color: var(--bb-ink); font-size: 0.86rem; }
	.bb3 .bb3-bar-steps i { font-style: normal; }
	.bb3 .bb3-bar-steps:focus-visible { outline: 3px solid var(--bb-brass); outline-offset: 2px; }
	.bb3 .bb3-bar [data-next] { min-height: 48px; padding: 0 1.25rem; }
	.bb3 .bb3-bar-end { display: block; width: 48px; }
	.bb3 .bb3-bar-need { display: block; position: absolute; left: var(--bb-gutter); right: var(--bb-gutter); bottom: calc(100% + 8px); margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--bb-ink); color: #fff; font-size: 0.85rem; line-height: 1.35; box-shadow: 0 6px 20px rgba(29, 29, 31, 0.2); pointer-events: none; animation: bb3-toast 0.25s ease; transition: opacity 0.3s, transform 0.3s; }
	.bb3 .bb3-bar-need.is-gone { opacity: 0; transform: translateY(8px); }
	/* The message above the choices would push them down; the bar says it instead. */
	.bb3 .bb3-step > .bb3-need { display: none; }

	/* ---- The list of steps: a sheet from the bottom. */
	.bb3 .bb3-sheet.is-steps { max-height: 75vh; max-height: 75dvh; border-radius: 18px 18px 0 0; }
	.bb3 .bb3-sheet.is-steps.is-new { animation: bb3-sheet-up 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
	.bb3 .bb3-backdrop.is-steps.is-new { animation: bb3-fade-in 0.25s ease; }
	.bb3-sheet-grab { display: flex; justify-content: center; flex: none; padding: 8px 0 2px; touch-action: none; cursor: grab; }
	.bb3-sheet-grab span { width: 40px; height: 4px; border-radius: 2px; background: var(--bb-stone); }
	.bb3 .bb3-sheet.is-steps .bb3-sheet-head { padding-top: 0.2rem; touch-action: none; }
	.bb3 .bb3-sheet.is-steps .bb3-sheet-head b { font-family: var(--bb-display); font-weight: 500; font-size: 1.2rem; }
	.bb3-steps { margin: 0; padding: 0; list-style: none; }
	.bb3-srow { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; min-height: 52px; padding: 6px 0; border-bottom: 1px solid var(--bb-stone); font-size: 0.9rem; text-align: left; }
	.bb3-steps li:last-child .bb3-srow { border-bottom: 0; }
	.bb3-srow:disabled { opacity: 0.45; }
	.bb3-srow:focus-visible { outline: 3px solid var(--bb-brass); outline-offset: -3px; border-radius: 8px; }
	.bb3-srow-n { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--bb-linen); font-size: 0.75rem; font-weight: 700; }
	.bb3-srow.is-done .bb3-srow-n { background: var(--bb-ok); color: #fff; }
	.bb3-srow.is-current .bb3-srow-n { background: var(--bb-clay); color: #fff; }
	.bb3-srow-t { min-width: 0; }
	.bb3-srow-t b { display: block; font-weight: 600; line-height: 1.3; }
	.bb3-srow-t small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.8rem; color: var(--bb-mute); }
	.bb3-srow-a { color: var(--bb-clay-dark); font-size: 0.82rem; font-weight: 600; }
}
@media screen and (max-width: 599px) and (prefers-reduced-motion: reduce) {
	.bb3-intro-text, .bb3-howto::after, .bb3 .bb3-bar-need { transition: none; }
	.bb3 .bb3-sheet.is-steps.is-new, .bb3 .bb3-backdrop.is-steps.is-new, .bb3 .bb3-bar-need { animation: none; }
}

/* ---- Tablets and computers (4.2.0): the same 40px tap areas as on phones.
   Where a taller control would move things (the round "i" buttons, "Forgot
   your password?", "Start over", the colour dots), what you see keeps its
   size and only the invisible area you can tap grows. The step list, Left /
   Right and "Your plan" are simply 40px tall. */
.bb3-dot-pick { position: relative; }
.bb3-dot-pick::after { content: ""; position: absolute; top: 0; bottom: 0; left: -3px; right: -3px; }
@media screen and (min-width: 600px) {
	.bb3-info-btn::after, .bb3-drawer-close::after { content: ""; position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; }
	.bb3-card .bb3-group-pick .bb3-info-btn { position: relative; }
	.bb3-forgot-toggle, .bb3-top .bb3-link { position: relative; }
	.bb3-forgot-toggle::after, .bb3-top .bb3-link::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 40px; margin-top: -20px; }
	.bb3-dl { gap: 0.6rem; }
	.bb3-dl.is-compact > div { padding-bottom: 0.65rem; }
	.bb3-edit { display: inline-flex; align-items: center; min-height: 40px; line-height: 1.45; padding: 0 0.4rem; margin: calc((1.45em - 40px) / 2) -0.4rem; }
	.bb3-seg button { min-height: 40px; padding: 0 0.85rem; }
	.bb3-bar-plan, .bb3-crail-opt { min-height: 40px; }
	.bb3-rail-list li button { min-height: 40px; align-content: center; }
}

/* ==== 4.6 L2 (front end) ==== */
/* Written in by tests/46/l2/tools/apply-l2-block.py; the same rules in both builders. */

/* Screen-reader-only live region for "Light level changed …". */
.bb3-live { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Simple · Full, in the top bar (administrators, dealers, "Price it as"). */
.bb3-mode { display: inline-flex; align-items: center; gap: 2px; padding: 2px; margin-right: 0.35rem; border: 1px solid var(--bb-stone); border-radius: 999px; background: #fff; }
.bb3-mode-btn { min-height: 28px; min-width: 44px; padding: 0.2rem 0.7rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600; color: var(--bb-mute); text-align: center; }
.bb3-mode-btn.is-on { background: var(--bb-ink); color: #fff; }
.bb3-mode-btn:focus-visible { outline: 2px solid var(--bb-clay); outline-offset: 2px; }

/* "Not sure" answers: one slim row under the step's options. */
.bb3-unsure { margin: 0.6rem 0 0; }
.bb3-unsure-btn { display: flex; align-items: center; gap: 0.6rem; width: 100%; min-height: 48px; padding: 0.6rem 0.9rem; border: 1px dashed var(--bb-stone); border-radius: var(--bb-r); background: #fff; font-weight: 600; font-size: 0.92rem; line-height: 1.3; }
.bb3-unsure-btn:hover { border-color: var(--bb-mute); }
.bb3-unsure-btn:focus-visible { outline: 2px solid var(--bb-clay); outline-offset: 2px; }
.bb3-unsure-box { flex: 0 0 auto; position: relative; width: 1.25rem; height: 1.25rem; border: 1.5px solid var(--bb-mute); border-radius: 5px; background: #fff; }
.bb3-unsure.is-on .bb3-unsure-btn { border-style: solid; border-color: var(--bb-clay); box-shadow: 0 0 0 1px var(--bb-clay) inset; }
.bb3-unsure.is-on .bb3-unsure-box { background: var(--bb-clay); border-color: var(--bb-clay); }
.bb3-unsure.is-on .bb3-unsure-box::after { content: ""; position: absolute; left: 0.38rem; top: 0.15rem; width: 0.3rem; height: 0.6rem; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* The Details step (order-form options). */
.bb3-details { display: grid; gap: 1rem; }
.bb3-dgroup { margin: 0; padding: 0.4rem 0 0; border: 0; border-top: 1px solid var(--bb-stone); min-width: 0; }
.bb3-dgroup legend { padding: 0 0.5rem 0 0; font-size: 0.78rem; font-weight: 700; color: var(--bb-mute); }
.bb3-dfield { display: grid; gap: 0.3rem; padding: 0.7rem 0; border-bottom: 1px solid var(--bb-linen); }
.bb3-dfield:last-child { border-bottom: 0; }
.bb3-dhead { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; min-height: 24px; }
.bb3-dlabel { font-weight: 600; font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bb3-dfield.is-changed .bb3-dlabel::after { content: " \2022"; color: var(--bb-clay); }
.bb3-ddesc { margin: 0 !important; color: var(--bb-mute); font-size: 0.86rem; max-width: 62ch; }
.bb3-dnote { margin: 0 !important; color: var(--bb-mute); font-size: 0.8rem; }
.bb3-dseg { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.bb3-dseg button { min-height: 40px; padding: 0.45rem 0.85rem; border: 1px solid var(--bb-stone); border-radius: 10px; background: #fff; font-size: 0.88rem; font-weight: 600; }
.bb3-dseg button.is-on { border-color: var(--bb-clay); box-shadow: 0 0 0 1px var(--bb-clay) inset; color: var(--bb-ink); }
.bb3-dseg button:disabled { opacity: 0.55; }
.bb3-dseg button:focus-visible, .bb3-dsel select:focus-visible, .bb3-dnum input:focus-visible { outline: 2px solid var(--bb-clay); outline-offset: 2px; }
.bb3-dsel select { width: 100%; max-width: 26rem; min-height: 44px; padding: 0.45rem 0.7rem; border: 1px solid var(--bb-stone); border-radius: 10px; background: #fff; font: inherit; font-size: 0.92rem; color: var(--bb-ink); }
.bb3-dnum { display: inline-flex; align-items: center; gap: 0.4rem; }
.bb3-dnum input { width: 9rem; min-height: 44px; padding: 0.45rem 0.7rem; border: 1px solid var(--bb-stone); border-radius: 10px; font: inherit; }
.bb3-dnum i { font-style: normal; color: var(--bb-mute); }
.bb3-dreset { font-size: 0.78rem; }
.bb3-dstd { font-weight: 400; color: var(--bb-mute); }

/* Several blinds on one rail: the one-control choice under the chosen row. */
.bb3-sub { grid-column: 1 / -1; display: grid; gap: 0.4rem; margin: 0; padding: 0.75rem 0.9rem 0.9rem; border-top: 1px solid var(--bb-linen); }
.bb3-sub-label { font-weight: 600; font-size: 0.9rem; }
.bb3-sub-seg { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.bb3-sub-seg button { min-height: 40px; padding: 0.45rem 0.85rem; border: 1px solid var(--bb-stone); border-radius: 10px; background: #fff; font-size: 0.88rem; font-weight: 600; }
.bb3-sub-seg button.is-on { border-color: var(--bb-clay); box-shadow: 0 0 0 1px var(--bb-clay) inset; }
.bb3-sub-seg button:focus-visible { outline: 2px solid var(--bb-clay); outline-offset: 2px; }
.bb3-sub-note { margin: 0 !important; font-size: 0.82rem; color: var(--bb-mute); }
/* One control for a 2-/3-blind rail: its own box under the list of rails. */
.bb3-rows + .bb3-sub { margin-top: 0.75rem; border: 1px solid var(--bb-stone); border-radius: var(--bb-r); background: #fff; }
.bb3-sub .bb3-sub-seg { justify-self: start; max-width: 100%; border: 0; border-radius: 0; overflow: visible; }

/* Light, fabric and colour on one step: the part below the levels eases open
   in place (grid rows 0fr -> 1fr and opacity); nothing above it moves. */
.bb3-reveal { display: grid; grid-template-rows: 1fr; opacity: 1; margin-top: 1rem; transition: grid-template-rows 0.32s cubic-bezier(0.2, 0.7, 0.3, 1), opacity 0.32s ease; }
.bb3-reveal.is-closed { grid-template-rows: 0fr; opacity: 0; }
.bb3-reveal-in { min-height: 0; overflow: hidden; padding-top: 1rem; border-top: 1px solid var(--bb-stone); }
.bb3-reveal.is-done .bb3-reveal-in, .bb3-reveal:not(.is-new):not(.is-closed) .bb3-reveal-in { overflow: visible; }
.bb3-reveal.is-swap .bb3-reveal-in { animation: bb3-swap 0.28s ease; }
@keyframes bb3-swap { from { opacity: 0.35; } to { opacity: 1; } }
.bb3-reveal-h { font-size: 1.15rem !important; margin: 0 0 0.5rem !important; }
.bb3-reveal-h:focus { outline: none; }
.bb3-reveal-h:focus-visible { outline: 2px solid var(--bb-clay); outline-offset: 4px; border-radius: 4px; }
.bb3-reveal-note { margin: 0 0 0.75rem !important; padding: 0.55rem 0.8rem; border-radius: 10px; background: #eaf2fb; color: #0b3d6e; font-size: 0.88rem; }
@media (prefers-reduced-motion: reduce) {
	.bb3-reveal { transition: none; }
	.bb3-reveal.is-swap .bb3-reveal-in { animation: none; }
}

/* Maxx-Zip: how see-through, first. */
/* The groups sit side by side only where the builder's own column is wide enough for their names on one line. */
.bb3-zipg { margin: 0 0 1rem; container: bb3zipg / inline-size; }
.bb3-zipg-say { margin: 0 0 0.6rem !important; color: var(--bb-mute); font-size: 0.9rem; }
.bb3-zipg-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
@container bb3zipg (min-width: 400px) { .bb3-zipg-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bb3-zipg-btn { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 0.55rem; align-items: center; min-height: 64px; padding: 0.65rem 0.8rem; border: 1px solid var(--bb-stone); border-radius: var(--bb-r); background: #fff; line-height: 1.25; }
.bb3-zipg-btn b { font-size: 0.95rem; }
.bb3-zipg-pct, .bb3-zipg-n { grid-column: 2; font-size: 0.82rem; color: var(--bb-mute); }
.bb3-zipg-btn .bb3-radio { grid-row: 1 / span 3; width: 1.2rem; height: 1.2rem; border-radius: 50%; border: 1.5px solid var(--bb-mute); background: #fff; position: relative; }
.bb3-zipg-btn.is-on { border-color: var(--bb-clay); box-shadow: 0 0 0 1px var(--bb-clay) inset; }
.bb3-zipg-btn.is-on .bb3-radio { border-color: var(--bb-clay); }
.bb3-zipg-btn.is-on .bb3-radio::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--bb-clay); }
.bb3-zipg-btn:focus-visible { outline: 2px solid var(--bb-clay); outline-offset: 2px; }
@container bb3zipg (min-width: 880px) { .bb3-zipg-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Colours: the sample photos (fixed boxes, so nothing moves while they load). */
.bb3-cpick { margin-top: 1.1rem; }
.bb3-cpick-h { font-size: 1.05rem !important; margin: 0 0 0.2rem !important; }
.bb3-cgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 0.75rem; margin-top: 0.7rem; }
.bb3-ctile { position: relative; display: grid; gap: 0.3rem; align-content: start; padding: 0.35rem; border: 1px solid transparent; border-radius: 12px; background: none; text-align: left; }
.bb3-ctile-img { display: block; width: 100%; aspect-ratio: 1 / 1; border-radius: 9px; overflow: hidden; background: var(--bb-linen); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08) inset; }
.bb3-ctile-img.is-tall { aspect-ratio: 2 / 3; }
.bb3-ctile-img.is-slat { aspect-ratio: 3 / 2; }
.bb3-ctile-img img { width: 100%; height: 100%; object-fit: cover; }
.bb3-ctile-name { font-size: 0.86rem; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.bb3-ctile-note { font-size: 0.76rem; color: var(--bb-warn); }
.bb3-ctile .bb3-check { top: 0.7rem; right: 0.7rem; }
.bb3-ctile:hover { border-color: var(--bb-stone); }
.bb3-ctile.is-on { border-color: var(--bb-clay); box-shadow: 0 0 0 1px var(--bb-clay) inset; }
.bb3-ctile.is-on .bb3-check { background: var(--bb-clay); border-color: var(--bb-clay); }
.bb3-ctile.is-on .bb3-check::after { content: ""; position: absolute; left: 0.42rem; top: 0.2rem; width: 0.3rem; height: 0.6rem; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.bb3-ctile:focus-visible { outline: 2px solid var(--bb-clay); outline-offset: 2px; }
/* ==== end 4.6 L2 ==== */

/* ==== 4.6 L2-C restyle ==== */
/* Blind Builder 4.6: the new site design (Brand 2026 on d12's Clean White), the same in both
   builders. Colours: Ink #1D1D1F, Sundial blue #0066CC (selected, links, focus), Sun #F5A300
   (the light meter only), paper #F5F5F7, panels #FAFAFC, lines #E5E5EA. One font: the theme's
   Geist (var(--font)), system fonts behind it; nothing is downloaded. Labels 13-14px, 600, sentence
   case. Class names, ids and data attributes are those of 4.5.0.
   Written in by tests/46/l2/tools/restyle-css.py. */
.bb3 { --bb-sun: #f5a300; --bb-paper: #fafafc; --bb-field: #86868b; --bb-accent-soft: #eef4fb; font-size: 16px; line-height: 1.5; }
.bb3 h3, .bb3 h4, .bb3 h5 { font-weight: 600; letter-spacing: -0.015em; }
.bb3 h3 { font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.625rem); line-height: 1.2; }
.bb3 h4 { font-size: 1.15rem; line-height: 1.3; }
.bb3 h5 { font-size: 1rem; }
.bb3-intro h2 { font-weight: 600; letter-spacing: -0.02em; font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem); line-height: 1.1; }
.bb3-intro p { color: #424245; }
.bb3 .bb3-help { color: #424245; }

/* Labels: sentence case, 13px, 600, muted (no spaced capitals, no second font). */
.bb3 .bb3-kicker, .bb3-spec h4 span, .bb3-dl dt, .bb3-quote-lines th, .bb3-summary-title span, .bb3-est-sum small, .bb3-print-kicker {
	text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 600; font-family: var(--bb-body);
}
.bb3 .bb3-kicker, .bb3-spec h4 span, .bb3-est-sum small { color: var(--bb-mute); }
.bb3 .bb3-kicker { font-size: 14px; color: var(--bb-ink); }
.bb3-spec h4 { font-weight: 600; }

/* Top: the progress line in blue, the step label, the links. */
.bb3-top { background: var(--bb-cream); }
.bb3-progress { height: 3px; background: var(--bb-stone); }
.bb3-top-label { font-size: 13px; }
.bb3-link { color: #0066cc; border-radius: 8px; }
.bb3-link:hover { background: var(--bb-accent-soft); color: #0055aa; }

/* Steps list (left): a number in a circle, blue for the step you are on, a soft blue once answered. */
.bb3-rail-list { gap: 4px; }
.bb3-rail-list li button { border-left: 0; border-radius: 12px; padding: 0.5rem 0.6rem; grid-template-columns: 24px 1fr; column-gap: 0.6rem; align-items: center; }
.bb3-rail-n { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px var(--bb-stone) inset; color: var(--bb-mute); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.bb3-rail-t { font-size: 15px; font-weight: 600; line-height: 1.3; }
.bb3-rail-a { font-size: 13px; line-height: 1.35; }
.bb3-rail-list li.is-done .bb3-rail-n { background: var(--bb-accent-soft); box-shadow: none; color: #0066cc; }
.bb3-rail-list li.is-current button { background: #fff; box-shadow: 0 0 0 1px var(--bb-stone) inset; }
.bb3-rail-list li.is-current .bb3-rail-n { background: #0066cc; color: #fff; box-shadow: none; }
.bb3-rail-list li.is-current .bb3-rail-t { color: var(--bb-ink); }
.bb3-rail-list li button:hover:not(:disabled) { background: #fff; }
.bb3-rail-list li button:disabled { opacity: 1; color: #6e6e73; }
.bb3-rail-list li button:disabled .bb3-rail-t { color: #6e6e73; font-weight: 500; }

/* Options: white cards with a 1px line and 16px corners; chosen = blue line with a 1px ring inside. */
.bb3-row, .bb3-card, .bb3-lrow, .bb3-swatch-main, .bb3-chip, .bb3-cmode-btn, .bb3-cgroup, .bb3-crail, .bb3-group-pick, .bb3-send, .bb3-fits, .bb3-select-panel, .bb3-fpick-btn, .bb3-size-in {
	border-width: 1px; border-color: var(--bb-stone);
}
.bb3-row.is-on, .bb3-card.is-on, .bb3-lrow.is-on, .bb3-swatch.is-on .bb3-swatch-main, .bb3-cmode-btn.is-on, .bb3-chip.is-on, .bb3-crail.is-on, .bb3-group-pick.is-on, .bb3-card.is-asking {
	border-color: #0066cc; box-shadow: 0 0 0 1px #0066cc inset; background: #fff;
}
.bb3-card.is-open, .bb3-row.is-open, .bb3-lrow.is-open, .bb3-swatch.is-open .bb3-swatch-main { border-color: var(--bb-field); }
.bb3-row-body b, .bb3-card-body b, .bb3-lrow-body b { font-size: 1rem; }
.bb3-row-blurb, .bb3-card-blurb, .bb3-lrow-blurb { color: #424245; font-size: 14px; }
.bb3-row-img, .bb3-card-img, .bb3-swatch-img { background: var(--bb-linen); }
.bb3-check { border: 1.5px solid var(--bb-field); }
.bb3-radio { border-color: var(--bb-field); }
.bb3-chip::after { border-color: var(--bb-field); }
.bb3-info-btn { border: 1px solid var(--bb-field); font-family: var(--bb-body); font-style: normal; color: var(--bb-ink); width: 1.75rem; height: 1.75rem; }
.bb3-info-btn[aria-expanded="true"] { background: #0066cc; border-color: #0066cc; }
.bb3-badge { font-size: 12px; font-weight: 500; }
.bb3-badge.is-warn { background: #fff4e0; }
.bb3-spec-tags em { font-size: 12px; }
.bb3-spec-tags em.is-level { background: var(--bb-accent-soft); color: #0b3d6e; }
.bb3-spec-tags em.is-cert { background: #e8f3ec; color: #1d6b34; }

/* The light meter uses the Sun. */
.bb3-dot { background: var(--bb-stone); }
.bb3-dot.is-full { background: var(--bb-sun); }
.bb3-lrow-note { border-left-color: var(--bb-sun); }
.bb3-lrow-swatch { border-color: var(--bb-stone); }

/* Light levels as cards in a row once the step has room (the samples-new pattern); narrower
   (tablets beside the plan, phones) they stay rows. The wrapper is the size that counts. */
.bb3-lightwrap { container: bb3light / inline-size; }
@container bb3light (min-width: 560px) {
	.bb3-light:is([data-n="2"], [data-n="3"], [data-n="4"]) { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 0.75rem; align-items: stretch; }
	.bb3-light:is([data-n="2"], [data-n="3"], [data-n="4"]) .bb3-lrow { display: flex; flex-direction: column; }
	.bb3-light:is([data-n="2"], [data-n="3"], [data-n="4"]) .bb3-lrow-main { flex: 1; grid-template-columns: 40px minmax(0, 1fr); align-items: center; align-content: start; row-gap: 0.45rem; column-gap: 0.7rem; padding: 1rem 2.4rem 1rem 1rem; }
	.bb3-light:is([data-n="2"], [data-n="3"], [data-n="4"]) .bb3-lrow-swatch { grid-row: 1; width: 40px; height: 40px; border-radius: 8px; }
	.bb3-light:is([data-n="2"], [data-n="3"], [data-n="4"]) .bb3-lrow-body { display: contents; }
	.bb3-light:is([data-n="2"], [data-n="3"], [data-n="4"]) .bb3-lrow-body > * { grid-column: 1 / -1; }
	.bb3-light:is([data-n="2"], [data-n="3"], [data-n="4"]) .bb3-lrow-body > b { grid-column: 2; grid-row: 1; font-size: 1.0625rem; line-height: 1.25; }
	.bb3-light:is([data-n="2"], [data-n="3"], [data-n="4"]) .bb3-lrow-blurb { margin-top: 0; }
	.bb3-light:is([data-n="2"], [data-n="3"], [data-n="4"]) .bb3-facts { grid-column: 1 / -1; flex-direction: column; gap: 0.25rem; margin-top: auto; padding: 0.6rem 0 0; border-left: 0; border-top: 1px solid var(--bb-linen); align-self: end; }
	.bb3-light:is([data-n="2"], [data-n="3"], [data-n="4"]) .bb3-fact { justify-content: space-between; }
	.bb3-light:is([data-n="2"], [data-n="3"], [data-n="4"]) .bb3-lrow .bb3-info-btn { top: auto; bottom: 0.8rem; right: 0.7rem; }
	.bb3-light:is([data-n="2"], [data-n="3"], [data-n="4"]) .bb3-lrow:has(.bb3-info-btn) .bb3-facts { padding-right: 2.3rem; }
	.bb3-light:is([data-n="2"], [data-n="3"], [data-n="4"]) .bb3-check { top: 0.9rem; right: 0.7rem; }
}

/* Fields: 12px corners, a darker line, 48px tall. */
.bb3-fpick-btn { border-color: var(--bb-field); border-radius: 12px; min-height: 48px; }
.bb3-fpick-btn:hover { border-color: var(--bb-ink); }
.bb3-fpick-caret { border-color: var(--bb-ink); }
.bb3-fpick-pop { border: 1px solid var(--bb-stone); box-shadow: 0 18px 40px -22px rgba(29, 29, 31, 0.45), 0 1px 2px rgba(29, 29, 31, 0.06); }
.bb3-fpick-opt:hover, .bb3-fpick-opt:focus { background: var(--bb-paper); }
.bb3-fpick-opt.is-on { background: var(--bb-accent-soft); box-shadow: inset 3px 0 0 #0066cc; }
.bb3-fpick-label { font-size: 14px; }
.bb3-size-in { border-color: var(--bb-field); border-radius: 12px; }
.bb3-size label, .bb3-form label { font-size: 14px; }
.bb3-form input, .bb3-form textarea { border: 1px solid var(--bb-field); border-radius: 12px; }
.bb3-dsel select, .bb3-dnum input { border-color: var(--bb-field); border-radius: 12px; min-height: 48px; }

/* The fabric's specifications and the "i" drawer: a quiet panel. */
.bb3-spec { border: 1px solid var(--bb-stone); background: var(--bb-paper); }
.bb3-drawer-inner { border: 1px solid var(--bb-stone); }
.bb3-drawer-inner::before { border-left: 1px solid var(--bb-stone); border-top: 1px solid var(--bb-stone); }
.bb3-spec dd .bb3-open-scale i.is-on { background: #0066cc; }

/* Buttons: 12px corners, 48px tall, Sundial blue for the main one. */
.bb3-btn { border-radius: 12px; min-height: 48px; padding: 0 1.25rem; font-size: 1rem; border-width: 1px; letter-spacing: -0.005em; }
/* The forgot-password box and its button side by side: the same 48px height as the new buttons (was 46px). */
@container (min-width: 700px) { .bb3-forgot-form input, .bb3-forgot-form .bb3-btn { height: 48px; } }
.bb3-btn-primary { background: #0066cc; color: #fff; }
.bb3-btn-primary:hover:not(:disabled) { background: #0055aa; }
.bb3-btn-ghost { background: #fff; border-color: var(--bb-stone); color: var(--bb-ink); }
.bb3-btn-ghost:hover:not(:disabled) { border-color: var(--bb-field); }
.bb3-btn:disabled { opacity: 1; color: #6e6e73; background: #fff; }

/* Focus: a 2px Sundial-blue ring, never hidden. */
.bb3 :focus-visible { outline: 2px solid #0066cc; outline-offset: 2px; }
.bb3-opt-btn:focus-visible, .bb3-row-main:focus-visible, .bb3-card-main:focus-visible, .bb3-swatch-main:focus-visible, .bb3-chip:focus-visible, .bb3-btn:focus-visible, .bb3-lrow-main:focus-visible, .bb3-group-btn:focus-visible, .bb3-fpick-btn:focus-visible, .bb3-dot-pick:focus-visible, .bb3-cmode-btn:focus-visible, .bb3-crail-btn:focus-visible, .bb3-crail-opt:focus-visible, .bb3-drawer-close:focus-visible, .bb3-srow:focus-visible, .bb3-howto:focus-visible, .bb3-bar-steps:focus-visible {
	outline: 2px solid #0066cc; outline-offset: 2px;
}

/* Focus is never hidden behind the sticky bars (WCAG 2.4.11): the page keeps room for the top bar
   (and the theme's own sticky header above it) and for Back / Next, or the phone bar, when the
   browser scrolls a focused control into view. */
html:has(.bb3) { scroll-padding-top: min(150px, 28vh); scroll-padding-bottom: min(112px, 24vh); }

/* Notices: 10-12px corners, calm colours. */
.bb3-notice { border-radius: 12px; background: #fff4e0; color: #8a5a00; }
.bb3-notice.is-ok { background: #e8f3ec; color: #1d6b34; }
.bb3-need { border: 1px solid #f2b8b5; background: #fdf1f0; color: #b3261e; border-radius: 12px; }
.bb3-notes { background: #fff4e0; border-radius: 16px; }
.bb3-notes.is-measure { background: var(--bb-paper); box-shadow: 0 0 0 1px var(--bb-stone) inset; }
.bb3-group-ask { border: 1px solid #0066cc; background: var(--bb-accent-soft); color: #0b3d6e; }

/* The plan beside the steps: a quiet panel, like "Your pick". */
.bb3-plan-inner { background: var(--bb-paper); border: 1px solid var(--bb-stone); border-radius: 20px; }
.bb3-dl > div { border-bottom-color: var(--bb-stone); }
.bb3-dl dd { font-weight: 500; }
.bb3-edit { color: #0066cc; opacity: 1; }
.bb3-seg { border-width: 1px; }
.bb3-seg button.is-on { background: #0066cc; }
.bb3-summary-title { background: linear-gradient(to top, rgba(29, 29, 31, 0.8), rgba(29, 29, 31, 0)); }

/* Phones: the bottom bar and the sheets. */
.bb3-bar { background: rgba(255, 255, 255, 0.96); box-shadow: 0 -1px 0 var(--bb-stone); }
.bb3-bar-plan { color: #0066cc; }
.bb3-bar-plan b { background: #0066cc; }
.bb3-sheet { background: #fff; }
.bb3-sheet-body > .bb3-status { background: #fff; }
.bb3-backdrop { background: rgba(29, 29, 31, 0.45); }

/* Details, not sure, the colour tiles: the same blue for what is chosen. */
.bb3-unsure-btn { border-color: var(--bb-field); }
.bb3-mode { border-color: var(--bb-stone); }
.bb3-mode-btn.is-on { background: var(--bb-ink); }

/* Reduced motion: nothing slides. */
@media (prefers-reduced-motion: reduce) {
	.bb3 *, .bb3 *::before, .bb3 *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
/* ==== end 4.6 L2-C restyle ==== */

/* ==== 4.7 L1 (steps, measuring, filtering) ==== */
/* PLAN-4.7 section 4.1. The same block is in both style sheets (tests/47/l1/tools/l1-block.css). */

/* One measurement step (notes 8, 36, 37, 38): whole inches in a box, the fraction from a list. */
.bb3-measure { display: grid; gap: 0.7rem; }
.bb3-mfields { display: grid; grid-template-columns: repeat(2, max-content); gap: 1rem; align-items: start; }
.bb3-mfields.is-3 { grid-template-columns: repeat(3, max-content); }
.bb3-mfield { display: grid; grid-template-rows: auto auto; row-gap: 0.35rem; min-width: 0; }
.bb3-mlabel { font-weight: 600; font-size: 0.85rem; line-height: 1.3; white-space: nowrap; color: var(--bb-ink); }
.bb3-mrow { display: flex; align-items: center; gap: 0.4rem; }
.bb3 .bb3-mwhole, .bb3-mwhole { box-sizing: border-box; flex: none; width: 5rem; height: 3rem; margin: 0; padding: 0 0.6rem; border: 1.5px solid var(--bb-stone); border-radius: 10px; background: #fff; color: var(--bb-ink); font: inherit; font-size: 1.15rem; line-height: 1; }
.bb3-mwhole::placeholder { color: #6e6e73; font-size: 0.95rem; opacity: 1; }
.bb3 .bb3-mfrac, .bb3-mfrac { box-sizing: border-box; flex: none; width: 5rem; height: 3rem; margin: 0; padding: 0 1.75rem 0 0.7rem; border: 1.5px solid var(--bb-stone); border-radius: 10px; background: #fff; color: var(--bb-ink); font: inherit; font-size: 1.05rem; line-height: 1; -webkit-appearance: none; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--bb-clay) 50%), linear-gradient(135deg, var(--bb-clay) 50%, transparent 50%); background-position: right 0.95rem center, right 0.65rem center; background-size: 0.32rem 0.32rem, 0.32rem 0.32rem; background-repeat: no-repeat; cursor: pointer; }
.bb3-mwhole:hover, .bb3-mfrac:hover { border-color: #c7c7cc; }
.bb3-mwhole:focus, .bb3-mfrac:focus { outline: 2px solid var(--bb-clay); outline-offset: 1px; border-color: var(--bb-clay); }
.bb3-munit { color: var(--bb-mute); font-size: 0.85rem; }
.bb3 .bb3-mhelp, .bb3-mhelp { margin: 0; max-width: 40rem; font-size: 0.82rem; line-height: 1.45; color: var(--bb-mute); }
.bb3-measure .bb3-size-big { margin: 0; color: var(--bb-ink); }
.bb3-measure .bb3-size-big.is-off { visibility: hidden; }
/* The big-blind note and the "can't read that" line share one space (the taller sets it). */
.bb3-measure .bb3-size-big { display: grid; }
.bb3-measure .bb3-size-big > span { grid-area: 1 / 1; }
.bb3-measure .bb3-size-big > .is-off { visibility: hidden; }
.bb3-measure .bb3-mbad { color: var(--bb-bad); font-weight: 600; }
.bb3-mwhole.is-bad, .bb3-mwhole.is-bad:hover { border-color: var(--bb-bad); box-shadow: 0 0 0 1px var(--bb-bad); }
@media (max-width: 599px) {
	.bb3-mfields, .bb3-mfields.is-3 { grid-template-columns: minmax(0, 1fr); gap: 0.8rem; }
	.bb3-mfield { grid-template-columns: 6.25rem auto; grid-template-rows: auto; align-items: center; column-gap: 0.5rem; }
	.bb3-mlabel { white-space: normal; }
}

/* What matters most, as cards with small drawings (note 9). */
.bb3-prio { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); }
.bb3 .bb3-prio-card, .bb3-prio-card { position: relative; box-sizing: border-box; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 0.75rem; align-items: center; width: 100%; min-height: 4.4rem; margin: 0; padding: 0.7rem 2.6rem 0.7rem 0.7rem; border: 1.5px solid var(--bb-stone); border-radius: 12px; background: #fff; color: var(--bb-ink); font: inherit; text-align: left; cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease; }
.bb3-prio-card:hover { border-color: #c7c7cc; }
.bb3-prio-ico { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 10px; background: #eef5fc; color: var(--bb-clay); transition: background-color 0.15s ease, color 0.15s ease; }
.bb3-prio-t { display: grid; gap: 0.1rem; min-width: 0; }
.bb3-prio-t b { font-weight: 600; font-size: 0.93rem; line-height: 1.3; }
.bb3-prio-t span { font-size: 0.8rem; line-height: 1.35; color: var(--bb-mute); }
.bb3-prio-tick { position: absolute; top: 50%; right: 0.8rem; width: 1.15rem; height: 1.15rem; margin-top: -0.575rem; box-sizing: border-box; border: 1.5px solid #8e8e93; border-radius: 5px; background: #fff; }
.bb3-prio-card.is-on { border-color: var(--bb-clay); background: #f5f9fe; }
.bb3-prio-card.is-on .bb3-prio-ico { background: var(--bb-clay); color: #fff; }
.bb3-prio-card.is-on .bb3-prio-tick { border-color: var(--bb-clay); background: var(--bb-clay); }
.bb3-prio-card.is-on .bb3-prio-tick::after { content: ""; position: absolute; left: 0.34rem; top: 0.14rem; width: 0.28rem; height: 0.55rem; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.bb3-prio-card:focus-visible { outline: 3px solid var(--bb-brass); outline-offset: 2px; }
@media (max-width: 599px) {
	.bb3-prio { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
	.bb3 .bb3-prio-card, .bb3-prio-card { min-height: 3.9rem; }
}
@media (prefers-reduced-motion: reduce) { .bb3-prio-card, .bb3-prio-ico { transition: none; } }

/* A fitting made for the other placement (note 13). */
.bb3-alt-head { grid-column: 1 / -1; margin: 0.6rem 0 0; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--bb-mute); }
.bb3-row.is-alt { border-style: dashed; border-color: #b7b7bd; }
.bb3-alt-tag { display: inline-block; margin: 0 0 0.25rem; padding: 0.1rem 0.55rem; border-radius: 999px; background: #fdf1d9; color: #6b4500; font-size: 0.72rem; font-weight: 600; line-height: 1.5; }
.bb3-alt-why { display: block; margin: 0.2rem 0 0.25rem; font-size: 0.84rem; line-height: 1.4; color: var(--bb-ink); }
.bb3 .bb3-alt-learn, .bb3-alt-learn { justify-self: start; min-height: 2.75rem; margin: 0 0 0.35rem 0.55rem; padding: 0.35rem 0.5rem; border: 0; border-radius: 8px; background: none; color: var(--bb-clay-dark); font: inherit; font-size: 0.86rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.bb3-alt-learn[aria-expanded="true"] { background: var(--bb-linen); }
.bb3-alt-learn:focus-visible { outline: 3px solid var(--bb-brass); outline-offset: 2px; }
.bb3-row > .bb3-altcheck { margin: 0 0.55rem 0.55rem; }
.bb3-altcheck { margin-top: 0.8rem; padding: 0.9rem 1rem 1rem; border: 1.5px solid var(--bb-clay); border-radius: var(--bb-r); background: #f5f9fe; }
.bb3-altcheck:focus { outline: 3px solid var(--bb-brass); outline-offset: 2px; }
.bb3-altcheck > b { font-weight: 600; font-size: 0.98rem; }
.bb3-altcheck p { margin: 0.35rem 0 0; font-size: 0.9rem; line-height: 1.45; }
.bb3-altcheck-now { color: var(--bb-mute); }
.bb3-altcheck-act { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.8rem; }

/* The room's preferences (note 32). */
.bb3-roomchip { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; margin: 0 0 0.8rem; padding: 0.45rem 0.8rem; border-radius: 999px; background: #eef5fc; color: var(--bb-ink); font-size: 0.86rem; line-height: 1.4; width: fit-content; max-width: 100%; box-sizing: border-box; }
.bb3-roomchip b { font-weight: 600; }

/* Fabric pictures in the drop-down (note 11). */
.bb3-fthumb { flex: none; display: inline-block; width: 36px; height: 36px; border-radius: 6px; overflow: hidden; background: var(--bb-linen); box-shadow: inset 0 0 0 1px rgba(29, 29, 31, 0.08); vertical-align: middle; }
.bb3-fthumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bb3-fthumb.is-none { background: repeating-linear-gradient(135deg, #f2f2f5 0 6px, #e9e9ee 6px 12px); }
.bb3-fthumb.is-btn { width: 30px; height: 30px; margin-right: 0.6rem; }
.bb3-fpick-opt.has-thumb { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 0.65rem; align-items: center; }
.bb3-fpick-opt.has-thumb > .bb3-fthumb { grid-row: 1 / span 3; align-self: start; }
.bb3-fpick-opt.has-thumb > :not(.bb3-fthumb) { grid-column: 2; }
.bb3-fpick-btn.has-thumb { gap: 0; }

/* Colours straight after the light choice (note 33). */
.bb3-direct { display: grid; gap: 0.6rem; }
.bb3-direct > .bb3-help { margin: 0; }
.bb3-dgroup { display: grid; gap: 0.45rem; padding-top: 0.7rem; border-top: 1px solid var(--bb-stone); }
.bb3-dgroup:first-of-type { border-top: 0; padding-top: 0.2rem; }
.bb3-dgroup-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.5rem; margin: 0; font-size: 0.92rem; }
.bb3-dgroup-h b { font-weight: 600; }
.bb3 .bb3-dfab, .bb3-dfab { display: flex; align-items: center; gap: 0.55rem; min-height: 2.75rem; padding: 0.45rem 0.75rem; border: 1.5px solid var(--bb-stone); border-radius: 10px; background: #fff; color: var(--bb-ink); font: inherit; font-size: 0.88rem; text-align: left; cursor: pointer; }
.bb3-dfab.is-on { border-color: var(--bb-clay); background: #f5f9fe; }
.bb3-dfab:focus-visible { outline: 3px solid var(--bb-brass); outline-offset: 2px; }
.bb3-direct-more { justify-self: start; }
.bb3-direct .bb3-cgrid { grid-template-columns: repeat(auto-fill, minmax(5.25rem, 1fr)); gap: 0.35rem; margin-top: 0; }
.bb3-direct .bb3-ctile { padding: 0.25rem; }
.bb3-direct .bb3-ctile-name { font-size: 0.8rem; }
.bb3-direct .bb3-ctile .bb3-check { top: 0.45rem; right: 0.45rem; }
@media (max-width: 599px) { .bb3-direct .bb3-cgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* "Worth knowing" in the logo's lighter sun yellow (note 15): ink on a sun tint, sun edge. */
.bb3 .bb3-notes.is-worth, .bb3-notes.is-worth { background: #fef3dc; border-left: 4px solid #f5a300; color: #1d1d1f; }
.bb3-notes.is-worth h5 { color: #1d1d1f; }

/* WCAG 2.2 AA for the 4.6 parts on these steps: the "skipped" note reads (contrast), the "i" on a colour swatch is 24px. */
.bb3-rail-a.is-skipped { opacity: 1; color: var(--bb-mute); }
.bb3-swatch .bb3-info-btn { width: 1.5rem; height: 1.5rem; line-height: 1.3rem; }

/* A place above the step for other parts of the plugin (C-HOOK-JS top). */
.bb3-xtop:empty { display: none; }
/* ==== end 4.7 L1 ==== */