/**
 * NuLabs store-wide UX polish (cosmetic only).
 * Extends the checkout's design language — 14px radius, brand orange, and the
 * travelling-light glow on primary CTAs — to the mini-cart drawer, the cart
 * page, and the shop/archive product cards. Loaded site-wide (header mini-cart
 * appears on every page). Targets stable WooCommerce + NuLabs class names.
 */

:root {
	--su-radius: 14px;
	--su-accent: #ff5700;
}

/* ======================================================================
 * 1) Product cards — rounder, to match checkout
 *    .nulabs-product-card = home grid; li.product.wc-block-product = shop /
 *    category archives. Both were ~4px.
 * ==================================================================== */
.nulabs-product-card,
li.product.wc-block-product,
.wc-block-product {
	border-radius: var(--su-radius) !important;   /* was ~4px */
	overflow: hidden;
}
/* Round the thumbnail image inside the archive cards as well. */
.wc-block-product .wc-block-components-product-image,
.wc-block-product .wc-block-components-product-image img,
.wc-block-product img.attachment-woocommerce_thumbnail,
.wc-block-product .wp-post-image {
	border-radius: var(--su-radius) !important;
}

/* ======================================================================
 * 2) Mini-cart drawer — consistent rounding
 * ==================================================================== */
.nulabs-free-shipping-notice {
	border-radius: var(--su-radius) !important;    /* was 8px */
}
.wc-block-mini-cart__footer-cart,
.wc-block-mini-cart__footer-checkout,
.wc-block-mini-cart__drawer .wc-block-components-button,
.wc-block-components-quantity-selector,
.wc-block-cart__submit-button {
	border-radius: var(--su-radius) !important;
}
.wc-block-components-quantity-selector {
	overflow: hidden;
}

/* ======================================================================
 * 3) Brand-orange travelling-light glow on the primary checkout CTAs
 *    (mini-cart "Go to checkout" + cart "Proceed to Checkout")
 * ==================================================================== */
.wc-block-mini-cart__footer-checkout,
.wc-block-cart__submit-button {
	position: relative;
	z-index: 0;
	overflow: hidden !important;
	background: #111111 !important;
	color: #ffffff !important;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18), 0 0 22px rgba(255, 87, 0, 0.18);
}
.wc-block-mini-cart__footer-checkout::before,
.wc-block-cart__submit-button::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 240%;
	aspect-ratio: 1;
	z-index: -1;
	background: conic-gradient(
		from 0deg,
		transparent 0deg,
		transparent 250deg,
		rgba(255, 87, 0, 0.45) 288deg,
		#ff5700 312deg,
		#ff7a2e 330deg,
		#ff5700 348deg,
		rgba(255, 87, 0, 0.45) 360deg
	);
	animation: su-orbit 4s linear infinite;
}
.wc-block-mini-cart__footer-checkout::after,
.wc-block-cart__submit-button::after {
	content: "";
	position: absolute;
	inset: 2px;
	z-index: -1;
	border-radius: calc(var(--su-radius) - 2px);
	background: #111111;
}
@keyframes su-orbit {
	from { transform: translate(-50%, -50%) rotate(0deg); }
	to   { transform: translate(-50%, -50%) rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
	.wc-block-mini-cart__footer-checkout::before,
	.wc-block-cart__submit-button::before { animation: none; }
}

/* ======================================================================
 * 4) Add-to-cart toast — now a liquid-glass pill handled entirely in
 *    nulabs-products (assets/css/style.css + the wp_footer banner JS).
 *    Section intentionally removed here to avoid conflicting rules.
 * ==================================================================== */

/* ======================================================================
 * 5) Compliance modal (mobile) — on short screens the long declaration
 *    pushed "Confirm & Proceed to Checkout" below the fold, unreachable.
 *    Cap the modal height, scroll the body, and pin the actions to the
 *    bottom so the confirm button is always visible.
 * ==================================================================== */
@media (max-width: 768px) {
	/* Cap the modal to the screen and let its body scroll, so the natural
	   order (declaration → 18+ confirm → buttons) stays intact and every part
	   is reachable by scrolling inside the modal. */
	.nulabs-compliance-modal-backdrop .nulabs-compliance-modal {
		max-height: 85vh !important;
		overflow-y: auto !important;
		-webkit-overflow-scrolling: touch;
	}

	/* ==================================================================
	 * Product page (mobile): compress the big gaps so the core — image,
	 * name, Strength and Add to cart — is visible without scrolling far.
	 * ================================================================== */
	/* Tighten the breadcrumb space above the image. */
	.single-product nav.woocommerce-breadcrumb {
		margin: 6px 0 !important;
	}
	/* Gallery: the Swiper gallery (nulabs-products plugin) owns image/thumbnail
	   sizing now; here we only trim the gap below it on mobile. */
	.single-product .nulabs-gallery {
		margin-bottom: 10px !important;
	}
	.single-product .nulabs-product-info-wrapper {
		gap: 8px !important;
		margin-top: -14px !important;
	}
	/* Smaller product name. */
	.single-product .nulabs-product-info-wrapper .wp-block-post-title,
	.single-product .nulabs-product-info-wrapper .wp-block-woocommerce-product-title,
	.single-product .nulabs-product-info-wrapper .product_title,
	.single-product .nulabs-product-info-wrapper h1 {
		font-size: 26px !important;
		line-height: 1.15 !important;
	}
	/* Promo bar: tighter top/bottom so it doesn't float in space. */
	.single-product .awdr_discount_bar {
		margin: 4px 0 6px !important;
	}
	/* Add-to-cart form rows tighter (Strength selector + button). */
	.single-product form.cart:not(.variations_form),
	.single-product .woocommerce-variation-add-to-cart {
		gap: 10px !important;
	}
	/* Tighten price → promo → Strength so they don't float a full line apart. */
	.single-product .awdr_discount_bar {
		margin: 2px 0 !important;
	}
	.single-product .wp-block-woocommerce-product-add-to-cart,
	.single-product form.cart {
		margin-top: 4px !important;
	}
	.single-product .nulabs-product-info-wrapper {
		gap: 6px !important;
	}
}

/* Brand-orange travelling-light glow on the product "Add to cart" button
   (same recipe as the other primary CTAs). */
.single-product .single_add_to_cart_button:not(.buy-now-btn) {
	position: relative;
	z-index: 0;
	overflow: hidden !important;
	background: #111111 !important;
	color: #ffffff !important;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18), 0 0 28px rgba(255, 87, 0, 0.30), 0 0 10px rgba(255, 87, 0, 0.22);
}
.single-product .single_add_to_cart_button:not(.buy-now-btn)::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 240%;
	aspect-ratio: 1;
	z-index: -1;
	/* Single travelling beam with a long, soft comet tail (smooth ramp, no hard
	   segment) and a brighter warm core — same orange hue, just lit hotter. */
	background: conic-gradient(
		from 0deg,
		transparent 0deg,
		transparent 215deg,
		rgba(255, 87, 0, 0) 240deg,
		rgba(255, 87, 0, 0.55) 298deg,
		rgba(255, 122, 46, 0.95) 324deg,
		#ff9a4d 340deg,
		rgba(255, 122, 46, 0.95) 354deg,
		rgba(255, 87, 0, 0.40) 360deg
	);
	animation: su-orbit 4s linear infinite;
}
.single-product .single_add_to_cart_button:not(.buy-now-btn)::after {
	content: "";
	position: absolute;
	inset: 2px;
	z-index: -1;
	/* Match the button's real 8px outer radius (set in nulabs-products),
	   minus the 2px inset, so the glow ring stays a uniform width and its
	   corners line up with the button outline. */
	border-radius: 6px;
	background: #111111;
}
@media (prefers-reduced-motion: reduce) {
	.single-product .single_add_to_cart_button:not(.buy-now-btn)::before { animation: none; }
}