/*
 * SECTION:  Product page: sticky price bar (phone and tablet)
 * File:     assets/css/pages/product/sol-product-stickybar.css
 * Used by:  template-parts/product/sol-product-stickybar.php
 * To remove: delete this file and its line in inc/assets.php (handle "sol-product-stickybar").
 */

.sol-stickybar {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px var(--sol-gutter) calc(10px + env(safe-area-inset-bottom, 0px));
	background: var(--sol-header-bg);
	backdrop-filter: blur(10px);
	border-top: 1px solid var(--sol-line);
	transition: transform var(--sol-normal) var(--sol-ease);
}

.sol-stickybar.is-hidden {
	transform: translateY(110%);
}

.sol-stickybar strong {
	display: block;
	font-size: 1.125rem;
}

.sol-stickybar del {
	font-size: 0.875rem;
	font-weight: 400;
	color: var(--sol-muted);
}

.sol-stickybar ins {
	text-decoration: none;
}

/* The buy box is always in view on desktop, so the bar is not needed.
   Keep this rule last: it must come after the base rule above. */
@media (min-width: 1100px) {
	.sol-stickybar {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sol-stickybar {
		transition: none;
	}
}