.product-page .main-img {
  width: 500px;
  height:441px;
  border-radius: 20px;
}
.width-productDetails-custom{
  width:1100px;
  margin:10px auto;
}
.product-page .thumb-img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  border: 2px solid transparent;
}


.product-page .color-circle {
  width: 40px;
  height: 40px;
  display: inline-block;
  border-radius: 50%;
  cursor: pointer;
}


.product-page .size-box {
  width:30px;
  height:30px;
  border: 1px solid #111;
  background: white;
  cursor: pointer;
  border-radius: 6px;
}
.product-page .size-box.out {
   width:35px;
  height:30px;
}
.product-page .size-box.outofstock {
   width:160px;
  height:30px;
  /* text-align:start */
}
.product-page .price { 
  font-size: 36px; 
  font-weight: 700;
}
.product-page .old-price {
  text-decoration: line-through;
  margin-left: 10px;
   font-size: 24px; 
  font-weight: 400;
}
.product-page .discount {
  color: rgb(255, 255, 255);
  margin-left: 10px;
  font-weight:400;
     font-size: 14px;
     background-color:#E4151F ;
     width:77px;
     height:22px ;
     border-radius: 10px;
    

}

.product-page .qty {
  width: 70px;
}

 .product-page h2, h3 {
  color:#000;
      font-weight: 700 !important;
      font-size: 24px;
    }
  
.product-page h5{
          font-weight: 600 !important;
      font-size: 20px;
 
}
.product-page h6{
          font-weight: 700 !important;
      font-size: 16px;
 
}
.popfonts{
   color:#000;
      font-weight: 700 !important;
      font-size:clamp(16px,10vw,24px) ;
}
.tpopfonts{
   color:#000;
      font-weight: 600 !important;
      font-size:clamp(16px,10vw,24px) ;
}
.spopfonts{
   color:#000;
      font-weight: 600 !important;
      font-size:clamp(14px,10vw,20px) ;
}

    .pricing-section {
      text-align: center;
      width:100% !important ;
      padding:30px
    }
    
    .product-page p {
      font-size: 20px !important;
      font-weight: 500;
        margin-bottom: 8px !important;
       

    }
    .product-page  strong{
font-size: 20px !important;
      font-weight: 500;
    }
 .product-page .review{
  font-size: 16px !important;
      font-weight: 500;
 }
 .product-page .customm-p{
  font-size: 20px !important;
      font-weight: 700;
 }
    .pricing-card {  
      padding:20px 10px;
      transition: all 0.3s ease;
      background-color: #fff;
      width:302px;
      height:364px;
border: 1px solid #D9D9D9;
      border-radius: 20px;
        align-items: center !important;       
  text-align: center !important;      
  margin-top:100px;
  margin-left:  auto;  
          margin-right: auto;
          gap:10px

    }

     .pricing-card .li-dcus {  
      font-size: 12px;
      font-weight: 600;
      margin-left: 70px;
            margin-bottom: 10px;

    }

    .product-page .pro-box {
    width:158px !important;
      height:40px !important;
       border: 1px solid #000000;
      border-radius: 6px;
      margin: 10px 10px;
            padding:0 5px;
             display: flex;
       align-items: center;       
  justify-content: space-between; /

    }

   .product-page .pro-btn {
      background-color: #ffffff;
      color: #000000;
       border:1px solid #000000; 
      width: 24px;
      height: 24px;
      border-radius: 50%;
      font-size: 1rem;
      display: flex;
      align-items: center;
      justify-content: center;
    }

 
   .product-page .pro-number {
      
      text-align: center;
      font-size: 20px;
      font-weight: 500;
    }
      .product-page .fontt-s {
      font-weight: 400 !important;
      font-size: 16px !important;
    }


   .product-page .addcard-btn{
      background-color: #4C2A71;
      color: #fff;
      font-weight: 500;
      font-size: 20px;
      border-radius: 8px;
      padding: 10px 20px;
      width:257px;
      height:50px;
      border:none
    }
       .product-page .buyNow-btn{
      background-color: #ffffff;
      color: #000000;
      font-weight: 500;
      font-size: 20px;
      border-radius: 8px;
      padding: 10px 20px;
      width:199px;
      height:50px;
      border:1px solid #D9D9D9;
    }
   .product-page .addwishlist-btn{
 background-color: #ffffff;
      color: #000000;
      font-weight: 500;
      font-size: 20px;
      border-radius: 8px;
      padding: 10px 20px;
      width:331px;
      height:50px;
      border:1px solid #D9D9D9;
    }
  
    .product-page .share-btn{
 background-color: #ffffff;
      color: #000000;
      font-weight: 500;
      font-size: 20px;
      border-radius: 8px;
      padding: 10px 20px;
      width:133px;
      height:50px;
      border:1px solid #D9D9D9;
    }
    .product-page .warranty-card{
       width:473px;
      height:379px;
      border:1px solid #D9D9D9;
            border-radius: 20px;
                        padding:10px 20px;


    }
    .product-page .warrn{
      width:438px;
      height:89px;
      border:1px solid #D9D9D9;
            border-radius: 20px;
            padding:20px;
            margin:20px auto

    }
     .product-page .card-shipping{
          width:473px;
      height:304px;
      border:1px solid #D9D9D9;
            border-radius: 20px;
                        padding:10px 20px;

     }
    .product-page .warrn .small{
    font-size:14px ;
    font-weight:400 ;
    color:#8D8D8D;
    width:20%;
    }
     .product-page .font-span{
    font-size:20px ;
    font-weight:500 ;
    color:#000000
    }
    .ic--baseline-chevron-right-cus {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M10 6L8.59 7.41L13.17 12l-4.58 4.59L10 18l6-6z'/%3E%3C/svg%3E");
}
.mdi-light--map-marker {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M11.5 7A2.5 2.5 0 0 1 14 9.5a2.5 2.5 0 0 1-2.5 2.5A2.5 2.5 0 0 1 9 9.5A2.5 2.5 0 0 1 11.5 7m0 1A1.5 1.5 0 0 0 10 9.5a1.5 1.5 0 0 0 1.5 1.5A1.5 1.5 0 0 0 13 9.5A1.5 1.5 0 0 0 11.5 8m-4.7 4.36l4.7 7.73l4.7-7.73c.51-.86.8-1.81.8-2.86A5.5 5.5 0 0 0 11.5 4A5.5 5.5 0 0 0 6 9.5c0 1.05.29 2 .8 2.86m10.25.52L11.5 22l-5.55-9.12C5.35 11.89 5 10.74 5 9.5A6.5 6.5 0 0 1 11.5 3A6.5 6.5 0 0 1 18 9.5c0 1.24-.35 2.39-.95 3.38'/%3E%3C/svg%3E");
}
.ion--alert-circle-outline {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='none' stroke='%234797FF' stroke-miterlimit='10' stroke-width='32' d='M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192s192-86 192-192Z'/%3E%3Cpath fill='none' stroke='%234797FF' stroke-linecap='round' stroke-linejoin='round' stroke-width='32' d='M250.26 166.05L256 288l5.73-121.95a5.74 5.74 0 0 0-5.79-6h0a5.74 5.74 0 0 0-5.68 6'/%3E%3Cpath fill='%234797FF' d='M256 367.91a20 20 0 1 1 20-20a20 20 0 0 1-20 20'/%3E%3C/svg%3E");
}
    .la--shipping-fast {
  display: inline-block;
  width: 40px;
  height: 40px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23F49D33' d='M0 6v2h19v15h-6.156c-.446-1.719-1.992-3-3.844-3s-3.398 1.281-3.844 3H4v-5H2v7h3.156c.446 1.719 1.992 3 3.844 3s3.398-1.281 3.844-3h8.312c.446 1.719 1.992 3 3.844 3s3.398-1.281 3.844-3H32v-8.156l-.063-.157l-2-6L29.72 10H21V6zm1 4v2h9v-2zm20 2h7.281L30 17.125V23h-1.156c-.446-1.719-1.992-3-3.844-3s-3.398 1.281-3.844 3H21zM2 14v2h6v-2zm7 8c1.117 0 2 .883 2 2s-.883 2-2 2s-2-.883-2-2s.883-2 2-2m16 0c1.117 0 2 .883 2 2s-.883 2-2 2s-2-.883-2-2s.883-2 2-2'/%3E%3C/svg%3E");
}
.mdi-light--cart {
  display: inline-block;
  width: 30px;
  height: 30px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M16 18a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0 1a1 1 0 0 0-1 1a1 1 0 0 0 1 1a1 1 0 0 0 1-1a1 1 0 0 0-1-1m-9-1a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0 1a1 1 0 0 0-1 1a1 1 0 0 0 1 1a1 1 0 0 0 1-1a1 1 0 0 0-1-1M18 6H4.27l2.55 6H15c.33 0 .62-.16.8-.4l3-4c.13-.17.2-.38.2-.6a1 1 0 0 0-1-1m-3 7H6.87l-.77 1.56L6 15a1 1 0 0 0 1 1h11v1H7a2 2 0 0 1-2-2a2 2 0 0 1 .25-.97l.72-1.47L2.34 4H1V3h2l.85 2H18a2 2 0 0 1 2 2c0 .5-.17.92-.45 1.26l-2.91 3.89c-.36.51-.96.85-1.64.85'/%3E%3C/svg%3E");
}
.codicon--symbol-event {
  display: inline-block;
  width: 30px;
  height: 30px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M7.414 1.56L8.312 1h3.294l.818 1.575L10.236 6h1.781l.72 1.695L5.618 15l-1.602-1.163L6.119 10H4.898L4 8.56zM7.78 9L4.9 14.305L12.018 7H8.312l3.294-5H8.312L4.898 9z' clip-rule='evenodd'/%3E%3C/svg%3E");
}
.mdi-light--heart {
  display: inline-block;
  width: 30px;
  height: 30px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4.24 12.25a4.2 4.2 0 0 1-1.24-3A4.25 4.25 0 0 1 7.25 5c1.58 0 2.96.86 3.69 2.14h1.12A4.24 4.24 0 0 1 15.75 5A4.25 4.25 0 0 1 20 9.25c0 1.17-.5 2.25-1.24 3L11.5 19.5zm15.22.71C20.41 12 21 10.7 21 9.25A5.25 5.25 0 0 0 15.75 4c-1.75 0-3.3.85-4.25 2.17A5.22 5.22 0 0 0 7.25 4A5.25 5.25 0 0 0 2 9.25c0 1.45.59 2.75 1.54 3.71l7.96 7.96z'/%3E%3C/svg%3E");
}
.material-symbols--share-outline {
  display: inline-block;
  width: 30px;
  height: 30px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M17 22q-1.25 0-2.125-.875T14 19q0-.15.075-.7L7.05 14.2q-.4.375-.925.588T5 15q-1.25 0-2.125-.875T2 12t.875-2.125T5 9q.6 0 1.125.213t.925.587l7.025-4.1q-.05-.175-.062-.337T14 5q0-1.25.875-2.125T17 2t2.125.875T20 5t-.875 2.125T17 8q-.6 0-1.125-.213T14.95 7.2l-7.025 4.1q.05.175.063.338T8 12t-.012.363t-.063.337l7.025 4.1q.4-.375.925-.587T17 16q1.25 0 2.125.875T20 19t-.875 2.125T17 22m0-2q.425 0 .713-.287T18 19t-.288-.712T17 18t-.712.288T16 19t.288.713T17 20M5 13q.425 0 .713-.288T6 12t-.288-.712T5 11t-.712.288T4 12t.288.713T5 13m12-7q.425 0 .713-.288T18 5t-.288-.712T17 4t-.712.288T16 5t.288.713T17 6m0-1'/%3E%3C/svg%3E");
}
/* Buttons Tabs */
.tabs-container {
  display: flex;
  justify-content: flex-start;
  gap: 5px;
  background: #f8f8f8;
  padding: 15px;
  border-radius: 20px;
}

.tab-button {
  flex: 1;
  background: transparent;
  border: none;
  color: #000000;
  font-weight: 600;
  font-size: 20px;
  /* width:159px !important;
  height:44px !important; */
  border-radius: 20px;
  transition: 0.3s;
  border:none
}

.tab-button.active {
  background: #4C2A71;
  color: #fff;
  font-weight: 600;
  font-size: 20px;
 /* width:159px;*/
  height:44px; 
  border-radius: 20px;
    border:none

}

/* Hide inactive tabs */
.tab-content-box {
  display: none;
}

.tab-content-box.active {
  display: block;
}

/* Custom Buttons & Styling */
.btn-main {
  background: #5b2c91 !important;
  border: none !important;
  color: #fff !important;
}

.btn-main:hover {
  background: #4a2378 !important;
}
.product-documents{
     /* width:1006px; */
      /* height:222px; */
      border:1px solid #D9D9D9;
            border-radius: 20px;
                        padding:10px 20px;
}
.card-guide .down-btn{
  width:118px !important;
  height:28px !important;
  border-radius:10px;
  font-size: 14px;
  font-weight: 500;
  color:#fff !important;
  background-color:#4C2A71 ;
  border:none;
}
 /* .product-documents .card-guide{
   width:422px;
      height:74px;
      border:1px solid #D9D9D9;
            border-radius: 20px;
                        padding:10px 20px;
 } */
.lineicons--download-1 {
  display: inline-block;
  width: 20.8px;
  height: 20px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 24'%3E%3Cpath fill='%23fff' d='M12.424 16.75a.75.75 0 0 1-.548-.237l-4.61-4.607a.75.75 0 0 1 1.061-1.061l3.347 3.345V4a.75.75 0 1 1 1.5 0v10.185l3.343-3.34a.75.75 0 1 1 1.06 1.06l-4.575 4.573a.75.75 0 0 1-.578.272'/%3E%3Cpath fill='%23fff' d='M5.172 16a.75.75 0 0 0-1.5 0v2.5a2.25 2.25 0 0 0 2.25 2.25h13a2.25 2.25 0 0 0 2.25-2.25V16a.75.75 0 1 0-1.5 0v2.5a.75.75 0 0 1-.75.75h-13a.75.75 0 0 1-.75-.75z'/%3E%3C/svg%3E");
}
.fluent--document-text-32-regular {
  display: inline-block;
  width: 32px;
  height: 32px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23000' d='M11 23a1 1 0 1 0 0 2h10a1 1 0 1 0 0-2zm-1-3a1 1 0 0 1 1-1h10a1 1 0 1 1 0 2H11a1 1 0 0 1-1-1m1-5a1 1 0 1 0 0 2h10a1 1 0 1 0 0-2zM5 5a3 3 0 0 1 3-3h10.172a3 3 0 0 1 2.12.879l5.83 5.828A3 3 0 0 1 27 10.828V27a3 3 0 0 1-3 3H8a3 3 0 0 1-3-3zm3-1a1 1 0 0 0-1 1v22a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1V12h-5a3 3 0 0 1-3-3V4zm12 6h4.586L19 4.414V9a1 1 0 0 0 1 1'/%3E%3C/svg%3E");
}
.product-desc{
  font-size:clamp(18px,2vw,24px);
  font-weight:700;
}
/* .product-page .product-Pdesc{
  font-size:clamp(12px,2vw,16px);
  font-weight:400;
} */
.product-lidesc{
  font-weight:400;
    font-size:clamp(12px,2vw,16px);

  list-style: disc; /* رجّع النقط */
  padding-left: 2px; /* علشان النقط تظهر مش لازقة في الكلام */
  margin-left:20px

}
.product-Kdesc{
   font-size:clamp(12px,2vw,16px);
  font-weight:700;
}
.seller-info-section {
  border: 1px solid #D9D9D9; /* نفس تأثير البوكس اللي في الصورة */
  border-radius: 20px;
}

.store-logo {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover; 
}
.cuida--rotate-left-outline {
  display: inline-block;
 width: 40px;
  height: 40px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg class='rotate-left-outline'%3E%3Cg fill='%231D4A73' fill-rule='evenodd' class='Vector' clip-rule='evenodd'%3E%3Cpath d='M12 6.05c3.869 0 7 3.126 7 6.975C19 16.875 15.869 20 12 20s-7-3.126-7-6.975c0-1.07.242-2.083.673-2.987a1 1 0 0 0-1.806-.86A8.9 8.9 0 0 0 3 13.024C3 17.985 7.032 22 12 22s9-4.015 9-8.975s-4.032-8.974-9-8.974c-1.24 0-2.425.25-3.502.705l.777 1.843A7 7 0 0 1 12 6.05'/%3E%3Cpath d='M10.194 2.233a.857.857 0 0 0-1.15.385L7.713 5.301a1.086 1.086 0 0 0 .493 1.456l2.691 1.329a.857.857 0 1 0 .758-1.536L9.53 5.5l1.053-2.118a.857.857 0 0 0-.388-1.149Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.material-icon-theme--verified {
  display: inline-block;
  width: 40px;
  height: 40px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2322C55E' d='M9 3L8 6H4l1 4l-3 2l3 2l-1 4h4l1 3l3-2l3 2l1-3h4l-1-4l3-2l-3-2l1-4h-4l-1-3l-3 2zm7 5l1 1l-7 7l-3-3l1-1l2 2z'/%3E%3C/svg%3E");
}
.circum--share-1 {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12.223 11.075a.5.5 0 0 0 .7.71l7-7v3.58a.51.51 0 0 0 .5.5a.5.5 0 0 0 .5-.5v-4.79a.5.5 0 0 0-.5-.5h-4.79a.5.5 0 0 0 0 1h3.58Z'/%3E%3Cpath fill='%23000' d='M17.876 20.926H6.124a3.053 3.053 0 0 1-3.05-3.05V6.124a3.053 3.053 0 0 1 3.05-3.05h6.028a.5.5 0 0 1 0 1H6.124a2.053 2.053 0 0 0-2.05 2.05v11.752a2.053 2.053 0 0 0 2.05 2.05h11.752a2.053 2.053 0 0 0 2.05-2.05v-6.027a.5.5 0 0 1 1 0v6.027a3.053 3.053 0 0 1-3.05 3.05'/%3E%3C/svg%3E");
}
@media (max-width: 991px) and (min-width: 768px) {
 
   
}
    @media (max-width: 768px) {
      
    }
/* ----------- Responsive with clamp ----------- */
.width-productDetails-custom{
  width: clamp(340px, 80vw, 1100px);
  margin: 10px auto;
}

.product-page .main-img {
  width: clamp(320px, 40vw, 500px);
  height: clamp(260px, 35vw, 441px);
  border-radius: 20px;
}

.product-page .thumb-img {
  width: clamp(60px, 10vw, 100px);
  height: clamp(60px, 10vw, 100px);
}

/* السعر */
.product-page .price { 
  font-size: clamp(22px, 3vw, 36px);
  font-weight: 700;
}

.product-page .old-price {
  font-size: clamp(14px, 2vw, 24px);
  font-weight: 400;
}

/* الخصم */
.product-page .discount {
  font-size: clamp(10px, 1.5vw, 14px);
  width: clamp(55px, 8vw, 77px);
  height: clamp(18px, 3vw, 22px);
  border:none;
}

/* صندوق السعر */
.pricing-card {  
  padding:20px 10px;
  width: clamp(260px, 50vw, 302px);
  height: clamp(260px, 60vw, 364px);
  border-radius: 20px;
  margin-top: clamp(40px, 10vw, 100px);
}

/* نصوص عامة */
.product-page p,
.product-page strong,
.product-page .customm-p {
  font-size: clamp(14px, 2.2vw, 20px) !important;
}
.thumb-img.active-thumb {
    border: 2px solid #007bff;
    background: #e7f0ff;}
  .size-box.active-size {
    border: 2px solid #007bff;
    background: #e7f0ff;
  }
 .color-circle.active-color {
    border: 2px solid #007bff;
    background: #e7f0ff;  }
/* الازرار */
.product-page .addcard-btn{
  font-size: clamp(14px, 2.5vw, 20px);
  width: clamp(180px, 40vw, 257px);
  height: clamp(42px, 5vw, 50px);
}

.product-page .buyNow-btn,
.product-page .addwishlist-btn,
.product-page .share-btn{
  font-size: clamp(14px, 2vw, 20px);
  height: clamp(42px, 5vw, 50px);
}

/* الكروت الجانبية */
.product-page .warranty-card,
.product-page .card-shipping{
  width: clamp(330px, 60vw, 473px);
  height: auto; /* خليها اوتوماتيك بدل ثابت */
  padding: clamp(10px, 2vw, 20px);
}
.spec-grid {
  display: grid;
  gap: clamp(10px, 2vw, 30px);
  font-size: clamp(12px, 2vw, 16px);
  font-weight: 400;
  line-height: 1.6;
  padding-bottom: 30px;

}

/* التابلت: عمودين */
@media (min-width: 768px) {
  .spec-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* اللاب توب: 4 أعمدة */
@media (min-width: 1024px) {
  .spec-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.product-page .warrn{
  width: clamp(260px, 60vw, 438px);
  height: auto;
}
.shipping-row {
  cursor: pointer;
}
.shipping-row {
  cursor: pointer;
}
/* Popup Background */
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4);
  display: none; /* مهم علشان يختفي */
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

/* Popup Box */
.popup-box-shipping {
  background: #fff;
  width: clamp(300px, 90%, 778px);
  /* height:clamp(400px,5vh,893px); */
    max-height: 90vh;      /* مهم */
  overflow-y: auto; 

  border-radius: 16px;
  padding: 16px;
}

/* Close Button */
.close-popup {
  background: #D9D9D9;
  border: none;
  font-size: 26px;
  cursor: pointer;
}

/* Shipping Option Box */
.method-box {
  /* border-bottom: 1px solid #ddd; */
  padding: 12px 0;
}

/* Tracking Button */
.tracking-btn {
  margin-top: 8px;
  padding: 5px 14px;
  border-radius: 8px;
  border: none;
  background: #4C2A71;
  color: #fff;
  font-size: 16px;
}
.method-box input[type="radio"] {
  display: none;
}

/* الدائرة */
.method-box .custom-radio {
  width: 20px;
  height: 20px;
  border: 2px solid #4C2A71; /* لون موف */
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: .3s;
  font-size: 14px;
  color: transparent; /* في الأول العلامة مش ظاهرة */
}
.method-box input[type="radio"]:checked + .custom-radio {
  background: #4C2A71;
  color: #fff; /* العلامة تظهر */
}

/* العلامة صح */
.method-box input[type="radio"]:checked + .custom-radio::after {
  content: "✓";
}
/* Popup Overlay (نفس بتاع الشيبينج لو عندك خلاص متكرريهوش) */
.popup-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.4);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

/* صندوق البوب اب */
.popup-box-warranty {
  background: #fff;
  width:  clamp(300px, 90%, 778px);
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 16px;
  padding: 20px;
}

/* زر الإغلاق */
.close-popup {
  background:#D9D9D9;
  border-radius: 50% !important;
  width:40px;
  height:40px;
  font-size: 26px;
  cursor: pointer;
}
#openWarranty{
  cursor: pointer;
}
/* لست Check ✅ */
.check-list {
  list-style: none;
  padding: 0;
  margin: 0 0 10px;
}

.check-list li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 8px;
  font-size: 15px;
}

.check-list li::before {
  content: "✔";
  position: absolute;
  left: 0;
  top: 1px;
  color: #00A158;
  font-weight: bold;
}

/* لست نقط صغيرة • */
.dash-list {
  padding-left: 20px;
   list-style-type: disc; 
}

.dash-list li {
  margin-bottom: 6px;
  margin-left:20px;
  font-size: 15px;
  font-weight:400;
}
/* المودال */
.popup-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.popup-content {
  background: #fff;
  border-radius: 10px;
  width: clamp(300px, 80vw, 850px);
  padding: clamp(20px, 3vw, 40px);
  position: relative;
}
.tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.tab-btn {
  flex: 1;
  padding: 10px;
  background: #eee;
  border: none;
  cursor: pointer;
  font-weight: bold;
}

.tab-btn.active {
  background: #5b2e91;
  color: #fff;
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

.size-btn {
  padding: 8px 15px;
  margin: 5px;
  border: 1px solid #4C2A71;
  background: transparent;
  cursor: pointer;
  border-radius: 6px;
}

.size-btn.active {
  background: #4C2A71;
  color: #fff;
}

.size-image {
  width: 100%;
  margin-top: 15px;
  border-radius: 10px;
}

.choosepopup-title {
  font-size: clamp(16px, 2vw, 24px);
  font-weight: 700;
  margin-bottom: 5px;
}

/* Tabs */
.chooselabel {
  font-weight: 500;
  margin-bottom: 8px;
}

.choosebtn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.choosetab-btn, .choosegender-btn {
  padding: clamp(3px, 1vw, 4px) clamp(14px, 2vw, 24px);
  border: 1px solid #000000;
  background: transparent;
  border-radius: 10px;
  cursor: pointer;
  font-size: clamp(14px, 1.2vw, 20px);
  transition: all 0.3s;
  font-weight:600;
}

.choosetab-btn.active, .choosegender-btn.active {
  background-color: #4C2A71;
  color: #ffffff;
  border:none;

}

/* المقاسات */
.choosesize-numbers {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 15px;
}

.choosesize-btn {
  width: clamp(36px, 5vw, 50px);
  height: clamp(36px, 5vw, 50px);
  border-radius: 50%;
  border: 1px solid #888;
  background: #fff;
  cursor: pointer;
  transition: all 0.3s;
  font-size: clamp(16px, 1.5vw, 24px);
  font-weight: 700;
}

.choosesize-btn.active {
  background: #4C2A71;
  color: #fff;
  border: none;
}

.choosedisplayed-size {
  margin-top: 20px;
  font-size: 20px;
  font-weight:600;
  color:#000 !important;
} 

.choosesize-table {
  margin-top: 6px;
  border-radius: 8px;
  padding: clamp(5px, 2vw, 10px);
}

.choosesize-table div  {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
}

.choosesize-table div:hover {
 background-color:#F5F5F5 ;
}

/* Animation */
@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}
.popup-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  justify-content: center;
  align-items: center;
  z-index: 1000;
}
.popup-content {
  background: #fff;
  border-radius: 12px;
  width: clamp(300px, 80vw, 850px);
  padding: clamp(20px, 3vw, 40px);
  position: relative;
  max-height: 95vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #bfa7e3 #f1f1f1;
  animation: fadeIn 0.3s ease-in-out;
}
@keyframes fadeIn {
  from {opacity: 0; transform: translateY(-10px);}
  to {opacity: 1; transform: translateY(0);}
}
.close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: clamp(20px, 3vw, 28px);
  cursor: pointer;
  
}
.guide-btn{
    padding: clamp(4px, 1vw, 8px) clamp(15px, 2vw, 24px);
  background-color: #4C2A71;
  border-radius: 10px;
  border:none;

}
/* ===== Tabs ===== */
.tabs {
  display: flex;
  gap: clamp(5px, 1vw, 15px);
  margin-bottom: clamp(10px, 2vw, 25px);
}
.tabbb-btn {
  background: none;
  border: none;
  padding: clamp(6px, 1vw, 12px) clamp(4px, 1vw, 16px);
  cursor: pointer;
  position: relative;
  transition: 0.3s;
}
.tabbb-btn.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 20%;
  width: 60%;
  height: 3px;
  background-color: #4C2A71;
  border-radius: 2px;
}
.tab-content { display: none; }
.tab-content.active { display: block; }

/* ===== Switch (CM / IN) ===== */
.switch-container {
  display: flex;
  align-items: center;
  gap: clamp(5px, 1vw, 15px);
  margin-bottom: 15px;
}
.switch {
  background: #D9D9D9;
  border-radius: 10px;
  padding: 3px;
  display: flex;
}
.unit-btn {
  border: none;
  background: transparent;
  padding: clamp(6px, 1vw, 10px) clamp(15px, 2vw, 25px);
  border-radius: 10px;
  cursor: pointer;
  /* font-size: clamp(13px, 1vw, 16px); */
}
.unit-btn.active {
  background: #000000;
  color: #fff;
}

/* ===== Stretch Section ===== */
.stretch-container { margin-top: 20px; }
.stretch-header {
  display: flex;
  justify-content: flex-end;
  font-weight: 500;
  color: #000;
  margin-bottom: 5px;
  /* font-size: clamp(13px, 1vw, 16px); */
}
.stretch-bar-container { width: 100%; }
.stretch-bar {
  position: relative;
  width: 100%;
  height: 7px;
  background: #D9D9D9;
  margin-bottom: 5px;
}
.stretch-fill {
  position: absolute;
  left: 20%;
  width: 20%;
  height: 100%;
  background: #5B2A83;
  border-radius: 10px;
  transition: 0.3s;
}
.stretch-labels {
  display: flex;
  justify-content: space-between;
  /* font-size: clamp(12px, 1vw, 16px); */
  margin-top: 10px;
}

/* ===== Sizes ===== */
.sizes-container { margin: clamp(20px, 3vw, 40px) auto; }
.sizes {
  display: flex;
  gap: clamp(5px, 1vw, 10px);
  flex-wrap: wrap;
  justify-content: center;
}
.size-btn {
  width: clamp(40px, 8vw, 60px);
  height: clamp(40px, 8vw, 60px);
  border: 1px solid #8D8D8D;
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
  font-size: clamp(14px, 1.2vw, 18px);
  transition: 0.3s;
}
.size-btn.active {
  background: #4C2A71;
  color: #fff;
}

/* ===== Image ===== */
.size-image {
  width: 100%;
  margin-top: 15px;
  border-radius: 10px;
}

/* ===== Recommendation Tab ===== */
.recommend-form {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 2vw, 20px);
}
input {
  padding: clamp(6px, 1vw, 10px);
  border-radius: 6px;
  border: 1px solid #ccc;
  font-size: clamp(14px, 1vw, 18px);
  width: clamp(180px, 40vw, 320px);
}
.fit-options {
  display: flex;
  gap: clamp(8px, 1vw, 20px);
  flex-wrap: wrap;
}
.fit-btn {
  padding: clamp(8px, 1vw, 12px) clamp(25px, 3vw, 40px);
  border-radius: 30px;
  border: 1px solid #8D8D8D;
  background: transparent;
  cursor: pointer;
  font-size: clamp(14px, 1.2vw, 18px);
  font-weight: 500;
}
.fit-btn.active {
  background: #4C2A71;
  color: #fff;
}
.recommend-btn {
  display: block;
  background: #4C2A71;
  color: #fff;
  border: none;
  padding: clamp(10px, 2vw, 20px) clamp(20px, 2vw, 40px);
  border-radius: 20px;
  cursor: pointer;
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 700;
  margin-top: 10px;
}
.recommend-btn {
  width: 100%;
  display: block;
}
.popup-content-custom{
  background: #fff;
  border-radius: 10px;
  width: clamp(300px, 80vw, 850px);
  padding: clamp(20px, 3vw, 40px);
  position: relative; 
}
.close-popup-custom{

  border: none;
  font-size: 26px;
  cursor: pointer;

}
.pagination .page-link {
    border: none !important;
   
  }
   .pagination-wrapper {
    margin-left: auto; 
  }
   .pagination li {
    flex: 1; 
    display: flex;
    justify-content: center;
  }
  
  .page-item.active .page-link {
    background-color: #4C2A71;
  }

  .page-link {
    color: #000000;
  }
.page-link {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center;
  }
  .page-link:hover {
    color: #581f8c;
  }