/*
 * front-page.css — home page only (front-page.php), handle: fh-front-page.
 * Enqueued from inc/enqueue.php via is_front_page(); loads AFTER common.css,
 * which provides tokens, font, header, nav, footer and newsletter.
 * Paths are relative to this file: assets/css/ -> ../images.
 */

.fh-page {
	padding-top: calc(var(--fh-header-height) + 35px);
}

.fh-mission .fh-wrap,
.fh-products .fh-wrap,
.fh-benefits .fh-wrap {
	width: min(var(--fh-width), 95vw);
}

/* --------------------------------------------------------------------------
   Category strip
   -------------------------------------------------------------------------- */
.fh-categories {
	margin-top: 42px;
}

.fh-category-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
}

.fh-category-card {
	display: flex;
	min-height: 178px;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 17px;
	border: 1px solid var(--fh-line);
	border-right-width: 0;
	border-radius: 2px;
	color: #131313;
	font-size: 18px;
	font-weight: 500;
	text-align: center;
	transition: background-color 180ms ease;
}

.fh-category-card:last-child {
	border-right-width: 1px;
}

.fh-category-card:hover {
	background: var(--fh-hover);
	color: #131313;
}

.fh-category-card svg {
	width: 31px;
	height: 31px;
	fill: none;
	stroke: #000;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.fh-category-card svg.fh-icon-fill {
	width: auto;
	height: 28px;
}

.fh-category-card svg.fh-icon-fill,
.fh-category-card svg.fh-icon-fill path {
	fill: currentColor;
	stroke: none !important;
	stroke-width: 0 !important;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.fh-hero {
	margin-top: 20px;
}

.fh-hero-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	min-height: 80vh;
	padding: 0 5vw 0 1vw;
	background-image: url("../images/hero-background-blue.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}

.fh-hero-left {
	display: flex;
	min-height: 80vh;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding-top: 6vh;
}

.fh-hero-left h2 {
	align-self: flex-start;
	margin: 0 0 16px 12%;
	font-size: 32px;
	font-weight: 400;
	line-height: 120%;
	letter-spacing: 0;
	color: #000;
}

.fh-discover {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	align-self: flex-start;
	margin-left: 12%;
	color: #000;
	font-size: 18px;
	font-weight: 400;
	line-height: 120%;
}

.fh-discover svg {
	width: 19px;
	height: 19px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.fh-hero-product {
	width: 80%;
	max-width: 470px;
	margin-top: 5%;
}

.fh-hero-left p {
	align-self: flex-start;
	max-width: none;
	margin: 18px 0 0 12%;
	font-size: 24px;
	font-weight: 500;
	line-height: 1.08;
	letter-spacing: 0;
	text-align: left;
	white-space: nowrap;
}

.fh-hero-copy {
	display: flex;
	min-height: 80vh;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	padding-left: 0.6vw;
	transform: translateY(-28px);
}

.fh-hero-copy h1 {
	margin: 0 0 6px;
	color: #000;
	font-size: 44px;
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: 0;
}

.fh-hero-copy strong {
	display: block;
	margin: 0 0 14px;
	color: #000;
	font-family: Arial, sans-serif;
	font-size: 17px;
	font-weight: 700;
	line-height: 120%;
}

.fh-hero-copy hr {
	width: 100%;
	margin: 0 0 32px;
	border: 0;
	border-top: 2px solid #000;
}

.fh-hero-copy h3 {
	max-width: 100%;
	margin: 0 0 32px;
	color: #000;
	font-size: clamp(31px, 1.85vw, 35px);
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: 0;
}

.fh-hero-actions {
	display: grid;
	gap: 20px;
	margin-left: 1rem;
}

/* --------------------------------------------------------------------------
   Mission
   -------------------------------------------------------------------------- */
.fh-mission {
	padding: 82px 0 46px;
	background: var(--fh-bg);
}

.fh-mission-grid {
	display: block;
}

.fh-mission-start p {
	max-width: 1300px;
	margin: 0 0 22px;
	color: #4a4a4a;
	font-size: 32px;
	font-weight: 400;
	line-height: 120%;
	letter-spacing: 0;
}

.fh-mission-start h2 {
	margin: 0;
	color: #3c3c3c;
	font-size: 32px;
	font-style: italic;
	font-weight: 400;
	line-height: 120%;
	letter-spacing: 0;
}

.fh-mission-actions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	margin-top: 52px;
}

.fh-mission-actions .fh-button {
	min-width: 275px;
	min-height: 70px;
	gap: 10px;
}

.fh-mission-actions .fh-button::after {
	content: "";
	width: 22px;
	height: 22px;
	flex: none;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M504 256C504 119 393 8 256 8S8 119 8 256s111 248 248 248 248-111 248-248zm-448 0c0-110.5 89.5-200 200-200s200 89.5 200 200-89.5 200-200 200S56 366.5 56 256zm72 20v-40c0-6.6 5.4-12 12-12h116v-67c0-10.7 12.9-16 20.5-8.5l99 99c4.7 4.7 4.7 12.3 0 17l-99 99c-7.6 7.6-20.5 2.2-20.5-8.5v-67H140c-6.6 0-12-5.4-12-12z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M504 256C504 119 393 8 256 8S8 119 8 256s111 248 248 248 248-111 248-248zm-448 0c0-110.5 89.5-200 200-200s200 89.5 200 200-89.5 200-200 200S56 366.5 56 256zm72 20v-40c0-6.6 5.4-12 12-12h116v-67c0-10.7 12.9-16 20.5-8.5l99 99c4.7 4.7 4.7 12.3 0 17l-99 99c-7.6 7.6-20.5 2.2-20.5-8.5v-67H140c-6.6 0-12-5.4-12-12z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* --------------------------------------------------------------------------
   Paradigm band
   -------------------------------------------------------------------------- */
.fh-paradigm {
	width: var(--fh-wide);
	min-height: 614px;
	margin: 0 auto;
	background-image: url("../images/product-band-background.png");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}

.fh-paradigm-copy {
	width: min(var(--fh-width), 95vw);
	margin-inline: auto;
	padding: 76px 0 70px;
	color: #000;
}

.fh-paradigm-copy h2 {
	max-width: 1260px;
	margin: 0 0 22px;
	color: #000;
	font-size: 32px;
	font-weight: 400;
	line-height: 120%;
	letter-spacing: 0;
}

.fh-paradigm-copy h3 {
	margin: 0 0 24px;
	color: #000;
	font-size: 32px;
	font-style: italic;
	font-weight: 400;
	line-height: 120%;
	letter-spacing: 0;
}

.fh-paradigm-copy p {
	max-width: 1260px;
	margin: 0 0 24px;
	color: #000;
	font-size: 27px;
	line-height: 1.35;
}

/* --------------------------------------------------------------------------
   Product grid + card (CSS subgrid keeps rows aligned per row of cards)
   -------------------------------------------------------------------------- */
.fh-products {
	padding: 140px 0;
	background: var(--fh-bg);
}

.fh-product-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-rows: auto;
	gap: 24px;
}

.fh-product-card {
	position: relative;
	display: grid;
	grid-row: span 4;
	grid-template-rows: subgrid;
	row-gap: 0;
	background: #eef1f4;
	border: 1px solid var(--fh-line);
	border-radius: 3px;
	overflow: hidden;
	text-align: left;
	transition: box-shadow 200ms ease, transform 200ms ease;
}

.fh-product-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 34px rgba(0, 48, 87, 0.16);
}

.fh-product-media {
	position: relative;
	overflow: hidden;
	background: #f6f7f9;
}

.fh-sale {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 46px;
	padding: 7px 14px;
	border-radius: 4px;
	background: var(--fh-blue);
	color: var(--fh-white);
	font-family: Arial, sans-serif;
	font-size: 13px;
	font-weight: 700;
}

.fh-product-image {
	display: block;
	height: 360px;
	margin: 0;
	padding: 0;
}

.fh-product-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.fh-lab {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 13px 16px;
	background: var(--fh-blue);
	font-family: "Optima", Arial, sans-serif;
	font-size: 16px;
	font-weight: 500;
	text-align: center;
	opacity: 0;
	transform: translateY(100%);
	transition: opacity 200ms ease, transform 200ms ease;
}

.fh-product-card a.fh-lab,
.fh-product-card a.fh-lab:hover,
.fh-product-card a.fh-lab:focus,
.fh-product-card a.fh-lab:visited {
	color: var(--fh-white);
}

.fh-product-card:hover .fh-lab {
	opacity: 1;
	transform: translateY(0);
}

.fh-product-card h3 {
	align-self: start;
	margin: 0;
	padding: 24px 22px 0;
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1.2;
}

.fh-product-card h3 a,
.fh-product-card h3 a:hover,
.fh-product-card h3 a:focus,
.fh-product-card h3 a:visited {
	color: var(--fh-blue);
	-webkit-text-stroke: 0.35px currentColor;
}

.fh-price {
	align-self: start;
	margin: 0;
	padding: 10px 22px 24px;
	color: var(--fh-blue);
	font-family: Arial, sans-serif;
	font-size: 18px;
	font-weight: 700;
}

.fh-price del {
	color: rgba(0, 0, 0, 0.45);
	font-weight: 500;
	margin-right: 5px;
}

.fh-price ins {
	color: var(--fh-blue);
	font-weight: 700;
	text-decoration: none;
}

.fh-add {
	align-self: end;
	width: 100%;
	min-height: 56px;
	padding: 15px;
	border-radius: 0 !important;
	font-family: Arial, sans-serif;
	font-size: 16px;
	font-weight: 500;
}

/* --------------------------------------------------------------------------
   Benefits strip
   -------------------------------------------------------------------------- */
.fh-benefits {
	padding: 20px 0 96px;
	background: var(--fh-bg);
}

.fh-benefit-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}

.fh-benefit-grid > div {
	display: flex;
	min-height: 190px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 14px;
	padding: 34px 24px;
	border: 1px solid var(--fh-line);
	border-right-width: 0;
	text-align: center;
}

.fh-benefit-grid > div:last-child {
	border-right-width: 1px;
}

.fh-benefit-grid svg {
	width: 30px;
	height: 30px;
	fill: #1c1c1c;
	stroke: none;
}

.fh-benefit-grid h3 {
	margin: 0 0 8px;
	font-size: 23px;
	font-weight: 500;
	line-height: 1.2;
}

.fh-benefit-grid p {
	margin: 0;
	color: var(--fh-muted);
	font-size: 17px;
	line-height: 1.4;
}

/* --------------------------------------------------------------------------
   Full-bleed banners: Peptides + Hormone Health
   -------------------------------------------------------------------------- */
.fh-banner {
	position: relative;
	width: var(--fh-wide);
	margin: 0 auto;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	color: var(--fh-white);
	overflow: hidden;
}

.fh-banner::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	pointer-events: none;
}

.fh-banner-link,
.fh-banner-link:hover,
.fh-banner-link:focus {
	color: inherit;
	text-decoration: none;
}

.fh-banner-link:focus-visible {
	outline: 3px solid rgba(255, 255, 255, 0.85);
	outline-offset: -8px;
}

.fh-banner-link:hover .fh-discover svg {
	transform: translateX(4px);
}

.fh-peptides {
	background: url("../images/front-page/peptides-banner.png") center center / cover no-repeat;
}

.fh-hormone {
	background: url("../images/front-page/hormone-banner.png") center center / cover no-repeat;
}

.fh-banner-grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: 40px;
	align-items: center;
	min-height: 82vh;
	padding: 6vw 1vw;
}

.fh-banner h2 {
	margin: 0 0 8px;
	font-size: 32px;
	font-weight: 400;
	line-height: 120%;
	letter-spacing: 0;
}

.fh-banner p {
	margin: 0 0 18px;
	font-size: 18px;
	font-weight: 400;
	line-height: 120%;
}

.fh-banner h3 {
	margin: 0;
	color: var(--fh-white);
	font-size: clamp(68px, 7vw, 103px);
	font-weight: 400;
	line-height: 120%;
}

.fh-discover.light {
	color: var(--fh-white);
	margin-left: 0;
}

/* Peptides & Hormone banners — stacked layout */
.fh-peptides .fh-banner-grid,
.fh-hormone .fh-banner-grid {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	width: min(var(--fh-width), 90vw);
	min-height: clamp(640px, 86vh, 980px);
	margin-inline: auto;
	padding: 34px 0 30px;
}

.fh-peptides .fh-banner-grid > div h2,
.fh-peptides .fh-banner-grid > div p,
.fh-hormone .fh-banner-grid > div h2,
.fh-hormone .fh-banner-grid > div p {
	display: inline;
	margin: 0;
	font-size: 32px;
	line-height: 1.3;
}

.fh-peptides .fh-banner-grid > div p::before,
.fh-hormone .fh-banner-grid > div p::before {
	content: " ";
}

.fh-peptides .fh-banner-grid .fh-discover,
.fh-hormone .fh-banner-grid .fh-discover {
	display: flex;
	margin-top: 14px;
}

.fh-peptides .fh-banner-grid h3,
.fh-hormone .fh-banner-grid h3 {
	margin: clamp(60px, 10vh, 140px) 0 0;
	max-width: 1150px;
	font-size: clamp(60px, 6vw, 103px);
	line-height: 1.12;
}

/* Hormone heading — wider so it wraps to 2 lines */
.fh-hormone .fh-banner-grid h3 {
	max-width: min(1300px, 90vw);
}

/* --------------------------------------------------------------------------
   Skin care band
   -------------------------------------------------------------------------- */
.fh-skin {
	position: relative;
	width: var(--fh-wide);
	min-height: 720px;
	margin: 0 auto;
	background-image: url("../images/skin-care-background.webp");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	padding: 0;
	overflow: hidden;
}

.fh-skin::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	pointer-events: none;
}

.fh-skin-grid {
	position: relative;
	z-index: 1;
	display: block;
	width: min(var(--fh-width), 95vw);
	min-height: 720px;
	padding: 36px 0 44px;
}

.fh-skin-copy {
	display: flex;
	min-height: 640px;
	flex-direction: column;
	align-items: flex-start;
}

.fh-skin-copy h2 {
	margin: 0 0 8px;
	color: var(--fh-white);
	font-size: 32px;
	font-weight: 400;
	line-height: 120%;
	letter-spacing: -0.5px;
}

.fh-skin .fh-discover {
	color: var(--fh-white);
	margin-left: 0;
}

.fh-skin-copy h3 {
	margin: auto 0 0;
	color: var(--fh-white);
	font-size: clamp(68px, 7vw, 103px);
	font-weight: 400;
	line-height: 120%;
}

.fh-skin-products {
	padding-top: 140px;
}

/* --------------------------------------------------------------------------
   Responsive — home sections only
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.fh-product-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.fh-benefit-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.fh-benefit-grid > div,
	.fh-benefit-grid > div:last-child {
		border-right-width: 1px;
	}

	.fh-banner h3 {
		font-size: 68px;
	}

	.fh-paradigm {
		min-height: 560px;
	}

	.fh-paradigm-copy p {
		font-size: 23px;
	}
}

@media (max-width: 767px) {
	:root {
		--fh-header-height: 74px;
	}

	.fh-page {
		padding-top: calc(var(--fh-header-height) + 10px);
	}

	.fh-header-main {
		padding: 11px 0;
	}

	.fh-header-grid {
		grid-template-columns: 42px minmax(0, 1fr) 96px;
		grid-template-areas: "menu logo tools";
		gap: 0 10px;
		padding: 0 16px;
	}

	.fh-logo,
	.fh-logo img {
		width: 116px;
	}

	.fh-menu-toggle,
	.fh-search button,
	.fh-cart {
		width: 38px;
		height: 38px;
	}

	.fh-header-tools {
		gap: 10px;
	}

	.fh-search svg,
	.fh-cart svg {
		width: 27px;
		height: 27px;
	}

	.fh-search.is-open input[type="search"] {
		top: 72px;
		left: 16px;
		width: calc(100vw - 32px);
		height: 54px;
	}

	.fh-search.is-open button {
		top: 80px;
		right: 24px;
	}

	.fh-search.is-open::after {
		top: 134px;
		left: 16px;
	}

	.fh-categories {
		margin-top: 10px;
	}

	.fh-wrap {
		width: min(var(--fh-width), calc(100vw - 40px));
		max-width: 100%;
	}

	.fh-categories,
	.fh-mission,
	.fh-products,
	.fh-benefits,
	.fh-newsletter {
		padding-left: 0;
		padding-right: 0;
	}

	.fh-category-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.fh-category-card {
		min-height: 92px;
		gap: 6px;
		padding: 16px 12px;
		border-width: 1px 0 0 1px;
		font-size: 15px;
		line-height: 1.22;
	}

	.fh-category-card:nth-child(2n) {
		border-right-width: 1px;
	}

	.fh-category-card:last-child {
		grid-column: 1 / 3;
		border-right-width: 1px;
		border-bottom-width: 1px;
	}

	.fh-category-card svg {
		width: 22px;
		height: 22px;
	}

	.fh-hero {
		margin: 0;
	}

	.fh-hero-grid {
		grid-template-columns: 1fr;
		min-height: 0;
		padding: 28px 20px 36px;
		background-position: 45% center;
	}

	.fh-hero-left {
		min-height: 0;
		padding: 0;
	}

	.fh-hero-left h2 {
		align-self: center;
		margin: 0 0 12px;
		font-size: 24px;
	}

	.fh-discover {
		align-self: center;
		margin: 0;
		font-size: 16px;
	}

	.fh-hero-product {
		width: 100%;
		max-width: 225px;
		margin-top: 22px;
	}

	.fh-hero-left p {
		align-self: center;
		max-width: 330px;
		margin: 20px 0 0;
		font-size: 19px;
		text-align: center;
		white-space: normal;
	}

	.fh-hero-copy {
		min-height: 0;
		align-items: center;
		padding: 30px 0 0;
		text-align: center;
		transform: none;
	}

	.fh-hero-copy h1 {
		font-size: 36px;
	}

	.fh-hero-copy strong {
		font-size: 15px;
	}

	.fh-hero-copy h3 {
		margin-bottom: 24px;
		font-size: 30px;
	}

	.fh-hero-actions {
		width: 100%;
		justify-items: center;
		margin-left: 0;
	}

	.fh-hero-actions .fh-button {
		width: min(250px, 100%);
	}

	.fh-mission {
		padding-top: 52px;
		padding-bottom: 32px;
	}

	.fh-mission-grid {
		grid-template-columns: 1fr;
		gap: 36px;
	}

	.fh-mission-start p,
	.fh-mission-start h2,
	.fh-paradigm-copy h2,
	.fh-paradigm-copy h3 {
		font-size: 22px;
		line-height: 1.22;
	}

	.fh-paradigm {
		width: 100%;
		min-height: 0;
	}

	.fh-paradigm-copy {
		width: 100%;
		padding: 48px 20px;
	}

	.fh-paradigm-copy p {
		font-size: 17px;
		line-height: 1.42;
	}

	.fh-mission-actions {
		align-items: stretch;
		justify-content: center;
		gap: 14px;
		margin-top: 32px;
	}

	.fh-mission-actions .fh-button {
		width: 100%;
		min-width: 0;
		min-height: 56px;
	}

	.fh-products {
		padding-top: 54px;
		padding-bottom: 54px;
	}

	.fh-product-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 18px 14px;
	}

	.fh-product-card {
		min-height: 0;
	}

	.fh-product-image {
		height: clamp(170px, 45vw, 230px);
	}

	.fh-product-card .fh-lab {
		min-height: 38px;
		padding: 9px 10px;
		font-size: 12px;
		opacity: 1;
		transform: none;
	}

	.fh-product-card h3 {
		padding: 16px 14px 0;
		font-size: 16px;
		line-height: 1.2;
	}

	.fh-price {
		padding: 8px 14px 16px;
		font-size: 15px;
		line-height: 1.25;
	}

	.fh-add {
		min-height: 46px;
		padding: 12px 8px;
		font-size: 15px;
	}

	.fh-benefits {
		padding-top: 0;
		padding-bottom: 52px;
	}

	.fh-benefit-grid {
		grid-template-columns: 1fr;
	}

	.fh-benefit-grid > div {
		min-height: 150px;
		padding: 28px 18px;
	}

	.fh-banner-grid {
		grid-template-columns: 1fr;
		min-height: 430px;
		padding: 44px 20px;
		text-align: center;
	}

	.fh-banner {
		width: 100%;
	}

	.fh-banner h2 {
		font-size: 22px;
	}

	.fh-banner p,
	.fh-banner .fh-discover {
		font-size: 16px;
	}

	.fh-banner h3 {
		font-size: 38px;
		line-height: 1.12;
	}

	.fh-peptides .fh-banner-grid,
	.fh-hormone .fh-banner-grid {
		align-items: flex-start;
		text-align: left;
		width: calc(100vw - 40px);
		min-height: 460px;
		padding: 54px 0 44px;
	}

	.fh-peptides .fh-banner-grid > div h2,
	.fh-peptides .fh-banner-grid > div p,
	.fh-hormone .fh-banner-grid > div h2,
	.fh-hormone .fh-banner-grid > div p {
		font-size: 20px;
	}

	.fh-peptides .fh-banner-grid h3,
	.fh-hormone .fh-banner-grid h3 {
		max-width: 100%;
		margin-top: 72px;
		font-size: 38px;
		text-align: center;
	}

	.fh-skin {
		width: 100%;
		min-height: 460px;
		padding: 0;
		background-position: 55% center;
	}

	.fh-skin-grid {
		min-height: 460px;
		padding: 46px 0;
	}

	.fh-skin-copy {
		min-height: 368px;
		align-items: center;
		text-align: center;
	}

	.fh-skin-copy h2,
	.fh-skin-copy h3 {
		font-size: 32px;
		line-height: 1.12;
		letter-spacing: 0;
	}

	.fh-newsletter {
		padding-top: 44px;
		padding-bottom: 44px;
	}

	.fh-newsletter .fh-wrap {
		width: min(var(--fh-width), calc(100vw - 40px));
		max-width: 100%;
		margin-inline: auto;
	}

	.fh-newsletter h2 {
		font-size: 27px;
		line-height: 1.2;
	}

	.fh-newsletter-form {
		width: 100%;
	}
}

@media (max-width: 430px) {
	.fh-product-grid {
		gap: 16px 12px;
	}

	.fh-product-image {
		height: 168px;
	}

	.fh-product-card h3 {
		font-size: 15px;
	}

	.fh-add {
		font-size: 14px;
	}

	.fh-newsletter-form {
		flex-direction: column;
		gap: 12px;
	}

	.fh-newsletter-form button {
		width: 100%;
	}
}

@media (max-width: 360px) {
	.fh-product-grid {
		grid-template-columns: 1fr;
	}

	.fh-product-image {
		height: 260px;
	}
}