/* ══════════════════════════════════════════════════════════════════════
   SILSILA — maison design system.

   Rules this file obeys, deliberately:
     · no card boxes, no borders around products, no radius, no shadows
     · no teal fields; teal is a hairline, a rule and a hover state
     · the canvas is warm white and ivory; the products carry the colour
     · one serif for campaign statements, one grotesque for utility
     · Arabic is art-directed to the same standard, not scaled down
     · motion is opacity and 12px of travel, nothing else
   ══════════════════════════════════════════════════════════════════════ */

@font-face{font-family:'Inter';src:url('/assets/fonts/inter-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Inter';src:url('/assets/fonts/inter-latin-500-normal.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Inter';src:url('/assets/fonts/inter-latin-600-normal.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url('/assets/fonts/cormorant-garamond-latin-600-normal.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url('/assets/fonts/cormorant-garamond-latin-700-normal.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'IBM Plex Sans Arabic';src:url('/assets/fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'IBM Plex Sans Arabic';src:url('/assets/fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Noto Kufi Arabic';src:url('/assets/fonts/noto-kufi-arabic-arabic-500-normal.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Noto Kufi Arabic';src:url('/assets/fonts/noto-kufi-arabic-arabic-600-normal.woff2') format('woff2');font-weight:600;font-display:swap}

:root {
  --teal: #7eb1ab;
  --teal-deep: #5f938d;

  --canvas: #fdfcfa;
  --ivory: #f7f4ef;
  --hair: #e8e4dd;
  --ink: #16150f;
  --body: #4c4842;
  --mute: #8b857c;
  --night: #14130f;

  --wa: #1faa59;

  --wide: 1560px;
  --read: 40rem;
  --gut: clamp(1.25rem, 4.2vw, 4rem);
  --air: clamp(4.5rem, 9vw, 10rem);
  --air-s: clamp(2.75rem, 5vw, 5.5rem);

  --serif: 'Cormorant Garamond', 'Times New Roman', serif;
  --sans: 'Inter', system-ui, -apple-system, sans-serif;
  --ar: 'IBM Plex Sans Arabic', 'Tahoma', sans-serif;
  --ar-d: 'Noto Kufi Arabic', 'IBM Plex Sans Arabic', 'Tahoma', sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--body);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.7;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
html[lang='ar'] body { font-family: var(--ar); line-height: 1.95; }
/* height:auto is load-bearing: the width/height attributes on every img are
   presentational hints, and without this the hinted height wins and every
   aspect-ratio below is ignored. */
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 1px solid var(--teal-deep); outline-offset: 4px; }
::selection { background: var(--teal); color: #fff; }

/* ── type ─────────────────────────────────────────────────────────── */
h1, h2, h3, h4 {
  margin: 0; color: var(--ink); font-weight: 600;
  font-family: var(--serif); line-height: 1.1; letter-spacing: -0.005em;
}
html[lang='ar'] h1, html[lang='ar'] h2, html[lang='ar'] h3, html[lang='ar'] h4 {
  font-family: var(--ar-d); font-weight: 500; line-height: 1.42; letter-spacing: 0;
}
.d1 { font-size: clamp(2.4rem, 1.1rem + 4.6vw, 5rem); }
.d2 { font-size: clamp(1.9rem, 1.1rem + 2.9vw, 3.4rem); }
.d3 { font-size: clamp(1.35rem, 1rem + 1.3vw, 1.9rem); }
html[lang='ar'] .d1 { font-size: clamp(1.95rem, 1rem + 3.6vw, 3.9rem); }
html[lang='ar'] .d2 { font-size: clamp(1.6rem, 1rem + 2.2vw, 2.7rem); }

.eyebrow {
  margin: 0; font-family: var(--sans);
  font-size: 0.7rem; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--mute);
}
html[lang='ar'] .eyebrow { font-family: var(--ar); font-size: 0.86rem; letter-spacing: 0.06em; text-transform: none; }
.lede { font-size: clamp(1rem, 0.97rem + 0.2vw, 1.1rem); color: var(--body); }
.small { font-size: 0.86rem; color: var(--mute); }
.num { font-family: var(--sans); direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ── links and the one button shape ───────────────────────────────── */
.ln {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--sans); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink);
  padding-bottom: 0.45rem; border-bottom: 1px solid currentColor;
  transition: color 0.3s ease, border-color 0.3s ease;
}
html[lang='ar'] .ln { font-family: var(--ar); font-size: 0.92rem; letter-spacing: 0.02em; text-transform: none; }
.ln:hover { color: var(--teal-deep); }
.ln--light { color: #fff; border-color: rgba(255, 255, 255, 0.55); }
.ln--light:hover { color: #fff; border-color: #fff; }
.act {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 2.2rem;
  background: var(--ink); color: #fff;
  font-size: 0.74rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  transition: background 0.3s ease;
}
html[lang='ar'] .act { font-family: var(--ar); font-size: 0.95rem; letter-spacing: 0.02em; text-transform: none; }
.act:hover { background: #000; }
.act--line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.act--line:hover { background: var(--ink); color: #fff; }
.act--wa { background: var(--wa); }
.act--wa:hover { background: #17914b; }
.act--wide { width: 100%; }
.act[disabled] { opacity: 0.4; pointer-events: none; }

/* ── frame ────────────────────────────────────────────────────────── */
.wrap { width: 100%; max-width: var(--wide); margin-inline: auto; padding-inline: var(--gut); }
.read { max-width: var(--read); }
.air { padding-block: var(--air); }
.air-s { padding-block: var(--air-s); }
.rule { height: 1px; background: var(--hair); border: 0; margin: 0; }

/* ── header: thin, ivory, centred wordmark ────────────────────────── */
.hdr {
  position: sticky; top: 0; z-index: 80;
  background: rgba(253, 252, 250, 0.92);
  backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid var(--hair);
}
.hdr__in {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  min-height: 78px; gap: 1rem;
}
.hdr__nav { display: flex; align-items: center; gap: clamp(1.1rem, 2vw, 2.3rem); }
.hdr__nav a {
  font-size: 0.7rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink); padding-block: 0.6rem; position: relative;
}
html[lang='ar'] .hdr__nav a { font-size: 0.92rem; letter-spacing: 0.02em; text-transform: none; }
.hdr__nav a::after {
  content: ''; position: absolute; inset-inline: 0; bottom: 0.15rem; height: 1px;
  background: var(--teal); transform: scaleX(0); transform-origin: center;
  transition: transform 0.3s ease;
}
.hdr__nav a:hover::after, .hdr__nav a[aria-current='page']::after { transform: scaleX(1); }
.mark { justify-self: center; }
.mark img { height: 30px; width: auto; }
.util { justify-self: end; display: flex; align-items: center; gap: 0.15rem; }
.ic { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; }
.ic svg { width: 19px; height: 19px; stroke: var(--ink); fill: none; stroke-width: 1.2; }
.ic:hover svg { stroke: var(--teal-deep); }
.dot {
  position: absolute; top: 9px; inset-inline-end: 7px;
  min-width: 15px; height: 15px; padding: 0 3px; border-radius: 999px;
  background: var(--teal-deep); color: #fff; font-size: 0.6rem; line-height: 15px;
  text-align: center; direction: ltr; unicode-bidi: isolate;
}
.dot[hidden] { display: none; }
.lang {
  display: inline-flex; align-items: center; height: 46px; padding-inline: 0.65rem;
  font-size: 0.68rem; font-weight: 500; letter-spacing: 0.16em; color: var(--ink);
}
html[lang='ar'] .lang { font-size: 0.9rem; letter-spacing: 0; }
.lang:hover { color: var(--teal-deep); }
.burger { display: none; }
@media (max-width: 66rem) {
  /* the nav cell stays in the grid and carries the burger; only the links go */
  .hdr__in { grid-template-columns: auto 1fr auto; min-height: 62px; }
  .hdr__nav a { display: none; }
  .burger { display: inline-flex; }
  .util .lang { display: none; }
  .mark img { height: 24px; }
}

/* full-screen menu, quiet fade */
/* ── THE MENU, WITH A FLOOR UNDER IT ──────────────────────────────────
   A drawer that only opens by script is a drawer that becomes a dead end the
   moment the script does not run — a blocked file, a stale cache, one error
   earlier in the bundle. So the panel's DEFAULT state is a plain visible list
   in the flow of the page, and it is only promoted to an overlay drawer once
   the document has been marked as script-capable. Nothing to tap and nothing
   happening is never a state a customer can reach. */
.menu {
  background: var(--canvas);
  overflow-y: auto; padding: 1rem var(--gut) 2rem;
  border-bottom: 1px solid var(--line);
}
.js .menu {
  position: fixed; inset: 0; z-index: 95;
  opacity: 0; visibility: hidden; transition: opacity 0.35s ease, visibility 0.35s;
  padding: 1rem var(--gut) 4rem;
  border-bottom: 0;
}
.js .menu.on { opacity: 1; visibility: visible; }
/* the close button and the burger are meaningless without script */
html:not(.js) .burger,
html:not(.js) .menu__top [data-menu] { display: none; }
.menu__top { display: flex; align-items: center; justify-content: space-between; min-height: 62px; }
.menu__list { margin: 2rem 0 0; }
.menu__list a {
  display: block; padding: 1.05rem 0; border-bottom: 1px solid var(--hair);
  font-family: var(--serif); font-size: 1.5rem; color: var(--ink);
}
html[lang='ar'] .menu__list a { font-family: var(--ar-d); font-size: 1.3rem; }
.menu__sub a { font-family: var(--sans); font-size: 0.95rem; color: var(--body); padding: 0.65rem 0 0.65rem 1rem; border-bottom: 0; }
html[lang='ar'] .menu__sub a { font-family: var(--ar); padding: 0.65rem 1rem 0.65rem 0; }
.menu__foot { margin-top: 2.5rem; display: flex; gap: 1.5rem; }

/* mobile utility bar */
.tabs {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 85; display: none;
  background: rgba(253, 252, 250, 0.96); border-top: 1px solid var(--hair);
  padding-bottom: env(safe-area-inset-bottom);
  backdrop-filter: blur(10px);
}
@media (max-width: 66rem) { .tabs { display: flex; } body { padding-bottom: 60px; } }
.tabs a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 58px; position: relative; }
.tabs svg { width: 19px; height: 19px; stroke: var(--mute); fill: none; stroke-width: 1.2; }
.tabs span { font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); }
html[lang='ar'] .tabs span { font-size: 0.7rem; letter-spacing: 0; text-transform: none; }
.tabs a[aria-current='page'] svg { stroke: var(--ink); }
.tabs a[aria-current='page'] span { color: var(--ink); }

/* ── cinematic band ───────────────────────────────────────────────── */
.film { position: relative; background: var(--night); overflow: hidden; }
.film img {
  width: 100%; height: clamp(30rem, 88vh, 54rem); object-fit: cover;
  transform: scale(1.03); transition: transform 9s cubic-bezier(.22,.61,.36,1);
}
.film.in img { transform: scale(1); }
.film--full img { height: clamp(34rem, 92vh, 58rem); }
.film--mid img { height: clamp(24rem, 62vh, 40rem); }
.film--low img { height: clamp(18rem, 42vh, 28rem); }
.film::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10, 9, 7, 0.62) 0%, rgba(10, 9, 7, 0.24) 38%, rgba(10, 9, 7, 0.02) 68%);
}
.film__cap {
  position: absolute; z-index: 2; inset-inline: 0; bottom: clamp(2.5rem, 7vh, 6rem);
  display: grid; justify-items: center; gap: clamp(0.9rem, 2vw, 1.5rem);
  text-align: center; padding-inline: var(--gut);
}
.film__cap .eyebrow { color: rgba(255, 255, 255, 0.78); }
.film__cap h1, .film__cap h2 { color: #fff; max-width: 22ch; }
@media (max-width: 48rem) {
  .film img { height: 74vh; }
  .film--full img { height: 88vh; }
  .film--mid img { height: 56vh; }
  .film--low img { height: 52vh; }
  /* on a phone the caption has to sit clear of the piece, so it stays low and
     compact: the crop served here already keeps the lower half free */
  .film__cap { bottom: 2.2rem; gap: 0.75rem; }
  .film__cap h1, .film__cap h2 { font-size: 2rem; max-width: 18ch; }
  html[lang='ar'] .film__cap h1, html[lang='ar'] .film__cap h2 { font-size: 1.6rem; }
  .film__cap .lede { font-size: 0.96rem; line-height: 1.6; max-width: 30ch; }
  html[lang='ar'] .film__cap .lede { line-height: 1.7; }
}

/* ── campaign band with its statement underneath ───────────────────── */
/* Short bands cannot hold both the piece and clear ground, so nothing is laid
   over the photograph here. The statement sits below it, on canvas. */
.band__img { position: relative; overflow: hidden; background: var(--ivory); }
.band__img img {
  width: 100%; height: clamp(20rem, 56vh, 36rem); object-fit: cover;
  transform: scale(1.03); transition: transform 9s cubic-bezier(.22,.61,.36,1);
}
.band.in .band__img img { transform: scale(1); }
.band--short .band__img img { height: clamp(15rem, 40vh, 26rem); }
.band__cap {
  display: grid; justify-items: center; gap: 0.9rem; text-align: center;
  padding-block: clamp(1.7rem, 3.5vw, 3rem);
}
.band__cap p { margin: 0; }
@media (max-width: 48rem) {
  .band__img img { height: 46vh; }
  .band--short .band__img img { height: 34vh; }
}
@media (prefers-reduced-motion: reduce) { .band__img img { transition: none !important; transform: none !important; } }

/* ── centred editorial head ───────────────────────────────────────── */
.head { display: grid; justify-items: center; gap: 0.9rem; text-align: center; margin-bottom: clamp(2.2rem, 4.5vw, 4rem); }
.head p { margin: 0; max-width: 50ch; color: var(--mute); }
.head--start { justify-items: start; text-align: start; }

/* ── product, no box at all ───────────────────────────────────────── */
.pgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(2.4rem, 4vw, 4.5rem) clamp(1.1rem, 2.4vw, 2.6rem); }
@media (max-width: 75rem) { .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 48rem) { .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1rem; } }
.prow { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(15rem, 1fr); gap: clamp(1.1rem, 2.4vw, 2.6rem); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.prow::-webkit-scrollbar { display: none; }
.prow > * { scroll-snap-align: start; }
@media (min-width: 75rem) { .prow { grid-auto-columns: minmax(0, 1fr); overflow: visible; } }

.pi { position: relative; text-align: center; }
.pi__img { display: block; position: relative; overflow: hidden; background: var(--ivory); }
.pi__img img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; transition: transform 1.1s cubic-bezier(.22,.61,.36,1); }
.pi:hover .pi__img img { transform: scale(1.035); }
.pi__b { padding-top: 1.15rem; display: grid; gap: 0.3rem; }
.pi__n { font-family: var(--serif); font-size: 1.02rem; line-height: 1.35; color: var(--ink); }
html[lang='ar'] .pi__n { font-family: var(--ar-d); font-size: 0.98rem; }
.pi__r { font-size: 0.72rem; letter-spacing: 0.14em; color: var(--mute); }
.pi__p { font-size: 0.86rem; color: var(--ink); }
.pi__p--ask { color: var(--mute); }
.save {
  position: absolute; top: 0.6rem; inset-inline-end: 0.6rem; z-index: 2;
  width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.3s ease;
}
.pi:hover .save, .save[aria-pressed='true'], .save:focus-visible { opacity: 1; }
@media (hover: none) { .save { opacity: 1; } }
.save svg { width: 16px; height: 16px; stroke: var(--ink); fill: none; stroke-width: 1.3; }
.save[aria-pressed='true'] svg { fill: var(--teal); stroke: var(--teal-deep); }

/* ── editorial pairing ────────────────────────────────────────────── */
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.2rem, 3vw, 3.5rem); align-items: center; }
@media (max-width: 60rem) { .pair { grid-template-columns: 1fr; } }
.pair img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--ivory); }
.pair__c { display: grid; gap: 1.1rem; justify-items: start; }
.pair--rev .pair__c { order: -1; }
@media (max-width: 60rem) { .pair--rev .pair__c { order: 0; } }

/* ── three worlds ─────────────────────────────────────────────────── */
.worlds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.8rem, 1.6vw, 1.6rem); }
@media (max-width: 60rem) { .worlds { grid-template-columns: 1fr; gap: 1.6rem; } }
.world { display: block; position: relative; overflow: hidden; }
.world img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; transition: transform 1.2s cubic-bezier(.22,.61,.36,1); }
.world:hover img { transform: scale(1.04); }
.world::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 9, 7, 0.55), rgba(10, 9, 7, 0) 58%); }
.world__c { position: absolute; z-index: 2; inset: auto 0 0 0; padding: clamp(1.2rem, 2.5vw, 2.2rem); display: grid; gap: 0.7rem; justify-items: center; text-align: center; }
.world__c h3 { color: #fff; }

/* ── four quiet columns ───────────────────────────────────────────── */
.quad { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.6rem, 3vw, 3rem); }
@media (max-width: 60rem) { .quad { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 34rem) { .quad { grid-template-columns: 1fr; text-align: center; } }

/* ── dark quiet section ───────────────────────────────────────────── */
.night { background: var(--night); color: rgba(255, 255, 255, 0.76); }
.night h1, .night h2, .night h3 { color: #fff; }
.night .eyebrow { color: rgba(255, 255, 255, 0.6); }
.ivorybg { background: var(--ivory); }

/* ── filters, one quiet line ──────────────────────────────────────── */
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.6rem; padding-block: 1.4rem; border-block: 1px solid var(--hair); }
.f {
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute);
  padding-bottom: 0.25rem; border-bottom: 1px solid transparent;
}
html[lang='ar'] .f { font-size: 0.9rem; letter-spacing: 0; text-transform: none; }
.f:hover { color: var(--ink); }
.f[aria-pressed='true'] { color: var(--ink); border-bottom-color: var(--teal); }
select.f {
  color: var(--ink); border: 0; appearance: none; -webkit-appearance: none;
  padding-inline-end: 1.3rem; background: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--mute) 50%), linear-gradient(135deg, var(--mute) 50%, transparent 50%);
  background-position: right 0.35rem center, right 0.05rem center;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
html[dir='rtl'] select.f { background-position: left 0.05rem center, left 0.35rem center; }
select.f:focus { outline-offset: 2px; }
.fcount { margin-inline-start: auto; font-size: 0.78rem; letter-spacing: 0.12em; color: var(--mute); }

/* ── product detail ──────────────────────────────────────────────── */
.pdp { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 6rem); align-items: start; }
@media (max-width: 60rem) { .pdp { grid-template-columns: 1fr; } }
.pdp__gal { display: grid; gap: 0.6rem; }
.shot img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: var(--ivory); }
.pdp__thumbs { display: flex; gap: 0.5rem; }
.pdp__thumbs button { width: 62px; opacity: 0.5; transition: opacity 0.3s ease; }
.pdp__thumbs button[aria-pressed='true'] { opacity: 1; }
.pdp__thumbs img { aspect-ratio: 3 / 4; object-fit: cover; background: var(--ivory); }
.pdp__i { display: grid; gap: 1.35rem; position: sticky; top: 104px; }
@media (max-width: 60rem) { .pdp__i { position: static; } }
.facts { display: grid; margin: 0; }
.facts div { display: flex; justify-content: space-between; gap: 1.5rem; padding: 0.85rem 0; border-bottom: 1px solid var(--hair); font-size: 0.9rem; }
.facts dt { color: var(--mute); margin: 0; }
.facts dd { margin: 0; color: var(--ink); text-align: end; }
.facts .soon { color: var(--mute); }
.qty { display: inline-flex; align-items: center; box-shadow: inset 0 0 0 1px var(--hair); }
.qty button { width: 46px; height: 52px; color: var(--ink); }
.qty input { width: 46px; height: 52px; border: 0; text-align: center; font: inherit; background: none; direction: ltr; }
.fold { border-top: 1px solid var(--hair); }
.fold details { border-bottom: 1px solid var(--hair); }
.fold summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.15rem 0; color: var(--ink); font-size: 0.92rem; }
.fold summary::-webkit-details-marker { display: none; }
.fold summary i { width: 8px; height: 8px; border-inline-end: 1px solid var(--ink); border-block-end: 1px solid var(--ink); transform: rotate(45deg); transition: transform 0.3s ease; }
.fold details[open] summary i { transform: rotate(225deg); }
.fold__b { padding-bottom: 1.15rem; font-size: 0.92rem; color: var(--body); }

.buybar[hidden] { display: none; }
.buybar {
  position: fixed; inset-inline: 0; bottom: 60px; z-index: 84; display: none;
  gap: 0.6rem; padding: 0.7rem var(--gut) calc(0.7rem + env(safe-area-inset-bottom));
  background: rgba(253, 252, 250, 0.97); border-top: 1px solid var(--hair);
}
@media (max-width: 60rem) { .buybar { display: flex; } }
.buybar .act { flex: 1; min-height: 48px; padding: 0 1rem; }

/* ── lines: bag, wishlist ─────────────────────────────────────────── */
.lines { display: grid; }
.lrow { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 1.4rem; align-items: start; padding: 1.6rem 0; border-bottom: 1px solid var(--hair); }
.lrow img { width: 84px; aspect-ratio: 3 / 4; object-fit: cover; background: var(--ivory); }
.lrow__n { font-family: var(--serif); font-size: 1rem; color: var(--ink); }
html[lang='ar'] .lrow__n { font-family: var(--ar-d); }
.lrow__x { font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); }
html[lang='ar'] .lrow__x { font-size: 0.88rem; letter-spacing: 0; text-transform: none; }
.lrow__x:hover { color: var(--ink); }
.side { display: grid; gap: 1.1rem; align-content: start; }
.side__r { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.95rem; }
.side__r b { color: var(--ink); font-weight: 500; }
.split2 { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
@media (max-width: 60rem) { .split2 { grid-template-columns: 1fr; } }
.fld { display: grid; gap: 0.4rem; }
.fld label { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); }
html[lang='ar'] .fld label { font-size: 0.88rem; letter-spacing: 0; text-transform: none; }
.fld input, .fld textarea {
  width: 100%; min-height: 52px; padding: 0.8rem 0; background: none;
  border: 0; border-bottom: 1px solid var(--hair); font: inherit; color: var(--ink);
}
.fld textarea { min-height: 90px; resize: vertical; }
.fld input:focus, .fld textarea:focus { outline: none; border-bottom-color: var(--teal); }
.empty { text-align: center; padding-block: clamp(3rem, 8vw, 6rem); display: grid; justify-items: center; gap: 1.8rem; }
.emptynav { display: flex; flex-wrap: wrap; gap: 1.2rem 2rem; justify-content: center; }
.soonnote { border-inline-start: 1px solid var(--teal); padding-inline-start: 1rem; font-size: 0.88rem; color: var(--mute); }

/* ── footer ───────────────────────────────────────────────────────── */
.ft { background: var(--night); color: rgba(255, 255, 255, 0.66); }
.ft a:hover { color: #fff; }
.ft__g { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: clamp(2rem, 4vw, 4.5rem); padding-block: clamp(3.5rem, 6vw, 6rem); }
@media (max-width: 60rem) { .ft__g { grid-template-columns: 1fr 1fr; } }
@media (max-width: 34rem) { .ft__g { grid-template-columns: 1fr; } }
.ft h4 { color: #fff; font-family: var(--sans); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 1.3rem; }
html[lang='ar'] .ft h4 { font-family: var(--ar); font-size: 0.88rem; letter-spacing: 0.02em; text-transform: none; }
.ft ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; font-size: 0.88rem; }
.ft__mark img { height: 30px; margin-bottom: 1.4rem; }
.ft__legal { border-top: 1px solid rgba(255, 255, 255, 0.12); padding-block: 1.4rem; display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; font-size: 0.74rem; letter-spacing: 0.08em; }

/* ── motion: opacity and 12px, nothing else ───────────────────────── */
.rise { opacity: 0; transform: translateY(12px); transition: opacity 0.9s ease, transform 0.9s cubic-bezier(.22,.61,.36,1); }
.rise.in { opacity: 1; transform: none; }
@media print { .rise { opacity: 1 !important; transform: none !important; } }
@media (prefers-reduced-motion: reduce) {
  .rise, .film img, .pi__img img, .world img { transition: none !important; transform: none !important; opacity: 1 !important; }
}

/* ── toast ────────────────────────────────────────────────────────── */
.toast {
  position: fixed; bottom: 78px; inset-inline: var(--gut); z-index: 96;
  margin-inline: auto; max-width: 24rem; text-align: center;
  background: var(--ink); color: #fff; padding: 0.9rem 1.2rem;
  font-size: 0.84rem; letter-spacing: 0.04em;
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.toast.is-on { opacity: 1; transform: none; }
@media (min-width: 66rem) { .toast { bottom: 28px; } }

/* the load-more control: a count and one quiet button, centred under the grid */
.morewrap {
  margin: 2.6rem 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}
.morewrap__n { letter-spacing: 0.04em; color: var(--muted, #7a7268); }
.morewrap .act { min-width: 14rem; }

/* ── the edit cards: type and space, no boxes ─────────────────────────── */
.edt {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1.6rem 0 1.4rem;
  border-top: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  transition: opacity 0.4s ease;
}
.edt:hover { opacity: 0.62; }
.edt__n { font-family: var(--serif, var(--font-serif)); font-size: 1.25rem; line-height: 1.2; }
html[lang='ar'] .edt__n { font-family: var(--ar-d); font-size: 1.2rem; }
.edt__b { color: var(--muted, #7a7268); }
.edt .ln { margin-top: 0.4rem; }

/* ── the closing moment ───────────────────────────────────────────────── */
.close { border-top: 1px solid var(--line); padding-top: clamp(2.2rem, 5vw, 3.4rem); }
.close__a { display: flex; flex-wrap: wrap; gap: 1.1rem 2.2rem; margin: 0; }

/* the boutique: a quiet typographic statement until real photography exists */
.visit {
  border-top: 1px solid var(--line);
  padding-top: clamp(2.2rem, 5vw, 3.4rem);
}

/* the boutique with its photograph: image and words side by side, the image
   held small deliberately because the source is only 760px wide */
.visit--img {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(1.6rem, 4vw, 3.4rem);
  align-items: center;
}
.visit__m { display: block; overflow: hidden; }
.visit__m img { display: block; width: 100%; height: auto; }
.visit__c { display: block; }
@media (max-width: 52rem) {
  .visit--img { grid-template-columns: minmax(0, 1fr); }
  .visit__m { max-width: 22rem; }
}

/* ══════════════════════════════════════════════════════════════════════
   V2 — ACCESSIBILITY, TOUCH AND THE DISTORTED WORDMARK
   Every value here replaces a measured defect, not a guess. The measurement
   is quoted beside each one so it can be re-checked.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. contrast: 3.57:1 where 4.5:1 is required ──────────────────────
   --mute was #8b857c: 3.57:1 on the canvas, 3.33:1 on ivory. That single
   token was responsible for 44 to 80 failing elements per page, including
   16px body copy on the shop page, the whole filter row and the
   breadcrumb. #6f6a61 measures 5.24:1 on the canvas and 4.90:1 on ivory,
   so both pass with margin, and it is the same warm grey one shade
   deeper rather than a different colour.

   The dark contexts are untouched: .ft and .night set their own
   rgba(255,255,255,...) text colours and never used this token, so
   deepening it cannot hurt them. */
:root {
  --mute: #6f6a61;
}

/* ── 2. filter chips were 26px tall with 11.52px type ─────────────────
   Measured on the phone shop page: 119x26, 97x26, 95x26, 84x26, 49x26.
   The guideline is 44x44. Type goes to 12px and the height comes from
   real padding, so the chip is genuinely hittable rather than merely
   surrounded by space. */
.f {
  font-size: 0.78rem;              /* was 0.72rem = 11.52px */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding-block: 0.55rem;
  padding-bottom: calc(0.55rem - 1px);   /* keeps the 1px underline where it was */
}
html[lang='ar'] .f { font-size: 0.92rem; }
select.f { min-height: 44px; padding-block: 0; }
.filters { row-gap: 0; }           /* the chips now carry their own vertical room */
.fcount {
  font-size: 0.8rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* ── 3. the mobile bottom navigation label was 9.28px ─────────────────
   0.58rem, on the only navigation a phone visitor has. 12px is the
   floor; the row keeps its height so nothing moves. */
.tabs span {
  font-size: 0.75rem;              /* was 0.58rem = 9.28px */
  letter-spacing: 0.06em;          /* tightened so longer labels still fit */
}
html[lang='ar'] .tabs span { font-size: 0.8rem; letter-spacing: 0; }
.tabs svg { width: 20px; height: 20px; }
.tabs a { min-height: 60px; }
@media (max-width: 66rem) { body { padding-bottom: 62px; } }

/* ── 4. the footer wordmark was stretched to nearly 4x its width ──────
   The file is 600x169, a ratio of 3.55:1. The rule was `height: 30px`
   with no width, and something upstream gave the element the full 350px
   column, so it rendered 350x30 on a phone and 382x30 on a desktop:
   11.67:1 and 12.74:1. It is the brand's own name.

   Rather than rely on `width: auto` surviving whatever set the width, the
   ratio is declared outright and object-fit is contain, so this element
   cannot be stretched again by any later rule. */
.ft__mark img {
  height: 30px;
  width: auto;
  max-width: 100%;
  aspect-ratio: 600 / 169;
  object-fit: contain;
  margin-bottom: 1.4rem;
}

/* ── 5. the footer headings became h3 ─────────────────────────────────
   They were h4 with no h3 above them anywhere on the page, which is what
   produced the h1 -> h4 jump measured on every page in both languages.
   The rules move with them; the type is unchanged apart from the floor. */
/* h2, not h3, and not h4 as originally shipped.
   h4 with no h3 above it produced an h1 -> h4 jump on every page. Promoting
   to h3 fixed the pages that have h2 sections and created a NEW h1 -> h3 jump
   on the pages whose only heading is the h1: the shop, the cart and search.
   h2 is correct at both: these are top-level groups of the footer landmark,
   peers of the page's own sections, and h1 -> h2 can never skip a level. */
.ft h2 {
  color: #fff;
  font-family: var(--sans);
  font-size: 0.75rem;             /* 0.68rem was 10.88px; 0.72rem was still 11.52px */
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 1.3rem;
}
html[lang='ar'] .ft h2 {
  font-family: var(--ar);
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  text-transform: none;
}

/* ── 9. the last of the sub-12px type, each measured ──────────────────
   .eyebrow is the small caps label above every section heading on the
   site, so it appeared on nearly every page; .ln is the underlined
   inline link that follows most of them; .act is the "Load more" button
   at the foot of the catalogue. All three are 12px now. */
.eyebrow { font-size: 0.75rem; }   /* was 0.70rem = 11.20px */
.ln { font-size: 0.75rem; }        /* was 0.72rem = 11.52px */
.act { font-size: 0.78rem; }       /* was 0.74rem = 11.84px */
html[lang='ar'] .eyebrow { font-size: 0.9rem; }

/* ── 6. remaining sub-12px labels, each measured in the page ──────────── */
.ft__legal { font-size: 0.78rem; }        /* was 0.74rem = 11.84px */
.pi__r { font-size: 0.75rem; }            /* the product reference on a card */
.small { font-size: 0.875rem; }

/* ── 7. focus was a 1px hairline ──────────────────────────────────────
   Visible, but only just, and it vanished against the teal band. Two
   pixels and a wider offset, in the same colour. */
:focus-visible {
  outline: 2px solid var(--teal-deep);
  outline-offset: 3px;
}
.night :focus-visible,
.ft :focus-visible,
.film :focus-visible { outline-color: #cfe6e2; }

/* ── 8. the open menu is a dialog, so it behaves like one ─────────────
   The focus trap is in js/site.js. This is the part it needs: while the
   menu is open nothing behind it may be reached by a pointer either, or a
   tap lands on the page underneath. */
body:has(.menu.on) main,
body:has(.menu.on) .ft { pointer-events: none; }

/* ── 10. the catalogue pager ───────────────────────────────────────────
   Page 1 renders 24 cards and /page/N/ documents hold the rest. This is
   the control that joins them: a Load more that the script upgrades into
   an in-place append, and beneath it the numbered pages as real links, so
   the sequence is walkable with no script and by a crawler.

   The numbers are deliberately quiet. They are there for a crawler and
   for the visitor who wants page 9, not as the primary way to browse. */
.pager {
  display: grid;
  justify-items: center;
  gap: 1.1rem;
  margin-top: clamp(2.6rem, 5vw, 4rem);
  text-align: center;
}
.pager__n { margin: 0; color: var(--mute); }
.pager .act { min-height: 44px; display: inline-flex; align-items: center; }
.pager .act[aria-busy='true'] { opacity: 0.6; pointer-events: none; }
.pager__links {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.15rem 0.35rem;
}
/* every page number is a 44px target, which is what the old 26px filter
   chips were not */
.pager__links a,
.pager__cur {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--mute);
  border-bottom: 1px solid transparent;
}
.pager__links a:hover { color: var(--ink); }
.pager__cur {
  color: var(--ink);
  border-bottom-color: var(--teal);
}
.pager__links .ln { min-width: 0; padding-inline: 0.5rem; }
/* the numbered list is long at 13 pages, so on a phone it scrolls rather
   than wrapping into five ragged rows */
@media (max-width: 40rem) {
  .pager__links {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    max-width: 100%;
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 2rem), transparent 100%);
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 2rem), transparent 100%);
  }
  html[dir='rtl'] .pager__links {
    -webkit-mask-image: linear-gradient(to left, #000 0, #000 calc(100% - 2rem), transparent 100%);
    mask-image: linear-gradient(to left, #000 0, #000 calc(100% - 2rem), transparent 100%);
  }
  .pager__links a, .pager__cur { scroll-snap-align: center; }
}

/* ── 11. the desktop header, and two real controls ─────────────────────
   The desktop navigation labels were 11.20px and the language switch
   10.88px. They only appear above 66rem, which is why the phone pass did
   not surface them: the phone shows the burger instead. Same words, same
   tracking, 12px floor. */
.hdr__nav a { font-size: 0.75rem; }        /* was 0.70rem = 11.20px */
.util .lang { font-size: 0.75rem; }        /* was 0.68rem = 10.88px */
html[lang='ar'] .hdr__nav a { font-size: 0.9rem; }
html[lang='ar'] .util .lang { font-size: 0.9rem; }

/* The wishlist heart on a product card measured 34x34. It is a real
   control with a real consequence, not an inline link in a sentence, so it
   gets a 44x44 hit area. The heart itself does not change size: the area
   grows around it, so the card looks identical. */
.pi .save {
  position: relative;
}
.pi .save::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}
/* the pager's Previous and Next were 16px wide because .ln reset the
   minimum; they are targets like any other */
.pager__links .ln { min-width: 44px; justify-content: center; }

/* ── touch target sizing (WCAG 2.2 AA 2.5.8; 44px comfort target on coarse
      pointers). Scoped to coarse pointers / small viewports so the desktop
      editorial rhythm is untouched. ─────────────────────────────────────── */
@media all {
  .save {
    min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  /* real padding rather than an absolute overlay: the box a finger hits is
     the box the browser reports, and it cannot cover a neighbouring link */
  .ln { display: inline-flex; align-items: center; min-height: 44px; }
  .pi__n { display: inline-block; padding-block: 0.72rem; }
  .pi__b { gap: 0; }
  /* breadcrumbs sit as a row of small links; space them so each is tappable */
  .small a, nav[aria-label='Breadcrumb'] a { display: inline-flex; align-items: center; min-height: 28px; }
  .mark, .menu__top a, .tabs a { min-height: 44px; display: inline-flex; align-items: center; }
  .ft__legal a, .ft a { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ── hero video ───────────────────────────────────────────────────────
   The frame carries an explicit aspect-ratio at every breakpoint and the
   media is contained rather than covered, so nothing in the shot — belt,
   set, earrings or logo — is ever cropped, and the box reserves its own
   height so there is no shift while the video arrives.
   Desktop ships the 16:9 master; phones get the 4:5 reframe, which pads
   the same uncropped frame instead of cutting into it. */
.film--video { position: relative; background: var(--night); }
.film--video picture { position: absolute; inset: 0; display: block; }
.film--video .film__poster,
.film--video .film__vid {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain; object-position: center;
  transform: none;
}
.film--video { aspect-ratio: 16 / 9; max-height: 92vh; height: auto; }
.film--video .film__vid {
  opacity: 0;
  transition: opacity 0.55s ease;
  z-index: 1;
}
.film--video.is-ready .film__vid { opacity: 1; }
.film--video.is-fading .film__vid { opacity: 0; }
.film--video.is-poster .film__vid { display: none; }
.film--video .film__poster { z-index: 0; }
.film--video .film__cap { z-index: 3; }
.film--video::after { z-index: 2; }

/* the scrim: readable type without dulling the piece. Kept lighter at the
   top so the belt and the logo stay clean, weighted at the foot where the
   headline and CTA sit. */
.film--video::after {
  background:
    linear-gradient(to top, rgba(10, 9, 7, 0.68) 0%, rgba(10, 9, 7, 0.30) 30%,
                    rgba(10, 9, 7, 0.06) 58%, rgba(10, 9, 7, 0) 78%);
}

/* phones only: the 4:5 reframe fills the width edge to edge. No max-height
   here — a cap would pull the box narrower than the viewport and break the
   full-bleed. Tablets from 48rem up stay on the 16:9 master. */
@media (max-width: 47.99rem) {
  .film--video { aspect-ratio: 4 / 5; max-height: none; }
  .film--video .film__cap { bottom: 1.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .film--video .film__vid { display: none; }
  .film--video .film__poster { opacity: 1; }
}

/* ── Visit Us: slow pan on the real Tawar Mall photograph ──────────────
   The authentic location photograph stays; only the frame moves. An 8s
   ease-in-out drift with a touch of scale gives depth without wobble, and
   the frame clips it so no layout is disturbed. Motion is decorative, so
   it stops entirely under prefers-reduced-motion. */
.visit--img .visit__m { overflow: hidden; display: block; position: relative; }
.visit--img .visit__m img {
  display: block; width: 100%; height: auto;
  transform-origin: 52% 42%;
  will-change: transform;
  animation: visit-pan 16s cubic-bezier(.42, 0, .58, 1) infinite alternate;
}
@keyframes visit-pan {
  from { transform: scale(1.005) translate3d(0, 0, 0); }
  to   { transform: scale(1.075) translate3d(-1.1%, -1.6%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .visit--img .visit__m img { animation: none; transform: none; }
}

/* ── editorial films ───────────────────────────────────────────────────
   A film occupies exactly the slot its still occupied. The still stays in
   the markup as the poster and is what shows with no JS, under reduced
   motion, or if playback fails — so these blocks can never come up empty.
   The frame is sized by the surrounding context, so nothing shifts when
   the video arrives. */
.film-m { position: relative; display: block; overflow: hidden; background: var(--ivory); }
.film-m__p, .film-m__v {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.film-m__v { opacity: 0; transition: opacity 0.6s ease; }
.film-m.is-playing .film-m__v { opacity: 1; }

/* the film inherits the height of the still it replaced, in each context */
.band__img .film-m { height: clamp(20rem, 56vh, 36rem); }
.band--short .band__img .film-m { height: clamp(16rem, 42vh, 27rem); }
.pair .film-m { aspect-ratio: 4 / 5; }
.world .film-m { aspect-ratio: 3 / 4; }
.world .film-m__p, .world .film-m__v { transition: transform 1.2s cubic-bezier(.22,.61,.36,1); }

@media (max-width: 48rem) {
  .band__img .film-m { height: clamp(15rem, 38vh, 22rem); }
  .band--short .band__img .film-m { height: clamp(13rem, 32vh, 19rem); }
}

/* decorative motion: reduced-motion users get the still, and the script
   never fetches the video at all */
@media (prefers-reduced-motion: reduce) {
  .film-m__v { display: none; }
}

/* ── FIX: hero must stay edge to edge ──────────────────────────────────
   aspect-ratio combined with max-height made the *section* narrower than
   the viewport on any window shorter than 16:9 — a 1920x940 window left a
   383px dead column. The section now always spans the full width and takes
   its height from the width, capped so the headline stays reachable. The
   media covers that box; the composition is centred, so the small vertical
   trim on short windows takes empty ground, not the belt, the set or the
   logo. */
.film--video {
  aspect-ratio: auto;
  width: 100%;
  height: min(56.25vw, 86vh);
  max-height: none;
}
.film--video .film__poster,
.film--video .film__vid { object-fit: cover; }

@media (max-width: 47.99rem) {
  .film--video { height: min(125vw, 74vh); }
}

/* ── FIX: product actions were a ragged wrap ───────────────────────────
   Four controls of different widths in a flex-wrap fell into an untidy
   two-line block. A fixed grid gives one clean row of quantity / add /
   save, with the enquiry spanning beneath it, and all controls share a
   height. */
.pdp__i > div[style*="display:flex"] {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.6rem;
  align-items: stretch;
}
.pdp__i > div[style*="display:flex"] > .qty        { grid-column: 1; }
.pdp__i > div[style*="display:flex"] > [data-add]  { grid-column: 2; }
.pdp__i > div[style*="display:flex"] > [data-wish] { grid-column: 3; }
.pdp__i > div[style*="display:flex"] > a.act       { grid-column: 1 / -1; }
.pdp__i .act {
  min-height: 48px; display: inline-flex;
  align-items: center; justify-content: center; text-align: center;
}
.pdp__i .qty { min-height: 48px; }

@media (max-width: 48rem) {
  /* phone: quantity and save share the top row, the two full-width actions
     stack beneath, each one an unambiguous target */
  .pdp__i > div[style*="display:flex"] { grid-template-columns: auto minmax(0, 1fr); }
  .pdp__i > div[style*="display:flex"] > .qty        { grid-column: 1; grid-row: 1; }
  .pdp__i > div[style*="display:flex"] > [data-wish] { grid-column: 2; grid-row: 1; }
  .pdp__i > div[style*="display:flex"] > [data-add]  { grid-column: 1 / -1; grid-row: 2; }
  .pdp__i > div[style*="display:flex"] > a.act       { grid-column: 1 / -1; grid-row: 3; }
}

/* ── hero caption legibility ───────────────────────────────────────────
   The morph film is brightest exactly where the headline sits, so the
   single bottom gradient was not enough. A soft elliptical wash sits under
   the caption only — it lifts the type without dulling the piece or the
   logo, and it fades to nothing well before the frame edges. */
.film--video::after {
  background:
    radial-gradient(120% 62% at 38% 88%, rgba(10, 9, 7, 0.72) 0%,
                    rgba(10, 9, 7, 0.42) 42%, rgba(10, 9, 7, 0) 74%),
    linear-gradient(to top, rgba(10, 9, 7, 0.62) 0%, rgba(10, 9, 7, 0.26) 26%,
                    rgba(10, 9, 7, 0.04) 56%, rgba(10, 9, 7, 0) 78%);
}
.film--video .film__cap h1,
.film--video .film__cap .eyebrow {
  text-shadow: 0 1px 26px rgba(10, 9, 7, 0.55);
}

/* ── FIX: the filter bar read as one undifferentiated run ──────────────
   Fifteen chips of two different kinds — piece type and tone — sat in a
   single wrap with the sort control stranded mid-row and the count adrift.
   They are now two labelled groups on their own lines, with the sort and
   the count squared off to the end on a line of their own. */
.filters {
  display: grid;
  gap: 0.9rem;
  align-items: stretch;
  padding-block: 1.4rem;
  border-block: 1px solid var(--hair);
}
.fgroup {
  display: flex; flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.5rem;
  min-width: 0;                 /* a scrolling chip row must not push its parent */
}
/* the tone row is the quieter of the two, and is set apart by a hairline
   rather than by a heading, so no new copy is invented in either language */
.fgroup--tone {
  padding-top: 0.85rem;
  border-top: 1px solid var(--hair);
}
.ftools {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.2rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--hair);
}
.ftools .fcount { margin-inline-start: 0; }
/* the count lost its space because the isolated numeral sits flush against
   the following word */
.fcount .num { margin-inline-end: 0.45em; }
html[lang="ar"] .fcount .num { margin-inline-end: 0.5em; }

@media (max-width: 48rem) {
  .fgroup { gap: 0.4rem 1.1rem; }
  .ftools { flex-wrap: wrap; gap: 0.6rem; }
}

/* ══ V3.2 ═══════════════════════════════════════════════════════════════
   Spacing system, media-loading behaviour and touch targets. */

/* ── 1. one spacing scale, applied to every section ────────────────── */
:root {
  --sec: clamp(3rem, 6.4vw, 6.5rem);   /* 48px → 104px between modules   */
  --sec-in: clamp(1rem, 1.8vw, 1.75rem);
  --h-desc: clamp(1.25rem, 1.6vw, 1.75rem);   /* heading → description   */
  --desc-cta: clamp(1.5rem, 1.9vw, 2rem);     /* description → CTA       */
  --h-grid: clamp(2rem, 3.4vw, 4rem);         /* heading → product grid  */
}

/* ── 2. media never shows an empty panel ───────────────────────────────
   The poster is the floor: it sits underneath and is only covered once
   the video reports `playing`. A film that failed keeps the poster for
   good. The frame carries the ivory ground so a not-yet-painted image
   reads as canvas rather than a hole. */
.film-m { background: var(--ivory); }
.film-m__p { opacity: 1; }
.film-m__v { opacity: 0; transition: opacity 0.5s ease; }
.film-m.is-playing .film-m__v.is-on,
.film-m.is-playing .film-m__v:only-of-type { opacity: 1; }
.film-m.is-failed .film-m__v { display: none; }
.film-m--seq .film-m__v { opacity: 0; }
.film-m--seq .film-m__v.is-on { opacity: 1; }
.film--video.is-failed .film__vid { display: none; }

/* ── 3. touch targets: the catalogue save control ──────────────────────
   It sits absolutely inside the card, so width/height must be set on the
   control itself at every breakpoint, not only on coarse pointers. */
.save {
  min-width: 44px; min-height: 44px;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
}
.save svg { width: 18px; height: 18px; }

/* ── 4. the count: number and noun are separate boxes with a real gap,
       so no collapsing whitespace can join them ─────────────────────── */
.fcount { display: inline-flex; align-items: baseline; gap: 0.4em; }
.fcount .num { margin-inline-end: 0; }

/* ── 5. filters stay in one organised region ───────────────────────────
   On narrow screens a long tone list scrolls sideways inside its own
   group rather than shattering into ragged lines. */
@media (max-width: 60rem) {
  .fgroup {
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 0.25rem;
  }
  .fgroup::-webkit-scrollbar { display: none; }
  .fgroup > .f { flex: 0 0 auto; }
}

/* ── 6. section rhythm ─────────────────────────────────────────────────
   air / air-s were several different values; they now resolve to the one
   scale so no module is arbitrarily taller than its neighbours. */
.air { padding-block: var(--sec); }
.air-s { padding-block: calc(var(--sec) * 0.62); }
.head { margin-bottom: var(--h-grid); }
.head p { margin-top: var(--h-desc); }

/* the band caption is the heading for the film above it: pull them
   together so the title never reads as a detached strip */
.band__cap { padding-block: var(--sec-in) 0; }
.band + .wrap > .head,
.band + section > .wrap > .head { margin-top: var(--sec-in); }

/* ── 7. the clutches feature was ~991px before its product row ─────────
   The split is capped and its internal spacing tightened; the four-product
   row underneath is untouched. */
.pair {
  align-items: center;
  gap: clamp(1.5rem, 3.2vw, 3rem);
}
.pair img, .pair .film-m { aspect-ratio: 4 / 5; max-height: 30rem; }
.pair__c { display: grid; gap: var(--h-desc); align-content: center; }
.pair__c .lede { margin: 0; }

/* ── 8. product grid: equal columns, aligned rows ──────────────────────
   Cards become a stretched grid so the name, reference and price sit on
   the same baseline across a row regardless of title wrapping. */
.pgrid, .prow { align-items: stretch; }
.pi { display: grid; grid-template-rows: auto 1fr; }
.pi__b { display: grid; align-content: start; gap: 0.28rem; }
@media (min-width: 75rem) { .pgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 48rem) and (max-width: 74.99rem) {
  .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* phones show two pieces per row — one per row turned the homepage into an
   endless scroll. A single column is kept only for the narrowest handsets,
   where two cards would leave the names unreadable. */
@media (min-width: 22.5rem) and (max-width: 47.99rem) {
  .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 22.49rem) {
  .pgrid { grid-template-columns: minmax(0, 1fr); }
}

/* ── 9. collection heroes are all the same height ──────────────────── */
.band--short .band__img,
.band--short .band__img .film-m,
.band--short .band__img img { height: clamp(17rem, 34vw, 26rem); }
.band--short .band__img .film-m { width: 100%; }

/* ── 10. Tawar: photograph and copy on the same vertical centre ────── */
.visit { align-items: center; }
.visit--img .visit__m { max-height: 30rem; }
.visit--img .visit__m img { height: 100%; object-fit: cover; }

/* ── dominant-tone placeholders ────────────────────────────────────────
   Each media frame carries the average colour of its own first frame, so a
   cold visit on a slow link shows the film's own tone rather than an empty
   beige rectangle. The poster fades up over it. */
.film-m[data-film$="/collection-heritage"] { background-color: rgb(85,71,62); }
.film-m[data-film$="/collection-jewellery"] { background-color: rgb(36,38,44); }
.film-m[data-film$="/home-clutches"] { background-color: rgb(136,110,80); }
.film-m[data-film$="/home-heritage"] { background-color: rgb(92,69,44); }
.film-m[data-film$="/home-house"] { background-color: rgb(115,107,94); }
.film-m[data-film$="/home-jewellery"] { background-color: rgb(126,110,92); }
.film-m[data-film$="/occasion-evening"] { background-color: rgb(97,82,68); }
.film-m[data-film$="/occasion-henna"] { background-color: rgb(80,63,49); }
.film-m[data-film$="/occasion-weddings"] { background-color: rgb(149,136,123); }
.film-m[data-film$="/selected-curation"] { background-color: rgb(128,114,98); }
.film--video { background-color: rgb(59,41,33); }
.film-m[data-film-seq] { background-color: rgb(149,136,123); }

/* ── interactive height floor ──────────────────────────────────────────
   Every link that behaves as a discrete control — footer columns, menu
   entries, breadcrumbs, the tab bar — gets a 44px vertical hit area at all
   widths. Short words still measure under 44px across, which is the inline
   exception in WCAG 2.2 SC 2.5.8: widening a four-letter footer link would
   distort the column for no gain. */
.ft a, .menu a, .menu__sub a, .tabs a, .close__a a, nav[aria-label] a, .small a {
  min-height: 44px;
  padding-block: 0.5rem;
}
.ft ul { display: grid; }

/* the primary desktop nav links were the last controls under 44px tall */
/* height only — setting `display` here would override the mobile rule that
   hides these links and drag the desktop nav onto small screens */
.hdr__nav a { min-height: 44px; padding-block: 0.55rem; }

/* header icon buttons (search, wishlist, cart) */
.ic { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

/* the logo link must never be squeezed by the icon cluster */
.mark { min-width: 44px; flex: 0 0 auto; }
.mark img { max-width: 100%; height: auto; }

/* ── mobile density ────────────────────────────────────────────────────
   Three full-width occasion cards and four stacked edit columns turned the
   phone homepage into an endless scroll. Both now use the width they have
   instead of one item per screen. Nothing is hidden or removed. */
@media (max-width: 47.99rem) {
  /* two occasion cards side by side, the third spanning beneath them —
     the aspect stays 3:4 on the pair so no jewellery is cropped away */
  .worlds { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
  .worlds > .world:nth-child(3) { grid-column: 1 / -1; }
  .worlds > .world:nth-child(3) img,
  .worlds > .world:nth-child(3) .film-m { aspect-ratio: 16 / 10; }
  .world .world__c h3 { font-size: 1rem; }

  /* the edit is four short text blocks; two columns reads as a group
     rather than four unrelated screens */
  .quad { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem 1.1rem; }

  /* a little less air between modules on a phone, without crowding them */
  :root { --sec: clamp(2.6rem, 8vw, 3.4rem); }
}

/* ── FIX: the edit cards did not line up ───────────────────────────────
   Two problems on a phone. The single-column rule at 34rem also set
   text-align:center, but the grid is two columns there now, so headings and
   copy were centred while the "All pieces" link stayed flush to the start —
   two different alignments inside one card. And because each card was a
   plain flex column, the link sat directly under a description of whatever
   length, so the links in a row never met the same baseline.

   The card is now a three-row grid: name, body, link. The body row takes
   the slack, which pushes every link to the bottom of its cell, so the
   links align across the row no matter how long the copy is. */
.edt {
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-content: start;
  text-align: start;
}
.edt .ln { align-self: start; justify-self: start; margin-top: 0.9rem; }

@media (max-width: 34rem) {
  /* the centring belonged to the old one-per-row layout */
  .quad { text-align: start; }
}


/* ── V3.6 boutique film ────────────────────────────────────────────────
   The only video on the site is a 9:16 film shot inside the boutique. On
   phones it fills the screen at its own proportion (no crop). From tablet
   up it stands beside the headline at its true proportion instead of being
   stretched across a 16:9 stage, on the house's night ground. */
.film--video.film--boutique { aspect-ratio: auto; height: min(177.7vw, 86vh); max-height: none; background: var(--night); }
.film--video.film--boutique .film__vid, .film--video.film--boutique .film__poster { object-fit: cover; object-position: center; }
@media (min-width: 60rem) {
  .film--video.film--boutique { height: min(88vh, 52rem); display: grid; grid-template-columns: minmax(0, 1fr) calc(min(88vh, 52rem) * 9 / 16); align-items: center; }
  .film--video.film--boutique picture, .film--video.film--boutique .film__vid { position: absolute; inset-block: 0; inset-inline: auto 0; width: calc(min(88vh, 52rem) * 9 / 16); height: 100%; }
  .film--video.film--boutique .film__poster { width: 100%; height: 100%; }
  .film--video.film--boutique .film__cap { position: static; grid-column: 1; padding: 0 clamp(2rem, 7vw, 7rem); max-width: 46rem; }
  .film--video.film--boutique .film__cap h1, .film--video.film--boutique .film__cap .eyebrow { text-shadow: none; }
  .film--video.film--boutique::after { inset-inline: auto 0; width: calc(min(88vh, 52rem) * 9 / 16); }
}
/* stills that replaced the editorial films keep the films' frames */
.band__img .still { display: block; width: 100%; height: clamp(15rem, 40vh, 26rem); object-fit: cover; }
.pair .still { width: 100%; aspect-ratio: 4 / 5; max-height: 30rem; object-fit: cover; }
.world .still { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }


/* ── V3.7 ease of use ───────────────────────────────────────────────── */
/* hero: a real button to the shop and a WhatsApp link, side by side */
.hero__acts { display: flex; flex-wrap: wrap; gap: 0.9rem 1.4rem; align-items: center; margin: 0.4rem 0 0; }
.act--light { background: #fff; color: var(--ink); }
.act--light:hover { background: #f1efe9; }
/* category strip under the hero */
.strip { display: flex; gap: 0.5rem; align-items: center; overflow-x: auto; scrollbar-width: none; padding-block: 0.9rem; -webkit-overflow-scrolling: touch; }
.strip::-webkit-scrollbar { display: none; }
.strip__l { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); white-space: nowrap; margin-inline-end: 0.3rem; }
html[lang='ar'] .strip__l { letter-spacing: 0; text-transform: none; }
.chip { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.05rem; border: 1px solid var(--hair); border-radius: 999px; font-size: 0.9rem; color: var(--ink); text-decoration: none; background: #fff; white-space: nowrap; }
.chip:hover, .chip:focus-visible { border-color: var(--ink); }
/* WhatsApp on every page */
.wa-fab { position: fixed; inset-inline-end: 1rem; bottom: calc(60px + 0.9rem + env(safe-area-inset-bottom)); z-index: 83;
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 56px; padding: 0 1.15rem 0 0.95rem; border-radius: 999px;
  background: var(--wa); color: #fff; text-decoration: none; font-size: 0.95rem; font-weight: 500;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22); }
.wa-fab svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.wa-fab:hover { background: #0e6c35; color: #fff; }
.wa-fab:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (min-width: 66rem) { .wa-fab { bottom: 1.4rem; inset-inline-end: 1.4rem; } }
@media (max-width: 60rem) { html.is-pdp .wa-fab { display: none; } }   /* the buy bar owns that corner on phones */
/* WhatsApp green with 4.5:1 on white text (was #1faa59 at 3.0:1) */
:root { --wa: #11813f; }
.act--wa:hover { background: #0e6c35; }
/* Buy now sits directly under Add to basket, full width, on every screen */
.pdp__i > div[style*="display:flex"] > [data-buy] { grid-column: 1 / -1; grid-row: 2; }
.pdp__i > div[style*="display:flex"] > a.act { grid-row: 3; }
@media (max-width: 60rem) {
  .pdp__i > div[style*="display:flex"] > [data-buy] { grid-row: 3; }
  .pdp__i > div[style*="display:flex"] > a.act { grid-row: 4; }
  .hero__acts .ln--light { display: none; }   /* the WhatsApp button already sits on screen */
}
/* toast with a link */
.toast__a { display: inline-block; margin-inline-start: 0.9rem; color: #fff; text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }
/* clear filters */
.f--clear[hidden] { display: none; }
.f--clear { text-decoration: underline; text-underline-offset: 3px; }
/* gallery hint (phones only) */
.gal-hint { display: none; margin: 0.5rem 0 0; color: var(--mute); }
@media (max-width: 60rem) { .gal-hint { display: block; } }
.pdp__gal:focus-visible { outline-offset: 2px; }
/* the word beside the menu icon */
.burger { display: inline-flex; align-items: center; gap: 0.45rem; width: auto; padding-inline: 0.55rem; }
.burger__l { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); }
html[lang='ar'] .burger__l { letter-spacing: 0; text-transform: none; font-size: 0.85rem; }
@media (max-width: 30rem) { .burger__l { display: none; } }
/* language switch: always visible, one short word, a real target */
.hdr .util .lang { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; min-width: 44px; padding: 0 0.7rem; margin-inline-start: 0.2rem; border: 1px solid var(--hair); border-radius: 999px; font-size: 0.8rem; letter-spacing: 0.04em; color: var(--ink); text-decoration: none; }
.hdr .util .lang:hover, .hdr .util .lang:focus-visible { border-color: var(--ink); color: var(--ink); }
html[lang='ar'] .hdr .util .lang { font-size: 0.8rem; letter-spacing: 0.06em; }


/* ── V3.8 instagram ────────────────────────────────────────────────── */
.contact__acts { display: flex; flex-wrap: wrap; gap: 0.8rem; margin: 1.6rem 0 0; }
.contact__btn { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 52px; padding: 0 1.3rem; text-decoration: none; }
.contact__btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.act--ig { background: var(--ink); color: #fff; }
.act--ig:hover { background: #2a2824; color: #fff; }
.ft__ig { display: inline-flex; align-items: center; gap: 0.5rem; }
.ft__ig svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ── V3.5 catalogue: prices and multi-angle galleries ──────────────────
   A set can carry up to four photographs. On a phone they used to stack,
   pushing the name and the price four screens down; now they swipe, with
   the edge of the next shot visible so the swipe is discoverable. Wider
   screens keep the stacked gallery beside the details. */
@media (max-width: 60rem) {
  .pdp__gal { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 0.5rem;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
    margin-inline: calc(-1 * var(--gut)); padding-inline: var(--gut); }
  .pdp__gal::-webkit-scrollbar { display: none; }
  .pdp__gal .shot { flex: 0 0 88%; scroll-snap-align: start; }
  .pdp__gal .shot:only-child { flex-basis: 100%; }
}
/* the price is the second thing read after the name: ink, not muted */
.pdp__i .lede.num { color: var(--ink); font-size: 1.15rem; letter-spacing: 0.02em; }