/* ================================================================
   stx_wall_builder — additions on top of configurator.css.
   The root carries BOTH modifiers (.stx-pdp--htcfg for the shared
   step/card/viz layer, .stx-pdp--wb for these additions), so scope
   everything here under .stx-pdp--wb: (0,2,0)+ beats Rey's global
   element rules without !important. Dark skin — same ink tokens as
   the configurator cards.
   ================================================================ */

/* ---- size steppers ---- */
.stx-pdp--wb .stx-wb__steppers {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-top: 12px;
}

.stx-pdp--wb .stx-wb__stepper {
	border: 1px solid var(--stx-ink-700);
	border-radius: 12px;
	padding: 10px 12px;
	background: var(--stx-ink-900);
}

.stx-pdp--wb .stx-wb__stepper-label {
	display: block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--stx-ink-400);
	margin-bottom: 6px;
}

.stx-pdp--wb .stx-wb__stepper-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.stx-pdp--wb .stx-wb__stepbtn {
	width: 32px;
	height: 32px;
	flex: 0 0 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--stx-ink-500);
	border-radius: 50%;
	background: transparent;
	color: var(--stx-ink-100);
	font-size: 17px;
	line-height: 1;
	padding: 0;
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.stx-pdp--wb .stx-wb__stepbtn:hover {
	border-color: var(--stx-blue);
	color: var(--stx-blue);
	background: color-mix(in srgb, var(--stx-blue) 10%, transparent);
}

.stx-pdp--wb .stx-wb__stepper-val {
	font-size: 13px;
	font-weight: 600;
	color: var(--stx-ink-100);
	text-align: center;
	white-space: nowrap;
}

.stx-pdp--wb .stx-wb__snap {
	margin-top: 8px;
}

/* ---- purchase block ---- */
.stx-pdp--wb .stx-wb__perpanel {
	margin-top: 2px;
	color: var(--stx-ink-400);
}

.stx-pdp--wb .stx-wb__atc {
	margin-top: 12px;
	width: 100%;
}

/* preset card price line stays on one line */
.stx-pdp--wb .stx-cfg__cards--presets .stx-cfg__card-sub {
	white-space: nowrap;
}

/* ---- sticky media column ----
   The gallery column (.stx-wb-media on the Atlas template) pins to the
   viewport so the live wall preview stays visible while the visitor
   works through the builder steps on the right. No inner scrollbar —
   once the diagram goes live the gallery flips to carousel mode (below).
   Desktop only — columns stack on tablet/mobile. */
@media (min-width: 1025px) {
	.stx-wb-media {
		position: sticky;
		top: 121px; /* fixed site header + breathing room */
		align-self: flex-start;
	}
}

/* ---- carousel mode (.is-wbc, added by wall-builder.js when live) ----
   One slide at a time: slide 0 = the diagram (lead item + viz overlay),
   the rest are the product photos. Arrows + dots replace both the
   masonry scroll and the old Photos toggle. */
.stx-gallery.is-wbc {
	position: relative;
}

.stx-gallery.is-wbc .stx-gallery__item {
	display: none;
	margin: 0;
}

.stx-gallery.is-wbc .stx-gallery__item.is-current {
	display: block;
	height: calc(100vh - 265px);
	min-height: 420px;
	overflow: hidden;
}

.stx-gallery.is-wbc .stx-gallery__item.is-current .stx-gallery__media {
	height: 100%;
}

.stx-gallery.is-wbc .stx-gallery__item.is-current .stx-gallery__img,
.stx-gallery.is-wbc .stx-gallery__item.is-current .stx-gallery__video {
	width: 100%;
	height: 100%;
	object-fit: contain; /* show the whole photo — never crop tall cabinets */
}

/* masonry wrapper collapses to a single visible slide */
.stx-gallery.is-wbc .stx-gallery__grid {
	column-count: 1;
}

/* arrows/dots replace the overlay's own Photos toggle */
.stx-gallery.is-wbc .stx-cfgviz__toggle {
	display: none;
}

.stx-gallery.is-wbc .stx-wbc__btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 6;
	width: 38px;
	height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid var(--stx-ink-600, #3a3a3c);
	border-radius: 50%;
	background: color-mix(in srgb, var(--stx-ink-900, #1d1d1f) 78%, transparent);
	backdrop-filter: blur(6px);
	color: var(--stx-ink-100, #f5f5f7);
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.stx-gallery.is-wbc .stx-wbc__btn svg {
	width: 16px;
	height: 16px;
}

.stx-gallery.is-wbc .stx-wbc__btn:hover {
	border-color: var(--stx-blue, #0071e3);
	color: var(--stx-blue, #0071e3);
}

.stx-gallery.is-wbc .stx-wbc__btn--prev { left: 14px; }
.stx-gallery.is-wbc .stx-wbc__btn--next { right: 14px; }

.stx-gallery.is-wbc .stx-wbc__dots {
	position: absolute;
	left: 50%;
	bottom: 12px;
	transform: translateX(-50%);
	z-index: 6;
	display: flex;
	gap: 7px;
	padding: 7px 10px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--stx-ink-900, #1d1d1f) 65%, transparent);
	backdrop-filter: blur(6px);
}

.stx-gallery.is-wbc .stx-wbc__dot {
	width: 7px;
	height: 7px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--stx-ink-500, #6e6e73);
	cursor: pointer;
	transition: background 0.15s ease, transform 0.15s ease;
}

.stx-gallery.is-wbc .stx-wbc__dot.is-on {
	background: var(--stx-blue, #0071e3);
	transform: scale(1.3);
}