﻿/* Product gallery thumbs under main photo */
.infoCard .product-media{
  float:left;
  width:370px;
  margin:0;
}
.infoCard .product-media .picture{
  float:none;
  width:100%;
  height:325px;
  margin:0;
}
.infoCard .product-media .picture .pic{
  width:100%;
  height:100%;
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
}
.product-thumbs{
  display:flex;
  flex-wrap:nowrap;
  gap:8px;
  margin-top:10px;
  overflow-x:auto;
  padding:2px 2px 6px;
  -webkit-overflow-scrolling:touch;
}
.product-thumb{
  flex:0 0 68px;
  width:68px;
  height:68px;
  border:2px solid transparent;
  border-radius:5px;
  background-color:#fff;
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
  box-shadow:0 0 5px rgba(24,166,225,0.24);
  cursor:pointer;
  padding:0;
  outline:none;
}
.product-thumb:hover{
  border-color:rgba(24,166,225,0.55);
}
.product-thumb.is-active{
  border-color:#18a6e1;
}
.infoCard.has-gallery .txt,
.infoCard .product-media.has-gallery + .txt{
  /* keep default txt width calc; product-media mirrors .picture width */
}
@media (max-width: 991px){
  .infoCard .product-media{
    width:270px;
  }
  .infoCard .product-media .picture{
    width:100%;
    height:270px;
  }
}
@media (max-width: 767px){
  .infoCard .product-media{
    float:none;
    width:100%;
    max-width:400px;
    margin:0 auto;
    position:relative;
    left:auto;
    top:auto;
  }
  .infoCard .product-media .picture{
    height:325px;
    max-width:400px;
  }
  .product-thumbs{
    justify-content:center;
  }
}
@media (max-width: 480px){
  .infoCard .product-media .picture{
    height:260px;
  }
  .product-thumb{
    flex-basis:58px;
    width:58px;
    height:58px;
  }
}
