/* Sticky add-to-cart bar — TP-844 (cache-bust: r3 mobile-2row) */

/* Sentinel element observed by IntersectionObserver. Sits in document flow
 * right after the main add-to-cart button. 1px high, hidden visually,
 * never display:none — so the observer reliably sees it cross the top
 * edge of the viewport when the user scrolls past. */
.sticky-atc-sentinel {
	display: block;
	height: 1px;
	width: 100%;
	pointer-events: none;
	visibility: hidden;
	margin: 0;
}

/* The original .form-buttons stays visible at its natural position even
 * while the sticky bar is showing — by design. (Previously we faded it
 * out for a "morph" feel; the client preferred both visible.) */

/* Reserve space at the bottom of the page when the sticky bar is visible
 * so that footer / reviews / cross-sells aren't hidden behind the bar.
 * 72px = sticky bar height (40px controls + 16px*2 padding).
 * env(safe-area-inset-bottom) covers the home indicator strip on notched
 * iPhones (requires viewport-fit=cover in <meta name=viewport>). */
body.sticky-atc--has-replacement {
	padding-block-end: calc(72px + env(safe-area-inset-bottom, 0px));
}
@media (max-width: 768px) {
	body.sticky-atc--has-replacement {
		padding-block-end: calc(64px + env(safe-area-inset-bottom, 0px));
	}
}

/* The site has a floating WhatsApp icon (.whatsapp-floating) bottom-left
 * and the Cookiebot consent widget (#CookiebotWidget) bottom-right — both
 * would otherwise sit behind the sticky bar. Lift each up by the bar's
 * height (transform animates smoothly with the bar's slide).
 *
 * Pin Cookiebot's base position to bottom:10px (WhatsApp uses bottom:10px in
 * style.css) so both icons sit at the same vertical level. !important fights
 * Cookiebot's inline positioning from their CDN-loaded script. */
#CookiebotWidget {
	bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
}
.whatsapp-floating,
#CookiebotWidget {
	transition: transform 380ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
body.sticky-atc--has-replacement .whatsapp-floating,
body.sticky-atc--has-replacement #CookiebotWidget {
	transform: translateY(-72px);
}
@media (max-width: 768px) {
	body.sticky-atc--has-replacement .whatsapp-floating,
	body.sticky-atc--has-replacement #CookiebotWidget {
		transform: translateY(-64px);
	}
}

/* Higher specificity (aside.sticky-atc) + !important on the critical
 * positioning properties defeats every plugin/theme rule that might
 * try to override .sticky-atc on mobile. Physical properties are
 * mandatory (logical inset-* are not enough — buggy on older mobile WebKit). */
aside.sticky-atc {
	position: fixed !important;
	bottom: 0 !important;
	left: 0 !important;
	right: 0 !important;
	top: auto !important;
	inset-block-end: 0;
	inset-inline: 0;
	z-index: 9000; /* under mini-cart drawer (usually ~99999), above page */
	background: #fff;
	border-block-start: 1px solid #e0e0e0;
	box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.06);
	transform: translateY(110%);
	transition: transform 380ms cubic-bezier(0.2, 0.8, 0.2, 1),
	            opacity   380ms cubic-bezier(0.2, 0.8, 0.2, 1);
	pointer-events: none;
	opacity: 0;
	margin: 0 !important;
	/* iOS safe-area: the bar's background extends to the device bottom edge
	 * (behind the home indicator) but the inner form content gets padded up
	 * by the safe-area height so nothing sits underneath the indicator.
	 * Needs viewport-fit=cover in the <meta name=viewport> tag — without it
	 * env() returns 0 and this is a no-op. */
	padding-block-end: env(safe-area-inset-bottom, 0px);
}

aside.sticky-atc.sticky-atc--visible {
	/* !important fights any mobile-side override (theme media queries
	 * or plugin CSS) that might re-apply a transform / opacity:0 on
	 * narrow viewports. The reason for the heavy hammer: Guy reported
	 * the bar staying below-viewport on mobile while desktop worked. */
	transform: translateY(0) !important;
	opacity: 1 !important;
	pointer-events: auto;
	visibility: visible !important;
}

/* Form is flex-row with three children:
 *   1. .sticky-atc__details   (product info — visual right in RTL, read first)
 *   2. .sticky-atc__choose    (variation select + quantity stepper — middle)
 *   3. button.sticky-atc__btn (add-to-cart — visual left of the cluster)
 *
 * No justify-content / no flex-grow on any child: items cluster at flex-start
 * (visual right in RTL) and the left side stays empty. That's the requested
 * "all aligned to the right" look. */
.sticky-atc__form {
	display: flex;
	align-items: center;
	gap: 1rem;
	max-width: 1280px;
	margin-inline: auto;
	padding: 0.6rem 1rem;
}

.sticky-atc__details {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	color: inherit;
	text-decoration: none;
	flex: 0 0 auto;
	min-width: 0;
	max-width: 40%;
}

.sticky-atc__choose {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex: 0 0 auto;
}

.sticky-atc__thumb {
	width: 48px;
	height: 48px;
	object-fit: cover;
	border-radius: 4px;
	flex-shrink: 0;
}

.sticky-atc__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.sticky-atc__title {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sticky-atc__price {
	font-size: 14px;
	line-height: 1.2;
	color: #c00;
}
.sticky-atc__price del {
	color: #888;
	font-weight: 400;
	margin-inline-end: 6px;
}

/* Variation select */
.sticky-atc__variation-select {
	min-width: 110px;
	height: 40px;
	padding: 0 0.5rem;
	border: 1px solid #ccc;
	border-radius: 2px;
	font-size: 14px;
	background: #fff;
	color: #222;
}

/* Quantity controls (same class structure as the main form so the existing
 * delegated +/- handler in js/quantity-addon-fix.js works for free.) */
.sticky-atc__quantity .wrapper {
	display: flex;
	align-items: center;
}
.sticky-atc__quantity .button {
	width: 32px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	user-select: none;
	border: 1px solid #ccc;
	background: #fafafa;
	font-size: 18px;
	line-height: 1;
}
.sticky-atc__quantity .button-minus {
	border-start-start-radius: 2px;
	border-end-start-radius: 2px;
	border-inline-end: 0;
}
.sticky-atc__quantity .button-plus {
	border-start-end-radius: 2px;
	border-end-end-radius: 2px;
	border-inline-start: 0;
}
.sticky-atc__quantity .input-text {
	width: 48px;
	height: 40px;
	text-align: center;
	border: 1px solid #ccc;
	border-radius: 0;
	font-size: 14px;
	-moz-appearance: textfield;
	padding: 0;
}
.sticky-atc__quantity .input-text::-webkit-outer-spin-button,
.sticky-atc__quantity .input-text::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Add-to-cart button */
.sticky-atc__btn {
	height: 40px;
	padding: 0 1.2rem;
	background: #FF9C06;
	color: #fff;
	border: 0;
	border-radius: 2px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
}
.sticky-atc__btn:hover {
	filter: brightness(0.95);
}
.sticky-atc__btn[disabled],
.sticky-atc__btn.is-disabled {
	background: #ccc;
	color: #666;
	cursor: not-allowed;
}
.sticky-atc__btn.loading {
	opacity: 0.7;
	cursor: progress;
}

/* Hide the bar when the mini-cart drawer is open. */
body.active-mini-cart .sticky-atc {
	transform: translateY(110%);
	pointer-events: none;
}

/* Mobile (≤768px) — TWO-ROW layout via flex-wrap:
 *   Row 1 (top, full width): .sticky-atc__details (thumb + title + price)
 *   Row 2 (bottom): .sticky-atc__variation-select + .sticky-atc__qty-btn
 * Achieved by giving .details flex-basis: 100% so it wraps to its own row;
 * the other two children share the next line. RTL puts variation on the
 * right of that bottom row, qty+button on the left. */
/* Mobile (≤768px) — two rows, all right-aligned in RTL:
 *   Row 1 (top, full width): .sticky-atc__details
 *   Row 2 (bottom, right-clustered): .sticky-atc__choose + .sticky-atc__btn
 */
@media (max-width: 768px) {
	.sticky-atc__form {
		flex-wrap: wrap;
		align-items: center;
		gap: 0.5rem;
		padding: 0.7rem 1.1rem 1rem;
	}

	.sticky-atc__details {
		flex: 1 1 100%;
		width: 100%;
		min-width: 0;
		max-width: none;
		gap: 0.5rem;
	}
	.sticky-atc__thumb {
		width: 36px;
		height: 36px;
		flex-shrink: 0;
	}
	.sticky-atc__text {
		flex: 1 1 auto;
		min-width: 0;
	}
	.sticky-atc__title,
	.sticky-atc__price {
		font-size: 13px;
	}

	.sticky-atc__choose {
		gap: 0.4rem;
	}
	.sticky-atc__variation-select {
		min-width: 100px;
		height: 40px;
		font-size: 13px;
	}
	.sticky-atc__quantity .button {
		width: 32px;
		height: 40px;
		font-size: 16px;
	}
	.sticky-atc__quantity .input-text {
		width: 40px;
		height: 40px;
		font-size: 14px;
	}
	.sticky-atc__btn {
		height: 40px;
		padding: 0 0.9rem;
		font-size: 14px;
	}
	.sticky-atc__btn svg {
		display: none;
	}
}

/* Bar is taller on mobile (two rows + extra padding) — increase the body
 * padding so footer content doesn't hide behind it. */
@media (max-width: 768px) {
	body.sticky-atc--has-replacement {
		padding-block-end: 125px;
	}
	body.sticky-atc--has-replacement .whatsapp-floating,
	body.sticky-atc--has-replacement #CookiebotWidget {
		transform: translateY(-125px);
	}
}