/* The product panel's call to action · WB-250
 *
 * The geometry only. Colour, radius and type come from whatever already styles
 * the configurator's own nodes on this store, because this stylesheet MOVES
 * those nodes rather than restyling them (PATTERN-RULE.md: tokens only, no hex,
 * no store name).
 *
 * `position: sticky` and never `position: fixed`. Fixed has the viewport as its
 * containing block, so it has no end — which is exactly how the old bottom bar
 * ended up under the footer (Michael, V1 18:21: *"It should never go below the
 * footer."*). Sticky's containing block is `.st-product-cta__wrap`, the product
 * section, so the CTA travels the panel and releases at the end of it. It cannot
 * reach the footer, and it cannot cover a footer link, because it stops before
 * the section does. tools/floor-check.py fails the build if `position: fixed`
 * appears in this file.
 */

.st-product-cta__wrap {
	/* Sticky needs a containing block that is the SECTION, not a box the height
	   of the CTA. This is that block; JS puts the class on the product section. */
	position: relative;
}

.st-product-cta {
	position: sticky;
	top: var(--st-product-cta-top, 5.25rem);
	z-index: 40;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 1rem;
	margin: 0 0 1.75rem;
	padding: 0.65rem 0;
	background: var(--wp--preset--color--ti-bg, transparent);
	border-bottom: 1px solid var(--wp--preset--color--ti-line, currentColor);
}

/* The moved node keeps its own look; it only has to stop being a bar. */
.st-product-cta .productInfoHeader__right {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin: 0;
}

/* The admin bar is fixed at the top of the viewport, so a sticky element parked
   at top:0-ish sits underneath it. WordPress's own offsets, and the same three
   steps the header uses. */
.admin-bar .st-product-cta {
	top: calc(var(--st-product-cta-top, 5.25rem) + 32px);
}
@media screen and (max-width: 782px) {
	.admin-bar .st-product-cta {
		top: calc(var(--st-product-cta-top, 5.25rem) + 46px);
	}
}
@media screen and (max-width: 600px) {
	.admin-bar .st-product-cta {
		top: var(--st-product-cta-top, 5.25rem);
	}
}

/* Phone widths: the panel sits under the image and the CTA keeps travelling the
   same section. Full width, and the price/button pill stops being pushed to one
   edge where a thumb cannot reach it. */
@media (max-width: 599.98px) {
	.st-product-cta {
		justify-content: stretch;
		gap: 0.6rem;
		padding: 0.5rem 0;
	}
	.st-product-cta .productInfoHeader__right {
		width: 100%;
		justify-content: space-between;
	}
	.st-product-cta .productInfoHeader__right__left {
		width: 100%;
	}
}

/* A visitor who prefers less motion still gets the CTA; it just does not slide.
   `position: static` is the honest fallback — the button is at the top of the
   panel either way, which was the point. */
@media (prefers-reduced-motion: reduce) {
	.st-product-cta {
		transition: none;
	}
}