/**
 * Shop-only cart-button design + loader, scoped to .sbr-shop-design-col so it
 * only touches the shop card CTAs (never the shared landers).
 *
 * Ported from the Claude Design "Add to Cart Button" component
 * (templates/add-to-cart-button/AddToCartButton.dc.html): the inner design's
 * trailing arrow and the "comet" spinner. Button color + size are intentionally
 * left to each design's own rules — only the inner treatment + loader change.
 *
 *   • Comet loader — the site-wide loader (custom-styles.css `.loading:before`
 *     blue ring + `.loading::after` white veil) is replaced, for shop buttons
 *     only, by a single tapered comet arc (no visible track). Every button that
 *     gets `.loading` (add-to-cart via WooCommerce, Buy Now via shop-cart-ux.js)
 *     shows it.
 *   • Trailing arrow — the imported "dash + arrow" price style ends in a right
 *     arrow; we append it to every visible add-to-cart CTA as a currentColor
 *     (white) glyph, so it inherits each button's own fill.
 */

/* ── Trailing → arrow on every visible add-to-cart CTA ─────────────────────── */
.sbr-shop-design-col .sbr-ng-add::after,
.sbr-shop-design-col .sbr-qty-add::after,
.sbr-shop-design-col .sbr-sp-add::after,
.sbr-shop-design-col .sbr-spc-add::after,
.sbr-shop-design-col .sbr-pc-add::after,
.sbr-shop-design-col .sbr-spg-add::after,
.sbr-shop-design-col .sbr-spg-customize::after,
.sbr-shop-design-col .sbr-ea-cta::after,
.sbr-shop-design-col .sbr-sub-cta::after {
	content: "";
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	/* Explicit white — several buttons only color their child spans, so
	   currentColor would inherit page ink and render a black arrow. */
	background-color: #fff;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='12' x2='20' y2='12'/%3E%3Cpolyline points='13 5 20 12 13 19'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='12' x2='20' y2='12'/%3E%3Cpolyline points='13 5 20 12 13 19'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Sports-guard "Customized" variant is the one CTA with dark ink text on an
   amber fill — keep its arrow the same ink so the button stays coherent. */
.sbr-shop-design-col .sbr-spg-add--custom::after,
.sbr-shop-design-col .sbr-spg-customize::after {
	background-color: var(--spg-ink, #1f2524);
}

/* Night Guard's add button is display:block plain text — make it a centered
   flex row so its (newly added) cart icon, label and arrow line up like the
   other designs. Its color/size stay as the design's own rules set them. */
.sbr-shop-design-col .sbr-ng-buy .sbr-ng-add {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

/* The price spans added for consistency ("— $XX.XX") on designs that lacked
   one: white like the label, slightly lighter weight, sized off the button. */
.sbr-shop-design-col .sbr-ng-add__total,
.sbr-shop-design-col .sbr-spc-add__total,
.sbr-shop-design-col .sbr-pc-add__total {
	font-weight: 700;
	font-size: .95em;
	color: rgba(255, 255, 255, .92);
	white-space: nowrap;
}

/* ── Comet loader (replaces the site's default .loading spinner on shop) ────── */

/* The Enamel Armour + plain-subscription CTAs are proxies for a hidden per-plan
   .add_to_cart_button, so they carry neither `.btn` nor WooCommerce's `.loading`.
   shop-cart-ux.js / cartLabel.js put `.loading` on them by hand; these selectors
   are why it paints. Without them the global custom-styles.css `.loading` rules
   (blue ring + white veil) would win instead of the comet. */
.sbr-shop-design-col .btn.loading,
.sbr-shop-design-col .sbr-ea-cta.loading,
.sbr-shop-design-col .sbr-sub-cta.loading {
	position: relative !important;
	color: transparent !important;
	/* WooCommerce's own `.loading` dims the button to 25% — keep it solid. */
	opacity: 1 !important;
	pointer-events: none;
	cursor: default;
}

/* Hide the button's real content (icon / label / price / arrow) while loading. */
.sbr-shop-design-col .btn.loading > *,
.sbr-shop-design-col .sbr-ea-cta.loading > *,
.sbr-shop-design-col .sbr-sub-cta.loading > * {
	visibility: hidden !important;
}
/* Kill the global white veil + suppress the trailing arrow while loading. */
.sbr-shop-design-col .btn.loading::after,
.sbr-shop-design-col .sbr-ea-cta.loading::after,
.sbr-shop-design-col .sbr-sub-cta.loading::after {
	content: none !important;
}

/* The comet: a single arc that tapers from transparent into a bright head,
   masked to a thin ring so there is no visible full track. */
.sbr-shop-design-col .btn.loading::before,
.sbr-shop-design-col .sbr-ea-cta.loading::before,
.sbr-shop-design-col .sbr-sub-cta.loading::before {
	content: "" !important;
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	right: auto !important;
	width: 24px !important;
	height: 24px !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: conic-gradient(from 0deg,
		rgba(255, 255, 255, 0) 0deg,
		rgba(255, 255, 255, 0) 40deg,
		rgba(255, 255, 255, .55) 250deg,
		#ffffff 355deg) !important;
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
	        mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
	animation: sbr-cart-comet .7s linear infinite !important;
	z-index: 2;
}

@keyframes sbr-cart-comet {
	from { transform: translate(-50%, -50%) rotate(0deg); }
	to   { transform: translate(-50%, -50%) rotate(360deg); }
}