/**
 * Header responsive fixes (global).
 *
 * Hand-written and loaded site-wide. The theme's Tailwind is PRECOMPILED, and
 * the build ships `md:flex` / `lg:hidden` but NOT `lg:flex` — so the desktop
 * primary nav can only be toggled on at the `md` breakpoint (768px). With six
 * items plus the language switcher and the cart/account icons that is too wide
 * for the 768–1023px range: labels wrap and items collide with the logo.
 *
 * Fix: hold the burger menu until 1024px (the markup uses `lg:hidden` on the
 * burger and the mobile menu, both of which the build does provide), and hide
 * the `md:flex` desktop nav across the 768–1023px band here. On phones, tighten
 * the right-hand action cluster so the logo and language switcher never touch.
 *
 * @package Robo9
 */

/* Tablet band: the desktop nav is `md:flex` (visible from 768px), but there
   is no room for it yet — keep it collapsed into the burger until 1024px. */
@media (min-width: 768px) and (max-width: 1023.98px) {
	.js-desktop-nav {
		display: none !important;
	}
}

/* Phones: `space-x-6` (1.5rem) between four action items plus the logo
   overflows a ~400px viewport, pushing the language switcher under the logo
   (the original report was at 402px). Tighten the action gaps, trim the bar's
   side padding and scale the logo down a touch so the whole row fits with room
   to spare on the narrowest phones. */
@media (max-width: 480px) {
	.js-header-bar {
		padding-left: 0.75rem !important;
		padding-right: 0.75rem !important;
	}
	/* This build's `space-x-6` spaces items with margin-right: 1.5rem on each
	   child. Shrink it so the language switcher, cart, account and burger stay
	   on one row on the narrowest phones. */
	.js-header-actions > * {
		margin-right: 0.375rem !important;
	}
	.js-header-actions > *:last-child {
		margin-right: 0 !important;
	}
	.js-header-bar a > img.h-10 {
		height: 2rem !important;
	}
}

/* Pin the footer to the viewport bottom on short pages: the body already has
   flex-col + justify-between (header.php), it only lacked a minimum height. */
body {
	min-height: 100vh;
}

/* Cart/checkout update overlay: quantity changes go through a debounced AJAX
   round-trip; while it runs the affected region is dimmed, locked and shows a
   spinner so stale totals are never mistaken for final ones. */
[data-cart-region] {
	position: relative;
}

.cart-updating {
	pointer-events: none;
}

.cart-updating::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.6);
	z-index: 5;
}

.cart-updating::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 28px;
	height: 28px;
	margin: -14px 0 0 -14px;
	border: 3px solid #d1d5db;
	border-top-color: #111;
	border-radius: 50%;
	animation: robo9-spin 0.7s linear infinite;
	z-index: 6;
}

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