@layer fancybox, productWidget, desktop, mobile, base;
@import url(fancybox.css) layer(fancybox);
@import url(product-widget.css) layer(productWidget);
@import url(style.css) layer(base);
@layer desktop {
	html:not(.bvi-panel) *, html:not(.bvi-panel) ::after, html:not(.bvi-panel) ::before {
		box-sizing: unset;
	}
  h1 {
    text-align: center;
    color: #21293c;
	font-size: 22px;
  }
  .product {
    width: 100%;
    margin-left: 30px;
  }
  .product .product-widget__price {
    margin-top: 0;
    font-size: 30px;
  }
  .product .product-widget__status {
    margin-top: 0;
  }
  .product del {
    font-size: 24px;
  }
  .product ins {
    font-size: 30px;
  }
  .product-slider {
    width: 320px;
    height: 360px;
  }
  .product-slider_pagination {
    margin-top: 15px;
    width: 320px;
    height: 50px;
  }
  .product-slider_pagination img {
    opacity: 0.8;
    transition: 0.3s;
  }
  .product-slider_pagination .swiper-slide-thumb-active img {
    opacity: 1;
  }
  .product-slider_pagination .swiper-slide:hover {
    cursor: pointer;
  }
  .product-slider img,
  .product-slider_pagination img {
    width: 100%;
    height: 100%;
  }
  .product-slider img {
    object-fit: contain;
  }
  .product-slider_pagination img {
    object-fit: cover;
  }
  .product__info h3 {
    display: inline-block;
    margin-top: 30px;
    margin-left: 20px;
    margin-bottom: 0;
  	font-size: 17.72px;
   }
  .product__info ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    margin: 0;
    margin-top: 30px;
    margin-left: 20px;
    padding-left: 0;
  }
  .product__info li {
    list-style: none;
    line-height: 230%;
    font-size: 15px;
    color: #8888;
	font-weight: 600;
  }
  .product__info li span {
  	color: black;
	}
  .swiper .product__percents {
    margin-left: calc(100% - 70px);
  }
  .product-image-box {
    position: relative;
    border: 1px solid #777;
    height: 26vw;
  }
  .product-image-box__icon {
    display: none;
    position: absolute;
    left: calc(50% - 30px);
    top: calc(50% - 30px);
    font-size: 60px;
    color: black;
  }
  @media (hover: hover) {
    .product-image-box:hover .product-image-box__icon {
      display: flex;
    }
  }
  .product-image {
    object-fit: contain;
    height: 26vw;
    width: 26vw;
	transition: .3s;
  }
	.product-image:hover{
		filter: brightness(1.1);
	}
  #quantity-input {
    width: 50px;
  }
}
@layer mobile {
  @media (max-width: 1000px) {
    h1 {
      text-align: start;
    }
    .product-image-box .product__percents {
      margin-left: calc(100% - 3.6vw - 50px);
    }
    .product-image-box {
      height: auto;
    }
    .product-image {
      display: block;
      object-fit: contain;
      height: 100%;
      width: 100%;
    }
    .product-slider,
    .product-slider_pagination {
      width: 100%;
    }
    .product {
      margin-left: 0;
    }
    .product .product-widget__controls {
      align-items: flex-start;
    }
    .product-slider_pagination {
      height: 100px;
    }
    .product__info h3 {
      margin-top: 0;
      margin-left: 0;
      font-size: 15px;
    }
    .product__info ul {
      margin-top: 15px;
      margin-left: 0;
    }
    .product .product-widget__button_buy {
      margin-left: 0;
    }
    .product .product-widget__button_buy:first-child span {
      display: none;
    }
    .product .product-widget__controls > .flex:first-child {
      margin-bottom: 15px;
    }
  }

  @media (max-width: 500px) {
    .product h1 {
      font-size: 18px;
    }
    .product .product-widget__price {
      font-size: 25px;
    }
    .product del {
      font-size: 20px;
    }
    .product ins {
      font-size: 25px;
    }
    .product .product-widget__controls > .flex:first-child {
      justify-content: space-between;
    }
    .product .product-widget__controls > .flex {
      width: 100%;
    }
    .product .product-widget__button:last-child {
      width: 100%;
    }
  }
}