/* AJAX Add to Cart with Sticky Bar for WooCommerce */

/* --------------------------------------------------------------------------
   Work Sans (variable font, weights 100–900), self-hosted — no third-party
   requests, per the WordPress.org guideline that all assets ship with the
   plugin. Files: Google Fonts (OFL licensed), latin + latin-ext subsets.
   -------------------------------------------------------------------------- */
/* Keep the SAME button background color while processing. pointer-events
   blocks double clicks without using "disabled" (which recolored the button
   to purple). The button shows a spinner plus the "Adding…" label. */
.single_add_to_cart_button.aatc-loading,
.aatc-sticky-bar__button.aatc-loading {
	cursor: progress;
	pointer-events: none;
	opacity: 1 !important;
	filter: none !important;
}

/* Inline spinner shown before the "Adding…" text. */
.single_add_to_cart_button.aatc-loading .aatc-spinner,
.aatc-sticky-bar__button.aatc-loading .aatc-spinner {
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-right: 0.5em;
	vertical-align: -0.15em;
	box-sizing: border-box;
	border: 2px solid rgba( 255, 255, 255, 0.4 );
	border-top-color: #fff;          /* spinner "pointer" color */
	border-radius: 50%;
	animation: aatc-spin 0.7s linear infinite;
}

@keyframes aatc-spin {
	to {
		transform: rotate( 360deg );
	}
}

/* --------------------------------------------------------------------------
   Out of stock / disabled buttons
   WooCommerce core recolors ".button.alt.disabled" — and, crucially, its
   :hover — to purple (#a46497). Keep the site's standard green instead,
   only dimmed, both on the product form button and on the sticky bar one.
   -------------------------------------------------------------------------- */
.woocommerce .single_add_to_cart_button.disabled,
.woocommerce .single_add_to_cart_button.disabled:hover,
.woocommerce .single_add_to_cart_button:disabled,
.woocommerce .single_add_to_cart_button:disabled:hover,
.single_add_to_cart_button.disabled,
.single_add_to_cart_button.disabled:hover,
.single_add_to_cart_button:disabled,
.single_add_to_cart_button:disabled:hover,
.aatc-sticky-bar__button.disabled,
.aatc-sticky-bar__button.disabled:hover,
.aatc-sticky-bar__button:disabled,
.aatc-sticky-bar__button:disabled:hover {
	background-color: #669560 !important;
	color: rgb( 255, 255, 255 ) !important;
	opacity: 0.5 !important;
	cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   Sticky "add to cart" bar (single product pages)
   Slim, single-line bar that slides up once the buyer scrolls past the
   purchase form. Hidden state uses visibility so it is never tab-focusable.
   -------------------------------------------------------------------------- */
.aatc-sticky-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	/* Overridable so the bar can be layered under a cookie banner, chat
	   widget or theme sticky footer:  :root { --aatc-sticky-z: 50; }  */
	z-index: var( --aatc-sticky-z, 9990 );
	display: flex;
	align-items: center;
	gap: 1rem;
	box-sizing: border-box;
	/* One variable drives both vertical sides, so they cannot drift apart:
	   the bar reads as a band with the buttons centred in it, not as content
	   pushed up off the bottom edge. The room exists because the LiveChat
	   launcher floats in this same corner and was sitting on the button — the
	   bar yields the space rather than fighting it for z-index, which would
	   only move the problem to whichever widget lost.
	   Tune both at once with:  :root { --aatc-sticky-gap: 12px; }  */
	padding: var( --aatc-sticky-gap, 50px ) 1rem;
	/* Bottom only: the iPhone home-indicator inset, on top of the same gap. */
	padding-bottom: calc( var( --aatc-sticky-gap, 50px ) + env( safe-area-inset-bottom, 0px ) );
	background: #fff;
	color: #222;
	border-top: 1px solid rgba( 0, 0, 0, 0.08 );
	box-shadow: 0 -4px 16px rgba( 0, 0, 0, 0.08 );
	transform: translateY( 100% );
	visibility: hidden;
	transition: transform 0.25s ease, visibility 0.25s ease;
}

/* Predictable sizing for everything inside the bar, whatever the theme. */
.aatc-sticky-bar *,
.aatc-sticky-bar *::before,
.aatc-sticky-bar *::after {
	box-sizing: border-box;
}

.aatc-sticky-bar--visible {
	transform: translateY( 0 );
	visibility: visible;
}

@media ( prefers-reduced-motion: reduce ) {
	.aatc-sticky-bar {
		transition: none;
	}
}

.aatc-sticky-bar__info {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	min-width: 0;          /* lets the title ellipsize instead of overflowing */
	margin-right: auto;
}

/* Product title: Work Sans 800, dark blue (rgb 31 55 85), 32px/35px. The
   !important flags keep theme rules from restyling it. */
.aatc-sticky-bar__title {
	font-family: "Work Sans", sans-serif !important;
	font-style: normal !important;
	font-weight: 800 !important;
	font-size: 32px !important;
	line-height: 35px !important;
	color: rgb( 31, 55, 85 ) !important;
	text-transform: uppercase !important;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Bar price. Regular price: Work Sans 500 in blue-gray. When the product is
   on sale, WooCommerce renders <del> (regular) + <ins> (discounted); flex
   "order" guarantees the DISCOUNTED price always comes BEFORE the regular
   one, whatever the theme outputs. */
.aatc-sticky-bar__price {
	display: inline-flex;
	align-items: baseline;
	gap: 0.5em;
	white-space: nowrap;
	flex-shrink: 0;
	font-family: "Work Sans", sans-serif !important;
	font-style: normal !important;
	font-weight: 500 !important;
	font-size: 32px !important;
	line-height: 32px !important;
	color: rgb( 78, 115, 138 ) !important;
}

/* Discounted price — Work Sans 800, green — shown FIRST. */
.aatc-sticky-bar__price ins {
	order: 0;
	font-weight: 800 !important;
	color: rgb( 102, 149, 96 ) !important;
	text-decoration: none !important;
	background: none !important;
}

/* Regular (crossed-out) price — Work Sans 500, blue-gray — shown after. */
.aatc-sticky-bar__price del {
	order: 1;
	font-weight: 500 !important;
	color: rgb( 78, 115, 138 ) !important;
	opacity: 1 !important;
}

/* Neutralize theme colors/weights on WooCommerce's inner price spans. */
.aatc-sticky-bar__price .woocommerce-Price-amount,
.aatc-sticky-bar__price .amount,
.aatc-sticky-bar__price bdi,
.aatc-sticky-bar__price span {
	font-family: inherit !important;
	font-weight: inherit !important;
	font-size: inherit !important;
	line-height: inherit !important;
	color: inherit !important;
}

/* Every purchase button the page offers, side by side. */
.aatc-sticky-bar__actions {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-shrink: 0;
	min-width: 0;
}

/* Bar button: Work Sans 800, white on green. The !important flags shield the
   spec from theme ".button" rules, which this element also carries. */
.aatc-sticky-bar__button {
	flex-shrink: 0;
	white-space: nowrap;
	font-family: "Work Sans", sans-serif !important;
	font-style: normal !important;
	font-weight: 800 !important;
	font-size: 32px !important;
	line-height: 32px !important;
	color: rgb( 255, 255, 255 ) !important;
	background: #669560 !important;
	border: 0 !important;
	border-radius: 15px !important;
	padding: 15px 70px !important;
}

.aatc-sticky-bar__button:hover,
.aatc-sticky-bar__button:focus {
	color: rgb( 255, 255, 255 ) !important;
	background: #588351 !important;
}

/* Secondary button: outlined instead of filled, and a size down. The product
   page draws the same distinction between its two ways to buy, and the bar
   only mirrors what is there — the second option stays available without
   competing with the first. */
.aatc-sticky-bar__button--secondary {
	font-size: 22px !important;
	line-height: 24px !important;
	color: #669560 !important;
	background: transparent !important;
	border: 2px solid #669560 !important;
	padding: 13px 32px !important;
}

.aatc-sticky-bar__button--secondary:hover,
.aatc-sticky-bar__button--secondary:focus {
	color: rgb( 255, 255, 255 ) !important;
	background: #669560 !important;
	border-color: #669560 !important;
}

/* Mirrors a button the page has disabled — no variation chosen yet. It stays
   clickable on purpose: the click scrolls back up to the options. */
.aatc-sticky-bar__button--off {
	opacity: 0.45;
}

/* Two buttons need the room the single button's very wide padding was using. */
.aatc-sticky-bar--multi .aatc-sticky-bar__button {
	font-size: 24px !important;
	line-height: 26px !important;
	padding: 14px 32px !important;
}

.aatc-sticky-bar--multi .aatc-sticky-bar__button--secondary {
	font-size: 19px !important;
	line-height: 22px !important;
	padding: 12px 24px !important;
}

/* Tablets: scale the type down so the bar stays slim. */
@media ( max-width: 1024px ) {
	.aatc-sticky-bar__title,
	.aatc-sticky-bar__price {
		font-size: 24px !important;
		line-height: 24px !important;
	}

	.aatc-sticky-bar__button {
		font-size: 24px !important;
		line-height: 24px !important;
		padding: 12px 40px !important;
	}

	.aatc-sticky-bar__button--secondary,
	.aatc-sticky-bar--multi .aatc-sticky-bar__button--secondary {
		font-size: 18px !important;
		line-height: 20px !important;
		padding: 11px 22px !important;
	}
}

/* Phones: stack the bar — title (never truncated, wraps onto extra lines)
   and price on top, full-width button below. */
@media ( max-width: 600px ) {
	.aatc-sticky-bar {
		flex-wrap: wrap;
		gap: 0.5rem 1rem;
	}

	.aatc-sticky-bar__info {
		flex: 1 1 100%;
		flex-wrap: wrap;
		margin-right: 0;
	}

	/* The buttons stack instead of sharing a row: these labels are sentences,
	   and two of them side by side on a phone shrink both into illegibility. */
	.aatc-sticky-bar__actions {
		flex: 1 1 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 0.5rem;
	}

	.aatc-sticky-bar__title {
		white-space: normal;
		overflow: visible;
		text-overflow: clip;
		font-size: 20px !important;
		line-height: 24px !important;
	}

	.aatc-sticky-bar__price {
		font-size: 20px !important;
		line-height: 24px !important;
	}

	/* Full-width row that can SHRINK (min-width: 0 + normal wrapping), so a
	   long label never pushes the button past the bar's right padding. */
	.aatc-sticky-bar__button {
		flex: 1 1 100%;
		width: 100%;
		min-width: 0;
		max-width: 100%;
		margin: 0 !important;
		white-space: normal;
		font-size: 18px !important;
		line-height: 22px !important;
		padding: 12px 20px !important;
	}

	.aatc-sticky-bar__button--secondary,
	.aatc-sticky-bar--multi .aatc-sticky-bar__button,
	.aatc-sticky-bar--multi .aatc-sticky-bar__button--secondary {
		font-size: 16px !important;
		line-height: 20px !important;
		padding: 11px 16px !important;
	}
}