/* ============================================
   AKHLAQ — اخلاق
   Global styles + loads of animations
   ============================================ */

:root{
  --bg: #efdfbd;          /* refined sandy cream */
  --bg-2: #e7d4ad;
  --bg-3: #f5e8ca;
  --paper: #faf3e0;
  --ink: #0f0f0f;
  --ink-2: #1c1c1c;
  --accent: #c7391f;       /* deeper clay red */
  --accent-2: #2b5f58;     /* muted teal */
  --accent-3: #d4a94e;     /* antique gold */
  --muted: #857a63;
  --line: rgba(15,15,15,.12);
  --serif: 'Fraunces', 'Cormorant Garamond', serif;
}

*{box-sizing:border-box; margin:0; padding:0;}
html,body{background:var(--bg); color:var(--ink); font-family:'Space Grotesk', sans-serif; overflow-x:hidden;}
body{cursor:none; font-weight: 400; letter-spacing: .005em;}

/* subtle grain overlay over the whole page */
body::after{
  content:"";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 90;
  opacity: .35;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .15 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:none; border:none; background:none; color:inherit;}
img{max-width:100%; display:block;}

::selection{ background:var(--ink); color:var(--bg);}

/* ============================================
   FLOATING QUOTES — background layer, behind content
   ============================================ */
body{ position: relative; }
.floating-quotes{
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;            /* sits behind all sections */
  overflow: hidden;
}
.fq{
  position: absolute;
  max-width: min(340px, 62vw);
  opacity: 0;
  will-change: opacity, transform;
  user-select: none; pointer-events: none;
  font-weight: 300;
  line-height: 1.45;
  animation: fqIn 1.4s ease forwards;
  animation-delay: var(--d, 0s);
  padding-left: 16px;
  border-left: 1px solid currentColor;
}
.fq.en{
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(12px, 1.05vw, 15px);
  color: var(--ink);
}
.fq.ar{
  font-family: 'Amiri', serif;
  font-size: clamp(16px, 1.6vw, 21px);
  color: var(--accent);
  direction: rtl;
  text-align: right;
  padding-left: 0; padding-right: 16px;
  border-left: none;
  border-right: 1px solid currentColor;
}
.fq small{
  display:block; margin-top: 6px;
  font-family: 'Space Grotesk', sans-serif;
  font-style: normal;
  font-size: 9px; letter-spacing: .35em; text-transform: uppercase;
  color: var(--muted);
  opacity: .75;
}
.fq.ar small{ font-family: 'Space Grotesk', sans-serif; direction: ltr; text-align: right;}

@keyframes fqIn{
  from{ opacity: 0; transform: translateY(10px) rotate(var(--r, 0deg));}
  to  { opacity: var(--op, .35); transform: translateY(0) rotate(var(--r, 0deg));}
}

/* Ensure main content sits above the quote layer */
.ticker, .nav, .hero, .big-scroller, .shop, .about, .lookbook, .contact, .footer{
  position: relative;
  z-index: 2;
}
/* Sections with opaque bg hide quotes; transparent gutters show them */
.hero, .shop, .lookbook{
  background: transparent;
}
.about, .big-scroller, .contact{
  background: var(--bg);
}

/* ============================================
   CUSTOM CURSOR
   ============================================ */
.cursor{
  position: fixed; top:0; left:0;
  width: 40px; height: 40px;
  border:1.5px solid var(--ink);
  border-radius: 50%;
  pointer-events:none; z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width .25s, height .25s, background .25s, border-color .25s;
  mix-blend-mode: difference;
}
.cursor-dot{
  position: fixed; top:0; left:0;
  width:6px; height:6px;
  background: var(--ink);
  border-radius:50%;
  pointer-events:none; z-index: 10000;
  transform: translate(-50%, -50%);
}
.cursor.hover{
  width:80px; height:80px;
  background: var(--ink);
  border-color: var(--ink);
}

/* ============================================
   LOADER (hoodie unzip reveal)
   ============================================ */
.loader{
  position: fixed; inset:0;
  z-index: 10000;
  pointer-events: auto;
  overflow: hidden;
}
.loader.done{ pointer-events: none; }
/* unified loader background */
.loader-bg{
  position: absolute; inset: 0;
  background: var(--bg);
  overflow: hidden;
  z-index: 1;
  will-change: opacity, transform, filter;
}
.loader.unzipping .loader-bg{
  animation: bgBlur 1.4s cubic-bezier(.76,0,.24,1) forwards;
}
@keyframes bgBlur{
  0%   { opacity: 1; filter: blur(0);}
  100% { opacity: 0; filter: blur(14px);}
}

/* horizontal strips — shatter out across the screen */
.strips{
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  pointer-events: none;
  z-index: 5;
}
.strip{
  flex: 1;
  background: var(--bg);
  border-top: 1px solid rgba(15,15,15,.05);
  transform-origin: center;
  will-change: transform, opacity;
}
.strip:first-child{ border-top: none;}
.loader.unzipping .strip{
  animation: shatterStrip 1.4s cubic-bezier(.64,.04,.35,1) forwards;
}
.loader.unzipping .strip:nth-child(1){ --dir:-1; animation-delay: 0ms;   }
.loader.unzipping .strip:nth-child(2){ --dir: 1; animation-delay: 60ms;  }
.loader.unzipping .strip:nth-child(3){ --dir:-1; animation-delay: 120ms; }
.loader.unzipping .strip:nth-child(4){ --dir: 1; animation-delay: 180ms; }
.loader.unzipping .strip:nth-child(5){ --dir:-1; animation-delay: 240ms; }
.loader.unzipping .strip:nth-child(6){ --dir: 1; animation-delay: 300ms; }
.loader.unzipping .strip:nth-child(7){ --dir:-1; animation-delay: 360ms; }
.loader.unzipping .strip:nth-child(8){ --dir: 1; animation-delay: 420ms; }
@keyframes shatterStrip{
  0%   { transform: translateX(0) skewX(0); opacity: 1;}
  100% { transform: translateX(calc(var(--dir) * 130%)) skewX(calc(var(--dir) * 8deg)); opacity: 0;}
}

/* portal zoom on center content — feels like camera passes through the logo */
.loader.unzipping .loader-center{
  animation: portalZoom 1.1s cubic-bezier(.55,0,.3,1) forwards;
  z-index: 8;
}
@keyframes portalZoom{
  0%   { opacity: 1; transform: translate(-50%,-50%) scale(1);}
  55%  { opacity: 1; transform: translate(-50%,-50%) scale(3);}
  100% { opacity: 0; transform: translate(-50%,-50%) scale(7) translateZ(0);}
}

/* bright flash at the climax */
.loader::after{
  content:""; position: absolute; inset: 0;
  background: var(--bg-3);
  opacity: 0;
  pointer-events: none;
  z-index: 9;
  mix-blend-mode: screen;
}
.loader.unzipping::after{ animation: flashBurst .6s ease-out forwards; animation-delay: .3s;}
@keyframes flashBurst{
  0%   { opacity: 0;}
  40%  { opacity: .45;}
  100% { opacity: 0;}
}

.loader-noise{
  position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(0,0,0,.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(0,0,0,.08) 0%, transparent 50%);
  mix-blend-mode: multiply;
  animation: noiseShift 8s infinite ease-in-out;
}
@keyframes noiseShift{
  0%,100%{transform:translate(0,0);}
  50%{transform:translate(-20px,15px);}
}
.loader-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 60px 60px;
  animation: gridMove 20s linear infinite;
  opacity:.5;
}
@keyframes gridMove{
  from{background-position:0 0,0 0;}
  to{background-position:60px 60px, 60px 60px;}
}

/* falling arabic characters */
.falling-ar{ position:absolute; inset:0; overflow:hidden; pointer-events:none;}
.fchar{
  position:absolute; top:-10%;
  font-family: 'Rakkas', serif;
  font-size: 26px;
  color: var(--ink);
  opacity: 0;
  animation: fall linear forwards;
}
@keyframes fall{
  0%{ opacity:0; transform: translateY(0);}
  10%{ opacity:.6;}
  90%{ opacity:.6;}
  100%{ opacity:0; transform: translateY(120vh);}
}

/* (zipper CSS removed — replaced by shatter/portal reveal above) */

.loader-center{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  text-align:center;
  z-index: 3;
  width: min(640px, 92vw);
  padding: 0 20px;
}
.loader-top{
  display:inline-flex; align-items:center; gap: 10px;
  font-size:11px; letter-spacing:.3em; color: var(--muted);
  margin-bottom: 20px;
  animation: fadeInUp 1s .2s both;
}
.loader-dot{
  width: 8px; height: 8px; border-radius:50%;
  background: var(--accent);
  animation: livePulse 1.2s infinite;
}
@keyframes livePulse{
  0%,100%{ box-shadow: 0 0 0 0 var(--accent); opacity:1;}
  50%{ box-shadow: 0 0 0 8px rgba(255,59,31,0); opacity:.5;}
}

.loader-brand{ margin-bottom: 14px;}
.loader-tag{
  font-size: 11px; letter-spacing:.35em;
  color: var(--muted);
  margin-bottom: 28px;
  animation: fadeInUp 1s .3s both;
}

.loader-stats{
  display:flex; justify-content:center; gap: 30px;
  margin-bottom: 30px;
  animation: fadeInUp 1s .4s both;
}
.loader-stats div{ display:flex; flex-direction:column; align-items:center; gap: 4px;}
.loader-stats strong{
  font-family:'Anton', sans-serif;
  font-size: 30px; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.loader-stats span{ font-size:10px; letter-spacing:.3em; color: var(--muted);}

.loader-bar-wrap{
  width:100%; height:2px;
  background: rgba(10,10,10,.12);
  position:relative; overflow:hidden;
}
.loader-bar{
  height:100%; width:0%;
  background: var(--ink);
  transition: width .3s ease-out;
}
.loader-bar::after{
  content:"";
  position:absolute; right:0; top:-4px; bottom:-4px;
  width:10px; background: var(--accent);
  filter: blur(4px);
}
.loader-meta{
  margin-top:10px;
  display:flex; justify-content:space-between;
  font-size:11px; letter-spacing:.25em; color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.loader-log{
  margin-top: 16px;
  font-family: 'Space Grotesk', monospace;
  font-size: 10px; letter-spacing: .08em;
  color: var(--muted);
  height: 54px; overflow: hidden;
  text-align: left;
  display:flex; flex-direction:column; justify-content:flex-end; gap: 2px;
}
.loader-log div{
  opacity: 0;
  transform: translateY(8px);
  animation: logIn .3s forwards;
}
.loader-log div::before{ content:'> '; color: var(--accent);}
@keyframes logIn{
  to{ opacity: 1; transform: translateY(0);}
}

.loader-enter{
  margin-top: 26px;
  padding: 18px 36px;
  border:1.5px solid var(--ink);
  background: var(--ink); color: var(--bg);
  font-size: 13px; letter-spacing:.3em;
  display:inline-flex; align-items:center; gap:14px;
  position: relative; overflow:hidden;
  transform: scale(.9); opacity:0;
  transition: transform .6s cubic-bezier(.23,1,.32,1), opacity .6s;
  border-radius: 2px;
}
.loader-enter.hidden{ display:none; }
.loader-enter.show{ transform: scale(1); opacity:1; animation: pulseBtn 2s infinite; }
.loader-enter .enter-ar{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family:'Rakkas', serif; font-size: 18px; letter-spacing:.05em;
  transform: translateY(110%);
  transition: transform .4s cubic-bezier(.76,0,.24,1);
  background: var(--accent); color: #fff;
}
.loader-enter .enter-txt, .loader-enter .arrow{
  transition: transform .4s cubic-bezier(.76,0,.24,1);
}
.loader-enter:hover .enter-txt, .loader-enter:hover .arrow{ transform: translateY(-120%);}
.loader-enter:hover .enter-ar{ transform: translateY(0);}
.loader-enter .arrow{ display:inline-block;}
@keyframes pulseBtn{
  0%,100%{ box-shadow: 0 0 0 0 rgba(10,10,10,.4);}
  50%{ box-shadow: 0 0 0 16px rgba(10,10,10,0);}
}

.loader-hint{
  margin-top: 14px;
  font-size: 10px; letter-spacing: .3em;
  color: var(--muted); min-height: 14px;
}

.loader-corner{
  position:absolute;
  font-size:10px; letter-spacing:.3em;
  color: var(--muted);
  padding: 24px 28px;
  z-index: 2;
}
.loader-corner.tl{ top:0; left:0;}
.loader-corner.tr{ top:0; right:0;}
.loader-corner.bl{ bottom:0; left:0;}
.loader-corner.br{ bottom:0; right:0;}

/* ============================================
   GLITCH EN/AR
   ============================================ */
.glitch-wrap{
  position: relative;
  display:inline-block;
  font-family: 'Anton', sans-serif;
  font-weight: 900;
  letter-spacing: .02em;
  line-height: .85;
}
.glitch-wrap.small{ font-size: 20px; }
.glitch-wrap.big{ font-size: clamp(56px, 11vw, 160px); }
.glitch-wrap.mega{ font-size: clamp(90px, 18vw, 280px); }
.glitch-wrap.huge{ font-size: clamp(70px, 14vw, 220px); }

.glitch-en{
  display:inline-block;
  position: relative;
  color: var(--ink);
  animation: glitchEn 4s infinite steps(1);
}
.glitch-en::before,
.glitch-en::after{
  content: attr(data-text);
}
/* Arabic overlay */
.glitch-ar{
  font-family: 'Rakkas', 'Amiri', serif;
  position: absolute;
  inset:0;
  display:flex; align-items:center; justify-content:center;
  color: var(--accent);
  opacity: 0;
  direction: rtl;
  animation: glitchAr 4s infinite;
  text-shadow: 2px 0 var(--accent-2), -2px 0 var(--accent-3);
  pointer-events: none;
}
@keyframes glitchEn{
  0%, 85%, 100% { transform: translate(0,0); filter: none; }
  86%{ transform: translate(-3px, 2px); filter: hue-rotate(20deg);}
  88%{ transform: translate(3px, -2px); }
  90%{ transform: translate(-2px, -1px); opacity: .6;}
  92%{ transform: translate(2px, 1px); opacity: 0;}
  94%{ opacity: 0;}
  96%{ opacity: 1; transform: translate(0,0);}
}
@keyframes glitchAr{
  0%, 85%, 100% { opacity: 0; transform: translate(0,0) skewX(0);}
  88%{ opacity: 1; transform: translate(4px, -3px) skewX(-5deg);}
  90%{ opacity: 1; transform: translate(-4px, 2px) skewX(4deg);}
  92%{ opacity: 1; transform: translate(2px, 1px) skewX(-2deg);}
  94%{ opacity: .8; transform: translate(0,0);}
}

/* ============================================
   TICKER
   ============================================ */
.ticker{
  position: relative;
  background: var(--ink);
  color: var(--bg);
  padding: 10px 0;
  overflow: hidden;
  border-bottom:1px solid var(--ink);
  z-index: 5;
}
.ticker-track{
  display:flex; gap: 40px;
  white-space: nowrap;
  animation: tickerMove 30s linear infinite;
  font-size: 12px; letter-spacing:.3em;
}
.ticker-track span{ flex-shrink:0;}
@keyframes tickerMove{
  from{ transform: translateX(0);}
  to{ transform: translateX(-50%);}
}

/* ============================================
   NAV
   ============================================ */
.nav{
  position: sticky; top:0; z-index: 100;
  display:flex; align-items:center; justify-content:space-between;
  padding: 20px 36px;
  background: rgba(236, 217, 176, .85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav-logo{ display:block;}
.nav-links{ display:flex; gap: 36px; list-style:none;}
.nav-links a{
  position: relative;
  font-size:13px; letter-spacing:.25em; font-weight:500;
  padding: 8px 0;
  overflow:hidden;
  display: inline-block;
}
.nav-links a::before{
  content: attr(data-text);
  position:absolute; left:0; top:100%;
  color: var(--accent);
  transition: top .3s;
}
.nav-links a span, .nav-links a{
  transition: transform .3s;
}
.nav-links a:hover{ color: transparent;}
.nav-links a:hover::before{ top:0;}
.nav-links a::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:0; height:1px; background: var(--accent);
  transition: width .35s;
}
.nav-links a:hover::after{ width:100%;}
.nav-right{ display:flex; align-items:center; gap: 20px;}
.lang-toggle{
  font-size:12px; letter-spacing:.2em;
  padding: 6px 10px; border:1px solid var(--ink);
  transition: background .3s, color .3s;
}
.lang-toggle:hover{ background: var(--ink); color: var(--bg);}
.cart-btn{
  font-size:12px; letter-spacing:.3em;
  padding: 10px 18px;
  background: var(--ink); color: var(--bg);
  position: relative; overflow:hidden;
  transition: transform .3s;
}
.cart-btn:hover{ transform: translateY(-2px);}
.cart-count{
  display:inline-block; margin-left:6px;
  background: var(--accent); color:#fff;
  border-radius: 50%; padding: 2px 7px; font-size:10px;
}

/* ============================================
   HERO
   ============================================ */
.hero{
  position: relative;
  min-height: 100vh;
  display:flex; align-items:center; justify-content:center;
  overflow: hidden;
  padding: 60px 36px;
}
.hero-bg-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 100px 100px;
  mask-image: radial-gradient(ellipse at center, #000 20%, transparent 70%);
}
.floating-shapes .shape{
  position:absolute;
  border-radius:50%;
  filter: blur(40px);
  opacity: .55;
  animation: floaty 16s ease-in-out infinite;
}
.floating-shapes .shape{ opacity: .35;}
.floating-shapes .s1{ width:420px; height:420px; background: var(--accent); top:8%; left:-120px; animation-delay:0s;}
.floating-shapes .s2{ width:320px; height:320px; background: var(--accent-2); top:50%; right:-90px; animation-delay:-4s;}
.floating-shapes .s3{ width:260px; height:260px; background: var(--accent-3); bottom:10%; left:22%; animation-delay:-8s;}
.floating-shapes .s4{ width:220px; height:220px; background: var(--ink); top:22%; right:28%; animation-delay:-12s; opacity:.12;}
@keyframes floaty{
  0%,100%{ transform: translate(0,0) scale(1);}
  33%{ transform: translate(40px,-30px) scale(1.08);}
  66%{ transform: translate(-30px,40px) scale(.95);}
}

.hero-inner{ position: relative; z-index:2; text-align:center; max-width: 1200px;}
.hero-tag{
  font-size: 11px; letter-spacing:.45em;
  color: var(--muted);
  margin-bottom: 24px;
  display: inline-flex; align-items: center; gap: 12px;
  animation: fadeInUp 1s .5s both;
}
.hero-tag::before,
.hero-tag::after{
  content:""; width: 40px; height:1px; background: var(--muted);
  display: inline-block;
}
.hero-title{ margin-bottom: 28px;}
.hero-sub{
  font-family: var(--serif);
  font-size: clamp(18px, 1.8vw, 24px);
  line-height: 1.5;
  font-weight: 300;
  max-width: 560px; margin: 0 auto 44px;
  animation: fadeInUp 1s .7s both;
  letter-spacing: .005em;
}
.hero-sub em{ font-style: italic; color: var(--accent); font-weight: 500;}
.hero-sub-small{
  display: inline-block; margin-top: 12px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px; letter-spacing: .35em;
  color: var(--muted);
  text-transform: uppercase;
}
.hero-cta{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; animation: fadeInUp 1s .9s both;}

.btn{
  position: relative; overflow:hidden;
  padding: 20px 38px;
  font-size:13px; letter-spacing:.3em; font-weight: 500;
  display:inline-flex; align-items:center; justify-content:center;
  min-width: 220px;
  transition: transform .3s;
}
.btn.full{ width: 100%;}
.btn-primary{
  background: var(--ink); color: var(--bg);
  border: 1.5px solid var(--ink);
}
.btn-ghost{
  background: transparent; color: var(--ink);
  border: 1.5px solid var(--ink);
}
.btn span{ transition: transform .45s cubic-bezier(.76,0,.24,1); display:block;}
.btn .btn-hover{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family:'Rakkas', serif; letter-spacing:.08em; font-size:18px;
  transform: translateY(110%);
}
.btn-primary:hover{ background: var(--accent); border-color: var(--accent); color:#fff;}
.btn-ghost:hover{ background: var(--ink); color: var(--bg);}
.btn:hover span:first-child{ transform: translateY(-110%);}
.btn:hover .btn-hover{ transform: translateY(0);}

.hero-scroll{
  position:absolute; bottom: 30px; left:50%; transform: translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-size:11px; letter-spacing:.3em;
}
.scroll-line{
  width:1px; height: 40px; background: var(--ink);
  position:relative; overflow:hidden;
}
.scroll-line::after{
  content:""; position:absolute; top:-40px; left:0; width:100%; height:40px;
  background: var(--accent);
  animation: scrollDot 2s infinite ease-in-out;
}
@keyframes scrollDot{
  0%{ transform: translateY(0);}
  100%{ transform: translateY(80px);}
}
.hero-bg-word{
  position:absolute;
  font-family: 'Rakkas', serif;
  font-size: 60vw;
  color: var(--ink);
  opacity: .05;
  top: 50%; left:50%; transform: translate(-50%,-50%);
  white-space: nowrap;
  pointer-events:none;
  animation: spinSlow 50s linear infinite;
  z-index:1;
}
@keyframes spinSlow{
  from{ transform: translate(-50%,-50%) rotate(0);}
  to{ transform: translate(-50%,-50%) rotate(360deg);}
}

@keyframes fadeInUp{
  from{ opacity:0; transform: translateY(24px);}
  to{ opacity:1; transform: translateY(0);}
}

/* ============================================
   BIG SCROLLER
   ============================================ */
.big-scroller{
  background: var(--ink); color: var(--bg);
  padding: 28px 0;
  overflow:hidden;
  border-top:1px solid var(--ink); border-bottom:1px solid var(--ink);
}
.big-scroll-track{
  display:flex; gap:50px;
  font-family: 'Anton', sans-serif;
  font-size: clamp(50px, 9vw, 140px);
  white-space: nowrap;
  animation: tickerMove 25s linear infinite;
  line-height: 1;
}
.big-scroll-track span{ flex-shrink:0;}
.big-scroll-track .ar{
  font-family: 'Rakkas', serif;
  color: var(--accent);
}

/* ============================================
   SECTION HEAD
   ============================================ */
.section-head{
  padding: 100px 36px 40px;
  border-top:1px solid var(--line);
  position: relative;
}
.section-num{
  font-size: 12px; letter-spacing:.3em;
  color: var(--muted); margin-bottom: 12px;
}
.section-title{
  font-family: 'Anton', sans-serif;
  font-size: clamp(44px, 7vw, 100px);
  line-height: .9;
  display:flex; align-items:baseline; gap: 24px; flex-wrap:wrap;
  font-weight: 400;
}
.section-title > span:first-child{
  position: relative;
}
.section-title > span:first-child::before{
  content: "—";
  color: var(--accent);
  margin-right: 18px;
  font-family: var(--serif); font-weight: 300;
}
.section-title .ar-small{
  font-family: 'Rakkas', serif;
  font-size: .45em; color: var(--accent);
  font-weight: 400;
}
.section-sub{
  margin-top: 16px;
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size:18px; color: var(--muted); max-width: 520px;
  line-height: 1.5;
}

/* ============================================
   PRODUCTS
   ============================================ */
.shop{ padding-bottom: 80px;}
.product-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
  padding: 0 36px;
}
.product{
  position: relative;
  overflow:hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 2px;
  box-shadow: 0 1px 0 rgba(15,15,15,.04), 0 12px 32px -18px rgba(15,15,15,.2);
  transition: transform .5s cubic-bezier(.23,1,.32,1), box-shadow .5s;
  cursor: none;
}
.product:hover{
  transform: translateY(-6px);
  box-shadow: 0 2px 0 rgba(15,15,15,.06), 0 28px 50px -20px rgba(15,15,15,.35);
}
.product-img{
  aspect-ratio: 4/5;
  position: relative;
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.product-img svg{ width: 70%; height: 70%; transition: transform .8s cubic-bezier(.23,1,.32,1);}
.product:hover .product-img svg{ transform: scale(1.08) rotate(-3deg);}
.product-tag{
  position:absolute; top:14px; left:14px;
  background: var(--ink); color: var(--bg);
  font-size: 10px; letter-spacing:.3em;
  padding: 5px 10px;
}
.product-like{
  position:absolute; top:14px; right:14px;
  width:36px; height:36px; border-radius:50%;
  background: var(--bg); display:grid; place-items:center;
  font-size:14px;
  transition: transform .3s, background .3s, color .3s;
}
.product-like:hover{ background: var(--accent); color:#fff; transform: scale(1.1);}
.product-add{
  position:absolute; bottom: -60px; left:0; right:0;
  background: var(--ink); color: var(--bg);
  padding: 18px; text-align:center;
  font-size:12px; letter-spacing:.3em;
  transition: bottom .4s cubic-bezier(.76,0,.24,1);
}
.product:hover .product-add{ bottom: 0;}
.product-info{
  padding: 18px;
  display:flex; justify-content:space-between; align-items:center;
  border-top:1px solid var(--line);
}
.product-name{
  font-family: var(--serif);
  font-weight: 500; letter-spacing: .005em;
  font-size: 17px;
  display:flex; flex-direction:column; gap:3px;
}
.product-name small{
  font-family:'Space Grotesk', sans-serif;
  color: var(--muted); font-weight:400;
  font-size:10px; letter-spacing: .25em; text-transform: uppercase;
}
.product-price{
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size:20px; color: var(--accent);
}

/* ============================================
   ABOUT
   ============================================ */
.about{
  display:grid; grid-template-columns: 1fr 1fr; gap: 40px;
  padding: 120px 36px; align-items: center;
  border-top:1px solid var(--line);
}
.about-left p{
  font-family: var(--serif); font-weight: 300;
  font-size: 21px; line-height: 1.55; margin-top: 22px;
  max-width: 540px; color: var(--ink-2);
}
.about-left p em{ color: var(--accent); font-style: italic; font-weight: 500;}
.about-left .ar-p{
  font-family:'Amiri', serif; font-size: 22px; direction: rtl; text-align:right;
  color: var(--muted);
}
.stats{
  margin-top: 40px;
  display:flex; gap: 40px; flex-wrap:wrap;
}
.stats div{ display:flex; flex-direction:column;}
.stats strong{
  font-family:'Anton', sans-serif;
  font-size: 44px; line-height: 1;
}
.stats span{ font-size:11px; letter-spacing:.2em; color: var(--muted); margin-top: 6px;}

.about-right{ position: relative;}
.about-card{
  aspect-ratio: 1;
  background: var(--ink);
  color: var(--bg);
  overflow:hidden;
  position: relative;
  display:grid; place-items:center;
}
.about-card::before{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(circle at 30% 30%, var(--accent) 0%, transparent 45%),
              radial-gradient(circle at 70% 70%, var(--accent-2) 0%, transparent 45%);
  opacity:.6;
  animation: blobFloat 10s ease-in-out infinite;
}
@keyframes blobFloat{
  0%,100%{ transform: scale(1) rotate(0);}
  50%{ transform: scale(1.15) rotate(40deg);}
}
.about-card-inner{ position: relative; z-index:2; text-align:center;}
.about-card .glitch-wrap .glitch-en{ color: var(--bg);}

/* ============================================
   LOOKBOOK
   ============================================ */
.lookbook{ padding-bottom: 80px; border-top:1px solid var(--line);}
.look-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 0 36px;
}
.look{
  aspect-ratio: 3/4;
  border:1px solid var(--line);
  position: relative;
  overflow:hidden;
  display:flex; align-items:flex-end; justify-content:flex-start;
  padding: 20px;
  font-size: 11px; letter-spacing:.3em;
  transition: transform .5s;
  color:#fff;
}
.look span{ position: relative; z-index:2;}
.look::before{
  content:""; position:absolute; inset:0;
  transition: transform .9s cubic-bezier(.23,1,.32,1);
}
.l1::before{ background: linear-gradient(135deg, var(--accent), #3a1a0e);}
.l2::before{ background: linear-gradient(135deg, var(--accent-2), #0a2f2a);}
.l3::before{ background: linear-gradient(135deg, var(--ink), #2a2a3a);}
.l4::before{ background: linear-gradient(135deg, var(--accent-3), #7a5a1a);}
.look:hover::before{ transform: scale(1.1) rotate(-2deg);}
.look::after{
  content:""; position:absolute; inset:0;
  background: rgba(0,0,0,.2);
  opacity:0; transition: opacity .4s;
}
.look:hover::after{ opacity:1;}

/* ============================================
   CONTACT
   ============================================ */
.contact{
  border-top:1px solid var(--line);
  padding-bottom: 0;
}
.contact-grid{
  display:grid; grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 40px 36px 80px;
}
.contact-card{
  padding: 40px 30px;
  border:1px solid var(--line);
  display:flex; flex-direction:column; gap: 10px;
  transition: background .3s, color .3s, transform .4s;
  position: relative; overflow:hidden;
}
.contact-card::before{
  content:""; position:absolute; inset:0;
  background: var(--ink);
  transform: translateY(101%);
  transition: transform .5s cubic-bezier(.76,0,.24,1);
  z-index: -1;
}
.contact-card:hover{ color: var(--bg); transform: translateY(-4px);}
.contact-card:hover::before{ transform: translateY(0);}
.contact-label{ font-size:11px; letter-spacing:.3em; color: var(--muted);}
.contact-card:hover .contact-label{ color: var(--accent-3);}
.contact-value{
  font-family: var(--serif); font-weight: 400; font-size: 26px;
  letter-spacing: .005em;
}
.contact-ar{ font-family:'Rakkas', serif; color: var(--accent); font-size:18px;}
.contact-card:hover .contact-ar{ color: var(--accent-2);}

.footer{
  background: var(--ink); color: var(--bg);
  padding: 60px 36px 24px;
}
.footer-huge{
  text-align:center;
  padding: 40px 0;
}
.footer-huge .glitch-en{ color: var(--bg);}
.footer-bottom{
  display:flex; justify-content:space-between;
  padding-top: 30px; border-top: 1px solid rgba(236,217,176,.2);
  font-size: 11px; letter-spacing:.3em; color: var(--muted);
  flex-wrap:wrap; gap:10px;
}

/* ============================================
   CART DRAWER
   ============================================ */
.cart-drawer{
  position: fixed; top:0; right:0; bottom:0;
  width: min(420px, 100%);
  background: var(--bg);
  border-left:1px solid var(--ink);
  transform: translateX(100%);
  transition: transform .55s cubic-bezier(.76,0,.24,1);
  z-index: 200;
  display:flex; flex-direction:column;
}
.cart-drawer.open{ transform: translateX(0);}
.cart-head{
  padding: 24px;
  display:flex; justify-content:space-between; align-items:center;
  border-bottom:1px solid var(--line);
  font-size: 12px; letter-spacing:.3em;
}
#cartClose{ font-size: 32px; line-height: 1;}
.cart-items{ flex:1; overflow-y:auto; padding: 16px 24px;}
.cart-item{
  display:flex; gap:14px; padding: 14px 0;
  border-bottom:1px solid var(--line);
  align-items:center;
}
.cart-item .thumb{
  width:60px; height:60px; background: var(--bg-2); border:1px solid var(--line);
  display:grid; place-items:center; font-family:'Anton'; font-size:24px;
}
.cart-item .det{ flex:1; font-size:13px;}
.cart-item .det small{ color: var(--muted); display:block; margin-top: 2px;}
.cart-item .rm{ color: var(--muted); font-size:11px; letter-spacing:.2em;}
.cart-foot{ padding: 24px; border-top:1px solid var(--line);}
.cart-total{
  display:flex; justify-content:space-between; margin-bottom: 16px;
  font-family:'Anton'; font-size: 24px;
}
.cart-overlay{
  position: fixed; inset:0;
  background: rgba(0,0,0,.4);
  opacity:0; pointer-events:none;
  transition: opacity .4s;
  z-index: 199;
}
.cart-overlay.show{ opacity:1; pointer-events:auto;}

/* ============================================
   REVEAL ON SCROLL
   ============================================ */
.reveal{
  opacity:0; transform: translateY(40px);
  transition: opacity .9s cubic-bezier(.23,1,.32,1), transform .9s cubic-bezier(.23,1,.32,1);
}
.reveal.in{ opacity:1; transform: translateY(0);}

/* ============================================
   RESPONSIVE — mobile / tablet / laptop / desktop
   ============================================ */

/* iPad / tablet (≤ 1100px) */
@media (max-width: 1100px){
  .nav{ padding: 18px 24px;}
  .nav-links{ gap: 24px;}
  .product-grid{ grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); padding: 0 24px;}
  .look-grid{ grid-template-columns: repeat(2, 1fr); padding: 0 24px;}
  .contact-grid{ grid-template-columns: repeat(2, 1fr); padding: 40px 24px 60px;}
  .section-head{ padding: 80px 24px 30px;}
  .shop, .lookbook{ padding-bottom: 60px;}
  .about{ padding: 80px 24px; gap: 30px;}
  .loader-stats{ gap: 22px;}
  .loader-stats strong{ font-size: 26px;}
}

/* Touch devices — no hover-stuck states */
@media (hover: none){
  .product-add{ bottom: 0 !important; }
  .product:hover{ transform: none;}
  .look:hover::before{ transform: none;}
  .contact-card:hover::before{ transform: translateY(101%);}
  .contact-card:hover{ color: inherit; transform: none;}
  .cursor, .cursor-dot{ display: none !important;}
  body{ cursor: auto;}
  a, button{ cursor: pointer;}
}

/* iOS safe-area padding for notched phones */
@supports (padding: max(0px)){
  .nav{ padding-left: max(18px, env(safe-area-inset-left)); padding-right: max(18px, env(safe-area-inset-right));}
  .footer{ padding-bottom: max(24px, env(safe-area-inset-bottom));}
}

/* Mobile (≤ 720px) */
@media (max-width: 720px){
  body{ cursor: auto;}
  .cursor, .cursor-dot{ display:none;}
  a, button{ cursor: pointer;}

  .ticker-track{ gap: 24px; font-size: 11px;}
  .nav{ padding: 14px 16px; gap: 10px;}
  .nav-links{ display:none;}
  .nav-right{ gap: 10px;}
  .lang-toggle{ padding: 5px 8px; font-size: 11px;}
  .cart-btn{ padding: 8px 12px; font-size: 11px; letter-spacing: .2em;}

  .hero{ padding: 40px 16px; min-height: 92vh;}
  .hero-sub{ font-size: 15px; padding: 0 10px;}
  .hero-cta{ gap: 12px;}
  .btn{ min-width: 0; width: 100%; padding: 16px 24px; font-size: 12px; letter-spacing: .2em;}
  .hero-scroll{ bottom: 14px;}

  .big-scroll-track{ gap: 30px;}
  .section-head{ padding: 60px 16px 24px;}
  .section-title{ gap: 12px;}
  .about{ grid-template-columns: 1fr; padding: 60px 16px;}
  .about-left p{ font-size: 16px;}
  .stats{ gap: 24px;}
  .stats strong{ font-size: 34px;}
  .look-grid{ grid-template-columns: 1fr; padding: 0 16px;}
  .contact-grid{ grid-template-columns: 1fr; padding: 20px 16px 50px;}
  .contact-value{ font-size: 22px;}
  .product-grid{ grid-template-columns: 1fr; padding: 0 16px;}
  .footer{ padding: 40px 16px 20px;}
  .footer-bottom{ flex-direction: column; text-align:center; gap: 8px;}

  /* Loader scale-down */
  .loader-center{ width: 94vw; padding: 0 12px;}
  .loader-stats{ gap: 14px;}
  .loader-stats strong{ font-size: 22px;}
  .loader-stats span{ font-size: 9px;}
  .loader-log{ display: none;}
  .loader-corner{ padding: 14px 14px; font-size: 9px; letter-spacing: .2em;}
  .loader-enter{ padding: 16px 28px; font-size: 12px;}
  .glitch-wrap.big{ font-size: clamp(48px, 14vw, 90px);}

  .floating-quotes .fq{ font-size: 12px;}
  .floating-quotes .fq.ar{ font-size: 18px;}
}

/* Very small phones (≤ 400px) */
@media (max-width: 400px){
  .hero-tag{ font-size: 10px; letter-spacing: .3em;}
  .section-title{ font-size: 40px;}
  .loader-stats{ gap: 10px;}
  .loader-stats div span{ font-size: 8px;}
}

/* Landscape phones — keep loader centered */
@media (max-height: 500px) and (orientation: landscape){
  .loader-stats{ margin-bottom: 16px; gap: 20px;}
  .loader-log{ display: none;}
  .loader-brand{ margin-bottom: 8px;}
  .loader-tag{ margin-bottom: 14px;}
  .loader-enter{ margin-top: 14px; padding: 12px 24px;}
  .glitch-wrap.big{ font-size: clamp(40px, 9vw, 72px);}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration: .001s !important;
    transition-duration: .001s !important;
  }
}