/* ===== Thmanyah typeface (Sans + Serif Display) — bilingual EN/AR ===== */
@font-face{ font-family:"Thmanyah Sans"; src:url("../fonts/thmanyahsans-Light.woff2") format("woff2"); font-weight:300; font-style:normal; font-display:swap; }
@font-face{ font-family:"Thmanyah Sans"; src:url("../fonts/thmanyahsans-Regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"Thmanyah Sans"; src:url("../fonts/thmanyahsans-Medium.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:"Thmanyah Sans"; src:url("../fonts/thmanyahsans-Bold.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }
@font-face{ font-family:"Thmanyah Serif Display"; src:url("../fonts/thmanyahserifdisplay-Regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"Thmanyah Serif Display"; src:url("../fonts/thmanyahserifdisplay-Medium.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:"Thmanyah Serif Display"; src:url("../fonts/thmanyahserifdisplay-Bold.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }
@font-face{ font-family:"Thmanyah Serif Display"; src:url("../fonts/thmanyahserifdisplay-Black.woff2") format("woff2"); font-weight:900; font-style:normal; font-display:swap; }
/* =====================================================================
   NAFLA — v5  ·  Modern agency (bold sans), full-dark, brand caramel + black
   Original design & code. Interaction kit: custom cursor, preloader,
   pinned split hero, horizontal-scroll collections, Isotope filter,
   animated counters, magnetic buttons. Libs (CDN, MIT/OFL): Isotope, fonts.
   Display: Poppins · UI: Inter · Arabic: Tajawal
   ===================================================================== */
:root{
  --noir:#2D1A0F; --ink:#2D1A0F; --raise:#3B2615; --raise-2:#48301D;
  --kraft:#9A6E35; --gold:#C9A86A; --gold-deep:#9A6E35; --gold-bright:#E4C98E;
  --terracotta:#B0654A;
  --cream:#F3ECDE; --cream-soft:#B8A582; --cream-mute:#7E6E4F;
  --line:rgba(201,168,106,.18); --line-2:rgba(201,168,106,.40);
  /* brand colourways (guideline) + deep tints for dark backgrounds */
  --c-palm:#2B190F;  --c-palm-deep:#14100A;
  --c-sand:#D4B06C;  --c-sand-deep:#2A2113;
  --c-bisht:#9D5C3B; --c-bisht-deep:#2C1A11;
  --c-pearl:#EED7AC; --c-pearl-deep:#23201A;
  --c-honey:#C9964D; --c-honey-deep:#2B200E;
  --c-rose:#C89090;  --c-rose-deep:#2A1E1E;
  --disp:"Thmanyah Serif Display",Georgia,serif;
  --sans:"Thmanyah Sans",system-ui,sans-serif;
  --arabic:"Thmanyah Sans",sans-serif;
  --ease:cubic-bezier(.16,1,.3,1); --med:.55s var(--ease); --fast:.3s var(--ease);
  --container:1640px; --pad-x:clamp(20px,4.4vw,90px);
  --section:clamp(80px,12vw,200px); --nav-h:92px;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ background:var(--noir); -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{ margin:0; background:var(--noir) url("../img/sadu-motif-2.png") repeat; background-size:700px auto; color:var(--cream); font-family:var(--sans); font-weight:300; font-size:16px; line-height:1.7; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } button{ font-family:inherit; cursor:pointer; } ul{ margin:0; padding:0; list-style:none; }
::selection{ background:var(--gold); color:var(--noir); }
:focus-visible{ outline:1.5px solid var(--gold); outline-offset:4px; }

/* display type — bold uppercase */
.display,h1,h2,h3{ font-family:var(--disp); font-weight:500; margin:0; line-height:.98; letter-spacing:-.02em; text-transform:uppercase; color:var(--cream); }
h1{ font-size:clamp(48px,9vw,168px); }
h2{ font-size:clamp(34px,5.5vw,96px); }
h3{ font-size:clamp(20px,2vw,30px); font-weight:500; letter-spacing:-.01em; }
.thin{ font-weight:300; } .out{ -webkit-text-stroke:0; color:var(--gold); }
/* meaning-mapped two-tone accent words: gold=heritage, terra=makers, honey=impact, rose=gifting */
.out.terra{ -webkit-text-stroke-color:var(--c-bisht); }
.out.honey{ -webkit-text-stroke-color:var(--c-honey); }
.out.rose{ -webkit-text-stroke-color:var(--c-rose); }
em{ font-style:normal; color:var(--gold); }
html[lang="ar"] body{ font-family:var(--arabic); font-weight:400; }
html[lang="ar"] .display,html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3{ font-family:var(--disp); letter-spacing:0; line-height:1.2; }

/* EN/AR language switching */
[data-ar]{ display:none; }
html[lang="ar"] [data-en]{ display:none; }
html[lang="ar"] [data-ar]{ display:inline; }

.eyebrow{ font-family:var(--sans); font-size:12px; font-weight:500; letter-spacing:.28em; text-transform:uppercase; color:var(--gold); margin:0; display:inline-flex; align-items:center; gap:14px; }
.eyebrow::before{ content:""; width:34px; height:1px; background:var(--gold); }
html[lang="ar"] .eyebrow{ letter-spacing:.1em; }
.index{ font-family:var(--disp); font-weight:500; font-size:13px; letter-spacing:.1em; color:var(--cream-mute); }
.lede{ font-size:clamp(16px,1.4vw,20px); line-height:1.7; color:var(--cream-soft); max-width:54ch; font-weight:300; }
.muted{ color:var(--cream-soft); } .center{ text-align:center; }

.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--pad-x); }
.section{ padding-block:var(--section); }
.section--tight{ padding-block:clamp(56px,8vw,120px); }
.surface{ background:var(--ink) url("../img/sadu-motif-2.png") repeat; background-size:700px auto; } .raise{ background:var(--raise) url("../img/sadu-motif-2.png") repeat; background-size:700px auto; }
.head{ display:flex; align-items:flex-end; justify-content:space-between; gap:30px; flex-wrap:wrap; margin-bottom:clamp(40px,5vw,76px); }
.head__t{ max-width:20ch; } .mt{ margin-top:clamp(22px,2.6vw,40px); }

/* buttons */
.btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:58px; padding:0 40px; border-radius:0; font-family:var(--sans); font-size:12px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; border:1px solid transparent; transition:background var(--fast),color var(--fast),border-color var(--fast); }
html[lang="ar"] .btn{ letter-spacing:.05em; font-size:13px; }
.btn--gold{ background:var(--gold); color:var(--noir); } .btn--gold:hover{ background:var(--gold-bright); }
.btn--out{ background:transparent; color:var(--cream); border-color:var(--line-2); } .btn--out:hover{ border-color:var(--gold); color:var(--gold-bright); }
.btn--block{ width:100%; }
.alink{ display:inline-flex; align-items:center; gap:12px; font-family:var(--sans); font-size:12px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--cream); padding-bottom:6px; border-bottom:1px solid var(--gold); width:max-content; transition:gap var(--fast); }
.alink:hover{ gap:18px; color:var(--gold-bright); } .alink svg{ width:16px; height:16px; }
html[dir="rtl"] .alink svg{ transform:scaleX(-1); }

/* =====================================================================
   PRELOADER
   ===================================================================== */
.preloader{ position:fixed; inset:0; z-index:9999; background:var(--noir); display:flex; align-items:center; justify-content:center; flex-direction:column; gap:28px; transition:opacity .6s var(--ease),visibility .6s; }
.preloader.done{ opacity:0; visibility:hidden; }
.preloader img{ width:clamp(150px,18vw,230px); opacity:.96; }
.preloader__bar{ width:min(280px,60vw); height:1px; background:var(--line-2); position:relative; overflow:hidden; }
.preloader__bar i{ position:absolute; inset:0; transform-origin:left; transform:scaleX(0); background:var(--gold); transition:transform .2s linear; }
.preloader__pct{ font-family:var(--disp); font-weight:500; font-size:12px; letter-spacing:.2em; color:var(--cream-mute); }

/* =====================================================================
   CUSTOM CURSOR
   ===================================================================== */
.cursor-dot,.cursor-ring{ position:fixed; top:0; left:0; z-index:9000; pointer-events:none; border-radius:50%; mix-blend-mode:difference; will-change:transform; }
.cursor-dot{ width:7px; height:7px; background:var(--gold-bright); margin:-3.5px 0 0 -3.5px; }
.cursor-ring{ width:42px; height:42px; border:1px solid rgba(228,201,142,.6); margin:-21px 0 0 -21px; transition:width .3s var(--ease),height .3s var(--ease),margin .3s var(--ease),opacity .3s; }
.cursor-ring.grow{ width:74px; height:74px; margin:-37px 0 0 -37px; background:rgba(201,168,106,.12); border-color:transparent; }
body.has-cursor, body.has-cursor *{ cursor:none; }
@media (hover:none){ .cursor-dot,.cursor-ring{ display:none; } body.has-cursor,body.has-cursor *{ cursor:auto; } }

/* =====================================================================
   HEADER
   ===================================================================== */
.site-header{ position:fixed; inset:0 0 auto 0; z-index:100; height:var(--nav-h); display:flex; align-items:center; transition:background var(--med),border-color var(--med); border-bottom:1px solid transparent; }
.site-header.scrolled{ background:rgba(45,26,15,.82); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom-color:var(--line); height:74px; }
.hgrid{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--pad-x); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px; }
.brand-logo{ justify-self:start; display:flex; align-items:center; } .brand-logo img{ height:54px; width:auto; transition:height var(--med); }
.site-header.scrolled .brand-logo img{ height:44px; }
.nav{ justify-self:center; display:flex; gap:clamp(20px,2.2vw,40px); }
.nav a{ font-family:var(--sans); font-size:12px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--cream); opacity:.82; position:relative; padding:6px 0; transition:opacity var(--fast); }
html[lang="ar"] .nav a{ letter-spacing:.04em; font-size:13px; }
.nav a:hover,.nav a[aria-current="page"]{ opacity:1; color:var(--gold-bright); }
.htools{ justify-self:end; display:flex; align-items:center; gap:6px; }
.icon-btn{ width:46px; height:46px; display:inline-flex; align-items:center; justify-content:center; background:transparent; border:none; color:var(--cream); transition:color var(--fast); } .icon-btn:hover{ color:var(--gold-bright); } .icon-btn svg{ width:21px; height:21px; }
.lang-toggle{ height:40px; min-width:48px; padding:0 14px; background:transparent; border:1px solid var(--line-2); color:var(--cream); font-family:var(--sans); font-size:12px; font-weight:500; letter-spacing:.08em; transition:var(--fast); } .lang-toggle:hover{ border-color:var(--gold); color:var(--gold-bright); }
.cart-btn{ position:relative; } .cart-count{ position:absolute; top:6px; inset-inline-end:3px; min-width:17px; height:17px; padding:0 4px; background:var(--terracotta); color:#fff; font-family:var(--sans); font-size:10px; font-weight:500; line-height:17px; text-align:center; border-radius:9px; transform:scale(0); transition:transform var(--fast); } .cart-count.show{ transform:scale(1); }
.menu-btn{ display:none; }
@media (max-width:1040px){
  .hgrid{ grid-template-columns:1fr auto; } .nav{ position:fixed; inset:var(--nav-h) 0 auto 0; flex-direction:column; gap:0; background:var(--ink); padding:10px var(--pad-x) 30px; border-bottom:1px solid var(--line); transform:translateY(-12px); opacity:0; pointer-events:none; transition:var(--med); justify-self:stretch; }
  .nav.open{ transform:none; opacity:1; pointer-events:auto; } .nav a{ padding:18px 0; border-bottom:1px solid var(--line); font-size:15px; }
  .menu-btn{ display:inline-flex; } .htools{ gap:2px; }
}
body.no-hero{ padding-top:var(--nav-h); }

/* =====================================================================
   PINNED SPLIT HERO
   ===================================================================== */
.hero{ position:relative; min-height:100svh; display:grid; grid-template-columns:1fr; background:#160c06 url("../img/scenes/hero-loom.jpg") center/cover no-repeat; overflow:hidden; }
@media (max-width:980px){ .hero{ grid-template-columns:1fr; } }
.hero__left{ display:flex; flex-direction:column; justify-content:center; padding:calc(var(--nav-h) + 4vw) var(--pad-x) clamp(40px,5vw,80px); position:relative; z-index:2; align-items:center; text-align:center; }
.hero__left::after{ display:none !important; }
@media (max-width:980px){ .hero__left::after{ display:none; } }
.hero h1{ margin:18px 0 0; width:100%; }
.hero h1 .l{ display:block; overflow:hidden; white-space:nowrap; }
.hero h1 .l span{ display:inline; transform:translateY(102%); animation:rise .9s var(--ease) forwards; }
.hero h1 .l:nth-child(2) span{ animation-delay:.12s } .hero h1 .l:nth-child(3) span{ animation-delay:.24s }
@keyframes rise{ to{ transform:none; } }
.hero__tag{ margin:30px 0 0; max-width:42ch; color:var(--cream-soft); font-size:clamp(15px,1.4vw,19px); }
.hero__cta{ margin-top:42px; display:flex; gap:14px; flex-wrap:wrap; }
.hero__stats{ margin-top:clamp(40px,5vw,72px); display:flex; gap:clamp(28px,4vw,64px); flex-wrap:wrap; }
.hero__stats .n{ font-family:var(--disp); font-weight:500; font-size:clamp(28px,3vw,44px); color:var(--gold-bright); line-height:1; }
.hero__stats .l{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--cream-mute); margin-top:8px; }
.hero__right{ position:relative; overflow:hidden; background:var(--raise-2); min-height:48vh; }
.hero__right img{ width:100%; height:100%; object-fit:cover; }
.hero__right::after{ content:""; position:absolute; inset:0; background:linear-gradient(120deg,rgba(45,26,15,.5),transparent 40%); }
.hero__scroll{ position:absolute; bottom:26px; inset-inline-start:var(--pad-x); z-index:3; font-family:var(--sans); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--cream-mute); display:flex; align-items:center; gap:12px; }
.hero__scroll i{ width:46px; height:1px; background:var(--gold); display:inline-block; transform-origin:left; animation:scrollx 2.2s var(--ease) infinite; }
@keyframes scrollx{ 0%{transform:scaleX(.2)}50%{transform:scaleX(1)}100%{transform:scaleX(.2)} }

/* page hero */
.page-hero{ position:relative; overflow:hidden; padding-top:calc(var(--nav-h) + clamp(60px,9vw,150px)); padding-bottom:clamp(50px,7vw,110px); background:var(--c-palm-deep); }
.page-hero__bg{ display:none; } /* scene images removed from inner-page titles */
.page-hero--p2{ background:var(--c-sand-deep); }   /* Shop — sand */
.page-hero--p3{ background:var(--c-bisht-deep); }  /* Our Story — terracotta */
.page-hero--p4{ background:var(--c-honey-deep); }  /* Journal — honey */
.page-hero--p5{ background:var(--c-rose-deep); }   /* Contact — rose */
/* subtle Pattern 02 per colourway (lighter shade reads on the deep tint), medium tile */
.page-hero::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background:url("../img/p02-gold.png") repeat; background-size:460px auto; opacity:.10; }
.page-hero--p2::after{ background-image:url("../img/p02-sand.png"); }
.page-hero--p3::after{ background-image:url("../img/p02-bisht.png"); }
.page-hero--p4::after{ background-image:url("../img/p02-honey.png"); }
.page-hero--p5::after{ background-image:url("../img/p02-rose.png"); }
.page-hero .container{ position:relative; z-index:2; }
.page-hero .container{ position:relative; z-index:2; }
.page-hero p{ color:var(--cream-soft); max-width:54ch; margin-top:22px; font-size:18px; }

/* reveal */
[data-reveal]{ opacity:0; transform:translateY(40px); transition:opacity 1s var(--ease),transform 1s var(--ease); }
[data-reveal].in{ opacity:1; transform:none; }
[data-reveal][data-delay="1"]{ transition-delay:.1s }[data-reveal][data-delay="2"]{ transition-delay:.2s }[data-reveal][data-delay="3"]{ transition-delay:.3s }
@media (prefers-reduced-motion:reduce){ [data-reveal]{ opacity:1!important; transform:none!important; } .hero h1 .l span{ animation:none; transform:none; } }

/* marquee */
.marquee{ border-block:1px solid var(--line); padding-block:clamp(20px,2.4vw,34px); overflow:hidden; }
.marquee__t{ display:flex; gap:54px; width:max-content; animation:marq 32s linear infinite; }
html[dir="rtl"] .marquee__t{ animation-direction:reverse; }
.marquee span{ font-family:var(--script); font-weight:400; text-transform:none; letter-spacing:0; font-size:clamp(34px,4.6vw,70px); color:var(--gold); -webkit-text-stroke:0; white-space:nowrap; display:inline-flex; align-items:center; gap:54px; }
.marquee span::after{ content:"✦"; -webkit-text-stroke:0; color:var(--gold); font-size:.4em; }
/* fix EN/AR mixing in the marquee (.marquee span display was overriding the hide) */
.marquee span[data-ar]{ display:none; }
html[lang="ar"] .marquee span[data-en]{ display:none; }
html[lang="ar"] .marquee span[data-ar]{ display:inline-flex; }
@keyframes marq{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .marquee__t{ animation:none; } }

/* =====================================================================
   HORIZONTAL-SCROLL COLLECTIONS
   ===================================================================== */
.hwrap{ position:relative; background:transparent; }
.hpin{ position:sticky; top:0; height:100svh; overflow:hidden; display:flex; align-items:center; }
.htrack{ display:flex; align-items:stretch; gap:clamp(18px,2vw,34px); padding-inline:var(--pad-x); will-change:transform; }
.hcard{ position:relative; flex:0 0 auto; width:min(78vw,440px); height:min(74svh,640px); overflow:hidden; display:flex; align-items:flex-end; }
.hcard img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.hcard::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 35%,rgba(45,26,15,.85)); }
.hcard:hover img{ transform:scale(1.05); }
.hcard__c{ position:relative; z-index:2; padding:clamp(24px,2.4vw,40px); }
.hcard__c .index{ color:var(--gold); } .hcard__c h3{ font-size:clamp(26px,2.4vw,38px); margin:10px 0 14px; }
.hintro{ flex:0 0 auto; width:min(88vw,560px); display:flex; flex-direction:column; justify-content:center; padding-inline:var(--pad-x); }
.hintro h2{ font-size:clamp(34px,4.4vw,68px); line-height:.96; }
.hprogress{ position:absolute; bottom:34px; inset-inline:var(--pad-x); height:1px; background:var(--line); z-index:3; }
.hprogress i{ position:absolute; inset-block:0; inset-inline-start:0; width:0; background:var(--gold); }
@media (max-width:980px){ /* fall back to horizontal touch-scroll */
  .hwrap{ height:auto!important; } .hpin{ position:static; height:auto; }
  .htrack{ overflow-x:auto; padding-block:8px 24px; scroll-snap-type:x mandatory; transform:none!important; }
  .hcard{ scroll-snap-align:start; width:80vw; height:64svh; } .hintro{ width:84vw; } .hprogress{ display:none; }
}

/* =====================================================================
   PRODUCT CARD + ISOTOPE
   ===================================================================== */
.pgrid{ display:grid; gap:clamp(18px,2vw,40px); grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); }
.pgrid--4{ grid-template-columns:repeat(4,1fr); } .pgrid--3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:1100px){ .pgrid--4,.pgrid--3{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .pgrid--4,.pgrid--3{ grid-template-columns:1fr; } }
.card{ position:relative; }
.card__m{ position:relative; aspect-ratio:3/4; overflow:hidden; background:var(--raise-2); display:block; }
.card__m img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.card:hover .card__m img{ transform:scale(1.05); }
.card__tag{ position:absolute; top:16px; inset-inline-start:16px; z-index:2; background:var(--gold); color:var(--noir); font-family:var(--sans); font-size:10px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; padding:6px 11px; }
.card__tag--dim{ background:rgba(45,26,15,.7); color:var(--cream); border:1px solid var(--line); }
.card__q{ position:absolute; inset-inline:16px; bottom:16px; z-index:2; opacity:0; transform:translateY(10px); transition:var(--fast); }
.card:hover .card__q,.card:focus-within .card__q{ opacity:1; transform:none; }
@media (hover:none){ .card__q{ opacity:1; transform:none; } }
.card__b{ display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding-top:18px; }
.card__name{ font-family:var(--disp); font-weight:500; text-transform:uppercase; font-size:15px; letter-spacing:-.01em; color:var(--cream); line-height:1.2; }
html[lang="ar"] .card__name{ font-family:var(--arabic); text-transform:none; }
.card__cat{ font-family:var(--sans); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--cream-mute); margin-top:6px; }
.card__price{ font-family:var(--disp); font-weight:500; font-size:15px; color:var(--gold-bright); white-space:nowrap; font-variant-numeric:tabular-nums; }
.card__price .qar{ font-size:10px; color:var(--cream-mute); }

.filterbar{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:clamp(34px,4vw,56px); }
.filterbar button{ min-height:44px; padding:0 22px; background:transparent; border:1px solid var(--line); color:var(--cream-soft); font-family:var(--sans); font-size:12px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; transition:var(--fast); }
html[lang="ar"] .filterbar button{ letter-spacing:.03em; font-size:13px; }
.filterbar button:hover{ color:var(--cream); border-color:var(--line-2); }
.filterbar button.active{ background:var(--gold); color:var(--noir); border-color:var(--gold); }
.iso-item{ width:33.333%; padding:clamp(9px,1vw,20px); } .iso-item.w50{ width:50%; }
@media (max-width:1100px){ .iso-item,.iso-item.w50{ width:50%; } } @media (max-width:560px){ .iso-item,.iso-item.w50{ width:100%; } }

/* counters — oversized */
.counters{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,3vw,50px); }
@media (max-width:760px){ .counters{ grid-template-columns:repeat(2,1fr); gap:40px 20px; } }
.counter{ border-top:1px solid var(--line-2); padding-top:24px; }
.counter__n{ font-family:var(--disp); font-weight:500; font-size:clamp(54px,7vw,108px); line-height:.9; color:var(--cream); font-variant-numeric:tabular-nums; }
.counter__l{ margin-top:14px; font-family:var(--sans); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); }
html[lang="ar"] .counter__l{ letter-spacing:.04em; }

/* split / feature */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,6vw,110px); align-items:center; }
@media (max-width:900px){ .split{ grid-template-columns:1fr; gap:40px; } }
.split__m{ aspect-ratio:4/5; overflow:hidden; background:var(--raise-2); } .split__m img{ width:100%; height:100%; object-fit:cover; }
.pull{ text-align:center; } .pull q{ quotes:none; font-family:var(--disp); font-weight:500; text-transform:uppercase; font-size:clamp(30px,5vw,82px); line-height:1; letter-spacing:-.02em; color:var(--cream); display:block; max-width:16ch; margin-inline:auto; }
.pull q b{ color:var(--gold); font-weight:500; } .pull cite{ display:block; margin-top:30px; font-family:var(--sans); font-style:normal; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-bright); }
html[lang="ar"] .pull q{ font-family:var(--disp); text-transform:none; letter-spacing:0; }

/* PDP */
.crumb{ font-family:var(--sans); font-size:12px; letter-spacing:.04em; color:var(--cream-mute); padding-block:24px; text-transform:uppercase; } .crumb a:hover{ color:var(--gold); } .crumb span{ margin-inline:10px; opacity:.5; }
.pdp{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(32px,5vw,84px); align-items:start; } @media (max-width:920px){ .pdp{ grid-template-columns:1fr; } }
.pdp__main{ aspect-ratio:4/5; overflow:hidden; background:var(--raise-2); cursor:zoom-in; } .pdp__main img{ width:100%; height:100%; object-fit:cover; }
.pdp__thumbs{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:12px; }
.pdp__thumb{ aspect-ratio:1; overflow:hidden; border:1px solid var(--line); background:var(--raise-2); cursor:pointer; padding:0; } .pdp__thumb[aria-current="true"]{ border-color:var(--gold); }
.pdp__info{ position:sticky; top:calc(var(--nav-h) + 20px); }
.pdp__cat{ font-family:var(--sans); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); }
.pdp__title{ font-family:var(--disp); font-weight:500; text-transform:uppercase; font-size:clamp(30px,4vw,52px); line-height:1; letter-spacing:-.02em; margin:14px 0 0; } html[lang="ar"] .pdp__title{ font-family:var(--arabic); text-transform:none; }
.pdp__price{ margin:22px 0; font-family:var(--disp); font-weight:500; font-size:24px; color:var(--gold-bright); } .pdp__price .qar{ font-size:13px; color:var(--cream-mute); }
.pdp__desc{ color:var(--cream-soft); font-size:16px; line-height:1.85; max-width:52ch; }
.pdp__g{ margin-top:30px; } .pdp__g h4{ font-family:var(--sans); font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--cream-mute); margin:0 0 14px; }
.swatches{ display:flex; gap:10px; flex-wrap:wrap; } .swatch{ min-height:46px; padding:0 22px; border:1px solid var(--line-2); background:transparent; color:var(--cream); font-family:var(--sans); font-size:13px; transition:var(--fast); } .swatch[aria-pressed="true"]{ border-color:var(--gold); background:var(--gold); color:var(--noir); }
.pdp__act{ margin-top:32px; display:flex; gap:14px; } .qty{ display:inline-flex; align-items:center; border:1px solid var(--line-2); height:58px; } .qty button{ width:48px; height:100%; background:transparent; border:none; font-size:18px; color:var(--cream); } .qty span{ min-width:42px; text-align:center; font-weight:500; }
.trust{ margin-top:34px; padding-top:30px; border-top:1px solid var(--line); display:grid; gap:18px; } .trust__r{ display:flex; gap:16px; align-items:flex-start; } .trust__r svg{ width:22px; height:22px; color:var(--gold); flex:none; margin-top:2px; } .trust__r p{ margin:0; font-size:14px; color:var(--cream-soft); } .trust__r strong{ color:var(--cream); font-weight:500; }

.lightbox{ position:fixed; inset:0; background:rgba(8,6,4,.94); z-index:400; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity var(--fast); padding:40px; } .lightbox.open{ opacity:1; pointer-events:auto; } .lightbox img{ max-width:90vw; max-height:88vh; object-fit:contain; } .lightbox__x{ position:absolute; top:24px; inset-inline-end:24px; width:50px; height:50px; border:1px solid var(--line-2); background:transparent; color:var(--cream); }

/* journal masonry */
.masonry{ columns:3 320px; column-gap:clamp(18px,2vw,32px); } .post{ break-inside:avoid; margin-bottom:clamp(18px,2vw,32px); display:inline-block; width:100%; }
.post__m{ overflow:hidden; background:var(--raise-2); } .post__m img{ width:100%; transition:transform 1.2s var(--ease); } .post:hover .post__m img{ transform:scale(1.05); }
.post__b{ padding-top:18px; } .post__meta{ font-family:var(--sans); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); } .post__t{ font-family:var(--disp); font-weight:500; text-transform:uppercase; font-size:clamp(18px,1.6vw,24px); line-height:1.05; margin:10px 0 0; } html[lang="ar"] .post__t{ font-family:var(--arabic); text-transform:none; } .post__x{ color:var(--cream-soft); font-size:14px; margin-top:10px; }

/* forms */
.field{ margin-bottom:20px; } .field label{ display:block; font-family:var(--sans); font-size:12px; font-weight:500; letter-spacing:.04em; color:var(--cream); margin-bottom:8px; }
.field input,.field textarea,.field select{ width:100%; min-height:56px; padding:14px 16px; border:1px solid var(--line-2); border-radius:0; background:rgba(255,255,255,.02); color:var(--cream); font-family:var(--sans); font-weight:300; font-size:15px; transition:border-color var(--fast); } .field textarea{ min-height:150px; resize:vertical; } .field input:focus,.field textarea:focus,.field select:focus{ outline:none; border-color:var(--gold); } .field input::placeholder,.field textarea::placeholder{ color:var(--cream-mute); } .field select option{ background:var(--ink); }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 22px; } @media (max-width:600px){ .form-grid{ grid-template-columns:1fr; } }
.newsletter{ display:flex; max-width:520px; border:1px solid var(--line-2); } .newsletter input{ flex:1; min-height:58px; padding:0 18px; border:none; background:transparent; color:var(--cream); } .newsletter input::placeholder{ color:var(--cream-mute); } .newsletter .btn{ border:none; }
.info-block{ margin-bottom:26px; } .info-block h4{ font-family:var(--sans); font-size:12px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin:0 0 8px; } .info-block p,.info-block a{ font-size:16px; color:var(--cream); line-height:1.7; margin:0; } .info-block a:hover{ color:var(--gold-bright); }

/* drawer / toast */
.scrim{ position:fixed; inset:0; background:rgba(8,6,4,.6); opacity:0; pointer-events:none; transition:opacity var(--fast); z-index:200; } .scrim.open{ opacity:1; pointer-events:auto; }
.drawer{ position:fixed; top:0; inset-inline-end:0; height:100dvh; width:min(440px,94vw); background:var(--ink); z-index:210; display:flex; flex-direction:column; transform:translateX(100%); transition:transform var(--med); border-inline-start:1px solid var(--line); } html[dir="rtl"] .drawer{ transform:translateX(-100%); } .drawer.open{ transform:none; }
.drawer__h{ display:flex; align-items:center; justify-content:space-between; padding:24px 26px; border-bottom:1px solid var(--line); } .drawer__h h3{ font-size:20px; }
.drawer__bd{ flex:1; overflow-y:auto; padding:8px 26px; } .drawer__empty{ color:var(--cream-mute); text-align:center; padding:60px 0; }
.citem{ display:grid; grid-template-columns:60px 1fr auto; gap:16px; padding:18px 0; border-bottom:1px solid var(--line); align-items:center; } .citem img{ width:60px; height:76px; object-fit:cover; background:var(--raise-2); } .citem__n{ font-family:var(--disp); font-weight:500; text-transform:uppercase; font-size:13px; } html[lang="ar"] .citem__n{ font-family:var(--arabic); text-transform:none; } .citem__m{ font-size:12px; color:var(--cream-mute); margin-top:2px; } .citem__p{ font-family:var(--disp); font-weight:500; font-size:13px; color:var(--gold-bright); } .citem__rm{ background:none; border:none; color:var(--cream-mute); font-size:12px; text-decoration:underline; padding:4px 0; margin-top:4px; }
.drawer__f{ padding:22px 26px 28px; border-top:1px solid var(--line); } .drawer__tot{ display:flex; justify-content:space-between; font-family:var(--disp); font-weight:500; margin-bottom:18px; }
.toast{ position:fixed; bottom:28px; inset-inline:0; margin-inline:auto; width:max-content; max-width:90vw; background:var(--gold); color:var(--noir); padding:15px 24px; font-size:13px; font-weight:500; letter-spacing:.04em; text-transform:uppercase; z-index:300; opacity:0; transform:translateY(12px); transition:var(--fast); pointer-events:none; } .toast.show{ opacity:1; transform:none; }

/* footer */
.footer{ position:relative; background:var(--noir); color:var(--cream-soft); border-top:1px solid var(--line); overflow:hidden; }
.footer__big{ padding-block:clamp(60px,8vw,120px) clamp(40px,5vw,70px); border-bottom:1px solid var(--line); }
.footer__big h2{ font-size:clamp(44px,9vw,150px); line-height:.9; } .footer__big .alink{ margin-top:34px; }
.footer__cols{ padding-block:clamp(48px,5vw,72px); display:grid; grid-template-columns:1.6fr 1fr 1fr 1.3fr; gap:clamp(28px,4vw,60px); }
@media (max-width:880px){ .footer__cols{ grid-template-columns:1fr 1fr; gap:38px; } } @media (max-width:520px){ .footer__cols{ grid-template-columns:1fr; } }
.footer__logo img{ height:66px; margin-bottom:22px; } .footer__bt{ max-width:34ch; font-size:14px; line-height:1.8; }
.footer h4{ font-family:var(--sans); font-size:11px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--cream); margin:0 0 20px; } html[lang="ar"] .footer h4{ letter-spacing:.05em; }
.footer__col a{ display:block; color:var(--cream-soft); font-size:14px; line-height:2.2; transition:color var(--fast); } .footer__col a:hover{ color:var(--gold-bright); }
.footer__contact li{ font-size:14px; line-height:2; } .footer__contact a:hover{ color:var(--gold-bright); }
.socials{ display:flex; gap:12px; margin-top:14px; } .socials a{ width:40px; height:40px; border:1px solid var(--line); display:inline-flex; align-items:center; justify-content:center; transition:var(--fast); } .socials a:hover{ border-color:var(--gold); color:var(--gold-bright); } .socials svg{ width:17px; height:17px; }
.footer__bar{ padding:24px 0; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:12px; letter-spacing:.04em; }
.sadu-divide{ height:1px; background:var(--line); position:relative; } .sadu-divide::before{ content:""; position:absolute; inset-inline:0; top:50%; height:16px; transform:translateY(-50%); background:url("../img/sadu_pattern.png") repeat-x center/auto 100%; opacity:.12; filter:sepia(.5) saturate(.8) brightness(1.4); }

/* =====================================================================
   v6 — BRAND SADU PATTERN SYSTEM  (Pattern 02 site-wide, Pattern 01 accents)
   ===================================================================== */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:url("../img/pattern02.svg") repeat; background-size:208px auto; opacity:.05;
}
.surface, .raise{ position:relative; overflow:hidden; }
.surface::before, .raise::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:url("../img/pattern02.svg") repeat; background-size:208px auto; opacity:.045;
}
.surface > *, .raise > *{ position:relative; z-index:1; }
.sadu-divide::before{
  height:24px; background-image:url("../img/pattern01.svg"); background-size:auto 100%;
  background-repeat:repeat-x; filter:none; opacity:.5;
}
.band{ height:64px; background:url("../img/pattern01.svg") repeat-x center/auto 30px; opacity:.42; }
.hero__right::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:url("../img/pattern02.svg") repeat; background-size:200px auto; opacity:.10; mix-blend-mode:overlay;
}
.hero__right{ outline:1px solid var(--line); outline-offset:-18px; }
.footer{ position:relative; }
.footer::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:url("../img/pattern02.svg") repeat; background-size:260px auto; opacity:.04;
}
.footer > *{ position:relative; z-index:1; }
.hwrap{ position:relative; background:transparent; } .hwrap::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background:url("../img/bp-dark-2.png") center/cover no-repeat; opacity:.4; }
.hpin{ position:sticky; z-index:1; }
.card__m{ outline:1px solid transparent; transition:outline-color var(--fast); }
.card:hover .card__m{ outline-color:var(--line-2); }

/* =====================================================================
   v6.1 — Collection cards (large color cards) + artistic pattern washes
   ===================================================================== */
.collcards{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,1.6vw,26px); }
@media (max-width:900px){ .collcards{ grid-template-columns:1fr; } }
.cx{ position:relative; border-radius:12px; overflow:hidden; min-height:clamp(440px,46vw,620px); padding:clamp(24px,2.2vw,40px); display:flex; flex-direction:column; transition:transform .55s var(--ease); }
.cx::after{ content:""; position:absolute; inset:16px; border:1px dashed rgba(245,228,199,.34); border-radius:8px; pointer-events:none; }
.cx:hover{ transform:translateY(-10px); }
.cx--bisht{ background:#593e2c; } .cx--clay{ background:#a8643f; } .cx--shell{ background:#efc4c7; }
.cx__t{ position:relative; z-index:2; font-family:var(--disp); font-weight:500; text-transform:uppercase; font-size:clamp(30px,3vw,48px); line-height:.9; letter-spacing:-.01em; color:var(--cream); }
.cx--shell .cx__t{ color:#2b190f; }
html[lang="ar"] .cx__t{ font-family:var(--arabic); }
.cx__img{ position:relative; z-index:2; flex:1; display:flex; align-items:center; justify-content:center; }
.cx__img img{ max-height:330px; width:auto; transition:transform .6s var(--ease); }
.cx:hover .cx__img img{ transform:translateY(-8px) scale(1.05); }
.cx__foot{ position:relative; z-index:2; display:flex; justify-content:space-between; align-items:center; font-family:var(--sans); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:rgba(245,228,199,.72); }
.cx--shell .cx__foot{ color:rgba(43,25,15,.7); }
html[lang="ar"] .cx__foot{ letter-spacing:.03em; }

/* artistic brown/pink Sadu washes (for plain .section blocks) */
.wash{ position:relative; } .wash > *{ position:relative; z-index:1; }
.wash::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background-repeat:repeat; background-size:240px auto; opacity:.13; }
.wash-brown::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background:url("../img/pattern02-brown.svg") repeat; background-size:240px auto; opacity:.16; }
.wash-pink::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background:url("../img/pattern02-pink.svg") repeat; background-size:240px auto; opacity:.14; }
.wash-brown > *, .wash-pink > *{ position:relative; z-index:1; }


/* v6.1 — huge footer text in pink (CONTINUE stays gold outline) */

/* =====================================================================
   PATTERNS OFF — all background patterns removed site-wide (per request)
   ===================================================================== */
body::before,
.surface::before, .raise::before,
.hero__right::before,
.footer::before,
.hwrap::before,
.sadu-divide::before,
.wash-brown::before, .wash-pink::before,
.page-hero::before { background:none !important; content:none !important; }
.band, .sadu-divide { display:none !important; }

/* Dancing Script — script accent font */
:root{ --script:"Dancing Script", cursive; }
.script{ font-family:var(--script); text-transform:none; letter-spacing:0; font-weight:500; }

/* hero headline in Dancing Script (Latin only; Arabic keeps its own face) */
.hero h1.script{ font-family:var(--script); text-transform:none; letter-spacing:0; font-weight:500; line-height:1.0; }
.hero h1.script .l{ overflow:visible; }
.hero h1.script em{ font-style:normal; }
html[lang="ar"] .hero h1.script{ font-family:var(--arabic); text-transform:none; }

.footer > .container{ position:relative; z-index:1; }



/* revert: plain dark page-heroes, no added patterns / parallax (restored) */
.page-hero,.page-hero--p2,.page-hero--p3,.page-hero--p4,.page-hero--p5{ background:var(--ink) url("../img/sadu-motif-2.png") repeat !important; background-size:700px auto !important; }
.page-hero::after{ display:none !important; }
[data-px]{ overflow:visible !important; }
[data-px] > img{ position:static !important; width:100% !important; height:100% !important; transform:none !important; object-fit:cover; }

/* =====================================================================
   PULL-QUOTE → full-bleed parallax band (Souq Waqif scene)
   ===================================================================== */
.quoteband{ position:relative; overflow:hidden; display:flex; align-items:center;
  min-height:clamp(440px,72vh,720px); padding-block:clamp(80px,12vw,160px); background:var(--noir); }
.quoteband__media{ position:absolute; inset:0; z-index:0; }
.quoteband__media img{ position:absolute; left:0; top:-10%; width:100%; height:120%;
  object-fit:cover; object-position:center 60%; will-change:transform; }
.quoteband__scrim{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,rgba(45,26,15,.80),rgba(45,26,15,.60) 45%,rgba(45,26,15,.84)); }
.quoteband .container{ position:relative; z-index:2; }
.quoteband .pull q{ color:var(--cream); text-shadow:0 2px 26px rgba(0,0,0,.55); }
.quoteband .pull q b{ color:var(--gold-bright); }
@media (prefers-reduced-motion:reduce){ .quoteband__media img{ transform:none !important; } }

/* =====================================================================
   FOOTER — PINK THEME (test): pink #B99696 ground, brand-brown text
   ===================================================================== */
.footer--pink{ background:#B99696; color:#2D1A0F; border-top-color:rgba(45,26,15,.22); }
.footer--pink .footer__big{ border-bottom-color:rgba(45,26,15,.18); }
.footer--pink .eyebrow{ color:#2D1A0F; } .footer--pink .eyebrow::before{ background:#2D1A0F; }
.footer--pink .footer__big h2{ color:#2D1A0F; }
.footer--pink .footer__big .out{ -webkit-text-stroke:0; color:#7c6464; opacity:1; }
.footer--pink h4{ color:#2D1A0F; }
.footer--pink .footer__bt{ color:rgba(45,26,15,.80); }
.footer--pink .footer__col a,
.footer--pink .footer__contact li,
.footer--pink .footer__contact a{ color:rgba(45,26,15,.82); }
.footer--pink .footer__col a:hover,
.footer--pink .footer__contact a:hover{ color:#2D1A0F; }
.footer--pink .alink{ color:#2D1A0F; border-bottom-color:#2D1A0F; }
.footer--pink .alink:hover{ color:#8a4030; }
.footer--pink .socials a{ border-color:rgba(45,26,15,.30); color:#2D1A0F; }
.footer--pink .socials a:hover{ border-color:#2D1A0F; background:rgba(45,26,15,.07); color:#2D1A0F; }
.footer--pink .footer__bar{ border-top-color:rgba(45,26,15,.18); color:rgba(45,26,15,.80); }
.footer--pink .footer__logo img{ filter:brightness(.35) saturate(1.45); }

/* hero full-bleed loom photo — scrim keeps cream text + header legible */
.hero::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(96% 66% at 50% 44%, rgba(18,10,5,.46) 0%, rgba(18,10,5,.18) 56%, rgba(18,10,5,0) 100%),
    linear-gradient(180deg, rgba(18,10,5,.86) 0%, rgba(18,10,5,.42) 16%, rgba(18,10,5,.34) 48%, rgba(18,10,5,.64) 100%);
}

/* text slider (marquee) — pink theme (test): rose band, brown outlined text */

/* collections — themed inset frame on each craft image */
#editorial .split__m{ position:relative; }
#editorial .split__m::after{ content:""; position:absolute; inset:14px; border:1px solid var(--gold); z-index:2; pointer-events:none; }


/* footer — Sadu pattern, bottom 50%, uniform low opacity, no fade */
.footer--pink::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:100%; z-index:0; pointer-events:none;
  background:url("../img/footer-pattern02.png") repeat; background-size:700px auto; opacity:.02;
}

/* home crafts slider — same themed inset frame as the collections images */
.hcard::before{ content:""; position:absolute; inset:14px; border:1px solid var(--gold); z-index:3; pointer-events:none; }

/* hero hollow word — legible over the photo (thicker, brighter, dark halo) */
.hero h1 .out{ -webkit-text-stroke:1.4px var(--gold-bright); }

/* full-bleed souq image band (under newsletter) */
.imageband{ position:relative; overflow:hidden; height:clamp(340px,46vh,560px); }
.imageband__media{ position:absolute; inset:0; }
.imageband__media img{ position:absolute; left:0; top:-8%; width:100%; height:116%; object-fit:cover; will-change:transform; }
@media (prefers-reduced-motion:reduce){ .imageband__media img{ transform:none !important; } }

/* newsletter box — more visible over the souq photo */
.quoteband .newsletter{ background:rgba(20,12,6,.62); border-color:var(--gold); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
.quoteband .newsletter input{ color:var(--cream); }
.quoteband .newsletter input::placeholder{ color:var(--cream-soft); }

/* maker image — same gold inset frame as collections/slider */
.wash-pink .split__m{ position:relative; }
.wash-pink .split__m::after{ content:""; position:absolute; inset:14px; border:1px solid var(--gold); z-index:2; pointer-events:none; }

/* shop toolbar — categories (left) + search & sort (right) */
.shopbar{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:clamp(28px,3vw,46px); }
.shopbar .filterbar{ margin:0; }
.shoptools{ display:flex; align-items:center; gap:12px; }
.searchbox{ position:relative; display:flex; align-items:center; }
.searchbox svg{ position:absolute; inset-inline-start:14px; width:16px; height:16px; color:var(--cream-mute); pointer-events:none; }
.searchbox input{ height:46px; padding-inline:40px 16px; background:var(--raise-2); border:1px solid var(--line); color:var(--cream); font-family:var(--sans); font-size:13px; min-width:210px; transition:border-color var(--fast); }
.searchbox input::placeholder{ color:var(--cream-mute); }
.searchbox input:focus{ outline:none; border-color:var(--gold); }
.sortsel{ height:46px; padding-inline:16px 38px; background-color:var(--raise-2); border:1px solid var(--line); color:var(--cream); font-family:var(--sans); font-size:12px; letter-spacing:.06em; text-transform:uppercase; appearance:none; -webkit-appearance:none; cursor:pointer; background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="%23B8A582" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>'); background-repeat:no-repeat; background-position:right 14px center; transition:border-color var(--fast); }
html[dir="rtl"] .sortsel{ background-position:left 14px center; }
.sortsel:focus{ outline:none; border-color:var(--gold); }
.sortsel option{ background:var(--ink); color:var(--cream); }
@media (max-width:820px){ .shopbar{ flex-direction:column; align-items:stretch; } .shoptools{ flex-wrap:wrap; } .searchbox{ flex:1; } .searchbox input{ width:100%; min-width:0; } .sortsel{ flex:1; } }

/* gold inset frame on all editorial split images */
.split__m{ position:relative; }
.split__m::after{ content:""; position:absolute; inset:14px; border:1px solid var(--gold); z-index:2; pointer-events:none; }

/* fix bidi reordering of the emphasized run inside Arabic pull-quotes */
.pull q b{ unicode-bidi:isolate; }

/* journal post images — gold inset frame */
.post__m{ position:relative; display:block; }
.post__m::after{ content:""; position:absolute; inset:12px; border:1px solid var(--gold); z-index:2; pointer-events:none; }

/* Arabic: render accent words solid (hollow stroke breaks cursive joins) */
html[lang="ar"] .out{ -webkit-text-stroke:0 !important; color:var(--gold) !important; opacity:1 !important; }
html[lang="ar"] .out.terra{ color:var(--c-bisht) !important; }
html[lang="ar"] .out.honey{ color:var(--c-honey) !important; }
html[lang="ar"] .out.rose{ color:var(--c-rose) !important; }

/* AR footer accent only — muted rose-brown, full opacity */
html[lang="ar"] .footer--pink .footer__big .out{ color:#7c6464 !important; -webkit-text-stroke:0 !important; opacity:1 !important; }