/* ============================================================
   AA Design Enhancements — Responsive / Mobile Fixes (v1.8.3)
   Additive only. Deactivating the plugin restores original design.
   Root-cause fixes, not overflow hiding.
   ============================================================ */

/* ---------- 1. Floating cart: unstyled-SVG safety ----------
   If conversion.css ever fails to load, the inline SVG used to
   fall back to 300x150px black (the "enormous cart graphic").
   The SVG now carries width/height attributes (see PHP), and this
   belt-and-braces rule caps it even without the main stylesheet. */
.aade-float-cart svg {
	max-width: 30px;
	max-height: 30px;
}
@media (max-width: 600px) {
	.aade-float-cart svg {
		max-width: 26px;
		max-height: 26px;
	}
}

/* ---------- 2. Mobile header: logo downsizing ----------
   .site-title was 35px with 0.18em letter-spacing and no mobile
   reduction — ~300px wide, crowding the 375px header. */
@media (max-width: 921px) {
	.site-title {
		font-size: 24px !important;
		letter-spacing: 0.12em !important;
	}
}
@media (max-width: 480px) {
	.site-title {
		font-size: 20px !important;
		letter-spacing: 0.1em !important;
	}
}

/* ---------- 3. Footer: mobile stacking ----------
   #aa-footer columns had no mobile stacking rules. */
@media (max-width: 768px) { .aa-footer-secure { justify-content: center; } }

/* ---------- 4. Global media overflow guards ---------- */
img, svg, video, iframe {
	max-width: 100%;
	height: auto;
}
/* Don't break aspect-ratio / cover images */
img[class*="aspect"],
.woocommerce-product-gallery__image img {
	height: auto;
}

/* ---------- 5. Product grid: consistent mobile columns ---------- */
@media (max-width: 544px) {
	ul.products {
		gap: 12px;
	}
	ul.products li.product {
		min-width: 0;
	}
	ul.products li.product .woocommerce-loop-product__title {
		overflow-wrap: break-word;
		word-break: break-word;
	}
}

/* ---------- 6. Shop scent-wheel: contain on mobile ----------
   Flagged as a horizontal-overflow suspect if fixed px sized. */
@media (max-width: 768px) {
	.aa-scent-wheel,
	[class*="scent-wheel"] {
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
	}
}

/* ---------- 7. Typography: prevent overflow at 320px ---------- */
@media (max-width: 480px) {
	h1, h2, h3 {
		overflow-wrap: break-word;
	}
	.aa-hero-comp {
		height: auto;
		min-height: 320px;
	}
}

/* ---------- 8. WooCommerce Blocks: cart/checkout at 320px ---------- */
@media (max-width: 480px) {
	.wc-block-cart,
	.wc-block-checkout {
		padding-left: 12px;
		padding-right: 12px;
	}
}

/* Responsive hygiene (v1.8.4): prevent long content from widening grid/flex tracks */
.aa-pill { max-width: 100%; }
.aa-hero-title, .aa-hero-sub { max-width: 100%; overflow-wrap: break-word; }
.aa-product-name, .aa-carousel-name, .aa-cat-card-name { overflow-wrap: break-word; }