/* Gaja × Arwa Krekshi showroom
   Concept: the photographs set the palette. The studio's black is the page's black wherever a look is shown, so the
   jewelry on its mannequin comes out of the dark; everything you read sits on white paper; the mannequins' linen
   gives the one accent, a neutral beige. Clean rectangular frames, quiet space, the jewelry always first. */

:root {
  --black: #070504;        /* the studio backdrop in the photographs (sampled), so their edges disappear into it */
  --black-2: #1A1612;
  --paper: #FFFFFF;
  --ink: #1A1714;
  --ink-2: #3B352F;        /* long text on paper */
  --taupe: #6E665C;        /* secondary text on paper */
  --linen: #CDBFA9;        /* the mannequins' linen: rules, marks and focus on black */
  --sand: #F3EEE6;         /* beige panels */
  --line: #E5DED3;         /* hairlines on paper */
  --on-black: #F4F0E9;
  --on-black-dim: #ADA497;
  --line-dark: rgba(244, 240, 233, .14);

  --display: "Bodoni Moda", "Amiri", Georgia, serif;
  --body: "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;

  --gutter: 20px;
  --header-h: 56px;
  --radius: 4px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}
@media (min-width: 768px) { :root { --gutter: 36px; } }
@media (min-width: 1200px) { :root { --gutter: 64px; } }

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; scroll-behavior: smooth; -webkit-tap-highlight-color: transparent;
  scroll-padding-top: calc(var(--header-h) + env(safe-area-inset-top) + 16px); /* anchors land below the fixed header */
}
html.locked { overflow: hidden; }
html.locked body { overscroll-behavior: none; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Hidden means hidden, whatever layout a component sets (e.g. the other jewelry option's photos). */
[hidden] { display: none !important; }
img { display: block; max-width: 100%; }
/* Photos that arrive after their frame is on screen fade in instead of popping (cached ones show at once). */
img.is-pending { opacity: 0; }
img.is-revealed { animation: img-in .45s var(--ease) both; }
@keyframes img-in { from { opacity: 0; } }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.hero :focus-visible, .gallery :focus-visible, .site-footer :focus-visible, .site-header:not(.is-solid) :focus-visible { outline-color: var(--linen); }
.no-hero .site-header :focus-visible { outline-color: var(--ink); }
h1, h2, h3 { font-family: var(--display); font-weight: 400; margin: 0; }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3 { line-height: 1.4; }
/* Arabic pages: Amiri leads the display type, so shared signs (× in "قاجة × أروى الكريكشي") take its weight, not Bodoni's hairline */
html[lang="ar"] { --display: "Amiri", "Bodoni Moda", Georgia, serif; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- House marks (logos as masks so they take any colour) ---------- */
.mark {
  display: inline-block; flex: none; height: 1em; background-color: currentColor;
  -webkit-mask: var(--mark) center / contain no-repeat; mask: var(--mark) center / contain no-repeat;
}
.mark-ak { --mark: url("../brand/ak-mark.d826cd663ba2.png"); aspect-ratio: 640 / 442; }
.mark-gj { --mark: url("../brand/gj-mark.2d743c5cd0ee.png"); aspect-ratio: 640 / 490; }

/* Gaja first in reading order (right in Arabic, left in English), as in the name «قاجة × أروى الكريكشي» */
.lockup { display: inline-flex; align-items: center; gap: 12px; font-size: 26px; }
.lockup .mark-ak { height: 1.22em; }
.lockup .mark-gj { height: .9em; }
.lk-rule { width: 1px; height: 18px; background: currentColor; opacity: .45; }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset-inline: 0; top: 0; z-index: 20;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  height: calc(var(--header-h) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) var(--gutter) 0;
  color: var(--on-black);
  transition: background-color .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease);
}
/* Over the photo: a soft shade so the marks stay legible on bright satin */
.site-header::before {
  content: ""; position: absolute; inset: 0 0 -40px; z-index: -1; pointer-events: none;
  background: linear-gradient(rgba(11, 9, 7, .55), rgba(11, 9, 7, 0));
  transition: opacity .35s var(--ease);
}
.site-header.is-solid, .no-hero .site-header {
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: saturate(1.2) blur(14px);
  backdrop-filter: saturate(1.2) blur(14px);
  color: var(--ink);
  box-shadow: 0 1px 0 var(--line);
}
/* Scrolling over the photo: the bar darkens into the studio black, so the hero's words never show through it */
.site-header.is-veiled {
  background: rgba(11, 9, 7, .82);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.site-header.is-solid::before, .no-hero .site-header::before, .site-header.is-veiled::before { opacity: 0; }
.brand { justify-self: center; display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; text-decoration: none; }
.lang, .header-contact {
  display: inline-flex; align-items: center; min-height: 44px; min-width: 44px;
  font-size: .875rem; text-decoration: none;
}
.lang { justify-self: start; }
.header-contact, .store-badge { justify-self: end; }
.store-badge {
  display: inline-flex; align-items: center; min-height: 36px;
  font-size: .8125rem; text-decoration: none; padding: 6px 12px; border-radius: var(--radius);
  border: 1px solid currentColor;
}

/* ---------- Hero: the jewelry, out of the studio's dark ---------- */
.hero { position: relative; height: 88vh; height: 88svh; min-height: min(540px, 100svh); overflow: hidden; background: var(--black); color: var(--on-black); }
.hero-media { position: absolute; inset: 0; }
.hero-img { width: 100%; height: 100%; object-fit: cover; }
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(11, 9, 7, 0) 46%, rgba(11, 9, 7, .7) 70%, var(--black) 100%);
}
.hero-copy {
  position: absolute; z-index: 1; inset-inline: 0; bottom: 0;
  padding: 0 var(--gutter) calc(36px + env(safe-area-inset-bottom));
  max-width: 40rem;
}
.hero h1 { font-size: clamp(2.3rem, 9.5vw, 4.4rem); line-height: 1.1; letter-spacing: -.01em; text-wrap: balance; font-weight: 500; }
html[lang="ar"] .hero h1:not(:lang(en)) { font-size: clamp(2.2rem, 9vw, 4rem); line-height: 1.55; letter-spacing: 0; font-weight: 400; }
.hero p { margin: 12px 0 22px; max-width: 30rem; color: var(--on-black); font-size: 1.0625rem; line-height: 1.75; text-wrap: pretty; }
.hero h1, .hero p { text-shadow: 0 1px 18px rgba(11, 9, 7, .6); }
.hero-cta, .card-cta {
  display: inline-flex; align-items: center; min-height: 44px; font-weight: 500;
  text-decoration: underline; text-decoration-color: var(--linen); text-decoration-thickness: 1px; text-underline-offset: 8px;
}
.hero-cta { color: var(--on-black); font-size: 1rem; }

/* Page not found: the studio black, the lockup, one way back to the looks */
.notfound {
  min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; gap: 18vh;
  padding: calc(28px + env(safe-area-inset-top)) var(--gutter) 48px; background: var(--black); color: var(--on-black);
}
.notfound .brand { align-self: center; color: var(--on-black); }
.notfound-copy { max-width: 32rem; }
.notfound h1 { font-family: var(--display); font-size: clamp(2rem, 7vw, 3rem); line-height: 1.3; font-weight: 400; }
.notfound p { margin: 14px 0 22px; line-height: 1.75; }
.notfound-other { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line-dark); font-family: "IBM Plex Sans Arabic", system-ui, sans-serif; }
.notfound-other h2 { font-family: "Bodoni Moda", Georgia, serif; font-size: clamp(1.6rem, 5vw, 2.2rem); line-height: 1.25; }

/* Desktop, iPad landscape and phones held sideways: the copy beside the photo, which bleeds off the page edge
   and dissolves into the black on its inner side. */
@media (min-width: 1024px), (orientation: landscape) and (min-width: 640px) and (max-height: 599px) {
  .hero {
    height: auto; min-height: min(100vh, 940px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
  }
  .hero::after { display: none; }
  .hero-media {
    position: relative; inset: auto; grid-column: 2; grid-row: 1; align-self: stretch;
    -webkit-mask: linear-gradient(to right, transparent, #000 28%); mask: linear-gradient(to right, transparent, #000 28%);
  }
  [dir="rtl"] .hero-media { -webkit-mask: linear-gradient(to left, transparent, #000 28%); mask: linear-gradient(to left, transparent, #000 28%); }
  .hero-img { position: absolute; inset: 0; }
  .hero-copy { position: relative; inset: auto; grid-column: 1; grid-row: 1; padding: calc(var(--header-h) + 40px) var(--gutter) 64px; max-width: 44rem; }
  .hero h1, .hero p { text-shadow: none; }
  .hero h1 { font-size: clamp(3rem, 4.6vw, 4.6rem); }
  html[lang="ar"] .hero h1:not(:lang(en)) { font-size: clamp(2.6rem, 3.5vw, 3.8rem); text-wrap: wrap; }
  .hero p { font-size: 1.1875rem; }
}
@media (orientation: landscape) and (min-width: 640px) and (max-height: 599px) {
  .hero { min-height: 100svh; }
  .hero-copy { padding: calc(var(--header-h) + 8px) max(var(--gutter), env(safe-area-inset-left)) 20px; }
  .hero h1 { font-size: clamp(2rem, 5vw, 2.8rem); }
  html[lang="ar"] .hero h1:not(:lang(en)) { font-size: clamp(1.9rem, 4.6vw, 2.6rem); }
  .hero p { margin: 6px 0 10px; font-size: 1rem; }
}

/* ---------- Looks ---------- */
.looks { padding: 64px var(--gutter) 56px; }
.no-hero .looks { padding-top: calc(var(--header-h) + 48px); }
.looks-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.looks-head h2 { font-size: clamp(2rem, 7vw, 3.2rem); }
.looks-count { margin: 0; color: var(--taupe); font-size: .875rem; white-space: nowrap; }
.looks-intro { margin: 0 0 40px; max-width: 38rem; color: var(--ink-2); line-height: 1.8; text-wrap: pretty; }

/* One look per row on phones, so every piece reads clearly; two on tablets, three on wide screens. */
.grid { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 48px; }
@media (min-width: 600px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; row-gap: 56px; } }
@media (min-width: 1100px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 36px; row-gap: 72px; } }

.card { display: flex; flex-direction: column; text-decoration: none; min-width: 0; }
.card:focus-visible { outline-offset: 6px; }
.frame { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--black); border-radius: var(--radius); }
.frame-img, .frame .ph { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
/* A set's own product photo (square or wide) is shown whole on the black, never cropped */
.frame.is-whole .frame-img { object-fit: contain; background-color: transparent !important; } /* the letterbox is the frame's black, not the photo's placeholder tint */
.card:active .frame-img { transform: scale(.99); }
@media (hover: hover) { .card:hover .frame-img { transform: scale(1.03); } }

.card-text { display: flex; flex-direction: column; margin-top: 18px; min-width: 0; }
.card-num { font-family: "Bodoni Moda", serif; font-size: .9375rem; color: var(--taupe); font-variant-numeric: lining-nums; line-height: 1; }
.card-title { margin-top: 8px; font-family: var(--display); font-size: 1.5rem; line-height: 1.25; text-wrap: balance; }
html[lang="ar"] .card-title:not(:lang(en)) { font-size: 1.55rem; line-height: 1.45; }
.card-meta { margin-top: 4px; font-size: .875rem; color: var(--taupe); line-height: 1.5; }
.card-price { margin-top: 6px; font-family: "Bodoni Moda", serif; font-size: 1rem; color: var(--ink); font-variant-numeric: lining-nums; }
.card-story, .card-cta { display: none; }

/* The featured look leads the grid */
.card.is-feature { grid-column: 1 / -1; }
.card.is-feature .card-title { font-size: clamp(2rem, 7.5vw, 2.8rem); }
.card.is-feature .card-story { display: block; margin-top: 12px; color: var(--ink-2); max-width: 34rem; line-height: 1.8; }
.card.is-feature .card-cta { display: inline-flex; align-self: flex-start; margin-top: 10px; font-size: .9375rem; }
/* Wider screens: the featured photo keeps the grid's column, its words take the rest of the row */
@media (min-width: 600px) {
  .card.is-feature { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; align-items: center; }
  .card.is-feature .card-text { margin-top: 0; max-width: 30rem; padding-inline-start: 12px; }
}
@media (min-width: 1100px) {
  .card.is-feature { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 36px; }
  .card.is-feature .card-text { grid-column: 2 / -1; max-width: 34rem; padding-inline-start: 36px; }
  .card.is-feature .card-title { font-size: 3.2rem; }
  .card.is-feature .card-story { font-size: 1.125rem; }
}

/* Two columns: a lone last card spans the row, photo beside its name, instead of leaving a hole */
@media (min-width: 600px) and (max-width: 1099px) {
  .card.span-row { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; align-items: center; }
  .card.span-row .card-text { margin-top: 0; }
}

.ph { display: block; background: var(--black-2); }
.empty { color: var(--taupe); max-width: 32rem; }

/* ---------- The two houses ---------- */
.houses { padding: 64px var(--gutter) 72px; background: var(--sand); }
.houses-head { margin-bottom: 28px; max-width: 38rem; }
.houses-title { font-size: clamp(1.9rem, 6vw, 2.8rem); margin-bottom: 10px; }
.houses-intro { margin: 0; color: var(--ink-2); line-height: 1.8; text-wrap: pretty; }
.houses-grid { display: grid; gap: 20px; }
@media (min-width: 768px) { .houses-grid { grid-template-columns: 1fr 1fr; gap: 28px; } }
.house { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.house-photo { display: block; aspect-ratio: 16 / 10; min-height: 0; overflow: hidden; background: var(--black); }
@media (min-width: 768px) { .house-photo { aspect-ratio: 2 / 1; } }
.house-photo img { width: 100%; height: 100%; object-fit: cover; }
.house-body { display: flex; flex-direction: column; align-items: flex-start; flex: 1; padding: 26px 24px 26px; }
.house-logo { color: var(--ink); font-size: 44px; }
.house-ak .house-logo { font-size: 52px; }
.house-gj .house-logo { font-size: 40px; }
.house-name { margin-top: 14px; font-size: 1.6rem; line-height: 1.3; }
.house-role { margin: 2px 0 0; color: var(--taupe); font-size: .875rem; }
.house-about { margin: 12px 0 0; color: var(--ink-2); max-width: 32rem; line-height: 1.75; }
.house-facts { align-self: stretch; margin: 18px 0 22px; display: grid; }
.house-facts:empty { display: none; }
.house-facts div { display: grid; grid-template-columns: 7em 1fr; align-items: center; gap: 12px; min-height: 48px; border-top: 1px solid var(--line); }
.house-facts dt { color: var(--taupe); font-size: .8125rem; }
.house-facts dd { margin: 0; font-size: .9375rem; }
.house-facts a { display: inline-flex; align-items: center; min-height: 44px; text-decoration-color: var(--linen); text-underline-offset: 3px; }
.house-wa {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; margin-top: auto; padding: 0 22px; border-radius: var(--radius);
  background: var(--ink); color: var(--paper); text-decoration: none; font-weight: 500; font-size: .9375rem;
}
.house-wa .wa-icon { width: 18px; height: 18px; }

/* ---------- Footer ---------- */
.site-footer {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px;
  padding: 28px var(--gutter) calc(28px + env(safe-area-inset-bottom));
  background: var(--black); color: var(--on-black-dim); font-size: .875rem;
}
.footer-brand .lockup { color: var(--on-black); font-size: 24px; }
.footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; }
.footer-links a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; min-width: 44px; text-decoration: none; }
.footer-links a:hover { color: var(--on-black); }

/* ---------- Pop-up choices (the WhatsApp button, "Ask about this look") ---------- */
.pop summary { list-style: none; cursor: pointer; }
.pop summary::-webkit-details-marker { display: none; }
.pop-menu {
  position: absolute; z-index: 5; min-width: 260px; padding: 8px;
  border-radius: var(--radius); background: var(--paper); color: var(--ink);
  border: 1px solid var(--line); box-shadow: 0 22px 48px -16px rgba(11, 9, 7, .4);
}
.pop[open] .pop-menu { animation: pop-in .22s var(--ease) both; }
.pop.is-closing .pop-menu { animation: pop-out .15s ease-in forwards; }
@keyframes pop-in { from { opacity: 0; transform: translateY(8px) scale(.97); } }
@keyframes pop-out { to { opacity: 0; transform: translateY(6px) scale(.98); } }
.pop-head { margin: 6px 10px 6px; font-size: .8125rem; color: var(--taupe); }
.pop-menu a { display: flex; align-items: center; gap: 14px; padding: 10px 12px; min-height: 56px; border-radius: var(--radius); text-decoration: none; }
.pop-menu a:active, .pop-menu a:hover { background: var(--sand); }
.pop-menu .mark { width: 34px; font-size: 20px; color: var(--ink); -webkit-mask-size: contain; mask-size: contain; }
.pop-menu .mark-gj { font-size: 17px; }
.pop-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.pop-text strong { font-weight: 500; font-size: .9375rem; }
.pop-text small { color: var(--taupe); font-size: .8125rem; }

/* Floating WhatsApp: only between the hero and the houses */
.fab {
  position: fixed; z-index: 15; inset-inline-end: var(--gutter); bottom: calc(18px + env(safe-area-inset-bottom));
  opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.fab.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.fab.is-visible.is-tucked { transform: translateY(140%); }
html.locked .fab { opacity: 0; pointer-events: none; }
.fab summary {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: var(--ink); color: var(--paper);
  box-shadow: 0 12px 30px -10px rgba(11, 9, 7, .55);
}
.fab .pop-menu { bottom: 68px; inset-inline-end: 0; transform-origin: bottom right; }
[dir="rtl"] .fab .pop-menu { transform-origin: bottom left; }

/* ---------- The look ---------- */
.box {
  padding: 0; border: 0; margin: 0; width: 100%; max-width: none; height: 100%; max-height: none;
  color: var(--ink); background: var(--paper);
  height: 100dvh;
  overscroll-behavior: contain;
  overflow: hidden;
  transition: transform .22s var(--ease);
}
.box.is-dragging { transition: none; }
.box::backdrop {
  background: rgba(11, 9, 7, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: var(--drag-fade, 1); transition: opacity .22s var(--ease); /* lightens as the sheet is dragged away */
}
.box.is-dragging::backdrop { transition: none; }
.box[open] { animation: box-open .5s var(--ease) backwards; }
.box[open]::backdrop { animation: fade .4s ease backwards; }
/* Until a shared link's look is up, the page beneath stays unpainted (the look goes up as the page streams in) */
.is-deeplink-pending { background: var(--black); }
.is-deeplink-pending > :not(#look) { visibility: hidden; }
/* A shared link lands straight on the look: it is the first thing painted, so there is nothing to animate from */
.box.is-deeplink[open], .box.is-deeplink[open]::backdrop { animation: none; }
.box.is-dismissed { animation: none; }
/* Closing a sheet slides it away whole (as a swipe does), so it never sits see-through over the page beneath */
.box.is-closing { animation: box-close .24s cubic-bezier(.4, 0, 1, 1) forwards; }
.box.is-dismissed::backdrop { animation: fade-out .2s ease-out forwards; }
.box.is-closing::backdrop { animation: backdrop-out .24s ease-in forwards; }
@keyframes backdrop-out { from { opacity: var(--backdrop-from, 1); } to { opacity: 0; } }
@keyframes box-open {
  from { opacity: 0; transform: translateY(28px); clip-path: inset(5% 3% 0 3% round 12px); }
  10% { opacity: 1; } /* solid almost at once, so the page never shows through the rising box */
  to { opacity: 1; transform: none; clip-path: inset(0 round 0); }
}
@keyframes box-close { to { transform: translateY(100dvh); } }
@keyframes fade { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }

.sheet:focus { outline: none; }
.sheet { position: relative; display: flex; flex-direction: column; height: 100%; }
.scroller { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }

/* Toolbar: only Close sits on the photo; a white bar with the look's name takes over once the photo scrolls away */
.toolbar {
  position: absolute; z-index: 4; inset-inline: 0; top: 0;
  display: flex; justify-content: space-between; align-items: center;
  padding: calc(10px + env(safe-area-inset-top)) 12px 10px;
  pointer-events: none;
}
.toolbar::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--paper); box-shadow: 0 1px 0 var(--line); opacity: 0; transition: opacity .25s var(--ease);
}
.toolbar > * { pointer-events: auto; }
.tb-btn {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; flex: none;
  border: 0; text-decoration: none; color: var(--on-black);
  background: rgba(11, 9, 7, .45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.tb-btn:focus:not(:focus-visible) { outline: none; }
.tb-lang { font-size: .8125rem; font-weight: 500; line-height: 1; }
.toolbar [data-close] { margin-inline-start: auto; } /* Close in the outer corner (also when it is the bar's only button) */
.tb-title {
  flex: 1; min-width: 0; padding: 0 12px; text-align: center; font-family: var(--display); font-size: 1.0625rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity .2s;
}
.sheet.is-covered .toolbar::before { opacity: 1; }
.sheet.is-scrolled .tb-title { opacity: 1; }
.sheet.is-covered .tb-btn { background: transparent; color: var(--ink); }
[dir="rtl"] .flip { transform: scaleX(-1); }

/* Gallery: every photo shown whole on the studio black (the black margins melt into the photo's own backdrop).
   Each slide is a size container, so a photo can be limited by both the slide's width and its height. */
.gallery { position: relative; background: var(--black); color: var(--on-black); }
.slides { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.slides::-webkit-scrollbar { display: none; }
.slide {
  position: relative; flex: 0 0 100%; margin: 0; scroll-snap-align: center; width: 100%;
  height: min(76svh, 150vw); display: grid; place-items: center; container-type: size;
}
.shot { display: block; max-width: 100%; }
.shot img { display: block; width: auto; height: auto; max-width: 100cqw; max-height: 100cqh; }
.shot .ph { width: 100cqw; height: 100cqh; }
.dots { position: absolute; bottom: 12px; inset-inline: 0; display: flex; justify-content: center; gap: 6px; pointer-events: none; }
.dots span { width: 6px; height: 6px; border-radius: 50%; background: rgba(244, 240, 233, .4); box-shadow: 0 0 0 1px rgba(11, 9, 7, .25); transition: background-color .2s, transform .2s; }
.dots span.on { background: var(--on-black); transform: scale(1.25); }
.g-nav {
  display: none; position: absolute; top: 50%; translate: 0 -50%; width: 44px; height: 44px; border-radius: 50%; z-index: 2;
  border: 0; cursor: pointer; place-items: center; color: var(--on-black); background: rgba(244, 240, 233, .1);
  transition: background-color .2s;
}
.g-nav:hover { background: rgba(244, 240, 233, .2); }
.g-nav[disabled] { opacity: .3; cursor: default; }
.g-prev { inset-inline-start: 16px; }
.g-next { inset-inline-end: 16px; }
@media (hover: hover) and (pointer: fine) { .g-nav { display: grid; } }
/* Switching the jewelry: the old photo, held on top, fades away over the new one (no cut through black) */
.g-ghost { position: absolute; z-index: 1; pointer-events: none; background: var(--black); animation: fade-out .4s var(--ease) forwards; }
.g-ghost img { position: absolute; max-width: none; }

/* Detail */
.detail { padding: 28px var(--gutter) 40px; }
.look-num { margin: 0 0 6px; font-family: "Bodoni Moda", var(--body); font-size: .9375rem; color: var(--taupe); font-variant-numeric: lining-nums; }
.look-title { font-size: clamp(2.2rem, 9vw, 3rem); line-height: 1.1; text-wrap: balance; }
html[lang="ar"] .look-title:not(:lang(en)) { line-height: 1.4; }
.story { margin: 14px 0 0; color: var(--ink-2); font-size: 1.0625rem; line-height: 1.85; max-width: 34rem; text-wrap: pretty; }
/* Both stories hold their place, stacked; only the chosen jewelry's is visible, so switching never shifts the page */
.stories { display: grid; }
.stories > .story { grid-area: 1 / 1; transition: opacity .3s .1s var(--ease); }
.stories > .story.is-off { opacity: 0; pointer-events: none; transition: opacity .12s ease-in; }
.share-link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 8px; padding: 0;
  border: 0; background: none; cursor: pointer; color: var(--ink); font-size: .875rem;
}
.share-link span { text-decoration: underline; text-decoration-color: var(--linen); text-underline-offset: 4px; }

/* Choose your jewelry: each option with its own photo and piece */
.pairing-choice { margin-top: 26px; }
.pairing-heading { font-size: 1.2rem; margin-bottom: 12px; }
.pairing-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 30rem; }
.pairing-tile {
  display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: var(--radius); text-align: start;
  border: 0; cursor: pointer; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line);
  transition: background-color .25s var(--ease), box-shadow .25s var(--ease);
}
.tile-img { flex: none; display: block; width: 56px; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 2px; background: var(--black); }
.tile-img img { width: 100%; height: 100%; object-fit: cover; object-position: var(--mfocal, 50% 50%); transform: scale(var(--mzoom, 1.6)); transform-origin: var(--mfocal, 50% 50%); }
.tile-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.tile-text strong { font-weight: 500; font-size: .9375rem; }
.tile-text small { color: var(--taupe); font-size: .8125rem; overflow-wrap: anywhere; }
.pairing-tile[aria-pressed="true"] { background: var(--sand); box-shadow: inset 0 0 0 1.5px var(--ink); }
@media (min-width: 640px) { .tile-img { width: 64px; } }
/* Only what changes with the jewelry fades in; the gown half is the same either way. */
.pairing-pane.is-entering > :not(.half-gown) { animation: pane-in .45s var(--ease); }
@keyframes pane-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* The jewelry, then the gown */
.half { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line); }
.half-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.half-head h3 { font-size: 1.5rem; }
.half-mark { color: var(--ink); font-size: 20px; }
.half-house { margin-inline-start: auto; color: var(--taupe); font-size: .8125rem; }
.piece { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; padding: 12px 0; }
.piece + .piece { border-top: 1px solid var(--line); }
.piece-text { min-width: 0; flex: 1; }
.piece-name { margin: 0; font-weight: 500; font-size: 1.0625rem; }
.piece-desc { margin: 4px 0 0; color: var(--ink-2); font-size: .9375rem; }
.specs { margin: 10px 0 0; display: grid; gap: 6px; }
.specs div { display: grid; grid-template-columns: 6.5em 1fr; gap: 12px; }
.specs dt { color: var(--taupe); font-size: .8125rem; line-height: 1.6; }
.specs dd { margin: 0; color: var(--ink); font-size: .875rem; line-height: 1.6; }
.piece-price { flex: none; margin: 0; font-family: "Bodoni Moda", serif; color: var(--ink); font-size: 1.1rem; white-space: nowrap; font-variant-numeric: lining-nums; }

.price-summary { margin-top: 18px; display: grid; gap: 10px; }
.total { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); }
.total > span { display: flex; flex-direction: column; gap: 2px; white-space: nowrap; }
.total strong { font-family: "Bodoni Moda", serif; font-weight: 500; font-size: 1.35rem; color: var(--ink); text-align: end; }
.total.is-secondary { padding: 10px 18px; border-style: dashed; }
.total.is-secondary strong { font-size: 1.05rem; color: var(--taupe); }
.total.is-look { background: var(--sand); border-color: var(--sand); }
.saving { font-size: .8125rem; color: var(--taupe); }
.money { display: inline-flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: 0 .4em; }
.money-old { font-size: .78em; color: var(--taupe); text-decoration-thickness: 1px; }
.money-from { font-family: var(--body); font-size: .72em; color: var(--taupe); }
.money.is-request { font-family: var(--body); font-size: .875rem; color: var(--taupe); }
.card-price .money { justify-content: flex-start; }

/* Next look + keep browsing */
.next-look {
  display: flex; align-items: center; gap: 14px; margin-top: 36px; padding: 12px; border-radius: var(--radius); text-decoration: none;
  border: 1px solid var(--line);
}
.next-look:hover { background: var(--sand); }
.next-thumb { flex: none; width: 52px; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 2px; background: var(--black); }
.next-thumb img { width: 100%; height: 100%; object-fit: cover; }
.next-text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.next-text small { color: var(--taupe); font-size: .8125rem; }
.next-text strong { font-family: var(--display); font-weight: 400; font-size: 1.3rem; line-height: 1.35; }
.next-look svg { flex: none; }
.more { margin-top: 36px; }
.more h3 { font-size: 1.2rem; margin-bottom: 14px; }
.more-row {
  display: flex; gap: 14px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity;
  margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
}
.more-row::-webkit-scrollbar { display: none; }
.mini { flex: 0 0 min(36vw, 150px); text-decoration: none; scroll-snap-align: start; }
.mini-frame { display: block; aspect-ratio: 4 / 5; border-radius: 2px; overflow: hidden; background: var(--black); }
.mini-frame img { width: 100%; height: 100%; object-fit: cover; }
.mini-frame.is-whole img { object-fit: contain; background-color: transparent !important; }
@media (hover: hover) and (pointer: fine) {
  .more-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 14px; overflow: visible; margin-inline: 0 !important; padding-inline: 0 !important; }
  .mini { flex: none; }
}
.mini-title { display: block; margin-top: 8px; font-family: var(--display); font-size: 1rem; line-height: 1.35; }
.mini-num { font-family: "Bodoni Moda", serif; color: var(--taupe); font-size: .875rem; font-variant-numeric: lining-nums; }

/* One main action: ask about the look, then choose who answers */
.actions {
  position: relative; padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: var(--paper); border-top: 1px solid var(--line);
}
.ask-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 20px;
  border-radius: var(--radius); background: var(--ink); color: var(--paper); font-weight: 500; font-size: 1rem;
}
.ask-btn .wa-icon { width: 20px; height: 20px; }
.ask[open] .ask-btn { background: var(--black-2); }
.ask .pop-menu { inset-inline: 14px; bottom: calc(100% + 8px); transform-origin: bottom center; }

/* ---------- Toast & loading ---------- */
.sk { margin-top: 18px; }
.sk span { display: block; height: 12px; margin-bottom: 12px; border-radius: 6px; background: var(--sand); }
.sk span:nth-child(2) { width: 82%; }
.sk span:nth-child(3) { width: 64%; }
.toast {
  position: fixed; z-index: 30; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); translate: -50% 12px;
  padding: 10px 18px; border-radius: var(--radius); background: var(--ink); color: var(--paper); font-size: .9rem;
  opacity: 0; pointer-events: none; transition: opacity .2s, translate .2s;
}
.toast.on { opacity: 1; translate: -50% 0; }

/* ---------- iPad portrait: a framed box with room around it ---------- */
@media (min-width: 640px) and (max-width: 1023px) and (min-height: 600px) {
  .box {
    width: calc(100% - 56px); height: calc(100% - 56px); max-width: 760px; margin: auto; border-radius: 8px;
    box-shadow: 0 40px 90px -30px rgba(11, 9, 7, .7);
  }
  .toolbar { padding: 16px 18px 12px; }
  .slide { height: min(60vh, 110vw); }
  .detail { padding: 34px 44px 40px; --gutter: 44px; }
  .actions { padding-inline: 44px; }
  .ask .pop-menu { inset-inline: 44px; }
}

/* ---------- iPad landscape & desktop (and phones held sideways): photos | details ---------- */
/* Keep in step with SPLIT in showroom.js */
@media (min-width: 1024px), (orientation: landscape) and (min-width: 640px) and (max-height: 599px) {
  .box {
    width: min(1240px, 94vw); height: min(900px, 92vh); margin: auto; border-radius: 8px;
    box-shadow: 0 40px 90px -30px rgba(11, 9, 7, .7);
  }
  @keyframes box-open {
    from { opacity: 0; transform: translateY(22px) scale(.975); clip-path: inset(4% 4% 4% 4% round 16px); }
    10% { opacity: 1; }
    to { opacity: 1; transform: none; clip-path: inset(0 round 8px); }
  }
  .sheet { display: grid; grid-template-columns: 1.1fr 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .scroller { display: contents; }
  .gallery { grid-column: 1; grid-row: 1 / 3; height: 100%; min-height: 0; overflow: hidden; }
  .slides { height: 100%; }
  .slide { height: 100%; padding: 28px; }
  .detail { grid-column: 2; grid-row: 1; overflow-y: auto; overscroll-behavior: contain; padding: 84px 52px 40px; --gutter: 52px; }
  .look-title { font-size: 3.2rem; }
  .actions { grid-column: 2; grid-row: 2; padding: 14px 52px 22px; }
  .ask .pop-menu { inset-inline: 52px; }
  .toolbar { inset-inline-start: auto; width: calc(100% / 2.1); padding: 20px 28px 12px; }
  .tb-btn { background: var(--sand); color: var(--ink); }
  /* The framed box fades out quickly (most of the way in the first half), so it barely overlaps the page */
  .box.is-closing { animation: box-close .2s ease-out forwards; }
  .box.is-closing::backdrop { animation-duration: .2s; }
  @keyframes box-close { 55% { opacity: 0; } to { opacity: 0; transform: translateY(10px) scale(.985); } }
  /* The share toast sits in the details column, above the button, near the Share link */
  .box .toast { position: absolute; left: calc(100% - 100% / 2.1 / 2); bottom: 104px; }
  [dir="rtl"] .box .toast { left: calc(100% / 2.1 / 2); }
}
/* Phones held sideways: the split box fills the screen, with tighter spacing */
@media (orientation: landscape) and (min-width: 640px) and (max-height: 599px) {
  .box { width: 100%; height: 100%; max-height: none; border-radius: 0; margin: 0; box-shadow: none; }
  .sheet { padding-inline: env(safe-area-inset-left) env(safe-area-inset-right); }
  .slide { padding: 12px; }
  .dots { bottom: 6px; }
  .detail { padding: 68px 28px 24px; --gutter: 28px; } /* clear of the bar, so it stays see-through until scrolled */
  .look-title { font-size: 2rem; }
  .actions { padding: 8px 28px calc(8px + env(safe-area-inset-bottom)); }
  .ask-btn { min-height: 46px; }
  .ask .pop-menu { inset-inline: 28px; }
  .toolbar { padding: 8px 16px 8px; }
  .box .toast { bottom: 76px; }
}

@media (prefers-reduced-motion: reduce) {
  .pairing-pane.is-entering > * { animation: none; }
  *, *::before, *::after, ::backdrop { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
}

/* ---------- Signature motion: the card's photo opens out into the whole photograph ---------- */
.box.vt[open] { animation: none; }
/* One timeline (.5s): the photo travels from the card and its crop opens to the full frame, the box rises beneath
   it as its own layer, the page underneath only dims (root), and the details follow a beat after. */
::view-transition-group(look-photo) { z-index: 2; animation-duration: .5s; animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
/* Both snapshots start as the card's exact crop (same focal point), so they hand over in a blink with no double image;
   then only the whole photograph opens out. */
::view-transition-old(look-photo), ::view-transition-new(look-photo) { height: 100%; object-fit: cover; object-position: var(--vt-focal, 50% 50%); }
::view-transition-old(look-photo) { animation: fade-out .14s ease both; }
::view-transition-new(look-photo) { animation: fade .14s ease both; }
::view-transition-group(look-box) { animation: none; }
/* The close button rides above the travelling photo and simply arrives with the box */
::view-transition-group(look-bar) { z-index: 3; animation: none; }
::view-transition-new(look-bar) { animation: fade .25s .25s var(--ease) both; }
::view-transition-new(look-box) { animation: box-open .5s var(--ease) both; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .4s; }
.box.is-opening .detail, .box.is-opening .actions { animation: pane-in .45s .12s var(--ease) both; }
/* The dots wait until the travelling photo has landed */
.box.is-opening .dots { animation: fade .3s .38s var(--ease) both; }
.sheet .is-leaving, .sheet.is-scrolled .is-leaving { opacity: 0; transition: opacity .15s ease-in; }
.sheet .actions { transition: opacity .2s var(--ease); }
.sheet .is-arriving { animation: fade .35s var(--ease) both; }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }