/*
 * All With Love — Homepage glass redesign ("Sunset Terracotta" rebrand,
 * v1.9.0).
 *
 * Scope: purely cosmetic (CSS only), enqueued only on the static front
 * page (see functions.php, is_front_page()). Every selector here only
 * ever sets background/border/blur/shadow/spacing/transition properties
 * on the homepage's own existing markup (front-page.php) — no HTML,
 * shortcode output, or JS behaviour is touched, and nothing here comes
 * near WooCommerce/HitPay checkout.
 *
 * IMPORTANT — v1.8.8 shipped this file scoped to `body.front-page`, a
 * class WordPress core never actually outputs (the real class core adds
 * when is_front_page() is true is `home`, confirmed live on this site's
 * markup). That meant this entire stylesheet had zero effect since the
 * day it was installed — fixed below by scoping to `body.home` instead,
 * and re-verified against the live page's actual body class list.
 *
 * Reuses the theme's design tokens (updated for the new palette in
 * style.css :root) so the glass panels stay on-brand, and the hardcoded
 * rgba() gradient colors below — which can't reference a CSS custom
 * property directly — are now the new terracotta/teal palette instead of
 * the old green/orange.
 */

/* ---------- Bold gradient backdrop, page-wide ---------- */
body.home {
	position: relative;
}

body.home::before {
	content: '';
	position: fixed;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(circle at 8% 4%, rgba(200, 98, 63, 0.22) 0%, rgba(200, 98, 63, 0) 42%),
		radial-gradient(circle at 94% 10%, rgba(42, 111, 107, 0.18) 0%, rgba(42, 111, 107, 0) 40%),
		radial-gradient(circle at 12% 55%, rgba(42, 111, 107, 0.14) 0%, rgba(42, 111, 107, 0) 38%),
		radial-gradient(circle at 90% 50%, rgba(200, 98, 63, 0.16) 0%, rgba(200, 98, 63, 0) 40%),
		radial-gradient(circle at 22% 95%, rgba(200, 98, 63, 0.16) 0%, rgba(200, 98, 63, 0) 38%),
		radial-gradient(circle at 96% 92%, rgba(42, 111, 107, 0.16) 0%, rgba(42, 111, 107, 0) 40%),
		var(--awl-bg);
	pointer-events: none;
}

/* Shared glass-panel treatment — reused across every homepage card/section
   below via a common selector list. Bumped opacity/blur from the v1.8.8
   attempt so the effect actually reads at a glance.
   NOTE: .awl-hero-banner (the rotating Homepage Banner) is deliberately
   NOT in this list — see the dedicated solid-white rule for it under
   "Hero" below and the comment there explaining why. */
body.home .awl-trust-item,
body.home .awl-home-bestsellers,
body.home .awl-pawo-inner,
body.home .awl-ap-inner,
body.home .awl-vending-showcase-inner,
body.home .awl-post-card,
body.home ul.products li.product,
body.home .awl-category-tile {
	background: rgba(255, 255, 255, 0.6);
	-webkit-backdrop-filter: blur(20px) saturate(150%);
	backdrop-filter: blur(20px) saturate(150%);
	border: 1px solid rgba(255, 255, 255, 0.7);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	body.home .awl-trust-item,
	body.home .awl-home-bestsellers,
	body.home .awl-pawo-inner,
	body.home .awl-ap-inner,
	body.home .awl-vending-showcase-inner,
	body.home .awl-post-card,
	body.home ul.products li.product,
	body.home .awl-category-tile {
		background: rgba(255, 255, 255, 0.94);
	}
}

/* ---------- Hero ---------- */
body.home .awl-hero {
	background: transparent;
}

/* Kept fully opaque solid white rather than the translucent glass panel
   used elsewhere on this page: the banner rotates through real product
   photos (many shot on a plain white background), and with the glass
   effect's translucent white letting the colorful gradient blobs behind
   it (body.home::before, above) show through, any photo with its own
   white background looked mismatched — a hard-edged white product photo
   sitting in a faintly-tinted frame. Solid white keeps the letterboxed
   "mat" around each photo (see .awl-hero-banner in style.css) reading as
   one continuous white surface instead. */
body.home .awl-hero-media .awl-hero-banner {
	background: var(--awl-surface);
	box-shadow: var(--awl-shadow-lg);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

body.home .awl-hero-media .awl-hero-banner:hover {
	transform: translateY(-3px);
	box-shadow: 0 26px 58px rgba(200, 98, 63, 0.24);
}

/* ---------- Trust strip ---------- */
body.home .awl-trust-item {
	border-radius: var(--awl-radius);
	padding: 14px 18px;
	box-shadow: var(--awl-shadow-sm);
	transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

body.home .awl-trust-item:hover {
	transform: translateY(-3px);
	box-shadow: var(--awl-shadow);
	background: rgba(255, 255, 255, 0.85);
}

/* ---------- Best Sellers wrapper ---------- */
body.home .awl-home-bestsellers {
	box-shadow: var(--awl-shadow-lg);
	border-radius: var(--awl-radius-lg);
}

/* ---------- Product cards (Best Sellers / New Arrivals grids) ---------- */
body.home ul.products li.product {
	border-radius: var(--awl-radius);
	box-shadow: var(--awl-shadow-sm);
	transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease, background 0.2s ease;
}

body.home ul.products li.product:hover {
	transform: translateY(-7px);
	box-shadow: 0 22px 44px rgba(43, 36, 32, 0.16);
	background: rgba(255, 255, 255, 0.85);
}

body.home ul.products li.product .button.add_to_cart_button {
	border-radius: var(--awl-radius-sm);
	transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease, background 0.2s ease;
}

body.home ul.products li.product .button.add_to_cart_button:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(200, 98, 63, 0.34);
}

/* ---------- Paw'O spotlight card ---------- */
body.home .awl-pawo-inner {
	border-radius: var(--awl-radius-lg);
	box-shadow: var(--awl-shadow-lg);
}

body.home .awl-pawo-media-card {
	background: rgba(255, 255, 255, 0.75);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.75);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

body.home .awl-pawo-media-card:hover {
	box-shadow: var(--awl-shadow);
}

/* ---------- American Pet spotlight card ---------- */
body.home .awl-ap-inner {
	border-radius: var(--awl-radius-lg);
	box-shadow: var(--awl-shadow-lg);
}

body.home .awl-ap-media-card {
	background: rgba(255, 255, 255, 0.75);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.75);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

body.home .awl-ap-media-card:hover {
	box-shadow: var(--awl-shadow);
}

/* ---------- Shop by Category tiles ---------- */
/* Keep each tile's own gradient (awl-category-tile-1..5 in style.css) —
   layer the glass border/blur/hover on top rather than replacing it. */
body.home .awl-category-tile {
	transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
}

body.home .awl-category-tile:hover {
	transform: translateY(-7px) scale(1.03);
	box-shadow: 0 20px 40px rgba(43, 36, 32, 0.18);
}

/* ---------- Vending machine showcase ---------- */
body.home .awl-vending-showcase-inner {
	border-radius: var(--awl-radius-lg);
	box-shadow: var(--awl-shadow-lg);
	padding-left: var(--awl-space-md);
	padding-right: var(--awl-space-md);
}

/* ---------- Blog cards ---------- */
body.home .awl-post-card {
	border-radius: var(--awl-radius);
	transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease, background 0.2s ease;
}

body.home .awl-post-card:hover {
	transform: translateY(-7px);
	box-shadow: 0 22px 44px rgba(43, 36, 32, 0.16);
	background: rgba(255, 255, 255, 0.85);
}

/* ---------- Closing Telegram CTA banner ---------- */
/* This section already has its own solid gradient background — add a
   glass sheen over it rather than fighting the existing color. */
body.home .awl-home-banner {
	position: relative;
	overflow: hidden;
}

body.home .awl-home-banner::after {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 55%);
	pointer-events: none;
}

body.home .awl-home-banner-inner {
	position: relative;
	z-index: 1;
}

/* Reduced motion: keep color/shadow feedback, drop movement. */
@media (prefers-reduced-motion: reduce) {
	body.home .awl-hero-media .awl-hero-banner,
	body.home .awl-trust-item,
	body.home ul.products li.product,
	body.home ul.products li.product .button.add_to_cart_button,
	body.home .awl-category-tile,
	body.home .awl-post-card {
		transition: box-shadow 0.2s ease, background 0.2s ease;
	}

	body.home .awl-hero-media .awl-hero-banner:hover,
	body.home .awl-trust-item:hover,
	body.home ul.products li.product:hover,
	body.home ul.products li.product .button.add_to_cart_button:hover,
	body.home .awl-category-tile:hover,
	body.home .awl-post-card:hover {
		transform: none;
	}
}

/* ---------- Mobile ---------- */
@media (max-width: 782px) {
	body.home .awl-home-bestsellers,
	body.home .awl-pawo-inner,
	body.home .awl-ap-inner,
	body.home .awl-vending-showcase-inner {
		padding: var(--awl-space-sm);
		border-radius: var(--awl-radius);
	}
}