/* ==========================================================================
   Platifine homepage — v0.7.6

   Changes from v0.6.0:
   - Self-hosted Playfair Display (variable, latin subset) with a metric-matched
     fallback face, replacing the Baskerville stack that only resolved on macOS.
   - One spacing and type scale instead of per-section ad-hoc clamp() values.
   - Header offset is a measured variable (--pf-shell-h), not a magic 142/164px.
   - Fixed: centred paragraphs in left-aligned headings, the stone-grid third
     card width, product-carousel edge bleed, image-card CTA alignment.
   - Every text colour now clears WCAG AA; no type below 11px.
   - All interactive targets are at least 44px.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Display typeface
   Playfair Display, weight axis 400–700, latin subset, 33 KB.
   Licensed under the SIL Open Font License 1.1 — see assets/fonts/OFL.txt.
   -------------------------------------------------------------------------- */
@font-face {
	font-family: "Platifine Display";
	src: url("../fonts/platifine-display.woff2") format("woff2");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
	               U+02DC, U+2000-206F, U+2074, U+20AC, U+20B9, U+2122, U+2190-2193,
	               U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Metric-matched stand-in used while the webfont loads. Without this the text
   reflows on swap, because Georgia and Noto Serif are ~4% wider than Playfair. */
@font-face {
	font-family: "Platifine Display Fallback";
	src: local("Georgia"), local("Noto Serif"), local("Droid Serif"),
	     local("Times New Roman"), local("Liberation Serif");
	size-adjust: 96.5%;
	ascent-override: 112%;
	descent-override: 26%;
	line-gap-override: 0%;
}

/* --------------------------------------------------------------------------
   2. Page shell
   -------------------------------------------------------------------------- */
body.platifine-home-page {
	overflow-x: clip;
	background: #fff;
}
body.platifine-home-page .site-content {
	padding: 0 !important;
}
/* GeneratePress's "contained" layout caps #page and .site-content, which was
   insetting every full-bleed band on wide screens. Release the whole chain. */
body.platifine-home-page #page,
body.platifine-home-page .site,
body.platifine-home-page .site-content,
body.platifine-home-page #content,
body.platifine-home-page #primary,
body.platifine-home-page .content-area,
body.platifine-home-page .site-main,
body.platifine-home-page #main,
body.platifine-home-page .site-main > article,
body.platifine-home-page .inside-article,
body.platifine-home-page .entry-content {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
}
body.platifine-home-page .entry-header {
	display: none;
}

/* Sticky-header offset. The values below match the real header at each
   breakpoint; a small inline script in wp_head refines them if the preheader
   wraps on very narrow screens. */
body.platifine-home-page {
	--pf-shell-h: 156px;
}
@media (max-width: 1100px) {
	body.platifine-home-page {
		--pf-shell-h: 99px;
	}
}
@media (max-width: 680px) {
	body.platifine-home-page {
		--pf-shell-h: 107px;
	}
}

body.platifine-home-page {
	scroll-behavior: smooth;
}
.platifine-home [id] {
	scroll-margin-top: calc(var(--pf-shell-h) + 20px);
}

/* --------------------------------------------------------------------------
   3. Design tokens
   -------------------------------------------------------------------------- */
.platifine-home {
	/* Layout */
	--pf-home-container: 1560px;
	--pf-home-gutter: clamp(20px, 4vw, 68px);

	/* Media ratios, art-directed per breakpoint the way Blue Nile does it,
	   rather than one ratio plus a max-height. Never pair aspect-ratio with
	   max-height on a block-level box: the browser shrinks the *width* to keep
	   the ratio, which is what collapsed these cards. */
	--pf-tile-ratio: 440 / 496;   /* portrait tile       */
	--pf-tile-w: 440px;
	--pf-panel-ratio: 1150 / 954; /* split-panel imagery */

	/* Type families */
	--pf-home-display: "Platifine Display", "Platifine Display Fallback", Georgia,
	                   "Times New Roman", serif;
	--pf-home-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
	                Arial, sans-serif;

	/* Type scale — fluid between a 380px and a 1440px viewport.
	   rem in every term so browser font-size settings still apply. */
	--pf-t-micro: clamp(0.688rem, 0.66rem + 0.12vw, 0.75rem);   /* 11–12px  */
	--pf-t-small: clamp(0.813rem, 0.78rem + 0.16vw, 0.875rem);  /* 13–14px  */
	--pf-t-body: clamp(0.875rem, 0.83rem + 0.22vw, 1rem);       /* 14–16px  */
	--pf-t-lead: clamp(0.938rem, 0.87rem + 0.3vw, 1.125rem);    /* 15–18px  */
	--pf-d-sm: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);        /* 20–28px  */
	--pf-d-md: clamp(1.5rem, 1.15rem + 1.5vw, 2.25rem);         /* 24–36px  */
	--pf-d-lg: clamp(1.75rem, 1.3rem + 1.9vw, 2.75rem);         /* 28–44px  */
	--pf-d-xl: clamp(2.625rem, 1.5rem + 4.7vw, 5rem);           /* 42–80px  */

	/* Spacing scale */
	--pf-space-2xs: 8px;
	--pf-space-xs: 12px;
	--pf-space-sm: 18px;
	--pf-space-md: clamp(22px, 2.4vw, 34px);
	--pf-space-lg: clamp(20px, 1.9vw, 30px);
	--pf-space-xl: clamp(46px, 5vw, 78px);
	--pf-section-y: clamp(36px, 3.2vw, 56px);
	--pf-panel-p: clamp(30px, 3.4vw, 58px);

	/* Colour — navy plus warm neutrals that sit better beside the photography
	   than the previous cool blue-greys. */
	--pf-blue-950: #070C22;
	--pf-blue-900: #0E1538;
	--pf-blue-800: #172253;
	--pf-blue-700: #223174;
	--pf-blue-500: #3B51AE;
	--pf-home-navy: #111636;       /* matches header + footer */
	--pf-home-navy-hover: #223174;
	--pf-home-ink: #171C26;
	--pf-home-copy: #545E69;       /* 7.1:1 on white  */
	--pf-home-muted: #5F6A76;      /* 5.7:1 on white  */
	--pf-home-line: #E3E7EE;
	--pf-home-line-strong: #C9D0DC;
	--pf-home-mist: #F1F4FB;       /* cool band       */
	--pf-home-porcelain: #F8F5EF;  /* warm band       */
	--pf-home-white: #fff;
	--pf-deep: linear-gradient(158deg, #0C1230 0%, #141E4C 52%, #1B2760 100%);

	position: relative;
	width: 100%;
	max-width: none;
	margin: 0;
	background: var(--pf-home-white);
	color: var(--pf-home-ink);
	font-family: var(--pf-home-sans);
	/* clip on one axis only, so the FAQ sticky column keeps working */
	overflow-x: clip;
}
.platifine-home *,
.platifine-home *::before,
.platifine-home *::after {
	box-sizing: border-box;
}
.platifine-home img,
.platifine-home picture {
	max-width: 100%;
}
.platifine-home a:focus-visible,
.platifine-home button:focus-visible,
.platifine-home summary:focus-visible,
.platifine-home [tabindex]:focus-visible {
	outline: 2px solid var(--pf-home-navy);
	outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   4. Shared blocks
   -------------------------------------------------------------------------- */
.pf-section {
	padding-block: var(--pf-section-y);
}
.pf-section--mist {
	background: var(--pf-home-mist);
}
.pf-section--warm {
	background: var(--pf-home-porcelain);
}
.pf-section__inner {
	width: min(100%, var(--pf-home-container));
	margin-inline: auto;
	padding-inline: var(--pf-home-gutter);
}

.pf-eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px;
	color: var(--pf-home-muted);
	font-size: var(--pf-t-micro);
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: .18em;
	text-transform: uppercase;
}
.pf-eyebrow::before {
	content: "";
	width: 22px;
	height: 1px;
	flex: 0 0 22px;
	background: currentColor;
	opacity: .55;
}
.pf-heading--center .pf-eyebrow {
	justify-content: center;
}
.pf-eyebrow--light {
	color: rgba(255, 255, 255, .72);
}

/* Display headings */
.pf-heading h2,
.pf-stud-finder h2,
.pf-platinum h2,
.pf-compare h2,
.pf-atelier h2,
.pf-delivery h2,
.pf-faq h2,
.pf-gemstone h2 {
	margin: 0;
	color: var(--pf-home-navy);
	font-family: var(--pf-home-display);
	font-size: var(--pf-d-lg);
	font-weight: 400;
	line-height: 1.06;
	letter-spacing: -.028em;
	text-wrap: balance;
}

.pf-heading {
	max-width: 780px;
	margin: 0 0 var(--pf-space-lg);
}
.pf-heading > p:last-child,
.pf-heading > div > p:last-child {
	margin-top: 12px;
}
.pf-heading--center {
	margin-inline: auto;
	text-align: center;
}
.pf-heading--split {
	display: flex;
	max-width: none;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--pf-space-md);
}
.pf-heading--split > div {
	max-width: 800px;
}
/* Left-aligned headings keep their paragraph flush left. The v0.6.0 rule used
   `margin: 19px auto 0`, which quietly centred it inside the 780px block. */
.pf-heading > p:last-child,
.pf-heading > div > p:last-child {
	max-width: 74ch;
	margin: 18px 0 0;
	color: var(--pf-home-copy);
	font-size: var(--pf-t-body);
	line-height: 1.75;
}
.pf-heading--center > p:last-child {
	margin-inline: auto;
}

/* Split-panel headings sit in a half-width padded column, so they take the
   next step down. Previously they used the full section size and wrapped to
   four lines. */
.pf-stud-finder h2,
.pf-platinum h2,
.pf-atelier h2,
.pf-delivery h2 {
	max-width: 20ch;
	font-size: var(--pf-d-md);
	line-height: 1.12;
	text-wrap: balance;
}

/* Buttons */
.pf-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--pf-space-xs) var(--pf-space-sm);
}
.pf-button,
.pf-button--ghost {
	display: inline-flex;
	min-height: 50px;
	align-items: center;
	justify-content: center;
	padding: 0 26px;
	border: 1px solid var(--pf-home-navy);
	background: var(--pf-home-navy);
	color: #fff !important;
	font-size: var(--pf-t-micro);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: .13em;
	text-align: center;
	text-decoration: none !important;
	text-transform: uppercase;
	transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.pf-button:hover,
.pf-button:focus-visible {
	border-color: var(--pf-home-navy-hover);
	background: var(--pf-home-navy-hover);
}
/* Outlined secondary action — reads as a peer of the primary button instead of
   the 10.5px text link the hero used to pair it with. */
.pf-button--ghost {
	background: transparent;
	color: var(--pf-home-navy) !important;
	border-color: var(--pf-home-line-strong);
}
/* Over photography a hairline outline disappears, so give it a surface. */
.pf-hero .pf-button--ghost {
	border-color: rgba(17, 22, 54, .3);
	background: rgba(255, 255, 255, .78);
	backdrop-filter: blur(3px);
}
.pf-hero .pf-button--ghost:hover,
.pf-hero .pf-button--ghost:focus-visible {
	border-color: var(--pf-home-navy);
	background: var(--pf-home-navy);
	color: #fff !important;
}
.pf-button--ghost:hover,
.pf-button--ghost:focus-visible {
	border-color: var(--pf-home-navy);
	background: var(--pf-home-navy);
	color: #fff !important;
}

.pf-text-link {
	display: inline-flex;
	min-height: 44px;
	align-items: center;
	gap: 8px;
	color: var(--pf-home-navy) !important;
	font-size: var(--pf-t-micro);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: .13em;
	text-decoration: none !important;
	text-transform: uppercase;
	transition: gap .16s ease;
}
.pf-text-link::after {
	content: "";
	width: 18px;
	height: 1px;
	flex: 0 0 18px;
	background: currentColor;
	transition: width .16s ease;
}
.pf-text-link:hover::after,
.pf-text-link:focus-visible::after {
	width: 26px;
}
.pf-text-link--light {
	color: #fff !important;
}

/* --------------------------------------------------------------------------
   5. Hero
   -------------------------------------------------------------------------- */
.pf-hero {
	position: relative;
	isolation: isolate;
	display: flex;
	min-height: clamp(560px, calc(100svh - var(--pf-shell-h)), 800px);
	align-items: center;
	background: #f2efe9;
	overflow: hidden;
}
.pf-hero__picture,
.pf-hero__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}
.pf-hero__image {
	object-fit: cover;
	object-position: center;
}
.pf-hero__wash {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		90deg,
		rgba(249, 247, 242, .985) 0%,
		rgba(249, 247, 242, .94) 30%,
		rgba(249, 247, 242, .6) 46%,
		rgba(249, 247, 242, .12) 66%,
		rgba(249, 247, 242, 0) 78%
	);
}
.pf-hero__inner {
	position: relative;
	z-index: 2;
	width: min(100%, var(--pf-home-container));
	margin-inline: auto;
	padding: var(--pf-space-xl) var(--pf-home-gutter);
}
.pf-hero__copy {
	max-width: 660px;
}
.pf-hero h1 {
	max-width: 13ch;
	margin: 0 0 20px;
	color: var(--pf-home-navy);
	font-family: var(--pf-home-display);
	font-size: var(--pf-d-xl);
	font-weight: 400;
	line-height: 1.02;
	letter-spacing: -.035em;
	text-wrap: balance;
}
.pf-hero__copy > p:not(.pf-eyebrow) {
	max-width: 52ch;
	margin: 0 0 var(--pf-space-md);
	color: #3f4954;
	font-size: var(--pf-t-lead);
	line-height: 1.68;
}

/* --------------------------------------------------------------------------
   6. Trust strip
   -------------------------------------------------------------------------- */
.pf-trust-strip {
	border-block: 1px solid var(--pf-home-line);
	background: #fff;
}
.pf-trust-strip__inner {
	width: min(100%, var(--pf-home-container));
	margin-inline: auto;
	padding-inline: var(--pf-home-gutter);
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}
.pf-trust-item {
	display: flex;
	min-height: 88px;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 16px 18px;
	border-left: 1px solid var(--pf-home-line);
	color: #3f4954;
	font-size: var(--pf-t-micro);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: .08em;
	text-align: left;
	text-transform: uppercase;
}
.pf-trust-item:first-child {
	border-left: 0;
}
.pf-trust-icon {
	display: inline-flex;
	width: 34px;
	height: 34px;
	flex: 0 0 34px;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--pf-home-line-strong);
	border-radius: 50%;
	color: var(--pf-home-navy);
}
.pf-trust-icon svg {
	width: 17px;
	height: 17px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.pf-trust-icon--pt {
	font-family: var(--pf-home-display);
	font-size: 13px;
	letter-spacing: -.03em;
}

/* --------------------------------------------------------------------------
   7. Intention cards
   Reworked: the title now sits on the image under a scrim, so the card is a
   tall photograph with a tight caption instead of a bordered box with a large
   empty white lower half.
   -------------------------------------------------------------------------- */
.pf-intention-grid {
	display: grid;
	width: min(100%, calc(var(--pf-tile-w) * 2 + 24px));
	margin-inline: auto;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}
.pf-intention-card {
	display: flex;
	min-width: 0;
	flex-direction: column;
	background: transparent;
}
.pf-intention-card__link {
	position: relative;
	display: block;
	color: inherit !important;
	text-decoration: none !important;
}
.pf-intention-card__media {
	position: relative;
	width: 100%;
	aspect-ratio: var(--pf-tile-ratio);
	background: #E9ECF2;
	overflow: hidden;
}
.pf-intention-card__media img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}
.pf-intention-card:first-child .pf-intention-card__media img {
	object-position: center 62%;
}
.pf-intention-card:last-child .pf-intention-card__media img {
	object-position: center 26%;
}
.pf-intention-card__link:hover .pf-intention-card__media img,
.pf-intention-card__link:focus-visible .pf-intention-card__media img {
	transform: scale(1.035);
}
.pf-intention-card__overlay {
	position: absolute;
	inset: auto 0 0 0;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	padding: clamp(22px, 2.4vw, 34px);
	background: linear-gradient(
		to top,
		rgba(7, 12, 34, .78) 0%,
		rgba(7, 12, 34, .48) 42%,
		rgba(7, 12, 34, 0) 100%
	);
	color: #fff;
}
.pf-intention-card__overlay h3 {
	margin: 0;
	color: #fff;
	font-family: var(--pf-home-display);
	font-size: var(--pf-d-sm);
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: -.022em;
	text-shadow: 0 1px 18px rgba(7, 12, 34, .4);
	text-wrap: balance;
}
.pf-intention-card__go {
	display: inline-flex;
	width: 44px;
	height: 44px;
	flex: 0 0 44px;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(255, 255, 255, .55);
	border-radius: 50%;
	transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.pf-intention-card__go svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.pf-intention-card__link:hover .pf-intention-card__go,
.pf-intention-card__link:focus-visible .pf-intention-card__go {
	border-color: #fff;
	background: rgba(255, 255, 255, .16);
	transform: translateX(3px);
}
.pf-intention-card__copy {
	display: flex;
	flex: 1;
	align-items: flex-start;
	flex-direction: column;
	padding: 20px 2px 0;
}
.pf-intention-card__copy p {
	max-width: 50ch;
	margin: 0 0 18px;
	color: var(--pf-home-copy);
	font-size: var(--pf-t-small);
	line-height: 1.7;
}
.pf-intention-card__copy nav {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pf-space-2xs);
	margin-top: auto;
}

/* Chips — shared by the intention cards and the stud finder. 44px tall. */
.pf-intention-card__copy nav a,
.pf-chip-group a {
	display: inline-flex;
	min-height: 44px;
	align-items: center;
	justify-content: center;
	padding: 0 16px;
	border: 1px solid var(--pf-home-line-strong);
	background: #fff;
	color: var(--pf-home-navy) !important;
	font-size: var(--pf-t-micro);
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: .03em;
	text-align: center;
	text-decoration: none !important;
	transition: border-color .16s ease, background-color .16s ease, color .16s ease;
}
.pf-intention-card__copy nav a:hover,
.pf-intention-card__copy nav a:focus-visible,
.pf-chip-group a:hover,
.pf-chip-group a:focus-visible {
	border-color: var(--pf-home-navy);
	background: var(--pf-home-navy);
	color: #fff !important;
}

/* --------------------------------------------------------------------------
   8. Stone cards — now on a deep sapphire band
   The page ran white-on-white for four straight sections; this gives the
   catalogue's central choice its own weight and lets the metal read brighter.
   -------------------------------------------------------------------------- */
.pf-section--deep {
	position: relative;
	background: var(--pf-deep);
	color: #fff;
	isolation: isolate;
}
/* Faint sapphire bloom, top-right. Purely decorative. */
.pf-section--deep::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(
		62% 74% at 84% 6%,
		rgba(75, 104, 210, .34) 0%,
		rgba(75, 104, 210, 0) 62%
	);
	pointer-events: none;
}
.pf-section--deep h2,
.pf-section--deep .pf-heading h2 {
	color: #fff;
}
.pf-section--deep .pf-eyebrow {
	color: rgba(255, 255, 255, .66);
}
.pf-section--deep .pf-heading > p:last-child,
.pf-section--deep .pf-heading > div > p:last-child {
	color: rgba(255, 255, 255, .76);
}

.pf-stone-grid {
	--pf-stone-gap: 24px;
	display: grid;
	width: min(100%, calc(var(--pf-tile-w) * 3 + var(--pf-stone-gap) * 2));
	margin-inline: auto;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--pf-stone-gap);
}
/* Flex column + margin-top:auto on the CTA lines all three CTAs up without the
   `min-height: 48px` guess the old rule used on the description. */
.pf-image-card {
	display: flex;
	min-width: 0;
	flex-direction: column;
	color: inherit !important;
	text-decoration: none !important;
}
.pf-image-card__media {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: var(--pf-tile-ratio);
	background: rgba(255, 255, 255, .06);
	overflow: hidden;
}
.pf-image-card__media img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}
.pf-image-card:hover .pf-image-card__media img {
	transform: scale(1.035);
}
.pf-image-card__copy {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 10px;
	padding: 22px 0 0;
}
.pf-image-card__copy strong {
	color: #fff;
	font-family: var(--pf-home-display);
	font-size: var(--pf-d-sm);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -.022em;
}
.pf-image-card__copy small {
	max-width: 46ch;
	color: rgba(255, 255, 255, .74);
	font-size: var(--pf-t-small);
	line-height: 1.65;
}
.pf-image-card__copy em {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: auto;
	padding-top: 16px;
	color: #fff;
	font-size: var(--pf-t-micro);
	font-style: normal;
	font-weight: 600;
	letter-spacing: .13em;
	text-transform: uppercase;
}
.pf-image-card__copy em::after {
	content: "";
	width: 20px;
	height: 1px;
	background: currentColor;
	opacity: .8;
	transition: width .2s ease;
}
.pf-image-card:hover .pf-image-card__copy em::after {
	width: 30px;
}
/* Centred footer link under the grid, replacing the far-right link that left a
   wide empty gap beside the heading. */
.pf-stone-footer {
	margin-top: var(--pf-space-md);
	text-align: center;
}
.pf-section--deep .pf-text-link {
	color: #fff !important;
}

/* --------------------------------------------------------------------------
   9. WooCommerce product rows
   -------------------------------------------------------------------------- */
.pf-products-section {
	content-visibility: auto;
	contain-intrinsic-size: auto 760px;
}
.platifine-home .platifine-home-products-wrap {
	width: 100%;
}
.platifine-home .woocommerce ul.products.platifine-home-products {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	gap: clamp(16px, 2vw, 26px) !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}
.platifine-home .woocommerce ul.products.platifine-home-products li.product {
	width: auto !important;
	min-width: 0;
	margin: 0 !important;
}
.platifine-home .platifine-product-image-wrap {
	background: #f1f2f4;
}
.platifine-home .platifine-product-card-info {
	padding-top: 13px;
}
.platifine-home .platifine-product-material,
.platifine-home .platifine-product-rating,
.platifine-home .platifine-product-swatches {
	display: none;
}
.platifine-home .woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--pf-home-display);
	font-size: 16px !important;
	line-height: 1.32;
	letter-spacing: 0;
}
.platifine-home .woocommerce ul.products li.product .button {
	opacity: 1;
	transform: none;
	border-color: var(--pf-home-line-strong) !important;
	background: #fff !important;
	color: var(--pf-home-navy) !important;
}
.platifine-home .woocommerce ul.products li.product .button:hover,
.platifine-home .woocommerce ul.products li.product .button:focus-visible {
	border-color: var(--pf-home-navy) !important;
	background: var(--pf-home-navy) !important;
	color: #fff !important;
}

/* --------------------------------------------------------------------------
   10. Stud finder
   -------------------------------------------------------------------------- */
.pf-stud-finder {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: stretch;
	border-block: 1px solid var(--pf-home-line);
	background: #fff;
}
.pf-stud-finder__media {
	aspect-ratio: var(--pf-panel-ratio);
	min-height: 0;
	background: #eeebe5;
	overflow: hidden;
}
.pf-stud-finder__media img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}
.pf-stud-finder__copy,
.pf-platinum__copy,
.pf-atelier__copy,
.pf-delivery__copy {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	flex-direction: column;
	padding: var(--pf-panel-p);
}
.pf-stud-finder__copy > p:not(.pf-eyebrow) {
	max-width: 62ch;
	margin: 20px 0 var(--pf-space-md);
	color: var(--pf-home-copy);
	font-size: var(--pf-t-body);
	line-height: 1.78;
}
.pf-chip-group {
	width: 100%;
	margin: 0 0 var(--pf-space-md);
}
.pf-chip-group > span {
	display: block;
	margin-bottom: 10px;
	color: var(--pf-home-muted);
	font-size: var(--pf-t-micro);
	font-weight: 600;
	letter-spacing: .15em;
	text-transform: uppercase;
}
.pf-chip-group > div {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pf-space-2xs);
}
.pf-stud-finder .pf-button {
	margin-top: 4px;
}

/* --------------------------------------------------------------------------
   11. Pt950 panel
   -------------------------------------------------------------------------- */
.pf-platinum {
	display: grid;
	min-height: min(84vh, 640px);
	grid-template-columns: minmax(380px, .82fr) minmax(0, 1.18fr);
	background: var(--pf-home-navy);
}
.pf-platinum__copy {
	position: relative;
	color: #fff;
}
.pf-platinum__copy::before {
	content: "Pt950";
	position: absolute;
	top: clamp(28px, 3.6vw, 54px);
	right: clamp(24px, 3.6vw, 54px);
	color: rgba(255, 255, 255, .07);
	font-family: var(--pf-home-display);
	font-size: clamp(48px, 5.6vw, 88px);
	line-height: 1;
	pointer-events: none;
}
.pf-platinum h2 {
	color: #fff;
}
.pf-platinum__copy > p:not(.pf-eyebrow) {
	max-width: 50ch;
	margin: 22px 0;
	color: rgba(255, 255, 255, .78);
	font-size: var(--pf-t-body);
	line-height: 1.8;
}
.pf-platinum__copy ul {
	margin: 0 0 var(--pf-space-md);
	padding: 0;
	list-style: none;
}
.pf-platinum__copy li {
	position: relative;
	margin: 0 0 11px;
	padding-left: 22px;
	color: rgba(255, 255, 255, .9);
	font-size: var(--pf-t-small);
	line-height: 1.6;
}
.pf-platinum__copy li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .68em;
	width: 10px;
	height: 1px;
	background: rgba(255, 255, 255, .55);
}
.pf-platinum__visuals {
	display: grid;
	max-height: min(90vh, 700px);
	grid-template-rows: minmax(0, 1.1fr) minmax(0, .9fr);
	gap: 2px;
	background: var(--pf-home-navy);
}
.pf-platinum__visuals figure {
	margin: 0;
	background: #e9ecee;
	overflow: hidden;
}
.pf-platinum__visuals img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}
.pf-platinum__macro img {
	object-position: center 42%;
}

/* --------------------------------------------------------------------------
   12. Stone comparison
   -------------------------------------------------------------------------- */
.pf-compare {
	padding-block: var(--pf-section-y);
	border-bottom: 1px solid var(--pf-home-line);
	background: #fff;
}
.pf-compare__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--pf-space-sm);
}
.pf-compare__grid article {
	position: relative;
	display: flex;
	align-items: flex-start;
	flex-direction: column;
	padding: var(--pf-space-lg);
	border: 1px solid var(--pf-home-line);
	background: #fff;
	transition: border-color .2s ease;
}
.pf-compare__grid article::before {
	content: "";
	position: absolute;
	top: -1px;
	left: -1px;
	width: calc(100% + 2px);
	height: 2px;
	background: var(--pf-home-navy);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .25s ease;
}
.pf-compare__grid article:hover {
	border-color: var(--pf-home-line-strong);
}
.pf-compare__grid article:hover::before {
	transform: scaleX(1);
}
.pf-compare__grid span {
	color: var(--pf-home-muted);
	font-size: var(--pf-t-micro);
	font-weight: 600;
	letter-spacing: .2em;
}
.pf-compare__grid h3 {
	margin: var(--pf-space-md) 0 14px;
	color: var(--pf-home-navy);
	font-family: var(--pf-home-display);
	font-size: var(--pf-d-sm);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -.022em;
}
.pf-compare__grid p {
	margin: 0 0 var(--pf-space-md);
	color: var(--pf-home-copy);
	font-size: var(--pf-t-small);
	line-height: 1.75;
}
.pf-compare__grid a {
	display: inline-flex;
	min-height: 44px;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	color: var(--pf-home-navy) !important;
	font-size: var(--pf-t-micro);
	font-weight: 600;
	letter-spacing: .13em;
	text-decoration: none !important;
	text-transform: uppercase;
}
.pf-compare__grid a::after {
	content: "";
	width: 18px;
	height: 1px;
	background: currentColor;
	transition: width .16s ease;
}
.pf-compare__grid a:hover::after,
.pf-compare__grid a:focus-visible::after {
	width: 26px;
}

/* --------------------------------------------------------------------------
   13. Atelier / made to order
   -------------------------------------------------------------------------- */
.pf-atelier {
	display: grid;
	grid-template-columns: minmax(340px, .82fr) minmax(0, 1.18fr);
	background: var(--pf-home-porcelain);
	content-visibility: auto;
	contain-intrinsic-size: auto 820px;
}
.pf-atelier__media {
	aspect-ratio: var(--pf-panel-ratio);
	min-height: 0;
	background: #ece9e3;
	overflow: hidden;
}
.pf-atelier__media img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	object-position: center;
}
.pf-atelier__copy > p:not(.pf-eyebrow),
.pf-delivery__copy > p:not(.pf-eyebrow) {
	max-width: 62ch;
	margin: 22px 0 var(--pf-space-md);
	color: var(--pf-home-copy);
	font-size: var(--pf-t-body);
	line-height: 1.8;
}
.pf-atelier__steps {
	display: grid;
	width: 100%;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	margin: 0 0 var(--pf-space-md);
	padding: 0;
	border: 1px solid var(--pf-home-line);
	background: var(--pf-home-line);
	list-style: none;
	counter-reset: pf-step;
}
.pf-atelier__steps li {
	display: flex;
	min-height: 86px;
	align-items: center;
	gap: 14px;
	padding: 16px 18px;
	background: #fff;
	color: #3f4954;
	font-size: var(--pf-t-small);
	line-height: 1.5;
	counter-increment: pf-step;
}
.pf-atelier__steps li::before {
	content: counter(pf-step);
	display: inline-flex;
	width: 32px;
	height: 32px;
	flex: 0 0 32px;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--pf-home-line-strong);
	border-radius: 50%;
	color: var(--pf-home-navy);
	font-family: var(--pf-home-display);
	font-size: 15px;
}

/* --------------------------------------------------------------------------
   14. Delivery
   -------------------------------------------------------------------------- */
.pf-delivery {
	display: grid;
	grid-template-columns: minmax(0, 1.04fr) minmax(380px, .96fr);
	border-bottom: 1px solid var(--pf-home-line);
	background: #fff;
	content-visibility: auto;
	contain-intrinsic-size: auto 700px;
}
.pf-offer-box {
	display: flex;
	width: min(100%, 540px);
	align-items: center;
	justify-content: space-between;
	gap: var(--pf-space-sm);
	margin: 0 0 var(--pf-space-md);
	padding: 18px 20px;
	border: 1px solid var(--pf-home-line);
	background: var(--pf-home-porcelain);
}
.pf-offer-box span {
	color: var(--pf-home-muted);
	font-size: var(--pf-t-micro);
	font-weight: 600;
	letter-spacing: .15em;
	text-transform: uppercase;
}
.pf-offer-box strong {
	color: var(--pf-home-navy);
	font-family: var(--pf-home-display);
	font-size: clamp(19px, 1.5vw, 22px);
	font-weight: 400;
	line-height: 1.25;
}
.pf-delivery__specs {
	display: grid;
	width: min(100%, 660px);
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	margin: 0 0 var(--pf-space-md);
	padding: 0;
	border: 1px solid var(--pf-home-line);
	background: var(--pf-home-line);
	list-style: none;
}
.pf-delivery__specs li {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 16px 14px;
	background: #fff;
}
.pf-delivery__specs b {
	color: var(--pf-home-muted);
	font-size: var(--pf-t-micro);
	font-weight: 600;
	letter-spacing: .13em;
	text-transform: uppercase;
}
.pf-delivery__specs span {
	color: var(--pf-home-navy);
	font-family: var(--pf-home-display);
	font-size: clamp(0.938rem, 0.88rem + 0.28vw, 1.125rem);
	line-height: 1.25;
	text-wrap: balance;
}
.pf-offer-box strong {
	white-space: nowrap;
}
.pf-delivery__media {
	aspect-ratio: var(--pf-panel-ratio);
	min-height: 0;
	background: #efeee9;
	overflow: hidden;
}
.pf-delivery__media img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	object-position: center 48%;
}

/* --------------------------------------------------------------------------
   15. FAQ
   -------------------------------------------------------------------------- */
.pf-faq {
	content-visibility: auto;
	contain-intrinsic-size: auto 760px;
}
.pf-faq__inner {
	display: grid;
	grid-template-columns: minmax(250px, .7fr) minmax(0, 1.3fr);
	align-items: start;
	gap: var(--pf-space-lg) clamp(40px, 7vw, 104px);
}
.pf-faq .pf-heading {
	position: sticky;
	top: calc(var(--pf-shell-h) + 32px);
	margin: 0;
}
.pf-faq__list {
	border-top: 1px solid var(--pf-home-line);
}
.pf-faq details {
	border-bottom: 1px solid var(--pf-home-line);
}
.pf-faq summary {
	position: relative;
	padding: 22px 48px 22px 0;
	color: var(--pf-home-navy);
	font-family: var(--pf-home-display);
	font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
	line-height: 1.36;
	list-style: none;
	cursor: pointer;
}
.pf-faq summary::-webkit-details-marker {
	display: none;
}
.pf-faq summary::after,
.pf-faq summary::before {
	content: "";
	position: absolute;
	top: 50%;
	right: 8px;
	width: 14px;
	height: 1px;
	background: var(--pf-home-navy);
	transition: transform .2s ease, opacity .2s ease;
}
.pf-faq summary::before {
	transform: rotate(90deg);
}
.pf-faq details[open] summary::before {
	transform: rotate(0deg);
	opacity: 0;
}
.pf-faq details p {
	max-width: 68ch;
	margin: 0;
	padding: 0 48px 24px 0;
	color: var(--pf-home-copy);
	font-size: var(--pf-t-body);
	line-height: 1.78;
}

/* --------------------------------------------------------------------------
   16. Gemstone band
   -------------------------------------------------------------------------- */
.pf-gemstone {
	position: relative;
	display: flex;
	min-height: min(62vh, 440px);
	align-items: center;
	background: #f4f1eb;
	overflow: hidden;
	content-visibility: auto;
	contain-intrinsic-size: auto 480px;
}
.pf-gemstone__picture,
.pf-gemstone__picture img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}
.pf-gemstone__picture img {
	object-fit: cover;
	object-position: center right;
}
.pf-gemstone__wash {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		90deg,
		rgba(249, 247, 242, .985) 0%,
		rgba(249, 247, 242, .94) 36%,
		rgba(249, 247, 242, .4) 58%,
		rgba(249, 247, 242, 0) 78%
	);
}
.pf-gemstone__copy {
	position: relative;
	z-index: 2;
	width: min(100%, var(--pf-home-container));
	margin-inline: auto;
	padding: var(--pf-space-xl) var(--pf-home-gutter);
}
.pf-gemstone__copy > * {
	max-width: 580px;
}
.pf-gemstone__copy p:not(.pf-eyebrow) {
	margin: 20px 0 var(--pf-space-md);
	color: #4a545e;
	font-size: var(--pf-t-body);
	line-height: 1.75;
}

/* ==========================================================================
   17. Responsive

   Tile sizing follows Blue Nile's ladder (743 / 1132 / 1528 / 1529+), which
   keeps a 5:6 portrait tile at roughly 440px on desktop and shrinks it to a
   ~203px card on phones so a row reads as a swipeable carousel.
   ========================================================================== */
@media (min-width: 1529px) {
	.platifine-home {
		--pf-tile-ratio: 462 / 520;
		--pf-tile-w: 462px;
	}
}
@media (max-width: 1132px) {
	.platifine-home {
		--pf-tile-ratio: 408 / 460;
		--pf-tile-w: 408px;
	}
}
@media (max-width: 743px) {
	.platifine-home {
		--pf-tile-ratio: 4 / 3;
		--pf-tile-w: 203px;
	}
}


/* Tablet / small laptop ---------------------------------------------------- */
@media (max-width: 1120px) {
	.pf-trust-strip__inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.pf-trust-item:nth-child(3),
	.pf-trust-item:nth-child(4) {
		border-top: 1px solid var(--pf-home-line);
	}
	.pf-trust-item:nth-child(3) {
		border-left: 0;
	}

	/* Product rows become a snapping carousel that bleeds to the viewport
	   edge, with scroll-padding so the first card still lines up with the
	   section gutter. v0.6.0 left it inset with no trailing space. */
	.platifine-home .platifine-home-products-wrap {
		margin-inline: calc(var(--pf-home-gutter) * -1);
	}
	.platifine-home .woocommerce ul.products.platifine-home-products {
		display: flex !important;
		gap: 16px !important;
		padding: 0 var(--pf-home-gutter) 14px !important;
		overflow-x: auto;
		overscroll-behavior-inline: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--pf-home-gutter);
		scrollbar-width: thin;
	}
	.platifine-home .woocommerce ul.products.platifine-home-products li.product {
		flex: 0 0 clamp(210px, 34%, 300px) !important;
		scroll-snap-align: start;
	}

	.pf-platinum {
		min-height: 0;
		grid-template-columns: 1fr;
	}
	.pf-platinum__visuals {
		grid-template-columns: 1.15fr .85fr;
		grid-template-rows: minmax(0, 460px);
	}
	.pf-atelier {
		grid-template-columns: minmax(300px, .78fr) minmax(0, 1.22fr);
	}
	.pf-atelier__media,
	.pf-delivery__media,
	.pf-stud-finder__media {
		min-height: 0;
	}
}

/* Stacked layouts ---------------------------------------------------------- */
@media (max-width: 900px) {
	.pf-heading--split {
		align-items: flex-start;
		flex-direction: column;
		gap: 14px;
	}

	.pf-stone-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	/* Third card centred across both columns. The old rule hard-coded
	   `calc(50% - 10px)` while the gap is fluid, so it drifted out of
	   alignment at most widths. */
	.pf-stone-grid > .pf-image-card:last-child {
		grid-column: 1 / -1;
		width: calc(50% - var(--pf-stone-gap) / 2);
		justify-self: center;
	}

	.pf-stud-finder,
	.pf-atelier,
	.pf-delivery {
		grid-template-columns: 1fr;
	}
	.pf-stud-finder__media,
	.pf-atelier__media,
	.pf-delivery__media {
		min-height: 0;
		aspect-ratio: 4 / 3;
	}
	.pf-stud-finder__media img {
		object-position: center 67%;
	}
	.pf-atelier__media img {
		object-position: center 48%;
	}
	.pf-delivery__media {
		order: -1;
	}
	.pf-delivery__media img {
		object-position: center 42%;
	}

	.pf-compare__grid {
		grid-template-columns: 1fr;
	}
	.pf-compare__grid h3 {
		margin-top: var(--pf-space-sm);
	}

	.pf-faq__inner {
		grid-template-columns: 1fr;
	}
	.pf-faq .pf-heading {
		position: static;
	}
}

/* Phone -------------------------------------------------------------------- */
@media (max-width: 700px) {
	.platifine-home {
		--pf-section-y: 32px;
		--pf-panel-p: 28px 20px;
	}

	.pf-hero {
		min-height: clamp(600px, calc(100svh - var(--pf-shell-h)), 760px);
		align-items: flex-start;
	}
	.pf-hero__image {
		/* The dedicated portrait artwork keeps quiet space at left and the
		   ring/model at right. A slight right bias prevents the face from being
		   clipped on narrow phones without pushing the ring under the copy. */
		object-position: 58% center;
	}
	.pf-hero__wash {
		/* The replacement hero already contains a pale text field on the left.
		   Wash sideways rather than bleaching the model's face and ring from the
		   top down. */
		background: linear-gradient(
			90deg,
			rgba(249, 247, 242, .96) 0%,
			rgba(249, 247, 242, .88) 43%,
			rgba(249, 247, 242, .52) 66%,
			rgba(249, 247, 242, .12) 86%,
			rgba(249, 247, 242, 0) 100%
		);
	}
	.pf-hero__inner {
		padding-block: clamp(36px, 7vw, 54px) var(--pf-space-lg);
	}
	.pf-hero__copy {
		max-width: 100%;
	}
	.pf-hero h1 {
		max-width: 12ch;
		line-height: 1.04;
	}
	.pf-hero__copy > p:not(.pf-eyebrow) {
		max-width: 40ch;
	}

	/* Full-width stacked CTAs, but capped so they don't stretch edge to edge
	   on a large phone. */
	.pf-actions {
		align-items: stretch;
		flex-direction: column;
		gap: 10px;
	}
	.pf-button,
	.pf-button--ghost {
		width: 100%;
		max-width: 340px;
	}
	.pf-actions .pf-text-link {
		align-self: flex-start;
	}

	.pf-trust-strip__inner {
		padding-inline: 12px;
	}
	.pf-trust-item {
		min-height: 76px;
		justify-content: flex-start;
		gap: 10px;
		padding: 12px 10px;
		font-size: 10px;
		line-height: 1.35;
		letter-spacing: .05em;
	}
	.pf-trust-icon {
		width: 30px;
		height: 30px;
		flex-basis: 30px;
	}

	/* Stacked, not swiped. Both rows collapse to a single column on phones so
	   every card is visible by scrolling down rather than sideways. */
	.pf-intention-grid,
	.pf-stone-grid {
		display: grid;
		width: 100%;
		grid-template-columns: 1fr;
		gap: var(--pf-space-md);
		margin-inline: 0;
		padding-inline: 0;
		padding-bottom: 0;
		overflow: visible;
		scroll-snap-type: none;
	}
	.pf-intention-card,
	.pf-stone-grid > .pf-image-card {
		flex: none;
		width: 100%;
		grid-column: auto;
		scroll-snap-align: none;
	}
	/* The tablet rule intentionally centres the third stone card at half width.
	   Phones must explicitly undo that higher-specificity width, otherwise the
	   moissanite card remains narrow while the first two cards are full width. */
	.pf-stone-grid > .pf-image-card:last-child {
		width: 100%;
		grid-column: auto;
		justify-self: stretch;
	}
	.pf-intention-card:last-child .pf-intention-card__media img {
		/* New portrait stud artwork: keep the ear and platinum stud prominent
		   while preserving the clean lower-left title area. */
		object-position: 45% 38%;
	}
	.pf-image-card__copy small {
		font-size: var(--pf-t-small);
	}

	.pf-image-card__copy {
		padding-top: 16px;
	}
	.pf-image-card__copy em {
		flex-wrap: nowrap;
		white-space: nowrap;
	}
	.pf-image-card__copy em::after {
		flex: 0 0 20px;
	}

	.pf-intention-card__copy nav a,
	.pf-chip-group a {
		min-height: 42px;
		padding-inline: 12px;
	}

	.platifine-home .woocommerce ul.products.platifine-home-products li.product {
		flex-basis: min(66vw, 260px) !important;
	}
	.platifine-home .woocommerce ul.products li.product .woocommerce-loop-product__title {
		font-size: 15px !important;
	}

	.pf-stud-finder__media {
		aspect-ratio: 16 / 9;
	}
	.pf-chip-group {
		margin-bottom: var(--pf-space-sm);
	}
	.pf-platinum__copy::before {
		top: 22px;
		right: 18px;
		font-size: 54px;
	}
	.pf-platinum__visuals {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		max-height: none;
		gap: 4px;
	}
	.pf-platinum__craft {
		aspect-ratio: 16 / 9;
	}
	.pf-platinum__macro {
		aspect-ratio: 16 / 8.5;
	}
	.pf-platinum__macro img {
		/* Reveal the complete centre stone instead of cropping its crown at the
		   top edge of the shallow mobile panel. */
		object-position: center 18%;
	}

	.pf-atelier__media {
		aspect-ratio: 4 / 3;
	}
	.pf-atelier__steps {
		grid-template-columns: 1fr;
	}
	.pf-atelier__steps li {
		min-height: 70px;
	}

	.pf-delivery__media {
		aspect-ratio: 4 / 3;
	}
	.pf-offer-box {
		align-items: flex-start;
		flex-direction: column;
		gap: 6px;
	}
	.pf-offer-box strong {
		white-space: normal;
	}
	.pf-delivery__specs {
		grid-template-columns: 1fr;
	}
	.pf-intention-card__overlay {
		padding: 18px;
	}
	.pf-intention-card__copy {
		padding-top: 16px;
	}

	.pf-faq summary {
		padding-block: 20px;
	}

	.pf-gemstone {
		min-height: 500px;
		align-items: flex-start;
	}
	.pf-gemstone__picture img {
		/* The replacement portrait image already groups the ruby, emerald and
		   sapphire pieces in its lower half. Anchor it to the bottom so none of
		   the jewellery is clipped at the right or lower edge. */
		object-position: center bottom;
	}
	.pf-gemstone__wash {
		background: linear-gradient(
			180deg,
			rgba(249, 247, 242, .99) 0%,
			rgba(249, 247, 242, .96) 38%,
			rgba(249, 247, 242, .58) 55%,
			rgba(249, 247, 242, .08) 76%,
			rgba(249, 247, 242, 0) 86%
		);
	}
	.pf-gemstone__copy {
		padding-block: 36px 26px;
	}
	.pf-gemstone__copy > * {
		max-width: 100%;
	}
	.pf-gemstone__copy h2 {
		max-width: 11ch;
	}
	.pf-gemstone__copy p:not(.pf-eyebrow) {
		max-width: 34ch;
		margin-block: 16px 20px;
	}
	.pf-gemstone .pf-button {
		max-width: 340px;
	}
}

/* Short screens (iPhone SE and similar). The hero content is ~520px tall at
   default spacing, which pushed the second CTA below a 568px fold. Compact the
   rhythm rather than shrinking the type. */
@media (max-width: 760px) and (max-height: 720px) {
	.pf-hero {
		min-height: max(420px, calc(100svh - var(--pf-shell-h)));
	}
	.pf-hero__inner {
		padding-block: 20px 16px;
	}
	.pf-eyebrow {
		margin-bottom: 9px;
	}
	.pf-hero h1 {
		margin-bottom: 12px;
	}
	.pf-hero__copy > p:not(.pf-eyebrow) {
		max-width: 34ch;
		margin-bottom: 16px;
		line-height: 1.55;
	}
	.pf-hero .pf-actions {
		gap: 8px;
	}
	.pf-hero .pf-button,
	.pf-hero .pf-button--ghost {
		min-height: 44px;
	}
}

/* Small phone -------------------------------------------------------------- */
@media (max-width: 430px) {
	.pf-intention-card__copy nav {
		width: 100%;
	}
	.pf-intention-card__copy nav a {
		flex: 1 1 calc(50% - 4px);
	}
	.pf-trust-item {
		padding-inline: 8px;
	}
}

/* Preferences -------------------------------------------------------------- */
@media (hover: none) {
	.pf-intention-card:hover .pf-intention-card__media img,
	.pf-image-card:hover .pf-image-card__media img {
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.platifine-home-page {
		scroll-behavior: auto;
	}
	.platifine-home *,
	.platifine-home *::before,
	.platifine-home *::after {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
	}
}

@media (prefers-contrast: more) {
	.platifine-home {
		--pf-home-copy: #333c46;
		--pf-home-muted: #3f4954;
		--pf-home-line: #b9c0ca;
		--pf-home-line-strong: #8b95a3;
	}
}

/* Print — drop the decorative photography, keep the information. */
@media print {
	.pf-hero__picture,
	.pf-hero__wash,
	.pf-gemstone__picture,
	.pf-gemstone__wash,
	.pf-platinum__visuals,
	.pf-stud-finder__media,
	.pf-atelier__media,
	.pf-delivery__media {
		display: none !important;
	}
	.pf-platinum {
		background: #fff !important;
		color: #000 !important;
	}
	.pf-faq details {
		break-inside: avoid;
	}
}