/* Sugo - Moduspace builder showroom (#754, option 2 "Dark showroom"). Every rule sits under .sugo-msb--showroom;
 * the only outside targets are the body.sugo-msb-showroom list in tests/test_showroom_css.py. No :root, web fonts
 * or !important. Contrast: ops-output/754/contrast.py (red text #FF3B1F; #E0280F only as a fill under white). */

/* ---------------------------------------------------------------- outside the root (allowed list) */
body.sugo-msb-showroom #main { background: #0b0c0f; overflow-x: clip; }
body.sugo-msb-showroom #main .page-title,
body.sugo-msb-showroom #main .breadcrumbs,
body.sugo-msb-showroom #main .woocommerce-breadcrumb { color: rgba(255,255,255,.72); }
body.sugo-msb-showroom #main .breadcrumbs a,
body.sugo-msb-showroom #main .woocommerce-breadcrumb a { color: #f3f3f4; }
body.sugo-msb-showroom.sugo-msb-bbar-on #top-link { bottom: 84px; }

/* ---------------------------------------------------------------- root and tokens */
.sugo-msb--showroom {
	--msb-bg: #0b0c0f; --msb-card: #15171c; --msb-card2: #1c1f26; --msb-line: rgba(255,255,255,.12);
	--msb-ctl: rgba(255,255,255,.46); --msb-txt: #f3f3f4; --msb-mute: rgba(255,255,255,.7);
	--msb-red: var(--sugo-red, #FF3B1F); --msb-red-ink: var(--sugo-red, #FF3B1F); --msb-red-fill: var(--sugo-red-text, #E0280F);
	--msb-amber: #ffb36b; --msb-delta: #ff8a73; --msb-top: 0px; --msb-bottom: 0px; --msb-bar-h: 72px;
	position: relative; box-sizing: border-box; margin-inline: calc(50% - 50vw); width: 100vw; max-width: 100vw;
	padding: 0 0 48px; background: var(--msb-bg); color: var(--msb-txt); font-size: 15px; line-height: 1.5; overflow-anchor: none;
}
.sugo-msb--showroom *, .sugo-msb--showroom *::before, .sugo-msb--showroom *::after { box-sizing: border-box; }
.sugo-msb--showroom a { color: inherit; }
.sugo-msb--showroom :focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.sugo-msb--showroom h1, .sugo-msb--showroom h2, .sugo-msb--showroom h3, .sugo-msb--showroom caption { color: var(--msb-txt); }
.sugo-msb--showroom img { max-width: 100%; }
.sugo-msb--showroom .sugo-msb-vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sugo-msb--showroom .sugo-msb-noimg { display: block; width: 100%; height: 100%; min-height: 40px; border-radius: 8px; background: var(--msb-card2); }
.sugo-msb--showroom button { font-family: inherit; text-transform: none; letter-spacing: 0; margin: 0; }

/* ---------------------------------------------------------------- banner (#718 hero, restyled) */
.sugo-msb--showroom .sugo-msb-hero {
	position: relative; display: grid; grid-template-columns: 1fr 1.05fr; grid-template-rows: 1fr auto auto auto auto 1fr auto;
	column-gap: 24px; max-width: 1240px; min-height: 520px; margin: 0 auto; padding: 36px 24px 0; background: none; color: var(--msb-txt); overflow: visible;
}
.sugo-msb--showroom .sugo-msb-hero::before { content: ""; position: absolute; left: 24px; right: 24px; top: 16px; height: 4px; border-radius: 2px; background: var(--msb-red); z-index: 1; }
.sugo-msb--showroom .sugo-msb-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none;
	background: radial-gradient(42% 60% at 74% 48%, rgba(160,190,255,.20), transparent 70%), radial-gradient(30% 40% at 6% 18%, rgba(255,59,31,.22), transparent 70%); }
.sugo-msb--showroom .sugo-msb-hero__bg { position: absolute; inset: 0; overflow: hidden; }
.sugo-msb--showroom .sugo-msb-hero__bgimg { width: 100%; height: 100%; object-fit: cover; opacity: .35; }
.sugo-msb--showroom .sugo-msb-hero__copy { display: contents; }
.sugo-msb--showroom .sugo-msb-hero__copy > * { position: relative; z-index: 2; grid-column: 1; }
.sugo-msb--showroom .sugo-msb-hero__eyebrow { grid-row: 2; margin: 0 0 14px; color: var(--msb-mute); font-size: 15px; font-weight: 700; }
.sugo-msb--showroom .sugo-msb-hero__h { grid-row: 3; margin: 0 0 16px; font-weight: 900; font-size: clamp(40px, 5.4vw, 72px); line-height: .98; letter-spacing: -.015em; }
.sugo-msb--showroom .sugo-msb-hero__sub { grid-row: 4; max-width: 30em; margin: 0 0 26px; color: var(--msb-mute); font-size: 17px; }
.sugo-msb--showroom .sugo-msb-hero__ctas { grid-row: 5; display: flex; gap: 12px; flex-wrap: wrap; }
.sugo-msb--showroom .sugo-msb-hero__cta { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 26px; border-radius: 999px; font-weight: 800; font-size: 15px; text-decoration: none; white-space: nowrap; color: #fff; }
.sugo-msb--showroom .sugo-msb-hero__cta.is-primary { background: var(--msb-red-fill); box-shadow: 0 10px 28px rgba(224,40,15,.35); }
.sugo-msb--showroom .sugo-msb-hero__cta.is-ghost { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.6); }
.sugo-msb--showroom .sugo-msb-hero__badges { grid-row: 7; grid-column: 1 / -1; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin: 8px 0 0; padding: 16px 0; list-style: none; border-top: 1px solid var(--msb-line); border-bottom: 1px solid var(--msb-line); font-size: 14px; font-weight: 700; }
.sugo-msb--showroom .sugo-msb-hero__badges li { display: flex; align-items: center; gap: 8px; margin: 0; }
.sugo-msb--showroom .sugo-msb-hero__tick { flex: none; width: 18px; height: 18px; padding: 2px; border-radius: 50%; background: var(--msb-red-fill); color: #fff; }
.sugo-msb--showroom .sugo-msb-hero__stage { position: relative; z-index: 1; grid-column: 2; grid-row: 1 / 7; height: 480px; }
.sugo-msb--showroom .sugo-msb-hero__shot { width: 100%; height: 100%; margin: 0; }
.sugo-msb--showroom .sugo-msb-hero__img { width: 100%; height: 100%; object-fit: cover;
	-webkit-mask-image: radial-gradient(ellipse 52% 58% at 50% 56%, #000 58%, transparent 100%); mask-image: radial-gradient(ellipse 52% 58% at 50% 56%, #000 58%, transparent 100%); }
.sugo-msb--showroom .sugo-msb-hero:not(.has-shots) { grid-template-columns: 1fr; min-height: 0; padding-bottom: 0; }
.sugo-msb--showroom .sugo-msb-hero:not(.has-shots) .sugo-msb-hero__copy > * { grid-column: 1 / -1; }
.sugo-msb--showroom .sugo-msb-head { max-width: 1240px; margin: 0 auto; padding: 40px 24px 8px; }
.sugo-msb--showroom .sugo-msb-head__h { margin: 0 0 10px; font-size: clamp(32px, 4.4vw, 56px); font-weight: 900; line-height: 1.02; }
.sugo-msb--showroom .sugo-msb-head__sub { margin: 0; color: var(--msb-mute); font-size: 17px; }

/* ---------------------------------------------------------------- sticky progress */
.sugo-msb--showroom .sugo-msb-prog {
	position: sticky; top: var(--msb-top); z-index: 20; display: flex; align-items: center; gap: 16px; min-height: 72px;
	max-width: 1240px; margin: 18px auto 0; padding: 10px 24px; background: rgba(11,12,15,.94);
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--msb-line);
}
.sugo-msb--showroom .sugo-msb-prog.is-fixed { position: fixed; top: var(--msb-top); margin: 0; max-width: none; padding-inline: max(24px, calc((100% - 1240px) / 2 + 24px)); }
.sugo-msb--showroom .sugo-msb-prog-ph { margin-top: 18px; }
.sugo-msb--showroom .sugo-msb-prog__steps { display: flex; flex: 1; gap: 8px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.sugo-msb--showroom .sugo-msb-prog__step { flex: 1; min-width: 0; margin: 0; }
.sugo-msb--showroom .sugo-msb-prog__step a { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 12px; border-radius: 12px; text-decoration: none; background: var(--msb-card); box-shadow: inset 0 0 0 1px var(--msb-line); }
.sugo-msb--showroom .sugo-msb-prog__step a[aria-current="step"] { box-shadow: inset 0 0 0 1.5px #fff; }
.sugo-msb--showroom .sugo-msb-prog__txt { min-width: 0; }
.sugo-msb--showroom .sugo-msb-prog__txt b { display: block; color: var(--msb-txt); font-size: 14px; line-height: 1.2; }
.sugo-msb--showroom .sugo-msb-prog__state { display: block; overflow: hidden; color: var(--msb-mute); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.sugo-msb--showroom .sugo-msb-n { flex: none; display: inline-grid; place-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--msb-card2); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.5); color: var(--msb-txt); font-weight: 800; font-size: 14px; }
.sugo-msb--showroom .sugo-msb-prog__step.is-done .sugo-msb-n { background: var(--msb-red-fill); box-shadow: none; color: #fff; }
.sugo-msb--showroom .sugo-msb-prog__buy, .sugo-msb--showroom .sugo-msb-bbar__in { display: flex; align-items: center; gap: 14px; }
.sugo-msb--showroom .sugo-msb-sum { color: var(--msb-mute); font-size: 13px; text-align: right; white-space: nowrap; }
.sugo-msb--showroom .sugo-msb-sum__total { display: block; min-height: 22px; color: var(--msb-txt); font-size: 20px; line-height: 1.1; }
.sugo-msb--showroom .sugo-msb-add {
	display: inline-flex; align-items: center; justify-content: center; min-width: 150px; min-height: 44px; margin: 0; padding: 0 18px;
	border: 0; border-radius: 999px; background: var(--msb-red-fill); color: #fff; font-weight: 800; font-size: 14px; line-height: 1;
	white-space: nowrap; cursor: pointer; box-shadow: 0 10px 28px rgba(224,40,15,.3);
}
.sugo-msb--showroom .sugo-msb-add:disabled { background: #3a3d45; color: rgba(255,255,255,.75); box-shadow: none; cursor: default; }
.sugo-msb--showroom .sugo-msb-msg { max-width: 1240px; margin: 0 auto; padding: 0 24px; font-weight: 600; }
.sugo-msb--showroom .sugo-msb-msg:not(:empty) { padding-top: 12px; }
.sugo-msb--showroom .sugo-msb-msg a, .sugo-msb--showroom .sugo-msb-bbar__msg a { display: inline-flex; align-items: center; min-height: 44px; color: var(--msb-txt); font-weight: 800; text-decoration: underline; }
.sugo-msb--showroom .sugo-msb-msg.is-err, .sugo-msb--showroom .sugo-msb-bbar__msg.is-err { color: var(--msb-delta); }

/* ---------------------------------------------------------------- sections */
.sugo-msb--showroom .sugo-msb-blk { max-width: 1240px; margin: 0 auto; padding: 40px 24px 8px; scroll-margin-top: calc(var(--msb-top) + var(--msb-bar-h) + 16px); }
.sugo-msb--showroom .sugo-msb-blk__h { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; font-size: 26px; font-weight: 800; line-height: 1.2; }
.sugo-msb--showroom .sugo-msb-blk__h .sugo-msb-n { width: 36px; height: 36px; font-size: 16px; background: #fff; color: #111; box-shadow: none; }
.sugo-msb--showroom .sugo-msb-blk__h em { font-style: normal; color: var(--msb-red-ink); }
.sugo-msb--showroom .sugo-msb-none { margin: 0; color: var(--msb-mute); }
.sugo-msb--showroom .sugo-msb-ranges { display: flex; gap: 8px; margin: 0 0 14px; }
.sugo-msb--showroom .sugo-msb-ranges button, .sugo-msb--showroom .sugo-msb-b {
	display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px;
	background: none; color: var(--msb-txt); font-weight: 800; font-size: 14px; white-space: nowrap; cursor: pointer; box-shadow: inset 0 0 0 1.5px var(--msb-ctl);
}
.sugo-msb--showroom .sugo-msb-ranges button.is-on { background: #fff; color: #111; box-shadow: none; }
.sugo-msb--showroom .sugo-msb-b.is-ghost { box-shadow: none; color: var(--msb-mute); text-decoration: underline; }

/* case shelf */
.sugo-msb--showroom .sugo-msb-shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 10px; min-height: 250px; }
.sugo-msb--showroom .sugo-msb-sc {
	display: flex; flex-direction: column; align-items: stretch; gap: 1px; margin: 0; padding: 8px 8px 10px; border: 0; border-radius: 12px; text-align: left;
	background: var(--msb-card); color: var(--msb-txt); box-shadow: inset 0 0 0 1px var(--msb-ctl); cursor: pointer; font-size: 14px; line-height: 1.35;
}
.sugo-msb--showroom .sugo-msb-sc__img { display: block; aspect-ratio: 4 / 3; margin: 0 0 6px; border-radius: 8px; overflow: hidden; background: #f4f4f5; }
.sugo-msb--showroom .sugo-msb-sc__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sugo-msb--showroom .sugo-msb-sc__nm { font-weight: 800; font-size: 15px; }
.sugo-msb--showroom .sugo-msb-sc__var { color: var(--msb-mute); font-size: 12.5px; }
.sugo-msb--showroom .sugo-msb-sc__pr { margin-top: 4px; font-size: 14px; }
.sugo-msb--showroom .sugo-msb-sc.is-on { background: var(--msb-card2); box-shadow: inset 0 0 0 2px var(--msb-red), 0 12px 30px rgba(255,59,31,.18); }
.sugo-msb--showroom del { color: var(--msb-mute); font-weight: 400; }
.sugo-msb--showroom .sugo-msb-st { font-size: 12.5px; font-weight: 700; color: var(--msb-mute); }
.sugo-msb--showroom .sugo-msb-st.is-in { color: #8fdcb0; }
.sugo-msb--showroom .sugo-msb-st.is-pre { color: var(--msb-amber); }
.sugo-msb--showroom .sugo-msb-st.is-off { color: var(--msb-delta); }

.sugo-msb--showroom .sugo-msb-noset { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin: 8px 0 0; color: var(--msb-txt); font-size: 14px; font-weight: 600; cursor: pointer; }
.sugo-msb--showroom .sugo-msb-noset input { width: 20px; height: 20px; margin: 0; accent-color: var(--msb-red-fill); }

/* parts */
.sugo-msb--showroom .sugo-msb-note { margin: 0 0 16px; padding: 14px 16px; border-radius: 12px; background: rgba(255,170,60,.10); box-shadow: inset 0 0 0 1px rgba(255,170,60,.45); font-size: 15px; }
.sugo-msb--showroom .sugo-msb-note a { display: inline-flex; align-items: center; min-height: 44px; color: var(--msb-amber); font-weight: 800; }
.sugo-msb--showroom .sugo-msb-pbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; color: var(--msb-mute); font-size: 14px; font-weight: 700; }
.sugo-msb--showroom .sugo-msb-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; min-height: 120px; }
.sugo-msb--showroom .sugo-msb-tile { display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: 14px; background: var(--msb-card); box-shadow: inset 0 0 0 1px var(--msb-line); }
.sugo-msb--showroom .sugo-msb-tile.is-on { box-shadow: inset 0 0 0 2px #fff; }
.sugo-msb--showroom .sugo-msb-tile__k { color: var(--msb-mute); font-size: 12.5px; font-weight: 700; }
.sugo-msb--showroom .sugo-msb-tile__img { display: block; aspect-ratio: 16 / 10; margin: 2px 0 6px; border-radius: 10px; overflow: hidden; background: #f4f4f5; }
.sugo-msb--showroom .sugo-msb-tile__img img { display: block; width: 100%; height: 100%; object-fit: contain; }
.sugo-msb--showroom .sugo-msb-tile__nm { font-weight: 800; }
.sugo-msb--showroom .sugo-msb-tile__pr { font-size: 14px; }
.sugo-msb--showroom .sugo-msb-tile__hint, .sugo-msb--showroom .sugo-msb-tile__in { color: var(--msb-mute); font-size: 12.5px; }
.sugo-msb--showroom .sugo-msb-tile__in { color: var(--msb-amber); font-weight: 700; }
/* stepper with a typed number (#779), case cards with Add to build */
.sugo-msb--showroom .sugo-msb-qty { display: inline-flex; flex: none; align-items: center; align-self: flex-start; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--msb-ctl); }
.sugo-msb--showroom .sugo-msb-tile .sugo-msb-qty { margin-top: auto; }
.sugo-msb--showroom .sugo-msb-qty button { width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--msb-txt); font-size: 20px; font-weight: 700; line-height: 1; cursor: pointer; }
.sugo-msb--showroom .sugo-msb-qty button:disabled { opacity: .35; cursor: default; }
.sugo-msb--showroom .sugo-msb-qty__in { width: 46px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--msb-txt); box-shadow: none; text-align: center; font-size: 16px; font-weight: 800; }
.sugo-msb--showroom .sugo-msb-sc { cursor: default; }
.sugo-msb--showroom .sugo-msb-sc__img { position: relative; }
.sugo-msb--showroom .sugo-msb-sc__n { position: absolute; top: 6px; right: 6px; display: grid; place-content: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 999px; background: var(--msb-red-fill); color: #fff; font-weight: 800; font-size: 13px; }
.sugo-msb--showroom .sugo-msb-sc__act { display: flex; flex-direction: column; gap: 4px; margin-top: auto; padding-top: 8px; }
.sugo-msb--showroom .sugo-msb-sc__in { color: var(--msb-red-ink); font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.sugo-msb--showroom .sugo-msb-sc__add { width: 100%; padding: 0 8px; }
/* starter bundles (#779) */
.sugo-msb--showroom .sugo-msb-bns { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.sugo-msb--showroom .sugo-msb-bn { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 14px; background: var(--msb-card); box-shadow: inset 0 0 0 1px var(--msb-line); }
.sugo-msb--showroom .sugo-msb-bn.is-on { box-shadow: inset 0 0 0 2px var(--msb-red); }
.sugo-msb--showroom .sugo-msb-bn__nm { margin: 0; font-weight: 800; font-size: 16px; }
.sugo-msb--showroom .sugo-msb-bn__imgs { display: flex; gap: 6px; }
.sugo-msb--showroom .sugo-msb-bn__imgs img, .sugo-msb--showroom .sugo-msb-bn__imgs .sugo-msb-noimg { width: 44px; height: 44px; min-height: 0; border-radius: 8px; object-fit: cover; background: #f4f4f5; }
.sugo-msb--showroom .sugo-msb-bn__ul { margin: 0; padding: 0 0 0 18px; color: var(--msb-mute); font-size: 13.5px; }
.sugo-msb--showroom .sugo-msb-bn__ul li { margin: 0; }
.sugo-msb--showroom .sugo-msb-bn__buy { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; }
.sugo-msb--showroom .sugo-msb-bn__sum { color: var(--msb-mute); font-size: 13px; }
.sugo-msb--showroom .sugo-msb-bn__sum b { display: block; color: var(--msb-txt); font-size: 20px; line-height: 1.2; }
.sugo-msb--showroom .sugo-msb-blk__sub { margin: -8px 0 16px; color: var(--msb-mute); font-size: 14px; }

/* ready sets comparison */
.sugo-msb--showroom .sugo-msb-sets { min-width: 0; margin: 0; padding: 0; border: 0; }
.sugo-msb--showroom .sugo-msb-cmpwrap { border-radius: 16px; background: var(--msb-card); box-shadow: inset 0 0 0 1px var(--msb-line); }
.sugo-msb--showroom .sugo-msb-cmpwrap.is-wide { overflow-x: auto; }
.sugo-msb--showroom .sugo-msb-cmp { width: 100%; margin: 0; border-collapse: collapse; table-layout: fixed; color: var(--msb-txt); background: none; }
.sugo-msb--showroom .sugo-msb-cmp caption { padding: 14px 16px 0; color: var(--msb-mute); font-size: 14px; font-weight: 700; text-align: left; caption-side: top; }
.sugo-msb--showroom .sugo-msb-cmp th, .sugo-msb--showroom .sugo-msb-cmp td { padding: 12px 16px; border: 0; border-bottom: 1px solid var(--msb-line); color: inherit; vertical-align: middle; text-align: center; font-size: 15px; text-transform: none; letter-spacing: 0; }
.sugo-msb--showroom .sugo-msb-cmp thead td, .sugo-msb--showroom .sugo-msb-cmp tbody th { width: 34%; text-align: left; }
.sugo-msb--showroom .sugo-msb-cmp__corner { color: var(--msb-mute); font-size: 14px; font-weight: 700; }
.sugo-msb--showroom .sugo-msb-cmp th.sugo-msb-cmp__head { border-top: 4px solid rgba(255,255,255,.3); }
.sugo-msb--showroom .sugo-msb-cmp__head b { display: block; font-size: 19px; }
.sugo-msb--showroom .sugo-msb-cmp__head span { color: var(--msb-mute); font-size: 13px; font-weight: 400; }
.sugo-msb--showroom .sugo-msb-cmp th.sugo-msb-cmp__head.is-full { border-top-color: var(--msb-red); background: rgba(255,59,31,.08); }
.sugo-msb--showroom .sugo-msb-cmp__item { font-weight: 700; }
.sugo-msb--showroom .sugo-msb-cmp__item img, .sugo-msb--showroom .sugo-msb-cmp__item .sugo-msb-noimg { display: inline-block; width: 52px; height: 52px; margin: 0 12px 0 0; vertical-align: middle; object-fit: cover; border-radius: 8px; background: #f4f4f5; }
.sugo-msb--showroom .sugo-msb-cmp__cell { font-weight: 700; }
.sugo-msb--showroom .sugo-msb-cmp__cell > * { vertical-align: middle; }
.sugo-msb--showroom .sugo-msb-cmp__cell span:not(.sugo-msb-vh) { margin-left: 6px; }
.sugo-msb--showroom .sugo-msb-cmp__cell.is-add { background: rgba(255,59,31,.10); }
.sugo-msb--showroom .sugo-msb-cmp__cell em { display: block; margin-top: 2px; font-style: normal; color: var(--msb-delta); font-size: 13px; }
.sugo-msb--showroom .sugo-msb-yes, .sugo-msb--showroom .sugo-msb-no { display: inline-block; position: relative; width: 24px; height: 24px; border-radius: 50%; }
.sugo-msb--showroom .sugo-msb-yes { background: var(--msb-red-fill) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.2 11.6 2.8 8.2l1.1-1.1 2.3 2.3 5.9-5.9 1.1 1.1z' fill='%23fff'/%3E%3C/svg%3E") center / 16px no-repeat; }
.sugo-msb--showroom .sugo-msb-no::after { content: ""; position: absolute; left: 6px; right: 6px; top: 11px; height: 2px; background: rgba(255,255,255,.5); }
.sugo-msb--showroom .sugo-msb-cmp__tot th { color: var(--msb-mute); font-size: 14px; }
.sugo-msb--showroom .sugo-msb-cmp__tot td { font-weight: 800; font-size: 16px; }
.sugo-msb--showroom .sugo-msb-cmp__tot td b { font-size: 22px; }
.sugo-msb--showroom .sugo-msb-cmp__buy th, .sugo-msb--showroom .sugo-msb-cmp__buy td { border-bottom: 0; }
.sugo-msb--showroom label { color: var(--msb-txt); text-transform: none; letter-spacing: 0; }
.sugo-msb--showroom .sugo-msb-pill { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 110px; min-height: 44px; padding: 0 18px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.6); font-weight: 800; font-size: 14px; white-space: nowrap; cursor: pointer; }
.sugo-msb--showroom .sugo-msb-pill input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.sugo-msb--showroom .sugo-msb-pill:has(input:focus-visible) { outline: 2px solid #fff; outline-offset: 2px; }
.sugo-msb--showroom .sugo-msb-pill.is-on { background: var(--msb-red-fill); box-shadow: none; color: #fff; }
.sugo-msb--showroom .sugo-msb-pill.is-off { color: var(--msb-mute); box-shadow: inset 0 0 0 1px var(--msb-line); white-space: normal; cursor: not-allowed; }
.sugo-msb--showroom .sugo-msb-noset input:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.sugo-msb--showroom .sugo-msb-cmp__fine { margin: 12px 0 0; color: var(--msb-mute); font-size: 13.5px; }

/* phone bottom bar */
.sugo-msb--showroom .sugo-msb-bbar {
	position: fixed; left: 0; right: 0; bottom: var(--msb-bottom); z-index: 990; min-height: 64px;
	padding: 10px 16px max(12px, env(safe-area-inset-bottom)); background: rgba(11,12,15,.96); border-top: 1px solid var(--msb-line);
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: sugo-msb-up .2s ease-out;
}
.sugo-msb--showroom .sugo-msb-bbar[hidden] { display: none; }
.sugo-msb--showroom .sugo-msb-bbar__in { justify-content: space-between; }
.sugo-msb--showroom .sugo-msb-bbar .sugo-msb-sum { text-align: left; }
.sugo-msb--showroom .sugo-msb-bbar__msg { margin: 0; font-size: 13px; }
.sugo-msb--showroom .sugo-msb-bbar__msg:empty { display: none; }
.sugo-msb--showroom.has-bbar { padding-bottom: calc(96px + var(--msb-bottom)); }
@keyframes sugo-msb-up { from { transform: translateY(100%); } to { transform: none; } }
.sugo-msb--showroom.is-busy .sugo-msb-add { cursor: progress; }
.sugo-msb--showroom .sugo-msb-noscript { max-width: 1240px; margin: 0 auto; padding: 16px 24px; }

/* ---------------------------------------------------------------- widths */
@media (max-width: 849px) {
	.sugo-msb--showroom .sugo-msb-hero { grid-template-columns: 1fr; grid-template-rows: auto; min-height: 0; padding: 26px 16px 0; }
	.sugo-msb--showroom .sugo-msb-hero::before { left: 16px; right: 16px; top: 12px; }
	.sugo-msb--showroom .sugo-msb-hero__stage { grid-column: 1; grid-row: 1; height: 250px; margin: 0 -16px; }
	.sugo-msb--showroom .sugo-msb-hero__h { font-size: 44px; }
	.sugo-msb--showroom .sugo-msb-hero__sub { margin-bottom: 20px; font-size: 15.5px; }
	.sugo-msb--showroom .sugo-msb-hero__ctas { flex-direction: column; }
	.sugo-msb--showroom .sugo-msb-hero__cta { width: 100%; }
	.sugo-msb--showroom .sugo-msb-hero__badges { grid-row: 6; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; font-size: 13px; }
	.sugo-msb--showroom .sugo-msb-head { padding: 26px 16px 4px; }
	.sugo-msb--showroom .sugo-msb-prog { position: relative; top: auto; flex-direction: column; align-items: stretch; gap: 8px; margin-top: 12px; padding: 8px 10px; }
	.sugo-msb--showroom .sugo-msb-prog__steps { gap: 6px; }
	.sugo-msb--showroom .sugo-msb-prog__step a { flex-direction: column; align-items: flex-start; gap: 4px; min-height: 44px; padding: 6px 8px; }
	.sugo-msb--showroom .sugo-msb-prog__state { font-size: 12px; white-space: normal; }
	.sugo-msb--showroom .sugo-msb-prog__txt b { font-size: 13px; }
	.sugo-msb--showroom .sugo-msb-prog .sugo-msb-n { width: 24px; height: 24px; font-size: 12px; }
	.sugo-msb--showroom .sugo-msb-prog__buy { justify-content: space-between; }
	.sugo-msb--showroom .sugo-msb-prog__buy .sugo-msb-sum { text-align: left; }
	.sugo-msb--showroom .sugo-msb-msg { padding: 0 16px; }
	.sugo-msb--showroom .sugo-msb-blk { padding: 30px 16px 4px; scroll-margin-top: 16px; }
	.sugo-msb--showroom .sugo-msb-blk__h { font-size: 21px; }
	.sugo-msb--showroom .sugo-msb-shelf { display: flex; min-height: 230px; margin: 0 -16px; padding: 2px 16px 8px; overflow-x: auto; scroll-snap-type: x mandatory; }
	.sugo-msb--showroom .sugo-msb-sc { flex: none; width: 150px; scroll-snap-align: start; }
	.sugo-msb--showroom .sugo-msb-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
	.sugo-msb--showroom .sugo-msb-tile { padding: 10px; }
	.sugo-msb--showroom .sugo-msb-cmp th, .sugo-msb--showroom .sugo-msb-cmp td { padding: 10px 6px; font-size: 13.5px; }
	.sugo-msb--showroom .sugo-msb-cmp thead td, .sugo-msb--showroom .sugo-msb-cmp tbody th { width: 38%; }
	.sugo-msb--showroom .sugo-msb-cmp__item img, .sugo-msb--showroom .sugo-msb-cmp__item .sugo-msb-noimg { display: block; width: 40px; height: 40px; margin: 0 0 4px; }
	.sugo-msb--showroom .sugo-msb-cmp__head b { font-size: 15px; }
	.sugo-msb--showroom .sugo-msb-cmp__tot td { font-size: 14px; }
	.sugo-msb--showroom .sugo-msb-cmp__tot td b { font-size: 15px; }
	.sugo-msb--showroom .sugo-msb-cmp__cell em { font-size: 12px; }
	.sugo-msb--showroom .sugo-msb-pill { min-width: 0; width: 100%; padding: 0 10px; }
	.sugo-msb--showroom .sugo-msb-cmpwrap.is-wide .sugo-msb-cmp { width: auto; min-width: 560px; }
	.sugo-msb--showroom .sugo-msb-cmpwrap.is-wide tbody th, .sugo-msb--showroom .sugo-msb-cmpwrap.is-wide thead td { position: sticky; left: 0; z-index: 1; width: 140px; background: var(--msb-card); }
	.sugo-msb--showroom .sugo-msb-cmpwrap.is-wide::after { content: "Scroll sideways for more sets"; display: block; padding: 8px 12px; color: var(--msb-mute); font-size: 12px; }
	.sugo-msb--showroom .sugo-msb-add { min-width: 140px; }
}
@media (prefers-reduced-motion: reduce) {
	.sugo-msb--showroom *, .sugo-msb--showroom *::before, .sugo-msb--showroom *::after { transition: none; animation: none; scroll-behavior: auto; }
	.sugo-msb--showroom .sugo-msb-hero::after { background: none; }
}