/*
Sticky mobile buy bar, built client side by sticky-buy.js. It strips every id off the clones, which
is why this file restates id-keyed rules from products.css under .pd_sticky_buy instead.

No media query in here: the breakpoint is on the enqueue (functions.php) and in sticky-buy.js.
*/

.pd_sticky_buy {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	/* over the page, under the two modals (#pd_atc_overlay and #pd_wl_overlay are 99999999) and
	   well under #clickloader and #preloader */
	z-index: 9999;
	background: #fefdfd;
	border-top: 1px solid #e1d3c8;
	/* env() clears the iOS home indicator */
	padding: 6px 10px calc(6px + env(safe-area-inset-bottom));
	transform: translateY(110%);
	visibility: hidden;
	-webkit-transition: transform 0.25s ease, visibility 0.25s ease; transition: transform 0.25s ease, visibility 0.25s ease;
}
/* transform, not height, so nothing reflows; visibility keeps the hidden bar out of the tab order */
.pd_sticky_buy-show {
	transform: translateY(0);
	visibility: visible;
}
/* both modals cover the viewport and set overflow:hidden — a bar floating over the dimmed backdrop
   is just noise. Two classes deep, so this beats .pd_sticky_buy-show */
body.pd_atc_open .pd_sticky_buy,
body.pd_wl_open .pd_sticky_buy {
	transform: translateY(110%);
	visibility: hidden;
}
@media (prefers-reduced-motion: reduce) {
	.pd_sticky_buy {
		-webkit-transition: none; transition: none;
	}
}


/*
One scrolling row. .product_shades-item is inline-block in products.css, so left alone the clones
would wrap. Don't shrink below 60px — the -new-alert corner flag has fixed 28px borders and breaks.
*/
.pd_sticky_buy-shades_wrap {
	position: relative;
	margin-bottom: 6px;
}
.pd_sticky_buy-shades {
	/* the offsetParent for the swatches, which are position:relative — centre() in sticky-buy.js
	   measures offsetLeft against this box */
	position: relative;
	display: flex;
	flex-wrap: nowrap;
	gap: 6px;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	/* a sideways swipe on the row must not fight the page's vertical scroll */
	touch-action: pan-x;
	scrollbar-width: none;
	/* room for the selected swatch's outline offset, which would otherwise be clipped */
	padding: 3px 0;
	/* only safe while the row fits — see the override below */
	justify-content: center;
}
/*
Centring a scrolling flex row pushes the overflow past its start edge, where it can't be scrolled
back to — so the first swatches would be unreachable. sticky-buy.js sets the class.
*/
.pd_sticky_buy-scrollable .pd_sticky_buy-shades {
	justify-content: flex-start;
}
/* same way #pd_prod_right_side hides its scrollbar (products.css) */
.pd_sticky_buy-shades::-webkit-scrollbar {
	display: none;
}
.pd_sticky_buy .product_shades-item {
	/* none of them shrink to fit — that is what makes the row scroll rather than squash */
	flex: 0 0 auto;
}
/*
The picker's selected border-color:#fff (products.css) vanishes against this bar, so an ink outline
instead. No outline-offset, unlike the focus ring below — at this size a detached ring reads wrong.
*/
.pd_sticky_buy .product_shades-item-selected {
	outline: 2px solid #4f4644;
}
.pd_sticky_buy .product_shades-item:focus-visible,
.pd_sticky_buy .pd_sticky_buy-btn:focus-visible,
.pd_sticky_buy .pd_sticky_buy-heart:focus-visible {
	outline: 2px solid #ae928c;
	outline-offset: 3px;
}
/* scroll affordance, shown only while there is somewhere to scroll to — sticky-buy.js sets both classes */
.pd_sticky_buy-shades_wrap::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 28px;
	pointer-events: none;
	background: -webkit-linear-gradient(left, rgba(254,253,253,0), #fefdfd);
	background: linear-gradient(to right, rgba(254,253,253,0), #fefdfd);
	opacity: 0;
	-webkit-transition: opacity 0.2s ease; transition: opacity 0.2s ease;
}
.pd_sticky_buy-scrollable:not(.pd_sticky_buy-at_end)::after {
	opacity: 1;
}


.pd_sticky_buy-actions {
	display: flex;
	align-items: center;
	gap: 8px;
}
.pd_sticky_buy-btn {
	flex: 1 1 auto;
	/* .product_button's "margin: 20px 0 0" starts applying once the flex parent blockifies this <a> */
	margin: 0;
	padding: 12px 15px;
	text-decoration: none;
}
/* .product_button:hover goes white, which is tuned to the product panel's background, not this one */
.pd_sticky_buy-btn:hover {
	border-color: #ae928c;
	color: #ae928c;
	border-radius: 35px;
}
/* restated from #buy_now.pd_adding (products.css); must come after the hover rule to beat it */
.pd_sticky_buy .pd_adding {
	opacity: .5;
	cursor: default;
	border-color: #4f4644;
	color: #4f4644;
	border-radius: 0;
}


/* restated from #pd_wishlist_btn (products.css) — the clone has no id for those rules to reach */
.pd_sticky_buy-heart {
	flex: 0 0 auto;
	align-self: stretch;
	aspect-ratio: 1;
	min-width: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid #4f4644;
	background: none;
	color: #4f4644;
	cursor: pointer;
	-webkit-transition: all 0.2s ease; transition: all 0.2s ease;
}
/* white on hover in products.css, and it would disappear here — mauve instead, as the button above */
.pd_sticky_buy-heart:hover {
	border-color: #ae928c;
	color: #ae928c;
	border-radius: 50%;
}
.pd_sticky_buy-heart.pd_in_wishlist {
	background: #4f4644;
	color: #fff;
}