/* ============================================================
   AP Design Enhancements - responsive layer (v1.4.0)
   Owns only plugin components: floating cart, sticky add-to-cart,
   toast, trust box, payment badges, media guards.
   Theme components (header, grids, footer, shop, cart/checkout)
   live in the theme's ap.css "RESPONSIVE SYSTEM" section.
   Nothing here hides horizontal overflow.
   ============================================================ */

/* 1. Media guards. Images keep their ratio; svg and iframe are NOT
      forced to height:auto (that collapsed iframes and re-sized icons). */
img,
video {
	max-width: 100%;
}
img {
	height: auto;
}
svg {
	max-width: 100%;
}

/* 2. Fixed bottom UI: one sticky add-to-cart bar per breakpoint and a
      floating cart that always clears it. */
.apde-float-cart {
	bottom: calc(28px + env(safe-area-inset-bottom, 0px));
}
body:has(.ap-sticky-cart--show) .apde-float-cart,
body.ap-sticky-cart-visible .apde-float-cart {
	bottom: calc(92px + env(safe-area-inset-bottom, 0px));
}
@media (max-width: 600px) {
	.apde-float-cart {
		bottom: calc(20px + env(safe-area-inset-bottom, 0px));
	}
}
@media (max-width: 768px) {
	/* The theme's .ap-sticky bar already serves phones/tablets on product
	   pages; the plugin bar would stack on top of it. */
	.ap-sticky-cart {
		display: none !important;
	}
	body:has(.ap-sticky.on) .apde-float-cart {
		bottom: calc(88px + env(safe-area-inset-bottom, 0px));
	}
}
.ap-toast {
	z-index: 10000 !important;
	max-width: calc(100vw - 110px);
}

/* 3. Trust box: inherit the page text colour (was fixed ivory). */
.apde-trust-box {
	color: inherit;
}

/* 4. Footer payment badges wrap and centre on narrow screens. */
.ap-pay,
.ap-pay__badges {
	flex-wrap: wrap;
}
.ap-pay__badge {
	max-width: 100%;
}
@media (max-width: 600px) {
	.ap-pay {
		justify-content: center;
	}
}
/* 5. Mobile logo: the PNG has a near-black opaque background (8,8,10) that
      shows as a faint box on the header (11,11,12). Lighten-blend removes it;
      the glow animation is dropped on small screens (repaint cost). */
@media (max-width: 900px) {
	.ap-header a.ap-sign.apde-logo-link,
	.site-header a.ap-sign.apde-logo-link {
		background: transparent;
		animation: none;
	}
	img.apde-header-logo {
		mix-blend-mode: lighten;
	}
}