/* ============================================================================
   Elegance landing — "Ember"
   ----------------------------------------------------------------------------
   Register: brand. Colour strategy: committed, on a warm neutral.

   The previous pass ran deep emerald across 40-50% of the surface and read as
   too green. Emerald is now out of the grounds entirely. The ground is the
   theme's own warm neutral ramp, which is authored at hue 75, so #141211 and
   #22201E read as espresso rather than as grey or green. Gold carries the
   accent; cream carries the product photography. Nothing new is invented here,
   and the shared theme file is deliberately NOT edited (its own comments record
   that restyling headings globally once leaked a display serif into the POS and
   accounting screens).

   Measured pairs (sRGB, WCAG 2.1):

     on --n-1000 #0B0A09   n-0 19.34   n-300 10.91   g-400 8.98
     on --n-950  #141211   n-0 18.26   n-300 10.30   g-400 8.48
     on --n-900  #22201E   n-0 15.87   n-300  8.95   g-400 7.37
     on --n-50   #F6F5F3   n-1000 18.16  n-700 7.93  g-800 7.84

   Ground rhythm alternates roughly half light, half dark, so the page no
   longer sits as one heavy block.
   ========================================================================== */

.ld-body {
    /* Arabic type. Scoped to the storefront rather than pushed into the shared
       theme, which the dashboard, POS and accounting screens also read: those
       are a different register and keep Tajawal.
       El Messiri is modern and lightly calligraphic without Amiri's classical
       associations; IBM Plex Sans Arabic has a true Latin twin, so mixed
       Arabic/Latin lines do not visibly shift weight. */
    --ld-font-ar-display: 'El Messiri', Georgia, serif;
    --font-ui-ar: 'IBM Plex Sans Arabic', 'Tajawal', system-ui, sans-serif;

    /* Grounds — warm neutral ramp, no green */
    --ld-deep:        var(--n-1000);
    --ld-ground:      var(--n-950);
    --ld-ground-alt:  var(--n-900);
    --ld-panel:       var(--n-50);
    --ld-panel-alt:   var(--n-25);

    /* Ink */
    --ld-ink:         var(--n-0);
    --ld-ink-muted:   var(--n-300);
    --ld-ink-dim:     var(--n-400);
    --ld-ink-panel:   var(--n-1000);
    --ld-ink-panel-2: var(--n-700);

    /* Accent: rules, numerals, small marks. Never a glow, never a gradient. */
    --ld-gold:        var(--g-400);
    --ld-gold-panel:  var(--g-800);
    --ld-rule:        rgba(204, 170, 108, 0.26);
    --ld-rule-dim:    rgba(254, 252, 251, 0.12);
    --ld-rule-panel:  rgba(53, 50, 47, 0.16);

    /* Display steps sit well above the product scale — this is brand register. */
    --ld-display:  clamp(2.75rem, 7.2vw, 5.25rem);
    --ld-h2:       clamp(1.75rem, 3.6vw, 3rem);
    --ld-h3:       clamp(1.0625rem, 1.5vw, 1.375rem);
    --ld-lead:     clamp(1rem, 1.3vw, 1.1875rem);

    --ld-gutter:   clamp(1.25rem, 5vw, 4.5rem);
    --ld-max:      1440px;

    --ld-ease:     cubic-bezier(0.25, 1, 0.5, 1);      /* out-quart */
    --ld-ease-exp: cubic-bezier(0.16, 1, 0.3, 1);      /* out-expo  */

    margin: 0;
    width: 100%;
    max-width: 100%;
    background: var(--ld-ground);
    color: var(--ld-ink);
    font-family: var(--font-ui-ar);
    line-height: var(--lh-body);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    overflow-x: clip;
}

/* Kill the browser's default ~8px body margin and any sideways page shift.
   Scoped with :has(.ld-body) so the dashboard is untouched. */
html:has(.ld-body),
html:has(.ld-body) body {
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    overflow-x: clip;
}

.ld-body *,
.ld-body *::before,
.ld-body *::after { box-sizing: border-box; }

.ld-body a { color: inherit; text-decoration: none; }
.ld-body img { display: block; max-width: 100%; }

/* Every heading gets an explicit colour. Inheritance loses to the theme's
   element-level `h1,h2,h3 { color: var(--text-heading) }`, which is exactly how
   the old hero headline ended up dark-on-dark at 1.01:1. */
.ld-body h1, .ld-body h2, .ld-body h3, .ld-body h4 {
    font-family: var(--font-brand);
    font-weight: 500;
    line-height: var(--lh-tight);
    color: var(--ld-ink);
    margin: 0;
}
html[dir="rtl"] .ld-body h1,
html[dir="rtl"] .ld-body h2,
html[dir="rtl"] .ld-body h3 {
    /* Arabic leads: the display voice is an Arabic face, not a Latin serif
       with Arabic bolted underneath it. */
    font-family: var(--ld-font-ar-display);
    line-height: 1.28;   /* El Messiri runs shorter than the Naskh it replaced */
}

.ld-body p { margin: 0; }

/* ── Utilities ───────────────────────────────────────────────────────────── */

.ld-shell {
    max-width: var(--ld-max);
    margin-inline: auto;
    padding-inline: var(--ld-gutter);
}

/* Tracking and uppercase are Latin-only affordances. Arabic is a connected
   script: spacing it out pulls joined glyphs apart and looks like a fault. */
.ld-caps {
    font-family: var(--font-ui-en);
    font-size: var(--fs-xs);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
}
html[dir="rtl"] .ld-caps {
    font-family: var(--font-ui-ar);
    letter-spacing: normal;
    text-transform: none;
    font-size: var(--fs-sm);
}

.ld-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--ld-gold);
    margin-bottom: var(--sp-4);
}
/* The rule draws itself when the section arrives. */
.ld-eyebrow::before {
    content: '';
    width: 1.75rem;
    height: 1px;
    background: currentColor;
    opacity: 0.75;
    transform-origin: var(--ld-origin, left) center;
    transition: transform 0.9s var(--ld-ease-exp) 0.15s;
}
.ld-anim .ld-eyebrow::before { transform: scaleX(0); }
html[dir="rtl"] .ld-eyebrow::before { --ld-origin: right; }
.ld-anim .is-in .ld-eyebrow::before,
.ld-anim .ld-eyebrow.is-in::before { transform: scaleX(1); }
.ld-eyebrow--panel { color: var(--ld-gold-panel); }

.ld-sr {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.ld-body .ld-skip {
    position: absolute;
    inset-inline-start: var(--sp-4);
    top: -100%;
    z-index: 200;
    background: var(--ld-panel);
    color: var(--ld-ink-panel);
    padding: var(--sp-3) var(--sp-5);
    border-radius: 2px;
    transition: top 0.2s var(--ld-ease);
}
.ld-body .ld-skip:focus { top: var(--sp-4); }

.ld-body :focus-visible {
    outline: 2px solid var(--ld-gold);
    outline-offset: 3px;
    border-radius: 2px;
}

/* Numerals read better in the mono face and stop prices jittering in a rail. */
.ld-num {
    font-family: var(--font-mono), ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    unicode-bidi: isolate;
    direction: ltr;
}

/* ── Scroll progress ─────────────────────────────────────────────────────── */
/* Scroll-driven, so it costs no scroll listener. Browsers without
   animation-timeline simply never see the bar move, and it stays at zero. */

.ld-progress {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    height: 2px;
    z-index: 300;
    background: var(--ld-gold);
    transform: scaleX(0);
    transform-origin: left center;
    pointer-events: none;
}
html[dir="rtl"] .ld-progress { transform-origin: right center; }

@supports (animation-timeline: scroll()) {
    .ld-progress {
        animation: ld-progress-grow linear;
        animation-timeline: scroll(root block);
    }
    @keyframes ld-progress-grow {
        from { transform: scaleX(0); }
        to   { transform: scaleX(1); }
    }
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.ld-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 1rem 1.9rem;
    border: 0;
    border-radius: 2px;
    cursor: pointer;
    font-family: inherit;
    font-size: var(--fs-sm);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    overflow: hidden;
    /* --mx/--my are set by the magnetic pointer handler. */
    transform: translate3d(var(--mx, 0px), var(--my, 0px), 0);
    transition: background 0.35s var(--ld-ease), color 0.35s var(--ld-ease),
                transform 0.45s var(--ld-ease-exp), box-shadow 0.35s var(--ld-ease);
}
html[dir="rtl"] .ld-btn { letter-spacing: normal; text-transform: none; font-size: var(--fs-base); }

/* Hover fill sweeps in rather than snapping. */
.ld-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: currentColor;
    opacity: 0.09;
    transform: scaleX(0);
    transform-origin: var(--ld-origin, left) center;
    transition: transform 0.5s var(--ld-ease-exp);
}
html[dir="rtl"] .ld-btn::before { --ld-origin: right; }
.ld-btn:hover::before { transform: scaleX(1); }
.ld-btn > * { position: relative; z-index: 1; }

/* Dark ink on gold is 8.98:1. White on gold is 3.83:1 and fails AA, which is
   what the previous hero CTA shipped.
   Scoped under .ld-body deliberately: `.ld-body a { color: inherit }` is 0-2-0,
   so a bare `.ld-btn--gold` (0-1-0) lost to it on every button that is an
   anchor, which measured 2.17:1. */
.ld-body .ld-btn--gold { background: var(--ld-gold); color: var(--n-1000); }
.ld-body .ld-btn--gold:hover { background: var(--g-200); }

.ld-body .ld-btn--ghost {
    background: transparent;
    color: var(--ld-ink);
    box-shadow: inset 0 0 0 1px rgba(254, 252, 251, 0.3);
}
.ld-body .ld-btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--ld-gold); color: var(--ld-gold); }

.ld-body .ld-btn--dark { background: var(--n-900); color: var(--n-0); }
.ld-body .ld-btn--dark:hover { background: var(--n-800); }

/* Tactile press. */
.ld-btn:active { transform: translate3d(var(--mx, 0px), calc(var(--my, 0px) + 1px), 0); }

.ld-btn svg {
    width: 14px; height: 14px; fill: currentColor; flex: none;
    transition: transform 0.45s var(--ld-ease-exp);
}
html[dir="rtl"] .ld-btn svg { transform: scaleX(-1); }
.ld-btn:hover svg { transform: translateX(4px); }
html[dir="rtl"] .ld-btn:hover svg { transform: scaleX(-1) translateX(4px); }

/* Quiet text link with a rule that sweeps on hover. */
.ld-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding-block: 0.35rem;
    color: var(--ld-ink);
    transition: color 0.3s var(--ld-ease);
}
.ld-link::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 1px;
    background: var(--ld-rule);
}
.ld-link::before {
    content: '';
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 1px;
    background: var(--ld-gold);
    transform: scaleX(0);
    transform-origin: var(--ld-origin, left) center;
    transition: transform 0.5s var(--ld-ease-exp);
    z-index: 1;
}
html[dir="rtl"] .ld-link::before { --ld-origin: right; }
.ld-link:hover { color: var(--ld-gold); }
.ld-link:hover::before { transform: scaleX(1); }
.ld-link svg { width: 13px; height: 13px; fill: currentColor; transition: transform 0.45s var(--ld-ease-exp); }
html[dir="rtl"] .ld-link svg { transform: scaleX(-1); }
.ld-link:hover svg { transform: translateX(4px); }
html[dir="rtl"] .ld-link:hover svg { transform: scaleX(-1) translateX(4px); }

/* ── Announcement tape ───────────────────────────────────────────────────── */
/* The tape's own include owns loop mechanics only; each surface paints it.
   The shop does this in shop.css via .shop-announce-bar. */

.ld-body .announce-bar {
    background: var(--ld-deep);
    color: var(--ld-gold);          /* 8.98:1 on n-1000 */
    font-size: var(--fs-xs);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    padding-block: 0.6rem;
    line-height: 1.4;
}
html[dir="rtl"] .ld-body .announce-bar {
    letter-spacing: normal;
    text-transform: none;
    font-size: var(--fs-sm);
}
.ld-body .announce-amount { color: var(--g-200); }
/* The pause control takes its ground from the bar via background-color:inherit
   in the shared include, so it needs nothing extra here. */

/* ── Header ──────────────────────────────────────────────────────────────── */

.ld-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: color-mix(in srgb, var(--n-950) 90%, transparent);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--ld-rule-dim);
    transition: border-color 0.4s var(--ld-ease);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .ld-header { background: var(--n-950); }
}
.ld-header[data-scrolled="true"] { border-bottom-color: var(--ld-rule); }

.ld-header-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--sp-4);
    /* Condenses once the hero is behind you. */
    padding-block: var(--sp-4);
    transition: padding 0.45s var(--ld-ease-exp);
}
.ld-header[data-scrolled="true"] .ld-header-inner { padding-block: var(--sp-2); }

.ld-nav { display: flex; align-items: center; gap: var(--sp-6); }
.ld-nav--end { justify-content: flex-end; }

.ld-nav a {
    position: relative;
    color: var(--ld-ink-muted);
    padding-block: 0.2rem;
    transition: color 0.3s var(--ld-ease);
}
.ld-nav a::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 1px;
    background: var(--ld-gold);
    transform: scaleX(0);
    transform-origin: var(--ld-origin, left) center;
    transition: transform 0.45s var(--ld-ease-exp);
}
html[dir="rtl"] .ld-nav a::after { --ld-origin: right; }
.ld-nav a:hover { color: var(--ld-ink); }
.ld-nav a:hover::after { transform: scaleX(1); }

.ld-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    text-align: center;
    transition: transform 0.45s var(--ld-ease-exp);
    transform-origin: center top;
}
.ld-header[data-scrolled="true"] .ld-logo { transform: scale(0.86); }
.ld-logo img { height: 46px; max-width: 200px; object-fit: contain; }
.ld-logo-text {
    font-family: var(--ld-font-ar-display);
    font-size: 1.4rem;
    color: var(--ld-ink);
    white-space: nowrap;
}
html[dir="ltr"] .ld-logo-text {
    font-family: var(--font-brand), serif;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.ld-logo-tag {
    font-size: 0.5rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ld-gold);
    white-space: nowrap;
    transition: opacity 0.4s var(--ld-ease);
}
/* The slogan is English on both languages, so it keeps the Latin caps
   treatment even in RTL rather than taking the Arabic tracking reset. */
.ld-header[data-scrolled="true"] .ld-logo-tag { opacity: 0; }

.ld-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem; height: 2.25rem;
    background: none; border: 0; padding: 0;
    color: var(--ld-ink);
    cursor: pointer;
    transition: color 0.3s var(--ld-ease), transform 0.3s var(--ld-ease-exp);
}
.ld-icon-btn:hover { color: var(--ld-gold); transform: translateY(-2px); }
.ld-icon-btn svg { width: 18px; height: 18px; fill: currentColor; }

.ld-body .ld-lang {
    font-family: var(--font-ui-en);
    font-size: var(--fs-2xs);
    letter-spacing: 0.1em;
    color: var(--ld-ink-muted);
    padding: 0.35rem 0.6rem;
    box-shadow: inset 0 0 0 1px var(--ld-rule-dim);
    border-radius: 2px;
    transition: color 0.3s var(--ld-ease), box-shadow 0.3s var(--ld-ease);
}
.ld-body .ld-lang:hover { color: var(--ld-gold); box-shadow: inset 0 0 0 1px var(--ld-gold); }

.ld-burger { display: none; }

/* Mobile drawer. The old header hid two of four destinations below 768px with
   no menu control at all, so they were simply unreachable on a phone. */
.ld-drawer {
    position: fixed;
    inset: 0;
    z-index: 150;
    background: var(--ld-deep);
    display: flex;
    flex-direction: column;
    padding: var(--sp-5) var(--ld-gutter) var(--sp-10);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.35s var(--ld-ease-exp), transform 0.35s var(--ld-ease-exp), visibility 0.35s;
}
.ld-drawer[data-open="true"] { opacity: 1; visibility: visible; transform: none; }
.ld-drawer-top { display: flex; justify-content: flex-end; }
.ld-drawer nav {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    margin-top: var(--sp-8);
}
.ld-drawer nav a {
    font-family: var(--ld-font-ar-display);
    font-size: 1.75rem;
    color: var(--ld-ink);
    padding-block: var(--sp-3);
    border-bottom: 1px solid var(--ld-rule-dim);
    transition: opacity 0.5s var(--ld-ease-exp), transform 0.5s var(--ld-ease-exp);
    transition-delay: calc(var(--i, 0) * 55ms);
}
/* Staggered entrance once the drawer opens. */
.ld-anim .ld-drawer nav a { opacity: 0; transform: translateY(12px); }
html[dir="ltr"] .ld-drawer nav a { font-family: var(--font-brand), serif; }
.ld-anim .ld-drawer[data-open="true"] nav a { opacity: 1; transform: none; }

/* ── Hero ────────────────────────────────────────────────────────────────── */

.ld-hero {
    display: grid;
    grid-template-columns: 1fr;
    background: var(--ld-ground-alt);
}

.ld-hero-type {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: clamp(2.5rem, 7vw, 5.5rem) var(--ld-gutter);
    /* No overlay maths: the panel is opaque, so contrast cannot drift with
       whatever photograph happens to be uploaded. */
    background: var(--ld-ground-alt);
}

.ld-hero h1 {
    font-size: var(--ld-display);
    color: var(--ld-ink);
    margin-bottom: var(--sp-5);
    max-width: 15ch;
}

/* Word-by-word rise. Each word is a clipping box with an inner span that
   travels; splitting on spaces keeps Arabic shaping intact, because Arabic
   joins within words and never across them. */
.ld-word {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    padding-block: 0.06em;   /* room for descenders and Naskh tails */
}
.ld-word > span {
    display: inline-block;
    transition: transform 1s var(--ld-ease-exp);
    transition-delay: calc(var(--i, 0) * 85ms);
}
.ld-anim .ld-word > span { transform: translateY(115%); }
.ld-anim .ld-hero.is-in .ld-word > span { transform: none; }
.ld-word--em > span {
    font-style: italic;
    font-weight: 400;
    color: var(--ld-gold);
}
html[dir="rtl"] .ld-word--em > span {
    /* The Arabic display face has no italic; the accent colour carries the
       emphasis instead. */
    font-style: normal;
}

.ld-hero-lead,
.ld-hero-actions,
.ld-hero .ld-eyebrow {
    transition: opacity 0.8s var(--ld-ease-exp), transform 0.8s var(--ld-ease-exp);
    transition-delay: calc(var(--i, 0) * 90ms);
}
.ld-anim .ld-hero-lead,
.ld-anim .ld-hero-actions,
.ld-anim .ld-hero .ld-eyebrow { opacity: 0; transform: translateY(14px); }
.ld-anim .ld-hero.is-in .ld-hero-lead,
.ld-anim .ld-hero.is-in .ld-hero-actions,
.ld-anim .ld-hero.is-in .ld-eyebrow { opacity: 1; transform: none; }

.ld-hero-lead {
    font-size: var(--ld-lead);
    color: var(--ld-ink-muted);
    max-width: 34ch;
    margin-bottom: var(--sp-8);
}

.ld-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-4);
}

.ld-hero-media {
    position: relative;
    overflow: hidden;
    background: var(--n-800);
    min-height: 58svh;
}
@supports not (height: 1svh) {
    .ld-hero-media { min-height: 58vh; }
}

.ld-hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.2s var(--ld-ease-exp);
}
.ld-hero-slide[data-active="true"] { opacity: 1; }
.ld-hero-slide img {
    width: 100%;
    height: 100%;
    /* cover, never contain. `contain` letterboxed the old hero in cream and
       dropped the copy onto a 1.07:1 background. */
    object-fit: cover;
    object-position: center;
    transform: scale(1.02);
}
/* Slow drift on whichever slide is showing. */
.ld-hero-slide[data-active="true"] img {
    animation: ld-drift 14s var(--ld-ease) forwards;
}
@keyframes ld-drift {
    from { transform: scale(1.02); }
    to   { transform: scale(1.1); }
}

/* Empty state: no slides uploaded. A quiet woven texture, not a broken box. */
.ld-hero-media--empty {
    background:
        repeating-linear-gradient(45deg, rgba(204,170,108,0.05) 0 2px, transparent 2px 9px),
        var(--n-800);
}

.ld-hero-dots {
    position: absolute;
    inset-inline-start: var(--ld-gutter);
    bottom: var(--sp-5);
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    z-index: 2;
}
.ld-hero-dot {
    position: relative;
    width: 30px; height: 2px;
    padding: 0; border: 0;
    background: rgba(254, 252, 251, 0.3);
    cursor: pointer;
    overflow: hidden;
}
/* The active dot fills across, so the bar doubles as a progress read-out. */
.ld-hero-dot::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--ld-gold);
    transform: scaleX(0);
    transform-origin: var(--ld-origin, left) center;
}
html[dir="rtl"] .ld-hero-dot::after { --ld-origin: right; }
.ld-hero-dot[aria-current="true"]::after {
    animation: ld-dot-fill 6s linear forwards;
}
.ld-hero-dots[data-paused="true"] .ld-hero-dot::after { animation-play-state: paused; }
@keyframes ld-dot-fill {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}
.ld-hero-pause {
    margin-inline-start: var(--sp-2);
    width: 1.5rem; height: 1.5rem;
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: 0; padding: 0; cursor: pointer;
    color: rgba(254, 252, 251, 0.7);
    transition: color 0.3s var(--ld-ease);
}
.ld-hero-pause:hover { color: var(--ld-ink); }
.ld-hero-pause svg { width: 10px; height: 10px; fill: currentColor; }
.ld-hero-pause .ld-ico-play { display: none; }
.ld-hero-pause[aria-pressed="true"] .ld-ico-play { display: block; }
.ld-hero-pause[aria-pressed="true"] .ld-ico-pause { display: none; }

@media (min-width: 900px) {
    .ld-hero {
        /* Asymmetric on purpose: a 50/50 split reads as a template. */
        grid-template-columns: 5fr 7fr;
        min-height: clamp(560px, 82svh, 900px);
    }
    .ld-hero-media { min-height: 0; }
}

/* ── Section scaffolding ─────────────────────────────────────────────────── */

.ld-section { padding-block: clamp(3.5rem, 9vw, 7.5rem); }
.ld-section--ground { background: var(--ld-ground); }
.ld-section--alt    { background: var(--ld-ground-alt); }
.ld-section--deep   { background: var(--ld-deep); }
.ld-section--panel  { background: var(--ld-panel); color: var(--ld-ink-panel); }
.ld-section--panel-alt { background: var(--ld-panel-alt); color: var(--ld-ink-panel); }

.ld-section--panel h2, .ld-section--panel h3,
.ld-section--panel-alt h2, .ld-section--panel-alt h3 { color: var(--n-800); }
.ld-section--panel .ld-link,
.ld-section--panel-alt .ld-link { color: var(--ld-ink-panel); }
.ld-section--panel .ld-link::after,
.ld-section--panel-alt .ld-link::after { background: var(--ld-rule-panel); }
.ld-section--panel .ld-link::before,
.ld-section--panel-alt .ld-link::before { background: var(--ld-gold-panel); }
.ld-section--panel .ld-link:hover,
.ld-section--panel-alt .ld-link:hover { color: var(--ld-gold-panel); }

.ld-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-5);
    margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.ld-head h2 { font-size: var(--ld-h2); }
.ld-head-sub {
    color: var(--ld-ink-muted);
    max-width: 42ch;
    margin-top: var(--sp-3);
}
.ld-section--panel .ld-head-sub,
.ld-section--panel-alt .ld-head-sub { color: var(--ld-ink-panel-2); }

/* ── Category rail ───────────────────────────────────────────────────────── */

.ld-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(58vw, 1fr);
    gap: var(--sp-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--sp-4);
    scrollbar-width: thin;
    /* Bleed to the shell edges without using 100vw (scrollbar-safe). */
    width: calc(100% + (2 * var(--ld-gutter)));
    max-width: none;
    margin-inline: calc(var(--ld-gutter) * -1);
    padding-inline: var(--ld-gutter);
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}
@media (min-width: 720px) {
    .ld-rail { grid-auto-columns: minmax(258px, 1fr); }
}

.ld-cat { scroll-snap-align: start; display: block; position: relative; }

.ld-cat-figure {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--n-200);
    margin-bottom: var(--sp-3);
    /* Wipes open on reveal. */
    transition: clip-path 1s var(--ld-ease-exp);
    transition-delay: calc(var(--i, 0) * 90ms);
}
.ld-anim .ld-cat-figure { clip-path: inset(0 0 100% 0); }
.ld-anim .is-in .ld-cat-figure { clip-path: inset(0 0 0 0); }
/* Varied heights so the rail is not a row of identical tiles. */
.ld-cat:nth-child(even) .ld-cat-figure { aspect-ratio: 1 / 1; }

.ld-cat img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.9s var(--ld-ease-exp);
}
.ld-cat:hover img { transform: scale(1.06); }

.ld-cat-name {
    position: relative;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
    padding-bottom: var(--sp-2);
    border-bottom: 1px solid var(--ld-rule-panel);
}
.ld-cat-name::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    bottom: -1px;
    height: 1px;
    background: var(--ld-gold-panel);
    transform: scaleX(0);
    transform-origin: var(--ld-origin, left) center;
    transition: transform 0.55s var(--ld-ease-exp);
}
html[dir="rtl"] .ld-cat-name::after { --ld-origin: right; }
.ld-cat:hover .ld-cat-name::after { transform: scaleX(1); }
.ld-cat-name span:first-child {
    font-size: var(--ld-h3);
    color: var(--ld-ink-panel);
    transition: transform 0.5s var(--ld-ease-exp);
}
html[dir="ltr"] .ld-cat:hover .ld-cat-name span:first-child { transform: translateX(4px); }
html[dir="rtl"] .ld-cat:hover .ld-cat-name span:first-child { transform: translateX(-4px); }
.ld-cat-count { font-size: var(--fs-xs); color: var(--ld-ink-panel-2); }

/* ── The edit ────────────────────────────────────────────────────────────── */

.ld-edit {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-5);
}
@media (min-width: 860px) {
    .ld-edit {
        /* One lead piece at 2x2 with four supporting pieces beside it —
           deliberately not four identical cards in a row. */
        grid-template-columns: 2fr 1fr 1fr;
        grid-template-rows: auto auto;
        gap: var(--sp-6);
    }
    .ld-edit > :first-child { grid-row: span 2; }
}

.ld-card { display: block; position: relative; }

.ld-card-figure {
    position: relative;
    overflow: hidden;
    background: var(--n-100);
    aspect-ratio: 3 / 4;
    margin-bottom: var(--sp-3);
}
/* The lead piece carries the ratio contrast on its own. Giving the supporting
   cards different ratios too left 89px of dead space under the shorter one and
   read as misalignment rather than as rhythm. */
.ld-card--lead .ld-card-figure { aspect-ratio: 4 / 5; }

.ld-card-figure img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.9s var(--ld-ease-exp);
}
.ld-card:hover .ld-card-figure img { transform: scale(1.05); }

.ld-card-body {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-4);
    transition: transform 0.5s var(--ld-ease-exp);
}
.ld-card:hover .ld-card-body { transform: translateY(-3px); }
.ld-card h3 {
    font-size: var(--ld-h3);
    font-weight: 500;
    color: var(--ld-ink-panel);
    line-height: var(--lh-snug);
}
html[dir="rtl"] .ld-card h3 { font-family: var(--font-ui-ar); }
html[dir="ltr"] .ld-card h3 { font-family: var(--font-ui-en); }

/* inline-flex + gap rather than a margin: each figure is its own bidi isolate,
   so a margin lands on the wrong side in RTL and the two prices ran together
   as "178,000142,000". */
.ld-price {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    color: var(--ld-ink-panel-2);
    font-size: var(--fs-sm);
    white-space: nowrap;
}
.ld-price del { color: var(--n-600); }   /* not opacity: a struck price still carries information */
.ld-price ins { text-decoration: none; color: var(--ld-gold-panel); }

.ld-meta {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-top: var(--sp-2);
    font-size: var(--fs-xs);
    color: var(--ld-ink-panel-2);
    transition: transform 0.5s var(--ld-ease-exp) 0.04s;
}
.ld-card:hover .ld-meta { transform: translateY(-3px); }

.ld-tag {
    font-size: var(--fs-2xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ld-gold-panel);
    padding: 0.15rem 0.5rem;
    box-shadow: inset 0 0 0 1px rgba(160, 125, 57, 0.35);
    border-radius: 999px;
}
html[dir="rtl"] .ld-tag { letter-spacing: normal; text-transform: none; }

.ld-badge {
    position: absolute;
    top: var(--sp-3);
    inset-inline-start: var(--sp-3);
    z-index: 2;
    font-size: var(--fs-2xs);
    padding: 0.25rem 0.55rem;
    border-radius: 2px;
    background: var(--n-900);
    color: var(--n-0);
}
.ld-badge--sale { background: var(--ld-gold); color: var(--n-1000); }

/* A solid chip rather than a translucent wash over the whole figure. A wash
   reads differently on every photograph, so its contrast could not be
   guaranteed; the chip is 15.87:1 whatever is behind it. */
.ld-soldout {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ld-soldout span {
    background: var(--n-900);
    color: var(--n-0);
    font-size: var(--fs-sm);
    padding: 0.5rem 1.1rem;
    border-radius: 2px;
}
.ld-card-figure img.is-soldout { filter: grayscale(0.45) brightness(0.92); }

@media (max-width: 859px) {
    /* A snap rail beats a cramped two-column grid on a phone.
       Reset template columns so the lead card is not stuck in a leftover 1fr track. */
    .ld-edit {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 68vw;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        width: calc(100% + (2 * var(--ld-gutter)));
        max-width: none;
        margin-inline: calc(var(--ld-gutter) * -1);
        padding-inline: var(--ld-gutter);
        padding-bottom: var(--sp-4);
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
    }
    .ld-card { scroll-snap-align: start; }
    .ld-card-figure,
    .ld-card--lead .ld-card-figure { aspect-ratio: 3 / 4; }
}

.ld-foot-link { margin-top: clamp(2rem, 4vw, 3rem); }

/* ── Material band ───────────────────────────────────────────────────────── */

.ld-band {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}
@media (min-width: 900px) {
    /* 7/5, not 6/6. */
    .ld-band { grid-template-columns: 7fr 5fr; }
    .ld-band--noimage { grid-template-columns: minmax(0, 62ch); }
}

.ld-band h2 { font-size: var(--ld-h2); margin-bottom: var(--sp-5); }
.ld-band p {
    color: var(--ld-ink-muted);
    font-size: var(--ld-lead);
    max-width: 68ch;   /* measure, not container width */
    margin-bottom: var(--sp-8);
}

.ld-band-figure {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--n-800);
}
.ld-band-figure img { width: 100%; height: 100%; object-fit: cover; }

/* Scroll-linked drift where the browser supports it, nothing where it does
   not. Costs no scroll listener either way. */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .ld-band-figure img {
            animation: ld-parallax linear both;
            animation-timeline: view();
            animation-range: cover 0% cover 100%;
        }
        @keyframes ld-parallax {
            from { transform: scale(1.12) translateY(-2.5%); }
            to   { transform: scale(1.12) translateY(2.5%); }
        }
    }
}

.ld-fabrics {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-bottom: var(--sp-8);
}
.ld-fabric {
    font-size: var(--fs-xs);
    color: var(--ld-gold);
    padding: 0.3rem 0.75rem;
    box-shadow: inset 0 0 0 1px var(--ld-rule);
    border-radius: 999px;
    transition: opacity 0.6s var(--ld-ease-exp), transform 0.6s var(--ld-ease-exp), box-shadow 0.3s var(--ld-ease);
    transition-delay: calc(var(--i, 0) * 70ms);
}
.ld-anim .ld-fabric { opacity: 0; transform: translateY(8px); }
.ld-anim .is-in .ld-fabric { opacity: 1; transform: none; }
.ld-fabric:hover { box-shadow: inset 0 0 0 1px var(--ld-gold); }

/* ── Reviews ─────────────────────────────────────────────────────────────── */

.ld-reviews {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}
@media (min-width: 860px) {
    .ld-reviews { grid-template-columns: repeat(3, 1fr); gap: var(--sp-8); }
}

/* Rules, not boxes. Three bordered cards in a row is the pattern this page is
   trying to get away from. */
.ld-review {
    position: relative;
    padding-block: var(--sp-6);
}
.ld-review::before {
    content: '';
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 1px;
    background: var(--ld-rule-panel);
    transform-origin: var(--ld-origin, left) center;
    transition: transform 0.9s var(--ld-ease-exp);
    transition-delay: calc(var(--i, 0) * 110ms);
}
html[dir="rtl"] .ld-review::before { --ld-origin: right; }
.ld-anim .ld-review::before { transform: scaleX(0); }
.ld-anim .ld-review.is-in::before { transform: scaleX(1); }

.ld-stars { display: inline-flex; gap: 2px; margin-bottom: var(--sp-4); }
.ld-stars svg {
    width: 13px; height: 13px; fill: var(--g-600);
    transition: opacity 0.4s var(--ld-ease-exp), transform 0.4s var(--ld-ease-exp);
    transition-delay: calc(var(--s, 0) * 60ms + 200ms);
}
.ld-anim .ld-stars svg { opacity: 0; transform: scale(0.6); }
.ld-anim .is-in .ld-stars svg { opacity: 1; transform: none; }
.ld-stars svg.is-empty { fill: rgba(53, 50, 47, 0.18); }

.ld-review-text {
    font-family: var(--font-brand);
    font-size: clamp(1.0625rem, 1.5vw, 1.3125rem);
    line-height: 1.5;
    color: var(--ld-ink-panel);
    margin-bottom: var(--sp-5);
    max-width: 40ch;
}
html[dir="rtl"] .ld-review-text { font-family: var(--ld-font-ar-display); }

.ld-review-by {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2) var(--sp-3);
    font-size: var(--fs-xs);
    color: var(--ld-ink-panel-2);
}
.ld-review-by a { border-bottom: 1px solid var(--ld-rule-panel); transition: color 0.3s var(--ld-ease), border-color 0.3s var(--ld-ease); }
.ld-review-by a:hover { border-bottom-color: var(--ld-gold-panel); color: var(--ld-gold-panel); }
.ld-verified { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--ld-gold-panel); }
.ld-verified svg { width: 12px; height: 12px; fill: currentColor; }

/* ── Contact ─────────────────────────────────────────────────────────────── */

.ld-contact {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
}
@media (min-width: 900px) {
    .ld-contact { grid-template-columns: 6fr 5fr; }
}

.ld-contact h2 { font-size: var(--ld-h2); margin-bottom: var(--sp-5); }
.ld-contact-lead {
    color: var(--ld-ink-muted);
    font-size: var(--ld-lead);
    max-width: 46ch;
    margin-bottom: var(--sp-8);
}

/* An inline detail list, not three boxes. */
.ld-details { display: flex; flex-direction: column; }
.ld-detail {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding-block: var(--sp-4);
    border-top: 1px solid var(--ld-rule-dim);
    transition: opacity 0.6s var(--ld-ease-exp), transform 0.6s var(--ld-ease-exp);
    transition-delay: calc(var(--i, 0) * 80ms);
}
.ld-anim .ld-detail { opacity: 0; transform: translateY(10px); }
.ld-anim .is-in .ld-detail { opacity: 1; transform: none; }
.ld-detail:last-child { border-bottom: 1px solid var(--ld-rule-dim); }
.ld-detail svg { width: 15px; height: 15px; fill: var(--ld-gold); flex: none; }
.ld-detail-label { font-size: var(--fs-xs); color: var(--ld-ink-muted); }
.ld-detail-value { color: var(--ld-ink); transition: color 0.3s var(--ld-ease); }
a.ld-detail-value:hover { color: var(--ld-gold); }

.ld-social { display: flex; gap: var(--sp-3); margin-top: var(--sp-8); }
.ld-social a {
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px var(--ld-rule-dim);
    color: var(--ld-ink);
    transition: background 0.35s var(--ld-ease), color 0.35s var(--ld-ease),
                transform 0.35s var(--ld-ease-exp), box-shadow 0.35s var(--ld-ease);
}
.ld-social a:hover {
    background: var(--ld-gold);
    color: var(--n-1000);
    transform: translateY(-3px);
    box-shadow: inset 0 0 0 1px var(--ld-gold);
}
.ld-social svg { width: 16px; height: 16px; fill: currentColor; }

/* ── Footer ──────────────────────────────────────────────────────────────── */

.ld-footer { background: var(--ld-deep); padding-block: clamp(3rem, 6vw, 4.5rem) var(--sp-8); }

.ld-promises {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-4);
    padding-bottom: var(--sp-10);
    margin-bottom: var(--sp-10);
    border-bottom: 1px solid var(--ld-rule-dim);
}
@media (min-width: 720px) {
    .ld-promises { grid-template-columns: repeat(3, auto); justify-content: space-between; gap: var(--sp-8); }
}
.ld-promise {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    color: var(--ld-ink-muted);
    font-size: var(--fs-sm);
}
.ld-promise svg { width: 15px; height: 15px; fill: var(--ld-gold); flex: none; }

.ld-footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-8);
}
@media (min-width: 720px) {
    .ld-footer-grid { grid-template-columns: 2fr 1fr 1fr; gap: var(--sp-10); }
}

.ld-footer h4 {
    font-family: var(--font-ui-ar);
    font-size: var(--fs-xs);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--ld-gold);
    margin-bottom: var(--sp-4);
}
html[dir="rtl"] .ld-footer h4 { letter-spacing: normal; text-transform: none; font-size: var(--fs-sm); }

.ld-footer-links { display: flex; flex-direction: column; gap: var(--sp-3); }
.ld-footer-links a {
    color: var(--ld-ink-muted);
    width: fit-content;
    transition: color 0.3s var(--ld-ease), transform 0.35s var(--ld-ease-exp);
}
.ld-footer-links a:hover { color: var(--ld-ink); }
html[dir="ltr"] .ld-footer-links a:hover { transform: translateX(4px); }
html[dir="rtl"] .ld-footer-links a:hover { transform: translateX(-4px); }

.ld-footer-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: max-content;
    max-width: 100%;
}
.ld-footer-brand img {
    height: 52px;
    width: 200px;
    max-width: 200px;
    object-fit: contain;
    margin-bottom: var(--sp-3);
}
.ld-footer-brand .ld-head-sub {
    width: 200px;
    max-width: 200px;
    margin-top: 0;
    text-align: center;
    color: var(--ld-gold);
    font-size: 0.58rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.ld-footer-name {
    font-family: var(--ld-font-ar-display);
    font-size: 1.5rem;
    color: var(--ld-ink);
    margin-bottom: var(--sp-2);
}
html[dir="ltr"] .ld-footer-name {
    font-family: var(--font-brand), serif;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.ld-colophon {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-top: var(--sp-10);
    padding-top: var(--sp-6);
    border-top: 1px solid var(--ld-rule-dim);
    font-size: var(--fs-xs);
    color: var(--ld-ink-dim);
}
.ld-colophon svg { width: 11px; height: 11px; fill: var(--ld-gold); vertical-align: -1px; }

/* ── Reveal ──────────────────────────────────────────────────────────────── */

.ld-reveal {
    transition: opacity 0.8s var(--ld-ease-exp), transform 0.8s var(--ld-ease-exp);
    transition-delay: calc(var(--i, 0) * 70ms);
}
.ld-anim .ld-reveal { opacity: 0; transform: translateY(18px); }
.ld-anim .ld-reveal.is-in { opacity: 1; transform: none; }

/* ── Reduced motion ──────────────────────────────────────────────────────── */
/* Every effect above is opacity or transform, so one block switches all of it
   off. Anything that starts at opacity 0 or a clip must be forced back to its
   resting state, or reduced-motion users would be left with blank sections. */

/* ld-anim is never added under reduced motion, so no entrance state is ever
   applied and nothing needs resetting back to visible. What is left here is the
   motion that would otherwise run on its own: the hero drift, the slide
   crossfade, and the scroll-driven progress bar. */
@media (prefers-reduced-motion: reduce) {
    .ld-body *,
    .ld-body *::before,
    .ld-body *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
    }
    .ld-hero-slide { transition: none; }
    .ld-hero-slide[data-active="true"] img { animation: none; }
    .ld-progress { display: none; }
}

/* ── Responsive header ───────────────────────────────────────────────────── */

@media (max-width: 899px) {
    .ld-nav--start { display: none; }
    .ld-burger { display: inline-flex; }
    .ld-header-inner { grid-template-columns: auto 1fr auto; min-width: 0; }
    .ld-logo {
        align-items: flex-start;
        text-align: start;
        min-width: 0;
        max-width: 100%;
    }
    .ld-logo img { height: 38px; max-width: min(150px, 100%); }
    .ld-logo-text { font-size: 1.15rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
    .ld-logo-tag {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .ld-nav--end { min-width: 0; }
    /* Matching widths read as a pair; ragged ones read as an accident. */
    .ld-hero-actions { flex-direction: column; align-items: stretch; width: 100%; }
    .ld-hero-actions .ld-btn { justify-content: center; }
    .ld-hero-type { min-width: 0; max-width: 100%; }
    .ld-hero-media { min-width: 0; max-width: 100%; }
    .ld-shell { min-width: 0; max-width: 100%; }
    .ld-footer-brand { max-width: 100%; }
}
@media (min-width: 900px) {
    .ld-drawer { display: none; }
}