/* FP Go Buttons, flyingpenguin.ai
 *
 * The buttons that move a customer towards paying (add to basket, choose options, proceed to
 * checkout, place order) get one shared "green light" treatment across all three stores, so they
 * stop blending into each store's accent colour.
 *
 * Everything keys off body classes the plugin prints (fpgo, fpgo-loop, fpgo-single, fpgo-mini,
 * fpgo-basket, fpgo-checkout, fpgo-motion-*), so switching an area off in the settings removes it
 * without touching this file. Colours arrive as custom properties from the settings page.
 *
 * Every selector starts html body:not(#fpgo-x): the :not(#id) adds ID-level weight, which is
 * needed because the checkout styling sets button#place_order with an ID selector and !important.
 *
 * The sheen and chevron are BACKGROUND LAYERS, not ::before/::after. Shoptimizer and WooCommerce
 * already use ::after on the add to basket buttons for the loading spinner, and a pseudo element
 * here would fight it.
 */

@property --fpgo-sheen-x {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 135%;
}

@property --fpgo-ring-size {
	syntax: '<length>';
	inherits: false;
	initial-value: 0px;
}

@property --fpgo-ring-alpha {
	syntax: '<number>';
	inherits: false;
	initial-value: 0;
}

@property --fpgo-chev-x {
	syntax: '<length>';
	inherits: false;
	initial-value: 0px;
}

:root {
	--fpgo-base: #0e7f39;
	--fpgo-top: #1a9a4a;
	--fpgo-bottom: #0a6b2f;
	--fpgo-ink: #ffffff;
	--fpgo-ring: #0a5c2b;
	--fpgo-glow: rgba(20, 150, 70, 0.42);
	--fpgo-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--fpgo-pulse: #1a9a4a;
	--fpgo-notify: var(--gsmp-accent, #163c9f);
	--fpgo-bell: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/%3E%3Cpath d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/%3E%3C/svg%3E");
	--fpgo-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3.5 10.5 8 6 12.5'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------ the shared green light */

html body:not(#fpgo-x).fpgo-loop ul.products li.product a.button.add_to_cart_button,
html body:not(#fpgo-x).fpgo-loop ul.products li.product a.button.product_type_variable,
html body:not(#fpgo-x).fpgo-loop ul.products li.product a.button.product_type_simple,
html body:not(#fpgo-x).fpgo-loop ul.products li.product a.button.product_type_grouped,
html body:not(#fpgo-x).fpgo-single #ckwtl-button2,
html body:not(#fpgo-x).fpgo-single .commercekit-waitlist #ckwtl-button,
html body:not(#fpgo-x).fpgo-single .single_add_to_cart_button.button,
html body:not(#fpgo-x).fpgo-mini .widget_shopping_cart .buttons a.button.checkout,
html body:not(#fpgo-x).fpgo-basket .wc-proceed-to-checkout a.checkout-button,
html body:not(#fpgo-x).fpgo-basket a.wc-block-cart__submit-button,
html body:not(#fpgo-x).fpgo-checkout #place_order,
html body:not(#fpgo-x).fpgo-checkout button.wc-block-components-checkout-place-order-button {
	--fpgo-sheen-x: 135%;
	--fpgo-chev-x: 0px;
	position: relative;
	color: var(--fpgo-ink) !important;
	background-color: var(--fpgo-base) !important;
	background-image:
		linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.32) 50%, transparent 62%),
		linear-gradient(180deg, var(--fpgo-top), var(--fpgo-bottom)) !important;
	background-size: 260% 100%, 100% 100% !important;
	background-position: var(--fpgo-sheen-x) 0, 0 0 !important;
	background-repeat: no-repeat !important;
	border: 0 !important;
	text-shadow: 0 1px 0 rgba(0, 40, 15, 0.28);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.22),
		inset 0 -2px 0 rgba(0, 40, 15, 0.22),
		0 4px 12px -6px var(--fpgo-glow),
		0 0 0 var(--fpgo-ring-size) color-mix(in srgb, var(--fpgo-pulse) calc(var(--fpgo-ring-alpha) * 100%), transparent);
	transition:
		transform 180ms var(--fpgo-ease),
		box-shadow 220ms var(--fpgo-ease),
		filter 180ms var(--fpgo-ease),
		--fpgo-chev-x 220ms var(--fpgo-ease);
}

/* The big three carry the chevron: product page add to basket, proceed, place order. */
html body:not(#fpgo-x).fpgo-single #ckwtl-button2,
html body:not(#fpgo-x).fpgo-single .commercekit-waitlist #ckwtl-button,
html body:not(#fpgo-x).fpgo-single .single_add_to_cart_button.button,
html body:not(#fpgo-x).fpgo-basket .wc-proceed-to-checkout a.checkout-button,
html body:not(#fpgo-x).fpgo-basket a.wc-block-cart__submit-button,
html body:not(#fpgo-x).fpgo-checkout #place_order,
html body:not(#fpgo-x).fpgo-checkout button.wc-block-components-checkout-place-order-button {
	background-image:
		var(--fpgo-chevron),
		linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.32) 50%, transparent 62%),
		linear-gradient(180deg, var(--fpgo-top), var(--fpgo-bottom)) !important;
	background-size: 16px 16px, 260% 100%, 100% 100% !important;
	background-position:
		calc(100% - 18px + var(--fpgo-chev-x)) 50%,
		var(--fpgo-sheen-x) 0,
		0 0 !important;
	padding-right: 44px !important;
	padding-left: 44px !important;
}

/* ------------------------------------------------------------------ hover, press, focus */

@media (hover: hover) {
	html body:not(#fpgo-x).fpgo-loop ul.products li.product a.button.add_to_cart_button:hover,
	html body:not(#fpgo-x).fpgo-loop ul.products li.product a.button.product_type_variable:hover,
	html body:not(#fpgo-x).fpgo-loop ul.products li.product a.button.product_type_simple:hover,
	html body:not(#fpgo-x).fpgo-loop ul.products li.product a.button.product_type_grouped:hover,
	html body:not(#fpgo-x).fpgo-single #ckwtl-button2:not([disabled]):hover,
	html body:not(#fpgo-x).fpgo-single .commercekit-waitlist #ckwtl-button:not([disabled]):hover,
	html body:not(#fpgo-x).fpgo-single .single_add_to_cart_button.button:not(.disabled):hover,
	html body:not(#fpgo-x).fpgo-mini .widget_shopping_cart .buttons a.button.checkout:hover,
	html body:not(#fpgo-x).fpgo-basket .wc-proceed-to-checkout a.checkout-button:hover,
	html body:not(#fpgo-x).fpgo-basket a.wc-block-cart__submit-button:hover,
	html body:not(#fpgo-x).fpgo-checkout #place_order:hover,
	html body:not(#fpgo-x).fpgo-checkout button.wc-block-components-checkout-place-order-button:hover {
		--fpgo-chev-x: 4px;
		color: var(--fpgo-ink) !important;
		background-color: var(--fpgo-base) !important;
		transform: translateY(-2px);
		filter: brightness(1.06) saturate(1.12);
		box-shadow:
			inset 0 1px 0 rgba(255, 255, 255, 0.28),
			inset 0 -2px 0 rgba(0, 40, 15, 0.2),
			0 12px 22px -10px var(--fpgo-glow),
			0 3px 6px -2px rgba(0, 40, 15, 0.18),
			0 0 0 var(--fpgo-ring-size) color-mix(in srgb, var(--fpgo-pulse) calc(var(--fpgo-ring-alpha) * 100%), transparent);
	}
}

html body:not(#fpgo-x).fpgo-loop ul.products li.product a.button.add_to_cart_button:active,
html body:not(#fpgo-x).fpgo-loop ul.products li.product a.button.product_type_variable:active,
html body:not(#fpgo-x).fpgo-loop ul.products li.product a.button.product_type_simple:active,
html body:not(#fpgo-x).fpgo-single #ckwtl-button2:not([disabled]):active,
html body:not(#fpgo-x).fpgo-single .commercekit-waitlist #ckwtl-button:not([disabled]):active,
html body:not(#fpgo-x).fpgo-single .single_add_to_cart_button.button:not(.disabled):active,
html body:not(#fpgo-x).fpgo-mini .widget_shopping_cart .buttons a.button.checkout:active,
html body:not(#fpgo-x).fpgo-basket .wc-proceed-to-checkout a.checkout-button:active,
html body:not(#fpgo-x).fpgo-basket a.wc-block-cart__submit-button:active,
html body:not(#fpgo-x).fpgo-checkout #place_order:active,
html body:not(#fpgo-x).fpgo-checkout button.wc-block-components-checkout-place-order-button:active {
	transform: translateY(0) scale(0.985);
	transition-duration: 90ms;
	box-shadow:
		inset 0 2px 4px rgba(0, 40, 15, 0.28),
		0 2px 6px -4px var(--fpgo-glow);
}

html body:not(#fpgo-x).fpgo-loop ul.products li.product a.button.add_to_cart_button:focus-visible,
html body:not(#fpgo-x).fpgo-loop ul.products li.product a.button.product_type_variable:focus-visible,
html body:not(#fpgo-x).fpgo-loop ul.products li.product a.button.product_type_simple:focus-visible,
html body:not(#fpgo-x).fpgo-single #ckwtl-button2:focus-visible,
html body:not(#fpgo-x).fpgo-single .commercekit-waitlist #ckwtl-button:focus-visible,
html body:not(#fpgo-x).fpgo-single .single_add_to_cart_button.button:focus-visible,
html body:not(#fpgo-x).fpgo-mini .widget_shopping_cart .buttons a.button.checkout:focus-visible,
html body:not(#fpgo-x).fpgo-basket .wc-proceed-to-checkout a.checkout-button:focus-visible,
html body:not(#fpgo-x).fpgo-basket a.wc-block-cart__submit-button:focus-visible,
html body:not(#fpgo-x).fpgo-checkout #place_order:focus-visible,
html body:not(#fpgo-x).fpgo-checkout button.wc-block-components-checkout-place-order-button:focus-visible {
	outline: 3px solid var(--fpgo-ring) !important;
	outline-offset: 3px !important;
}

/* ------------------------------------------------------------------ not ready yet */

/* A variable product before its options are picked. The button is still there, but it should read
   as "not yet" rather than as a green light that does nothing when pressed. */
html body:not(#fpgo-x).fpgo-single #ckwtl-button2.disabled,
html body:not(#fpgo-x).fpgo-single .commercekit-waitlist #ckwtl-button.disabled,
html body:not(#fpgo-x).fpgo-single .single_add_to_cart_button.button.disabled,
html body:not(#fpgo-x).fpgo-single #ckwtl-button2:disabled,
html body:not(#fpgo-x).fpgo-single .commercekit-waitlist #ckwtl-button:disabled,
html body:not(#fpgo-x).fpgo-single .single_add_to_cart_button.button:disabled {
	filter: saturate(0.25) brightness(1.08);
	opacity: 0.62 !important;
	cursor: not-allowed;
	transform: none !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
	animation: none !important;
}

/* Place order while WooCommerce is processing: the form is blocked, so stop the invitation. */
html body:not(#fpgo-x).fpgo-checkout form.processing #place_order,
html body:not(#fpgo-x).fpgo-checkout #place_order:disabled {
	filter: saturate(0.5);
	animation: none !important;
	transform: none !important;
}

/* The loading spinner Shoptimizer draws with ::after stays white on the green. */
html body:not(#fpgo-x).fpgo .ajax_add_to_cart.add_to_cart_button.loading::after,
html body:not(#fpgo-x).fpgo .single_add_to_cart_button.loading::after {
	border-color: rgba(255, 255, 255, 0.35) !important;
	border-left-color: #ffffff !important;
}

/* ------------------------------------------------------------------ motion */

/* The live loop. Big three only: product page Add to basket, Proceed to checkout, Place order.
   Garreth 2026-09-23: they should animate on their own on the product page and at checkout, not
   wait for a click, but NOT on category pages, where twenty-four moving buttons is noise. So the
   grids glint once as the pointer arrives and these three run a loop: a light sweep followed by a
   soft green ring, then a rest, about every four and a half seconds. Pure CSS so it starts with
   the page; fpgo.js only pauses it while the button is off screen. */
@keyframes fpgo-live {
	0%   { --fpgo-sheen-x: 135%; --fpgo-ring-size: 0px; --fpgo-ring-alpha: 0; }
	6%   { --fpgo-ring-alpha: 0.5; }
	26%  { --fpgo-sheen-x: -35%; --fpgo-ring-size: 10px; --fpgo-ring-alpha: 0; }
	100% { --fpgo-sheen-x: -35%; --fpgo-ring-size: 10px; --fpgo-ring-alpha: 0; }
}

@keyframes fpgo-glint-once {
	from { --fpgo-sheen-x: 135%; }
	to   { --fpgo-sheen-x: -35%; }
}

/* The ring that goes out when a category page add to basket lands. WooCommerce adds .added. */
@keyframes fpgo-added {
	0%   { box-shadow: 0 0 0 0 rgba(26, 154, 74, 0.55), 0 4px 12px -6px var(--fpgo-glow); }
	100% { box-shadow: 0 0 0 12px rgba(26, 154, 74, 0), 0 4px 12px -6px var(--fpgo-glow); }
}

html body:not(#fpgo-x).fpgo-motion-full.fpgo-single #ckwtl-button2:not([disabled]),
html body:not(#fpgo-x).fpgo-motion-full.fpgo-single .commercekit-waitlist #ckwtl-button:not([disabled]),
html body:not(#fpgo-x).fpgo-motion-full.fpgo-single .single_add_to_cart_button.button:not(.disabled),
html body:not(#fpgo-x).fpgo-motion-full.fpgo-basket .wc-proceed-to-checkout a.checkout-button,
html body:not(#fpgo-x).fpgo-motion-full.fpgo-basket a.wc-block-cart__submit-button,
html body:not(#fpgo-x).fpgo-motion-full.fpgo-checkout #place_order,
html body:not(#fpgo-x).fpgo-motion-full.fpgo-checkout button.wc-block-components-checkout-place-order-button {
	animation: fpgo-live 4.5s var(--fpgo-ease) 0.8s infinite both;
}

/* Off screen, the loop holds still (fpgo.js). While WooCommerce is processing, it stops. */
html body:not(#fpgo-x).fpgo .fpgo-offscreen {
	animation-play-state: paused !important;
}

@media (hover: hover) {
	html body:not(#fpgo-x).fpgo-motion-full.fpgo-loop ul.products li.product a.button.add_to_cart_button:hover,
	html body:not(#fpgo-x).fpgo-motion-full.fpgo-loop ul.products li.product a.button.product_type_variable:hover,
	html body:not(#fpgo-x).fpgo-motion-full.fpgo-loop ul.products li.product a.button.product_type_simple:hover,
	html body:not(#fpgo-x).fpgo-motion-full.fpgo-mini .widget_shopping_cart .buttons a.button.checkout:hover {
		animation: fpgo-glint-once 700ms var(--fpgo-ease) both;
	}
}

html body:not(#fpgo-x).fpgo-loop ul.products li.product a.button.add_to_cart_button.added {
	animation: fpgo-added 700ms var(--fpgo-ease) 1 both !important;
}

/* Calm: hover, press and the added ring stay; no glint. */
html body:not(#fpgo-x).fpgo-motion-calm #ckwtl-button2,
html body:not(#fpgo-x).fpgo-motion-calm .commercekit-waitlist #ckwtl-button,
html body:not(#fpgo-x).fpgo-motion-calm .single_add_to_cart_button,
html body:not(#fpgo-x).fpgo-motion-calm .checkout-button,
html body:not(#fpgo-x).fpgo-motion-calm a.wc-block-cart__submit-button,
html body:not(#fpgo-x).fpgo-motion-calm #place_order,
html body:not(#fpgo-x).fpgo-motion-calm button.wc-block-components-checkout-place-order-button,
html body:not(#fpgo-x).fpgo-motion-calm ul.products li.product a.button:hover {
	animation: none;
}

/* Off: colour only. */
html body:not(#fpgo-x).fpgo-motion-off ul.products li.product a.button,
html body:not(#fpgo-x).fpgo-motion-off #ckwtl-button2,
html body:not(#fpgo-x).fpgo-motion-off .commercekit-waitlist #ckwtl-button,
html body:not(#fpgo-x).fpgo-motion-off .single_add_to_cart_button,
html body:not(#fpgo-x).fpgo-motion-off .checkout-button,
html body:not(#fpgo-x).fpgo-motion-off a.wc-block-cart__submit-button,
html body:not(#fpgo-x).fpgo-motion-off #place_order,
html body:not(#fpgo-x).fpgo-motion-off .widget_shopping_cart a.checkout {
	transform: none !important;
	animation: none !important;
	transition: box-shadow 150ms linear, filter 150ms linear !important;
}

@media (prefers-reduced-motion: reduce) {
	html body:not(#fpgo-x).fpgo ul.products li.product a.button,
	html body:not(#fpgo-x).fpgo #ckwtl-button2,
	html body:not(#fpgo-x).fpgo .commercekit-waitlist #ckwtl-button,
	html body:not(#fpgo-x).fpgo .single_add_to_cart_button,
	html body:not(#fpgo-x).fpgo .checkout-button,
	html body:not(#fpgo-x).fpgo a.wc-block-cart__submit-button,
	html body:not(#fpgo-x).fpgo #place_order,
	html body:not(#fpgo-x).fpgo .widget_shopping_cart a.checkout {
		transform: none !important;
		animation: none !important;
		transition: box-shadow 150ms linear, filter 150ms linear !important;
	}
}

/* ------------------------------------------------------------------ get notified

   Garreth 2026-09-24: "Get notified" on out of stock seats should not be green, because green now
   means buy, but it should move and feel like the rest. So it wears the store colour (or the
   Notify colour from the settings) through the SAME rules as the green buttons: only the tokens
   change. Grids stay still until hovered; the product page Join waiting list button runs the
   live loop once the consent box is ticked, with a bell where the chevron would be. */
html body:not(#fpgo-x).fpgo-loop ul.products li.product.outofstock a.button,
html body:not(#fpgo-x) #ckwtl-button2,
html body:not(#fpgo-x) .commercekit-waitlist #ckwtl-button {
	--fpgo-base: var(--fpgo-notify);
	--fpgo-top: color-mix(in srgb, var(--fpgo-notify) 84%, #ffffff);
	--fpgo-bottom: color-mix(in srgb, var(--fpgo-notify) 82%, #000000);
	--fpgo-glow: color-mix(in srgb, var(--fpgo-notify) 45%, transparent);
	--fpgo-ring: color-mix(in srgb, var(--fpgo-notify) 70%, #000000);
	--fpgo-pulse: var(--fpgo-notify);
	--fpgo-chevron: var(--fpgo-bell);
}

html body:not(#fpgo-x).fpgo-single #ckwtl-button2,
html body:not(#fpgo-x).fpgo-single .commercekit-waitlist #ckwtl-button {
	cursor: pointer;
}

html body:not(#fpgo-x).fpgo-single #ckwtl-button2[disabled],
html body:not(#fpgo-x).fpgo-single .commercekit-waitlist #ckwtl-button[disabled] {
	cursor: not-allowed;
}

/* ------------------------------------------------------------------ header checkout link

   Garreth 2026-09-28: the Checkout link in the header was a grey outline arrow among the other
   grey icons, easy to miss when the whole point is to get people paying. It now wears the same
   green light as the buttons: a solid green disc with a white arrow, and the label in green.
   While the basket has something in it (fpgo-has-items, set by fpgo.js), it runs the same rhythm
   as the big three: the arrow steps forward and a soft green ring goes out, then a rest. Empty
   basket or already on the checkout page: it stays still. Hover always gives the step and glow. */
@property --fpgo-arrow-x {
	syntax: '<length>';
	inherits: false;
	initial-value: 0px;
}

html body:not(#fpgo-x).fpgo-header .secondary-navigation .menu-item > a[href$="/checkout/"] {
	color: var(--fpgo-base) !important;
	font-weight: 600;
}

html body:not(#fpgo-x).fpgo-header .secondary-navigation .menu-item > a[href$="/checkout/"] .icon-wrapper {
	--fpgo-arrow-x: 0px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background-color: var(--fpgo-base);
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h9M8.5 4.5 12 8l-3.5 3.5'/%3E%3C/svg%3E"),
		linear-gradient(180deg, var(--fpgo-top), var(--fpgo-bottom));
	background-size: 16px 16px, 100% 100%;
	background-position: calc(50% + var(--fpgo-arrow-x)) 50%, 0 0;
	background-repeat: no-repeat;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.25),
		0 3px 8px -3px var(--fpgo-glow),
		0 0 0 var(--fpgo-ring-size) color-mix(in srgb, var(--fpgo-pulse) calc(var(--fpgo-ring-alpha) * 100%), transparent);
	transition: box-shadow 220ms var(--fpgo-ease), --fpgo-arrow-x 220ms var(--fpgo-ease), filter 180ms var(--fpgo-ease);
}

/* The theme's outline arrow is replaced by the disc above. */
html body:not(#fpgo-x).fpgo-header .secondary-navigation .menu-item > a[href$="/checkout/"] .icon-wrapper svg {
	visibility: hidden;
}

@media (hover: hover) {
	html body:not(#fpgo-x).fpgo-header .secondary-navigation .menu-item > a[href$="/checkout/"]:hover .icon-wrapper {
		--fpgo-arrow-x: 3px;
		filter: brightness(1.06) saturate(1.12);
		box-shadow:
			inset 0 1px 0 rgba(255, 255, 255, 0.3),
			0 6px 14px -4px var(--fpgo-glow),
			0 0 0 4px color-mix(in srgb, var(--fpgo-pulse) 22%, transparent);
	}
}

html body:not(#fpgo-x).fpgo-header .secondary-navigation .menu-item > a[href$="/checkout/"]:focus-visible {
	outline: 3px solid var(--fpgo-ring);
	outline-offset: 3px;
}

@keyframes fpgo-header-go {
	0%   { --fpgo-arrow-x: 0px; --fpgo-ring-size: 0px; --fpgo-ring-alpha: 0; }
	8%   { --fpgo-arrow-x: 4px; --fpgo-ring-alpha: 0.55; }
	18%  { --fpgo-arrow-x: 0px; }
	26%  { --fpgo-arrow-x: 3px; }
	34%  { --fpgo-arrow-x: 0px; --fpgo-ring-size: 9px; --fpgo-ring-alpha: 0; }
	100% { --fpgo-arrow-x: 0px; --fpgo-ring-size: 9px; --fpgo-ring-alpha: 0; }
}

html body:not(#fpgo-x).fpgo-motion-full.fpgo-header.fpgo-has-items:not(.woocommerce-checkout) .secondary-navigation .menu-item > a[href$="/checkout/"] .icon-wrapper {
	animation: fpgo-header-go 4.5s var(--fpgo-ease) 1.2s infinite both;
}

@media (hover: hover) {
	html body:not(#fpgo-x).fpgo-motion-full.fpgo-header.fpgo-has-items .secondary-navigation .menu-item > a[href$="/checkout/"]:hover .icon-wrapper {
		animation: none;
	}
}

html body:not(#fpgo-x).fpgo-motion-off.fpgo-header .secondary-navigation .menu-item > a[href$="/checkout/"] .icon-wrapper {
	animation: none !important;
	transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
	html body:not(#fpgo-x).fpgo-header .secondary-navigation .menu-item > a[href$="/checkout/"] .icon-wrapper {
		animation: none !important;
		transition: box-shadow 150ms linear !important;
	}
}

/* ------------------------------------------------------------------ header basket tile

   Garreth 2026-09-28: the basket in the header got lost, a thin dark green outline on the
   near-black desktop bar (about 2:1) and a small outline bag on the white mobile header, and it
   looked the same empty or full. Now:
   - empty: a quiet outline bag, drawn in light grey on the dark desktop bar so it is readable;
   - with items (fpgo-has-items from fpgo.js): a solid green bag with a white count, the same
     green and shading as the go buttons, with the header Checkout's ring pulse and a pop when
     something is added. On mobile it is a little larger for the thumb.
   The theme draws the bag itself: .count is the body, .count::after the handle. Desktop sits in
   .col-full-nav (dark), mobile in .main-header (white), so each is targeted by where it lives. */

/* Empty, desktop: readable outline on the dark bar. */
html body:not(#fpgo-x).fpgo-bag .col-full-nav .site-header-cart a.cart-contents .count {
	color: rgba(255, 255, 255, 0.86);
	border-color: rgba(255, 255, 255, 0.72);
}

html body:not(#fpgo-x).fpgo-bag .col-full-nav .site-header-cart a.cart-contents .count::after {
	border-color: rgba(255, 255, 255, 0.72);
}

/* With items, both headers: the green bag. */
html body:not(#fpgo-x).fpgo-bag.fpgo-has-items .site-header-cart a.cart-contents .count {
	color: #ffffff !important;
	font-weight: 700;
	border-color: var(--fpgo-base) !important;
	background: linear-gradient(180deg, var(--fpgo-top), var(--fpgo-bottom));
	text-shadow: 0 1px 0 rgba(0, 40, 15, 0.28);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.22),
		0 3px 8px -3px var(--fpgo-glow),
		0 0 0 var(--fpgo-ring-size) color-mix(in srgb, var(--fpgo-pulse) calc(var(--fpgo-ring-alpha) * 100%), transparent);
	transition: box-shadow 220ms var(--fpgo-ease), transform 180ms var(--fpgo-ease), filter 180ms var(--fpgo-ease);
}

html body:not(#fpgo-x).fpgo-bag.fpgo-has-items .site-header-cart a.cart-contents .count::after {
	border-color: var(--fpgo-base) !important;
}

/* The basket total beside it on desktop reads as part of the same control. */
html body:not(#fpgo-x).fpgo-bag.fpgo-has-items .col-full-nav .site-header-cart a.cart-contents .amount {
	color: #ffffff;
	font-weight: 700;
}

/* Mobile: a touch larger, handle kept centred. */
html body:not(#fpgo-x).fpgo-bag.fpgo-has-items .main-header .site-header-cart a.cart-contents .count {
	width: 32px;
	height: 32px;
	line-height: 26px;
	font-size: 14px;
}

html body:not(#fpgo-x).fpgo-bag.fpgo-has-items .main-header .site-header-cart a.cart-contents .count::after {
	left: 50%;
	margin-left: -5px;
	top: -6px;
}

@media (hover: hover) {
	html body:not(#fpgo-x).fpgo-bag.fpgo-has-items .site-header-cart a.cart-contents:hover .count {
		transform: translateY(-1px);
		filter: brightness(1.06) saturate(1.12);
		box-shadow:
			inset 0 1px 0 rgba(255, 255, 255, 0.3),
			0 6px 14px -4px var(--fpgo-glow),
			0 0 0 4px color-mix(in srgb, var(--fpgo-pulse) 24%, transparent);
	}
}

@keyframes fpgo-bag-ring {
	0%   { --fpgo-ring-size: 0px; --fpgo-ring-alpha: 0; }
	6%   { --fpgo-ring-alpha: 0.55; }
	30%  { --fpgo-ring-size: 9px; --fpgo-ring-alpha: 0; }
	100% { --fpgo-ring-size: 9px; --fpgo-ring-alpha: 0; }
}

@keyframes fpgo-bag-pop {
	0%   { transform: scale(1); }
	35%  { transform: scale(1.22); }
	60%  { transform: scale(0.94); }
	100% { transform: scale(1); }
}

html body:not(#fpgo-x).fpgo-motion-full.fpgo-bag.fpgo-has-items:not(.woocommerce-checkout) .site-header-cart a.cart-contents .count {
	animation: fpgo-bag-ring 4.5s var(--fpgo-ease) 2s infinite both;
}

html body:not(#fpgo-x).fpgo-bag.fpgo-has-items.fpgo-bag-pop .site-header-cart a.cart-contents .count {
	animation: fpgo-bag-pop 600ms var(--fpgo-ease) both;
}

html body:not(#fpgo-x).fpgo-motion-off.fpgo-bag .site-header-cart a.cart-contents .count {
	animation: none !important;
	transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
	html body:not(#fpgo-x).fpgo-bag .site-header-cart a.cart-contents .count {
		animation: none !important;
		transform: none !important;
		transition: box-shadow 150ms linear !important;
	}
}