/* Floating widgets, moved out of the bottom bar's way.
   ====================================================

   Every shop site carries three things that pin themselves to the bottom
   corners of the viewport:

     - the CookieYes consent badge   `.cky-btn-revisit-wrapper`  (bottom left)
     - the Chaty chat bubble         `.chaty-widget`             (bottom right)
     - the theme's back-to-top       `.wpr-stt-btn`              (bottom right)

   On a desktop there is room for all of them below our bar. On a phone there
   is not: they land on top of the price bar, which is the one thing on that
   screen the customer is there to read. A chat bubble over the pound figure
   and a consent badge over the word "Details" is what prompted this file.

   None of those plugins knows this one exists, so the arrangement has to be
   made from here. The bar publishes its height on <html> as `--frb-lift`
   while it is pinned (see useStickyBarOffset) and each widget is moved up by
   it. Nothing is hidden and nothing is repositioned: everything stays exactly
   where its own plugin put it, a little higher, and drops back the moment the
   bar lets go.

   Why `translate` and not `bottom`:
     - each of these plugins has its own configured offset, often different
       per site, and overriding `bottom` would replace that setting with our
       guess. A transform composes with it instead.
     - Elementor writes the back-to-top's `bottom` into per-page generated CSS
       with a specificity that is awkward to beat and a value we must not
       discard.
     - it is one compositor property, so it animates without layout.

   If a plugin is swapped out, the selector below simply stops matching;
   nothing breaks, the overlap just comes back. */

:root[data-frb-bar="pinned"] :is(.chaty-widget, .cky-btn-revisit-wrapper, .wpr-stt-btn) {
	transform: translateY(calc(var(--frb-lift, 0px) * -1));
	transition: transform 220ms cubic-bezier(0.2, 0, 0, 1);
}

/* Desktop has the room, and lifting a chat bubble halfway up a 1440px screen
   looks like a bug rather than a courtesy. The bar only overlaps the corners
   at the width where it spans them. */
@media (min-width: 900px) {

	:root[data-frb-bar="pinned"] :is(.chaty-widget, .cky-btn-revisit-wrapper, .wpr-stt-btn) {
		transform: none;
	}
}

/* Back-to-top is the one that goes.
   Three floating controls stacked above a bar is still three floating
   controls, and this is the one with a substitute: the flow is a single
   column the customer is already scrolling, and our own bar is pinned to the
   bottom of it as a fixed point of reference. Chat and consent have no
   substitute — one is how they ask a question, the other is a legal
   obligation — so those are lifted, not hidden. */
@media (max-width: 899px) {

	:root[data-frb-bar="pinned"] .wpr-stt-btn {
		visibility: hidden !important;
	}
}

/* Someone on "reduce motion" has asked not to be moved. They still get the
   position, just not the slide into it. */
@media (prefers-reduced-motion: reduce) {

	:root[data-frb-bar="pinned"] :is(.chaty-widget, .cky-btn-revisit-wrapper, .wpr-stt-btn) {
		transition: none;
	}
}