:root {
	color-scheme: light;
	--color-burgundy: #990a62;
	--color-burgundy-dark: #990a62;
	--color-cream: #F8F3EA;
	--color-beige: #EFE4D5;
	--color-gold: #C8A45D;
	--color-text: #2B2420;
	--font-display: "Cormorant Garamond", Georgia, serif;
	--font-interface: "Montserrat", "Helvetica Neue", sans-serif;
}

* {
	box-sizing: border-box;
}

html {
	min-width: 320px;
	background: var(--color-cream);
}

body {
	margin: 0;
	color: var(--color-text);
	font-family: var(--font-interface);
	-webkit-font-smoothing: antialiased;
}

button,
input {
	font: inherit;
}

.site-header {
	position: sticky;
	top: -31px;
	z-index: 10;
	animation: header-arrive 700ms ease-out both;
}

.announcement-bar {
	position: relative;
	height: 31px;
	overflow: hidden;
	background: var(--color-burgundy-dark);
	color: var(--color-cream);
}

.announcement-track {
	display: flex;
	width: max-content;
	height: 100%;
	align-items: center;
	justify-content: flex-start;
	animation: announcement-drift 32s linear infinite;
}

.announcement-message {
	flex: 0 0 auto;
	min-width: 50vw;
	margin: 0;
	padding: 0 56px;
	font-size: 9px;
	font-weight: 500;
	letter-spacing: 1.6px;
	line-height: 1;
	text-align: center;
}

.navigation-shell {
	position: relative;
	z-index: 10;
	background: rgb(248 243 234 / 96%);
	border-bottom: 1px solid rgb(84 21 25 / 8%);
	transition: box-shadow 250ms ease, background-color 250ms ease;
	backdrop-filter: blur(12px);
}

.navigation-shell.is-compact {
	background: rgb(248 243 234 / 98%);
	box-shadow: 0 5px 18px rgb(43 36 32 / 6%);
}

.navigation-inner {
	position: relative;
	display: grid;
	width: min(100% - 80px, 1320px);
	min-height: 92px;
	margin: 0 auto;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	transition: min-height 250ms ease;
}

.is-compact .navigation-inner {
	min-height: 74px;
}

.brand {
	display: inline-flex;
	width: fit-content;
	flex-direction: column;
	align-items: center;
	justify-self: start;
	color: var(--color-burgundy-dark);
	text-decoration: none;
}

.brand-name {
	font-family: var(--font-display);
	font-size: 39px;
	font-weight: 600;
	line-height: .78;
}

.brand-descriptor {
	margin-top: 7px;
	font-size: 7px;
	font-weight: 600;
	letter-spacing: 3.2px;
	line-height: 1;
	padding-left: 3.2px;
}

.primary-navigation {
	display: flex;
	height: 100%;
	align-items: center;
	justify-content: center;
	gap: clamp(22px, 3vw, 46px);
}

.navigation-link {
	position: relative;
	display: inline-flex;
	height: 100%;
	align-items: center;
	color: var(--color-text);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 1.1px;
	text-decoration: none;
	text-transform: uppercase;
	transition: color 200ms ease;
}

.navigation-link::after {
	position: absolute;
	right: 0;
	bottom: calc(50% - 17px);
	left: 0;
	height: 1px;
	background: var(--color-gold);
	content: "";
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 240ms ease;
}

.navigation-link:hover,
.navigation-link:focus-visible,
.navigation-link.is-current {
	color: var(--color-burgundy);
}

.navigation-link:hover::after,
.navigation-link:focus-visible::after,
.navigation-link.is-current::after {
	transform: scaleX(1);
}

.header-actions {
	display: flex;
	align-items: center;
	justify-self: end;
	gap: 18px;
}

.icon-button {
	position: relative;
	display: inline-grid;
	width: 34px;
	height: 38px;
	padding: 0;
	place-items: center;
	border: 0;
	background: transparent;
	color: var(--color-text);
	cursor: pointer;
	text-decoration: none;
	transition: color 200ms ease;
}

.icon-button:hover,
.icon-button:focus-visible {
	color: var(--color-burgundy);
}

.icon-button svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.35;
}

.cart-count {
	position: absolute;
	top: 1px;
	right: -2px;
	display: grid;
	width: 15px;
	height: 15px;
	place-items: center;
	border: 1px solid var(--color-cream);
	border-radius: 50%;
	background: var(--color-burgundy);
	color: #fff;
	font-family: var(--font-interface);
	font-size: 8px;
	line-height: 1;
	animation: badge-arrive 500ms 250ms ease-out both;
}

.menu-toggle {
	display: none;
}

.close-icon {
	display: none;
}

.search-dialog {
	width: min(920px, calc(100% - 36px));
	max-width: none;
	max-height: calc(100dvh - 40px);
	overflow-y: auto;
	padding: 0;
	border: 1px solid rgb(200 164 93 / 55%);
	background: var(--color-cream);
	color: var(--color-text);
	box-shadow: 0 24px 80px rgb(43 36 32 / 20%);
}

.search-dialog::backdrop {
	background: rgb(43 36 32 / 42%);
	backdrop-filter: blur(3px);
}

.search-dialog[open] {
	animation: dialog-arrive 220ms ease-out both;
}

.search-dialog-content {
	padding: 31px 34px 35px;
}

.search-dialog-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 22px;
}

.search-dialog-heading h1 {
	margin: 0;
	color: var(--color-burgundy-dark);
	font-family: var(--font-display);
	font-size: 30px;
	font-weight: 500;
}

.search-close {
	width: 32px;
	height: 32px;
}

.search-form {
	display: flex;
	min-height: 50px;
	border-bottom: 1px solid var(--color-gold);
}

.search-form input {
	width: 100%;
	min-width: 0;
	border: 0;
	outline: 0;
	background: transparent;
	color: var(--color-text);
	font-size: 13px;
}

.search-form input::placeholder {
	color: rgb(43 36 32 / 55%);
}

.search-submit {
	display: grid;
	width: 42px;
	flex: 0 0 42px;
	place-items: center;
	border: 0;
	background: transparent;
	color: var(--color-burgundy);
	cursor: pointer;
}

.search-submit svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.4;
}

.search-clear {
	display: grid;
	width: 36px;
	flex: 0 0 36px;
	place-items: center;
	border: 0;
	background: transparent;
	color: rgb(43 36 32 / 65%);
	cursor: pointer;
}

.search-clear[hidden] {
	display: none;
}

.search-clear svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-width: 1.5;
}

.search-dialog-body {
	padding-top: 22px;
}

.popular-searches h2 {
	margin: 0 0 14px;
	color: var(--color-burgundy);
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 1.5px;
}

.popular-search-list {
	display: flex;
	flex-wrap: wrap;
	gap: 9px 22px;
}

.popular-search-list button {
	min-height: 40px;
	padding: 0 0 5px;
	border: 0;
	border-bottom: 1px solid rgb(200 164 93 / 55%);
	background: transparent;
	color: var(--color-text);
	cursor: pointer;
	font-family: var(--font-display);
	font-size: 18px;
}

.search-result-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 16px;
}

.search-result-toolbar p {
	margin: 0;
	color: var(--color-burgundy);
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 1.2px;
}

.search-view-all {
	padding: 8px 0;
	border: 0;
	background: transparent;
	color: var(--color-burgundy-dark);
	cursor: pointer;
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 1px;
	text-decoration: none;
}

.catalog-product-grid.search-live-product-grid {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px 16px;
}

.search-live-product-grid .catalog-product-name {
	font-size: 16px;
}

.search-live-product-grid .catalog-product-description {
	min-height: 30px;
	font-size: 8px;
}

.search-live-product-grid .catalog-add-button {
	min-height: 36px;
}

.search-live-empty {
	margin: 0;
	padding: 24px 0;
	border-top: 1px solid rgb(84 21 25 / 14%);
	color: var(--color-burgundy-dark);
	font-family: var(--font-display);
	font-size: 22px;
}

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

@keyframes announcement-drift {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

@keyframes header-arrive {
	from { opacity: 0; transform: translateY(-7px); }
	to { opacity: 1; transform: translateY(0); }
}

@keyframes badge-arrive {
	from { opacity: 0; transform: scale(.85); }
	to { opacity: 1; transform: scale(1); }
}

@keyframes dialog-arrive {
	from { opacity: 0; transform: translateY(-8px); }
	to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1000px) {
	.navigation-inner {
		width: calc(100% - 48px);
	}

	.primary-navigation {
		gap: 21px;
	}

	.navigation-link {
		font-size: 9px;
		letter-spacing: .8px;
	}

	.header-actions {
		gap: 11px;
	}
}

@media (max-width: 760px) {
	.search-dialog {
		width: calc(100% - 16px);
		max-height: calc(100dvh - 16px);
	}

	.search-dialog-content {
		padding: 24px 18px 28px;
	}

	.search-dialog-heading h1 {
		font-size: 25px;
	}

	.catalog-product-grid.search-live-product-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px 12px;
	}

	.search-live-product-grid .catalog-product-name {
		font-size: 17px;
	}

	.announcement-bar {
		height: 29px;
	}

	.announcement-track {
		justify-content: flex-start;
		animation-duration: 42s;
	}

	.announcement-message {
		padding: 0 34px;
		font-size: 8px;
		letter-spacing: 1.25px;
	}

	.navigation-inner,
	.is-compact .navigation-inner {
		width: calc(100% - 36px);
		min-height: 72px;
		grid-template-columns: 1fr auto;
	}

	.brand-name {
		font-size: 36px;
	}

	.header-actions {
		gap: 9px;
	}

	.wishlist-link {
		display: none;
	}

	.menu-toggle {
		display: inline-grid;
		margin-left: 2px;
	}

	.menu-toggle[aria-expanded="true"] .menu-icon {
		display: none;
	}

	.menu-toggle[aria-expanded="true"] .close-icon {
		display: block;
	}

	.primary-navigation {
		position: absolute;
		top: 100%;
		right: -18px;
		left: -18px;
		display: flex;
		height: auto;
		max-height: 0;
		overflow: hidden;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		gap: 0;
		visibility: hidden;
		border-bottom: 1px solid transparent;
		background: var(--color-cream);
		opacity: 0;
		transition: max-height 300ms ease, opacity 220ms ease, visibility 300ms, border-color 220ms ease;
	}

	.primary-navigation.is-open {
		max-height: 340px;
		visibility: visible;
		border-color: rgb(84 21 25 / 10%);
		opacity: 1;
	}

	.navigation-link {
		min-height: 55px;
		padding: 0 28px;
		border-top: 1px solid rgb(84 21 25 / 7%);
		font-size: 10px;
		letter-spacing: 1.3px;
	}

	.navigation-link::after {
		right: auto;
		bottom: 15px;
		left: 28px;
		width: 40px;
	}
}

@media (max-width: 380px) {
	.navigation-inner,
	.is-compact .navigation-inner {
		width: calc(100% - 24px);
	}

	.primary-navigation {
		left: -12px;
		right: 3px;
	}

	.header-actions {
		gap: 5px;
	}

	.icon-button {
		width: 32px;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

.hero {
	position: relative;
	isolation: isolate;
	min-height: min(760px, calc(100svh - 124px));
	overflow: hidden;
	background:
		radial-gradient(ellipse at 17% 80%, rgb(239 228 213 / 42%) 0, rgb(239 228 213 / 0%) 34%),
		var(--color-cream);
}

.hero::before {
	position: absolute;
	z-index: -1;
	top: 8%;
	left: -130px;
	width: 330px;
	height: 330px;
	border: 1px solid rgb(200 164 93 / 12%);
	border-radius: 50%;
	content: "";
}

.hero-inner {
	display: grid;
	width: min(100% - 112px, 1390px);
	min-height: min(760px, calc(100svh - 124px));
	margin: 0 auto;
	grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
	align-items: center;
	column-gap: clamp(28px, 5vw, 82px);
	padding: 80px 0 70px;
}

.hero-copy {
	position: relative;
	z-index: 1;
	padding: 8px 0 16px;
}

.hero-eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 24px;
	color: var(--color-burgundy);
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 2.6px;
	line-height: 1.4;
	animation: hero-reveal-left 700ms 100ms ease-out both;
}

.hero-eyebrow::before {
	width: 29px;
	height: 1px;
	background: var(--color-gold);
	content: "";
}

.hero-title {
	display: flex;
	flex-direction: column;
	margin: 0;
	color: var(--color-burgundy-dark);
	font-family: var(--font-display);
	font-size: clamp(56px, 6.1vw, 92px);
	font-weight: 500;
	letter-spacing: 0;
	line-height: .84;
	white-space: nowrap;
	animation: hero-reveal-left 850ms 180ms ease-out both;
}

.hero-title span + span {
	margin-top: 8px;
}

.hero-title-accent {
	color: var(--color-gold);
	font-size: .94em;
	font-style: italic;
	font-weight: 500;
}

.hero-description {
	margin: 28px 0 0;
	color: rgb(43 36 32 / 76%);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: .15px;
	line-height: 1.9;
	animation: hero-reveal-left 750ms 340ms ease-out both;
}

.hero-actions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	margin-top: 34px;
	animation: hero-reveal-left 750ms 440ms ease-out both;
}

.hero-button {
	display: inline-flex;
	min-width: 174px;
	min-height: 52px;
	align-items: center;
	justify-content: space-between;
	gap: 26px;
	padding: 0 19px 0 22px;
	border: 1px solid var(--color-burgundy-dark);
	background: var(--color-burgundy-dark);
	color: var(--color-cream);
	font-size: 9px;
	font-weight: 500;
	letter-spacing: 1.5px;
	text-decoration: none;
	transition: border-color 240ms ease, background-color 240ms ease, color 240ms ease, box-shadow 240ms ease;
}

.hero-button svg {
	width: 17px;
	height: 17px;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.4;
	transition: transform 240ms ease;
}

.hero-button:hover,
.hero-button:focus-visible {
	border-color: var(--color-burgundy);
	background: var(--color-burgundy);
	box-shadow: 0 7px 19px rgb(84 21 25 / 14%);
}

.hero-button:hover svg,
.hero-button:focus-visible svg {
	transform: translateX(4px);
}

.hero-secondary-link {
	color: var(--color-text);
	font-family: var(--font-display);
	font-size: 17px;
	font-style: italic;
	text-decoration-color: rgb(200 164 93 / 0%);
	text-underline-offset: 5px;
	transition: color 200ms ease, text-decoration-color 200ms ease;
}

.hero-secondary-link span {
	display: inline-block;
	margin-left: 4px;
	color: var(--color-burgundy);
	font-family: var(--font-interface);
	font-size: 13px;
	font-style: normal;
	transition: transform 200ms ease;
}

.hero-secondary-link:hover,
.hero-secondary-link:focus-visible {
	color: var(--color-burgundy);
	text-decoration: underline;
	text-decoration-color: var(--color-gold);
}

.hero-secondary-link:hover span,
.hero-secondary-link:focus-visible span {
	transform: translateX(3px);
}

.hero-visual {
	position: relative;
	width: 100%;
	max-width: 760px;
	justify-self: end;
	padding: 8px 13px 24px 0;
	animation: hero-reveal-right 900ms 220ms ease-out both;
}

.hero-gold-ring {
	position: absolute;
	z-index: -1;
	top: 50%;
	right: -5%;
	width: min(70%, 470px);
	aspect-ratio: 1;
	border: 1px solid rgb(200 164 93 / 60%);
	border-radius: 50%;
	transform: translateY(-50%);
	animation: hero-ring-drift 8s ease-in-out infinite;
}

.hero-image-frame {
	position: relative;
	width: 100%;
	height: clamp(390px, 43vw, 610px);
	overflow: hidden;
	border-radius: 24px;
	background: var(--color-beige);
	box-shadow: 0 17px 44px rgb(43 36 32 / 10%);
}

.hero-image-frame::after {
	position: absolute;
	inset: 0;
	border: 1px solid rgb(255 255 255 / 24%);
	border-radius: inherit;
	content: "";
	pointer-events: none;
}

.hero-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 48%;
}

.hero-carousel-track {
	display: flex;
	width: 1000%;
	height: 100%;
	animation: hero-carousel-travel 25s linear infinite;
	will-change: transform;
}

.hero-carousel-slide {
	position: relative;
	flex: 0 0 10%;
	width: 10%;
	height: 100%;
}

.hero-carousel:hover .hero-carousel-track {
	animation-duration: 36s;
}

.hero-collection-label {
	position: absolute;
	right: -11px;
	bottom: 51px;
	padding: 13px 18px 12px;
	border: 1px solid var(--color-gold);
	background: var(--color-cream);
	color: var(--color-burgundy-dark);
	font-size: 8px;
	font-weight: 600;
	letter-spacing: 1.8px;
	line-height: 1;
}

@keyframes hero-reveal-left {
	from { opacity: 0; transform: translateX(-18px); }
	to { opacity: 1; transform: translateX(0); }
}

@keyframes hero-reveal-right {
	from { opacity: 0; transform: translateX(20px); }
	to { opacity: 1; transform: translateX(0); }
}

@keyframes hero-ring-drift {
	0%, 100% { transform: translateY(-50%) translateX(0); }
	50% { transform: translateY(calc(-50% - 7px)) translateX(3px); }
}

@keyframes hero-carousel-travel {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

@media (max-width: 900px) {
	.hero {
		min-height: auto;
	}

	.hero-inner {
		width: min(100% - 48px, 720px);
		min-height: auto;
		grid-template-columns: minmax(0, 1fr);
		row-gap: 44px;
		padding: 80px 0 68px;
	}

	.hero-copy {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 0;
		text-align: center;
	}

	.hero-title {
		font-size: clamp(54px, 8vw, 72px);
	}

	.hero-description {
		margin-top: 24px;
	}

	.hero-actions {
		align-items: center;
		margin-top: 29px;
	}

	.hero-visual {
		width: calc(100% - 12px);
		max-width: 650px;
		justify-self: center;
	}

	.hero-image-frame {
		height: clamp(390px, 68vw, 560px);
	}
}

@media (max-width: 1100px) {
	.hero-inner {
		width: calc(100% - 72px);
		column-gap: 34px;
	}

	.hero-title {
		font-size: clamp(54px, 6.2vw, 72px);
	}

	.hero-image-frame {
		height: clamp(370px, 45vw, 540px);
	}
}

@media (max-width: 760px) {
	.hero {
		min-height: auto;
	}

	.hero-inner {
		width: calc(100% - 40px);
		min-height: auto;
		grid-template-columns: minmax(0, 1fr);
		row-gap: 44px;
		padding: 84px 0 68px;
	}

	.hero-copy {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 0;
		text-align: center;
	}

	.hero-eyebrow {
		margin-bottom: 21px;
		font-size: 8px;
		letter-spacing: 2.2px;
	}

	.hero-title {
		font-size: clamp(57px, 12vw, 78px);
		line-height: .86;
	}

	.hero-title span + span {
		margin-top: 7px;
	}

	.hero-description {
		margin-top: 23px;
		font-size: 12px;
	}

	.desktop-break {
		display: none;
	}

	.hero-actions {
		align-items: center;
		gap: 17px;
		margin-top: 27px;
	}

	.hero-visual {
		width: calc(100% - 12px);
		max-width: 560px;
		justify-self: center;
		padding: 0 8px 18px 0;
	}

	.hero-image-frame {
		height: clamp(360px, 108vw, 520px);
	}

	.hero-gold-ring {
		right: -7%;
		width: 74%;
	}

	.hero-collection-label {
		right: -5px;
		bottom: 39px;
		padding: 12px 14px 11px;
		font-size: 7px;
		letter-spacing: 1.4px;
	}
}

@media (max-width: 380px) {
	.hero-inner {
		width: calc(100% - 32px);
		padding-top: 72px;
	}

	.hero-title {
		font-size: clamp(44px, 14vw, 52px);
	}

	.hero-description {
		max-width: 290px;
	}

	.hero-image-frame {
		height: 350px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hero *,
	.hero *::before,
	.hero *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}

	.hero-carousel-track {
		animation: none !important;
	}
}

.shop-categories {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: clamp(82px, 9vw, 130px) 0 clamp(90px, 10vw, 142px);
	background:
		radial-gradient(ellipse at 90% 54%, rgb(239 228 213 / 46%) 0, rgb(239 228 213 / 0%) 31%),
		var(--color-cream);
}

.shop-categories::before {
	position: absolute;
	z-index: -1;
	top: 43%;
	left: -92px;
	width: 230px;
	height: 230px;
	border: 1px solid rgb(200 164 93 / 14%);
	border-radius: 50%;
	content: "";
}

.categories-inner {
	width: min(100% - 96px, 1320px);
	margin: 0 auto;
}

.categories-intro {
	margin: 0 auto 54px;
	text-align: center;
}

.categories-eyebrow {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin: 0 0 12px;
	color: var(--color-burgundy);
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 2.5px;
	line-height: 1.5;
}

.categories-eyebrow::before,
.categories-eyebrow::after {
	width: 24px;
	height: 1px;
	background: var(--color-gold);
	content: "";
}

.categories-title {
	margin: 0;
	color: var(--color-burgundy-dark);
	font-family: var(--font-display);
	font-size: clamp(42px, 5vw, 62px);
	font-weight: 500;
	line-height: 1;
}

.categories-description {
	margin: 15px 0 0;
	color: rgb(43 36 32 / 72%);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: .1px;
	line-height: 1.85;
}

.category-grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	align-items: start;
	gap: clamp(18px, 2.2vw, 32px);
}

.category-item {
	display: flex;
	min-width: 0;
	flex-direction: column;
	align-items: center;
	color: var(--color-text);
	text-align: center;
	text-decoration: none;
}

.category-image-wrap {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: .81;
	overflow: hidden;
	border-radius: 49% 49% 2px 2px;
	background: var(--color-beige);
	box-shadow: 0 9px 25px rgb(43 36 32 / 7%);
	transform: translateY(0);
	transition: transform 380ms cubic-bezier(.2, .65, .3, 1), box-shadow 380ms ease;
}

.category-image-wrap img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 650ms cubic-bezier(.2, .65, .3, 1);
}

.category-image-shade {
	position: absolute;
	inset: 0;
	background: rgb(43 36 32 / 0%);
	transition: background-color 350ms ease;
}

.category-name {
	margin-top: 20px;
	color: var(--color-burgundy-dark);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 1.55px;
	line-height: 1.4;
	text-transform: uppercase;
	transition: color 250ms ease;
}

.category-explore {
	margin-top: 8px;
	color: rgb(43 36 32 / 68%);
	font-family: var(--font-display);
	font-size: 16px;
	font-style: italic;
	line-height: 1.3;
	opacity: .76;
	transition: color 250ms ease, opacity 250ms ease;
}

.category-explore span {
	display: inline-block;
	margin-left: 2px;
	color: var(--color-gold);
	font-family: var(--font-interface);
	font-size: 12px;
	font-style: normal;
	transition: transform 250ms ease;
}

.category-item:hover .category-image-wrap,
.category-item:focus-visible .category-image-wrap {
	box-shadow: 0 13px 28px rgb(43 36 32 / 11%);
	transform: translateY(-5px);
}

.category-item:hover .category-image-wrap img,
.category-item:focus-visible .category-image-wrap img {
	transform: scale(1.045);
}

.category-item:hover .category-image-shade,
.category-item:focus-visible .category-image-shade {
	background: rgb(43 36 32 / 10%);
}

.category-item:hover .category-name,
.category-item:focus-visible .category-name {
	color: var(--color-gold);
}

.category-item:hover .category-explore,
.category-item:focus-visible .category-explore {
	color: var(--color-burgundy-dark);
	opacity: 1;
}

.category-item:hover .category-explore span,
.category-item:focus-visible .category-explore span {
	transform: translateX(3px);
}

.has-reveal:not(.is-visible) .categories-intro,
.has-reveal:not(.is-visible) .category-item {
	opacity: 0;
	transform: translateY(17px);
}

.categories-intro,
.category-item {
	transition: opacity 700ms ease, transform 700ms ease;
}

.is-visible .categories-intro,
.is-visible .category-item {
	opacity: 1;
	transform: translateY(0);
}

.is-visible .category-item:nth-child(1) { transition-delay: 100ms; }
.is-visible .category-item:nth-child(2) { transition-delay: 190ms; }
.is-visible .category-item:nth-child(3) { transition-delay: 280ms; }
.is-visible .category-item:nth-child(4) { transition-delay: 370ms; }
.is-visible .category-item:nth-child(5) { transition-delay: 460ms; }

@media (max-width: 1050px) {
	.categories-inner {
		width: calc(100% - 72px);
	}

	.category-grid {
		grid-template-columns: repeat(6, minmax(0, 1fr));
		column-gap: 22px;
		row-gap: 38px;
	}

	.category-item {
		grid-column: span 2;
	}

	.category-item:nth-child(4) {
		grid-column: 2 / span 2;
	}

	.category-item:nth-child(5) {
		grid-column: 4 / span 2;
	}
}

@media (max-width: 620px) {
	.shop-categories {
		padding: 76px 0 88px;
	}

	.categories-inner {
		width: calc(100% - 40px);
	}

	.categories-intro {
		margin-bottom: 38px;
	}

	.categories-title {
		font-size: 44px;
	}

	.categories-description {
		max-width: 320px;
		margin-right: auto;
		margin-left: auto;
		font-size: 10px;
	}

	.categories-desktop-break {
		display: none;
	}

	.category-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 18px;
		row-gap: 35px;
	}

	.category-item,
	.category-item:nth-child(4) {
		grid-column: auto;
	}

	.category-item:nth-child(5) {
		width: calc((100% - 18px) / 2);
		grid-column: 1 / -1;
		justify-self: center;
	}

	.category-image-wrap {
		aspect-ratio: .84;
	}

	.category-name {
		margin-top: 15px;
		font-size: 9px;
		letter-spacing: 1.2px;
	}

	.category-explore {
		margin-top: 6px;
		font-size: 15px;
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.shop-categories *,
	.shop-categories *::before,
	.shop-categories *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}