/* product info  */


@media (min-width: 768px){

  /*
  #product-info-block{
    max-height: 100vh;
    overflow: hidden;
    min-height: 600px;
  }*/

  #medias{
    position: sticky;
    top: 65px;
  }

}

#product-info-block .stars {
  margin-right: 70px;
}

.stars {
  height: 15px;
  width: 17.8px;
  position: relative;
  margin-right: 80px;
}


#product-info-block .media-wrapper{
  position: relative;
  width: 100%;
  overflow: hidden;
}

.img{
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  height: 100%;
  width: 100%;
}

#product-info-block .img{background-size: contain;}

.photo{
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  display: flex;
}

/*
@media (min-width: 768px){
  #product-info-block  .photo{
    max-width: 800px;
    min-height: 120vh;
    max-height: 950px;
  }
}
*/

#buy-block{
  background: #fff;
  overflow: hidden;
}

.selector-block{

}

#variants ol,
#variants ul{
  list-style: none;
  padding: 0;
}

#variants > ol {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 8px;
}

#variants ol > li > *{
  border-radius: 3px;
  border: 2px solid rgb(217, 217, 217);
  background-color: rgb(255, 255, 255);
  padding: .5rem;
  display: flex;
  font-size: 100%;
  flex-direction: column;
  height: 100%;
}

#variants ol > li span{
  display: block;
  line-height: 1.2;
  font-size:80%;
  padding-top: 2px;
}

#variants strong{border-color: #000!important;}

@media (hover: hover) {
  #variants a:hover{border-color: #000!important;}
}

#variants > ul {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  -webkit-box-pack: start;
  justify-content: flex-start;
}

#variants > ul > li > *{
  width: 65px;
  height: 65px;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  padding: 0px;
  margin: 0px 8px 8px 0px;
  border-radius: 50%;
  border: 2px solid rgb(217, 217, 217);
  flex-direction: column;
  line-height: 1;
  text-align: center;
}

#variants strong{cursor: default;}
#variants > ul strong span{
  display: block;
}
#variants > ul span{
  font-size: 80%;
}

#variants em{
  font-style:normal;
  border-color: #000!important;
}

#variants ol > li .disable,
#variants > ul > li .disable
{
  opacity: 0.6;
  cursor: default;
  color: #9f9f9f;
  border-color: #eee;
}



#colors{
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  -webkit-box-pack: start;
  justify-content: flex-start;
}

.color{
  width: 40px;
  height: 40px;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  padding: 0px;
  margin: 0px 8px 8px 0px;
  border-radius: 50%;
  border: none;
}

.color > div{
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  border-radius: 100%;
  border: none;
  padding: 0;
  width: inherit;
  height: inherit;
  background-size: cover;
  background-clip: content-box;
  border: 2px solid transparent;
}

.color.selected > div{
  border-color: #000;
  padding: 3px;
  transition: padding 0.1s ease-out 0s;
}

@media (hover: hover) {
  .color:not(.selected):hover > div{
    border-color: #000;
    padding: 3px;
    transition: padding 0.1s ease-out 0s;
  }

  .color:not(.selected):hover {
    cursor: pointer;
  }
}



/*
#purchase-button .button{
  padding: 1.2em 2em;
  font-weight: bold;
  border: 1px solid #000;
}
*/

#purchase-button .qty-selector{
  border-color: #000;
  background: #ffc452;
  color:#000!important;
}


.review{
  border: 1px solid #fff;
  background: #fff;
  border-radius: 5px;
}

#extra-info h4{margin: 4rem 0 1rem;}
#extra-info > p{margin-bottom: 8px;}

#extra-info ul,
#extra-info ol{
  list-style: none;
  padding-left: 0;
  padding-right: 10px;
}

#extra-info ol{margin-bottom: 3rem;}

#extra-info ol li{position: relative;}
#extra-info ol li p{padding-left: 40px;}
#extra-info ol li::before{
  content: '';
  position: absolute;
  display: block;
  width: 20px;
  height: 20px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom left;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI0LjAuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAxNyAxNC40IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxNyAxNC40OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe2ZpbGw6IzAxMDEwMTt9Cjwvc3R5bGU+Cjx0aXRsZT4wMDFBc3NldCAyPC90aXRsZT4KPGcgaWQ9IkxheWVyXzJfMV8iPgoJPGcgaWQ9IkxheWVyXzEtMiI+CgkJPHBhdGggY2xhc3M9InN0MCIgZD0iTTE0LjIsNy45YzAsMC0wLjEsMC0wLjEsMGMtMC4xLDAtMC4yLDAtMC4yLDAuMWwtMC43LDAuNmMtMC4xLDAuMS0wLjEsMC4xLTAuMSwwLjJ2Mi42CgkJCWMwLDAuOS0wLjcsMS42LTEuNiwxLjZjMCwwLDAsMCwwLDBIM2MtMC40LDAtMC45LTAuMi0xLjItMC41Yy0wLjMtMC4zLTAuNS0wLjctMC41LTEuMlYzYzAtMC40LDAuMi0wLjksMC41LTEuMgoJCQlDMi4xLDEuNSwyLjYsMS4zLDMsMS4zaDguNWMwLjIsMCwwLjMsMCwwLjUsMC4xaDAuMWMwLjEsMCwwLjIsMCwwLjItMC4xbDAuNS0wLjVjMC4xLTAuMSwwLjEtMC4yLDAuMS0wLjNjMC0wLjEtMC4xLTAuMi0wLjItMC4yCgkJCUMxMi4zLDAuMSwxMS45LDAsMTEuNCwwSDNDMi4yLDAsMS40LDAuMywwLjksMC45QzAuMywxLjQsMCwyLjIsMCwzdjguNWMwLDAuOCwwLjMsMS41LDAuOSwyLjFjMC42LDAuNiwxLjMsMC44LDIuMSwwLjhoOC41CgkJCWMxLjYsMCwzLTEuMywzLTIuOWMwLDAsMC0wLjEsMC0wLjFWOC4yQzE0LjUsOCwxNC40LDcuOSwxNC4yLDcuOUMxNC4yLDcuOSwxNC4yLDcuOSwxNC4yLDcuOXoiLz4KCQk8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMTYuOCwybC0xLjEtMS4xYy0wLjItMC4yLTAuNC0wLjItMC42LTAuMmMtMC4yLDAtMC40LDAuMS0wLjYsMC4yTDcuOCw3LjVMNS4yLDQuOEM1LDQuNyw0LjgsNC42LDQuNiw0LjYKCQkJQzQuNCw0LjYsNC4xLDQuNyw0LDQuOEwyLjksNmMtMC4zLDAuMy0wLjMsMC44LDAsMS4ybDQuNCw0LjRjMC4zLDAuMywwLjgsMC4zLDEuMiwwbDguMy04LjRDMTYuOSwzLDE3LDIuOCwxNywyLjYKCQkJQzE3LDIuNCwxNi45LDIuMiwxNi44LDJ6Ii8+Cgk8L2c+CjwvZz4KPC9zdmc+Cg==);
}

.rabbit-icon{
  margin-left: 4px;
  width: 30px;
  height: 30px;
}
.sun-icon,.night-icon{
  width: 20px;
  height: 20px;
}

#extra-info ul li{
  padding-left: 30px;
  position: relative;
  margin-bottom: .5rem;
}

#extra-info ul li::before{
  content: '';
  position: absolute;
  display: block;
  width: 8px;
  height: 8px;
  left:2px;
  top: 8px;
  border-radius: 50%;
  background:#000;
  /*
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center left;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNC4xNyAxMS4zNSI+PGRlZnM+PHN0eWxlPi5he2ZpbGw6IzAxMDEwMTt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPjAwMUFzc2V0IDY8L3RpdGxlPjxwYXRoIGNsYXNzPSJhIiBkPSJNMTMsMy4zMUg3LjYzYTIuMjksMi4yOSwwLDAsMCwxLTIuNjRBMS4zLDEuMywwLDAsMCw4LjQ4LjM0LjY3LjY3LDAsMCwwLDcuODQsMGMtLjE0LDAtLjE2LDAtLjU0LjNBMTQuNDEsMTQuNDEsMCwwLDEsNC44NCwyLjE2LDE3LjIyLDE3LjIyLDAsMCwwLDMsMy41NUgyLjM2QTIuMzYsMi4zNiwwLDAsMCwwLDUuOTFWOC4yN2EyLjU2LDIuNTYsMCwwLDAsMS44NCwyLjMyLDEuMjgsMS4yOCwwLDAsMSwuNTkuMjQsMy4xLDMuMSwwLDAsMCwxLjgyLjUySDhBMS4xOSwxLjE5LDAsMCwwLDksOS40NmguMjNhMS4xOSwxLjE5LDAsMCwwLC45NS0xLjg5LDEuMTcsMS4xNywwLDAsMCwxLjE4LTEuMTksMS4yMSwxLjIxLDAsMCwwLS4yNC0uN0gxM2ExLjE5LDEuMTksMCwwLDAsMC0yLjM3Wk0xMyw1LjJINi4zOGEuMjQuMjQsMCwwLDAsMCwuNDhoMy43OGEuNzEuNzEsMCwxLDEsMCwxLjQxSDYuNjFhLjI0LjI0LDAsMCwwLDAsLjQ4aDIuNkEuNzEuNzEsMCwxLDEsOS4yMSw5SDYuMzhhLjI0LjI0LDAsMSwwLDAsLjQ4SDhhLjcxLjcxLDAsMSwxLDAsMS40MUg0LjI1YTIuNzEsMi43MSwwLDAsMS0xLjM2LS4zMywyLjExLDIuMTEsMCwwLDEtLjI5LS43NWwwLS4xNWEuMjQuMjQsMCwwLDAtLjI4LS4xNi4yMy4yMywwLDAsMC0uMTYuMjhsMCwuMTIuMDkuMzFMMiwxMC4xMkEyLDIsMCwwLDEsLjQ3LDguMjdWNS45MUExLjg5LDEuODksMCwwLDEsMi4zNiw0aC4yM2wtLjExLjE3YTQuODUsNC44NSwwLDAsMS0uMjguNC4yMy4yMywwLDAsMCwwLC4zMy4zOS4zOSwwLDAsMCwuMTQsMCwuMjMuMjMsMCwwLDAsLjE5LS4xLDIuNDIsMi40MiwwLDAsMCwuMzMtLjQyQTUuODUsNS44NSwwLDAsMSwzLjI2LDQsMTIuNDQsMTIuNDQsMCwwLDEsNS4wOCwyLjU4LDE3LDE3LDAsMCwwLDcuNjEuNjlMNy44Ny40OGMuMDcsMCwuMTEsMCwuMjEuMTRzLjA5LjE3LjEyLjI0YTEuOSwxLjksMCwwLDEtLjg1LDIuMDhsLS41OS4zOWgwbC0uNDcuMjNhLjI1LjI1LDAsMCwwLS4wOS4zMWMwLC4xMi4yNi4xNC4zLjFsLjM4LS4xOUgxM0EuNzEuNzEsMCwxLDEsMTMsNS4yWiIvPjwvc3ZnPg==);
  */
}

.below-button .icon{
  width: 20px;
  height: 20px;
  margin-right: 4px;
}

.below-button ul{
  list-style: none;
  padding-left: 0;
}

.below-button ul li{
  display: inline-block;
  margin-right: 20px;
  margin-bottom: 6px;
}



.icons ul{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  grid-gap: 12px;
  list-style: none;
  padding: 0;
  font-size: 90%;
}

@media (max-width: 767.98px){
  .icons ul{font-size: 90%;}
}

.icons ul li{
  display: flex;
  align-items: center;
}

.icons .icon{
  width: 15px;
  height: 15px;
  margin-right: 8px;
}


.reviews-head{
  /*display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  grid-template-columns: 200px 1fr 1fr;
  grid-gap: 1rem;*/
}

.reviews-head > div:last-child > div{
  justify-content: flex-end;
}

.reviews-head > div:first-child{min-width: 150px;}

@media (max-width: 767.98px){
  .reviews-head > div:first-child{flex: 1 1;}
  .reviews-head > div:last-child{
    justify-content: center;
    width: 100%;
  }
  .reviews-head > div:first-child{min-width: 130px;}
  .reviews-head > div:last-child .button{width: 100%;}
}



.extra-info-head{padding-right: 40px; cursor: pointer;}
.extra-info-head::after {
    content: '+';
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg) scale(1.1);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg) scale(1.1);
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    align-items: center;
    display: flex;
    justify-content: center;
    font-size: 1.5rem;
}

.extra-info-head.collapsed::after {
    -moz-transform: none;
    -webkit-transform: none;
    -o-transform: none;
    -ms-transform: none;
    transform: none;
}

.media-wrapper{
  position: relative;
  width: 100%;
  overflow: hidden;
}

.media-wrapper{
  height: 0;
  padding-bottom: 100%;
}

#routine .product-block{position: relative;}

#routine h6{
  position: absolute;
  top: 8px;
  left:14px;
  z-index: 1;
}

#gallery-thumbs {justify-content: center;}
#gallery-thumbs > div{height: 60px;cursor: pointer;}
#gallery-thumbs .thumb{border: 2px solid #333;width: 100%;max-width: 65px;position:relative;}
#gallery-thumbs .thumb:not(.active){opacity: .5; border-color: #fff;}

@media (hover: hover) {
  #gallery-thumbs .thumb:hover:not(.active){opacity: 1;}
}


#medias .swiper-button-next{right:-8px;}
#medias .swiper-button-prev{left:-8px;}

@media (max-width: 767.98px) {
  #medias .swiper-button-next,
  #medias .swiper-button-prev {margin: 10px 0;}
}

@media (min-width: 768px) {
  #medias .swiper-button-next{right:6px;top: 24px;border:0;padding: 12px;}
  #medias .swiper-button-prev{left:6px;top: 24px;border:0;padding: 12px;}
}

#medias .swiper-button-next,
#medias .swiper-button-prev{
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIyLjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA4NS4xIDY4LjMiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDg1LjEgNjguMzsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxwYXRoIGQ9Ik00MS4zLDEzLjJMMjIuOCwzMS42aDQ5LjN2NUgyMi44bDE4LjUsMTguNGwtMy43LDMuN0wxMi45LDM0LjFMMzcuNiw5LjVMNDEuMywxMy4yeiIvPgo8L2c+Cjwvc3ZnPg==);
  background-repeat: no-repeat;
  background-position: center;
}

#medias .swiper-pagination{
  padding: 15px;
  top: 0;
  bottom: auto;
  width: auto;
  right: 40px;
  left: 40px;
}

@media (max-width: 767.98px) {
  #medias{margin-bottom: 1.5rem;}
  #medias:not(.single) .swiper-slide{max-width: 85%;}
}

.swiper-scrollbar{background: transparent!important;}

#routine .swiper-container.disable .swiper-wrapper {grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));  grid-gap: 14px;}


@media (max-width: 767.98px) {
  #routine .swiper-slide{max-width: 80%;}
  #routine .swiper-slide:first-child {margin-left: 1.5rem;}
  #routine .swiper-slide:last-child {margin-right: 1.5rem;}
}

#extra-info a {border-bottom: 1px solid;}