/* ===========================================================
   MAJESTY HOME — Design tokens
   Palette: matte black #0a0a0a / charcoal #141412 / champagne gold #C9A24C
   accent gold bright #E7C878 / ivory text #F3EEE4 / muted #9A9488
   Display: Cormorant Garamond · Body: Jost · Arabic: Tajawal
=========================================================== */
:root{
  --black:#0a0a0a;
  --charcoal:#131210;
  --charcoal-2:#1b1917;
  --gold:#C9A24C;
  --gold-bright:#E9CC85;
  --ivory:#F3EEE4;
  --muted:#9A9488;
  --line: rgba(201,162,76,0.25);
  --serif: 'Cormorant Garamond', serif;
  --sans: 'Jost', sans-serif;
  --ar: 'Tajawal', sans-serif;
  --ease: cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--black);
  color:var(--ivory);
  font-family:var(--sans);
  font-weight:300;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
html[data-lang="ar"] body{ font-family:var(--ar); direction:rtl; }
html[data-lang="ar"] .serif{ font-family:var(--ar); }

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.1; letter-spacing:.01em;}
::selection{ background:var(--gold); color:var(--black); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

/* ---------- Loader ---------- */
#loader{
  position:fixed; inset:0; z-index:9999; background:var(--black);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .9s var(--ease), visibility .9s var(--ease);
}
#loader.hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.loader-inner{ text-align:center; }
.loader-logo{ width:120px; margin:0 auto 24px; filter:drop-shadow(0 0 20px rgba(201,162,76,.35)); animation:pulseGlow 2.2s ease-in-out infinite; }
.loader-bar{ width:180px; height:1px; background:rgba(255,255,255,.12); margin:0 auto; overflow:hidden; }
.loader-bar span{ display:block; height:100%; width:0%; background:var(--gold); animation:loadBar 1.6s var(--ease) forwards; }
@keyframes loadBar{ to{ width:100%; } }
@keyframes pulseGlow{ 0%,100%{ opacity:.85; } 50%{ opacity:1; } }

/* ---------- Cursor glow ---------- */
#cursor-glow{
  position:fixed; width:420px; height:420px; border-radius:50%; pointer-events:none; z-index:1;
  background:radial-gradient(circle, rgba(201,162,76,.10), transparent 65%);
  transform:translate(-50%,-50%); left:50%; top:30%;
  transition:opacity .4s ease; opacity:0;
}
@media (hover:hover){ #cursor-glow{ opacity:1; } }

/* ---------- Header ---------- */
#site-header{
  position:fixed; top:0; left:0; right:0; z-index:500;
  padding:22px 5%;
  display:flex; align-items:center;
  transition:background .5s var(--ease), padding .5s var(--ease), border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
#site-header.scrolled{
  background:rgba(10,10,10,.86); backdrop-filter:blur(14px);
  padding:14px 5%; border-color:var(--line);
}
.header-inner{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand img{ height:38px; transition:height .5s var(--ease); }
#site-header.scrolled .brand img{ height:32px; }
#main-nav{ display:flex; gap:36px; }
#main-nav a{
  font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--ivory);
  position:relative; padding-bottom:4px; opacity:.85; transition:opacity .3s;
}
#main-nav a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--gold);
  transition:width .35s var(--ease);
}
#main-nav a:hover{ opacity:1; }
#main-nav a:hover::after{ width:100%; }

.header-actions{ display:flex; align-items:center; gap:18px; }
.lang-switch{ display:flex; gap:2px; border:1px solid var(--line); border-radius:20px; padding:3px; }
.lang-switch button{
  background:none; border:none; color:var(--muted); font-family:var(--sans); font-size:11px; letter-spacing:.08em;
  padding:5px 10px; border-radius:16px; cursor:pointer; transition:all .3s var(--ease);
}
.lang-switch button.active{ background:var(--gold); color:var(--black); }
.btn-order-mini{
  font-size:12px; letter-spacing:.1em; text-transform:uppercase; border:1px solid var(--gold);
  padding:9px 18px; border-radius:2px; transition:all .35s var(--ease);
}
.btn-order-mini:hover{ background:var(--gold); color:var(--black); }

#burger{ display:none; background:none; border:none; flex-direction:column; gap:5px; cursor:pointer; }
#burger span{ width:24px; height:1px; background:var(--ivory); }

/* ---------- Buttons ---------- */
.btn-gold, .btn-ghost{
  display:inline-block; font-size:13px; letter-spacing:.12em; text-transform:uppercase;
  padding:16px 34px; border-radius:2px; transition:all .4s var(--ease); cursor:pointer; border:1px solid transparent;
}
.btn-gold{ background:var(--gold); color:var(--black); }
.btn-gold:hover{ background:var(--gold-bright); transform:translateY(-2px); box-shadow:0 10px 30px rgba(201,162,76,.25); }
.btn-ghost{ border-color:rgba(243,238,228,.35); color:var(--ivory); }
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold); }
.btn-gold.small, .btn-ghost.small{ padding:12px 22px; font-size:11px; }

/* ---------- Hero ---------- */
#hero{ position:relative; height:100vh; min-height:640px; display:flex; align-items:flex-end; overflow:hidden; }
.hero-media{ position:absolute; inset:0; }
.hero-media video{ width:100%; height:100%; object-fit:cover; transform:scale(1.08); animation:heroZoom 18s ease-out forwards; }
@keyframes heroZoom{ to{ transform:scale(1); } }
.hero-veil{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,10,10,.55) 0%, rgba(10,10,10,.35) 40%, rgba(10,10,10,.92) 100%);
}
.hero-content{ position:relative; z-index:2; padding:0 5% 110px; max-width:820px; }
.eyebrow{
  font-size:12px; letter-spacing:.28em; text-transform:uppercase; color:var(--gold);
  margin-bottom:18px; display:block;
}
#hero h1{ font-size:clamp(40px, 7vw, 84px); color:var(--ivory); margin-bottom:22px; }
.hero-sub{ font-size:17px; color:var(--muted); max-width:520px; margin-bottom:38px; line-height:1.7; }
.hero-cta{ display:flex; gap:18px; flex-wrap:wrap; }
.hero-scroll{
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%); z-index:2;
  width:1px; height:60px; background:rgba(243,238,228,.25);
}
.hero-scroll span{
  position:absolute; top:0; left:-2px; width:5px; height:5px; border-radius:50%; background:var(--gold);
  animation:scrollDot 2.4s ease-in-out infinite;
}
@keyframes scrollDot{ 0%{ top:0; opacity:1;} 90%{ opacity:0; } 100%{ top:100%; opacity:0; } }

/* ---------- Marquee ---------- */
.marquee{ background:var(--charcoal); border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden; padding:16px 0; }
.marquee-track{ display:flex; width:max-content; animation:marquee 28s linear infinite; }
.marquee-track span{ font-family:var(--serif); font-style:italic; font-size:18px; color:var(--gold); white-space:nowrap; padding-right:8px; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ---------- Sections ---------- */
.section{ padding:130px 5%; position:relative; }
.section.dark{ background:var(--charcoal); }
.section-head{ max-width:640px; margin:0 auto 70px; text-align:center; }
.section-head h2{ font-size:clamp(30px,4vw,48px); }
.section-head .eyebrow{ text-align:center; }

/* Reveal animation — only hidden when JS is active, so content is never
   permanently invisible if scripts fail to load */
.reveal{ opacity:1; transform:none; }
html.js .reveal{ opacity:0; transform:translateY(36px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
html.js .reveal.in{ opacity:1; transform:translateY(0); }

/* ---------- Product detail page (PDP) ---------- */
.product-page{ padding-top:0; }
.pdp{ padding:130px 5% 40px; max-width:1240px; margin:0 auto; }
.pdp-back{
  display:inline-block; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); margin-bottom:40px; transition:color .3s;
}
.pdp-back:hover{ color:var(--gold); }
.pdp-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:60px; align-items:start; }

.pdp-main-img{ aspect-ratio:4/3; overflow:hidden; border:1px solid var(--line); background:var(--charcoal); }
.pdp-main-img img{ width:100%; height:100%; object-fit:cover; transition:opacity .4s var(--ease); }
.pdp-thumbs{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:12px; }
.pdp-thumb{
  padding:0; border:1px solid var(--line); background:var(--charcoal); cursor:pointer;
  aspect-ratio:1/1; overflow:hidden; transition:border-color .3s var(--ease);
}
.pdp-thumb img{ width:100%; height:100%; object-fit:cover; }
.pdp-thumb:hover{ border-color:rgba(201,162,76,.6); }
.pdp-thumb.active{ border-color:var(--gold); }

.pdp-info .product-tag.static{
  position:static; display:inline-block; margin-bottom:18px;
  background:none; border:1px solid var(--gold); color:var(--gold);
  font-size:11px; letter-spacing:.12em; text-transform:uppercase; padding:6px 14px;
}
.pdp-info h1{ font-size:clamp(26px,3.4vw,40px); margin-bottom:18px; line-height:1.15; }
.pdp-info .product-price{ margin-bottom:26px; }
.pdp-desc{ color:var(--muted); font-size:15px; line-height:1.85; margin-bottom:28px; }
.pdp-colors{ display:flex; align-items:center; gap:14px; margin-bottom:28px; }
.pdp-colors-label{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.color-swatch{
  width:28px; height:28px; border-radius:50%; border:1px solid rgba(255,255,255,.25);
  background:var(--swatch); cursor:pointer; padding:0; position:relative; transition:transform .25s var(--ease), border-color .25s;
}
.color-swatch::after{
  content:''; position:absolute; inset:-5px; border-radius:50%; border:1px solid transparent; transition:border-color .25s;
}
.color-swatch:hover{ transform:translateY(-2px); }
.color-swatch.active::after{ border-color:var(--gold); }
.color-name{ font-size:13px; color:var(--gold-bright); font-family:var(--serif); letter-spacing:.02em; }
.pdp-info .product-specs{ margin-bottom:32px; }
.pdp-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:34px; }
.pdp-reassure{ list-style:none; border-top:1px solid rgba(255,255,255,.08); padding-top:20px; }
.pdp-reassure li{
  color:var(--muted); font-size:13px; line-height:1.7; padding:7px 0 7px 20px; position:relative;
}
.pdp-reassure li::before{ content:'◆'; position:absolute; left:0; color:var(--gold); font-size:9px; top:11px; }
html[data-lang="ar"] .pdp-reassure li{ padding:7px 20px 7px 0; }
html[data-lang="ar"] .pdp-reassure li::before{ left:auto; right:0; }

.pdp-more{ padding:110px 0 60px; }
.pdp-more-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.more-card{ border:1px solid var(--line); background:var(--charcoal); transition:border-color .4s var(--ease); display:block; }
.more-card:hover{ border-color:var(--gold); }
.more-card img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.more-card h3{ font-size:16px; padding:18px 20px 6px; line-height:1.35; }
.more-price{ display:block; padding:0 20px 20px; color:var(--gold-bright); font-family:var(--serif); font-size:20px; }

@media (max-width:980px){
  .pdp-grid{ grid-template-columns:1fr; gap:36px; }
  .pdp-more-grid{ grid-template-columns:1fr; }
  .pdp{ padding-top:110px; }
}

/* ---------- Product grid ---------- */
.product-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:40px; max-width:1240px; margin:0 auto; }
.product-card{ border:1px solid var(--line); background:var(--charcoal); transition:border-color .4s; }
.product-card:hover{ border-color:var(--gold); }
.product-media{ position:relative; aspect-ratio:4/3; overflow:hidden; }
.product-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity .7s var(--ease), transform .9s var(--ease); }
.product-media .img-hover{ opacity:0; }
.product-card:hover .img-hover{ opacity:1; }
.product-card:hover .img-default{ transform:scale(1.05); }
.product-tag{
  position:absolute; top:18px; left:18px; background:rgba(10,10,10,.7); border:1px solid var(--gold);
  color:var(--gold); font-size:11px; letter-spacing:.12em; text-transform:uppercase; padding:6px 14px;
}
.product-info{ padding:34px; }
.product-info h3{ font-size:26px; margin-bottom:14px; }
.product-desc{ color:var(--muted); font-size:14.5px; line-height:1.75; margin-bottom:20px; }
.product-specs{ list-style:none; margin-bottom:22px; }
.product-specs li{ font-size:13px; color:var(--muted); padding:6px 0; border-top:1px solid rgba(255,255,255,.06); }
.product-specs li span:first-child{ color:var(--gold-bright); text-transform:uppercase; letter-spacing:.08em; font-size:11px; margin-right:8px; }
.product-price{ display:flex; align-items:baseline; gap:14px; margin-bottom:24px; }
.price-old{ color:var(--muted); text-decoration:line-through; font-size:15px; }
.price-new{ font-family:var(--serif); font-size:30px; color:var(--gold-bright); }
.product-actions{ display:flex; gap:12px; flex-wrap:wrap; }

/* ---------- Why grid ---------- */
.why-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:50px 40px; max-width:1100px; margin:0 auto; }
.why-item{ text-align:center; padding:0 12px; }
.why-icon{ display:inline-block; color:var(--gold); font-size:14px; margin-bottom:18px; }
.why-item h3{ font-size:19px; margin-bottom:12px; letter-spacing:.01em; }
.why-item p{ color:var(--muted); font-size:14px; line-height:1.7; }

/* ---------- Story ---------- */
.story-section{ padding-top:110px; padding-bottom:110px; }
.story-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:70px; max-width:1200px; margin:0 auto; align-items:center; }
.story-media img{ border-radius:2px; }
.story-text .eyebrow{ text-align:left; }
html[data-lang="ar"] .story-text .eyebrow{ text-align:right; }
.story-text h2{ font-size:clamp(28px,3.6vw,42px); margin-bottom:6px; }
.story-signature{ color:var(--gold); font-family:var(--serif); font-style:italic; font-size:17px; margin-bottom:26px; display:block; }
.story-text p{ color:var(--muted); font-size:15px; line-height:1.85; margin-bottom:16px; }
.story-closing{ color:var(--ivory) !important; font-family:var(--serif); font-size:19px !important; line-height:1.6 !important; margin-top:24px; }

/* ---------- Gallery ---------- */
.gallery-grid{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:220px; gap:14px; max-width:1300px; margin:0 auto; }
.gallery-item{ overflow:hidden; grid-column:span 1; }
.gallery-item.tall{ grid-row:span 2; }
.gallery-item img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.gallery-item:hover img{ transform:scale(1.08); }

/* ---------- Testimonials ---------- */
.testi-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; max-width:1150px; margin:0 auto; }
.testi-card{
  background:var(--charcoal); border:1px solid var(--line); padding:36px 30px; text-align:center;
  backdrop-filter:blur(6px);
}
.testi-card p{ font-family:var(--serif); font-style:italic; font-size:18px; line-height:1.6; margin-bottom:20px; color:var(--ivory); }
.testi-name{ color:var(--gold); font-size:12px; letter-spacing:.1em; text-transform:uppercase; }

/* ---------- Newsletter ---------- */
.newsletter{ background:var(--black); padding:100px 5%; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.newsletter-inner{ max-width:640px; margin:0 auto; text-align:center; }
.newsletter-inner h2{ font-size:clamp(26px,3.4vw,36px); margin-bottom:30px; }
#newsletter-form{ display:flex; gap:0; max-width:440px; margin:0 auto; border:1px solid var(--line); }
#newsletter-form input{
  flex:1; background:none; border:none; padding:16px 18px; color:var(--ivory); font-family:var(--sans); font-size:14px;
}
#newsletter-form input:focus{ outline:none; }
#newsletter-form button{
  background:var(--gold); border:none; color:var(--black); padding:0 26px; letter-spacing:.1em; text-transform:uppercase;
  font-size:12px; cursor:pointer; transition:background .3s;
}
#newsletter-form button:hover{ background:var(--gold-bright); }
.newsletter-note{ color:var(--muted); font-size:12px; margin-top:16px; }

/* ---------- Contact ---------- */
.contact-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:60px; max-width:1150px; margin:0 auto 60px; }
.contact-info ul{ list-style:none; margin-bottom:36px; }
.contact-info li{ padding:16px 0; border-bottom:1px solid rgba(255,255,255,.08); font-size:14.5px; line-height:1.7; }
.contact-info li strong{ display:block; color:var(--gold); font-size:11px; letter-spacing:.12em; text-transform:uppercase; margin-bottom:6px; font-weight:500; }
.contact-info li a{ transition:color .3s; }
.contact-info li a:hover{ color:var(--gold-bright); }

.contact-form{ display:flex; flex-direction:column; gap:16px; }
.contact-form input, .contact-form textarea{
  background:var(--charcoal-2); border:1px solid var(--line); color:var(--ivory); font-family:var(--sans);
  padding:15px 18px; font-size:14px; resize:vertical;
}
.contact-form input:focus, .contact-form textarea:focus{ outline:none; border-color:var(--gold); }
.form-note{ color:var(--muted); font-size:12px; margin-top:4px; }

.map-embed{ max-width:1150px; margin:0 auto; height:340px; border:1px solid var(--line); filter:grayscale(.4) invert(.92) contrast(.9); }
.map-embed iframe{ width:100%; height:100%; border:0; }

/* ---------- Footer ---------- */
#site-footer{ background:var(--charcoal); padding:60px 5% 30px; border-top:1px solid var(--line); }
.footer-top{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:30px; max-width:1300px; margin:0 auto 40px; }
.footer-logo{ height:40px; }
.footer-top nav{ display:flex; gap:26px; flex-wrap:wrap; }
.footer-top nav a{ font-size:13px; color:var(--muted); letter-spacing:.05em; transition:color .3s; }
.footer-top nav a:hover{ color:var(--gold); }
.footer-social{ display:flex; gap:20px; }
.footer-social a{ font-size:13px; color:var(--gold); }
.footer-bottom{ text-align:center; color:var(--muted); font-size:12px; padding-top:24px; border-top:1px solid rgba(255,255,255,.06); max-width:1300px; margin:0 auto; }

/* ---------- Focus visibility ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:1px solid var(--gold); outline-offset:3px;
}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  #main-nav{ display:none; }
  #burger{ display:flex; }
  .product-grid{ grid-template-columns:1fr; }
  .why-grid{ grid-template-columns:1fr 1fr; }
  .story-grid{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; }
  .gallery-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:200px; }
  .testi-grid{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .why-grid{ grid-template-columns:1fr; }
  .header-actions .lang-switch{ display:none; }
  #hero h1{ font-size:38px; }
  .section{ padding:90px 5%; }
}

/* ===========================================================
   PREMIUM / FUTURISTIC LAYER
=========================================================== */

/* Scroll progress */
#scroll-progress{
  position:fixed; top:0; left:0; height:2px; width:100%; z-index:900;
  transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg, transparent, var(--gold), var(--gold-bright), var(--gold), transparent);
  box-shadow:0 0 14px rgba(201,162,76,.5);
  transition:transform .1s linear;
}

/* Ambient aurora orbs */
body::before, body::after{
  content:''; position:fixed; border-radius:50%; pointer-events:none; z-index:0;
  filter:blur(120px); opacity:.25;
}
body::before{
  width:46vw; height:46vw; top:-12vw; left:-10vw;
  background:radial-gradient(circle, rgba(201,162,76,.55), transparent 70%);
  animation:drift1 26s ease-in-out infinite alternate;
}
body::after{
  width:38vw; height:38vw; bottom:-14vw; right:-8vw;
  background:radial-gradient(circle, rgba(120,95,45,.5), transparent 70%);
  animation:drift2 32s ease-in-out infinite alternate;
}
@keyframes drift1{ to{ transform:translate3d(6vw,8vh,0) scale(1.15); } }
@keyframes drift2{ to{ transform:translate3d(-7vw,-6vh,0) scale(1.2); } }
#hero, .section, #site-header, #site-footer, .newsletter, .pdp, #lightbox{ position:relative; z-index:1; }

/* Fine grain texture */
#hero::after{
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.16;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* Glass header */
#site-header.scrolled{
  background:rgba(10,10,10,.55);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 1px 0 rgba(201,162,76,.18), 0 18px 40px -30px rgba(0,0,0,.9);
}

/* 3D tilt cards + light sheen */
.tilt{
  transform-style:preserve-3d;
  transition:transform .5s var(--ease), border-color .4s, box-shadow .5s var(--ease);
  will-change:transform;
}
.tilt:hover{ box-shadow:0 34px 60px -34px rgba(0,0,0,.95), 0 0 0 1px rgba(201,162,76,.28); }
.product-card, .more-card, .gallery-item{ position:relative; overflow:hidden; }
.product-card::after, .more-card::after{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:3; opacity:0;
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%), rgba(233,204,133,.16), transparent 60%);
  transition:opacity .45s var(--ease);
}
.product-card:hover::after, .more-card:hover::after{ opacity:1; }

/* Gold sweep on product media */
.product-media{ position:relative; display:block; }
.product-media::after{
  content:''; position:absolute; top:0; left:-70%; width:45%; height:100%; z-index:2;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.10), transparent);
  transform:skewX(-18deg); transition:left .85s var(--ease);
}
.product-card:hover .product-media::after{ left:130%; }

/* Elevated buttons */
.btn-gold{ position:relative; overflow:hidden; }
.btn-gold::after{
  content:''; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform:skewX(-20deg); transition:left .7s var(--ease);
}
.btn-gold:hover::after{ left:130%; }

/* Quote headline */
.quote-title{
  font-style:italic; font-weight:400; max-width:16ch; margin:0 auto;
  background:linear-gradient(100deg, var(--ivory) 20%, var(--gold-bright) 50%, var(--ivory) 80%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  background-size:220% auto; animation:sheen 7s linear infinite;
}
@keyframes sheen{ to{ background-position:220% center; } }
html[data-lang="ar"] .quote-title{ font-style:normal; }

/* Section head divider */
.section-head::after{
  content:''; display:block; width:52px; height:1px; margin:26px auto 0;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* Gallery depth */
.gallery-item{ border:1px solid rgba(201,162,76,.12); }
.gallery-item::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, transparent 55%, rgba(10,10,10,.55));
  opacity:.7; transition:opacity .5s var(--ease);
}
.gallery-item:hover::after{ opacity:.25; }

/* PDP zoom affordance */
.pdp-main-img{ display:block; width:100%; padding:0; cursor:zoom-in; position:relative; }
.pdp-zoom-hint{
  position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
  background:rgba(10,10,10,.62); border:1px solid var(--line); color:var(--ivory);
  font-family:var(--sans); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  padding:8px 16px; backdrop-filter:blur(6px); opacity:0; transition:opacity .35s var(--ease);
}
.pdp-main-img:hover .pdp-zoom-hint{ opacity:1; }

/* Lightbox */
#lightbox{
  position:fixed; inset:0; z-index:1000; display:none;
  background:rgba(6,6,6,.96); backdrop-filter:blur(10px);
}
#lightbox.open{ display:flex; align-items:center; justify-content:center; animation:lbIn .3s var(--ease); }
@keyframes lbIn{ from{ opacity:0; } to{ opacity:1; } }
#lb-stage{
  width:92vw; height:86vh; display:flex; align-items:center; justify-content:center; overflow:hidden;
}
#lb-img{
  max-width:100%; max-height:100%; object-fit:contain; cursor:zoom-in;
  transition:transform .18s ease-out; user-select:none; -webkit-user-drag:none;
}
#lb-close, #lb-prev, #lb-next{
  position:absolute; background:rgba(10,10,10,.5); border:1px solid var(--line); color:var(--ivory);
  width:52px; height:52px; border-radius:50%; cursor:pointer; z-index:2;
  display:flex; align-items:center; justify-content:center; font-size:28px; line-height:1;
  backdrop-filter:blur(6px); transition:all .3s var(--ease);
}
#lb-close:hover, #lb-prev:hover, #lb-next:hover{ background:var(--gold); color:var(--black); border-color:var(--gold); }
#lb-close{ top:24px; right:24px; font-size:26px; }
#lb-prev{ left:22px; top:50%; transform:translateY(-50%); }
#lb-next{ right:22px; top:50%; transform:translateY(-50%); }
#lb-tip{
  position:absolute; bottom:22px; left:50%; transform:translateX(-50%);
  color:var(--muted); font-size:11px; letter-spacing:.1em; text-transform:uppercase; text-align:center;
}
@media (max-width:700px){
  #lb-prev, #lb-next{ width:44px; height:44px; }
  #lb-tip{ font-size:10px; padding:0 12px; }
}

/* ===========================================================
   V2 — GRILLE COMPACTE, PAGINATION, BADGE REMISE, VIDÉO MOBILE
=========================================================== */

/* --- Product grid: 4 per row on desktop, compact cards --- */
.product-grid{
  grid-template-columns:repeat(4,1fr);
  gap:22px;
  max-width:1440px;
}
.product-card{ border-radius:2px; display:flex; flex-direction:column; }
.product-info{ padding:20px 20px 24px; display:flex; flex-direction:column; flex:1; }
.product-info h3{ font-size:17px; line-height:1.3; margin-bottom:10px; }
.product-desc{
  font-size:13px; line-height:1.6; margin-bottom:14px;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.product-card .product-specs{ margin-bottom:14px; }
.product-card .product-specs li{ font-size:11.5px; padding:5px 0; }
.product-card .product-specs li span:first-child{ font-size:10px; }
.product-card .price-new{ font-size:23px; }
.product-card .price-old{ font-size:13px; }
.product-card .product-actions{ margin-top:auto; }
.product-card .btn-gold.small{ width:100%; text-align:center; }
.product-tag{ top:12px; left:12px; font-size:9.5px; padding:5px 10px; letter-spacing:.1em; }

@media (max-width:1300px){ .product-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:980px){ .product-grid{ grid-template-columns:repeat(2,1fr); gap:16px; } }
@media (max-width:560px){
  .product-grid{ grid-template-columns:1fr; gap:20px; }
  .product-info{ padding:24px; }
  .product-info h3{ font-size:20px; }
  .product-desc{ font-size:14px; -webkit-line-clamp:4; }
}

/* --- Discount badge (auto-calculated) --- */
.discount-badge{
  position:absolute; top:12px; right:12px; z-index:3;
  font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.04em;
  color:#0a0a0a; padding:7px 11px; border-radius:2px;
  background:linear-gradient(135deg,var(--gold-bright),var(--gold));
  box-shadow:0 6px 18px rgba(201,162,76,.32);
  pointer-events:none;
}
.pdp-info .discount-badge{
  position:static; display:inline-block; margin-left:12px; vertical-align:middle;
  box-shadow:none; font-size:13px;
}

/* --- Pagination --- */
.pagination{
  display:flex; justify-content:center; align-items:center; gap:8px;
  flex-wrap:wrap; margin:56px auto 0; max-width:1440px;
}
.pagination button{
  min-width:42px; height:42px; padding:0 12px;
  background:transparent; border:1px solid var(--line); color:var(--muted);
  font-family:var(--sans); font-size:13px; letter-spacing:.06em; cursor:pointer;
  transition:border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease);
}
.pagination button:hover:not(:disabled){ border-color:var(--gold); color:var(--gold-bright); }
.pagination button.active{
  background:var(--gold); border-color:var(--gold); color:var(--black); font-weight:500;
}
.pagination button:disabled{ opacity:.3; cursor:default; }
.pagination .page-dots{ color:var(--muted); padding:0 4px; user-select:none; }
.pagination-info{
  text-align:center; color:var(--muted); font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; margin-top:18px;
}

/* --- Hero video: mobile framing --- */
.hero-media video{ pointer-events:none; }
.hero-media video::-webkit-media-controls,
.hero-media video::-webkit-media-controls-enclosure,
.hero-media video::-webkit-media-controls-panel{ display:none !important; opacity:0 !important; }
@media (max-width:768px){
  .hero-media video{
    object-fit:cover; object-position:center 42%;
    transform:scale(1.18); animation:none;
  }
}
@media (max-width:560px){
  .hero-media video{ object-position:center 45%; transform:scale(1.3); }
}

/* --- Gallery: 10-image editorial layout --- */
.gallery-grid{ grid-auto-rows:230px; }
.gallery-item.wide{ grid-column:span 2; }
@media (max-width:980px){
  .gallery-item.wide{ grid-column:span 2; }
  .gallery-item.tall{ grid-row:span 2; }
}
@media (max-width:560px){
  .gallery-grid{ grid-template-columns:1fr; grid-auto-rows:260px; }
  .gallery-item.wide, .gallery-item.tall{ grid-column:span 1; grid-row:span 1; }
}

/* --- Refined micro-interactions --- */
.product-card{ will-change:transform; }
.product-card .product-media img{ backface-visibility:hidden; }
.btn-gold, .btn-ghost{ position:relative; overflow:hidden; }
.btn-gold::after{
  content:''; position:absolute; top:0; left:-120%; width:60%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
  transition:left .7s var(--ease); pointer-events:none;
}
.btn-gold:hover::after{ left:130%; }
.section-head h2{ transition:none; }

/* --- Form feedback --- */
.form-status{
  font-size:13px; margin-top:12px; line-height:1.6; min-height:20px;
}
.form-status.ok{ color:var(--gold-bright); }
.form-status.err{ color:#e08c7a; }
.contact-form button[disabled]{ opacity:.55; cursor:default; }

/* --- Performance: avoid layout shift on lazy images --- */
.product-media img, .gallery-item img, .more-card img{ background:#141414; }

/* ===========================================================
   V2 — MICRO-INTERACTIONS & PROFONDEUR (mesurées, performantes)
=========================================================== */

/* Depth on hover — cards lift with a soft gold-tinted shadow */
.product-card{
  transition:border-color .4s var(--ease), box-shadow .5s var(--ease), transform .5s var(--ease);
}
.product-card:hover{
  box-shadow:0 26px 60px -24px rgba(0,0,0,.85), 0 0 0 1px rgba(201,162,76,.18);
}

/* Glassmorphism on the sticky header once scrolled */
#site-header.scrolled{
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  background:rgba(10,10,10,.72);
  border-bottom:1px solid rgba(201,162,76,.14);
}

/* Section entrance — staggered, GPU-friendly */
.reveal{ transition-property:opacity, transform; }
.product-grid .product-card.in:nth-child(4n+1){ transition-delay:0ms; }
.product-grid .product-card.in:nth-child(4n+2){ transition-delay:60ms; }
.product-grid .product-card.in:nth-child(4n+3){ transition-delay:120ms; }
.product-grid .product-card.in:nth-child(4n+4){ transition-delay:180ms; }

/* Gold hairline that draws in under section titles */
.section-head h2::after{
  content:''; display:block; width:0; height:1px; margin:22px auto 0;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  transition:width 1.1s var(--ease) .2s;
}
.section-head.in h2::after{ width:180px; }

/* Price emphasis micro-interaction */
.product-card:hover .price-new{
  text-shadow:0 0 22px rgba(233,204,133,.35);
  transition:text-shadow .4s var(--ease);
}

/* Discount badge subtle float */
@keyframes badgeIn{
  from{ opacity:0; transform:translateY(-6px) scale(.9); }
  to{ opacity:1; transform:none; }
}
.discount-badge{ animation:badgeIn .5s var(--ease) both; }

/* Thumbnails depth on product pages */
.pdp-thumb{ transition:border-color .3s var(--ease), transform .3s var(--ease); }
.pdp-thumb:hover{ transform:translateY(-3px); }

/* Respect reduced-motion across the whole premium layer */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .hero-media video{ animation:none !important; }
}

/* Keep tilt off touch devices (perf + accidental transforms) */
@media (hover:none){
  .product-card.tilt, .more-card.tilt, .gallery-item.tilt{ transform:none !important; }
}