:root{
  --plum:#2e1a24;
  --plum-2:#3d2230;
  --wine:#6d2b4a;
  --gold:#c9a24b;
  --gold-soft:#e3c98a;
  --cream:#faf6f2;
  --blush:#f3e6e2;
  --charcoal:#1a1216;
  --ink:#2b2129;
  --muted:#8a7b82;
  --line:rgba(201,162,75,.28);
  --shadow:0 24px 60px -24px rgba(46,26,36,.45);
  --serif:"Playfair Display",serif;
  --serif2:"Cormorant Garamond",serif;
  --ar:"Tajawal",sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--ar);
  background:var(--cream);
  color:var(--ink);
  line-height:1.7;
  overflow-x:hidden;
}
html[dir="ltr"] body{font-family:var(--serif2)}
.wrap{max-width:1280px;margin:0 auto;padding:0 28px}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.15}
html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3{font-family:var(--ar);font-weight:700}
.eyebrow{
  font-family:var(--serif2);letter-spacing:.35em;text-transform:uppercase;
  font-size:.72rem;color:var(--gold);font-weight:600;
}
html[dir="rtl"] .eyebrow{font-family:var(--ar);letter-spacing:.18em;font-weight:500}

/* ============ TOP BAR ============ */
.topbar{
  background:var(--charcoal);color:var(--gold-soft);
  font-size:.74rem;letter-spacing:.14em;text-align:center;
  padding:9px 12px;font-family:var(--serif2);text-transform:uppercase;
}
html[dir="rtl"] .topbar{font-family:var(--ar);letter-spacing:.05em;text-transform:none;font-size:.82rem}

/* ============ HEADER ============ */
/* ── international-site suggestion (French site, non-FR visitors) ─────────── */
.geo-toast{
  position:fixed;z-index:950;inset-block-end:24px;inset-inline-start:24px;
  width:min(340px,calc(100vw - 40px));
  /* Two rows: [icon | text | close] then a full-width button — so the message
     gets the whole width instead of being squeezed into one word per line. */
  display:grid;grid-template-columns:auto 1fr auto;
  grid-template-areas:"ic body close" "go go go";
  align-items:center;column-gap:12px;row-gap:13px;padding:16px;
  background:#fff;border:1px solid var(--line,#e7ded9);border-radius:16px;
  box-shadow:0 12px 40px -8px rgba(46,26,36,.28),0 2px 8px rgba(46,26,36,.08);
  transform:translateY(140%);opacity:0;
  transition:transform .5s cubic-bezier(.22,1,.36,1),opacity .4s ease;
}
.geo-toast.show{transform:translateY(0);opacity:1}
.geo-toast .geo-ic{grid-area:ic;font-size:1.5rem}
.geo-toast .geo-body{grid-area:body;min-width:0;line-height:1.45}
.geo-toast .geo-body strong{display:block;color:var(--plum,#2e1a24);font-size:.92rem}
.geo-toast .geo-body span{color:var(--muted,#8a7b82);font-size:.8rem}
.geo-toast .geo-go{grid-area:go;display:flex;align-items:center;justify-content:center;
  width:100%;background:var(--plum,#2e1a24);color:#fff;font-size:.85rem;font-weight:600;
  padding:11px 16px;border-radius:12px;text-decoration:none;transition:background .2s}
.geo-toast .geo-go:hover{background:var(--wine,#6d2b4a)}
.geo-toast .geo-x{grid-area:close;align-self:start;width:26px;height:26px;padding:0;border:none;border-radius:50%;
  background:transparent;color:var(--muted,#8a7b82);display:grid;place-items:center;cursor:pointer;transition:.2s}
.geo-toast .geo-x svg{width:15px;height:15px}
.geo-toast .geo-x:hover{background:var(--blush,#f3e6e2);color:var(--plum,#2e1a24)}
@media(max-width:600px){.geo-toast{inset-inline:12px;inset-block-end:12px;width:auto}}

/* Scoped to the page's own top-level header. A bare `header{position:sticky}`
   also caught nested <header> elements (e.g. a page hero), making them stick
   and overlap the content on scroll. */
body > header{
  position:sticky;top:0;z-index:60;
  background:rgba(250,246,242,.85);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  transition:.3s;
}
.nav{display:flex;align-items:center;justify-content:space-between;height:92px}
/* ===== BRAND LOGO LOCKUP (recreation of ORCHIDE COUTURE mark) ===== */
.brand{display:flex;flex-direction:column;align-items:center;gap:0;line-height:1;text-align:center}
.mono{position:relative;display:inline-flex;align-items:center;justify-content:center;direction:ltr;font-family:"Cinzel",serif;font-weight:500;font-size:1.55rem;line-height:1;margin-bottom:-3px}
.mono span{
  background:linear-gradient(180deg,#ffffff 0%,#ecedf1 15%,#b7b8bd 34%,#77787d 50%,#9fa0a5 60%,#f2f2f5 80%,#82838a 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  text-shadow:0 1px 1px rgba(0,0,0,.22);
}
.mono .o{position:relative;z-index:2}
.mono .c{margin-left:-.46em;position:relative;z-index:1;font-size:1.12em}
.brand .word{display:flex;flex-direction:column;align-items:center;line-height:1}
.brand .logo{
  font-family:"Cinzel",serif;font-weight:500;font-size:1.3rem;letter-spacing:.12em;
  background:linear-gradient(180deg,#fff4cf 0%,#f2d789 20%,#c9a24b 44%,#8f6813 55%,#d9b45c 72%,#f7e7a6 90%,#a9801f 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  text-shadow:0 1px 1px rgba(0,0,0,.25);
}
.brand .logo .acc{
  font-family:"Cinzel",serif;font-style:normal;font-weight:inherit;text-transform:none;
  font-size:1em;line-height:1;vertical-align:baseline;
  background:linear-gradient(180deg,#fff4cf 0%,#f2d789 20%,#c9a24b 44%,#8f6813 55%,#d9b45c 72%,#f7e7a6 90%,#a9801f 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.brand .sub{
  font-family:"Pinyon Script",cursive;font-size:1.28rem;letter-spacing:.01em;margin-top:-1px;line-height:1;
  position:relative;padding:0 .35em .12em;
  background:linear-gradient(180deg,#ffffff 0%,#e7e8ec 20%,#a9aab0 48%,#7c7d83 58%,#dcdde1 82%,#8f9096 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  text-shadow:0 1px 0 rgba(255,255,255,.4),0 1.5px 2px rgba(0,0,0,.22);
}
html[dir="rtl"] .brand .sub{font-family:"Pinyon Script",cursive;letter-spacing:.01em}
/* flourish line under Couture (like the logo swash) */
.brand .sub::after{content:"";position:absolute;left:50%;bottom:-2px;transform:translateX(-50%);
  width:78%;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,#b9babf 18%,#efeff2 50%,#b9babf 82%,transparent);}
/* dark-background variants (footer / mobile) */
.brand.on-dark .logo{filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.brand.on-dark .sub{background:linear-gradient(180deg,#ffffff 0%,#f0f0f3 22%,#c6c7cc 52%,#9a9ba1 62%,#eeeef1 85%,#b4b5bb 100%);-webkit-background-clip:text;background-clip:text}
.brand.lg .mono{font-size:2.6rem}
.brand.lg .logo{font-size:1.7rem}
.brand.lg .sub{font-size:1.4rem}
/* HEADER: OC placed to the side (right in RTL) of the wordmark */
/* Logo follows reading direction: OC leads on the right in Arabic, on the left in English */
header .brand{flex-direction:row;align-items:center;gap:13px}
header .brand .mono{margin-bottom:0;font-size:1.9rem}
.menu{display:flex;gap:38px;list-style:none}
.menu a{font-size:.9rem;letter-spacing:.06em;color:var(--ink);position:relative;padding:6px 0;transition:.25s}
.menu a::after{content:"";position:absolute;bottom:0;inset-inline:0;height:1.5px;background:var(--gold);transform:scaleX(0);transition:.3s;transform-origin:center}
.menu a:hover{color:var(--wine)}
.menu a:hover::after{transform:scaleX(1)}
.actions{display:flex;align-items:center;gap:18px}
.icon-btn{background:none;border:none;cursor:pointer;color:var(--plum);display:grid;place-items:center;width:40px;height:40px;border-radius:50%;transition:.25s;position:relative}
.icon-btn:hover{background:var(--blush)}
.icon-btn svg{width:21px;height:21px}
.badge{position:absolute;top:4px;inset-inline-end:4px;background:var(--wine);color:#fff;font-size:.6rem;width:16px;height:16px;border-radius:50%;display:grid;place-items:center;font-family:var(--ar)}
.lang{
  border:1px solid var(--line);background:transparent;cursor:pointer;
  font-family:var(--serif2);font-size:.78rem;letter-spacing:.12em;
  padding:8px 15px;border-radius:40px;color:var(--plum);transition:.25s;
  display:flex;align-items:center;gap:7px;
}
html[dir="rtl"] .lang{font-family:var(--ar)}
.lang:hover{background:var(--plum);color:var(--gold-soft);border-color:var(--plum)}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px}
.burger span{width:24px;height:2px;background:var(--plum);transition:.3s}

/* ============ HERO ============ */
/* Height now lives in hero.css (svh with a vh fallback) — see HeroUI. */
.hero{position:relative;display:flex;align-items:center;overflow:hidden;background:var(--plum)}
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-bg .slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.8s ease;z-index:1;transform:scale(1.05)}
.hero-bg .slide.active{opacity:.55;animation:kenburns 7s ease forwards}
@keyframes kenburns{from{transform:scale(1.05)}to{transform:scale(1.14)}}
.hero-bg::after{content:"";position:absolute;inset:0;z-index:2;background:
  linear-gradient(120deg,rgba(46,26,36,.92) 0%,rgba(46,26,36,.55) 45%,rgba(46,26,36,.15) 100%)}
html[dir="ltr"] .hero-bg::after{background:linear-gradient(240deg,rgba(46,26,36,.92) 0%,rgba(46,26,36,.55) 45%,rgba(46,26,36,.15) 100%)}
.hero-inner{position:relative;z-index:2;max-width:640px;padding:60px 0;color:var(--cream)}
.hero .eyebrow{color:var(--gold-soft)}
.hero h1{font-size:clamp(2.6rem,6vw,4.6rem);color:#fff;margin:18px 0 22px;letter-spacing:.01em}
.hero h1 em{font-style:italic;color:var(--gold-soft);font-family:var(--serif2)}
html[dir="rtl"] .hero h1 em{font-family:var(--ar);font-style:normal}
.hero p{font-size:1.12rem;color:rgba(255,255,255,.82);max-width:480px;margin-bottom:34px}
.btn{
  display:inline-flex;align-items:center;gap:11px;cursor:pointer;border:none;
  font-family:var(--serif2);letter-spacing:.14em;text-transform:uppercase;font-size:.82rem;
  padding:16px 34px;border-radius:44px;transition:.3s;font-weight:600;
}
html[dir="rtl"] .btn{font-family:var(--ar);letter-spacing:.03em;text-transform:none;font-size:.95rem}
.btn-gold{background:var(--gold);color:var(--charcoal)}
.btn-gold:hover{background:var(--gold-soft);transform:translateY(-2px);box-shadow:0 12px 30px -10px rgba(201,162,75,.6)}
.btn-outline{background:transparent;border:1.5px solid rgba(255,255,255,.5);color:#fff}
.btn-outline:hover{background:#fff;color:var(--plum)}
.hero-cta{display:flex;gap:16px;flex-wrap:wrap}
/* Centred with physical left/right + auto margins: mixing the logical
   inset-inline-start with a physical translateX pushed this off-centre in RTL. */
.hero-scroll{position:absolute;bottom:26px;left:0;right:0;margin-inline:auto;width:max-content;z-index:3;color:rgba(255,255,255,.6);font-family:var(--serif2);font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:8px}
html[dir="rtl"] .hero-scroll{font-family:var(--ar);letter-spacing:.1em}
.hero-scroll .line{width:1px;height:40px;background:linear-gradient(var(--gold-soft),transparent);animation:drop 1.8s infinite}
@keyframes drop{0%{opacity:0;transform:scaleY(.2)}50%{opacity:1}100%{opacity:0;transform:scaleY(1)}}

/* ============ MARQUEE ============ */
.marquee{background:var(--charcoal);color:var(--gold-soft);overflow:hidden;padding:16px 0;border-block:1px solid rgba(201,162,75,.2)}
.marquee-track{display:flex;gap:60px;white-space:nowrap;animation:scroll 26s linear infinite;font-family:var(--serif2);letter-spacing:.28em;text-transform:uppercase;font-size:.82rem}
html[dir="rtl"] .marquee-track{font-family:var(--ar);letter-spacing:.12em;text-transform:none;font-size:.95rem;animation-direction:reverse}
.marquee-track span{display:flex;align-items:center;gap:60px}
.marquee-track span::after{content:"✦";color:var(--gold)}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ============ SECTION SHELL ============ */
section{padding:96px 0}
.sec-head{text-align:center;max-width:640px;margin:0 auto 56px}
.sec-head h2{font-size:clamp(2rem,4vw,3rem);color:var(--plum);margin:14px 0}
.sec-head p{color:var(--muted);font-size:1.05rem}
.divider{width:54px;height:1px;background:var(--gold);margin:16px auto;position:relative}
.divider::before,.divider::after{content:"";position:absolute;top:50%;width:5px;height:5px;background:var(--gold);border-radius:50%;transform:translateY(-50%)}
.divider::before{inset-inline-start:-12px}.divider::after{inset-inline-end:-12px}

/* ============ COLLECTIONS ============ */
.collections{background:linear-gradient(var(--cream),var(--blush))}
.col-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.col-card{position:relative;height:460px;border-radius:6px;overflow:hidden;cursor:pointer;box-shadow:var(--shadow)}
.col-card img{width:100%;height:100%;object-fit:cover;transition:.8s}
.col-card:hover img{transform:scale(1.08)}
.col-card::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 40%,rgba(46,26,36,.85))}
.col-card .cap{position:absolute;bottom:0;inset-inline:0;padding:30px;color:#fff;z-index:2}
.col-card .cap .eyebrow{color:var(--gold-soft)}
.col-card .cap h3{font-size:1.7rem;margin-top:8px;color:#fff}
.col-card .cap .go{margin-top:12px;font-family:var(--serif2);letter-spacing:.14em;font-size:.78rem;text-transform:uppercase;opacity:.85;display:inline-flex;align-items:center;gap:8px;transition:.3s}
html[dir="rtl"] .col-card .cap .go{font-family:var(--ar);letter-spacing:0;text-transform:none}
.col-card:hover .cap .go{gap:14px;color:var(--gold-soft)}

/* ============ CATALOG ============ */
#catalog{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--cream),#f6ece6)}
#catalog::before,#catalog::after{content:"";position:absolute;border-radius:50%;filter:blur(90px);z-index:0;opacity:.55}
#catalog::before{width:460px;height:460px;background:radial-gradient(circle,#e7b9c8,transparent 70%);top:8%;inset-inline-start:-120px}
#catalog::after{width:520px;height:520px;background:radial-gradient(circle,#d9c07a,transparent 70%);bottom:0;inset-inline-end:-140px}
#catalog .wrap{position:relative;z-index:2}
.filters{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:44px}
.chip{
  border:1px solid rgba(255,255,255,.7);cursor:pointer;
  background:rgba(255,255,255,.45);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  padding:10px 22px;border-radius:40px;font-family:var(--ar);font-size:.9rem;
  color:var(--ink);transition:.25s;letter-spacing:.02em;box-shadow:0 4px 14px -8px rgba(46,26,36,.3);
}
html[dir="ltr"] .chip{font-family:var(--serif2);letter-spacing:.08em}
.chip:hover{border-color:var(--gold)}
.chip.active{background:var(--plum);color:var(--gold-soft);border-color:var(--plum)}
.prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;position:relative;z-index:2}
.card{
  position:relative;border-radius:16px;overflow:hidden;transition:.45s cubic-bezier(.16,1,.3,1);cursor:pointer;
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 10px 30px -18px rgba(46,26,36,.35), inset 0 1px 0 rgba(255,255,255,.6);
}
.card::before{content:"";position:absolute;inset:0;border-radius:16px;padding:1px;pointer-events:none;z-index:3;
  background:linear-gradient(140deg,rgba(255,255,255,.9),rgba(201,162,75,.35) 45%,rgba(255,255,255,0) 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;}
.card:hover{transform:translateY(-10px);box-shadow:0 34px 60px -26px rgba(46,26,36,.5), inset 0 1px 0 rgba(255,255,255,.7);border-color:rgba(201,162,75,.5)}
.card-img{position:relative;height:340px;overflow:hidden;background:var(--blush);border-radius:16px 16px 0 0}
.card-img img{width:100%;height:100%;object-fit:cover;transition:.7s}
.card:hover .card-img img{transform:scale(1.07)}
.tag{position:absolute;top:14px;inset-inline-start:14px;background:var(--gold);color:var(--charcoal);font-family:var(--serif2);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;padding:5px 12px;border-radius:30px;font-weight:600}
html[dir="rtl"] .tag{font-family:var(--ar);letter-spacing:0;text-transform:none;font-size:.72rem}
.tag.new{background:var(--wine);color:#fff}
.wish{position:absolute;top:12px;inset-inline-end:12px;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.9);border:none;cursor:pointer;display:grid;place-items:center;opacity:0;transform:translateY(-6px);transition:.3s}
.card:hover .wish{opacity:1;transform:translateY(0)}
.wish svg{width:18px;height:18px;color:var(--wine)}
.quick{position:absolute;bottom:0;inset-inline:0;background:rgba(46,26,36,.92);color:var(--gold-soft);text-align:center;padding:13px;font-family:var(--serif2);letter-spacing:.14em;text-transform:uppercase;font-size:.76rem;transform:translateY(100%);transition:.35s}
html[dir="rtl"] .quick{font-family:var(--ar);letter-spacing:0;text-transform:none;font-size:.85rem}
.card:hover .quick{transform:translateY(0)}
.card-body{padding:20px 20px 24px;text-align:center}
.card-body .name{font-family:var(--serif);font-size:1.12rem;color:var(--plum);margin-bottom:5px}
html[dir="rtl"] .card-body .name{font-family:var(--ar);font-weight:700}
.card-body .cat{font-size:.78rem;color:var(--muted);letter-spacing:.05em;margin-bottom:11px}
.price{font-family:var(--serif2);color:var(--wine);font-size:1.15rem;font-weight:600;letter-spacing:.04em}
html[dir="rtl"] .price{font-family:var(--ar)}
.price .old{color:var(--muted);text-decoration:line-through;font-size:.9rem;margin-inline-start:8px}

/* ============ ATELIER SPLIT ============ */
.atelier{background:var(--plum);color:var(--cream);overflow:hidden}
.split{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch}
.split-img{min-height:520px}
.split-img img{width:100%;height:100%;object-fit:cover}
.split-txt{padding:80px 70px;display:flex;flex-direction:column;justify-content:center}
.split-txt .eyebrow{color:var(--gold-soft)}
.split-txt h2{font-size:clamp(2rem,3.5vw,2.9rem);color:#fff;margin:16px 0 22px}
.split-txt p{color:rgba(255,255,255,.78);margin-bottom:18px;font-size:1.05rem}
.stats{display:flex;gap:44px;margin-top:26px}
.stat .n{font-family:var(--serif);font-size:2.4rem;color:var(--gold-soft)}
html[dir="rtl"] .stat .n{font-family:var(--ar);font-weight:700}
.stat .l{font-size:.82rem;color:rgba(255,255,255,.6);letter-spacing:.08em}

/* ============ DASHBOARD PREVIEW ============ */
.dash{background:var(--blush)}
.dash-frame{background:#fff;border-radius:12px;box-shadow:var(--shadow);overflow:hidden;border:1px solid rgba(46,26,36,.06)}
.dash-top{background:var(--charcoal);padding:14px 22px;display:flex;align-items:center;gap:9px}
.dash-top .dot{width:11px;height:11px;border-radius:50%}
.dash-top .url{margin-inline-start:16px;background:rgba(255,255,255,.08);color:var(--gold-soft);font-family:var(--serif2);font-size:.74rem;padding:5px 16px;border-radius:20px;letter-spacing:.06em}
.dash-body{display:grid;grid-template-columns:220px 1fr}
.dash-side{background:var(--plum);color:var(--cream);padding:26px 18px;min-height:440px}
.dash-side .b{font-family:var(--serif);color:var(--gold-soft);letter-spacing:.18em;font-size:1rem;margin-bottom:26px;text-align:center}
html[dir="rtl"] .dash-side .b{font-family:var(--ar);font-weight:700}
.dash-side ul{list-style:none}
.dash-side li{padding:12px 14px;border-radius:8px;font-size:.9rem;color:rgba(255,255,255,.7);margin-bottom:4px;display:flex;align-items:center;gap:11px;transition:.2s}
.dash-side li.on,.dash-side li:hover{background:rgba(201,162,75,.16);color:var(--gold-soft)}
.dash-main{padding:30px}
.dash-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:26px}
.kpi{background:linear-gradient(150deg,rgba(255,255,255,.9),rgba(243,230,226,.6));border:1px solid rgba(201,162,75,.35);border-radius:12px;padding:18px;box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.kpi .l{font-size:.76rem;color:var(--muted);letter-spacing:.04em}
.kpi .n{font-family:var(--serif);font-size:1.7rem;color:var(--plum);margin-top:6px}
html[dir="rtl"] .kpi .n{font-family:var(--ar);font-weight:700}
.kpi .d{font-size:.72rem;color:#3f9d6b;margin-top:4px}
.dash-table{width:100%;border-collapse:collapse;font-size:.86rem}
.dash-table th{text-align:start;padding:12px 10px;color:var(--muted);font-weight:500;border-bottom:2px solid var(--line);font-size:.78rem;letter-spacing:.04em}
.dash-table td{padding:13px 10px;border-bottom:1px solid rgba(46,26,36,.07);color:var(--ink)}
.dash-table .thumb{width:42px;height:52px;border-radius:5px;object-fit:cover}
.pill{font-size:.72rem;padding:4px 12px;border-radius:20px;font-weight:500}
.pill.pub{background:#e6f4ec;color:#2f8a5b}
.pill.dr{background:#fdf0e3;color:#c2802e}
.mini-btn{border:1px solid var(--line);background:#fff;padding:5px 12px;border-radius:6px;font-size:.78rem;cursor:pointer;color:var(--wine);font-family:var(--ar)}
html[dir="ltr"] .mini-btn{font-family:var(--serif2)}

/* ============ EVENTS ============ */
.events-sec{background:linear-gradient(180deg,#eef0f2,#f7f8fa)}
.events-head{margin-bottom:44px}
.events-head h2{font-size:clamp(2rem,4vw,2.9rem);color:var(--plum)}
.events-head .ul{width:64px;height:3px;background:var(--charcoal);border-radius:3px;margin-top:14px}
.events-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:30px}
.event{
  display:block;color:inherit;text-decoration:none;
  background:#fff;border-radius:14px;overflow:hidden;cursor:pointer;
  box-shadow:0 20px 44px -26px rgba(26,20,22,.4);transition:.4s cubic-bezier(.16,1,.3,1);
}
.event:hover{transform:translateY(-8px);box-shadow:0 34px 58px -28px rgba(26,20,22,.5)}
.event-img{height:250px;overflow:hidden;background:var(--blush)}
.event-img img{width:100%;height:100%;object-fit:cover;transition:.7s}
.event:hover .event-img img{transform:scale(1.06)}
.event-info{padding:26px 26px 30px}
.event-label{display:block;text-align:center;letter-spacing:.3em;text-transform:uppercase;font-size:.7rem;color:var(--muted);font-weight:600;margin-bottom:16px}
html[dir="rtl"] .event-label{letter-spacing:.14em}
.event-info h3{text-align:center;font-size:1.28rem;color:var(--plum);line-height:1.4;min-height:2.4em;margin-bottom:24px;font-family:var(--serif)}
html[dir="rtl"] .event-info h3{font-family:var(--ar);font-weight:700}
.event-date{display:flex;align-items:center;gap:13px}
.event-date .d{font-size:2.4rem;font-weight:700;color:var(--charcoal);line-height:1;font-family:var(--serif)}
html[dir="rtl"] .event-date .d{font-family:var(--ar)}
.event-date .my{display:flex;flex-direction:column;line-height:1.25}
.event-date .m{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
.event-date .y{font-size:.92rem;font-weight:700;color:var(--ink)}
@media(max-width:600px){
  .event-img{height:210px}
}
/* ============ NEWSLETTER / FOOTER ============ */
.news{background:var(--charcoal);color:var(--cream);text-align:center}
.news h2{color:#fff;font-size:clamp(1.8rem,3vw,2.6rem);margin-bottom:14px}
.news p{color:rgba(255,255,255,.7);max-width:460px;margin:0 auto 30px}
.news-form{display:flex;gap:12px;max-width:480px;margin:0 auto;flex-wrap:wrap;justify-content:center}
.news-form input{flex:1;min-width:220px;padding:15px 22px;border-radius:44px;border:1px solid rgba(201,162,75,.3);background:rgba(255,255,255,.05);color:#fff;font-family:var(--ar);font-size:.95rem}
html[dir="ltr"] .news-form input{font-family:var(--serif2)}
.news-form input::placeholder{color:rgba(255,255,255,.45)}
footer{background:var(--plum);color:rgba(255,255,255,.7);padding:70px 0 30px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;margin-bottom:50px}
.foot-grid h4{font-family:var(--serif2);letter-spacing:.18em;text-transform:uppercase;font-size:.82rem;color:var(--gold-soft);margin-bottom:20px}
html[dir="rtl"] .foot-grid h4{font-family:var(--ar);letter-spacing:.05em;text-transform:none;font-size:.95rem}
.foot-grid .logo{font-family:var(--serif);font-size:1.6rem;letter-spacing:.2em;color:#fff;margin-bottom:14px}
.foot-grid p{font-size:.92rem;line-height:1.9}
.foot-grid ul{list-style:none}
.foot-grid li{margin-bottom:11px;font-size:.92rem;transition:.2s}
.foot-grid li:hover{color:var(--gold-soft)}
.socials{display:flex;gap:12px;margin-top:18px}
.socials a{width:40px;height:40px;border:1px solid rgba(201,162,75,.3);border-radius:50%;display:grid;place-items:center;transition:.25s}
.socials a:hover{background:var(--gold);color:var(--charcoal);border-color:var(--gold)}
.socials svg{width:18px;height:18px}
.copy{border-top:1px solid rgba(201,162,75,.18);padding-top:24px;text-align:center;font-size:.82rem;color:rgba(255,255,255,.5)}
.dev-credit{text-align:center;font-size:.76rem;color:rgba(255,255,255,.38);margin-top:8px;letter-spacing:.02em}
.dev-credit a{color:var(--gold-soft);border-bottom:1px solid transparent;transition:.25s;padding-bottom:1px}
.dev-credit a:hover{border-bottom-color:var(--gold-soft)}

/* ============ MODAL ============ */
.modal{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:24px}
.modal.open{display:flex}
.modal-bg{position:absolute;inset:0;background:rgba(26,18,22,.7);backdrop-filter:blur(4px)}
.modal-card{position:relative;background:#fff;border-radius:10px;max-width:900px;width:100%;max-height:90vh;overflow:auto;display:grid;grid-template-columns:1fr 1fr;box-shadow:var(--shadow)}
.modal-card .m-img{min-height:100%;background:var(--blush)}
.modal-card .m-img img{width:100%;height:100%;object-fit:cover;min-height:420px}
.m-info{padding:44px 40px}
.m-info .eyebrow{color:var(--gold)}
.m-info h3{font-size:2rem;color:var(--plum);margin:12px 0}
.m-info .m-price{font-family:var(--serif2);color:var(--wine);font-size:1.5rem;margin:8px 0 20px;font-weight:600}
html[dir="rtl"] .m-info .m-price{font-family:var(--ar)}
.m-info p{color:var(--muted);margin-bottom:22px}
.sizes{display:flex;gap:10px;margin-bottom:26px;flex-wrap:wrap}
.sizes button{width:46px;height:46px;border:1px solid var(--line);background:#fff;border-radius:8px;cursor:pointer;font-family:var(--serif2);transition:.2s}
.sizes button:hover,.sizes button.sel{background:var(--plum);color:var(--gold-soft);border-color:var(--plum)}
.modal-close{position:absolute;top:16px;inset-inline-end:16px;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.9);border:none;cursor:pointer;font-size:1.3rem;z-index:5;display:grid;place-items:center;color:var(--plum)}

/* ============ REVEAL ============ */
.reveal{opacity:0;transform:translateY(30px);transition:.8s cubic-bezier(.16,1,.3,1)}
.reveal.show{opacity:1;transform:none}

/* ============ MOBILE MENU ============ */
.mobile-menu{position:fixed;inset:0;z-index:80;background:var(--plum);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;transform:translateX(100%);transition:.4s;visibility:hidden}
html[dir="ltr"] .mobile-menu{transform:translateX(-100%)}
/* The open rules must out-specify the html[dir="ltr"] .mobile-menu selector
   above (0-1-1). Plain `.mobile-menu.open` (0-2-0) beats it in RTL but — because
   the LTR rule is qualified by html[dir="ltr"] — an equally qualified selector
   is needed in LTR, or the drawer stays shoved off-screen and the More button
   appears dead. This is exactly what happened: worked in Arabic, silent in English. */
.mobile-menu.open,
html[dir="ltr"] .mobile-menu.open,
html[dir="rtl"] .mobile-menu.open{transform:none;visibility:visible}
.mobile-menu a{color:var(--cream);font-family:var(--serif);font-size:1.6rem;padding:12px}
html[dir="rtl"] .mobile-menu a{font-family:var(--ar)}
.mobile-menu .mclose{position:absolute;top:26px;inset-inline-end:26px;background:none;border:none;color:var(--gold-soft);font-size:2rem;cursor:pointer}

/* ============ RESPONSIVE ============ */
@media(max-width:1024px){
  .prod-grid{grid-template-columns:repeat(3,1fr)}
  .dash-cards{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:860px){
  .menu{display:none}
  .burger{display:flex}
  .col-grid{grid-template-columns:1fr;max-width:440px;margin:0 auto}
  .split{grid-template-columns:1fr}
  .split-img{min-height:340px;order:-1}
  .split-txt{padding:54px 32px}
  .dash-body{grid-template-columns:1fr}
  .dash-side{display:none}
  .modal-card{grid-template-columns:1fr}
  .modal-card .m-img img{min-height:260px}
  section{padding:66px 0}
  .actions .lang span.lng-txt{display:none}
}
@media(max-width:600px){
  .prod-grid{grid-template-columns:repeat(2,1fr)}
  .card-img{height:230px}
  .wrap{padding:0 18px}
  .dash-cards{grid-template-columns:1fr 1fr}
  .dash-table th:nth-child(4),.dash-table td:nth-child(4){display:none}
  .stats{gap:26px}
  .hero{min-height:78vh}
}


/* ── language suggestion toast ────────────────────────────────────────────
   A floating card in the bottom corner, not a full-width bar. The old bar
   spanned the screen and read as a system warning; a contained card reads as
   a quiet, optional offer — which is what it is.

   Fixed-position so it overlays rather than displacing content: a element that
   pushes the page down registers as Cumulative Layout Shift, which Google
   measures. It also starts translated off-screen and eases in, so it never
   competes with the page's own first paint. */
.lang-toast{
  position:fixed;z-index:950;
  inset-block-end:24px;inset-inline-end:24px;
  width:min(340px, calc(100vw - 40px));
  /* Two rows: [globe | text | close] then a full-width switch button. Giving
     the message its own row stops the title from wrapping into a cramped
     three-line block, and the CTA reads clearly as the primary action. */
  display:grid;
  grid-template-columns:auto 1fr auto;
  grid-template-areas:
    "globe body  close"
    "switch switch switch";
  align-items:center;
  column-gap:13px;row-gap:13px;
  padding:16px;
  background:#fff;
  border:1px solid var(--line,#e7ded9);
  border-radius:16px;
  box-shadow:0 12px 40px -8px rgba(46,26,36,.28), 0 2px 8px rgba(46,26,36,.08);
  /* Off-screen and faded until .show; transform+opacity only, both composited. */
  transform:translateY(140%);opacity:0;
  transition:transform .5s cubic-bezier(.22,1,.36,1), opacity .4s ease;
}
.lang-toast.show{transform:translateY(0);opacity:1}

.lang-toast .lt-globe{
  grid-area:globe;
  width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;
  background:linear-gradient(160deg,var(--blush,#f3e6e2),#fff);
  color:var(--wine,#6d2b4a);
}
.lang-toast .lt-globe svg{width:22px;height:22px}

.lang-toast .lt-body{grid-area:body;min-width:0}
.lang-toast .lt-title{
  margin:0;font-size:.92rem;font-weight:600;color:var(--plum,#2e1a24);line-height:1.35;
}
.lang-toast .lt-sub{
  margin:3px 0 0;font-size:.78rem;color:var(--muted,#8a7b82);line-height:1.4;
}

/* Full-width CTA on its own row — the clear primary action of the toast. */
.lang-toast .lt-switch{
  grid-area:switch;
  display:flex;align-items:center;justify-content:center;
  width:100%;padding:11px 16px;border-radius:12px;
  background:var(--plum,#2e1a24);color:#fff;
  font-size:.85rem;font-weight:600;white-space:nowrap;
  text-decoration:none;transition:background .2s,transform .2s;
}
.lang-toast .lt-switch:hover{background:var(--wine,#6d2b4a);transform:translateY(-1px)}

/* A clean circular dismiss in the top corner of the row. */
.lang-toast .lt-x{
  grid-area:close;align-self:start;
  width:28px;height:28px;padding:0;border:none;border-radius:50%;
  background:transparent;color:var(--muted,#8a7b82);
  display:grid;place-items:center;cursor:pointer;transition:.2s;
}
.lang-toast .lt-x svg{width:15px;height:15px}
.lang-toast .lt-x:hover{background:var(--blush,#f3e6e2);color:var(--plum,#2e1a24)}

/* On phones it becomes a bottom sheet — full width, flat bottom, so it reads
   as part of the device edge instead of a floating rectangle on a small screen. */
@media (max-width:600px){
  .lang-toast{
    inset-inline:12px;inset-block-end:12px;width:auto;
    border-radius:16px;padding:15px;column-gap:12px;row-gap:12px;
  }
  /* Sit above the bottom navigation bar when it is enabled. */
  body.has-mbar .lang-toast{inset-block-end:calc(var(--mbar-h,62px) + 12px)}
}

@media (prefers-reduced-motion: reduce){
  .lang-toast{transition:opacity .3s ease}
  .lang-toast:not(.show){transform:none}
}