/**
 * HiGuppy homepage hero — mobile layout fix
 *
 * Stacks hero copy above the fish image, adds comfortable padding,
 * and removes compact-height rules that cramp the section on phones.
 *
 * @package HiGuppy
 */

/* ==========================================================================
   HOMEPAGE TOP BACKDROP — extend hero atmosphere under sticky header
   ========================================================================== */

@media (max-width: 900px) {
	body.hg-homepage-active,
	body.home.higuppy-site-shell {
		position: relative;
		background: linear-gradient(180deg, #eefbff 0%, #f7fbff 42%, #ffffff 100%) !important;
	}

	body.hg-homepage-active::before,
	body.home.higuppy-site-shell::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: min(460px, 62vh);
		background:
			radial-gradient(circle at 82% 10%, rgba(255, 222, 91, 0.22), transparent 34%),
			radial-gradient(circle at 10% 0%, rgba(223, 248, 255, 0.95), transparent 52%),
			linear-gradient(180deg, #eefbff 0%, #f5fcff 58%, rgba(255, 255, 255, 0) 100%);
		pointer-events: none;
		z-index: 0;
	}

	body.hg-homepage-active > .higuppy-home,
	body.home.higuppy-site-shell > .higuppy-home,
	body.hg-homepage-active .elementor-shortcode > .higuppy-home,
	body.home .elementor-shortcode > .higuppy-home {
		position: relative;
		z-index: 1;
		background: transparent !important;
	}

	body.hg-homepage-active .higuppy-home .hg-hero,
	body.home .higuppy-home .hg-hero {
		background: transparent !important;
	}
}

@media (max-width: 900px) {
	body.hg-homepage-active .higuppy-home .hg-hero,
	body.home .higuppy-home .hg-hero {
		min-height: auto !important;
		max-height: none !important;
		padding: 20px 0 28px !important;
		overflow: visible !important;
	}

	body.hg-homepage-active .higuppy-home .hg-hero .hg-container,
	body.home .higuppy-home .hg-hero .hg-container {
		width: 100% !important;
		max-width: 100% !important;
		padding: 0 20px !important;
	}

	body.hg-homepage-active .higuppy-home .hg-hero-grid,
	body.home .higuppy-home .hg-hero-grid {
		display: grid !important;
		grid-template-columns: 1fr !important;
		gap: 20px !important;
		align-items: start !important;
	}

	body.hg-homepage-active .higuppy-home .hg-hero-copy,
	body.home .higuppy-home .hg-hero-copy {
		order: 1;
		max-width: 100%;
		text-align: center !important;
	}

	body.hg-homepage-active .higuppy-home .hg-hero-copy .hg-eyebrow,
	body.home .higuppy-home .hg-hero-copy .hg-eyebrow,
	body.hg-homepage-active .higuppy-home .hg-hero-copy h1,
	body.home .higuppy-home .hg-hero-copy h1,
	body.hg-homepage-active .higuppy-home .hg-hero-copy .hg-lead,
	body.home .higuppy-home .hg-hero-copy .hg-lead {
		text-align: center !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	body.hg-homepage-active .higuppy-home .hg-hero-visual,
	body.home .higuppy-home .hg-hero-visual {
		order: 2;
		width: 100% !important;
		min-height: auto !important;
		max-height: none !important;
		margin: 0 auto !important;
		display: flex !important;
		justify-content: center !important;
		align-items: center !important;
	}

	body.hg-homepage-active .higuppy-home .hg-hero-fish,
	body.home .higuppy-home .hg-hero-fish {
		width: min(320px, 100%) !important;
		height: auto !important;
		min-height: 0 !important;
		max-height: 280px !important;
		margin: 0 auto !important;
	}

	body.hg-homepage-active .higuppy-home .hg-hero-fish img,
	body.home .higuppy-home .hg-hero-fish img {
		width: 100% !important;
		height: auto !important;
		max-height: 280px !important;
		object-fit: contain !important;
		object-position: center !important;
	}

	body.hg-homepage-active .higuppy-home .hg-guarantee-badge,
	body.home .higuppy-home .hg-guarantee-badge {
		top: 0 !important;
		right: 0 !important;
		width: 84px !important;
		height: 84px !important;
		font-size: var(--hg-font-size-body);
	}

	body.hg-homepage-active .higuppy-home .hg-hero h1,
	body.home .higuppy-home .hg-hero h1 {
		max-width: 100% !important;
		font-size: clamp(30px, 8.2vw, 40px);
		line-height: 1.1;
		letter-spacing: -0.04em !important;
	}

	body.hg-homepage-active .higuppy-home .hg-lead,
	body.home .higuppy-home .hg-lead {
		width: 100% !important;
		max-width: 100% !important;
		margin-top: 14px !important;
		font-size: var(--hg-font-size-body);
		line-height: 1.65;
	}

	body.hg-homepage-active .higuppy-home .hg-hero-buttons,
	body.home .higuppy-home .hg-hero-buttons {
		display: flex !important;
		flex-direction: row !important;
		align-items: stretch !important;
		justify-content: center !important;
		flex-wrap: nowrap !important;
		gap: 8px !important;
		margin-top: 18px !important;
	}

	body.hg-homepage-active .higuppy-home .hg-hero-buttons .hg-btn,
	body.home .higuppy-home .hg-hero-buttons .hg-btn {
		flex: 1 1 0 !important;
		width: auto !important;
		min-width: 0 !important;
		min-height: 48px !important;
		padding-left: 8px !important;
		padding-right: 8px !important;
	}

	body.hg-homepage-active .higuppy-home .hg-hero-buttons .hg-btn a,
	body.home .higuppy-home .hg-hero-buttons .hg-btn a {
		white-space: nowrap !important;
		padding-left: 8px !important;
		padding-right: 8px !important;
	}

	body.hg-homepage-active .higuppy-home .hg-rating,
	body.home .higuppy-home .hg-rating {
		flex-wrap: wrap !important;
		align-items: center !important;
		gap: 8px !important;
		margin-top: 16px !important;
		font-size: var(--hg-font-size-body);
		line-height: 1.45;
	}

	body.hg-homepage-active .higuppy-home .hg-avatars,
	body.home .higuppy-home .hg-avatars {
		display: none !important;
	}

	body.hg-homepage-active .higuppy-home .hg-rating strong,
	body.home .higuppy-home .hg-rating strong {
		font-size: var(--hg-font-size-body);
	}

	body.hg-homepage-active .higuppy-home .hg-trust-panel,
	body.home .higuppy-home .hg-trust-panel {
		width: calc(100% - 32px) !important;
		margin: 0 auto 20px !important;
		padding: 0 !important;
	}
}

@media (max-width: 480px) {
	body.hg-homepage-active .higuppy-home .hg-hero,
	body.home .higuppy-home .hg-hero {
		padding: 16px 0 24px !important;
	}

	body.hg-homepage-active .higuppy-home .hg-hero .hg-container,
	body.home .higuppy-home .hg-hero .hg-container {
		padding: 0 16px !important;
	}

	body.hg-homepage-active .higuppy-home .hg-hero h1,
	body.home .higuppy-home .hg-hero h1 {
		font-size: clamp(28px, 8vw, 34px);
	}

	body.hg-homepage-active .higuppy-home .hg-hero-fish,
	body.home .higuppy-home .hg-hero-fish,
	body.hg-homepage-active .higuppy-home .hg-hero-fish img,
	body.home .higuppy-home .hg-hero-fish img {
		max-height: 220px !important;
	}

	body.hg-homepage-active .higuppy-home .hg-guarantee-badge,
	body.home .higuppy-home .hg-guarantee-badge {
		width: 72px !important;
		height: 72px !important;
	}
}

/* ==========================================================================
   FEATURED / BEST SELLERS — 2×2 page slider on mobile
   ========================================================================== */

@media (max-width: 900px) {
	body.hg-homepage-active .higuppy-home .hg-products .hg-product-grid,
	body.hg-homepage-active .higuppy-home .hg-best-sellers .hg-product-grid,
	body.home .higuppy-home .hg-products .hg-product-grid,
	body.home .higuppy-home .hg-best-sellers .hg-product-grid {
		display: grid !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		box-sizing: border-box !important;
		grid-template-columns: none !important;
		grid-template-rows: auto auto !important;
		grid-auto-flow: column !important;
		grid-auto-columns: calc((100% - 12px) / 2) !important;
		gap: 12px !important;
		margin-top: 18px !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
		scroll-snap-type: x mandatory !important;
		-webkit-overflow-scrolling: touch;
	}

	body.hg-homepage-active .higuppy-home .hg-product-card,
	body.home .higuppy-home .hg-product-card {
		flex: unset !important;
		width: 100% !important;
		max-width: none !important;
		scroll-snap-align: none !important;
	}

	body.hg-homepage-active .higuppy-home .hg-product-card:nth-child(4n + 1),
	body.home .higuppy-home .hg-product-card:nth-child(4n + 1) {
		scroll-snap-align: start !important;
	}

	body.hg-homepage-active .higuppy-home .hg-product-card,
	body.home .higuppy-home .hg-product-card {
		border-radius: 14px !important;
		box-shadow: 0 4px 14px rgba(8, 39, 71, 0.06) !important;
	}

	body.hg-homepage-active .higuppy-home .hg-product-image .hg-media,
	body.home .higuppy-home .hg-product-image .hg-media {
		height: auto !important;
		aspect-ratio: 1 / 1 !important;
	}

	body.hg-homepage-active .higuppy-home .hg-heart,
	body.home .higuppy-home .hg-heart {
		width: 24px !important;
		height: 24px !important;
		top: 6px !important;
		right: 6px !important;
		font-size: var(--hg-font-size-body);
	}

	body.hg-homepage-active .higuppy-home .hg-product-info,
	body.home .higuppy-home .hg-product-info {
		padding: 10px 10px 12px !important;
	}

	body.hg-homepage-active .higuppy-home .hg-product-card h3,
	body.home .higuppy-home .hg-product-card h3 {
		min-height: 0 !important;
		margin-bottom: 4px !important;
		font-size: var(--hg-font-size-body);
		line-height: 1.3;
		display: -webkit-box !important;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	body.hg-homepage-active .higuppy-home .hg-product-info p,
	body.home .higuppy-home .hg-product-info p,
	body.hg-homepage-active .higuppy-home .hg-product-info .hg-stars,
	body.home .higuppy-home .hg-product-info .hg-stars {
		display: none !important;
	}

	body.hg-homepage-active .higuppy-home .hg-product-info .hg-price,
	body.home .higuppy-home .hg-product-info .hg-price {
		margin: 0 0 8px !important;
		font-size: var(--hg-font-size-body);
	}

	body.hg-homepage-active .higuppy-home .hg-add-cart,
	body.home .higuppy-home .hg-add-cart {
		min-height: 34px !important;
		margin-top: auto !important;
		padding: 6px 8px !important;
		font-size: var(--hg-font-size-body);
	}
}

@media (max-width: 480px) {
	body.hg-homepage-active .higuppy-home .hg-products .hg-product-grid,
	body.home .higuppy-home .hg-products .hg-product-grid {
		gap: 10px 8px !important;
	}

	body.hg-homepage-active .higuppy-home .hg-product-info,
	body.home .higuppy-home .hg-product-info {
		padding: 8px 8px 10px !important;
	}

	body.hg-homepage-active .higuppy-home .hg-product-card h3,
	body.home .higuppy-home .hg-product-card h3 {
		font-size: var(--hg-font-size-body);
	}

	body.hg-homepage-active .higuppy-home .hg-product-info .hg-price,
	body.home .higuppy-home .hg-product-info .hg-price {
		font-size: var(--hg-font-size-body);
	}

	body.hg-homepage-active .higuppy-home .hg-add-cart,
	body.home .higuppy-home .hg-add-cart {
		min-height: 32px !important;
		font-size: var(--hg-font-size-body);
	}
}

/* ==========================================================================
   HOMEPAGE GUTENBERG GRID RECOVERY
   --------------------------------------------------------------------------
   The homepage-redesign stylesheet supports two Gutenberg markup variants.
   Its newer reset expects an inner-container wrapper and forces the outer
   trust/stats/review/newsletter blocks to `display:block`. The live homepage
   renders those children directly, so the intended grid columns collapse into
   one vertical stack. Restore grid layout on the real direct-child structure.
   This must remain at EOF to win the stylesheet's late Gutenberg reset.
   ========================================================================== */

body.hg-homepage-active .higuppy-home .hg-trust-panel,
body.home .higuppy-home .hg-trust-panel,
body.hg-homepage-active .higuppy-home .hg-stats,
body.home .higuppy-home .hg-stats,
body.hg-homepage-active .higuppy-home .hg-review-grid,
body.home .higuppy-home .hg-review-grid,
body.hg-homepage-active .higuppy-home .hg-newsletter,
body.home .higuppy-home .hg-newsletter {
	display: grid !important;
}

/* Keep product slider controls beside the section label, not overlapping it. */
body.hg-homepage-active .higuppy-home .hg-home-product-head,
body.home .higuppy-home .hg-home-product-head {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-wrap: wrap !important;
	gap: 12px 14px !important;
	width: 100% !important;
	margin: 0 0 18px !important;
}

body.hg-homepage-active .higuppy-home .hg-home-product-head .hg-section-label,
body.home .higuppy-home .hg-home-product-head .hg-section-label {
	margin: 0 !important;
}

body.hg-homepage-active .higuppy-home .hg-products .hg-home-product-controls,
body.home .higuppy-home .hg-products .hg-home-product-controls,
body.hg-homepage-active .higuppy-home .hg-best-sellers .hg-home-product-controls,
body.home .higuppy-home .hg-best-sellers .hg-home-product-controls {
	align-self: auto !important;
	width: auto !important;
	display: flex !important;
	justify-content: flex-start !important;
	margin: 0 !important;
}

/* The Best Sellers enhancement can inherit a cloned control pair. Keep one. */
body.hg-homepage-active .higuppy-home .hg-best-sellers .hg-home-product-controls ~ .hg-home-product-controls,
body.home .higuppy-home .hg-best-sellers .hg-home-product-controls ~ .hg-home-product-controls,
body.hg-homepage-active .higuppy-home .hg-products .hg-home-product-controls ~ .hg-home-product-controls,
body.home .higuppy-home .hg-products .hg-home-product-controls ~ .hg-home-product-controls {
	display: none !important;
}

/* Homepage card checkout actions: compact cart action alongside price, with
   Buy Now as the deliberate full-width action below. */
body.hg-homepage-active .higuppy-home .hg-product-price-row,
body.home .higuppy-home .hg-product-price-row {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 10px !important;
	margin-top: auto !important;
	margin-bottom: 10px !important;
}

body.hg-homepage-active .higuppy-home .hg-product-price-row .hg-price,
body.home .higuppy-home .hg-product-price-row .hg-price {
	margin: 0 !important;
}

body.hg-homepage-active .higuppy-home .hg-product-price-row .hg-add-cart,
body.home .higuppy-home .hg-product-price-row .hg-add-cart {
	width: auto !important;
	min-height: 34px !important;
	margin: 0 !important;
	padding: 7px 12px !important;
	font-size: var(--hg-font-size-body);
	white-space: nowrap;
}

body.hg-homepage-active .higuppy-home .hg-buy-now,
body.home .higuppy-home .hg-buy-now {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	min-height: 38px !important;
	border-radius: 999px !important;
	background: #13203a !important;
	color: #fff !important;
	font-size: var(--hg-font-size-body);
	font-weight: var(--hg-font-weight-ui);
}

body.hg-homepage-active .higuppy-home .hg-stars--new small,
body.home .higuppy-home .hg-stars--new small {
	color: #667085 !important;
	font-weight: var(--hg-font-weight-ui);
}

/* Homepage background cleanup: keep one calm canvas and let cards/CTA areas
   provide the visual separation. The old section fills were stacking a
   white trust panel, white Why panel, cream products panel, blue stats panel,
   and gray testimonials panel on top of the same page canvas. */
body.hg-homepage-active .higuppy-home .hg-trust-panel,
body.home .higuppy-home .hg-trust-panel,
body.hg-homepage-active .higuppy-home .hg-why,
body.home .higuppy-home .hg-why,
body.hg-homepage-active .higuppy-home .hg-categories,
body.home .higuppy-home .hg-categories,
body.hg-homepage-active .higuppy-home .hg-products,
body.home .higuppy-home .hg-products,
body.hg-homepage-active .higuppy-home .hg-stats,
body.home .higuppy-home .hg-stats,
body.hg-homepage-active .higuppy-home .hg-testimonials,
body.home .higuppy-home .hg-testimonials,
body.hg-homepage-active .higuppy-home .hg-blog,
body.home .higuppy-home .hg-blog {
	background: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
}

/* ==========================================================================
   HOMEPAGE CANVAS + BLOG ALIGNMENT
   --------------------------------------------------------------------------
   The homepage stylesheet layers a page gradient, section gradients and a
   full-bleed blog pseudo-background on top of each other. Keep one calm
   canvas and reserve color for the actual cards/components.
   ========================================================================== */

body.hg-homepage-active .higuppy-home,
body.home .higuppy-home {
	background: #f7fbff !important;
}

body.hg-homepage-active .higuppy-home .hg-hero,
body.home .higuppy-home .hg-hero {
	background: #f7fbff !important;
	background-image: none !important;
}

body.hg-homepage-active .higuppy-home .hg-testimonials,
body.home .higuppy-home .hg-testimonials,
body.hg-homepage-active .higuppy-home .hg-blog,
body.home .higuppy-home .hg-blog,
body.hg-homepage-active .higuppy-home .hg-products,
body.home .higuppy-home .hg-products {
	background: transparent !important;
}

body.hg-homepage-active .higuppy-home .hg-blog::before,
body.home .higuppy-home .hg-blog::before {
	display: none !important;
}

/* The blog intro is a full-width centered block; do not let a legacy flex
   wrapper constrain or crop the title/lead on the live Gutenberg markup. */
body.hg-homepage-active .higuppy-home .hg-blog-head,
body.home .higuppy-home .hg-blog-head {
	display: block !important;
	width: 100% !important;
	max-width: 1160px !important;
	margin: 0 auto !important;
	text-align: center !important;
}

body.hg-homepage-active .higuppy-home .hg-blog-head__copy,
body.home .higuppy-home .hg-blog-head__copy {
	width: 100% !important;
	max-width: 980px !important;
	margin: 0 auto !important;
}

body.hg-homepage-active .higuppy-home .hg-blog-title,
body.home .higuppy-home .hg-blog-title {
	width: 100% !important;
	max-width: 980px !important;
	margin: 0 auto 12px !important;
	text-align: center !important;
	font-size: clamp(34px, 4.6vw, 58px);
	line-height: 1.08;
}

body.hg-homepage-active .higuppy-home .hg-blog-lead,
body.home .higuppy-home .hg-blog-lead {
	width: 100% !important;
	max-width: 820px !important;
	margin: 0 auto !important;
	text-align: center !important;
}

body.hg-homepage-active .higuppy-home .hg-blog-head__nav,
body.home .higuppy-home .hg-blog-head__nav {
	justify-content: center !important;
	margin-top: 24px !important;
}

body.hg-homepage-active .higuppy-home .hg-newsletter,
body.home .higuppy-home .hg-newsletter {
	background: #ffffff !important;
}

/* Match the newsletter shell to the header shell. */
body.hg-homepage-active .higuppy-home .hg-newsletter,
body.home .higuppy-home .hg-newsletter {
	width: min(1160px, calc(100vw - 40px)) !important;
	max-width: 1160px !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	left: 50% !important;
	transform: translateX(-50%) !important;
	box-sizing: border-box !important;
}

body.hg-homepage-active .higuppy-home section.hg-container.hg-newsletter,
body.home .higuppy-home section.hg-container.hg-newsletter,
body.hg-homepage-active .higuppy-home .wp-block-group.hg-container.hg-newsletter,
body.home .higuppy-home .wp-block-group.hg-container.hg-newsletter {
	width: min(1160px, calc(100vw - 40px)) !important;
	max-width: 1160px !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	left: 50% !important;
	transform: translateX(-50%) !important;
}

/* The page template clips overflow, which prevents position:sticky from
   sticking. Keep a short clearance below the fixed header without the old
   oversized blank band before the hero. */
body.hg-homepage-active .higuppy-home,
body.home .higuppy-home {
	padding-top: 32px !important;
}

body.hg-homepage-active .higuppy-home .hg-nav,
body.home .higuppy-home .hg-nav,
body.hg-homepage-active .higuppy-home nav#hgSiteNav.hg-nav,
body.home .higuppy-home nav#hgSiteNav.hg-nav {
	position: fixed !important;
	top: 12px !important;
	left: 50% !important;
	transform: translateX(-50%) !important;
	width: min(calc(100% - 40px), 1160px) !important;
	margin: 0 !important;
	z-index: 1001 !important;
}

/* Keep every homepage shell aligned to the same 1160px content rail. */
body.hg-homepage-active .higuppy-home section.hg-container.hg-trust-panel,
body.home .higuppy-home section.hg-container.hg-trust-panel,
body.hg-homepage-active .higuppy-home .wp-block-group.hg-container.hg-trust-panel,
body.home .higuppy-home .wp-block-group.hg-container.hg-trust-panel {
	width: min(1160px, calc(100vw - 40px)) !important;
	max-width: 1160px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	border-radius: 24px !important;
	overflow: hidden !important;
	box-sizing: border-box !important;
}

/* Remove the two empty hero circles; they read as broken UI at this scale. */
body.hg-homepage-active .higuppy-home .hg-hero::before,
body.home .higuppy-home .hg-hero::before,
body.hg-homepage-active .higuppy-home .hg-hero::after,
body.home .higuppy-home .hg-hero::after {
	display: none !important;
	content: none !important;
}

/* Trust cards: Gutenberg uses <p> for the emoji icon (not <span>), so a
 * 2-column grid put icon + body copy in the same cell and they overlapped.
 * Stack icon → title → copy vertically instead. */
body.hg-homepage-active .higuppy-home .hg-trust-panel article,
body.home .higuppy-home .hg-trust-panel article {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	text-align: center !important;
	gap: 8px !important;
	grid-template-columns: none !important;
	grid-template-rows: none !important;
	padding: 22px 18px !important;
}

body.hg-homepage-active .higuppy-home .hg-trust-panel article > span,
body.home .higuppy-home .hg-trust-panel article > span,
body.hg-homepage-active .higuppy-home .hg-trust-panel article > p:first-child,
body.home .higuppy-home .hg-trust-panel article > p:first-child {
	display: grid !important;
	place-items: center !important;
	grid-area: auto !important;
	grid-column: auto !important;
	grid-row: auto !important;
	width: 52px !important;
	height: 52px !important;
	margin: 0 auto 4px !important;
	padding: 0 !important;
	border-radius: 999px !important;
	background: #ecfbff !important;
	font-size: 22px;
	line-height: 1;
}

body.hg-homepage-active .higuppy-home .hg-trust-panel article > h3,
body.home .higuppy-home .hg-trust-panel article > h3 {
	grid-area: auto !important;
	grid-column: auto !important;
	grid-row: auto !important;
	margin: 0 !important;
}

body.hg-homepage-active .higuppy-home .hg-trust-panel article > p:not(:first-child),
body.home .higuppy-home .hg-trust-panel article > p:not(:first-child) {
	grid-area: auto !important;
	grid-column: auto !important;
	grid-row: auto !important;
	margin: 0 !important;
	line-height: 1.45;
}

/* Use real customer portraits in the compact rating strip. */
body.hg-homepage-active .higuppy-home .hg-avatars i,
body.home .higuppy-home .hg-avatars i {
	background-image: url('../images/higuppy-customer-avatars-v1.png') !important;
	background-size: 400% 100% !important;
	background-repeat: no-repeat !important;
	background-position-y: center !important;
}

body.hg-homepage-active .higuppy-home .hg-avatars i:nth-child(1),
body.home .higuppy-home .hg-avatars i:nth-child(1) { background-position-x: 0% !important; }
body.hg-homepage-active .higuppy-home .hg-avatars i:nth-child(2),
body.home .higuppy-home .hg-avatars i:nth-child(2) { background-position-x: 33.333% !important; }
body.hg-homepage-active .higuppy-home .hg-avatars i:nth-child(3),
body.home .higuppy-home .hg-avatars i:nth-child(3) { background-position-x: 66.666% !important; }
body.hg-homepage-active .higuppy-home .hg-avatars i:nth-child(4),
body.home .higuppy-home .hg-avatars i:nth-child(4) { background-position-x: 100% !important; }

@media (max-width: 900px) {
	body.hg-homepage-active .higuppy-home .hg-trust-panel article,
	body.home .higuppy-home .hg-trust-panel article {
		padding: 16px 12px !important;
		gap: 6px !important;
	}
	body.hg-homepage-active .higuppy-home .hg-trust-panel article > span,
	body.home .higuppy-home .hg-trust-panel article > span,
	body.hg-homepage-active .higuppy-home .hg-trust-panel article > p:first-child,
	body.home .higuppy-home .hg-trust-panel article > p:first-child {
		width: 40px !important;
		height: 40px !important;
		font-size: 18px;
	}
}

@media (max-width: 767px) {
	body.hg-homepage-active .higuppy-home section#hg-why .hg-check-list,
	body.home .higuppy-home section#hg-why .hg-check-list,
	body.hg-homepage-active .higuppy-home section#hg-why .hg-check-list li,
	body.home .higuppy-home section#hg-why .hg-check-list li {
		text-align: left !important;
		justify-content: flex-start !important;
	}
}

/* Keep category images and names visible on mobile without the extra card frame. */
@media (max-width: 767px) {
	body.hg-homepage-active .higuppy-home section#hg-categories .hg-category-card,
	body.home .higuppy-home section#hg-categories .hg-category-card {
		border: 0 !important;
		border-radius: 0 !important;
		background: transparent !important;
		box-shadow: none !important;
	}
}

/* Put the compact stats icon and title on one line, with the description below. */
@media (max-width: 767px) {
	body.hg-homepage-active .higuppy-home section.hg-stats .hg-stat-card,
	body.home .higuppy-home section.hg-stats .hg-stat-card {
		display: grid !important;
		grid-template-columns: 28px minmax(0, 1fr) !important;
		grid-template-areas: "icon title" "copy copy" !important;
		align-items: center !important;
		justify-items: stretch !important;
		column-gap: 8px !important;
		row-gap: 6px !important;
		padding: 14px 12px !important;
		text-align: left !important;
	}

	body.hg-homepage-active .higuppy-home section.hg-stats .hg-stat-card > span,
	body.home .higuppy-home section.hg-stats .hg-stat-card > span {
		grid-area: icon !important;
		justify-self: start !important;
		font-size: 22px;
		line-height: 1;
	}

	body.hg-homepage-active .higuppy-home section.hg-stats .hg-stat-card > strong,
	body.home .higuppy-home section.hg-stats .hg-stat-card > strong {
		grid-area: title !important;
		margin: 0 !important;
		font-size: 16px;
		line-height: 1.2;
		letter-spacing: -0.02em !important;
		text-align: left !important;
	}

	body.hg-homepage-active .higuppy-home section.hg-stats .hg-stat-card > small,
	body.home .higuppy-home section.hg-stats .hg-stat-card > small {
		grid-area: copy !important;
		margin: 0 !important;
		font-size: var(--hg-font-size-body);
		line-height: 1.4;
		text-align: left !important;
	}
}