html[lang="ar"], body {
  direction: rtl;
  text-align: right;
}

.nav, .header-inner, .footer-inner, .search-row, .hero-title {
  direction: rtl;
}

input, button {
  font-family: inherit;
}
:root{
  --bg:#0f1115;
  --panel:#151923;
  --panel2:#10131b;
  --text:#e9eef7;
  --muted:#a7b0c0;
  --line:#242a38;
  --accent:#c9a24a;      /* warm brass */
  --accent2:#7fd0e8;     /* subtle crystal */
  --danger:#ff5b5b;
  --ok:#43d17a;
  --shadow: 0 18px 48px rgba(0,0,0,.45);
  --radius:18px;
  --radius2:14px;
  --max: 1240px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: radial-gradient(1200px 800px at 15% 10%, rgba(127,208,232,.14), transparent 55%),
              radial-gradient(900px 700px at 85% 20%, rgba(201,162,74,.14), transparent 60%),
              var(--bg);
  color:var(--text);
  line-height:1.45;
}

a{color:inherit; text-decoration:none}
a:hover{opacity:.92}
img{max-width:100%; display:block}
.container{max-width:var(--max); margin:0 auto; padding:0 18px}
.muted{color:var(--muted)}
.small{font-size:.92rem}
.tiny{font-size:.84rem}
.hr{height:1px; background:var(--line); border:0; margin:22px 0}

.header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(12px);
  background: rgba(15,17,21,.65);
  border-bottom:1px solid rgba(36,42,56,.7);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px;
  padding:14px 0;
}
.brand{
  display:flex; align-items:center; gap:12px;
}
.logo{
  width:38px; height:38px; border-radius:12px;
  background:
    linear-gradient(135deg, rgba(127,208,232,.9), rgba(201,162,74,.9));
  box-shadow: 0 10px 22px rgba(0,0,0,.35);
}
.brand-title{
  display:flex; flex-direction:column; gap:2px;
}
.brand-title strong{font-size:1.02rem; letter-spacing:.2px}
.brand-title span{font-size:.85rem; color:var(--muted)}
.nav{
  display:flex; gap:14px; align-items:center; flex-wrap:wrap;
}
.nav a{
  font-size:.92rem;
  color:var(--muted);
  padding:8px 10px;
  border-radius:12px;
}
.nav a:hover{background:rgba(255,255,255,.05); color:var(--text)}

.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(127,208,232,.22);
  background: rgba(16,19,27,.75);
  color:var(--muted);
  font-size:.9rem;
}

.hero-top{
  padding:26px 0 14px;
  display:flex; flex-direction:column; gap:14px;
}
.hero-title{
  display:flex; align-items:flex-end; justify-content:space-between; gap:10px; flex-wrap:wrap;
}
.hero-title h1{
  margin:0;
  font-size:1.55rem;
  letter-spacing:.2px;
}
.hero-title p{margin:0; color:var(--muted)}
.search-row{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
}
.search{
  flex:1;
  min-width:240px;
  display:flex; align-items:center;
  background: rgba(21,25,35,.85);
  border:1px solid rgba(36,42,56,.9);
  border-radius:14px;
  padding:10px 12px;
}
.search input{
  width:100%;
  background:transparent;
  border:0;
  outline:none;
  color:var(--text);
  font-size:1rem;
}
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(36,42,56,.9);
  background: rgba(21,25,35,.6);
  color:var(--muted);
  font-size:.95rem;
}

.grid{
  display:grid;
  gap:14px;
}
.grid.catalog{
  grid-template-columns: repeat(6, minmax(0, 1fr));
  padding:16px 0 28px;
}
@media (max-width: 1100px){
  .grid.catalog{grid-template-columns: repeat(4, minmax(0,1fr))}
}
@media (max-width: 820px){
  .grid.catalog{grid-template-columns: repeat(3, minmax(0,1fr))}
}
@media (max-width: 560px){
  .grid.catalog{grid-template-columns: repeat(2, minmax(0,1fr))}
}

.card{
  background: linear-gradient(180deg, rgba(21,25,35,.92), rgba(16,19,27,.92));
  border:1px solid rgba(36,42,56,.95);
  border-radius: var(--radius2);
  overflow:hidden;
  box-shadow: 0 12px 30px rgba(0,0,0,.28);
  display:flex; flex-direction:column;
  min-height: 100%;
}
.card .img{
  aspect-ratio: 4 / 5;
  background: rgba(255,255,255,.03);
}
.card .body{
  padding:12px 12px 14px;
  display:flex; flex-direction:column; gap:8px;
  flex:1;
}
.card h3{
  margin:0;
  font-size:.98rem;
  letter-spacing:.1px;
  line-height:1.25;
}
.price{
  font-weight:700;
  color: var(--text);
}
.card .row{
  display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto;
}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px;
  padding:10px 12px;
  border-radius: 14px;
  border:1px solid rgba(36,42,56,.9);
  background: rgba(255,255,255,.04);
  color:var(--text);
  font-weight:650;
  cursor:pointer;
  user-select:none;
}
.btn:hover{background: rgba(255,255,255,.06)}
.btn.primary{
  border: 1px solid rgba(201,162,74,.45);
  background: linear-gradient(135deg, rgba(201,162,74,.22), rgba(127,208,232,.10));
}
.btn.primary:hover{filter:brightness(1.05)}
.btn.small{padding:9px 10px; border-radius:12px; font-size:.92rem}
.btn.full{width:100%}

.page{
  padding:20px 0 40px;
}

.product-shell{
  display:grid;
  grid-template-columns: 40% 60%;
  gap:16px;
  align-items:start;
}
@media (max-width: 980px){
  .product-shell{grid-template-columns:1fr; }
}

.panel{
  background: linear-gradient(180deg, rgba(21,25,35,.92), rgba(16,19,27,.92));
  border:1px solid rgba(36,42,56,.95);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.panel.pad{padding:16px}
.gallery-main{
  border-radius: 16px;
  overflow:hidden;
  border:1px solid rgba(36,42,56,.95);
  background: rgba(255,255,255,.03);
}
.thumbs{
  display:grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap:10px;
  margin-top:12px;
}
@media (max-width: 560px){
  .thumbs{grid-template-columns: repeat(5, minmax(0,1fr))}
  
}
.thumb{
  border-radius: 14px;
  overflow:hidden;
  border:1px solid rgba(36,42,56,.95);
  background: rgba(255,255,255,.03);
  cursor:pointer;
}
.thumb.active{outline:2px solid rgba(127,208,232,.55)}
.p-title{
  margin:0;
  font-size:1.35rem;
  letter-spacing:.2px;
}
.p-meta{display:flex; flex-direction:column; gap:10px}
.p-meta .price{font-size:1.35rem}
.color-row{display:flex; gap:10px; flex-wrap:wrap}
.color{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(36,42,56,.95);
  background: rgba(255,255,255,.03);
  cursor:pointer;
  color:var(--muted);
}
.color .dot{
  width:12px; height:12px; border-radius:999px;
  border:1px solid rgba(255,255,255,.25);
}
.color.active{
  border-color: rgba(127,208,232,.55);
  color: var(--text);
  background: rgba(127,208,232,.08);
}

.form{
  display:flex; flex-direction:column; gap:10px;
  margin-top:12px;
}
.field label{
  display:block;
  font-size:.9rem;
  color:var(--muted);
  margin:0 0 6px 2px;
}
.field input,.field textarea{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(36,42,56,.95);
  background: rgba(15,17,21,.35);
  color:var(--text);
  outline:none;
}
.field textarea{min-height:98px; resize:vertical}
.note{
  font-size:.9rem;
  color: var(--muted);
  margin-top:10px;
  display:flex; gap:10px; align-items:flex-start;
}
.note b{color:var(--text)}
.success{
  margin-top:12px;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(67,209,122,.35);
  background: rgba(67,209,122,.08);
  color: var(--text);
  display:none;
}
.success.show{display:block}
.error{
  margin-top:12px;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,91,91,.35);
  background: rgba(255,91,91,.08);
  color: var(--text);
  display:none;
}
.error.show{display:block}

.tabs{
  margin-top:16px;
}
.tab-head{
  display:flex; gap:10px; flex-wrap:wrap;
  padding:8px;
  border-radius: 16px;
  border:1px solid rgba(36,42,56,.95);
  background: rgba(16,19,27,.55);
}
.tab-btn{
  padding:10px 12px;
  border-radius: 14px;
  border:1px solid transparent;
  background: transparent;
  color: var(--muted);
  cursor:pointer;
  font-weight:650;
}
.tab-btn.active{
  color: var(--text);
  border-color: rgba(201,162,74,.35);
  background: rgba(201,162,74,.10);
}
.tab-body{
  padding:16px;
  border-top:1px solid rgba(36,42,56,.95);
}
.tab-pane{display:none}
.tab-pane.active{display:block}

.similar{
  margin-top:16px;
}
.h-scroll{
  display:flex;
  gap:12px;
  overflow:auto;
  padding: 10px 4px 6px;
  scroll-snap-type: x mandatory;
}
.h-scroll::-webkit-scrollbar{height:10px}
.h-scroll::-webkit-scrollbar-thumb{background: rgba(255,255,255,.12); border-radius:999px}
.h-item{
  min-width: 210px;
  scroll-snap-align: start;
}
@media (max-width: 560px){
  .h-item{min-width: 175px}
}
.footer{
  border-top: 1px solid rgba(36,42,56,.7);
  background: rgba(15,17,21,.55);
  padding: 22px 0;
}
.footer-inner{
  display:flex; gap:14px; justify-content:space-between; align-items:flex-start; flex-wrap:wrap;
}
.social{
  display:flex; gap:10px; flex-wrap:wrap;
}
.social a{
  padding:10px 12px;
  border-radius: 14px;
  border:1px solid rgba(36,42,56,.9);
  background: rgba(255,255,255,.03);
  color: var(--muted);
  font-size:.95rem;
}
.kv{
  display:flex; flex-direction:column; gap:6px;
}
.kv strong{font-size:1.02rem}

/* ===== ORDER SUCCESS MODAL ===== */
.order-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.65);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
  padding:16px;
}

.order-modal.show{
  display:flex;
}

.order-card{
  background:linear-gradient(160deg,#0f172a,#020617);
  color:#fff;
  border-radius:18px;
  padding:22px 20px;
  width:100%;
  max-width:360px;
  text-align:center;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
}

.order-card .brand{
  font-weight:600;
  opacity:.85;
  margin-bottom:8px;
}

.order-card .status{
  font-size:18px;
  font-weight:700;
  margin-bottom:14px;
}

.order-no{
  background:#020617;
  border:1px solid rgba(255,255,255,.15);
  border-radius:14px;
  padding:12px;
  margin-bottom:10px;
}

.order-no span{
  display:block;
  font-size:18px;
  font-weight:800;
  letter-spacing:.5px;
  margin-top:4px;
}

.order-date{
  font-size:13px;
  opacity:.7;
  margin-bottom:16px;
}

.actions{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.btn-outline{
  background:transparent;
  border:1px solid rgba(255,255,255,.3);
  color:#fff;
  border-radius:12px;
  padding:10px;
  font-size:14px;
}

.btn-primary{
  background:#facc15;
  color:#000;
  border:none;
  border-radius:12px;
  padding:11px;
  font-weight:700;
}

.product-badges{
  display:flex;
  align-items:center;
  gap:12px;
  margin:12px 0 14px;
  flex-wrap:wrap; /* عشان الموبايل */
}


/* =========================
   MOBILE HEADER FIX
   ========================= */

@media (max-width: 640px){

  header.header .header-inner{
    padding:10px 0;              /* بدل ما تكبر */
    gap:10px;
  }

  header.header .logo{
    width:32px;
    height:32px;
    border-radius:10px;
  }

  header.header .brand{
    gap:10px;
    max-width:72%;
    min-width:0;                 /* مهم لمنع تمدد النص */
  }

  header.header .brand-title strong{
    font-size:14px;
    line-height:1.15;
  }

  header.header .brand-title span{
    display:none;
  }

  header.header .nav{
    gap:10px;
    flex-wrap:nowrap;            /* ما ينزلوا سطر */
  }

  header.header .nav a{
    padding:6px 8px;
    font-size:13px;
    line-height:1;
    white-space:nowrap;
  }
}
/* =========================
   GALLERY MAIN (9:16 Mobile)
   ========================= */
.gallery-main{
  border-radius: 16px;
  overflow:hidden;
  border:1px solid rgba(36,42,56,.95);
  background: rgba(255,255,255,.03);

  display:grid;
  place-items:center;
}

/* Desktop: خليها نسبة طبيعية */
@media (min-width: 561px){
  .gallery-main{
    aspect-ratio: 9 / 16;     /* أو 3/2 حسب ما بتحب */
  }
}

/* Mobile: 9:16 مضبوط */
@media (max-width: 560px){
  .gallery-main{
    aspect-ratio: 9 / 16;
  }
}

.gallery-main img{
  width:100%;
  height:100%;
  object-fit: contain;       /* ✅ بدون قص */
  display:block;
}
.thumb{
  aspect-ratio: 1 / 1;       /* مربعات لطيفة */
}
.btn.whatsapp{
  background:#25D366;
  color:#fff;
  border:none;
}

.btn.whatsapp:hover{
  opacity:.92;
}
.thumb img{
  width:100%;
  height:100%;
  object-fit: cover;         /* بالمصغرات القص مقبول */
  display:block;
}

/* =========================
   GALLERY WITH LEFT THUMBS
   ========================= */

.gallery-wrap{
  display:grid;
  grid-template-columns: 92px 1fr; /* عرض المصغرات | الصورة الكبيرة */
  gap:12px;
  align-items:start;
}

/* المصغرات عمودي */
.thumbs-vertical{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin:0;
}

/* حجم كل مصغرة */
.thumbs-vertical .thumb{
  aspect-ratio: 1 / 1;
}

/* الصورة الكبيرة */
.gallery-main{
  aspect-ratio: 9 / 16; /* أو 4/5 إذا بتحب */
}

/* =========================
   MOBILE: رجّعهم تحت بعض
   ========================= */
@media (max-width: 560px){
  .gallery-wrap{
    grid-template-columns: 1fr;
  }

  .thumbs-vertical{
    flex-direction:row;
    order:2;
    margin-top:12px;
  }

  .gallery-main{
    order:1;
    aspect-ratio: 9 / 16;
  }
}

.price { display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; }
.price .compare { text-decoration: line-through; opacity:.6; font-size:.95em; }
.price .current { font-weight:800; }
#pPrice .current { font-size:1.25em; } /* أكبر بس بالصفحة */