:root{
  --bg1:#f6f7fb;
  --bg2:#ffffff;
  --card:#ffffff;
  --text:#1b1f2a;
  --muted:#6b7280;
  --border:#e5e7eb;
  --shadow:0 10px 30px rgba(0,0,0,.08);
  --radius:22px;
  --brand:#2bb673;
  --brand2:#2f6bff;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial; color:var(--text); background:radial-gradient(1200px 700px at 10% 0%, #dff7f0 0%, transparent 55%), radial-gradient(1200px 700px at 90% 0%, #dde6ff 0%, transparent 55%), var(--bg1); direction:rtl;}
a{color:inherit;text-decoration:none}
.container{max-width:1180px;margin:0 auto;padding:18px}
.nav{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 18px; background:rgba(255,255,255,.75); backdrop-filter: blur(12px);
  border:1px solid rgba(229,231,235,.8); border-radius: var(--radius); box-shadow: var(--shadow);
}
.brand{display:flex;align-items:center;gap:10px}
.brand .logo{
  width:42px;height:42px;border-radius:14px;
  background:linear-gradient(135deg,#1dd3b0,#2f6bff);
  box-shadow:0 10px 20px rgba(47,107,255,.15);
}
.brand h1{font-size:18px;margin:0}
.brand small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.nav .links{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.pill{
  padding:9px 12px;border-radius:999px;border:1px solid var(--border);
  background:rgba(255,255,255,.65); font-size:13px; color:var(--text)
}
.pill:hover{transform:translateY(-1px); transition:.15s ease; box-shadow:0 8px 20px rgba(0,0,0,.06)}
.hero{
  margin-top:18px; display:grid; grid-template-columns: 1.1fr .9fr; gap:18px;
}
@media (max-width: 980px){ .hero{grid-template-columns:1fr} }
.card{
  background:rgba(255,255,255,.78); backdrop-filter: blur(10px);
  border:1px solid rgba(229,231,235,.85);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.hero .left{padding:18px; display:flex; flex-direction:column; gap:14px}
.hero h2{margin:0;font-size:34px;line-height:1.25}
.hero p{margin:0;color:var(--muted);font-size:15px;line-height:1.7}
.cta{display:flex; gap:10px; flex-wrap:wrap}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:11px 14px;border-radius:14px;border:1px solid var(--border);
  background:#fff; cursor:pointer; font-weight:650; font-size:14px;
}
.btn.primary{background:linear-gradient(135deg,#1dd3b0,#2bb673); color:#0b1b13; border-color:rgba(43,182,115,.35)}
.btn.blue{background:linear-gradient(135deg,#3b82f6,#2f6bff); color:white; border-color:rgba(47,107,255,.25)}
.btn.ghost{background:rgba(255,255,255,.65)}
.hero .right{padding:18px}
.heroImg{
  width:100%; height:310px; border-radius:18px; object-fit:cover;
  border:1px solid rgba(229,231,235,.9);
}
.sectionTitle{margin:22px 0 10px; display:flex; align-items:end; justify-content:space-between; gap:10px}
.sectionTitle h3{margin:0;font-size:22px}
.sectionTitle p{margin:0;color:var(--muted);font-size:13px}
.grid{display:grid; grid-template-columns: repeat(4, 1fr); gap:14px}
@media (max-width: 1100px){ .grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width: 820px){ .grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width: 520px){ .grid{grid-template-columns:1fr} }
.catCard{padding:12px; display:flex; flex-direction:column; gap:10px}
.catCard img{width:100%; height:150px; border-radius:16px; object-fit: contain;
  background:#fff; border:1px solid rgba(229,231,235,.9)}
.catCard h4{margin:0;font-size:16px}
.catCard span{color:var(--muted);font-size:12px}
.searchRow{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:12px 0}
.input{
  flex:1; min-width:220px; padding:12px 14px; border-radius:14px;
  border:1px solid var(--border); background:rgba(255,255,255,.8); font-size:14px;
}
.chips{display:flex; gap:8px; flex-wrap:wrap}
.chip{
  padding:8px 10px; border-radius:999px; border:1px solid var(--border);
  background:rgba(255,255,255,.7); font-size:12px; cursor:pointer; user-select:none;
}
.chip.active{background:rgba(47,107,255,.12); border-color:rgba(47,107,255,.35)}
.products{display:grid; grid-template-columns: repeat(4, 1fr); gap:14px; margin-top:12px}
@media (max-width: 1100px){ .products{grid-template-columns:repeat(3,1fr)} }
@media (max-width: 820px){ .products{grid-template-columns:repeat(2,1fr)} }
@media (max-width: 520px){ .products{grid-template-columns:1fr} }
.prodCard{padding:12px; display:flex; flex-direction:column; gap:10px}
.prodCard img{width:100%; height:190px; border-radius:18px; object-fit: contain; border:1px solid rgba(229,231,235,.9); background:#fff;
}

.prodCard h4{margin:0;font-size:15px; line-height:1.4}
.meta{display:flex; gap:8px; flex-wrap:wrap; color:var(--muted); font-size:12px}
.badge{padding:5px 8px;border-radius:999px;border:1px solid var(--border); background:rgba(255,255,255,.7)}
.actions{display:flex; gap:8px; flex-wrap:wrap}
.footer{margin:26px 0 10px; color:var(--muted); font-size:12px; text-align:center}
hr.sep{border:none;border-top:1px dashed rgba(229,231,235,.9); margin:14px 0}
.details{display:grid; grid-template-columns: .9fr 1.1fr; gap:16px; padding:16px}
@media (max-width: 980px){ .details{grid-template-columns:1fr} }
.gallery{display:grid; grid-template-columns: 1fr 1fr; gap:10px}
.gallery img{width:100%; height:240px; object-fit:cover; border-radius:18px; border:1px solid rgba(229,231,235,.9); background:#fff}
.gallery img.big{grid-column:1/-1; height:360px}
.kv h2{margin:0 0 6px; font-size:24px}
.kv .code{color:var(--muted); font-size:13px}
.ul{margin:10px 0 0; padding:0 18px; color:var(--text)}
.ul li{margin:6px 0; color:var(--muted); line-height:1.6}
.catCard img.collage{object-fit:contain;background:#fff;padding:6px;}

.prodImg{width:100%;height:100%;object-fit:contain;display:block;background:#fff;}

.prodImgWrap{height:180px;display:flex;align-items:center;justify-content:center;background:#fff;border-radius:14px;overflow:hidden;}


/* Product details layout */
.product-layout{display:grid;grid-template-columns:1.05fr .95fr;gap:20px;align-items:start}
@media (max-width: 900px){.product-layout{grid-template-columns:1fr}}
.product-main{background:#fff;border:1px solid #e7ebf3;border-radius:16px;padding:14px;min-height:320px;display:flex;align-items:center;justify-content:center}
.product-main img{max-width:100%;max-height:480px;width:auto;height:auto;object-fit:contain;border-radius:10px}
.product-thumbs{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.thumb{border:1px solid #e7ebf3;background:#fff;border-radius:12px;padding:6px;cursor:pointer;transition:transform .15s ease,border-color .15s ease}
.thumb:hover{transform:translateY(-1px)}
.thumb.active{border-color:#3b82f6}
.thumb img{width:64px;height:64px;object-fit:cover;border-radius:8px;display:block}
.product-title{margin:0 0 10px;font-size:26px;line-height:1.2}
.product-desc{margin:0 0 12px;color:#4b5563}
.product-actions{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}
.product-features{background:#fff;border:1px solid #e7ebf3;border-radius:16px;padding:14px}
.product-features h3{margin:0 0 8px}
.product-features ul{margin:0;padding-inline-start:18px;color:#4b5563}

.btnDetails{background:#fff;border:1px solid #e7ebf3;color:#111827}
.btnDetails:hover{border-color:#c7d2fe}

/* ---------------- Product modal (inline details) ---------------- */
.nh-modal{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.45);padding:18px}
.nh-modal.show{display:flex}
.nh-modalBox{width:min(920px,96vw);max-height:92vh;overflow:auto;background:#fff;border-radius:18px;box-shadow:0 20px 60px rgba(0,0,0,.25);border:1px solid rgba(231,235,243,.9)}
.nh-modalHeader{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border-bottom:1px solid rgba(231,235,243,.9)}
.nh-modalHeader h3{margin:0;font-size:18px}
.nh-modalClose{width:38px;height:38px;border-radius:12px;border:1px solid rgba(231,235,243,.9);background:#fff;cursor:pointer}
.nh-modalBody{padding:16px}
.nh-modalGrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
@media (max-width: 900px){.nh-modalGrid{grid-template-columns:1fr}}
.nh-mainImg{background:#fff;border:1px solid rgba(231,235,243,.9);border-radius:16px;min-height:320px;display:flex;align-items:center;justify-content:center;padding:10px}
.nh-mainImg img{max-width:100%;max-height:520px;width:auto;height:auto;object-fit:contain;border-radius:12px}
.nh-thumbs{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.nh-thumb{border:1px solid rgba(231,235,243,.9);border-radius:12px;background:#fff;padding:6px;cursor:pointer;transition:transform .15s ease,border-color .15s ease}
.nh-thumb:hover{transform:translateY(-1px)}
.nh-thumb.active{border-color:#3b82f6}
.nh-thumb img{width:64px;height:64px;object-fit:cover;border-radius:8px;display:block}
.nh-metaRow{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 12px}
.nh-actionsRow{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0 16px}
.nh-miniBtns{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.nh-miniBtn{padding:10px 12px;border-radius:12px;border:1px solid rgba(231,235,243,.9);background:#fff;cursor:pointer;text-decoration:none;color:#111827;font-weight:700;font-size:13px}
.nh-miniBtn.primary{background:#10b981;color:#fff;border-color:#10b981}
.nh-miniBtn.blue{background:#3b82f6;color:#fff;border-color:#3b82f6}
.nh-miniBtn.dark{background:#111827;color:#fff;border-color:#111827}