/* Front-page shell */
.wp-site-blocks > main.ggn-home {
	margin-block-start: 0 !important;
}

.ggn-home {
	padding-bottom: var(--wp--preset--spacing--section);
}

.ggn-home .ggn-home__section {
	margin-top: var(--wp--preset--spacing--section);
}

.ggn-home .ggn-home__section-inner {
	margin-left: auto;
	margin-right: auto;
	max-width: var(--wp--style--global--wide-size);
	padding-left: var(--wp--preset--spacing--gutter);
	padding-right: var(--wp--preset--spacing--gutter);
}

@media (min-width: 782px) {
	.ggn-home .ggn-home__section-inner {
		box-sizing: border-box;
		width: calc(100% - 2 * var(--wp--preset--spacing--gutter));
		padding-left: 0;
		padding-right: 0;
	}
}

/* Hero */
.ggn-home .ggn-home__hero {
	background: var(--wp--preset--gradient--hero);
	margin-block-start: 0 !important;
	overflow: hidden;
}

.ggn-home .ggn-home__hero-inner {
	padding-top: var(--wp--preset--spacing--section);
	position: relative;
}

.ggn-home .ggn-home__hero-copy {
	margin-left: auto;
	margin-right: auto;
	max-width: 720px;
	text-align: center;
}

.ggn-home .ggn-home__delivery {
	align-items: center;
	background-color: var(--wp--preset--color--accent-soft);
	color: var(--wp--preset--color--accent);
	display: inline-flex;
	gap: var(--wp--preset--spacing--card);
}

.ggn-home .ggn-home__delivery::before {
	background-color: currentColor;
	content: "";
	height: calc(var(--wp--custom--control--size) / 4);
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm1 5v4.59l3.7 2.2-1 1.64L11 12.62V7h2Z'/%3E%3C/svg%3E") center / contain no-repeat;
	width: calc(var(--wp--custom--control--size) / 4);
}

.ggn-home .ggn-home__hero-title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--h-1);
	font-weight: 700;
	margin-bottom: var(--wp--preset--spacing--card);
	margin-top: var(--wp--preset--spacing--card-lg);
}

.ggn-home .ggn-home__hero-intro {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--body);
}

.ggn-home .ggn-home__hero-actions {
	gap: var(--wp--preset--spacing--card);
	justify-content: center;
	margin-top: var(--wp--preset--spacing--card-lg);
}

/* The horizon arc remains a clipped horizontal row until its script is ready. */
.ggn-home .ggn-hero-arc {
	height: var(--wp--custom--home--hero-arc-height);
	-webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
	overflow: hidden;
	position: relative;
	width: 100%;
}

.ggn-home .ggn-hero-arc .wc-block-product-template {
	display: flex;
	gap: var(--wp--preset--spacing--30);
	justify-content: center;
	list-style: none;
	margin: 0;
	overflow: hidden;
	padding: var(--wp--preset--spacing--10) 0;
	width: 100%;
}

.ggn-home .ggn-hero-arc .wc-block-product {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--sheet);
	box-sizing: border-box;
	box-shadow: 0 12px 32px var(--wp--preset--color--line);
	flex: 0 0 var(--wp--custom--home--hero-arc-card);
	margin: 0;
	padding: var(--wp--preset--spacing--10);
	width: var(--wp--custom--home--hero-arc-card);
}

.ggn-home .ggn-hero-arc img {
	aspect-ratio: 1;
	display: block;
	object-fit: contain;
	width: 100%;
}

.ggn-home .ggn-hero-arc__name,
.ggn-home .ggn-hero-arc__price {
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.ggn-home .ggn-hero-arc.is-arc-ready .wc-block-product-template {
	display: block;
	height: 100%;
	padding: 0;
	position: relative;
	width: 100%;
}

.ggn-home .ggn-hero-arc.is-arc-ready .wc-block-product {
	left: 0;
	position: absolute;
	top: 0;
	will-change: transform;
}

.ggn-home .ggn-hero-arc a:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

.ggn-home .ggn-hero-arc__spot {
	left: 50%;
	pointer-events: none;
	position: absolute;
	text-align: center;
	transform: translateX(-50%);
	transition: opacity 250ms ease;
	z-index: 200;
}

.ggn-home .ggn-hero-arc__spot-name {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--card-title);
	font-weight: 600;
}

.ggn-home .ggn-hero-arc__spot-price {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--meta);
}

.ggn-home .ggn-hero-arc__spot-price .amount {
	color: var(--wp--preset--color--good);
	font-weight: 600;
}

.ggn-home .ggn-hero-arc__horizon {
	border: 1px solid var(--wp--preset--color--accent-soft);
	border-bottom: 0;
	border-radius: 50%;
	box-shadow: 0 -40px 120px var(--wp--preset--color--accent-soft);
	pointer-events: none;
	position: absolute;
	z-index: 0;
}

/* Section headers and tabs */
.ggn-home .ggn-home__section-head {
	align-items: center;
	display: flex;
	flex-wrap: nowrap;
	gap: var(--wp--preset--spacing--30);
	justify-content: space-between;
	margin-bottom: var(--wp--preset--spacing--card-lg);
}

.ggn-home .ggn-home__section-title {
	font-size: var(--wp--preset--font-size--h-2);
	letter-spacing: 0.06em;
	margin: 0;
	text-transform: uppercase;
}

.ggn-home .ggn-rail-nav {
	display: flex;
	flex: 0 0 auto;
	gap: var(--wp--preset--spacing--10);
}

.ggn-home .ggn-rail-nav[hidden] {
	display: none;
}

.ggn-home .ggn-rail-nav__button {
	align-items: center;
	background-color: var(--wp--preset--color--surface-2);
	border: 0;
	border-radius: var(--wp--custom--radius--control);
	color: var(--wp--preset--color--text);
	cursor: pointer;
	display: inline-flex;
	height: 44px;
	justify-content: center;
	padding: 0;
	width: 44px;
}

.ggn-home .ggn-rail-nav__button:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

.ggn-home .ggn-rail-nav__button:disabled {
	cursor: default;
	opacity: 0.4;
}

.ggn-home .ggn-rail-nav__button svg {
	height: 20px;
	width: 20px;
}

.ggn-home .has-rail-nav .ggn-product-rail ul.wc-block-product-template {
	scrollbar-width: none;
}

.ggn-home .has-rail-nav .ggn-product-rail ul.wc-block-product-template::-webkit-scrollbar {
	display: none;
}

.ggn-home .ggn-home-products--deals .ggn-product-card__badge,
.ggn-home .ggn-home-products--deals .ggn-product-card__note {
	margin: 0;
}

.ggn-home .ggn-home-products--deals .ggn-product-card__badge {
	background-color: var(--wp--preset--color--surface-2);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--text);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	padding: var(--wp--custom--pill--padding);
	width: fit-content;
}

.ggn-home .ggn-home-products--deals .ggn-product-card__note {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--meta);
}

.ggn-home .ggn-home__view-all {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
}

.ggn-home .ggn-home__view-all a {
	align-items: center;
	display: inline-flex;
	min-height: var(--wp--custom--control--size);
	padding-left: var(--wp--preset--spacing--card);
	padding-right: var(--wp--preset--spacing--card);
}

/* Steps and community */
.ggn-home .ggn-home__steps {
	display: grid;
	gap: var(--wp--preset--spacing--card-lg);
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ggn-home .ggn-home__step {
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--card);
	margin-block-start: 0;
	min-width: 0;
	padding: var(--wp--preset--spacing--card-lg);
}

.ggn-home .ggn-home__step-top {
	align-items: center;
	gap: var(--wp--preset--spacing--card);
}

.ggn-home .ggn-home__step-icon {
	align-items: center;
	background-color: var(--wp--preset--color--accent-soft);
	border-radius: var(--wp--custom--radius--control);
	color: var(--wp--preset--color--accent);
	display: flex;
	height: var(--wp--custom--control--size);
	justify-content: center;
	margin: 0;
	width: var(--wp--custom--control--size);
}

.ggn-home .ggn-home__step-icon::before {
	background-color: currentColor;
	content: "";
	display: block;
	height: calc(var(--wp--custom--control--size) / 2);
	mask-position: center;
	mask-repeat: no-repeat;
	mask-size: contain;
	width: calc(var(--wp--custom--control--size) / 2);
}

.ggn-home .ggn-home__step-icon--value::before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20.59 13.41 11 3.83A2.83 2.83 0 0 0 9 3H4a1 1 0 0 0-1 1v5a2.83 2.83 0 0 0 .83 2l9.58 9.59a2 2 0 0 0 2.83 0l4.35-4.35a2 2 0 0 0 0-2.83ZM7.5 8A1.5 1.5 0 1 1 7.5 5a1.5 1.5 0 0 1 0 3Z'/%3E%3C/svg%3E");
}

.ggn-home .ggn-home__step-icon--pay::before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M2 2h7v7H2V2Zm2 2v3h3V4H4Zm11-2h7v7h-7V2Zm2 2v3h3V4h-3ZM2 15h7v7H2v-7Zm2 2v3h3v-3H4Zm7-13h2v2h-2V4Zm0 4h2v2h-2V8Zm4 1h2v3h-2V9Zm-4 3h4v2h-4v-2Zm4 3h2v2h-2v-2Zm-4 0h2v2h-2v-2Zm5 1h3a4 4 0 0 0 0-8h-1v2h1a2 2 0 0 1 0 4h-3v2Zm-1 0-2 3h3v-2l-1-1Z'/%3E%3C/svg%3E");
}

.ggn-home .ggn-home__step-icon--code::before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 3a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V9l-6-6H7Zm6 1.5L18.5 10H15a2 2 0 0 1-2-2V4.5ZM8 13h8v2H8v-2Zm0 4h8v2H8v-2Z'/%3E%3C/svg%3E");
}

.ggn-home .ggn-home__step-number {
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--meta);
	font-weight: 700;
	margin: 0;
}

.ggn-home .ggn-home__step-title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--card-title);
	font-weight: 600;
	margin: var(--wp--preset--spacing--card-lg) 0 0;
}

.ggn-home .ggn-home__step-copy {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--meta);
	margin: var(--wp--preset--spacing--card) 0 0;
}

.ggn-home .ggn-home__community {
	align-items: center;
	background-color: var(--wp--preset--color--surface-2);
	border-radius: var(--wp--custom--radius--card);
	gap: var(--wp--preset--spacing--card-lg);
	justify-content: space-between;
	box-sizing: border-box;
	margin-left: auto;
	margin-right: auto;
	max-width: calc(var(--wp--style--global--wide-size) - 2 * var(--wp--preset--spacing--gutter));
	padding: var(--wp--preset--spacing--card-lg);
	width: calc(100% - 2 * var(--wp--preset--spacing--gutter));
}

.ggn-home .ggn-home__community-copy {
	align-items: center;
	display: flex;
	gap: var(--wp--preset--spacing--card);
}

.ggn-home .ggn-home__community-copy::before {
	background-color: var(--wp--preset--color--whatsapp);
	content: "";
	display: block;
	height: var(--wp--custom--control--size);
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='black' d='M19.11 17.22c-.27-.14-1.58-.78-1.82-.87-.24-.09-.42-.14-.6.14-.18.27-.69.87-.85 1.05-.16.18-.31.2-.58.07-1.58-.79-2.62-1.41-3.66-3.19-.28-.48.28-.45.8-1.49.09-.18.05-.34-.02-.48-.07-.14-.6-1.44-.82-1.97-.22-.52-.44-.45-.6-.46l-.51-.01c-.18 0-.47.07-.71.34-.24.27-.93.91-.93 2.22s.96 2.57 1.09 2.75c.13.18 1.89 2.89 4.57 4.05.64.28 1.14.44 1.53.56.64.2 1.23.17 1.69.1.52-.08 1.58-.65 1.8-1.27.22-.62.22-1.16.15-1.27-.07-.12-.25-.19-.52-.33ZM16 3a13 13 0 0 0-11.21 19.6L3 29l6.57-1.72A13 13 0 1 0 16 3Zm0 23.83c-2.12 0-4.2-.57-6.01-1.64l-.43-.26-3.9 1.02 1.04-3.8-.28-.44A10.83 10.83 0 1 1 16 26.83Z'/%3E%3C/svg%3E") center / contain no-repeat;
	width: var(--wp--custom--control--size);
}

.ggn-home .ggn-home__community-heading {
	margin: 0;
}

@media (min-width: 782px) {
	.ggn-home .ggn-home__community {
		max-width: var(--wp--style--global--wide-size);
		width: 100%;
	}
}

@media (max-width: 781px) {
	.ggn-home .ggn-hero-arc {
		height: var(--wp--custom--home--hero-arc-height-mobile);
	}

	.ggn-home .ggn-hero-arc .wc-block-product {
		flex-basis: var(--wp--custom--home--hero-arc-card-mobile);
		width: var(--wp--custom--home--hero-arc-card-mobile);
	}

	.ggn-home .ggn-home__hero-copy {
		max-width: 100%;
	}

	.ggn-home .ggn-home__hero-actions .wp-block-button,
	.ggn-home .ggn-home__hero-actions .wp-block-button__link {
		width: 100%;
	}


	.ggn-home .ggn-home__section-head {
		align-items: flex-start;
		flex-direction: column;
	}

	/* Rails with ‹ › keep the buttons on the right of the title on phones too (the-ggn#219). */
	.ggn-home .has-rail-nav .ggn-home__section-head {
		align-items: center;
		flex-direction: row;
	}


	.ggn-home .ggn-home__steps {
		gap: calc(var(--wp--preset--spacing--card) * 1.4);
		grid-template-columns: 1fr;
	}

	.ggn-home .ggn-home__community {
		align-items: flex-start;
		box-sizing: border-box;
		flex-direction: column;
		margin-left: var(--wp--preset--spacing--gutter);
		margin-right: var(--wp--preset--spacing--gutter);
		width: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ggn-home .ggn-hero-arc__spot { transition: none; }
}
