@font-face{
  font-family: "HacenMaghrebBd";
  src: url("Fonts/HacenMaghrebBd.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"HacenMaghrebBd", system-ui, Arial;
  color:#fff;
}

.bg{
  min-height:100vh;
  position:relative;
  overflow:hidden;
  background: linear-gradient(135deg,#c40f10 0%, #8a0b3a 60%, #6b0734 100%);
}
.bg::before{
  content:"";
  position:absolute; inset:-10%;
  background: linear-gradient(135deg, rgba(0,0,0,.15), rgba(0,0,0,0));
  clip-path: polygon(0 0, 75% 0, 30% 55%, 0 40%);
}
.bg::after{
  content:"";
  position:absolute; inset:-10%;
  background: rgba(0,0,0,.22);
  clip-path: polygon(18% 62%, 100% 10%, 100% 100%, 45% 100%);
}

.hidden{display:none !important}

/* Topbar center search */
.topbar{
  position:relative;
  z-index:5;
  padding:26px 16px 0;
  display:flex;
  justify-content:center;
}
.searchBox{
  width:min(620px, 92vw);
  height:44px;
  border-radius:999px;
  background: rgba(255,255,255,.22);
  display:flex;
  align-items:center;
  padding:0 14px;
  gap:10px;
  backdrop-filter: blur(6px);
  border:1px solid rgba(255,255,255,.10);
}
.searchBox input{
  width:100%;
  border:none;
  outline:none;
  background:transparent;
  color:#fff;
  font-size:16px;
  text-align:center;
  font-family:"HacenMaghrebBd", system-ui, Arial;
}
.searchBox input::placeholder{color:rgba(255,255,255,.75)}
.searchIcon svg{display:block}

/* Center layout */
.center{
  position:relative;
  z-index:5;
  width:100%;
  margin-top:6vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:0 16px 24px;
  gap:14px;
}

.logo{width:150px; filter: drop-shadow(0 16px 22px rgba(0,0,0,.35));}
.logoFallback{
  width:150px;height:150px;
  border:2px solid rgba(255,255,255,.35);
  border-radius:18px;
  display:grid;place-items:center;
  background:rgba(255,255,255,.12);
}

.title{margin:6px 0 0; font-size:40px; font-weight:700;}
.title.small{font-size:34px}

.formCard{
  width:min(520px, 92vw);
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:2px;
}

.field{
  height:50px;
  background: rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(6px);
  display:flex;
  align-items:center;
  padding:0 14px;
  border-radius:16px;
}
.field input{
  width:100%;
  height:100%;
  border:none;
  outline:none;
  background:transparent;
  color:#fff;
  font-size:17px;
  text-align:center;
  font-family:"HacenMaghrebBd", system-ui, Arial;
  border-radius:16px;
}
.field input::placeholder{color:rgba(255,255,255,.78)}

.actionBtn{
  height:50px;
  border:none;
  cursor:pointer;
  background:#b31317;
  color:#fff;
  font-weight:700;
  letter-spacing:1px;
  box-shadow: 0 18px 30px rgba(0,0,0,.25);
  font-family:"HacenMaghrebBd", system-ui, Arial;
  padding:0 16px;
  border-radius:999px;
}
.actionBtn:hover{filter:brightness(1.06)}
.actionBtn.outline{
  background:transparent;
  border:1px solid rgba(255,255,255,.22);
  box-shadow:none;
}

.addressCenter{
  width:min(520px,92vw);
  text-align:center;
  font-size:16px;
  line-height:1.9;
  opacity:.95;
  margin-top:6px;
}

.socialCenter{
  display:flex;
  flex-direction:row;
  justify-content:center;
  align-items:center;
  gap:14px;
  flex-wrap:nowrap;
}

.socPng{
  width:56px;
  height:56px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(0,0,0,.20);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(6px);
  box-shadow: 0 0 18px rgba(255,255,255,.18);
  text-decoration:none;
  overflow:hidden;
}
.socPng img{width:60%;height:60%;object-fit:contain;display:block}

/* products bar */
.bar{
  width:min(880px, 92vw);
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
  margin-top:6px;
}
.pill{
  padding:10px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(6px);
  display:flex;
  align-items:center;
  gap:10px;
}
.pillSelect{
  padding:0 10px;
  height:50px;
}
.categorySelect{
  height:44px;
  border:none;
  outline:none;
  background:transparent;
  color:#fff;
  font-size:15px;
  font-family:"HacenMaghrebBd", system-ui, Arial;
  padding:0 10px;
  cursor:pointer;
}
.categorySelect option{color:#111}

/* products grid */
.grid{
  width:min(880px, 92vw);
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
  margin-top:10px;
}
.card{
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(6px);
  padding:12px;
  text-align:center;
  border-radius:18px;
}
.imgWrap{
  width:100%;
  height:160px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  background:#fff;
  display:grid;
  place-items:center;
  overflow:hidden;
  cursor:pointer;
}
.imgWrap img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
.pName{margin-top:10px;font-size:18px}
.pPrice{margin-top:6px;opacity:.95}
.pBtns{margin-top:10px;display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.smallBtn, .detailsBtn{
  height:40px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:transparent;
  color:#fff;
  cursor:pointer;
  font-family:"HacenMaghrebBd", system-ui, Arial;
}
.miniBadge{
  display:inline-grid;
  place-items:center;
  min-width:22px;
  height:22px;
  padding:0 7px;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  margin-inline-start:8px;
}

/* modal cart */
.overlay{
  position:fixed; inset:0;
  background:rgba(0,0,0,.35);
  z-index:50;
}
.modal{
  position:fixed;
  z-index:60;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:min(520px, 92vw);
  max-height:84vh;
  overflow:hidden;
  background:rgba(20,0,10,.78);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(12px);
  display:flex;
  flex-direction:column;
  border-radius:18px;
}
.modalHead{
  padding:12px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.modalTitle{font-size:18px}
.modalSub{opacity:.85;font-size:13px;margin-top:2px}
.xBtn2{
  border:none;background:transparent;color:#fff;
  font-size:18px;cursor:pointer;
}
.modalBody{
  padding:12px;
  overflow:auto;
}
.sectionTitle{margin:8px 0; opacity:.9}
.select{
  width:100%;
  height:50px;
  border:none;
  outline:none;
  background:transparent;
  color:#fff;
  font-size:16px;
  text-align:center;
  font-family:"HacenMaghrebBd", system-ui, Arial;
}
.select option{color:#111}
.shipLine{margin-top:6px;opacity:.9}

.cartRow{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:10px;
  border:1px solid rgba(255,255,255,.12);
  margin-top:8px;
  border-radius:16px;
}
.qtyBox{display:flex;align-items:center;gap:8px}
.qtyBtn{
  width:34px;height:34px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.18);
  background:transparent;
  color:#fff;
  cursor:pointer;
  font-weight:700;
}
.totals{
  margin-top:12px;
  border-top:1px solid rgba(255,255,255,.12);
  padding-top:10px;
}
.totals > div{display:flex;justify-content:space-between;margin-top:6px}
.totals .grand{font-size:18px}
.modalFoot{
  padding:12px;
  display:grid;
  gap:10px;
  border-top:1px solid rgba(255,255,255,.12);
}

/* =========================
   Admin Page Styles
========================= */
.adminGrid{
  width:min(980px, 92vw);
  display:grid;
  grid-template-columns: 1fr;
  gap:14px;
  margin-top:8px;
}

.adminForm{
  width:100%;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(6px);
  padding:14px;
  border-radius:18px;
}

.adminFormGrid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:10px;
}
.adminFormGrid .full{ grid-column: 1 / -1; }

.field.round{
  border-radius:16px;
}
.field.round input, .field.round select{
  border-radius:16px;
}

.adminUpload{
  display:grid;
  gap:10px;
  margin-top:6px;
}
.upRow{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}
.upLabel{
  opacity:.9;
  font-size:14px;
}
.adminBtns{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:center;
}

.adminPreviews{
  margin-top:10px;
  display:grid;
  gap:12px;
}
.previewRow{
  display:grid;
  gap:8px;
  justify-items:center;
}
.previewLabel{opacity:.9;font-size:14px}
.previewEmpty{opacity:.8}
.mainPreview{
  width:120px;
  height:120px;
  border-radius:18px;
  object-fit:cover;
  background:#fff;
  box-shadow: 0 10px 18px rgba(0,0,0,.25);
}

.galleryManage{
  width:100%;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.12);
  border-radius:18px;
  padding:12px;
}
.galleryHead{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.galleryTitle{font-size:15px}
.galleryNote{opacity:.85;font-size:13px}
.galleryGrid{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap:10px;
}
.gItem{
  position:relative;
  width:100%;
  aspect-ratio: 1/1;
  border-radius:16px;
  overflow:hidden;
  background:#fff;
}
.gImg{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.gDel{
  position:absolute;
  top:6px;
  left:6px;
  width:28px;
  height:28px;
  border-radius:10px;
  border:none;
  cursor:pointer;
  background:rgba(0,0,0,.55);
  color:#fff;
  font-weight:700;
}

.adminTableWrap{
  width:100%;
  overflow:auto;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.08);
  backdrop-filter: blur(6px);
}
.adminTable{
  width:100%;
  border-collapse: collapse;
  min-width: 860px;
}
.adminTable th,
.adminTable td{
  padding:10px;
  border-bottom:1px solid rgba(255,255,255,.10);
  text-align:center;
  vertical-align:middle;
  font-size:14px;
}
.adminTable thead th{
  background:rgba(0,0,0,.18);
  position:sticky;
  top:0;
  z-index:1;
}
.tdImg{ width:80px; }
.miniImg{
  width:56px;
  height:56px;
  border-radius:14px;
  object-fit:cover;
  background:#fff;
  display:block;
  margin-inline:auto;
}
.tdBtns{
  white-space:nowrap;
}

@media (max-width:980px){
  .grid{grid-template-columns: repeat(2, 1fr);}
  .adminFormGrid{ grid-template-columns: 1fr; }
  .galleryGrid{ grid-template-columns: repeat(4, 1fr); }
  .adminTable{ min-width: 720px; }
}
@media (max-width:520px){
  .grid{grid-template-columns: 1fr;}
  .title{font-size:34px}
  .galleryGrid{ grid-template-columns: repeat(3, 1fr); }
}

/* ===== Floating Cart Button ===== */
.floatingCartBtn{
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  z-index: 49; /* تحت الـ overlay (50) عشان ما يخبص المودال */
  display: grid;
  place-items: center;
  background: #b31317; /* نفس لون الأزرار الأساسية */
  color: #fff;
  box-shadow: 0 18px 30px rgba(0,0,0,.25);
  font-family:"HacenMaghrebBd", system-ui, Arial;
}
.floatingCartBtn:hover{ filter: brightness(1.06); }
.floatingCartBtn .cartIcon{ font-size: 22px; line-height: 1; }
.floatingCartBtn .floatBadge{
  position: absolute;
  top: -6px;
  left: -6px;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background: rgba(255,255,255,.92);
  color: #b31317;
  font-weight: 800;
  font-size: 12px;
}
.floatingCartBtn.hasItems{
  animation: cartPulse 1.3s ease-in-out infinite;
}
@keyframes cartPulse{
  0%{ transform: scale(1); }
  50%{ transform: scale(1.06); }
  100%{ transform: scale(1); }
}
@media (max-width: 480px){
  .floatingCartBtn{ right: 12px; bottom: 12px; }
}
/* ===== Floating Cart Button ===== */
.floatingCartBtn{
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  z-index: 49; /* تحت overlay اللي عندك */
  display: grid;
  place-items: center;
  background: #b31317;
  color: #fff;
  box-shadow: 0 18px 30px rgba(0,0,0,.25);
  font-family:"HacenMaghrebBd", system-ui, Arial;
}
.floatingCartBtn .cartIcon{
  width: 22px;
  height: 22px;
  color: #fff; /* لون الأيقونة أبيض */
  display: block;
}

.floatingCartBtn .floatBadge{
  position: absolute;
  top: -6px;
  left: -6px;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background: rgba(255,255,255,.92);
  color: #b31317;
  font-weight: 800;
  font-size: 12px;
}
.floatingCartBtn.hasItems{
  animation: cartPulse 1.3s ease-in-out infinite;
}
@keyframes cartPulse{
  0%{ transform: scale(1); }
  50%{ transform: scale(1.06); }
  100%{ transform: scale(1); }
}
@media (max-width: 480px){
  .floatingCartBtn{ right: 12px; bottom: 12px; }
}

/* ===== Floating Cart Button ===== */
.floatingCartBtn{
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  z-index: 49; /* تحت overlay */
  display: grid;
  place-items: center;
  background: #b31317;
  color: #fff;
  box-shadow: 0 18px 30px rgba(0,0,0,.25);
  font-family:"HacenMaghrebBd", system-ui, Arial;
}
.floatingCartBtn .cartIcon{ font-size: 22px; line-height: 1; }
.floatingCartBtn .floatBadge{
  position: absolute;
  top: -6px;
  left: -6px;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background: rgba(255,255,255,.92);
  color: #b31317;
  font-weight: 800;
  font-size: 12px;
}
.floatingCartBtn.hasItems{
  animation: cartPulse 1.3s ease-in-out infinite;
}
@keyframes cartPulse{
  0%{ transform: scale(1); }
  50%{ transform: scale(1.06); }
  100%{ transform: scale(1); }
}
@media (max-width: 480px){
  .floatingCartBtn{ right: 12px; bottom: 12px; }
}

/* ===== Product page responsive layout (product.html فقط) ===== */
#productWrap .productGrid{
  width: min(980px, 94vw);
  margin: 8px auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}

/* على الكمبيوتر: الصور يمين + التفاصيل يسار */
#productWrap .photoBox{ grid-column: 2; }
#productWrap .infoBox{ grid-column: 1; }

/* حجم الصورة الرئيسية */
#mainImg{
  width: 100%;
  max-height: 420px;
  object-fit: contain;
  display: block;
}

/* الثمبنيلز */
#thumbs{
  display: flex;
  gap: 8px;
  margin-top: 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}
#thumbs .thumbBtn{
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}
#thumbs .thumbBtn img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* على التلفون: الصور فوق والتفاصيل تحت */
@media (max-width: 820px){
  #productWrap .productGrid{
    grid-template-columns: 1fr;
    gap: 12px;
  }
  #productWrap .photoBox,
  #productWrap .infoBox{
    grid-column: auto;
  }
  #mainImg{
    max-height: 320px;
  }
  #thumbs .thumbBtn{
    width: 52px;
    height: 52px;
  }
}
/* ===== Product details (match shop card/imgWrap style) ===== */
#productWrap .productGrid{
  width: min(980px, 94vw);
  margin: 10px auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}

/* كمبيوتر: الصور يمين - التفاصيل يسار */
#productWrap .photoBox{ grid-column: 2; }
#productWrap .infoBox{ grid-column: 1; }

/* نفس ستايل كروت الشوب */
#productWrap .photoBox,
#productWrap .infoBox{
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(6px);
  padding: 12px;
  border-radius: 18px;
  text-align: right;
}

/* الصورة الرئيسية بنفس أسلوب imgWrap في الشوب */
#productWrap #mainImg{
  width: 100%;
  height: 320px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: #fff;
  object-fit: contain;
  display: block;
}

/* thumbnails */
#productWrap #thumbs{
  display: flex;
  gap: 8px;
  margin-top: 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}

#productWrap .thumbBtn{
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: #fff;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
}

#productWrap .thumbBtn img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#productWrap .thumbBtn.active{
  outline: 2px solid rgba(255,255,255,.65);
  outline-offset: 2px;
}

/* نصوص التفاصيل (مقاس طبيعي ومتناسق) */
#productWrap #pName{ margin: 0 0 8px; font-size: 20px; }
#productWrap #pPrice{ font-size: 18px; font-weight: 700; margin-bottom: 6px; }
#productWrap #pMeta{ opacity: .9; margin-bottom: 10px; }
#productWrap #pDesc{ line-height: 1.9; opacity: .95; }

/* أزرار تحت بعض بشكل مرتب */
#productWrap .productActions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

/* موبايل: الصور فوق والتفاصيل تحت */
@media (max-width: 820px){
  #productWrap .productGrid{
    grid-template-columns: 1fr;
    gap: 12px;
  }
  #productWrap .photoBox,
  #productWrap .infoBox{
    grid-column: auto;
  }
  #productWrap #mainImg{
    height: 260px;
  }
  #productWrap .thumbBtn{
    width: 52px;
    height: 52px;
  }
}
/* ===== Fix desktop alignment: info beside photo (same row) ===== */
@media (min-width: 821px){
  #productWrap .productGrid{
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "info photo"; /* يسار: تفاصيل | يمين: صور */
    align-items: start;
  }

  #productWrap .photoBox{
    grid-area: photo;
    align-self: start;
    margin-top: 0 !important;
  }

  #productWrap .infoBox{
    grid-area: info;
    align-self: start;
    margin-top: 0 !important; /* يلغي أي نزول قديم */
  }
}
/* ===== Mini Brand above search (all pages except index) ===== */
.topbar.topbarWithMiniBrand{
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.topbarMiniBrand{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 0;
}

.miniBrandLogo{
  width: 28px;
  height: 28px;
  object-fit: contain;
  display: block;
  background: transparent;
  border: none;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}

.miniBrandText{
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}

@media (max-width: 520px){
  .miniBrandLogo{ width: 36px; height: 36px; }
  .miniBrandText{ font-size: 20px; }
}
/* ===== Mini Brand فوق شريط البحث (كل الصفحات عدا الرئيسية) ===== */
.topbar.topbarWithMiniBrand{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.topbarMiniBrand{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* كبّر/صغّر من هون */
.miniBrandLogo{
  width: 42px;
  height: 42px;
  object-fit: contain;
  display: block;
}

.miniBrandText{
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
}


/* ===== تعديل: حقول الاسم/الهاتف في shop.html (غامقة + حواف مثل صندوق البحث) ===== */
.whiteField{
  background: rgba(0,0,0,.28) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  border-radius:999px !important;
}
.whiteField input{
  color:#fff !important;
  border-radius:999px !important;
}
.whiteField input::placeholder{
  color:rgba(255,255,255,.75) !important;
}

/* ===== تعديل: تكبير الشعار + اسم المكتبة (2.5x) ===== */
.miniBrandLogo{
  width:105px !important;
  height:105px !important;
}
.miniBrandText{
  font-size:60px !important;
}

/* ===== User Gate Modal inputs: نفس روح المودال (اختياري) ===== */
.userGateModal .field{ border-radius:999px; }
.userGateModal .field input{ border-radius:999px; }
.userGateModal{
  width: min(520px, 92vw);
  max-width: 520px;
}
.userGateModal .modalSub{
  opacity: .92;
  font-size: 14px;
  margin-top: 2px;
  text-align: center;
}
.userGateModal .modalBody{
  gap: 12px;
}
/* نفس ستايل حقول shop */
.userGateModal .field{
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
}
.userGateModal .field input{
  text-align: center;
  color: #fff;
}
.userGateModal .field input::placeholder{
  color: rgba(255,255,255,.75);
}

/* Fix: mini brand link (logo + مكتبة الجذور) */
a.topbarMiniBrand,
a.topbarMiniBrand:visited{
  color:#fff !important;
  text-decoration:none !important;
}

a.topbarMiniBrand:hover,
a.topbarMiniBrand:active{
  color:#fff !important;
  text-decoration:none !important;
}

a.topbarMiniBrand .miniBrandText{
  color:#fff !important;
  text-decoration:none !important;
}
/* ===== PATCH (2025-12-30): Social icons row + Mini brand size + Fixed background ===== */

/* 1) Social icons side-by-side (even if HTML contains <br> or links are block) */
.socialCenter, #socialCenter{
  display:flex !important;
  flex-direction:row !important;
  justify-content:center !important;
  align-items:center !important;
  gap:14px !important;
  flex-wrap:wrap !important; /* يسمح يلف سطرين على الموبايل بدل ما يصيروا تحت بعض */
}
.socialCenter br, #socialCenter br{ display:none !important; }
.socialCenter a.socPng, #socialCenter a.socPng{
  display:grid !important;
  place-items:center !important;
  width:56px !important;
  height:56px !important;
  border-radius:50% !important;
  padding:0 !important;
  margin:0 !important;
  text-decoration:none !important;
}

/* 2) Mini brand size (reduce) + keep name on one line */
.miniBrandLogo{
  width:60px !important;
  height:60px !important;
}
.miniBrandText{
  font-size:32px !important;
  line-height:1 !important;
  white-space:nowrap !important; /* يمنع نزول الاسم لسطرين */
}
@media (max-width:520px){
  .miniBrandLogo{ width:44px !important; height:44px !important; }
  .miniBrandText{ font-size:22px !important; }
}

/* 3) Keep background fixed while scrolling (same look) */
.bg{
  background-attachment: fixed;
}
.bg::before,
.bg::after{
  position: fixed;
  pointer-events:none;
}
.bg::before{ z-index:1; }
.bg::after{ z-index:2; }
.bg > header,
.bg > main{
  position:relative;
  z-index:5; /* فوق الخلفية الثابتة */
}



/* ===== FIX: brand social icons (non-index pages) keep SAME look as .socialCenter ===== */
/* الهدف: فقط ترتيب الأيقونات جنب بعض بدون تغيير شكل الأيقونة نفسه */
.brandSocial, #brandSocial{
  display:flex !important;
  flex-direction:row !important;
  justify-content:center !important;
  align-items:center !important;
  gap:14px !important;
  flex-wrap:nowrap !important;
}
.brandSocial br, #brandSocial br{ display:none !important; }
.brandSocial a.socPng, #brandSocial a.socPng{
  display:grid !important;
  place-items:center !important;
  width:44px !important;
  height:44px !important;
  border-radius:50% !important;
  padding:0 !important;
  margin:0 !important;
  text-decoration:none !important;
}
@media (max-width:520px){
  .brandSocial, #brandSocial{ flex-wrap:wrap !important; } /* على الموبايل إذا ضاق المكان */
}

/* === Social icons under logo: match INDEX look exactly === */
.brandSocial{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  gap:14px !important;
  flex-wrap:wrap !important;
}

/* لو في <br> بينهم */
.brandSocial br{ display:none !important; }

/* نفس شكل socPng بالصفحة الرئيسية */
.brandSocial a{
  width:44px !important;
  height:44px !important;
  border-radius:50% !important;
  display:grid !important;
  place-items:center !important;
  background:rgba(0,0,0,.20) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  backdrop-filter: blur(6px) !important;
  box-shadow: 0 0 18px rgba(255,255,255,.18) !important;
  text-decoration:none !important;
  overflow:hidden !important;
  padding:0 !important;
  margin:0 !important;
}

/* نفس حجم الأيقونة داخل الدائرة */
.brandSocial a img{
  width:60% !important;
  height:60% !important;
  object-fit:contain !important;
  display:block !important;
}
/* ===== PATCH (center alignment + address sizing) ===== */
/* 1) Center brand subtitle/address on ALL screens */
.brandSub,
.brandAddr{
  text-align:center !important;
  width:100%;
  margin-inline:auto;
}

/* 2) Make address a bit smaller so it fits better (especially on mobile) */
.brandSub{
  font-size:16px;
  line-height:1.8;
}
.brandAddr{
  font-size:14px;
  line-height:1.8;
  opacity:.92;
}
@media (max-width:520px){
  .brandSub{ font-size:15px; }
  .brandAddr{ font-size:12.5px; }
}

/* 3) Center product details page text/actions (so it's not right/left aligned) */
#productWrap .photoBox,
#productWrap .infoBox{
  text-align:center !important;
}
#productWrap #pMeta,
#productWrap #pDesc{
  text-align:center !important;
}
#productWrap .productActions{
  justify-content:center !important;
}


/* ===== FIX: Mobile pull-to-refresh white background =====
   يمنع ظهور اللون الأبيض أثناء السحب (overscroll) على الموبايل
   بدون تغيير شكل الخلفية داخل الصفحة
*/
html, body{
  background: linear-gradient(135deg,#c40f10 0%, #8a0b3a 60%, #6b0734 100%);
}
body{
  overscroll-behavior-y: none;
}


/* ===== FIX: Mobile products grid 2 columns (mobile only) =====
   الهدف: على الموبايل يكون كل صف فيه منتجين جنب بعض
   بدون أي تغيير على الكمبيوتر
*/
@media (max-width:520px){
  .grid{ grid-template-columns: repeat(2, 1fr); gap:12px; }
  .card{ padding:10px; }
  .imgWrap{ height:140px; }
  .pName{ font-size:16px; }
  .pBtns{ gap:6px; }
  .smallBtn, .detailsBtn{ height:36px; padding:0 10px; }
}



/* ===== iPhone Safari FIX: cover pull-to-refresh white gaps (strong) ===== */
html, body{
  background: linear-gradient(135deg,#c40f10 0%, #8a0b3a 60%, #6b0734 100%);
}

body::before{
  content:"";
  position: fixed;
  top: -30vh;
  bottom: -30vh;
  left: 0;
  right: 0;
  background: linear-gradient(135deg,#c40f10 0%, #8a0b3a 60%, #6b0734 100%);
  z-index: -1;
  pointer-events: none;
}



/* ===== PATCH: Square product images + Top products grid (4 desktop / 2 mobile) ===== */

/* 1) اجعل صور المنتجات مربعة (الشوب + الأكثر زيارة + أي grid cards) */
.imgWrap{
  aspect-ratio: 1 / 1;
  height: auto;
}

/* 2) صفحة المنتج: الصورة الرئيسية تكون مربعة أيضاً */
#productWrap #mainImg{
  aspect-ratio: 1 / 1;
  height: auto;
}

/* 3) الأكثر زيارة: 4 منتجات على الكمبيوتر */
@media (min-width: 981px){
  #topProductsGrid{
    grid-template-columns: repeat(4, 1fr);
  }
}

/* 4) الأكثر زيارة: على الشاشات الصغيرة (موبايل/تابلت) كل 2 جنب بعض */
@media (max-width: 980px){
  #topProductsGrid{
    grid-template-columns: repeat(2, 1fr);
  }
}



/* ===== PATCH: Product page mobile spacing + square gallery ===== */

/* 1) اجعل عبارة التلميح بعيدة عن الأزرار (بدون تغيير النص) */
#productWrap #pHint{
  margin-top: 14px;
}

/* 2) فراغ وهمي بأسفل صفحة المنتج على الموبايل (من خلفية الموقع وليس من صندوق التفاصيل) */
@media (max-width: 820px){
  #productWrap::after{
    content:"";
    display:block;
    height: 90px;
  }
}

/* 3) صفحة المنتج: اجعل الصورة الرئيسية + صور المعرض مربعة (خصوصاً على الموبايل) */
#productWrap #mainImg{
  aspect-ratio: 1 / 1;
  height: auto !important;
}

#productWrap .thumbBtn{
  aspect-ratio: 1 / 1;
  height: auto;
}
#productWrap .thumbBtn img{
  aspect-ratio: 1 / 1;
}