:root {
  --bg: #070810;
  --bg2: #0f1120;
  --bg3: #161929;
  --green: #2563eb;
  --green2: #1d4ed8;
  --gold: #d4af37;
  --gold2: #f0d060;
  --cyan: #4f8ff7;
  --text: #f1f5f9;
  --muted: #64748b;
  --border: rgba(255,255,255,0.07);
  --glass: rgba(15,17,32,0.8);
  --r: 16px;
  --r2: 24px;
  --ease: cubic-bezier(0.16,1,0.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--bg);overflow-x:hidden;max-width:100%}
body{
  background:transparent;
  color:var(--text);
  font-family:'Tajawal',sans-serif;
  direction:rtl;
  min-height:100vh;
  overflow-x:hidden;
  max-width:100%;
  position:relative;
}
/* ===== DESERT BACKGROUND (CSS-only, responsive) ===== */
.desert-bg{
  position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden;
  background:
    radial-gradient(ellipse 90% 60% at 50% -10%, rgba(37,99,235,.18), transparent 70%),
    linear-gradient(180deg, #05070f 0%, #070a16 30%, #0a1024 62%, #0d142e 100%);
}
/* night sky shimmer */
.desert-bg::before{
  content:'';position:absolute;inset:0;
  background-image:
    radial-gradient(1.5px 1.5px at 20% 18%, rgba(255,255,255,.55), transparent),
    radial-gradient(1.5px 1.5px at 70% 12%, rgba(255,255,255,.45), transparent),
    radial-gradient(1px 1px at 40% 26%, rgba(255,255,255,.4), transparent),
    radial-gradient(1.5px 1.5px at 88% 22%, rgba(200,225,255,.5), transparent),
    radial-gradient(1px 1px at 12% 30%, rgba(255,255,255,.35), transparent);
  opacity:.7;
}
/* layered sand dunes */
.dune{position:absolute;left:-5%;right:-5%;border-radius:50% 50% 0 0/100% 100% 0 0;}
.dune-1{bottom:0;height:34vh;background:linear-gradient(180deg,#16203f,#0f1830);box-shadow:0 -4px 30px rgba(37,99,235,.12);}
.dune-2{bottom:0;height:24vh;left:-15%;right:auto;width:80%;background:linear-gradient(180deg,#1b2750,#131d3a);border-radius:50% 50% 0 0/100% 100% 0 0;}
.dune-3{bottom:0;height:18vh;right:-15%;left:auto;width:75%;background:linear-gradient(180deg,#22305f,#172244);border-radius:50% 50% 0 0/100% 100% 0 0;}
/* a lone palm silhouette, subtle */
.dune-moon{position:absolute;top:9%;left:18%;width:70px;height:70px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #e8eefc, #aebfe6 60%, #7e93c8);
  box-shadow:0 0 50px 12px rgba(174,191,230,.25);opacity:.85;}
@media (max-width:600px){
  .dune-1{height:26vh}.dune-2{height:18vh}.dune-3{height:14vh}
  .dune-moon{width:52px;height:52px;top:7%;left:14%}
}

/* ===== REVIEWS ===== */
.stars-row{display:flex;gap:3px;align-items:center}
.star{font-size:1rem;cursor:pointer;transition:transform .15s;line-height:1}
.star:hover{transform:scale(1.3)}
.star.filled{color:#f0d060}
.star.empty{color:rgba(255,255,255,.15)}
.prod-rating{display:flex;align-items:center;gap:.4rem;font-size:.8rem;color:var(--muted);margin-bottom:.5rem}
.prod-rating .count{font-size:.75rem}
.reviews-section{margin-top:1.5rem;border-top:1px solid var(--border);padding-top:1.2rem}
.reviews-summary{display:flex;align-items:center;gap:1rem;margin-bottom:1rem}
.reviews-avg{font-size:2.5rem;font-weight:900;line-height:1;color:var(--text)}
.reviews-breakdown{flex:1}
.rev-bar-row{display:flex;align-items:center;gap:.5rem;font-size:.75rem;color:var(--muted);margin-bottom:.25rem}
.rev-bar-bg{flex:1;height:5px;background:var(--bg3);border-radius:3px;overflow:hidden}
.rev-bar-fill{height:100%;background:linear-gradient(90deg,var(--gold),var(--gold2));border-radius:3px;transition:width .5s var(--ease)}
.review-card{background:var(--bg3);border-radius:var(--r);padding:1rem;margin-bottom:.75rem;border:1px solid var(--border)}
.review-header{display:flex;align-items:center;gap:.6rem;margin-bottom:.5rem}
.review-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--green2),var(--green));display:flex;align-items:center;justify-content:center;font-size:.9rem;font-weight:900;color:#fff;flex-shrink:0}
.review-name{font-size:.85rem;font-weight:700}
.review-date{font-size:.75rem;color:var(--muted);margin-right:auto}
.review-text{font-size:.85rem;color:var(--muted);line-height:1.6}
.verified-badge{font-size:.7rem;color:var(--green);background:rgba(37,99,235,.1);border:1px solid rgba(37,99,235,.2);border-radius:50px;padding:.1rem .5rem;margin-right:.3rem}
.write-review{margin-top:1rem}
.write-review-title{font-size:.9rem;font-weight:800;margin-bottom:.75rem}
.star-picker{display:flex;gap:5px;margin-bottom:.75rem}
.star-pick{font-size:1.6rem;cursor:pointer;transition:transform .15s;line-height:1;opacity:.3}
.star-pick.active{opacity:1}
.star-pick:hover{transform:scale(1.2)}
.review-input{width:100%;background:var(--bg2);border:1.5px solid var(--border);color:var(--text);border-radius:var(--r);padding:.75rem 1rem;font-size:.85rem;font-family:'Tajawal',sans-serif;resize:none;transition:border-color .25s}
.review-input:focus{outline:none;border-color:var(--green)}
.review-name-input{width:100%;background:var(--bg2);border:1.5px solid var(--border);color:var(--text);border-radius:var(--r);padding:.6rem 1rem;font-size:.85rem;font-family:'Tajawal',sans-serif;margin-bottom:.6rem;transition:border-color .25s}
.review-name-input:focus{outline:none;border-color:var(--green)}
.submit-review-btn{width:100%;margin-top:.6rem;padding:.75rem;border-radius:var(--r);background:linear-gradient(135deg,var(--green2),#006e8a);color:#fff;border:none;font-size:.9rem;font-weight:800;cursor:pointer;font-family:'Tajawal',sans-serif;transition:all .3s var(--ease)}
.submit-review-btn:hover{transform:translateY(-2px);box-shadow:0 0 25px rgba(37,99,235,.4)}

/* ===== SEARCH & FILTER ===== */
.shop-search-wrap{margin-top:2rem;bottom:auto;display:flex;flex-direction:column;gap:1rem}
.search-box{position:relative;display:flex;align-items:center;background:var(--bg2);border:1.5px solid var(--border);border-radius:var(--r2);padding:.2rem .9rem;transition:border-color .25s,box-shadow .25s}
.search-box:focus-within{border-color:var(--green);box-shadow:0 0 0 3px rgba(37,99,235,.1)}
.search-icon{font-size:1rem;opacity:.6;flex-shrink:0}
.search-input{flex:1;background:none;border:none;outline:none;color:var(--text);font-family:'Tajawal',sans-serif;font-size:.95rem;padding:.75rem .6rem}
.search-input::placeholder{color:var(--muted)}
.search-clear{cursor:pointer;font-size:.85rem;color:var(--muted);width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:50%;flex-shrink:0;transition:background .2s}
.search-clear:hover{background:var(--bg3);color:var(--text)}
.cat-filter-row{display:flex;gap:.6rem;flex-wrap:wrap}
.cat-chip{background:var(--bg2);border:1.5px solid var(--border);color:var(--muted);border-radius:50px;padding:.5rem 1.1rem;font-size:.85rem;font-weight:700;cursor:pointer;font-family:'Tajawal',sans-serif;transition:all .25s var(--ease)}
.cat-chip:hover{border-color:var(--green);color:var(--text)}
.cat-chip.active{background:linear-gradient(135deg,var(--green2),#006e8a);border-color:transparent;color:#fff}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--bg3);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--green)}

/* ===== PARTICLES BG ===== */
.particles{
  position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
}
.particle{
  position:absolute;width:2px;height:2px;background:var(--green);border-radius:50%;
  opacity:0;animation:float linear infinite;
}
@keyframes float{
  0%{transform:translateY(100vh) scale(0);opacity:0}
  10%{opacity:.6}
  90%{opacity:.2}
  100%{transform:translateY(-10vh) scale(1);opacity:0}
}

/* ===== NAVBAR ===== */
nav{
  position:sticky;top:0;z-index:100;
  background:rgba(7,8,16,0.85);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  padding:.9rem 2rem;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.brand-logo{width:42px;height:42px;border-radius:50%;flex-shrink:0}
.brand{
  display:flex;align-items:center;gap:.6rem;
  font-size:1.4rem;font-weight:900;cursor:pointer;
  background:linear-gradient(135deg,#fff 30%,var(--green));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  transition:opacity .2s;white-space:nowrap;
}
.brand:hover{opacity:.85}

/* ===== قائمة الهامبرغر ===== */
.hamburger-btn{
  background:none;border:none;cursor:pointer;
  display:flex;flex-direction:column;justify-content:space-between;
  width:28px;height:20px;padding:0;margin-right:.25rem;
  flex-shrink:0;
}
.hamburger-btn span{
  display:block;width:100%;height:2px;
  background:var(--text);border-radius:2px;
  transition:all .3s var(--ease);
}
.hamburger-btn.open span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.hamburger-btn.open span:nth-child(2){opacity:0}
.hamburger-btn.open span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}

/* القائمة المنسدلة */
.nav-dropdown{
  position:fixed;top:56px;right:0;left:0;
  background:var(--bg2);
  border-bottom:none;
  z-index:999;
  max-height:0;overflow:hidden;
  transition:max-height .3s var(--ease);
  direction:rtl;
}
.nav-dropdown.open{
  max-height:400px;
  border-bottom:1px solid var(--bg3);
}
.nav-dropdown ul{
  list-style:none;padding:.5rem 0;margin:0;
}
.nav-dropdown ul li{border-bottom:1px solid var(--bg3)}
.nav-dropdown ul li:last-child{border-bottom:none}
.nav-overlay{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.5);z-index:998;
}
.nav-overlay.open{display:block}

/* ── الديسكتوب: روابط أفقية ── */
@media(min-width:768px){
  .hamburger-btn{display:none}
  .nav-dropdown{
    position:static;max-height:none!important;overflow:visible;
    background:none;border:none;flex:1 1 auto;min-width:0;
  }
  .nav-dropdown ul{
    display:flex;flex-direction:row;flex-wrap:nowrap;
    gap:1.5rem;padding:0;margin:0;list-style:none;
    overflow-x:auto;scrollbar-width:none;
  }
  .nav-dropdown ul::-webkit-scrollbar{display:none}
  .nav-dropdown ul li{border:none}
  .nav-link{
    display:inline-block;padding:.3rem .1rem;font-size:.95rem;
    border-bottom:2px solid transparent;white-space:nowrap;
    background:none!important;
  }
  .nav-link:hover,.nav-link.active{
    padding-right:.1rem!important;
    border-color:var(--green);
  }
  .nav-overlay{display:none!important}
}
/* ── الجوال: هامبرغر ── */
@media(max-width:767px){
  .nav-dropdown{pointer-events:none}
  .nav-dropdown.open{pointer-events:auto}
}
.nav-link{
  display:block;
  color:var(--muted);font-weight:600;font-size:1rem;
  cursor:pointer;padding:.85rem 1.25rem;
  transition:all .2s var(--ease);
}
.nav-link:hover,.nav-link.active{
  color:var(--text);background:var(--bg3);
  padding-right:1.75rem;
}
.cart-btn{
  position:relative;background:none;border:none;
  font-size:1.4rem;cursor:pointer;color:var(--text);
  transition:transform .3s var(--ease);
}
.cart-btn:hover{transform:scale(1.15)}
.cart-badge{
  position:absolute;top:-6px;right:-8px;
  background:var(--green);color:#fff;
  font-size:.65rem;font-weight:900;
  width:18px;height:18px;border-radius:50%;
  display:none;align-items:center;justify-content:center;
  border:2px solid var(--bg);
}

/* ===== MAIN LAYOUT ===== */
main{
  position:relative;z-index:1;
  max-width:1300px;margin:0 auto;padding:2rem 1.5rem;
}

/* ===== HERO ===== */
.hero{
  display:grid;grid-template-columns:1fr 1fr;gap:3rem;
  align-items:center;min-height:88vh;padding:2rem 0;
}
.hero-tag{
  display:inline-flex;align-items:center;gap:.5rem;
  background:rgba(0,201,122,.1);border:1px solid rgba(0,201,122,.3);
  color:var(--green);border-radius:50px;padding:.35rem 1rem;
  font-size:.8rem;font-weight:700;margin-bottom:1.5rem;
  animation:fadeUp .6s var(--ease) both;
}
.hero h1{
  font-size:clamp(2rem,4vw,3.6rem);font-weight:900;line-height:1.1;
  margin-bottom:1.2rem;
  animation:fadeUp .7s .1s var(--ease) both;
}
.hero h1 .grad{
  background:linear-gradient(135deg,var(--green),var(--gold));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.hero p{
  color:var(--muted);font-size:1.1rem;line-height:1.7;
  margin-top:2rem;bottom:auto;max-width:520px;
  animation:fadeUp .7s .2s var(--ease) both;
}
.hero-btns{
  display:flex;gap:1rem;flex-wrap:wrap;
  animation:fadeUp .7s .3s var(--ease) both;
}
.btn{
  padding:.9rem 2rem;border-radius:var(--r);font-size:1rem;
  font-weight:700;font-family:'Tajawal',sans-serif;
  cursor:pointer;border:none;display:inline-flex;align-items:center;gap:.5rem;
  transition:all .3s var(--ease);
}
.btn-primary{
  background:linear-gradient(135deg,var(--green2),#006e8a);
  color:#fff;box-shadow:0 0 25px rgba(37,99,235,.3);
}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 0 40px rgba(37,99,235,.5)}
.btn-secondary{
  background:var(--bg3);color:var(--text);
  border:1px solid var(--border);
}
.btn-secondary:hover{background:var(--bg2);border-color:var(--green)}
.hero-stats{
  display:flex;gap:2rem;margin-top:2.5rem;
  animation:fadeUp .7s .4s var(--ease) both;
}
.stat{display:flex;flex-direction:column}
.stat-val{font-size:1.6rem;font-weight:900;color:var(--green)}
.stat-lbl{font-size:.8rem;color:var(--muted)}

/* ===== HERO VISUAL (CSS Phone Scene) ===== */
.hero-visual{
  display:flex;justify-content:center;align-items:center;
  position:relative;
  animation:fadeUp .8s .3s var(--ease) both;
}
.scene{
  position:relative;width:320px;height:520px;
  display:flex;justify-content:center;align-items:center;
}
.glow-orb{
  position:absolute;width:300px;height:300px;
  background:radial-gradient(circle,rgba(37,99,235,.18) 0%,transparent 70%);
  border-radius:50%;animation:pulse 3s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{transform:scale(1);opacity:.8}
  50%{transform:scale(1.15);opacity:1}
}
.phone3d{
  width:200px;height:430px;
  background:linear-gradient(160deg,#2a2d3a 0%,#1a1c26 50%,#111218 100%);
  border-radius:40px;
  border:7px solid #3a3d4a;
  position:relative;
  box-shadow:
    0 40px 80px rgba(0,0,0,.9),
    0 0 0 1px rgba(255,255,255,.04),
    inset 0 1px 0 rgba(255,255,255,.08);
  animation:float3d 4s ease-in-out infinite;
}
@keyframes float3d{
  0%,100%{transform:rotate(-8deg) translateY(0)}
  50%{transform:rotate(-8deg) translateY(-18px)}
}
.phone3d::before{
  content:'';position:absolute;
  left:-10px;top:90px;width:3px;height:35px;
  background:#2a2d3a;border-radius:3px 0 0 3px;
  box-shadow:0 45px 0 #2a2d3a;
}
.phone3d::after{
  content:'';position:absolute;
  right:-10px;top:110px;width:3px;height:60px;
  background:#2a2d3a;border-radius:0 3px 3px 0;
}
.phone-screen{
  position:absolute;inset:12px;
  background:linear-gradient(160deg,#0a1a3d,#030b20);
  border-radius:30px;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1rem;
}
.phone-screen::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(37,99,235,.15),transparent 60%);
}
.phone-logo{
  font-size:2.5rem;z-index:1;
  animation:logoFloat 2s ease-in-out infinite;
}
.phone-logo-img{
  width:78%;max-width:200px;z-index:1;
  border-radius:50%;
  animation:logoFloat 2s ease-in-out infinite;
  filter:drop-shadow(0 8px 24px rgba(37,99,235,.45));
}
@keyframes logoFloat{
  0%,100%{transform:scale(1)}50%{transform:scale(1.1)}
}
.phone-screen-text{
  font-size:.7rem;font-weight:700;color:rgba(255,255,255,.6);
  z-index:1;text-align:center;line-height:1.6;
}
.phone-case-overlay{
  position:absolute;inset:-6px;
  border-radius:44px;border:6px solid rgba(37,99,235,.7);
  box-shadow:0 0 30px rgba(37,99,235,.4);
  animation:casePulse 2s ease-in-out infinite;
}
@keyframes casePulse{
  0%,100%{box-shadow:0 0 20px rgba(37,99,235,.3)}
  50%{box-shadow:0 0 40px rgba(37,99,235,.6)}
}
.phone-ring{
  position:absolute;bottom:-15px;right:-20px;
  width:65px;height:65px;
  background:conic-gradient(var(--gold),var(--gold2),var(--gold));
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 5px 20px rgba(212,175,55,.5);
  animation:ringFloat 3s ease-in-out infinite;
}
@keyframes ringFloat{
  0%,100%{transform:rotate(0deg) translateY(0)}
  50%{transform:rotate(10deg) translateY(-5px)}
}
.phone-ring::after{
  content:'';width:25px;height:25px;
  background:var(--bg);border-radius:50%;
}
.floating-badge{
  position:absolute;background:var(--glass);
  backdrop-filter:blur(10px);border:1px solid var(--border);
  border-radius:12px;padding:.5rem .8rem;
  font-size:.75rem;font-weight:700;
  box-shadow:0 8px 24px rgba(0,0,0,.4);
  animation:badgeFloat ease-in-out infinite;
}
.badge1{top:60px;left:-30px;animation-duration:3.5s;animation-delay:0s}
.badge2{bottom:80px;left:-40px;animation-duration:4s;animation-delay:1s}
.badge3{top:160px;right:-45px;animation-duration:3s;animation-delay:.5s}
@keyframes badgeFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
}
.badge-dot{
  width:8px;height:8px;border-radius:50%;
  display:inline-block;margin-left:.4rem;
}

/* ===== SECTION TITLES ===== */
.section-header{text-align:center;margin-bottom:3rem}
.section-tag{
  display:inline-block;background:rgba(37,99,235,.1);
  color:var(--green);border:1px solid rgba(37,99,235,.25);
  border-radius:50px;padding:.25rem .9rem;font-size:.8rem;font-weight:700;
  margin-bottom:1rem;
}
.section-title{font-size:clamp(1.6rem,3vw,2.5rem);font-weight:900;margin-bottom:.75rem}
.section-sub{color:var(--muted);font-size:1rem;max-width:500px;margin:0 auto}

/* ===== PRODUCTS GRID ===== */
.products-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem;
}
.product-card{
  background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--r2);overflow:hidden;cursor:pointer;
  transition:all .4s var(--ease);position:relative;
}
.product-card:hover{
  transform:translateY(-8px);
  border-color:rgba(37,99,235,.4);
  box-shadow:0 20px 60px rgba(0,0,0,.4),0 0 30px rgba(37,99,235,.1);
}
.product-card::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(37,99,235,.05),transparent);
  opacity:0;transition:opacity .4s;pointer-events:none;
}
.product-card:hover::before{opacity:1}

/* ===== PRODUCT VISUAL (CSS Art) ===== */
.prod-visual{
  height:220px;display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
  padding:1.5rem;
  background:var(--bg2);
}
/* Carbon Case */
.vis-carbon-case{
  width:100px;height:180px;
  background:repeating-linear-gradient(
    45deg,
    #1a1a1a 0px,#1a1a1a 4px,
    #242424 4px,#242424 8px
  );
  border-radius:20px;
  border:3px solid rgba(255,255,255,.1);
  box-shadow:
    0 20px 60px rgba(0,0,0,.8),
    inset 0 1px 0 rgba(255,255,255,.1),
    0 0 30px rgba(37,99,235,.2);
  position:relative;
  animation:cardFloat 3s ease-in-out infinite;
}
.vis-carbon-case::after{
  content:'';position:absolute;
  top:15px;right:15px;
  width:38px;height:38px;
  background:rgba(255,255,255,.05);
  border-radius:10px;
  border:1px solid rgba(255,255,255,.08);
}
/* Crystal Case */
.vis-crystal-case{
  width:100px;height:180px;
  background:rgba(220,240,255,0.08);
  border-radius:20px;
  border:3px solid rgba(0,212,255,.5);
  box-shadow:
    0 20px 60px rgba(0,0,0,.7),
    0 0 40px rgba(0,212,255,.25),
    inset 0 0 30px rgba(0,212,255,.08);
  position:relative;
  animation:cardFloat 3.5s ease-in-out infinite;
  backdrop-filter:blur(4px);
}
.vis-crystal-case::before{
  content:'';position:absolute;
  top:50%;left:50%;transform:translate(-50%,-50%);
  width:40px;height:40px;border-radius:50%;
  border:4px solid rgba(0,212,255,.4);
  box-shadow:0 0 20px rgba(0,212,255,.3);
}
/* MagSafe Ring */
.vis-ring{
  width:110px;height:110px;
  border-radius:50%;
  background:conic-gradient(#f0d060,#d4af37,#aa7c11,#d4af37,#f0d060);
  box-shadow:
    0 10px 40px rgba(212,175,55,.5),
    inset 0 0 30px rgba(0,0,0,.4);
  display:flex;align-items:center;justify-content:center;
  animation:spinRing 8s linear infinite,cardFloat 3s ease-in-out infinite;
  position:relative;
}
.vis-ring::after{
  content:'';width:50px;height:50px;border-radius:50%;
  background:var(--bg2);
  box-shadow:inset 0 2px 8px rgba(0,0,0,.6);
}
@keyframes spinRing{to{filter:hue-rotate(30deg)}}
/* Leather Strap */
.vis-strap{
  width:28px;height:160px;
  background:linear-gradient(to bottom,#8B5E3C,#6B3F20,#8B5E3C);
  border-radius:12px;
  border:2px solid #5a3018;
  box-shadow:0 10px 40px rgba(0,0,0,.6),inset 2px 0 6px rgba(255,255,255,.1);
  position:relative;
  animation:cardFloat 4s ease-in-out infinite;
}
.vis-strap::before{
  content:'';position:absolute;
  bottom:10px;left:50%;transform:translateX(-50%);
  width:14px;height:14px;border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 10px rgba(212,175,55,.4);
}
.vis-strap::after{
  content:'';position:absolute;
  top:0;left:50%;transform:translateX(-50%);
  width:14px;height:24px;
  background:var(--gold);border-radius:4px 4px 0 0;
}
@keyframes cardFloat{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-12px) rotate(2deg)}
}
/* Glow behind visuals */
.vis-glow{
  position:absolute;width:120px;height:120px;border-radius:50%;
  filter:blur(40px);opacity:.5;
  animation:glowPulse 2s ease-in-out infinite;
}
@keyframes glowPulse{0%,100%{opacity:.4}50%{opacity:.7}}

.prod-info{padding:1.25rem}
.prod-category{
  font-size:.75rem;font-weight:700;color:var(--green);
  text-transform:uppercase;letter-spacing:.05em;margin-bottom:.4rem;
}
.prod-name{font-size:1.05rem;font-weight:800;margin-bottom:.5rem;line-height:1.3}
.prod-desc{font-size:.85rem;color:var(--muted);line-height:1.6;margin-bottom:1rem}
.prod-footer{display:flex;align-items:center;justify-content:space-between}
.prod-price{font-size:1.3rem;font-weight:900;color:var(--text)}
.prod-price span{font-size:.85rem;color:var(--green);margin-right:.2rem}
.prod-colors{display:flex;gap:.4rem}
.prod-color{
  width:18px;height:18px;border-radius:50%;
  border:2px solid var(--border);cursor:pointer;
  transition:transform .2s;
}
.prod-color:hover{transform:scale(1.3)}

/* ===== QUICK ADD MODAL ===== */
.modal-overlay{
  position:fixed;inset:0;z-index:200;
  background:rgba(0,0,0,.8);backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  display:none;overflow-y:auto;
}
.modal-overlay.open{display:block}
.modal{
  display:block;box-sizing:border-box;
  direction:rtl;text-align:initial;
  background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--r2);padding:2rem;
  max-width:460px;width:calc(100% - 2rem);
  margin:5vh auto;
  animation:modalIn .4s var(--ease);position:relative;
}
@keyframes modalIn{
  from{transform:scale(.9) translateY(20px);opacity:0}
  to{transform:scale(1) translateY(0);opacity:1}
}
.modal-close{
  position:absolute;top:1rem;right:1rem;left:auto;
  background:var(--bg3);border:1px solid var(--border);color:var(--text);
  width:38px;height:38px;border-radius:50%;z-index:5;
  cursor:pointer;font-size:1.05rem;display:flex;align-items:center;justify-content:center;
  transition:background .2s;box-shadow:0 2px 10px rgba(0,0,0,.4);
}
.modal-close:hover{background:#ef4444}
.modal-visual{
  height:160px;display:flex;align-items:center;justify-content:center;
  background:var(--bg3);border-radius:var(--r);margin-bottom:1.5rem;
  position:relative;overflow:hidden;
}
.modal-title{font-size:1.3rem;font-weight:900;margin-bottom:.4rem}
.modal-desc{font-size:.92rem;color:var(--muted);line-height:1.7;margin-bottom:1rem}
.modal-desc:empty{display:none}
.modal-price-row{
  display:flex;align-items:center;gap:.5rem;margin-bottom:1.2rem;
}
.modal-price{font-size:1.6rem;font-weight:900}
.modal-sar{font-size:.9rem;color:var(--green);font-weight:700}
.option-label{font-size:.85rem;font-weight:700;color:var(--muted);margin-bottom:.6rem}
.options-row{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:1.2rem}
.option-chip{
  padding:.4rem .9rem;border-radius:50px;
  border:1.5px solid var(--border);background:var(--bg3);
  color:var(--muted);font-size:.85rem;font-weight:600;
  cursor:pointer;transition:all .25s;font-family:'Tajawal',sans-serif;
}
.option-chip:hover,.option-chip.sel{
  border-color:var(--green);color:var(--text);background:rgba(37,99,235,.1);
}
.modal-add-btn{
  width:100%;padding:1rem;border-radius:var(--r);
  background:linear-gradient(135deg,var(--green2),#006e8a);
  color:#fff;border:none;font-size:1.05rem;font-weight:800;
  cursor:pointer;font-family:'Tajawal',sans-serif;
  transition:all .3s var(--ease);display:flex;align-items:center;justify-content:center;gap:.5rem;
  box-shadow:0 0 20px rgba(37,99,235,.3);
}
.modal-add-btn:hover{transform:translateY(-2px);box-shadow:0 0 35px rgba(37,99,235,.5)}

/* ===== IMAGE LIGHTBOX ===== */
.modal-visual.zoomable{cursor:zoom-in}
.modal-visual.zoomable::after{
  content:'🔍';position:absolute;bottom:8px;right:8px;left:auto;
  background:rgba(0,0,0,.55);color:#fff;font-size:.8rem;
  width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;
}
.lightbox-overlay{
  position:fixed;inset:0;z-index:400;
  background:rgba(0,0,0,.92);backdrop-filter:blur(4px);
  display:none;align-items:center;justify-content:center;padding:1.5rem;
  cursor:zoom-out;
}
.lightbox-overlay.open{display:flex}
.lightbox-overlay img{
  max-width:92vw;max-height:88vh;object-fit:contain;
  border-radius:12px;animation:modalIn .3s var(--ease);
}
.lightbox-close{
  position:absolute;top:1.2rem;right:1.2rem;left:auto;
  background:rgba(255,255,255,.12);border:none;color:#fff;
  width:42px;height:42px;border-radius:50%;cursor:pointer;
  font-size:1.2rem;display:flex;align-items:center;justify-content:center;
  transition:background .2s;
}
.lightbox-close:hover{background:#ef4444}

/* ===== CART ===== */
.cart-layout{display:grid;grid-template-columns:1.4fr 1fr;gap:2rem;margin-top:1rem}
.cart-empty{
  text-align:center;padding:5rem 2rem;
  display:flex;flex-direction:column;align-items:center;gap:1rem;
}
.cart-empty .icon{font-size:4rem;opacity:.4}
.cart-empty h3{font-size:1.4rem;font-weight:800;color:var(--muted)}
.card{
  background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--r2);padding:1.75rem;
}
.card-title{
  font-size:1.2rem;font-weight:900;margin-bottom:1.5rem;
  padding-bottom:1rem;border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:.6rem;
}
.cart-item{
  display:flex;align-items:center;gap:1rem;
  padding:1rem;background:var(--bg3);border-radius:var(--r);
  margin-bottom:.75rem;position:relative;
  border:1px solid var(--border);
}
.cart-item-icon{
  width:52px;height:52px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.6rem;flex-shrink:0;
}
.cart-item-info{flex:1}
.cart-item-name{font-size:.9rem;font-weight:700;margin-bottom:.15rem}
.cart-item-meta{font-size:.8rem;color:var(--muted)}
.cart-item-price{font-weight:900;font-size:1rem;color:var(--text)}
.qty-ctrl{
  display:flex;align-items:center;gap:.5rem;
  background:var(--bg2);border-radius:50px;padding:.15rem .4rem;
  border:1px solid var(--border);
}
.qty-btn{
  background:none;border:none;color:var(--text);
  width:22px;height:22px;border-radius:50%;cursor:pointer;
  font-size:1rem;display:flex;align-items:center;justify-content:center;
  transition:background .2s;font-weight:900;
}
.qty-btn:hover{background:var(--bg3)}
.qty-num{font-weight:700;font-size:.9rem;min-width:20px;text-align:center}
.remove-btn{
  position:absolute;top:.5rem;left:.5rem;
  background:none;border:none;color:var(--muted);
  cursor:pointer;font-size:.9rem;opacity:.5;
  transition:all .2s;
}
.remove-btn:hover{color:#ef4444;opacity:1}

/* ===== SUMMARY ===== */
.summary-line{
  display:flex;justify-content:space-between;align-items:center;
  padding:.6rem 0;color:var(--muted);font-size:.9rem;
  border-bottom:1px solid rgba(255,255,255,.04);
}
.summary-line:last-child{border-bottom:none}
.summary-line.total{
  color:var(--text);font-size:1.2rem;font-weight:900;
  padding-top:1rem;border-top:1px solid var(--border);
}
.summary-line.total .val{color:var(--green);font-size:1.4rem}

/* ===== CHECKOUT FORM ===== */
.form-group{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1rem}
.form-label{font-size:.85rem;font-weight:700;color:var(--muted)}
.form-input{
  background:var(--bg3);border:1.5px solid var(--border);
  color:var(--text);border-radius:var(--r);
  padding:.75rem 1rem;font-size:.95rem;font-family:'Tajawal',sans-serif;
  transition:border-color .25s,box-shadow .25s;
}
.form-input:focus{
  outline:none;border-color:var(--green);
  box-shadow:0 0 0 3px rgba(37,99,235,.12);
}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.span2{grid-column:span 2}

/* ===== PAYMENT METHODS ===== */
.pay-methods{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin-bottom:1.25rem}
.pay-opt{
  background:var(--bg3);border:1.5px solid var(--border);
  border-radius:var(--r);padding:.85rem .5rem;
  text-align:center;cursor:pointer;
  transition:all .25s;
  display:flex;flex-direction:column;align-items:center;gap:.3rem;
}
.pay-opt:hover,.pay-opt.sel{border-color:var(--green);background:rgba(37,99,235,.07)}
.pay-icon{font-size:1.5rem}
.pay-name{font-size:.75rem;font-weight:700}

/* ===== SECURITY BADGES ===== */
.sec-badges{
  display:flex;justify-content:center;gap:1.5rem;flex-wrap:wrap;
  padding-top:1rem;margin-top:.5rem;border-top:1px solid var(--border);
}
.sec-badge{
  display:flex;align-items:center;gap:.35rem;
  font-size:.75rem;color:var(--muted);
}
.sec-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--green);flex-shrink:0}


/* ===== SUCCESS ===== */
.success-screen{
  text-align:center;padding:5rem 2rem;max-width:560px;margin:0 auto;
  animation:fadeUp .6s var(--ease);
}
.success-icon-wrap{
  width:90px;height:90px;border-radius:50%;
  background:rgba(37,99,235,.12);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:2.5rem;margin-bottom:1.5rem;
  box-shadow:0 0 40px rgba(37,99,235,.2);
  animation:successPop .5s .1s var(--ease) both;
}
@keyframes successPop{from{transform:scale(0)}to{transform:scale(1)}}
.order-detail{
  background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--r2);padding:1.5rem;text-align:right;margin:1.5rem 0;
}
.detail-row{
  display:flex;justify-content:space-between;align-items:flex-start;
  padding:.5rem 0;border-bottom:1px solid rgba(255,255,255,.04);font-size:.9rem;
}
.detail-row:last-child{border-bottom:none}
.detail-key{color:var(--muted)}
.detail-val{font-weight:700;max-width:60%;text-align:left}

/* ===== TOAST ===== */
.toast{
  position:fixed;top:2rem;bottom:auto;right:2rem;z-index:10000;
  background:var(--bg3);border-left:4px solid var(--green);
  color:var(--text);padding:1rem 1.5rem;border-radius:var(--r);
  box-shadow:0 10px 40px rgba(0,0,0,.5);
  display:none;align-items:center;gap:.75rem;font-weight:700;
  animation:slideIn .3s var(--ease);max-width:340px;
}
.toast.show{display:flex}
@keyframes slideIn{from{transform:translateX(30px);opacity:0}to{transform:translateX(0);opacity:1}}

/* ===== ANIMATIONS ===== */
@keyframes fadeUp{
  from{transform:translateY(20px);opacity:0}
  to{transform:translateY(0);opacity:1}
}
.fade-in{animation:fadeUp .6s var(--ease) both}

/* ===== RESPONSIVE ===== */
@media(max-width:900px){
  .hero{grid-template-columns:1fr;text-align:center;gap:2rem}
  .hero p{margin-inline:auto}
  .hero-btns{justify-content:center}
  .hero-stats{justify-content:center}
  .hero-visual{order:-1}
  .cart-layout{grid-template-columns:1fr}
}
@media(max-width:600px){
  nav{padding:.75rem 1rem}
  
  main{padding:1.25rem 1rem}
  .form-grid{grid-template-columns:1fr}
  .span2{grid-column:span 1}
  .pay-methods{grid-template-columns:1fr 1fr}
}

/* ===== ADMIN ===== */
.admin-btn{
  background:none;border:1.5px solid var(--border);
  color:var(--muted);font-size:.75rem;font-weight:700;
  border-radius:50px;padding:.3rem .8rem;cursor:pointer;
  transition:all .25s;font-family:'Tajawal',sans-serif;
  white-space:nowrap;
}
.admin-btn:hover{border-color:var(--gold);color:var(--gold)}
.admin-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:2rem;bottom:auto;flex-wrap:wrap;gap:1rem;
}
.admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
@media(max-width:800px){.admin-grid{grid-template-columns:1fr}}
.admin-form{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r2);padding:1.75rem}
.admin-list{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r2);padding:1.75rem}
.admin-product-item{
  display:flex;align-items:center;gap:1rem;
  padding:.85rem 1rem;background:var(--bg3);border-radius:var(--r);
  margin-bottom:.6rem;border:1px solid var(--border);
  transition:border-color .2s;
}
.admin-product-item:hover{border-color:rgba(37,99,235,.3)}
.admin-product-icon{font-size:1.6rem;flex-shrink:0}
.admin-product-info{flex:1;min-width:0}
.admin-product-name{font-weight:800;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.admin-product-price{font-size:.8rem;color:var(--green);font-weight:700}
.admin-product-meta{font-size:.75rem;color:var(--muted)}
.admin-del-btn{
  background:none;border:1.5px solid rgba(239,68,68,.3);
  color:#ef4444;border-radius:50px;padding:.3rem .7rem;
  font-size:.75rem;cursor:pointer;font-family:'Tajawal',sans-serif;
  transition:all .2s;flex-shrink:0;
}
.admin-del-btn:hover{background:rgba(239,68,68,.1);border-color:#ef4444}
.visual-select{
  display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin-top:.4rem;
}
.vis-opt{
  background:var(--bg3);border:1.5px solid var(--border);
  border-radius:var(--r);padding:.5rem;text-align:center;
  cursor:pointer;font-size:.75rem;font-weight:700;
  color:var(--muted);transition:all .2s;
}
.vis-opt:hover,.vis-opt.sel{border-color:var(--green);color:var(--text);background:rgba(37,99,235,.08)}
.vis-opt .vis-icon{font-size:1.3rem;display:block;margin-bottom:.2rem}
.color-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.4rem}
.color-tag{
  display:flex;align-items:center;gap:.3rem;
  background:var(--bg3);border:1px solid var(--border);
  border-radius:50px;padding:.2rem .6rem;font-size:.75rem;
}
.color-tag-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.color-tag-del{background:none;border:none;color:var(--muted);cursor:pointer;font-size:.9rem;line-height:1;padding:0}
.color-tag-del:hover{color:#ef4444}
.add-color-row{display:flex;gap:.5rem;align-items:center;margin-top:.5rem}
.color-preview{width:32px;height:32px;border-radius:8px;border:2px solid var(--border);flex-shrink:0}
.admin-empty{text-align:center;padding:2rem;color:var(--muted);font-size:.9rem}

/* ===== PENDING REVIEWS ===== */
.pending-review-card{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:1rem;margin-bottom:.75rem}
.pending-review-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem;flex-wrap:wrap;gap:.4rem}
.pending-review-name{font-weight:800;font-size:.9rem}
.pending-review-stars{color:#f0d060;margin-right:.5rem;font-size:.85rem}
.pending-review-prod{font-size:.75rem;color:var(--muted);background:var(--bg2);padding:.2rem .6rem;border-radius:50px}
.pending-review-text{font-size:.85rem;color:var(--muted);line-height:1.6;margin-bottom:.75rem}
.pending-review-actions{display:flex;gap:.6rem}
.rev-approve-btn{flex:1;background:linear-gradient(135deg,var(--green2),#006e8a);color:#fff;border:none;border-radius:var(--r);padding:.55rem;font-size:.85rem;font-weight:700;cursor:pointer;font-family:'Tajawal',sans-serif;transition:all .25s}
.rev-approve-btn:hover{transform:translateY(-1px);box-shadow:0 0 15px rgba(37,99,235,.3)}
.rev-reject-btn{background:none;border:1px solid rgba(239,68,68,.4);color:#ef4444;border-radius:var(--r);padding:.55rem 1rem;font-size:.85rem;font-weight:700;cursor:pointer;font-family:'Tajawal',sans-serif;transition:all .2s}
.rev-reject-btn:hover{background:rgba(239,68,68,.1)}

/* ===== ADMIN ORDERS ===== */
.admin-orders-filter{display:flex;gap:.5rem;margin-bottom:1rem;flex-wrap:wrap}
.ord-filter-chip{background:var(--bg3);border:1.5px solid var(--border);color:var(--muted);border-radius:50px;padding:.4rem 1rem;font-size:.82rem;font-weight:700;cursor:pointer;font-family:'Tajawal',sans-serif;transition:all .2s}
.ord-filter-chip.active{background:linear-gradient(135deg,var(--green2),#006e8a);border-color:transparent;color:#fff}
.order-card{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:1rem;margin-bottom:.85rem;transition:opacity .25s}
.order-card.order-done{opacity:.62}
.order-card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.6rem;flex-wrap:wrap;gap:.4rem}
.order-id{font-weight:800;font-size:.92rem}
.order-status{font-size:.74rem;font-weight:700;padding:.2rem .65rem;border-radius:50px}
.order-status.st-pending{color:#f0d060;background:rgba(240,208,96,.12);border:1px solid rgba(240,208,96,.25)}
.order-status.st-done{color:#22c55e;background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.25)}
.order-meta{display:flex;flex-direction:column;gap:.25rem;font-size:.84rem;color:var(--text);margin-bottom:.6rem;line-height:1.5}
.order-items{background:var(--bg2);border-radius:10px;padding:.6rem .8rem;margin-bottom:.6rem}
.order-item-row{display:flex;justify-content:space-between;gap:.5rem;font-size:.8rem;color:var(--muted);padding:.15rem 0}
.order-total{font-size:.92rem;margin-bottom:.75rem}
.order-total strong{color:var(--green);font-size:1.05rem}
.order-actions{display:flex;gap:.5rem;flex-wrap:wrap}
.ord-wa-btn{flex:1;min-width:130px;text-align:center;text-decoration:none;background:linear-gradient(135deg,#25D366,#128C7E);color:#fff;border:none;border-radius:var(--r);padding:.55rem;font-size:.82rem;font-weight:700;cursor:pointer;font-family:'Tajawal',sans-serif;transition:all .25s;display:flex;align-items:center;justify-content:center}
.ord-wa-btn:hover{transform:translateY(-1px);box-shadow:0 0 15px rgba(37,211,102,.35)}
.ord-done-btn{flex:1;min-width:120px;background:linear-gradient(135deg,var(--green2),#006e8a);color:#fff;border:none;border-radius:var(--r);padding:.55rem;font-size:.82rem;font-weight:700;cursor:pointer;font-family:'Tajawal',sans-serif;transition:all .25s}
.ord-done-btn:hover{transform:translateY(-1px);box-shadow:0 0 15px rgba(37,99,235,.3)}
.ord-undo-btn{flex:1;min-width:120px;background:none;border:1px solid var(--border);color:var(--muted);border-radius:var(--r);padding:.55rem;font-size:.82rem;font-weight:700;cursor:pointer;font-family:'Tajawal',sans-serif;transition:all .2s}
.ord-undo-btn:hover{background:var(--bg2);color:var(--text)}
.ord-del-btn{background:none;border:1px solid rgba(239,68,68,.4);color:#ef4444;border-radius:var(--r);padding:.55rem .9rem;font-size:.82rem;font-weight:700;cursor:pointer;font-family:'Tajawal',sans-serif;transition:all .2s}
.ord-del-btn:hover{background:rgba(239,68,68,.1)}

/* ===== ADMIN LOGIN ===== */
.admin-login-wrap{
  min-height:80vh;display:flex;align-items:center;justify-content:center;
}
.admin-login-box{
  background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--r2);padding:2.5rem;width:100%;max-width:400px;
  animation:modalIn .4s var(--ease);text-align:center;
}
.admin-login-icon{font-size:3rem;margin-bottom:1rem}
.admin-login-title{font-size:1.5rem;font-weight:900;margin-bottom:.4rem}
.admin-login-sub{font-size:.85rem;color:var(--muted);margin-bottom:2rem}
.admin-login-input{
  width:100%;background:var(--bg3);border:1.5px solid var(--border);
  color:var(--text);border-radius:var(--r);padding:.85rem 1rem;
  font-size:1rem;font-family:'Tajawal',sans-serif;
  text-align:center;letter-spacing:.15em;
  transition:border-color .25s,box-shadow .25s;margin-bottom:1rem;
}
.admin-login-input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.admin-login-btn{
  width:100%;padding:.9rem;border-radius:var(--r);
  background:linear-gradient(135deg,var(--green2),#006e8a);
  color:#fff;border:none;font-size:1rem;font-weight:800;
  cursor:pointer;font-family:'Tajawal',sans-serif;
  transition:all .3s var(--ease);
}
.admin-login-btn:hover{transform:translateY(-2px);box-shadow:0 0 25px rgba(37,99,235,.4)}
.admin-login-err{
  font-size:.85rem;color:#ef4444;margin-top:.75rem;
  display:none;
}
.admin-lock-warning{
  font-size:.78rem;color:var(--muted);margin-top:1rem;
  padding:.6rem;background:rgba(239,68,68,.06);
  border:1px solid rgba(239,68,68,.15);border-radius:10px;
}
.admin-session-bar{
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(37,99,235,.07);border:1px solid rgba(37,99,235,.2);
  border-radius:var(--r);padding:.6rem 1rem;margin-bottom:1.5rem;
  font-size:.82rem;
}
.admin-logout-btn{
  background:none;border:1px solid rgba(239,68,68,.4);
  color:#ef4444;border-radius:50px;padding:.25rem .7rem;
  font-size:.78rem;cursor:pointer;font-family:'Tajawal',sans-serif;
  transition:all .2s;
}
.admin-logout-btn:hover{background:rgba(239,68,68,.1)}

/* ===== WISHLIST HEART (المفضلة) ===== */
.wish-heart{
  position:absolute;top:10px;left:10px;right:auto;z-index:6;
  width:38px;height:38px;border-radius:50%;
  background:rgba(7,8,16,.55);backdrop-filter:blur(4px);
  border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-size:1.05rem;cursor:pointer;line-height:1;
  transition:transform .2s var(--ease),background .2s;
  padding:0;
}
.wish-heart:hover{transform:scale(1.15);background:rgba(7,8,16,.8)}
.wish-heart.on{background:rgba(239,68,68,.15);border-color:rgba(239,68,68,.4)}
.wish-heart:active{transform:scale(.92)}

/* ===== PAGE WRAP (المفضلة / طلباتي) ===== */
.page-wrap{margin-top:.5rem}
.page-title{font-size:1.6rem;font-weight:900;margin-bottom:1.2rem}

/* ===== MY ORDERS (طلباتي) ===== */
.myorders-list{display:flex;flex-direction:column;gap:1rem}
.myorder-card{
  background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--r);padding:1.2rem;
}
.myorder-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  margin-bottom:.9rem;
}
.myorder-id{font-weight:900;font-size:1rem}
.myorder-date{color:var(--muted);font-size:.78rem;margin-top:.2rem}
.myorder-items{
  display:flex;flex-direction:column;gap:.4rem;
  padding:.75rem 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);
}
.myorder-item{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  font-size:.86rem;line-height:1.5;
}
.myorder-foot{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:.9rem;
}

/* ===== NAV BADGES (المفضلة / السلة) ===== */
.nav-icon-btn{
  position:relative;background:none;border:none;cursor:pointer;
  font-size:1.25rem;padding:.3rem;line-height:1;color:var(--text);
  transition:transform .2s var(--ease);
}
.nav-icon-btn:hover{transform:scale(1.12)}
.nav-badge{
  position:absolute;top:-4px;left:-6px;right:auto;
  background:#ef4444;color:#fff;font-size:.62rem;font-weight:800;
  min-width:17px;height:17px;border-radius:50px;padding:0 4px;
  display:flex;align-items:center;justify-content:center;
}