/* ==========================================================================
   Aurelia — Components
   Product cards, carousels, badges, hero, category & brand tiles, mini cart,
   search suggestions, newsletter, breadcrumbs, toasts.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
	position: relative;
	display: grid;
	place-items: center;
	height: calc(100vh - var(--h-announce) - var(--h-header));
	min-height: 520px;
	max-height: 840px;
	background: var(--c-paper);
	overflow: hidden;
}

.hero--height-compact {
	height: 72vh;
	min-height: 440px;
	max-height: 680px;
}

.hero--height-tall {
	height: 92vh;
	min-height: 600px;
	max-height: 980px;
}

.hero--height-fullscreen {
	height: 100vh;
	min-height: 600px;
	max-height: none;
}

.hero__slide {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	opacity: 0;
	visibility: hidden;
	z-index: 0;
	pointer-events: none;
	transition: opacity 0.95s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.95s;
}

.hero__slide.is-active {
	opacity: 1;
	visibility: visible;
	z-index: 1;
	pointer-events: auto;
	transition: opacity 0.95s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
}

.hero__slide .hero__image {
	transform: scale(1.06);
	transition: transform 7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.hero__slide.is-active .hero__image {
	transform: scale(1);
	will-change: transform;
}

.hero__slide .hero__brand-sub,
.hero__slide .hero__title,
.hero__slide .hero__sub,
.hero__slide .hero__actions {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero__slide.is-active .hero__brand-sub {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.08s;
}

.hero__slide.is-active .hero__title {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.16s;
}

.hero__slide.is-active .hero__sub {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.24s;
}

.hero__slide.is-active .hero__actions {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.32s;
}

@media (prefers-reduced-motion: reduce) {

	.hero__slide,
	.hero__slide .hero__image,
	.hero__slide .hero__brand-sub,
	.hero__slide .hero__title,
	.hero__slide .hero__sub,
	.hero__slide .hero__actions {
		transition: none !important;
		transform: none !important;
	}
}

.hero__picture {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.hero__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 25%;
}

.hero__image--dark {
	display: block;
}

.hero__image--light {
	display: none;
}

[data-theme="light"] .hero__image--dark {
	display: none;
}

[data-theme="light"] .hero__image--light {
	display: block;
}

.hero__overlay {
	position: absolute;
	inset: 0;
	background: var(--hero-overlay-bg, radial-gradient(ellipse 68% 62% at 50% 52%, rgba(12, 11, 10, 0.50) 0%, rgba(12, 11, 10, 0.16) 72%, transparent 100%));
}

[data-theme="light"] .hero__overlay {
	background: var(--hero-overlay-bg, radial-gradient(ellipse 68% 62% at 50% 52%, rgba(255, 255, 255, 0.56) 0%, rgba(255, 255, 255, 0.18) 72%, transparent 100%));
}

.hero__body {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-1);
	padding: var(--sp-9) var(--gutter);
	width: 100%;
	max-width: var(--hero-content-max, 980px);
	text-align: center;
}

.hero__slide--align-left {
	justify-items: start;
}

.hero__slide--align-left .hero__body {
	align-items: flex-start;
	text-align: left;
	padding-inline: clamp(24px, 6vw, 88px);
}

.hero__slide--align-left .hero__actions {
	justify-content: flex-start;
}

.hero__slide--align-right {
	justify-items: end;
}

.hero__slide--align-right .hero__body {
	align-items: flex-end;
	text-align: right;
	padding-inline: clamp(24px, 6vw, 88px);
}

.hero__slide--align-right .hero__actions {
	justify-content: flex-end;
}

.hero__slide--valign-top {
	align-items: start;
}

.hero__slide--valign-top .hero__body {
	padding-top: clamp(32px, 6vh, 72px);
}

.hero__slide--valign-bottom {
	align-items: end;
}

.hero__slide--valign-bottom .hero__body {
	padding-bottom: clamp(48px, 8vh, 84px);
}

.hero__brand-sub {
	font-family: var(--f-body);
	font-size: var(--hero-kicker-size, 0.6875rem);
	font-weight: 600;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--hero-kicker-color, var(--c-accent));
}

.hero__kicker {
	display: none;
}

.hero__title {
	margin: 0;
	color: var(--hero-title-color, var(--c-ink));
	font-family: var(--hero-title-font, var(--f-display));
	font-size: var(--hero-title-size, clamp(2.25rem, 8.5vw, 7.5rem));
	font-weight: var(--hero-title-weight, 400);
	font-style: var(--hero-title-style, normal);
	line-height: 1.05;
	letter-spacing: -0.015em;
	text-shadow: 0 4px 24px rgba(0, 0, 0, 0.7);
}

[data-theme="light"] .hero__title {
	color: var(--hero-title-color, #1a1a1a);
	text-shadow: 0 1px 3px rgba(255, 255, 255, 0.7);
}

.hero__title em {
	font-style: italic;
	color: inherit;
}

.hero__text {
	display: none;
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--sp-3);
	margin-top: var(--sp-5);
}

.hero__sub {
	max-width: 48ch;
	margin: var(--sp-2) 0 0;
	color: var(--hero-sub-color, rgba(247, 244, 238, 0.90));
	font-family: var(--f-body);
	font-size: var(--hero-sub-size, 0.9rem);
	font-weight: 400;
	line-height: 1.55;
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.72);
}

[data-theme="light"] .hero__sub {
	color: var(--hero-sub-color, rgba(17, 17, 17, 0.88));
	text-shadow: 0 1px 10px rgba(255, 255, 255, 0.82);
}

.hero__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	padding: 0 30px;
	border-radius: var(--r-sm);
	font-size: 0.72rem;
	font-weight: var(--fw-semibold);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	transition: background-color 0.24s var(--e-out), border-color 0.24s var(--e-out), color 0.24s var(--e-out), transform 0.24s var(--e-out), box-shadow 0.24s var(--e-out);
}

.hero__cta--sm {
	min-height: 38px;
	padding: 0 20px;
	font-size: 0.65rem;
}

.hero__cta--lg {
	min-height: 56px;
	padding: 0 38px;
	font-size: 0.78rem;
}

.hero__cta--primary {
	border: 1px solid var(--hero-btn-border, #f7f4ee);
	background: var(--hero-btn-bg, #f7f4ee);
	color: var(--hero-btn-fg, #0c0b0a);
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}

.hero__cta--primary:hover {
	background: var(--c-accent);
	border-color: var(--c-accent);
	color: #0c0b0a;
	transform: translateY(-2px);
	box-shadow: 0 14px 32px rgba(195, 160, 106, 0.34);
}

.hero__cta--secondary {
	border: 1px solid var(--hero-btn-border, rgba(247, 244, 238, 0.65));
	background: var(--hero-btn-bg, rgba(12, 11, 10, 0.45));
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	color: var(--hero-btn-fg, #f7f4ee);
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.20);
}

.hero__cta--secondary:hover {
	background: rgba(247, 244, 238, 0.94);
	border-color: #f7f4ee;
	color: #0c0b0a;
	transform: translateY(-2px);
}

.hero__cta--custom {
	border: 1px solid var(--hero-btn-border, var(--c-accent));
	background: var(--hero-btn-bg, var(--c-accent));
	color: var(--hero-btn-fg, #0c0b0a);
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.24);
}

.hero__cta--custom:hover {
	filter: brightness(1.08);
	transform: translateY(-2px);
}

.hero__cta svg {
	transition: transform 0.24s var(--e-out);
}

.hero__cta:hover svg {
	transform: translateX(4px);
}

.hero__cta:focus-visible {
	outline: 2px solid var(--c-accent);
	outline-offset: 3px;
}

[data-theme="light"] .hero__cta--primary {
	border-color: var(--hero-btn-border, #111111);
	background: var(--hero-btn-bg, #111111);
	color: var(--hero-btn-fg, #ffffff);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
}

[data-theme="light"] .hero__cta--primary:hover {
	background: #2b2b2b;
	border-color: #2b2b2b;
	color: #ffffff;
}

[data-theme="light"] .hero__cta--secondary {
	border-color: var(--hero-btn-border, rgba(17, 17, 17, 0.78));
	background: var(--hero-btn-bg, rgba(255, 255, 255, 0.86));
	color: var(--hero-btn-fg, #111111);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .hero__cta--secondary:hover {
	background: #111111;
	border-color: #111111;
	color: #ffffff;
}

.hero__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid rgba(247, 244, 238, 0.22);
	border-radius: 50%;
	background: rgba(13, 12, 11, 0.34);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	color: #f7f4ee;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.32s var(--e-out), transform 0.24s var(--e-out), background-color 0.24s var(--e-out), border-color 0.24s var(--e-out), color 0.24s var(--e-out);
}

.hero:hover .hero__nav,
.hero:focus-within .hero__nav {
	opacity: 0.92;
}

.hero__nav:hover {
	opacity: 1 !important;
	background: rgba(247, 244, 238, 0.95);
	border-color: rgba(247, 244, 238, 0.95);
	color: #111111;
	transform: translateY(-50%) scale(1.06);
}

.hero__nav:active {
	transform: translateY(-50%) scale(0.95);
}

.hero__nav--prev {
	left: var(--gutter);
}

.hero__nav--next {
	right: var(--gutter);
}

[data-theme="light"] .hero__nav {
	background: rgba(255, 255, 255, 0.74);
	border-color: rgba(17, 17, 17, 0.16);
	color: #111111;
}

[data-theme="light"] .hero__nav:hover {
	background: #111111;
	border-color: #111111;
	color: #ffffff;
}

@media (hover: none) {
	.hero__nav {
		opacity: 0.85;
	}
}

.hero__actions .btn {
	min-width: 190px;
}

.hero__meta {
	display: none;
}

/* Hero slider progress bars */
@keyframes heroDotProgress {
	from {
		transform: scaleX(0);
	}

	to {
		transform: scaleX(1);
	}
}

.hero__dots {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	position: absolute;
	bottom: var(--sp-5);
	left: 50%;
	transform: translateX(-50%);
	z-index: 3;
}

.hero__dot {
	position: relative;
	overflow: hidden;
	width: 28px;
	height: 3px;
	border-radius: var(--r-pill);
	background: rgba(255, 255, 255, 0.26);
	border: 0;
	padding: 0;
	min-height: 0;
	cursor: pointer;
	transition: width 0.38s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.25s var(--e-out);
}

.hero__dot::before {
	content: "";
	position: absolute;
	inset: -10px -4px;
}

.hero__dot::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--c-accent);
	transform: scaleX(0);
	transform-origin: left center;
}

.hero__dot:hover {
	background: rgba(255, 255, 255, 0.5);
}

.hero__dot.is-active {
	width: 52px;
	background: rgba(255, 255, 255, 0.24);
}

.hero__dot.is-active::after {
	animation: heroDotProgress var(--hero-interval, 5.5s) linear forwards;
}

.hero[data-hero-autoplay="0"] .hero__dot.is-active::after {
	animation: none;
	transform: scaleX(1);
}

.hero:hover .hero__dot.is-active::after,
.hero:focus-within .hero__dot.is-active::after {
	animation-play-state: paused;
}

[data-theme="light"] .hero__dot {
	background: rgba(0, 0, 0, 0.18);
}

[data-theme="light"] .hero__dot.is-active {
	background: rgba(0, 0, 0, 0.16);
}

[data-theme="light"] .hero__dot::after {
	background: #111111;
}

/* --------------------------------------------------------------------------
   Badges
   -------------------------------------------------------------------------- */

.badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 22px;
	padding: 0 8px;
	border-radius: var(--r-xs);
	font-family: var(--f-body);
	font-size: 0.625rem;
	font-weight: var(--fw-semibold);
	letter-spacing: 0.08em;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
}

.badge--sale {
	background: var(--c-accent);
	color: var(--c-on-accent);
}

.badge--new {
	background: var(--c-ink);
	color: var(--c-paper);
}

.badge--out {
	background: var(--c-sand-2);
	color: var(--c-ink-3);
}

.badge--soft {
	background: var(--c-accent-soft);
	color: var(--c-accent);
}

/* --------------------------------------------------------------------------
   Product card
   -------------------------------------------------------------------------- */

.product-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--sp-6) var(--sp-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.product-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: transparent;
	min-width: 0;
}

.product-card__media {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--c-sand);
	aspect-ratio: 3 / 4;
}

.product-card__media img {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center top !important;
	transition: opacity var(--t-slow) var(--e-out), transform var(--t-slow) var(--e-out);
}

.product-card__media .product-card__img--secondary {
	opacity: 0;
}

.product-card:hover .product-card__img--secondary {
	opacity: 1;
}

.product-card:hover .product-card__media img {
	transform: scale(1.03);
}

.product-card__placeholder {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: var(--c-muted-2);
}

.product-card__badges {
	position: absolute;
	top: var(--sp-3);
	left: var(--sp-3);
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sp-1);
}

.product-card__wish {
	position: absolute;
	bottom: 46px;
	right: var(--sp-2);
	z-index: 3;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	min-height: 0;
	padding: 0;
	background: rgba(255, 255, 255, 0.85);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	border: 0;
	border-radius: var(--r-pill);
	color: #111111;
	opacity: 0;
	transform: translateY(4px);
	transition: opacity var(--t-base) var(--e-out), transform var(--t-base) var(--e-out),
		color var(--t-fast) var(--e-out);
}

.product-card:hover .product-card__wish,
.product-card__wish:focus-visible,
.product-card__wish.is-active {
	opacity: 1;
	transform: translateY(0);
}

.product-card__wish:hover {
	color: var(--c-accent);
}

.product-card__wish.is-active svg {
	fill: var(--c-accent);
	stroke: var(--c-accent);
}

.product-card__actions {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	display: flex;
	gap: 0;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity var(--t-base) var(--e-out), transform var(--t-base) var(--e-out);
}

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

.product-card__actions .btn {
	flex: 1 1 auto;
	min-height: 38px;
	padding: 0 var(--sp-3);
	background: rgba(17, 17, 17, 0.90);
	border: 0;
	border-radius: 0;
	color: #ffffff;
	font-size: 0.625rem;
	font-weight: var(--fw-medium);
	letter-spacing: 0.16em;
}

.product-card__actions .btn:hover {
	background: #000000;
	color: #ffffff;
}

.product-card__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	padding-top: var(--sp-3);
	text-align: left;
}

.product-card__brand {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 2;
	color: #ffffff;
	background: rgba(0, 0, 0, 0.40);
	backdrop-filter: blur(4px);
	padding: 2px 6px;
	border-radius: 2px;
	font-size: 0.5625rem;
	font-weight: var(--fw-semibold);
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.product-card__title {
	margin: 0;
	font-family: var(--f-body);
	font-size: 0.75rem;
	font-weight: var(--fw-regular);
	line-height: var(--lh-snug);
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.product-card__title a {
	color: var(--c-ink);
	transition: color var(--t-fast) var(--e-out);
}

.product-card__title a:hover {
	color: var(--c-accent);
}

.product-card__price {
	display: flex;
	align-items: baseline;
	gap: var(--sp-2);
	color: var(--c-muted);
	font-size: 0.75rem;
	font-weight: var(--fw-medium);
}

.product-card__price del {
	font-size: 0.6875rem;
	color: var(--c-muted-2);
}

.product-card__price ins {
	text-decoration: none;
	color: var(--c-ink);
}

.product-card__swatches {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 5px;
	margin-top: 4px;
}

.swatch {
	display: inline-block;
	width: 9px;
	height: 9px;
	border: 1px solid var(--c-line-strong);
	border-radius: 50%;
	background: #222222;
}

.swatch--more {
	display: grid;
	place-items: center;
	width: auto;
	height: 12px;
	padding: 0 3px;
	border: 0;
	background: transparent;
	color: var(--c-muted);
	font-size: 0.625rem;
	font-weight: var(--fw-medium);
}

.product-card__rating {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	color: var(--c-gold);
	font-size: var(--fs-2xs);
}

.product-card__rating svg {
	width: 12px;
	height: 12px;
	fill: currentColor;
	stroke: none;
}

.product-card__rating span {
	color: var(--c-muted);
	margin-left: 2px;
}

/* --------------------------------------------------------------------------
   Category tile
   -------------------------------------------------------------------------- */

.category-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.category-grid--8 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.category-grid--6 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.category-tile {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--c-sand-2);
	border-radius: 0;
	aspect-ratio: 4 / 5;
	isolation: isolate;
}

.category-tile img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--t-slow) var(--e-out);
}

.category-tile:hover img {
	transform: scale(1.04);
}

.category-tile::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.1) 40%, transparent 70%);
	z-index: 1;
}

.category-tile__body {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 2;
	padding: var(--sp-4);
	color: #ffffff;
	text-align: center;
}

.category-tile__name {
	margin: 0;
	color: #ffffff;
	font-family: var(--f-body);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.category-tile__count {
	display: none;
}

.category-tile--wide {
	grid-column: span 2;
	aspect-ratio: auto;
	min-height: 100%;
}

/* --------------------------------------------------------------------------
   Brand tile
   -------------------------------------------------------------------------- */

.brand-strip {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--sp-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.brand-tile {
	display: grid;
	place-items: center;
	gap: var(--sp-2);
	min-height: 96px;
	padding: var(--sp-4);
	background: var(--c-paper);
	border: 1px solid var(--c-line);
	border-radius: var(--r-sm);
	text-align: center;
	transition: border-color var(--t-fast) var(--e-out), background-color var(--t-fast) var(--e-out);
}

.brand-tile:hover {
	border-color: var(--c-ink);
	background: var(--c-sand);
}

.brand-tile__name {
	font-family: var(--f-display);
	font-size: var(--fs-lg);
	letter-spacing: 0.04em;
	color: var(--c-ink-2);
	line-height: 1.2;
}

.brand-tile__count {
	font-size: var(--fs-2xs);
	color: var(--c-muted);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
}

.brand-tile img {
	max-height: 40px;
	width: auto;
	object-fit: contain;
	filter: grayscale(1);
	opacity: 0.7;
	transition: filter var(--t-fast) var(--e-out), opacity var(--t-fast) var(--e-out);
}

.brand-tile:hover img {
	filter: grayscale(0);
	opacity: 1;
}

/* --------------------------------------------------------------------------
   Product carousel / rail
   -------------------------------------------------------------------------- */

.rail {
	position: relative;
}

.rail__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - var(--sp-4) * 3) / 4);
	gap: var(--sp-4);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding-bottom: 0;
	scrollbar-width: none;
}

.rail__track::-webkit-scrollbar {
	display: none;
}

.rail__track>* {
	scroll-snap-align: start;
	min-width: 0;
}

.rail__nav {
	position: absolute;
	top: 36%;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 32px;
	height: 44px;
	min-height: 0;
	padding: 0;
	background: rgba(0, 0, 0, 0.75);
	border: 0;
	border-radius: 2px;
	color: #ffffff;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
	transition: opacity var(--t-base) var(--e-out), background-color var(--t-fast) var(--e-out);
}

.rail__nav:hover {
	background: #000000;
	color: #ffffff;
}

.rail__nav[disabled] {
	opacity: 0;
	pointer-events: none;
}

.rail__nav--prev {
	left: 0;
}

.rail__nav--next {
	right: 0;
}

@media (max-width: 1279px) {
	.rail__track {
		grid-auto-columns: calc((100% - var(--sp-4) * 3) / 4);
	}
}

@media (max-width: 1023px) {
	.rail__track {
		grid-auto-columns: calc((100% - var(--sp-4) * 2) / 3);
	}
}

@media (max-width: 719px) {
	.rail__track {
		grid-auto-columns: calc((100% - var(--sp-3)) / 2);
		gap: var(--sp-3);
	}

	.rail__nav {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   Promotional / editorial banners
   -------------------------------------------------------------------------- */

.promo-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 520px;
	background: var(--c-sand);
	overflow: hidden;
}

.promo-split__media {
	position: relative;
	overflow: hidden;
}

.promo-split__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--t-slow) var(--e-out);
}

.promo-split:hover .promo-split__media img {
	transform: scale(1.03);
}

.promo-split__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--sp-4);
	padding: clamp(var(--sp-6), 6vw, var(--sp-11));
}

.promo-split--reverse .promo-split__media {
	order: 2;
}

/* Featured edit tiles */

.edit-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sp-1);
}

.edit-tile {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	background: var(--c-sand);
}

.edit-tile img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.8s var(--e-out);
}

.edit-tile:hover img {
	transform: scale(1.03);
}

.edit-tile::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.25) 100%);
}

.edit-tile__body {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: var(--sp-6);
}

.edit-tile--work .edit-tile__title {
	align-self: flex-end;
	margin: var(--sp-4) var(--sp-4) 0 0;
	color: var(--c-ink);
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
	font-family: var(--f-display);
	font-size: clamp(2rem, 4vw, 3.2rem);
	line-height: 1.1;
	text-align: right;
	max-width: 6ch;
}

.edit-tile--basics .edit-tile__title {
	position: absolute;
	bottom: var(--sp-9);
	left: 50%;
	transform: translateX(-50%);
	color: rgba(255, 255, 255, 0.45);
	font-family: var(--f-display);
	font-size: clamp(3.5rem, 7vw, 6rem);
	letter-spacing: 0.08em;
	line-height: 1;
	pointer-events: none;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.btn--pill-white {
	align-self: flex-start;
	margin-top: auto;
	min-height: 38px;
	padding: 0 26px;
	background: #ffffff;
	color: #111111;
	border: 0;
	border-radius: var(--r-pill);
	font-size: 0.6875rem;
	font-weight: var(--fw-semibold);
	letter-spacing: 0.08em;
	text-transform: none;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
	transition: background-color var(--t-fast) var(--e-out), transform var(--t-fast) var(--e-out);
}

.btn--pill-white:hover {
	background: #f0f0f0;
	color: #000000;
	transform: translateY(-2px);
}

@media (max-width: 767px) {
	.edit-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.edit-tile {
		aspect-ratio: 4 / 5;
	}
}

.promo-banner {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--r-sm);
	background: var(--c-sand);
	min-height: 260px;
}

.promo-banner img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--t-slow) var(--e-out);
}

.promo-banner:hover img {
	transform: scale(1.04);
}

.promo-banner__body {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	padding: var(--sp-6);
	color: #f5f2ec;
	max-width: 60%;
}

.promo-banner--light .promo-banner__body {
	color: var(--c-ink);
}

.promo-banner__title {
	margin: 0;
	font-family: var(--f-display);
	font-size: var(--fs-2xl);
	color: inherit;
}

.promo-banner__text {
	margin: 0;
	font-size: var(--fs-sm);
	opacity: 0.85;
}

.promo-banner::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(20, 17, 15, 0.55), rgba(20, 17, 15, 0.1) 62%, rgba(20, 17, 15, 0));
	z-index: 1;
}

.promo-banner--light::after {
	display: none;
}

/* Deals strip */
.deal-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--sp-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.deal-head {
	display: flex;
	align-items: center;
	gap: var(--sp-4);
}

.deal-timer {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	padding: 6px 10px;
	background: var(--c-accent-soft);
	border-radius: var(--r-sm);
	color: var(--c-accent);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.04em;
}

/* --------------------------------------------------------------------------
   Benefits
   -------------------------------------------------------------------------- */

.benefits {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--sp-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.benefit {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-3);
	padding: var(--sp-5);
	background: var(--c-paper);
	border: 1px solid var(--c-line);
	border-radius: var(--r-sm);
}

.benefit__icon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	background: var(--c-sand);
	border-radius: var(--r-pill);
	color: var(--c-ink);
}

.benefit__icon svg {
	width: 19px;
	height: 19px;
}

.benefit__title {
	margin: 0 0 2px;
	font-family: var(--f-body);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
}

.benefit__text {
	margin: 0;
	color: var(--c-muted);
	font-size: var(--fs-xs);
	line-height: var(--lh-normal);
}

/* --------------------------------------------------------------------------
   Newsletter
   -------------------------------------------------------------------------- */

.newsletter {
	position: relative;
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	align-items: center;
	gap: var(--sp-8);
	padding: clamp(var(--sp-6), 5vw, var(--sp-9)) clamp(var(--sp-6), 5vw, var(--sp-9));
	background: var(--c-sand);
	border-radius: var(--r-sm);
	overflow: hidden;
}

.newsletter__title {
	margin: 0 0 var(--sp-2);
	font-size: var(--fs-3xl);
}

.newsletter__text {
	margin: 0;
	max-width: 46ch;
	color: var(--c-muted);
	font-size: var(--fs-base);
}

.newsletter__form {
	display: flex;
	gap: var(--sp-2);
	flex-wrap: wrap;
}

.newsletter__form input[type="email"] {
	flex: 1 1 220px;
	background: var(--c-paper);
}

.newsletter__note {
	width: 100%;
	color: var(--c-muted-2);
	font-size: var(--fs-2xs);
}

/* --------------------------------------------------------------------------
   Breadcrumbs
   -------------------------------------------------------------------------- */

.breadcrumbs {
	display: none !important;
}

.breadcrumbs li {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
}

.breadcrumbs li+li::before {
	content: "/";
	color: var(--c-line-strong);
}

.breadcrumbs a {
	color: var(--c-muted);
}

.breadcrumbs a:hover {
	color: var(--c-ink);
}

.breadcrumbs [aria-current="page"] {
	color: var(--c-ink);
	font-weight: var(--fw-medium);
}

/* --------------------------------------------------------------------------
   Mini cart drawer
   -------------------------------------------------------------------------- */

.mini-cart__items {
	display: grid;
	gap: var(--sp-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mini-cart__item {
	display: grid;
	grid-template-columns: 76px 1fr auto;
	gap: var(--sp-3);
	padding-bottom: var(--sp-4);
	border-bottom: 1px solid var(--c-line);
}

.mini-cart__thumb {
	position: relative;
	overflow: hidden;
	background: var(--c-sand);
	border-radius: var(--r-xs);
	aspect-ratio: 3 / 4;
}

.mini-cart__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mini-cart__info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.mini-cart__name {
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	line-height: var(--lh-snug);
}

.mini-cart__meta {
	color: var(--c-muted);
	font-size: var(--fs-2xs);
}

.mini-cart__price {
	font-size: var(--fs-sm);
	font-variant-numeric: tabular-nums;
}

.mini-cart__remove {
	align-self: start;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	min-height: 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: var(--r-pill);
	color: var(--c-muted);
}

.mini-cart__remove:hover {
	background: var(--c-sand);
	color: var(--c-accent);
}

.mini-cart__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-3);
	padding: var(--sp-9) var(--sp-4);
	text-align: center;
	color: var(--c-muted);
}

.mini-cart__summary {
	display: grid;
	gap: var(--sp-3);
	margin-bottom: var(--sp-4);
}

.mini-cart__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sp-4);
	font-size: var(--fs-sm);
}

.mini-cart__row strong {
	font-size: var(--fs-md);
	font-variant-numeric: tabular-nums;
}

.mini-cart__actions {
	display: grid;
	gap: var(--sp-2);
}

/* Free shipping progress */
.ship-progress {
	display: grid;
	gap: var(--sp-2);
	margin-bottom: var(--sp-4);
	padding: var(--sp-3) var(--sp-4);
	background: var(--c-sand);
	border-radius: var(--r-sm);
}

.ship-progress__text {
	font-size: var(--fs-xs);
	color: var(--c-ink-3);
}

.ship-progress__bar {
	height: 4px;
	background: var(--c-sand-2);
	border-radius: var(--r-pill);
	overflow: hidden;
}

.ship-progress__fill {
	display: block;
	height: 100%;
	background: var(--c-accent);
	border-radius: var(--r-pill);
	transition: width var(--t-slow) var(--e-out);
}

/* --------------------------------------------------------------------------
   Search suggestions
   -------------------------------------------------------------------------- */

.search-panel {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% + 8px);
	z-index: var(--z-drawer);
	max-height: 68vh;
	overflow-y: auto;
	background: var(--c-paper);
	border: 1px solid var(--c-line);
	border-radius: var(--r-sm);
	box-shadow: var(--sh-md);
}

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

.search-panel__group {
	padding: var(--sp-3) var(--sp-4) 0;
}

.search-panel__label {
	margin-bottom: var(--sp-2);
	color: var(--c-muted);
	font-size: var(--fs-2xs);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-wider);
	text-transform: uppercase;
}

.search-panel__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.search-result {
	display: grid;
	grid-template-columns: 52px 1fr auto;
	gap: var(--sp-3);
	align-items: center;
	padding: var(--sp-2) 0;
	border-radius: var(--r-xs);
}

.search-result:hover,
.search-result:focus-within {
	background: var(--c-sand);
}

.search-result .search-result__thumb,
.search-result__thumb {
	width: 52px;
	height: 64px;
	object-fit: cover;
	background: var(--c-sand);
	border-radius: var(--r-xs);
}

.search-result__name {
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	line-height: var(--lh-snug);
}

.search-result__meta {
	color: var(--c-muted);
	font-size: var(--fs-2xs);
}

.search-result__price {
	font-size: var(--fs-sm);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.search-panel__footer {
	position: sticky;
	bottom: 0;
	padding: var(--sp-3) var(--sp-4);
	background: var(--c-sand);
	border-top: 1px solid var(--c-line);
	text-align: center;
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
}

.search-panel__empty {
	padding: var(--sp-6) var(--sp-4);
	text-align: center;
	color: var(--c-muted);
	font-size: var(--fs-sm);
}

/* --------------------------------------------------------------------------
   Quick view modal
   -------------------------------------------------------------------------- */

.modal {
	position: fixed;
	inset: 0;
	z-index: var(--z-modal);
	display: grid;
	place-items: center;
	padding: var(--sp-4);
	visibility: hidden;
	opacity: 0;
	transition: opacity var(--t-base) var(--e-out), visibility var(--t-base) step-end;
}

.modal.is-open {
	visibility: visible;
	opacity: 1;
	transition: opacity var(--t-base) var(--e-out), visibility 0s;
}

.modal__scrim {
	position: absolute;
	inset: 0;
	background: var(--c-overlay-strong);
	border: 0;
	padding: 0;
	min-height: 0;
	cursor: pointer;
}

.modal__card {
	position: relative;
	width: min(920px, 100%);
	max-height: min(86vh, 720px);
	overflow-y: auto;
	background: var(--c-paper);
	border-radius: var(--r-md);
	box-shadow: var(--sh-lg);
	transform: translateY(10px) scale(0.99);
	transition: transform var(--t-base) var(--e-out);
}

.modal.is-open .modal__card {
	transform: translateY(0) scale(1);
}

.modal__close {
	position: absolute;
	top: var(--sp-3);
	right: var(--sp-3);
	z-index: 3;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	min-height: 0;
	padding: 0;
	background: var(--c-paper);
	border: 1px solid var(--c-line);
	border-radius: var(--r-pill);
	color: var(--c-ink);
}

/* --------------------------------------------------------------------------
   Toast
   -------------------------------------------------------------------------- */

.toast-stack {
	position: fixed;
	right: var(--sp-5);
	bottom: var(--sp-5);
	z-index: var(--z-toast);
	display: grid;
	gap: var(--sp-2);
	pointer-events: none;
}

.toast {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	min-width: 240px;
	padding: var(--sp-3) var(--sp-4);
	background: var(--c-ink);
	border-radius: var(--r-sm);
	color: var(--c-paper);
	font-size: var(--fs-sm);
	box-shadow: var(--sh-md);
	pointer-events: auto;
	animation: toast-in var(--t-base) var(--e-out);
}

.toast--error {
	background: var(--c-danger);
}

.toast.is-leaving {
	opacity: 0;
	transform: translateY(6px);
	transition: opacity var(--t-base) var(--e-out), transform var(--t-base) var(--e-out);
}

.toast svg {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
}

@keyframes toast-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* --------------------------------------------------------------------------
   Loading states
   -------------------------------------------------------------------------- */

.skeleton {
	position: relative;
	overflow: hidden;
	background: var(--c-sand);
}

.skeleton::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
	transform: translateX(-100%);
	animation: shimmer 1.4s infinite;
}

@keyframes shimmer {
	to {
		transform: translateX(100%);
	}
}

.is-busy {
	pointer-events: none;
	opacity: 0.6;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1279px) {

	.category-grid,
	.category-grid--8 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.brand-strip {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.rail__track {
		grid-auto-columns: calc((100% - var(--sp-5) * 2) / 3);
	}
}

.section--collections,
.section--latest {
	content-visibility: auto;
	contain-intrinsic-size: 1px 480px;
}

@media (hover: none),
(max-width: 767px) {
	.product-card__img--secondary {
		display: none !important;
	}

	.product-card:hover .product-card__media img,
	.category-tile:hover img,
	.edit-tile:hover img {
		transform: none;
	}
}

@media (max-width: 1023px) {
	.hero {
		height: clamp(460px, 62svh, 600px);
		min-height: 0;
		max-height: none;
	}

	.hero--height-compact {
		height: clamp(340px, 48svh, 460px);
		min-height: 0;
		max-height: none;
	}

	.hero--height-tall {
		height: clamp(520px, 72svh, 680px);
		min-height: 0;
		max-height: none;
	}

	.hero--height-fullscreen {
		height: calc(100svh - var(--h-announce) - var(--h-header-mobile));
		min-height: 500px;
		max-height: none;
	}

	.hero__body {
		max-width: none;
		padding: var(--sp-7) var(--gutter);
	}

	.product-grid,
	.deal-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.benefits {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.promo-split {
		grid-template-columns: 1fr;
	}

	.promo-split--reverse .promo-split__media {
		order: 0;
	}

	.newsletter {
		grid-template-columns: 1fr;
		gap: var(--sp-5);
	}

	.rail__track {
		grid-auto-columns: calc((100% - var(--sp-4) * 2) / 2.5);
	}
}

@media (max-width: 767px) {
	.hero {
		height: clamp(380px, 56svh, 490px);
		min-height: 360px;
		max-height: none;
	}

	.hero--height-compact {
		height: clamp(300px, 44svh, 390px);
		min-height: 290px;
		max-height: none;
	}

	.hero--height-tall {
		height: clamp(440px, 68svh, 580px);
		min-height: 420px;
		max-height: none;
	}

	.hero--height-fullscreen {
		height: calc(100svh - var(--h-announce) - var(--h-header-mobile));
		min-height: 460px;
		max-height: none;
	}

	.hero__image {
		object-position: center 20%;
	}

	.hero__overlay {
		background: var(--hero-overlay-bg, linear-gradient(180deg, rgba(12, 11, 10, 0.18) 0%, rgba(12, 11, 10, 0.48) 54%, rgba(12, 11, 10, 0.74) 100%));
	}

	[data-theme="light"] .hero__overlay {
		background: var(--hero-overlay-bg, linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.46) 54%, rgba(255, 255, 255, 0.72) 100%));
	}

	.hero__body {
		padding: var(--sp-6) var(--gutter) 64px;
	}

	.hero__slide--align-left .hero__body,
	.hero__slide--align-right .hero__body {
		padding-inline: var(--gutter);
	}

	.hero__title {
		font-size: var(--hero-title-size-mob, clamp(2rem, 8.2vw, 3.25rem));
	}

	.hero__sub {
		font-size: 0.8125rem;
		max-width: 34ch;
	}

	.hero__actions {
		margin-top: var(--sp-4);
		gap: 10px;
		width: 100%;
	}

	.hero__cta {
		min-height: 44px;
		padding: 0 20px;
		font-size: 0.6875rem;
	}

	.hero__nav {
		top: auto;
		bottom: 12px;
		transform: none;
		width: 36px;
		height: 36px;
		min-width: 0;
		min-height: 0;
		aspect-ratio: 1 / 1;
		padding: 0;
		border-radius: 50%;
		opacity: 0.92;
	}

	.hero__nav svg {
		width: 16px;
		height: 16px;
	}

	.hero__nav:hover {
		transform: scale(1.06);
	}

	.hero__nav:active {
		transform: scale(0.95);
	}

	.hero__nav--prev {
		left: var(--gutter);
	}

	.hero__nav--next {
		right: var(--gutter);
	}

	.hero__dots {
		bottom: 29px;
	}

	.hero__text {
		display: none;
	}

	.hero__actions .btn {
		min-width: 140px;
	}
}

@media (max-width: 720px) {

	.product-grid,
	.deal-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--sp-4) var(--sp-3);
	}

	.category-grid,
	.category-grid--6,
	.category-grid--8 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 4px;
	}

	.brand-strip {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.product-card__actions {
		display: none;
	}

	.product-card__wish {
		bottom: 8px;
		right: 8px;
		width: 36px;
		height: 36px;
		opacity: 0.95;
		transform: none;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
	}

	.benefits {
		grid-template-columns: 1fr;
	}

	.rail__track {
		grid-auto-columns: calc((100% - 12px) / 2.15);
		gap: 12px;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: contain;
		scroll-padding-inline: 2px;
	}

	.rail__nav {
		display: none;
	}

	.promo-banner__body {
		max-width: 80%;
	}

	.toast-stack {
		left: var(--sp-4);
		right: var(--sp-4);
		bottom: max(var(--sp-4), env(safe-area-inset-bottom));
	}
}

@media (max-width: 400px) {
	.product-grid {
		gap: var(--sp-4) var(--sp-2);
	}

	.product-card__title {
		font-size: 0.6875rem;
	}
}

/* --------------------------------------------------------------------------
   Quick view
   -------------------------------------------------------------------------- */

.quick-view__close {
	position: absolute;
	top: var(--sp-3);
	right: var(--sp-3);
	z-index: 3;
	background: var(--c-paper);
	box-shadow: var(--sh-sm);
}

.quick-view__body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: var(--sp-6);
}

.quick-view__status {
	margin: 0;
	padding: var(--sp-10) var(--sp-4);
	color: var(--c-muted);
	font-size: var(--fs-sm);
	letter-spacing: var(--ls-wide);
	text-align: center;
	text-transform: uppercase;
}

.quick-view__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
	gap: var(--sp-6);
	align-items: start;
}

.quick-view__stage {
	margin: 0;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--c-sand);
}

.quick-view__stage img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.quick-view__thumbs {
	display: flex;
	gap: var(--sp-2);
	margin-top: var(--sp-3);
}

.quick-view__thumb {
	width: 62px;
	height: 76px;
	padding: 0;
	overflow: hidden;
	background: var(--c-sand);
	border: 1px solid transparent;
	border-radius: 0;
	cursor: pointer;
}

.quick-view__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.quick-view__thumb.is-active {
	border-color: var(--c-ink);
}

.quick-view__eyebrow {
	margin: 0 0 var(--sp-2);
	color: var(--c-muted);
	font-size: var(--fs-2xs);
	font-weight: var(--fw-medium);
	letter-spacing: var(--ls-wider);
	text-transform: uppercase;
}

.quick-view__title {
	margin: 0 0 var(--sp-3);
	font-family: var(--f-display);
	font-size: var(--fs-2xl);
	font-weight: var(--fw-regular);
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-tight);
}

.quick-view__price {
	margin-bottom: var(--sp-4);
	font-size: var(--fs-lg);
	color: var(--c-ink);
}

.quick-view__desc {
	margin-bottom: var(--sp-5);
	color: var(--c-ink-3);
	font-size: var(--fs-sm);
	line-height: var(--lh-normal);
}

.quick-view__desc p {
	margin: 0 0 var(--sp-3);
}

.quick-view__field {
	margin: 0 0 var(--sp-4);
	padding: 0;
	border: 0;
}

.quick-view__field legend {
	padding: 0;
	margin-bottom: var(--sp-2);
	color: var(--c-ink);
	font-size: var(--fs-2xs);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-wider);
	text-transform: uppercase;
}

.quick-view__swatches {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
}

.quick-view__swatch {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--c-line-strong);
	border-radius: var(--r-pill);
	cursor: pointer;
	transition: border-color var(--t-fast) var(--e-out);
}

.quick-view__swatch span {
	display: block;
	width: 28px;
	height: 28px;
	border-radius: var(--r-pill);
	box-shadow: inset 0 0 0 1px rgba(20, 17, 15, 0.08);
}

.quick-view__swatch:hover,
.quick-view__swatch.is-active {
	border-color: var(--c-ink);
}

.quick-view__sizes {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
}

.quick-view__sizes .chip {
	min-width: 46px;
	height: 40px;
	padding: 0 var(--sp-3);
	background: transparent;
	border: 1px solid var(--c-line-strong);
	border-radius: 0;
	color: var(--c-ink);
	font-family: var(--f-body);
	font-size: var(--fs-xs);
	letter-spacing: var(--ls-wide);
	cursor: pointer;
	transition: border-color var(--t-fast) var(--e-out), background var(--t-fast) var(--e-out), color var(--t-fast) var(--e-out);
}

.quick-view__sizes .chip:hover {
	border-color: var(--c-ink);
}

.quick-view__sizes .chip.is-active {
	background: var(--c-ink);
	border-color: var(--c-ink);
	color: var(--c-paper);
}

.quick-view__buy {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--sp-3);
	align-items: center;
	margin-top: var(--sp-5);
}

.quick-view .qty {
	display: inline-flex;
	align-items: center;
	height: 48px;
	border: 1px solid var(--c-line-strong);
}

.quick-view .qty__btn {
	width: 40px;
	height: 100%;
	padding: 0;
	background: transparent;
	color: var(--c-ink);
	border: 0;
	font-size: var(--fs-md);
	line-height: 1;
	cursor: pointer;
}

.quick-view .qty__btn:hover {
	background: var(--c-sand);
}

.quick-view .qty__input {
	width: 42px;
	height: 100%;
	padding: 0;
	background: transparent;
	border: 0;
	text-align: center;
	font-size: var(--fs-sm);
	-moz-appearance: textfield;
}

.quick-view .qty__input::-webkit-outer-spin-button,
.quick-view .qty__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.quick-view__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
	margin-top: var(--sp-5);
	padding-top: var(--sp-4);
	border-top: 1px solid var(--c-line);
	color: var(--c-muted);
	font-size: var(--fs-2xs);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
}

.quick-view__meta .link-underline {
	color: var(--c-ink);
	text-transform: none;
	letter-spacing: 0;
	font-size: var(--fs-xs);
}

@media (max-width: 1023px) {
	.quick-view__body {
		padding: var(--sp-5);
	}

	.quick-view__grid {
		grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
		gap: var(--sp-5);
	}
}

@media (max-width: 767px) {
	.drawer--modal {
		padding: 0;
		align-items: flex-end;
	}

	.drawer--modal .drawer__panel {
		width: 100%;
		max-height: 90dvh;
		border-radius: var(--r-lg) var(--r-lg) 0 0;
		transform: translateY(24px);
	}

	.quick-view__body {
		padding-bottom: max(var(--sp-6), env(safe-area-inset-bottom));
	}

	.quick-view__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.quick-view__stage {
		aspect-ratio: 1 / 1;
	}
}

/* ==========================================================================
   Modern Standard 404 Page
   ========================================================================== */
.ez-404 {
	background: var(--c-paper);
}

.ez-404__hero {
	position: relative;
	padding-block: clamp(4.5rem, 8vw, 7.5rem) clamp(3.5rem, 6vw, 5.25rem);
	border-bottom: 1px solid var(--c-line);
	background: radial-gradient(circle at 50% 20%, rgba(195, 160, 106, 0.09) 0%, transparent 62%);
}

.ez-404__hero-inner {
	display: grid;
	place-items: center;
	text-align: center;
}

.ez-404__content {
	max-width: 580px;
	width: 100%;
	margin-inline: auto;
}

.ez-404__eyebrow {
	margin-bottom: var(--sp-2);
}

/* ---- Runway 404 number ---- */
.ez-404__code {
	font-family: var(--f-display);
	font-size: clamp(4.75rem, 11vw, 8.25rem);
	font-weight: 400;
	font-variant-numeric: tabular-nums;
	line-height: 0.92;
	letter-spacing: 0.04em;
	color: var(--c-accent);
	margin-bottom: var(--sp-3);
}

/* ---- Headline ---- */
.ez-404__title {
	margin: 0 0 var(--sp-6);
	font-family: var(--f-display);
	font-size: clamp(1.75rem, 3vw, 2.6rem);
	font-weight: 400;
	line-height: 1.15;
	color: var(--c-ink);
}

/* ---- Pill search bar with live suggestion anchor ---- */
.ez-404__search {
	position: relative;
	z-index: 5;
	display: flex;
	align-items: center;
	gap: 6px;
	max-width: 500px;
	margin: 0 auto var(--sp-5);
	padding-block: 4px;
	padding-inline: 20px 4px;
	background: var(--c-sand);
	border: 1px solid var(--c-line-strong);
	border-radius: var(--r-pill);
	transition: border-color var(--t-fast) var(--e-out);
}

.ez-404__search:focus-within {
	border-color: var(--c-accent);
}

.ez-404__search .search-panel {
	text-align: left;
	border-radius: var(--r-md);
}

.ez-404__search .ez-404__search-input,
input[type="search"].ez-404__search-input {
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
	height: 42px;
	min-height: 42px;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	outline: none;
	color: var(--c-ink);
	font-size: var(--fs-sm);
}

.ez-404__search .ez-404__search-input:focus,
.ez-404__search .ez-404__search-input:focus-visible {
	border: 0;
	box-shadow: none;
	outline: none;
}

/* ---- Search submit button ---- */
.ez-404__search .ez-404__search-btn {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 42px;
	min-height: 42px;
	width: auto;
	min-width: 0;
	padding: 0 18px;
	border: 0;
	border-radius: var(--r-pill);
	background: var(--c-accent);
	color: var(--c-on-accent);
	font-family: var(--f-body);
	font-size: 11px;
	font-weight: var(--fw-semibold);
	letter-spacing: 0.09em;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--t-fast) var(--e-out);
}

.ez-404__search-btn span {
	display: inline;
	line-height: 1;
}

.ez-404__search-btn svg {
	display: block;
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}

.ez-404__search .ez-404__search-btn:hover {
	background: var(--c-accent-hover);
	color: var(--c-on-accent);
}

.ez-404__search .ez-404__search-btn:focus-visible {
	outline: 2px solid var(--c-accent);
	outline-offset: 2px;
}

/* ---- CTA action buttons ---- */
.ez-404__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--sp-3);
	margin-bottom: 0;
}

/* ---- Trending products showcase ---- */
.ez-404__showcase {
	padding-block: clamp(3rem, 5vw, 4.5rem);
}

.ez-404__showcase-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--sp-4);
	margin-bottom: var(--sp-6);
}

.ez-404__showcase-title {
	margin: var(--sp-2) 0 0;
	font-family: var(--f-display);
	font-size: var(--fs-2xl);
	font-weight: 400;
}

.ez-404__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--sp-6) var(--sp-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 1023px) {
	.ez-404__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 720px) {

	.ez-404__search .ez-404__search-input,
	input[type="search"].ez-404__search-input {
		font-size: 1rem;
		/* prevents iOS zoom on focus */
	}
}

@media (max-width: 575px) {
	.ez-404__actions .btn {
		width: 100%;
	}

	.ez-404__search-btn span {
		display: none;
		/* icon-only on tiny screens */
	}

	.ez-404__search .ez-404__search-btn {
		padding: 0 14px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.ez-404__search,
	.ez-404__search .ez-404__search-btn {
		transition: none;
	}
}