/* 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;
	/* ...and the section has to be as tall as what is in it. The legacy sheet
	   floats the gallery and the summary inside it and forces display:block with
	   !important, so without flow-root it was 90px tall on desktop and the CTA
	   had nowhere to travel. At phone width the same uncontained floats pushed
	   the gallery and configurator off-screen to the right (x=395 of 375): the
	   tabs page was blank under the breadcrumb. */
	display: flow-root !important;
}
/* The legacy `.product__content { display: block !important }` loads after this
   sheet at 1024 and up, and wins an equal-specificity tie on order. */
.single-product .st-product-cta__wrap {
	display: flow-root !important;
}

/* The legacy sheet sets `overflow-x: hidden` on #primary. Any overflow but
   visible makes that box the sticky element's scroller, and #primary never
   scrolls, so `position: sticky` silently did nothing at every width from the
   day it shipped (WB-250). `clip` hides the same sideways overflow without
   making a scroll container. kit and builder do not use the sticky CTA and
   measure identical with and without this. */
body.dtla__body.single-product #primary {
	overflow-x: clip;
}

/* Attached to the top of the window. The header hides on scroll down and comes
   back on scroll up (assets/header.js), so the CTA follows it: under the header
   while it shows, at the very top while it is hidden, sliding on the header's
   own 0.35s. `--header-height` is published by header.js and already includes a
   pinned admin bar. The old fixed 5.25rem left a strip of page showing above the
   CTA whenever the header was hidden, and sat under the header when it was not
   (the header is 89-97px). */
.st-product-cta {
	position: sticky;
	top: var(--header-height, var(--st-product-cta-top, 5.25rem));
	transition: top 0.35s ease-in-out;
	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 header is hidden: the CTA takes the top of the window. A pinned admin bar
   still covers the top, so a logged-in viewer gets WordPress's own offsets, the
   same three steps the header uses (the bar scrolls away at 600px and under). */
html:has(.dtla-header-cover.is-hidden) .st-product-cta {
	top: 0;
}
html:has(.dtla-header-cover.is-hidden) .admin-bar .st-product-cta {
	top: 32px;
}
@media screen and (max-width: 782px) {
	html:has(.dtla-header-cover.is-hidden) .admin-bar .st-product-cta {
		top: 46px;
	}
}
@media screen and (max-width: 600px) {
	html:has(.dtla-header-cover.is-hidden) .admin-bar .st-product-cta {
		top: 0;
	}
}

/* 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;
	}
}