/**
 * RF homepage. Image-led, edge-to-edge, minimal copy; rhythm comes from generous
 * vertical space between sections rather than dividers or boxes.
 */

/* Image sections meet with a hairline gutter (one continuous editorial strip);
   merchandising and text moments get measured vertical space around them. */
.rf-home > * + * {
	margin-top: var(--space-grid-x);
}

.rf-home > :is(.rf-home-rail, .rf-text-moment, .rf-moment),
.rf-home > :is(.rf-home-rail, .rf-text-moment, .rf-moment) + * {
	margin-top: var(--space-section);
}

/* -------------------------------------------------------- Hero / campaign */
.rf-hero {
	position: relative;
	display: grid;
	overflow: hidden;
	color: var(--color-on-image);
	background: var(--color-surface);
}

.rf-hero--tone-dark {
	color: var(--color-text);
}

/* Opening hero fills the viewport under the transparent header. */
.rf-hero--main {
	height: calc(100vh - var(--admin-bar));
	height: calc(100svh - var(--admin-bar));
	min-height: 32rem;
}

.rf-announcement:not([hidden]) ~ .rf-main .rf-hero--main {
	height: calc(100vh - var(--admin-bar) - var(--announcement-height));
	height: calc(100svh - var(--admin-bar) - var(--announcement-height));
}

/* Campaign: full-bleed, near full height on desktop, portrait on mobile. */
.rf-hero--campaign {
	aspect-ratio: var(--ratio-hero-mobile);
	max-height: 100svh;
}

@media (min-width: 768px) {
	.rf-hero--campaign {
		aspect-ratio: auto;
		height: min(100svh, 62.5vw);
	}
}

.rf-hero__media,
.rf-hero__media picture,
.rf-hero__img,
.rf-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.rf-hero__img,
.rf-hero__video {
	object-fit: cover;
}

.rf-hero__video {
	display: none;
}

@media (min-width: 768px) {
	.rf-hero__video.is-playing {
		display: block;
	}
}

/* Optional readability shade (off by default): flat and light, never a gradient. */
.rf-hero.has-scrim .rf-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgb(0 0 0 / 0.12);
	pointer-events: none;
}

.rf-hero--tone-dark.has-scrim .rf-hero__media::after {
	background: rgb(255 255 255 / 0.12);
}

.rf-hero__content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	align-self: end;
	gap: var(--space-2xs);
	max-width: 40rem;
	padding: var(--space-l) var(--gutter) var(--space-xl);
	pointer-events: none;
}

.rf-hero__content a {
	pointer-events: auto;
}

.rf-hero--bottom-center .rf-hero__content,
.rf-hero--center .rf-hero__content {
	align-items: center;
	justify-self: center;
	text-align: center;
}

.rf-hero--center .rf-hero__content {
	align-self: center;
}

.rf-hero__eyebrow {
	font-size: var(--type-caption-size);
	letter-spacing: var(--type-caption-tracking);
}

.rf-hero__title {
	font-family: var(--type-display-font);
	font-size: var(--type-display-size);
	font-weight: var(--type-display-weight);
	line-height: var(--type-display-leading);
	letter-spacing: var(--type-display-tracking);
	text-transform: var(--type-display-case);
}

.rf-hero__cta {
	margin-top: var(--space-3xs);
}

/* Whole image is clickable (duplicate of the CTA, hidden from assistive tech). */
.rf-hero__hit {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.rf-hero__pause {
	position: absolute;
	right: var(--gutter);
	bottom: var(--space-m);
	z-index: 2;
	min-height: 2.75rem;
	font-size: var(--type-caption-size);
	letter-spacing: var(--type-caption-tracking);
	color: inherit;
	display: none;
}

@media (min-width: 768px) {
	.rf-hero__pause {
		display: inline-flex;
		align-items: center;
	}
}

/* Entrance: the image settles from a slight zoom, the copy rises in after it. */
@media (prefers-reduced-motion: no-preference) {
	.rf-hero--main .rf-hero__img {
		animation: rf-hero-settle 1.8s var(--ease-standard) both;
	}

	.rf-hero--main .rf-hero__content {
		animation: rf-hero-rise 900ms var(--ease-standard) 350ms both;
	}
}

@keyframes rf-hero-settle {
	from { scale: 1.045; }
	to { scale: 1; }
}

@keyframes rf-hero-rise {
	from { opacity: 0; translate: 0 0.75rem; }
	to { opacity: 1; translate: 0 0; }
}

/* Header over a light hero image: switch the transparent header to black text. */
body.rf-hero-tone-dark .rf-header--transparent {
	--color-on-image: var(--color-text);
}

/* ------------------------------------------------------------ Editorial pair */
.rf-editorial {
	display: grid;
	gap: var(--space-l);
}

@media (min-width: 768px) {
	.rf-editorial {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-grid-x);
	}
}

.rf-editorial__item {
	margin: 0;
}

.rf-editorial__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.rf-editorial__media {
	position: relative;
	display: block;
	aspect-ratio: var(--ratio-editorial);
	overflow: hidden;
	background: var(--color-surface);
}

.rf-editorial__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: scale var(--duration-slow) var(--ease-standard);
}

@media (hover: hover) {
	.rf-editorial__link:hover .rf-editorial__img {
		scale: 1.015;
	}
}

.rf-editorial__caption {
	padding: var(--space-xs) var(--gutter) 0;
	font-size: var(--type-nav-size);
	letter-spacing: var(--type-nav-tracking);
}

.rf-editorial__link:hover .rf-editorial__caption {
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

/* --------------------------------------------------------- Shopping moment */
.rf-moment__feature {
	display: grid;
	gap: var(--space-m);
	margin-bottom: var(--space-l);
}

.rf-moment__media {
	position: relative;
	display: block;
	aspect-ratio: var(--ratio-editorial);
	overflow: hidden;
	background: var(--color-surface);
}

.rf-moment__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rf-moment__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-xs);
	padding-inline: var(--gutter);
	max-width: calc(28rem + 2 * var(--gutter));
}

.rf-moment__title {
	font-size: var(--type-heading-size);
	font-weight: var(--weight-light);
}

.rf-moment__desc {
	color: var(--color-text-muted);
	font-size: var(--type-body-size);
	line-height: var(--type-body-leading);
}

@media (min-width: 900px) {
	.rf-moment__feature {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		align-items: end;
		gap: 0;
		margin-bottom: var(--space-2xl);
	}

	.rf-moment__text {
		padding: 0 var(--gutter) var(--space-s) var(--space-2xl);
	}

	.rf-moment--image-right .rf-moment__media {
		order: 2;
	}

	.rf-moment--image-right .rf-moment__text {
		padding: 0 var(--space-2xl) var(--space-s) var(--gutter);
		justify-self: end;
		text-align: right;
		align-items: flex-end;
	}

	.rf-moment__media {
		aspect-ratio: 4 / 5;
		max-height: calc(100svh - var(--header-height));
		width: 100%;
	}
}

/* ----------------------------------------------------------- Scroll reveal */
/* Only once JS has confirmed it runs (html.rf-js), so content never stays hidden. */
@media (prefers-reduced-motion: no-preference) {
	.rf-js .rf-reveal {
		opacity: 0;
		translate: 0 1.25rem;
		transition:
			opacity var(--duration-slow) var(--ease-standard),
			translate 700ms var(--ease-standard);
	}

	.rf-js .rf-reveal.is-visible {
		opacity: 1;
		translate: 0 0;
	}
}

/* --------------------------------------------------------- Collection pair */
.rf-pair {
	display: grid;
	gap: 10px;
	padding: 80px;
}

@media (max-width: 767px) {
	.rf-pair {
		gap: 6px !important;
		padding: 30px 20px !important;
	}
}
@media (min-width: 768px) {
	.rf-pair {
		grid-template-columns: 1fr 1fr;
	}
}

.rf-pair__item {
	position: relative;
	display: block;
	color: var(--color-on-image);
	text-decoration: none;
}

.rf-pair--tone-dark .rf-pair__item {
	color: var(--color-text);
}

.rf-pair__item:hover {
	text-decoration: none;
}

.rf-pair__media {
	position: relative;
	display: block;
	aspect-ratio: var(--ratio-editorial);
	overflow: hidden;
	background: var(--color-placeholder);
}

.rf-pair__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: scale var(--duration-slow) var(--ease-standard);
}

.rf-pair__label {
	position: absolute;
	left: var(--gutter);
	bottom: var(--space-m);
	font-family: var(--font-heading);
	font-size: var(--type-heading-size);
	font-weight: var(--weight-light);
	letter-spacing: var(--type-heading-tracking);
	text-transform: var(--type-heading-case);
	text-decoration-line: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.3em;
	transition: text-decoration-color var(--duration-standard) var(--ease-standard);
}

@media (hover: hover) {
	.rf-pair__item:hover .rf-pair__img {
		scale: 1.015;
	}

	.rf-pair__item:hover .rf-pair__label {
		text-decoration-color: currentColor;
	}
}

/* ------------------------------------------------------------ Text moment */
.rf-text-moment {
	display: grid;
	justify-items: center;
	gap: var(--space-2xs);
	padding-inline: var(--gutter);
	text-align: center;
}

.rf-text-moment__eyebrow,
.rf-text-moment__text {
	color: var(--color-text-secondary);
}

.rf-text-moment__eyebrow {
	font-size: var(--type-caption-size);
	letter-spacing: var(--type-caption-tracking);
}

.rf-text-moment__title {
	font-size: var(--type-heading-size);
	font-weight: var(--weight-light);
}

.rf-text-moment__text {
	max-width: 32rem;
}

/* ------------------------------------------------------ Campaign video */
/* A selected campaign video replaces the image on every screen size. It fills
   the existing media area (same height/ratio as the image) and is visible from
   the start, so its poster shows until playback begins. */
.rf-hero__video--all {
	display: block;
	background: var(--color-placeholder);
}

.rf-hero__pause--all {
	display: inline-flex;
	align-items: center;
}

/* Collection pair on phones: both images stay side by side and the "Mobile
   editorial links" sit below them as plain text links (no labels over the
   images). "Show on: Mobile only" hides the section from 768px up. */
.rf-pair__mlink {
	display: none;
}

@media (max-width: 767px) {
	.rf-pair.has-mobile-links {
		grid-template-columns: 1fr 1fr;
		row-gap: 0;
	}

	.rf-pair.has-mobile-links .rf-pair__label {
		display: none;
	}

	.rf-pair__mlink {
		display: block;
		justify-self: center;
		margin-top: var(--space-xs);
		padding-block: var(--space-3xs);
		color: var(--color-text);
		font-size: 0.8125rem;
		letter-spacing: 0.02em;
		text-align: center;
		text-decoration-line: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: 0.35em;
	}
}

@media (min-width: 768px) {
	.rf-pair--mobile-only {
		display: none;
	}
}

/* Collection pair heading (season line, heading, link) centred above the
   images, spanning both columns. */
.rf-pair__head {
	grid-column: 1 / -1;
	display: grid;
	justify-items: center;
	gap: var(--space-3xs);
	padding: var(--space-l) var(--gutter) var(--space-m);
	color: var(--color-text);
	text-align: center;
}

/* Phones: the season line sits a little closer to the banner above. */
@media (max-width: 767px) {
	.rf-pair__head {
		padding-top: 0px;
	}
}

.rf-pair__eyebrow {
	font-size: 0.8125rem;
	letter-spacing: 0.02em;
}

.rf-pair__heading {
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: var(--weight-regular);
	letter-spacing: 0.01em;
	line-height: 1.3;
	text-transform: none;
}

.rf-pair__cta {
	margin-top: var(--space-xs);
	padding-block: var(--space-3xs);
	color: var(--color-text);
	font-size: 0.8125rem;
	letter-spacing: 0.02em;
	text-decoration-line: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.35em;
}

/* Phones: a controlled gap after the Collection pair instead of the full
   section spacing, and no empty heading row on a following product rail that
   has no visible heading, link or arrows. */
@media (max-width: 767px) {
	.rf-home > .rf-pair + * {
		margin-top: var(--space-l);
	}
}

/* On touch phones the rail arrows are hidden, so a rail without a visible
   heading or link has an empty heading row. */
@media (max-width: 767px) and (hover: none) {
	.rf-home > .rf-pair + .rf-home-rail .rf-rail__head:not(:has(.rf-rail__title:not(.rf-visually-hidden), .rf-rail__cta)) {
		min-height: 0;
		margin-bottom: 0;
	}
}
/* Homepage product carousel on phones: exactly two equal cards per screen,
   centred within the page margins, no peek of a third card. */
@media (max-width: 599px) {
	.rf-home-rail .rf-rail {
		--rail-cols: 2;
	}

	.rf-home-rail .rf-rail__track {
		margin-inline: var(--gutter);
		padding-inline: 0;
		scroll-padding-inline: 0;
	}
}

/* Phones: carousel images in the products' own 4:5 shape, so photos are not cropped. */
@media (max-width: 599px) {
	.rf-home-rail .rf-card__media {
		aspect-ratio: 4 / 5;
	}
}