/* Sugo - Moduspace showroom, #779 option C: bundles, "Your build", steppers, phone sheets. Same scope
 * rules as showroom.css (tests/test_showroom_css.py): every selector under .sugo-msb--showroom. */
.sugo-msb--showroom .sugo-msb-bn__go, .sugo-msb--showroom .sugo-msb-sc__add, .sugo-msb--showroom .sugo-msb-ln__parts, .sugo-msb--showroom .sugo-msb-tog, .sugo-msb--showroom .sugo-msb-sheet__x, .sugo-msb--showroom .sugo-msb-bn__ask button, .sugo-msb--showroom .sugo-msb-reload {
	display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; 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-bn.is-on .sugo-msb-bn__go { background: var(--msb-red-fill); color: #fff; box-shadow: none; }
.sugo-msb--showroom .sugo-msb-bn__ask { margin: 0; padding: 10px 12px; border-radius: 10px; background: rgba(255,170,60,.10); color: var(--msb-txt); font-size: 14px; }
.sugo-msb--showroom .sugo-msb-bn__ask button { margin: 6px 6px 0 0; }

/* cases next to the build */
.sugo-msb--showroom .sugo-msb-cols { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 8px; align-items: start; max-width: 1240px; margin: 0 auto; }
.sugo-msb--showroom .sugo-msb-cols > .sugo-msb-blk { width: 100%; max-width: none; padding-right: 0; }

/* Your build */
.sugo-msb--showroom .sugo-msb-build { position: sticky; top: calc(var(--msb-top) + var(--msb-bar-h) + 16px); margin: 40px 24px 0 16px; padding: 16px; border-radius: 16px; background: var(--msb-card); box-shadow: inset 0 0 0 1px var(--msb-line); }
.sugo-msb--showroom .sugo-msb-build__hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sugo-msb--showroom .sugo-msb-build__h { margin: 0; font-size: 20px; font-weight: 800; }
.sugo-msb--showroom .sugo-msb-sheet__x { display: none; }
.sugo-msb--showroom .sugo-msb-lns { margin: 8px 0 0; padding: 0; list-style: none; }
.sugo-msb--showroom .sugo-msb-ln { margin: 0; padding: 12px 0; border-top: 1px solid var(--msb-line); }
.sugo-msb--showroom .sugo-msb-ln.is-on { margin: 0 -16px; padding: 12px 16px 12px 13px; border-left: 3px solid var(--msb-red); background: rgba(255,59,31,.06); }
.sugo-msb--showroom .sugo-msb-ln__hd { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 10px; align-items: start; }
.sugo-msb--showroom .sugo-msb-ln__img { display: block; width: 52px; height: 52px; border-radius: 8px; overflow: hidden; background: #f4f4f5; }
.sugo-msb--showroom .sugo-msb-ln__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sugo-msb--showroom .sugo-msb-ln__nm { min-width: 0; font-size: 13px; color: var(--msb-mute); }
.sugo-msb--showroom .sugo-msb-ln__nm b { color: var(--msb-txt); font-size: 15px; }
.sugo-msb--showroom .sugo-msb-ln__sub { display: block; font-size: 12.5px; }
.sugo-msb--showroom .sugo-msb-ln__tot { font-size: 15px; white-space: nowrap; }
.sugo-msb--showroom .sugo-msb-ln__ctl, .sugo-msb--showroom .sugo-msb-ln__ft { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.sugo-msb--showroom .sugo-msb-ln__set { flex: 1 1 150px; min-width: 0; margin: 0; }
.sugo-msb--showroom .sugo-msb-ln__set select { width: 100%; min-height: 44px; margin: 0; padding: 0 10px; border: 0; border-radius: 10px; background-color: var(--msb-card2); color: var(--msb-txt); box-shadow: inset 0 0 0 1px var(--msb-ctl); font-size: 14px; }
.sugo-msb--showroom .sugo-msb-ln__note { margin: 8px 0 0; padding: 10px 12px; border-radius: 10px; background: rgba(255,170,60,.10); box-shadow: inset 0 0 0 1px rgba(255,170,60,.45); font-size: 13px; }
.sugo-msb--showroom .sugo-msb-ln__note a, .sugo-msb--showroom .sugo-msb-ln__why a, .sugo-msb--showroom .sugo-msb-warn a { color: var(--msb-amber); font-weight: 800; }
.sugo-msb--showroom .sugo-msb-ln__own { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 0 auto 0 0; font-size: 13.5px; font-weight: 600; }
.sugo-msb--showroom .sugo-msb-ln__own input { width: 20px; height: 20px; margin: 0; accent-color: var(--msb-red-fill); }
.sugo-msb--showroom .sugo-msb-ln__parts[aria-pressed="true"] { background: #fff; color: #111; box-shadow: none; }
.sugo-msb--showroom .sugo-msb-ln__rm { min-height: 44px; padding: 0 6px; border: 0; background: none; color: var(--msb-mute); font-size: 13.5px; text-decoration: underline; cursor: pointer; }
.sugo-msb--showroom .sugo-msb-ln__why, .sugo-msb--showroom .sugo-msb-warn { margin: 8px 0 0; color: var(--msb-amber); font-size: 13.5px; }
.sugo-msb--showroom .sugo-msb-bfoot { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--msb-line); }
.sugo-msb--showroom .sugo-msb-bfoot__sum { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 0 10px; color: var(--msb-mute); font-size: 14px; }
.sugo-msb--showroom .sugo-msb-bfoot__sum b { color: var(--msb-txt); font-size: 26px; }
.sugo-msb--showroom .sugo-msb-bfoot .sugo-msb-add { width: 100%; margin-top: 8px; }
.sugo-msb--showroom .sugo-msb-bfoot__fine { margin: 10px 0 0; color: var(--msb-mute); font-size: 12.5px; }

.sugo-msb--showroom .sugo-msb-tog { display: none; }
.sugo-msb--showroom .sugo-msb-dim { display: none; }

@media (max-width: 1099px) {
	.sugo-msb--showroom .sugo-msb-cols { grid-template-columns: minmax(0, 1fr) 340px; }
}
@media (max-width: 849px) {
	.sugo-msb--showroom .sugo-msb-bns { display: flex; margin: 0 -16px; padding: 2px 16px 8px; overflow-x: auto; scroll-snap-type: x mandatory; }
	.sugo-msb--showroom .sugo-msb-bn { flex: none; width: min(300px, 82%); scroll-snap-align: start; }
	.sugo-msb--showroom .sugo-msb-cols { display: block; }
	.sugo-msb--showroom .sugo-msb-cols > .sugo-msb-blk { padding-right: 16px; }
	.sugo-msb--showroom .sugo-msb-sc__add, .sugo-msb--showroom .sugo-msb-bn__go { padding: 0 10px; }
	/* "Your build" and the parts of the open line are pull-up sheets above the bottom bar */
	.sugo-msb--showroom .sugo-msb-sheet {
		position: fixed; left: 0; right: 0; bottom: calc(var(--msb-bottom) + var(--msb-bbar-h, 0px)); z-index: 989; max-width: none;
		max-height: calc(100vh - var(--msb-bottom) - var(--msb-bbar-h, 0px) - 40px); margin: 0; padding: 14px 16px 16px; overflow-y: auto; overscroll-behavior: contain;
		border-radius: 18px 18px 0 0; background: var(--msb-card); box-shadow: 0 -16px 40px rgba(0,0,0,.6); transform: translateY(110%); visibility: hidden; transition: transform .2s ease-out, visibility .2s;
	}
	.sugo-msb--showroom.is-sheet-build #msb-build, .sugo-msb--showroom.is-sheet-parts #msb-parts { transform: none; visibility: visible; }
	.sugo-msb--showroom .sugo-msb-sheet__x { display: inline-flex; }
	.sugo-msb--showroom #msb-parts .sugo-msb-sheet__x { position: absolute; top: 12px; right: 16px; }
	.sugo-msb--showroom #msb-parts .sugo-msb-blk__h { padding-right: 90px; }
	.sugo-msb--showroom .sugo-msb-build .sugo-msb-ln.is-on { margin: 0 -16px; }
	.sugo-msb--showroom .sugo-msb-dim { position: fixed; inset: 0; z-index: 988; background: rgba(0,0,0,.55); }
	.sugo-msb--showroom.is-sheet-build .sugo-msb-dim, .sugo-msb--showroom.is-sheet-parts .sugo-msb-dim { display: block; }
	.sugo-msb--showroom .sugo-msb-bbar .sugo-msb-tog { display: inline-flex; padding: 0 12px; }
	.sugo-msb--showroom .sugo-msb-bbar__in { gap: 8px; }
	.sugo-msb--showroom .sugo-msb-bbar .sugo-msb-add { min-width: 0; flex: 1; max-width: 150px; }
	.sugo-msb--showroom .sugo-msb-bbar .sugo-msb-add__w, .sugo-msb--showroom .sugo-msb-bbar .sugo-msb-sum__units { display: none; }
}