/* ============================================================
WASL · DRESSED TO MEET
wasl.css — single shared stylesheet for the storefront
Loaded once via includes/head.php on every page.
Brand green #8A1B33 is taken from the official logo.
============================================================ */
:root{
--brand:#8A1B33; --brand-mid:#7A1630; --brand-deep:#6B1226;
--brand-night:#48091A; --brand-ink:#2A0610;
--gold:#B08A4A; --gold-light:#D8BE8A; --gold-pale:#EFDFBE;
--gold-deep:#8A6733; --gold-antique:#6E5228;
--ivory:#FBF7EF; --cream:#F2E9D8; --ink:#241A16;
--gold-foil:linear-gradient(135deg,#6E5228 0%,#B08A4A 20%,#EFDFBE 38%,#B08A4A 55%,#8A6733 72%,#D8BE8A 88%,#A67F3F 100%);
/* The same metal, rolled darker, for foil TEXT on a light ground (P2).
The stops that make the foil read on green — gold-pale at 38%, gold-light at
88% — are within a few points of ivory, so on paper the highlights punched
holes through the letters and half the word disappeared. Every stop here is
gold-deep or darker at its lightest, so the sweep still travels but the
glyph never drops out. Surfaces (rules, button fills) keep --gold-foil;
only type on light uses this. */
--gold-foil-light:linear-gradient(135deg,#5C4220 0%,#8A6733 18%,#B08A4A 38%,#8A6733 56%,#6E5228 72%,#A67F3F 88%,#6E5228 100%);
/* --- Redesign tokens (DESIGN.md §4.1). Added in P0; nothing is restyled by
their arrival. They exist so the phases that follow reach for one name
instead of retyping a magic number, which is how the header height came
to be hardcoded in three places. --- */
/* Mehraab (arch) silhouette. Feature imagery only — grid thumbnails stay
rectangular, or the motif stops meaning anything.
The value is .arch-img's existing radius, which is now written once here and
referenced there. That rule survives from a hero layout that was removed, so
nothing draws it today; it is the treatment the redesign wants back, and a
second slightly-different arch is how a motif turns into an accident.
P2 correction: the vertical radius was 28%, inherited from a hero frame that
was laid out short and wide. On a feature plate roughly as tall as it is
wide, 28% draws a rounded rectangle with shoulders — not a dome. 42% brings
the curve near a semicircle at the proportions the arch is actually used at.
Changed now, while .arch-img is still drawn nowhere and the hero plate is
the only consumer; later it would have meant two arches. */
--arch-r:50% 50% 6px 6px / 42% 42% 6px 6px;
/* The house easing. Already typed literally in a dozen rules; they keep their
literals, new work uses the token. Royal things are not in a hurry, so the
curve settles rather than snaps. */
--ease-royal:cubic-bezier(.19,1,.22,1);
--dur-1:.45s; /* micro-interactions */
--dur-2:.7s; /* reveals, crossfades */
--dur-3:.95s; /* the one deliberate moment on a page */
/* Per-product accent. Overridden inline on a PDP (DESIGN.md §9.4) and only
ever used on small parts — swatch rings, hairlines, hover states. Never a
text colour or a button fill: those must stay legible and on-brand. */
--pdp-accent:var(--gold-deep);
}
html{scroll-behavior:smooth;}
body{background:var(--ivory);color:var(--ink);font-family:'Jost',system-ui,sans-serif;-webkit-font-smoothing:antialiased;}
::selection{background:var(--brand);color:var(--gold-pale);}
::-webkit-scrollbar{width:10px;}
::-webkit-scrollbar-track{background:var(--cream);}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--gold),var(--gold-deep));}
/* Letter-spacing helpers */
.tracked{letter-spacing:.42em;}
.tracked-sm{letter-spacing:.28em;}
.tracked-xs{letter-spacing:.18em;}
/* Gold foil text + rules */
.foil-text{background:var(--gold-foil);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 200%;}
.foil-text.on-light{background-image:var(--gold-foil-light);}
.foil-rule{height:1px;background:var(--gold-foil);}
.hairline{background:linear-gradient(90deg,transparent,var(--gold) 18%,var(--gold) 82%,transparent);}
/* Gold-foil bordered button with shimmer sweep */
.btn-foil{position:relative;overflow:hidden;border:1px solid var(--gold);transition:.55s cubic-bezier(.19,1,.22,1);cursor:pointer;}
.btn-foil::before{content:"";position:absolute;inset:0;background:var(--gold-foil);opacity:0;transition:opacity .5s ease;z-index:0;}
.btn-foil::after{content:"";position:absolute;top:0;left:-130%;width:60%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);transition:left .7s ease;z-index:1;}
.btn-foil>span{position:relative;z-index:2;transition:color .4s ease;}
.btn-foil:hover{box-shadow:0 14px 40px -16px rgba(176,138,74,.65);}
.btn-foil:hover::before{opacity:1;}
.btn-foil:hover::after{left:140%;}
.btn-foil.on-light:hover>span,.btn-foil.on-dark:hover>span{color:var(--brand-deep);}
/* Animated nav underline */
.nav-link{position:relative;}
.nav-link::after{content:"";position:absolute;left:0;bottom:-6px;height:1px;width:0;background:var(--gold);transition:width .45s cubic-bezier(.19,1,.22,1);}
.nav-link:hover::after{width:100%;}
/* Product / category cards */
.lux-card{position:relative;transition:transform .6s cubic-bezier(.19,1,.22,1),box-shadow .6s ease;}
.lux-card .frame{position:absolute;inset:10px;border:1px solid rgba(176,138,74,0);transition:inset .55s ease,border-color .55s ease;pointer-events:none;z-index:3;}
.lux-card:hover{transform:translateY(-10px);box-shadow:0 40px 70px -40px rgba(107,18,38,.55);}
.lux-card:hover .frame{inset:14px;border-color:rgba(176,138,74,.85);}
.lux-card:hover .card-img{transform:scale(1.06);}
.card-img{transition:transform 1.1s cubic-bezier(.19,1,.22,1);}
.card-cta{opacity:0;transform:translateY(8px);transition:.5s ease;}
.lux-card:hover .card-cta{opacity:1;transform:translateY(0);}
/* Jali / lattice + paper textures */
.jali{background-image:repeating-linear-gradient(45deg,rgba(176,138,74,.10) 0 1px,transparent 1px 22px),repeating-linear-gradient(-45deg,rgba(176,138,74,.10) 0 1px,transparent 1px 22px);}
.jali-dark{background-image:repeating-linear-gradient(45deg,rgba(176,138,74,.16) 0 1px,transparent 1px 26px),repeating-linear-gradient(-45deg,rgba(176,138,74,.16) 0 1px,transparent 1px 26px);}
.paper{background-image:radial-gradient(rgba(0,0,0,.018) 1px,transparent 1px);background-size:4px 4px;}
/* Hero split hover weighting */
.split{transition:flex .9s cubic-bezier(.19,1,.22,1);}
@media(min-width:1024px){
.hero-row:hover .split{flex:.85;}
.hero-row .split:hover{flex:1.55;}
}
.split .veil{transition:opacity .8s ease;}
.split:hover .veil{opacity:.30;}
/* Two .hero-fig rules used to live here, left over from a split-panel hero that
no longer exists in any template. .hero-fig is now the homepage hero's own
image and is defined with that component further down; a stray transition and
hover transform up here would have been a trap for the next person. */
/* Marquee */
.marquee{display:flex;width:max-content;animation:slide 34s linear infinite;}
@keyframes slide{to{transform:translateX(-50%);}}
/* Scroll reveal */
.reveal{opacity:0;transform:translateY(34px);transition:opacity 1.1s cubic-bezier(.19,1,.22,1),transform 1.1s cubic-bezier(.19,1,.22,1);}
.reveal.show{opacity:1;transform:none;}
/* Staggered hero load */
@keyframes rise{from{opacity:0;transform:translateY(26px);}to{opacity:1;transform:none;}}
.rise{opacity:0;animation:rise 1.2s cubic-bezier(.19,1,.22,1) forwards;}
@keyframes shimmer{0%{background-position:0% 50%}100%{background-position:200% 50%}}
.foil-anim{animation:shimmer 6s linear infinite;}
/* ===== NAV ===== ivory on every page, at every scroll position.
Changed in P1 (DESIGN.md 7.1). It used to be transparent and only turned ivory
after 20px of scroll, so the landing view stacked a near-black strip, a header
reading green through it, and a green hero panel — the "upar sirf green green
greenish" the brief opens with. The header is chrome, not content: it stays
light and quiet, and green now has exactly three homes on a page (the
announcement strip, the section anchor bands, the footer).
NOTE: no backdrop-filter here. The mega panels are descendants of .navbar, and a
backdrop-filtered ancestor forces every descendant onto a GPU layer — which
rasterises all the panel text softly, i.e. the whole menu looked blurry. At .98
alpha the blur was invisible anyway, so the bar is simply opaque. */
.navbar{background:var(--ivory);}
/* Ink, not brand-deep: the links are information, and reserving green for the
things that anchor a page is what makes those anchors read as green at all. */
.navtext{color:var(--ink);}
.navlogo{color:var(--brand-deep);}
.navmark{stroke:var(--brand-deep);fill:var(--brand-deep);}
.navtext.text-gold,.nav-link.text-gold{color:var(--gold-deep);}
/* A gold hairline sits under the bar always, so the header has an edge even at
rest; the shadow is the only thing scroll still changes. */
.navbar{box-shadow:0 1px 0 rgba(138,103,51,.20);}
#nav.nav-scrolled .navbar{box-shadow:0 1px 0 rgba(176,138,74,.4),0 18px 44px -38px rgba(107,18,38,.5);}
/* announcement strip — one message at a time, fading.
This replaced a horizontally scrolling marquee that shared a flex row with the
locale and the service links. Measured live on 2026-07-30 it was clipping words
mid-letter ("IFTING —", "THE WEDDING ATE") and sliding underneath COLLECTIONS /
TRACK ORDER. Masking the edges only softened the symptom; the cause was a
moving element in a row that could not contain it.
Now: three rigid grid tracks, the middle one minmax(0,1fr) with its own
overflow. Nothing travels sideways, so nothing can be cut or overlap — and a
message too long for the space is ellipsised, which is honest rather than
broken. wasl.js cross-fades; with JS off the first message simply stays. */
.util-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto) minmax(0,1fr);
align-items:center;gap:16px;}
.util-locale{display:none;align-items:center;gap:7px;min-width:0;
font-family:'Jost',sans-serif;font-size:9px;letter-spacing:.1em;color:rgba(242,233,216,.55);}
.util-links{display:none;align-items:center;justify-content:flex-end;gap:18px;min-width:0;}
.util-links a{font-family:'Jost',sans-serif;font-size:9px;letter-spacing:.13em;white-space:nowrap;
color:rgba(242,233,216,.7);transition:color .3s ease;}
.util-links a:hover{color:var(--gold);}
@media(min-width:1024px){ .util-locale,.util-links{display:flex;} }
.announce{position:relative;min-width:0;display:grid;place-items:center;
grid-column:2;height:100%;}
/* every message occupies the same cell; only .is-on is visible, so the strip
never changes height or reflows its neighbours when the copy rotates */
.announce-msg{grid-area:1/1;font-family:'Jost',sans-serif;
font-size:9px;letter-spacing:.19em;text-transform:uppercase;color:var(--gold-light);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
opacity:0;visibility:hidden;transform:translateY(3px);
transition:opacity .5s ease,transform .5s ease,visibility .5s;}
.announce-msg.is-on{opacity:1;visibility:visible;transform:none;}
@media(min-width:640px){ .announce-msg{font-size:10px;} }
/* mobile drawer */
#mobile-drawer.open{transform:translateX(0);}
#drawer-overlay.open{opacity:1;pointer-events:auto;}
body.no-scroll{overflow:hidden;}
/* ============================================================
PRODUCT PAGE (PDP) + COLLECTION components — shared
============================================================ */
.pdp-thumb{border-color:rgba(36,26,22,.12);transition:.3s;}
.pdp-thumb.active{border-color:var(--gold);}
.pdp-thumb img{transition:.4s;}
.pdp-thumb:hover img{opacity:.85;}
.pdp-swatch{width:34px;height:34px;border-radius:50%;padding:3px;border:1px solid rgba(36,26,22,.18);transition:.25s;cursor:pointer;}
.pdp-swatch span{display:block;width:100%;height:100%;border-radius:50%;}
.pdp-swatch.active{border-color:var(--gold);box-shadow:0 0 0 3px rgba(176,138,74,.22);}
.pdp-size{min-width:52px;padding:10px 14px;border:1px solid rgba(36,26,22,.2);font-family:'Jost',sans-serif;font-size:12px;letter-spacing:.06em;color:var(--ink);background:#fff;transition:.25s;cursor:pointer;}
.pdp-size:hover{border-color:var(--gold);}
.pdp-size.active{background:var(--brand-deep);color:var(--gold-light);border-color:var(--brand-deep);}
details summary{list-style:none;}
details summary::-webkit-details-marker{display:none;}
/* Collection toolbar */
.coll-pill{padding:8px 16px;border:1px solid rgba(36,26,22,.18);font-size:11px;letter-spacing:.1em;font-family:'Jost',sans-serif;color:var(--ink);transition:.25s;cursor:pointer;white-space:nowrap;}
.coll-pill:hover,.coll-pill.active{background:var(--brand-deep);color:var(--gold-light);border-color:var(--brand-deep);}
/* ============================================================
HEADER HEIGHT — one source of truth
These three numbers ARE the header. Every page offset, and the hero's own
top padding, is derived from --head-h. Change a row height here and the
whole site follows; nothing else hardcodes it.
(It used to be spelled out separately in .page-top, .page-top-lg and again
as a magic pt-[168px] on the hero, which is how they drifted apart and left
the hero shoved down the page.)
============================================================ */
:root{
--util-h:26px; /* announcement strip */
--bar-h:56px; /* logo + nav + actions — ONE row since 2026-07-30 */
--head-h:calc(var(--util-h) + var(--bar-h));
}
@media(min-width:640px){ :root{ --util-h:28px; --bar-h:62px; } }
@media(min-width:1024px){ :root{ --util-h:28px; --bar-h:74px; } }
/* Desktop is now 102px instead of 138px. The nav used to have a row of its own;
moving the lockup left let it share the bar, and a laptop viewport got ~36px
of hero back. --mega-h is gone — nothing may reintroduce a third row without
changing --head-h, which is the whole point of this block. */
/* Condensed (scrolled) — the utility strip collapses, so offsets shrink too. */
#nav.nav-condensed{--util-h:0px;}
.page-top{padding-top:var(--head-h);}
.page-top-lg{padding-top:calc(var(--head-h) + 16px);}
@media(min-width:640px){.page-top-lg{padding-top:calc(var(--head-h) + 26px);}}
@media(min-width:1024px){.page-top-lg{padding-top:calc(var(--head-h) + 38px);}}
/* The hero sits UNDER the transparent header, so it clears it with padding
rather than margin — same variable, so the two can never disagree again. */
.hero-pad{padding-top:calc(var(--head-h) + 28px);}
@media(min-width:1024px){.hero-pad{padding-top:calc(var(--head-h) + 44px);}}
/* Jump targets (/about#craftsmanship …) must clear the fixed header, or the
heading lands underneath it and the page looks like it scrolled to nowhere. */
.anchor-target{scroll-margin-top:calc(var(--head-h) + 24px);}
html{scroll-behavior:smooth;}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
/* ===== PREMIUM IMAGE HANDLING (stop heads/products getting cropped) =====
Product imagery is portrait fashion — crop only from the BOTTOM, never the top,
so faces & necklines stay intact. Taller ratio for a luxury editorial feel. */
.fashion-img{width:100%;height:100%;object-fit:cover;object-position:top center;}
.lux-card .ratio{position:relative;width:100%;aspect-ratio:3/4;overflow:hidden;background:var(--cream);}
@media(min-width:1024px){.lux-card .ratio{aspect-ratio:4/5;}}
/* perfume / object imagery sits contained on a soft ground */
.object-img{width:100%;height:100%;object-fit:contain;padding:6%;background:#fff;}
/* ============================================================
PREMIUM SIGNATURE ELEMENTS (restored + mobile-tuned)
============================================================ */
/* Gold ornamental divider (centered diamond between two rules) */
.ornament{display:flex;align-items:center;justify-content:center;gap:14px;}
.ornament::before,.ornament::after{content:"";height:1px;width:54px;background:linear-gradient(90deg,transparent,var(--gold));}
.ornament::after{background:linear-gradient(90deg,var(--gold),transparent);}
.ornament span{width:7px;height:7px;background:var(--gold);transform:rotate(45deg);}
.ornament.sm::before,.ornament.sm::after{width:34px;}
/* Mughal cusped arch (Mehraab) frame for imagery */
.mehraab{border-top-left-radius:50% 22%;border-top-right-radius:50% 22%;overflow:hidden;position:relative;}
.mehraab::after{content:"";position:absolute;inset:0;border:1px solid rgba(176,138,74,.5);border-top-left-radius:50% 22%;border-top-right-radius:50% 22%;pointer-events:none;}
.mehraab-frame{position:relative;padding:10px;}
.mehraab-frame::before{content:"";position:absolute;inset:0;border:1px solid rgba(176,138,74,.35);border-top-left-radius:50% 22%;border-top-right-radius:50% 22%;}
/* Eyebrow label with flanking rules */
.eyebrow-c{display:inline-flex;align-items:center;gap:12px;}
.eyebrow-c::before,.eyebrow-c::after{content:"";height:1px;width:30px;background:var(--gold);opacity:.7;}
/* Section number tag */
.sec-no{font-family:'Cormorant Garamond',serif;font-style:italic;color:var(--gold-deep);opacity:.8;}
/* Subtle gold top-hairline on dark sections */
.goldline-top{position:relative;}
.goldline-top::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:120px;height:2px;background:var(--gold-foil);}
/* Mobile-friendly hero scale */
@media(max-width:640px){
.hero-title{font-size:clamp(3rem,16vw,4.5rem)!important;line-height:.92!important;}
}
/* hide scrollbar on horizontal rails */
.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none;}
.no-scrollbar::-webkit-scrollbar{display:none;}
/* ============================================================
CINEMATIC HERO (premium)
============================================================ */
/* ════════════════════════════════════════════════════════════════════
HERO — "the lit room"
════════════════════════════════════════════════════════════════════
Two earlier passes were rejected and both notes are worth keeping, because
they rule out the easy answers:
· Answering "too much green" by making everything paper is the same
mistake in the other direction. Green and ivory have to work as a
RELATIONSHIP.
· Royalness is not an arch. Drawing a mehraab does not make a page feel
expensive — the feeling comes from the experience: scale, light,
restraint, and how the page moves.
So: the field is the deep house green and the merchandise stands in a broad
pool of warm light. Dark room, lit subject. Green is the architecture, ivory
is the light falling on it, gold is the only accent — and none of it is
carried by an ornament.
The other half of the brief is content, not colour: the banner has to show
what a segment actually SELLS. See .hero-suite below. */
/* P2: the hero ground is ivory, not green.
It used to be a dark green wash with a grain overlay, which made the landing
view a green block under a green header — F2 and F4 in one. The paper is now
the quietest thing on the page so the photograph and the type carry it, which
is what an editorial spread does. Warm cream pools at the corners so the field
is not flat white; the grain stays, at a fraction of its old strength, because
on a light ground it reads as paper rather than as noise. */
.hero-bg{position:absolute;inset:0;overflow:hidden;}
.hero-bg::before{content:"";position:absolute;inset:-20%;background:#6B1226;}
.hero-bg::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:
repeating-linear-gradient(45deg,rgba(176,138,74,.09) 0 1px,transparent 1px 26px),
repeating-linear-gradient(-45deg,rgba(176,138,74,.09) 0 1px,transparent 1px 26px);}
.hero-grain{position:absolute;inset:0;opacity:.45;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");}
/* kinetic hero words */
.kin{display:block;overflow:hidden;}
.kin > span{display:inline-block;transform:translateY(108%);animation:kinUp 1.05s cubic-bezier(.19,1,.22,1) forwards;}
@keyframes kinUp{to{transform:translateY(0);}}
/* arched hero image frames */
.arch-img{position:relative;border-radius:var(--arch-r);overflow:hidden;box-shadow:0 50px 90px -40px rgba(0,0,0,.7);}
.arch-img::after{content:"";position:absolute;inset:0;border:1px solid rgba(176,138,74,.55);border-radius:inherit;pointer-events:none;}
.arch-img img{width:100%;height:100%;object-fit:cover;object-position:top center;}
.hero-img-a{animation:floatA 11s ease-in-out infinite;}
.hero-img-b{animation:floatB 13s ease-in-out infinite;}
@keyframes floatA{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
@keyframes floatB{0%,100%{transform:translateY(0)}50%{transform:translateY(14px)}}
/* thin gold ring accent */
.gold-ring{position:absolute;border:1px solid rgba(176,138,74,.45);border-radius:50%;animation:spin 40s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
/* shimmering rule under eyebrow */
.shimmer-rule{height:1px;width:64px;background:linear-gradient(90deg,transparent,var(--gold),transparent);background-size:200% 100%;animation:shim 3s linear infinite;}
@keyframes shim{to{background-position:200% 0;}}
@media(max-width:1023px){
.arch-img{border-radius:50% 50% 6px 6px / 22% 22% 6px 6px;}
}
/* ============================================================
HERO — two-column editorial stage
The old hero was a fixed 526px box with a headline sized off viewport WIDTH
(clamp up to 8.5rem). At 1440 that produced a 136px headline in a 526px box
with overflow:hidden, which pushed the subtitle and both buttons to y=641 —
rendered, inside the DOM, permanently invisible. Height here comes from the
viewport MINUS the header instead, and the type is clamped to fit it, so the
content cannot be taller than the box it lives in.
============================================================ */
/* The floor must stay BELOW the shortest viewport worth designing for, never
above it: a floor taller than the window puts content under the fold inside a
box that clips — which is exactly how the old hero hid its own buttons. The
desktop type block measures ~300px plus padding, so 460 is safely clear of it
and 100svh wins on any normal screen. */
/* 760, not 690. The control cluster is pinned to the BOTTOM of this box while
the content flows from the top, so the floor has to cover the tallest thing
the box can hold: header 82 + suite ~196 + type ~383 + the 86px control band.
At 690 the sums did not fit and the product tiles ran straight over the dots
and arrows — visible at 853x640 and 1000x700, i.e. an ordinary laptop window,
not a phone. Measured, not guessed: herofit.py walks 8 viewports x 3 slides. */
.hero-stage{position:relative;overflow:hidden;background:var(--brand-night);
min-height:max(760px,100svh);}
@media(min-width:1024px){ .hero-stage{min-height:max(620px,100svh);} }
/* Why 690 on a phone rather than "just the viewport": the slides are stacked
absolutely, so they add no height and the stage cannot grow to fit them. On a
640px-tall handset a viewport-height hero squeezed the type column until the
buttons fell past the clipped edge — the exact failure this rebuild exists to
remove. The floor is the sum of the parts (header + panel + type), so on a
short phone the fold moves down a little and everything stays reachable,
while any normal handset is taller and 100svh wins. */
/* padding-bottom reserves the control cluster's row. Without it the cluster is
absolutely positioned over whatever the last flow item happens to be — on a
phone that was the subtitle, with the arrows sitting on the words. */
.hero-grid{position:relative;z-index:10;height:100%;
padding:var(--head-h) 0 86px;
display:grid;grid-template-columns:1fr;grid-template-rows:auto auto;
/* start, not center: centering a block taller than the row pushes its top ABOVE
the row, and on a 844px phone that put the headline behind the fixed header
(measured at y=-4). Start-aligned, the worst case is a longer scroll. */
align-content:start;}
@media(min-width:1024px){
/* P2: the photograph gets the larger half. The old split was even because the
left side was a colour block that had to hold its own; now the left side is
paper and the image is the thing being sold. */
.hero-grid{grid-template-columns:.86fr 1.14fr;grid-template-rows:1fr;
padding:var(--head-h) 0 84px;align-content:stretch;}
}
/* ---- left: type on green ---- */
/* ONE gutter, shared by the type column and the slideshow dots, and it is the
header's container inset — px-4 / sm:px-6 / lg:px-10 inside a 1400 measure.
Measured 2026-08-04: the old value was clamp(20px, …, 260px), whose floor is
20px. At 1400 and above the calc term won and the headline lined up under the
logo; at every width BELOW that — 1280 included — it fell back to the 20px
floor while the header stayed at 40px. So the whole type block, headline and
both buttons, sat 20px off the site's own left edge and hard against the
window. Reported as "text saara left side mein ghus ja raha hai" and it was
exactly that. The floor now IS the container inset, so they cannot disagree. */
:root{ --hero-gutter:16px; }
@media(min-width:640px){ :root{ --hero-gutter:24px; } }
@media(min-width:1024px){ :root{ --hero-gutter:clamp(40px,calc((100vw - 1400px)/2 + 40px),260px); } }
.hero-type{position:relative;display:flex;flex-direction:column;justify-content:center;
gap:16px;order:1;padding:26px var(--hero-gutter) 22px;}
@media(min-width:1024px){
.hero-type{order:1;gap:20px;padding:44px clamp(28px,3vw,52px) 44px var(--hero-gutter);}
}
/* P2 — type on paper. Marcellus for the eyebrow (DESIGN 4.3: it is a label, and
Marcellus is the label face), gold-deep because plain gold on ivory measures
near 2:1. */
.hero-eyebrow{display:flex;align-items:center;gap:12px;
font-family:'Marcellus',serif;font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;
color:var(--gold);}
@media(min-width:640px){ .hero-eyebrow{font-size:10.5px;} }
/* Bigger and more confident than the old 55px ceiling — this is the display-1
step, and on paper the headline is the loudest thing rather than competing
with a colour field. Capped at 68 rather than DESIGN's 88 because the column
is ~44% of the viewport and these titles run to three lines; 88 wrapped a
fourth line at 1280 and the block outgrew its row. */
.hero-h1{font-family:'Cormorant Garamond',serif;font-weight:400;color:var(--ivory);
font-size:clamp(34px,4.5vw,68px);line-height:1.02;letter-spacing:-.02em;
max-width:14ch;text-wrap:balance;}
@media(max-width:1023px){ .hero-h1{font-size:clamp(30px,9vw,42px);max-width:18ch;} }
.hero-sub{font-family:'Jost',sans-serif;font-weight:300;font-size:13px;line-height:1.68;
color:rgba(242,233,216,.76);max-width:42ch;}
@media(min-width:1024px){ .hero-sub{font-size:14px;} }
.hero-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;}
.hero-cta-1{padding:14px 32px;text-align:center;}
/* secondary is a rule-underlined link, not a second box: on a phone two stacked
buttons cost ~56px of the fold for the least-used action */
.hero-cta-2{font-family:'Jost',sans-serif;font-size:11px;letter-spacing:.16em;
text-transform:uppercase;color:rgba(242,233,216,.84);
border-bottom:1px solid rgba(176,138,74,.55);padding-bottom:4px;transition:color .3s ease;}
.hero-cta-2:hover{color:var(--gold);}
@media(max-width:1023px){ .hero-ctas{gap:16px;} .hero-cta-1{width:100%;} }
/* ---- right: the mehraab plate ----
P2. This used to be a full-bleed ivory rectangle butted against a green block,
with a hairline where the two colours met. On paper there is no seam to mark,
so the panel becomes the arch instead: the same `--arch-r` the rest of the
site uses, inset far enough that the silhouette is legible, with the gold
inner rule that `.arch-img` established. One motif, written once.
Every product photo in this catalogue is still shot on white, so the plate
keeps its white core — the photograph's own background meets white rather
than cream, and the shot reads as a studio plate instead of a pasted-on
rectangle with seams down both sides. */
.hero-panel{position:relative;order:1;overflow:hidden;
background:radial-gradient(130% 100% at 50% 8%,#FFFFFF 0%,#FFFFFF 42%,var(--ivory) 72%,var(--cream) 100%);
height:min(42svh,320px);margin:0 16px;
border-radius:50% 50% 4px 4px / 18% 18% 4px 4px;
box-shadow:0 26px 60px -34px rgba(1,26,14,.45);}
@media(min-width:1024px){
/* Capped and right-aligned rather than filling the column: the arch is a
silhouette, and a dome stretched across 690px reads as a lozenge however
the radius is written. At ~600 wide against 680 tall the curve is close to
a semicircle and the shape is recognisable at a glance. */
.hero-panel{order:2;height:min(78svh,680px);align-self:center;
width:100%;max-width:var(--plate-w);margin:0 var(--plate-m) 0 auto;
border-radius:var(--arch-r);
box-shadow:0 46px 96px -46px rgba(1,26,14,.5);}
}
/* The plate's width and gutter are named because the slideshow arrows have to
sit inside its edges, and the arrows are siblings of the slides — they cannot
read the plate's box. Hardcoding 600px in the arrow rules is exactly how the
old pair ended up pinned to a column edge that no longer existed.
47vw is always inside the 57vw grid column, so the cap can never overflow. */
:root{ --plate-w:min(600px,47vw); --plate-m:clamp(20px,3.4vw,58px); }
/* the gold inner rule — inherits the arch so it can never trace a different curve */
.hero-panel::before{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
border:1px solid rgba(138,103,51,.5);border-radius:inherit;}
/* How a photograph meets this panel is a property of the photograph, so both the
fit and the focus come from slides.json (image_fit / image_focus). Tried and
rejected as a single global rule:
· cover for everything — the studio shots are tall portraits, so filling a
landscape panel blew them up into a face close-up with the garment gone;
· contain for everything — correct for those, but it left ivory bars down
both sides of the lifestyle frames, which read as a pasted rectangle.
Default is contain: it can never crop a garment, which is this catalogue's
rule everywhere else. */
.hero-fig{position:absolute;inset:0;width:100%;height:100%;
object-fit:contain;object-position:center bottom;}
/* P2 — the two kinds of photograph need two grounds, and this is the seam the
old wide panel hid by accident.
A `contain` shot is a studio cut-out whose own background is #FFFFFF. On the
narrower, taller arch its white rectangle no longer spans the plate, so the
gradient's cream edges met it in two hard vertical lines — the "pasted
rectangle" the previous layout's comment warned about. A white core held wide
and low removes the join.
It also needs headroom: with the figure filling the full height, the dome cut
through the model's head. 12% at the top clears it, and nothing about a
contained image is cropped by shrinking its box. */
.hero-panel.plate-contain{
background:radial-gradient(125% 96% at 50% 44%,#FFFFFF 0%,#FFFFFF 66%,#FDFCFA 84%,var(--ivory) 100%);}
/* width/height are stated, not left to `auto`. An absolutely positioned ![]()
with auto sizing and all four offsets set is over-constrained, so the browser
drops the right/bottom offsets and paints the file at its intrinsic size —
which turned a full-length shirt into a face close-up spilling past the arch. */
.hero-fig.fit-contain{top:12%;left:6%;right:6%;bottom:0;width:88%;height:88%;}
@media(max-width:1023px){ .hero-fig.fit-contain{top:9%;left:4%;right:4%;width:92%;height:91%;} }
/* a cover frame fills the arch itself, so the ground only shows for the instant
before the image paints */
.hero-panel.plate-cover{background:var(--cream);}
/* a small second plate, not a second full-height model — the old hero overlapped
two near-identical shots of the same look and read as a duplicate */
.hero-fig-b{position:absolute;right:14px;bottom:74px;width:96px;height:128px;
object-fit:cover;object-position:top center;background:#fff;
border:1px solid rgba(138,103,51,.5);box-shadow:0 10px 26px -10px rgba(36,26,22,.4);}
@media(max-width:1023px){ .hero-fig-b{width:70px;height:94px;bottom:12px;right:10px;} }
/* On a phone the panel is only ~300px tall and the price chip already sits in
it; a second plate crowding the other corner turns the one commercial signal
into clutter. The chip wins. */
@media(max-width:639px){ .hero-fig-b{display:none;} }
/* the commerce signal that already existed in slides.json and was never rendered */
.hero-chip{position:absolute;left:18px;bottom:18px;z-index:5;max-width:216px;display:block;
background:rgba(251,247,239,.94);border:1px solid rgba(138,103,51,.42);padding:9px 13px;
box-shadow:0 10px 26px -12px rgba(36,26,22,.34);
transition:border-color .3s ease,box-shadow .3s ease,transform .4s cubic-bezier(.19,1,.22,1);}
.hero-chip:hover{border-color:var(--gold);transform:translateY(-2px);
box-shadow:0 16px 32px -14px rgba(36,26,22,.42);}
.hero-chip-k{display:block;font-family:'Jost',sans-serif;font-size:8px;letter-spacing:.2em;
text-transform:uppercase;color:var(--gold-deep);}
.hero-chip-t{display:block;font-family:'Cormorant Garamond',serif;font-size:14px;line-height:1.2;
color:var(--ink);margin-top:3px;}
.hero-chip-p{display:block;font-family:'Jost',sans-serif;font-size:10.5px;letter-spacing:.09em;
color:rgba(36,26,22,.66);margin-top:4px;}
@media(max-width:1023px){ .hero-chip{left:12px;bottom:12px;max-width:180px;padding:7px 11px;} }
/* one control cluster: progress dots, then the two arrows, in the same gutter
the headline starts from */
.hero-nav{position:absolute;z-index:30;left:var(--hero-gutter);bottom:20px;
display:flex;align-items:center;gap:20px;}
.hero-dots{display:flex;align-items:center;gap:10px;}
@media(min-width:1024px){ .hero-nav{bottom:36px;} }
/* ════════════════════════════════════════════════════════════════════
HERO SUITE — several products from one segment, together
════════════════════════════════════════════════════════════════════
The banner's job is to answer "what does this segment actually sell?" in
the first second. One photograph of one dress cannot answer it, which is
why the old hero told a visitor nothing about the range.
A suite slide shows three pieces from the segment side by side, staggered,
each with its real name and its real price — read from products.json, so a
price can never drift from the product page.
Green and ivory work as a pair here rather than as a choice: the field is
the deep house green, and a broad pool of warm light sits behind the group
so the pieces stand IN light rather than on a colour. That relationship —
dark room, lit subject — is where the richness comes from; it is not
carried by any one ornament. */
.hero-suite{position:relative;order:1;display:grid;grid-template-columns:repeat(3,1fr);
gap:clamp(10px,1.4vw,22px);align-items:end;align-self:center;
padding:0 var(--hero-gutter) 0 0;z-index:6;}
/* Stacked layout (<1024 — which is a SHORT DESKTOP WINDOW as often as a phone).
Photos lead, type follows: reported as "text upar aa jata hai, photos neeche
chale jaate hain, ganda lag raha hai", and they were right — the merchandise
should be the first thing on the screen. Type-first was only ever a way to
keep the CTA above the fold when the tiles were tall; the tiles are short now,
so the reason is gone. */
@media(max-width:1023px){ .hero-suite{order:1;padding:0 var(--hero-gutter);gap:8px;} .hero-type{order:2;} }
@media(min-width:1024px){ .hero-suite{order:2;} }
/* the pool of light. Sized off the group, soft-edged, so nothing in the
composition has a frame or a seam. */
.hero-suite::before{content:"";position:absolute;z-index:-1;
left:-8%;right:-8%;top:-10%;bottom:-12%;
background:radial-gradient(58% 54% at 50% 46%,
rgba(251,247,239,.34) 0%, rgba(242,233,216,.18) 42%, rgba(107,18,38,0) 74%);}
.hs-tile{display:block;min-width:0;text-decoration:none;}
/* Staggered heights: three tiles of one size is a product grid, which is what
the listing pages are for. Different heights read as an arrangement. */
.hs-tile:nth-child(1) .hs-shot{height:clamp(230px,41svh,400px);}
.hs-tile:nth-child(2) .hs-shot{height:clamp(288px,53svh,510px);}
.hs-tile:nth-child(3) .hs-shot{height:clamp(252px,46svh,445px);}
/* Phone budget, measured on a 844px viewport: header 82 + type ~300 + the
control cluster 74 leaves ~380 for the suite, and a tile carries ~46px of
caption under it. These heights MUST come after the desktop ones — written
above them first, and the later same-specificity rules simply won, so the
phone silently rendered 41svh tiles and the row overflowed the stage by
~100px into overflow:hidden. */
@media(max-width:1023px){
.hs-tile:nth-child(1) .hs-shot,
.hs-tile:nth-child(3) .hs-shot{height:clamp(112px,17svh,150px);}
.hs-tile:nth-child(2) .hs-shot{height:clamp(126px,19svh,168px);}
}
.hs-shot{display:block;position:relative;overflow:hidden;background:rgba(251,247,239,.06);
box-shadow:0 0 0 1px rgba(176,138,74,.28),0 34px 70px -40px rgba(0,0,0,.75);}
.hs-shot img{width:100%;height:100%;object-fit:cover;object-position:center 22%;
transition:transform .9s var(--ease-royal);}
.hs-tile:hover .hs-shot img{transform:scale(1.05);}
.hs-tile:hover .hs-shot{box-shadow:0 0 0 1px rgba(176,138,74,.7),0 40px 80px -38px rgba(0,0,0,.8);}
.hs-meta{display:block;padding:11px 2px 0;}
.hs-name{display:block;font-family:'Cormorant Garamond',serif;font-size:clamp(13px,1.05vw,16px);
line-height:1.25;color:var(--ivory);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hs-price{display:block;font-family:'Jost',sans-serif;font-weight:500;
font-size:clamp(10.5px,.82vw,12px);letter-spacing:.08em;color:var(--gold-light);margin-top:4px;}
.hs-off{font-style:normal;margin-left:8px;font-size:9.5px;letter-spacing:.12em;
text-transform:uppercase;color:rgba(242,233,216,.55);}
@media(max-width:1023px){
.hs-name{font-size:12px;white-space:normal;}
.hs-price{font-size:10.5px;}
.hs-off{display:none;}
}
/* ============================================================
P2 · HERO MOTION — three effects, all transform/opacity/clip-path only,
all off under prefers-reduced-motion. DESIGN 5.2 M2/M3/M4.
============================================================ */
/* M3 — the arch reveal. The one wow moment on this page, so it fires on the
FIRST paint only: wasl.js drops .hero-intro once it has run. Without that
it would replay every time the slideshow came back round to slide one, and a
wow that repeats is just a delay. clip-path is composited, and the image is
already downloading via the preload — this animates the reveal, not the load. */
@keyframes archRise{from{clip-path:inset(100% 0 0 0);}to{clip-path:inset(0 0 0 0);}}
#hero.hero-intro .hero-slide.is-active .hero-panel{
animation:archRise 1.1s var(--ease-royal) both;}
/* M2 — Ken Burns, but only where it cannot crop a garment.
`cover` slides are lifestyle frames: they already fill the plate, so a slow
push reads as life. `contain` slides are studio cut-outs of the product —
scaling one pushes the garment past the arch, which is the one thing this
catalogue never does. Those get a slow vertical drift instead, which changes
nothing about what you can see. The class comes from image_fit in slides.json. */
@keyframes kenBurns{from{transform:scale(1);}to{transform:scale(1.055);}}
@keyframes plateDrift{0%,100%{transform:translateY(0);}50%{transform:translateY(-7px);}}
.hero-slide.is-active .hero-fig.fit-cover{
animation:kenBurns 9s linear forwards;transform-origin:center 40%;will-change:transform;}
.hero-slide.is-active .hero-fig.fit-contain{
animation:plateDrift 11s ease-in-out infinite;}
@media(prefers-reduced-motion:reduce){
#hero.hero-intro .hero-slide.is-active .hero-panel,
.hero-slide.is-active .hero-fig.fit-cover,
.hero-slide.is-active .hero-fig.fit-contain{animation:none;}
}
/* ===== HERO SLIDESHOW ===== */
.hero-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .9s ease;pointer-events:none;}
.hero-slide.is-active{opacity:1;visibility:visible;pointer-events:auto;}
/* replay entrance animations each time a slide becomes active */
.hero-slide .kin > span{animation:none;transform:translateY(108%);}
.hero-slide .hs-rise{opacity:0;transform:translateY(18px);}
.hero-slide.is-active .kin > span{animation:kinUp 1.05s cubic-bezier(.19,1,.22,1) forwards;}
.hero-slide.is-active .hs-rise{animation:hsRise .9s cubic-bezier(.19,1,.22,1) forwards;}
@keyframes hsRise{to{opacity:1;transform:translateY(0);}}
/* The dot is a track; the inside is the fill that runs while the slide is
on screen, so the viewer can see the slideshow is moving and how long is
left. Paused (hover / tab hidden) freezes the fill rather than hiding it. */
/* P2: the track was a pale cream, which was right over green and invisible over
paper. Ink at low alpha for the track, gold-deep for the fill. */
.hero-dot{width:34px;height:3px;background:rgba(239,223,190,.26);border:none;cursor:pointer;padding:0;
position:relative;overflow:hidden;transition:background .4s;}
.hero-dot:hover{background:rgba(239,223,190,.48);}
.hero-dot:focus-visible{outline:2px solid var(--gold);outline-offset:4px;}
.hero-dot i{position:absolute;inset:0;transform-origin:left center;transform:scaleX(0);
background:var(--gold);display:block;}
.hero-dot.is-active i{animation:heroFill var(--hero-dur,6500ms) linear forwards;}
.hero-dot.is-active.is-paused i{animation-play-state:paused;}
/* slides already seen stay lit, so the row reads as progress */
.hero-dot.is-done i{transform:scaleX(1);animation:none;background:rgba(176,138,74,.55);}
@keyframes heroFill{from{transform:scaleX(0);}to{transform:scaleX(1);}}
@media(prefers-reduced-motion:reduce){
.hero-dot.is-active i{animation:none;transform:scaleX(1);}
}
/* Arrows are part of the bottom-left cluster now, not floated over the picture.
Outlined rather than filled: a solid ivory chip on the dark field reads louder
than the merchandise, which is backwards. */
.hero-arrow{position:static;display:grid;place-items:center;
width:34px;height:34px;transform:none;
border:1px solid rgba(176,138,74,.45);background:transparent;
color:var(--gold-light);font-size:19px;line-height:1;cursor:pointer;
transition:background .3s,border-color .3s,color .3s;}
.hero-arrow:hover{background:rgba(176,138,74,.14);border-color:var(--gold);color:var(--ivory);}
.hero-arrow:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
.hero-prev{margin-right:-12px;}
/* ===== PDP no-crop image stage (shows the FULL garment) ===== */
.pdp-stage{position:relative;width:100%;background:linear-gradient(160deg,#F2E9D8,#FBF7EF);border:1px solid rgba(176,138,74,.16);overflow:hidden;display:flex;align-items:center;justify-content:center;min-height:420px;}
/* min() and not a flat 560px: on a short window the photograph is capped by
max-height:78vh below, and a frame taller than the picture it holds leaves
a band of empty cream under the garment. Tying the two together means the
frame can never outgrow its own image. */
@media(min-width:1024px){.pdp-stage{min-height:min(560px,78vh);}}
.pdp-img{width:100%;height:auto;max-height:78vh;object-fit:contain;display:block;}
/* The gallery is one half of a two-column grid; the buy box beside it is far
taller (price, sizes, buttons, pincode, wishlist, badges, highlights). Grid
and flex both stretch their children to equal height by default, so the
cream panel was being pulled to the buy box's full height — measured at
1308px against a 393px photograph, i.e. roughly 900px of empty cream box
sitting under the garment.
Aligning both to the start makes the frame the size of the picture. */
@media(min-width:1024px){
.pdp-gallery{align-self:start;}
.pdp-gallery > .pdp-frame{align-self:start;}
}
/* ============================================================
SOFT PREMIUM MOTION — "Analog Meditation"
Quiet, slow, breathing. Nothing snaps; everything eases.
============================================================ */
/* slow Ken-Burns drift on hero imagery (only the active slide).
Kept subtle here: the figure is contained rather than cover-cropped, so a big
scale would push the garment out of its own frame. */
.hero-slide .hero-fig{transform:scale(1.02);transition:transform 9s ease-out;}
.hero-slide.is-active .hero-fig{transform:scale(1.08);}
/* gentler, longer fade between slides */
.hero-slide{transition:opacity 1.15s cubic-bezier(.4,0,.2,1);}
/* softer reveal-on-scroll delays (base .reveal/.show defined above) */
.reveal-d1{transition-delay:.08s;} .reveal-d2{transition-delay:.16s;} .reveal-d3{transition-delay:.24s;}
/* softer, slower card lift */
.lux-card{transition:transform .75s cubic-bezier(.19,1,.22,1),box-shadow .75s ease;}
.lux-card:hover{transform:translateY(-8px);}
.lux-card:hover .card-img{transform:scale(1.05);}
.card-img{transition:transform 1.4s cubic-bezier(.19,1,.22,1);}
/* image inside cards fades in softly once loaded */
.fashion-img,.object-img{animation:imgIn 1.2s ease both;}
@keyframes imgIn{from{opacity:0;filter:blur(6px);}to{opacity:1;filter:blur(0);}}
/* gentle floating for the arched hero frames (slower than before) */
.hero-img-a{animation:floatA 14s ease-in-out infinite;}
.hero-img-b{animation:floatB 16s ease-in-out infinite;}
/* ============================================================
MEGA MENU — premium storefront navigation
Row 1 announcement strip · Row 2 logo (left) + nav + actions
Green/gold identity preserved; the panel is the only new surface.
============================================================ */
/* announcement strip quietly collapses once you start reading the page */
.util-bar{transition:height .45s cubic-bezier(.19,1,.22,1),opacity .3s ease;overflow:hidden;}
#nav.nav-condensed .util-bar{height:0;opacity:0;}
#nav.nav-condensed .util-bar>div{height:0;}
/* ---- row 2: logo, nav and actions share one line ----
Logo and actions are shrink-0 so they always render whole; the nav is the
only flexible track and is allowed to scroll inside itself. That ordering
matters — if the nav could squeeze its neighbours, the lockup would compress
before a single menu label wrapped. */
.navrow{display:flex;align-items:center;gap:clamp(14px,2vw,40px);}
.lockup{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;}
.lockup-rule{align-self:flex-start;}
.mega-nav{flex:1 1 auto;min-width:0;display:flex;align-items:center;justify-content:center;
gap:clamp(9px,1.05vw,22px);height:100%;
overflow-x:auto;-ms-overflow-style:none;scrollbar-width:none;}
.mega-nav::-webkit-scrollbar{display:none;}
.mega-item{position:static;display:flex;align-items:center;flex:none;}
.mega-trigger{position:relative;display:inline-flex;align-items:center;gap:5px;
padding:5px 0;
font-family:'Jost',sans-serif;font-size:10.5px;letter-spacing:.14em;white-space:nowrap;
color:var(--ink);transition:color .35s ease;}
@media(min-width:1400px){ .mega-trigger{font-size:11px;letter-spacing:.16em;} }
.mega-trigger.is-gold{color:var(--gold-deep);}
.mega-trigger::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
background:var(--gold);transform:scaleX(0);transform-origin:center;
transition:transform .45s cubic-bezier(.19,1,.22,1);}
.mega-item:hover .mega-trigger::after,
.mega-item.is-open .mega-trigger::after,
.mega-trigger.is-current::after{transform:scaleX(1);}
.mega-trigger:hover,.mega-item.is-open .mega-trigger{color:var(--gold-deep);}
.mega-caret{opacity:.55;transition:transform .35s ease;}
.mega-item.is-open .mega-caret{transform:rotate(180deg);}
/* below 1400 there are eight sections beside a logo, so the rail packs to the
left and scrolls rather than shrinking the labels into illegibility */
@media(max-width:1399px){ .mega-nav{justify-content:flex-start;} }
/* ---- the panel ---- */
.mm-panel{position:absolute;left:0;right:0;top:100%;z-index:40;
background:var(--ivory);
background-image:radial-gradient(rgba(107,18,38,.02) 1px,transparent 1px);background-size:5px 5px;
border-top:1px solid rgba(176,138,74,.45);
box-shadow:0 40px 80px -30px rgba(1,26,14,.42);
opacity:0;visibility:hidden;transform:translateY(-10px);pointer-events:none;
transition:opacity .38s ease,transform .45s cubic-bezier(.19,1,.22,1),visibility .38s;}
.mega-item.is-open .mm-panel{opacity:1;visibility:visible;transform:none;pointer-events:auto;}
/* Tight vertical rhythm on purpose: the biggest section (Men) is 7 groups, and
at 34/30 padding with a 38px inner gap the panel wanted ~494px — enough to
scroll on any laptop that is not full-height. Every value below was pulled in
to get it under ~400px. max-height still stands as the last resort. */
.mm-panel-in{max-width:1400px;margin:0 auto;padding:22px 40px 20px;
max-height:calc(100vh - var(--head-h) - 24px);overflow-y:auto;}
#mm-scrim{position:fixed;inset:0;z-index:-1;background:rgba(42,6,16,.42);backdrop-filter:blur(2px);
opacity:0;pointer-events:none;transition:opacity .4s ease;}
#nav.mm-any-open #mm-scrim{opacity:1;z-index:30;}
/* #mm-scrim is a child of #nav, and #nav (fixed + z-50) is its own stacking
context — so the scrim's z-index resolves against the header's OWN rows, not
the page behind it. Left alone it paints over the header and dims the very nav
the visitor is still reading. Lifting the two rows above the scrim keeps the
dim where it belongs: on the page below. */
#nav .util-bar,#nav .navbar{position:relative;z-index:31;}
.mm-inner{display:grid;grid-template-columns:1fr minmax(210px,244px);gap:20px 38px;align-items:start;}
@media(max-width:1279px){
.mm-inner{grid-template-columns:1fr;}
.mm-inner .mm-side{display:none;}
}
/* panel heading — the category speaking for itself, in place of the old rail */
.mm-head{grid-column:1 / -1;padding-bottom:10px;border-bottom:1px solid rgba(138,103,51,.24);}
.mm-head-t{font-family:'Cormorant Garamond',serif;font-size:24px;line-height:1.05;color:var(--brand-deep);}
/* wider measure, not smaller type: at 62ch the longer section blurbs ran to
three lines and each one cost the panel ~19px of height */
.mm-head-b{font-family:'Jost',sans-serif;font-size:11.5px;line-height:1.5;
color:rgba(36,26,22,.58);margin-top:4px;max-width:88ch;}
/* Group columns.
The planning documents take a section up to 7 groups. Flex-wrap tore those
into ragged rows of uneven width; an auto-fill grid keeps the columns aligned
however many groups a section happens to have. */
.mm-groups{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));
gap:14px 30px;align-items:start;}
@media(min-width:1600px){.mm-groups{grid-template-columns:repeat(auto-fill,minmax(176px,1fr));}}
.mm-group{min-width:0;}
.mm-group-h{font-family:'Jost',sans-serif;font-size:9.5px;letter-spacing:.17em;text-transform:uppercase;
color:var(--brand-deep);padding-bottom:7px;margin-bottom:2px;position:relative;}
.mm-group-h::after{content:"";position:absolute;left:0;bottom:0;width:26px;height:1px;background:var(--gold);}
/* the group's own line from the document — sits between heading and links */
.mm-group-n{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:12px;line-height:1.3;
color:rgba(138,103,51,.9);margin:6px 0 6px;}
.mm-link{display:block;font-family:'Jost',sans-serif;padding:2.5px 0;
color:rgba(36,26,22,.78);transition:color .28s ease;}
.mm-link:hover{color:var(--gold-deep);}
.mm-link-t{display:block;font-size:12.5px;line-height:1.4;}
.mm-diamond{width:5px;height:5px;background:var(--gold);transform:rotate(45deg);flex:none;}
/* the single image the panel keeps */
.mm-side{display:flex;flex-direction:column;gap:11px;}
.mm-side-img{display:block;position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--cream);
border:1px solid rgba(138,103,51,.3);}
.mm-side-img img{width:100%;height:100%;object-fit:cover;object-position:top center;
transition:transform 1.1s cubic-bezier(.19,1,.22,1);}
.mm-side:hover .mm-side-img img{transform:scale(1.06);}
.mm-side-cta{font-family:'Jost',sans-serif;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
color:var(--brand-deep);border-bottom:1px solid var(--gold);padding-bottom:4px;align-self:flex-start;
transition:color .3s ease;}
.mm-side:hover .mm-side-cta{color:var(--gold-deep);}
.mm-side-plain{padding-top:4px;}
/* ============================================================
SEARCH OVERLAY
============================================================ */
#search-overlay{position:fixed;inset:0;z-index:90;opacity:0;visibility:hidden;
transition:opacity .4s ease,visibility .4s;}
#search-overlay.open{opacity:1;visibility:visible;}
#search-overlay::before{content:"";position:absolute;inset:0;background:rgba(42,6,16,.75);backdrop-filter:blur(6px);}
.so-sheet{position:relative;background:#6B1226;
border-bottom:1px solid rgba(176,138,74,.45);
transform:translateY(-24px);transition:transform .5s cubic-bezier(.19,1,.22,1);}
#search-overlay.open .so-sheet{transform:none;}
.so-tag{font-family:'Jost',sans-serif;font-size:11px;letter-spacing:.08em;color:var(--cream);
border:1px solid rgba(176,138,74,.35);padding:7px 15px;transition:.3s ease;}
.so-tag:hover{background:var(--gold);color:var(--brand-ink);border-color:var(--gold);}
/* ============================================================
MOBILE DRAWER — accordion version of the mega menu
============================================================ */
#mobile-drawer.open{transform:translateX(0);}
#drawer-overlay.open{opacity:1;pointer-events:auto;}
/* P1: the drawer is the mobile header, so it follows the header's light surface.
Same structure, same order, same links — only the ground and the text colours
moved from near-black green to ivory/ink. */
.md-top{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
padding:14px 0;border-bottom:1px solid rgba(36,26,22,.12);
font-family:'Cormorant Garamond',serif;font-size:22px;color:var(--brand-deep);
text-align:left;transition:color .3s ease;}
.md-top:hover,.md-acc.open>.md-top{color:var(--gold-deep);}
.md-top.is-gold{color:var(--gold-deep);}
.md-arrow{font-size:14px;color:rgba(138,103,51,.7);}
.md-plus{position:relative;width:11px;height:11px;flex:none;}
.md-plus::before,.md-plus::after{content:"";position:absolute;background:var(--gold-deep);
transition:transform .35s cubic-bezier(.19,1,.22,1);}
.md-plus::before{top:5px;left:0;width:11px;height:1px;}
.md-plus::after{left:5px;top:0;width:1px;height:11px;}
.md-acc.open .md-plus::after{transform:scaleY(0);}
.md-body{max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(.19,1,.22,1);}
.md-acc.open .md-body{max-height:1600px;}
.md-group{font-family:'Jost',sans-serif;font-size:9px;letter-spacing:.2em;text-transform:uppercase;
color:var(--gold-deep);opacity:.9;margin:14px 0 7px;}
.md-group-n{display:block;font-family:'Cormorant Garamond',serif;font-style:italic;
font-size:12px;letter-spacing:0;text-transform:none;opacity:.8;margin-top:3px;}
.md-sub{display:block;padding:8px 0 8px 14px;
font-family:'Jost',sans-serif;color:rgba(36,26,22,.78);
border-left:1px solid rgba(138,103,51,.28);transition:.3s ease;}
.md-sub:hover{color:var(--gold-deep);border-left-color:var(--gold-deep);padding-left:19px;}
.md-sub-t{display:block;font-size:13px;line-height:1.4;}
.md-sub.is-gold{color:var(--gold-deep);}
.md-all{display:inline-flex;align-items:center;gap:8px;margin:14px 0 20px;
font-family:'Jost',sans-serif;font-size:9.5px;letter-spacing:.18em;color:var(--gold-deep);
border-bottom:1px solid rgba(138,103,51,.5);padding-bottom:4px;}
body.no-scroll{overflow:hidden;}
/* ============================================================
PREMIUM PRODUCT CARD (includes/product-card.php)
============================================================ */
.card-img-alt{position:absolute;inset:0;opacity:0;transition:opacity .7s ease,transform 1.4s cubic-bezier(.19,1,.22,1);}
.lux-card:hover .card-img-alt{opacity:1;}
.card-badges{position:absolute;top:12px;left:12px;display:flex;flex-direction:column;align-items:flex-start;gap:5px;z-index:2;}
.pc-badge{font-family:'Jost',sans-serif;font-size:8.5px;letter-spacing:.16em;padding:4px 9px;
background:rgba(42,6,16,.9);color:var(--gold-light);}
.pc-badge-gold{background:var(--gold);color:var(--brand-ink);}
.pc-low{position:absolute;bottom:12px;left:12px;z-index:2;font-family:'Jost',sans-serif;font-size:8.5px;
letter-spacing:.16em;padding:4px 9px;background:rgba(251,247,239,.94);color:var(--gold-deep);}
.pc-oos{color:rgba(36,26,22,.55);}
.pc-rating{display:flex;align-items:center;gap:5px;margin-top:7px;
font-family:'Jost',sans-serif;font-size:11px;color:rgba(36,26,22,.6);}
.pc-star{color:var(--gold);font-size:12px;line-height:1;}
.pc-rev{color:rgba(36,26,22,.38);}
.pc-swatches{display:flex;align-items:center;gap:5px;margin-top:9px;}
.pc-sw{width:11px;height:11px;border-radius:50%;border:1px solid rgba(36,26,22,.16);}
.pc-sw-more{font-family:'Jost',sans-serif;font-size:9px;color:rgba(36,26,22,.4);}
/* ============================================================
SHOP / LISTING PAGE
============================================================ */
.shop-hero{position:relative;background:var(--brand-ink);color:var(--ivory);overflow:hidden;}
.shop-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;opacity:.22;}
.crumb{font-family:'Jost',sans-serif;font-size:10px;letter-spacing:.14em;color:rgba(242,233,216,.55);}
.crumb a:hover{color:var(--gold);}
.crumb span[aria-hidden]{opacity:.4;margin:0 8px;}
/* opaque, not blurred — same reasoning as .navbar above.
Sticks directly under the header. This used to restate the header height in
three hardcoded sums that no longer matched it; --head-h is the only number. */
.shop-bar{position:sticky;top:var(--head-h);z-index:30;background:var(--ivory);
border-bottom:1px solid rgba(36,26,22,.1);}
/* the condensed header drops the announcement strip, and the bar follows it up */
#nav.nav-condensed ~ main .shop-bar{top:var(--bar-h);}
.chip-rail{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px;}
.chip{flex:none;font-family:'Jost',sans-serif;font-size:11px;letter-spacing:.09em;white-space:nowrap;
padding:8px 15px;border:1px solid rgba(36,26,22,.16);color:var(--ink);transition:.28s ease;}
.chip:hover{border-color:var(--gold);color:var(--gold-deep);}
.chip.active{background:var(--brand-deep);color:var(--gold-light);border-color:var(--brand-deep);}
.chip .n{font-size:9px;opacity:.55;margin-left:5px;}
.sort-select{font-family:'Jost',sans-serif;font-size:11px;letter-spacing:.09em;color:var(--ink);
border:1px solid rgba(36,26,22,.16);background:#fff;padding:8px 30px 8px 14px;cursor:pointer;
appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='none' stroke='%23A6802B' stroke-width='1.4'%3E%3Cpath d='M2 3.5 5 6.5 8 3.5'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 12px center;}
.sort-select:focus{outline:none;border-color:var(--gold);}
.empty-note{text-align:center;padding:80px 20px;}
.empty-note h3{font-family:'Cormorant Garamond',serif;font-size:34px;color:var(--brand-deep);font-style:italic;}
.empty-note p{font-family:'Jost',sans-serif;font-size:13px;color:rgba(36,26,22,.5);margin-top:12px;}
/* ---- "arriving soon" — the page behind a menu link with no stock yet.
The menu deliberately shows all 48 links (confirmed 2026-07-30), so this page
is a designed destination, not an error state. It gets its own ground and a
real next step (enquire), rather than a bare grid under a sort dropdown. */
.soon{background:
radial-gradient(120% 90% at 50% 0%,#FFFFFF 0%,var(--ivory) 42%,var(--cream) 100%);
border-bottom:1px solid rgba(138,103,51,.2);}
.soon-in{max-width:660px;margin:0 auto;padding:84px 24px 92px;text-align:center;}
.soon-eyebrow{font-family:'Jost',sans-serif;font-size:10px;letter-spacing:.24em;
text-transform:uppercase;color:var(--gold-deep);}
.soon-title{font-family:'Cormorant Garamond',serif;font-size:clamp(30px,4.4vw,46px);
line-height:1.1;color:var(--brand-deep);font-style:italic;font-weight:400;margin-top:14px;
text-wrap:balance;}
.soon-copy{font-family:'Jost',sans-serif;font-size:13.5px;line-height:1.75;
color:rgba(36,26,22,.6);margin:18px auto 0;max-width:50ch;}
.soon-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 26px;margin-top:34px;}
.soon-alt{font-family:'Jost',sans-serif;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
color:rgba(36,26,22,.55);border-bottom:1px solid rgba(138,103,51,.45);padding-bottom:3px;
transition:color .3s ease;}
.soon-alt:hover{color:var(--gold-deep);}
@media(max-width:520px){
.soon-in{padding:58px 20px 64px;}
.soon-cta{flex-direction:column;align-items:stretch;}
.soon-cta .btn-foil{text-align:center;}
}
/* SEO term cloud at the foot of a category page (System B) */
.seo-cloud a{display:inline-block;font-family:'Jost',sans-serif;font-size:11px;color:rgba(36,26,22,.55);
border-bottom:1px solid transparent;transition:.25s ease;}
.seo-cloud a:hover{color:var(--gold-deep);border-bottom-color:var(--gold);}
/* ============================================================
PDP — gallery zoom, lightbox, specs, size guide, sticky buy bar
============================================================ */
/* Partial-fill stars. The old markup printed five solid gold stars whatever
the rating was, including beside "0 reviews". This shows the real value. */
.pdp-stars{position:relative;display:inline-block;font-size:15px;line-height:1;letter-spacing:.08em;white-space:nowrap;}
.pdp-stars-bg{color:rgba(36,26,22,.20);}
.pdp-stars-fill{position:absolute;left:0;top:0;overflow:hidden;color:var(--gold);}
/* Thumbnail rail. Below lg it is a horizontal row, and a piece with five
images overflows a phone screen — which dragged the whole page sideways.
The rail scrolls by itself; the page does not. */
@media(max-width:1023px){
/* min-width:0 on both is the load-bearing part. A grid/flex item defaults to
min-width:auto, so it refuses to shrink under its content and the 408px
rail pushed the whole column wider than the screen. */
.pdp-gallery{min-width:0;max-width:100%;}
.pdp-thumbs{min-width:0;max-width:100%;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.pdp-thumbs::-webkit-scrollbar{display:none;}
.pdp-thumbs>.pdp-thumb{flex:0 0 auto;}
}
/* Hover zoom on the main image */
.pdp-stage{cursor:zoom-in;}
.pdp-stage img{transition:transform .45s cubic-bezier(.19,1,.22,1);}
.pdp-stage.zooming img{transform:scale(2.1);transition-duration:.18s;}
.pdp-zoom-btn{position:absolute;right:12px;bottom:12px;z-index:4;width:38px;height:38px;display:grid;place-items:center;
background:rgba(251,247,239,.92);border:1px solid rgba(176,138,74,.5);color:var(--gold-deep);
transition:.3s;cursor:zoom-in;}
.pdp-zoom-btn:hover{background:var(--brand-deep);color:var(--gold-light);border-color:var(--brand-deep);}
.pdp-zoom-hint{position:absolute;left:12px;bottom:16px;z-index:4;font-family:'Jost',sans-serif;font-size:8.5px;
letter-spacing:.18em;color:rgba(36,26,22,.42);opacity:0;transition:opacity .35s ease;pointer-events:none;}
.pdp-stage:hover .pdp-zoom-hint{opacity:1;}
@media(max-width:1023px){.pdp-zoom-hint{display:none;}}
/* Full-screen gallery */
.pdp-lb{position:fixed;inset:0;z-index:120;background:rgba(42,6,16,.96);
display:flex;align-items:center;justify-content:center;padding:56px 16px;}
.pdp-lb[hidden]{display:none;}
.pdp-lb img{max-width:min(92vw,900px);max-height:86vh;object-fit:contain;display:block;}
.pdp-lb-close{position:absolute;top:14px;right:18px;font-size:34px;line-height:1;color:var(--gold-light);
background:none;border:0;cursor:pointer;padding:6px 12px;}
.pdp-lb-nav{position:absolute;top:50%;transform:translateY(-50%);font-size:42px;line-height:1;
color:var(--gold-light);background:none;border:0;cursor:pointer;padding:10px 16px;opacity:.75;transition:opacity .25s;}
.pdp-lb-nav:hover{opacity:1;}
.pdp-lb-prev{left:6px;} .pdp-lb-next{right:6px;}
.pdp-lb-count{position:absolute;bottom:18px;left:0;right:0;text-align:center;
font-family:'Jost',sans-serif;font-size:10px;letter-spacing:.18em;color:rgba(239,223,190,.65);}
/* ============================================================
COLLECTION — filters that belong to the aisle you are in
Menswear formals narrow by fit and sleeve; occasion wear by neckline and
length. Rows are built from the products actually on the page, so nothing
here can offer a filter that leads nowhere. See config/segments.php.
============================================================ */
.coll-facets{border-top:1px solid rgba(36,26,22,.08);background:hsla(41,46%,92%,.35);}
.coll-facet{display:flex;align-items:center;gap:14px;padding:9px 0;}
.coll-facet + .coll-facet{border-top:1px solid rgba(36,26,22,.06);}
.coll-facet-l{flex:0 0 74px;font-family:'Jost',sans-serif;font-size:9.5px;letter-spacing:.16em;
color:rgba(36,26,22,.4);text-transform:uppercase;}
.coll-clear{display:inline-block;margin:4px 0 12px;font-family:'Jost',sans-serif;font-size:10px;
letter-spacing:.14em;color:var(--gold-deep);border-bottom:1px solid rgba(138,103,51,.4);}
@media (max-width:640px){
.coll-facet{flex-direction:column;align-items:flex-start;gap:6px;}
.coll-facet-l{flex:none;}
}
/* A floor-length dress in a shirt-shaped crop is a photograph of a waistband. */
.coll-taller .ratio{aspect-ratio:3/4.4;}
/* ============================================================
CHECKOUT — the two steps
Asking for the address and the payment method on one screen made a long
page, and a long page at the till is somewhere to change your mind. The
indicator exists so the split does not read as MORE work: it shows which
step you are on and that there is only one more.
============================================================ */
.co-steps{display:flex;align-items:center;gap:26px;list-style:none;padding:0;margin:0;flex-wrap:wrap;}
.co-steps li{display:flex;align-items:center;gap:9px;font-family:'Jost',sans-serif;font-size:11px;
letter-spacing:.12em;text-transform:uppercase;color:rgba(36,26,22,.38);}
.co-steps li + li::before{content:"";width:26px;height:1px;background:rgba(36,26,22,.15);margin-right:17px;}
.co-step-n{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
border:1px solid rgba(36,26,22,.2);font-size:10px;letter-spacing:0;}
.co-steps li.is-on{color:var(--brand-deep);}
.co-steps li.is-on .co-step-n{background:var(--brand-deep);color:var(--gold-light);border-color:var(--brand-deep);}
/* A completed step stays legible and stays clickable — going back to fix a
typo should look possible, not like an escape. */
.co-steps li.is-done{color:rgba(36,26,22,.6);}
.co-steps li.is-done .co-step-n{border-color:var(--gold);color:var(--gold-deep);}
.co-steps a{border-bottom:1px solid rgba(176,138,74,.5);}
.co-steps a:hover{color:var(--brand-deep);}
/* ============================================================
SEGMENT-AWARE PDP
The buybox modules that differ by what kind of product this is.
See config/segments.php and includes/pdp/.
============================================================ */
/* Attribute chips — the two-second summary. Composition, weave, care. This
information already existed on every product; it was inside an accordion
that starts closed, which is no way to answer the first question a shopper
has about a piece of cloth. */
.pdp-chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0;}
.pdp-chip{font-family:'Jost',sans-serif;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
color:var(--brand-deep);background:rgba(138,27,51,.06);border:1px solid rgba(138,27,51,.14);
padding:6px 11px;white-space:nowrap;}
/* The model reference. Quiet, but sat right under the sizes, because it is
read at the exact moment somebody is deciding between two of them. */
.pdp-model{font-family:'Jost',sans-serif;font-size:12px;line-height:1.6;color:rgba(36,26,22,.62);
border-left:2px solid var(--gold);padding-left:12px;}
/* Segment policy notes — things true of one kind of product and not the rest
(an opened fragrance cannot come back). Warm rather than alarming: it is a
term of sale, not a warning. */
.pdp-policy{list-style:none;padding:0;margin:0;font-family:'Jost',sans-serif;font-size:11.5px;
line-height:1.65;color:rgba(36,26,22,.6);}
.pdp-policy li{position:relative;padding-left:16px;margin-top:7px;}
.pdp-policy li::before{content:"·";position:absolute;left:4px;color:var(--gold-deep);font-weight:700;}
/* ---- Rhythm per segment ----
Same palette, same components, different pacing. Menswear formals read as
precision: tighter chips, denser accordions. Occasion wear reads as air:
more room around the description and a larger lead line, because that page
is selling how a piece falls, not how it is built. */
.seg-shirt-formal .pdp-chip{letter-spacing:.12em;}
.seg-shirt-formal .pdp-specs th,
.seg-shirt-formal .pdp-specs td{padding:7px 0;}
.seg-shirt-casual .pdp-chip{background:rgba(176,138,74,.10);border-color:rgba(176,138,74,.32);
color:var(--gold-deep);}
.seg-dress .pdp-chips{gap:10px;}
.seg-dress .pdp-chip{text-transform:none;letter-spacing:.04em;font-size:11.5px;
background:transparent;border-color:rgba(36,26,22,.16);color:rgba(36,26,22,.7);}
.seg-dress .font-display.italic{font-size:1.45rem;line-height:1.5;}
@media (min-width:1024px){
.seg-dress .pdp-gallery{gap:22px;}
}
/* Tailoring reads like the formal shirt it is worn over — precision, not air.
Same tight tracking on the chips; nothing louder, because a blazer page that
shouts undercuts the garment. */
.seg-jacket .pdp-chip{letter-spacing:.12em;}
.seg-jacket .pdp-specs th,
.seg-jacket .pdp-specs td{padding:7px 0;}
/* Ceremonial is the one page in the shop allowed to slow down. The piece is
bought months ahead for a date on a calendar, and the photograph is doing
most of the selling — so the chips step back to gold hairlines, the lead
line grows, and the gallery gets room to breathe. */
.seg-ethnic .pdp-chips{gap:10px;}
.seg-ethnic .pdp-chip{text-transform:none;letter-spacing:.05em;font-size:11.5px;
background:transparent;border-color:rgba(176,138,74,.42);color:var(--gold-deep);}
.seg-ethnic .font-display.italic{font-size:1.45rem;line-height:1.55;}
@media (min-width:1024px){
.seg-ethnic .pdp-gallery{gap:22px;}
}
/* Specifications table */
.pdp-specs{width:100%;border-collapse:collapse;font-family:'Jost',sans-serif;font-size:13px;}
.pdp-specs th,.pdp-specs td{text-align:left;padding:9px 0;border-bottom:1px solid rgba(36,26,22,.08);vertical-align:top;}
.pdp-specs th{width:42%;font-weight:400;color:rgba(36,26,22,.5);letter-spacing:.04em;}
.pdp-specs td{color:rgba(36,26,22,.8);}
.pdp-specs tr:last-child th,.pdp-specs tr:last-child td{border-bottom:0;}
/* Delivery & returns list */
.pdp-facts{list-style:none;padding:0;margin:0;font-family:'Jost',sans-serif;font-size:13px;
color:rgba(36,26,22,.72);line-height:1.7;}
.pdp-facts li{position:relative;padding-left:18px;margin-bottom:9px;}
.pdp-facts li::before{content:"—";position:absolute;left:0;color:var(--gold);}
.pdp-facts b{color:var(--brand-deep);font-weight:500;}
/* Size guide modal */
.sg-overlay{position:fixed;inset:0;z-index:120;background:rgba(42,6,16,.72);
display:flex;align-items:center;justify-content:center;padding:20px;overflow-y:auto;}
.sg-overlay[hidden]{display:none;}
.sg-panel{position:relative;background:var(--ivory);border:1px solid rgba(176,138,74,.35);
max-width:520px;width:100%;max-height:88vh;overflow-y:auto;padding:34px 32px 36px;}
.sg-close{position:absolute;top:10px;right:14px;font-size:28px;line-height:1;color:var(--ink);
background:none;border:0;cursor:pointer;opacity:.5;transition:opacity .25s;}
.sg-close:hover{opacity:1;}
.sg-table-wrap{overflow-x:auto;}
.sg-table{width:100%;border-collapse:collapse;font-family:'Jost',sans-serif;font-size:13px;}
.sg-table th{text-align:left;padding:10px 12px 10px 0;border-bottom:1px solid var(--gold);
font-weight:400;font-size:10px;letter-spacing:.16em;color:var(--brand-deep);text-transform:uppercase;}
.sg-table th span{display:block;font-size:9px;letter-spacing:.1em;color:rgba(36,26,22,.4);margin-top:2px;}
.sg-table td{padding:9px 12px 9px 0;border-bottom:1px solid rgba(36,26,22,.08);color:rgba(36,26,22,.75);}
.sg-table .sg-size{font-family:'Jost',sans-serif;letter-spacing:.1em;color:var(--brand-deep);}
.sg-how{list-style:none;padding:0;margin:0;font-family:'Jost',sans-serif;font-size:12.5px;
color:rgba(36,26,22,.7);line-height:1.65;}
.sg-how li{position:relative;padding-left:16px;margin-bottom:7px;}
.sg-how li::before{content:"·";position:absolute;left:4px;color:var(--gold);font-size:18px;line-height:1;}
.sg-how b{color:var(--brand-deep);font-weight:500;}
.sg-note{background:var(--cream);border:1px solid rgba(176,138,74,.22);padding:18px 20px;}
.sg-cta{display:inline-block;font-family:'Jost',sans-serif;font-size:10px;letter-spacing:.24em;
color:var(--gold-light);background:var(--brand-deep);padding:12px 20px;transition:.3s;}
.sg-cta:hover{background:var(--brand-ink);}
/* Mobile sticky buy bar */
.pdp-sticky{position:fixed;left:0;right:0;bottom:0;z-index:90;display:flex;align-items:center;gap:14px;
padding:10px 14px calc(10px + env(safe-area-inset-bottom));
background:rgba(251,247,239,.97);border-top:1px solid rgba(176,138,74,.4);
box-shadow:0 -12px 30px -22px rgba(107,18,38,.6);}
.pdp-sticky[hidden]{display:none;}
.pdp-sticky-info{flex:1;min-width:0;}
.pdp-sticky-title{font-family:'Cormorant Garamond',Georgia,serif;font-size:17px;line-height:1.15;
color:var(--brand-deep);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pdp-sticky-price{font-family:'Jost',sans-serif;font-size:11px;letter-spacing:.12em;color:rgba(36,26,22,.6);margin-top:1px;}
.pdp-sticky-btn{flex:0 0 auto;background:var(--brand-deep);color:var(--gold-light);border:0;cursor:pointer;
font-family:'Jost',sans-serif;font-size:11px;letter-spacing:.2em;padding:14px 22px;transition:.3s;}
.pdp-sticky-btn:hover{background:var(--brand-ink);}
.pdp-sticky-btn:disabled{opacity:.4;cursor:not-allowed;}
/* Desktop keeps the real buttons in view; the bar is a small-screen answer. */
@media(min-width:1024px){.pdp-sticky{display:none!important;}}
/* ============================================================
WISHLIST + RECENTLY VIEWED
============================================================ */
/* Card heart. The wrapper exists so the button can sit over a card that is
itself one big — a button inside an anchor is invalid markup. */
.pc-wrap{position:relative;}
.pc-wish{position:absolute;top:12px;right:12px;z-index:5;width:34px;height:34px;
display:grid;place-items:center;border:1px solid rgba(36,26,22,.12);
background:rgba(251,247,239,.92);color:rgba(36,26,22,.45);
border-radius:50%;cursor:pointer;transition:.28s;}
.pc-wish:hover{color:var(--brand);border-color:var(--gold);transform:scale(1.08);}
.pc-wish.on{color:var(--brand);border-color:var(--gold);background:var(--gold-pale);}
.pc-wish.on svg{fill:var(--brand);}
.pc-wish.pending{opacity:.5;pointer-events:none;}
.pc-wish:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
/* Product-page heart */
.pdp-wish{display:inline-flex;align-items:center;gap:9px;padding:12px 18px;
border:1px solid rgba(36,26,22,.18);background:transparent;cursor:pointer;
font-family:'Jost',sans-serif;font-size:10px;letter-spacing:.2em;
color:rgba(36,26,22,.62);transition:.28s;}
.pdp-wish:hover{border-color:var(--gold);color:var(--brand-deep);}
.pdp-wish.on{border-color:var(--gold);color:var(--brand-deep);background:var(--gold-pale);}
.pdp-wish.on svg{fill:var(--brand);}
.pdp-wish.pending{opacity:.5;pointer-events:none;}
/* Recently viewed rail — scrolls sideways rather than wrapping, so it never
competes with the sections above it for vertical space. */
.rv-rail{display:flex;gap:18px;overflow-x:auto;padding-bottom:8px;
scrollbar-width:thin;-webkit-overflow-scrolling:touch;}
.rv-item{flex:0 0 auto;width:150px;text-decoration:none;}
@media(min-width:1024px){.rv-item{width:180px;}}
.rv-img{width:100%;aspect-ratio:3/4;overflow:hidden;background:var(--cream);
border:1px solid rgba(36,26,22,.07);}
.rv-img img{width:100%;height:100%;transition:transform .6s cubic-bezier(.19,1,.22,1);}
.rv-item:hover .rv-img img{transform:scale(1.05);}
.rv-title{font-family:'Cormorant Garamond',Georgia,serif;font-size:16px;line-height:1.2;
color:var(--brand-deep);margin-top:9px;}
.rv-price{font-family:'Jost',sans-serif;font-size:11px;letter-spacing:.1em;
color:rgba(36,26,22,.5);margin-top:2px;}
/* respect reduced-motion */
@media(prefers-reduced-motion:reduce){
*{animation:none!important;transition-duration:.01ms!important;}
}
/* Account — sign-in details rows */
.ac-row{display:flex;align-items:center;justify-content:space-between;gap:16px;
padding:16px 0;border-bottom:1px solid rgba(36,26,22,.08);}
.ac-row:last-child{border-bottom:0;}
.ac-label{font-family:'Jost',sans-serif;font-size:10px;letter-spacing:.18em;color:rgba(36,26,22,.45);}
.ac-value{font-family:'Jost',sans-serif;font-size:14px;color:var(--brand-deep);margin-top:3px;word-break:break-all;}
.ac-none{color:rgba(36,26,22,.35);font-style:italic;}
.ac-pill{flex:0 0 auto;font-family:'Jost',sans-serif;font-size:9px;letter-spacing:.16em;padding:5px 10px;white-space:nowrap;}
.ac-pill-ok{background:rgba(138,27,51,.10);color:var(--brand);border:1px solid rgba(138,27,51,.25);}
.ac-pill-warn{background:rgba(176,138,74,.14);color:var(--gold-antique);border:1px solid rgba(176,138,74,.45);}
.ac-pill-miss{background:rgba(36,26,22,.05);color:rgba(36,26,22,.45);border:1px solid rgba(36,26,22,.14);}
/* Inline link inside long-form copy (policy pages).
The legal documents are the one place on the site with links buried in
running prose, where a colour change alone is too weak to find. The gold
underline is the same one the nav uses, kept thin so a paragraph with three
links still reads as a paragraph. */
.lnk{color:var(--gold-deep);border-bottom:1px solid rgba(176,138,74,.45);
transition:color .2s ease,border-color .2s ease;}
.lnk:hover{color:var(--brand);border-bottom-color:var(--brand);}
/* ============================================================
CHECKOUT — payment method rows
Whole row is the label, so the hit area is the row and not a 14px circle.
============================================================ */
.pay-opt{display:flex;align-items:flex-start;gap:12px;cursor:pointer;
border:1px solid rgba(36,26,22,.15);padding:14px 16px;margin-bottom:10px;
transition:border-color .25s ease,background .25s ease;}
.pay-opt:hover{border-color:rgba(138,103,51,.55);}
.pay-opt.is-on{border-color:var(--gold-deep);background:rgba(242,233,216,.5);}
.pay-opt input{margin-top:3px;accent-color:#8A1B33;flex:none;}
.pay-opt > span{flex:1 1 auto;min-width:0;}
.pay-opt b{display:block;font-family:'Jost',sans-serif;font-weight:500;font-size:13.5px;color:var(--brand-deep);}
.pay-opt i{display:block;font-style:normal;font-family:'Jost',sans-serif;font-size:11.5px;
line-height:1.5;color:rgba(36,26,22,.6);margin-top:3px;}
.pay-opt em{flex:none;font-style:normal;font-family:'Jost',sans-serif;font-weight:500;
font-size:13.5px;color:var(--brand-deep);}