@charset "UTF-8";
/* ==========================================================================
   LÉYA — Chrome and editorial layout
   Announce bar · header · navigation · drawers · footer · homepage sections
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Announcement bar
   --------------------------------------------------------------------------
   One message at a time, cross-fading. Not a marquee: a scrolling ticker is
   unreadable in Arabic (it fights the reading direction) and is the single
   loudest "template store" signal in the category.
   -------------------------------------------------------------------------- */

.announce {
	position: relative;
	z-index: calc(var(--z-header) + 1);
	background: var(--wine);
	color: var(--paper);
	text-align: center;
}

.announce__viewport {
	position: relative;
	height: var(--announce-h);
	display: grid;
	place-items: center;
	padding-inline: 48px;
	overflow: hidden;
}

/* Both messages share one grid cell, so the fade has to be staggered rather
   than a true cross-fade: if the outgoing and incoming animate together they
   are each ~50% opaque at the midpoint and the two Arabic strings render on
   top of one another as unreadable overlap. The outgoing clears first, then
   the incoming starts. */
.announce__msg {
	grid-area: 1 / 1;
	font-size: var(--t-xs);
	line-height: 1.3;
	letter-spacing: .01em;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity var(--d-2) var(--ease), transform var(--d-2) var(--ease);
	pointer-events: none;
}
.announce__msg.is-active {
	opacity: .92;
	transform: none;
	pointer-events: auto;
	transition-delay: var(--d-2);
}
.announce__msg a { text-decoration: underline; text-underline-offset: .2em; }

.announce__close {
	position: absolute;
	inset-inline-end: 0;
	inset-block-start: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	color: var(--paper);
	opacity: .6;
	transition: opacity var(--d-1) var(--ease);
}
.announce__close:hover { opacity: 1; }

.announce.is-closed { display: none; }

/* --------------------------------------------------------------------------
   2. Header
   -------------------------------------------------------------------------- */

.site-header {
	position: sticky;
	inset-block-start: 0;
	z-index: var(--z-header);
	background: var(--paper);
	border-block-end: 1px solid transparent;
	transition:
		background-color var(--d-2) var(--ease),
		border-color var(--d-2) var(--ease),
		transform var(--d-2) var(--ease);
}

.header__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--s-4);
	min-height: var(--header-h);
}

.header__left,
.header__right {
	display: flex;
	align-items: center;
	gap: var(--s-1);
}
.header__right { justify-content: flex-end; }

.header__burger { display: none; }

/* --- Wordmark ------------------------------------------------------------- */

.brand {
	justify-self: center;
	display: flex;
	align-items: center;
}
.brand a { display: block; }

/* The wordmark is a two-line lockup — LÉYA over ABAYÁS — so it needs more
   height than a single-line one before the lower line becomes legible. Sized
   from its own 800×358 proportions rather than a generic logo height. */
.brand img {
	width: auto;
	height: clamp(34px, 1.6vw + 26px, 50px);
	object-fit: contain;
	transition: opacity var(--d-2) var(--ease);
}
.brand .custom-logo-link img { max-height: 56px; }

/* Text fallback when no logo image is set — still looks like a house mark. */
.brand__text {
	font-family: var(--font-latin);
	font-size: clamp(1.25rem, .9rem + 1.1vw, 1.75rem);
	font-weight: 500;
	letter-spacing: .16em;
	line-height: 1;
	color: var(--wine);
	text-transform: uppercase;
	padding-inline-start: .16em; /* optical: balances the trailing tracking */
}

/* --- Transparent header over the homepage hero ----------------------------
   The header stays `sticky` in every mode, never `fixed`. A fixed header is
   removed from flow and lands on top of the announcement bar above it; sticky
   keeps its place in the document, so announce → header → hero stack correctly
   and the header still pins to the top once the announce scrolls away.

   The overlay is achieved by pulling the hero up underneath the transparent
   header instead, which is the same visual result with none of the stacking
   problems. */

.has-overlay-header .site-header {
	background: transparent;
	color: var(--paper);
}

.has-overlay-header .hero {
	margin-block-start: calc(var(--header-h) * -1);
}
.has-overlay-header .site-header .iconbtn { color: var(--paper); }
.has-overlay-header .site-header .iconbtn:hover { background: rgba(251, 248, 244, .14); color: var(--paper); }
.has-overlay-header .site-header .nav-primary > ul > li > a { color: var(--paper); }
.has-overlay-header .site-header .brand__text { color: var(--paper); }
.has-overlay-header .site-header .brand img { filter: brightness(0) invert(1); }

/* Once the hero is behind us the header solidifies. Added by JS on scroll. */
.site-header.is-solid,
.has-overlay-header .site-header.is-solid {
	background: var(--paper);
	color: var(--ink);
	border-block-end-color: var(--line-soft);
	backdrop-filter: saturate(140%) blur(8px);
}
.has-overlay-header .site-header.is-solid .iconbtn,
.has-overlay-header .site-header.is-solid .nav-primary > ul > li > a { color: var(--ink); }
.has-overlay-header .site-header.is-solid .iconbtn:hover { background: var(--wine-wash); color: var(--wine); }
.has-overlay-header .site-header.is-solid .brand__text { color: var(--wine); }
.has-overlay-header .site-header.is-solid .brand img { filter: none; }

/* Hides on scroll-down, returns on scroll-up — gives a tall product page back
   its full viewport without costing the customer the bag button. */
.site-header.is-hidden { transform: translateY(-115%); }
.site-header.is-hidden .mega { visibility: hidden; }

/* --------------------------------------------------------------------------
   3. Primary navigation
   -------------------------------------------------------------------------- */

.nav-primary > ul {
	display: flex;
	align-items: center;
	gap: clamp(var(--s-4), 1.6vw, var(--s-6));
}

.nav-primary > ul > li { position: static; }

.nav-primary > ul > li > a {
	position: relative;
	display: block;
	padding-block: var(--s-3);
	font-size: var(--t-sm);
	font-weight: 400;
	line-height: 1.4;
	color: var(--ink);
	white-space: nowrap;
	transition: color var(--d-1) var(--ease);
}

/* Underline grows from the reading edge — inline-start, so it opens rightwards
   in Arabic and leftwards in English without a separate RTL rule. */
.nav-primary > ul > li > a::after {
	content: "";
	position: absolute;
	inset-block-end: calc(var(--s-3) - 4px);
	inset-inline-start: 0;
	width: 100%;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: inline-start;
	transition: transform var(--d-2) var(--ease);
}
.nav-primary > ul > li > a:hover::after,
.nav-primary > ul > li.is-open > a::after,
.nav-primary > ul > li.current-menu-item > a::after,
.nav-primary > ul > li.current-menu-parent > a::after { transform: scaleX(1); }

.nav-primary .menu-item-has-children > a { display: inline-flex; align-items: center; gap: 5px; }
.nav-primary .menu-item-has-children > a .icon { opacity: .5; transition: transform var(--d-2) var(--ease); }
.nav-primary .is-open > a .icon { transform: rotate(180deg); }

/* --- Mega menu ------------------------------------------------------------ */

.mega {
	position: absolute;
	inset-inline: 0;
	inset-block-start: 100%;
	background: var(--paper);
	border-block-start: 1px solid var(--line-soft);
	box-shadow: var(--lift);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition:
		opacity var(--d-2) var(--ease),
		transform var(--d-2) var(--ease),
		visibility var(--d-2);
	color: var(--ink);
}
.nav-primary li.is-open > .mega {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.mega__inner {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--s-7);
	padding-block: var(--s-7) var(--s-8);
}

.mega__col > .mega__heading {
	font-family: var(--font-body);
	font-size: var(--t-xs);
	font-weight: 500;
	letter-spacing: var(--track-label);
	color: var(--ink-3);
	margin-block-end: var(--s-4);
}
[dir="rtl"] .mega__heading { letter-spacing: 0; }

.mega__col ul { display: grid; gap: var(--s-3); }
.mega__col a {
	font-size: var(--t-sm);
	color: var(--ink-2);
	transition: color var(--d-1) var(--ease);
}
.mega__col a:hover { color: var(--wine); }

/* Promoted image inside the mega panel — the reason to build one at all. */
.mega__feature { display: block; }
.mega__feature .media { --ratio: var(--ratio-editorial); }
.mega__feature img { transition: transform var(--d-4) var(--ease); }
.mega__feature:hover img { transform: scale(1.03); }
.mega__feature-label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-3);
	margin-block-start: var(--s-3);
	font-size: var(--t-sm);
	color: var(--ink);
}
.mega__feature:hover .mega__feature-label { color: var(--wine); }

/* --------------------------------------------------------------------------
   4. Drawers
   -------------------------------------------------------------------------- */

.drawer {
	position: fixed;
	inset: 0;
	z-index: var(--z-drawer);
	visibility: hidden;
	pointer-events: none;
}
.drawer.is-open { visibility: visible; pointer-events: auto; }

.drawer__scrim {
	position: absolute;
	inset: 0;
	background: rgba(25, 18, 16, .42);
	opacity: 0;
	transition: opacity var(--d-2) var(--ease);
	backdrop-filter: blur(2px);
}
.drawer.is-open .drawer__scrim { opacity: 1; }

.drawer__panel {
	position: absolute;
	inset-block: 0;
	width: min(440px, 100vw);
	display: flex;
	flex-direction: column;
	background: var(--paper);
	box-shadow: var(--lift-2);
	transition: transform var(--d-3) var(--ease);
	will-change: transform;
}

/* Nav opens from the reading edge, bag from the opposite one — the same
   spatial logic as the icons that summon them, mirrored automatically. */
.drawer--start .drawer__panel { inset-inline-start: 0; transform: translateX(-101%); }
.drawer--end   .drawer__panel { inset-inline-end: 0;   transform: translateX(101%); }
[dir="rtl"] .drawer--start .drawer__panel { transform: translateX(101%); }
[dir="rtl"] .drawer--end   .drawer__panel { transform: translateX(-101%); }
.drawer.is-open .drawer__panel { transform: none; }

.drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-4);
	padding: var(--s-4) var(--s-5);
	border-block-end: var(--hair-soft);
	flex: none;
}
.drawer__title {
	font-family: var(--font-display);
	font-size: var(--t-md);
	line-height: 1.2;
}
.drawer__body {
	flex: 1;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: var(--s-5);
	-webkit-overflow-scrolling: touch;
}
.drawer__foot {
	flex: none;
	padding: var(--s-5);
	border-block-start: var(--hair-soft);
	background: var(--paper);
}

/* --- Mobile navigation inside the drawer ---------------------------------- */

.nav-mobile ul { display: grid; }
.nav-mobile > ul > li { border-block-end: var(--hair-soft); }
.nav-mobile > ul > li > a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-3);
	padding-block: var(--s-4);
	font-family: var(--font-display);
	font-size: var(--t-md);
	color: var(--ink);
}
.nav-mobile .sub-menu {
	display: none;
	padding-block-end: var(--s-4);
	padding-inline-start: var(--s-4);
	gap: var(--s-3);
}
.nav-mobile .is-open > .sub-menu { display: grid; }
.nav-mobile .sub-menu a { font-size: var(--t-sm); color: var(--ink-2); }
.nav-mobile .sub-menu a:hover { color: var(--wine); }

.nav-mobile__toggle {
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	color: var(--ink-3);
	margin-inline-start: auto;
	transition: transform var(--d-2) var(--ease), color var(--d-1) var(--ease);
}
.nav-mobile .is-open > a .nav-mobile__toggle { transform: rotate(180deg); color: var(--wine); }

/* --------------------------------------------------------------------------
   5. Modal
   -------------------------------------------------------------------------- */

.modal {
	position: fixed;
	inset: 0;
	z-index: var(--z-modal);
	display: grid;
	place-items: center;
	padding: var(--s-4);
	visibility: hidden;
	pointer-events: none;
}
.modal.is-open { visibility: visible; pointer-events: auto; }

.modal__scrim {
	position: absolute;
	inset: 0;
	background: rgba(25, 18, 16, .5);
	opacity: 0;
	transition: opacity var(--d-2) var(--ease);
}
.modal.is-open .modal__scrim { opacity: 1; }

.modal__box {
	position: relative;
	width: min(720px, 100%);
	max-height: min(86vh, 900px);
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--paper);
	padding: var(--s-7);
	box-shadow: var(--lift-2);
	opacity: 0;
	transform: translateY(14px) scale(.99);
	transition: opacity var(--d-2) var(--ease), transform var(--d-3) var(--ease);
}
.modal.is-open .modal__box { opacity: 1; transform: none; }
.modal__box--wide { width: min(1040px, 100%); }

.modal__close {
	position: absolute;
	inset-block-start: var(--s-3);
	inset-inline-end: var(--s-3);
	z-index: 2;
}
.modal__title { margin-block-end: var(--s-5); padding-inline-end: var(--s-6); }

/* --------------------------------------------------------------------------
   6. Toast
   -------------------------------------------------------------------------- */

.toast-stack {
	position: fixed;
	inset-block-end: var(--s-5);
	inset-inline-start: 50%;
	transform: translateX(-50%);
	z-index: var(--z-toast);
	display: grid;
	gap: var(--s-2);
	width: min(420px, calc(100vw - var(--s-8)));
	pointer-events: none;
}
[dir="rtl"] .toast-stack { transform: translateX(50%); }

.toast {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	padding: var(--s-4) var(--s-5);
	background: var(--ink);
	color: var(--paper);
	font-size: var(--t-sm);
	box-shadow: var(--lift-2);
	opacity: 0;
	transform: translateY(12px);
	animation: leya-toast-in var(--d-2) var(--ease) forwards;
	pointer-events: auto;
}
.toast.is-leaving { animation: leya-toast-out var(--d-2) var(--ease) forwards; }
.toast--err { background: var(--err); }
.toast__icon { flex: none; opacity: .8; }
.toast__action { margin-inline-start: auto; text-decoration: underline; text-underline-offset: .2em; white-space: nowrap; }

@keyframes leya-toast-in  { to { opacity: 1; transform: none; } }
@keyframes leya-toast-out { to { opacity: 0; transform: translateY(8px); } }

/* --------------------------------------------------------------------------
   7. Floating WhatsApp advisor
   -------------------------------------------------------------------------- */

/* Square, wine, no green bubble. The green WhatsApp blob is on every
   competitor and instantly cheapens whatever it is stuck to. */
.fab {
	position: fixed;
	inset-block-end: var(--s-5);
	inset-inline-end: var(--s-5);
	z-index: var(--z-fab);
	display: inline-flex;
	align-items: center;
	gap: var(--s-3);
	padding: var(--s-3) var(--s-4);
	background: var(--wine);
	color: var(--paper);
	font-size: var(--t-sm);
	box-shadow: var(--lift);
	transition: background-color var(--d-2) var(--ease), transform var(--d-2) var(--ease);
}
.fab:hover { background: var(--wine-deep); transform: translateY(-2px); }
.fab__label { white-space: nowrap; }

@media (max-width: 720px) {
	.fab { inset-block-end: var(--s-4); inset-inline-end: var(--s-4); padding: var(--s-3); }
	.fab__label { display: none; }
	/* Clears the sticky buy bar on a product page. */
	.single-product .fab { inset-block-end: calc(var(--s-4) + 76px); }
}

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */

.hero {
	position: relative;
	min-height: min(94svh, 940px);
	display: grid;
	isolation: isolate;
	background: var(--sand-deep);
}
.hero--short { min-height: min(72svh, 700px); }

/* The slide is itself a grid so that `.hero__inner` stretches to the full
   slide height. Without it the inner box is only as tall as its own content
   and `align-content: end` has no free space to push against — the headline
   then sits under the top padding instead of anchored to the bottom, which is
   invisible on a wide screen and leaves half the hero empty on a phone. */
.hero__slide {
	grid-area: 1 / 1;
	display: grid;
	position: relative;
	opacity: 0;
	transition: opacity var(--d-4) var(--ease-soft);
}
.hero__slide.is-active { opacity: 1; }
.hero__slide:only-child { opacity: 1; }

/* The photographs may cross-fade — that is the effect. The type may not, for
   the same reason as the announcement bar, so the copy block clears before the
   next one arrives. */
.hero__inner {
	opacity: 0;
	transition: opacity var(--d-2) var(--ease);
}
.hero__slide.is-active .hero__inner,
.hero__slide:only-child .hero__inner {
	opacity: 1;
	transition-delay: var(--d-3);
}

.hero__media { position: absolute; inset: 0; overflow: hidden; }

/* The photograph is wrapped in <picture> so a phone can be served its own
   crop. The reset makes <picture> a block, and a block is only as tall as its
   contents — so `height: 100%` on the image was measured against a box that
   was itself the height of the image, fell back to `auto`, and the hero showed
   a band of its own background under the photograph at every viewport.
   Stretching the wrapper and positioning the image against it is what every
   other .media box in the theme already does. */
.hero__media picture { position: absolute; inset: 0; display: block; overflow: hidden; }

.hero__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--focal, 50% 40%);
	/* Slow drift. 12s and 2% — enough to feel alive, not enough to notice. */
	animation: leya-drift 18s var(--ease-soft) infinite alternate;
}
@media (prefers-reduced-motion: reduce) {
	.hero__media img { animation: none; }
}
@keyframes leya-drift {
	from { transform: scale(1.02); }
	to   { transform: scale(1.07); }
}

/* Scrim. A pool of shade anchored to the corner the type occupies, plus a
   light overall grounding — rather than an even wash across the frame.
   
   The even wash was tuned against dark placeholder art and failed the moment
   real photography arrived: a sunlit plaster wall behind the headline left
   white type on a near-white ground. Concentrating the darkness where the
   words actually are buys the contrast without dulling the garment, which is
   the half of the picture that has to stay clean. */
.hero__scrim {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(125% 95% at var(--scrim-anchor, 100% 100%),
			rgba(18, 11, 9, .78) 0%,
			rgba(18, 11, 9, .52) 38%,
			rgba(18, 11, 9, .16) 62%,
			transparent 78%),
		linear-gradient(to top, rgba(18, 11, 9, .42) 0%, transparent 58%);
}

.hero__inner {
	position: relative;
	z-index: 2;
	grid-area: 1 / 1;
	display: grid;
	align-content: end;
	padding-block: var(--s-9) calc(var(--s-8) + 24px);
	color: var(--paper);
}
.hero__content { max-width: min(46rem, 100%); }
.hero__eyebrow {
	color: rgba(251, 248, 244, .8);
	text-shadow: 0 1px 12px rgba(18, 11, 9, .55);
	margin-block-end: var(--s-4);
}
.hero__title {
	font-size: var(--t-3xl);
	line-height: var(--lh-tight);
	text-wrap: balance;
	/* Tight shadow for edge separation, wide one for the halo. Between them the
	   headline survives even where the scrim is thinnest. */
	text-shadow: 0 1px 2px rgba(18, 11, 9, .34), 0 2px 30px rgba(18, 11, 9, .5);
}
.hero__text {
	margin-block-start: var(--s-4);
	font-size: var(--t-md);
	line-height: 1.6;
	color: rgba(251, 248, 244, .9);
	text-shadow: 0 1px 14px rgba(18, 11, 9, .5);
	max-width: 40ch;
}
.hero__actions { margin-block-start: var(--s-6); display: flex; flex-wrap: wrap; gap: var(--s-3); }

.hero__dots {
	position: absolute;
	inset-block-end: var(--s-6);
	inset-inline-start: var(--gutter);
	z-index: 3;
	display: flex;
	gap: var(--s-2);
}
/* The mark stays a 2px rule; the touch target around it does not. Without the
   pseudo-element the dot is a 2px-tall tap target, which on a phone is a
   coin-flip rather than a control. */
.hero__dot {
	position: relative;
	width: 26px;
	height: 2px;
	background: rgba(251, 248, 244, .34);
	transition: background-color var(--d-2) var(--ease);
}
.hero__dot::after {
	content: "";
	position: absolute;
	inset: -19px -5px;
}
.hero__dot.is-active { background: var(--paper); }

/* Scroll cue: a hairline that fills downwards, once. */
.hero__cue {
	position: absolute;
	inset-block-end: 0;
	inset-inline-end: var(--gutter);
	z-index: 3;
	width: 1px;
	height: 68px;
	background: rgba(251, 248, 244, .22);
	overflow: hidden;
}
.hero__cue::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-start: 0;
	height: 40%;
	background: var(--paper);
	animation: leya-cue 2.6s var(--ease-soft) infinite;
}
@keyframes leya-cue {
	0%   { transform: translateY(-100%); }
	60%, 100% { transform: translateY(250%); }
}

@media (max-width: 760px) {
	.hero { min-height: min(88svh, 720px); }
	.hero__content { max-width: none; }
	.hero__cue { display: none; }
}

/* --------------------------------------------------------------------------
   9. Collection tiles
   -------------------------------------------------------------------------- */

.tiles { display: grid; gap: var(--s-4); grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* First tile is double height — an asymmetric grid reads as art direction,
   a uniform 4-up reads as a category export. */
.tiles--feature {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-template-rows: repeat(2, minmax(0, 1fr));
}
.tiles--feature > :first-child { grid-column: span 2; grid-row: span 2; }

.tile {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--sand-deep);
	isolation: isolate;
}
.tile .media { --ratio: var(--ratio-editorial); height: 100%; }
.tile--tall .media { --ratio: 3 / 4; }
.tile img { transition: transform var(--d-4) var(--ease); }
.tile:hover img { transform: scale(1.045); }

.tile::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to top, rgba(20, 12, 10, .62) 0%, rgba(20, 12, 10, .06) 52%);
	transition: opacity var(--d-3) var(--ease);
}
.tile:hover::after { opacity: .82; }

.tile__body {
	position: absolute;
	z-index: 2;
	inset-inline: 0;
	inset-block-end: 0;
	padding: var(--s-5);
	color: var(--paper);
}
.tile__title {
	font-family: var(--font-display);
	font-size: var(--t-lg);
	line-height: 1.2;
}
.tile__meta {
	display: block;
	margin-block-start: var(--s-1);
	font-size: var(--t-xs);
	color: rgba(251, 248, 244, .74);
}
.tile__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	margin-block-start: var(--s-3);
	font-size: var(--t-sm);
	opacity: 0;
	transform: translateY(6px);
	transition: opacity var(--d-2) var(--ease), transform var(--d-2) var(--ease);
}
.tile:hover .tile__cta,
.tile:focus-visible .tile__cta { opacity: 1; transform: none; }
[dir="rtl"] .tile__cta .icon { transform: scaleX(-1); }

@media (max-width: 1024px) {
	.tiles, .tiles--feature { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; }
	.tiles--feature > :first-child { grid-column: span 2; grid-row: auto; }

	/* The feature tile still runs the full width here, but not as a 16:9 band.
	   Every collection photograph is a standing figure in a 2:3 frame, and a
	   centred letterbox crop of one lands on her waist — on an iPad the whole
	   section led with a headless model. A 4:3 frame anchored near the top of
	   the picture keeps her face and the garment's upper half. */
	.tiles--feature > :first-child .media { --ratio: 4 / 3; }
	.tiles--feature > :first-child .media > img { object-position: 50% 18%; }
}
@media (max-width: 560px) {
	/* Two across on a phone. One tile per row turns five collections into five
	   screenfuls of scrolling, and a customer who has to scroll to compare does
	   not compare — she picks the first one. */
	.tiles, .tiles--feature {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--s-3);
	}
	.tiles--feature > :first-child { grid-column: auto; grid-row: auto; }

	/* The commissioned collection photographs are portrait 2:3 frames. Matching
	   that ratio on phones keeps the model's head, hem and bag inside the crop. */
	.tiles--feature .tile .media,
	.tiles--feature > :first-child .media { --ratio: 2 / 3; }

	/* An odd count would leave the last tile beside a hole. It takes the full
	   width instead, keeping the 2:3 frame — these are portrait photographs,
	   and cropping one to a letterbox to save vertical space takes the model's
	   head with it. */
	.tiles > :last-child:nth-child(odd) { grid-column: 1 / -1; }

	/* At half width the caption has roughly 150px to work with, so it loses the
	   large display size and the hover cue — which a touch screen never shows. */
	.tile__body { padding: var(--s-3); }
	.tile__title { font-size: var(--t-md); }
	.tile__meta { font-size: var(--t-2xs); }
	.tile__cta { display: none; }
}

/* --------------------------------------------------------------------------
   10. Editorial split — image beside prose
   -------------------------------------------------------------------------- */

.split {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: center;
	gap: clamp(var(--s-6), 5vw, var(--s-9));
}
.split--reverse > :first-child { order: 2; }
.split__media .media { --ratio: var(--ratio-editorial); }
.split__body { max-width: min(38rem, 100%); }

/* Two images, one offset behind the other. The overlap is what stops an
   image-plus-text block from looking like a WordPress two-column. */
.split__stack { position: relative; }
.split__stack .media:first-child { --ratio: var(--ratio-editorial); width: 84%; }
.split__stack .media:last-child {
	--ratio: 1 / 1;
	position: absolute;
	inset-block-end: -12%;
	inset-inline-end: 0;
	width: 46%;
	border: 8px solid var(--paper);
}
.section--sunk .split__stack .media:last-child { border-color: var(--paper-sunk); }
.section--sand .split__stack .media:last-child { border-color: var(--sand); }

@media (max-width: 860px) {
	.split { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
	.split--reverse > :first-child { order: 0; }
	.split__stack .media:first-child { width: 100%; }
	.split__stack .media:last-child { width: 40%; inset-block-end: -8%; border-width: 6px; }
	.split__body { padding-block-start: var(--s-5); }
}

/* --------------------------------------------------------------------------
   11. Value / promise row
   -------------------------------------------------------------------------- */

.values {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
	border-block: var(--hair-soft);
}
.value {
	padding: var(--s-6) var(--s-5);
	text-align: center;
}
.value + .value { border-inline-start: var(--hair-soft); }
.value__icon { color: var(--gold); margin-inline: auto; margin-block-end: var(--s-3); }
.value__title { font-size: var(--t-sm); font-weight: 500; margin-block-end: var(--s-1); }
.value__text { font-size: var(--t-xs); color: var(--ink-3); line-height: 1.6; }

@media (max-width: 860px) {
	.values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.value:nth-child(odd) { border-inline-start: 0; }
	.value:nth-child(n+3) { border-block-start: var(--hair-soft); }
}
@media (max-width: 420px) {
	.values { grid-template-columns: minmax(0, 1fr); }
	.value { border-inline-start: 0 !important; }
	.value + .value { border-block-start: var(--hair-soft); }
}

/* --------------------------------------------------------------------------
   12. Pull quote
   -------------------------------------------------------------------------- */

.quote { text-align: center; max-width: min(34rem, 100%); margin-inline: auto; }
.quote__text {
	font-family: var(--font-display);
	font-size: var(--t-xl);
	line-height: 1.35;
	text-wrap: balance;
}
.quote__by {
	display: block;
	margin-block-start: var(--s-5);
	font-family: var(--font-body);
	font-size: var(--t-xs);
	letter-spacing: var(--track-label);
	color: var(--ink-3);
}
[dir="rtl"] .quote__by { letter-spacing: 0; }
.section--ink .quote__by, .section--wine .quote__by { color: rgba(251, 248, 244, .58); }

/* --------------------------------------------------------------------------
   13. Testimonials
   -------------------------------------------------------------------------- */

.says { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); }
.say { display: grid; gap: var(--s-4); align-content: start; }
.say__stars { display: flex; gap: 2px; color: var(--gold); }
.say__text { font-size: var(--t-base); line-height: 1.7; color: var(--ink-2); }
.say__who { display: flex; align-items: center; gap: var(--s-3); font-size: var(--t-xs); color: var(--ink-3); }
.say__who strong { color: var(--ink); font-weight: 500; }
.say__verified { display: inline-flex; align-items: center; gap: 4px; color: var(--ok); }

@media (max-width: 860px) { .says { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); } }

/* --------------------------------------------------------------------------
   14. Journal cards
   -------------------------------------------------------------------------- */

.post-card { display: grid; gap: var(--s-4); }
.post-card .media { --ratio: var(--ratio-editorial); }
.post-card img { transition: transform var(--d-4) var(--ease); }
.post-card:hover img { transform: scale(1.035); }
.post-card__meta { font-size: var(--t-xs); color: var(--ink-3); letter-spacing: .04em; }
.post-card__title { font-size: var(--t-md); line-height: 1.3; }
.post-card:hover .post-card__title { color: var(--wine); }
.post-card__excerpt { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.65; }

@media (max-width: 560px) {
	/* Paired off two to a row. The photograph and the headline do the work at
	   this width; the excerpt is trimmed to three lines so two cards side by
	   side end at the same place instead of one running a paragraph longer. */
	.post-card { gap: var(--s-3); }
	.post-card__title { font-size: var(--t-base); }
	.post-card__excerpt {
		display: -webkit-box;
		-webkit-line-clamp: 3;
		line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
		font-size: var(--t-xs);
	}
}

/* --------------------------------------------------------------------------
   15. Newsletter
   -------------------------------------------------------------------------- */

.signup { display: grid; gap: var(--s-5); max-width: 560px; }
.signup__form { display: flex; gap: 0; }
.signup__form input {
	flex: 1;
	min-height: 56px;
	border-radius: 0;
	border-inline-end: 0;
	background: transparent;
	border-color: rgba(251, 248, 244, .3);
	color: inherit;
}
.signup__form input::placeholder { color: rgba(251, 248, 244, .5); }
.signup__form input:focus { border-color: var(--paper); box-shadow: none; }
.signup__form .btn { min-height: 56px; flex: none; }
.signup__note { font-size: var(--t-xs); color: rgba(251, 248, 244, .58); line-height: 1.6; }
.signup__note a { text-decoration: underline; text-underline-offset: .2em; }

@media (max-width: 480px) {
	.signup__form { flex-direction: column; }
	.signup__form input { border-inline-end: 1px solid rgba(251, 248, 244, .3); }
}

/* --------------------------------------------------------------------------
   16. Instagram strip
   -------------------------------------------------------------------------- */

.gram { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px; }
.gram__item { position: relative; display: block; overflow: hidden; }
.gram__item .media { --ratio: 1 / 1; }
.gram__item img { transition: transform var(--d-3) var(--ease), opacity var(--d-2) var(--ease); }
.gram__item:hover img { transform: scale(1.06); opacity: .82; }
.gram__item::after {
	content: "";
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background: rgba(85, 21, 29, 0);
	transition: background-color var(--d-2) var(--ease);
}
.gram__item:hover::after { background: rgba(85, 21, 29, .18); }

@media (max-width: 900px) { .gram { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* --------------------------------------------------------------------------
   17. FAQ / accordion
   -------------------------------------------------------------------------- */

.acc { border-block-start: var(--hair-soft); }
.acc__item { border-block-end: var(--hair-soft); }
.acc__q {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-4);
	padding-block: var(--s-5);
	text-align: start;
	font-family: var(--font-display);
	font-size: var(--t-md);
	line-height: 1.4;
	color: var(--ink);
	transition: color var(--d-1) var(--ease);
}
.acc__q:hover { color: var(--wine); }
.acc__icon { flex: none; color: var(--ink-3); transition: transform var(--d-2) var(--ease), color var(--d-1) var(--ease); }
.acc__item.is-open .acc__icon { transform: rotate(45deg); color: var(--wine); }

.acc__a {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--d-3) var(--ease);
}
.acc__item.is-open .acc__a { grid-template-rows: 1fr; }
.acc__a > div { overflow: hidden; }
.acc__a p {
	padding-block-end: var(--s-5);
	font-size: var(--t-sm);
	line-height: 1.75;
	color: var(--ink-2);
	max-width: 62ch;
}

/* --------------------------------------------------------------------------
   18. Page header (interior pages)
   -------------------------------------------------------------------------- */

.page-head {
	padding-block: var(--s-8) var(--s-7);
	border-block-end: var(--hair-soft);
}
.page-head__title { max-width: min(30rem, 100%); }
.page-head .lede { margin-block-start: var(--s-4); }

.crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-2);
	font-size: var(--t-xs);
	color: var(--ink-3);
	margin-block-end: var(--s-4);
}
.crumbs a { transition: color var(--d-1) var(--ease); }
.crumbs a:hover { color: var(--wine); }
.crumbs__sep { opacity: .5; }
[dir="rtl"] .crumbs__sep .icon { transform: scaleX(-1); }

/* --------------------------------------------------------------------------
   19. Pagination
   -------------------------------------------------------------------------- */

.pager {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--s-2);
	margin-block-start: var(--s-8);
}
.pager .page-numbers {
	display: grid;
	place-items: center;
	min-width: 44px;
	height: 44px;
	padding-inline: var(--s-2);
	font-family: var(--font-num);
	font-size: var(--t-sm);
	color: var(--ink-2);
	border: 1px solid transparent;
	transition: border-color var(--d-1) var(--ease), color var(--d-1) var(--ease);
}
.pager .page-numbers:hover { color: var(--wine); border-color: var(--line); }
.pager .page-numbers.current { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.pager .page-numbers.dots { border: 0; color: var(--ink-3); }
[dir="rtl"] .pager .prev .icon, [dir="rtl"] .pager .next .icon { transform: scaleX(-1); }

/* --------------------------------------------------------------------------
   20. Footer
   -------------------------------------------------------------------------- */

.site-footer {
	background: var(--ink);
	color: rgba(251, 248, 244, .74);
	padding-block: var(--s-9) var(--s-6);
	font-size: var(--t-sm);
}

.footer__top {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
	gap: var(--s-7) var(--s-6);
	padding-block-end: var(--s-8);
	border-block-end: 1px solid rgba(251, 248, 244, .12);
}

.footer__brand .brand__text { color: var(--paper); }
.footer__brand img { height: 46px; width: auto; filter: brightness(0) invert(1); opacity: .92; }
.footer__pitch {
	margin-block-start: var(--s-4);
	max-width: 34ch;
	line-height: 1.75;
	color: rgba(251, 248, 244, .6);
}

.footer__social { display: flex; gap: var(--s-2); margin-block-start: var(--s-5); }
.footer__social a {
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	border: 1px solid rgba(251, 248, 244, .18);
	color: rgba(251, 248, 244, .78);
	transition: background-color var(--d-2) var(--ease), color var(--d-2) var(--ease), border-color var(--d-2) var(--ease);
}
.footer__social a:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); }

.footer__col h3 {
	font-family: var(--font-body);
	font-size: var(--t-xs);
	font-weight: 500;
	letter-spacing: var(--track-label);
	color: var(--paper);
	margin-block-end: var(--s-4);
}
[dir="rtl"] .footer__col h3 { letter-spacing: 0; font-size: var(--t-sm); }
/* Padding rather than gap, so the space between rows is part of each link's
   tap target instead of dead ground between them. */
.footer__col ul { display: grid; }
.footer__col a {
	display: block;
	padding-block: var(--s-2);
	color: rgba(251, 248, 244, .66);
	transition: color var(--d-1) var(--ease);
}
.footer__col a:hover { color: var(--paper); }

/* --- Contact block -------------------------------------------------------- */

.footer__contact { display: grid; gap: var(--s-1); margin-block-start: var(--s-4); }
.footer__contact a, .footer__contact span {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	padding-block: var(--s-2);
	color: rgba(251, 248, 244, .66);
}
.footer__contact a:hover { color: var(--paper); }
.footer__contact .icon { flex: none; opacity: .6; }

/* --- Legal strip ---------------------------------------------------------- */

.footer__legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-4) var(--s-6);
	padding-block-start: var(--s-6);
	font-size: var(--t-xs);
	color: rgba(251, 248, 244, .5);
}
.footer__legal-links { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); }
.footer__legal-links a { display: inline-block; padding-block: var(--s-2); }
.footer__legal a:hover { color: var(--paper); }

/* Commercial registration, VAT and Maroof. Required by the Saudi e-commerce
   law and, more usefully, the single strongest trust signal on the page. */
.footer__registry {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-3) var(--s-5);
	margin-block-start: var(--s-6);
	padding-block-start: var(--s-5);
	border-block-start: 1px solid rgba(251, 248, 244, .1);
	font-size: var(--t-xs);
	color: rgba(251, 248, 244, .5);
}
.footer__registry-item { display: inline-flex; align-items: center; gap: var(--s-2); }
a.footer__registry-item { padding-block: var(--s-2); }
.footer__registry-item .num { color: rgba(251, 248, 244, .72); }
.footer__registry img { height: 34px; width: auto; opacity: .85; }

/* --- Payment marks -------------------------------------------------------- */

.pay-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.pay-row img {
	height: 24px;
	width: auto;
	opacity: .78;
	transition: opacity var(--d-1) var(--ease);
}
.pay-row img:hover { opacity: 1; }
.site-footer .pay-row img { filter: grayscale(1) brightness(1.9); }
.site-footer .pay-row img:hover { filter: none; }

@media (max-width: 1024px) {
	.footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.footer__brand { grid-column: span 2; }
}
@media (max-width: 560px) {
	.footer__top { grid-template-columns: minmax(0, 1fr); }
	.footer__brand { grid-column: auto; }
	.footer__legal { flex-direction: column; align-items: start; }
}

/* --------------------------------------------------------------------------
   21. 404 and empty states
   -------------------------------------------------------------------------- */

.empty {
	display: grid;
	justify-items: center;
	text-align: center;
	gap: var(--s-4);
	padding-block: var(--s-9);
	max-width: 46ch;
	margin-inline: auto;
}
.empty__icon { color: var(--ink-3); }
.empty__title { font-size: var(--t-lg); }
.empty__text { color: var(--ink-2); }
.empty__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; margin-block-start: var(--s-2); }

/* --------------------------------------------------------------------------
   22. Search results inside the drawer
   -------------------------------------------------------------------------- */

.qsearch__form { position: relative; }
.qsearch__form input { padding-inline-end: var(--s-8); }
.qsearch__submit {
	position: absolute;
	inset-inline-end: var(--s-2);
	inset-block-start: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	color: var(--ink-3);
}
.qsearch__submit:hover { color: var(--wine); }

.qsearch__terms { margin-block-start: var(--s-5); }
.qsearch__terms h4 {
	font-family: var(--font-body);
	font-size: var(--t-xs);
	letter-spacing: var(--track-label);
	color: var(--ink-3);
	margin-block-end: var(--s-3);
}
[dir="rtl"] .qsearch__terms h4 { letter-spacing: 0; }

.qsearch__results { margin-block-start: var(--s-5); display: grid; gap: var(--s-1); }
.qresult {
	display: grid;
	grid-template-columns: 60px 1fr;
	align-items: center;
	gap: var(--s-4);
	padding: var(--s-2);
	transition: background-color var(--d-1) var(--ease);
}
.qresult:hover { background: var(--wine-wash); }
.qresult .media { --ratio: var(--ratio-product); }
.qresult__title { font-size: var(--t-sm); line-height: 1.4; }
.qresult__price { font-size: var(--t-xs); color: var(--ink-3); margin-block-start: 2px; }

/* --------------------------------------------------------------------------
   23. Responsive header behaviour
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
	.nav-primary { display: none; }
	.header__burger { display: inline-flex; }
	.header__inner { grid-template-columns: 1fr auto 1fr; }
	.icon-account { display: none; }
}

@media (max-width: 420px) {
	.header__right .iconbtn { width: 40px; }
	.icon-wishlist { display: none; }
}

/* --------------------------------------------------------------------------
   24. Price
   --------------------------------------------------------------------------
   Lives here rather than in shop.css because product cards appear on the
   homepage rails, which do not load the shop stylesheet.
   -------------------------------------------------------------------------- */

.price {
	display: inline-flex;
	align-items: baseline;
	gap: .32em;
	white-space: nowrap;
}
.price__value { font-size: inherit; }
/* .78em of an already-small parent lands at ~8.6px inside the instalment
   line. The floor keeps the riyal mark readable wherever the price appears. */
.price__mark {
	font-size: max(.78em, 10.5px);
	color: var(--ink-3);
	font-weight: 400;
}

/* WooCommerce emits its own <span class="woocommerce-Price-amount"> inside
   price HTML the theme does not template (variations, totals). Matching it
   here keeps those consistent with leya_price() output. */
.woocommerce-Price-amount { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.woocommerce-Price-currencySymbol { font-size: .78em; color: var(--ink-3); margin-inline-start: .28em; }

del { color: var(--ink-3); text-decoration-thickness: 1px; margin-inline-end: .5em; font-size: .9em; }
ins { text-decoration: none; }

/* Instalment line. */
/* Named `instalment`, not `split` — `.split` is the editorial two-column
   layout, and a second component under the same name silently pushed its
   `color: var(--ink-3)` onto every split section, which turned the headline on
   the wine newsletter band almost invisible.

   Flex rather than a plain block: as a block the sentence and the provider name
   sit on one justified line and the provider drifts to the far edge, reading as
   an unrelated label instead of the end of the sentence. */
.instalment {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .1em .45em;
	margin-block-start: var(--s-1);
	font-size: var(--t-xs);
	color: var(--ink-3);
	line-height: 1.5;
}
.instalment--md { font-size: var(--t-sm); }
.instalment__mark { color: var(--ink-2); font-weight: 500; }

/* --------------------------------------------------------------------------
   25. Product card
   -------------------------------------------------------------------------- */

.card { position: relative; display: grid; gap: var(--s-4); }

.card__media { position: relative; overflow: hidden; }
.card__link { display: block; }

.card__img { transition: transform var(--d-4) var(--ease), opacity var(--d-2) var(--ease); }

/* Second gallery image fades in on hover — the detail shot after the
   on-model shot. Absolutely positioned over the first so nothing reflows. */
.card__img--hover {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
}
@media (hover: hover) {
	.card:hover .card__img--hover { opacity: 1; }
	.card:hover .card__img:not(.card__img--hover) { opacity: 0; }
	.card:hover .card__img { transform: scale(1.03); }
}

.card__flags {
	position: absolute;
	inset-block-start: var(--s-3);
	inset-inline-start: var(--s-3);
	z-index: 2;
	display: grid;
	gap: 4px;
	justify-items: start;
	pointer-events: none;
}

.card__save {
	position: absolute;
	inset-block-start: var(--s-2);
	inset-inline-end: var(--s-2);
	z-index: 2;
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	color: var(--ink);
	background: rgba(251, 248, 244, .82);
	backdrop-filter: blur(4px);
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity var(--d-2) var(--ease), transform var(--d-2) var(--ease), color var(--d-1) var(--ease);
}
.card:hover .card__save,
.card__save:focus-visible,
.card__save[aria-pressed="true"] { opacity: 1; transform: none; }
.card__save:hover { color: var(--wine); }
.card__save[aria-pressed="true"] { color: var(--wine); }
.card__save[aria-pressed="true"] .icon { fill: currentColor; }

/* Quick size row slides up over the base of the image on hover. Touch devices
   never get hover, so it is shown permanently below 900px instead. */
.card__sizes {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 2;
	padding: var(--s-3);
	background: rgba(251, 248, 244, .94);
	backdrop-filter: blur(6px);
	transform: translateY(101%);
	transition: transform var(--d-2) var(--ease);
}
@media (hover: hover) {
	.card:hover .card__sizes,
	.card:focus-within .card__sizes { transform: none; }
}
.card__sizes-label {
	display: block;
	font-size: var(--t-2xs);
	color: var(--ink-3);
	margin-block-end: var(--s-2);
	letter-spacing: var(--track-label);
}
[dir="rtl"] .card__sizes-label { letter-spacing: 0; }
.card__sizes-row { display: flex; flex-wrap: wrap; gap: 4px; }

.card__size {
	min-width: 38px;
	height: 32px;
	padding-inline: 6px;
	display: grid;
	place-items: center;
	border: 1px solid var(--line);
	background: var(--white);
	font-size: var(--t-xs);
	transition: background-color var(--d-1) var(--ease), color var(--d-1) var(--ease), border-color var(--d-1) var(--ease);
}
.card__size:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.card__size.is-out {
	color: var(--ink-3);
	background: transparent;
	border-style: dashed;
	text-decoration: line-through;
	cursor: not-allowed;
}
.card__size.is-busy { opacity: .5; pointer-events: none; }

.card__body { display: grid; gap: var(--s-1); }
.card__title { font-family: var(--font-display); font-size: var(--t-base); font-weight: 400; line-height: 1.35; }
/* Block-level with padding so the name is its own comfortable target, not a
   23px sliver. The photograph above is a second link to the same place. */
.card__title a {
	display: block;
	padding-block: 5px;
	transition: color var(--d-1) var(--ease);
}
.card:hover .card__title a { color: var(--wine); }
.card__fabric { font-size: var(--t-xs); color: var(--ink-3); line-height: 1.5; }
.card__price { margin-block-start: var(--s-1); font-size: var(--t-sm); }

/* Sold-out cards recede rather than disappear — she may still want to be
   told when it returns. */
.card.outofstock .card__media { opacity: .74; }

@media (max-width: 900px) {
	/* Touch devices never hover, so the size row lives in the flow instead of
	   sliding over the photograph. */
	.card__sizes {
		position: static;
		transform: none;
		background: transparent;
		backdrop-filter: none;
		padding: 0;
		padding-block-start: var(--s-3);
	}
	.card__save { opacity: 1; transform: none; }
	/* These add straight to the bag, so they are primary controls and must be
	   comfortably tappable. A 30px chip fitted all six lengths on one line but
	   missed the 40px touch minimum; the row is allowed to wrap instead. */
	.card__size {
		min-width: 44px;
		flex: 1 0 auto;
		padding-inline: 4px;
		height: 40px;
		font-size: var(--t-xs);
	}
}

/* --------------------------------------------------------------------------
   26. Rail
   -------------------------------------------------------------------------- */

.rail__track {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--s-6) var(--s-5);
}

@media (max-width: 1024px) { .rail__track { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Below 900px the rail becomes a snapping scroller. The trailing peek of the
   next card is what tells the customer to swipe — arrows do not. */
@media (max-width: 900px) {
	.rail {
		margin-inline: calc(var(--gutter) * -1);
		padding-inline: var(--gutter);
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.rail::-webkit-scrollbar { display: none; }
	.rail__track {
		display: flex;
		gap: var(--s-4);
		width: max-content;
		padding-inline-end: var(--gutter);
	}
	.rail__item { width: 62vw; max-width: 300px; scroll-snap-align: start; flex: none; }
}

/* --------------------------------------------------------------------------
   27. Proof list
   -------------------------------------------------------------------------- */

.proof { display: grid; gap: var(--s-5); margin-block-start: var(--s-6); }
.proof__item { display: grid; grid-template-columns: auto 1fr; gap: var(--s-4); align-items: start; }
.proof__icon {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border: 1px solid var(--gold-soft);
	color: var(--gold);
	flex: none;
}
.proof__title { display: block; font-size: var(--t-sm); font-weight: 500; margin-block-end: 2px; }
.proof__text { display: block; font-size: var(--t-sm); color: var(--ink-2); line-height: 1.6; }

/* --------------------------------------------------------------------------
   28. Numbered steps
   -------------------------------------------------------------------------- */

.steps {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--s-6);
	counter-reset: step;
}
.steps__item { position: relative; padding-block-start: var(--s-5); }

/* Hairline across the top of each step, breaking at the number. */
.steps__item::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	height: 1px;
	background: rgba(251, 248, 244, .2);
}
.steps__num {
	position: absolute;
	inset-block-start: -.72em;
	inset-inline-start: 0;
	padding-inline-end: var(--s-3);
	background: var(--ink);
	font-size: var(--t-sm);
	color: var(--gold);
}
.section--ink .steps__num { background: var(--ink); }
.steps__icon { display: block; color: var(--gold); margin-block-end: var(--s-4); }
.steps__title { font-size: var(--t-md); margin-block-end: var(--s-2); }
.steps__text { font-size: var(--t-sm); line-height: 1.7; color: rgba(251, 248, 244, .68); }

.steps__foot {
	display: grid;
	justify-items: center;
	gap: var(--s-4);
	margin-block-start: var(--s-8);
	text-align: center;
}
.steps__note { font-size: var(--t-sm); color: rgba(251, 248, 244, .7); }

@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-7) var(--s-5); } }
@media (max-width: 520px) { .steps { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------------------------
   29. Accordion footer
   -------------------------------------------------------------------------- */

.acc__foot {
	margin-block-start: var(--s-6);
	text-align: center;
	font-size: var(--t-sm);
	color: var(--ink-2);
}
.acc__foot .link { margin-inline-start: var(--s-2); }

/* --------------------------------------------------------------------------
   30. Tables
   -------------------------------------------------------------------------- */

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.size-table { font-size: var(--t-sm); min-width: 520px; }
.size-table th, .size-table td {
	padding: var(--s-3) var(--s-4);
	text-align: start;
	border-block-end: var(--hair-soft);
}
.size-table thead th {
	font-family: var(--font-body);
	font-size: var(--t-xs);
	font-weight: 500;
	color: var(--ink-3);
	letter-spacing: var(--track-label);
	border-block-end-color: var(--line);
}
[dir="rtl"] .size-table thead th { letter-spacing: 0; }
.size-table tbody th { font-weight: 500; color: var(--wine); }
.size-table tbody tr:hover { background: var(--wine-wash); }
.size-note { margin-block-start: var(--s-5); }

/* --------------------------------------------------------------------------
   31. Odds and ends
   -------------------------------------------------------------------------- */

/* "Nothing matched that" inside the search drawer. */
.qsearch__none {
	padding-block: var(--s-5);
	font-size: var(--t-sm);
	color: var(--ink-3);
	text-align: center;
}

/* The optional shop sidebar. Unused by default — the catalogue filters live in
   a drawer — but registered, so it needs to not look broken if someone adds a
   widget to it. */
.widget + .widget {
	margin-block-start: var(--s-6);
	padding-block-start: var(--s-6);
	border-block-start: var(--hair-soft);
}
.widget__title {
	font-family: var(--font-body);
	font-size: var(--t-xs);
	font-weight: 500;
	letter-spacing: var(--track-label);
	color: var(--ink-3);
	margin-block-end: var(--s-3);
}
[dir="rtl"] .widget__title { letter-spacing: 0; font-size: var(--t-sm); }
.widget ul { display: grid; gap: var(--s-2); font-size: var(--t-sm); }
.widget a { color: var(--ink-2); }
.widget a:hover { color: var(--wine); }