/* ================================================
Component: Shop Hero
Path: components/flexible/shop_hero/style.css
================================================ */
:is(body, .is-preview) {
	.shop-hero .container {
		max-width: 1440px;
	}
	.shop-hero__inner {
		display: flex;
		flex-direction: column;
		padding-top: var(--gap-2xl);
		padding-bottom: var(--gap-lg);
		text-align:center;
		gap: var(--gap-md);
	}
	.shop-hero__title span {
		color:var(--color-grass);
	}
	.shop-hero__intro {
		font-family: var(--font-primary);
		font-weight: var(--font-weight-medium);
		font-size: var(--font-size-md);
		line-height: var(--line-height-normal);
		letter-spacing: 0.01em;
		color: var(--color-denim);
	}
	.shop-hero__intro p {
		margin: 0;
		color: var(--color-denim);
		font-family: var(--font-display);
		font-size:var(--font-size-lg);
		font-weight: var(--font-weight-extrabold);
		letter-spacing: 0.18px;
		line-height: 26px;
	}
	.shop-hero__intro p + p {
		margin-top: var(--gap-sm);
	}
	.shop-hero__intro a {
		color: var(--color-grass);
		text-decoration-line: underline;
		text-decoration-style: solid;
		text-decoration-skip-ink: auto;
		text-decoration-thickness: 0.1em;
		text-underline-offset: 0.18em;
		text-underline-position: from-font;
		text-decoration-color: var(--color-grass);
		transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
	}
	.shop-hero__intro a:hover,
	.shop-hero__intro a:focus-visible {
		color: var(--color-kale);
		text-decoration-color: var(--color-kale);
	}
	@media (min-width: 641px) {
		.shop-hero__inner {padding-top: var(--gap-3xl);padding-bottom: var(--gap-xl);text-align:left;}
		.shop-hero__intro {font-size: var(--font-size-lg);}
		.shop-hero__intro p {font-size: var(--font-size-xl);line-height: 36px;}
		.shop-hero__intro a {text-decoration-thickness: 9%;text-underline-offset: 15%;}
	}
	@media (min-width: 1025px) {
		.shop-hero__inner {padding-top: var(--gap-4xl);padding-bottom: var(--gap-2xl);gap: var(--gap-lg);	}
		.shop-hero__intro {font-size: var(--font-size-xl);line-height: 1.5;max-width: 1000px;}
	}
	@media(max-width: 768px) {
		.shop-hero__title {letter-spacing: 0.36px;line-height: 52px;}
		.shop-hero__title span {display: block;}
	}
}