/**
 * APEX Cart Feedback
 *
 * The header is position:absolute and transparent so it can sit over the hero.
 * That is fine at the top of the page and useless once you scroll, so .apex-cf-stuck
 * re-pins it with a real background and a shorter bar.
 */

/* ------------------------------------------------------ sticky header -- */

/*
 * Astra's transparent header pins the bar with `.ast-theme-transparent-header
 * #masthead { position: absolute }` - an ID selector, so a plain class rule
 * here loses and the header silently never sticks. The positioning
 * declarations carry !important to outrank it; everything else wins normally.
 */
.site-header.apex-cf-stuck,
#masthead.apex-cf-stuck {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
	z-index: 999 !important;
	background-color: rgba(12, 12, 12, 0.96);
	box-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
	animation: apex-cf-drop 0.28s ease both;
}

@supports (backdrop-filter: blur(6px)) {
	.site-header.apex-cf-stuck,
	#masthead.apex-cf-stuck {
		background-color: rgba(12, 12, 12, 0.88);
		backdrop-filter: blur(6px);
	}
}

@keyframes apex-cf-drop {
	from {
		transform: translateY(-100%);
	}

	to {
		transform: translateY(0);
	}
}

/* Condense the bar so a 182px header does not eat the viewport. */
.site-header.apex-cf-stuck .main-header-bar {
	padding-top: 6px !important;
	padding-bottom: 6px !important;
	min-height: 0;
	transition: padding 0.25s ease;
}

.site-header.apex-cf-stuck .custom-logo-link img,
.site-header.apex-cf-stuck .astra-logo-svg {
	max-height: 46px !important;
	width: auto !important;
	transition: max-height 0.25s ease;
}

/* Logged-in admins have the 32px WP toolbar pinned above everything. */
.admin-bar .site-header.apex-cf-stuck,
.admin-bar #masthead.apex-cf-stuck {
	top: 32px !important;
}

@media screen and (max-width: 782px) {
	.admin-bar .site-header.apex-cf-stuck,
	.admin-bar #masthead.apex-cf-stuck {
		top: 46px !important;
	}
}

/* ------------------------------------------------------ cart badge ----- */

.apex-cart-icon .elementor-button-icon-qty {
	transition: transform 0.2s ease, background-color 0.2s ease;
}

.apex-cart-icon.apex-cf-pop .elementor-button-icon-qty {
	animation: apex-cf-pop 0.42s ease;
}

@keyframes apex-cf-pop {
	0% {
		transform: scale(1);
	}

	40% {
		transform: scale(1.45);
	}

	100% {
		transform: scale(1);
	}
}

/* ------------------------------------------------------ messages ------- */

/*
 * Inline placement: the message rides in the product grid as a full-width row
 * directly above the product that was clicked, so it matches the product box
 * width at every breakpoint without hard-coding one.
 */
.apex-cf-notice-item {
	list-style: none;
	width: 100%;
	max-width: 100%;
	flex: 0 0 100%;
	grid-column: 1 / -1;
	margin: 0 0 16px;
	padding: 0;
}

.apex-cf-notice-item::before,
.apex-cf-notice-item::after {
	display: none;
}

.apex-cf-notice-item .apex-cf-notice {
	margin-bottom: 0;
}

/* Pinned fallback, used only where there is no product grid to sit in. */
.apex-cf-stack {
	position: fixed;
	top: var(--apex-cf-top, 24px);
	left: 50%;
	transform: translateX(-50%);
	z-index: 100001;
	width: calc(100% - 32px);
	max-width: 520px;
	pointer-events: none;
	transition: top 0.25s ease;
}

.apex-cf-notice {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 20px;
	margin-bottom: 10px;
	border-radius: 4px;
	color: #fff;
	font-size: 15px;
	line-height: 1.35;
	letter-spacing: 0.02em;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
	pointer-events: auto;
	opacity: 0;
	transform: translateY(-14px);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.apex-cf-notice.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/*
 * One brand colour for every alert - #D51B29 is the Add To Cart red. Success
 * and refusal are told apart by the icon and the wording, not by hue.
 */
.apex-cf-notice--success,
.apex-cf-notice--error {
	background-color: #d51b29;
	border-left: 4px solid #8e0f19;
}

.apex-cf-notice__icon {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
}

.apex-cf-notice__body {
	flex: 1 1 auto;
	min-width: 0;
	font-weight: 600;
}

/* Limit copy is authored server side and can arrive wrapped in a paragraph. */
.apex-cf-notice__body p {
	margin: 0;
	font-weight: 400;
}

.apex-cf-notice__link {
	flex: 0 0 auto;
	color: #fff !important;
	text-decoration: underline;
	text-underline-offset: 3px;
	font-weight: 700;
	text-transform: uppercase;
	white-space: nowrap;
}

.apex-cf-notice__link:hover,
.apex-cf-notice__link:focus {
	color: #fff !important;
	opacity: 0.8;
}

.apex-cf-notice__close {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
	cursor: pointer;
}

.apex-cf-notice__close:hover,
.apex-cf-notice__close:focus {
	background: rgba(255, 255, 255, 0.3);
}

@media (max-width: 600px) {
	.apex-cf-notice {
		flex-wrap: wrap;
		font-size: 14px;
	}

	.apex-cf-notice__body {
		flex: 1 1 100%;
		order: 2;
	}

	.apex-cf-notice__link {
		order: 3;
	}
}

@media (prefers-reduced-motion: reduce) {
	.site-header.apex-cf-stuck,
	.apex-cart-icon.apex-cf-pop .elementor-button-icon-qty {
		animation: none;
	}

	.apex-cf-notice {
		transition: opacity 0.2s ease;
		transform: none;
	}
}

/* ------------------------------------------------ empty cart layout --- */

/*
 * On the empty cart the two background images collide: .main-background paints
 * the hero from the top at `background-size: 100%`, and .site-content paints
 * the antlers from the bottom at `contain`. Both are driven by WIDTH, not by
 * the height of the box they sit in, so at any given viewport they need
 *
 *     hero 1509/2752 (0.548) + antlers 816/2560 (0.319) = 0.867 x width
 *
 * of vertical room before they stop overlapping. That is why a fixed pixel
 * min-height cannot work: at a 1919px-wide window the hero alone renders
 * 1052px tall, so min-height:1000px still leaves the full 612px overlap.
 * A width-relative value scales with the images themselves; the +64px is the
 * breathing room between them.
 */
/* Any cart page, not just the empty one: the two images overlap whenever the
 * cart content is shorter than they need, which a short cart is too. min-height
 * only bites when the content is shorter, so a long cart is unaffected. */
.woocommerce-cart .site-content {
	min-height: calc(87vw + 64px);
}

/*
 * Air between "Your cart is currently empty." and Return to Shop: 60px on top
 * of the 32px that was already there. Setting margin-bottom here replaces that
 * gap rather than adding to it (the original came from a collapsed margin), so
 * the value is the total, not the increment.
 */
.apex-cf-cart-empty .wc-empty-cart-message {
	margin-bottom: 92px;
}

/* ------------------------------------------------ added-state tick ---- */

/*
 * WooCommerce stamps .added on the button after a successful add, which
 * woocommerce.min.css renders as a checkmark glyph (font-family: WooCommerce)
 * after the label. Nobody ever saw it before, because the page redirected away
 * on add; now that the shopper stays put it sits on the button for good. The
 * message above the product already confirms the add, so this is just noise.
 *
 * The .added class itself is left alone - other code keys off it.
 */
.woocommerce a.button.added::after,
.woocommerce button.button.added::after,
.woocommerce input.button.added::after,
.woocommerce #respond input#submit.added::after {
	content: none;
	display: none;
}

/* --------------------------------------------- woo notices on cart/checkout --- */

/*
 * WooCommerce prints its own errors on the cart and checkout - the SMS opt-in
 * refusal, bag-limit refusals, payment failures. They arrived washed out (50%
 * opacity red, 14px, weight 300) next to the solid banner the shop uses, so they
 * are brought in line here. Woo keeps its own icon in the left padding, which is
 * why only the right and vertical padding are restated.
 */
.woocommerce-cart .woocommerce-error,
.woocommerce-checkout .woocommerce-error {
	/* !important because styles.css sets a 50%-opacity red the same way. */
	background-color: #d51b29 !important;
	border-left: 4px solid #8e0f19;
	border-radius: 4px;
	padding-top: 16px;
	padding-right: 20px;
	padding-bottom: 16px;
	color: #fff;
	font-size: 15px;
	line-height: 1.35;
	letter-spacing: 0.02em;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.woocommerce-cart .woocommerce-error li,
.woocommerce-checkout .woocommerce-error li {
	color: #fff;
	font-weight: 600;
}

/* --------------------------------------------- checkout field radius --- */

/*
 * Checkout fields arrived mismatched: the text inputs at 0px and the Select2
 * country/state controls at 3px. Scoped to the checkout form so the header
 * search box and the score-form selects elsewhere on the site keep their own
 * styling. .input-text also catches the First Data card fields, which stay
 * hidden until that payment method is chosen. Checkboxes and radios are left
 * out on purpose - a 10px radius on a tickbox is not what was asked for.
 */
.woocommerce-checkout form.checkout .input-text,
.woocommerce-checkout form.checkout select,
.woocommerce-checkout form.checkout textarea,
.woocommerce-checkout form.checkout .select2-selection,
.woocommerce-checkout form.checkout .select2-selection--single {
	border-radius: 10px;
}

/*
 * The country/state controls only reach the 44px the text inputs use because of
 * an Elementor rule scoped to .page-id-15459. That breaks whenever the checkout
 * page ID differs - which it will on production - and elementor.css is served at
 * a fixed ?ver=1.0, so a browser holding an older copy shows the short 23.8px
 * control instead. Owning the select2 height here keeps it tied to the inputs
 * regardless of page ID or cache.
 */
.woocommerce-checkout form.checkout .input-text,
.woocommerce-checkout form.checkout .select2-container .select2-selection--single {
	/* One height governs every control on the form. The text inputs land on 45px
	   from their own padding; pinning both here stops the two drifting apart. */
	min-height: 45px;
}

.woocommerce-checkout form.checkout .select2-container .select2-selection--single {
	padding: 10px;
}

/* ------------------------------------------------ fixed cart quantities --- */

/*
 * Where a line can only ever be 1 - a single-buck state, or a Plus+, which is
 * one per state - the paddles cannot do anything, and clicking a control that
 * does nothing reads as broken. Hide them there and leave the number on its own.
 * The theme injects .plus/.minus as siblings after render, so both the :has()
 * and sibling forms are needed, mirroring apex_disabled_qty_styles().
 */
.quantity:has(> input.qty[data-apex-fixed]) > .plus,
.quantity:has(> input.qty[data-apex-fixed]) > .minus,
.quantity:has(> input.qty[data-apex-fixed]) > label[for="plus_qty"],
.quantity:has(> input.qty[data-apex-fixed]) > label[for="minus_qty"],
input.qty[data-apex-fixed] ~ .plus,
input.qty[data-apex-fixed] ~ .minus {
	/* visibility, not display: the paddles keep their space so the white number
	   box lands in the same place on every row. Hidden elements take no clicks,
	   so they are still out of the way. */
	visibility: hidden !important;
}

/* Dismiss control that this plugin adds to WooCommerce's inline coupon error
   (p.coupon-error-notice) under the Apply Promo Code button. The notice's own
   centring lives in the controller plugin's elementor.css.

   Specificity matters here: that same file carries
   `.coupons .coupon button { width: 100%; border: 1px solid white; }` (0,2,1),
   which stretched this button into a full-width ellipse. These selectors are
   (0,3,0) so they win, and the width/border/text-transform resets are what
   actually undo it. */
.coupon .coupon-error-notice .apex-cf-coupon-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	min-width: 0;
	height: 22px;
	margin: 0 0 0 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.16);
	color: inherit;
	line-height: 1;
	text-transform: none;
	cursor: pointer;
	vertical-align: middle;
}

.coupon .coupon-error-notice .apex-cf-coupon-close:hover,
.coupon .coupon-error-notice .apex-cf-coupon-close:focus {
	background: rgba(255, 255, 255, 0.3);
}