/* ============================================================================
   SER-375 Homepage V2 — 1.0.0-iter87 (final iter pre-flip; matches functions.php enqueue version)
   AUDIT REFERENCE: .planning/sessions/2026-05-18-feature-homepage-swap-sandbox/research/parent-css-pattern-audit.md
   PRINCIPLE: only style what's GENUINELY NEW. Parent classes (.featuredWrap, .whyWrap,
   .partnersWrap, .secTitle, .dbtn, .btnbx, .productBox, etc.) provide all base styling
   via existing style.css + additional1.css. Mockup-correct font is `Conv_Poppins-*`
   (locally hosted). Brand gold is the 4-stop linear-gradient(180deg, #ecd67e, #b3813c,
   #f6e587, #b3813c). Dark sections = `#000` not `#0a0a0a`.
   History: iter-03 pattern-reuse base → iter62-iter87 mockup-fidelity + mobile/responsive sweep.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. NEW reviews layer band — pill OVERLAPS hero+cards seam per mockup #14.
   Section is transparent w/ negative margin-top so pill floats on hero image
   bottom edge. Pill itself supplies its own gold border + drop shadow.
   --------------------------------------------------------------------------- */
.home-v2 .gr-reviews-layer {
	background: transparent;
	padding: 0;
	position: relative;
	margin-top: -42px;
}
/* Seam medallion: lives as direct sibling of .gr-reviews-pill INSIDE
   .gr-reviews-layer (markup change in template-parts/v2/reviews-layer.php).
   Centered horizontally above the pill, partially overlapping its top edge.
   Z-index inside the same stacking context guarantees medallion paints in
   front of the pill — no parent-context fight needed. */
.home-v2 .gr-seam-medallion {
	position: absolute;
	left: 50%;
	/* Per Austin 2026-05-19 — emblem 20% smaller (42px, was 52px). Adjust
	   top offset proportionally to keep ~12px overlap into pill top. */
	top: -32px;
	transform: translateX(-50%);
	z-index: 30;
	width: 42px;
	height: 42px;
	pointer-events: none;
}
.home-v2 .gr-seam-medallion img {
	width: 100%;
	height: 100%;
	display: block;
}
/* The original parent-rendered iconBox inside .innrBnner.bannerWarp is REMOVED
   from the v2 hero-banner template — no need to hide it via CSS. v1 pages
   keep parent iconBox intact (template-only change, scoped to v2). */
.home-v2 .gr-reviews-layer .gr-reviews-pill {
	background: #fff;
	/* Per mockup #14: pill is more compact than hero text width — not full-width.
	   Width auto-sizes to inner content; max-width caps to prevent overgrowth on
	   very wide viewports. */
	max-width: 620px;
	margin: 0 auto;
	padding: 8px 18px;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: 16px;
	border: 1px solid #b3813c;
	border-radius: 6px;
	box-shadow: 0 8px 24px rgba(0,0,0,0.30);
	position: relative;
	z-index: 15;
}
/* Center the inline-flex pill horizontally inside the layer */
.home-v2 .gr-reviews-layer .container {
	text-align: center;
}
/* D1 (Derek 2026-05-19) + image #72/#73 rebalance (Austin 2026-05-19): hero text
   must read as VERTICALLY CENTERED in the band. Reviews pill + medallion overlap
   below shift visual weight downward — compensate by adding top padding so the
   text sits at the optical center of the band. */
.home-v2 .bannerWarp {
	padding-top: 70px;
	padding-bottom: 100px;
}
.home-v2 .bannerWarp h1 {
	margin-top: 0;
	margin-bottom: 8px;
}
/* A8 (Austin 2026-05-19): "OVER A CENTURY" weight matched to nav bar
   (Conv_Poppins-SemiBold per parent .header .menuBox ul li a). Parent
   .innrBnner h1 b inherits browser-bold rendering of ExtraLight — too heavy.
   Override with SemiBold font-family + normal weight. */
.home-v2 .bannerWarp h1 b {
	font-family: 'Conv_Poppins-SemiBold';
	font-weight: normal;
}
.home-v2 .bannerWarp h6 {
	margin-bottom: 6px;
}
/* GR sunburst medallion must sit ABOVE the pill, partially overlapping pill
   top edge per mockup #14. Parent default is bottom:-25px (hangs below hero)
   + width:50px + no z-index — would render BEHIND pill on v2 and too small.
   Scale up + reposition + bring forward. */
.home-v2 .innrBnner .iconBox {
	bottom: 36px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 10;
}
.home-v2 .innrBnner .iconBox img {
	width: 72px;
	height: 72px;
}

/* ---------------------------------------------------------------------------
   2. Why Buy 4-icon row positioned INSIDE .featuredWrap (above product grid).
   Outer wrapper uses class="whyWrap v2-why-buy" so parent .whyWrap typography
   + viewport animation inherit. .v2-why-buy modifier removes the standalone
   padding (we're inside a parent section now) + tightens bottom spacing.
   --------------------------------------------------------------------------- */
.home-v2 .featuredWrap .whyWrap.v2-why-buy {
	padding-top: 12px;
	padding-bottom: 28px;
	background: transparent;
}
/* Horizontal icon+label layout per mockup #21: icon on LEFT, label on RIGHT.
   Desktop sizing bump per Austin 2026-05-19 image #77 — ~30% larger so the
   strip reads cohesively with surrounding design. Text stays ≤2 lines. */
.home-v2 .featuredWrap .whyWrap.v2-why-buy.v2-why-buy-row .imgBox.box {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 18px;
	padding: 14px 20px;
}
.home-v2 .featuredWrap .whyWrap.v2-why-buy.v2-why-buy-row .imgBox.box .buyBox {
	min-height: 0;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
}
.home-v2 .featuredWrap .whyWrap.v2-why-buy.v2-why-buy-row .imgBox.box .buyBox img,
.home-v2 .featuredWrap .whyWrap.v2-why-buy.v2-why-buy-row .imgBox.box img {
	width: 48px;
	height: 48px;
}
.home-v2 .featuredWrap .whyWrap.v2-why-buy.v2-why-buy-row .imgBox.box h4 {
	color: #fff;
	font-size: 17px;
	line-height: 21px;
	margin: 0;
	font-family: 'Conv_Poppins-Regular';
	text-align: left;
	flex: 0 1 auto;
	/* Max 2 lines — clamp prevents 3-row wrap on the longer "Unmatched Customer Service" label. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
/* Vertical gold dividers between icon+label pairs (mockup #21).
   Sibling-combinator targets only inner columns, never first child. */
.home-v2 .featuredWrap .whyWrap.v2-why-buy.v2-why-buy-row .imgBox.box + .imgBox.box {
	border-left: 1px solid rgba(179, 129, 60, 0.45);
}
/* D4 (Austin 2026-05-19): plain dashes flanking "FEATURED PRODUCTS" — removed
   »» / «« wheat-leaf chevrons for consistency w/ other headings. */
.home-v2 .featuredWrap .secTitle {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	position: relative;
}
.home-v2 .featuredWrap .secTitle:before,
.home-v2 .featuredWrap .secTitle:after {
	font-family: 'Conv_Poppins-Bold';
	color: #b3813c;
	-webkit-text-fill-color: #b3813c;
	font-size: 22px;
	letter-spacing: 0;
	display: inline-block;
}
.home-v2 .featuredWrap .secTitle:before {
	content: '—';
}
.home-v2 .featuredWrap .secTitle:after {
	content: '—';
}

/* ---------------------------------------------------------------------------
   3. REWARD POINTS — flat gold uppercase text per mockup #02. NOT a button.
   Mockup shows just "EARN $X.XX REWARD POINTS" as inline gold text label
   above the price. No border, no background, no hover state, no button shape.
   Austin 2026-05-19: stop creating new button styles; this is a flat text label.
   --------------------------------------------------------------------------- */
.singleBadgeDesc .rewarddesc {
	display: inline-block;
	font-family: 'Conv_Poppins-SemiBold';
	font-size: 13px;
	background: transparent;
	color: #b3813c;
	border: 0;
	padding: 0;
	text-transform: uppercase;
	letter-spacing: 1px;
	line-height: 18px;
	margin: 6px 0 4px;
}
/* A9 (Austin 2026-05-19): WPLoyalty `.simpleshopmessage` "EARN X REWARD POINTS"
   default is heavy-bold rendering — hard to read on mobile. Match nav bar
   weight (Conv_Poppins-SemiBold) for legibility consistency. */
.home-v2 .productBox .simpleshopmessage,
.home-v2 .productBox.later .simpleshopmessage,
.home-v2 .featuredWrap .productBox .simpleshopmessage {
	font-family: 'Conv_Poppins-SemiBold' !important;
	font-weight: normal !important;
}
/* Center the badge wrapper since .singleBadgeDesc is block-level — both
   featured products grid + smaller .later carousel cards on the right. */
.home-v2 .featuredWrap .productBox .infoBox .singleBadgeDesc,
.home-v2 .releaseWrap .productBox.later .infoBox .singleBadgeDesc {
	text-align: center;
}

/* ---------------------------------------------------------------------------
   4. NEW Customer Testimonials section — LIGHT MODE per Austin 2026-05-19.
   Cream/off-white background, dark text, gold accents on stars + badge. Sits
   between dark Services Available section + dark Contact form, giving visual
   breathing room in the page rhythm.
   --------------------------------------------------------------------------- */
.home-v2 .gr-testimonials {
	background: #f7f5f0;
	padding-top: 60px;
	padding-bottom: 50px;
	position: relative;
	color: #1a1a1a;
}
.home-v2 .gr-testimonials:before {
	content: '';
	background: linear-gradient(180deg, #ecd67e, #b3813c, #f6e587, #b3813c 100%);
	background: -webkit-linear-gradient(180deg, #ecd67e, #b3813c, #f6e587, #b3813c 100%);
	width: 100%;
	height: 3px;
	position: absolute;
	left: 0;
	top: 0;
}
.home-v2 .gr-testimonials:after {
	content: '';
	background: linear-gradient(180deg, #ecd67e, #b3813c, #f6e587, #b3813c 100%);
	background: -webkit-linear-gradient(180deg, #ecd67e, #b3813c, #f6e587, #b3813c 100%);
	width: 100%;
	height: 3px;
	position: absolute;
	left: 0;
	bottom: 0;
}
.home-v2 .gr-testimonials .gr-testimonials-inner {
	max-width: 1560px;
	margin: 0 auto;
	padding: 0 16px;
	text-align: center;
}
.home-v2 .gr-testimonials .secTitle {
	display: inline-block;
	/* Black text matching OUR PRODUCTS heading on white/cream sections. */
	color: #000;
	background: none;
	-webkit-text-fill-color: #000;
	margin-bottom: 26px;
	font-family: 'Conv_Poppins-Light';
	font-size: 40px;
	letter-spacing: 0;
	text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
   5. Partners strip — EMBEDDED inline in contact form dark section per
   mockup #22. Compact ~24-26px logos, subtle gray vertical dividers, light
   grayscale fill, no horizontal dividers. Tight padding for embedded feel. */
.gr-partners-strip {
	background: transparent;
	padding: 0 16px 22px;
	margin: 2px auto 0;
	max-width: 880px;
}
.gr-partners-strip .container-fluid {
	max-width: 880px;
	margin: 0 auto;
	padding: 0;
}
.gr-partners-strip .gr-partners-list {
	display: flex;
	justify-content: space-around;
	align-items: center;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
	flex-wrap: nowrap;
}
.gr-partners-strip .gr-partners-list li {
	flex: 1 1 0;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 4px 14px;
	min-width: 0;
}
.gr-partners-strip .gr-partners-list li + li {
	/* Subtle gray vertical divider per mockup #22 (NOT gold). */
	border-left: 1px solid rgba(255, 255, 255, 0.18);
}
.gr-partners-strip .gr-partners-list img {
	max-height: 32px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
	/* Source PNGs have varying contrast. Inversion + grayscale renders as
	   light gray on dark band. Subtle opacity keeps embedded feel. */
	filter: brightness(0) invert(1) grayscale(100%);
	opacity: 0.85;
	transition: all .5s;
}
.gr-partners-strip .gr-partners-list li.dark-on-light img {
	filter: brightness(0) invert(1) grayscale(100%);
}
.gr-partners-strip .gr-partners-list li.light-on-dark img {
	filter: grayscale(100%) brightness(1.2);
}
.gr-partners-strip .gr-partners-list img:hover {
	opacity: 1;
}

/* ---------------------------------------------------------------------------
   6. Mobile (≤768px) — minimal overrides; parent already handles row-cols
   responsive collapse for the existing .whyWrap / .featuredWrap.
   --------------------------------------------------------------------------- */
@media (max-width: 768px) {
	/* A7 v4 (Austin 2026-05-19, image #52): mobile hero pill — Google-only short pill.
	   Compress outer + inner to ~32px tall. line-height:1 everywhere, inline-flex
	   row, no block elements. */
	.home-v2 .gr-reviews-layer .gr-reviews-pill {
		display: inline-flex !important;
		flex-direction: row;
		gap: 0;
		padding: 14px 20px !important;
		box-shadow: 0 3px 10px rgba(0,0,0,0.18);
		max-width: none;
		width: auto;
		min-height: 0;
		line-height: 1;
		align-items: center;
	}
	.home-v2 .gr-reviews-hero-pill {
		display: inline-flex !important;
		flex-direction: row;
		gap: 0;
		flex-wrap: nowrap;
		justify-content: center;
		align-items: center;
		line-height: 1;
		padding: 0 !important;
	}
	/* Hide Trustpilot half + divider on mobile. */
	.home-v2 .gr-reviews-hero-trustpilot,
	.home-v2 .gr-reviews-hero-divider {
		display: none !important;
	}
	/* Google item: logo + "Google Reviews" + stars + 5.0 — all on one inline-flex line. */
	.home-v2 .gr-reviews-hero-google {
		display: inline-flex !important;
		flex-direction: row;
		gap: 6px;
		flex-shrink: 0;
		padding: 0 !important;
		margin: 0 !important;
		align-items: center;
		line-height: 1;
	}
	.home-v2 .gr-reviews-hero-google .gr-reviews-hero-source,
	.home-v2 .gr-reviews-hero-google .gr-reviews-hero-stars,
	.home-v2 .gr-reviews-hero-google .gr-reviews-hero-rating {
		display: inline-flex !important;
		align-items: center;
		font-family: 'Conv_Poppins-SemiBold', sans-serif;
		font-size: 15px;
		color: #1a1a1a;
		letter-spacing: 0;
		line-height: 1;
		margin: 0 !important;
		padding: 0 !important;
	}
	.home-v2 .gr-reviews-hero-google .gr-reviews-hero-stars {
		color: #f5a623;
	}
	.home-v2 .gr-reviews-hero-google .gr-reviews-hero-logo {
		width: 22px !important;
		height: 22px !important;
		flex: 0 0 22px !important;
		display: inline-block !important;
		vertical-align: middle;
	}
}
@media (max-width: 768px) {
	.home-v2 .featuredWrap .whyWrap.v2-why-buy {
		padding-bottom: 24px;
	}
	.gr-partners-strip .gr-partners-list {
		gap: 20px;
	}
	.gr-partners-strip .gr-partners-list img {
		max-height: 40px;
	}
	/* A3 (Austin 2026-05-19): Why Buy 4-icon row at mobile — tighter spacing,
	   single column flex direction inside .imgBox, remove vertical dividers
	   between rows in 2×2 grid (only horizontal dividers between columns). */
	.home-v2 .featuredWrap .whyWrap.v2-why-buy.v2-why-buy-row .imgBox.box {
		padding: 10px 8px;
		gap: 10px;
	}
	.home-v2 .featuredWrap .whyWrap.v2-why-buy.v2-why-buy-row .imgBox.box h4 {
		font-size: 12px;
		line-height: 14px;
	}
	.home-v2 .featuredWrap .whyWrap.v2-why-buy.v2-why-buy-row .imgBox.box .buyBox img,
	.home-v2 .featuredWrap .whyWrap.v2-why-buy.v2-why-buy-row .imgBox.box img {
		width: 30px;
		height: 30px;
	}
	/* A3e (Austin 2026-05-19, mockup #42): mobile Why Buy 4-icon row.
	   Strategy: CSS Grid wrapper for guaranteed 2×2 equal cells. Apply
	   border-right on odd cells (left col) + border-bottom on top 2 cells.
	   Equal cell heights via grid means borders align cleanly into cross. */
	.home-v2 .featuredWrap .whyWrap.v2-why-buy.v2-why-buy-row .row.row-cols-md-2,
	.home-v2 .featuredWrap .whyWrap.v2-why-buy.v2-why-buy-row .row {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr 1fr;
		gap: 0;
		--bs-gutter-x: 0;
		--bs-gutter-y: 0;
	}
	.home-v2 .featuredWrap .whyWrap.v2-why-buy.v2-why-buy-row .imgBox.box {
		border: 0 !important;
		padding: 18px 12px;
		gap: 12px;
		justify-content: center;
		align-items: center;
		min-height: 90px;
		width: auto !important;
		max-width: none !important;
		flex: 0 0 auto !important;
		margin: 0 !important;
	}
	.home-v2 .featuredWrap .whyWrap.v2-why-buy.v2-why-buy-row .imgBox.box:nth-child(odd) {
		border-right: 1px solid rgba(179, 129, 60, 0.45) !important;
	}
	.home-v2 .featuredWrap .whyWrap.v2-why-buy.v2-why-buy-row .imgBox.box:nth-child(-n+2) {
		border-bottom: 1px solid rgba(179, 129, 60, 0.45) !important;
	}
	/* A4 (Austin 2026-05-19): testimonials heading huge on mobile — scale down. */
	.home-v2 .gr-testimonials .secTitle {
		font-size: 24px;
		line-height: 28px;
		letter-spacing: 0;
	}
	/* D4 mobile: shrink Featured Products dashes too */
	.home-v2 .featuredWrap .secTitle:before,
	.home-v2 .featuredWrap .secTitle:after {
		font-size: 16px;
	}
	/* A5 (Austin 2026-05-19): SEND MESSAGE button too small on mobile.
	   Preserve parent .dbtn styling (border-image, font-family, etc.) — only
	   widen on mobile breakpoint for stronger CTA presence. */
	.home-v2 .talkWrap .buttonBoxs {
		text-align: center;
	}
	.home-v2 .talkWrap #gr_contact_submit.dbtn,
	.home-v2 .talkWrap button.dbtn.btn2 {
		display: block;
		width: 100%;
		max-width: 320px;
		margin: 0 auto;
		padding: 10px 20px;
		min-height: 44px;
	}
	/* A2 tap-target (WCAG 2.2 AA 44×44 — Austin 2026-05-19): View All Products
	   button height was 39px on mobile. Bump padding so min-height clears 44. */
	.home-v2 .featuredWrap .btnbx.btn2 {
		padding-top: 10px;
		padding-bottom: 10px;
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
	/* A2 tap-target v2 (Austin 2026-05-19 image #76): testimonials swiper bullets
	   were rendering visually-too-large with the padding+content-box approach.
	   Revert to original 9px visual + 26px active pill. Expand hit area instead
	   via invisible :before overlay — bullet stays the same visible size, but
	   tap target is 25×25. */
	.home-v2 .gr-testimonials-pagination .swiper-pagination-bullet {
		position: relative;
	}
	.home-v2 .gr-testimonials-pagination .swiper-pagination-bullet:before {
		content: '';
		position: absolute;
		top: -8px;
		left: -8px;
		right: -8px;
		bottom: -8px;
	}
	/* A6 (Austin 2026-05-19): on mobile, REVERSE parent .dbtn states.
	   Use parent's existing hover-img.webp :before mechanism — do NOT introduce
	   custom gradients. Default mobile = parent's HOVER look (image visible +
	   black text). Active/touch = parent's DEFAULT look (image hidden + white text).
	   Preserves parent border-image + transition + .mText animation hooks. */
	.home-v2 .talkWrap #gr_contact_submit.dbtn:before,
	.home-v2 .talkWrap button.dbtn.btn2:before {
		opacity: 1;
	}
	.home-v2 .talkWrap #gr_contact_submit.dbtn,
	.home-v2 .talkWrap #gr_contact_submit.dbtn.btn2,
	.home-v2 .talkWrap button.dbtn.btn2 {
		color: #000;
	}
	/* Mobile :active / :hover (parent default look) — image fades out, text returns to white. */
	.home-v2 .talkWrap #gr_contact_submit.dbtn:active:before,
	.home-v2 .talkWrap #gr_contact_submit.dbtn:hover:before,
	.home-v2 .talkWrap button.dbtn.btn2:active:before,
	.home-v2 .talkWrap button.dbtn.btn2:hover:before {
		opacity: 0;
	}
	.home-v2 .talkWrap #gr_contact_submit.dbtn:active,
	.home-v2 .talkWrap #gr_contact_submit.dbtn:hover,
	.home-v2 .talkWrap button.dbtn.btn2:active,
	.home-v2 .talkWrap button.dbtn.btn2:hover {
		color: #fff;
	}
}

/* ---------------------------------------------------------------------------
   7. Hero exclusive carousel (5.2b) — Swiper.js fade-rotation wrapper.
   Carousel container nests inside existing .releaseWrap big-slot column;
   .swiper-slide wraps each .productBox.newRelease so existing CSS rules stay
   intact (no markup-level styling changes). Pagination bullets recolored to
   brand gold; hidden when only one slide exists.
   --------------------------------------------------------------------------- */
/* releaseWrap cards float on default (light) page bg per mockup #9. Parent
   .productBox already styled white w/ shadow. DO NOT restyle .productBox per
   parent-css-pattern-audit.md §7 "DO NOT restyle .productBox". */
/* D2-RESET (Austin 2026-05-19): EXCLUSIVE + 2 right cards must be IDENTICAL
   in size/structure to LIVE page-front.php. The only diff is Swiper carousel
   UI wraps the big card. Parent additional1.css governs all sizing — DO NOT
   override .releaseWrap .col:first-child / .productBox layout. Only min-width:0
   needed so Swiper's width:100% block doesn't overflow the parent col. */
.home-v2 .gr-v2-hero-carousel-col {
	position: relative;
	min-width: 0;
	display: flex;
}
.home-v2 .gr-v2-hero-carousel-col .swiper,
.home-v2 .gr-v2-hero-carousel-col .swiper-wrapper,
.home-v2 .gr-v2-hero-carousel-col .swiper-slide {
	width: 100%;
	height: 100% !important;
}
.home-v2 .gr-v2-hero-carousel {
	width: 100%;
	min-width: 0;
	overflow: visible; /* keep pagination dots + nav arrows visible — iter65 fix */
	position: relative;
}
.home-v2 .gr-v2-hero-carousel .swiper-wrapper {
	overflow: hidden; /* slide content clip lives here, not on the outer carousel */
}
.home-v2 .gr-v2-hero-carousel .swiper-slide {
	display: flex;
	flex-direction: column;
	height: auto;
}
/* Image #69/#70 (Austin 2026-05-19): slide content must fill carousel col so the
   bg image area expands to top 2/3 of card (matching LIVE rendering). Stretch
   productBox + .box + .FeaturedBox to fill, then let imagesBox grow as flex-1. */
.home-v2 .gr-v2-hero-carousel .swiper-slide > div,
.home-v2 .gr-v2-hero-carousel .swiper-slide .productBox.newRelease,
.home-v2 .gr-v2-hero-carousel .swiper-slide .productBox.newRelease > a,
.home-v2 .gr-v2-hero-carousel .swiper-slide .productBox.newRelease .box {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	width: 100%;
}
.home-v2 .gr-v2-hero-carousel .swiper-slide .productBox.newRelease .FeaturedBox {
	flex: 0 0 auto !important;
	min-height: 0;
	margin: 0;
}
/* Austin 2026-05-19 iter82: img-driven container sizing. Pool is horizontal-only
   (2 products, both bg_image marketing composites). Container takes img natural
   height — no fixed/aspect-ratio cap. Width/height HTML attrs on <img> reserve
   correct space pre-load (CLS-safe). No gaps above/below image; .product-info
   sits flush below. */
.home-v2 .gr-v2-hero-carousel .swiper-slide .productBox.newRelease .imagesBox {
	width: 100% !important;
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	aspect-ratio: auto !important;
	display: block;
	background: #000;
	overflow: hidden;
	line-height: 0;
}
.home-v2 .gr-v2-hero-carousel .swiper-slide .productBox.newRelease .featured-background {
	display: none !important;
}
.home-v2 .gr-v2-hero-carousel .swiper-slide .productBox.newRelease .imagesBox img {
	display: block;
	width: 100% !important;
	height: auto !important;
	max-width: 100%;
	object-fit: contain;
	object-position: center top;
}
/* Austin 2026-05-19 (image #91 final): product-info flex-grows. .infoBox stays
   at TOP of dark band (natural flow) so the parent's EXCLUSIVE :before pseudo
   anchors at image/info seam per LIVE behavior — half-overlapping the image
   bottom edge. Title pushed down via h4 margin-top, NOT via flex-end (which
   would slide the infoBox + pill anchor down too). */
.home-v2 .gr-v2-hero-carousel .swiper-slide .productBox.newRelease .product-info {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	padding-bottom: 22px;
}
.home-v2 .gr-v2-hero-carousel .swiper-slide .productBox.newRelease .product-info .info.title h4 {
	margin-top: 14px;
}
/* EXCLUSIVE gold pill — back to parent canon position (Austin revert). */
/* Title bump (Austin 2026-05-19): pill moved up freed vertical space in dark
   band — use it by enlarging product title from parent's 17px to 22px. Keeps
   2-line max via line-clamp so long names don't blow the layout. */
.home-v2 .gr-v2-hero-carousel .swiper-slide .productBox.newRelease .product-info .info h4 {
	font-size: 22px;
	line-height: 1.2;
	font-family: 'Conv_Poppins-Regular';
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
@media (max-width: 768px) {
	.home-v2 .gr-v2-hero-carousel .swiper-slide .productBox.newRelease .product-info .info h4 {
		font-size: 18px;
	}
}
/* Pagination dots — brand gold, BOTTOM of card container (over info band).
   UX (Austin 2026-05-19): show 3s on page load then fade. Re-show on hover with
   3s post-hover persistence so controls remain visible after mouse leaves. */
@keyframes gr-carousel-ux-intro {
	0% { opacity: 0; }
	8%, 75% { opacity: 1; }
	100% { opacity: 0; }
}
.home-v2 .gr-v2-hero-carousel-pagination {
	position: absolute;
	bottom: 10px;
	left: 0;
	right: 0;
	text-align: center;
	z-index: 15;
	opacity: 0;
	animation: gr-carousel-ux-intro 4s ease-in-out 0.5s 1;
	transition: opacity .35s ease 3s;
	pointer-events: none;
}
.home-v2 .gr-v2-hero-carousel-col:hover .gr-v2-hero-carousel-pagination,
.home-v2 .gr-v2-hero-carousel-col:focus-within .gr-v2-hero-carousel-pagination {
	opacity: 1;
	transition: opacity .15s ease 0s;
	pointer-events: auto;
}
.home-v2 .gr-v2-hero-carousel-pagination .swiper-pagination-bullet {
	background: rgba(179, 129, 60, 0.45);
	opacity: 1;
	width: 9px;
	height: 9px;
	margin: 0 4px;
	transition: all .3s;
}
.home-v2 .gr-v2-hero-carousel-pagination .swiper-pagination-bullet-active {
	background: #b3813c;
	width: 26px;
	border-radius: 5px;
}
/* Hero exclusive carousel nav arrows — gold circular buttons per mockup #02.
   UX same as pagination: 3s intro reveal on load + hover-reveal w/ 3s post-hover delay. */
.home-v2 .gr-v2-hero-carousel-prev,
.home-v2 .gr-v2-hero-carousel-next {
	width: 36px;
	height: 36px;
	background: rgba(0, 0, 0, 0.6);
	border: 1px solid #b3813c;
	border-radius: 50%;
	color: #b3813c;
	cursor: pointer;
	z-index: 11;
	opacity: 0;
	animation: gr-carousel-ux-intro 4s ease-in-out 0.5s 1;
	transition: opacity .35s ease 3s, background .3s ease, color .3s ease;
	pointer-events: none;
}
.home-v2 .gr-v2-hero-carousel-col:hover .gr-v2-hero-carousel-prev,
.home-v2 .gr-v2-hero-carousel-col:hover .gr-v2-hero-carousel-next,
.home-v2 .gr-v2-hero-carousel-col:focus-within .gr-v2-hero-carousel-prev,
.home-v2 .gr-v2-hero-carousel-col:focus-within .gr-v2-hero-carousel-next {
	opacity: 1;
	transition: opacity .15s ease 0s, background .3s ease, color .3s ease;
	pointer-events: auto;
}
.home-v2 .gr-v2-hero-carousel-prev:hover,
.home-v2 .gr-v2-hero-carousel-next:hover {
	background: rgba(179, 129, 60, 0.85);
	color: #000;
}
.home-v2 .gr-v2-hero-carousel-prev:after,
.home-v2 .gr-v2-hero-carousel-next:after {
	font-size: 16px;
	font-weight: 700;
}
.home-v2 .gr-v2-hero-carousel-prev {
	left: 8px;
}
.home-v2 .gr-v2-hero-carousel-next {
	right: 8px;
}
/* Pagination dots stay at bottom on all viewports — desktop + tablet + mobile.
   Z-index 15 keeps them above .product-info dark band text. */
/* Hide WPLoyalty "Earn 0 Reward Points" injection on the big EXCLUSIVE carousel
   card per Austin 2026-05-19 — "Earn 0" shows on products with no reward amount
   set, looks bad on hero showcase slot. Also remove the <br> that follows it. */
.home-v2 .productBox.newRelease .simpleshopmessage,
.home-v2 .productBox.newRelease .simpleshopmessage + br {
	display: none !important;
}
/* Center the "EARN $XX REWARD POINTS" line on small .later carousel cards +
   featured product cards. Plugin renders it left-aligned by default; the
   surrounding card content is centered so it must match. */
.home-v2 .releaseWrap .productBox.later .simpleshopmessage,
.home-v2 .featuredWrap .productBox .simpleshopmessage {
	display: block;
	text-align: center;
	width: 100%;
}

/* ---------------------------------------------------------------------------
   8. Footer "Let's talk" two-tone flip (5.8b). Parent footer.php applies gold
   gradient to first <span> ("Have Any Questions?"); mockup wants reverse for v2:
   "Have Any Questions?" white + "Let's talk" gold gradient + "..." gold animated.
   Scoped to .home-v2 only — other pages keep existing parent treatment.
   --------------------------------------------------------------------------- */
/* Two-tone per mockup #11: "Have Any Questions?" GOLD + "Let's talk..." WHITE.
   Parent already paints span:not(.gr-v2-talk) gold via :not() scope in additional1.css.
   v2 just needs to keep .gr-v2-talk white. Strong (the animated "...") follows white. */
.home-v2 .talkWrap h3 .gr-v2-talk {
	font-family: 'Conv_Poppins-ExtraLight';
	display: inline-block;
	color: #fff;
	-webkit-text-fill-color: #fff;
	letter-spacing: -2px;
	padding-right: 6px;
}
.home-v2 .talkWrap h3 strong {
	color: #fff;
	-webkit-text-fill-color: #fff;
}

/* ---------------------------------------------------------------------------
   9. GRM stub widgets (reviews-layer hero pill + testimonials swiper + footer pill).
   Stub data lives in mu-plugins/gr-reviews-manager-stub.php. Styles target the
   stub markup classes; real GRM mu-plugin (Phase 4 / SER-524) will emit the
   same class structure so CSS doesn't need to change on swap-in.
   --------------------------------------------------------------------------- */

/* 9a. Hero reviews pill — internal layout for the .gr-reviews-hero-pill row.
   Pill outer styling (bg, border, shadow, position) is in section 1 above. */
.gr-reviews-hero-pill {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 18px;
	padding: 0;
	width: 100%;
}
.gr-reviews-hero-item {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: 'Conv_Poppins-Regular';
	color: #000;
	text-decoration: none;
	transition: opacity .25s ease;
}
.gr-reviews-hero-item:hover {
	opacity: 0.75;
	text-decoration: none;
}
.gr-reviews-hero-logo {
	display: inline-block;
	width: 22px;
	height: 22px;
	flex: 0 0 22px;
}
.gr-reviews-hero-source {
	font-family: 'Conv_Poppins-SemiBold';
	font-size: 14px;
	color: #000;
	letter-spacing: 0.4px;
}
.gr-reviews-hero-stars {
	color: #b3813c;
	font-size: 15px;
	letter-spacing: 1px;
}
.gr-reviews-hero-rating {
	font-family: 'Conv_Poppins-SemiBold';
	font-size: 14px;
	color: #000;
}
.gr-reviews-hero-divider {
	width: 1px;
	height: 28px;
	background: #b3813c;
	flex: 0 0 1px;
}

/* 9b. Customer testimonials swiper — LIGHT MODE cards */
.home-v2 .gr-testimonials .gr-testimonials-wrap {
	max-width: 1200px;
	margin: 28px auto 0;
	padding: 0 16px;
	position: relative;
}
.home-v2 .gr-testimonials-swiper {
	width: 100%;
	min-width: 0;
	overflow: hidden;
	padding: 0 36px 56px;
}
/* v2.2.0 iter97: force ALL slides in the visible window to the tallest
   slide's height. Without align-items:stretch + explicit slide height,
   Swiper leaves each slide at natural content height and bottoms misalign. */
.home-v2 .gr-testimonials-swiper .swiper-wrapper {
	align-items: stretch !important;
}
.home-v2 .gr-testimonials-swiper .swiper-slide {
	height: auto !important;
	display: flex;
}
.home-v2 .gr-testimonial-card {
	background: #ffffff;
	border: 1px solid rgba(179, 129, 60, 0.4);
	padding: 28px 26px 22px;
	box-sizing: border-box;
	display: flex !important;
	flex-direction: column;
	/* v2.2.0 iter96: uniform outer height across the visible slide window
	   (Swiper stretches short cards to match tallest). Meta auto-margin
	   pins to bottom on short cards; :has() drops auto-margin on readmore
	   cards so readmore + meta flow tight under the text. */
	min-height: 240px;
	height: 100%;
	text-align: left;
	box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.home-v2 .gr-testimonial-stars {
	color: #b3813c;
	font-size: 18px;
	letter-spacing: 2px;
	margin-bottom: 12px;
}
.home-v2 .gr-testimonial-text {
	font-family: 'Conv_Poppins-Light';
	color: #1a1a1a;
	font-size: 14px;
	line-height: 22px;
	margin: 0 0 12px;
	font-style: italic;
	flex: 0 0 auto;
	border: 0;
	padding: 0;
	background: transparent;
	/* v2.2.0 (2026-05-26): clamp long reviews to 4 lines by default so all
	   cards stay the same height. Read-more button toggles .is-expanded
	   on the parent card to lift the clamp. flex:0 0 auto so the blockquote
	   takes only the height of its (clamped) content; meta-row is pushed
	   to card bottom via margin-top:auto below. */
	display: -webkit-box;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.home-v2 .gr-testimonial-card.is-expanded .gr-testimonial-text {
	display: block;
	-webkit-line-clamp: none;
	line-clamp: none;
	overflow: visible;
}
.home-v2 .gr-testimonial-readmore {
	background: transparent;
	border: 0;
	padding: 0;
	/* Sits directly under the text — natural flow, no auto-margin. */
	margin: 0 0 14px;
	color: #888;
	font-family: 'Conv_Poppins-Regular';
	font-size: 11px;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	cursor: pointer;
	align-self: flex-start;
	transition: color .2s;
}
.home-v2 .gr-testimonial-readmore:hover,
.home-v2 .gr-testimonial-readmore:focus-visible {
	color: #555;
	text-decoration: underline;
}
.home-v2 .gr-testimonial-readmore[hidden] {
	display: none !important;
}
.home-v2 .gr-testimonial-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	font-size: 12px;
	color: #555;
	font-family: 'Conv_Poppins-Regular';
	border-top: 1px solid rgba(179, 129, 60, 0.25);
	padding-top: 12px;
	align-items: center;
	/* Default: pin meta to bottom of card via auto-margin. Short cards
	   show meta flush at card bottom. */
	margin-top: auto;
}
/* When the Read More button is visible, drop the meta auto-margin so the
   readmore + meta sit tight directly under the text instead of being
   pushed to the bottom. */
.home-v2 .gr-testimonial-card:has(.gr-testimonial-readmore:not([hidden])) .gr-testimonial-meta {
	margin-top: 0;
}
.home-v2 .gr-testimonial-author {
	font-family: 'Conv_Poppins-SemiBold';
	color: #1a1a1a;
	letter-spacing: 0.4px;
}
.home-v2 .gr-testimonial-badge {
	color: #b3813c;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	font-size: 11px;
	font-family: 'Conv_Poppins-SemiBold';
}
.home-v2 .gr-testimonial-source {
	/* v2.2.0: full names broke the right-aligned source pill (wrapped + drifted
	   off card edge). Push source onto its own row, left-aligned, muted —
	   utility metadata, not a CTA. */
	color: #999;
	font-size: 10px;
	letter-spacing: 0.3px;
	flex: 0 0 100%;
	margin-left: 0;
	margin-top: 2px;
}
/* Pagination */
.home-v2 .gr-testimonials-pagination {
	position: absolute;
	bottom: 18px;
	left: 0;
	right: 0;
	text-align: center;
	z-index: 10;
}
.home-v2 .gr-testimonials-pagination .swiper-pagination-bullet {
	background: rgba(179, 129, 60, 0.45);
	opacity: 1;
	width: 9px;
	height: 9px;
	margin: 0 4px;
	transition: all .3s;
}
.home-v2 .gr-testimonials-pagination .swiper-pagination-bullet-active {
	background: #b3813c;
	width: 26px;
	border-radius: 5px;
}
/* Manual prev/next arrows */
.home-v2 .gr-testimonials-prev,
.home-v2 .gr-testimonials-next {
	color: #b3813c;
	width: 32px;
	height: 32px;
	background: transparent;
	border: 0;
	cursor: pointer;
}
.home-v2 .gr-testimonials-prev:after,
.home-v2 .gr-testimonials-next:after {
	font-size: 22px;
	font-weight: 700;
}

/* 9c. Footer reviews widget — single rounded WHITE card with gold border holding
   both Google + Trustpilot pills, per mockup #12 footer. Sits on the white middle
   footer band (parent puts widget between social icons + copyright bar). Hidden
   global parent .trustpilot-custom-badge in additional1.css. */
.gr-reviews-footer-widget {
	display: flex;
	justify-content: center;
	margin: 22px auto 12px;
	padding: 0 16px;
}
.gr-reviews-footer-widget-inner {
	display: inline-flex;
	align-items: center;
	gap: 18px;
	background: #fff;
	border: 1px solid #b3813c;
	border-radius: 6px;
	padding: 8px 16px;
}
.gr-reviews-footer-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: transparent;
	border: 0;
	padding: 0;
	font-family: 'Conv_Poppins-Regular';
	font-size: 13px;
	color: #000;
	text-decoration: none;
	transition: opacity .25s ease;
}
.gr-reviews-footer-pill:hover {
	opacity: 0.75;
	text-decoration: none;
	color: #000;
}
.gr-reviews-footer-pill-divider {
	width: 1px;
	height: 22px;
	background: rgba(0,0,0,0.15);
}
.gr-reviews-footer-logo {
	display: inline-block;
	width: 20px;
	height: 20px;
	flex: 0 0 20px;
}
.gr-reviews-footer-label {
	font-family: 'Conv_Poppins-Bold';
	color: #000;
	letter-spacing: 0.3px;
	font-size: 13px;
}
.gr-reviews-footer-rating {
	color: #000;
	font-family: 'Conv_Poppins-Bold';
	font-size: 13px;
}
.gr-reviews-footer-stars {
	color: #b3813c;
	letter-spacing: 1px;
	font-size: 13px;
}

/* 9d. Responsive overrides */
@media (max-width: 768px) {
	.gr-reviews-hero-pill {
		flex-direction: column;
		gap: 10px;
		padding: 14px 16px;
	}
	.gr-reviews-hero-divider {
		display: none;
	}
	.home-v2 .gr-testimonials-swiper {
		padding: 0 0 56px;
	}
	.home-v2 .gr-testimonials-prev,
	.home-v2 .gr-testimonials-next {
		display: none;
	}
	/* A11 (Austin 2026-05-19 image #62): footer reviews widget — kill top gap
	   before social icons, narrow width to match/under social icons row, tighter
	   padding, lighter border, smaller logos, hide stars to retain text. Both
	   Google + Trustpilot still visible. */
	.gr-reviews-footer-widget {
		gap: 0;
		margin: 0 auto 8px;
		padding: 0 12px;
	}
	.gr-reviews-footer-widget-inner {
		max-width: 290px;
		width: 100%;
		gap: 8px;
		padding: 5px 10px;
		border: 1px solid rgba(179, 129, 60, 0.45);
		border-radius: 5px;
		justify-content: center;
	}
	.gr-reviews-footer-pill {
		gap: 5px;
		padding: 0;
		font-size: 11px;
		line-height: 1;
		flex: 0 1 auto;
	}
	.gr-reviews-footer-logo {
		width: 14px !important;
		height: 14px !important;
		flex: 0 0 14px !important;
	}
	.gr-reviews-footer-label,
	.gr-reviews-footer-rating {
		font-size: 11px !important;
		letter-spacing: 0 !important;
	}
	.gr-reviews-footer-stars {
		display: none !important;
	}
	.gr-reviews-footer-pill-divider {
		height: 14px;
	}
}