/* ==================================================
TEMPLATE HERO
DESKTOP
================================================== */

.template-hero {
	position: relative;
	width: 100%;
}

/* ==================================================
Hero Image
================================================== */

.template-hero__figure {
	position: relative;

	width: 100%;

	margin: 0;

	overflow: hidden;
}

.template-hero__image {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;
	object-position: center center;
}

/* ==================================================
Hero Title Container
================================================== */

.template-hero__content {
	position: absolute;

	top: 50%;
	left: 50%;

	z-index: 2;

	width: calc(100% - 40px);

	margin: 0;

	transform: translate(-50%, -50%);

	color: #fff;

	text-align: center;

	pointer-events: none;
}

/* ==================================================
Eyebrow
================================================== */

.template-hero__eyebrow {
	margin: 0 0 4px;

	font-family: "EB Garamond", serif;

	font-size: 24px;
	font-weight: 400;

	line-height: 1.1;
	letter-spacing: 0;

	color: #fff;
}

/* ==================================================
Hero Title
================================================== */

.template-hero__title {
	margin: 0;

	font-family: "EB Garamond", serif;

	font-size: 60px;
	font-weight: 500;

	line-height: 1.1;
	letter-spacing: 0;

	color: #fff;

	text-align: center;
}

/*
* Desktop title is shown by default.
*/
.template-hero__title-desktop {
	display: inline;
}

/*
* Mobile title is hidden on desktop.
*/
.template-hero__title-mobile {
	display: none;
}

/* ==================================================
HERO NAVIGATION - DESKTOP
================================================== */

.template-hero .template-hero__nav {
	position: absolute !important;

	left: 50% !important;
	bottom: 20px !important;

	z-index: 3;

	display: flex !important;
	flex-direction: row !important;

	align-items: center !important;
	justify-content: center !important;

	flex-wrap: nowrap !important;

	/*
    * Important:
    * Let the links hug their content instead of
    * allowing Ariake's component width rules
    * to stack/wrap them.
    */
	width: max-content !important;
	max-width: none !important;

	margin: 0 !important;
	padding: 0 !important;

	transform: translateX(-50%) !important;

	background: transparent !important;
	border: 0 !important;
}

/* ==================================================
Desktop Navigation Items
================================================== */

.template-hero .template-hero__nav .fr-anchorButton_item {
	display: block !important;

	flex: 0 0 auto !important;

	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;

	margin: 0 !important;
	padding: 0 !important;

	background: transparent !important;
	border: 0 !important;
}

/* ==================================================
Desktop Navigation Links
================================================== */

.template-hero .template-hero__nav-link {
	display: inline-flex !important;

	align-items: center;
	justify-content: center;

	flex: 0 0 auto !important;

	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;

	min-height: 32px;

	margin: 0 !important;

	padding: 7px 20px !important;

	box-sizing: border-box;

	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

	font-size: 14px;

	line-height: 18px;

	color: #fff;

	text-align: center;

	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;

	white-space: nowrap !important;

	background: transparent !important;
	border: 0 !important;
}

.template-hero .template-hero__nav-link:hover {
	opacity: 0.75;
}

.selected p:hover {
	opacity: 1 !important;
	cursor: default;
}

/* ==================================================
TEMPLATE INTRO
================================================== */

.template-intro {
	width: 100%;

	/*
    * Space between the hero and
    * "Shop by Occasion".
    */
	padding-top: 32px;
}

/* ==================================================
Intro Container
Figma width: 676px
================================================== */

.template-intro__inner {
	width: 100%;
	max-width: 676px;

	margin: 48px auto 0 auto;

	text-align: center;
}

/* ==================================================
Section Heading

Figma:
Helvetica Neue
Light / 300
26px
150% line-height
676 × 39
================================================== */

.template-intro .template-intro__title {
	width: 100%;

	padding: 0;

	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

	font-size: 26px;
	font-style: normal;

	line-height: 1.5;
	letter-spacing: 0;

	color: #000;

	text-align: center;
}

/* ==================================================
Description

Figma:
Helvetica Neue
Light / 300
14px
150% line-height
max width: 676px
================================================== */

.template-intro .template-intro__description {
	width: 100%;

	margin: 10px 0 0;

	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

	font-size: 14px;
	font-style: normal;

	line-height: 1.5;
	letter-spacing: 0;

	color: #000;

	text-align: center;
}

/* ==================================================
TEMPLATE TILE GRID
Desktop Figma:
1176px total
4 columns
288px tiles
8px gaps
313px height
================================================== */

.template-tile-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));

	width: 100%;
	max-width: 1176px;

	margin: 48px auto 0;
	padding: 0;

	gap: 8px;

	border: 0;
	background: transparent;
}

/* Override Ariake flex sizing */
.template-tile-grid .template-tile-grid__item {
	display: block;

	width: auto;
	min-width: 0;

	margin: 0;
	padding: 0;

	border: 0;
	background: transparent;
}

/* ==================================================
Tile Link
================================================== */

.template-tile-grid .template-tile-grid__link {
	position: relative;

	display: block;

	width: 100%;
	height: 313px;

	margin: 0;
	padding: 0;

	overflow: hidden;

	color: #fff;
	background: #eee;

	text-decoration: none;
}

/* ==================================================
Image Container
================================================== */

.template-tile-grid .template-tile-grid__thumb {
	position: absolute;
	inset: 0;

	width: 100%;
	height: 100%;

	margin: 0;
	padding: 0;

	overflow: hidden;
}

/*
* We're keeping data-aspect-ratio="3:4"
* in the HTML, but the actual Figma desktop
* crop is 288 × 313.
*/
.template-tile-grid .template-tile-grid__figure {
	position: relative;

	width: 100%;
	height: 100%;

	margin: 0;
	padding: 0 !important;

	overflow: hidden;
}

/*
* Covers Ariake's aspect-ratio helper if
* it creates height using a pseudo element.
*/
.template-tile-grid .template-tile-grid__figure::before {
	display: none !important;
	padding-top: 0 !important;
}

.template-tile-grid .template-tile-grid__picture {
	position: absolute;
	inset: 0;

	width: 100%;
	height: 100%;
}

/* ==================================================
Image
================================================== */

.template-tile-grid .template-tile-grid__image {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;
	object-position: center center;

	transform: scale(1);

	transition: transform 650ms cubic-bezier(0.2, 0.6, 0.2, 1),
		filter 400ms ease;
}

/* ==================================================
Gradient Overlay
More readable while staying subtle
================================================== */

.template-tile-grid .template-tile-grid__thumb::after {
	content: "";

	position: absolute;
	inset: 0;

	z-index: 1;

	pointer-events: none;

	/*
    * Darkest through the center because that's
    * where the tile label sits.
    */
	background: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0.12) 0%,
		rgba(0, 0, 0, 0.16) 25%,
		rgba(0, 0, 0, 0.34) 43%,
		rgba(0, 0, 0, 0.4) 50%,
		rgba(0, 0, 0, 0.34) 57%,
		rgba(0, 0, 0, 0.16) 75%,
		rgba(0, 0, 0, 0.12) 100%
	);

	/*
    * Important:
    * don't use opacity: .3 here.
    * The alpha values above already control
    * the strength of the overlay.
    */
	opacity: 1;

	transition: opacity 350ms ease;
}

/* ==================================================
Tile Text
================================================== */

.template-tile-grid .template-tile-grid__text {
	position: absolute;

	top: 50%;
	left: 50%;

	z-index: 2;

	display: flex;
	align-items: center;
	justify-content: center;

	width: calc(100% - 32px);
	min-height: 0;

	margin: 0;
	padding: 0;

	transform: translate(-50%, -50%);

	font-family: "EB Garamond", serif;
	font-size: 24px;
	font-weight: 400;
	font-style: normal;

	line-height: 1.15;
	letter-spacing: 0;

	color: #fff;
	text-align: center;

	background: transparent;
	border: 0;

	pointer-events: none;

	/*
    * Very subtle protection against light areas
    * of photography.
    */
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);

	transition: transform 400ms ease, opacity 400ms ease;
}

/* ==================================================
Desktop Hover Animation
================================================== */

@media (hover: hover) {
	.template-tile-grid__link:hover .template-tile-grid__image {
		transform: scale(1.055);
	}

	/*
    * Keep overlay readable during zoom.
    * Only make it slightly stronger.
    */
	.template-tile-grid__link:hover .template-tile-grid__thumb::after {
		opacity: 1;
	}

	.template-tile-grid__link:hover .template-tile-grid__text {
		transform: translate(-50%, -50%) translateY(-2px);
	}
}

/* ==================================================
TEMPLATE TILE GRID - DESCRIPTION + DIVIDER
================================================== */

.template-tile-grid__description {
	width: 100%;
	max-width: 676px;

	margin: 48px auto 0;

	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 14px;
	line-height: 1.5;
	letter-spacing: 0;

	color: #000;
	text-align: center;
}

/* ==================================================
THIN GRAY DIVIDER
================================================== */

.template-divider {
	width: 100%;
	max-width: 1176px;

	height: 1px;

	margin: 80px auto 80px 0;

	background: #d9d9d9;
}

/* ==================================================
TEMPLATE FEATURE
DESKTOP
================================================== */

.template-feature {
	width: 100%;
}

/* ==================================================
Main Layout

Figma:
Left image + right content
24px gap
================================================== */

.template-feature__layout {
	display: grid;

	grid-template-columns:
		minmax(0, 539fr)
		minmax(0, 571fr);

	grid-template-areas:
		"visual intro"
		"visual products";

	column-gap: 24px;
	row-gap: 130px;

	width: 100%;
	max-width: 1134px;

	margin-left: 37px;

	align-items: stretch;
}

/* ==================================================
Intro
================================================== */

.template-feature__intro {
	grid-area: intro;

	width: 100%;
}

/* Figma:
EB Garamond
Regular
32px
150%
*/

.template-feature__title {
	margin: 0;
	padding: 0;

	font-family: "EB Garamond", serif;
	font-size: 32px;
	font-weight: 400;
	font-style: normal;

	line-height: 1.5;
	letter-spacing: 0;

	color: #000;

	text-align: left;
}

/* Figma:
Helvetica Neue
Light
15px
150%
*/

.template-feature__description {
	width: 100%;

	margin: 0;
	padding: 0;

	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

	font-size: 15px;
	font-style: normal;

	line-height: 1.5;
	letter-spacing: 0;

	color: #000;

	text-align: left;
}

/* ==================================================
Main Feature Image
Stretches to match right-side content height
================================================== */

.template-feature__visualWrap {
	grid-area: visual;

	width: 100%;
	height: 100%;

	margin: 0;

	padding-left: 0 !important;
	padding-right: 0 !important;
}

.template-feature__visual {
	position: relative;

	width: 100%;
	height: 100%;

	aspect-ratio: auto;

	margin: 0;
	padding: 0 !important;

	overflow: hidden;
}

.template-feature__visual::before,
.template-feature__visual::after {
	display: none !important;

	padding: 0 !important;
}

.template-feature__visualPicture {
	position: absolute !important;

	inset: 0 !important;

	display: block;

	width: 100%;
	height: 100%;
}

.template-feature__visualImage {
	display: block;

	width: 100% !important;
	height: 100% !important;

	object-fit: cover !important;
	object-position: center center;
}

/* ==================================================
Highlighted Products
================================================== */

.template-feature__products {
	grid-area: products;

	width: 100%;
}

.template-feature__productsTitle {
	margin: 0 0 12px;

	font-family: "EB Garamond", serif;
	font-size: 20px;
	font-weight: 400;

	line-height: 1.5;
	letter-spacing: 0;

	color: #000;

	text-align: left;
}

/* ==================================================
Product List
================================================== */

.template-feature__productList {
	display: flex;
	flex-direction: column;

	width: 100%;

	gap: 24px;
}

/* ==================================================
Individual Product
================================================== */

.template-feature__product {
	display: grid;

	grid-template-columns:
		130px
		minmax(0, 1fr);

	align-items: start;

	gap: 16px;

	width: 100%;
}

/* ==================================================
Product Image
================================================== */

.template-feature__productImageWrap {
	width: 130px;

	margin: 0;
	padding: 0;
}

.template-feature__productFigure {
	position: relative;

	width: 100%;

	aspect-ratio: 3 / 4;

	margin: 0;
	padding: 0 !important;

	overflow: hidden;

	background: #f3f3f3;
}

.template-feature__productFigure::before,
.template-feature__productFigure::after {
	display: none !important;

	padding: 0 !important;
}

.template-feature__productPicture {
	position: absolute !important;

	inset: 0 !important;

	display: block;

	width: 100%;
	height: 100%;
}

.template-feature__productImage {
	display: block;

	width: 100% !important;
	height: 100% !important;

	object-fit: cover !important;
	object-position: center;
}

/* ==================================================
Product Content
================================================== */

.template-feature__productContent {
	min-width: 0;
}

.template-feature__productName {
	margin: 0 0 4px;

	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

	font-size: 16px;
	font-weight: 500;

	line-height: 1.4;

	color: #000;
}

.template-feature__productDetails {
	margin: 0;
	padding: 0;

	list-style: none;

	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

	font-size: 14px;

	line-height: 1.5;
	letter-spacing: 0;

	color: #000;
}

.template-feature__productDetails li {
	position: relative;

	margin: 0;
	padding-left: 11px;
}

.template-feature__productDetails li::before {
	content: "•";

	position: absolute;

	top: 0;
	left: 0;
}

/* ==================================================
Shop Now
================================================== */

.template-feature__productLink {
	display: inline-block;

	margin-top: 4px;

	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

	font-size: 14px;

	line-height: 1.4;

	color: #000;

	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ==================================================
TEMPLATE FEATURE - REVERSED DESKTOP LAYOUT
Text/products left
Main image right
================================================== */

.template-feature--reverse .template-feature__layout {
	grid-template-columns:
		minmax(0, 571fr)
		minmax(0, 539fr);

	grid-template-areas:
		"intro visual"
		"products visual";

	margin-left: 0;
	margin-right: 37px;
}

/* ==================================================
GENERIC SECTION HEADING
================================================== */

.template-sectionHeading {
	width: 100%;
	margin: 0 0 25px;
}

.template-sectionHeading__title {
	margin: 60px 0 0 0;
	padding: 0;

	font-family: "EB Garamond", serif;
	font-size: 20px;
	font-weight: 400;
	font-style: normal;

	line-height: 1.5;
	letter-spacing: 0;

	color: #000;
}

/* ==================================================
GENERIC SECTION INTRO
================================================== */

.template-sectionIntro {
	width: 100%;

	margin: 0;
	padding: 0;

	text-align: center;
}

/* ==================================================
Heading

Figma:
EB Garamond
Regular 400
26px
150%
================================================== */

.template-sectionIntro__title {
	width: 100%;

	margin: 0;
	padding: 0;

	font-family: "EB Garamond", serif;
	font-size: 26px;
	font-weight: 400;
	font-style: normal;

	line-height: 1.5;
	letter-spacing: 0;

	color: #000;

	text-align: center;
}

/* ==================================================
Description

Figma:
Helvetica Neue
Light 300
14px
150%
approx. 486px wide
================================================== */

.template-sectionIntro__description {
	width: 100%;
	max-width: 486px;

	margin: 0 auto;
	padding: 0;

	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

	font-size: 14px;
	font-style: normal;

	line-height: 1.5;
	letter-spacing: 0;

	color: #000;

	text-align: center;
}

/* ==================================================
ARTICLE SECTION HEADING
================================================== */

.template-articleHeading {
	width: 100%;
	margin: 0 0 32px;
	padding: 0;
}

.template-articleHeading__title {
	margin: 0;

	font-family: "EB Garamond", serif;
	font-size: 34px;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 0;

	color: #000;
	text-align: left;
}

/* =========================================================
EXPLORE OTHER FEATURED ARTICLES
========================================================= */

.template-articleGrid {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 32px !important;
	width: 100%;
}

/* =========================================================
CARD
========================================================= */

.template-articleGrid__item {
	display: block !important;
	min-width: 0;
	width: 100% !important;

	color: #000;
	text-decoration: none;

	border: 0 !important;
}

/* =========================================================
IMAGE
========================================================= */

.template-articleGrid__imgWrap {
	width: 100% !important;
	margin: 0 !important;
}

.template-articleGrid__figure {
	position: relative !important;

	width: 100% !important;

	/* PC Figma proportion */
	aspect-ratio: 416 / 480 !important;

	margin: 0 !important;
	padding: 0 !important;

	overflow: hidden;
}

.template-articleGrid__picture {
	position: absolute !important;
	inset: 0 !important;

	display: block !important;

	width: 100% !important;
	height: 100% !important;
}

.template-articleGrid__image {
	display: block !important;

	width: 100% !important;
	height: 100% !important;

	object-fit: cover !important;
	object-position: center center !important;
}

/* =========================================================
CONTENT
========================================================= */

.template-articleGrid__content {
	display: block !important;

	width: 100% !important;

	margin: 0 !important;
	padding: 0 !important;
}

/* =========================================================
TITLE
Figma:
EB Garamond
24px
110%
========================================================= */

.template-articleGrid__heading {
	margin-top: 16px !important;
	margin-bottom: 0 !important;

	font-family: "EB Garamond", serif !important;
	font-size: 24px !important;
	font-weight: 400 !important;
	line-height: 110% !important;
	letter-spacing: 0 !important;

	color: #000 !important;
}

/* =========================================================
DESCRIPTION
Figma:
Helvetica Neue
Light
16px
150%
========================================================= */

.template-articleGrid__body {
	margin-top: 8px !important;
	margin-bottom: 0 !important;

	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
	font-size: 16px !important;
	line-height: 150% !important;
	letter-spacing: 0 !important;

	color: #000 !important;
}

/* Hide empty framework elements */
.template-articleGrid__content .fr-imagePlusText_label:empty,
.template-articleGrid__content .fr-imagePlusText_link:empty {
	display: none !important;
}

/* ==================================================
MOBILE HERO
Breakpoint: 812px and below
Figma reference: 376px × 380px hero
================================================== */

@media screen and (max-width: 812px) {
	/* ==================================================
    HERO - MOBILE
    Breakpoint: 812px and below
    ================================================== */

	/* ==============================================
    Mobile Hero Image
    ============================================== */

	.template-hero {
		position: relative;

		width: 100%;

		overflow: hidden;
	}

	.template-hero__figure {
		position: relative;

		width: 100%;
		height: auto;

		/*
        * Figma mobile hero:
        * approximately 376 × 380.
        */
		aspect-ratio: 376 / 380;

		margin: 0;

		overflow: hidden;
	}

	.template-hero__figure .u-imgAdjustBox_inner {
		position: absolute !important;

		inset: 0 !important;

		width: 100% !important;
		height: 100% !important;
	}

	.template-hero__image {
		display: block;

		width: 100% !important;
		height: 100% !important;

		object-fit: cover !important;

		/*
        * Adjust this later when final mobile
        * photography is supplied.
        */
		object-position: center center;
	}

	/* ==============================================
    Mobile Hero Content
    ============================================== */

	.template-hero__content {
		position: absolute !important;

		/*
        * Put title above the scrolling nav.
        */
		top: auto !important;

		right: 16px !important;
		bottom: 68px !important;
		left: 16px !important;

		z-index: 2;

		width: auto !important;

		margin: 0 !important;

		transform: none !important;

		color: #fff;

		text-align: center;

		pointer-events: none;
	}

	/* ==============================================
    Mobile Eyebrow
    ============================================== */

	.template-hero__eyebrow {
		margin: 0 0 4px;

		font-family: "EB Garamond", serif;

		font-size: 18px;
		font-weight: 400;
		font-style: normal;

		line-height: 1.2;
		letter-spacing: 0;

		color: #fff;

		text-align: center;
	}

	/* ==============================================
    MOBILE TITLE
    ============================================== */

	.template-hero__title {
		margin: 0;

		font-family: "EB Garamond", serif;

		font-size: 34px;
		font-weight: 500;
		font-style: normal;

		line-height: 1.1;
		letter-spacing: 0;

		color: #fff;

		text-align: center;

		white-space: nowrap;
	}

	/*
    * Different PC / mobile titles.
    */
	.template-hero__title-desktop {
		display: none;
	}

	.template-hero__title-mobile {
		display: inline;
	}

	/* ==============================================
    MOBILE HERO NAV
    Horizontal Scroll
    ============================================== */

	.template-hero .template-hero__nav {
		position: absolute !important;

		left: 0 !important;
		right: 0 !important;
		bottom: 20px !important;

		z-index: 3;

		display: flex !important;
		flex-direction: row !important;

		align-items: center !important;
		justify-content: center !important;

		flex-wrap: nowrap !important;

		/*
        * This is what creates the Figma-style
        * horizontal scrolling navigation.
        */
		width: 100% !important;
		max-width: none !important;

		margin: 0 !important;

		padding: 0 16px !important;

		box-sizing: border-box;

		gap: 18px !important;

		transform: none !important;

		overflow-x: auto !important;
		overflow-y: hidden !important;

		-webkit-overflow-scrolling: touch;

		overscroll-behavior-x: contain;

		scrollbar-width: none;

		background: transparent !important;
		border: 0 !important;
	}

	/*
    * Hide Chrome / Safari scrollbar.
    */
	.template-hero .template-hero__nav::-webkit-scrollbar {
		display: none;
	}

	/* ==============================================
    Mobile Navigation Items
    ============================================== */

	.template-hero .template-hero__nav .fr-anchorButton_item {
		display: block !important;

		flex: 0 0 auto !important;

		width: auto !important;
		min-width: max-content !important;
		max-width: none !important;

		margin: 0 !important;
		padding: 0 !important;

		background: transparent !important;
		border: 0 !important;
	}

	/* ==============================================
    Mobile Navigation Links

    Figma:
    Helvetica Neue
    Light 300
    14px
    Underline
    ============================================== */

	.template-hero .template-hero__nav-link {
		display: inline-block !important;

		flex: 0 0 auto !important;

		width: auto !important;
		min-width: max-content !important;
		max-width: none !important;

		min-height: 0 !important;

		margin: 0 !important;
		padding: 0 !important;

		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

		font-size: 14px;
		font-style: normal;

		line-height: 1.1;
		letter-spacing: 0;

		color: #fff;

		text-align: center;

		text-decoration-line: underline;
		text-decoration-style: solid;
		text-decoration-thickness: auto;
		text-underline-offset: 1px;

		white-space: nowrap !important;

		background: transparent !important;
		border: 0 !important;
	}

	/* ==================================================
    TEMPLATE TILE GRID - MOBILE
    Figma:
    376px container
    3 columns
    8px outer padding
    8px gaps
    114.67px × 214px tiles
    ================================================== */

	/* ----------------------------------------------
    Intro spacing

    Requested:
    top = 48px
    bottom = 25px
    ---------------------------------------------- */

	.template-intro {
		padding-top: 35px 0 25px 0;
	}

	/* ----------------------------------------------
    Tile Grid
    Mobile horizontal scroll
    ---------------------------------------------- */

	.template-tile-grid {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;

		width: 100% !important;
		max-width: none !important;

		margin: 0 !important;
		padding: 0 8px 8px !important;

		box-sizing: border-box;

		gap: 8px !important;

		overflow-x: auto !important;
		overflow-y: hidden !important;

		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: contain;

		scroll-snap-type: x proximity;

		scrollbar-width: none;

		border: 0 !important;
		background: transparent !important;
	}

	/* Hide scrollbar - Chrome / Safari */
	.template-tile-grid::-webkit-scrollbar {
		display: none;
	}

	/* ----------------------------------------------
    Individual Tile
    ---------------------------------------------- */

	.template-tile-grid .template-tile-grid__item {
		display: block !important;

		/*
        * Fixed mobile width so 3 cards are visible,
        * while the 4th continues off-screen.
        */
		flex: 0 0 114.67px !important;

		width: 114.67px !important;
		min-width: 114.67px !important;
		max-width: 114.67px !important;

		margin: 0 !important;
		padding: 0 !important;

		box-sizing: border-box;

		scroll-snap-align: start;

		border: 0 !important;
		background: transparent !important;
	}

	/* ----------------------------------------------
    Tile Link

    Mobile Figma:
    height = 214px
    ---------------------------------------------- */

	.template-tile-grid .template-tile-grid__link {
		position: relative;

		display: block !important;

		width: 100% !important;
		min-width: 0 !important;
		max-width: none !important;

		height: 214px !important;

		margin: 0 !important;
		padding: 0 !important;

		box-sizing: border-box;

		overflow: hidden;

		color: #fff;
		text-decoration: none;

		background: #eee;
	}

	/* ----------------------------------------------
    Thumbnail Wrapper
    ---------------------------------------------- */

	.template-tile-grid .template-tile-grid__thumb {
		position: absolute !important;

		top: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		left: 0 !important;

		display: block !important;

		width: 100% !important;
		min-width: 0 !important;
		max-width: none !important;

		height: 100% !important;

		margin: 0 !important;
		padding: 0 !important;

		overflow: hidden;
	}

	/* ----------------------------------------------
    Figure

    Keep data-aspect-ratio="3:4" in HTML,
    but override Ariake's generated sizing
    so the image fills the Figma tile.
    ---------------------------------------------- */

	.template-tile-grid .template-tile-grid__figure {
		position: absolute !important;

		top: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		left: 0 !important;

		display: block !important;

		width: 100% !important;
		min-width: 0 !important;
		max-width: none !important;

		height: 100% !important;

		margin: 0 !important;
		padding: 0 !important;

		overflow: hidden;
	}

	/*
    * Disable aspect-ratio spacer generated
    * by Ariake/u-imgAdjustBox if present.
    */
	.template-tile-grid .template-tile-grid__figure::before,
	.template-tile-grid .template-tile-grid__figure::after {
		display: none !important;

		width: 0 !important;
		height: 0 !important;

		padding: 0 !important;
		margin: 0 !important;
	}

	/* ----------------------------------------------
    Picture
    ---------------------------------------------- */

	.template-tile-grid .template-tile-grid__picture {
		position: absolute !important;

		top: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		left: 0 !important;

		display: block !important;

		width: 100% !important;
		min-width: 0 !important;
		max-width: none !important;

		height: 100% !important;

		margin: 0 !important;
		padding: 0 !important;
	}

	/* ----------------------------------------------
    Image
    ---------------------------------------------- */

	.template-tile-grid .template-tile-grid__image {
		position: absolute !important;

		top: 0 !important;
		left: 0 !important;

		display: block !important;

		width: 100% !important;
		min-width: 0 !important;
		max-width: none !important;

		height: 100% !important;

		margin: 0 !important;
		padding: 0 !important;

		object-fit: cover !important;
		object-position: center center;

		transform: scale(1);

		transition: transform 650ms cubic-bezier(0.2, 0.6, 0.2, 1);
	}

	/* ----------------------------------------------
    Mobile Gradient Overlay
    ---------------------------------------------- */

	.template-tile-grid .template-tile-grid__thumb::after {
		content: "";

		position: absolute;
		inset: 0;

		z-index: 1;

		pointer-events: none;

		background: linear-gradient(
			180deg,
			rgba(0, 0, 0, 0.1) 0%,
			rgba(0, 0, 0, 0.15) 24%,
			rgba(0, 0, 0, 0.34) 40%,
			rgba(0, 0, 0, 0.42) 50%,
			rgba(0, 0, 0, 0.34) 60%,
			rgba(0, 0, 0, 0.15) 76%,
			rgba(0, 0, 0, 0.1) 100%
		);

		opacity: 1;
	}

	/* ----------------------------------------------
    Mobile Tile Typography / Positioning

    Figma:
    EB Garamond
    Regular 400
    14px
    130% line-height
    Centered vertically + horizontally
    ---------------------------------------------- */

	.template-tile-grid .template-tile-grid__text {
		position: absolute !important;

		top: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		left: 0 !important;

		z-index: 2;

		display: flex !important;
		align-items: center !important;
		justify-content: center !important;

		width: 100% !important;
		height: 100% !important;

		min-width: 0 !important;
		max-width: none !important;
		min-height: 0 !important;

		margin: 0 !important;
		padding: 0 6px !important;

		box-sizing: border-box !important;

		transform: none !important;

		font-family: "EB Garamond", serif;
		font-size: 14px;
		font-weight: 400;
		font-style: normal;

		line-height: 1.3;
		letter-spacing: 0;

		color: #fff;

		text-align: center !important;

		text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);

		white-space: normal !important;

		background: transparent !important;
		border: 0 !important;

		pointer-events: none;
	}

	/* ----------------------------------------------
    Description
    Figma:
    Helvetica Neue Light
    14px / 150%
    #6A6A6A
    ---------------------------------------------- */

	.template-tile-grid__description {
		width: auto;
		max-width: 376px;

		margin: 25px auto 0;
		padding: 0 16px;

		box-sizing: border-box;

		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-size: 14px;
		line-height: 1.5;
		letter-spacing: 0;
		text-align: center;
	}

	/* ----------------------------------------------
    Divider spacing

    Figma shows roughly 30px between
    description and divider.
    ---------------------------------------------- */

	.template-intro {
		padding-bottom: 30px;
	}

	.template-divider {
		max-width: none;

		height: 1px;

		margin: 40px auto 40px auto;

		background: #d9d9d9;
	}

	/* ==================================================
    TEMPLATE FEATURE - MOBILE
    ================================================== */

	/* ==================================================
    Mobile Layout
    ================================================== */

	.template-feature__layout {
		display: grid;

		grid-template-columns: 1fr;

		grid-template-areas:
			"intro"
			"visual"
			"products";

		width: 100%;
		max-width: none;

		margin: 0;

		column-gap: 0;
		row-gap: 0;

		align-items: start;
	}

	/* ==================================================
    Intro
    ================================================== */

	.template-feature__intro {
		width: 100%;

		margin: 0 0 30px;

		padding: 0 24px;

		box-sizing: border-box;

		text-align: center;
	}

	.template-feature__title {
		margin: 0;

		font-size: 24px;
		font-weight: 400;

		line-height: 1.3;

		text-align: center;
	}

	.template-feature__description {
		width: 100%;

		margin: 8px auto 0;

		font-size: 14px;

		line-height: 1.5;

		text-align: center;
	}

	/* ==================================================
    Mobile Main Image
    Restore fixed Figma crop
    ================================================== */

	.template-feature__visualWrap {
		width: 100%;
		height: auto;

		margin: 0;

		padding: 0 !important;
	}

	.template-feature__visual {
		position: relative;

		width: 100%;
		height: auto;

		aspect-ratio: 376 / 468;

		margin: 0;
	}

	.template-feature__visualPicture {
		position: absolute !important;

		inset: 0 !important;

		width: 100%;
		height: 100%;
	}

	.template-feature__visualImage {
		width: 100% !important;
		height: 100% !important;

		object-fit: cover !important;
		object-position: center center;
	}

	/* ==================================================
    Highlighted Products

    30px above
    25px below heading
    ================================================== */

	.template-feature__products {
		width: 100%;

		margin-top: 30px;

		padding: 0 12px;

		box-sizing: border-box;
	}

	.template-feature__productsTitle {
		margin: 0 0 25px;

		font-family: "EB Garamond", serif;

		font-size: 18px;
		font-weight: 400;

		line-height: 1.4;

		text-align: center;
	}

	/* ==================================================
    Mobile Product Grid

    Two products side by side
    12px gap
    ================================================== */

	.template-feature__productList {
		display: grid;

		grid-template-columns: repeat(2, minmax(0, 1fr));

		width: 100%;

		gap: 12px;
	}

	/* ==================================================
    Mobile Product Card
    ================================================== */

	.template-feature__product {
		display: flex;
		flex-direction: column;

		width: 100%;

		gap: 0;
	}

	/* ==================================================
    Mobile Product Image
    ================================================== */

	.template-feature__productImageWrap {
		width: 100%;

		margin: 0 0 12px;
	}

	.template-feature__productFigure {
		width: 100%;

		aspect-ratio: 3 / 4;
	}

	.template-feature__productImage {
		width: 100% !important;
		height: 100% !important;

		object-fit: cover !important;
	}

	/* ==================================================
    Mobile Product Name
    ================================================== */

	.template-feature__productName {
		margin: 0 0 4px;

		font-size: 14px;
		font-weight: 500;

		line-height: 1.4;

		text-align: left;
	}

	/* ==================================================
    Mobile Product Description
    ================================================== */

	.template-feature__productDetails {
		margin: 0;

		font-size: 14px;

		line-height: 1.4;

		text-align: left;
	}

	.template-feature__productDetails li {
		padding-left: 9px;
	}

	/* ==================================================
    Mobile Shop Now
    ================================================== */

	.template-feature__productLink {
		margin-top: 15px;

		font-size: 12px;

		line-height: 1.4;
	}

	/* ==================================================
    REVERSED FEATURE - MOBILE RESET
    ================================================== */

	.template-feature.template-feature--reverse .template-feature__layout {
		display: grid;

		grid-template-columns: 1fr;

		grid-template-areas:
			"intro"
			"visual"
			"products";

		width: 100%;
		max-width: none;

		margin: 0;

		column-gap: 0;
		row-gap: 0;

		align-items: start;
	}

	.template-feature.template-feature--reverse .template-feature__intro {
		grid-area: intro;

		width: 100%;
	}

	.template-feature.template-feature--reverse .template-feature__visualWrap {
		grid-area: visual;

		width: 100%;
		height: auto;
	}

	.template-feature.template-feature--reverse .template-feature__visual {
		width: 100%;
		height: auto;

		aspect-ratio: 376 / 468;
	}

	.template-feature.template-feature--reverse .template-feature__products {
		grid-area: products;

		width: 100%;
	}

	/* ==================================================
    GENERIC SECTION HEADING - MOBILE
    ================================================== */

	.template-sectionHeading {
		width: 100%;
		margin: 0 0 25px;
	}

	.template-sectionHeading__title {
		margin: 35px 0 0 0;
		padding: 0;

		font-family: "EB Garamond", serif;
		font-size: 20px;
		font-weight: 400;

		line-height: 1.5;
		letter-spacing: 0;
	}

	/* ==================================================
    GENERIC SECTION INTRO - MOBILE
    ================================================== */

	.template-sectionIntro {
		width: 100%;

		margin: 0;
		padding: 0 24px;

		box-sizing: border-box;

		text-align: center;
	}

	/* Mobile Figma:
    EB Garamond
    26px
    130%
    */

	.template-sectionIntro__title {
		width: 100%;

		margin: 0;
		padding: 0;

		font-family: "EB Garamond", serif;
		font-size: 26px;
		font-weight: 400;

		line-height: 1.3;
		letter-spacing: 0;

		text-align: center;
	}

	/* Mobile Figma:
    Light
    13px
    150%
    */

	.template-sectionIntro__description {
		width: 100%;
		max-width: 328px;

		margin: 8px auto 0;

		font-size: 13px;

		line-height: 1.5;
		letter-spacing: 0;

		text-align: center;
	}

	.template-articleHeading {
		margin-bottom: 20px;
	}

	.template-articleHeading__title {
		font-size: 24px;
		line-height: 1.3;
		margin-bottom: 20px;
	}

	/* =========================================================
    MOBILE EXPLORE TEMPLATE
    ========================================================= */

	/*
    * Stack cards vertically.
    * Figma gap between article cards = 22px.
    */
	.template-articleGrid {
		display: grid !important;

		grid-template-columns: 1fr !important;

		gap: 22px !important;

		width: 100% !important;
	}

	.template-articleGrid__item {
		display: block !important;

		width: 100% !important;

		margin: 0 !important;
		padding: 0 !important;

		border: 0 !important;
		border-top: 0 !important;
		border-bottom: 0 !important;
		box-shadow: none !important;
	}

	/* -----------------------------------------
    MOBILE IMAGE
    328 × 160
    ----------------------------------------- */

	.template-articleGrid__imgWrap {
		width: 100% !important;

		margin: 0 !important;
		padding: 0 !important;
	}

	.template-articleGrid__figure {
		width: 100% !important;

		aspect-ratio: 328 / 160 !important;

		margin: 0 !important;
		padding: 0 !important;

		border-radius: 8px !important;

		overflow: hidden !important;
	}

	.template-articleGrid__picture {
		position: absolute !important;
		inset: 0 !important;

		display: block !important;

		width: 100% !important;
		height: 100% !important;

		border-radius: 8px !important;

		overflow: hidden !important;
	}

	.template-articleGrid__image {
		display: block !important;

		width: 100% !important;
		height: 100% !important;

		object-fit: cover !important;
		object-position: center center !important;

		border-radius: 8px !important;
	}

	/* -----------------------------------------
    MOBILE CONTENT
    ----------------------------------------- */

	.template-articleGrid__content {
		width: 100% !important;

		margin: 0 !important;
		padding: 0 !important;

		border: 0 !important;
	}

	/* -----------------------------------------
    MOBILE TITLE
    Figma:
    EB Garamond Medium
    18px / 100%
    ----------------------------------------- */

	.template-articleGrid__heading {
		margin-top: 12px !important;
		margin-bottom: 0 !important;

		font-family: "EB Garamond", serif !important;
		font-size: 18px !important;
		font-weight: 500 !important;
		line-height: 100% !important;
		letter-spacing: 0 !important;

		color: #000 !important;
	}

	/* -----------------------------------------
    MOBILE DESCRIPTION
    Figma:
    Inter Light
    12px / 140%
    #6A6A6A
    ----------------------------------------- */

	.template-articleGrid__body {
		margin-top: 6px !important;
		margin-bottom: 0 !important;

		font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
		font-size: 12px !important;
		line-height: 140% !important;
		letter-spacing: 0 !important;

		color: #6a6a6a !important;
	}
}