*{box-sizing:border-box;font-family:'Poppins',sans-serif;}
  body{margin:0;background:#000;color:#fff;}
  .product-page{max-width:1100px;margin:30px auto;
    border-radius:6px;
    box-shadow:0 2px 10px rgba(0,0,0,0.05);padding:20px;
      backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
  }
  
  .product-main{display:flex;flex-wrap:wrap;gap:30px;}
  .product-image{flex:1 1 40%;text-align:center;}
  .product-image img{max-width:100%;border:1px solid #eee;border-radius:6px;}
  .product-info{flex:1 1 55%;}
  .product-info h1{font-size:26px;margin-bottom:8px;}
  .rating{font-size:15px;color:#ffb400;margin-bottom:8px;}
  .price{font-size:22px;color:#e63946;margin-bottom:6px;}
  .old-price{text-decoration:line-through;color:#999;font-size:16px;margin-left:8px;}
  .stock{color:#2a9d8f;font-size:14px;margin-bottom:15px;}
  
  .quantity-control{display:flex;align-items:center;margin-bottom:20px;}
  .quantity-control button{width:35px;height:35px;border:none;background:#eee;font-size:20px;cursor:pointer;border-radius:5px;}
  .quantity-control input{width:60px;text-align:center;margin:0 10px;border:1px solid #ccc;border-radius:5px;font-size:16px;}
  
  .action-buttons{display:flex;gap:10px;flex-wrap:wrap;}
  .action-buttons button{flex:1 1 150px;padding:12px;font-size:16px;border:none;border-radius:5px;cursor:pointer;transition:0.3s;}
  .buy-now{background:#e63946;color:#fff;}
  .add-cart{background:#fff;border:1px solid #ccc;}
  .buy-now:hover{background:#d62828;}
  .add-cart:hover{background:#f1f1f1;}

  /* --- Review Section --- */
  .reviews{margin-top:40px;border-top:1px solid #eee;padding-top:20px;}
  .reviews h2{font-size:22px;margin-bottom:20px;}

  .review-summary{display:flex;flex-wrap:wrap;gap:30px;align-items:center;margin-bottom:30px;}
  .average-rating{text-align:center;}
  .average-rating .num{font-size:40px;font-weight:bold;color:#333;}
  .average-rating .stars{color:#ffb400;font-size:20px;}
  .average-rating p{font-size:14px;color:#777;}

  .rating-bars{flex:1;}
  .bar{display:flex;align-items:center;margin:5px 0;}
  .bar span{width:40px;}
  .progress{flex:1;height:8px;background:#eee;border-radius:4px;overflow:hidden;margin:0 10px;}
  .progress div{height:8px;background:#ffb400;}

  .customer-reviews{margin-top:10px;}
  .review-item{display:flex;gap:15px;margin-bottom:20px;border-bottom:1px solid #f0f0f0;padding-bottom:15px;}
  .review-item img{width:50px;height:50px;border-radius:50%;object-fit:cover;}
  .review-content{flex:1;}
  .review-content .name{font-weight:600;font-size:15px;margin-bottom:4px;}
  .review-content .stars{color:#ffb400;margin-bottom:5px;}
  .review-content .text{font-size:14px;line-height:1.5;color:#555;}

  @media(max-width:768px){
    .product-main{flex-direction:column;}
    .review-summary{flex-direction:column;align-items:flex-start;}
  }
  .grey-highlight {
    color: #a0a0a0;
    font-size: 12px;
  }

    .buy-btn {
        background: #0a8f63;
        padding: 14px 30px;
        font-size: 20px;
        border-radius: 10px;
        border: none;
        color: #fff;
        margin: 40px;
        cursor: pointer;
        box-shadow: 0 6px 20px rgba(0,0,0,0.25);
    }

    /* Blur BG */
    #popupBg {
        position: fixed;
        inset: 0;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        display: none;
        align-items: center;
        justify-content: center;
        z-index: 1000;
    }

    /* Popup */
    #popupBox {
        width: 900px;
        border-radius: 18px;
        padding: 25px;
        display: flex;
        gap: 25px;
        position: relative;
        box-shadow: 0 20px 60px rgba(0,0,0,0.30);
        animation: show .28s ease;
        border: 1px solid rgba(255, 255, 255, 0.3);
    }

    @keyframes show {
        from {transform: scale(.85); opacity: 0;}
        to   {transform: scale(1); opacity: 1;}
    }

    .close {
        position: absolute;
        right: 15px;
        top: 10px;
        font-size: 22px;
        cursor: pointer;
        background: #c0392b;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        text-align: center;
        line-height: 34px;
    }

    /* LEFT SIDE - FORM */
    .left { width: 50%; }

    .label {
        margin-top: 10px;
        margin-bottom: 10px;
        font-size: 14px;
        font-weight: 600;
        color:#c0392b;
    }

    .input {
        width: 100%;
        padding: 10px;
        border-radius: 8px;
        border: 1px solid #fff;
        outline:none;
        color:#fff;
        background:transparent;
        font-size: 15px;
        box-shadow: rgba(205, 205, 162, 0.25) 0px 30px 60px -12px inset, rgba(255, 255, 255, 0.3) 0px 18px 36px -18px inset;
    }
    .input::placeholder{
        color:#f2f2f2;
    }

    .stock-box {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 15px;
    }

    .stock-btn {
        padding: 7px 18px;
        background: #0a8f63;
        color: #fff;
        border: none;
        border-radius: 6px;
        font-size: 16px;
        cursor: pointer;
    }

    /* RIGHT SIDE - PRODUCT INFO + SUMMARY */
    .right { width: 50%; }

    .right img {
        height: 250px;
        border-radius: 12px;
        margin-bottom: 10px;
        /* box-shadow: 0 4px 14px rgba(0,0,0,0.25); */
    }

    /* Summary table */
    table {
        width: 100%;
        border-collapse: collapse;
        border-radius: 12px;
        overflow: hidden;
        margin-top: 15px;
        font-size: 15px;
    }

    td {
        padding: 10px;
        border-bottom: 1px solid #e4e4e4;
    }

    tr:last-child td { border-bottom: none; }

    #orderBtn {
        width: 100%;
        margin-top: 15px;
        padding: 12px;
        font-size: 18px;
        background: #0a8f63;
        color: #fff;
        border: none;
        border-radius: 12px;
        cursor: pointer;
        box-shadow: 0 5px 16px rgba(0,0,0,0.25);
    }

    #applyBtn {
        padding: 9px 14px;
        background: #0a8f63;
        color: white;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        margin-left: 5px;
    }
    
    
    
    
    
    
    
    
    
    .custom-dropdown-wrapper {
        position: relative;
        width: 220px;
    }

    .custom-dropdown {
        border: 1px solid #ccc;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
    }

    .selected-box {
        padding: 10px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .dropdown-options {
        position: absolute;
        left: 0;
        right: 0;
        border: 1px solid #ccc;
        border-top: none;
        border-radius: 0 0 6px 6px;
        max-height: 0;
        overflow: hidden;
        transition: 0.3s;
        z-index: 2;
    }

    .dropdown-options.show {
        max-height: 200px;
        overflow-y: auto;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    .dropdown-item {
        padding: 10px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .dropdown-item:hover {
        background: rgba(255,255,255,0.3);
    }

    .item-img {
        width: 20px;
        height: 20px;
    }