/*
Theme Name: Samina Rasul
Description: Child theme for the Samina Rasul store — luxury Pakistani custom-order fashion. Editorial didone display, quiet grotesk UI, confirmed palette of white / cream silk / deep burgundy.
Template: storefront
Version: 0.1.0
Text Domain: samina-rasul
*/

/* ---------- Tokens ---------- */
:root {
	--sr-white: #ffffff;
	--sr-cream: #f8f4ed;
	--sr-burgundy: #4a1f24;
	--sr-burgundy-soft: #6b3138;   /* hover/darker-surface derivative of the brand burgundy */
	--sr-ink: #241417;             /* near-black text derived from burgundy, not pure black */
	--sr-line: rgba(74, 31, 36, 0.16);

	--sr-font-display: "Bodoni Moda", "Didot", serif;
	--sr-font-body: "Archivo", "Helvetica Neue", sans-serif;

	--sr-measure: 62ch;
	/* One content width for the whole site. Every section centres its content
	 * on this; full-bleed backgrounds run edge to edge, their content does not. */
	--sr-content-max: 1200px;
	/* Side padding, matched to the breathing room the Formals/Bridals splits use. */
	--sr-gutter: clamp(1.5rem, 5vw, 4rem);
	--sr-section: clamp(3.5rem, 9vw, 7.5rem);
}

/* ---------- Base ---------- */
body {
	background: var(--sr-white);
	color: var(--sr-ink);
	font-family: var(--sr-font-body);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.65;
}

h1, h2, h3, .sr-display {
	font-family: var(--sr-font-display);
	font-weight: 500;
	color: var(--sr-burgundy);
	line-height: 1.08;
	letter-spacing: 0.005em;
}

h1 { font-size: clamp(2.4rem, 6vw, 4.4rem); }
h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.6rem); }

h4, h5, h6 {
	font-family: var(--sr-font-body);
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--sr-ink);
}

a { color: var(--sr-burgundy); }
a:hover { color: var(--sr-burgundy-soft); }

/* Eyebrow labels */
.sr-eyebrow {
	display: block;
	font-family: var(--sr-font-body);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--sr-burgundy);
	margin-bottom: 1rem;
}

/* Signature: mukesh-dot divider — a hairline of embellishment dots */
.sr-divider {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.65rem;
	border: 0;
	margin: 0 auto;
	padding: 0;
	height: auto;
	background: none;
}
.sr-divider::before,
.sr-divider::after {
	content: "";
	flex: 0 1 72px;
	height: 1px;
	background: var(--sr-line);
}
.sr-divider .dot {
	width: 4px;
	height: 4px;
	background: var(--sr-burgundy);
	transform: rotate(45deg);
	opacity: 0.85;
}
.sr-divider .dot:nth-child(2),
.sr-divider .dot:nth-child(6) { opacity: 0.45; transform: rotate(45deg) scale(0.8); }
.sr-divider .dot:nth-child(3),
.sr-divider .dot:nth-child(5) { opacity: 0.65; }

/* ---------- Buttons ---------- */
.button, button, input[type="submit"],
.wp-block-button__link,
.wc-block-components-button {
	font-family: var(--sr-font-body);
	font-weight: 600;
	font-size: 0.8rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	border-radius: 0;
	padding: 0.95em 2.2em;
	background-color: var(--sr-burgundy);
	color: var(--sr-white);
	border: 1px solid var(--sr-burgundy);
	transition: background-color 160ms ease, color 160ms ease;
}
.button:hover, button:hover, input[type="submit"]:hover,
.wp-block-button__link:hover {
	background-color: var(--sr-burgundy-soft);
	border-color: var(--sr-burgundy-soft);
	color: var(--sr-white);
}
.button.sr-ghost {
	background: transparent;
	color: var(--sr-burgundy);
}
.button.sr-ghost:hover {
	background: var(--sr-burgundy);
	color: var(--sr-white);
}

:is(a, button, input, [tabindex]):focus-visible {
	outline: 2px solid var(--sr-burgundy);
	outline-offset: 3px;
}

/* ---------- Header ---------- */
.site-header,
.storefront-handheld-footer-bar {
	background-color: var(--sr-white);
	border-bottom: 1px solid var(--sr-line);
}
.site-header { padding-top: 0.75rem; }

.site-branding .site-title,
.site-branding .site-title a {
	font-family: var(--sr-font-display);
	font-weight: 600;
	font-size: clamp(1.5rem, 3vw, 2rem);
	letter-spacing: 0.04em;
	color: var(--sr-burgundy);
	text-transform: uppercase;
}
.site-description { display: none; }

.main-navigation ul li a,
.secondary-navigation ul li a {
	font-family: var(--sr-font-body);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sr-ink);
}
.main-navigation ul li a:hover { color: var(--sr-burgundy); }

.site-header-cart .cart-contents,
.site-header .storefront-header-search { color: var(--sr-ink); }

/* ---------- Header icon row (search / logo / account / cart) ----------
 * Storefront's default header is a float grid; from 768px up we lay the
 * top row out as flex with the wordmark mathematically centered via
 * absolute positioning, independent of how wide the left/right icon
 * groups are. Below 768px the stock Storefront + handheld-bar layout is
 * left completely alone. */
@media (min-width: 768px) {
	/* Header and nav share the site's content width so the wordmark, icons and
	 * menu line up with the sections below them. */
	.site-header .col-full,
	.storefront-primary-navigation .col-full {
		width: min(100%, var(--sr-content-max));
		max-width: none;
		margin-inline: auto;
		padding-inline: 0;
	}
	.site-header,
	.storefront-primary-navigation { padding-inline: var(--sr-gutter); }
	.site-header .col-full {
		display: flex;
		align-items: center;
		position: relative;
		gap: 1.25rem;
	}
	.site-header .col-full .site-branding {
		position: absolute;
		left: 50%;
		top: 50%;
		width: auto;
		float: none;
		margin: 0;
		transform: translate(-50%, -50%);
	}
	/* Search anchors the left edge; account and cart pair off to the right.
	 * The auto inline-end margin on the search absorbs the free space the
	 * absolutely-positioned wordmark leaves behind, so the two groups sit
	 * hard against opposite edges whatever the wordmark's width.
	 *
	 * Scoped through .woocommerce-active to outrank Storefront's own
	 * `.woocommerce-active .site-header .site-search`, which otherwise wins on
	 * specificity and floats this right at a percentage width. */
	.woocommerce-active .site-header .site-search,
	.site-header .site-search {
		order: 1;
		width: auto;
		float: none;
		margin-inline-end: auto;
	}
	.sr-header-icon--account { order: 2; }
	.site-header #site-header-cart { order: 3; }

	.storefront-primary-navigation .col-full {
		display: flex;
		justify-content: center;
	}
	.main-navigation { width: auto; float: none; margin: 0; }
	.main-navigation > div.primary-navigation > ul.menu {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.5rem 2.25rem;
	}
}

/* Shared icon-button look for search / account / cart triggers. */
.sr-header-icon,
.site-header .site-search button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	background: transparent;
	border: 0;
	color: var(--sr-ink);
	cursor: pointer;
}
.sr-header-icon:hover,
.site-header .site-search button[type="submit"]:hover { background: transparent; color: var(--sr-burgundy); }
.sr-header-icon svg,
.site-header .site-search button[type="submit"] svg,
.site-header .cart-contents svg {
	display: block;
	width: 1.2rem;
	height: 1.2rem;
	stroke: currentColor;
	pointer-events: none; /* decorative; let clicks always fall through to the control */
}

/* Storefront paints its own Font Awesome glyphs into the search form and the
 * cart link. Both duplicate the hand-drawn SVGs this theme injects, so the
 * glyph layer is switched off and the cart pseudo is left free for the count
 * badge below. */
.site-header .site-search .woocommerce-product-search::before,
.site-header #site-header-cart .cart-contents::after { content: none; }

/* Search: collapse to an icon, expand the field on demand. */
.site-header .site-search .widget { display: contents; }
.site-header .woocommerce-product-search {
	display: flex;
	align-items: center;
	position: relative;
}
.site-header .woocommerce-product-search .search-field {
	/* !important: Storefront's own .widget_product_search form input[type=search]
	 * rule outranks a same-depth class selector on element-count, regardless of
	 * cascade order - see specificity note above the icon-button rules.
	 * Hidden via display (not width:0) by default: this exact input proved
	 * unwilling to honour width/max-width/flex-basis overrides - stylesheet
	 * or inline, every method tried - in testing, so the collapse/expand is
	 * a display swap instead, sized by its own intrinsic default width. */
	display: none !important;
	padding: 0.35em 0.1em;
	margin: 0;
	border: 0;
	border-bottom: 1px solid var(--sr-line);
	background: transparent;
	font-family: var(--sr-font-body);
	font-size: 0.85rem;
	color: var(--sr-ink);
}
.site-header .site-search.is-open .woocommerce-product-search .search-field {
	display: block !important;
}
.site-header .woocommerce-product-search button[type="submit"] {
	/* !important: same Storefront specificity fight - its widget CSS visually
	 * clips this button (position:absolute, 1px box) by default. */
	position: static !important;
	clip: auto !important;
	clip-path: none !important;
	width: 2.25rem !important;
	height: 2.25rem !important;
	font-size: 0;
	order: 2;
}

/* Cart icon (bag outline) + live count badge. Price/count text stays in
 * the DOM for assistive tech and WooCommerce's AJAX fragment refresh;
 * it's only visually hidden, using WordPress core's own screen-reader-text
 * clip technique rather than display:none. */
.site-header #site-header-cart { list-style: none; margin: 0; padding: 0; width: auto; float: none; }
.site-header #site-header-cart > li { display: contents; }
.site-header #site-header-cart .widget_shopping_cart { display: none; }
.site-header .cart-contents {
	position: relative;
	display: inline-flex;
	width: 2.25rem;
	height: 2.25rem;
	align-items: center;
	justify-content: center;
	color: var(--sr-ink);
}
.site-header .cart-contents:hover { color: var(--sr-burgundy); }
.site-header #site-header-cart .cart-contents.has-items::after {
	content: attr(data-count);
	position: absolute;
	top: -0.15rem;
	right: -0.15rem;
	min-width: 1rem;
	height: 1rem;
	padding: 0 0.2rem;
	border-radius: 999px;
	background: var(--sr-burgundy);
	color: var(--sr-white);
	font-family: var(--sr-font-body);
	font-size: 0.62rem;
	font-weight: 700;
	line-height: 1rem;
	text-align: center;
}
.site-header .cart-contents .woocommerce-Price-amount,
.site-header .cart-contents .count {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- Sections ---------- */
/* Break homepage and archive sections out of Storefront's boxed container. */
.sr-home,
.sr-archive {
	width: 100vw;
	margin-left: calc(50% - 50vw);
}
.home .site-content,
.home .site-main,
.tax-product_cat .site-content,
.tax-product_cat .site-main {
	padding-top: 0;
	margin-bottom: 0;
}
.home .site-header,
.tax-product_cat .site-header {
	margin-bottom: 0 !important;
}
/* Storefront prints its own archive header; this template supplies one. */
.tax-product_cat .woocommerce-products-header,
.tax-product_cat .storefront-breadcrumb { display: none; }

/* ---------- Category landing masthead ---------- */
.sr-archive__hero {
	position: relative;
	display: grid;
	place-items: center;
	overflow: clip;
	text-align: center;
	padding: clamp(5rem, 12vw, 8.5rem) var(--sr-gutter) clamp(4rem, 9vw, 6rem);
	min-height: min(62vh, 620px);
}
.sr-archive__bg {
	position: absolute;
	/* Overhang beyond the parallax travel so scrolling never exposes an edge. */
	left: 0;
	right: 0;
	top: -10%;
	height: 120%;
	z-index: 0;
	display: grid;
	place-items: center;
}
.sr-archive__hero--warm .sr-archive__bg {
	background:
		radial-gradient(120% 90% at 25% 15%, rgba(74, 31, 36, 0.1), transparent 55%),
		radial-gradient(110% 100% at 80% 85%, rgba(74, 31, 36, 0.18), transparent 60%),
		linear-gradient(160deg, #f4ede1 0%, var(--sr-cream) 45%, #ecdfcd 100%);
}
.sr-archive__hero--deep .sr-archive__bg {
	background:
		radial-gradient(120% 90% at 30% 20%, rgba(248, 244, 237, 0.1), transparent 55%),
		radial-gradient(130% 110% at 75% 90%, rgba(20, 8, 10, 0.55), transparent 65%),
		linear-gradient(160deg, #5d2830 0%, var(--sr-burgundy) 55%, #35161a 100%);
}
.sr-archive__bg .sr-ornament {
	width: min(80%, 560px);
	opacity: .12;
}
.sr-archive__hero--warm .sr-archive__bg .sr-ornament { color: var(--sr-burgundy); }
.sr-archive__hero--deep .sr-archive__bg .sr-ornament { color: var(--sr-cream); }
.sr-archive__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 28%;
}
.sr-archive__scrim { position: absolute; inset: 0; z-index: 0; }
/* Only a photograph needs a scrim; the gradients already carry the contrast. */
.sr-archive__hero--photo.sr-archive__hero--warm .sr-archive__scrim {
	background: linear-gradient(180deg, rgba(248, 244, 237, .58) 0%, rgba(248, 244, 237, .42) 50%, rgba(248, 244, 237, .72) 100%);
}
.sr-archive__hero--photo.sr-archive__hero--deep .sr-archive__scrim {
	background: linear-gradient(180deg, rgba(28, 14, 16, .55) 0%, rgba(28, 14, 16, .38) 50%, rgba(28, 14, 16, .7) 100%);
}
.sr-archive__intro {
	position: relative;
	z-index: 1;
	width: min(100%, 720px);
}
.sr-archive__title {
	margin: .5rem 0 0;
	font-size: clamp(2.8rem, 8vw, 6rem);
	line-height: .92;
	letter-spacing: -.03em;
}
.sr-archive__lede {
	margin: 1.4rem auto 0;
	max-width: 52ch;
	font-size: 1.02rem;
	line-height: 1.75;
}
.sr-archive__lede p:last-child { margin-bottom: 0; }
.sr-archive__count {
	display: inline-block;
	margin-top: 1.6rem;
	padding-top: 1.1rem;
	border-top: 1px solid currentColor;
	font-family: var(--sr-font-body);
	font-size: .66rem;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	opacity: .72;
}
/* Deep tone inverts the type. */
.sr-archive__hero--deep .sr-archive__title,
.sr-archive__hero--deep .sr-eyebrow { color: var(--sr-cream); }
.sr-archive__hero--deep .sr-archive__lede,
.sr-archive__hero--deep .sr-archive__count { color: rgba(248, 244, 237, .88); }

/* ---------- Category product grid ---------- */
.sr-archive__toolbar {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 2rem;
}
.sr-archive__toolbar .woocommerce-ordering { margin: 0; }
/* Every product grid on the site - category template, shop, search results -
 * uses one layout. The horizontal rail keeps its own flex rule, which outranks
 * this on specificity. */
ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: clamp(1.1rem, 2vw, 1.75rem);
	margin: 0;
	padding: 0;
}
/* Storefront floats and width-hacks loop items; the grid owns layout here. */
ul.products li.product {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	clear: none !important;
}
ul.products::before,
ul.products::after { content: none; }

/* ---------- Shop / search archives that do not use the category template ---------- */
.woocommerce-products-header {
	position: relative;
	margin: 0 0 clamp(2rem, 4vw, 3rem);
	padding: clamp(3rem, 7vw, 5rem) var(--sr-gutter);
	text-align: center;
	background:
		radial-gradient(120% 90% at 25% 15%, rgba(74, 31, 36, 0.08), transparent 55%),
		linear-gradient(160deg, #f4ede1 0%, var(--sr-cream) 45%, #ecdfcd 100%);
}
.woocommerce-products-header__title {
	margin: 0;
	font-size: clamp(2rem, 5vw, 3.4rem);
	line-height: 1.02;
	letter-spacing: -.02em;
}
.woocommerce-products-header .term-description {
	max-width: 52ch;
	margin: 1.1rem auto 0;
}
.search-results .site-content,
.post-type-archive-product .site-content { padding-top: 0; }
/* The result count and ordering select sit on one quiet line. */
.woocommerce-result-count,
.woocommerce-ordering {
	font-family: var(--sr-font-body);
	font-size: .78rem;
	letter-spacing: .04em;
}
.sr-archive__empty {
	max-width: 46ch;
	margin: 0 auto 1.75rem;
	text-align: center;
}
.sr-section {
	padding: var(--sr-section) var(--sr-gutter);
}
.sr-section--cream { background: var(--sr-cream); }
.sr-section__inner {
	width: min(100%, var(--sr-content-max));
	margin: 0 auto;
}
.sr-section__intro {
	max-width: var(--sr-measure);
	margin: 0 auto 3rem;
	text-align: center;
}

/* ---------- Hero ---------- */
.sr-hero {
	background: var(--sr-cream);
	text-align: center;
	padding: clamp(4rem, 12vw, 9rem) var(--sr-gutter) clamp(3.5rem, 10vw, 7rem);
}
.sr-hero h1 {
	max-width: 16ch;
	margin: 0 auto 1.5rem;
	font-weight: 470;
	font-size: clamp(2.1rem, 5.4vw, 3.9rem);
}
.sr-hero h1 em {
	font-style: italic;
	font-weight: 420;
}
.sr-hero p {
	max-width: 46ch;
	margin: 0 auto 2.25rem;
	font-size: 0.96rem;
}
.sr-hero .sr-hero-actions {
	display: flex;
	gap: 1rem;
	justify-content: center;
	flex-wrap: wrap;
}
.sr-hero .sr-divider { margin-top: 3.5rem; }

/* ---------- Manifesto (scroll-revealed statement) ---------- */
.sr-manifesto {
	text-align: center;
	padding-top: clamp(4rem, 11vw, 9rem);
	padding-bottom: clamp(4rem, 11vw, 9rem);
}
.sr-manifesto__text {
	font-family: var(--sr-font-display);
	font-weight: 480;
	font-size: clamp(1.7rem, 4.2vw, 3.4rem);
	line-height: 1.22;
	color: var(--sr-burgundy);
	max-width: 26ch;
	margin: 0 auto;
}
.sr-manifesto__text em { font-style: italic; font-weight: 420; }

/* ---------- Split sections (Formals / Bridals) ---------- */
.sr-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: stretch;
	/* The shine gradient that used to sit under the placeholder art, now moved
	 * to the copy side. Set on the whole section rather than the text column:
	 * the photograph is opaque and covers its own column, so this only ever
	 * shows behind the text - and it keeps working when the columns stack. */
	background:
		radial-gradient(120% 90% at 25% 15%, rgba(74, 31, 36, 0.1), transparent 55%),
		radial-gradient(110% 100% at 80% 85%, rgba(74, 31, 36, 0.18), transparent 60%),
		linear-gradient(160deg, #f4ede1 0%, var(--sr-cream) 45%, #ecdfcd 100%);
}
.sr-split__visual {
	position: relative;
	overflow: hidden;
	min-height: clamp(420px, 72vh, 760px);
}
.sr-split__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 22%;
}
/* House motif sits behind the copy as a watermark, not over the photograph.
 * Kept faint enough that overlapping the button reads as texture, not clutter. */
.sr-split__motif {
	position: absolute;
	z-index: 0;
	/* Always the right of the copy block, in both splits. The text and button
	 * are left-aligned either way, so the right is the only reliably free
	 * space - mirroring it to the "outer" edge put it under the button on the
	 * flipped section. */
	right: clamp(1rem, 3vw, 2.5rem);
	bottom: clamp(1.5rem, 4vw, 3rem);
	width: clamp(120px, 15vw, 200px);
	color: var(--sr-burgundy);
	opacity: .13;
	pointer-events: none;
}
.sr-split--burgundy .sr-split__motif { color: var(--sr-cream); opacity: .18; }
.sr-split__motif svg { display: block; width: 100%; height: auto; }
/* Keep the copy above the watermark. */
.sr-split__content > *:not(.sr-split__motif) { position: relative; z-index: 1; }
.sr-split__content {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	padding: clamp(3.5rem, 8vw, 7rem) clamp(2rem, 6vw, 6rem);
	/* Half the shared content width plus its padding, so the text column lines
	 * up with the centred container the rest of the site uses instead of
	 * sprawling on wide screens. */
	width: min(100%, calc(var(--sr-content-max) / 2 + clamp(2rem, 6vw, 6rem)));
	box-sizing: border-box;
}
/* Non-flipped: content is the right column, so hug the centre line. */
.sr-split:not(.sr-split--flip) .sr-split__content { margin-right: auto; }
/* Flipped: content is the left column, so hug the centre line from the other side. */
.sr-split--flip .sr-split__content { margin-left: auto; }
.sr-split__content h2 {
	font-size: clamp(2rem, 3.8vw, 3.2rem);
	margin-bottom: 1.25rem;
}
.sr-split__content h2 em { font-style: italic; font-weight: 420; }
.sr-split__content p {
	max-width: 42ch;
	margin-bottom: 2rem;
}
.sr-split--flip .sr-split__visual { order: 2; }
.sr-split--burgundy {
	background:
		radial-gradient(120% 90% at 30% 20%, rgba(248, 244, 237, 0.1), transparent 55%),
		radial-gradient(130% 110% at 75% 90%, rgba(20, 8, 10, 0.55), transparent 65%),
		linear-gradient(160deg, #5d2830 0%, var(--sr-burgundy) 55%, #35161a 100%);
}
.sr-split--burgundy .sr-split__content { color: rgba(248, 244, 237, 0.88); }
.sr-split--burgundy .sr-split__content h2,
.sr-split--burgundy .sr-split__content .sr-eyebrow { color: var(--sr-cream); }
.sr-split--burgundy .button.sr-ghost {
	border-color: rgba(248, 244, 237, 0.55);
	color: var(--sr-cream);
}
.sr-split--burgundy .button.sr-ghost::before { background: var(--sr-cream); }
.sr-split--burgundy .button.sr-ghost:hover { color: var(--sr-burgundy); }
.sr-split--burgundy .sr-split__content a:hover,
.sr-split--burgundy .sr-split__content a:focus-visible { color: var(--sr-cream); }
.sr-split--burgundy .button.sr-ghost:hover,
.sr-split--burgundy .button.sr-ghost:focus-visible { color: var(--sr-burgundy); }

/* ---------- Product row header (arrow pattern) ---------- */
.sr-rowhead {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
	margin-bottom: 2.75rem;
}
.sr-rowhead h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
.sr-rowhead__arrow {
	display: inline-block;
	font-family: var(--sr-font-body);
	font-weight: 300;
	transform: translateY(-0.05em);
	margin-right: 0.2em;
}

/* ---------- Our Story: oversized type against staggered, asymmetric cards ---------- */
.sr-story {
	position: relative;
	background: var(--sr-cream);
	/* clip, not hidden: `overflow: hidden` turns this into a scroll container,
	 * which silently disables `position: sticky` on the intro below. `clip`
	 * contains the decorative grid without creating one. */
	overflow: clip;
}
/* Diamond lattice drawn from two crossed hairline gradients - the jaali
 * pattern the house uses on packaging, at the weight of a watermark. */
.sr-story::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		repeating-linear-gradient(45deg, rgba(74,31,36,.055) 0 1px, transparent 1px 34px),
		repeating-linear-gradient(-45deg, rgba(74,31,36,.055) 0 1px, transparent 1px 34px);
	mask-image: radial-gradient(120% 100% at 20% 30%, black, transparent 78%);
}
.sr-story__layout {
	position: relative;
	display: grid;
	gap: clamp(2.5rem, 5vw, 4.5rem);
	align-items: center;
}

/* Portrait, with the display type breaking out over its lower-left corner. */
.sr-story__visual { position: relative; }
.sr-story__frame {
	position: relative;
	margin: 0 0 0 auto;
	width: min(100%, 460px);
	aspect-ratio: 4 / 5;
	overflow: hidden;
	box-shadow: 0 30px 60px -28px rgba(74,31,36,.42);
}
.sr-story__frame img,
.sr-story__frame .sr-ph {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* The display title breaks over the lower-left of the photograph, where
 * burgundy on an unknown image is unreadable. Fade the foot of the frame to
 * cream so the type always lands on a light field. */
.sr-story__frame::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 52%;
	pointer-events: none;
	background: linear-gradient(
		to top,
		var(--sr-cream) 0%,
		rgba(248, 244, 237, .92) 22%,
		rgba(248, 244, 237, .55) 48%,
		transparent 100%
	);
}
.sr-story__title {
	position: relative;
	z-index: 1;
	margin: -2.4em 0 0;
	font-size: clamp(3rem, 7.5vw, 6.5rem);
	line-height: .84;
	letter-spacing: -.045em;
	font-weight: 500;
	color: var(--sr-burgundy);
	pointer-events: none;
}
.sr-story__title em {
	display: block;
	margin-left: .6em;
	font-style: italic;
	font-weight: 380;
	letter-spacing: -.015em;
}

/* Eyebrow with the leading rule from the reference. */
.sr-eyebrow--ruled { display: flex; align-items: center; gap: .9rem; }
.sr-eyebrow--ruled::before {
	content: "";
	width: clamp(28px, 4vw, 52px);
	height: 1px;
	background: currentColor;
	opacity: .6;
	flex: none;
}
.sr-story__lede {
	max-width: 32ch;
	margin: 1.4rem 0 0;
	font-family: var(--sr-font-display);
	font-size: clamp(1.35rem, 2.2vw, 1.95rem);
	line-height: 1.42;
	letter-spacing: -.015em;
	color: var(--sr-burgundy);
}
.sr-story__lede em { font-style: italic; }

/* The three pillars: hairline-ruled rows that fill with the same layered
 * gradient the shop cards use, and reveal their line of copy, on hover. */
.sr-story__pillars {
	list-style: none;
	margin: clamp(2rem, 4vw, 3.25rem) 0 0;
	padding: 0;
	border-top: 1px solid rgba(74,31,36,.16);
}
.sr-pillar {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: clamp(1rem, 2.5vw, 1.9rem);
	padding: clamp(1.15rem, 2.4vw, 1.7rem) clamp(1rem, 2vw, 1.5rem);
	border-bottom: 1px solid rgba(74,31,36,.16);
	isolation: isolate;
	transition: color 400ms ease;
}
.sr-pillar::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	opacity: 0;
	background:
		radial-gradient(circle at 88% 12%, rgba(255,255,255,.20), transparent 30%),
		radial-gradient(circle at 12% 88%, rgba(237,188,143,.22), transparent 40%),
		linear-gradient(135deg, #681f2c, #3d141b 58%, #210a0e);
	transition: opacity 450ms ease;
}
.sr-pillar__index {
	font: 400 .9rem/1 var(--sr-font-display);
	font-style: italic;
	opacity: .55;
}
.sr-pillar h3 {
	/* Inherit, so the row's hover colour reaches the heading - the global
	 * h1-h3 rule sets burgundy explicitly and would otherwise leave the
	 * heading unreadable against the filled gradient. */
	color: inherit;
	margin: 0;
	font-size: clamp(1.25rem, 2.1vw, 1.85rem);
	line-height: 1.15;
	letter-spacing: -.02em;
	font-weight: 500;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}
.sr-pillar h3 em { font-style: italic; font-weight: 400; }
.sr-pillar__reveal p {
	max-width: 40ch;
	margin: .55rem 0 0;
	font-size: .86rem;
	line-height: 1.6;
	opacity: .82;
}
.sr-pillar__mark {
	width: clamp(26px, 3vw, 34px);
	color: currentColor;
	opacity: 0;
	transform: translateX(-6px) rotate(-12deg);
	transition: opacity 450ms ease, transform 550ms cubic-bezier(.22,1,.36,1);
}
.sr-pillar-mark { display: block; width: 100%; height: auto; }

/* Hover fill only where a pointer can actually produce it; touch and
 * keyboard users get every row open by default instead of unreachable copy. */
@media (hover: hover) and (min-width: 701px) {
	.sr-pillar__reveal {
		display: grid;
		grid-template-rows: 0fr;
		transition: grid-template-rows 500ms cubic-bezier(.22,1,.36,1);
	}
	.sr-pillar__reveal > p { overflow: hidden; }
	.sr-pillar:hover .sr-pillar__reveal,
	.sr-pillar:focus-within .sr-pillar__reveal { grid-template-rows: 1fr; }
}
.sr-pillar:hover,
.sr-pillar:focus-within { color: #fffdf8; }
.sr-pillar:hover::before,
.sr-pillar:focus-within::before { opacity: 1; }
.sr-pillar:hover .sr-pillar__mark,
.sr-pillar:focus-within .sr-pillar__mark { opacity: .95; transform: none; }

.sr-story__more {
	display: inline-flex;
	align-items: center;
	gap: .7rem;
	margin-top: clamp(1.75rem, 3.5vw, 2.75rem);
	padding-bottom: .5rem;
	border-bottom: 1px solid currentColor;
	font: 600 .7rem/1.2 var(--sr-font-body);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--sr-burgundy);
	text-decoration: none;
}
.sr-story__more b { transition: transform 300ms cubic-bezier(.22,1,.36,1); }
.sr-story__more:hover b,
.sr-story__more:focus-visible b { transform: translateX(.4rem); }

@media (min-width: 901px) {
	.sr-story__layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
	/* Inset the frame inside its column so the display type has somewhere to
	 * break out to on the left without leaving the page gutter. */
	.sr-story__frame { width: 85%; }
}

.sr-shop-gateway__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(.75rem, 1.3vw, 1.15rem);
}
.sr-shop-gateway__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.sr-route {
	position: relative;
	display: flex;
	min-height: clamp(330px, 35vw, 475px);
	flex-direction: column;
	justify-content: space-between;
	padding: clamp(1.4rem, 3vw, 2.45rem);
	overflow: hidden;
	border: 1px solid rgba(74,31,36,.18);
	background: #fffdf9;
	color: var(--sr-burgundy);
	text-decoration: none;
	isolation: isolate;
	transition: color 450ms ease, transform 500ms cubic-bezier(.22,1,.36,1), box-shadow 500ms ease;
}
.sr-route::before {
	content: "";
	position: absolute;
	pointer-events: none;
	inset: 0;
	background: radial-gradient(circle at 76% 18%, rgba(74,31,36,.12), transparent 30%), linear-gradient(145deg, #fffefb, #f3eade);
	z-index: -2;
}
.sr-route:hover { transform: translateY(-7px); box-shadow: 0 18px 32px rgba(74,31,36,.13); }
.sr-route--bridal {
	border-color: #321016;
	background: #3d141b;
	color: #fffdf8;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.sr-route--bridal::before { background: radial-gradient(circle at 78% 17%, rgba(255,255,255,.23), transparent 26%), radial-gradient(circle at 20% 86%, rgba(237,188,143,.20), transparent 37%), linear-gradient(145deg, #681f2c, #3d141b 58%, #210a0e); }
.sr-route--dhanak { background: #f5ede2; }
.sr-route--dhanak::before { background: radial-gradient(circle at 10% 86%, rgba(137,88,52,.16), transparent 34%), #f5ede2; }
.sr-route--ujala { background: #faf8f2; }
.sr-route--ujala::before { background: radial-gradient(circle at 84% 17%, rgba(74,31,36,.12), transparent 30%), #faf8f2; }
.sr-route__index {
	display: block;
	font: 650 .64rem/1.25 var(--sr-font-body);
	letter-spacing: .16em;
	text-transform: uppercase;
	opacity: .82;
}
.sr-route__art {
	width: min(58%, 210px);
	margin-left: auto;
	color: currentColor;
	opacity: .8;
	transition: transform 850ms cubic-bezier(.22,1,.36,1), opacity 450ms ease;
}
.sr-route:hover .sr-route__art { transform: scale(1.12) rotate(5deg); opacity: 1; }
.sr-motif { display: block; width: 100%; height: auto; overflow: visible; }
.sr-motif--mukesh .sr-motif__beads { animation: sr-mukesh-glow 3.8s ease-in-out infinite alternate; transform-origin: center; }
.sr-motif--mukesh .sr-motif__line { animation: sr-thread-shift 4.2s linear infinite; }
.sr-motif--zardozi .sr-motif__petals { animation: sr-zardozi-bloom 7s ease-in-out infinite alternate; transform-origin: 90px 70px; }
.sr-motif--zardozi .sr-motif__heart { animation: sr-heart-pulse 2.8s ease-in-out infinite; transform-origin: 90px 70px; }
.sr-motif--gota .sr-motif__ribbons { animation: sr-gota-turn 12s linear infinite; transform-origin: 90px 70px; }
.sr-motif--gota .sr-motif__spark { animation: sr-sparkle 2.5s ease-in-out infinite; transform-origin: 90px 70px; }
.sr-route--bridal .sr-motif__heart { fill: #f5d6b7; }
.sr-route--bridal .sr-motif--zardozi { filter: drop-shadow(0 4px 12px rgba(0,0,0,.3)); }
.sr-route__copy { position: relative; z-index: 1; }
.sr-timeline__eyebrow {
	font: 600 0.65rem/1.2 var(--sr-font-body);
	letter-spacing: .18em;
	text-transform: uppercase;
	opacity: .72;
}
.sr-route h3 {
	font-size: clamp(2.25rem, 4.1vw, 4.3rem);
	line-height: .92;
	margin: .75rem 0 .75rem;
	font-weight: 500;
	letter-spacing: -.035em;
}
.sr-route--bridal h3 { color: #fffdf8; text-shadow: 0 2px 16px rgba(0,0,0,.32); }
.sr-route p { max-width: 31ch; margin: 0 0 1.25rem; font-size: .91rem; line-height: 1.55; }
.sr-route--bridal p { color: rgba(255,253,248,.91); }
.sr-route__cta {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	font: 700 .68rem/1.2 var(--sr-font-body);
	letter-spacing: .13em;
	text-transform: uppercase;
	padding: .78rem .95rem;
	border: 1px solid var(--sr-burgundy);
	background: #fffdf8;
	color: var(--sr-burgundy);
	box-shadow: 0 5px 0 rgba(74,31,36,.12);
	transition: transform 300ms cubic-bezier(.22,1,.36,1), background-color 300ms ease, color 300ms ease, box-shadow 300ms ease;
}
.sr-route__cta b { display: inline-block; font-size: 1rem; transition: transform 300ms ease; }
.sr-route:hover .sr-route__cta,
.sr-route:focus-visible .sr-route__cta { transform: translateY(-3px); box-shadow: 0 8px 0 rgba(74,31,36,.16); background: var(--sr-burgundy); color: var(--sr-white); }
.sr-route:hover .sr-route__cta b,
.sr-route:focus-visible .sr-route__cta b { transform: translateX(.35rem); }
.sr-route--bridal,
.sr-route--bridal:hover,
.sr-route--bridal:focus-visible { color: #fffdf8; }
.sr-route--bridal:hover p,
.sr-route--bridal:hover .sr-route__index,
.sr-route--bridal:focus-visible p,
.sr-route--bridal:focus-visible .sr-route__index { color: rgba(255,253,248,.91); }

/* ---------- Route card with photography ----------
 * Image sits on top, copy in the padded panel below. The term image is
 * optional: without one the branded placeholder fills the same box, so the
 * layout never shifts when the client adds category photography later. */
.sr-route--media { min-height: 0; padding: 0; }
.sr-route__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--sr-cream);
}
.sr-route__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 900ms cubic-bezier(.22,1,.36,1);
}
.sr-route:hover .sr-route__img { transform: scale(1.055); }
.sr-route__ph { position: absolute; inset: 0; display: block; }
.sr-route__ph--warm {
	background:
		radial-gradient(120% 90% at 25% 15%, rgba(74,31,36,.10), transparent 55%),
		radial-gradient(110% 100% at 80% 85%, rgba(74,31,36,.18), transparent 60%),
		linear-gradient(160deg, #f4ede1 0%, var(--sr-cream) 45%, #ecdfcd 100%);
}
.sr-route__ph--deep {
	background:
		radial-gradient(120% 90% at 30% 20%, rgba(248,244,237,.10), transparent 55%),
		radial-gradient(130% 110% at 75% 90%, rgba(20,8,10,.55), transparent 65%),
		linear-gradient(160deg, #5d2830 0%, var(--sr-burgundy) 55%, #35161a 100%);
}
.sr-route--media .sr-route__art {
	position: absolute;
	right: clamp(.85rem, 2vw, 1.5rem);
	bottom: clamp(.85rem, 2vw, 1.5rem);
	width: min(44%, 148px);
	margin: 0;
	opacity: .58;
}
.sr-route--media.sr-route--bridal .sr-route__art { color: #f7e2cd; }
/* Real photography needs less embellishment than the placeholder does. */
.sr-route__media:has(.sr-route__img) .sr-route__art { opacity: .32; }
.sr-route--media .sr-route__copy { padding: clamp(1.3rem, 2.5vw, 1.95rem); }
/* Same anti-wrap treatment as the story cards - these titles are two words
 * in a third-width column and were breaking mid-word at the old display size. */
.sr-route--media h3 {
	font-size: clamp(1.45rem, 2.25vw, 2.05rem);
	line-height: 1.08;
	letter-spacing: -.025em;
	margin: .45rem 0 .6rem;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}
.sr-route--media p { margin-bottom: 1.1rem; }

@keyframes sr-mukesh-glow { from { opacity: .45; transform: scale(.94); } to { opacity: 1; transform: scale(1.05); } }
@keyframes sr-thread-shift { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -38; } }
@keyframes sr-zardozi-bloom { from { transform: scale(.89) rotate(-5deg); } to { transform: scale(1.07) rotate(5deg); } }
@keyframes sr-heart-pulse { 0%,100% { transform: scale(.88); opacity: .62; } 50% { transform: scale(1.15); opacity: 1; } }
@keyframes sr-gota-turn { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes sr-sparkle { 0%,100% { transform: scale(.55) rotate(0); opacity: .45; } 50% { transform: scale(1.24) rotate(45deg); opacity: 1; } }

/* ---------- Atelier: horizontal product rail, placed high for immediate shopping ---------- */
.sr-atelier { padding-top: clamp(3rem, 6vw, 5.25rem); }
.sr-atelier__actions { display: flex; align-items: center; flex-wrap: wrap; gap: .8rem; }
.sr-rail-controls { display: flex; gap: .4rem; }
.sr-rail-control {
	width: 2.45rem;
	height: 2.45rem;
	padding: 0;
	border: 1px solid var(--sr-burgundy);
	border-radius: 50%;
	background: transparent;
	color: var(--sr-burgundy);
	font-size: 1.05rem;
	line-height: 1;
	transition: background-color 250ms ease, color 250ms ease, transform 250ms ease;
}
.sr-rail-control:hover { background: var(--sr-burgundy); color: var(--sr-cream); transform: scale(1.06); }
.sr-product-rail { overflow-x: auto; scrollbar-width: none; padding-bottom: .7rem; }
.sr-product-rail::-webkit-scrollbar { display: none; }
.sr-product-rail ul.products {
	display: flex;
	gap: clamp(1rem, 2vw, 1.65rem);
	width: max-content;
	margin: 0;
	padding: 0;
}
.sr-product-rail ul.products li.product {
	float: none !important;
	width: clamp(220px, 25vw, 320px) !important;
	margin: 0 !important;
	scroll-snap-align: start;
}
.sr-product-rail { scroll-snap-type: x mandatory; }

/* ---------- Values (drifting words on cream) ---------- */
.sr-values {
	position: relative;
	background: var(--sr-cream);
	overflow: hidden;
	min-height: clamp(560px, 88vh, 860px);
	display: grid;
	place-items: center;
	text-align: center;
}
.sr-values__ornament {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: var(--sr-burgundy);
	opacity: 0.05;
	pointer-events: none;
}
.sr-values__ornament .sr-ornament { width: min(640px, 90vw); }
.sr-values__word {
	position: absolute;
	font-family: var(--sr-font-display);
	line-height: 1;
	pointer-events: none;
	white-space: nowrap;
}
.sr-values__word--1 {
	top: 10%;
	left: 6%;
	font-size: clamp(3rem, 9vw, 7.5rem);
	color: transparent;
	-webkit-text-stroke: 1px rgba(74, 31, 36, 0.5);
}
.sr-values__word--2 {
	top: 36%;
	right: 5%;
	font-size: clamp(2.6rem, 8vw, 6.5rem);
	font-style: italic;
	color: var(--sr-burgundy);
	opacity: 0.85;
}
.sr-values__word--3 {
	bottom: 8%;
	left: 12%;
	font-size: clamp(3rem, 9vw, 7.5rem);
	color: transparent;
	-webkit-text-stroke: 1px rgba(74, 31, 36, 0.4);
}
.sr-values__body {
	position: relative;
	z-index: 1;
	max-width: 54ch;
	padding: 0 var(--sr-gutter);
}
.sr-values__body p {
	font-size: 1.05rem;
	margin-bottom: 2rem;
}

/* ---------- Process: vertical scroll-progress timeline ---------- */
/* Burgundy, so the page keeps alternating cream / deep the way the Bridals
 * split does, instead of running three pale sections together. Same layered
 * shine as the deep placeholder, plus a mukesh bead scatter in cream. */
.sr-process {
	position: relative;
	background:
		radial-gradient(120% 90% at 30% 20%, rgba(248, 244, 237, 0.1), transparent 55%),
		radial-gradient(130% 110% at 75% 90%, rgba(20, 8, 10, 0.55), transparent 65%),
		linear-gradient(160deg, #5d2830 0%, var(--sr-burgundy) 55%, #35161a 100%);
	overflow: clip;
}
.sr-process::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: radial-gradient(circle, rgba(248, 244, 237, .16) 1.1px, transparent 1.1px);
	background-size: 24px 24px;
	mask-image: radial-gradient(85% 62% at 50% 0%, black, transparent 78%);
}
.sr-process > * { position: relative; z-index: 1; }
/* Section chrome inverts on the dark ground. The step number stays burgundy:
 * it sits inside the cream card, not on the section background. */
.sr-process .sr-eyebrow,
.sr-process .sr-section__intro h2 { color: var(--sr-cream); }
.sr-process .sr-section__intro { margin-bottom: 4.5rem; }
.sr-process__num {
	display: inline-block;
	font-family: var(--sr-font-display);
	font-style: italic;
	font-size: clamp(2.7rem, 4.5vw, 4.15rem);
	line-height: 1;
	color: var(--sr-burgundy);
	opacity: 0.85;
	letter-spacing: -0.05em;
}
.sr-timeline {
	--sr-progress: 0;
	position: relative;
	list-style: none;
	margin: 0 auto;
	padding: 1.5rem 0 0.5rem;
	max-width: 960px;
}
/* Track + filling progress line */
.sr-timeline::before,
.sr-timeline::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 1px;
	transform: translateX(-50%);
}
/* Cream on the burgundy ground - the burgundy track/fill was invisible here. */
.sr-timeline::before { background: rgba(248, 244, 237, .22); }
.sr-timeline::after {
	background: var(--sr-cream);
	transform-origin: 50% 0%;
	transform: translateX(-50%) scaleY(var(--sr-progress));
}
.sr-timeline__step {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 5rem 1fr;
	margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
}
.sr-timeline__step:last-child { margin-bottom: 0; }
/* Diamond marker on the line */
.sr-timeline__marker {
	position: absolute;
	left: 50%;
	top: 0.35em;
	width: 11px;
	height: 11px;
	transform: translateX(-50%) rotate(45deg);
	background: transparent;
	border: 1px solid rgba(248, 244, 237, .55);
	z-index: 1;
	transition: background-color 380ms ease, box-shadow 380ms ease, transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
}
.sr-timeline__step.is-lit .sr-timeline__marker {
	background: var(--sr-cream);
	border-color: var(--sr-cream);
	transform: translateX(-50%) rotate(45deg) scale(1.25);
	box-shadow: 0 0 0 6px rgba(248, 244, 237, 0.12);
}
/* Cards — odd on the left (right-aligned), even on the right */
.sr-timeline__card {
	position: relative;
	max-width: 410px;
	padding: clamp(1.25rem, 2.4vw, 1.8rem);
	border: 1px solid transparent;
	border-radius: 14px;
	/* Layered creamy shine rather than a flat two-stop fade: a highlight off
	 * the top-left, a warm shadow into the bottom-right, over the cream base. */
	background:
		radial-gradient(115% 85% at 18% 8%, rgba(255, 255, 255, .95), transparent 58%),
		radial-gradient(100% 80% at 88% 92%, rgba(74, 31, 36, .07), transparent 62%),
		linear-gradient(135deg, #fbf7f0 0%, var(--sr-cream) 45%, #ece2d2 100%);
	box-shadow: 0 18px 40px rgba(20, 8, 10, 0);
	transition: border-color 500ms ease, box-shadow 500ms ease, background-color 500ms ease;
}
.sr-timeline__step.is-lit .sr-timeline__card {
	border-color: rgba(248, 244, 237, 0.28);
	box-shadow: 0 18px 40px rgba(20, 8, 10, 0.28);
}
.sr-timeline__step:nth-child(odd) .sr-timeline__card {
	grid-column: 1;
	justify-self: end;
	text-align: right;
}
.sr-timeline__step:nth-child(even) .sr-timeline__card {
	grid-column: 3;
	justify-self: start;
	text-align: left;
}
.sr-timeline__heading {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: .55rem;
}
.sr-timeline__motif {
	width: 118px;
	margin: .25rem 0 .75rem;
	color: var(--sr-burgundy);
	opacity: .44;
}
.sr-timeline__step:nth-child(odd) .sr-timeline__motif { margin-left: auto; }
.sr-timeline__motif .sr-stitch-motif__thread { stroke-dashoffset: 0; }
.sr-timeline__step.is-lit .sr-timeline__motif .sr-stitch-motif__thread {
	animation: sr-stitch-draw 1.7s cubic-bezier(.22,1,.36,1) both;
}
.sr-timeline__step.is-lit .sr-timeline__motif .sr-stitch-motif__needle {
	animation: sr-needle-glint 1.3s .15s ease-out both;
}
.sr-timeline__step.is-lit .sr-timeline__motif .sr-stitch-motif__bead {
	animation: sr-bead-set .55s .55s cubic-bezier(.34,1.56,.64,1) both;
}
.sr-timeline__card h3 {
	font-size: clamp(1.6rem, 2.8vw, 2.3rem);
	line-height: 1.04;
	margin-bottom: .85rem;
	font-weight: 470;
}
.sr-timeline__card p { font-size: .96rem; line-height: 1.65; margin-bottom: 0; }
.sr-anim .sr-timeline__card { opacity: 0; visibility: hidden; }

@keyframes sr-stitch-draw { from { stroke-dashoffset: 78; } to { stroke-dashoffset: 0; } }
@keyframes sr-needle-glint { 0% { transform: translate(-8px, -8px); opacity: 0; } 100% { transform: translate(0, 0); opacity: 1; } }
@keyframes sr-bead-set { from { transform: scale(0); } to { transform: scale(1); } }

@media (max-width: 760px) {
	.sr-timeline::before,
	.sr-timeline::after { left: 5px; }
	.sr-timeline__step { grid-template-columns: 1fr; }
	.sr-timeline__marker { left: 5px; }
	.sr-timeline__step:nth-child(odd) .sr-timeline__card,
	.sr-timeline__step:nth-child(even) .sr-timeline__card {
		grid-column: 1;
		justify-self: start;
		text-align: left;
		padding-left: 2.4rem;
		max-width: none;
	}
	.sr-timeline__card { padding: 1.2rem 1.15rem 1.25rem; }
	.sr-timeline__step:nth-child(odd) .sr-timeline__motif { margin-left: 0; }
}

/* ---------- Product cards ---------- */
ul.products li.product {
	text-align: center;
}
ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--sr-font-body);
	font-size: 0.92rem;
	font-weight: 500;
	letter-spacing: 0.03em;
	color: var(--sr-ink);
}
ul.products li.product .price,
.sr-price-on-inquiry {
	font-family: var(--sr-font-body);
	font-size: 0.9rem;
	color: var(--sr-burgundy);
	font-weight: 500;
}
.sr-price-on-inquiry {
	font-style: italic;
	letter-spacing: 0.04em;
}
ul.products li.product img {
	background: var(--sr-cream);
}

/* ---------- Single product ---------- */
.single-product div.product .product_title {
	font-size: clamp(1.7rem, 3.5vw, 2.4rem);
}
.single-product div.product p.price {
	font-size: 1.15rem;
	color: var(--sr-burgundy);
	font-weight: 500;
}
.sr-delivery-note {
	font-size: 0.88rem;
	letter-spacing: 0.02em;
	color: var(--sr-burgundy);
	background: var(--sr-cream);
	display: inline-block;
	padding: 0.5em 1em;
	margin: 0.5rem 0 1rem;
}
.sr-bridal-sizes { font-size: 0.9rem; }
.sr-bridal-sizes__label { font-weight: 600; }
.sr-bridal-note {
	max-width: 46ch;
	font-size: 0.92rem;
	color: var(--sr-ink);
}

/* Add-on fieldsets */
.sr-addons {
	border: 1px solid var(--sr-line);
	padding: 1rem 1.25rem 1.1rem;
	margin: 0 0 1.25rem;
}
.sr-addons legend {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--sr-burgundy);
	padding: 0 0.5em;
}
.sr-addon-option {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	margin: 0.4rem 0;
	font-size: 0.92rem;
}
.sr-addon-option .sr-addon-fee {
	margin-left: auto;
	color: var(--sr-burgundy);
	font-weight: 500;
	white-space: nowrap;
}
.sr-addon-option .amount { color: inherit; }

/* WhatsApp CTA */
.sr-whatsapp-inquire.button {
	display: inline-block;
	background: var(--sr-burgundy);
	color: var(--sr-white);
}
.sr-whatsapp-float {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 999;
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: var(--sr-burgundy);
	color: var(--sr-white);
	box-shadow: 0 6px 24px rgba(36, 20, 23, 0.28);
	transition: transform 160ms ease, background-color 160ms ease;
}
.sr-whatsapp-float:hover {
	background: var(--sr-burgundy-soft);
	color: var(--sr-white);
	transform: translateY(-2px);
}

/* ---------- Newsletter (editorial, floating label) ---------- */
.sr-newsletter { text-align: center; }
.sr-newsletter p { max-width: 46ch; margin: 0 auto 2.25rem; }
.sr-newsletter form {
	display: flex;
	gap: 1.25rem;
	justify-content: center;
	align-items: flex-end;
	flex-wrap: wrap;
	max-width: 560px;
	margin: 0 auto;
}
.sr-field {
	position: relative;
	flex: 1 1 280px;
	text-align: left;
}
.sr-field input {
	width: 100%;
	padding: 0.7em 0;
	border: 0;
	border-bottom: 1px solid var(--sr-line);
	background: transparent;
	color: var(--sr-ink);
	font-family: var(--sr-font-body);
	font-size: 1rem;
	transition: border-color 240ms ease;
}
.sr-field input:focus {
	outline: none;
	border-bottom-color: var(--sr-burgundy);
}
.sr-field label {
	position: absolute;
	left: 0;
	top: 0.7em;
	color: var(--sr-ink);
	opacity: 0.55;
	pointer-events: none;
	transition: transform 240ms ease, opacity 240ms ease, font-size 240ms ease;
	font-size: 0.95rem;
}
.sr-field input:focus + label,
.sr-field input:not(:placeholder-shown) + label {
	transform: translateY(-1.5em);
	font-size: 0.68rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	opacity: 0.9;
	color: var(--sr-burgundy);
}

/* ---------- Footer (deep burgundy close) ---------- */
.site-footer {
	background: var(--sr-burgundy);
	color: rgba(248, 244, 237, 0.85);
	border-top: 0;
	overflow: hidden;
	padding-inline: var(--sr-gutter);
}
/* Storefront's container is narrower than the rest of the site; align the
 * footer to the same content width so its columns line up with everything
 * above them. */
.site-footer .col-full {
	width: min(100%, var(--sr-content-max));
	max-width: none;
	margin-inline: auto;
	padding-inline: 0;
}
.site-footer h3,
.site-footer h4 {
	font-size: 0.72rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--sr-cream);
}
.site-footer a:not(.button),
.site-footer a {
	color: rgba(248, 244, 237, 0.85);
	text-decoration: none;
	position: relative;
}
.site-footer a:not(.button):hover,
.site-footer a:hover { color: var(--sr-white); }
.sr-footer-cols a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 100%;
	height: 1px;
	background: var(--sr-cream);
	transform: scaleX(0);
	transform-origin: 100% 50%;
	transition: transform 320ms cubic-bezier(0.65, 0, 0.35, 1);
}
.sr-footer-cols a:hover::after {
	transform: scaleX(1);
	transform-origin: 0% 50%;
}
.site-footer .site-info { color: rgba(248, 244, 237, 0.6); }
.sr-footer-wordmark {
	overflow: hidden;
	white-space: nowrap;
	text-align: center;
	padding-top: 3rem;
	line-height: 1;
	user-select: none;
}
.sr-footer-wordmark span {
	display: inline-block;
	font-family: var(--sr-font-display);
	font-weight: 500;
	font-size: clamp(4rem, 15vw, 13rem);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: transparent;
	-webkit-text-stroke: 1px rgba(248, 244, 237, 0.3);
}

/* ---------- Order terms + size chart ---------- */
.sr-order-terms {
	list-style: none;
	margin: 1.25rem 0 0;
	padding: 1rem 1.25rem;
	background: var(--sr-cream);
	font-size: 0.85rem;
}
.sr-order-terms li {
	margin: 0.25rem 0;
	padding-left: 1.1rem;
	position: relative;
}
.sr-order-terms li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 4px;
	height: 4px;
	background: var(--sr-burgundy);
	transform: rotate(45deg);
}
.sr-linklike {
	background: none;
	border: 0;
	padding: 0;
	color: var(--sr-burgundy);
	text-decoration: underline;
	text-underline-offset: 3px;
	font-size: 0.88rem;
	letter-spacing: 0.02em;
	text-transform: none;
	font-weight: 500;
}
.sr-linklike:hover { background: none; color: var(--sr-burgundy-soft); }
.sr-size-chart {
	border: 1px solid var(--sr-line);
	padding: 2rem;
	max-width: min(480px, 92vw);
}
.sr-size-chart::backdrop { background: rgba(36, 20, 23, 0.45); }
.sr-size-chart table { width: 100%; margin: 1rem 0; }
.sr-size-chart th, .sr-size-chart td {
	padding: 0.45em 0.6em;
	border-bottom: 1px solid var(--sr-line);
	text-align: left;
	font-size: 0.9rem;
}
.sr-size-chart__note { font-size: 0.85rem; }

/* ---------- Cart / checkout (WooCommerce block markup) ---------- */
/* The block cart renders its own React markup; these align it to the house
 * type and palette rather than restyling it wholesale. */
.woocommerce-cart .wp-block-woocommerce-cart,
.woocommerce-checkout .wp-block-woocommerce-checkout {
	width: min(100%, var(--sr-content-max));
	margin-inline: auto;
}
.wc-block-components-title,
.wc-block-cart__totals-title,
.wp-block-woocommerce-cart h1,
.wp-block-woocommerce-cart h2 {
	font-family: var(--sr-font-display) !important;
	color: var(--sr-burgundy);
	letter-spacing: -.01em;
}
.wc-block-cart-item__product-name,
.wc-block-components-product-name {
	font-family: var(--sr-font-display);
	font-size: 1.05rem;
	color: var(--sr-burgundy);
	text-decoration: none;
}
.wc-block-components-totals-item__value,
.wc-block-components-product-price__value {
	font-family: var(--sr-font-body);
	font-weight: 600;
}
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	border-radius: 0;
	background: var(--sr-burgundy);
	font-family: var(--sr-font-body);
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
}
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover { background: var(--sr-burgundy-soft); }
/* Empty-cart state should invite browsing, not dead-end. */
.wp-block-woocommerce-empty-cart-block { text-align: center; }

/* Standalone placeholder (product gallery, block grids) - the loop-card rule
 * sizes itself from .sr-card-media, which does not exist in those contexts. */
.sr-card-ph--solo {
	aspect-ratio: 3 / 4;
	width: 100%;
	border-radius: 12px;
	overflow: hidden;
}
.sr-gallery-ph { display: block; width: 100%; }
.sr-gallery-ph .sr-card-ph--solo { border-radius: 0; }

/* WooCommerce notices: the stock blue/green chrome clashes badly with the
 * burgundy and cream palette, and shows up on empty search and add-to-cart. */
.woocommerce-info,
.woocommerce-message,
.woocommerce-error,
.woocommerce-noreviews,
.wc-block-components-notice-banner {
	border-top-color: var(--sr-burgundy) !important;
	background: var(--sr-cream);
	color: var(--sr-ink);
	border-radius: 10px;
	font-size: .92rem;
}
.woocommerce-info::before,
.woocommerce-message::before,
.wc-block-components-notice-banner svg { color: var(--sr-burgundy) !important; fill: var(--sr-burgundy); }
.woocommerce-info a,
.woocommerce-message a { color: var(--sr-burgundy); }

/* Empty search / empty cart: give the dead end a way out. */
.sr-deadend {
	max-width: 52ch;
	margin: 2rem auto 0;
	text-align: center;
}
.sr-deadend__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	justify-content: center;
	margin-top: 1.4rem;
}
.sr-deadend form.woocommerce-product-search {
	display: flex;
	gap: .5rem;
	margin: 1.4rem auto 0;
	max-width: 30rem;
}
.sr-deadend form.woocommerce-product-search input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	border: 1px solid rgba(74, 31, 36, .28);
	border-radius: 8px;
	padding: .7em .9em;
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__products img { border-radius: 10px; }

/* Storefront leaves a purple focus outline that fires on mouse click and
 * clashes with the palette; this theme's own :focus-visible rule is correct. */
a:focus,
.woocommerce-active a:focus {
	outline-color: var(--sr-burgundy);
	color: inherit;
}
a:focus:not(:focus-visible) { outline: none; }

/* Honeypot: off-screen rather than display:none, which some bots detect. */
.sr-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.sr-newsletter__consent {
	margin: .9rem auto 0;
	max-width: 42ch;
	font-size: .8rem;
	line-height: 1.5;
}
.sr-newsletter__consent label { display: flex; gap: .55rem; align-items: flex-start; text-align: left; }
.sr-newsletter__consent input { margin-top: .2em; flex: none; }
.sr-newsletter__status {
	margin: 0 auto 1rem;
	padding: .7em 1.2em;
	max-width: 46ch;
	border: 1px solid rgba(74, 31, 36, .18);
	border-radius: 10px;
	background: rgba(255, 255, 255, .6);
	font-size: .9rem;
}

/* ---------- Trust strip (product page + cart) ---------- */
.sr-trust {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: clamp(.9rem, 2vw, 1.6rem);
	margin: 2rem 0 0;
	padding: clamp(1.1rem, 2.4vw, 1.6rem);
	list-style: none;
	border: 1px solid rgba(74, 31, 36, .14);
	border-radius: 14px;
	background:
		radial-gradient(115% 85% at 18% 8%, rgba(255, 255, 255, .9), transparent 58%),
		linear-gradient(135deg, #fbf7f0 0%, var(--sr-cream) 55%, #f0e7da 100%);
}
.sr-trust__item { margin: 0; }
.sr-trust__item strong {
	display: block;
	margin-bottom: .3rem;
	font-family: var(--sr-font-body);
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--sr-burgundy);
}
.sr-trust__item span {
	display: block;
	font-size: .86rem;
	line-height: 1.6;
	color: rgba(36, 20, 23, .82);
}
.sr-cart-trust {
	width: min(100%, var(--sr-content-max));
	margin: 2.5rem auto 0;
	padding-inline: var(--sr-gutter);
}

/* ---------- Footer columns ---------- */
.sr-footer-cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 2rem;
	margin: 0 auto;
	padding: 2.5rem 0 1rem;
}
.sr-footer-cols ul { list-style: none; margin: 0; padding: 0; }
.sr-footer-cols li { margin: 0.4rem 0; font-size: 0.9rem; }

/* ============================================================
   Interaction layer — smooth scroll, reveals, micro-interactions
   ============================================================ */

::selection {
	background: var(--sr-burgundy);
	color: var(--sr-cream);
}
body { overflow-x: clip; }
/* Storefront ships `.site { overflow-x: hidden }`. Per spec a hidden value on
 * one axis forces the other to `auto`, which turns #page into a scroll
 * container and silently disables `position: sticky` for every descendant.
 * `clip` contains horizontal overflow just as well without that side effect. */
.site { overflow-x: clip; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
html {
	scrollbar-width: thin;
	scrollbar-color: var(--sr-burgundy) var(--sr-cream);
}

/* Pre-reveal states — only when JS is present and motion allowed (.sr-anim). */
.sr-anim [data-sr-reveal] { opacity: 0; visibility: hidden; }
.sr-anim .sr-hero p,
.sr-anim .sr-hero .sr-hero-actions > *,
.sr-anim .sr-hero .sr-eyebrow { opacity: 0; visibility: hidden; }
.sr-anim .sr-hero .sr-divider .dot,
.sr-anim .sr-divider .dot { transform: rotate(45deg) scale(0); }

/* ---------- Sticky header ---------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 990;
	transition: transform 420ms cubic-bezier(0.65, 0, 0.35, 1), box-shadow 300ms ease, background-color 300ms ease;
}
.sr-scrolled .site-header {
	background: rgba(255, 255, 255, 0.86);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	box-shadow: 0 1px 0 var(--sr-line);
}
.sr-header-hidden .site-header { transform: translateY(-100%); }

/* Nav underline sweep */
.main-navigation ul li a {
	position: relative;
}
.main-navigation ul.menu > li > a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0.35em;
	width: 100%;
	height: 1px;
	background: var(--sr-burgundy);
	transform: scaleX(0);
	transform-origin: 100% 50%;
	transition: transform 320ms cubic-bezier(0.65, 0, 0.35, 1);
}
.main-navigation ul.menu > li > a:hover::after,
.main-navigation ul.menu > li.current-menu-item > a::after {
	transform: scaleX(1);
	transform-origin: 0% 50%;
}

/* ---------- Buttons: sweep fill ---------- */
.button, button[type="submit"], input[type="submit"] {
	position: relative;
	overflow: hidden;
	z-index: 0;
}
.button::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--sr-burgundy-soft);
	transform: translateX(-102%);
	transition: transform 420ms cubic-bezier(0.65, 0, 0.35, 1);
	z-index: -1;
}
.button:hover::before { transform: translateX(0); }
.button.sr-ghost::before { background: var(--sr-burgundy); }
.button > span { position: relative; z-index: 1; }

/* ---------- Hero ---------- */
.sr-hero {
	position: relative;
	overflow: hidden;
}
.sr-hero > * { position: relative; z-index: 1; }
.sr-ornament { width: 100%; height: auto; display: block; }
/* Masked-line primitives (hero, manifesto, any [data-sr-lines] block) */
.sr-line {
	display: block;
	overflow: hidden;
	padding-bottom: 0.09em;
	margin-bottom: -0.09em;
}
.sr-line-inner { display: inline-block; }
.sr-anim .sr-hero .sr-line-inner,
.sr-anim [data-sr-lines] .sr-line-inner { transform: translateY(112%); }
/* Failsafe: the masked lines above are held off-screen waiting for GSAP. If
 * anything stops the hero timeline running, this slides them back unaided so
 * the headline can never end up permanently invisible. GSAP sets an inline
 * transform the moment it takes over, which outranks this rule. */
@keyframes sr-line-failsafe { to { transform: translateY(0); } }
.sr-anim .sr-hero .sr-line-inner {
	animation: sr-line-failsafe 1ms linear 3s forwards;
}

/* Full-bleed image hero: background fills the section edge-to-edge, content
 * centred over a scrim. Fashion-store pattern - the piece is the backdrop,
 * type and the two CTAs sit on top of it, not beside it. */
.sr-hero--full {
	display: grid;
	place-items: center;
	text-align: center;
	padding: clamp(6rem, 15vw, 10rem) var(--sr-gutter) clamp(4rem, 9vw, 6rem);
	min-height: min(94vh, 980px);
}
.sr-hero__bg {
	position: absolute;
	/* Overhang top and bottom by more than the parallax travel (data-sr-parallax="6"
	 * shifts this ±6%), otherwise the scroll exposes a bare strip at each end. */
	left: 0;
	right: 0;
	top: -11%;
	height: 122%;
	z-index: 0;
	background:
		radial-gradient(120% 90% at 30% 20%, rgba(248, 244, 237, 0.10), transparent 55%),
		radial-gradient(130% 110% at 75% 90%, rgba(20, 8, 10, 0.55), transparent 65%),
		linear-gradient(160deg, #5d2830 0%, var(--sr-burgundy) 55%, #35161a 100%);
}
.sr-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
}
/* With real photography behind it the type needs a heavier scrim than the
 * flat gradient placeholder required. */
.sr-hero--photo .sr-hero__scrim {
	background:
		linear-gradient(180deg, rgba(28, 14, 16, 0.52) 0%, rgba(28, 14, 16, 0.34) 45%, rgba(28, 14, 16, 0.68) 100%);
}
.sr-hero__bg .sr-ornament {
	position: absolute;
	top: 50%;
	left: 50%;
	width: min(140%, 980px);
	transform: translate(-50%, -50%);
	color: var(--sr-cream);
	opacity: 0.1;
}
.sr-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(180deg, rgba(36, 20, 23, 0.28) 0%, rgba(36, 20, 23, 0.18) 45%, rgba(36, 20, 23, 0.55) 100%);
}
.sr-hero--full .sr-hero__content { max-width: 680px; }
.sr-hero--full .sr-eyebrow { color: var(--sr-cream); opacity: 0.88; }
.sr-hero--full h1 { color: var(--sr-white); margin-left: 0; max-width: none; }
.sr-hero--full p { color: rgba(248, 244, 237, 0.9); margin-left: 0; max-width: 46ch; margin-inline: auto; }
.sr-hero--full .sr-hero-actions { justify-content: center; }
.sr-hero--full .button.sr-ghost { color: var(--sr-cream); border-color: rgba(248, 244, 237, 0.7); }
.sr-hero--full .button.sr-ghost::before { background: var(--sr-cream); }
.sr-hero--full .button.sr-ghost:hover,
.sr-hero--full .button.sr-ghost:focus-visible { color: var(--sr-burgundy); }
.sr-hero__caption {
	display: block;
	margin-top: 2.5rem;
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--sr-cream);
	opacity: 0.55;
}

/* Placeholder visuals — swapped for photography when it arrives */
.sr-ph {
	position: absolute;
	left: 0;
	right: 0;
	top: -8%;
	height: 116%;
	display: grid;
	place-items: center;
	overflow: hidden;
}
.sr-ph--warm {
	background:
		radial-gradient(120% 90% at 25% 15%, rgba(74, 31, 36, 0.1), transparent 55%),
		radial-gradient(110% 100% at 80% 85%, rgba(74, 31, 36, 0.18), transparent 60%),
		linear-gradient(160deg, #f4ede1 0%, var(--sr-cream) 45%, #ecdfcd 100%);
}
.sr-ph--deep {
	background:
		radial-gradient(120% 90% at 30% 20%, rgba(248, 244, 237, 0.1), transparent 55%),
		radial-gradient(130% 110% at 75% 90%, rgba(20, 8, 10, 0.55), transparent 65%),
		linear-gradient(160deg, #5d2830 0%, var(--sr-burgundy) 55%, #35161a 100%);
}
.sr-ph .sr-ornament {
	width: min(70%, 420px);
	color: var(--sr-burgundy);
	opacity: 0.14;
}
.sr-ph--deep .sr-ornament {
	color: var(--sr-cream);
	opacity: 0.12;
}
.sr-ph__caption {
	position: absolute;
	left: 1.4rem;
	bottom: calc(8% + 1.2rem);
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--sr-burgundy);
	opacity: 0.5;
	padding-left: 2.2rem;
}
.sr-ph__caption::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 1.6rem;
	height: 1px;
	background: currentColor;
}
.sr-ph--deep .sr-ph__caption { color: var(--sr-cream); opacity: 0.55; }

/* ---------- Marquee ---------- */
.sr-marquee {
	overflow: hidden;
	border-top: 1px solid var(--sr-line);
	border-bottom: 1px solid var(--sr-line);
	padding: 1.1rem 0;
	background: var(--sr-white);
}
.sr-marquee__track {
	display: flex;
	width: max-content;
	will-change: transform;
}
.sr-marquee__group {
	display: flex;
	align-items: center;
	gap: 2.75rem;
	padding-right: 2.75rem;
	white-space: nowrap;
}
.sr-marquee__group span {
	font-family: var(--sr-font-display);
	font-size: clamp(1.05rem, 2vw, 1.45rem);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sr-burgundy);
}
.sr-marquee__group span em {
	font-style: italic;
	text-transform: none;
	letter-spacing: 0.04em;
}
.sr-marquee__group i {
	font-style: normal;
	font-size: 0.55rem;
	color: var(--sr-burgundy);
	opacity: 0.55;
}

/* ---------- Product cards ---------- */
ul.products li.product {
	position: relative;
}
.sr-card-media {
	position: relative;
	overflow: hidden;
	background: var(--sr-cream);
	margin-bottom: 1.1rem;
	isolation: isolate;
}
.sr-card-media img {
	display: block;
	width: 100%;
	margin: 0 !important;
	transform: scale(1.001);
	transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}
ul.products li.product:hover .sr-card-media img {
	transform: scale(1.065);
	filter: saturate(.82) contrast(1.05) sepia(.1);
}
.sr-card-media::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(120deg, transparent 18%, rgba(248,244,237,.58) 48%, transparent 74%);
	transform: translateX(-145%) skewX(-16deg);
	transition: transform 950ms cubic-bezier(.22,1,.36,1);
}
.sr-card-media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: 0;
	background: radial-gradient(circle at 78% 16%, rgba(248,244,237,.3) 0 2px, transparent 2.5px 100%), linear-gradient(145deg, rgba(74,31,36,.02), rgba(74,31,36,.32));
	background-size: 18px 18px, auto;
	transition: opacity 480ms ease;
}
ul.products li.product:hover .sr-card-media::before { transform: translateX(145%) skewX(-16deg); }
ul.products li.product:hover .sr-card-media::after { opacity: 1; }
.sr-card-veil {
	position: absolute;
	inset: 0;
	z-index: 2;
	background: linear-gradient(to top, rgba(74, 31, 36, 0.14), transparent 45%);
	opacity: 0;
	transition: opacity 420ms ease;
	pointer-events: none;
}
ul.products li.product:hover .sr-card-veil { opacity: 1; }
ul.products li.product .woocommerce-loop-product__title {
	position: relative;
	display: inline-block;
	transition: color 240ms ease;
}
ul.products li.product:hover .woocommerce-loop-product__title { color: var(--sr-burgundy); }
ul.products li.product .button {
	transition: background-color 240ms ease, color 240ms ease, opacity 300ms ease, transform 300ms ease;
}

/* ---------- Product card detail ---------- */
/* The card is a single surface: media on top, then a body carrying badge,
 * price, copy, specs, sizes and the two calls to action. */
ul.products li.product {
	display: flex;
	flex-direction: column;
	background: var(--sr-white);
	border: 1px solid rgba(74, 31, 36, .1);
	border-radius: 16px;
	overflow: hidden;
	transition: border-color 320ms ease, box-shadow 420ms ease, transform 420ms cubic-bezier(.22, 1, .36, 1);
}
ul.products li.product:hover {
	border-color: rgba(74, 31, 36, .2);
	box-shadow: 0 22px 48px -24px rgba(74, 31, 36, .38);
	transform: translateY(-3px);
}
/* One fixed ratio for every card, whatever the source image. Mixed portrait
 * photos and square placeholders were what made the grid look ragged. */
.sr-card-media {
	margin-bottom: 0;
	border-radius: 0;
	aspect-ratio: 3 / 4;
}
.sr-card-media__link { display: block; height: 100%; }
.sr-card-media img {
	height: 100%;
	object-fit: cover;
}
/* House placeholder for products with no photograph yet. */
.sr-card-ph {
	display: grid;
	place-items: center;
	height: 100%;
	background:
		radial-gradient(120% 90% at 25% 15%, rgba(74, 31, 36, .08), transparent 55%),
		linear-gradient(160deg, #f4ede1 0%, var(--sr-cream) 45%, #ecdfcd 100%);
}
.sr-card-ph .sr-ornament {
	width: 58%;
	color: var(--sr-burgundy);
	opacity: .16;
}
.sr-card-badge {
	position: absolute;
	z-index: 3;
	top: .9rem;
	left: .9rem;
	padding: .5em 1.05em;
	border-radius: 999px;
	background: rgba(255, 255, 255, .92);
	color: var(--sr-burgundy);
	font-family: var(--sr-font-body);
	font-size: .62rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	white-space: nowrap;
	backdrop-filter: blur(6px);
	box-shadow: 0 2px 10px rgba(74, 31, 36, .14);
}
.sr-card-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: .55rem;
	padding: 1.25rem 1.3rem 1.4rem;
	text-align: left;
}
ul.products li.product .sr-card-body .woocommerce-loop-product__title {
	margin: 0;
	padding: 0;
	font-size: 1.24rem;
}
.sr-card-body .woocommerce-loop-product__title a { text-decoration: none; }
ul.products li.product .sr-card-body .price,
.sr-card-body .sr-price-on-inquiry {
	margin: 0;
	font-family: var(--sr-font-body);
	font-size: .92rem;
	font-weight: 600;
	letter-spacing: .01em;
}
.sr-card-excerpt {
	margin: .15rem 0 0;
	font-size: .88rem;
	line-height: 1.6;
	color: rgba(36, 20, 23, .78);
}
/* Specs: hairline-separated label/value rows, same rhythm as the pillars. */
.sr-card-specs {
	margin: .5rem 0 0;
	padding-top: .8rem;
	border-top: 1px solid rgba(74, 31, 36, .12);
	font-size: .82rem;
	line-height: 1.55;
}
.sr-card-spec { display: flex; gap: .4em; }
.sr-card-spec dt { font-weight: 700; color: var(--sr-burgundy); flex: none; }
.sr-card-spec dt::after { content: ":"; }
/* Long attribute lists are clamped so one verbose product cannot make its card
 * taller than the rest of the row. */
.sr-card-spec dd {
	margin: 0;
	color: rgba(36, 20, 23, .8);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
/* Size pills */
.sr-card-sizes {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin: .55rem 0 0;
	padding: 0;
	list-style: none;
}
.sr-card-sizes li { margin: 0; }
.sr-card-sizes a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.1rem;
	padding: .34em .52em;
	border: 1px solid rgba(74, 31, 36, .28);
	border-radius: 7px;
	font-family: var(--sr-font-body);
	font-size: .66rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--sr-burgundy);
	transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}
.sr-card-sizes a:hover,
.sr-card-sizes a:focus-visible {
	background: var(--sr-burgundy);
	border-color: var(--sr-burgundy);
	color: var(--sr-cream);
}
/* Touch devices get a 44px target; pointer devices keep the tighter pill so
 * the row still fits the card. */
@media (pointer: coarse) {
	.sr-card-sizes a {
		min-width: 44px;
		min-height: 44px;
		font-size: .72rem;
	}
}
/* Actions pinned to the foot so cards in a row line up. */
.sr-card-actions {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	margin-top: auto;
	padding-top: 1rem;
}
ul.products li.product .sr-card-actions .button {
	width: 100%;
	margin: 0;
	text-align: center;
	font-size: .72rem;
	padding: .95em 1.2em;
}
/* The stock loop hides its button until hover; these are always available. */
@media (pointer: fine) {
	ul.products li.product .sr-card-actions .button {
		opacity: 1;
		transform: none;
	}
}

/* ---------- Burgundy spotlight section ---------- */
.sr-section--burgundy {
	background: var(--sr-burgundy);
	color: rgba(248, 244, 237, 0.88);
}
.sr-section--burgundy .sr-eyebrow { color: var(--sr-cream); }
.sr-section--burgundy h2 { color: var(--sr-cream); }
.sr-section--burgundy ul.products li.product .woocommerce-loop-product__title { color: var(--sr-cream); }
.sr-section--burgundy .sr-price-on-inquiry { color: rgba(248, 244, 237, 0.75); }
.sr-section--burgundy .sr-card-media { background: rgba(248, 244, 237, 0.08); }
.sr-section--burgundy ul.products li.product .button,
.sr-section--burgundy .sr-whatsapp-inquire.button {
	background: transparent;
	border-color: rgba(248, 244, 237, 0.5);
	color: var(--sr-cream);
}
.sr-section--burgundy .button::before { background: var(--sr-cream); }
.sr-section--burgundy ul.products li.product .button:hover { color: var(--sr-burgundy); }

/* ---------- Responsive: story sections ---------- */
@media (max-width: 900px) {
	.sr-story__intro { max-width: 620px; }
	.sr-story__frame { margin-inline: 0; }
	.sr-story__title { margin-top: -1.6em; }
	.sr-hero--full { min-height: min(78vh, 720px); padding: clamp(4.5rem, 16vw, 6rem) var(--sr-gutter) 3rem; }
	.sr-split { grid-template-columns: 1fr; }
	.sr-split--flip .sr-split__visual { order: 0; }
	.sr-split__visual { min-height: 46vh; }
	.sr-split__content { max-width: none; }
	.sr-values { min-height: 70vh; }
	.sr-values__word--2 { top: auto; bottom: 30%; }
	.sr-process__steps { grid-template-columns: 1fr; gap: 2.5rem; }
	.sr-process__steps li { border-left: 0; border-top: 1px solid var(--sr-line); padding: 2rem 0 0; }
	.sr-process__steps li:first-child { border-top: 0; padding-top: 0.5rem; }
}

@media (max-width: 700px) {
	.sr-shop-gateway__grid,
	.sr-shop-gateway__grid--3 { grid-template-columns: 1fr; }
	.sr-route { min-height: 275px; }
	.sr-route__art { width: min(48%, 165px); }
	.sr-rowhead { align-items: flex-start; }
	.sr-atelier__actions { width: 100%; justify-content: space-between; }
	.sr-product-rail ul.products li.product { width: min(76vw, 310px) !important; }
}

/* ---------- Preloader ---------- */
.sr-preloader {
	position: fixed;
	inset: 0;
	z-index: 99998;
	display: none;
	align-items: center;
	justify-content: center;
	background: var(--sr-burgundy);
}
.sr-preload .sr-preloader { display: flex; }
.sr-preloader__word {
	display: flex;
	overflow: hidden;
	font-family: var(--sr-font-display);
	font-size: clamp(1.4rem, 4vw, 2.4rem);
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--sr-cream);
}
.sr-preloader__word span {
	display: inline-block;
	transform: translateY(110%);
	opacity: 0;
}
/* While preloading, pin the page under the overlay */
.sr-preload body { overflow: hidden; }

/* ---------- Page-transition curtain ---------- */
.sr-curtain {
	position: fixed;
	inset: 0;
	z-index: 99997;
	background: var(--sr-burgundy);
	transform: scaleY(0);
	transform-origin: 50% 100%;
	pointer-events: none;
}
.sr-curtain-in .sr-curtain { transform: scaleY(1); }

/* ---------- Custom cursor ---------- */
.sr-cursor-ring,
.sr-cursor-dot {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 99999;
	pointer-events: none;
	border-radius: 50%;
	display: none;
}
.sr-cursor-on .sr-cursor-ring,
.sr-cursor-on .sr-cursor-dot { display: block; }
.sr-cursor-dot {
	width: 4px;
	height: 4px;
	margin: -2px 0 0 -2px;
	background: var(--sr-burgundy);
	transition: opacity 200ms ease;
}
.sr-cursor-ring {
	width: 34px;
	height: 34px;
	margin: -17px 0 0 -17px;
	border: 1px solid rgba(74, 31, 36, 0.45);
	transition: width 320ms cubic-bezier(0.22, 1, 0.36, 1), height 320ms cubic-bezier(0.22, 1, 0.36, 1), margin 320ms cubic-bezier(0.22, 1, 0.36, 1), background-color 260ms ease, border-color 260ms ease, opacity 200ms ease;
}
.sr-cursor-ring::after {
	content: attr(data-label);
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-family: var(--sr-font-body);
	font-size: 0.6rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sr-cream);
	opacity: 0;
	transition: opacity 200ms ease;
}
.sr-cursor-hover .sr-cursor-ring {
	width: 52px;
	height: 52px;
	margin: -26px 0 0 -26px;
	border-color: rgba(74, 31, 36, 0.7);
}
.sr-cursor-label .sr-cursor-ring {
	width: 68px;
	height: 68px;
	margin: -34px 0 0 -34px;
	background: rgba(74, 31, 36, 0.92);
	border-color: transparent;
}
.sr-cursor-label .sr-cursor-ring::after { opacity: 1; }
.sr-cursor-gone .sr-cursor-ring,
.sr-cursor-gone .sr-cursor-dot { opacity: 0; }

/* ---------- Single product: gallery zoom ---------- */
.single-product .woocommerce-product-gallery__image {
	overflow: hidden;
}
.single-product .woocommerce-product-gallery__image img {
	transition: transform 1100ms cubic-bezier(0.22, 1, 0.36, 1);
}
.single-product .woocommerce-product-gallery__image:hover img { transform: scale(1.04); }

/* Add-on rows: hover nudge */
.sr-addon-option { transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1); }
.sr-addon-option:hover { transform: translateX(4px); }

/* ---------- Motion restraint ---------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		transition: none !important;
		animation: none !important;
	}
	.sr-anim [data-sr-reveal],
	.sr-anim .sr-hero p,
	.sr-anim .sr-hero .sr-hero-actions > *,
	.sr-anim .sr-hero .sr-eyebrow { opacity: 1; visibility: visible; }
	.sr-anim .sr-hero .sr-line-inner,
	.sr-anim [data-sr-lines] .sr-line-inner { transform: none; }
	.sr-anim .sr-divider .dot { transform: rotate(45deg); }
	.sr-anim .sr-timeline__card { opacity: 1; visibility: visible; }
	.sr-timeline { --sr-progress: 1; }
	.sr-timeline__step .sr-timeline__marker { background: var(--sr-burgundy); }
	.sr-cursor-ring, .sr-cursor-dot { display: none !important; }
}
/* Motion-off flag (set by JS for reduced-motion users): restore everything */
.sr-motion-off [data-sr-reveal],
.sr-motion-off .sr-hero p,
.sr-motion-off .sr-hero .sr-hero-actions > *,
.sr-motion-off .sr-hero .sr-eyebrow { opacity: 1 !important; visibility: visible !important; }
.sr-motion-off .sr-hero .sr-line-inner,
.sr-motion-off [data-sr-lines] .sr-line-inner { transform: none !important; }
.sr-motion-off .sr-timeline__card { opacity: 1 !important; visibility: visible !important; }
.sr-motion-off .sr-timeline { --sr-progress: 1; }
.sr-motion-off .sr-timeline__marker { background: var(--sr-burgundy) !important; }
.sr-motion-off .sr-divider .dot { transform: rotate(45deg) !important; }
.sr-motion-off .sr-motif *,
.sr-motion-off .sr-stitch-motif * { animation: none !important; }