.item-preview-container
{
    width:100%;
    max-width: 1500px;
    padding: 150px 25px;
    margin: 0 auto;
    display:grid;
    gap:50px 25px;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: 
    'ImageContainer Details'
    'Features Specs'
    'Features Specs'
    'Reviews Reviews';
}

.item-img-gallery-contianer
{
    grid-area: ImageContainer;
    position: relative;
    width: 100%;
    max-width: 700px;
  /* background-color: rgb(34, 34, 34); */
    height:auto ;
}
.swipe {
    overflow: hidden;
    visibility: hidden;
    position: relative;
    width: 100%;
    max-width: 700px;
    height:500px ;
    color:black;
    border-radius: 8px;
    box-shadow: var(--dropshadow-mid);
  }
  
  .swipe-wrap 
  {
    height:500px ;
    overflow-x: hidden;
    position: relative;

  }
  .swipe-wrap > div {
    float: left;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    /* display:flex;
    justify-content: center;
    align-items: center; */

  }
  
  .swipe-wrap img{

    width: 100%;
    height:100%;
    object-fit: contain;
    cursor: -webkit-grab; cursor: grab;

   
  }
  .swipe-wrap img:active,
  .swipe-wrap img:focus{
    cursor: -webkit-grabbing; cursor: grabbing;
  }
  .item-img-gallery-navbar-container
  {
    display:block;
      margin-top:50px;
      padding-top: 10px;;
      padding-left: 40px;
      padding-right: 40px;
      width:100%;
     border-top: 1px solid var(--midGrey);
     height: 200px;
     overflow: hidden;
  }
  .glider-track
  {
    height: 100px;
  }

  .glider div
  {
    width:100%;
    height: 100px;
    padding:5px;
    transition: 0.2s;

  }
  .glider div >  img
  {
      transform: scale(1);
      transition: 0.2s ease-out;
      cursor: pointer;
  }
  .glider div:hover >  img
  {
      transform: scale(1.05);
      cursor: pointer;
  }
  .glider div:active >  img
  {
      transform: scale(0.9);
      cursor: pointer;
  }

  .glider div img
  {
    width:100%;
    height: 100px;
    object-fit: contain;
  }

  .btn-white-with-border-l,
  .btn-white-with-border-r
  {
    color:var(--midGrey);
    /* border: 1px solid var(--midGrey); */
    box-shadow: var(--dropshadow);
    padding:2px;
    position: absolute;
    top:35%;
    width:40px;
    height:40px;
    margin: 0 20px;
    border-radius: 50%;
    background:white;
    display:flex;
    justify-content: center;
    align-items: center;
    font-weight: 500;
    font-size: 20px;;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none;
  }
  .btn-white-with-border-l
  {
    left:0;
  }
  .btn-white-with-border-r
  {
   
    right:0;
  }
  .item-img-gallery-navbar-container .btn-white-with-border-l
  {
    top:20%;
    margin:0;
    left:-50px;
  }
  .item-img-gallery-navbar-container .btn-white-with-border-r
  {
    margin:0;
    top:20%;
    right:-50px;

  }

  /* Details */
  .selected-item-details-container
  {
      grid-area:Details;
      width:1fr;
      display:flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-start;
      padding-left: 50px;
      border-left: 1px solid var(--midGrey);
      position: relative;
  }
  .selected-item-details-container > h1
  {
    width: 100%;
    background: var(--primaryThree);
    color:white;
    padding: 10px;
    border-radius: 0  8px 8px 0 ;
    font-weight: 300;
    font-size: 18px;
  }
  .supplier-img-container
  {
      width: 100px;
      height:100px;
      border-radius: 5px;
  }
  .supplier-img-container img
  {
      width: 100px;
      height:100px;
      object-fit: cover;
      object-position: center;
      border-radius: 5px;
  }

  .supplier-details-container
  {
      margin-top: 25px;
      width:100%;
      height:100px;
      display:flex;
  }
  .supplier-contact-details-container
  {
    display:flex;
    flex-direction: column;
    justify-content: space-between;
    height:100%;
      margin-left: 25px;
      flex:1;
  }
  .item-specific-details-container
  {
    margin-top: 25px;

      width:100%;
  }
  .item-price-container
  {
      display:flex;
      align-items: center;
      height:50px;
  }
  #item-normal-price,
  #item-LL-discount-price,
  #item-LL-discount-percentage
  {
    font-weight: 400;
  }
  #item-normal-price
  {
      /* width: 150px; */
      flex:1;
      height:100%;
      background: white;
      display:flex;
      align-items: center;
      padding-left: 10px;
  }
  #item-normal-price
  {
    font-size: 25px;
  }
  #item-LL-discount-price
  {
      width: 150px;
      height:100%;
      color:white;
      background: var(--secondary-apple);
      display:flex;
      align-items: center;
      -ms-flex: 1;
      flex:1;
      padding-left: 10px;
      font-size: 18px;
  }
  .item-price-container img
  {
      width: auto;
      height:100%;
  }

  #item-LL-discount-percentage
  {
    width:100%;
      max-width: 120px;
      height:100%;
      color:white;
      background: var(--secondary-orange);
      display:flex;
      justify-content: center;
      align-items: center;

      padding-left: 10px;
      font-size: 18px;
  }

  #item-detailed-description
  {
    margin-top: 25px;
    align-self: flex-end;
    width: 100%;
    height: auto;
    max-height: 300px;
    background: whitesmoke;
    padding: 10px;
    overflow: auto;
  }
  #item-detailed-description p
  {
    font-size: 13px;
  }
  #item-ratings-container,
  #item-sharings-container,
  #item-user-ratings-container
  {
    margin-top: 25px;
    padding-left: 10px;
    align-self: flex-end;
    display:flex;
    align-items: center;
    width: 100%;
    height: 40px;
    background: whitesmoke;
  }
  #item-sharings-container
  {
    padding:0;
  }
  #item-sharings-container button
  {
    flex:1;
    width:100%;
    height:100%;
    margin:0;
    outline:none;
    border:none;
    transition: 0.2s ease-out;
  }
  #item-sharings-container button:hover
  {
    transform: scaleY(1.05);
  }
  #item-sharings-container button:active
  {
    transform: scale(0.98);
  }
  #item-sharings-container button img
  {

    width:auto;
    height:100%;
    margin:0;
  }

  .btn-twitter
  {
    background: #39AAE0;
  }
  .btn-facebook
  {
    background: #3B5997;
  }
  .btn-email
  {
    background: #666666;
  }
  .btn-whatsapp
  {
    background: #0D9F16;
  }

  #item-ratings-container #star-container,
  #item-user-ratings-container #user-star-container
  {
    margin:0;
  }

  #item-ratings-container p 
  {
    font-size: 0.8em;
    color: var(--midGrey);
  }
 
  .review-container
  {
    width: 100%;
    padding: 0;
    display:flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .review-container p
  {
    margin: 10px 0;
  }
  .review-container span
  {
    font-weight: 600;
  }
  .review-container button
  {
    align-self: center;
  }
  #review-caption-input
  {
    width: 100%;
    max-width: 250px;
    padding: 10px 8px;
    box-sizing: border-box;
    border: 2px solid var(--midGrey);
    border-radius: 8px;
    margin: 10px 0;
    outline:none;
    font-weight: 700;
  }

  #review-textbox
  {
    width: 100%;
    max-width: 100%;
    color: var(--midGrey);
    padding: 12px 20px;
    height:100px;
    outline: none;
    box-sizing: border-box;
    border: 2px solid var(--midGrey);
    border-radius: 8px;
    resize: none;
    margin: 0 auto;
  }

  /* Features */
  .item-features-container
  {
    grid-area:Features;
      width: 100%;
      height: auto;
      /* max-width: 500px; */

  }
  .item-review-container
  {
    grid-area:Reviews;
    width: 100%;
  }

  .item-specs-container
  {
    grid-area:Specs;
    width: 100%;
    padding-left: 50px;
    /* max-width: 500px; */

  }
  .item-features-grid-containe,
  .item-spec-grid-container
  {
      width: 100%;
      max-width: 500px;
  }
  .feature-item,
  .review-item
  {
      display:flex;
      align-items: center;
      justify-content: flex-start;
      width:100%;
  }
  .review-item
  {
    align-items: flex-start;
    /* border-top: 1px solid var(--midGrey); */
    /* border-bottom: 1px solid var(--midGrey); */
    border-radius: 8px;
    padding: 5px;
    background:white;
    box-shadow: var(--dropshadow-mid);
    margin-top: 10px;
  }
  .feature-item p
  {
      width:100%;
      margin-left: 10px;
  }
  .bullet
  {
      width:5px;
      height:5px;
      background-color: rgb(51, 51, 51);
      border-radius: 50%;
      margin: 4px;
  }

  .item-review-grid-container
  { 
    padding: 10px;
  }
  .review-profile
  {
    width: 100%;
    max-width: 100px;
      display:flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
  }
  .review-profile img
  {
    width:75px; 
    height: 75px;
    border-radius: 50%;
    object-fit:cover;
    background: var(--midGrey);
  }
  .review-name
  {
    font-size: 0.8em;
    color: var(--primaryTwo);
  }
  .review-date
  {
    font-size: 0.7em;
  }
  .review-content
  {
    flex:1;
    display:flex;
    flex-direction: column;
    padding-left: 10px;
    justify-self: flex-start;
    align-self: flex-start;
    min-height: 125px;
    border-left: 1px solid var(--midGrey);
  }
  .review-heading
  {
    display: flex;
    align-items: center;
    position: relative;
    border-bottom: 1px solid var(--midGrey);
  }

  .review-star-container
  {
    position:relative;
  }
  .review-star-container svg
  {
    width: 40px;
    height:40px;
  }
  .star-count
  {
    position: absolute;
    left:15px;
    top:11px;
    font-weight: 500;
    color:white;
  }
  .review-text
  {
    margin-top: 10px;
    width: 100%;
    height: auto;
    font-size: 0.9em;
  }

  @media(max-width: 1200px)
  {
    .item-preview-container
    {
      grid-template-columns: 1fr;
      gap:25px;
      grid-template-areas: 
      'ImageContainer'
      'Details'
      'Features'
      'Specs'
      'Reviews';
      justify-content: center;
      
    }
    .item-img-gallery-contianer
    {
      grid-area: ImageContainer;
      position: relative;
      width: 100%;
      max-width: 700px;
      height:auto ;
      margin:0 auto;
    }
    .selected-item-details-container
    {
        grid-area:Details;
        width:1fr;
        display:flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
        padding-left: 0px;
        padding-bottom:25px;
        border: none;
        border-bottom: 1px solid var(--midGrey);
        position: relative;
    }
    .item-specs-container
    {
      padding-left: 0px;  
    }
  }
  @media(max-width: 800px)
  {

    .item-img-gallery-contianer
    {
      max-width: 500px;
      margin:0 auto;
    }
    .swipe {
      width: 100%;
      max-width: 500px;

    }
    .review-container
    {
      padding: 0 25px;
    }
    
  }
  @media(max-width: 550px)
  {
    .selected-item-details-container > h1
    {
      border-radius: 0;
    }
    .item-img-gallery-navbar-container
    {
      display:none;
    }
    .btn-white-with-border-l,
    .btn-white-with-border-r
    {
      top:450px;
    }
    .supplier-img-container
    {
        padding-left: 10px;

    }

    .item-preview-container
    {
      padding: 80px 0px;
    }

    .item-img-gallery-contianer
    {
      max-width: 400px;
      margin:0 auto;
    }
    .swipe {
      max-width: 400px;

    }
    #item-LL-discount-price
    {
        padding-left: 10px;
        font-size: 15px;
    }
    .item-price-container img
    {
        width: auto;
        height:80%;
    }
    .item-features-grid-container,
    .item-spec-grid-container
    {
        width: 100%;
        max-width: 500px;
        padding: 10px;
    }


    
  }
  @media(max-width: 400px)
  {
    .item-preview-container
    {
      padding: 70px 0px;
    }

    .item-img-gallery-contianer
    {
      max-width: 300px;
      margin:0 auto;
    }
    .swipe {
      max-width: 300px;

    }
    
  }