.product_detail_wrapper {
  .product_banner {
    width: 100%;
    height: 300px;
    position: relative;
    ion-slides {
      height: 100%;
    }
    .fav_icon {
      width: 30px;
      height: 30px;
      background-image: url('../../assets/Group32_2.png');
      background-position: center;
      background-repeat: no-repeat;
      background-size: 24px;
      position: absolute;
      top: 15px;
      right: 15px;
      z-index: 2;
    }
    .fav_fill {
      width: 30px;
      height: 30px;
      background-image: url('../../assets/fav_fill.png');
      background-position: center;
      background-repeat: no-repeat;
      background-size: 24px;
      position: absolute;
      top: 15px;
      right: 15px;
      z-index: 2;
    }
    .featured_badge {
      position: absolute;
      bottom: 20px;
      right: 15px;
      color: #fff;
      background-color: rgba(41, 40, 91, 1);
      padding: 2px;
      padding-left: 5px;
      padding-right: 5px;
      font-size: 13px;
      z-index: 2;
    }
    img {
      width: 100%;
      height: 100%;
      object-position: center;
      object-fit: cover;
    }
  }
  .product_header {
    padding: 10px;
    h3 {
      margin: 0px;
      padding: 0px;
      color: rgba(41, 40, 91, 1);
      font-size: 26px;
      font-weight: 900;
      padding-bottom: 5px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    p {
      margin: 0px;
      padding: 0px;
      color: rgba(121, 119, 139, 1);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      strong {
        margin-right: 5px;
        span {
          img {
            width: 16px;
          }
        }
      }
    }
    h5 {
      margin: 0px;
      padding: 0px;
      color: rgba(59, 57, 77, 1);
      text-align: right;
      font-size: 26px;
    }
  }
  .product_div_content {
    padding-bottom: 80px;
    h5 {
      color: rgba(41, 40, 91, 1);
      margin: 0px;
      padding: 10px;
      font-weight: 900;
    }
    p {
      color: rgba(59, 57, 77, 1);
      padding: 10px;
      text-align: justify;
      margin: 0px;
    }
    .size_div {
      padding: 10px;
      ul {
        margin: 0px;
        padding: 0px;
        li {
          list-style: none;
          width: 100%;
          height: 100px;
          margin: 4px;
          display: inline-block;
          #custom_check_button {
            background-color: #fff;
            border-radius: 10px !important;
            overflow: auto;
            color: #000;
            border: 1px dashed rgba(215, 213, 228, 1);
            position: relative;
            width: 100%;
            height: 100%;
            outline: none;
            font-size: 17px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          #custom_check_button p {
            margin: 0px;
            position: absolute;
            left: 0px;
            right: 0px;
            top: 0px;
            bottom: 0px;
            padding: 4px;
            padding-top: 35px;
            padding-bottom: 35px;
            text-align: center;
          }
          #custom_check_button label {
            width: 100%;
          }
          #custom_check_button label span {
            text-align: center;
            display: block;
          }
          #custom_check_button label input {
            position: absolute;
            top: 0px;
            opacity: 0;
          }
          #custom_check_button input:checked + p {
            background-color: rgba(41, 40, 91, 1);
            color: #fff;
            border-radius: 10px !important;
            margin: 0px;
          }
        }
      }
    }
    .color_div {
      padding: 10px;
      ul {
        margin: 0px;
        padding: 0px;
        li {
          list-style: none;
          width: 100%;
          height: 100px;
          margin: 4px;
          display: inline-block;
          #custom_check_button {
            background-color: #fff;
            border-radius: 10px !important;
            overflow: auto;
            color: #000;
            border: 1px dashed rgba(215, 213, 228, 1);
            position: relative;
            width: 100%;
            height: 100%;
            outline: none;
            font-size: 17px;
          }
          #custom_check_button p {
            margin: 0px;
            position: absolute;
            left: 0px;
            right: 0px;
            top: 0px;
            color: transparent;
            bottom: 0px;
            padding: 0px;
            text-align: center;
            border: 3px solid transparent;
            img {
              width: 100%;
              height: 100%;
              border-radius: 10px !important;
              object-fit: cover;
              object-position: center;
            }
          }
          #custom_check_button label {
            width: 100%;
          }
          #custom_check_button label span {
            text-align: center;
            display: block;
          }
          #custom_check_button label input {
            position: absolute;
            top: 0px;
            opacity: 0;
          }
          #custom_check_button input:checked + p {
            border: 3px dashed #29285b;
            color: transparent;
            border-radius: 10px !important;
            margin: 0px;
            padding: 0px;
          }
        }
      }
    }
    .review_list {
      padding: 10px;
      ul {
        margin: 0px;
        padding: 0px;
        li {
          list-style: none;
          padding-bottom: 20px;
          .review_image {
            width: 35px;
            height: 35px;
            border-radius: 50%;
            float: left;
            background-color: #a8a8a8;
            img {
              width: 100%;
              height: 100%;
              border-radius: 50%;
              object-fit: cover;
              object-position: center;
            }
          }
          .review_detail {
            float: left;
            width: calc(100% - 35px);
            padding-left: 10px;
            padding-top: 2px;
            padding-bottom: 7px;
            h4 {
              margin: 0px;
              padding: 0px;
              color: rgba(59, 57, 77, 1);
              span {
                font-weight: bolder;
                font-size: 18px;
                margin-left: 10px;
                img {
                  width: 16px;
                  margin-right: 2px;
                }
              }
            }
            .review_date {
              color: rgba(176, 174, 199, 1);
              font-size: 14px;
            }
            p {
              margin: 0px;
              padding: 0px;
              color: rgba(59, 57, 77, 1);
              padding-top: 10px;
            }
          }
        }
      }
    }
    .related_product_slider {
      ul {
        padding: 10px;
        padding-bottom: 0px;
        padding-top: 0px;
        margin: 0px;
        li {
          width: 100%;
          display: inline-block;
          border-top: none;
          border-bottom: none;
          margin-bottom: 10px;
          .product_image {
            height: 235px;
            position: relative;
            .featured_badge {
              position: absolute;
              top: 20px;
              left: 0px;
              color: #fff;
              background-color: rgba(41, 40, 91, 1);
              padding: 2px;
              padding-left: 10px;
              padding-right: 10px;
              font-size: 13px;
            }
            .fav_icon {
              position: absolute;
              top: 10px;
              right: 10px;
              font-size: 27px;
              width: 30px;
              height: 30px;
              background-image: url('../../assets/Group32_2.png');
              background-position: center;
              background-repeat: no-repeat;
              background-size: 24px;
            }
            .fav_fill {
              position: absolute;
              top: 10px;
              right: 10px;
              font-size: 27px;
              width: 30px;
              height: 30px;
              background-image: url('../../assets/fav_fill.png');
              background-position: center;
              background-repeat: no-repeat;
              background-size: 24px;
            }
            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
              object-position: center;
            }
          }
          h5 {
            margin: 0px;
            padding: 0px;
            color: rgba(59, 57, 77, 1);
            padding-top: 5px;
            padding-bottom: 5px;
            font-weight: 400;
            text-align: left;
            font-size: 14px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          p {
            margin: 0px;
            padding: 0px;
            color: rgba(176, 174, 199, 1);
            font-size: 12px;
            span {
              text-decoration: line-through;
              margin-left: 10px;
              color: rgba(215, 213, 228, 1);
            }
            .offer {
              color: #fff;
              background-color: rgba(41, 40, 91, 1);
              border-radius: 4px;
              text-decoration: none;
              padding: 3px;
              font-size: 13px;
            }
          }
        }
      }
    }
  }
}

.footer_div {
  bottom: 0px;
  height: 50px;
  left: 0px;
  right: 0px;
  min-width: 100%;
  background-color: #fff;
  -webkit-box-shadow: 0px -2px 3px -1px rgba(0, 0, 0, 0.34);
  -moz-box-shadow: 0px -2px 3px -1px rgba(0, 0, 0, 0.34);
  box-shadow: 0px -2px 3px -1px rgba(0, 0, 0, 0.34);
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  z-index: 99;
  .footer_options {
    width: 50%;
    float: left;
    height: 100%;
    button {
      width: 33.3%;
      display: inline-block;
      height: 100%;
      border-radius: 10px;
      background-color: transparent;
      background-repeat: no-repeat;
      background-position: center;
      background-size: 30px;
      cursor: pointer;
    }
    .cart {
      background-image: url('../../assets/cart_2.png');
    }
    .fav {
      background-image: url('../../assets/Group56_2.png');
    }
    .fav_active {
      background-image: url('../../assets/heart.png');
    }

    .share {
      background-image: url('../../assets/Group57_2.png');
    }
  }
  .footer_btn {
    width: 50%;
    border-top-right-radius: 10px;
    background-color: rgba(41, 40, 91, 1);
    color: #fff;
    float: right;
    text-align: center;
    padding: 15px;
    font-size: 18px;
    height: 100%;
  }
}
