product-details {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #05b8ff; z-index: 1000; overflow-y: auto;}
body {background-color: #05b8ff;}
.gallery {padding:7px;padding-bottom: 50px;padding-top: 130px;margin-top: 20px;background-color: #05b8ff;}
.producti {display:flex; flex-wrap:wrap; gap:25px; max-width:1100px; margin:auto; background:white; border-radius:12px; padding:11px; box-shadow:0 0 10px rgba(0,0,0,0.05); justify-content: center;}
.images {flex:1; min-width:260px;}
.main {width:100%; height:320px; object-fit:cover; border-radius:10px;}
.thumbs {display:flex; gap:10px; margin-top:10px; justify-content:center; flex-wrap: wrap;}
.thumbs img {width:70px; height:70px; object-fit:cover; border-radius:6px; border:2px solid transparent; cursor:pointer;}
.thumbs img:hover {border-color:#007bff;}
        .info {flex:1; min-width:260px; display:flex; flex-direction:column; gap:15px; text-align: center;}
        .info h2 {font-size:24px; margin:0;}
        .price {font-size:30px; color:#28a745; font-weight:bolder;}
        .desc {font-size:19px; line-height:1.8;font-weight: bold; color:#555;}
        .buttons {display:flex; gap:15px; flex-wrap:wrap; justify-content: center;}
        .btn {padding:10px 18px; border:none; border-radius:8px; color:#fff; text-decoration:none; font-size:19px;font-weight: bolder; cursor:pointer;}
        .paypal {background:#58bcff;}
        .cih {background:#e85d04;}
        .share {margin-top:10px; font-size:25px; font-weight: bold;}
        .share img {vertical-align:middle; margin-left:8px;}
        .popupi {position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); display:none; justify-content:center; align-items:center; z-index:9999; flex-wrap:wrap}
        .popupi-content {background:#fff; padding:25px; border-radius:12px; width:90%; max-width:400px; box-shadow:0 0 20px rgba(0,0,0,0.2); position:relative; text-align:right; direction:rtl;}
        .close-btn {position:absolute; top:15px; left:15px; background:#f44336; color:#fff; border:none; padding:5px 12px; border-radius:6px; cursor:pointer; font-size:14px;}
        .popupi-content h3 {margin-top:0; margin-bottom:20px;}
        .copy-row {display:flex; justify-content:space-between; align-items:center; margin:10px 0; gap:10px; flex-wrap:wrap;}
        .copy-row span {flex:1;}
        .copy-row button {background:#007bff; color:#fff; border:none; padding:5px 10px; border-radius:6px; cursor:pointer; font-size:13px;}
        .copy-row button:hover {background:#0056b3;}
        .whatsapp-text {margin:20px 0 10px; font-weight:bold;}
        .whatsapp-btn {display:inline-block; background:#25d366; color:#fff; padding:10px 18px; border-radius:10px; text-decoration:none; font-size:16px;}
        .whatsapp-btn:hover {background:#1ebc5b;}
.hea {position: fixed;top: 0;left: 0;right: 0;width: 100%;height: 120px; padding: 1vh 4vw;background-color: #0056b3;z-index: 1000;box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);transition: height 0.3s ease;}
.btnclose {background-color: red;text-decoration: none;; padding: 15px; margin-right:30px; font-weight: bold; font-size: large; color: white; border: none; border-radius: 5px; cursor: pointer;}
.headermaqal-content {display: flex; align-items: center; justify-content: center; gap: 10px; overflow: hidden; height: 100%;}
.slidere {overflow: hidden; width: 100%; max-width: 800px; height: 100%; border-radius: 12px;}
.image-track {display: flex; transition: transform 0.5s ease; align-items: center; height: 100%;}
.slider-img {height: 110px; width: auto; margin-right: 10px; border-radius: 10px; object-fit: cover; transition: transform 0.3s;}
.slider-img:hover {transform: scale(1.08);}
.nav-btn {background: #fff; border: none; border-radius: 50%; width: 40px; height: 40px; font-size: 22px; cursor: pointer; align-self: center;}
@media (max-width: 600px) {.hea {height: 140px !important;}.slider-img {height: 120px !important; margin-right: 10px;}.nav-btn {width: 44px; height: 44px; font-size: 22px}}
@media (max-width: 768px) {.producti {flex-direction:column;}.main {height:250px;}.thumbs img {width:60px; height:60px;}}
@media (max-width: 500px) {.popup-content {padding:10px;}.copy-row {flex-direction:row; flex-wrap:wrap;}}
.media-gallery {display: flex;flex-wrap: wrap;gap: 19px;justify-content: center;padding: 15px 19px;background:rgba(255, 255, 255, 0.781);;}
.product {width: 210px;aspect-ratio: 9 / 16;background: #eee;border-radius: 12px;overflow: hidden;box-shadow: 0 4px 10px rgba(0,0,0,0.1);transition: transform 0.3s;}
.product:hover {transform: scale(1.03);}
.product img,
.product video {width: 100%;height: 100%;object-fit: cover;display: block;border: none;}
@media (max-width: 768px) {.product {width: 30%; }}
@media (max-width: 480px) {.product {width: 45%; aspect-ratio: 9 / 16;}.product img,.product video {height: 100%;}}
footer {display: flex;background-color: #00bfff;justify-content: center;flex-direction: column;margin-top: 20px;padding:10px;align-items: center;z-index: 999;height: 50px;text-align: center;p {text-align: center;}}
.side-menu {position: fixed;z-index: 999;top: 0;right: -100vw;width: 100vw;height: 100vh;background-color: #231010;transition: right 0.5s ease;display: flex;flex-direction: column;align-items: center;justify-content: flex-start;padding-top: 40px;overflow-y:scroll;overflow-x:hidden;justify-content: center;justify-content: space-between; body{overflow: hidden;}}
.side-menu.active {right: 0;}
.close-bton {position: absolute;top: 1px;margin-bottom: 30px;font-size: 49px;font-weight: bold;background:rgba(92, 86, 86, 0.874);border: none;color: #ff0000;position:absolute; border:none; padding:0px 29px;border-radius: 7px;}
.menu-item {display: flex;align-items: center;width: 100%;max-width: 300px;padding: 10px;margin: 29px; border-radius: 12px;background-color: #ffffff;text-decoration: none;color: #333;font-size: 15px;font-weight: bold;transition: background-color 0.3s ease;gap: 17px;}
.menu-item:hover {background-color: #e0e0e0;}
.menu-item img {width: 70px;height: 40px;margin-left: 15px;border-radius: 6px;object-fit: cover;}
.info h2,
.price,
.desc {
  word-break: break-word;
  overflow-wrap: break-word;
}
@media (max-width: 375px) {

  .producti {
    flex-direction: column;
    padding: 8px;
  }

  .images,
  .info {
    min-width: 100%;
    width: 100%;
  }

  .main-wrapper {
    height: 240px;
  }

  .thumbs img,
  .thumbs video {
    width: 60px;
    height: 60px;
  }

}
.copy-btn {
  background: #007bff;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  margin-right: 10px;
  position: relative;
  transition: 0.3s;
}

.copy-btn:hover {
  background: #0056b3;
}

.copy-btn .check {
  color: #00ff66;
  margin-left: 6px;
  display: none;
}
.yt-subscribe {
  display: flex;
  justify-content: center;
  margin: 5px 0 10px;
}
.fb-follow-container {
  display: flex;
  justify-content: center;   /* يضع الزر في الوسط */
  margin: 15px 0;            /* مسافة فوق وتحت */
  width: 100%;               /* لضمان التناسب مع الحاوية */
}

.fb-follow-container .fb-page {
  width: 100% !important;     /* يتوافق مع الحاوية */
  max-width: 300px;           /* نفس عرض الـ iframe الأصلي */
  height: 70px !important;    /* نفس ارتفاع الزر */
}
@media (max-width: 345px) {
  .fb-follow-container {
    justify-content: center;
    width: 100%;
    padding: 0 5px;      /* قليل من الحواف الداخلية */
    box-sizing: border-box;
  }

  .fb-follow-container .fb-page {
    width: 100% !important;  /* يجعل الزر يتناسب مع حاوية المنتج */
    max-width: 100% !important;
    height: 70px !important;
  }
}
@media (max-width: 345px) {

  /* الحاوية الرئيسية للمنتج */
  .producti {
    flex-direction: column;
    padding: 8px;
    gap: 10px;
  }

  /* الصور والفيديو */
  .images, .main-wrapper {
    min-width: 100% !important;
    width: 100% !important;
  }

  .main-wrapper {
    height: 200px;
  }

  .thumbs img,
  .thumbs video {
    width: 50px;
    height: 50px;
  }

  /* info text */
  .info {
    min-width: 100% !important;
    width: 100% !important;
    overflow: hidden;
  }

  .info h2,
  .price,
  .desc {
    word-break: break-word;
    overflow-wrap: break-word;
  }

  /* FB Follow / Page Plugin */
  .fb-follow-container,
  .fb-follow-container .fb-page {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    overflow: hidden;
  }

  /* Share + Copy Link + YouTube Subscribe */
  .share, .copy-btn, .yt-subscribe {
    width: 100% !important;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 5px;
  }
}