/* ============================================================
 * BIOTA · PRIMITIVE · Rail
 * Horizontal scroll-snap strip. Core blocks have no carousel, so this
 * turns a group into a swipeable row of fixed-width cards. Each child
 * stays a normal, editable block. Apply class "biota-rail" on the group.
 * ============================================================ */

.biota-rail {
	display: flex;
	flex-wrap: nowrap;
	gap: 14px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding-bottom: 4px;
	/* overflow-x: auto forces overflow-y to compute as auto too, so the cards'
	 * 3px hover lift and its shadow were being clipped along the top edge.
	 * Headroom inside the scroller, cancelled by the negative margin so the
	 * rail still sits where it did. */
	padding-top: 12px;
	margin-top: -12px;
}
.biota-rail::-webkit-scrollbar {
	display: none;
}
/* 272px, not 240: the card's eyebrow ("UNTUK KAMAR & RUANG KELUARGA") is
   uppercase with letter-spacing and comes from per-product marketing copy, so
   it has to fit on one line. The longest current label needs 225px of text;
   with the body's 18px side padding that puts the floor at ~263px. */
.biota-rail > * {
	scroll-snap-align: start;
	flex: 0 0 auto;
	width: min(80vw, 272px);
}

/* The first card lines up with the section's left padding, and the rail runs on
   past the content width to the screen edge so the following cards bleed off to
   the right rather than stopping short — the same treatment the testimonials
   rail uses. This was mobile-only, so on desktop the row ended abruptly at the
   content edge and read as cut off instead of continuing. */
.biota-picker .biota-rail {
	margin-right: calc(-1 * var(--wp--preset--spacing--bt-70));
	padding-right: var(--wp--preset--spacing--bt-70);
}

/* Compare button: centred beneath the rail (matches the reference design's
   centred .m-cmpbtn) instead of sitting flush-left. It used to be sized here
   too, which is what kept it a 14px rounded rectangle after every other action
   button moved to the shared pill. Centring only now; the box comes from the
   button variant. */
.biota-picker .biota-actions--stacked {
	justify-content: center;
	margin-top: 20px;
}