/* NORTCHI · صانع النور
   Layout: an editorial gallery. Full-bleed image moments alternate with quiet cream bands of type;
   a gold thread (from the brand's tied stems) is the one recurring flourish between chapters. */
:root {
  --cream: #F5F0E8;
  --cream-2: #EEE6D9;
  --cream-3: #E3D8C6;
  --purple: #6B4F7A;
  --purple-deep: #4E3859;
  --gold: #C4A264;
  --gold-ink: #74582A;
  --ink: #1A1A1A;
  --ink-2: #4A4246;
  --line: rgba(26, 26, 26, .12);
  --line-light: rgba(245, 240, 232, .22);

  --display: "Cormorant Garamond", "Amiri", Georgia, serif;
  --body: "Jost", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --track: .28em;

  --gutter: clamp(18px, 4vw, 56px);
  --max: 1440px;
  --ease: cubic-bezier(.22, .7, .18, 1);
  --header-h: 96px;
}
:lang(ar) {
  --display: "Amiri", "Cormorant Garamond", serif;
  --body: "IBM Plex Sans Arabic", "Jost", system-ui, sans-serif;
  --track: 0;
}

@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .45s; }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
/* Photos and videos: no long-press save menu on phones, no dragging them out on computers. */
img, video, canvas { -webkit-touch-callout: none; -webkit-user-drag: none; user-select: none; -webkit-user-select: none; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--cream); color: var(--ink);
  font: 400 16px/1.75 var(--body);
  -webkit-font-smoothing: antialiased;
}
:lang(ar) body, body:lang(ar) { font-weight: 400; line-height: 1.9; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; margin: 0; line-height: 1.12; text-wrap: balance; }
:lang(ar) h1, :lang(ar) h2, :lang(ar) h3 { line-height: 1.45; }
h1 { font-size: clamp(2.4rem, 5.4vw, 4.9rem); }
h2 { font-size: clamp(1.9rem, 3.5vw, 3.1rem); }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; }
.skip { position: absolute; inset-inline-start: -999px; }
.skip:focus { inset-inline-start: 12px; top: 12px; z-index: 100; background: var(--cream); padding: 8px 14px; }

.container { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.eyebrow {
  display: inline-block; font: 500 .72rem/1.4 var(--body); letter-spacing: var(--track);
  text-transform: uppercase; color: var(--purple);
}
:lang(ar) .eyebrow { font-size: .86rem; }
.eyebrow-gold { color: var(--gold); }
.arr { display: inline-block; transition: transform .4s var(--ease); }
[dir="rtl"] .arr { transform: scaleX(-1); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 50px; padding: 0 2.1em; border: 1px solid transparent; border-radius: 0; cursor: pointer;
  font: 500 .78rem var(--body); letter-spacing: .2em; text-transform: uppercase;
  transition: background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease);
}
:lang(ar) .btn { font-size: .95rem; letter-spacing: 0; }
.btn-solid { background: var(--purple); color: var(--cream); }
.btn-solid:hover { background: var(--purple-deep); }
.btn-line { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-line:hover { background: var(--ink); color: var(--cream); }
.btn-ghost-light { border-color: rgba(245, 240, 232, .7); color: var(--cream); background: transparent; }
.btn-ghost-light:hover { background: var(--cream); color: var(--ink); }
.btn-block { width: 100%; }
.btn .wa { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.link-arrow {
  display: inline-flex; gap: .5em; align-items: center; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase;
  padding-bottom: 4px; border-bottom: 1px solid currentColor; font-weight: 500;
}
:lang(ar) .link-arrow { letter-spacing: 0; font-size: .95rem; }
.link-arrow:hover .arr { transform: translateX(4px); }
[dir="rtl"] .link-arrow:hover .arr { transform: scaleX(-1) translateX(4px); }
.link-btn { background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; font-size: .85rem; }
.round {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: transparent; cursor: pointer;
  display: grid; place-items: center; transition: border-color .3s, background .3s;
}
.round:hover { border-color: var(--ink); }

/* Announcement + header */
.announce { background: var(--purple-deep); color: var(--cream); text-align: center; padding: 9px var(--gutter); font-size: .74rem; letter-spacing: .12em; }
:lang(ar) .announce { letter-spacing: 0; font-size: .85rem; }

.site-header {
  position: sticky; top: 0; z-index: 40; transition: transform .7s var(--ease), border-color .4s; background: rgba(245, 240, 232, .92);
  backdrop-filter: saturate(1.2) blur(14px); -webkit-backdrop-filter: saturate(1.2) blur(14px);
  border-bottom: 1px solid transparent; transition: border-color .4s, box-shadow .4s;
}
.site-header.scrolled { border-bottom-color: var(--line); }
.hdr {
  max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); height: var(--header-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
}
.hdr-start, .hdr-end { display: flex; align-items: center; gap: 28px; min-width: 0; }
.hdr-end { justify-content: flex-end; gap: 18px; }
.brand { display: block; line-height: 0; }
.brand img { height: 78px; width: auto; transition: height .5s var(--ease); filter: drop-shadow(0 2px 6px rgba(140, 108, 51, .18)); }
.site-header.scrolled .brand img { height: 62px; }
.main-nav { display: flex; gap: 26px; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 400; }
:lang(ar) .main-nav { font-size: .95rem; letter-spacing: 0; }
.main-nav > a, .has-drop > a { position: relative; padding-block: 6px; }
.main-nav > a::after, .has-drop > a::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: var(--origin, left); transition: transform .5s var(--ease);
}
[dir="rtl"] .main-nav { --origin: right; }
.main-nav > a:hover::after, .has-drop:hover > a::after, .has-drop:focus-within > a::after { transform: scaleX(1); }
.has-drop { position: relative; }
.drop {
  position: absolute; top: calc(100% + 18px); inset-inline-start: -24px; min-width: 250px;
  background: var(--cream); border: 1px solid var(--line); padding: 18px 24px; display: grid; gap: 10px;
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: all .35s var(--ease);
  text-transform: none; letter-spacing: 0; font-size: .95rem;
}
.drop::before { content: ""; position: absolute; inset: -20px 0 auto; height: 20px; }
.has-drop:hover .drop, .has-drop:focus-within .drop { opacity: 1; visibility: visible; transform: none; }
.drop a:hover { color: var(--purple); }

.menu-btn { display: none; align-items: center; gap: 10px; background: none; border: 0; padding: 6px 0; cursor: pointer; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; }
:lang(ar) .menu-btn { letter-spacing: 0; font-size: .95rem; }
.burger { display: grid; gap: 6px; width: 22px; }
.burger i { display: block; height: 1px; background: currentColor; }
.burger i:last-child { width: 14px; }

.lang { position: relative; }
.lang-btn { background: none; border: 0; cursor: pointer; font-size: .8rem; letter-spacing: .1em; padding: 6px 4px; }
.lang-list {
  position: absolute; top: calc(100% + 10px); inset-inline-end: 0; list-style: none; margin: 0; padding: 10px 0;
  background: var(--cream); border: 1px solid var(--line); min-width: 140px; display: none;
}
.lang.open .lang-list { display: block; }
.lang-list a { display: block; padding: 6px 18px; font-size: .9rem; }
.lang-list a[aria-current], .menu-langs a[aria-current], .foot-langs a[aria-current] { color: var(--gold-ink); }
.site-footer .foot-langs a[aria-current] { color: var(--gold); }
.lang-list a:hover { background: var(--cream-2); }
.cart-btn { position: relative; display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; cursor: pointer; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; padding: 6px 0; }
:lang(ar) .cart-btn { letter-spacing: 0; font-size: .95rem; }
.cart-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.2; }
.cart-btn .count {
  min-width: 19px; height: 19px; border-radius: 10px; background: var(--purple); color: var(--cream);
  font-size: .68rem; display: grid; place-items: center; padding-inline: 5px; letter-spacing: 0; font-variant-numeric: tabular-nums;
}
.cart-btn.bump .count { animation: bump .5s var(--ease); }
@keyframes bump { 40% { transform: scale(1.35); } }

@media (max-width: 1080px) {
  .main-nav { display: none; }
  .menu-btn { display: inline-flex; }
}
@media (max-width: 560px) {
  :root { --header-h: 76px; }
  .brand img { height: 60px; }
  .site-header.scrolled .brand img { height: 50px; }
  .menu-btn .lbl, .cart-btn .lbl { display: none; }
}

/* Full-screen menu */
.menu { position: fixed; inset: 0; z-index: 35; background: var(--cream); overflow-y: auto; padding-top: var(--header-h); opacity: 0; transition: opacity .5s var(--ease); }
.menu.open { opacity: 1; }
.menu-inner { min-height: 100%; padding: 28px var(--gutter) 40px; display: grid; gap: 40px; align-content: start; max-width: var(--max); margin-inline: auto; }
.menu-close { justify-self: start; background: none; border: 0; cursor: pointer; font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; display: flex; gap: 10px; align-items: center; padding: 8px 0; }
:lang(ar) .menu-close { letter-spacing: 0; font-size: 1rem; }
.menu-main { display: grid; gap: 4px; }
.menu-main a { font-family: var(--display); font-size: clamp(2.2rem, 7vw, 3.6rem); line-height: 1.25; transition: color .3s, padding .5s var(--ease); }
.menu-main a:hover { color: var(--purple); padding-inline-start: 12px; }
.menu-sub { display: grid; gap: 10px; padding-top: 24px; border-top: 1px solid var(--line); }
.menu-sub a { font-size: 1.05rem; }
.menu-langs { display: flex; gap: 22px; font-size: .95rem; }

/* Hero */
.hero { position: relative; height: clamp(540px, 88svh, 940px); color: var(--cream); overflow: hidden; display: grid; place-items: end center; }
.hero-media { position: absolute; inset: 0; }
.hero-media img, .hero-media video { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); animation: heroZoom 2.8s var(--ease) forwards; }
@keyframes heroZoom { to { transform: scale(1); } }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26, 20, 28, .15) 0%, rgba(26, 20, 28, .2) 35%, rgba(26, 20, 28, .75) 100%); }
.hero-content {
  position: relative; z-index: 1; text-align: center; display: grid; gap: 18px; justify-items: center;
  max-width: 880px; padding: 0 var(--gutter) clamp(64px, 10vh, 110px);
}
.hero-content > * { animation: rise 1.2s var(--ease) both; animation-delay: var(--hd, 0s); }
.hero-content > h1 { animation: none; }
.hero-content > :nth-child(3) { --hd: .35s; }
.hero-content > :nth-child(4) { --hd: .5s; }
.hero h1 { font-weight: 400; }
:lang(ar) .hero h1 { font-weight: 400; }
.hero-sub { max-width: 46ch; color: var(--cream); font-size: 1.05rem; }
.hero-cue { position: absolute; bottom: 0; left: 50%; z-index: 1; width: 1px; height: 46px; background: linear-gradient(var(--gold), transparent); animation: cue 2.4s ease-in-out infinite; }
@keyframes cue { 0%, 100% { opacity: .2; transform: scaleY(.5); transform-origin: top; } 50% { opacity: 1; transform: scaleY(1); } }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } }

/* Intro */
.intro { text-align: center; display: grid; justify-items: center; gap: 28px; padding-block: clamp(80px, 11vw, 150px); }
.intro-rose { height: 84px; width: auto; }
.intro-text { font-family: var(--display); font-size: clamp(1.45rem, 2.6vw, 2.2rem); line-height: 1.55; max-width: 34ch; color: var(--ink); }
:lang(ar) .intro-text { line-height: 1.8; }

/* Section heads */
.sec-head { display: grid; gap: 10px; margin-bottom: clamp(30px, 4vw, 52px); }
.sec-head-row { display: flex; align-items: end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.sec-head-row > div:first-child { display: grid; gap: 10px; }
.rail-ctrl { display: flex; align-items: center; gap: 12px; }
.rail-ctrl .link-arrow { margin-inline-end: 14px; }

/* Collections */
.collections { padding-bottom: clamp(80px, 10vw, 140px); }
.coll-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: auto; gap: 14px; }
.coll { position: relative; overflow: hidden; aspect-ratio: 4 / 5; color: var(--cream); background: var(--cream-3); }
.coll-lead { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.coll img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease); }
.coll::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(26, 20, 28, .58)); }
.coll:hover img { transform: scale(1.05); }
.coll-text { position: absolute; inset-inline: 0; bottom: 0; z-index: 1; padding: clamp(18px, 2.4vw, 32px); display: grid; gap: 4px; }
.coll-name { font-family: var(--display); font-size: clamp(1.35rem, 2vw, 1.9rem); line-height: 1.2; }
.coll-lead .coll-name { font-size: clamp(1.8rem, 3.2vw, 3rem); }
.coll-tag { font-size: .9rem; color: rgba(245, 240, 232, .82); }
.coll-cta { margin-top: 10px; font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; display: inline-flex; gap: 8px; opacity: 0; transform: translateY(8px); transition: all .6s var(--ease); }
:lang(ar) .coll-cta { letter-spacing: 0; font-size: .9rem; }
.coll:hover .coll-cta, .coll:focus-visible .coll-cta { opacity: 1; transform: none; }
@media (hover: none) { .coll-cta { opacity: 1; transform: none; } }
@media (max-width: 900px) {
  .coll-grid { grid-template-columns: repeat(2, 1fr); }
  .coll-lead { grid-column: span 2; grid-row: auto; aspect-ratio: 4 / 3.4; }
}
@media (max-width: 520px) {
  .coll-grid { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 80%; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; }
  .coll-grid::-webkit-scrollbar { display: none; }
  .coll, .coll-lead { grid-column: auto; aspect-ratio: 4 / 5; scroll-snap-align: center; }
}

/* Split: bouquets / vases */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.split-panel { position: relative; overflow: hidden; aspect-ratio: 4 / 5; max-height: 92vh; width: 100%; color: var(--cream); background: var(--cream-3); }
.split-panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.8s var(--ease); }
.split-panel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(26, 20, 28, .55)); }
.split-panel:hover img { transform: scale(1.04); }
.split-text { position: absolute; inset-inline: 0; bottom: 0; z-index: 1; display: grid; justify-items: center; text-align: center; gap: 10px; padding: clamp(28px, 5vw, 64px); }
.split-name { font-family: var(--display); font-size: clamp(2.4rem, 5vw, 4.4rem); line-height: 1.1; font-weight: 300; }
:lang(ar) .split-name { font-weight: 400; }
.split-tag { color: rgba(245, 240, 232, .85); margin-bottom: 12px; }
@media (max-width: 700px) { .split { grid-template-columns: 1fr; } .split-panel { aspect-ratio: 4 / 4.6; } }

/* Product rail + cards */
.rail-sec { padding-block: clamp(80px, 10vw, 140px) 0; }
.rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(230px, 24vw, 340px); gap: 18px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  padding-inline: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter))); padding-bottom: 8px; scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }

.card { position: relative; display: grid; gap: 14px; align-content: start; }
.card-media { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--cream-2); }
.card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .8s var(--ease), transform 1.4s var(--ease); }
.card-media .alt { opacity: 0; }
.card:hover .card-media .alt { opacity: 1; }
.card:hover .card-media img:first-child { transform: scale(1.03); }
.badge {
  position: absolute; top: 14px; inset-inline-start: 14px; z-index: 1; display: inline-flex; align-items: center; gap: 7px;
  background: rgba(245, 240, 232, .9); padding: 5px 11px; font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--purple-deep); font-weight: 500;
}
:lang(ar) .badge { letter-spacing: 0; font-size: .78rem; }
.seal { width: 9px; height: 9px; border-radius: 47% 53% 50% 46%; background: var(--purple); box-shadow: 0 0 0 2px rgba(196, 162, 100, .55); }
.quick-add {
  position: absolute; top: 0; inset-inline: 0; aspect-ratio: 4 / 5; display: flex; align-items: flex-end; justify-content: stretch;
  background: none; border: 0; padding: 0; pointer-events: none; cursor: pointer;
}
.quick-add .txt, .quick-add .plus { pointer-events: auto; }
.quick-add .txt {
  flex: 1; margin: 12px; padding: 13px; background: rgba(245, 240, 232, .94); color: var(--ink);
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 500;
  opacity: 0; transform: translateY(10px); transition: all .5s var(--ease);
}
:lang(ar) .quick-add .txt { letter-spacing: 0; font-size: .9rem; }
.quick-add .txt:hover { background: var(--purple); color: var(--cream); }
.card:hover .quick-add .txt, .quick-add:focus-visible .txt { opacity: 1; transform: none; }
.quick-add .plus { display: none; }
@media (hover: none) {
  .quick-add { justify-content: flex-end; }
  .quick-add .txt { display: none; }
  .quick-add .plus {
    display: grid; place-items: center; width: 40px; height: 40px; margin: 10px; border-radius: 50%;
    background: rgba(245, 240, 232, .94); font-size: 1.3rem; font-weight: 300;
  }
}
.card-info { display: grid; gap: 3px; }
.card-col { font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-ink); }
:lang(ar) .card-col { letter-spacing: 0; font-size: .8rem; }
.card-name { font-size: 1.28rem; line-height: 1.3; }
:lang(ar) .card-name { font-size: 1.25rem; line-height: 1.6; }
.card-name a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .5s var(--ease); }
[dir="rtl"] .card-name a { background-position: 100% 100%; }
.card:hover .card-name a { background-size: 100% 1px; }
.card-price { font-size: .92rem; color: var(--ink-2); display: flex; gap: 10px; font-variant-numeric: tabular-nums; }
.card-price s, .pdp-price s { color: rgba(74, 66, 70, .55); }

/* Gold thread divider */
.thread { position: relative; display: grid; place-items: center; padding-block: clamp(70px, 9vw, 120px) 0; max-width: 680px; margin-inline: auto; padding-inline: var(--gutter); }
.thread svg { width: 100%; height: 40px; overflow: visible; }
.thread path { fill: none; stroke: var(--gold); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 0; vector-effect: non-scaling-stroke; }
.js .thread path { stroke-dashoffset: 1; transition: stroke-dashoffset 2.4s var(--ease); }
.js .thread.in path { stroke-dashoffset: 0; }
.thread img { position: absolute; bottom: -8px; height: 58px; width: auto; background: var(--cream); padding-inline: 16px; box-sizing: content-box; }

/* Stories */
.stories { padding-top: clamp(70px, 9vw, 120px); }
.story-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(170px, 18vw, 240px); gap: 16px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 6px;
}
.story-track::-webkit-scrollbar { display: none; }
.story-card {
  position: relative; aspect-ratio: 9 / 16; overflow: hidden; border: 0; padding: 0; cursor: pointer; background: var(--ink);
  scroll-snap-align: start; color: var(--cream); text-align: start;
}
.story-card video { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), opacity .6s; opacity: .92; }
.story-card:hover video { transform: scale(1.04); opacity: 1; }
.story-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(26, 20, 28, .65)); pointer-events: none; }
.story-card::before { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(196, 162, 100, 0); z-index: 1; transition: border-color .5s; pointer-events: none; }
.story-card:hover::before { border-color: rgba(196, 162, 100, .8); }
.story-play { position: absolute; top: 14px; inset-inline-end: 14px; z-index: 2; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(245, 240, 232, .8); }
.story-play::after { content: ""; position: absolute; left: 11px; top: 9px; border-left: 9px solid var(--cream); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.story-title { position: absolute; inset-inline: 14px; bottom: 14px; z-index: 2; font-family: var(--display); font-size: 1.15rem; line-height: 1.3; }

.viewer { position: fixed; inset: 0; z-index: 80; background: #110d12; display: grid; place-items: center; }
.viewer video { max-height: 100%; max-width: 100%; height: 100%; aspect-ratio: 9 / 16; object-fit: cover; }
.viewer-bars { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: min(420px, calc(100% - 32px)); display: flex; gap: 4px; z-index: 2; }
.viewer-bars span { flex: 1; height: 2px; background: rgba(245, 240, 232, .3); overflow: hidden; }
.viewer-bars span i { display: block; height: 100%; width: 0; background: var(--cream); }
.viewer-bars span.done i { width: 100%; }
.viewer-close { position: absolute; top: 28px; inset-inline-end: 20px; z-index: 3; background: none; border: 0; color: var(--cream); font-size: 1.4rem; cursor: pointer; padding: 8px; }
.viewer-title { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); width: min(420px, calc(100% - 32px)); color: var(--cream); font-family: var(--display); font-size: 1.4rem; z-index: 2; text-align: center; }
.viewer-nav { position: absolute; top: 0; bottom: 0; width: 35%; background: none; border: 0; cursor: pointer; z-index: 1; }
.viewer-nav.prev { inset-inline-start: 0; }
.viewer-nav.next { inset-inline-end: 0; }

/* Grids */
.grid { display: grid; gap: clamp(28px, 3vw, 44px) clamp(14px, 1.6vw, 22px); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) { .grid-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .grid-4, .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .card-name { font-size: 1.08rem; } }
.new-sec { padding-top: clamp(80px, 10vw, 140px); padding-bottom: clamp(90px, 11vw, 160px); }

/* Coffee */
.coffee { background: var(--ink); color: var(--cream); padding-block: clamp(80px, 10vw, 140px); }
.coffee-inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 7vw, 110px); align-items: center; }
.coffee-media { aspect-ratio: 4 / 5; overflow: hidden; border-radius: 999px 999px 0 0; background: #2a2427; }
.coffee-media img { width: 100%; height: 100%; object-fit: cover; }
.coffee-text { display: grid; gap: 22px; justify-items: start; min-width: 0; }
.coffee-body { color: rgba(245, 240, 232, .78); max-width: 46ch; }
.coffee-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; width: 100%; border-top: 1px solid var(--line-light); }
.coffee-item { display: flex; gap: 14px; align-items: center; padding-block: 16px; border-bottom: 1px solid var(--line-light); min-width: 0; }
.coffee-item img { width: 58px; height: 72px; object-fit: cover; flex: none; }
.coffee-item > span { display: grid; min-width: 0; }
.ci-name { font-family: var(--display); font-size: 1.1rem; line-height: 1.35; transition: color .3s; }
.ci-price { font-size: .85rem; color: var(--gold); font-variant-numeric: tabular-nums; }
.coffee-item:hover .ci-name { color: var(--gold); }
@media (max-width: 860px) { .coffee-inner { grid-template-columns: 1fr; } .coffee-media { max-width: 460px; width: 100%; justify-self: center; } }
@media (max-width: 480px) { .coffee-list { grid-template-columns: 1fr; } }

/* Story teaser */
.teaser { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(36px, 7vw, 120px); align-items: center; padding-block: clamp(90px, 11vw, 160px); }
.teaser-media { aspect-ratio: 4 / 5; overflow: hidden; border-radius: 999px 999px 0 0; background: var(--cream-2); }
.teaser-media img { width: 100%; height: 100%; object-fit: cover; }
.teaser-text { display: grid; gap: 24px; justify-items: start; min-width: 0; }
.teaser blockquote { margin: 0; font-family: var(--display); font-size: clamp(1.9rem, 3.6vw, 3.1rem); line-height: 1.25; color: var(--purple); }
:lang(ar) .teaser blockquote { line-height: 1.6; }
.teaser-text p { max-width: 48ch; color: var(--ink-2); }
@media (max-width: 860px) { .teaser { grid-template-columns: 1fr; } .teaser-media { max-width: 440px; width: 100%; } }

/* Page heads + shop */
.page-head { text-align: center; display: grid; gap: 14px; justify-items: center; padding-block: clamp(56px, 8vw, 110px) clamp(30px, 4vw, 50px); }
.page-lead { color: var(--ink-2); max-width: 50ch; font-size: 1.05rem; }
.shop-bar { display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; padding-bottom: 26px; border-bottom: 1px solid var(--line); margin-bottom: 40px; }
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; min-width: 0; flex: 1 1 520px; padding-block: 4px; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; padding: 8px 18px; border: 1px solid var(--line); font-size: .85rem; transition: all .35s var(--ease); white-space: nowrap; }
.chip:hover { border-color: var(--ink); }
.chip[aria-current] { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.chip-sep { flex: none; width: 1px; background: var(--line); margin-inline: 6px; }
.sort { display: flex; align-items: center; gap: 12px; font-size: .88rem; }
.sort .count { color: var(--ink-2); margin-inline-end: 12px; }
.sort select { border: 0; border-bottom: 1px solid var(--ink); background: transparent; padding: 6px 4px; cursor: pointer; }
.shop-grid { padding-bottom: clamp(90px, 11vw, 160px); }
.empty-state { display: grid; justify-items: center; gap: 20px; text-align: center; padding-block: 80px; color: var(--ink-2); }
.notfound { padding-block: 140px; }
.notfound h1 { font-size: clamp(2rem, 4vw, 3rem); color: var(--ink); }

/* Product page */
.crumbs { display: flex; gap: 10px; flex-wrap: wrap; font-size: .8rem; color: var(--ink-2); padding-block: 22px; }
.crumbs a:hover { color: var(--ink); }
.pdp { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(30px, 5vw, 80px); padding-bottom: 40px; }
.pdp-gallery { position: relative; min-width: 0; }
.pdp-track { display: grid; gap: 6px; }
.pdp-shot { margin: 0; aspect-ratio: 4 / 5; background: var(--cream-2); overflow: hidden; }
.pdp-shot img { width: 100%; height: 100%; object-fit: cover; }
.pdp-count { display: none; }
.pdp-info { min-width: 0; }
.pdp-sticky { position: sticky; top: calc(var(--header-h) + 30px); display: grid; gap: 20px; padding-bottom: 30px; }
.pdp h1 { font-size: clamp(2rem, 3.4vw, 3rem); }
.pdp-price { font-size: 1.15rem; display: flex; gap: 14px; font-variant-numeric: tabular-nums; }
.pdp-desc { color: var(--ink-2); max-width: 52ch; }
.pdp-form { display: grid; gap: 14px; padding-top: 10px; }
.field { display: grid; gap: 8px; font-size: .85rem; }
.field textarea, .cart-fields input, .cart-fields textarea {
  width: 100%; border: 1px solid var(--line); background: rgba(255, 252, 247, .5); padding: 12px 14px; resize: vertical;
  font-size: .95rem; border-radius: 0; transition: border-color .3s;
}
.field textarea:focus, .cart-fields input:focus, .cart-fields textarea:focus { outline: none; border-color: var(--purple); }
.pdp-actions { display: flex; gap: 12px; }
.grow { flex: 1; }
.stepper { display: flex; align-items: center; border: 1px solid var(--line); }
.stepper button { width: 42px; height: 48px; background: none; border: 0; cursor: pointer; font-size: 1.1rem; }
.stepper input { width: 40px; text-align: center; border: 0; background: transparent; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; }
.accordion { border-top: 1px solid var(--line); margin-top: 6px; }
.accordion details { border-bottom: 1px solid var(--line); }
.accordion summary { list-style: none; cursor: pointer; padding: 18px 0; display: flex; justify-content: space-between; font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 500; }
:lang(ar) .accordion summary { letter-spacing: 0; font-size: .98rem; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: "+"; font-weight: 300; font-size: 1.1rem; transition: transform .4s var(--ease); }
.accordion details[open] summary::after { transform: rotate(45deg); }
.accordion p { padding-bottom: 20px; color: var(--ink-2); font-size: .95rem; }
@media (max-width: 860px) {
  .pdp { grid-template-columns: 1fr; }
  .pdp-gallery { margin-inline: calc(var(--gutter) * -1); }
  .pdp-track { grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 0; }
  .pdp-track::-webkit-scrollbar { display: none; }
  .pdp-shot { scroll-snap-align: start; }
  .pdp-count { display: block; position: absolute; bottom: 14px; inset-inline-end: 18px; background: rgba(245, 240, 232, .9); padding: 3px 10px; font-size: .78rem; font-variant-numeric: tabular-nums; }
  .pdp-sticky { position: static; }
}

/* Story page */
.story-hero { position: relative; height: clamp(420px, 70svh, 760px); color: var(--cream); display: grid; place-items: end center; overflow: hidden; }
.story-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.story-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(26, 20, 28, .6)); }
.story-hero-text { position: relative; z-index: 1; text-align: center; display: grid; gap: 14px; padding: 0 var(--gutter) 70px; }
.story-body { max-width: 780px; padding-block: clamp(70px, 9vw, 120px); display: grid; gap: 26px; }
.story-body > p { font-size: 1.12rem; color: var(--ink-2); }
.story-lead { font-family: var(--display); font-size: clamp(1.6rem, 2.8vw, 2.3rem) !important; line-height: 1.5; color: var(--ink) !important; text-align: center; }
.story-body .thread { padding-block: 0 20px; }
.story-quote { margin: 30px 0 0; text-align: center; font-family: var(--display); font-size: clamp(1.8rem, 3.4vw, 2.8rem); color: var(--purple); line-height: 1.4; }
.story-cta { display: flex; justify-content: center; padding-top: 20px; }

/* Policies */
.policies { display: grid; grid-template-columns: 260px 1fr; gap: clamp(30px, 6vw, 90px); padding-bottom: clamp(90px, 11vw, 160px); }
.policy-toc { position: sticky; top: calc(var(--header-h) + 30px); align-self: start; display: grid; gap: 12px; font-size: .95rem; }
.policy-toc a:hover { color: var(--purple); }
.policy-list { display: grid; gap: 50px; max-width: 70ch; }
.policy { display: grid; gap: 14px; scroll-margin-top: calc(var(--header-h) + 30px); }
.policy h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.policy p { color: var(--ink-2); }
@media (max-width: 760px) { .policies { grid-template-columns: 1fr; } .policy-toc { position: static; display: flex; flex-wrap: wrap; gap: 8px 18px; } }

/* Footer */
.site-footer { background: var(--ink); color: rgba(245, 240, 232, .8); padding-block: clamp(70px, 8vw, 110px) 30px; }
.foot-brand { display: grid; justify-items: center; gap: 8px; text-align: center; padding-bottom: 56px; border-bottom: 1px solid var(--line-light); }
.foot-mono { height: 92px; width: auto; margin-bottom: 14px; }
.wordmark { font-family: "Cormorant Garamond", serif; font-weight: 300; font-size: clamp(2.8rem, 9vw, 7rem); letter-spacing: .32em; line-height: 1; color: var(--cream); margin-inline-start: .32em; }
.foot-tag { color: var(--gold); font-family: var(--display); font-size: 1.15rem; }
.foot-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; padding-block: 50px; }
.foot-cols > div { display: grid; gap: 10px; align-content: start; font-size: .92rem; min-width: 0; }
.foot-cols .eyebrow { color: var(--gold); margin-bottom: 8px; }
.foot-cols a:hover { color: var(--cream); }
.socials { display: flex; gap: 16px; flex-wrap: wrap; }
.foot-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px; padding-top: 24px; border-top: 1px solid var(--line-light); font-size: .8rem; }
.foot-langs { display: flex; gap: 18px; }
@media (max-width: 800px) { .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Cart drawer */
.drawer-backdrop { position: fixed; inset: 0; z-index: 70; background: rgba(26, 20, 28, .35); opacity: 0; transition: opacity .45s; }
.drawer-backdrop.show { opacity: 1; }
.drawer {
  position: fixed; top: 0; bottom: 0; inset-inline-end: 0; z-index: 71; width: min(450px, 100%);
  background: var(--cream); display: grid; grid-template-rows: auto 1fr auto;
  transform: translateX(100%); transition: transform .6s var(--ease); visibility: hidden;
}
[dir="rtl"] .drawer { transform: translateX(-100%); }
.drawer.open { transform: none; visibility: visible; }
.drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 24px 28px; border-bottom: 1px solid var(--line); }
.drawer-head h2 { font-size: 1.6rem; }
.drawer-close { background: none; border: 0; cursor: pointer; font-size: 1.1rem; padding: 6px; }
.drawer-body { overflow-y: auto; padding: 8px 28px 20px; }
.cart-empty { display: grid; justify-items: center; text-align: center; gap: 12px; padding-block: 70px; color: var(--ink-2); }
.cart-empty-title { font-family: var(--display); font-size: 1.6rem; color: var(--ink); }
.cart-empty .btn { margin-top: 10px; }
.cart-lines { list-style: none; margin: 0; padding: 0; }
.cart-line { display: grid; grid-template-columns: 84px 1fr; gap: 16px; padding-block: 20px; border-bottom: 1px solid var(--line); }
.cart-line img { width: 84px; height: 105px; object-fit: cover; background: var(--cream-2); }
.cart-line-info { display: grid; gap: 6px; align-content: start; min-width: 0; }
.cart-line-top { display: flex; justify-content: space-between; gap: 10px; }
.cart-line-name { font-family: var(--display); font-size: 1.15rem; line-height: 1.35; }
.cart-line-price { font-variant-numeric: tabular-nums; font-size: .92rem; white-space: nowrap; }
.cart-line-note { font-size: .82rem; color: var(--ink-2); overflow-wrap: anywhere; }
.cart-line-ctrl { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; }
.cart-line .stepper button { width: 32px; height: 34px; }
.cart-line .stepper span { min-width: 26px; text-align: center; font-variant-numeric: tabular-nums; font-size: .9rem; }
.cart-details { margin-top: 18px; }
.cart-details summary { cursor: pointer; padding: 14px 0; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; }
:lang(ar) .cart-details summary { letter-spacing: 0; font-size: .98rem; }
.cart-details small { color: var(--ink-2); text-transform: none; letter-spacing: 0; font-weight: 300; }
.cart-fields { display: grid; gap: 12px; padding-bottom: 8px; }
.cart-fields label { display: grid; gap: 6px; font-size: .82rem; }
.drawer-foot { padding: 20px 28px 26px; border-top: 1px solid var(--line); display: grid; gap: 14px; background: var(--cream); }
.subtotal { display: flex; justify-content: space-between; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.subtotal b { font-weight: 500; }
.drawer-note { font-size: .8rem; color: var(--ink-2); text-align: center; }
.link-btn[data-cart-clear] { justify-self: center; }
.drawer.is-empty .drawer-foot, .drawer.is-empty .cart-details { display: none; }

.toast {
  position: fixed; bottom: 26px; left: 50%; z-index: 90; transform: translate(-50%, 30px); opacity: 0;
  background: var(--ink); color: var(--cream); padding: 12px 22px; font-size: .88rem; transition: all .5s var(--ease); pointer-events: none;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Scroll reveal: content is visible without JS; with JS it rises in once. */
.js .reveal { opacity: 0; transform: translateY(34px); filter: blur(6px); transition: opacity 1.2s var(--ease), transform 1.2s var(--ease), filter 1.2s var(--ease); transition-delay: var(--d, 0ms); }
.js .reveal.in { opacity: 1; transform: none; filter: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   Luxury layer: depth, motion and texture
   ========================================================================== */

/* Smooth scrolling (Lenis, desktop only) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* Header hides on scroll down and returns on scroll up */
.site-header { transition: transform .7s var(--ease), border-color .4s; }
.site-header.away { transform: translateY(-100%); }

/* Opening curtain, once per visit */
.curtain { display: none; }
.first-visit .curtain {
  display: grid; place-items: center; position: fixed; inset: 0; z-index: 100; background: var(--cream);
  animation: curtainUp 1.1s var(--ease) 1.95s forwards;
}
.curtain-inner { display: grid; justify-items: center; gap: 16px; animation: curtainFade .7s var(--ease) 1.7s forwards; }
.curtain img { height: 120px; width: auto; opacity: 0; transform: translateY(16px) scale(.9); animation: inPlace 1.2s var(--ease) .1s forwards; }
.curtain-word {
  font-family: "Cormorant Garamond", serif; font-weight: 300; font-size: clamp(2rem, 6vw, 3.4rem); line-height: 1;
  color: var(--purple); letter-spacing: 1em; margin-inline-start: 1em; opacity: 0; animation: wordIn 1.7s var(--ease) .25s forwards;
}
.curtain-line { width: 170px; height: 1px; background: var(--gold); transform: scaleX(0); animation: inPlace 1.2s var(--ease) .65s forwards; }
.curtain-tag { font-family: var(--display); color: var(--gold-ink); font-size: 1.1rem; opacity: 0; animation: inPlace .9s ease 1s forwards; }
@keyframes curtainUp { to { transform: translateY(-100%); visibility: hidden; } }
@keyframes curtainFade { to { opacity: 0; transform: translateY(-24px); } }
@keyframes inPlace { to { opacity: 1; transform: none; } }
@keyframes wordIn { to { opacity: 1; letter-spacing: .42em; margin-inline-start: .42em; } }
.first-visit .hero-content > * { animation-delay: calc(var(--hd, 0s) + 2.15s); }
.first-visit .hero-media img, .first-visit .hero-media video { animation-delay: 1.9s; }

/* Headings rise word by word from behind a mask (letters for the wordmark) */
.js [data-split] .w { display: inline-block; overflow: hidden; vertical-align: top; padding-block: .1em .18em; margin-block: -.1em -.18em; }
.js :lang(ar) [data-split] .w, .js [data-split]:lang(ar) .w { padding-block: .25em .4em; margin-block: -.25em -.4em; }
.js [data-split] .wi {
  display: inline-block; transform: translateY(112%) rotate(3deg); transform-origin: 0 100%;
  transition: transform 1.35s var(--ease); transition-delay: calc(var(--i) * 60ms + var(--d, 0ms));
}
.js [data-split].in .wi { transform: none; }

/* Cards and tiles lift into place in 3D */
.js .rise { opacity: 0; transform-origin: 50% 100%; transition: opacity 1.3s var(--ease), transform 1.5s var(--ease); transition-delay: var(--d, 0ms); }
.js .rise:not(.in) { transform: perspective(1400px) translateY(80px) rotateX(14deg); }
.js .rise.in { opacity: 1; }
.js .rise.in:not([data-tilt]) { transform: none; }

/* Pointer tilt with a moving gold glare (desktop) */
[data-tilt] { transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); will-change: transform; }
[data-tilt].tilting { transition: none !important; }
.glare {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .7s var(--ease);
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 236, 200, .42), rgba(196, 162, 100, .08) 32%, transparent 58%);
  mix-blend-mode: soft-light;
}
[data-tilt]:hover .glare { opacity: 1; }
.card-media { transition: box-shadow 1s var(--ease); }
.card:hover .card-media { box-shadow: 0 46px 70px -42px rgba(78, 56, 89, .55); }
.coll { transition: box-shadow 1s var(--ease); }
.coll:hover { box-shadow: 0 50px 80px -46px rgba(26, 20, 28, .6); }

/* Image frames: clip-path curtain that opens on scroll */
.frame { position: absolute; inset: 0; display: block; overflow: hidden; }
.coffee-media, .teaser-media { position: relative; }
.js .curtain-reveal .frame { clip-path: inset(100% 0 0 0); transition: clip-path 1.7s var(--ease); }
.js .curtain-reveal .frame img { transform: scale(1.28); transition: transform 2.4s var(--ease); }
.js .curtain-reveal.in .frame { clip-path: inset(0 0 0 0); }
.js .curtain-reveal.in .frame img { transform: none; }
.split-panel:hover .frame img { transform: scale(1.04) !important; transition-duration: 1.8s; }

/* Depth on scroll where the browser supports scroll-driven animations */
@supports (animation-timeline: view()) {
  .hero-media { animation: heroDrift linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
  @keyframes heroDrift { to { transform: translateY(24%) scale(1.06); } }
  .hero-content { animation: heroLift linear both; animation-timeline: scroll(root); animation-range: 0 75vh; }
  @keyframes heroLift { to { transform: translateY(-80px); opacity: 0; } }
  .coll .frame img, .story-hero .frame img { animation: drift linear both; animation-timeline: view(); }
  @keyframes drift { from { transform: translateY(-7%) scale(1.16); } to { transform: translateY(7%) scale(1.16); } }
  .story-track.scrolls .story-card { animation: flow linear both; animation-timeline: view(inline); }
  @keyframes flow {
    0% { transform: perspective(900px) rotateY(20deg) scale(.92); opacity: .7; }
    40%, 60% { transform: none; opacity: 1; }
    100% { transform: perspective(900px) rotateY(-20deg) scale(.92); opacity: .7; }
  }
  .thread img { animation: spinIn linear both; animation-timeline: view(); animation-range: entry 0% cover 50%; }
  @keyframes spinIn { from { transform: rotate(-35deg) scale(.6); opacity: 0; } }
}

/* 3D hero scene layer */
.hero-3d { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity 2.4s var(--ease); }
.hero-3d.ready { opacity: 1; }
.first-visit .hero-3d.ready { transition-delay: 1.9s; }
.hero-3d canvas { width: 100%; height: 100%; display: block; }
.hero::after { z-index: 1; }
.hero-content { z-index: 2; }
.hero-content h1 { text-shadow: 0 2px 30px rgba(26, 20, 28, .35); }
.hero-eyebrow { font-size: .8rem; text-shadow: 0 1px 14px rgba(26, 20, 28, .6); }
:lang(ar) .hero-eyebrow { font-size: 1.05rem; }
.hero-sub { text-shadow: 0 1px 16px rgba(26, 20, 28, .55); }

/* Menu: the burger turns into a cross, links rise one by one */
.burger { position: relative; display: block; width: 24px; height: 12px; }
.burger i { position: absolute; inset-inline-start: 0; top: 2px; width: 100%; height: 1px; background: currentColor; transition: transform .6s var(--ease), top .6s var(--ease), width .6s var(--ease); }
.burger i:last-child { top: 10px; width: 15px; }
.menu-open .burger i:first-child { top: 6px; transform: rotate(45deg); }
.menu-open .burger i:last-child { top: 6px; width: 100%; transform: rotate(-45deg); }
.lbl-close { display: none; }
.menu-open .lbl-open { display: none; }
.menu-open .lbl-close { display: inline; }
.menu-open .site-header { transform: none; border-bottom-color: var(--line); }
.menu-main a { display: block; overflow: hidden; padding-block: .05em .15em; }
.menu-main a span { display: inline-block; transform: translateY(115%); transition: transform 1.1s var(--ease); transition-delay: calc(var(--i) * 70ms + .1s); }
.menu.open .menu-main a span { transform: none; }
.menu-sub, .menu-langs { opacity: 0; transform: translateY(14px); transition: opacity .9s var(--ease) .45s, transform .9s var(--ease) .45s; }
.menu.open .menu-sub, .menu.open .menu-langs { opacity: 1; transform: none; }

/* Magnetic buttons */
.btn { transition: background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease), transform .6s var(--ease); }
.btn:active { transform: scale(.97); }

/* Product image zoom (desktop) */
.pdp-shot img { transition: transform .7s var(--ease); }
.pdp-shot.zooming { cursor: zoom-in; }
.pdp-shot.zooming img { transform: scale(1.9); }

/* Custom cursor (fine pointers only) */
.cursor { display: none; }
.has-cursor .cursor { display: block; position: fixed; top: 0; left: 0; z-index: 97; pointer-events: none; }
.has-cursor, .has-cursor a, .has-cursor button, .has-cursor label, .has-cursor summary { cursor: none; }
.cursor-dot, .cursor-ring { position: absolute; top: 0; left: 0; border-radius: 50%; will-change: transform; }
.cursor-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--gold); transition: opacity .3s; }
.cursor-ring {
  width: 38px; height: 38px; margin: -19px 0 0 -19px; border: 1px solid rgba(196, 162, 100, .75); display: grid; place-items: center;
  transition: width .55s var(--ease), height .55s var(--ease), margin .55s var(--ease), background .55s var(--ease), border-color .55s, opacity .3s;
}
.cursor.is-link .cursor-ring { width: 60px; height: 60px; margin: -30px 0 0 -30px; border-color: var(--gold); }
.cursor.is-label .cursor-ring { width: 100px; height: 100px; margin: -50px 0 0 -50px; background: rgba(245, 240, 232, .94); border-color: transparent; }
.cursor-label { font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; color: var(--purple-deep); opacity: 0; transition: opacity .3s; white-space: nowrap; font-weight: 500; }
:lang(ar) .cursor-label { letter-spacing: 0; font-size: .9rem; }
.cursor.is-label .cursor-label { opacity: 1; }
.cursor.is-label .cursor-dot, .cursor.away .cursor-dot, .cursor.away .cursor-ring { opacity: 0; }

/* Paper grain over everything */
.grain {
  position: fixed; inset: 0; z-index: 96; pointer-events: none; opacity: .055; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .25 0 0 0 0 .3 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Footer */
.foot-about { max-width: 52ch; color: rgba(245, 240, 232, .62); margin-top: 6px; font-size: .95rem; }

/* Touch: pressed feedback instead of hover effects */
@media (hover: none) {
  .card-media:active, .coll:active, .split-panel:active { transform: scale(.985); transition: transform .3s var(--ease); }
}

@media (prefers-reduced-motion: reduce) {
  .js [data-split] .wi, .js .rise, .js .curtain-reveal .frame, .js .curtain-reveal .frame img { transform: none !important; opacity: 1 !important; clip-path: none !important; }
  .hero-media, .hero-content, .coll .frame img, .story-card, .thread img { animation: none !important; }
}

/* ==========================================================================
   Explore Our Collections · five cards
   ========================================================================== */
.explore { padding-bottom: clamp(90px, 11vw, 150px); }
.explore-head { display: grid; justify-items: center; text-align: center; gap: 14px; max-width: 640px; margin: 0 auto clamp(40px, 5vw, 64px); }
.explore-desc { color: var(--ink-2); font-size: 1.05rem; max-width: 46ch; }
.explore-grid { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 22px); }
.ex-card { display: grid; gap: 18px; align-content: start; min-width: 0; }
.ex-media {
  position: relative; display: block; aspect-ratio: 3 / 4.1; overflow: hidden; background: var(--cream-2);
  transition: box-shadow 1s var(--ease);
}
.ex-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease); }
.ex-card:hover .ex-media > img { transform: scale(1.045); }
.ex-card:hover .ex-media { box-shadow: 0 46px 70px -44px rgba(78, 56, 89, .55); }
.ex-media::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(245, 240, 232, 0); transition: border-color .8s var(--ease); pointer-events: none; }
.ex-card:hover .ex-media::after { border-color: rgba(245, 240, 232, .55); }
.ex-mark { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(180deg, var(--cream-2), var(--cream-3)); }
.ex-mark img { height: 34%; width: auto; opacity: .85; }
.ex-body { display: grid; gap: 6px; justify-items: start; }
.ex-title { font-family: var(--display); font-size: clamp(1.25rem, 1.6vw, 1.55rem); line-height: 1.3; }
:lang(ar) .ex-title { line-height: 1.6; }
.ex-short { color: var(--ink-2); font-size: .92rem; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ex-link {
  margin-top: 6px; display: inline-flex; gap: 8px; align-items: center; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 500;
  padding-bottom: 3px; background: linear-gradient(var(--gold), var(--gold)) 0 100% / 0 1px no-repeat; transition: background-size .6s var(--ease);
}
[dir="rtl"] .ex-link { background-position: 100% 100%; }
:lang(ar) .ex-link { letter-spacing: 0; font-size: .92rem; }
.ex-card:hover .ex-link { background-size: 100% 1px; }
.ex-card:hover .ex-link .arr { transform: translateX(4px); }
[dir="rtl"] .ex-card:hover .ex-link .arr { transform: scaleX(-1) translateX(4px); }
@media (max-width: 1100px) {
  .explore-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(240px, 30%); overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); padding-bottom: 6px; scrollbar-width: none; }
  .explore-grid::-webkit-scrollbar { display: none; }
  .ex-card { scroll-snap-align: start; }
}
@media (max-width: 600px) { .explore-grid { grid-auto-columns: 76%; } }

/* ==========================================================================
   Coffee: a darker, richer room
   ========================================================================== */
.coffee { position: relative; overflow: hidden; padding-block: clamp(90px, 11vw, 160px) clamp(70px, 8vw, 120px); background: radial-gradient(ellipse 70% 60% at 22% 30%, rgba(196, 162, 100, .13), transparent 70%), radial-gradient(ellipse 60% 50% at 85% 90%, rgba(107, 79, 122, .22), transparent 70%), #151213; }
[dir="rtl"] .coffee { background: radial-gradient(ellipse 70% 60% at 78% 30%, rgba(196, 162, 100, .13), transparent 70%), radial-gradient(ellipse 60% 50% at 15% 90%, rgba(107, 79, 122, .22), transparent 70%), #151213; }
.coffee-inner { grid-template-columns: 5fr 6fr; gap: clamp(40px, 8vw, 130px); }
.coffee-visual { position: relative; padding: 18px 18px 0 0; }
[dir="rtl"] .coffee-visual { padding: 18px 0 0 18px; }
.coffee-arch-line { position: absolute; inset: 0 0 auto 18px; aspect-ratio: 4 / 5; border: 1px solid rgba(196, 162, 100, .55); border-radius: 999px 999px 0 0; }
[dir="rtl"] .coffee-arch-line { inset: 0 18px auto 0; }
.coffee-media { position: relative; z-index: 1; box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .8); }
.coffee-seal {
  position: absolute; z-index: 2; width: clamp(110px, 11vw, 150px); bottom: -34px; inset-inline-end: -26px;
  animation: sealTurn 40s linear infinite; overflow: visible;
}
.coffee-seal text { fill: var(--gold); font: 500 14.5px "Jost", sans-serif; letter-spacing: 3.4px; }
@keyframes sealTurn { to { transform: rotate(360deg); } }
.coffee-text { gap: 24px; }
.coffee-text h2 { font-size: clamp(2.3rem, 4.6vw, 4rem); font-weight: 300; }
:lang(ar) .coffee-text h2 { font-weight: 400; }
.coffee-rule { width: 64px; height: 1px; background: var(--gold); }
.coffee-body { font-size: 1.08rem; line-height: 1.9; }
.coffee-actions { display: flex; flex-wrap: wrap; gap: 18px 26px; align-items: center; }
.btn-gold { background: var(--gold); color: #151213; }
.btn-gold:hover { background: #d4b479; }
.round-light { border-color: var(--line-light); color: var(--cream); }
.round-light:hover { border-color: var(--gold); }
.coffee-rail { margin-top: clamp(56px, 7vw, 96px); position: relative; }
.coffee .card-media { background: #241f22; }
.coffee .card-name { color: var(--cream); }
.coffee .card-col { color: var(--gold); }
.coffee .card-price { color: rgba(245, 240, 232, .7); }
.coffee .card-price span { color: var(--gold); }
.coffee .card:hover .card-media { box-shadow: 0 46px 70px -42px rgba(0, 0, 0, .9); }
.coffee .badge { background: rgba(21, 18, 19, .85); color: var(--gold); }
@media (max-width: 860px) {
  .coffee-inner { grid-template-columns: 1fr; }
  .coffee-visual { max-width: 420px; width: 100%; justify-self: center; }
  .coffee-seal { inset-inline-end: -8px; }
}

/* ==========================================================================
   Occasions page
   ========================================================================== */
.occasions { padding-bottom: clamp(90px, 11vw, 160px); }
.occ-list {
  display: grid; grid-auto-flow: column; grid-auto-columns: 132px; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 6px 2px 18px; margin-bottom: clamp(30px, 4vw, 50px); scrollbar-width: thin;
}
.occ { display: grid; gap: 10px; justify-items: center; background: none; border: 0; padding: 0; cursor: pointer; scroll-snap-align: start; text-align: center; color: inherit; }
.occ-img, .occ-mark {
  width: 120px; aspect-ratio: 4 / 5; overflow: hidden; display: block; position: relative; background: var(--cream-2);
  border-radius: 999px 999px 0 0; outline: 1px solid transparent; outline-offset: 4px; transition: outline-color .5s var(--ease), transform .6s var(--ease);
}
.occ-img img { width: 100%; height: 100%; object-fit: cover; }
.occ-mark { display: grid; place-items: center; background: linear-gradient(180deg, var(--cream-2), var(--cream-3)); }
.occ-mark img { height: 42%; width: auto; }
.occ-name { font-size: .9rem; line-height: 1.4; max-width: 13ch; }
.occ:hover .occ-img, .occ:hover .occ-mark { transform: translateY(-3px); }
.occ[aria-pressed="true"] .occ-img, .occ[aria-pressed="true"] .occ-mark { outline-color: var(--gold); }
.occ[aria-pressed="true"] .occ-name { color: var(--purple); font-weight: 500; }
.occ-head { display: grid; gap: 6px; margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + 20px); }
.occ-head h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
.occ-tag { color: var(--ink-2); min-height: 1.5em; }
.occ-empty { padding-block: 40px; }
[data-occ-item][hidden] { display: none !important; }

/* ==========================================================================
   Sizes on the product page
   ========================================================================== */
.sizes { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
.sizes legend { font-size: .85rem; padding: 0; margin-bottom: 10px; }
.size-list { display: flex; flex-wrap: wrap; gap: 10px; }
.size { position: relative; cursor: pointer; }
.size input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.size span { display: grid; gap: 2px; min-width: 96px; padding: 10px 16px; border: 1px solid var(--line); text-align: center; transition: border-color .3s, background .3s; }
.size small { color: var(--ink-2); font-size: .78rem; font-variant-numeric: tabular-nums; }
.size input:checked + span { border-color: var(--purple); background: rgba(107, 79, 122, .06); }
.size input:focus-visible + span { outline: 1.5px solid var(--purple); outline-offset: 2px; }

/* ==========================================================================
   Bespoke gifting
   ========================================================================== */
.bespoke { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(36px, 7vw, 110px); padding-block: clamp(40px, 6vw, 80px) clamp(90px, 11vw, 160px); }
.bs-intro { min-width: 0; }
.bs-sticky { position: sticky; top: calc(var(--header-h) + 30px); display: grid; gap: 18px; }
.bs-media { position: relative; aspect-ratio: 4 / 4.4; overflow: hidden; border-radius: 999px 999px 0 0; background: var(--cream-2); margin-bottom: 10px; }
.bs-intro h1 { font-size: clamp(2.2rem, 4vw, 3.4rem); }
.bs-note { font-size: .9rem; color: var(--ink-2); border-inline-start: 2px solid var(--gold); padding: 4px 16px; line-height: 1.8; }
.bs-main { min-width: 0; }
.bs-form { display: grid; gap: 34px; }
.bs-step { border: 0; padding: 0 0 34px; margin: 0; display: grid; gap: 22px; border-bottom: 1px solid var(--line); min-width: 0; }
.bs-step legend { display: flex; align-items: center; gap: 14px; font-family: var(--display); font-size: 1.6rem; padding: 0; margin-bottom: 22px; }
.bs-num { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--gold); display: grid; place-items: center; font: 400 .9rem var(--body); color: var(--gold-ink); }
.bs-form .field > span:first-child { font-size: .88rem; font-weight: 500; }
.bs-form .field small { color: var(--ink-2); font-weight: 300; }
.bs-form .field b { color: var(--purple); font-weight: 500; }
.bs-form input:not([type="radio"]):not([type="checkbox"]), .bs-form select, .bs-form textarea {
  width: 100%; border: 1px solid var(--line); background: rgba(255, 252, 247, .55); padding: 12px 14px; font-size: .98rem; border-radius: 0; transition: border-color .3s;
}
.bs-form input:focus, .bs-form select:focus, .bs-form textarea:focus { outline: none; border-color: var(--purple); }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { position: relative; cursor: pointer; }
.pill input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.pill span { display: block; padding: 9px 16px; border: 1px solid var(--line); font-size: .9rem; transition: all .3s var(--ease); }
.pill input:checked + span { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.pill input:focus-visible + span { outline: 1.5px solid var(--purple); outline-offset: 2px; }
.err { color: #9B3B3B; font-size: .82rem; min-height: 0; }
.err:empty { display: none; }
.has-error input:not([type="radio"]):not([type="checkbox"]), .has-error select, .has-error .pill span { border-color: #C98585; }
.bs-form-error { color: #9B3B3B; background: rgba(155, 59, 59, .07); padding: 12px 16px; font-size: .92rem; }
.bs-review { display: grid; gap: 22px; padding: clamp(24px, 4vw, 40px); background: rgba(255, 252, 247, .6); border: 1px solid var(--line); outline: none; scroll-margin-top: calc(var(--header-h) + 20px); }
.bs-review h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); }
.muted-text { color: var(--ink-2); }
.bs-summary { display: grid; grid-template-columns: minmax(120px, auto) 1fr; gap: 12px 24px; margin: 0; }
.bs-summary dt { color: var(--ink-2); font-size: .86rem; }
.bs-summary dd { margin: 0; overflow-wrap: anywhere; }
.bs-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.bs-actions .btn-solid { flex: 1 1 260px; }
.bs-opened { background: rgba(107, 79, 122, .08); color: var(--purple-deep); padding: 14px 18px; line-height: 1.8; }
@media (max-width: 900px) {
  .bespoke { grid-template-columns: 1fr; }
  .bs-sticky { position: static; }
  .bs-media { max-width: 380px; }
}
@media (max-width: 520px) {
  .row-2, .bs-summary { grid-template-columns: 1fr; }
  .bs-summary dt { margin-top: 6px; }
}

/* Header nav fits seven links on desktop */
@media (max-width: 1240px) { .main-nav { gap: 18px; } }
@media (max-width: 1180px) { .main-nav { display: none; } .menu-btn { display: inline-flex; } }

/* ==========================================================================
   Collection cards: widths, layouts, text position, Herbarium effect
   (all chosen in Admin → Home → شكل البطاقات)
   ========================================================================== */
.explore.explore-w-narrow { max-width: 1120px; }
.explore.explore-w-medium { max-width: 1280px; }
.explore.explore-w-wide { max-width: var(--max); }
.ex-media { aspect-ratio: var(--ratio, 3 / 4); }

/* Feature: the first card large, the other four in a 2×2 grid beside it. */
.explore-grid[data-layout="feature"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.explore-grid[data-layout="feature"] .ex-card:first-child { grid-column: span 2; grid-row: span 2; grid-template-rows: 1fr auto; }
.explore-grid[data-layout="feature"] .ex-card:first-child .ex-media { aspect-ratio: auto; height: 100%; min-height: 100%; }
/* Split: two wide cards, then three. */
.explore-grid[data-layout="split"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.explore-grid[data-layout="split"] .ex-card { grid-column: span 2; }
.explore-grid[data-layout="split"] .ex-card:nth-child(-n+2) { grid-column: span 3; }
.explore-grid[data-layout="split"] .ex-card:nth-child(-n+2) .ex-media { aspect-ratio: 4 / 3; }

/* Text over the image instead of below it. */
.explore-grid[data-text="overlay"] .ex-card { position: relative; gap: 0; }
.explore-grid[data-text="overlay"] .ex-media::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, transparent 45%, rgba(21, 16, 20, .72));
}
.explore-grid[data-text="overlay"] .ex-body { position: absolute; inset-inline: 0; bottom: 0; z-index: 3; padding: clamp(16px, 2vw, 26px); color: var(--cream); }
.explore-grid[data-text="overlay"] .ex-short { color: rgba(245, 240, 232, .8); }

/* Herbarium canvas sits over the photo; the real photo shows through on hover when enabled. */
.ex-media .herb { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; transition: opacity 1s var(--ease); }
.explore-grid[data-reveal-photo="true"] .ex-card:hover .herb,
.explore-grid[data-reveal-photo="true"] .ex-card:focus-visible .herb { opacity: 0; }
.ex-media .glare { z-index: 2; }

@media (max-width: 1100px) {
  .explore-grid[data-layout] { grid-template-columns: none; }
  .explore-grid[data-layout] .ex-card, .explore-grid[data-layout] .ex-card:first-child { grid-column: auto; grid-row: auto; }
  .explore-grid[data-layout] .ex-card .ex-media { aspect-ratio: var(--ratio, 3 / 4); height: auto; min-height: 0; }
}

/* Reveal animations switched off in the admin panel: everything is simply there. */
.no-reveal .reveal, .no-reveal .rise, .no-reveal .curtain-reveal .frame, .no-reveal .curtain-reveal .frame img, .no-reveal [data-split] .wi {
  opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important;
}

/* ==========================================================================
   Collection style (default for the five cards): frameless images, centred
   label + name, a slow zoom on hover. Calm on purpose.
   ========================================================================== */
.explore-collection { position: relative; padding-top: clamp(20px, 3vw, 40px); }
.explore-glow { position: absolute; inset: 0; pointer-events: none; z-index: -1; overflow: hidden; }
.explore-glow::before, .explore-glow::after { content: ""; position: absolute; border-radius: 50%; filter: blur(90px); }
.explore-glow::before { width: 380px; height: 380px; top: 6%; inset-inline-start: -8%; background: rgba(196, 162, 100, .16); }
.explore-glow::after { width: 440px; height: 440px; bottom: 4%; inset-inline-end: -8%; background: rgba(107, 79, 122, .12); }
.explore-collection .explore-head { margin-bottom: clamp(36px, 4vw, 56px); }
.explore-collection .explore-head h2 { font-size: clamp(2.2rem, 4.2vw, 3.6rem); letter-spacing: .04em; color: var(--purple); }
:lang(ar) .explore-collection .explore-head h2 { letter-spacing: 0; }
.explore-collection .explore-desc { font-size: .95rem; color: rgba(74, 66, 70, .8); max-width: 58ch; }

.explore-grid[data-layout="collection"] { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px clamp(8px, 1vw, 14px); }
.explore-grid[data-layout="collection"] .ex-card { gap: 0; justify-items: center; text-align: center; }
.explore-grid[data-layout="collection"] .ex-media { width: 100%; background: transparent; transition: none; }
.explore-grid[data-layout="collection"] .ex-card:hover .ex-media { box-shadow: none; }
.explore-grid[data-layout="collection"] .ex-media::after { display: none; }
.explore-grid[data-layout="collection"] .ex-media > img,
.explore-grid[data-layout="collection"] .ex-media > .herb { transition: transform .6s var(--ease), opacity 1s var(--ease); }
.explore-grid[data-layout="collection"] .ex-card:hover .ex-media > img,
.explore-grid[data-layout="collection"] .ex-card:hover .ex-media > .herb { transform: scale(1.05); }
.explore-grid[data-layout="collection"] .ex-body { justify-items: center; gap: 4px; padding: 14px 8px 0; }
.ex-label { font: 600 .62rem/1.4 var(--body); letter-spacing: .25em; text-transform: uppercase; color: var(--gold-ink); }
:lang(ar) .ex-label { font-size: .8rem; letter-spacing: 0; font-weight: 500; }
.explore-grid[data-layout="collection"] .ex-title { color: var(--purple); font-size: clamp(1.1rem, 1.35vw, 1.3rem); letter-spacing: .02em; }
:lang(ar) .explore-grid[data-layout="collection"] .ex-title { letter-spacing: 0; }
.explore-grid[data-layout="collection"] .ex-short { -webkit-line-clamp: 2; font-size: .85rem; }

@media (max-width: 1100px) {
  .explore-grid[data-layout="collection"] { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; margin-inline: 0; padding-inline: 0; scroll-snap-type: none; }
}
@media (max-width: 700px) {
  .explore-grid[data-layout="collection"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 10px; }
  /* Five cards in two columns: centre the last one instead of leaving it at the edge. */
  .explore-grid[data-layout="collection"] .ex-card:last-child:nth-child(odd) { grid-column: 1 / -1; width: calc(50% - 5px); justify-self: center; }
}

/* The real photo shows by itself after a few seconds (Admin → Home → شكل البطاقات). */
.ex-media.revealed .herb { opacity: 0; transition: opacity 1.6s var(--ease); }

/* Nutrition and allergens on the product page (shown only when filled in the admin panel). */
.nutri { display: grid; gap: 10px; padding: 14px 16px; border: 1px solid var(--line); background: rgba(255, 252, 247, .5); }
.nutri p { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; font-size: .9rem; }
.nutri-cal b { font-family: var(--display); font-size: 1.5rem; font-weight: 400; color: var(--purple); font-variant-numeric: tabular-nums; }
.nutri-cal span { color: var(--ink-2); font-size: .85rem; }
.nutri-label { color: var(--gold-ink); font-size: .8rem; font-weight: 500; }
.nutri-al i { font-style: normal; padding: 2px 10px; border: 1px solid var(--line); border-radius: 20px; font-size: .82rem; }

/* «All» in the shop: one heading per section (flowers & gifts, then coffee & desserts). */
.shop-group-title { font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin: 0 0 clamp(20px, 2.5vw, 32px); padding-top: 10px; scroll-margin-top: calc(var(--header-h) + 20px); }
.shop-grid .grid + .shop-group-title { margin-top: clamp(60px, 7vw, 100px); padding-top: clamp(30px, 4vw, 50px); border-top: 1px solid var(--line); }

/* ---------- Readability pass: larger, firmer small text; clearer prices and form fields ---------- */
.eyebrow, .badge, .card-col, .ex-label { font-size: .8rem; letter-spacing: .1em; }
.cursor-label { font-size: .75rem; letter-spacing: .12em; }
:lang(ar) .badge, :lang(ar) .card-col, :lang(ar) .ex-label, :lang(ar) .eyebrow { font-size: .9rem; letter-spacing: 0; }
.crumbs, .foot-bottom, .drawer-note, .size small, .nutri-label { font-size: .9rem; }
.cart-details small, .bs-form .field small { font-weight: 400; }
.ci-name, .cart-line-name, .foot-tag, .story-title { font-family: var(--body); font-weight: 500; font-size: 1.05rem; }
.card-price { font-size: 1.05rem; color: var(--ink); font-weight: 500; }
.pdp-price { font-size: 1.35rem; font-weight: 500; }
.card-price s, .pdp-price s { color: #6F6669; font-weight: 400; }
.field input, .field select, .field textarea, .cart-fields input, .cart-fields textarea,
.bs-form input, .bs-form select, .bs-form textarea, .size span, .pill span, .chip { border-color: #8E8478; }
.has-error input:not([type="radio"]):not([type="checkbox"]), .has-error select, .has-error .pill span { border-color: #B04A4A; }
.field input:focus-visible, .field textarea:focus-visible, .cart-fields input:focus-visible, .cart-fields textarea:focus-visible,
.bs-form input:focus-visible, .bs-form select:focus-visible, .bs-form textarea:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
::placeholder { color: #6F6669; opacity: 1; }
.story-play { width: 44px; height: 44px; }
.cart-line .stepper button { min-width: 44px; min-height: 44px; }
.err { font-size: .9rem; }

/* ---------- Delivery: district picker and fee lines in the cart, promise line under the product price ---------- */
.cart-zone { display: grid; gap: 6px; font-size: .9rem; }
.cart-zone select { width: 100%; border: 1px solid #8E8478; background: rgba(255, 252, 247, .7); padding: 12px 14px; font-size: 1rem; border-radius: 0; min-height: 48px; }
.cart-zone select:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
.cart-hint { margin: -6px 0 0; font-size: .9rem; color: var(--purple-deep); line-height: 1.6; }
.subtotal.grand { padding-top: 12px; border-top: 1px solid var(--line); font-size: 1.15rem; }
.subtotal.grand b { font-weight: 600; }
.pdp-delivery { margin: -4px 0 18px; font-size: .95rem; color: var(--purple-deep); line-height: 1.7; }